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, h2, h3, h4, h5, h6 {
184
    $fontSansSerif
185
    letter-spacing: -.015rem
186
  }
187
188
  font-size: 1.25rem
189
}
190
191
$borderSubtle {
192
  border: 1px solid #b9b9b9
193
}
194
195
$roundLeft {
196
  border-top-left-radius: 1.2rem
197
  border-bottom-left-radius: 1.2rem
198
}
199
200
$roundRight {
201
  border-top-right-radius: 1.2rem
202
  border-bottom-right-radius: 1.2rem
203
}
204
205
$roundTop {
206
  border-top-left-radius: 1.2rem
207
  border-top-right-radius: 1.2rem
208
}
209
210
$roundBottom {
211
  border-bottom-left-radius: 1.2rem
212
  border-bottom-right-radius: 1.2rem
213
}
214
215
$code {
216
  background-color: #f5f5f5
217
  color: #c121dc
218
  border: 1px solid #e6e6e6
219
  border-radius: 2px
220
}
221
222
$dontSelect {
223
  user-select: none !important
224
  -webkit-touch-callout: none !important
225
}
226
`
227