sass-zero 0.0.20 → 0.0.21

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: f73e8573a7b795f1508adf945bfc69a8928a8467427c80e22f78823a077f492a
4
- data.tar.gz: 519f2cd6be4efb4b5a783d22d4dc0709df0a60d7a37e098bfc1d8598eb4a955f
3
+ metadata.gz: e55fa6443e023b6965d4533d6d8def09aa3f819a64e880478c1b8922e3066f8f
4
+ data.tar.gz: c680e1fcd21f138fa92ae0e9b487a05b1bea065e2d77770c62e1df9058c54505
5
5
  SHA512:
6
- metadata.gz: c91035309858f0560e77142e8220d92bead4d50dd2aec92650acfda4d23165037cdfed31696c7accb143a1d2f26c7aed3bd1edc306c842d6e8dff1ab313636fb
7
- data.tar.gz: e696b34715b62559f275c4dc6310d130a05a3aef92ceeeb2880a92a1f69097e62b94e01b36ea14c84f1d680eeee860f089a4fcd3bcd40af550caa3bbf055e651
6
+ metadata.gz: 8acbcde772936a8a163e08bec0a993ae61ed9e5e30ee0cb0e2b182f839b8713158f9a94db576b8529ca3fffef0616143810a078a3e3053bc6b6eeae6a887f18c
7
+ data.tar.gz: 6c5e9bda9a4ee8f9322e737af191c9c3e595e38b432e5e99edd6ad45b1b27e7ada5f921c2549f7f1e1b70fd7abe074fe219652cf82e43117af36ed4d800af020
data/Example.html CHANGED
@@ -13,73 +13,64 @@
13
13
  <h6>Heading</h6>
14
14
 
15
15
 
16
- <button>Default Button</button>
17
- <button class="btn--primary">Button Primary</button>
18
- <button class="btn--secondary">Button Secondary</button>
19
- <button class="btn--tertiary">Button Tertiary</button>
16
+ <button class="btn btn--primary">Button Primary</button>
17
+ <button class="btn btn--secondary">Button Secondary</button>
18
+ <button class="btn btn--tertiary">Button Tertiary</button>
20
19
 
21
- <a href="#" class="btn">Link Button</a>
20
+ <a href="#" class="btn btn--primary">Link Button</a>
22
21
 
23
- <input type="submit" value="Submit Button" />
22
+ <input type="submit" value="Submit Button" class="btn btn--primary" />
24
23
 
25
24
  <hr>
26
25
 
27
26
  <form>
28
27
  <fieldset>
29
28
  <label for="nameField">Name</label>
30
- <input type="text" placeholder="CJ Patoilo" id="nameField">
29
+ <input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
31
30
  <label for="ageRangeField">Age Range</label>
32
31
 
33
- <select id="ageRangeField">
32
+ <select id="ageRangeField" class="input input--select">
34
33
  <option value="0-13">0-13</option>
35
34
  <option value="14-17">14-17</option>
36
35
  <option value="18-23">18-23</option>
37
36
  <option value="24+">24+</option>
38
37
  </select>
39
38
 
40
- <select multiple>
41
- <option>Option 1</option>
42
- <option>Option 2</option>
43
- <option>Option 3</option>
44
- <option>Option 4</option>
45
- <option>Option 5</option>
46
- </select>
47
-
48
39
  <label for="commentField">Comment</label>
49
- <textarea placeholder="Hi CJ …" id="commentField" rows="3"></textarea>
40
+ <textarea placeholder="Hi CJ …" id="commentField" rows="3" class="input"></textarea>
50
41
 
51
42
  <div class="push-md--bottom">
52
43
  <div>
53
- <input type="checkbox" name="option1" value="1" checked>
44
+ <input type="checkbox" name="option1" value="1" class="checkbox" checked>
54
45
  <label for="option1" class="u-display-ib">Option 1</label>
55
46
  </div>
56
47
  <div>
57
- <input type="checkbox" name="option2" value="2">
48
+ <input type="checkbox" name="option2" value="2" class="checkbox">
58
49
  <label for="option2" class="u-display-ib">Option 2</label>
59
50
  </div>
60
51
  <div>
61
- <input type="checkbox" name="option3" value="3">
52
+ <input type="checkbox" name="option3" value="3" class="checkbox">
62
53
  <label for="option3" class="u-display-ib">Option 3</label>
63
54
  </div>
64
55
  </div>
65
56
 
66
57
  <div class="push-md--bottom">
67
58
  <div>
68
- <input type="radio" name="radio" value="1" checked>
59
+ <input type="radio" name="radio" value="1" class="radio" checked>
69
60
  <label for="radio" class="u-display-ib">Option 1</label>
70
61
  </div>
71
62
  <div>
72
- <input type="radio" name="radio" value="2">
63
+ <input type="radio" name="radio" value="2" class="radio">
73
64
  <label for="radio" class="u-display-ib">Option 2</label>
74
65
  </div>
75
66
  <div>
76
- <input type="radio" name="radio" value="3">
67
+ <input type="radio" name="radio" value="3" class="radio">
77
68
  <label for="radio" class="u-display-ib">Option 3</label>
78
69
  </div>
79
70
  </div>
80
71
  </fieldset>
81
72
 
82
- <input type="submit" value="Send">
73
+ <input type="submit" value="Send" class="btn btn--primary">
83
74
  </form>
84
75
 
85
76
  <table>
data/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  SASS-ZERO is a css framework that brings concepts from [tailwindcss](https://tailwindcss.com) and [milligram](https://milligram.io) but with ideas from [BEM](http://getbem.com/naming), [Refactoring UI](https://refactoringui.com/book) and [Shape UP](https://basecamp.com/shapeup).
4
4
 
5
- ![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/Screenshot_2020-03-06+Routeend.png)
5
+ ![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/Screenshot_2020-03-07+Routeend.png)
6
6
 
7
7
  ### Milligram
8
8
 
@@ -14,15 +14,11 @@ blockquote {
14
14
  }
15
15
  }
16
16
 
17
- .btn,
18
- button,
19
- input[type='button'],
20
- input[type='reset'],
21
- input[type='submit'] {
17
+ .btn {
22
18
  background-color: $white;
23
19
  border-radius: $rounded;
24
20
  border-width: $border;
25
- color: $breadboard-primary;
21
+ color: inherit;
26
22
  display: inline-block;
27
23
  font-weight: $font-bold;
28
24
  padding: $size-2 $size-4;
@@ -32,24 +28,24 @@ input[type='submit'] {
32
28
  cursor: default;
33
29
  opacity: $opacity-50;
34
30
  }
35
- }
36
31
 
37
- .btn {
38
32
  &--primary {
39
- background-color: $breadboard-primary !important;
33
+ background-color: $breadboard-primary;
40
34
  border-color: $breadboard-primary;
35
+ color: $white;
41
36
  box-shadow: $shadow-sm;
42
- color: $white !important;
43
37
  }
44
38
 
45
39
  &--secondary {
46
- background-color: transparent !important;
40
+ background-color: transparent;
47
41
  border-color: $breadboard-primary;
42
+ color: $breadboard-primary;
48
43
  }
49
44
 
50
45
  &--tertiary {
51
- background-color: transparent !important;
46
+ background-color: transparent;
52
47
  border-color: transparent;
48
+ color: $breadboard-primary;
53
49
  }
54
50
  }
55
51
 
@@ -81,22 +77,7 @@ hr {
81
77
  border-bottom-width: $border-2;
82
78
  }
83
79
 
84
- input[type='email'],
85
- input[type='number'],
86
- input[type='password'],
87
- input[type='search'],
88
- input[type='tel'],
89
- input[type='text'],
90
- input[type='url'],
91
- input[type='color'],
92
- input[type='date'],
93
- input[type='month'],
94
- input[type='week'],
95
- input[type='datetime'],
96
- input[type='datetime-local'],
97
- input:not([type]),
98
- textarea,
99
- select {
80
+ .input {
100
81
  appearance: none;
101
82
  border-radius: $rounded;
102
83
  border-width: $border;
@@ -109,14 +90,14 @@ select {
109
90
  box-shadow: $shadow-outline;
110
91
  outline: 0;
111
92
  }
112
- }
113
93
 
114
- select:not([multiple]) {
115
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23a0aec0"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>');
116
- background-position: right $size-2 center;
117
- background-repeat: no-repeat;
118
- background-size: auto $size-6;
119
- padding-right: $size-10;
94
+ &--select {
95
+ background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="%23a0aec0" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>');
96
+ background-position: right $size-2 center;
97
+ background-repeat: no-repeat;
98
+ background-size: auto $size-6;
99
+ padding-right: $size-10;
100
+ }
120
101
  }
121
102
 
122
103
  label, legend {
@@ -124,8 +105,7 @@ label, legend {
124
105
  margin-bottom: $size-1;
125
106
  }
126
107
 
127
- input[type='checkbox'],
128
- input[type='radio'] {
108
+ .checkbox, .radio {
129
109
  appearance: none;
130
110
  background-origin: border-box;
131
111
  border-width: $border;
@@ -141,9 +121,15 @@ input[type='radio'] {
141
121
  background-position: center;
142
122
  background-repeat: no-repeat;
143
123
  }
124
+
125
+ &:focus {
126
+ border-color: $breadboard-color;
127
+ box-shadow: $shadow-outline;
128
+ outline: 0;
129
+ }
144
130
  }
145
131
 
146
- input[type='checkbox'] {
132
+ .checkbox {
147
133
  border-radius: $rounded;
148
134
 
149
135
  &:checked {
@@ -151,7 +137,7 @@ input[type='checkbox'] {
151
137
  }
152
138
  }
153
139
 
154
- input[type='radio'] {
140
+ .radio {
155
141
  border-radius: $rounded-full;
156
142
 
157
143
  &:checked {
@@ -161,7 +147,7 @@ input[type='radio'] {
161
147
 
162
148
  a {
163
149
  color: $breadboard-primary;
164
- font-weight: $font-semibold;
150
+ font-weight: $font-bold;
165
151
  cursor: pointer;
166
152
  }
167
153
 
@@ -182,17 +168,11 @@ h6 {
182
168
  margin-bottom: $size-2;
183
169
  }
184
170
 
185
- button,
186
- dd,
187
- dt,
188
- li {
171
+ dd, dt, li, .btn {
189
172
  margin-bottom: $size-2;
190
173
  }
191
174
 
192
- fieldset,
193
- input,
194
- select,
195
- textarea {
175
+ fieldset, .input, .select {
196
176
  margin-bottom: $size-4;
197
177
  }
198
178
 
@@ -9,14 +9,34 @@
9
9
  flex-direction: row;
10
10
  }
11
11
 
12
+ &--justify-start {
13
+ justify-content: flex-start;
14
+ }
15
+
12
16
  &--justify-center {
13
17
  justify-content: center;
14
18
  }
15
19
 
20
+ &--justify-end {
21
+ justify-content: flex-end;
22
+ }
23
+
24
+ &--justify-between {
25
+ justify-content: space-between;
26
+ }
27
+
28
+ &--justify-around {
29
+ justify-content: space-around;
30
+ }
31
+
16
32
  &--items-center {
17
33
  align-items: center;
18
34
  }
19
35
 
36
+ &--items-baseline {
37
+ align-items: baseline;
38
+ }
39
+
20
40
  &--none {
21
41
  flex: none;
22
42
  }
@@ -57,10 +57,12 @@
57
57
 
58
58
  &--subtle {
59
59
  color: $gray-700;
60
+ font-weight: $font-normal;
60
61
  }
61
62
 
62
63
  &--very-subtle {
63
64
  color: $gray-600;
65
+ font-weight: $font-normal;
64
66
  }
65
67
 
66
68
  &--capitalize {
@@ -7,7 +7,7 @@ $scale-0: 0;
7
7
  $scale-50: 0.50;
8
8
  $scale-75: 0.75;
9
9
  $scale-90: 0.90;
10
- $scale-95: 95;
10
+ $scale-95: 0.95;
11
11
  $scale-100: 1;
12
12
  $scale-105: 1.05;
13
13
  $scale-110: 1.10;
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "0.0.20"
3
+ VERSION = "0.0.21"
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.20",
3
+ "version": "0.0.21",
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.20
4
+ version: 0.0.21
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-03-07 00:00:00.000000000 Z
11
+ date: 2020-03-16 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: autoprefixer-rails