spectre_scss 0.4.2.0 → 0.4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,10 +1,10 @@
1
1
  // Core variables
2
2
  // Colors
3
3
  // Core colors
4
- $primary-color: #5764c6 !default;
4
+ $primary-color: #5755d9 !default;
5
5
  $primary-color-dark: darken($primary-color, 3%) !default;
6
6
  $primary-color-light: lighten($primary-color, 3%) !default;
7
- $secondary-color: lighten($primary-color, 40%) !default;
7
+ $secondary-color: lighten($primary-color, 37.5%) !default;
8
8
  $secondary-color-dark: darken($secondary-color, 3%) !default;
9
9
  $secondary-color-light: lighten($secondary-color, 3%) !default;
10
10
 
@@ -79,10 +79,12 @@ $border-width-lg: $unit-h !default;
79
79
  $control-size: $unit-8 !default;
80
80
  $control-size-sm: $unit-6 !default;
81
81
  $control-size-lg: $unit-10 !default;
82
- $control-padding-h: $unit-2 !default;
83
- $control-padding-v: ($control-size - $line-height) / 2 - $border-width !default;
84
- $control-padding-v-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
85
- $control-padding-v-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
82
+ $control-padding-x: $unit-2 !default;
83
+ $control-padding-x-sm: $unit-2 * .75 !default;
84
+ $control-padding-x-lg: $unit-2 * 1.5 !default;
85
+ $control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
86
+ $control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
87
+ $control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
86
88
  $control-icon-size: .7rem !default;
87
89
  $control-min-width: 180px !default;
88
90
  $control-max-width: 320px !default;
