sass-zero 0.0.51 → 0.0.55
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Example.html +9 -9
- data/app/assets/stylesheets/sass-zero/breadboard.scss +10 -5
- data/app/assets/stylesheets/sass-zero/mixins.scss +0 -8
- data/app/assets/stylesheets/sass-zero/utilities/flex.scss +10 -10
- data/app/assets/stylesheets/sass-zero/utilities/layout.scss +33 -68
- data/app/assets/stylesheets/sass-zero/utilities/list.scss +4 -21
- data/app/assets/stylesheets/sass-zero/utilities/pull.scss +6 -15
- data/app/assets/stylesheets/sass-zero/utilities/text.scss +5 -0
- data/app/assets/stylesheets/sass-zero/variables/spacing.scss +0 -4
- data/lib/sass/zero/version.rb +1 -1
- data/package.json +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 87bd9449a35b1aaf5635f44d910ee5993e650750413f46f77a2759e19d823cbe
|
4
|
+
data.tar.gz: 10bd5bb77d0cb2e23d2c1823c007f3c14888ef0fc35636e55fe567732cd9e24b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 21067c7675af269ca3e554ac823f9df8adfc44887b9280839a9b21e1d0deda985fb9e1da3e190268b97c292a5be4867d3d3952675157787b75aed1149fc1e20a
|
7
|
+
data.tar.gz: 6ef7f228182ba5ade57acb7fdaa37427f6ddec3467682addc489c4067f5481b2f940b2e1933b2a3057bd5d74847dfdf5ea2466de3a2c4ee8ded001c31efe08f8
|
data/Example.html
CHANGED
@@ -40,31 +40,31 @@
|
|
40
40
|
|
41
41
|
<div class="push-md--bottom">
|
42
42
|
<div>
|
43
|
-
<input type="checkbox" name="option1" value="1" class="checkbox" checked>
|
43
|
+
<input type="checkbox" id="option1" name="option1" value="1" class="checkbox" checked>
|
44
44
|
<label for="option1" class="u-display-ib">Option 1</label>
|
45
45
|
</div>
|
46
46
|
<div>
|
47
|
-
<input type="checkbox" name="option2" value="2" class="checkbox">
|
47
|
+
<input type="checkbox" id="option2" name="option2" value="2" class="checkbox">
|
48
48
|
<label for="option2" class="u-display-ib">Option 2</label>
|
49
49
|
</div>
|
50
50
|
<div>
|
51
|
-
<input type="checkbox" name="option3" value="3" class="checkbox">
|
51
|
+
<input type="checkbox" id="option3" name="option3" value="3" class="checkbox">
|
52
52
|
<label for="option3" class="u-display-ib">Option 3</label>
|
53
53
|
</div>
|
54
54
|
</div>
|
55
55
|
|
56
56
|
<div class="push-md--bottom">
|
57
57
|
<div>
|
58
|
-
<input type="radio" name="radio" value="1" class="radio" checked>
|
59
|
-
<label for="
|
58
|
+
<input type="radio" id="radio1" name="radio" value="1" class="radio" checked>
|
59
|
+
<label for="radio1" class="u-display-ib">Option 1</label>
|
60
60
|
</div>
|
61
61
|
<div>
|
62
|
-
<input type="radio" name="radio" value="2" class="radio">
|
63
|
-
<label for="
|
62
|
+
<input type="radio" id="radio2" name="radio" value="2" class="radio">
|
63
|
+
<label for="radio2" class="u-display-ib">Option 2</label>
|
64
64
|
</div>
|
65
65
|
<div>
|
66
|
-
<input type="radio" name="radio" value="3" class="radio">
|
67
|
-
<label for="
|
66
|
+
<input type="radio" id="radio3" name="radio" value="3" class="radio">
|
67
|
+
<label for="radio3" class="u-display-ib">Option 3</label>
|
68
68
|
</div>
|
69
69
|
</div>
|
70
70
|
</div>
|
@@ -33,11 +33,6 @@ html {
|
|
33
33
|
padding: $size-2 $size-4;
|
34
34
|
cursor: pointer;
|
35
35
|
|
36
|
-
&:disabled {
|
37
|
-
pointer-events: none;
|
38
|
-
opacity: $opacity-50;
|
39
|
-
}
|
40
|
-
|
41
36
|
&--primary {
|
42
37
|
background-color: var(--color-primary);
|
43
38
|
border-color: var(--color-primary);
|
@@ -54,6 +49,16 @@ html {
|
|
54
49
|
background-color: $transparent;
|
55
50
|
border-color: $transparent;
|
56
51
|
}
|
52
|
+
|
53
|
+
&:focus {
|
54
|
+
box-shadow: ring($color: var(--color-focus-ring));
|
55
|
+
@include outline-none;
|
56
|
+
}
|
57
|
+
|
58
|
+
&:disabled {
|
59
|
+
pointer-events: none;
|
60
|
+
opacity: $opacity-50;
|
61
|
+
}
|
57
62
|
}
|
58
63
|
|
59
64
|
.input {
|
@@ -2,28 +2,28 @@
|
|
2
2
|
display: flex;
|
3
3
|
}
|
4
4
|
|
5
|
-
.i-flex {
|
6
|
-
display: inline-flex;
|
7
|
-
}
|
8
|
-
|
9
5
|
.flex--column {
|
10
6
|
flex-direction: column;
|
11
7
|
}
|
12
8
|
|
13
|
-
.flex--centered {
|
14
|
-
justify-content: center;
|
15
|
-
}
|
16
|
-
|
17
9
|
.flex--space-items {
|
18
10
|
justify-content: space-between;
|
19
11
|
}
|
20
12
|
|
13
|
+
.flex--wrap {
|
14
|
+
flex-wrap: wrap;
|
15
|
+
}
|
16
|
+
|
17
|
+
.flex--centered {
|
18
|
+
justify-content: center;
|
19
|
+
}
|
20
|
+
|
21
21
|
.flex--align-center {
|
22
22
|
align-items: center;
|
23
23
|
}
|
24
24
|
|
25
|
-
.flex
|
26
|
-
|
25
|
+
.i-flex {
|
26
|
+
display: inline-flex;
|
27
27
|
}
|
28
28
|
|
29
29
|
.flex-item--grow {
|
@@ -2,117 +2,82 @@
|
|
2
2
|
@import "sass-zero/variables/effects";
|
3
3
|
@import "sass-zero/mixins";
|
4
4
|
|
5
|
-
.u-
|
6
|
-
|
7
|
-
}
|
8
|
-
|
9
|
-
.u-full-height {
|
10
|
-
height:100%
|
11
|
-
}
|
12
|
-
|
13
|
-
.u-min-width {
|
14
|
-
min-width: 0;
|
15
|
-
}
|
16
|
-
|
17
|
-
.u-disabled {
|
18
|
-
pointer-events: none;
|
19
|
-
opacity: $opacity-30;
|
20
|
-
}
|
21
|
-
|
22
|
-
.u-off-screen {
|
23
|
-
position: absolute;
|
24
|
-
left: -9999em;
|
25
|
-
}
|
26
|
-
|
27
|
-
.u-overflow-auto {
|
28
|
-
overflow: auto;
|
5
|
+
.u-display-n {
|
6
|
+
display: none !important;
|
29
7
|
}
|
30
8
|
|
31
|
-
.u-
|
32
|
-
|
9
|
+
.u-display-b {
|
10
|
+
display: block;
|
33
11
|
}
|
34
12
|
|
35
13
|
.u-display-i {
|
36
14
|
display: inline;
|
37
15
|
}
|
38
16
|
|
39
|
-
.u-display-b {
|
40
|
-
display: block;
|
41
|
-
}
|
42
|
-
|
43
17
|
.u-display-ib {
|
44
18
|
display: inline-block;
|
45
19
|
}
|
46
20
|
|
47
|
-
.u-display-n {
|
48
|
-
display: none !important;
|
49
|
-
}
|
50
|
-
|
51
21
|
.u-visibility-hidden {
|
52
22
|
visibility: hidden;
|
53
23
|
}
|
54
24
|
|
55
|
-
.u-
|
56
|
-
|
25
|
+
.u-hide {
|
26
|
+
display: none;
|
57
27
|
}
|
58
28
|
|
59
|
-
.u-
|
60
|
-
|
61
|
-
margin-right: auto;
|
29
|
+
.u-float-l {
|
30
|
+
float: left;
|
62
31
|
}
|
63
32
|
|
64
|
-
.u-
|
65
|
-
|
33
|
+
.u-float-r {
|
34
|
+
float: right;
|
66
35
|
}
|
67
36
|
|
68
37
|
.u-nowrap {
|
69
38
|
white-space: nowrap;
|
70
39
|
}
|
71
40
|
|
72
|
-
.u-
|
73
|
-
|
74
|
-
}
|
75
|
-
|
76
|
-
.u-float-l {
|
77
|
-
float: left;
|
41
|
+
.u-full-width {
|
42
|
+
width: 100%;
|
78
43
|
}
|
79
44
|
|
80
|
-
.u-
|
81
|
-
|
45
|
+
.u-min-width {
|
46
|
+
min-width: 0;
|
82
47
|
}
|
83
48
|
|
84
|
-
.u-
|
85
|
-
|
49
|
+
.u-full-height {
|
50
|
+
height: 100%
|
86
51
|
}
|
87
52
|
|
88
|
-
.u-
|
89
|
-
|
53
|
+
.u-disabled {
|
54
|
+
pointer-events: none;
|
55
|
+
opacity: $opacity-30;
|
90
56
|
}
|
91
57
|
|
92
|
-
.u-
|
93
|
-
|
58
|
+
.u-off-screen {
|
59
|
+
position: absolute;
|
60
|
+
left: -9999em;
|
94
61
|
}
|
95
62
|
|
96
|
-
.u-
|
97
|
-
|
63
|
+
.u-overflow-auto {
|
64
|
+
overflow: auto;
|
98
65
|
}
|
99
66
|
|
100
|
-
.u-
|
101
|
-
|
67
|
+
.u-overflow-hidden {
|
68
|
+
overflow: hidden;
|
102
69
|
}
|
103
70
|
|
104
|
-
|
105
|
-
|
106
|
-
|
71
|
+
@media (min-width: $breakpoint-sm) {
|
72
|
+
.u-show--inline\@sm {
|
73
|
+
display: inline;
|
74
|
+
}
|
107
75
|
|
108
|
-
|
109
|
-
|
110
|
-
display: none;
|
76
|
+
.u-show\@sm {
|
77
|
+
display: block;
|
111
78
|
}
|
112
|
-
}
|
113
79
|
|
114
|
-
|
115
|
-
.u-hide\@medium {
|
80
|
+
.u-hide\@sm {
|
116
81
|
display: none;
|
117
82
|
}
|
118
83
|
}
|
@@ -14,28 +14,11 @@
|
|
14
14
|
list-style: none;
|
15
15
|
}
|
16
16
|
|
17
|
-
.list--
|
18
|
-
margin-top: $size-2;
|
19
|
-
}
|
20
|
-
|
21
|
-
.list--inside-bulleted {
|
22
|
-
padding-left: $size-0;
|
23
|
-
list-style-position: inside;
|
24
|
-
}
|
25
|
-
|
26
|
-
.list--ruled-top {
|
27
|
-
border-top-width: $border;
|
28
|
-
}
|
29
|
-
|
30
|
-
.list--inline > li {
|
17
|
+
.list--inline li {
|
31
18
|
display: inline-block;
|
19
|
+
vertical-align: middle;
|
32
20
|
}
|
33
21
|
|
34
|
-
.list--
|
35
|
-
|
36
|
-
}
|
37
|
-
|
38
|
-
.list--ruled > li {
|
39
|
-
padding: $size-4 $size-2;
|
40
|
-
border-top-width: $border;
|
22
|
+
.list--dividers li:not(:last-child) {
|
23
|
+
border-bottom-width: $border;
|
41
24
|
}
|
@@ -5,33 +5,24 @@
|
|
5
5
|
// $size-map: ("xs": $size-1, "sm": $size-2, "md": $size-4, "lg": $size-6, "xl": $size-8, "2xl": $size-10, "3xl": $size-12);
|
6
6
|
// *******************************************************************
|
7
7
|
@each $scale, $size in $size-map {
|
8
|
-
.pull-#{$scale} {
|
9
|
-
margin: -$size !important;
|
10
|
-
}
|
11
|
-
|
12
8
|
.pull-#{$scale}--top {
|
13
|
-
margin-top:
|
9
|
+
margin-top: $size * -1 !important;
|
14
10
|
}
|
15
11
|
|
16
12
|
.pull-#{$scale}--right {
|
17
|
-
margin-right:
|
13
|
+
margin-right: $size * -1 !important;
|
18
14
|
}
|
19
15
|
|
20
16
|
.pull-#{$scale}--bottom {
|
21
|
-
margin-bottom:
|
17
|
+
margin-bottom: $size * -1 !important;
|
22
18
|
}
|
23
19
|
|
24
20
|
.pull-#{$scale}--left {
|
25
|
-
margin-left:
|
26
|
-
}
|
27
|
-
|
28
|
-
.pull-#{$scale}--ends {
|
29
|
-
margin-top: -$size !important;
|
30
|
-
margin-bottom: -$size !important;
|
21
|
+
margin-left: $size * -1 !important;
|
31
22
|
}
|
32
23
|
|
33
24
|
.pull-#{$scale}--sides {
|
34
|
-
margin-right:
|
35
|
-
margin-left:
|
25
|
+
margin-right: $size * -1 !important;
|
26
|
+
margin-left: $size * -1 !important;
|
36
27
|
}
|
37
28
|
}
|
@@ -4,6 +4,7 @@
|
|
4
4
|
|
5
5
|
.txt--normal {
|
6
6
|
font-weight: $font-normal !important;
|
7
|
+
font-style: normal !important;
|
7
8
|
}
|
8
9
|
|
9
10
|
.txt--bold {
|
@@ -22,6 +23,10 @@
|
|
22
23
|
white-space: nowrap;
|
23
24
|
}
|
24
25
|
|
26
|
+
.txt--wrap {
|
27
|
+
white-space: normal;
|
28
|
+
}
|
29
|
+
|
25
30
|
.txt--break-words {
|
26
31
|
word-wrap: break-word;
|
27
32
|
}
|
@@ -5,13 +5,9 @@
|
|
5
5
|
// *******************************************************************
|
6
6
|
$size-px: 1px;
|
7
7
|
$size-0: 0px;
|
8
|
-
$size-0-5: 0.125rem;
|
9
8
|
$size-1: 0.25rem;
|
10
|
-
$size-1-5: 0.375rem;
|
11
9
|
$size-2: 0.5rem;
|
12
|
-
$size-2-5: 0.625rem;
|
13
10
|
$size-3: 0.75rem;
|
14
|
-
$size-3-5: 0.875rem;
|
15
11
|
$size-4: 1rem;
|
16
12
|
$size-5: 1.25rem;
|
17
13
|
$size-6: 1.5rem;
|
data/lib/sass/zero/version.rb
CHANGED
data/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "sass-zero",
|
3
|
-
"version": "0.0.
|
3
|
+
"version": "0.0.55",
|
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.
|
4
|
+
version: 0.0.55
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- lazaronixon
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2021-
|
11
|
+
date: 2021-12-10 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description:
|
14
14
|
email:
|