sass-zero 0.0.39 → 0.0.44

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.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/Example.html +1 -1
  3. data/README.md +4 -1
  4. data/app/assets/stylesheets/sass-zero/base.scss +0 -1
  5. data/app/assets/stylesheets/sass-zero/base/preflight.scss +14 -4
  6. data/app/assets/stylesheets/sass-zero/{base/breadboard.scss → breadboard.scss} +53 -32
  7. data/app/assets/stylesheets/sass-zero/mixins.scss +23 -14
  8. data/app/assets/stylesheets/sass-zero/utilities.scss +1 -0
  9. data/app/assets/stylesheets/sass-zero/utilities/animation.scss +59 -0
  10. data/app/assets/stylesheets/sass-zero/utilities/flex.scss +33 -21
  11. data/app/assets/stylesheets/sass-zero/utilities/layout.scss +11 -1
  12. data/app/assets/stylesheets/sass-zero/utilities/list.scss +20 -4
  13. data/app/assets/stylesheets/sass-zero/utilities/text.scss +47 -5
  14. data/app/assets/stylesheets/sass-zero/variables.scss +1 -0
  15. data/app/assets/stylesheets/sass-zero/variables/border.scss +4 -1
  16. data/app/assets/stylesheets/sass-zero/variables/breakpoints.scss +5 -4
  17. data/app/assets/stylesheets/sass-zero/variables/colors.scss +239 -118
  18. data/app/assets/stylesheets/sass-zero/variables/effects.scss +28 -4
  19. data/app/assets/stylesheets/sass-zero/variables/flex.scss +17 -1
  20. data/app/assets/stylesheets/sass-zero/variables/grid.scss +85 -0
  21. data/app/assets/stylesheets/sass-zero/variables/spacing.scss +16 -2
  22. data/app/assets/stylesheets/sass-zero/variables/transform.scss +9 -2
  23. data/app/assets/stylesheets/sass-zero/variables/typography.scss +18 -15
  24. data/app/assets/stylesheets/sass-zero/variables/width.scss +8 -3
  25. data/app/assets/stylesheets/sass-zero/variables/zindex.scss +1 -1
  26. data/lib/sass/zero/version.rb +1 -1
  27. data/package.json +1 -1
  28. metadata +6 -5
  29. data/app/assets/stylesheets/sass-zero/base/variables.scss +0 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3fad3bc286fc20abe0b9cdc927e140aeb64783dcc4a63821d2aa7a639b5aee25
4
- data.tar.gz: 9331bd31086517f71e6b608422fd13de0895e7a93d8b6c7b8f1c63c227cbfdee
3
+ metadata.gz: 1bedb80a3b82ff395f4fcb62ace52fa617d6dfbf57071c0ccfbe896cf07927e8
4
+ data.tar.gz: 0af153c127e2f31ebcf72b198b6524599d5a3a1e0346568ff175c20c51ebb398
5
5
  SHA512:
6
- metadata.gz: 92abdda324b6fc82bff7be29bb6d9496bec0e77ce31d66faa8ae88e58a546bc6f58fbc5f79c3afa8c48888055dd9d33d8d28d6e8154cdc18f6bf91b7b7a5d9e3
7
- data.tar.gz: f2af2f664a855e868d9b10dce45eb0fd9402859b3c361d30711a0f5f96ef62f876c2ee7db1ad24b3d1920f975c3daea2308937de0b5ffe72a862bf61c9f0cf0a
6
+ metadata.gz: 8c9d00ad068770c7f76c458ffd0111c96f6a673a6397a8999df4394275a648451dc93f977f67dace21a1a7ce5451c7b4caab1080220301f073d7aae06c227e04
7
+ data.tar.gz: 72a68175415ff39c9e565a851af374bbd3ab1587d3d72bca6ea7f151e8af0958618cd434aaaf2d889be141ca91c97a8a4b6a5cb28273b60c4917d1e99632e307
@@ -22,7 +22,7 @@
22
22
 
23
23
  <hr>
24
24
 
25
- <form class="push-md--bottom">
25
+ <form class="push-lg--bottom">
26
26
  <div class="push-md--bottom">
27
27
  <label for="nameField">Name</label>
28
28
  <input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
data/README.md CHANGED
@@ -31,7 +31,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
31
31
  ### Breadboard Theme
32
32
 
