sass-zero 1.0.3 → 1.0.7

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 58c3fb4cc95db1127d5646180ee3ea766882a1326a0cc5a11142c5918822293d
4
- data.tar.gz: 1698339f84559f3692e37f8bb6b125d5634950878776d91d7551feaa8d89e984
3
+ metadata.gz: 46882627e2285dd456431a286653f50b753313f0d7e6ee9900c728a217d515c2
4
+ data.tar.gz: 37e6d78084555610d127df0ed38dbce0415dfe90ad83bf281a3daeb3e128d1bd
5
5
  SHA512:
6
- metadata.gz: a4dcf12faca09349e37f55d0e6b170c806db0bbbfaa3ce62a89965306e4b48237dd5fb691ed3b4eee43b800358e4fe746fcd59781a4320b1351ebec9537faf76
7
- data.tar.gz: 1c2bef8ccfc4e157ba3b2ab77682f0b7bb8242268dbbd04d5132da594821b9f648b764640b7b10ae346eeacf956994ca28587e23e04a74cc04058be249d532b0
6
+ metadata.gz: 245dd86d9fee9a4b9cc128d9c59bfd838e28199becfa3fc6847e16d8e1d177814d17466ac945b736556cb32db0e39dee18fdb31bca5d2cafce6326bf9abd84a9
7
+ data.tar.gz: 63689367de8c57239f859e630602259236bd6796d3d65fa018ac8771aa785f23cb076333573658d977812558825cbe197ef38d163c82257a4ea894bdc544da21
data/Example.html CHANGED
@@ -18,62 +18,78 @@
18
18
  <button class="btn btn--secondary">Button Secondary</button>
19
19
  <button class="btn btn--tertiary">Button Tertiary</button>
20
20
 
21
- <a href="#" class="btn btn--primary">Link Button</a>
21
+ <a href="#" class="btn btn--secondary">Link Button</a>
22
+ <input type="submit" value="Submit Button" class="btn btn--secondary" />
22
23
 
23
- <input type="submit" value="Submit Button" class="btn btn--primary" />
24
+ <button class="btn btn--secondary"><i class="bx bx-plus"></i> Icon Button</button>
25
+ <button class="btn btn--secondary btn--small">Small Button</button>
24
26
 
25
27
  <hr>
26
28
 
27
- <form class="push-lg--bottom">
28
- <div class="push-md--bottom">
29
- <label for="nameField" class="u-display-b txt--bold">Name</label>
30
- <input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
31
-
32
- <label for="ageRangeField" class="u-display-b txt--bold">Age Range</label>
33
- <select id="ageRangeField" class="input input--select">
34
- <option value="0-13">0-13</option>
35
- <option value="14-17">14-17</option>
36
- <option value="18-23">18-23</option>
37
- <option value="24+">24+</option>
38
- </select>
39
-
40
- <label for="commentField" class="u-display-b txt--bold">Comment</label>
41
- <textarea placeholder="Hi CJ …" id="commentField" rows="3" class="input"></textarea>
42
-
43
- <div class="push-md--bottom">
44
- <div>
45
- <input type="checkbox" id="option1" name="option1" value="1" checked>
46
- <label for="option1" class="u-display-ib">Option 1</label>
47
- </div>
48
- <div>
49
- <input type="checkbox" id="option2" name="option2" value="2">
50
- <label for="option2" class="u-display-ib">Option 2</label>
51
- </div>
52
- <div>
53
- <input type="checkbox" id="option3" name="option3" value="3">
54
- <label for="option3" class="u-display-ib">Option 3</label>
55
- </div>
29
+ <form class="push-md--bottom">
30
+ <label for="nameField" class="u-display-b txt--bold">Name</label>
31
+ <input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
32
+
33
+ <label for="iceCreamField" class="u-display-b txt--bold">Choose a flavor:</label>
34
+ <input list="iceCreamFlavors" id="iceCreamField" class="input" />
35
+ <datalist id="iceCreamFlavors">
36
+ <option value="Chocolate">
37
+ <option value="Coconut">
38
+ <option value="Mint">
39
+ <option value="Strawberry">
40
+ <option value="Vanilla">
41
+ </datalist>
42
+
43
+ <label for="ageRangeField" class="u-display-b txt--bold">Age Range</label>
44
+ <select id="ageRangeField" class="input input--select">
45
+ <option value="0-13">0-13</option>
46
+ <option value="14-17">14-17</option>
47
+ <option value="18-23">18-23</option>
48
+ <option value="24+">24+</option>
49
+ </select>
50
+
51
+ <label for="commentField" class="u-display-b txt--bold">Comment</label>
52
+ <textarea placeholder="Hi CJ …" id="commentField" rows="3" class="input"></textarea>
53
+
54
+ <fieldset>
55
+ <legend>Choose your options</legend>
56
+
57
+ <div>
58
+ <input type="checkbox" id="option1" name="option1" value="1" checked>
59
+ <label for="option1" class="u-display-ib">Option 1</label>
56
60
  </div>
61
+ <div>
62
+ <input type="checkbox" id="option2" name="option2" value="2">
63
+ <label for="option2" class="u-display-ib">Option 2</label>
64
+ </div>
65
+ <div>
66
+ <input type="checkbox" id="option3" name="option3" value="3">
67
+ <label for="option3" class="u-display-ib">Option 3</label>
68
+ </div>
69
+ </fieldset>
57
70
 
58
- <div class="push-md--bottom">
59
- <div>
60
- <input type="radio" id="radio1" name="radio" value="1" checked>
61
- <label for="radio1" class="u-display-ib">Option 1</label>
62
- </div>
63
- <div>
64
- <input type="radio" id="radio2" name="radio" value="2">
65
- <label for="radio2" class="u-display-ib">Option 2</label>
66
- </div>
67
- <div>
68
- <input type="radio" id="radio3" name="radio" value="3">
69
- <label for="radio3" class="u-display-ib">Option 3</label>
70
- </div>
71
+ <fieldset>
72
+ <legend>Choose your option</legend>
73
+
74
+ <div>
75
+ <input type="radio" id="radio1" name="radio" value="1" checked>
76
+ <label for="radio1" class="u-display-ib">Option 1</label>
77
+ </div>
78
+ <div>
79
+ <input type="radio" id="radio2" name="radio" value="2">
80
+ <label for="radio2" class="u-display-ib">Option 2</label>
71
81
  </div>
72
- </div>
82
+ <div>
83
+ <input type="radio" id="radio3" name="radio" value="3">
84
+ <label for="radio3" class="u-display-ib">Option 3</label>
85
+ </div>
86
+ </fieldset>
73
87
 
74
88
  <input type="submit" value="Send" class="btn btn--primary">
75
89
  </form>
76
90
 
91
+ <hr>
92
+
77
93
  <table>
78
94
  <thead>
79
95
  <tr>
@@ -100,13 +116,13 @@
100
116
  </table>
101
117
 
102
118
  <details>
103
- <summary class="txt--bold">Some details</summary>
119
+ <summary>Some details</summary>
104
120
  <p>More info about the details.</p>
105
121
  </details>
106
122
 
107
123
  <blockquote>
108
124
  <p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
109
- <cite>– Stephen King</cite>
125
+ <cite class="txt--sm">– Stephen King</cite>
110
126
  </blockquote>
111
127
 
