spectre_scss 0.4.3.0 → 0.4.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
  SHA1:
3
- metadata.gz: a21322a1c1f3732b1ddeb34f86b7b0d587a53bc4
4
- data.tar.gz: 529555351cf07d6167362f95635a8e4f4326e7eb
3
+ metadata.gz: f908a7b9a14b1840c4179c6d086352f86d68cd14
4
+ data.tar.gz: 7774687df7751ff4da257a0ffdae0ff44f13fd44
5
5
  SHA512:
6
- metadata.gz: 4257b974d3bc94d5b3687e747834ac9d9474c7e7eb715a29f55325b5a506cfbe955c623e47b224592345e572f0e088dfe2b72fcbc0cc6a924cd98cf4add6a25a
7
- data.tar.gz: 876f830df1d7e9928cbc8d90aaa468c7ddd582131e55faf2a361d9ce0b6a4c9f3fce69a421569bb9cd62ca2f56070147f7271edb13725875e530835b47590073
6
+ metadata.gz: 619ba1754228aa09c65604a663fc6ea593cb579ac312192343b448aae070d9cace989ab805abe8f9e76be2f4d32438985f469cef570cb2f3c626fb296a5564a4
7
+ data.tar.gz: 64c705d48f892b3dc6cbf8bee8152ed68c9ca82db21cb1f20392dfc1062bf24b897c707fb5d98737791ab885becdcef786aa38ddb4942a46f30c6e51ffc65694
@@ -1,3 +1,3 @@
1
1
  module SpectreScss
2
- VERSION = '0.4.3.0'
2
+ VERSION = '0.4.4.0'
3
3
  end
@@ -19,16 +19,16 @@
19
19
  &[data-badge] {
20
20
  &::after {
21
21
  font-size: $font-size-sm;
22
- height: 18px;
22
+ height: .9rem;
23
23
  line-height: 1;
24
- min-width: 18px;
25
- padding: 3px 5px;
24
+ min-width: .9rem;
25
+ padding: .1rem .2rem;
26
26
  text-align: center;
27
27
  white-space: nowrap;
28
28
  }
29
29
  }
30
30
  &:not([data-badge]),
