spectre_scss 0.5.3.0 → 0.5.4.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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d269909b9fdb26638006ee02895ab26279b19d0a67090da032a71e4cb678c030
4
- data.tar.gz: 9a211768b81199032691f021c35c64d383551a9ef0cfff974713eedf61c53030
3
+ metadata.gz: b2cd9ab46565dc71ca114340dffb962dc11f0afc77d68237bf351e0a645535c2
4
+ data.tar.gz: 20e791aec52f3a48e1b086a3fcbf073215fe398b4961f6743035c5cff1fb37cb
5
5
  SHA512:
6
- metadata.gz: e1671d98f36405587d56bd22f03d02493a9ba7bb0b4931225bfeafcce4839022bf4f38432f69c70d4c4d12f9c7ec2db2181d6e0075b9405bed2d278ca1d47f2d
7
- data.tar.gz: d7367168e12de7d3627270f66dcc3c33e7e08c6b33f17548e66c646b1b6ae2720ebf86100659fc122bde98f32488ae39e011aff43367d243d7ed194b3b164cf2
6
+ metadata.gz: 457bc40945c2a83666949528bf9e3418c810c5203791c5ae78bd77d4d3058a3b8a2832d6c1f6a2904b57ebdfe4eb88e2cf178f63e4ade9fc92ff9acb61dfcc5d
7
+ data.tar.gz: '005757181c47896cd21f05c0d7eaf90348a2224399fc00cb0a0e1b28cb50c05bc333d454a378d3c05290de4ae7e999f6c978880d40714881be96ddc1f4eabe32'
@@ -1,3 +1,3 @@
1
1
  module SpectreScss
2
- VERSION = '0.5.3.0'
2
+ VERSION = '0.5.4.0'
3
3
  end
@@ -20,7 +20,7 @@
20
20
 
