82 lines
2.7 KiB
Stylus
82 lines
2.7 KiB
Stylus
@import '../constants'
|
|
|
|
:local(.root)
|
|
z-index : 1
|
|
display : inline-block
|
|
position : relative
|
|
overflow : hidden
|
|
font-weight : FONT_WEIGHT_NORMAL
|
|
text-align : center
|
|
text-decoration : none
|
|
white-space : nowrap
|
|
border : none
|
|
transition-property : background-color, box-shadow
|
|
transition-duration : ANIMATION_DURATION
|
|
transition-timing-function : ANIMATION_EASE
|
|
|
|
&.raised, &.flat
|
|
padding : (SPACE / 2) (SPACE / 1.25)
|
|
font-size : FONT_SIZE_SMALL
|
|
text-transform : uppercase
|
|
border-radius : (SPACE / 8)
|
|
> *
|
|
vertical-align : middle
|
|
> [data-react-toolbox='icon']
|
|
font-size : FONT_SIZE_BIG
|
|
margin-right : (SPACE / 2)
|
|
> abbr
|
|
font-weight : FONT_WEIGHT_BOLD
|
|
&.anchor
|
|
width : 100%
|
|
|
|
&.flat
|
|
background-color : transparent
|
|
&:not(.primary):not(.accent)
|
|
> [data-react-toolbox='ripple']
|
|
background-color : alpha(TEXT, 12.5%)
|
|
&.primary
|
|
color : PRIMARY
|
|
> [data-react-toolbox='ripple']
|
|
background-color : alpha(PRIMARY, 12.5%)
|
|
&.accent
|
|
color : ACCENT
|
|
> [data-react-toolbox='ripple']
|
|
background-color : alpha(ACCENT, 12.5%)
|
|
|
|
&.floating
|
|
width : BUTTON_CIRCLE_HEIGHT
|
|
height : BUTTON_CIRCLE_HEIGHT
|
|
font-size : (BUTTON_CIRCLE_HEIGHT / 2.25)
|
|
border-radius : 50%
|
|
> [data-react-toolbox='icon']
|
|
line-height : BUTTON_CIRCLE_HEIGHT
|
|
|
|
// Overrides
|
|
&[disabled]
|
|
color : darken(DIVIDER, 25%)
|
|
background-color : DIVIDER
|
|
|
|
&:not([disabled])
|
|
cursor : pointer
|
|
&:hover, &:active, &:focus
|
|
outline : 0
|
|
&:not(.flat)
|
|
box-shadow ZDEPTH_SHADOW_1
|
|
&:not(.primary):not(.accent)
|
|
color : TEXT
|
|
background-color : WHITE
|
|
&.focused
|
|
box-shadow : ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
|
|
&.primary, &.accent
|
|
color : WHITE
|
|
&.primary
|
|
background-color : PRIMARY
|
|
&.accent
|
|
background-color : ACCENT
|
|
|
|
&:not(.primary):not(.accent) > [data-react-toolbox='ripple']
|
|
background-color : DIVIDER
|
|
|
|
> *
|
|
pointer-events: none
|