31
- &[data-badge=''] {
31
+ &[data-badge=""] {
32
32
  &::after {
33
33
  height: 6px;
34
34
  min-width: 6px;
@@ -129,13 +129,13 @@
129
129
  line-height: $unit-4;
130
130
  margin-left: $unit-1;
131
131
  margin-right: -2px;
132
- opacity: .45;
133
- padding: 0 2px;
132
+ opacity: 1;
133
+ padding: 0;
134
134
  text-decoration: none;
135
135
  width: $unit-4;
136
136
 
137
137
  &:hover {
138
- opacity: .85;
138
+ opacity: .95;
139
139
  }
140
140
 
141
141
  &::before {
@@ -52,6 +52,7 @@
52
52
  border-radius: 50%;
53
53
  color: $gray-color-dark;
54
54
  cursor: pointer;
55
+ font-size: $font-size-sm;
55
56
  height: $unit-7;
56
57
  line-height: $unit-5;
57
58
  outline: none;
@@ -94,7 +94,7 @@
94
94
  background: currentColor;
95
95
  content: "";
96
96
  display: block;
97
- height: $border-width-lg;
97
+ height: $unit-h;
98
98
  position: absolute;
99
99
  top: .5rem;
100
100
  width: 100%;
@@ -5,10 +5,12 @@
5
5
  border-radius: 5rem;
6
6
  color: $gray-color-dark;
7
7
  display: inline-flex;
8
+ font-size: 90%;
8
9
  height: $unit-6;
10
+ line-height: $unit-4;
9
11
  margin: $unit-h;
10
12
  max-width: 100%;
11
- padding: $unit-h ($unit-2 + $unit-h);
13
+ padding: $unit-1 $unit-2;
12
14
  text-decoration: none;
13
15
  vertical-align: middle;
14
16
 
@@ -18,7 +20,7 @@
18
20
  }
19
21
 
20
22
  .avatar {
21
- margin-left: -($unit-2 + $unit-h);
23
+ margin-left: -$unit-2;
22
24
  margin-right: $unit-1;
23
25
  }
24
26
  }
@@ -2,13 +2,12 @@
2
2
  code {
3
3
  @include label-base();
4
4
  @include label-variant($code-color, lighten($code-color, 33%));
5
- font-size: .65rem;
5
+ font-size: 85%;
6
6
  }
7
7
 
8
8
  .code {
9
9
  border-radius: $border-radius;
10
10
  color: $body-font-color;
11
- line-height: $line-height;
12
11
  position: relative;
13
12
 
14
13
  &::before {
@@ -24,7 +23,7 @@ code {
24
23
  background: $bg-color;
25
24
  color: inherit;
26
25
  display: block;
27
- line-height: inherit;
26
+ line-height: 1.5;
28
27
  overflow-x: auto;
29
28
  padding: 1rem;
30
29
  width: 100%;
@@ -18,6 +18,7 @@ legend {
18
18
  // Form element: Label
19
19
  .form-label {
20
20
  display: block;
21
+ line-height: $line-height;
21
22
  padding: $control-padding-y + $border-width 0;
22
23
 
23
24
  &.label-sm {
@@ -249,14 +250,14 @@ textarea.form-input {
249
250
  border-left-width: 0;
250
251
  border-top-width: 0;
251
252
  content: "";
252
- height: 10px;
253
+ height: 12px;
253
254
  left: 50%;
254
- margin-left: -3px;
255
- margin-top: -6px;
255
+ margin-left: -4px;
256
+ margin-top: -8px;
256
257
  position: absolute;
257
258
  top: 50%;
258
259
  transform: rotate(45deg);
259
- width: 6px;
260
+ width: 8px;
260
261
  }
261
262
  }
262
263
  &:indeterminate + .form-icon {
@@ -278,21 +279,20 @@ textarea.form-input {
278
279
  }
279
280
  .form-radio {
280
281
  .form-icon {
281
- border-radius: $control-icon-size / 2;
282
+ border-radius: 50%;
282
283
  }
283
284
 
284
285
  input {
285
286
  &:checked + .form-icon {
286
287
  &::before {
287
288
  background: $bg-color-light;
288
- border-radius: $border-radius;
289
+ border-radius: 50%;
289
290
  content: "";
290
291
  height: 4px;
291
292
  left: 50%;
292
- margin-left: -2px;
293
- margin-top: -2px;
294
293
  position: absolute;
295
294
  top: 50%;
295
+ transform: translate(-50%, -50%);
296
296
  width: 4px;
297
297
  }
298
298
  }
@@ -314,7 +314,7 @@ textarea.form-input {
314
314
  &::before {
315
315
  @include control-transition();
316
316
  background: $bg-color-light;
317
- border-radius: $unit-2;
317
+ border-radius: 50%;
318
318
  content: "";
319
319
  display: block;
320
320
  height: $unit-4;
@@ -90,8 +90,8 @@
90
90
  // Label base style
91
91
  @mixin label-base() {
92
92
  border-radius: $border-radius;
93
- line-height: 1;
94
- padding: .15rem;
93
+ line-height: 1.2;
94
+ padding: .1rem .15rem;
95
95
  }
96
96
 
97
97
  @mixin label-variant($color: $light-color, $bg-color: $primary-color) {
@@ -40,6 +40,7 @@
40
40
  &.modal-sm {
41
41
  .modal-container {
42
42
  max-width: 320px;
43
+ padding: 0 $unit-2;
43
44
  }
44
45
  }
45
46
 
@@ -60,26 +61,22 @@
60
61
  background: $bg-color-light;
61
62
  border-radius: $border-radius;
62
63
  display: block;
63
- padding: 0;
64
+ padding: 0 $unit-4;
64
65
  text-align: left;
65
66
 
66
67
  .modal-header {
67
- padding: $unit-4 $unit-6;
68
-
69
- .modal-title {
70
- margin: 0;
71
- }
68
+ padding: $unit-4;
72
69
  }
73
70
 
74
71
  .modal-body {
75
72
  max-height: 50vh;
76
73
  overflow-y: auto;
77
- padding: $unit-4 $unit-6;
74
+ padding: $unit-4;
78
75
  position: relative;
79
76
  }
80
77
 
81
78
  .modal-footer {
82
- padding: $unit-4 $unit-6;
79
+ padding: $unit-4;
83
80
  text-align: right;
84
81
  }
85
82
  }
@@ -10,11 +10,6 @@
10
10
  .tab-item {
11
11
  margin-top: 0;
12
12
 
13
- &.tab-action {
14
- flex: 1 0 auto;
15
- text-align: right;
16
- }
17
-
18
13
  a {
19
14
  border-bottom: $border-width-lg solid transparent;
20
15
  color: inherit;
@@ -32,6 +27,15 @@
32
27
  border-bottom-color: $primary-color;
33
28
  color: $link-color;
34
29
  }
30
+
31
+ &.tab-action {
32
+ flex: 1 0 auto;
33
+ text-align: right;
34
+ }
35
+
36
+ .btn-clear {
37
+ margin-top: -$unit-1;
38
+ }
35
39
  }
36
40
 
37
41
  &.tab-block {
@@ -46,8 +50,8 @@
46
50
  .badge {
47
51
  &[data-badge]::after {
48
52
  position: absolute;
49
- right: -4px;
50
- top: -4px;
53
+ right: $unit-h;
54
+ top: $unit-h;
51
55
  transform: translate(0, 0);
52
56
  }
53
57
  }
@@ -56,7 +60,7 @@
56
60
 
57
61
  &:not(.tab-block) {
58
62
  .badge {
59
- padding-right: 2px;
63
+ padding-right: 0;
60
64
  }
61
65
  }
62
66
  }
@@ -44,7 +44,6 @@
44
44
 
45
45
  &.icon-lg {
46
46
  background: $primary-color;
47
- font-size: $font-size-lg;
48
47
  line-height: $line-height;
49
48
  &::before {
50
49
  content: none;
@@ -37,6 +37,6 @@
37
37
  }
38
38
 
39
39
  .btn-clear {
40
- margin: 2px -2px 2px 4px;
40
+ margin: 4px -2px 4px 4px;
41
41
  }
42
42
  }
@@ -9,7 +9,7 @@ h6 {
9
9
  color: inherit;
10
10
  font-weight: 500;
11
11
  line-height: 1.2;
12
- margin-bottom: .25em;
12
+ margin-bottom: .5em;
13
13
  margin-top: 0;
14
14
  }
15
15
  .h1,
@@ -47,8 +47,7 @@ h6,
47
47
 
48
48
  // Paragraphs
49
49
  p {
50
- line-height: 1.2 * $line-height;
51
- margin: 0 0 $unit-4;
50
+ margin: 0 0 $line-height;
52
51
  }
53
52
 
54
53
  // Semantic text elements
@@ -67,7 +66,7 @@ abbr[title] {
67
66
  kbd {
68
67
  @include label-base();
69
68
  @include label-variant($light-color, $dark-color);
70
- font-size: .65rem;
69
+ font-size: $font-size-sm;
71
70
  }
72
71
 
73
72
  mark {
@@ -1,5 +1,6 @@
1
1
  // Core variables
2
- // Colors
2
+ $version: "0.4.4";
3
+
3
4
  // Core colors
4
5
  $primary-color: #5755d9 !default;
5
6
  $primary-color-dark: darken($primary-color, 3%) !default;
@@ -8,14 +9,11 @@ $secondary-color: lighten($primary-color, 37.5%) !default;
8
9
  $secondary-color-dark: darken($secondary-color, 3%) !default;
9
10
  $secondary-color-light: lighten($secondary-color, 3%) !default;
10
11
 
11
- $link-color: $primary-color !default;
12
- $link-color-dark: darken($link-color, 5%) !default;
13
-
14
12
  // Gray colors
15
13
  $dark-color: #454d5d !default;
16
14
  $light-color: #fff !default;
17
15
  $gray-color: lighten($dark-color, 40%) !default;
18
- $gray-color-dark: darken($gray-color, 20%) !default;
16
+ $gray-color-dark: darken($gray-color, 25%) !default;
19
17
  $gray-color-light: lighten($gray-color, 20%) !default;
20
18
 
21
19
  $border-color: lighten($dark-color, 60%) !default;
@@ -34,6 +32,8 @@ $code-color: #e06870 !default;
34
32
  $highlight-color: #ffe9b3 !default;
35
33
  $body-bg: $bg-color-light !default;
36
34
  $body-font-color: lighten($dark-color, 5%) !default;
35
+ $link-color: $primary-color !default;
36
+ $link-color-dark: darken($link-color, 5%) !default;
37
37
 
38
38
  // Fonts
39
39
  // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
@@ -63,10 +63,10 @@ $unit-16: 3.2rem !default;
63
63
 
64
64
  // Font sizes
65
65
  $html-font-size: 20px !default;
66
- $html-line-height: 1.428571429 !default;
67
- $font-size: .7rem !default;
68
- $font-size-sm: .6rem !default;
69
- $font-size-lg: .8rem !default;
66
+ $html-line-height: 1.5 !default;
67
+ $font-size: .8rem !default;
68
+ $font-size-sm: .7rem !default;
69
+ $font-size-lg: .9rem !default;
70
70
  $line-height: 1rem !default;
71
71
 
72
72
  // Sizes
@@ -76,8 +76,8 @@ $layout-spacing-lg: $unit-4 !default;
76
76
  $border-radius: $unit-h !default;
77
77
  $border-width: $unit-o !default;
78
78
  $border-width-lg: $unit-h !default;
79
- $control-size: $unit-8 !default;
80
- $control-size-sm: $unit-6 !default;
79
+ $control-size: $unit-9 !default;
80
+ $control-size-sm: $unit-7 !default;
81
81
  $control-size-lg: $unit-10 !default;
82
82
  $control-padding-x: $unit-2 !default;
83
83
  $control-padding-x-sm: $unit-2 * .75 !default;
@@ -85,7 +85,7 @@ $control-padding-x-lg: $unit-2 * 1.5 !default;
85
85
  $control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
86
86
  $control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
87
87
  $control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
88
- $control-icon-size: .7rem !default;
88
+ $control-icon-size: .8rem !default;
89
89
  $control-min-width: 180px !default;
90
90
  $control-max-width: 320px !default;
91
91
 
@@ -45,3 +45,9 @@ $icon-prefix: "icon";
45
45
  vertical-align: -10%;
46
46
  }
47
47
  }
48
+
49
+ .btn-lg {
50
+ .#{$icon-prefix} {
51
+ vertical-align: -15%;
52
+ }
53
+ }
@@ -1,8 +1,8 @@
1
- /*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */
2
- // Core variables and mixins
1
+ // Variables and mixins
3
2
  @import "variables";
4
3
  @import "mixins";
5
4
 
5
+ /*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
6
6
  // Experimentals
7
7
  @import "calendars";
8
8
  @import "carousels";
@@ -1,9 +1,8 @@
1
- /*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */
2
-
3
- // Core variables and mixins
1
+ // Variables and mixins
4
2
  @import "variables";
5
3
  @import "mixins";
6
4
 
5
+ /*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */
7
6
  // Icons
8
7
  @import "icons/icons-core";
9
8
  @import "icons/icons-navigation";
@@ -1,13 +1,13 @@
1
- /*! Spectre.css | MIT License | github.com/picturepan2/spectre */
2
- // Core variables and mixins
1
+ // Variables and mixins
3
2
  @import "variables";
4
3
  @import "mixins";
5
4
 
5
+ /*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
6
6
  // Reset and dependencies
7
7
  @import "normalize";
8
8
  @import "base";
9
9
 
10
- // Core classes
10
+ // Elements
11
11
  @import "typography";
12
12
  @import "asian";
13
13
  @import "tables";
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.4.3.0
4
+ version: 0.4.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: 2017-10-03 00:00:00.000000000 Z
11
+ date: 2017-10-15 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler