FreeTube/src/renderer/components/ft-icon-button/ft-icon-button.sass

107 lines
2.1 KiB
Sass
Raw Normal View History

2020-06-16 18:50:46 +02:00
.ftIconButton
display: flex
flex-flow: row wrap
justify-content: space-evenly
position: relative
2020-06-23 17:47:19 +02:00
user-select: none
2020-06-16 18:50:46 +02:00
.iconButton
width: 1em
height: 1em
border-radius: 50%
cursor: pointer
transition: background 0.15s ease-out
&.shadow
box-shadow: 0 1px 2px rgba(0,0,0,.5)
&.base
background-color: var(--card-bg-color)
color: var(--primary-text-color)
&:hover
background-color: var(--side-nav-hover-color)
&:active
background-color: var(--side-nav-active-color)
&.base-no-default
&:hover
background-color: var(--side-nav-hover-color)
&:active
background-color: var(--side-nav-active-color)
2020-06-16 18:50:46 +02:00
&.primary
background-color: var(--primary-color)
color: var(--text-with-main-color)
&:hover
background-color: var(--primary-color-hover)
&:active
background-color: var(--primary-color-active)
&.secondary
background-color: var(--accent-color)
color: var(--text-with-accent-color)
&:hover
background-color: var(--accent-color-hover)
&:active
background-color: var(--accent-color-active)
&.favorite
color: var(--favorite-icon-color)
2020-06-16 18:50:46 +02:00
.iconDropdown
display: none
2020-06-16 18:50:46 +02:00
position: absolute
text-align: center
list-style-type: none
2020-06-17 16:02:31 +02:00
z-index: 3
2020-06-16 18:50:46 +02:00
margin-top: 45px
font-size: 12px
box-shadow: 0 1px 2px rgba(0,0,0,.5)
background-color: var(--side-nav-color)
color: var(--secondary-text-color)
user-select: none
&:focus
display: inline
2020-06-16 18:50:46 +02:00
&.left
2020-07-12 01:11:40 +02:00
right: calc(50% - 10px)
2020-06-16 18:50:46 +02:00
&.right
2020-07-12 01:11:40 +02:00
left: calc(50% - 10px)
2020-06-16 18:50:46 +02:00
.list
margin: 0
padding: 0
list-style-type: none
.listItem
padding: 8px 10px
2020-06-16 18:50:46 +02:00
margin: 0
white-space: nowrap
cursor: pointer
transition: background 0.2s ease-out
&:hover
background-color: var(--side-nav-hover-color)
transition: background 0.2s ease-in
&:active
background-color: var(--side-nav-active-color)
transition: background 0.1s ease-in
.listItemDivider
width: 95%
margin: 1px auto
border-top: 1px solid var(--tertiary-text-color)
// Too "visible" with current color
opacity: 50%