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