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
$circleTiny {
73
  min-width: 2rem
74
  min-height: 2rem
75
  width: 2rem
76
  height: 2rem
77
  border-radius: 1rem
78
}
79
80
$circleSmall {
81
  min-width: 2.8rem
82
  min-height: 2.8rem
83
  width: 2.8rem
84
  height: 2.8rem
85
  border-radius: 4rem
86
}
87
$circleHalfSmall {
88
  min-width: 1.4rem
89
  min-height: 1.4rem
90
  width: 1.4rem
91
  height: 1.4rem
92
  border-radius: 2rem
93
}
94
95
$circleMedium {
96
  min-width: 3.5rem
97
  min-height: 3.5rem
98
  width: 3.5rem
99
  height: 3.5rem
100
  border-radius: 4rem
101
}
102
103
$circleLarge {
104
  min-width: 8rem
105
  min-height: 8rem
106
  width: 8rem
107
  height: 8rem
108
  border-radius: 8rem
109
}
110
111
$markdownSmall {
112
  div.Markdown {
113
    h1, h2, h3, h4, h5, h6, p {
114
      font-size: .9rem
115
      font-weight: 300
116
      margin: 0
117
    }
118
    (img.emoji) {
119
      height: .9rem
120
    }
121
  }
122
  h1, h2, h3, h4, h5, h6, p {
123
    font-size: .9rem
124
    font-weight: 300
125
    margin: 0
126
  }
127
  (img.emoji) {
128
    height: .9rem
129
  }
130
}
131
132
$markdownLarge {
133
  div.Markdown {
134
    h1, h2, h3, h4, h5, h6, p {
135
      font-size: 1.5rem
136
      font-weight: 300
137
      margin: 0
138
    }
139
  }
140
  h1, h2, h3, h4, h5, h6, p {
141
    font-size: 1.5rem
142
    font-weight: 300
143
    margin: 0
144
  }
145
  (img.emoji) { 
146
    height: 1.5rem
147
  }
148
}
149
150
$markdownBold {
151
  div.Markdown {
152
    h1, h2, h3, h4, h5, h6, p {
153
      font-weight: bold
154
    }
155
  }
156
  h1, h2, h3, h4, h5, h6, p {
157
    font-weight: bold
158
  }
159
}
160
161
$borderSubtle {
162
  border: 1px solid #b9b9b9
163
}
164
165
$roundLeft {
166
  border-top-left-radius: 1.2rem
167
  border-bottom-left-radius: 1.2rem
168
}
169
170
$roundRight {
171
  border-top-right-radius: 1.2rem
172
  border-bottom-right-radius: 1.2rem
173
}
174
175
$roundTop {
176
  border-top-left-radius: 1.2rem
177
  border-top-right-radius: 1.2rem
178
}
179
180
$roundBottom {
181
  border-bottom-left-radius: 1.2rem
182
  border-bottom-right-radius: 1.2rem
183
}
184
185
$code {
186
  background-color: #f5f5f5
187
  color: #c121dc
188
  border: 1px solid #e6e6e6
189
  border-radius: 2px
190
}
191
192
$dontSelect {
193
  user-select: none !important
194
  -webkit-touch-callout: none !important
195
}
196
`
197