git ssb

1
const nest = require('depnest')
2
const { assign } = Object
3
4
exports.gives = nest('styles.mixins')
5
6
exports.create = (api) => {
7
  return nest('styles.mixins', (sofar = {}) => {
8
    return assign(sofar, { mainMixins })
9
  })
10
}
11
12
const mainMixins = `
13
$fontSerif {
14
  font-family: Georgia,Cambria,"Times New Roman",Times,serif
15
}
16
17
$fontSansSerif {
18
  font-family: "Lucida Grande","Lucida Sans Unicode","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: #999
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