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
$fontBasic {
14
  font-family: arial
15
  line-height: 1.2
16
  font-size: 1rem
17
}
18
19
$maxWidth {
20
  max-width: 1000px
21
}
22
23
$maxWidthSmaller {
24
  max-width: 40rem
25
}
26
27
$colorPrimary {
28
  color: white
29
  background-color: #2f63ad
30
31
  (a) {
32
    color: #5c6bc0
33
  }
34
}
35
36
$colorMessagePrimary {
37
  background-color: #7eaaea
38
39
  (a) {
40
    color: #0b4fe7
41
  }
42
}
43
44
$colorFontBasic {
45
  color: #222
46
}
47
48
$colorFontPrimary {
49
  color: #2f63ad
50
}
51
52
$colorFontSubtle {
53
  color: #999
54
}
55
56
$backgroundPrimary {
57
  background-color: #f5f6f7
58
}
59
60
$backgroundPrimaryText {
61
  background-color: #fff
62
}
63
64
$backgroundSelected {
65
  background-color: #f0f1f2
66
}
67
68
$borderPrimary {
69
  border: 1px #2f63ad solid
70
}
71
72
$borderBottomLight {
73
  border-bottom: 1px rgba(224, 224, 224 , 0.8) solid
74
}
75
76
$circleTiny {
77
  min-width: 2rem
78
  min-height: 2rem
79
  width: 2rem
80
  height: 2rem
81
  border-radius: 1rem
82
}
83
84
$circleSmall {
85
  min-width: 2.8rem
86
  min-height: 2.8rem
87
  width: 2.8rem
88
  height: 2.8rem
89
  border-radius: 4rem
90
}
91
$circleHalfSmall {
92
  min-width: 1.4rem
93
  min-height: 1.4rem
94
  width: 1.4rem
95
  height: 1.4rem
96
  border-radius: 2rem
97
}
98
99
$circleMedium {
100
  min-width: 3.5rem
101
  min-height: 3.5rem
102
  width: 3.5rem
103
  height: 3.5rem
104
  border-radius: 4rem
105
}
106
107
$circleLarge {
108
  min-width: 8rem
109
  min-height: 8rem
110
  width: 8rem
111
  height: 8rem
112
  border-radius: 8rem
113
}
114
115
$markdownSmall {
116
  div.Markdown {
117
    h1, h2, h3, h4, h5, h6, p {
118
      font-size: .9rem
119
      font-weight: 300
120
      margin: 0
121
    }
122
    (img.emoji) {
123
      height: .9rem
124
    }
125
  }
126
  h1, h2, h3, h4, h5, h6, p {
127
    font-size: .9rem
128
    font-weight: 300
129
    margin: 0
130
  }
131
  (img.emoji) {
132
    height: .9rem
133
  }
134
}
135
136
$markdownLarge {
137
  div.Markdown {
138
    h1, h2, h3, h4, h5, h6, p {
139
      font-size: 1.5rem
140
      font-weight: 300
141
      margin: 0
142
    }
143
  }
144
  h1, h2, h3, h4, h5, h6, p {
145
    font-size: 1.5rem
146
    font-weight: 300
147
    margin: 0
148
  }
149
  (img.emoji) { 
150
    height: 1.5rem
151
  }
152
}
153
154
$markdownBold {
155
  div.Markdown {
156
    h1, h2, h3, h4, h5, h6, p {
157
      font-weight: bold
158
    }
159
  }
160
  h1, h2, h3, h4, h5, h6, p {
161
    font-weight: bold
162
  }
163
}
164
165
$borderSubtle {
166
  border: 1px solid #b9b9b9
167
}
168
169
$roundLeft {
170
  border-top-left-radius: 1.2rem
171
  border-bottom-left-radius: 1.2rem
172
}
173
174
$roundRight {
175
  border-top-right-radius: 1.2rem
176
  border-bottom-right-radius: 1.2rem
177
}
178
179
$roundTop {
180
  border-top-left-radius: 1.2rem
181
  border-top-right-radius: 1.2rem
182
}
183
184
$roundBottom {
185
  border-bottom-left-radius: 1.2rem
186
  border-bottom-right-radius: 1.2rem
187
}
188
189
$code {
190
  background-color: #f5f5f5
191
  color: #c121dc
192
  border: 1px solid #e6e6e6
193
  border-radius: 2px
194
}
195
196
$dontSelect {
197
  user-select: none !important
198
  -webkit-touch-callout: none !important
199
}
200
`
201