sass-zero 0.0.18 → 0.0.19

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: 32a5f44054178e89c43f0af8bbf278f95476c42387f90fa0d1ccfcb673017ea6
4
- data.tar.gz: 89ea2c7d3cc58da32fdddaf4787802f887c680b3ed6c8aad650e4b342e413c09
3
+ metadata.gz: 9acb499bf5dfcea23f155ce3295f566d44a93671c297b7c66dede7ea10267a4f
4
+ data.tar.gz: 981cb4f815f22b0499a58ab5906110a967b6b18eb44f24c38790ad445f371215
5
5
  SHA512:
6
- metadata.gz: ff818d924aca1afe44cf75d75c3a3883ab07699ec64ae8d887228a1ce49aba5c2cb653b95a65671bbe8e029805f15edd35e5405e669ddc897b58357d9befaacd
7
- data.tar.gz: 86b20f5c7bf71a7bd0666c95654a951e69cc7b70c459a52ec1bfd567f9ea2247daf176a56605aed032f2d6f2a53b7f98253c7a7a0f5fd1e6eba475f02001b943
6
+ metadata.gz: 58fc8dafa2e01e97277143d40be6b9e56f8b5b733b351f8edc70e52250c7756bd9659280a064164a1cbd5298548944b3ad8310e6fcd37abc26f1af592a5bae75
7
+ data.tar.gz: d94d636cab36b5e2507a5050c484132312fb3951a0106a91eb7762c5b73412636332bb413e43f0bd3ebd54a3a879171a0543a00c2d778ecb586d7a0d7d1fd48e
data/Example.html CHANGED
@@ -1,9 +1,3 @@
1
- <style>
2
- .btn--plus-icon {
3
- background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="%231a202c" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>');
4
- }
5
- </style>
6
-
7
1
  <main>
8
2
  <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
9
3
  <a>Anchor</a>
@@ -18,14 +12,15 @@
18
12
  <h5>Heading</h5>
19
13
  <h6>Heading</h6>
20
14
 
15
+
21
16
  <button>Default Button</button>
22
- <input type="submit" value="Submit Button" />
23
- <a href="#" class="btn">Link Button</a>
24
17
  <button class="btn--primary">Button Primary</button>
25
18
  <button class="btn--secondary">Button Secondary</button>
26
19
  <button class="btn--tertiary">Button Tertiary</button>
27
- <button class="btn--with-icon btn--plus-icon">Button With Icon</button>
28
- <button class="btn--small">Button Small</button>
20
+
21
+ <a href="#" class="btn">Link Button</a>
22
+
23
+ <input type="submit" value="Submit Button" />
29
24
 
30
25
  <hr>
31
26
 
@@ -53,7 +48,7 @@
53
48
  <label for="commentField">Comment</label>
54
49
  <textarea placeholder="Hi CJ …" id="commentField" rows="3"></textarea>
55
50
 
56
- <div class="flush-md--bottom">
51
+ <div class="push-md--bottom">
57
52
  <div>
58
53
  <input type="checkbox" name="option1" value="1" checked>
59
54
  <label for="option1" class="u-display-ib">Option 1</label>
@@ -68,7 +63,7 @@
68
63
  </div>
69
64
  </div>
70
65
 
71
- <div class="flush-md--bottom">
66
+ <div class="push-md--bottom">
72
67
  <div>
73
68
  <input type="radio" name="radio" value="1" checked>
74
69
  <label for="radio" class="u-display-ib">Option 1</label>
@@ -116,7 +111,7 @@
116
111
  <p><em>Yeah!! Milligram is amazing.</em></p>
117
112
  </blockquote>
118
113
 
119
- <pre><code>.milligram {
114
+ <pre><code>.milligram {
120
115
  color: #9b4dca;
121
116
  }</code></pre>
122
117
 
@@ -128,8 +123,6 @@
128
123
 
129
124
  <hr>
130
125
 
131
- <div></div>
132
-
133
126
  <ul>
134
127
  <li>Unordered list item 1</li>
135
128
  <li>Unordered list item 2</li>
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-02-26+Routeend.png)
5
+ ![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/Screenshot_2020-03-06+Routeend.png)
6
6
 
7
7
  ### Milligram
8
8
 
@@ -56,6 +56,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
56
56
  - [Padding Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/unpad.scss)
57
57
  - [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/text.scss)
58
58
  - [Layout Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/layout.scss)
59
+ - [Flex Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flex.scss)
59
60
 
60
61
  ## Installation
61
62
 
@@ -101,7 +102,6 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
101
102
  - [BEM](http://getbem.com/naming)
102
103
  - [Refactoring UI](https://refactoringui.com/book)
103
104
  - [Shape UP](https://basecamp.com/shapeup)
104
- - [Hero Icons](https://github.com/refactoringui/heroicons)
105
105
 
106
106
  ## License
107
107
 
@@ -38,11 +38,12 @@ input[type='submit'] {
38
38
  &--primary {
39
39
  background-color: $breadboard-primary !important;
40
40
  border-color: $breadboard-primary;
41
+ box-shadow: $shadow-sm;
41
42
  color: $white !important;
42
43
  }
43
44
 
44
45
  &--secondary {
45
- background-color: $white !important;
46
+ background-color: transparent !important;
46
47
  border-color: $breadboard-primary;
47
48
  }
48
49
 
@@ -50,43 +51,6 @@ input[type='submit'] {
50
51
  background-color: transparent !important;
51
52
  border-color: transparent;
52
53
  }
53
-
54
- &--with-icon {
55
- padding-left: $size-8;
56
- background-position: $size-2 center;
57
- background-repeat: no-repeat;
58
- background-size: auto $size-5;
59
- }
60
-
61
- &--small {
62
- font-size: $text-sm;
63
- padding-top: 0.35rem;
64
- padding-bottom: 0.35rem;
65
- }
66
-
67
- &--small-icon {
68
- width: $size-10;
69
- height: $size-10;
70
- padding: 0 !important;
71
- background-position: center !important;
72
- background-repeat: no-repeat;
73
- background-size: auto $size-5;
74
- }
75
-
76
- &--tiny-icon {
77
- width: $size-6;
78
- height: $size-6;
79
- padding: 0 !important;
80
- background-position: center !important;
81
- background-repeat: no-repeat;
82
- background-size: auto $size-4;
83
- vertical-align: text-top;
84
- }
85
-
86
- &--borderless {
87
- border-color: transparent !important;
88
- background-color: transparent !important
89
- }
90
54
  }
91
55
 
92
56
  code {
@@ -168,8 +132,8 @@ input[type='radio'] {
168
132
  color: $breadboard-primary;
169
133
  display: inline-block;
170
134
  margin-bottom: -2.5px;
171
- height: $size-4;
172
- width: $size-4;
135
+ height: $size-6;
136
+ width: $size-6;
173
137
 
174
138
  &:checked {
175
139
  border-color: transparent;
@@ -183,7 +147,7 @@ input[type='checkbox'] {
183
147
  border-radius: $rounded;
184
148
 
185
149
  &:checked {
186
- background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"/></svg>');
150
+ 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>');
187
151
  }
188
152
  }
189
153
 
@@ -197,7 +161,7 @@ input[type='radio'] {
197
161
 
198
162
  a {
199
163
  color: $breadboard-primary;
200
- font-weight: $font-bold;
164
+ font-weight: $font-semibold;
201
165
  cursor: pointer;
202
166
  }
203
167
 
@@ -254,7 +218,7 @@ thead th {
254
218
 
255
219
  td, th {
256
220
  border-bottom-width: $border;
257
- padding: $size-3 $size-2;
221
+ padding: $size-3 $size-5;
258
222
  text-align: left;
259
223
  }
260
224
 
@@ -289,5 +253,5 @@ h6 {
289
253
  }
290
254
 
291
255
  main {
292
- @include make-container($size-6, $breakpoint-xl);
256
+ @include make-container($size-4, $breakpoint-lg);
293
257
  }
@@ -0,0 +1,23 @@
1
+ .flex {
2
+ display: flex;
3
+
4
+ &--column {
5
+ flex-direction: column;
6
+ }
7
+
8
+ &--row {
9
+ flex-direction: row;
10
+ }
11
+
12
+ &--justify-center {
13
+ justify-content: center;
14
+ }
15
+
16
+ &--items-center {
17
+ align-items: center;
18
+ }
19
+
20
+ &--none {
21
+ flex: none;
22
+ }
23
+ }
@@ -56,11 +56,11 @@
56
56
  }
57
57
 
58
58
  &--subtle {
59
- color: $gray-600;
59
+ color: $gray-700;
60
60
  }
61
61
 
62
62
  &--very-subtle {
63
- color: $gray-500;
63
+ color: $gray-600;
64
64
  }
65
65
 
66
66
  &--capitalize {
@@ -1,3 +1,4 @@
1
+ @import "sass-zero/utilities/flex";
1
2
  @import "sass-zero/utilities/flush";
2
3
  @import "sass-zero/utilities/layout";
3
4
  @import "sass-zero/utilities/pull";
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "0.0.18"
3
+ VERSION = "0.0.19"
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.18",
3
+ "version": "0.0.19",
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.18
4
+ version: 0.0.19
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-04 00:00:00.000000000 Z
11
+ date: 2020-03-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: autoprefixer-rails
@@ -42,6 +42,7 @@ files:
42
42
  - app/assets/stylesheets/sass-zero/base/variables.scss
43
43
  - app/assets/stylesheets/sass-zero/mixins.scss
44
44
  - app/assets/stylesheets/sass-zero/utilities.scss
45
+ - app/assets/stylesheets/sass-zero/utilities/flex.scss
45
46
  - app/assets/stylesheets/sass-zero/utilities/flush.scss
46
47
  - app/assets/stylesheets/sass-zero/utilities/layout.scss
47
48
  - app/assets/stylesheets/sass-zero/utilities/pull.scss