sass-zero 1.2.0 → 1.2.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.sass-zero-references.scss +2 -1
- data/Gemfile.lock +1 -1
- data/README.md +8 -3
- data/app/assets/stylesheets/sass-zero/_mixins.scss +0 -8
- data/app/assets/stylesheets/sass-zero/breadboard.scss +18 -17
- data/app/assets/stylesheets/sass-zero/utilities/_container.scss +5 -5
- data/app/assets/stylesheets/sass-zero/variables/_colors.scss +15 -2
- data/app/assets/stylesheets/sass-zero/variables/_sizing.scss +1 -1
- data/example.html +74 -76
- data/lib/sass_zero/version.rb +1 -1
- data/screenshot.png +0 -0
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1a26aefa62e61441b5d4fee85a87cb5f84f46cabca144bf8f23f40005c20e9e3
|
4
|
+
data.tar.gz: caafc10d6e32d80c05a1e9aac2cb39925d080d254a3b672e1be5cf3c71d5d333
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: dc6970b49c3917c35673b82496b8a962502dac89ae655c9e1e41a28198067c8989b8fc6c50209036cfedc1e85b3dee90e0d178111fa2e0f32e1750a5076fa0d7
|
7
|
+
data.tar.gz: 0752702cc2605c8c830eb58065e096a0043bc0139e76af7c11101f575bf93a622bd3f80e9a0a5a04f552d68894eae2d346d459f14db37a8b2766637995dafc52
|
data/.sass-zero-references.scss
CHANGED
@@ -280,6 +280,8 @@ $blue-gray-700: #334155;
|
|
280
280
|
$blue-gray-800: #1e293b;
|
281
281
|
$blue-gray-900: #0f172a;
|
282
282
|
|
283
|
+
@function gradient($direction, $from, $to: transparent, $via: null) {}
|
284
|
+
|
283
285
|
// *******************************************************************
|
284
286
|
// Effects
|
285
287
|
// *******************************************************************
|
@@ -724,4 +726,3 @@ $z-50: 50;
|
|
724
726
|
@mixin outline-none {}
|
725
727
|
@mixin progress-bar {}
|
726
728
|
@mixin make-container($padding-x: $size-4) {}
|
727
|
-
@mixin gradient($direction, $from, $to: transparent, $via: null) {}
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -65,10 +65,10 @@ This can be useful for dealing with similar components, and positioning.
|
|
65
65
|
|
66
66
|
## Breadboard
|
67
67
|
|
68
|
-
|
68
|
+
These default styles ensure that even without custom styling, the content is usable and understandable, if your development process is mostly reproducing Figma designs, you might don't need it.
|
69
69
|
|
70
70
|
- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
|
71
|
-
- [Screenshot](
|
71
|
+
- [Screenshot](screenshot.png)
|
72
72
|
- [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
|
73
73
|
|
74
74
|
## Using variables
|
@@ -124,11 +124,12 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
|
|
124
124
|
|
125
125
|
When you are sure about the style of your application you should make a copy of `breadboard.scss` and customize fonts, borders, and colors.
|
126
126
|
|
127
|
-
You will need to
|
127
|
+
You will need to replace the original breadboard in application.css:
|
128
128
|
|
129
129
|
```css
|
130
130
|
*= require sass-zero/base
|
131
131
|
*= require sass-zero/utilities
|
132
|
+
*= require design-system/breadboard
|
132
133
|
```
|
133
134
|
|
134
135
|
### Variables
|
@@ -142,6 +143,10 @@ Instead of using the default variables you can add more or change the existents,
|
|
142
143
|
...
|
143
144
|
```
|
144
145
|
|
146
|
+
## References
|
147
|
+
|
148
|
+
[The 35 CSS properties you must know to do 80% of the work](https://github.com/lazaronixon/css-properties-counter)
|
149
|
+
|
145
150
|
## Development
|
146
151
|
|
147
152
|
To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
@@ -38,11 +38,3 @@
|
|
38
38
|
margin-right: auto;
|
39
39
|
margin-left: auto;
|
40
40
|
}
|
41
|
-
|
42
|
-
@mixin gradient($direction, $from, $to: transparent, $via: null) {
|
43
|
-
@if $via {
|
44
|
-
background-image: linear-gradient($direction, $from, $via, $to);
|
45
|
-
} @else {
|
46
|
-
background-image: linear-gradient($direction, $from, $to);
|
47
|
-
}
|
48
|
-
}
|
@@ -7,10 +7,11 @@ $radius-primary: $rounded;
|
|
7
7
|
$radius-secondary: $rounded;
|
8
8
|
|
9
9
|
:root {
|
10
|
-
--color-bg--main: #{$
|
11
|
-
--color-bg--surface: #{$
|
10
|
+
--color-bg--main: #{$gray-100};
|
11
|
+
--color-bg--surface: #{$white};
|
12
12
|
--color-bg--highlight: #{$gray-200};
|
13
|
-
--color-
|
13
|
+
--color-border: #{$gray-300};
|
14
|
+
--color-primary: #{$gray-800};
|
14
15
|
--color-text: #{$gray-900};
|
15
16
|
}
|
16
17
|
|
@@ -19,11 +20,16 @@ $radius-secondary: $rounded;
|
|
19
20
|
--color-bg--main: #{$gray-900};
|
20
21
|
--color-bg--surface: #{$gray-800};
|
21
22
|
--color-bg--highlight: #{$gray-700};
|
23
|
+
--color-border: #{$gray-600};
|
22
24
|
--color-primary: #{$white};
|
23
25
|
--color-text: #{$white};
|
24
26
|
}
|
25
27
|
}
|
26
28
|
|
29
|
+
*, ::before, ::after {
|
30
|
+
border-color: var(--color-border);
|
31
|
+
}
|
32
|
+
|
27
33
|
html {
|
28
34
|
accent-color: var(--color-primary);
|
29
35
|
background: var(--color-bg--main);
|
@@ -35,18 +41,17 @@ html {
|
|
35
41
|
border-radius: $radius-primary;
|
36
42
|
border-width: $border;
|
37
43
|
display: inline-block;
|
38
|
-
font-weight: $font-bold;
|
39
44
|
padding: $size-2 $size-3;
|
40
45
|
cursor: pointer;
|
41
46
|
|
42
47
|
&--primary {
|
43
48
|
background-color: var(--color-primary);
|
44
49
|
border-color: var(--color-primary);
|
45
|
-
color: var(--color-bg--
|
50
|
+
color: var(--color-bg--surface);
|
46
51
|
}
|
47
52
|
|
48
53
|
&--secondary {
|
49
|
-
background-color: var(--color-bg--
|
54
|
+
background-color: var(--color-bg--surface);
|
50
55
|
border-color: var(--color-primary);
|
51
56
|
}
|
52
57
|
|
@@ -73,7 +78,7 @@ html {
|
|
73
78
|
.input {
|
74
79
|
appearance: none;
|
75
80
|
resize: none;
|
76
|
-
background-color: var(--color-bg--
|
81
|
+
background-color: var(--color-bg--surface);
|
77
82
|
border-radius: $radius-secondary;
|
78
83
|
border-width: $border;
|
79
84
|
padding: $size-2 $size-3;
|
@@ -94,8 +99,8 @@ html {
|
|
94
99
|
}
|
95
100
|
}
|
96
101
|
|
97
|
-
.
|
98
|
-
background-color: var(--color-bg--
|
102
|
+
.dropdown {
|
103
|
+
background-color: var(--color-bg--surface);
|
99
104
|
border-width: $border; border-radius: $radius-primary;
|
100
105
|
padding: $size-3 $size-4;
|
101
106
|
box-shadow: $shadow-lg;
|
@@ -113,7 +118,7 @@ blockquote {
|
|
113
118
|
}
|
114
119
|
|
115
120
|
code {
|
116
|
-
background-color: var(--color-bg--
|
121
|
+
background-color: var(--color-bg--main);
|
117
122
|
border-radius: $rounded;
|
118
123
|
font-size: $text-sm;
|
119
124
|
padding: $size-1;
|
@@ -121,7 +126,7 @@ code {
|
|
121
126
|
}
|
122
127
|
|
123
128
|
pre {
|
124
|
-
background-color: var(--color-bg--
|
129
|
+
background-color: var(--color-bg--main);
|
125
130
|
border-left-width: $border-4;
|
126
131
|
overflow-y: hidden;
|
127
132
|
|
@@ -152,10 +157,6 @@ hr {
|
|
152
157
|
margin: $size-6 $size-0;
|
153
158
|
}
|
154
159
|
|
155
|
-
a {
|
156
|
-
font-weight: $font-bold;
|
157
|
-
}
|
158
|
-
|
159
160
|
menu, ul, ol {
|
160
161
|
padding-left: $size-10;
|
161
162
|
}
|
@@ -189,7 +190,7 @@ table, progress, blockquote, figure, pre, menu, ul, ol, dl, p {
|
|
189
190
|
}
|
190
191
|
|
191
192
|
dialog {
|
192
|
-
background-color: var(--color-bg--
|
193
|
+
background-color: var(--color-bg--surface);
|
193
194
|
border-width: $border; border-radius: $radius-primary;
|
194
195
|
padding: $size-3 $size-4;
|
195
196
|
box-shadow: $shadow-lg;
|
@@ -201,7 +202,7 @@ dialog::backdrop {
|
|
201
202
|
}
|
202
203
|
|
203
204
|
progress {
|
204
|
-
background-color: var(--color-bg--
|
205
|
+
background-color: var(--color-bg--main);
|
205
206
|
}
|
206
207
|
|
207
208
|
@include progress-bar {
|
@@ -6,31 +6,31 @@
|
|
6
6
|
}
|
7
7
|
|
8
8
|
@media (min-width: $breakpoint-sm) {
|
9
|
-
.container {
|
9
|
+
.container--sm {
|
10
10
|
max-width: $breakpoint-sm;
|
11
11
|
}
|
12
12
|
}
|
13
13
|
|
14
14
|
@media (min-width: $breakpoint-md) {
|
15
|
-
.container {
|
15
|
+
.container--md {
|
16
16
|
max-width: $breakpoint-md;
|
17
17
|
}
|
18
18
|
}
|
19
19
|
|
20
20
|
@media (min-width: $breakpoint-lg) {
|
21
|
-
.container {
|
21
|
+
.container--lg {
|
22
22
|
max-width: $breakpoint-lg;
|
23
23
|
}
|
24
24
|
}
|
25
25
|
|
26
26
|
@media (min-width: $breakpoint-xl) {
|
27
|
-
.container {
|
27
|
+
.container--xl {
|
28
28
|
max-width: $breakpoint-xl;
|
29
29
|
}
|
30
30
|
}
|
31
31
|
|
32
32
|
@media (min-width: $breakpoint-2xl) {
|
33
|
-
.container {
|
33
|
+
.container--2xl {
|
34
34
|
max-width: $breakpoint-2xl;
|
35
35
|
}
|
36
36
|
}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
// *******************************************************************
|
2
|
-
// Default
|
3
|
-
//
|
2
|
+
// Default Color Palette
|
3
|
+
// SASS-ZERO includes an expertly-crafted default color palette
|
4
4
|
// out-of-the-box that is a great starting point if you don’t
|
5
5
|
// have your own specific branding in mind.
|
6
6
|
// *******************************************************************
|
@@ -251,3 +251,16 @@ $blue-gray-600: #475569;
|
|
251
251
|
$blue-gray-700: #334155;
|
252
252
|
$blue-gray-800: #1e293b;
|
253
253
|
$blue-gray-900: #0f172a;
|
254
|
+
|
255
|
+
// *******************************************************************
|
256
|
+
// Gradient function
|
257
|
+
// Function for creating gradient colors.
|
258
|
+
// background: gradient(to right, $indigo-500);
|
259
|
+
// *******************************************************************
|
260
|
+
@function gradient($direction, $from, $to: transparent, $via: null) {
|
261
|
+
@if $via {
|
262
|
+
@return linear-gradient($direction, $from, $via, $to);
|
263
|
+
} @else {
|
264
|
+
@return linear-gradient($direction, $from, $to);
|
265
|
+
}
|
266
|
+
}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
// *******************************************************************
|
2
2
|
// Default sizing scale
|
3
|
-
// By default,
|
3
|
+
// By default, SASS-ZERO includes a generous and comprehensive numeric sizing scale.
|
4
4
|
// *******************************************************************
|
5
5
|
$size-px: 1px;
|
6
6
|
$size-0: 0;
|
data/example.html
CHANGED
@@ -1,42 +1,49 @@
|
|
1
|
-
<main class="container">
|
2
|
-
<
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
<div class="popup-menu push-xs--top u-position--right">
|
28
|
-
<ul class="list--unindented u-nowrap flush">
|
29
|
-
<li>Unordered list item 1</li>
|
30
|
-
<li>Unordered list item 2</li>
|
31
|
-
<li>Unordered list item 3</li>
|
32
|
-
</ul>
|
1
|
+
<main class="container container--lg" style="background-color: var(--color-bg--surface);">
|
2
|
+
<div class="push-md--bottom">
|
3
|
+
<div class="push-sm--bottom">
|
4
|
+
<p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
|
5
|
+
<a href="#" class="txt--underline">Anchor</a>
|
6
|
+
<em>Emphasis</em>
|
7
|
+
<small>Small</small>
|
8
|
+
<strong>Strong</strong>
|
9
|
+
<u>Underline</u>
|
10
|
+
<kbd>CTRL+C</kbd>
|
11
|
+
<mark>Highlighted text</mark>
|
12
|
+
</div>
|
13
|
+
|
14
|
+
<h1>Heading</h1>
|
15
|
+
<h2>Heading</h2>
|
16
|
+
<h3>Heading</h3>
|
17
|
+
<h4>Heading</h4>
|
18
|
+
<h5>Heading</h5>
|
19
|
+
<h6>Heading</h6>
|
20
|
+
</div>
|
21
|
+
|
22
|
+
<div class="push-md--bottom">
|
23
|
+
<div class="push-xs--bottom">
|
24
|
+
<button class="btn btn--primary">Button Primary</button>
|
25
|
+
<button class="btn btn--secondary">Button Secondary</button>
|
26
|
+
<button class="btn btn--tertiary">Button Tertiary</button>
|
33
27
|
</div>
|
34
|
-
</details>
|
35
28
|
|
36
|
-
|
37
|
-
<button class="btn btn--secondary btn--small">Small Button</button>
|
29
|
+
<a href="#" class="btn btn--secondary">Link Button</a>
|
38
30
|
|
39
|
-
|
31
|
+
<input type="submit" value="Submit Button" class="btn btn--secondary" />
|
32
|
+
|
33
|
+
<details class="u-position-context">
|
34
|
+
<summary class="btn btn--secondary">Dropdown Button</summary>
|
35
|
+
<div class="dropdown push-xs--top u-position--right">
|
36
|
+
<ul class="list--unindented u-nowrap flush">
|
37
|
+
<li>Unordered list item 1</li>
|
38
|
+
<li>Unordered list item 2</li>
|
39
|
+
<li>Unordered list item 3</li>
|
40
|
+
</ul>
|
41
|
+
</div>
|
42
|
+
</details>
|
43
|
+
|
44
|
+
<button class="btn btn--secondary"><span class="btn__icon bx bx-plus"></span> Icon Button</button>
|
45
|
+
<button class="btn btn--secondary btn--small">Small Button</button>
|
46
|
+
</div>
|
40
47
|
|
41
48
|
<form class="push-md--bottom">
|
42
49
|
<label for="nameField" class="u-display-b txt--bold">Name</label>
|
@@ -100,9 +107,7 @@
|
|
100
107
|
<input type="submit" value="Send" class="btn btn--primary">
|
101
108
|
</form>
|
102
109
|
|
103
|
-
<
|
104
|
-
|
105
|
-
<table>
|
110
|
+
<table class="push-md--bottom">
|
106
111
|
<thead>
|
107
112
|
<tr>
|
108
113
|
<th>Name</th>
|
@@ -127,54 +132,47 @@
|
|
127
132
|
</tbody>
|
128
133
|
</table>
|
129
134
|
|
135
|
+
<div class="push-md--bottom">
|
136
|
+
<ul class="list--unindented">
|
137
|
+
<li>Unordered list item 1</li>
|
138
|
+
<li>Unordered list item 2</li>
|
139
|
+
<li>Unordered list item 3</li>
|
140
|
+
</ul>
|
141
|
+
|
142
|
+
<ol class="list--unindented">
|
143
|
+
<li>Ordered list item 1</li>
|
144
|
+
<li>Ordered list item 2</li>
|
145
|
+
<li>Ordered list item 3</li>
|
146
|
+
</ol>
|
147
|
+
|
148
|
+
<dl>
|
149
|
+
<dd>A description list is perfect for defining terms.</dd>
|
150
|
+
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
|
151
|
+
</dl>
|
152
|
+
</div>
|
153
|
+
|
154
|
+
<div class="push-md--bottom">
|
155
|
+
<code>.block { color: #9b4dca; }</code>
|
156
|
+
</div>
|
157
|
+
|
158
|
+
<pre><code>.block { color: #9b4dca; }</code></pre>
|
159
|
+
|
130
160
|
<blockquote>
|
131
161
|
<p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
|
132
162
|
<cite class="txt--sm">– Stephen King</cite>
|
133
163
|
</blockquote>
|
134
164
|
|
135
|
-
<
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
<div class="push-md--bottom">
|
140
|
-
<code>
|
141
|
-
.milligram {
|
142
|
-
color: #9b4dca;
|
143
|
-
}
|
144
|
-
</code>
|
165
|
+
<div>
|
166
|
+
<label for="progress" class="u-display-b txt--bold">Progress</label>
|
167
|
+
<progress id="progress" max="100" value="70">70%</progress>
|
145
168
|
</div>
|
146
169
|
|
147
|
-
<div
|
170
|
+
<div style="height: 55px;">
|
148
171
|
<dialog open>
|
149
172
|
<form method="dialog">
|
150
|
-
<span>
|
173
|
+
<span>This is a native dialog with a close button.</span>
|
151
174
|
<button type="submit" value="dismiss" class="push-xs--left txt--lg">×</button>
|
152
175
|
</form>
|
153
176
|
</dialog>
|
154
177
|
</div>
|
155
|
-
|
156
|
-
<div class="push-md--bottom">
|
157
|
-
<label for="progres" class="u-display-b txt--bold">Progress</label>
|
158
|
-
<progress id="progres" max="100" value="70">70%</progress>
|
159
|
-
</div>
|
160
|
-
|
161
|
-
<hr>
|
162
|
-
|
163
|
-
<ul class="list--unindented">
|
164
|
-
<li>Unordered list item 1</li>
|
165
|
-
<li>Unordered list item 2</li>
|
166
|
-
<li>Unordered list item 3</li>
|
167
|
-
</ul>
|
168
|
-
|
169
|
-
<ol class="list--unindented">
|
170
|
-
<li>Ordered list item 1</li>
|
171
|
-
<li>Ordered list item 2</li>
|
172
|
-
<li>Ordered list item 3</li>
|
173
|
-
</ol>
|
174
|
-
|
175
|
-
<dl>
|
176
|
-
<dt>Description lists</dt>
|
177
|
-
<dd>A description list is perfect for defining terms.</dd>
|
178
|
-
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
|
179
|
-
</dl>
|
180
178
|
</main>
|
data/lib/sass_zero/version.rb
CHANGED
data/screenshot.png
ADDED
Binary file
|
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: 1.2.
|
4
|
+
version: 1.2.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- lazaronixon
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-07-
|
11
|
+
date: 2023-07-09 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description:
|
14
14
|
email:
|
@@ -63,6 +63,7 @@ files:
|
|
63
63
|
- lib/sass_zero.rb
|
64
64
|
- lib/sass_zero/version.rb
|
65
65
|
- sass-zero.gemspec
|
66
|
+
- screenshot.png
|
66
67
|
homepage: http://github.com/lazaronixon/sass-zero
|
67
68
|
licenses:
|
68
69
|
- MIT
|