21
21
  &:not(:first-child) {
22
22
  &::before {
23
- color: $gray-color-light;
23
+ color: $gray-color-dark;
24
24
  content: "/";
25
25
  padding-right: $unit-2;
26
26
  }
@@ -3,16 +3,18 @@
3
3
  align-items: center;
4
4
  background: $bg-color-dark;
5
5
  border-radius: 5rem;
6
- color: $gray-color-dark;
7
6
  display: inline-flex;
8
7
  font-size: 90%;
9
8
  height: $unit-6;
10
9
  line-height: $unit-4;
11
10
  margin: $unit-h;
12
- max-width: 100%;
11
+ max-width: $control-width-sm;
12
+ overflow-x: hidden;
13
13
  padding: $unit-1 $unit-2;
14
14
  text-decoration: none;
15
+ text-overflow: ellipsis;
15
16
  vertical-align: middle;
17
+ white-space: nowrap;
16
18
 
17
19
  &.active {
18
20
  background: $primary-color;
@@ -118,19 +118,7 @@ textarea.form-input {
118
118
  padding: $control-padding-y $control-padding-x;
119
119
  vertical-align: middle;
120
120
  width: 100%;
121
-
122
- &[size],
123
- &[multiple] {
124
- height: auto;
125
-
126
- option {
127
- padding: $unit-h $unit-1;
128
- }
129
- }
130
- &:not([multiple]):not([size]) {
131
- background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
132
- padding-right: $control-icon-size + $control-padding-x;
133
- }
121
+ background: $bg-color-light;
134
122
  &:focus {
135
123
  @include control-shadow();
136
124
  border-color: $primary-color;
@@ -151,6 +139,21 @@ textarea.form-input {
151
139
  height: $control-size-lg;
152
140
  padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
153
141
  }
142
+
143
+ // Multiple select
144
+ &[size],
145
+ &[multiple] {
146
+ height: auto;
147
+ padding: $control-padding-y $control-padding-x;
148
+
149
+ option {
150
+ padding: $unit-h $unit-1;
151
+ }
152
+ }
153
+ &:not([multiple]):not([size]) {
154
+ background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
155
+ padding-right: $control-icon-size + $control-padding-x;
156
+ }
154
157
  }
155
158
 
156
159
  // Form Icons
@@ -266,14 +269,14 @@ textarea.form-input {
266
269
  border-left-width: 0;
267
270
  border-top-width: 0;
268
271
  content: "";
269
- height: 12px;
272
+ height: 9px;
270
273
  left: 50%;
271
- margin-left: -4px;
272
- margin-top: -8px;
274
+ margin-left: -3px;
275
+ margin-top: -6px;
273
276
  position: absolute;
274
277
  top: 50%;
275
278
  transform: rotate(45deg);
276
- width: 8px;
279
+ width: 6px;
277
280
  }
278
281
  }
279
282
  &:indeterminate + .form-icon {
@@ -304,12 +307,12 @@ textarea.form-input {
304
307
  background: $bg-color-light;
305
308
  border-radius: 50%;
306
309
  content: "";
307
- height: 4px;
310
+ height: 6px;
308
311
  left: 50%;
309
312
  position: absolute;
310
313
  top: 50%;
311
314
  transform: translate(-50%, -50%);
312
- width: 4px;
315
+ width: 6px;
313
316
  }
314
317
  }
315
318
  }
@@ -320,7 +323,7 @@ textarea.form-input {
320
323
  padding-left: ($unit-8 + $control-padding-x);
321
324
 
322
325
  .form-icon {
323
- background: $gray-color-light;
326
+ background: $gray-color;
324
327
  background-clip: padding-box;
325
328
  border-radius: $unit-2 + $border-width;
326
329
  height: $unit-4 + $border-width * 2;
@@ -447,7 +450,7 @@ textarea.form-input {
447
450
  .form-icon {
448
451
  border-color: $error-color;
449
452
  }
450
-
453
+
451
454
  input {
452
455
  &:checked + .form-icon {
453
456
  background: $error-color;
@@ -542,4 +545,4 @@ input {
542
545
  // Form inline
543
546
  .form-inline {
544
547
  display: inline-block;
545
- }
548
+ }
@@ -15,7 +15,6 @@
15
15
 
16
16
  a {
17
17
  border-radius: $border-radius;
18
- color: $gray-color-dark;
19
18
  display: inline-block;
20
19
  padding: $unit-1 $unit-2;
21
20
  text-decoration: none;
@@ -19,7 +19,7 @@
19
19
  &:hover .popover-container {
20
20
  display: block;
21
21
  opacity: 1;
22
- transform: translate(-50%, -100%);
22
+ transform: translate(-50%, -100%) scale(1);
23
23
  }
24
24
 
25
25
  &.popover-right {
@@ -30,7 +30,7 @@
30
30
 
31
31
  *:focus + .popover-container,
32
32
  &:hover .popover-container {
33
- transform: translate(0, -50%);
33
+ transform: translate(0, -50%) scale(1);
34
34
  }
35
35
  }
36
36
 
@@ -42,7 +42,7 @@
42
42
 
43
43
  *:focus + .popover-container,
44
44
  &:hover .popover-container {
45
- transform: translate(-50%, 0);
45
+ transform: translate(-50%, 0) scale(1);
46
46
  }
47
47
  }
48
48
 
@@ -54,7 +54,7 @@
54
54
 
55
55
  *:focus + .popover-container,
56
56
  &:hover .popover-container {
57
- transform: translate(-100%, -50%);
57
+ transform: translate(-100%, -50%) scale(1);
58
58
  }
59
59
  }
60
60
 
@@ -24,10 +24,12 @@
24
24
  }
25
25
 
26
26
  .timeline-icon {
27
+ align-items: center;
27
28
  border-radius: 50%;
28
29
  color: $light-color;
29
- display: block;
30
+ display: flex;
30
31
  height: $unit-6;
32
+ justify-content: center;
31
33
  text-align: center;
32
34
  width: $unit-6;
33
35
  &::before {
@@ -2,7 +2,7 @@
2
2
  .tooltip {
3
3
  position: relative;
4
4
  &::after {
5
- background: rgba($dark-color, .9);
5
+ background: rgba($dark-color, .95);
6
6
  border-radius: $border-radius;
7
7
  bottom: 100%;
8
8
  color: $light-color;
@@ -1,5 +1,5 @@
1
1
  // Core variables
2
- $version: "0.5.3";
2
+ $version: "0.5.4";
3
3
 
4
4
  // Core features
5
5
  $rtl: false !default;
@@ -13,15 +13,15 @@ $secondary-color-dark: darken($secondary-color, 3%) !default;
13
13
  $secondary-color-light: lighten($secondary-color, 3%) !default;
14
14
 
15
15
  // Gray colors
16
- $dark-color: #454d5d !default;
16
+ $dark-color: #303742 !default;
17
17
  $light-color: #fff !default;
18
- $gray-color: lighten($dark-color, 40%) !default;
19
- $gray-color-dark: darken($gray-color, 25%) !default;
18
+ $gray-color: lighten($dark-color, 55%) !default;
19
+ $gray-color-dark: darken($gray-color, 30%) !default;
20
20
  $gray-color-light: lighten($gray-color, 20%) !default;
21
21
 
22
- $border-color: lighten($dark-color, 60%) !default;
22
+ $border-color: lighten($dark-color, 65%) !default;
23
23
  $border-color-dark: darken($border-color, 10%) !default;
24
- $bg-color: lighten($dark-color, 66%) !default;
24
+ $bg-color: lighten($dark-color, 75%) !default;
25
25
  $bg-color-dark: darken($bg-color, 3%) !default;
26
26
  $bg-color-light: $light-color !default;
27
27
 
@@ -1,7 +1,7 @@
1
1
  // Background color utility mixin
2
2
  @mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
3
3
  #{$name} {
4
- background: $color;
4
+ background: $color !important;
5
5
 
6
6
  @if (lightness($color) < 60) {
7
7
  color: $light-color;
@@ -12,7 +12,7 @@
12
12
  // Text color utility mixin
13
13
  @mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
14
14
  #{$name} {
15
- color: $color;
15
+ color: $color !important;
16
16
  }
17
17
 
18
18
  a#{$name} {
@@ -1,5 +1,5 @@
1
1
  // Toast variant mixin
2
2
  @mixin toast-variant($color: $dark-color) {
3
- background: rgba($color, .9);
3
+ background: rgba($color, .95);
4
4
  border-color: $color;
5
5
  }
@@ -3,7 +3,7 @@
3
3
 
4
4
  @include text-color-variant(".text-secondary", $secondary-color-dark);
5
5
 
6
- @include text-color-variant(".text-gray", $gray-color);
6
+ @include text-color-variant(".text-gray", $gray-color-dark);
7
7
 
8
8
  @include text-color-variant(".text-light", $light-color);
9
9
 
@@ -11,19 +11,23 @@
11
11
  float: right !important;
12
12
  }
13
13
 
14
- .relative {
14
+ .p-relative {
15
15
  position: relative !important;
16
16
  }
17
17
 
18
- .absolute {
18
+ .p-absolute {
19
19
  position: absolute !important;
20
20
  }
21
21
 
22
- .fixed {
22
+ .p-fixed {
23
23
  position: fixed !important;
24
24
  }
25
25
 
26
- .centered {
26
+ .p-sticky {
27
+ position: sticky !important;
28
+ }
29
+
30
+ .p-centered {
27
31
  display: block;
28
32
  float: none;
29
33
  margin-left: auto;
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: spectre_scss
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.5.3.0
4
+ version: 0.5.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Zoran
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2018-06-24 00:00:00.000000000 Z
11
+ date: 2018-11-04 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler