sass-zero 0.0.53 → 0.0.57

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: ef1878766268af479d4f32219b7c7ba331ab129d10f6b2f96952be33ec0e8ce9
4
- data.tar.gz: b5bdbde5022b4d28ba7d0f3f1f2a2458f9dfc3cf9ac57d0eccc16061992c2280
3
+ metadata.gz: 1d59dcac8d72f42763e08239e15c235964dac127c94acf45f09964919f01cfa9
4
+ data.tar.gz: ce884ee7a8cf2612e37852f294be33be241d62c3a7c3f77e250a4aec47ec3e0b
5
5
  SHA512:
6
- metadata.gz: fdbaaae3bfc261ebaa88aa9f093c23cfdbfbb4555f9973b45cb74b2b2978cc642404170c5d3bb7e0d0adbdf972e66e3c079181bed723e05215a8249fd07c2671
7
- data.tar.gz: e8baebd379c732110fce7c439bfdd7d4bb830c6b3e283b4967b575cfd61c50299e8bb9c8c43e19b9e1bdcd3da68f9298de2865883cf63fe7295389a797acfc79
6
+ metadata.gz: d632a79c4cf523755d8e7059887c9f16074261de72c9bddec8dbec10bd2054c9cd72e86b52eaa1592806be40e9cad5b74acdb751b13ca738460a8a0b50092009
7
+ data.tar.gz: 441fe39c8be344a7cf6e433ec5f8cb410eca2fb03d70e2372df8b792e513974ffce9209cfca94ee85fce8d76cd66b82b75b5e7dee8911c9a07620401b5f656ff
data/Example.html CHANGED
@@ -5,6 +5,8 @@
5
5
  <small>Small</small>
6
6
  <strong>Strong</strong>
7
7
  <u>Underline</u>
8
+ <kbd>CTRL+C</kbd>
9
+ <mark>Highlighted text</mark>
8
10
  <h1>Heading</h1>
9
11
  <h2>Heading</h2>
10
12
  <h3>Heading</h3>
@@ -40,31 +42,31 @@
40
42
 
41
43
  <div class="push-md--bottom">
42
44
  <div>
43
- <input type="checkbox" name="option1" value="1" class="checkbox" checked>
45
+ <input type="checkbox" id="option1" name="option1" value="1" checked>
44
46
  <label for="option1" class="u-display-ib">Option 1</label>
45
47
  </div>
46
48
  <div>
47
- <input type="checkbox" name="option2" value="2" class="checkbox">
49
+ <input type="checkbox" id="option2" name="option2" value="2">
48
50
  <label for="option2" class="u-display-ib">Option 2</label>
49
51
  </div>
50
52
  <div>
51
- <input type="checkbox" name="option3" value="3" class="checkbox">
53
+ <input type="checkbox" id="option3" name="option3" value="3">
52
54
  <label for="option3" class="u-display-ib">Option 3</label>
53
55
  </div>
54
56
  </div>
55
57
 
56
58
  <div class="push-md--bottom">
57
59
  <div>
58
- <input type="radio" name="radio" value="1" class="radio" checked>
59
- <label for="radio" class="u-display-ib">Option 1</label>
60
+ <input type="radio" id="radio1" name="radio" value="1" checked>
61
+ <label for="radio1" class="u-display-ib">Option 1</label>
60
62
  </div>
61
63
  <div>
62
- <input type="radio" name="radio" value="2" class="radio">
63
- <label for="radio" class="u-display-ib">Option 2</label>
64
+ <input type="radio" id="radio2" name="radio" value="2">
65
+ <label for="radio2" class="u-display-ib">Option 2</label>
64
66
  </div>
65
67
  <div>
66
- <input type="radio" name="radio" value="3" class="radio">
67
- <label for="radio" class="u-display-ib">Option 3</label>
68
+ <input type="radio" id="radio3" name="radio" value="3">
69
+ <label for="radio3" class="u-display-ib">Option 3</label>
68
70
  </div>
69
71
  </div>
70
72
  </div>
@@ -97,19 +99,27 @@
97
99
  </tbody>
98
100
  </table>
99
101
 
102
+ <details>
103
+ <summary class="txt--bold">Some details</summary>
104
+ <p>More info about the details.</p>
105
+ </details>
106
+
100
107
  <blockquote>
101
- <p class="flush"><em>Yeah!! Milligram is amazing.</em></p>
108
+ <p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
109
+ <cite>– Stephen King</cite>
102
110
  </blockquote>
103
111
 
104
112
  <pre><code>.milligram {
105
113
  color: #9b4dca;
106
114
  }</code></pre>
107
115
 
108
- <code>
109
- .milligram {
110
- color: #9b4dca;
111
- }
112
- </code>
116
+ <div class="push-md--bottom">
117
+ <code>
118
+ .milligram {
119
+ color: #9b4dca;
120
+ }
121
+ </code>
122
+ </div>
113
123
 
114
124
  <hr>
115
125
 
data/README.md CHANGED
@@ -70,7 +70,8 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
70
70
  Add this to your application's Gemfile:
71
71
 
72
72
  ```ruby
73
- gem 'sass-zero'
73
+ gem "sass-zero"
74
+ gem "autoprefixer-rails"
74
75
  ```
75
76
 
76
77
  ## Usage
@@ -91,11 +92,11 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
91
92
  .block {
92
93
  color: $red-300;
93
94
 
94
- &__elem {
95
+ &__element {
95
96
  color: $red-400;
96
97
  }
97
98
 
98
- &--mod {
99
+ &--modifier {
99
100
  color: $red-500;
100
101
  }
101
102
  }
@@ -7,22 +7,19 @@ $radius-input: $rounded;
7
7
  $radius-button: $rounded;
8
8
 
9
9
  :root {
10
- --color-bg--main: #{$white};
11
- --color-bg--surface: #{$gray-100};
12
- --color-primary: #{$gray-900};
13
- --color-text: #{$gray-900};
14
- --color-focus-ring: #{rgba($gray-900, $opacity-50)};
15
-
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>');
10
+ --color-bg--main: #{$white};
11
+ --color-bg--surface: #{$gray-100};
12
+ --color-bg--highlight: #{$gray-200};
13
+ --color-primary: #{$gray-900};
14
+ --color-text: #{$gray-900};
15
+ --color-focus-ring: #{rgba($gray-900, $opacity-50)};
19
16
  }
20
17
 
21
18
  html {
19
+ accent-color: var(--color-primary);
22
20
  background: var(--color-bg--main);
23
21
  color: var(--color-text);
24
22
  font-family: $font-family;
25
- font-size: 16px;
26
23
  }
27
24
 
28
25
  .btn {
@@ -33,11 +30,6 @@ html {
33
30
  padding: $size-2 $size-4;
34
31
  cursor: pointer;
35
32
 
36
- &:disabled {
37
- pointer-events: none;
38
- opacity: $opacity-50;
39
- }
40
-
41
33
  &--primary {
42
34
  background-color: var(--color-primary);
43
35
  border-color: var(--color-primary);
@@ -54,6 +46,16 @@ html {
54
46
  background-color: $transparent;
55
47
  border-color: $transparent;
56
48
  }
49
+
50
+ &:focus {
51
+ box-shadow: ring($color: var(--color-focus-ring));
52
+ @include outline-none;
53
+ }
54
+
55
+ &:disabled {
56
+ pointer-events: none;
57
+ opacity: $opacity-50;
58
+ }
57
59
  }
58
60
 
59
61
  .input {
@@ -66,11 +68,10 @@ html {
66
68
  width: $w-full;
67
69
 
68
70
  &--select {
69
- background-image: var(--image-bg-select);
70
- background-position: right $size-2 center;
71
+ background-image: linear-gradient(45deg, transparent 49%, var(--color-text) 51%), linear-gradient(135deg, var(--color-text) 51%, transparent 49%);
72
+ background-position: calc(100% - 20px), calc(100% - 15px);
71
73
  background-repeat: no-repeat;
72
- background-size: auto $size-5;
73
- padding-right: $size-8;
74
+ background-size: 5px 5px, 5px 5px;
74
75
  }
75
76
 
76
77
  &:focus {
@@ -79,32 +80,12 @@ html {
79
80
  }
80
81
  }
81
82
 
82
- .checkbox {
83
- border-radius: $rounded;
84
- @include input-selection(var(--color-primary));
85
-
86
- &:checked {
87
- background-image: var(--image-checked-checkbox);
88
- @include checked;
89
- }
83
+ input[type="checkbox"], input[type="radio"] {
84
+ transform: scale(1.2, 1.2);
85
+ margin: $size-1;
90
86
 
91
87
  &:focus {
92
- box-shadow: ring($color: var(--color-focus-ring));
93
- @include outline-none;
94
- }
95
- }
96
-
97
- .radio {
98
- border-radius: $rounded-full;
99
- @include input-selection(var(--color-primary));
100
-
101
- &:checked {
102
- background-image: var(--image-checked-radio);
103
- @include checked;
104
- }
105
-
106
- &:focus {
107
- box-shadow: ring($color: var(--color-focus-ring));
88
+ box-shadow: ring($width: 2px, $color: var(--color-focus-ring));
108
89
  @include outline-none;
109
90
  }
110
91
  }
@@ -114,11 +95,14 @@ blockquote {
114
95
  padding: $size-3 $size-4;
115
96
  }
116
97
 
98
+ cite {
99
+ font-size: $text-sm;
100
+ }
101
+
117
102
  code {
118
103
  background-color: var(--color-bg--surface);
119
104
  border-radius: $rounded;
120
105
  font-size: $text-sm;
121
- margin: $size-0 $size-1;
122
106
  padding: $size-1 $size-2;
123
107
  white-space: nowrap;
124
108
  }
@@ -136,6 +120,20 @@ pre {
136
120
  }
137
121
  }
138
122
 
123
+ kbd {
124
+ background-color: var(--color-primary);
125
+ border-radius: $rounded;
126
+ font-size: $text-sm;
127
+ padding: $size-1 $size-2;
128
+ color: var(--color-bg--main);
129
+ }
130
+
131
+ mark {
132
+ background-color: var(--color-bg--highlight);
133
+ border-radius: $rounded;
134
+ padding: $size-1 $size-2;
135
+ }
136
+
139
137
  hr {
140
138
  margin: $size-6 $size-0;
141
139
  }
@@ -168,10 +166,20 @@ fieldset, .input {
168
166
  margin-bottom: $size-6;
169
167
  }
170
168
 
171
- blockquote, figure, p, pre, table, ul, ol, dl {
169
+ table, details, blockquote, p, pre, ul, ol, dl {
172
170
  margin-bottom: $size-6;
173
171
  }
174
172
 
173
+ details {
174
+ padding: $size-2 $size-3;
175
+ background-color: var(--color-bg--surface);
176
+ border-left-width: $border-4;
177
+ }
178
+
179
+ summary {
180
+ cursor: pointer;
181
+ }
182
+
175
183
  table {
176
184
  width: $w-full;
177
185
  }
@@ -19,22 +19,6 @@
19
19
  overflow: hidden;
20
20
  }
21
21
 
22
- @mixin input-selection($color) {
23
- appearance: none;
24
- border-width: $border;
25
- color: $color;
26
- margin-bottom: -0.1rem;
27
- height: $size-4;
28
- width: $size-4;
29
- }
30
-
31
- @mixin checked {
32
- border-color: transparent;
33
- background-color: currentColor;
34
- background-position: center;
35
- background-repeat: no-repeat;
36
- }
37
-
38
22
  @mixin outline-none {
39
23
  outline: 2px solid transparent;
40
24
  outline-offset: 2px;
@@ -14,28 +14,11 @@
14
14
  list-style: none;
15
15
  }
16
16
 
17
- .list--spaced > li + li {
18
- margin-top: $size-2;
19
- }
20
-
21
- .list--inside-bulleted {
22
- padding-left: $size-0;
23
- list-style-position: inside;
24
- }
25
-
26
- .list--ruled-top {
27
- border-top-width: $border;
28
- }
29
-
30
- .list--inline > li {
17
+ .list--inline li {
31
18
  display: inline-block;
19
+ vertical-align: middle;
32
20
  }
33
21
 
34
- .list--inline > li + li {
35
- margin-left: $size-2;
36
- }
37
-
38
- .list--ruled > li {
39
- padding: $size-4 $size-2;
40
- border-top-width: $border;
22
+ .list--dividers li:not(:last-child) {
23
+ border-bottom-width: $border;
41
24
  }
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "0.0.53"
3
+ VERSION = "0.0.57"
4
4
  end
5
5
  end
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sass-zero",
3
- "version": "0.0.53",
3
+ "version": "0.0.57",
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.53
4
+ version: 0.0.57
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2021-11-20 00:00:00.000000000 Z
11
+ date: 2022-01-12 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: