git ssb

2+

mixmix / ticktack



Tree: 2034e26ec445a1737076fd296563818d32051af1

Files: 2034e26ec445a1737076fd296563818d32051af1 / styles / mixins.js

3366 bytesRaw
1const nest = require('depnest')
2const { assign } = Object
3
4exports.gives = nest('styles.mixins')
5
6exports.create = (api) => {
7 return nest('styles.mixins', (sofar = {}) => {
8 return assign(sofar, { mainMixins })
9 })
10}
11
12const mainMixins = `
13$fontSerif {
14 font-family: Georgia,Cambria,"Times New Roman",Times,serif
15}
16
17$fontSansSerif {
18 font-family: "Lucida Sans",Geneva,Arial,sans-serif
19}
20
21$fontBasic {
22 color: rgba(0,0,0,.84)
23 $fontSansSerif
24 font-size: 1rem
25 line-height: 1.2
26}
27
28$fontTitle {
29 $fontSansSerif
30 font-size: 2.5rem
31}
32
33$maxWidth {
34 max-width: 1000px
35}
36
37$maxWidthSmaller {
38 max-width: 40rem
39}
40
41$colorPrimary {
42 color: white
43 background-color: #2f63ad
44
45 (a) {
46 color: #5c6bc0
47 }
48}
49
50$colorMessagePrimary {
51 background-color: #7eaaea
52
53 (a) {
54 color: #0b4fe7
55 }
56}
57
58$colorFontBasic {
59 color: #222
60}
61
62$colorFontPrimary {
63 color: #2f63ad
64}
65
66$colorFontSubtle {
67 color: hsla(0, 0%, 52%, 1)
68}
69
70$backgroundPrimary {
71 background-color: #f5f6f7
72}
73
74$backgroundPrimaryText {
75 background-color: #fff
76}
77
78$backgroundSelected {
79 background-color: #f0f1f2
80}
81
82$borderPrimary {
83 border: 1px #2f63ad solid
84}
85
86$borderBottomLight {
87 border-bottom: 1px rgba(224, 224, 224 , 0.8) solid
88}
89
90$circleTiny {
91 min-width: 2rem
92 min-height: 2rem
93 width: 2rem
94 height: 2rem
95 border-radius: 1rem
96}
97
98$circleSmall {
99 min-width: 2.8rem
100 min-height: 2.8rem
101 width: 2.8rem
102 height: 2.8rem
103 border-radius: 4rem
104}
105$circleHalfSmall {
106 min-width: 1.4rem
107 min-height: 1.4rem
108 width: 1.4rem
109 height: 1.4rem
110 border-radius: 2rem
111}
112
113$circleMedium {
114 min-width: 3.5rem
115 min-height: 3.5rem
116 width: 3.5rem
117 height: 3.5rem
118 border-radius: 4rem
119}
120
121$circleLarge {
122 min-width: 8rem
123 min-height: 8rem
124 width: 8rem
125 height: 8rem
126 border-radius: 8rem
127}
128
129$markdownSmall {
130 div.Markdown {
131 h1, h2, h3, h4, h5, h6, p {
132 font-size: 1rem
133 font-weight: 300
134 margin: 0
135 }
136 (img.emoji) {
137 height: 1rem
138 }
139 }
140 h1, h2, h3, h4, h5, h6, p {
141 font-size: 1rem
142 font-weight: 300
143 margin: 0
144 }
145 (img.emoji) {
146 height: 1rem
147 }
148}
149
150$markdownLarge {
151 div.Markdown {
152 h1, h2, h3, h4, h5, h6, p {
153 font-size: 1.5rem
154 font-weight: 300
155 margin: 0
156 }
157 }
158 h1, h2, h3, h4, h5, h6, p {
159 font-size: 1.5rem
160 font-weight: 300
161 margin: 0
162 }
163 (img.emoji) {
164 height: 1.5rem
165 }
166}
167
168$markdownBold {
169 div.Markdown {
170 h1, h2, h3, h4, h5, h6, p {
171 font-weight: bold
172 }
173 }
174 h1, h2, h3, h4, h5, h6, p {
175 font-weight: bold
176 }
177}
178
179$markdownBlog {
180 $fontSerif
181 line-height: 1.58
182
183 h1 {
184 font-size: 2.3rem
185 }
186
187 h1, h2, h3, h4, h5, h6 {
188 $fontSansSerif
189 letter-spacing: -.015rem
190 }
191
192 h1, h2, h3, h4 {
193 margin: 2rem 0 .5rem 0
194 }
195
196 p {
197 margin: 0 0 1rem 0
198 }
199
200 font-size: 1.25rem
201}
202
203$borderSubtle {
204 border: 1px solid #b9b9b9
205}
206
207$roundLeft {
208 border-top-left-radius: 1.2rem
209 border-bottom-left-radius: 1.2rem
210}
211
212$roundRight {
213 border-top-right-radius: 1.2rem
214 border-bottom-right-radius: 1.2rem
215}
216
217$roundTop {
218 border-top-left-radius: 1.2rem
219 border-top-right-radius: 1.2rem
220}
221
222$roundBottom {
223 border-bottom-left-radius: 1.2rem
224 border-bottom-right-radius: 1.2rem
225}
226
227$code {
228 background-color: #f5f5f5
229 color: #c121dc
230 border: 1px solid #e6e6e6
231 border-radius: 2px
232}
233
234$dontSelect {
235 user-select: none !important
236 -webkit-touch-callout: none !important
237}
238`
239

Built with git-ssb-web