sass-zero 0.0.36 → 0.0.37

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: 69d36f0d118f7d007821a29645e443e2d4ca54121c61ffa26aa4324f5dc408a9
4
- data.tar.gz: 7f07b3f8f7c7767b504443697edc718624f743cc281c6d5a9903383f41af35ba
3
+ metadata.gz: dd5b6776b53040e01a89fc9b525fab7e7aca4255e8da1cf4bdfa5f5cbb14dc14
4
+ data.tar.gz: cfe605b1284380d9a1accc30d01441d0893aaf17459029c2850e2ed945d702ab
5
5
  SHA512:
6
- metadata.gz: eea9d42ef13246e53687483061ce0a5684000910ed2c7dbd5cf82c722ed9a67f57847ececa2138dee1cd6e8d3accb079ed9cb54d5d0515e9cc2b5402faab2081
7
- data.tar.gz: 878568d0674d1b4d18fe924e5aa8b855f7640e0d873c76176efd2f729d3faf1d26f66249aacfcf6b22d3f5bf97019f3f6a54c431050d40e0c8c5ad98885dacd5
6
+ metadata.gz: c5bc018555c7c22d707fcc1338e33001a1faa51c21fabb88d655fd2160a0aab8d536d27bdb1c45fd866644000d3e0f63d941089b378f6526efdf7f5e1cddf3b5
7
+ data.tar.gz: fa56978fcf7b39e19f551e5fa21500991a9120e6dd2aad8885a1f0ec987a9f14ba3123f464c854c2a96a1afb8cfca5eea1cb688a8d1f742e991ef2640615106a
data/Example.html CHANGED
@@ -98,7 +98,7 @@
98
98
  </table>
99
99
 
100
100
  <blockquote>
101
- <p><em>Yeah!! Milligram is amazing.</em></p>
101
+ <p class="flush"><em>Yeah!! Milligram is amazing.</em></p>
102
102
  </blockquote>
103
103
 
104
104
  <pre><code>.milligram {
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-07+Routeend.png)
5
+ ![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot.png)
6
6
 
7
7
  ### Milligram
8
8
 
@@ -14,10 +14,6 @@ main {
14
14
  blockquote {
15
15
  border-left-width: $border-4;
16
16
  padding: $size-3 $size-4;
17
-
18
- *:last-child {
19
- margin-bottom: $size-0;
20
- }
21
17
  }
22
18
 
23
19
  .btn {
@@ -38,7 +34,6 @@ blockquote {
38
34
  &--primary {
39
35
  background-color: $breadboard-primary;
40
36
  border-color: $breadboard-primary;
41
- box-shadow: $shadow-md;
42
37
  color: $white;
43
38
  }
44
39
 
@@ -81,51 +76,45 @@ hr {
81
76
  }
82
77
 
83
78
  .input {
79
+ appearance: none;
84
80
  border-radius: $rounded;
85
81
  border-width: $border;
86
82
  padding: $size-2 $size-3;
87
83
  width: $size-full;
88
84
 
89
- &:focus {
90
- @include focus;
91
- }
92
-
93
85
  &--select {
94
- appearance: none;
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>');
86
+ background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="silver" xmlns="http://www.w3.org/2000/svg"><path d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"></path></svg>');
96
87
  background-position: right $size-2 center;
97
88
  background-repeat: no-repeat;
98
- background-size: auto $size-6;
99
- padding-right: $size-10;
89
+ background-size: auto $size-5;
90
+ padding-right: $size-8;
100
91
  }
92
+
93
+ &:focus { @include focus; }
101
94
  }
102
95
 
103
96
  .checkbox {
104
97
  border-radius: $rounded;
105
98
  @include selection;
106
99
 
107
- &:focus {
108
- @include focus;
109
- }
110
-
111
100
  &:checked {
112
101
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="white" strokeWidth="2" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>');
113
102
  @include checked;
114
103
  }
104
+
105
+ &:focus { @include focus; }
115
106
  }
116
107
 
117
108
  .radio {
118
109
  border-radius: $rounded-full;
119
110
  @include selection;
120
111
 
121
- &:focus {
122
- @include focus;
123
- }
124
-
125
112
  &:checked {
126
113
  background-image: 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>');
127
114
  @include checked;
128
115
  }
116
+
117
+ &:focus { @include focus; }
129
118
  }
130
119
 
131
120
  label, legend {
@@ -145,6 +134,11 @@ ol {
145
134
  list-style: decimal inside;
146
135
  }
147
136
 
137
+ td, th {
138
+ &:first-child { padding-left: $size-0; }
139
+ &:last-child { padding-right: $size-0; }
140
+ }
141
+
148
142
  dt, dd, li {
149
143
  &:last-child { margin-bottom: $size-0; }
150
144
  }
@@ -162,7 +156,7 @@ fieldset, .input {
162
156
  }
163
157
 
164
158
  blockquote, figure, p, pre, table, ul, ol, dl {
165
- margin-bottom: $size-4;
159
+ margin-bottom: $size-6;
166
160
  }
167
161
 
168
162
  table {
@@ -1,29 +1,29 @@
1
1
  .flush {
2
2
  margin: 0 !important;
3
+ }
3
4
 
4
- &--top {
5
- margin-top: 0 !important;
6
- }
5
+ .flush--top {
6
+ margin-top: 0 !important;
7
+ }
7
8
 
8
- &--right {
9
- margin-right: 0 !important;
10
- }
9
+ .flush--right {
10
+ margin-right: 0 !important;
11
+ }
11
12
 
12
- &--bottom {
13
- margin-bottom: 0 !important;
14
- }
13
+ .flush--bottom {
14
+ margin-bottom: 0 !important;
15
+ }
15
16
 
16
- &--left {
17
- margin-left: 0 !important;
18
- }
17
+ .flush--left {
18
+ margin-left: 0 !important;
19
+ }
19
20
 
20
- &--ends {
21
- margin-top: 0 !important;
22
- margin-bottom: 0 !important;
23
- }
21
+ .flush--ends {
22
+ margin-top: 0 !important;
23
+ margin-bottom: 0 !important;
24
+ }
24
25
 
25
- &--sides {
26
- margin-right: 0 !important;
27
- margin-left: 0 !important;
28
- }
26
+ .flush--sides {
27
+ margin-right: 0 !important;
28
+ margin-left: 0 !important;
29
29
  }
@@ -1,17 +1,15 @@
1
1
  @import "sass-zero/variables/spacing";
2
2
 
3
- .list {
4
- &--unindented {
5
- padding-left: $size-8;
6
- }
3
+ .list--unindented {
4
+ padding-left: $size-8;
5
+ }
7
6
 
8
- &--unbulleted {
9
- list-style: none;
10
- }
7
+ .list--unbulleted {
8
+ list-style: none;
9
+ }
11
10
 
12
- &--inline li {
13
- margin-bottom: $size-0;
14
- margin-right: $size-2;
15
- display: inline-block;
16
- }
11
+ .list--inline li {
12
+ margin-bottom: $size-0;
13
+ margin-right: $size-2;
14
+ display: inline-block;
17
15
  }
@@ -1,23 +1,15 @@
1
+ .position-context {
2
+ position: relative;
3
+ }
4
+
1
5
  .position {
2
6
  position: absolute;
3
7
 
4
- &--right {
5
- right: 0;
6
- }
8
+ &--right { right: 0; }
7
9
 
8
- &--left {
9
- left: 0;
10
- }
10
+ &--left { left: 0; }
11
11
 
12
- &--top {
13
- top: 0;
14
- }
12
+ &--top { top: 0; }
15
13
 
16
- &--bottom {
17
- bottom: 0;
18
- }
19
- }
20
-
21
- .position-context {
22
- position: relative;
14
+ &--bottom { bottom: 0; }
23
15
  }
@@ -7,31 +7,31 @@
7
7
  @each $scale, $size in $size-map {
8
8
  .pull-#{$scale} {
9
9
  margin: -$size !important;
10
+ }
10
11
 
11
- &--top {
12
- margin-top: -$size !important;
13
- }
12
+ .pull-#{$scale}--top {
13
+ margin-top: -$size !important;
14
+ }
14
15
 
15
- &--right {
16
- margin-right: -$size !important;
17
- }
16
+ .pull-#{$scale}--right {
17
+ margin-right: -$size !important;
18
+ }
18
19
 
19
- &--bottom {
20
- margin-bottom: -$size !important;
21
- }
20
+ .pull-#{$scale}--bottom {
21
+ margin-bottom: -$size !important;
22
+ }
22
23
 
23
- &--left {
24
- margin-left: -$size !important;
25
- }
24
+ .pull-#{$scale}--left {
25
+ margin-left: -$size !important;
26
+ }
26
27
 
27
- &--ends {
28
- margin-top: -$size !important;
29
- margin-bottom: -$size !important;
30
- }
28
+ .pull-#{$scale}--ends {
29
+ margin-top: -$size !important;
30
+ margin-bottom: -$size !important;
31
+ }
31
32
 
32
- &--sides {
33
- margin-right: -$size !important;
34
- margin-left: -$size !important;
35
- }
33
+ .pull-#{$scale}--sides {
34
+ margin-right: -$size !important;
35
+ margin-left: -$size !important;
36
36
  }
37
37
  }
@@ -7,31 +7,31 @@
7
7
  @each $scale, $size in $size-map {
8
8
  .push-#{$scale} {
9
9
  margin: $size !important;
10
+ }
10
11
 
11
- &--top {
12
- margin-top: $size !important;
13
- }
12
+ .push-#{$scale}--top {
13
+ margin-top: $size !important;
14
+ }
14
15
 
15
- &--right {
16
- margin-right: $size !important;
17
- }
16
+ .push-#{$scale}--right {
17
+ margin-right: $size !important;
18
+ }
18
19
 
19
- &--bottom {
20
- margin-bottom: $size !important;
21
- }
20
+ .push-#{$scale}--bottom {
21
+ margin-bottom: $size !important;
22
+ }
22
23
 
23
- &--left {
24
- margin-left: $size !important;
25
- }
24
+ .push-#{$scale}--left {
25
+ margin-left: $size !important;
26
+ }
26
27
 
27
- &--ends {
28
- margin-top: $size !important;
29
- margin-bottom: $size !important;
30
- }
28
+ .push-#{$scale}--ends {
29
+ margin-top: $size !important;
30
+ margin-bottom: $size !important;
31
+ }
31
32
 
32
- &--sides {
33
- margin-right: $size !important;
34
- margin-left: $size !important;
35
- }
33
+ .push-#{$scale}--sides {
34
+ margin-right: $size !important;
35
+ margin-left: $size !important;
36
36
  }
37
37
  }
@@ -4,98 +4,94 @@
4
4
  @import "sass-zero/variables/colors";
5
5
  @import "sass-zero/mixins";
6
6
 
7
- .txt {
8
- &--xs {
9
- font-size: $text-xs;
10
- }
7
+ .txt--xs {
8
+ font-size: $text-xs;
9
+ }
11
10
 
12
- &--sm {
13
- font-size: $text-sm;
14
- }
11
+ .txt--sm {
12
+ font-size: $text-sm;
13
+ }
15
14
 
16
- &--md {
17
- font-size: $text-base;
18
- }
15
+ .txt--md {
16
+ font-size: $text-base;
17
+ }
19
18
 
20
- &--lg {
21
- font-size: $text-lg;
22
- }
19
+ .txt--lg {
20
+ font-size: $text-lg;
21
+ }
23
22
 
24
- &--xl {
25
- font-size: $text-xl;
26
- }
23
+ .txt--xl {
24
+ font-size: $text-xl;
25
+ }
27
26
 
28
- &--2xl {
29
- font-size: $text-2xl;
30
- }
27
+ .txt--2xl {
28
+ font-size: $text-2xl;
29
+ }
31
30
 
32
- &--3xl {
33
- font-size: $text-3xl;
34
- }
31
+ .txt--3xl {
32
+ font-size: $text-3xl;
33
+ }
35
34
 
36
- &--nowrap {
37
- white-space: nowrap;
38
- }
35
+ .txt--nowrap {
36
+ white-space: nowrap;
37
+ }
39
38
 
40
- &--break-words {
41
- word-wrap: break-word;
42
- }
39
+ .txt--break-words {
40
+ word-wrap: break-word;
41
+ }
43
42
 
44
- &--break-all {
45
- word-break: break-all;
46
- }
43
+ .txt--break-all {
44
+ word-break: break-all;
45
+ }
47
46
 
48
- &--ellipsis {
49
- @include ellipsis;
50
- }
47
+ .txt--ellipsis {
48
+ @include ellipsis;
49
+ }
51
50
 
52
- &--normal {
53
- font-weight: $font-normal;
54
- }
51
+ .txt--normal {
52
+ font-weight: $font-normal;
53
+ }
55
54
 
56
- &--bold {
57
- font-weight: $font-bold;
58
- }
55
+ .txt--bold {
56
+ font-weight: $font-bold;
57
+ }
59
58
 
60
- &--subtle {
61
- color: $gray-700;
62
- }
59
+ .txt--subtle {
60
+ color: $gray-700;
61
+ }
63
62
 
64
- &--very-subtle {
65
- color: $gray-600;
66
- }
63
+ .txt--very-subtle {
64
+ color: $gray-600;
65
+ }
67
66
 
68
- &--underline {
69
- text-decoration: underline;
70
- }
67
+ .txt--underline {
68
+ text-decoration: underline;
69
+ }
71
70
 
72
- &--uppercase {
73
- text-transform: uppercase;
74
- }
71
+ .txt--uppercase {
72
+ text-transform: uppercase;
75
73
  }
76
74
 
77
- .align {
78
- &--top {
79
- vertical-align: top;
80
- }
75
+ .align--top {
76
+ vertical-align: top;
77
+ }
81
78
 
82
- &--middle {
83
- vertical-align: middle;
84
- }
79
+ .align--middle {
80
+ vertical-align: middle;
81
+ }
85
82
 
86
- &--bottom {
87
- vertical-align: bottom;
88
- }
83
+ .align--bottom {
84
+ vertical-align: bottom;
85
+ }
89
86
 
90
- &--left {
91
- text-align: left;
92
- }
87
+ .align--left {
88
+ text-align: left;
89
+ }
93
90
 
94
- &--center {
95
- text-align: center;
96
- }
91
+ .align--center {
92
+ text-align: center;
93
+ }
97
94
 
98
- &--right {
99
- text-align: right;
100
- }
95
+ .align--right {
96
+ text-align: right;
101
97
  }
@@ -1,19 +1,19 @@
1
1
  .unpad {
2
2
  padding: 0 !important;
3
+ }
3
4
 
4
- &--top {
5
- padding-top: 0 !important;
6
- }
5
+ .unpad--top {
6
+ padding-top: 0 !important;
7
+ }
7
8
 
8
- &--right {
9
- padding-right: 0 !important;
10
- }
9
+ .unpad--right {
10
+ padding-right: 0 !important;
11
+ }
11
12
 
12
- &--bottom {
13
- padding-bottom: 0 !important;
14
- }
13
+ .unpad--bottom {
14
+ padding-bottom: 0 !important;
15
+ }
15
16
 
16
- &--left {
17
- padding-left: 0 !important;
18
- }
17
+ .unpad--left {
18
+ padding-left: 0 !important;
19
19
  }
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "0.0.36"
3
+ VERSION = "0.0.37"
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.36",
3
+ "version": "0.0.37",
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.36
4
+ version: 0.0.37
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-11 00:00:00.000000000 Z
11
+ date: 2020-05-16 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: autoprefixer-rails