sass-zero 0.0.41 → 0.0.42

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 (27) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +3 -0
  3. data/app/assets/stylesheets/sass-zero/base.scss +0 -1
  4. data/app/assets/stylesheets/sass-zero/base/preflight.scss +14 -4
  5. data/app/assets/stylesheets/sass-zero/{base/breadboard.scss → breadboard.scss} +25 -9
  6. data/app/assets/stylesheets/sass-zero/mixins.scss +27 -18
  7. data/app/assets/stylesheets/sass-zero/utilities.scss +1 -0
  8. data/app/assets/stylesheets/sass-zero/utilities/animation.scss +59 -0
  9. data/app/assets/stylesheets/sass-zero/utilities/flex.scss +33 -21
  10. data/app/assets/stylesheets/sass-zero/utilities/list.scss +1 -1
  11. data/app/assets/stylesheets/sass-zero/utilities/text.scss +38 -3
  12. data/app/assets/stylesheets/sass-zero/variables.scss +1 -0
  13. data/app/assets/stylesheets/sass-zero/variables/border.scss +4 -1
  14. data/app/assets/stylesheets/sass-zero/variables/breakpoints.scss +5 -4
  15. data/app/assets/stylesheets/sass-zero/variables/colors.scss +239 -118
  16. data/app/assets/stylesheets/sass-zero/variables/effects.scss +30 -4
  17. data/app/assets/stylesheets/sass-zero/variables/flex.scss +17 -1
  18. data/app/assets/stylesheets/sass-zero/variables/grid.scss +85 -0
  19. data/app/assets/stylesheets/sass-zero/variables/spacing.scss +16 -2
  20. data/app/assets/stylesheets/sass-zero/variables/transform.scss +9 -2
  21. data/app/assets/stylesheets/sass-zero/variables/typography.scss +18 -15
  22. data/app/assets/stylesheets/sass-zero/variables/width.scss +8 -3
  23. data/app/assets/stylesheets/sass-zero/variables/zindex.scss +1 -1
  24. data/lib/sass/zero/version.rb +1 -1
  25. data/package.json +1 -1
  26. metadata +10 -9
  27. 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: f7535d89224d6749bc77287fa7b66b68e6e1fe7d14e418187dacc923461ee184
4
- data.tar.gz: a29e525d141f3d99e1740f60f07820c7af8e41b2bc1965ada826b6bc979c7456
3
+ metadata.gz: 4fc89d490e508588c32e7a8d2f24e710cbc47797e677b2f0f882a7de040f78c5
4
+ data.tar.gz: 5af7f7563084b499eae3695a8a10e49cda92339c3fb1f1a42d779250c5741a40
5
5
  SHA512:
6
- metadata.gz: 7f6ee090a317a9a289339d88312e2655923745196ede0d1e1704de70b5ec0ea61f4136e1630d9112284204e32ab4c3d97b60c9ad31925f24c2c3c4b020adc7a3
7
- data.tar.gz: 82a8ced5aa112b734f511f212beab343b5aafa29f1a77cb8ece989fe6f8a6384418d3692027dfa8d9c18567f71ae2de56a9e99004b5fa693817a6eacff2f3a8a
6
+ metadata.gz: a8dc51d7f79fdaca2cddb60a27b736ad3d63b88a42bf6335e9616f3c838643bcbbac42b2cb8bd76e15459e4757ad53e458e58a1d3038c5b68abe739bd744facb
7
+ data.tar.gz: 2fea0ea3d5ad4206e2c982a1c0dc8cba68c852b359406bfaee4746ff932697172f6f1e33aead8ffb2ab3e881a06818c80d773c417146c631704617095ca5fe51
data/README.md CHANGED
@@ -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,10 @@
1
- @import "sass-zero/base/variables";
1
+ @import "sass-zero/variables";
2
2
  @import "sass-zero/mixins";
3
3
 
4
+ $breadboard-primary: $gray-900;
5
+ $breadboard-background: $gray-100;
6
+
4
7
  html {
5
- color: $breadboard-color;
6
8
  font-size: 14px;
7
9
  }
8
10
 
@@ -12,6 +14,7 @@ main {
12
14
  }
13
15
 
14
16
  blockquote {
17
+ border-color: $breadboard-primary;
15
18
  border-left-width: $border-4;
16
19
  padding: $size-3 $size-4;
17
20
  }
@@ -20,12 +23,16 @@ blockquote {
20
23
  background-color: $white;
21
24
  border-radius: $rounded;
22
25
  border-width: $border;
23
- color: $breadboard-color;
26
+ color: $breadboard-primary;
24
27
  display: inline-block;
25
28
  font-weight: $font-bold;
26
29
  padding: $size-2 $size-4;
27
30
  cursor: pointer;
28
31
 
32
+ &:focus {
33
+ @include outline-black;
34
+ }
35
+
29
36
  &:disabled {
30
37
  pointer-events: none;
31
38
  opacity: $opacity-50;
@@ -83,14 +90,17 @@ hr {
83
90
  width: $size-full;
84
91
 
85
92
  &--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>');
93
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="%236b7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
87
94
  background-position: right $size-2 center;
88
95
  background-repeat: no-repeat;
89
96
  background-size: auto $size-5;
90
97
  padding-right: $size-8;
91
98
  }
92
99
 
93
- &:focus { @include focus; }
100
+ &:focus {
101
+ box-shadow: ring($color: $breadboard-primary);
102
+ @include outline-none;
103
+ }
94
104
  }
95
105
 
96
106
  .checkbox {
@@ -98,11 +108,14 @@ hr {
98
108
  @include input-selection($breadboard-primary);
99
109
 
100
110
  &: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>');
111
+ background-image: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>');
102
112
  @include checked;
103
113
  }
104
114
 
105
- &:focus { @include focus; }
115
+ &:focus {
116
+ box-shadow: ring($color: $breadboard-primary);
117
+ @include outline-none;
118
+ }
106
119
  }
107
120
 
108
121
  .radio {
@@ -114,7 +127,10 @@ hr {
114
127
  @include checked;
115
128
  }
116
129
 
117
- &:focus { @include focus; }
130
+ &:focus {
131
+ box-shadow: ring($color: $breadboard-primary);
132
+ @include outline-none;
133
+ }
118
134
  }
119
135
 
120
136
  label, legend, dt {
@@ -187,5 +203,5 @@ h6, .hdg--base {
187
203
 
188
204
  @media (min-width: $breakpoint-md) {
189
205
  html { font-size: 16px; }
190
- main { @include make-container($size-10, $breakpoint-lg); }
206
+ main { @include make-container($size-10, $breakpoint-xl); }
191
207
  }
@@ -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,12 +26,6 @@
26
26
  }
27
27
  }
28
28
 
29
- @mixin focus {
30
- border-color: #a4cafe;
31
- box-shadow: $shadow-outline;
32
- outline: 0;
33
- }
34
-
35
29
  @mixin checked {
36
30
  border-color: transparent;
37
31
  background-color: currentColor;
@@ -39,8 +33,32 @@
39
33
  background-repeat: no-repeat;
40
34
  }
41
35
 
36
+ @mixin input-selection($color) {
37
+ appearance: none;
38
+ border-width: $border;
39
+ color: $color;
40
+ margin-bottom: -0.1rem;
41
+ height: $size-4;
42
+ width: $size-4;
43
+ }
44
+
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;
58
+ }
59
+
42
60
  @mixin space-x($space, $reverse: false) {
43
- & > :not(template) ~ :not(template) {
61
+ & > :not([hidden]) ~ :not([hidden]) {
44
62
  @if $reverse {
45
63
  margin-right: $space;
46
64
  } @else {
@@ -50,7 +68,7 @@
50
68
  }
51
69
 
52
70
  @mixin space-y($space, $reverse: false) {
53
- & > :not(template) ~ :not(template) {
71
+ & > :not([hidden]) ~ :not([hidden]) {
54
72
  @if $reverse {
55
73
  margin-bottom: $space;
56
74
  } @else {
@@ -67,12 +85,3 @@
67
85
  margin-left: $size-auto;
68
86
  max-width: $max-width;
69
87
  }
70
-
71
- @mixin input-selection($color) {
72
- appearance: none;
73
- border-width: $border;
74
- color: $color;
75
- margin-bottom: -0.1rem;
76
- height: $size-4;
77
- width: $size-4;
78
- }
@@ -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
  }
@@ -7,7 +7,7 @@
7
7
  }
8
8
 
9
9
  .list--unbulleted {
10
- list-style: none;
10
+ list-style: none;
11
11
  }
12
12
 
13
13
  .list--spaced {
@@ -1,46 +1,72 @@
1
1
  @import "sass-zero/variables/typography";
2
2
  @import "sass-zero/variables/spacing";
3
3
  @import "sass-zero/variables/colors";
4
+ @import "sass-zero/variables/border";
4
5
  @import "sass-zero/mixins";
5
6
 
6
7
  .txt--xs {
7
8
  font-size: $text-xs;
9
+ line-height: $leading-4;
8
10
  }
9
11
 
10
12
  .txt--sm {
11
13
  font-size: $text-sm;
14
+ line-height: $leading-5;
12
15
  }
13
16
 
14
17
  .txt--md {
15
18
  font-size: $text-base;
19
+ line-height: $leading-6;
16
20
  }
17
21
 
18
22
  .txt--lg {
19
23
  font-size: $text-lg;
24
+ line-height: $leading-7;
20
25
  }
21
26
 
22
27
  .txt--xl {
23
28
  font-size: $text-xl;
29
+ line-height: $leading-7;
24
30
  }
25
31
 
26
32
  .txt--2xl {
27
33
  font-size: $text-2xl;
34
+ line-height: $leading-8;
28
35
  }
29
36
 
30
37
  .txt--3xl {
31
38
  font-size: $text-3xl;
39
+ line-height: $leading-9;
32
40
  }
33
41
 
34
42
  .txt--4xl {
35
43
  font-size: $text-4xl;
44
+ line-height: $leading-10;
36
45
  }
37
46
 
38
47
  .txt--5xl {
39
48
  font-size: $text-5xl;
49
+ line-height: $leading-4;
40
50
  }
41
51
 
42
52
  .txt--6xl {
43
53
  font-size: $text-6xl;
54
+ line-height: $leading-4;
55
+ }
56
+
57
+ .txt--7xl {
58
+ font-size: $text-7xl;
59
+ line-height: $leading-4;
60
+ }
61
+
62
+ .txt--8xl {
63
+ font-size: $text-8xl;
64
+ line-height: $leading-4;
65
+ }
66
+
67
+ .txt--9xl {
68
+ font-size: $text-9xl;
69
+ line-height: $leading-4;
44
70
  }
45
71
 
46
72
  .txt--nowrap {
@@ -51,6 +77,10 @@
51
77
  word-wrap: break-word;
52
78
  }
53
79
 
80
+ .txt--break-words-alt {
81
+ word-break: break-word;
82
+ }
83
+
54
84
  .txt--break-all {
55
85
  word-break: break-all;
56
86
  }
@@ -60,7 +90,7 @@
60
90
  }
61
91
 
62
92
  .txt--normal {
63
- font-weight: $font-normal;
93
+ font-weight: $font-normal !important;
64
94
  }
65
95
 
66
96
  .txt--bold {
@@ -83,6 +113,12 @@
83
113
  text-transform: uppercase;
84
114
  }
85
115
 
116
+ .txt--highlight {
117
+ background-color: $gray-200;
118
+ border-radius: $rounded-full;
119
+ padding: $size-0 $size-1;
120
+ }
121
+
86
122
  .align--top {
87
123
  vertical-align: top;
88
124
  }
@@ -114,6 +150,5 @@
114
150
 
115
151
  .decorated--subtle {
116
152
  color: $gray-700;
117
- font-weight: $font-normal;
118
- &:hover { text-decoration: underline; }
153
+ text-decoration: underline;
119
154
  }