spectre_scss 0.3.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (74) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +13 -0
  3. data/.rspec +2 -0
  4. data/.travis.yml +5 -0
  5. data/Gemfile +6 -0
  6. data/LICENSE.txt +21 -0
  7. data/README.md +48 -0
  8. data/Rakefile +34 -0
  9. data/bin/console +7 -0
  10. data/bin/setup +6 -0
  11. data/lib/spectre_scss.rb +5 -0
  12. data/lib/spectre_scss/engine.rb +4 -0
  13. data/lib/spectre_scss/version.rb +3 -0
  14. data/spectre_scss.gemspec +26 -0
  15. data/vendor/assets/stylesheets/spectre.scss +1 -0
  16. data/vendor/assets/stylesheets/spectre/spectre-exp.scss +16 -0
  17. data/vendor/assets/stylesheets/spectre/spectre-icons.scss +8 -0
  18. data/vendor/assets/stylesheets/spectre/spectre.scss +50 -0
  19. data/vendor/assets/stylesheets/spectre/src/_accordions.scss +34 -0
  20. data/vendor/assets/stylesheets/spectre/src/_animations.scss +20 -0
  21. data/vendor/assets/stylesheets/spectre/src/_asian.scss +33 -0
  22. data/vendor/assets/stylesheets/spectre/src/_autocomplete.scss +41 -0
  23. data/vendor/assets/stylesheets/spectre/src/_avatars.scss +77 -0
  24. data/vendor/assets/stylesheets/spectre/src/_badges.scss +70 -0
  25. data/vendor/assets/stylesheets/spectre/src/_bars.scss +71 -0
  26. data/vendor/assets/stylesheets/spectre/src/_base.scss +40 -0
  27. data/vendor/assets/stylesheets/spectre/src/_breadcrumbs.scss +29 -0
  28. data/vendor/assets/stylesheets/spectre/src/_buttons.scss +182 -0
  29. data/vendor/assets/stylesheets/spectre/src/_calendars.scss +206 -0
  30. data/vendor/assets/stylesheets/spectre/src/_cards.scss +39 -0
  31. data/vendor/assets/stylesheets/spectre/src/_carousels.scss +124 -0
  32. data/vendor/assets/stylesheets/spectre/src/_chips.scss +24 -0
  33. data/vendor/assets/stylesheets/spectre/src/_codes.scss +32 -0
  34. data/vendor/assets/stylesheets/spectre/src/_comparison-sliders.scss +114 -0
  35. data/vendor/assets/stylesheets/spectre/src/_dropdowns.scss +36 -0
  36. data/vendor/assets/stylesheets/spectre/src/_empty.scss +21 -0
  37. data/vendor/assets/stylesheets/spectre/src/_filters.scss +29 -0
  38. data/vendor/assets/stylesheets/spectre/src/_forms.scss +514 -0
  39. data/vendor/assets/stylesheets/spectre/src/_icons.scss +656 -0
  40. data/vendor/assets/stylesheets/spectre/src/_labels.scss +33 -0
  41. data/vendor/assets/stylesheets/spectre/src/_layout.scss +422 -0
  42. data/vendor/assets/stylesheets/spectre/src/_media.scss +70 -0
  43. data/vendor/assets/stylesheets/spectre/src/_menus.scss +56 -0
  44. data/vendor/assets/stylesheets/spectre/src/_meters.scss +57 -0
  45. data/vendor/assets/stylesheets/spectre/src/_mixins.scss +185 -0
  46. data/vendor/assets/stylesheets/spectre/src/_modals.scss +73 -0
  47. data/vendor/assets/stylesheets/spectre/src/_navbar.scss +29 -0
  48. data/vendor/assets/stylesheets/spectre/src/_navigation.scss +13 -0
  49. data/vendor/assets/stylesheets/spectre/src/_navs.scss +34 -0
  50. data/vendor/assets/stylesheets/spectre/src/_normalize.scss +437 -0
  51. data/vendor/assets/stylesheets/spectre/src/_pagination.scss +61 -0
  52. data/vendor/assets/stylesheets/spectre/src/_panels.scss +23 -0
  53. data/vendor/assets/stylesheets/spectre/src/_parallax.scss +131 -0
  54. data/vendor/assets/stylesheets/spectre/src/_popovers.scss +70 -0
  55. data/vendor/assets/stylesheets/spectre/src/_progress.scss +45 -0
  56. data/vendor/assets/stylesheets/spectre/src/_sliders.scss +93 -0
  57. data/vendor/assets/stylesheets/spectre/src/_steps.scss +70 -0
  58. data/vendor/assets/stylesheets/spectre/src/_tables.scss +45 -0
  59. data/vendor/assets/stylesheets/spectre/src/_tabs.scss +62 -0
  60. data/vendor/assets/stylesheets/spectre/src/_tiles.scss +38 -0
  61. data/vendor/assets/stylesheets/spectre/src/_timelines.scss +55 -0
  62. data/vendor/assets/stylesheets/spectre/src/_toasts.scss +41 -0
  63. data/vendor/assets/stylesheets/spectre/src/_tooltips.scss +77 -0
  64. data/vendor/assets/stylesheets/spectre/src/_typography.scss +127 -0
  65. data/vendor/assets/stylesheets/spectre/src/_utilities.scss +7 -0
  66. data/vendor/assets/stylesheets/spectre/src/_variables.scss +105 -0
  67. data/vendor/assets/stylesheets/spectre/src/utilities/_colors.scss +45 -0
  68. data/vendor/assets/stylesheets/spectre/src/utilities/_display.scss +47 -0
  69. data/vendor/assets/stylesheets/spectre/src/utilities/_divider.scss +50 -0
  70. data/vendor/assets/stylesheets/spectre/src/utilities/_loading.scss +34 -0
  71. data/vendor/assets/stylesheets/spectre/src/utilities/_position.scss +35 -0
  72. data/vendor/assets/stylesheets/spectre/src/utilities/_shapes.scss +7 -0
  73. data/vendor/assets/stylesheets/spectre/src/utilities/_text.scss +52 -0
  74. metadata +157 -0
@@ -0,0 +1,33 @@
1
+ // Labels
2
+ .label {
3
+ display: inline-block;
4
+ @include label-base();
5
+ @include label-variant(lighten($body-font-color, 5%), $bg-color);
6
+ line-height: 1;
7
+
8
+ &.label-rounded {
9
+ border-radius: 5rem;
10
+ padding-left: .4rem;
11
+ padding-right: .4rem;
12
+ }
13
+
14
+ &.label-primary {
15
+ @include label-variant($light-color, $primary-color);
16
+ }
17
+
18
+ &.label-secondary {
19
+ @include label-variant($primary-color, $secondary-color);
20
+ }
21
+
22
+ &.label-success {
23
+ @include label-variant($light-color, $success-color);
24
+ }
25
+
26
+ &.label-warning {
27
+ @include label-variant($light-color, $warning-color);
28
+ }
29
+
30
+ &.label-error {
31
+ @include label-variant($light-color, $error-color);
32
+ }
33
+ }
@@ -0,0 +1,422 @@
1
+ // Layout
2
+ .container {
3
+ margin-left: auto;
4
+ margin-right: auto;
5
+ padding-left: $layout-spacing;
6
+ padding-right: $layout-spacing;
7
+ width: 100%;
8
+ @extend .clearfix;
9
+
10
+ &.grid-xl {
11
+ max-width: $size-xl + 2 * strip-unit($layout-spacing) * $html-font-size;
12
+ }
13
+
14
+ &.grid-lg {
15
+ max-width: $size-lg + 2 * strip-unit($layout-spacing) * $html-font-size;
16
+ }
17
+
18
+ &.grid-md {
19
+ max-width: $size-md + 2 * strip-unit($layout-spacing) * $html-font-size;
20
+ }
21
+
22
+ &.grid-sm {
23
+ max-width: $size-sm + 2 * strip-unit($layout-spacing) * $html-font-size;
24
+ }
25
+
26
+ &.grid-xs {
27
+ max-width: $size-xs + 2 * strip-unit($layout-spacing) * $html-font-size;
28
+ }
29
+ }
30
+
31
+ // Responsive breakpoint system
32
+ .show-xs,
33
+ .show-sm,
34
+ .show-md,
35
+ .show-lg,
36
+ .show-xl {
37
+ display: none !important;
38
+ }
39
+
40
+ // Responsive grid system
41
+ .columns {
42
+ display: flex;
43
+ flex-wrap: wrap;
44
+ margin-left: -$layout-spacing;
45
+ margin-right: -$layout-spacing;
46
+
47
+ &.col-gapless {
48
+ margin-left: 0;
49
+ margin-right: 0;
50
+
51
+ & > .column {
52
+ padding-left: 0;
53
+ padding-right: 0;
54
+ }
55
+ }
56
+ &.col-oneline {
57
+ flex-wrap: nowrap;
58
+ overflow-x: auto;
59
+ }
60
+ }
61
+ .column {
62
+ flex: 1;
63
+ max-width: 100%;
64
+ padding-left: $layout-spacing;
65
+ padding-right: $layout-spacing;
66
+
67
+ &.col-12,
68
+ &.col-11,
69
+ &.col-10,
70
+ &.col-9,
71
+ &.col-8,
72
+ &.col-7,
73
+ &.col-6,
74
+ &.col-5,
75
+ &.col-4,
76
+ &.col-3,
77
+ &.col-2,
78
+ &.col-1 {
79
+ flex: none;
80
+ }
81
+ }
82
+ .col-12 {
83
+ width: 100%;
84
+ }
85
+ .col-11 {
86
+ width: 91.66666667%;
87
+ }
88
+ .col-10 {
89
+ width: 83.33333333%;
90
+ }
91
+ .col-9 {
92
+ width: 75%;
93
+ }
94
+ .col-8 {
95
+ width: 66.66666667%;
96
+ }
97
+ .col-7 {
98
+ width: 58.33333333%;
99
+ }
100
+ .col-6 {
101
+ width: 50%;
102
+ }
103
+ .col-5 {
104
+ width: 41.66666667%;
105
+ }
106
+ .col-4 {
107
+ width: 33.33333333%;
108
+ }
109
+ .col-3 {
110
+ width: 25%;
111
+ }
112
+ .col-2 {
113
+ width: 16.66666667%;
114
+ }
115
+ .col-1 {
116
+ width: 8.33333333%;
117
+ }
118
+ .col-auto {
119
+ flex: 0 0 auto;
120
+ max-width: none;
121
+ width: auto;
122
+ }
123
+ .col-mx-auto {
124
+ margin-left: auto;
125
+ margin-right: auto;
126
+ }
127
+ .col-ml-auto {
128
+ margin-left: auto;
129
+ }
130
+ .col-mr-auto {
131
+ margin-right: auto;
132
+ }
133
+ @media screen and (max-width: $size-xl ) {
134
+ .col-xl-12,
135
+ .col-xl-11,
136
+ .col-xl-10,
137
+ .col-xl-9,
138
+ .col-xl-8,
139
+ .col-xl-7,
140
+ .col-xl-6,
141
+ .col-xl-5,
142
+ .col-xl-4,
143
+ .col-xl-3,
144
+ .col-xl-2,
145
+ .col-xl-1 {
146
+ flex: none;
147
+ }
148
+ .col-xl-12 {
149
+ width: 100%;
150
+ }
151
+ .col-xl-11 {
152
+ width: 91.66666667%;
153
+ }
154
+ .col-xl-10 {
155
+ width: 83.33333333%;
156
+ }
157
+ .col-xl-9 {
158
+ width: 75%;
159
+ }
160
+ .col-xl-8 {
161
+ width: 66.66666667%;
162
+ }
163
+ .col-xl-7 {
164
+ width: 58.33333333%;
165
+ }
166
+ .col-xl-6 {
167
+ width: 50%;
168
+ }
169
+ .col-xl-5 {
170
+ width: 41.66666667%;
171
+ }
172
+ .col-xl-4 {
173
+ width: 33.33333333%;
174
+ }
175
+ .col-xl-3 {
176
+ width: 25%;
177
+ }
178
+ .col-xl-2 {
179
+ width: 16.66666667%;
180
+ }
181
+ .col-xl-1 {
182
+ width: 8.33333333%;
183
+ }
184
+ .hide-xl {
185
+ display: none !important;
186
+ }
187
+ .show-xl {
188
+ display: block !important;
189
+ }
190
+ }
191
+ @media screen and (max-width: $size-lg ) {
192
+ .col-lg-12,
193
+ .col-lg-11,
194
+ .col-lg-10,
195
+ .col-lg-9,
196
+ .col-lg-8,
197
+ .col-lg-7,
198
+ .col-lg-6,
199
+ .col-lg-5,
200
+ .col-lg-4,
201
+ .col-lg-3,
202
+ .col-lg-2,
203
+ .col-lg-1 {
204
+ flex: none;
205
+ }
206
+ .col-lg-12 {
207
+ width: 100%;
208
+ }
209
+ .col-lg-11 {
210
+ width: 91.66666667%;
211
+ }
212
+ .col-lg-10 {
213
+ width: 83.33333333%;
214
+ }
215
+ .col-lg-9 {
216
+ width: 75%;
217
+ }
218
+ .col-lg-8 {
219
+ width: 66.66666667%;
220
+ }
221
+ .col-lg-7 {
222
+ width: 58.33333333%;
223
+ }
224
+ .col-lg-6 {
225
+ width: 50%;
226
+ }
227
+ .col-lg-5 {
228
+ width: 41.66666667%;
229
+ }
230
+ .col-lg-4 {
231
+ width: 33.33333333%;
232
+ }
233
+ .col-lg-3 {
234
+ width: 25%;
235
+ }
236
+ .col-lg-2 {
237
+ width: 16.66666667%;
238
+ }
239
+ .col-lg-1 {
240
+ width: 8.33333333%;
241
+ }
242
+ .hide-lg {
243
+ display: none !important;
244
+ }
245
+ .show-lg {
246
+ display: block !important;
247
+ }
248
+ }
249
+ @media screen and (max-width: $size-md ) {
250
+ .col-md-12,
251
+ .col-md-11,
252
+ .col-md-10,
253
+ .col-md-9,
254
+ .col-md-8,
255
+ .col-md-7,
256
+ .col-md-6,
257
+ .col-md-5,
258
+ .col-md-4,
259
+ .col-md-3,
260
+ .col-md-2,
261
+ .col-md-1 {
262
+ flex: none;
263
+ }
264
+ .col-md-12 {
265
+ width: 100%;
266
+ }
267
+ .col-md-11 {
268
+ width: 91.66666667%;
269
+ }
270
+ .col-md-10 {
271
+ width: 83.33333333%;
272
+ }
273
+ .col-md-9 {
274
+ width: 75%;
275
+ }
276
+ .col-md-8 {
277
+ width: 66.66666667%;
278
+ }
279
+ .col-md-7 {
280
+ width: 58.33333333%;
281
+ }
282
+ .col-md-6 {
283
+ width: 50%;
284
+ }
285
+ .col-md-5 {
286
+ width: 41.66666667%;
287
+ }
288
+ .col-md-4 {
289
+ width: 33.33333333%;
290
+ }
291
+ .col-md-3 {
292
+ width: 25%;
293
+ }
294
+ .col-md-2 {
295
+ width: 16.66666667%;
296
+ }
297
+ .col-md-1 {
298
+ width: 8.33333333%;
299
+ }
300
+ .hide-md {
301
+ display: none !important;
302
+ }
303
+ .show-md {
304
+ display: block !important;
305
+ }
306
+ }
307
+ @media screen and (max-width: $size-sm ) {
308
+ .col-sm-12,
309
+ .col-sm-11,
310
+ .col-sm-10,
311
+ .col-sm-9,
312
+ .col-sm-8,
313
+ .col-sm-7,
314
+ .col-sm-6,
315
+ .col-sm-5,
316
+ .col-sm-4,
317
+ .col-sm-3,
318
+ .col-sm-2,
319
+ .col-sm-1 {
320
+ flex: none;
321
+ }
322
+ .col-sm-12 {
323
+ width: 100%;
324
+ }
325
+ .col-sm-11 {
326
+ width: 91.66666667%;
327
+ }
328
+ .col-sm-10 {
329
+ width: 83.33333333%;
330
+ }
331
+ .col-sm-9 {
332
+ width: 75%;
333
+ }
334
+ .col-sm-8 {
335
+ width: 66.66666667%;
336
+ }
337
+ .col-sm-7 {
338
+ width: 58.33333333%;
339
+ }
340
+ .col-sm-6 {
341
+ width: 50%;
342
+ }
343
+ .col-sm-5 {
344
+ width: 41.66666667%;
345
+ }
346
+ .col-sm-4 {
347
+ width: 33.33333333%;
348
+ }
349
+ .col-sm-3 {
350
+ width: 25%;
351
+ }
352
+ .col-sm-2 {
353
+ width: 16.66666667%;
354
+ }
355
+ .col-sm-1 {
356
+ width: 8.33333333%;
357
+ }
358
+ .hide-sm {
359
+ display: none !important;
360
+ }
361
+ .show-sm {
362
+ display: block !important;
363
+ }
364
+ }
365
+ @media screen and (max-width: $size-xs) {
366
+ .col-xs-12,
367
+ .col-xs-11,
368
+ .col-xs-10,
369
+ .col-xs-9,
370
+ .col-xs-8,
371
+ .col-xs-7,
372
+ .col-xs-6,
373
+ .col-xs-5,
374
+ .col-xs-4,
375
+ .col-xs-3,
376
+ .col-xs-2,
377
+ .col-xs-1 {
378
+ flex: none;
379
+ }
380
+ .col-xs-12 {
381
+ width: 100%;
382
+ }
383
+ .col-xs-11 {
384
+ width: 91.66666667%;
385
+ }
386
+ .col-xs-10 {
387
+ width: 83.33333333%;
388
+ }
389
+ .col-xs-9 {
390
+ width: 75%;
391
+ }
392
+ .col-xs-8 {
393
+ width: 66.66666667%;
394
+ }
395
+ .col-xs-7 {
396
+ width: 58.33333333%;
397
+ }
398
+ .col-xs-6 {
399
+ width: 50%;
400
+ }
401
+ .col-xs-5 {
402
+ width: 41.66666667%;
403
+ }
404
+ .col-xs-4 {
405
+ width: 33.33333333%;
406
+ }
407
+ .col-xs-3 {
408
+ width: 25%;
409
+ }
410
+ .col-xs-2 {
411
+ width: 16.66666667%;
412
+ }
413
+ .col-xs-1 {
414
+ width: 8.33333333%;
415
+ }
416
+ .hide-xs {
417
+ display: none !important;
418
+ }
419
+ .show-xs {
420
+ display: block !important;
421
+ }
422
+ }