sass-zero 0.0.21 → 0.0.22

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: e55fa6443e023b6965d4533d6d8def09aa3f819a64e880478c1b8922e3066f8f
4
- data.tar.gz: c680e1fcd21f138fa92ae0e9b487a05b1bea065e2d77770c62e1df9058c54505
3
+ metadata.gz: 44626a36062ce7a364a8e9fc32823dd673056ad47e688d827338d9305832d616
4
+ data.tar.gz: 648b67b7889177d6cf618edfd98fd5d6fbb7e2f6774ebafd8d631f142cc8b098
5
5
  SHA512:
6
- metadata.gz: 8acbcde772936a8a163e08bec0a993ae61ed9e5e30ee0cb0e2b182f839b8713158f9a94db576b8529ca3fffef0616143810a078a3e3053bc6b6eeae6a887f18c
7
- data.tar.gz: 6c5e9bda9a4ee8f9322e737af191c9c3e595e38b432e5e99edd6ad45b1b27e7ada5f921c2549f7f1e1b70fd7abe074fe219652cf82e43117af36ed4d800af020
6
+ metadata.gz: c90c8d7f328e257932f17cd56d7f6549b100caf45e65a2be9258500663725643dcdb56a25e07cdcbfdc3c3f07da21a9ca7ed8e41851ac58a037a668be0c54303
7
+ data.tar.gz: c46f76a65f9d7af35992a8cde97e4e7a3f375b1497cd55ca5f3ea65c0d8e356bed02f12c628cd86276077c2da2ca701170639b9ea320dbe7b070a03e2a9f5611
data/Example.html CHANGED
@@ -24,7 +24,7 @@
24
24
  <hr>
25
25
 
26
26
  <form>
27
- <fieldset>
27
+ <div class="push-md--bottom">
28
28
  <label for="nameField">Name</label>
29
29
  <input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
30
30
  <label for="ageRangeField">Age Range</label>
@@ -68,7 +68,7 @@
68
68
  <label for="radio" class="u-display-ib">Option 3</label>
69
69
  </div>
70
70
  </div>
71
- </fieldset>
71
+ </div>
72
72
 
73
73
  <input type="submit" value="Send" class="btn btn--primary">
74
74
  </form>
@@ -3,6 +3,13 @@
3
3
 
4
4
  html {
5
5
  color: $breadboard-color;
6
+ font-size: 16px;
7
+ }
8
+
9
+ @media (max-width: $breakpoint-md - 1) {
10
+ html {
11
+ font-size: 14px;
12
+ }
6
13
  }
7
14
 
8
15
  blockquote {
@@ -22,6 +29,7 @@ blockquote {
22
29
  display: inline-block;
23
30
  font-weight: $font-bold;
24
31
  padding: $size-2 $size-4;
32
+ text-align: center;
25
33
  cursor: pointer;
26
34
 
27
35
  &[disabled] {
@@ -29,11 +37,15 @@ blockquote {
29
37
  opacity: $opacity-50;
30
38
  }
31
39
 
40
+ &:focus {
41
+ outline: 0;
42
+ }
43
+
32
44
  &--primary {
33
45
  background-color: $breadboard-primary;
34
46
  border-color: $breadboard-primary;
35
47
  color: $white;
36
- box-shadow: $shadow-sm;
48
+ box-shadow: $shadow;
37
49
  }
38
50
 
39
51
  &--secondary {
@@ -45,7 +57,7 @@ blockquote {
45
57
  &--tertiary {
46
58
  background-color: transparent;
47
59
  border-color: transparent;
48
- color: $breadboard-primary;
60
+ color: $breadboard-color;
49
61
  }
50
62
  }
51
63
 
@@ -81,7 +93,6 @@ hr {
81
93
  appearance: none;
82
94
  border-radius: $rounded;
83
95
  border-width: $border;
84
- display: block;
85
96
  padding: $size-2 $size-3;
86
97
  width: $size-full;
87
98
 
@@ -159,12 +170,7 @@ ul {
159
170
  list-style: disc inside;
160
171
  }
161
172
 
162
- h1,
163
- h2,
164
- h3,
165
- h4,
166
- h5,
167
- h6 {
173
+ h1, h2, h3, h4, h5, h6 {
168
174
  margin-bottom: $size-2;
169
175
  }
170
176
 
@@ -232,6 +238,38 @@ h6 {
232
238
  font-size: $text-base;
233
239
  }
234
240
 
241
+ @media (max-width: $breakpoint-md - 1) {
242
+ h1 {
243
+ font-size: $text-3xl;
244
+ }
245
+
246
+ h2 {
247
+ font-size: $text-2xl;
248
+ }
249
+
250
+ h3 {
251
+ font-size: $text-xl;
252
+ }
253
+
254
+ h4 {
255
+ font-size: $text-lg;
256
+ }
257
+
258
+ h5 {
259
+ font-size: $text-base;
260
+ }
261
+
262
+ h6 {
263
+ font-size: $text-sm;
264
+ }
265
+ }
266
+
235
267
  main {
236
- @include make-container($size-4, $breakpoint-lg);
268
+ @include make-container($size-10, $breakpoint-lg);
269
+ }
270
+
271
+ @media (max-width: $breakpoint-md - 1) {
272
+ main {
273
+ padding: $size-0;
274
+ }
237
275
  }
@@ -44,3 +44,13 @@
44
44
  margin: 0 auto;
45
45
  max-width: $max-width;
46
46
  }
47
+
48
+ // *************************************************
49
+ // Center-align a block level element
50
+ // *************************************************
51
+
52
+ @mixin center-block() {
53
+ display: block;
54
+ margin-right: auto;
55
+ margin-left: auto;
56
+ }
@@ -1,43 +1,43 @@
1
1
  .flex {
2
- display: flex;
2
+ display: flex !important;
3
3
 
4
4
  &--column {
5
- flex-direction: column;
5
+ flex-direction: column !important;
6
6
  }
7
7
 
8
8
  &--row {
9
- flex-direction: row;
9
+ flex-direction: row !important;
10
10
  }
11
11
 
12
12
  &--justify-start {
13
- justify-content: flex-start;
13
+ justify-content: flex-start !important;
14
14
  }
15
15
 
16
16
  &--justify-center {
17
- justify-content: center;
17
+ justify-content: center !important;
18
18
  }
19
19
 
20
20
  &--justify-end {
21
- justify-content: flex-end;
21
+ justify-content: flex-end !important;
22
22
  }
23
23
 
24
24
  &--justify-between {
25
- justify-content: space-between;
25
+ justify-content: space-between !important;
26
26
  }
27
27
 
28
28
  &--justify-around {
29
- justify-content: space-around;
29
+ justify-content: space-around !important;
30
30
  }
31
31
 
32
32
  &--items-center {
33
- align-items: center;
33
+ align-items: center !important;
34
34
  }
35
35
 
36
36
  &--items-baseline {
37
- align-items: baseline;
37
+ align-items: baseline !important;
38
38
  }
39
39
 
40
40
  &--none {
41
- flex: none;
41
+ flex: none !important;
42
42
  }
43
43
  }
@@ -1,120 +1,114 @@
1
1
  @import "sass-zero/variables";
2
2
  @import "sass-zero/mixins";
3
3
 
4
- .u-clearfix {
5
- @include clearfix;
6
- }
4
+ .u-position {
5
+ position: absolute !important;
7
6
 
8
- .u-position-context {
9
- position: relative;
10
- }
7
+ &--right {
8
+ right: 0 !important;
9
+ }
11
10
 
12
- .u-position-right,
13
- .u-position-left,
14
- .u-position--top-right,
15
- .u-position--bottom-right {
16
- position: absolute !important;
17
- }
11
+ &--left {
12
+ left: 0 !important;
13
+ }
18
14
 
19
- .u-position-right {
20
- right: 0;
21
- }
15
+ &--bottom {
16
+ bottom: 0 !important;
17
+ }
22
18
 
23
- .u-position-left {
24
- left: 0;
19
+ &--top {
20
+ top: 0 !important;
21
+ }
25
22
  }
26
23
 
27
- .u-position--bottom-right {
28
- bottom: 0;
29
- right: 0;
24
+ .u-position-context {
25
+ position: relative !important;
30
26
  }
31
27
 
32
- .u-position--top-right {
33
- top: 0;
34
- right: 0;
28
+ .u-clearfix {
29
+ @include clearfix;
35
30
  }
36
31
 
37
32
  .u-full-width {
38
- width: 100%;
33
+ width: 100% !important;
39
34
  }
40
35
 
41
36
  .u-unscrollable {
42
- overflow: hidden;
37
+ overflow: hidden !important;
43
38
  }
44
39
 
45
40
  .u-display-i {
46
- display: inline;
41
+ display: inline !important;
47
42
  }
48
43
 
49
44
  .u-display-b {
50
- display: block;
45
+ display: block !important;
51
46
  }
52
47
 
53
48
  .u-display-ib {
54
- display: inline-block;
49
+ display: inline-block !important;
55
50
  }
56
51
 
57
52
  .u-display-n {
58
- display: none;
53
+ display: none !important;
59
54
  }
60
55
 
61
56
  .u-pointer-events-n {
62
- pointer-events: none;
57
+ pointer-events: none !important;
63
58
  }
64
59
 
65
60
  .u-margin-centered {
66
- margin-left: auto;
67
- margin-right: auto;
61
+ @include center-block;
68
62
  }
69
63
 
70
64
  @media (min-width: $breakpoint-md) {
71
65
  .u-wrap-on-desktop {
72
- display: block;
66
+ display: block !important;
73
67
  }
74
68
  }
75
69
 
76
70
  @media (max-width: $breakpoint-md - 1) {
77
71
  .u-wrap-on-mobile {
78
- display: block;
72
+ display: block !important;
79
73
  }
80
74
  }
81
75
 
82
76
  .u-nowrap {
83
- white-space: nowrap;
77
+ white-space: nowrap !important;
84
78
  }
85
79
 
86
80
  .u-float-l {
87
- float: left;
81
+ float: left !important;
88
82
  }
89
83
 
90
84
  .u-float-r {
91
- float: right;
85
+ float: right !important;
92
86
  }
93
87
 
94
88
  .u-float-n {
95
- float: none;
89
+ float: none !important;
96
90
  }
97
91
 
98
92
  .u-float-clear {
99
- clear: both;
93
+ clear: both !important;
100
94
  }
101
95
 
102
96
  .u-float-clear-l {
103
- clear: left;
97
+ clear: left !important;
104
98
  }
105
99
 
106
100
  .u-float-clear-r {
107
- clear: right;
101
+ clear: right !important;
108
102
  }
109
103
 
110
104
  @media (max-width: $breakpoint-md - 1) {
111
105
  .u-float-n-on-mobile {
112
- float: none;
106
+ float: none !important;
113
107
  }
114
108
  }
115
109
 
116
110
  .u-hide {
117
- display: none;
111
+ display: none !important;
118
112
  }
119
113
 
120
114
  .u-hide-focus {
@@ -123,12 +117,12 @@
123
117
 
124
118
  @media (max-width: $breakpoint-md - 1) {
125
119
  .u-hide-on-media-small {
126
- display: none;
120
+ display: none !important;
127
121
  }
128
122
  }
129
123
 
130
124
  @media (min-width: $breakpoint-md) {
131
125
  .u-hide-on-media-medium {
132
- display: none;
126
+ display: none !important;
133
127
  }
134
128
  }
@@ -6,32 +6,32 @@
6
6
  // *******************************************************************
7
7
  @each $scale, $size in $size-map {
8
8
  .pull-#{$scale} {
9
- margin: (-$size) !important;
9
+ margin: -$size !important;
10
10
 
11
11
  &--top {
12
- margin-top: (-$size) !important;
12
+ margin-top: -$size !important;
13
13
  }
14
14
 
15
15
  &--right {
16
- margin-right: (-$size) !important;
16
+ margin-right: -$size !important;
17
17
  }
18
18
 
19
19
  &--bottom {
20
- margin-bottom: (-$size) !important;
20
+ margin-bottom: -$size !important;
21
21
  }
22
22
 
23
23
  &--left {
24
- margin-left: (-$size) !important;
24
+ margin-left: -$size !important;
25
25
  }
26
26
 
27
27
  &--ends {
28
- margin-top: (-$size) !important;
29
- margin-bottom: (-$size) !important;
28
+ margin-top: -$size !important;
29
+ margin-bottom: -$size !important;
30
30
  }
31
31
 
32
32
  &--sides {
33
- margin-right: (-$size) !important;
34
- margin-left: (-$size) !important;
33
+ margin-right: -$size !important;
34
+ margin-left: -$size !important;
35
35
  }
36
36
  }
37
37
  }
@@ -76,10 +76,6 @@
76
76
  &--strike {
77
77
  text-decoration: line-through;
78
78
  }
79
-
80
- &--nowrap {
81
- white-space: nowrap;
82
- }
83
79
  }
84
80
 
85
81
  .align {
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "0.0.21"
3
+ VERSION = "0.0.22"
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.21",
3
+ "version": "0.0.22",
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.21
4
+ version: 0.0.22
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-16 00:00:00.000000000 Z
11
+ date: 2020-03-23 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: autoprefixer-rails