99 lines
1.9 KiB
Sass
99 lines
1.9 KiB
Sass
.ftIconButton
|
|
display: flex
|
|
flex-flow: row wrap
|
|
justify-content: space-evenly
|
|
position: relative
|
|
user-select: none
|
|
|
|
.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)
|
|
|
|
&.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)
|
|
|
|
.iconDropdown
|
|
display: none
|
|
position: absolute
|
|
text-align: center
|
|
list-style-type: none
|
|
z-index: 3
|
|
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
|
|
|
|
&.left
|
|
right: calc(50% - 10px)
|
|
|
|
&.right
|
|
left: calc(50% - 10px)
|
|
|
|
.list
|
|
margin: 0
|
|
padding: 0
|
|
list-style-type: none
|
|
|
|
.listItem
|
|
padding: 10px
|
|
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
|