UNPKG

atomatic

Version:

An easy to use build and development tool for Atomic Design Systems, that works with rollup.js, Browserify, webpack and many more...

github.com/stefan-lehmann/atomatic

stefan-lehmann/atomatic

131 lines (109 loc) • 2.67 kB
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
.off-canvas &__toggle absolute($paddingSmall, $paddingSmall) display block z-index 3 padding $paddingSmall padding-top ($paddingSmall - 2px) width 20px height 20px font-size 26px font-weight 300 line-height 20px box-sizing content-box vertical-align middle transition all $timingFast ease-in-out 0s color $colorTextInvert cursor pointer text-align center &:after content '×' &&--open right -20px height 23px font-size 20px font-weight normal background-color $colorPrimary box-shadow $shadowDropDefault border-top-right-radius $borderRadiusDefault border-bottom-right-radius $borderRadiusDefault z-index -1 transition all $timingFast ease-in-out $timingNormal &:after content '»' &:hover &:focus right (-20px - (2 * $paddingSmall)) &__head flex-basis 80px background-color $colorPrimary color $colorTextInvert display flex flex-direction row align-items center justify-content center text-align center position relative h2 padding $paddingLayout font-size 20px font-weight 300 svg absolute(50%,null,null,50%) width 100% opacity .85 transform translate(-50%,-50%) rotateY(180deg) &__body flex 2 2 overflow-y auto &__footer flex 0 2 padding $paddingNormal font-size 11.2px .nav font-size 15px &__list margin-bottom $paddingNormal &__link display block padding $paddingNormal $paddingXLarge $paddingNormal $paddingLarge color inherit cursor pointer position relative line-height 20px background-color transparent transition background-color $timingNormal ease-in-out white-space nowrap text-overflow ellipsis overflow hidden max-width 240px &&--level0 font-weight bold &&--level1 font-size 15px padding-left $paddingLarge*2 &&--level2 font-size 14px padding-left $paddingLarge*3 padding-right $paddingNormal white-space initial overflow initial &&--current color $hexMaroonFlush &&--filtered font-weight normal padding-top $paddingSmall padding-bottom @padding-top &:hover &:focus background $hexAlto &-icon width 18px height @width position absolute right $paddingNormal top s('calc(50% - %s)', @height/2) transform rotate(-180deg) transition transform $timingNormal ease-in-out .nav__link.nav__link--active & transform rotate(0)