@@ -0,0 +1,316 @@
1
+
2
+ // Icon resize
3
+ .icon-resize-horiz,
4
+ .icon-resize-vert {
5
+ &::before,
6
+ &::after {
7
+ border: $icon-border-width solid currentColor;
8
+ border-bottom: 0;
9
+ border-right: 0;
10
+ content: "";
11
+ height: .45em;
12
+ width: .45em;
13
+ }
14
+ &::before {
15
+ transform: translate(-50%, -90%) rotate(45deg);
16
+ }
17
+ &::after {
18
+ transform: translate(-50%, -10%) rotate(225deg);
19
+ }
20
+ }
21
+
22
+ .icon-resize-horiz {
23
+ &::before {
24
+ transform: translate(-90%, -50%) rotate(-45deg);
25
+ }
26
+ &::after {
27
+ transform: translate(-10%, -50%) rotate(135deg);
28
+ }
29
+ }
30
+
31
+ // Icon more
32
+ .icon-more-horiz,
33
+ .icon-more-vert {
34
+ &::before {
35
+ background: currentColor;
36
+ box-shadow: -.4em 0, .4em 0;
37
+ border-radius: 50%;
38
+ content: "";
39
+ height: 3px;
40
+ width: 3px;
41
+ }
42
+ }
43
+
44
+ .icon-more-vert {
45
+ &::before {
46
+ box-shadow: 0 -.4em, 0 .4em;
47
+ }
48
+ }
49
+
50
+ // Icon plus, minus, cross
51
+ .icon-plus,
52
+ .icon-minus,
53
+ .icon-cross {
54
+ &::before {
55
+ background: currentColor;
56
+ content: "";
57
+ height: $icon-border-width;
58
+ width: 100%;
59
+ }
60
+ }
61
+
62
+ .icon-plus,
63
+ .icon-cross {
64
+ &::after {
65
+ background: currentColor;
66
+ content: "";
67
+ height: 100%;
68
+ width: $icon-border-width;
69
+ }
70
+ }
71
+
72
+ .icon-cross {
73
+ &::before {
74
+ width: 100%;
75
+ }
76
+ &::after {
77
+ height: 100%;
78
+ }
79
+ &::before,
80
+ &::after {
81
+ transform: translate(-50%, -50%) rotate(45deg);
82
+ }
83
+ }
84
+
85
+ // Icon check
86
+ .icon-check {
87
+ &::before {
88
+ border: $icon-border-width solid currentColor;
89
+ border-right: 0;
90
+ border-top: 0;
91
+ content: "";
92
+ height: .5em;
93
+ width: .9em;
94
+ transform: translate(-50%, -75%) rotate(-45deg);
95
+ }
96
+ }
97
+
98
+ // Icon stop
99
+ .icon-stop {
100
+ border: $icon-border-width solid currentColor;
101
+ border-radius: 50%;
102
+ &::before {
103
+ background: currentColor;
104
+ content: "";
105
+ height: $icon-border-width;
106
+ transform: translate(-50%, -50%) rotate(45deg);
107
+ width: 1em;
108
+ }
109
+ }
110
+
111
+ // Icon shutdown
112
+ .icon-shutdown {
113
+ border: $icon-border-width solid currentColor;
114
+ border-radius: 50%;
115
+ border-top-color: transparent;
116
+ &::before {
117
+ background: currentColor;
118
+ content: "";
119
+ height: .5em;
120
+ top: .1em;
121
+ width: $icon-border-width;
122
+ }
123
+ }
124
+
125
+ // Icon refresh
126
+ .icon-refresh {
127
+ &::before {
128
+ border: $icon-border-width solid currentColor;
129
+ border-radius: 50%;
130
+ border-right-color: transparent;
131
+ content: "";
132
+ height: 1em;
133
+ width: 1em;
134
+ }
135
+ &::after {
136
+ border: .2em solid currentColor;
137
+ border-top-color: transparent;
138
+ border-left-color: transparent;
139
+ content: "";
140
+ height: 0;
141
+ left: 80%;
142
+ top: 20%;
143
+ width: 0;
144
+ }
145
+ }
146
+
147
+ // Icon search
148
+ .icon-search {
149
+ &::before {
150
+ border: $icon-border-width solid currentColor;
151
+ border-radius: 50%;
152
+ content: "";
153
+ height: .75em;
154
+ left: 5%;
155
+ top: 5%;
156
+ transform: translate(0, 0) rotate(45deg);
157
+ width: .75em;
158
+ }
159
+ &::after {
160
+ background: currentColor;
161
+ content: "";
162
+ height: $icon-border-width;
163
+ left: 80%;
164
+ top: 80%;
165
+ transform: translate(-50%, -50%) rotate(45deg);
166
+ width: .4em;
167
+ }
168
+ }
169
+
170
+ // Icon edit
171
+ .icon-edit {
172
+ &::before {
173
+ border: $icon-border-width solid currentColor;
174
+ content: "";
175
+ height: .4em;
176
+ transform: translate(-40%, -60%) rotate(-45deg);
177
+ width: .85em;
178
+ }
179
+ &::after {
180
+ border: .15em solid currentColor;
181
+ border-top-color: transparent;
182
+ border-right-color: transparent;
183
+ content: "";
184
+ height: 0;
185
+ left: 5%;
186
+ top: 95%;
187
+ transform: translate(0, -100%);
188
+ width: 0;
189
+ }
190
+ }
191
+
192
+ // Icon delete
193
+ .icon-delete {
194
+ &::before {
195
+ border: $icon-border-width solid currentColor;
196
+ border-bottom-left-radius: $border-radius;
197
+ border-bottom-right-radius: $border-radius;
198
+ border-top: 0;
199
+ content: "";
200
+ height: .75em;
201
+ top: 60%;
202
+ width: .75em;
203
+ }
204
+ &::after {
205
+ background: currentColor;
206
+ box-shadow: -.25em .2em, .25em .2em;
207
+ content: "";
208
+ height: $icon-border-width;
209
+ top: $icon-border-width/2;
210
+ width: .5em;
211
+ }
212
+ }
213
+
214
+ // Icon share
215
+ .icon-share {
216
+ border: $icon-border-width solid currentColor;
217
+ border-radius: $border-radius;
218
+ border-right: 0;
219
+ border-top: 0;
220
+ &::before {
221
+ border: $icon-border-width solid currentColor;
222
+ border-left: 0;
223
+ border-top: 0;
224
+ content: "";
225
+ height: .4em;
226
+ left: 100%;
227
+ top: .25em;
228
+ transform: translate(-125%, -50%) rotate(-45deg);
229
+ width: .4em;
230
+ }
231
+ &::after {
232
+ border: $icon-border-width solid currentColor;
233
+ border-bottom: 0;
234
+ border-right: 0;
235
+ border-radius: 75% 0;
236
+ content: "";
237
+ height: .5em;
238
+ width: .6em;
239
+ }
240
+ }
241
+
242
+ // Icon flag
243
+ .icon-flag {
244
+ &::before {
245
+ background: currentColor;
246
+ content: "";
247
+ height: 1em;
248
+ left: 15%;
249
+ width: $icon-border-width;
250
+ }
251
+ &::after {
252
+ border: $icon-border-width solid currentColor;
253
+ border-bottom-right-radius: $border-radius;
254
+ border-left: 0;
255
+ border-top-right-radius: $border-radius;
256
+ content: "";
257
+ height: .65em;
258
+ top: 35%;
259
+ left: 60%;
260
+ width: .8em;
261
+ }
262
+ }
263
+
264
+ // Icon bookmark
265
+ .icon-bookmark {
266
+ &::before {
267
+ border: $icon-border-width solid currentColor;
268
+ border-bottom: 0;
269
+ border-top-left-radius: $border-radius;
270
+ border-top-right-radius: $border-radius;
271
+ content: "";
272
+ height: .9em;
273
+ width: .8em;
274
+ }
275
+ &::after {
276
+ border: $icon-border-width solid currentColor;
277
+ border-bottom: 0;
278
+ border-left: 0;
279
+ border-radius: $border-radius;
280
+ content: "";
281
+ height: .5em;
282
+ transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
283
+ width: .5em;
284
+ }
285
+ }
286
+
287
+ // Icon download & upload
288
+ .icon-download,
289
+ .icon-upload {
290
+ border-bottom: $icon-border-width solid currentColor;
291
+ &::before {
292
+ border: $icon-border-width solid currentColor;
293
+ border-bottom: 0;
294
+ border-right: 0;
295
+ content: "";
296
+ height: .5em;
297
+ width: .5em;
298
+ transform: translate(-50%, -60%) rotate(-135deg);
299
+ }
300
+ &::after {
301
+ background: currentColor;
302
+ content: "";
303
+ height: .6em;
304
+ top: 40%;
305
+ width: $icon-border-width;
306
+ }
307
+ }
308
+
309
+ .icon-upload {
310
+ &::before {
311
+ transform: translate(-50%, -60%) rotate(45deg);
312
+ }
313
+ &::after {
314
+ top: 50%;
315
+ }
316
+ }
@@ -0,0 +1,47 @@
1
+ // Icon variables
2
+ $icon-border-width: $border-width-lg;
3
+ $icon-prefix: "icon";
4
+
5
+ // Icon base style
6
+ .#{$icon-prefix} {
7
+ box-sizing: border-box;
8
+ display: inline-block;
9
+ font-size: inherit;
10
+ font-style: normal;
11
+ height: 1em;
12
+ position: relative;
13
+ text-indent: -9999px;
14
+ vertical-align: middle;
15
+ width: 1em;
16
+ &::before,
17
+ &::after {
18
+ display: block;
19
+ left: 50%;
20
+ position: absolute;
21
+ top: 50%;
22
+ transform: translate(-50%, -50%);
23
+ }
24
+
25
+ // Icon sizes
26
+ &.icon-2x {
27
+ font-size: 1.6rem;
28
+ }
29
+
30
+ &.icon-3x {
31
+ font-size: 2.4rem;
32
+ }
33
+
34
+ &.icon-4x {
35
+ font-size: 3.2rem;
36
+ }
37
+ }
38
+
39
+ // Component icon support
40
+ .accordion,
41
+ .btn,
42
+ .toast,
43
+ .menu {
44
+ .#{$icon-prefix} {
45
+ vertical-align: -10%;
46
+ }
47
+ }
@@ -0,0 +1,133 @@
1
+ // Icon arrows
2
+ .icon-arrow-down,
3
+ .icon-arrow-left,
4
+ .icon-arrow-right,
5
+ .icon-arrow-up,
6
+ .icon-downward,
7
+ .icon-back,
8
+ .icon-forward,
9
+ .icon-upward {
10
+ &::before {
11
+ border: $icon-border-width solid currentColor;
12
+ border-bottom: 0;
13
+ border-right: 0;
14
+ content: "";
15
+ height: .65em;
16
+ width: .65em;
17
+ }
18
+ }
19
+
20
+ .icon-arrow-down {
21
+ &::before {
22
+ transform: translate(-50%, -75%) rotate(225deg);
23
+ }
24
+ }
25
+
26
+ .icon-arrow-left {
27
+ &::before {
28
+ transform: translate(-25%, -50%) rotate(-45deg);
29
+ }
30
+ }
31
+
32
+ .icon-arrow-right {
33
+ &::before {
34
+ transform: translate(-75%, -50%) rotate(135deg);
35
+ }
36
+ }
37
+
38
+ .icon-arrow-up {
39
+ &::before {
40
+ transform: translate(-50%, -25%) rotate(45deg);
41
+ }
42
+ }
43
+
44
+ .icon-back,
45
+ .icon-forward {
46
+ &::after {
47
+ background: currentColor;
48
+ content: "";
49
+ height: $icon-border-width;
50
+ width: .8em;
51
+ }
52
+ }
53
+
54
+ .icon-downward,
55
+ .icon-upward {
56
+ &::after {
57
+ background: currentColor;
58
+ content: "";
59
+ height: .8em;
60
+ width: $icon-border-width;
61
+ }
62
+ }
63
+
64
+ .icon-back {
65
+ &::after {
66
+ left: 55%;
67
+ }
68
+ &::before {
69
+ transform: translate(-50%, -50%) rotate(-45deg);
70
+ }
71
+ }
72
+
73
+ .icon-downward {
74
+ &::after {
75
+ top: 45%;
76
+ }
77
+ &::before {
78
+ transform: translate(-50%, -50%) rotate(-135deg);
79
+ }
80
+ }
81
+
82
+ .icon-forward {
83
+ &::after {
84
+ left: 45%;
85
+ }
86
+ &::before {
87
+ transform: translate(-50%, -50%) rotate(135deg);
88
+ }
89
+ }
90
+
91
+ .icon-upward {
92
+ &::after {
93
+ top: 55%;
94
+ }
95
+ &::before {
96
+ transform: translate(-50%, -50%) rotate(45deg);
97
+ }
98
+ }
99
+
100
+ // Icon caret
101
+ .icon-caret {
102
+ &::before {
103
+ border-top: .3em solid currentColor;
104
+ border-right: .3em solid transparent;
105
+ border-left: .3em solid transparent;
106
+ content: "";
107
+ height: 0;
108
+ transform: translate(-50%, -25%);
109
+ width: 0;
110
+ }
111
+ }
112
+
113
+ // Icon menu
114
+ .icon-menu {
115
+ &::before {
116
+ background: currentColor;
117
+ box-shadow: 0 -.35em, 0 .35em;
118
+ content: "";
119
+ height: $icon-border-width;
120
+ width: 100%;
121
+ }
122
+ }
123
+
124
+ // Icon apps
125
+ .icon-apps {
126
+ &::before {
127
+ background: currentColor;
128
+ box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
129
+ content: "";
130
+ height: 3px;
131
+ width: 3px;
132
+ }
133
+ }
@@ -0,0 +1,176 @@
1
+ // Icon time
2
+ .icon-time {
3
+ border: $icon-border-width solid currentColor;
4
+ border-radius: 50%;
5
+ &::before {
6
+ background: currentColor;
7
+ content: "";
8
+ height: .4em;
9
+ transform: translate(-50%, -75%);
10
+ width: $icon-border-width;
11
+ }
12
+ &::after {
13
+ background: currentColor;
14
+ content: "";
15
+ height: .3em;
16
+ transform: translate(-50%, -75%) rotate(90deg);
17
+ transform-origin: 50% 90%;
18
+ width: $icon-border-width;
19
+ }
20
+ }
21
+
22
+ // Icon mail
23
+ .icon-mail {
24
+ &::before {
25
+ border: $icon-border-width solid currentColor;
26
+ border-radius: $border-radius;
27
+ content: "";
28
+ height: .8em;
29
+ width: 1em;
30
+ }
31
+ &::after {
32
+ border: $icon-border-width solid currentColor;
33
+ border-right: 0;
34
+ border-top: 0;
35
+ content: "";
36
+ height: .5em;
37
+ transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
38
+ width: .5em;
39
+ }
40
+ }
41
+
42
+ // Icon people
43
+ .icon-people {
44
+ &::before {
45
+ border: $icon-border-width solid currentColor;
46
+ border-radius: 50%;
47
+ content: "";
48
+ height: .45em;
49
+ top: 25%;
50
+ width: .45em;
51
+ }
52
+ &::after {
53
+ border: $icon-border-width solid currentColor;
54
+ border-radius: 50% 50% 0 0;
55
+ content: "";
56
+ height: .4em;
57
+ top: 75%;
58
+ width: .9em;
59
+ }
60
+ }
61
+
62
+ // Icon message
63
+ .icon-message {
64
+ border: $icon-border-width solid currentColor;
65
+ border-bottom: 0;
66
+ border-radius: $border-radius;
67
+ border-right: 0;
68
+ &::before {
69
+ border: $icon-border-width solid currentColor;
70
+ border-bottom-right-radius: $border-radius;
71
+ border-left: 0;
72
+ border-top: 0;
73
+ content: "";
74
+ height: .8em;
75
+ left: 65%;
76
+ top: 40%;
77
+ width: .7em;
78
+ }
79
+ &::after {
80
+ background: currentColor;
81
+ border-radius: $border-radius;
82
+ content: "";
83
+ height: .3em;
84
+ left: 10%;
85
+ top: 100%;
86
+ transform: translate(0, -90%) rotate(45deg);
87
+ width: $icon-border-width;
88
+ }
89
+ }
90
+
91
+ // Icon photo
92
+ .icon-photo {
93
+ border: $icon-border-width solid currentColor;
94
+ border-radius: $border-radius;
95
+ &::before {
96
+ border: $icon-border-width solid currentColor;
97
+ border-radius: 50%;
98
+ content: "";
99
+ height: .25em;
100
+ left: 35%;
101
+ top: 35%;
102
+ width: .25em;
103
+ }
104
+ &::after {
105
+ border: $icon-border-width solid currentColor;
106
+ border-bottom: 0;
107
+ border-left: 0;
108
+ content: "";
109
+ height: .5em;
110
+ left: 60%;
111
+ transform: translate(-50%, 25%) rotate(-45deg);
112
+ width: .5em;
113
+ }
114
+ }
115
+
116
+ // Icon link
117
+ .icon-link {
118
+ &::before,
119
+ &::after {
120
+ border: $icon-border-width solid currentColor;
121
+ border-radius: 5em 0 0 5em;
122
+ border-right: 0;
123
+ content: "";
124
+ height: .5em;
125
+ width: .75em;
126
+ }
127
+ &::before {
128
+ transform: translate(-70%, -45%) rotate(-45deg);
129
+ }
130
+ &::after {
131
+ transform: translate(-30%, -55%) rotate(135deg);
132
+ }
133
+ }
134
+
135
+ // Icon location
136
+ .icon-location {
137
+ &::before {
138
+ border: $icon-border-width solid currentColor;
139
+ border-radius: 50% 50% 50% 0;
140
+ content: "";
141
+ height: .8em;
142
+ transform: translate(-50%, -60%) rotate(-45deg);
143
+ width: .8em;
144
+ }
145
+ &::after {
146
+ border: $icon-border-width solid currentColor;
147
+ border-radius: 50%;
148
+ content: "";
149
+ height: .2em;
150
+ transform: translate(-50%, -80%);
151
+ width: .2em;
152
+ }
153
+ }
154
+
155
+ // Icon emoji
156
+ .icon-emoji {
157
+ border: $icon-border-width solid currentColor;
158
+ border-radius: 50%;
159
+ &::before {
160
+ border-radius: 50%;
161
+ box-shadow: -.17em -.15em, .17em -.15em;
162
+ content: "";
163
+ height: .1em;
164
+ width: .1em;
165
+ }
166
+ &::after {
167
+ border: $icon-border-width solid currentColor;
168
+ border-bottom-color: transparent;
169
+ border-radius: 50%;
170
+ border-right-color: transparent;
171
+ content: "";
172
+ height: .5em;
173
+ transform: translate(-50%, -40%) rotate(-135deg);
174
+ width: .5em;
175
+ }
176
+ }
@@ -5,4 +5,7 @@
5
5
  @import "mixins";
6
6
 
7
7
  // Icons
8
- @import "icons";
8
+ @import "icons/icons-core";
9
+ @import "icons/icons-navigation";
10
+ @import "icons/icons-action";
11
+ @import "icons/icons-object";