sass-zero 0.0.31 → 0.0.32

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: ce469c4686a62d121ad1ade1373ba405cad83cedf625ae00b526eda771073472
4
- data.tar.gz: b2198c5a71f6dbf1b3d802582247b1bc62888675dbe3eea394ad35318b2744b1
3
+ metadata.gz: 8a938a8984b061ac6f78e52e4fa3f89bda2b3786f2e45dc11eb79d6d12f9337c
4
+ data.tar.gz: 4517f9c31478d0eb64520cd26196a4f7bde9ac42f0ba9208dfecabe08d725b97
5
5
  SHA512:
6
- metadata.gz: c6e36bbe234a935df14f130fd656665e26851ac13f9527214427a0f3475506875a4814aa757352273f42a13a6f9ea11eff5ea019c2cd8aff243e3d0f89572238
7
- data.tar.gz: ad312080172289bbdab2a3c286dbcece0a2a06dd8ad63197792bbf29c776dcdeebffc52ac2299db7522dc49153ac4553bdbaa4c21bf000aeb2ceaf7a7c8536dd
6
+ metadata.gz: bdca8b227b9bf6cccc345decd7814a829560d5b2429da1c4e6aaa537440c90e65d2368c89f60c0910ff2bc25bed51817171a1631887edce9bf52ca7e29158c1f
7
+ data.tar.gz: 9bdacc79bf814a124784e011935932eec5762751d62f137782aa6791b1460cfc719b46a09f9e8940f5eb863b27142776bdf978a5b88d4425610b7199274d64fd
data/Example.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <main>
2
2
  <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
3
- <a>Anchor</a>
3
+ <a href="#">Anchor</a>
4
4
  <em>Emphasis</em>
5
5
  <small>Small</small>
6
6
  <strong>Strong</strong>
@@ -11,8 +11,6 @@
11
11
  <h4>Heading</h4>
12
12
  <h5>Heading</h5>
13
13
  <h6>Heading</h6>
14
- <h6 class="hdg hdg--divider"><span>Divider</span></h6>
15
-
16
14
 
17
15
  <button class="btn btn--primary">Button Primary</button>
18
16
  <button class="btn btn--secondary">Button Secondary</button>
@@ -119,8 +117,15 @@
119
117
  <li>Unordered list item 1</li>
120
118
  <li>Unordered list item 2</li>
121
119
  </ul>
120
+
122
121
  <ol>
123
122
  <li>Ordered list item 1</li>
124
123
  <li>Ordered list item 2</li>
125
124
  </ol>
125
+
126
+ <dl>
127
+ <dt class="txt--bold">Description lists</dt>
128
+ <dd>A description list is perfect for defining terms.</dd>
129
+ <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
130
+ </dl>
126
131
  </main>
@@ -2,6 +2,7 @@
2
2
  @import "sass-zero/mixins";
3
3
 
4
4
  html {
5
+ color: $breadboard-color;
5
6
  font-size: 14px;
6
7
  }
7
8
 
@@ -35,10 +36,6 @@ blockquote {
35
36
  opacity: $opacity-50;
36
37
  }
37
38
 
38
- &:focus {
39
- outline: 0;
40
- }
41
-
42
39
  &--primary {
43
40
  background-color: $breadboard-primary;
44
41
  border-color: $breadboard-primary;
@@ -49,13 +46,11 @@ blockquote {
49
46
  &--secondary {
50
47
  background-color: $white;
51
48
  border-color: $breadboard-primary;
52
- color: $breadboard-primary;
53
49
  }
54
50
 
55
51
  &--tertiary {
56
52
  background-color: transparent;
57
53
  border-color: transparent;
58
- color: $breadboard-color;
59
54
  }
60
55
  }
61
56
 
@@ -63,7 +58,7 @@ code {
63
58
  background-color: $breadboard-background;
64
59
  border-radius: $rounded;
65
60
  font-size: $text-sm;
66
- margin: 0 $size-1;
61
+ margin: $size-0 $size-1;
67
62
  padding: $size-1 $size-2;
68
63
  white-space: nowrap;
69
64
  }
@@ -84,11 +79,9 @@ pre {
84
79
 
85
80
  hr {
86
81
  margin: $size-10 $size-0;
87
- border-bottom-width: $border-2;
88
82
  }
89
83
 
90
84
  .input {
91
- appearance: none;
92
85
  border-radius: $rounded;
93
86
  border-width: $border;
94
87
  padding: $size-2 $size-3;
@@ -101,6 +94,7 @@ hr {
101
94
  }
102
95
 
103
96
  &--select {
97
+ appearance: none;
104
98
  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>');
105
99
  background-position: right $size-2 center;
106
100
  background-repeat: no-repeat;
@@ -110,16 +104,14 @@ hr {
110
104
  }
111
105
 
112
106
  label, legend {
113
- display: block;
107
+ display: inline-block;
114
108
  margin-bottom: $size-1;
115
109
  }
116
110
 
117
111
  .checkbox, .radio {
118
112
  appearance: none;
119
- background-origin: border-box;
120
113
  border-width: $border;
121
114
  color: $breadboard-primary;
122
- display: inline-block;
123
115
  margin-bottom: -0.2rem;
124
116
  height: $size-4;
125
117
  width: $size-4;
@@ -155,9 +147,7 @@ label, legend {
155
147
  }
156
148
 
157
149
  a {
158
- color: $breadboard-primary;
159
150
  font-weight: $font-bold;
160
- cursor: pointer;
161
151
  }
162
152
 
163
153
  ol {
@@ -176,19 +166,11 @@ dd, dt, li, .btn {
176
166
  margin-bottom: $size-2;
177
167
  }
178
168
 
179
- fieldset, .input, .select {
169
+ fieldset, .input {
180
170
  margin-bottom: $size-4;
181
171
  }
182
172
 
183
- blockquote,
184
- dl,
185
- figure,
186
- form,
187
- ol,
188
- p,
189
- pre,
190
- table,
191
- ul {
173
+ blockquote, dl, figure, form, ol, p, pre, table, ul {
192
174
  margin-bottom: $size-6;
193
175
  }
194
176
 
@@ -196,10 +178,6 @@ table {
196
178
  width: $size-full;
197
179
  }
198
180
 
199
- thead th {
200
- border-bottom-width: $border-2;
201
- }
202
-
203
181
  td, th {
204
182
  border-bottom-width: $border;
205
183
  padding: $size-3 $size-4;
@@ -235,30 +213,8 @@ h6, .hdg--base {
235
213
  font-size: $text-base;
236
214
  }
237
215
 
238
- .hdg--divider {
239
- position: relative;
240
- z-index: 0;
241
-
242
- > span {
243
- background-color: $breadboard-background;
244
- padding-right: $size-2;
245
- }
246
-
247
- ::before {
248
- content: '';
249
- position: absolute;
250
- top: 50%;
251
- left: $size-0;
252
- right: $size-0;
253
- height: $size-px;
254
- background: $breadboard-border;
255
- z-index: -1;
256
- }
257
- }
258
-
259
216
  @media (min-width: $breakpoint-md) {
260
217
  html {
261
- color: $breadboard-color;
262
218
  font-size: 16px;
263
219
  }
264
220
 
@@ -1,3 +1,11 @@
1
+ @mixin clearfix {
2
+ &::after {
3
+ display: block;
4
+ clear: both;
5
+ content: "";
6
+ }
7
+ }
8
+
1
9
  @mixin ellipsis {
2
10
  overflow: hidden;
3
11
  text-overflow: ellipsis;
@@ -1,4 +1,4 @@
1
- @import "sass-zero/variables";
1
+ @import "sass-zero/variables/breakpoints";
2
2
  @import "sass-zero/mixins";
3
3
 
4
4
  .u-full-width {
@@ -30,6 +30,10 @@
30
30
  margin-left: auto;
31
31
  }
32
32
 
33
+ .u-clearfix {
34
+ @include clearfix;
35
+ }
36
+
33
37
  .u-float-l {
34
38
  float: left;
35
39
  }
@@ -14,4 +14,10 @@
14
14
  margin-right: $size-2;
15
15
  display: inline-block;
16
16
  }
17
+
18
+ &--boxed {
19
+ background: $gray-200;
20
+ padding: $size-4;
21
+ border-radius: $size-4;
22
+ }
17
23
  }
@@ -1,4 +1,7 @@
1
- @import "sass-zero/variables";
1
+ @import "sass-zero/variables/typography";
2
+ @import "sass-zero/variables/spacing";
3
+ @import "sass-zero/variables/border";
4
+ @import "sass-zero/variables/colors";
2
5
  @import "sass-zero/mixins";
3
6
 
4
7
  .txt {
@@ -47,24 +50,9 @@
47
50
  }
48
51
 
49
52
  &--highlight {
50
- background-color: $gray-300;
51
- margin-left: 3px;
52
- padding: 0 0.2em;
53
- border-radius: 4rem 2rem 4.2rem 1.1rem;
54
- box-shadow: 0.2em 0 0 $gray-300, -0.2em 0 0 $gray-300;
55
- }
56
-
57
- &--highlight-underline {
58
- background-image: url('data:image/svg+xml,<svg viewBox="0 0 284 11" fill="%23e2e8f0" xmlns="http://www.w3.org/2000/svg"><path d="m31.803886 8.47027008c68.843749-9.56054688 255.210937-9.56054693 250.988281-9.56054688-4.222656.00000006-250.9882818 16.4023438-250.9882818 16.4023438s-68.8437485 2.71875.0000008-6.84179692z" fill-rule="evenodd" transform="matrix(.99862953 .05233596 -.05233596 .99862953 .57616 -7.423532)"/></svg>');
59
- background-repeat: no-repeat;
60
- background-position: center 103%;
61
- background-size: 105%
62
- }
63
-
64
- &--highlight-bottom {
65
- border-bottom: $border solid $gray-300;
66
- box-shadow: inset 0 -6px 0 $gray-300;
67
- font-style: normal;
53
+ background-color: $gray-200;
54
+ border-radius: $rounded;
55
+ padding: $size-0 $size-1;
68
56
  }
69
57
 
70
58
  &--normal {
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "0.0.31"
3
+ VERSION = "0.0.32"
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.31",
3
+ "version": "0.0.32",
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.31
4
+ version: 0.0.32
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-05-08 00:00:00.000000000 Z
11
+ date: 2020-05-09 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: autoprefixer-rails