71 lines
2.2 KiB
Stylus
71 lines
2.2 KiB
Stylus
@import '../constants'
|
|
|
|
SIZE = (5 * UNIT)
|
|
OFFSET = (SPACE / 1.25)
|
|
|
|
:local(.navigation)
|
|
padding : OFFSET = (OFFSET / 2)
|
|
> *
|
|
pointer-events : all
|
|
padding-left : OFFSET
|
|
padding-right : OFFSET
|
|
box-shadow : none !important
|
|
&:hover
|
|
background-color : rgba(0,0,0,0.1) !important
|
|
|
|
:local(.figure)
|
|
display-flex()
|
|
flex-direction : column
|
|
justify-content : flex-end
|
|
flex-grow : 2
|
|
min-height : (SIZE / 2)
|
|
background-size : cover
|
|
> *
|
|
font-weight : FONT_WEIGHT_NORMAL
|
|
|
|
:local(.root)
|
|
display-flex()
|
|
flex-direction column
|
|
position : relative
|
|
overflow : hidden
|
|
width : SIZE
|
|
box-shadow : ZDEPTH_SHADOW_1
|
|
background : WHITE
|
|
|
|
// -- Children
|
|
*:not(button)
|
|
pointer-events : none
|
|
> *:not(:local(.ripple)):not(:local(.navigation))
|
|
padding : OFFSET
|
|
&:not(.color):not(.image) > :local(.ripple)
|
|
background-color : DIVIDER
|
|
&:not(.color) > *:not(figure), > *:not(:last-child)
|
|
box-shadow : 0 1px darken(BACKGROUND, 5%)
|
|
> :local(.figure)
|
|
|
|
|
|
// -- Overrides
|
|
&.touch
|
|
cursor : pointer
|
|
&:hover, &:active
|
|
box-shadow : ZDEPTH_SHADOW_2
|
|
&.image > :local(.figure)
|
|
text-shadow : ZDEPTH_SHADOW_1
|
|
&.image, &.color
|
|
> :local(.figure)
|
|
color : WHITE
|
|
&.loading
|
|
cursor : none
|
|
-webkit-filter : grayscale(100%)
|
|
&, &:hover
|
|
box-shadow : 0 0 0 1px DIVIDER
|
|
> :local(.ripple)
|
|
width : SIZE = (SIZE * 2)
|
|
height : SIZE
|
|
&.small > :local(.figure)
|
|
min-height : 0px
|
|
&.square
|
|
height : SIZE
|
|
&.wide
|
|
width : (SIZE * 2)
|