33
33
  - [Example](https://github.com/lazaronixon/sass-zero/blob/master/Example.html)
34
- - [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/base/breadboard.scss)
34
+ - [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
35
35
 
36
36
  ### Variables
37
37
 
@@ -40,6 +40,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
40
40
  - [Colors](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/colors.scss)
41
41
  - [Effects](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/effects.scss)
42
42
  - [Flex](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/flex.scss)
43
+ - [Grid](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/grid.scss)
43
44
  - [Spacing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/spacing.scss)
44
45
  - [Transform](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transform.scss)
45
46
  - [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transition.scss)
@@ -50,6 +51,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
50
51
 
51
52
  ### Utilities
52
53
 
54
+ - [Animation](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/animation.scss)
53
55
  - [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/push.scss)
54
56
  - [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pull.scss)
55
57
  - [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flush.scss)
@@ -76,6 +78,7 @@ Add this line to your application.css:
76
78
  ```css
77
79
  *= require sass-zero/base
78
80
  *= require sass-zero/utilities
81
+ *= require sass-zero/breadboard
79
82
  ```
80
83
 
81
84
  Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](https://github.com/lazaronixon/sass-zero/blob/master/vendor/assets/stylesheets/sass-zero/variables.scss):
@@ -1,3 +1,2 @@
1
1
  @import "base/normalize";
2
2
  @import "base/preflight";
3
- @import "base/breadboard";
@@ -1,4 +1,4 @@
1
- @import "sass-zero/base/variables";
1
+ @import "sass-zero/variables";
2
2
 
3
3
  /**
4
4
  * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
@@ -29,7 +29,6 @@ pre {
29
29
  button {
30
30
  background-color: transparent;
31
31
  background-image: none;
32
- padding: 0;
33
32
  }
34
33
 
35
34
  /**
@@ -70,6 +69,17 @@ html {
70
69
  line-height: 1.5; /* 2 */
71
70
  }
72
71
 
72
+
73
+ /**
74
+ * Inherit font-family and line-height from `html` so users can set them as
75
+ * a class directly on the `html` element.
76
+ */
77
+
78
+ body {
79
+ font-family: inherit;
80
+ line-height: inherit;
81
+ }
82
+
73
83
  /**
74
84
  * 1. Prevent padding and border from affecting element width.
75
85
  *
@@ -102,7 +112,7 @@ html {
102
112
  box-sizing: border-box; /* 1 */
103
113
  border-width: 0; /* 2 */
104
114
  border-style: solid; /* 2 */
105
- border-color: $breadboard-border; /* 2 */
115
+ border-color: $gray-200; /* 2 */
106
116
  }
107
117
 
108
118
  /*
@@ -133,7 +143,7 @@ textarea {
133
143
 
134
144
  input::placeholder,
135
145
  textarea::placeholder {
136
- color: $breadboard-placeholder;
146
+ color: $gray-400;
137
147
  }
138
148
 
139
149
  button,
@@ -1,8 +1,19 @@
1
- @import "sass-zero/base/variables";
1
+ @import "sass-zero/variables";
2
2
  @import "sass-zero/mixins";
3
3
 
4
+ $color-bg--main: $white;
5
+ $color-bg--surface: $gray-100;
6
+ $color-primary: $gray-900;
7
+ $color-txt: $gray-900;
8
+ $color-focus-ring: rgba($gray-900, $opacity-50);
9
+
10
+ $image-bg-select-black: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
11
+ $image-checked-checkbox-white: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
12
+ $image-checked-radio-white: 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>');
13
+
4
14
  html {
5
- color: $breadboard-color;
15
+ background: $color-bg--main;
16
+ color: $color-txt;
6
17
  font-size: 14px;
7
18
  }
8
19
 
@@ -12,34 +23,38 @@ main {
12
23
  }
13
24
 
14
25
  blockquote {
26
+ border-color: $color-primary;
15
27
  border-left-width: $border-4;
16
28
  padding: $size-3 $size-4;
17
29
  }
18
30
 
19
31
  .btn {
20
- background-color: $white;
21
32
  border-radius: $rounded;
22
33
  border-width: $border;
23
- color: $breadboard-color;
24
34
  display: inline-block;
25
35
  font-weight: $font-bold;
26
36
  padding: $size-2 $size-4;
27
37
  cursor: pointer;
28
38
 
29
- &:disabled, &.disabled {
39
+ &:focus {
40
+ outline: 2px dotted $color-primary;
41
+ outline-offset: 2px;
42
+ }
43
+
44
+ &:disabled {
30
45
  pointer-events: none;
31
46
  opacity: $opacity-50;
32
47
  }
33
48
 
34
49
  &--primary {
35
- background-color: $breadboard-primary;
36
- border-color: $breadboard-primary;
37
- color: $white;
50
+ background-color: $color-primary;
51
+ border-color: $color-primary;
52
+ color: $color-bg--main;
38
53
  }
39
54
 
40
55
  &--secondary {
41
- border-color: $breadboard-primary;
42
- background-color: $white;
56
+ background-color: $color-bg--main;
57
+ border-color: $color-primary;
43
58
  }
44
59
 
45
60
  &--tertiary {
@@ -49,7 +64,7 @@ blockquote {
49
64
  }
50
65
 
51
66
  code {
52
- background-color: $breadboard-background;
67
+ background-color: $color-bg--surface;
53
68
  border-radius: $rounded;
54
69
  font-size: $text-sm;
55
70
  margin: $size-0 $size-1;
@@ -58,15 +73,15 @@ code {
58
73
  }
59
74
 
60
75
  pre {
61
- background-color: $breadboard-background;
62
- border-color: $breadboard-primary;
76
+ background-color: $color-bg--surface;
77
+ border-color: $color-primary;
63
78
  border-left-width: $border-4;
64
79
  overflow-y: hidden;
65
80
 
66
81
  & > code {
67
82
  border-radius: $rounded-none;
68
- display: block;
69
- padding: $size-2 $size-3;
83
+ display: block;
84
+ padding: $size-2 $size-3;
70
85
  white-space: pre;
71
86
  }
72
87
  }
@@ -77,47 +92,57 @@ hr {
77
92
 
78
93
  .input {
79
94
  appearance: none;
95
+ background-color: $transparent;
80
96
  border-radius: $rounded;
81
97
  border-width: $border;
82
98
  padding: $size-2 $size-3;
83
99
  width: $size-full;
84
100
 
85
101
  &--select {
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>');
102
+ background-image: $image-bg-select-black;
87
103
  background-position: right $size-2 center;
88
104
  background-repeat: no-repeat;
89
105
  background-size: auto $size-5;
90
106
  padding-right: $size-8;
91
107
  }
92
108
 
93
- &:focus { @include focus; }
109
+ &:focus {
110
+ box-shadow: ring($color: $color-focus-ring);
111
+ @include outline-none;
112
+ }
94
113
  }
95
114
 
96
115
  .checkbox {
97
116
  border-radius: $rounded;
98
- @include selection($breadboard-primary);
117
+ @include input-selection($color-primary);
99
118
 
100
119
  &:checked {
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>');
120
+ background-image: $image-checked-checkbox-white;
102
121
  @include checked;
103
122
  }
104
123
 
105
- &:focus { @include focus; }
124
+ &:focus {
125
+ box-shadow: ring($color: $color-focus-ring);
126
+ @include outline-none;
127
+ }
106
128
  }
107
129
 
108
130
  .radio {
109
131
  border-radius: $rounded-full;
110
- @include selection($breadboard-primary);
132
+ @include input-selection($color-primary);
111
133
 
112
134
  &:checked {
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>');
135
+ background-image: $image-checked-radio-white;
114
136
  @include checked;
115
137
  }
116
138
 
117
- &:focus { @include focus; }
139
+ &:focus {
140
+ box-shadow: ring($color: $color-focus-ring);
141
+ @include outline-none;
142
+ }
118
143
  }
119
144
 
120
- label, legend {
145
+ label, legend, dt {
121
146
  display: inline-block;
122
147
  margin-bottom: $size-1;
123
148
  }
@@ -135,19 +160,15 @@ ol {
135
160
  }
136
161
 
137
162
  h1, h2, h3, h4, h5, h6, .hdg {
138
- margin-bottom: $size-2;
139
- }
140
-
141
- dd {
142
- margin-bottom: $size-2;
163
+ margin-bottom: $size-4;
143
164
  }
144
165
 
145
166
  fieldset, .input {
146
- margin-bottom: $size-4;
167
+ margin-bottom: $size-6;
147
168
  }
148
169
 
149
170
  blockquote, figure, p, pre, table, ul, ol, dl {
150
- margin-bottom: $size-4;
171
+ margin-bottom: $size-6;
151
172
  }
152
173
 
153
174
  table {
@@ -191,5 +212,5 @@ h6, .hdg--base {
191
212
 
192
213
  @media (min-width: $breakpoint-md) {
193
214
  html { font-size: 16px; }
194
- main { @include make-container($size-10, $breakpoint-lg); }
215
+ main { @include make-container($size-10, $breakpoint-xl); }
195
216
  }
@@ -3,9 +3,9 @@
3
3
  @import "sass-zero/variables/spacing";
4
4
 
5
5
  @mixin ellipsis {
6
- overflow: hidden;
7
6
  text-overflow: ellipsis;
8
7
  white-space: nowrap;
8
+ overflow: hidden;
9
9
  }
10
10
 
11
11
  @mixin antialiased {
@@ -26,30 +26,39 @@
26
26
  }
27
27
  }
28
28
 
29
- @mixin focus {
30
- border-color: #a4cafe;
31
- box-shadow: $shadow-outline;
32
- outline: 0;
29
+ @mixin checked {
30
+ border-color: transparent;
31
+ background-color: currentColor;
32
+ background-position: center;
33
+ background-repeat: no-repeat;
33
34
  }
34
35
 
35
- @mixin selection($color) {
36
+ @mixin input-selection($color) {
36
37
  appearance: none;
37
38
  border-width: $border;
38
39
  color: $color;
39
- margin-bottom: -0.2rem;
40
+ margin-bottom: -0.1rem;
40
41
  height: $size-4;
41
42
  width: $size-4;
42
43
  }
43
44
 
44
- @mixin checked {
45
- border-color: transparent;
46
- background-color: currentColor;
47
- background-position: center;
48
- background-repeat: no-repeat;
45
+ @mixin outline-none {
46
+ outline: 2px solid transparent;
47
+ outline-offset: 2px;
48
+ }
49
+
50
+ @mixin outline-white {
51
+ outline: 2px dotted white;
52
+ outline-offset: 2px;
53
+ }
54
+
55
+ @mixin outline-black {
56
+ outline: 2px dotted black;
57
+ outline-offset: 2px;
49
58
  }
50
59
 
51
60
  @mixin space-x($space, $reverse: false) {
52
- & > :not(template) ~ :not(template) {
61
+ & > :not([hidden]) ~ :not([hidden]) {
53
62
  @if $reverse {
54
63
  margin-right: $space;
55
64
  } @else {
@@ -59,7 +68,7 @@
59
68
  }
60
69
 
61
70
  @mixin space-y($space, $reverse: false) {
62
- & > :not(template) ~ :not(template) {
71
+ & > :not([hidden]) ~ :not([hidden]) {
63
72
  @if $reverse {
64
73
  margin-bottom: $space;
65
74
  } @else {
@@ -1,3 +1,4 @@
1
+ @import "sass-zero/utilities/animation";
1
2
  @import "sass-zero/utilities/flex";
2
3
  @import "sass-zero/utilities/flush";
3
4
  @import "sass-zero/utilities/layout";
@@ -0,0 +1,59 @@
1
+ .animate-none {
2
+ animation: none;
3
+ }
4
+
5
+ .animate-spin {
6
+ animation: spin 1s linear infinite;
7
+ }
8
+
9
+ .animate-ping {
10
+ animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
11
+ }
12
+
13
+ .animate-pulse {
14
+ animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
15
+ }
16
+
17
+ .animate-bounce {
18
+ animation: bounce 1s infinite;
19
+ }
20
+
21
+ @keyframes spin {
22
+ from {
23
+ transform: rotate(0deg);
24
+ }
25
+ to {
26
+ transform: rotate(360deg);
27
+ }
28
+ }
29
+
30
+ @keyframes ping {
31
+ 0% {
32
+ transform: scale(1);
33
+ opacity: 1;
34
+ }
35
+ 75%, 100% {
36
+ transform: scale(2);
37
+ opacity: 0;
38
+ }
39
+ }
40
+
41
+ @keyframes pulse {
42
+ 0%, 100% {
43
+ opacity: 1;
44
+ }
45
+ 50% {
46
+ opacity: .5;
47
+ }
48
+ }
49
+
50
+ @keyframes bounce {
51
+ 0%, 100% {
52
+ transform: translateY(-25%);
53
+ animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);
54
+ }
55
+ 50% {
56
+ transform: translateY(0);
57
+ animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);
58
+ }
59
+ }
@@ -1,31 +1,43 @@
1
1
  .flex {
2
2
  display: flex;
3
+ }
3
4
 
4
- &--column {
5
- flex-direction: column;
6
- }
5
+ .i-flex {
6
+ display: inline-flex;
7
+ }
7
8
 
8
- &--justify-center {
9
- justify-content: center;
10
- }
9
+ .flex--column {
10
+ flex-direction: column;
11
+ }
11
12
 
12
- &--justify-between {
13
- justify-content: space-between;
14
- }
13
+ .flex--justify-center {
14
+ justify-content: center;
15
+ }
15
16
 
16
- &--items-center {
17
- align-items: center;
18
- }
17
+ .flex--justify-between {
18
+ justify-content: space-between;
19
+ }
19
20
 
20
- &--wrap {
21
- flex-wrap: wrap;
22
- }
21
+ .flex--items-center {
22
+ align-items: center;
23
+ }
23
24
 
24
- &--grow {
25
- flex-grow: 1;
26
- }
25
+ .flex--wrap {
26
+ flex-wrap: wrap;
27
+ }
28
+
29
+ .flex-item--grow {
30
+ flex-grow: 1;
31
+ }
32
+
33
+ .flex-item--no-shrink {
34
+ flex-shrink: 0;
35
+ }
36
+
37
+ .flex-item--fill {
38
+ flex: 1;
39
+ }
27
40
 
28
- &--shrink-0 {
29
- flex-shrink: 0;
30
- }
41
+ .flex-item--align-center {
42
+ align-self: center;
31
43
  }