sass-zero 0.0.45 → 0.0.46

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: 90335efa16cb09716e4c31bd9cb7df2469d9e586ce409ac5db752ef195f367a5
4
- data.tar.gz: 867fd4aec244f7886f26d438734e92d3e7511d9be443983632d673a12a4296b3
3
+ metadata.gz: a70d79a12adc6f8ce1f1e8cb6010376853a05f3811220d802bdba66807af5f73
4
+ data.tar.gz: 468f771702b25513dd37bfb8fc80e3ebbc61816db3680b3bc3839976676eaafb
5
5
  SHA512:
6
- metadata.gz: 14ac230bce5200038c588cbca45e565931061251a1e401ccf3699a1c326ef55eb0caf3806b6c29124a6641847567891d69e3d43c0b0280cf8ba26f4d7ac66ee3
7
- data.tar.gz: b525273b68b1538a8102dbeb0ccd9abeaa9bcb5f60e1fea95829613fdcdfcdb354b991e228e22c6fd915fb4c515374cedac40d775c233ac8b5289ef3735948d9
6
+ metadata.gz: d1b54a51fe3aff5ca9203f97ac299afbef75c7fc823d6809ef33c8157856d253126d215bf635eb34ffd53e70387b682cc4b4f9db942ca7a21d8450302127d199
7
+ data.tar.gz: dc64fedbee094996ad563e765e3edbd70e53a659d653437e26baea00abe691b925e564929c1932c22e0d3411d0e7855b5e6806103a13b302eb4213b592a490e7
@@ -1,6 +1,6 @@
1
1
  <main class="container">
2
2
  <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
3
- <a href="#">Anchor</a>
3
+ <a href="#" class="txt--underline">Anchor</a>
4
4
  <em>Emphasis</em>
5
5
  <small>Small</small>
6
6
  <strong>Strong</strong>
@@ -6,29 +6,25 @@ $font-family: $font-sans;
6
6
  $radius-input: $rounded;
7
7
  $radius-button: $rounded;
8
8
 
9
- $color-bg--main: $white;
10
- $color-bg--surface: $gray-100;
11
- $color-primary: $gray-900;
12
- $color-txt: $gray-900;
13
- $color-focus-ring: rgba($gray-900, $opacity-50);
9
+ :root {
10
+ --color-bg--main: #{$white};
11
+ --color-bg--surface: #{$gray-100};
12
+ --color-primary: #{$gray-900};
13
+ --color-txt: #{$gray-900};
14
+ --color-focus-ring: #{rgba($gray-900, $opacity-50)};
14
15
 
15
- $image-bg-select-black: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
16
- $image-checked-checkbox-white: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
17
- $image-checked-radio-white: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
16
+ --image-bg-select: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
17
+ --image-checked-checkbox: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
18
+ --image-checked-radio: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
19
+ }
18
20
 
19
21
  html {
20
- background: $color-bg--main;
21
- color: $color-txt;
22
+ background: var(--color-bg--main);
23
+ color: var(--color-txt);
22
24
  font-family: $font-family;
23
25
  font-size: 16px;
24
26
  }
25
27
 
26
- blockquote {
27
- border-color: $color-primary;
28
- border-left-width: $border-4;
29
- padding: $size-3 $size-4;
30
- }
31
-
32
28
  .btn {
33
29
  border-radius: $radius-button;
34
30
  border-width: $border;
@@ -38,7 +34,7 @@ blockquote {
38
34
  cursor: pointer;
39
35
 
40
36
  &:focus {
41
- outline: 2px dotted $color-primary;
37
+ outline: 2px dotted var(--color-primary);
42
38
  outline-offset: 2px;
43
39
  }
44
40
 
@@ -48,14 +44,14 @@ blockquote {
48
44
  }
49
45
 
50
46
  &--primary {
51
- background-color: $color-primary;
52
- border-color: $color-primary;
53
- color: $color-bg--main;
47
+ background-color: var(--color-primary);
48
+ border-color: var(--color-primary);
49
+ color: var(--color-bg--main);
54
50
  }
55
51
 
56
52
  &--secondary {
57
- background-color: $color-bg--main;
58
- border-color: $color-primary;
53
+ background-color: var(--color-bg--main);
54
+ border-color: var(--color-primary);
59
55
  }
60
56
 
61
57
  &--tertiary {
@@ -64,33 +60,6 @@ blockquote {
64
60
  }
65
61
  }
66
62
 
67
- code {
68
- background-color: $color-bg--surface;
69
- border-radius: $rounded-xl;
70
- font-size: $text-sm;
71
- margin: $size-0 $size-1;
72
- padding: $size-1 $size-2;
73
- white-space: nowrap;
74
- }
75
-
76
- pre {
77
- background-color: $color-bg--surface;
78
- border-color: $color-primary;
79
- border-left-width: $border-4;
80
- overflow-y: hidden;
81
-
82
- & > code {
83
- border-radius: $rounded-none;
84
- display: block;
85
- padding: $size-2 $size-3;
86
- white-space: pre;
87
- }
88
- }
89
-
90
- hr {
91
- margin: $size-6 $size-0;
92
- }
93
-
94
63
  .input {
95
64
  appearance: none;
96
65
  background-color: $transparent;
@@ -100,7 +69,7 @@ hr {
100
69
  width: $size-full;
101
70
 
102
71
  &--select {
103
- background-image: $image-bg-select-black;
72
+ background-image: var(--image-bg-select);
104
73
  background-position: right $size-2 center;
105
74
  background-repeat: no-repeat;
106
75
  background-size: auto $size-5;
@@ -108,41 +77,70 @@ hr {
108
77
  }
109
78
 
110
79
  &:focus {
111
- box-shadow: ring($color: $color-focus-ring);
80
+ box-shadow: ring($color: var(--color-focus-ring));
112
81
  @include outline-none;
113
82
  }
114
83
  }
115
84
 
116
85
  .checkbox {
117
86
  border-radius: $rounded;
118
- @include input-selection($color-primary);
87
+ @include input-selection(var(--color-primary));
119
88
 
120
89
  &:checked {
121
- background-image: $image-checked-checkbox-white;
90
+ background-image: var(--image-checked-checkbox);
122
91
  @include checked;
123
92
  }
124
93
 
125
94
  &:focus {
126
- box-shadow: ring($color: $color-focus-ring);
95
+ box-shadow: ring($color: var(--color-focus-ring));
127
96
  @include outline-none;
128
97
  }
129
98
  }
130
99
 
131
100
  .radio {
132
101
  border-radius: $rounded-full;
133
- @include input-selection($color-primary);
102
+ @include input-selection(var(--color-primary));
134
103
 
135
104
  &:checked {
136
- background-image: $image-checked-radio-white;
105
+ background-image: var(--image-checked-radio);
137
106
  @include checked;
138
107
  }
139
108
 
140
109
  &:focus {
141
- box-shadow: ring($color: $color-focus-ring);
110
+ box-shadow: ring($color: var(--color-focus-ring));
142
111
  @include outline-none;
143
112
  }
144
113
  }
145
114
 
115
+ blockquote {
116
+ border-left-width: $border-4;
117
+ padding: $size-3 $size-4;
118
+ }
119
+
120
+ code {
121
+ background-color: var(--color-bg--surface);
122
+ border-radius: $rounded;
123
+ font-size: $text-sm;
124
+ margin: $size-0 $size-1;
125
+ padding: $size-1 $size-2;
126
+ white-space: nowrap;
127
+ }
128
+
129
+ pre {
130
+ background-color: var(--color-bg--surface);
131
+ overflow-y: hidden;
132
+
133
+ & > code {
134
+ display: block;
135
+ padding: $size-2 $size-3;
136
+ white-space: pre;
137
+ }
138
+ }
139
+
140
+ hr {
141
+ margin: $size-6 $size-0;
142
+ }
143
+
146
144
  a {
147
145
  font-weight: $font-bold;
148
146
  }
@@ -182,7 +180,7 @@ table {
182
180
  td, th {
183
181
  border-bottom-width: $border;
184
182
  padding: $size-3 $size-4;
185
- text-align: left;
183
+ text-align: inherit;
186
184
  }
187
185
 
188
186
  h1, h2, h3, h4, h5, h6, .hdg {
@@ -1,10 +1,3 @@
1
- $color-txt: #18181b;
2
- $color-txt--subtle: #3f3f46;
3
- $color-txt--subtle-reversed: #fff;
4
- $color-txt--decorated: #3b82f6;
5
-
6
- $color-bg--highlight: #f4f4f5;
7
-
8
1
  @import "sass-zero/utilities/align";
9
2
  @import "sass-zero/utilities/animation";
10
3
  @import "sass-zero/utilities/container";
@@ -18,23 +18,6 @@
18
18
  text-transform: uppercase;
19
19
  }
20
20
 
21
- .txt--subtle {
22
- color: $color-txt--subtle;
23
- }
24
-
25
- .txt--subtle-reversed {
26
- color: $color-txt--subtle-reversed;
27
- }
28
-
29
- .txt--full-contrast {
30
- color: $color-txt;
31
- }
32
-
33
- .txt--meta {
34
- font-size: $text-sm;
35
- color: $color-txt--subtle;
36
- }
37
-
38
21
  .txt--nowrap {
39
22
  white-space: nowrap;
40
23
  }
@@ -63,12 +46,6 @@
63
46
  opacity: $opacity-50;
64
47
  }
65
48
 
66
- .txt--highlight {
67
- background-color: $color-bg--highlight;
68
- border-radius: $rounded-full;
69
- padding: $size-0 $size-1;
70
- }
71
-
72
49
  .txt--overflow-hidden {
73
50
  overflow: hidden;
74
51
  }
@@ -138,16 +115,6 @@
138
115
  line-height: $leading-none;
139
116
  }
140
117
 
141
- .decorated {
142
- color: $color-txt--decorated;
143
- text-decoration: underline;
144
- }
145
-
146
- .decorated--subtle {
147
- color: $color-txt--subtle;
148
- text-decoration: underline;
149
- }
150
-
151
118
  .undecorated {
152
119
  color: inherit;
153
120
  text-decoration: none;
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "0.0.45"
3
+ VERSION = "0.0.46"
4
4
  end
5
5
  end
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sass-zero",
3
- "version": "0.0.45",
3
+ "version": "0.0.46",
4
4
  "description": "A CSS framework for rapid UI development based on tailwindcss, miligram and BEM.",
5
5
  "homepage": "https://github.com/lazaronixon/sass-zero",
6
6
  "repository": "lazaronixon/sass-zero",
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: sass-zero
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.45
4
+ version: 0.0.46
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
8
- autorequire:
8
+ autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-12-18 00:00:00.000000000 Z
11
+ date: 2020-12-19 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: autoprefixer-rails
@@ -24,7 +24,7 @@ dependencies:
24
24
  - - ">="
25
25
  - !ruby/object:Gem::Version
26
26
  version: 9.7.4
27
- description:
27
+ description:
28
28
  email:
29
29
  - lazaronixon@hotmail.com
30
30
  executables: []
@@ -75,7 +75,7 @@ homepage: http://github.com/lazaronixon/sass-zero
75
75
  licenses:
76
76
  - MIT
77
77
  metadata: {}
78
- post_install_message:
78
+ post_install_message:
79
79
  rdoc_options: []
80
80
  require_paths:
81
81
  - lib
@@ -91,7 +91,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
91
91
  version: '0'
92
92
  requirements: []
93
93
  rubygems_version: 3.1.4
94
- signing_key:
94
+ signing_key:
95
95
  specification_version: 4
96
96
  summary: A CSS framework for rapid UI development based on tailwindcss, miligram and
97
97
  BEM.