-
Notifications
You must be signed in to change notification settings - Fork 0
/
molecule.navigation.styl
66 lines (57 loc) · 2.41 KB
/
molecule.navigation.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
[data-atoms=app]
> [data-organism-article] > [data-molecule-navigation]
background-color: darken(THEME, 7.5%)
transition margin-top (ANIMATION_DURATION / 3)
box-shadow 0 SHADOW_HEIGHT SHADOW_OPACITY
> [data-atom-button]
> abbr
color: lighten(THEME, 75%)
font-weight: FONT_WEIGHT_NORMAL
&.active
box-shadow: inset 0 -.25rem lighten(THEME, 25%)
> abbr
color: WHITE
> [data-organism-article] > [data-organism-header] [data-molecule-navigation] [data-atom-button]
color: lighten(THEME, 50%)
&:active
color: WHITE !important
> aside > [data-organism-header] [data-molecule-navigation] [data-atom-button]
color: lighten(DARK, 75%)
&:active
color: WHITE !important
> [data-organism-article] > [data-organism-section] [data-molecule-navigation] > [data-atom-button]
border-radius: 0
&:not(:first-child)
border-left: solid 1px rgba(0,0,0,0.05)
&:first-child
border-top-left-radius: BORDER_RADIUS
border-bottom-left-radius: BORDER_RADIUS
&:last-child
border-top-right-radius: BORDER_RADIUS
border-bottom-right-radius: BORDER_RADIUS
> [data-organism-article] > [data-organism-footer] [data-molecule-navigation] [data-atom-button], > [data-organism-article] > [data-molecule-navigation] [data-atom-button]
color: lighten(DARK, 35%)
&:active, &.active
color: WHITE
> [data-organism-article] > [data-organism-footer] [data-molecule-navigation] [data-atom-button]
&.active
background-color: darken(DARK, 25%)
> [data-system=dialog] [data-organism-dialog]
> [data-organism-footer] [data-atom-button]
font-weight: FONT_WEIGHT_NORMAL
text-transform: uppercase
&.default
color: THEME
&.accept > [data-organism-footer] [data-atom-button].default
color: ACCEPT
&.cancel > [data-organism-footer] [data-atom-button].default
color: CANCEL
&.warning > [data-organism-footer] [data-atom-button].default
color: WARNING
@media screen and (min-width: 1024px)
[data-atoms=app]
> [data-organism-article] > [data-organism-header] [data-molecule-navigation] [data-atom-button]:hover
color: WHITE !important
> [data-organism-article] > [data-organism-footer] [data-molecule-navigation] [data-atom-button], > [data-organism-article] > [data-molecule-navigation] [data-atom-button]
&:hover
color: WHITE