112
128
  <pre><code>.milligram {
@@ -121,6 +137,9 @@
121
137
  </code>
122
138
  </div>
123
139
 
140
+ <label for="progres" class="u-display-b txt--bold">Progress</label>
141
+ <progress id="progres" max="100" value="70">70%</progress>
142
+
124
143
  <hr>
125
144
 
126
145
  <ul class="list--unindented ">
@@ -136,7 +155,7 @@
136
155
  </ol>
137
156
 
138
157
  <dl>
139
- <dt class="txt--bold">Description lists</dt>
158
+ <dt>Description lists</dt>
140
159
  <dd>A description list is perfect for defining terms.</dd>
141
160
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
142
161
  </dl>
data/README.md CHANGED
@@ -10,7 +10,7 @@ SASS-ZERO is a css framework that brings concepts from [tailwindcss](https://tai
10
10
 
11
11
  SASS-ZERO comes with a basic grayscale theme that help you to bring your ideas to life, questions about font, color, spacing and layout can be resolved after the raw affordances.
12
12
 
13
- ### Tailwindcss
13
+ ### Tailwind CSS
14
14
 
15
15
  "Instead of hand-picking values from a limitless pool any time you need to make a decision, start with a smaller set of options." - [Refactoring UI](https://refactoringui.com/book).
16
16
 
@@ -111,11 +111,12 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
111
111
  ## References
112
112
 
113
113
  - [SASS](https://sass-lang.com)
114
- - [Tailwindcss](https://tailwindcss.com)
114
+ - [Tailwind CSS](https://tailwindcss.com)
115
115
  - [Milligram](https://milligram.io)
116
116
  - [BEM](http://getbem.com/naming)
117
117
  - [Refactoring UI](https://refactoringui.com/book)
118
118
  - [Shape UP](https://basecamp.com/shapeup)
119
+ - [Boxicons](https://boxicons.com)
119
120
 
120
121
  ## License
121
122
 
@@ -58,6 +58,15 @@ html {
58
58
  border-color: $transparent;
59
59
  }
60
60
 
61
+ &--small {
62
+ font-size: $text-sm;
63
+ }
64
+
65
+ & > i {
66
+ vertical-align: sub;
67
+ font-size: 1.25em;
68
+ }
69
+
61
70
  &:focus {
62
71
  box-shadow: ring($color: var(--color-focus-ring));
63
72
  @include outline-none;
@@ -93,6 +102,11 @@ html {
93
102
  box-shadow: ring($color: var(--color-focus-ring));
94
103
  @include outline-none;
95
104
  }
105
+
106
+ &:disabled {
107
+ pointer-events: none;
108
+ opacity: $opacity-50;
109
+ }
96
110
  }
97
111
 
98
112
  input[type="checkbox"], input[type="radio"] {
@@ -100,7 +114,7 @@ input[type="checkbox"], input[type="radio"] {
100
114
  margin: $size-1;
101
115
 
102
116
  &:focus {
103
- box-shadow: ring($width: 2px, $color: var(--color-focus-ring));
117
+ box-shadow: ring($color: var(--color-focus-ring));
104
118
  @include outline-none;
105
119
  }
106
120
  }
@@ -110,10 +124,6 @@ blockquote {
110
124
  padding: $size-3 $size-4;
111
125
  }
112
126
 
113
- cite {
114
- font-size: $text-sm;
115
- }
116
-
117
127
  code {
118
128
  background-color: var(--color-bg--surface);
119
129
  border-radius: $rounded;
@@ -170,6 +180,10 @@ ol {
170
180
  list-style: decimal outside;
171
181
  }
172
182
 
183
+ legend, dt {
184
+ font-weight: $font-bold;
185
+ }
186
+
173
187
  label, legend, dt {
174
188
  margin-bottom: $size-1;
175
189
  }
@@ -182,10 +196,18 @@ fieldset, .input {
182
196
  margin-bottom: $size-6;
183
197
  }
184
198
 
185
- table, details, blockquote, p, pre, ul, ol, dl {
199
+ table, progress, details, blockquote, figure, pre, ul, ol, dl, p {
186
200
  margin-bottom: $size-6;
187
201
  }
188
202
 
203
+ @include progress-bar {
204
+ background-color: var(--color-primary);
205
+ }
206
+
207
+ progress {
208
+ background-color: var(--color-bg--surface);
209
+ }
210
+
189
211
  details {
190
212
  padding: $size-2 $size-3;
191
213
  background-color: var(--color-bg--surface);
@@ -193,10 +215,12 @@ details {
193
215
  }
194
216
 
195
217
  summary {
218
+ padding: $size-1 $size-0;
219
+ font-weight: $font-bold;
196
220
  cursor: pointer;
197
221
  }
198
222
 
199
- table {
223
+ table, progress {
200
224
  width: $w-full;
201
225
  }
202
226
 
@@ -34,6 +34,16 @@
34
34
  outline-offset: 2px;
35
35
  }
36
36
 
37
+ @mixin progress-bar {
38
+ ::-webkit-progress-value {
39
+ @content;
40
+ }
41
+
42
+ ::-moz-progress-bar {
43
+ @content;
44
+ }
45
+ }
46
+
37
47
  @mixin make-container($padding-x: $size-4) {
38
48
  width: 100%;
39
49
  padding-right: $padding-x;
@@ -2,6 +2,10 @@
2
2
  @import "sass-zero/variables/effects";
3
3
  @import "sass-zero/mixins";
4
4
 
5
+ .debug * {
6
+ outline: 1px red solid !important;
7
+ }
8
+
5
9
  .u-display-n {
6
10
  display: none !important;
7
11
  }
@@ -15,7 +15,7 @@ $rounded-full: 9999px;
15
15
 
16
16
  // *******************************************************************
17
17
  // Border Width
18
- // Utilities for controlling the width of an element's borders.
18
+ // Variables for controlling the width of an element's borders.
19
19
  // border-width: $border;
20
20
  // *******************************************************************
21
21
  $border-0: 0;
@@ -14,7 +14,7 @@ $shadow-none: none;
14
14
 
15
15
  // *******************************************************************
16
16
  // Opacity
17
- // Utilities for controlling the opacity of an element.
17
+ // Variables for controlling the opacity of an element.
18
18
  // opacity: $opacity-25;
19
19
  // *******************************************************************
20
20
  $opacity-0: 0;
@@ -35,10 +35,10 @@ $opacity-100: 1;
35
35
 
36
36
  // *******************************************************************
37
37
  // Ring
38
- // Utilities for creating outline rings with box-shadows.
38
+ // Function for creating outline rings with box-shadows.
39
39
  // box-shadow: ring($width: 4px);
40
40
  // *******************************************************************
41
- @function ring($width: 3px, $color: rgba($blue-500, 0.5), $offset-width: 0px, $offset-color: $white, $inset: false) {
41
+ @function ring($width: 2px, $color: rgba($blue-500, 0.5), $offset-width: 0px, $offset-color: $white, $inset: false) {
42
42
  @if $inset {
43
43
  $ring-offset-shadow: inset 0 0 0 $offset-width $offset-color;
44
44
  $ring-shadow: inset 0 0 0 ($width + $offset-width) $color;
@@ -10,7 +10,7 @@ $flex-none: none;
10
10
 
11
11
  // *******************************************************************
12
12
  // Flex Grow
13
- // Utilities for controlling how flex items grow.
13
+ // Variables for controlling how flex items grow.
14
14
  // flex-grow: $flex-grow-0;
15
15
  // *******************************************************************
16
16
  $flex-grow-0: 0;
@@ -18,7 +18,7 @@ $flex-grow: 1;
18
18
 
19
19
  // *******************************************************************
20
20
  // Flex Shrink
21
- // Utilities for controlling how flex items shrink.
21
+ // Variables for controlling how flex items shrink.
22
22
  // flex-shrink: $flex-shrink-0;
23
23
  // *******************************************************************
24
24
  $flex-shrink-0: 0;
@@ -1,6 +1,6 @@
1
1
  // *******************************************************************
2
2
  // Grid Template Columns
3
- // Utilities for specifying the columns in a grid layout.
3
+ // Variables for specifying the columns in a grid layout.
4
4
  // grid-template-columns: $grid-cols-1;
5
5
  // *******************************************************************
6
6
  $grid-cols-1: repeat(1, minmax(0, 1fr));
@@ -19,7 +19,7 @@ $grid-cols-none: none;
19
19
 
20
20
  // *******************************************************************
21
21
  // Grid Column Start / End
22
- // Utilities for controlling how elements are sized and placed across grid columns.
22
+ // Variables for controlling how elements are sized and placed across grid columns.
23
23
  // grid-column: $col-span-1;
24
24
  // *******************************************************************
25
25
  $col-auto: auto;
@@ -39,7 +39,7 @@ $col-span-full: 1 / -1;
39
39
 
40
40
  // *******************************************************************
41
41
  // Grid Template Rows
42
- // Utilities for specifying the rows in a grid layout.
42
+ // Variables for specifying the rows in a grid layout.
43
43
  // grid-template-rows: $grid-rows-1;
44
44
  // *******************************************************************
45
45
  $grid-rows-1: repeat(1, minmax(0, 1fr));
@@ -52,7 +52,7 @@ $grid-rows-none: none;
52
52
 
53
53
  // *******************************************************************
54
54
  // Grid Row Start / End
55
- // Utilities for controlling how elements are sized and placed across grid rows.
55
+ // Variables for controlling how elements are sized and placed across grid rows.
56
56
  // grid-row: $row-span-1;
57
57
  // *******************************************************************
58
58
  $row-auto: auto;
@@ -66,7 +66,7 @@ $row-span-full: 1 / -1;
66
66
 
67
67
  // *******************************************************************
68
68
  // Grid Auto Columns
69
- // Utilities for controlling the size of implicitly-created grid columns.
69
+ // Variables for controlling the size of implicitly-created grid columns.
70
70
  // grid-auto-columns: $auto-cols-auto;
71
71
  // *******************************************************************
72
72
  $auto-cols-auto: auto;
@@ -76,7 +76,7 @@ $auto-cols-fr: minmax(0, 1fr);
76
76
 
77
77
  // *******************************************************************
78
78
  // Grid Auto Rows
79
- // Utilities for controlling the size of implicitly-created grid rows.
79
+ // Variables for controlling the size of implicitly-created grid rows.
80
80
  // grid-auto-rows: $auto-rows-auto;
81
81
  // *******************************************************************
82
82
  $auto-rows-auto: auto;
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "1.0.3"
3
+ VERSION = "1.0.7"
4
4
  end
5
5
  end
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sass-zero",
3
- "version": "1.0.3",
3
+ "version": "1.0.7",
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: 1.0.3
4
+ version: 1.0.7
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-02-02 00:00:00.000000000 Z
11
+ date: 2022-02-07 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: