sass-zero 0.0.45 → 0.0.46

Sign up to get free protection for your applications and to get access to all the features.
Files changed (8) hide show
  1. checksums.yaml +4 -4
  2. data/Example.html +1 -1
  3. data/app/assets/stylesheets/sass-zero/breadboard.scss +56 -58
  4. data/app/assets/stylesheets/sass-zero/utilities.scss +0 -7
  5. data/app/assets/stylesheets/sass-zero/utilities/text.scss +0 -33
  6. data/lib/sass/zero/version.rb +1 -1
  7. data/package.json +1 -1
  8. metadata +6 -6
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 90335efa16cb09716e4c31bd9cb7df2469d9e586ce409ac5db752ef195f367a5
4
- data.tar.gz: 867fd4aec244f7886f26d438734e92d3e7511d9be443983632d673a12a4296b3
3
+ metadata.gz: a70d79a12adc6f8ce1f1e8cb6010376853a05f3811220d802bdba66807af5f73
4
+ data.tar.gz: 468f771702b25513dd37bfb8fc80e3ebbc61816db3680b3bc3839976676eaafb
5
5
  SHA512:
6
- metadata.gz: 14ac230bce5200038c588cbca45e565931061251a1e401ccf3699a1c326ef55eb0caf3806b6c29124a6641847567891d69e3d43c0b0280cf8ba26f4d7ac66ee3
7
- data.tar.gz: b525273b68b1538a8102dbeb0ccd9abeaa9bcb5f60e1fea95829613fdcdfcdb354b991e228e22c6fd915fb4c515374cedac40d775c233ac8b5289ef3735948d9
6
+ metadata.gz: d1b54a51fe3aff5ca9203f97ac299afbef75c7fc823d6809ef33c8157856d253126d215bf635eb34ffd53e70387b682cc4b4f9db942ca7a21d8450302127d199
7
+ data.tar.gz: dc64fedbee094996ad563e765e3edbd70e53a659d653437e26baea00abe691b925e564929c1932c22e0d3411d0e7855b5e6806103a13b302eb4213b592a490e7
data/Example.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <main class="container">
2
2
  <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
3
- <a href="#">Anchor</a>
3
+ <a href="#" class="txt--underline">Anchor</a>
4
4
  <em>Emphasis</em>
5
5
  <small>Small</small>
6
6
  <strong>Strong</strong>
data/app/assets/stylesheets/sass-zero/breadboard.scss CHANGED
@@ -6,29 +6,25 @@ $font-family: $font-sans;
6
6
  $radius-input: $rounded;
7
7
  $radius-button: $rounded;
8
8
 
9
- $color-bg--main: $white;
10
- $color-bg--surface: $gray-100;
11
- $color-primary: $gray-900;
12
- $color-txt: $gray-900;
13
- $color-focus-ring: rgba($gray-900, $opacity-50);
9
+ :root {
10
+ --color-bg--main: #{$white};
11
+ --color-bg--surface: #{$gray-100};
12
+ --color-primary: #{$gray-900};
13
+ --color-txt: #{$gray-900};
14
+ --color-focus-ring: #{rgba($gray-900, $opacity-50)};
14
15
 
15
- $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>');
16
- $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>');
17
- $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>');
16
+ --image-bg-select: 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>');
17
+ --image-checked-checkbox: 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>');
18
+ --image-checked-radio: 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>');
19
+ }
18
20
 
19
21
  html {
20
- background: $color-bg--main;
21
- color: $color-txt;
22
+ background: var(--color-bg--main);
23
+ color: var(--color-txt);
22
24
  font-family: $font-family;
23
25
  font-size: 16px;
24
26
  }
25
27
 
26
- blockquote {
27
- border-color: $color-primary;
28
- border-left-width: $border-4;
29
- padding: $size-3 $size-4;
30
- }
31
-
32
28
  .btn {
33
29
  border-radius: $radius-button;
34
30
  border-width: $border;
@@ -38,7 +34,7 @@ blockquote {
38
34
  cursor: pointer;
39
35
 
40
36
  &:focus {
41
- outline: 2px dotted $color-primary;
37
+ outline: 2px dotted var(--color-primary);
42
38
  outline-offset: 2px;
43
39
  }
44
40
 
@@ -48,14 +44,14 @@ blockquote {
48
44
  }
49
45
 
50
46
  &--primary {
51
- background-color: $color-primary;
52
- border-color: $color-primary;
53
- color: $color-bg--main;
47
+ background-color: var(--color-primary);
48
+ border-color: var(--color-primary);
49
+ color: var(--color-bg--main);
54
50
  }
55
51
 
56
52
  &--secondary {
57
- background-color: $color-bg--main;
58
- border-color: $color-primary;
53
+ background-color: var(--color-bg--main);
54
+ border-color: var(--color-primary);
59
55
  }
60
56
 
61
57
  &--tertiary {
@@ -64,33 +60,6 @@ blockquote {
64
60
  }
65
61
  }
66
62
 
67
- code {
68
- background-color: $color-bg--surface;
69
- border-radius: $rounded-xl;
70
- font-size: $text-sm;
71
- margin: $size-0 $size-1;
72
- padding: $size-1 $size-2;
73
- white-space: nowrap;
74
- }
75
-
76
- pre {
77
- background-color: $color-bg--surface;
78
- border-color: $color-primary;
79
- border-left-width: $border-4;
80
- overflow-y: hidden;
81
-
82
- & > code {
83
- border-radius: $rounded-none;
84
- display: block;
85
- padding: $size-2 $size-3;
86
- white-space: pre;
87
- }
88
- }
89
-
90
- hr {
91
- margin: $size-6 $size-0;
92
- }
93
-
94
63
  .input {
95
64
  appearance: none;
96
65
  background-color: $transparent;
@@ -100,7 +69,7 @@ hr {
100
69
  width: $size-full;
101
70
 
102
71
  &--select {
103
- background-image: $image-bg-select-black;
72
+ background-image: var(--image-bg-select);
104
73
  background-position: right $size-2 center;
105
74
  background-repeat: no-repeat;
106
75
  background-size: auto $size-5;
@@ -108,41 +77,70 @@ hr {
108
77
  }
109
78
 
110
79
  &:focus {
111
- box-shadow: ring($color: $color-focus-ring);
80
+ box-shadow: ring($color: var(--color-focus-ring));
112
81
  @include outline-none;
113
82
  }
114
83
  }
115
84
 
116
85
  .checkbox {
117
86
  border-radius: $rounded;
118
- @include input-selection($color-primary);
87
+ @include input-selection(var(--color-primary));
119
88
 
120
89
  &:checked {
121
- background-image: $image-checked-checkbox-white;
90
+ background-image: var(--image-checked-checkbox);
122
91
  @include checked;
123
92
  }
124
93
 
125
94
  &:focus {
126
- box-shadow: ring($color: $color-focus-ring);
95
+ box-shadow: ring($color: var(--color-focus-ring));
127
96
  @include outline-none;
128
97
  }
129
98
  }
130
99
 
131
100
  .radio {
132
101
  border-radius: $rounded-full;
133
- @include input-selection($color-primary);
102
+ @include input-selection(var(--color-primary));
134
103
 
135
104
  &:checked {
136
- background-image: $image-checked-radio-white;
105
+ background-image: var(--image-checked-radio);
137
106
  @include checked;
138
107
  }
139
108
 
140
109
  &:focus {
141
- box-shadow: ring($color: $color-focus-ring);
110
+ box-shadow: ring($color: var(--color-focus-ring));
142
111
  @include outline-none;
143
112
  }
144
113
  }
145
114
 
115
+ blockquote {
116
+ border-left-width: $border-4;
117
+ padding: $size-3 $size-4;
118
+ }
119
+
120
+ code {
121
+ background-color: var(--color-bg--surface);
122
+ border-radius: $rounded;
123
+ font-size: $text-sm;
124
+ margin: $size-0 $size-1;
125
+ padding: $size-1 $size-2;
126
+ white-space: nowrap;
127
+ }
128
+
129
+ pre {
130
+ background-color: var(--color-bg--surface);
131
+ overflow-y: hidden;
132
+
133
+ & > code {
134
+ display: block;
135
+ padding: $size-2 $size-3;
136
+ white-space: pre;
137
+ }
138
+ }
139
+
140
+ hr {
141
+ margin: $size-6 $size-0;
142
+ }
143
+
146
144
  a {
147
145
  font-weight: $font-bold;
148
146
  }
@@ -182,7 +180,7 @@ table {
182
180
  td, th {
183
181
  border-bottom-width: $border;
184
182
  padding: $size-3 $size-4;
185
- text-align: left;
183
+ text-align: inherit;
186
184
  }
187
185
 
188
186
  h1, h2, h3, h4, h5, h6, .hdg {
data/app/assets/stylesheets/sass-zero/utilities.scss CHANGED
@@ -1,10 +1,3 @@
1
- $color-txt: #18181b;
2
- $color-txt--subtle: #3f3f46;
3
- $color-txt--subtle-reversed: #fff;
4
- $color-txt--decorated: #3b82f6;
5
-
6
- $color-bg--highlight: #f4f4f5;
7
-
8
1
  @import "sass-zero/utilities/align";
9
2
  @import "sass-zero/utilities/animation";
10
3
  @import "sass-zero/utilities/container";
data/app/assets/stylesheets/sass-zero/utilities/text.scss CHANGED
@@ -18,23 +18,6 @@
18
18
  text-transform: uppercase;
19
19
  }
20
20
 
21
- .txt--subtle {
22
- color: $color-txt--subtle;
23
- }
24
-
25
- .txt--subtle-reversed {
26
- color: $color-txt--subtle-reversed;
27
- }
28
-
29
- .txt--full-contrast {
30
- color: $color-txt;
31
- }
32
-
33
- .txt--meta {
34
- font-size: $text-sm;
35
- color: $color-txt--subtle;
36
- }
37
-
38
21
  .txt--nowrap {
39
22
  white-space: nowrap;
40
23
  }
@@ -63,12 +46,6 @@
63
46
  opacity: $opacity-50;
64
47
  }
65
48
 
66
- .txt--highlight {
67
- background-color: $color-bg--highlight;
68
- border-radius: $rounded-full;
69
- padding: $size-0 $size-1;
70
- }
71
-
72
49
  .txt--overflow-hidden {
73
50
  overflow: hidden;
74
51
  }
@@ -138,16 +115,6 @@
138
115
  line-height: $leading-none;
139
116
  }
140
117
 
141
- .decorated {
142
- color: $color-txt--decorated;
143
- text-decoration: underline;
144
- }
145
-
146
- .decorated--subtle {
147
- color: $color-txt--subtle;
148
- text-decoration: underline;
149
- }
150
-
151
118
  .undecorated {
152
119
  color: inherit;
153
120
  text-decoration: none;
data/lib/sass/zero/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "0.0.45"
3
+ VERSION = "0.0.46"
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.45",
3
+ "version": "0.0.46",
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.45
4
+ version: 0.0.46
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
8
- autorequire:
8
+ autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-12-18 00:00:00.000000000 Z
11
+ date: 2020-12-19 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: autoprefixer-rails
@@ -24,7 +24,7 @@ dependencies:
24
24
  - - ">="
25
25
  - !ruby/object:Gem::Version
26
26
  version: 9.7.4
27
- description:
27
+ description:
28
28
  email:
29
29
  - lazaronixon@hotmail.com
30
30
  executables: []
@@ -75,7 +75,7 @@ homepage: http://github.com/lazaronixon/sass-zero
75
75
  licenses:
76
76
  - MIT
77
77
  metadata: {}
78
- post_install_message:
78
+ post_install_message:
79
79
  rdoc_options: []
80
80
  require_paths:
81
81
  - lib
@@ -91,7 +91,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
91
91
  version: '0'
92
92
  requirements: []
93
93
  rubygems_version: 3.1.4
94
- signing_key:
94
+ signing_key:
95
95
  specification_version: 4
96
96
  summary: A CSS framework for rapid UI development based on tailwindcss, miligram and
97
97
  BEM.