sass-zero 0.0.43 → 0.0.47
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Example.html +13 -13
- data/README.md +3 -0
- data/app/assets/stylesheets/sass-zero/base/normalize.css +159 -223
- data/app/assets/stylesheets/sass-zero/base/preflight.scss +39 -18
- data/app/assets/stylesheets/sass-zero/breadboard.scss +58 -76
- data/app/assets/stylesheets/sass-zero/mixins.scss +13 -33
- data/app/assets/stylesheets/sass-zero/utilities/align.scss +28 -0
- data/app/assets/stylesheets/sass-zero/utilities/container.scss +36 -0
- data/app/assets/stylesheets/sass-zero/utilities/flex.scss +3 -3
- data/app/assets/stylesheets/sass-zero/utilities/layout.scss +40 -3
- data/app/assets/stylesheets/sass-zero/utilities/list.scss +21 -11
- data/app/assets/stylesheets/sass-zero/utilities/position.scss +14 -6
- data/app/assets/stylesheets/sass-zero/utilities/text.scss +56 -85
- data/app/assets/stylesheets/sass-zero/utilities.scss +2 -0
- data/app/assets/stylesheets/sass-zero/variables/border.scss +1 -1
- data/app/assets/stylesheets/sass-zero/variables/colors.scss +11 -10
- data/app/assets/stylesheets/sass-zero/variables/height.scss +37 -0
- data/app/assets/stylesheets/sass-zero/variables/spacing.scss +36 -32
- data/app/assets/stylesheets/sass-zero/variables/width.scss +28 -45
- data/app/assets/stylesheets/sass-zero/variables.scss +1 -0
- data/lib/sass/zero/version.rb +1 -1
- data/package.json +1 -1
- data/sass-zero.gemspec +1 -1
- metadata +13 -10
@@ -1,9 +1,55 @@
|
|
1
1
|
@import "sass-zero/variables/typography";
|
2
2
|
@import "sass-zero/variables/spacing";
|
3
|
-
@import "sass-zero/variables/colors";
|
4
|
-
@import "sass-zero/variables/border";
|
5
3
|
@import "sass-zero/mixins";
|
6
4
|
|
5
|
+
.txt--normal {
|
6
|
+
font-weight: $font-normal !important;
|
7
|
+
}
|
8
|
+
|
9
|
+
.txt--bold {
|
10
|
+
font-weight: $font-bold;
|
11
|
+
}
|
12
|
+
|
13
|
+
.txt--underline {
|
14
|
+
text-decoration: underline;
|
15
|
+
}
|
16
|
+
|
17
|
+
.txt--uppercase {
|
18
|
+
text-transform: uppercase;
|
19
|
+
}
|
20
|
+
|
21
|
+
.txt--nowrap {
|
22
|
+
white-space: nowrap;
|
23
|
+
}
|
24
|
+
|
25
|
+
.txt--break-words {
|
26
|
+
word-wrap: break-word;
|
27
|
+
}
|
28
|
+
|
29
|
+
.txt--break-words-alt {
|
30
|
+
word-break: break-word;
|
31
|
+
}
|
32
|
+
|
33
|
+
.txt--break-all {
|
34
|
+
word-break: break-all;
|
35
|
+
}
|
36
|
+
|
37
|
+
.txt--ellipsis {
|
38
|
+
@include ellipsis;
|
39
|
+
}
|
40
|
+
|
41
|
+
.txt--dimmed {
|
42
|
+
opacity: $opacity-75;
|
43
|
+
}
|
44
|
+
|
45
|
+
.txt--very-dimmed {
|
46
|
+
opacity: $opacity-50;
|
47
|
+
}
|
48
|
+
|
49
|
+
.txt--overflow-hidden {
|
50
|
+
overflow: hidden;
|
51
|
+
}
|
52
|
+
|
7
53
|
.txt--xs {
|
8
54
|
font-size: $text-xs;
|
9
55
|
line-height: $leading-4;
|
@@ -46,105 +92,30 @@
|
|
46
92
|
|
47
93
|
.txt--5xl {
|
48
94
|
font-size: $text-5xl;
|
49
|
-
line-height: $leading-
|
95
|
+
line-height: $leading-none;
|
50
96
|
}
|
51
97
|
|
52
98
|
.txt--6xl {
|
53
99
|
font-size: $text-6xl;
|
54
|
-
line-height: $leading-
|
100
|
+
line-height: $leading-none;
|
55
101
|
}
|
56
102
|
|
57
103
|
.txt--7xl {
|
58
104
|
font-size: $text-7xl;
|
59
|
-
line-height: $leading-
|
105
|
+
line-height: $leading-none;
|
60
106
|
}
|
61
107
|
|
62
108
|
.txt--8xl {
|
63
109
|
font-size: $text-8xl;
|
64
|
-
line-height: $leading-
|
110
|
+
line-height: $leading-none;
|
65
111
|
}
|
66
112
|
|
67
113
|
.txt--9xl {
|
68
114
|
font-size: $text-9xl;
|
69
|
-
line-height: $leading-
|
70
|
-
}
|
71
|
-
|
72
|
-
.txt--nowrap {
|
73
|
-
white-space: nowrap;
|
115
|
+
line-height: $leading-none;
|
74
116
|
}
|
75
117
|
|
76
|
-
.
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
.txt--break-words-alt {
|
81
|
-
word-break: break-word;
|
82
|
-
}
|
83
|
-
|
84
|
-
.txt--break-all {
|
85
|
-
word-break: break-all;
|
86
|
-
}
|
87
|
-
|
88
|
-
.txt--ellipsis {
|
89
|
-
@include ellipsis;
|
90
|
-
}
|
91
|
-
|
92
|
-
.txt--normal {
|
93
|
-
font-weight: $font-normal !important;
|
94
|
-
}
|
95
|
-
|
96
|
-
.txt--bold {
|
97
|
-
font-weight: $font-bold;
|
98
|
-
}
|
99
|
-
|
100
|
-
.txt--subtle {
|
101
|
-
color: $gray-700;
|
102
|
-
}
|
103
|
-
|
104
|
-
.txt--underline {
|
105
|
-
text-decoration: underline;
|
106
|
-
}
|
107
|
-
|
108
|
-
.txt--uppercase {
|
109
|
-
text-transform: uppercase;
|
110
|
-
}
|
111
|
-
|
112
|
-
.txt--highlight {
|
113
|
-
background-color: $gray-200;
|
114
|
-
border-radius: $rounded-full;
|
115
|
-
padding: $size-0 $size-1;
|
116
|
-
}
|
117
|
-
|
118
|
-
.align--top {
|
119
|
-
vertical-align: top;
|
120
|
-
}
|
121
|
-
|
122
|
-
.align--middle {
|
123
|
-
vertical-align: middle;
|
124
|
-
}
|
125
|
-
|
126
|
-
.align--bottom {
|
127
|
-
vertical-align: bottom;
|
128
|
-
}
|
129
|
-
|
130
|
-
.align--left {
|
131
|
-
text-align: left;
|
132
|
-
}
|
133
|
-
|
134
|
-
.align--center {
|
135
|
-
text-align: center;
|
136
|
-
}
|
137
|
-
|
138
|
-
.align--right {
|
139
|
-
text-align: right;
|
140
|
-
}
|
141
|
-
|
142
|
-
.decorated {
|
143
|
-
color: $blue-500;
|
144
|
-
text-decoration: underline;
|
145
|
-
}
|
146
|
-
|
147
|
-
.decorated--subtle {
|
148
|
-
color: $gray-700;
|
149
|
-
text-decoration: underline;
|
118
|
+
.undecorated {
|
119
|
+
color: inherit;
|
120
|
+
text-decoration: none;
|
150
121
|
}
|
@@ -3,6 +3,7 @@
|
|
3
3
|
// sass-zero includes a generous palette of great-looking, well-balanced colors that are perfect for prototyping or for kicking off a brand new project.
|
4
4
|
// *******************************************************************
|
5
5
|
$transparent: transparent;
|
6
|
+
$current: currentColor;
|
6
7
|
|
7
8
|
$black: #000;
|
8
9
|
$white: #fff;
|
@@ -84,16 +85,16 @@ $blue-700: #1d4ed8;
|
|
84
85
|
$blue-800: #1e40af;
|
85
86
|
$blue-900: #1e3a8a;
|
86
87
|
|
87
|
-
$
|
88
|
-
$
|
89
|
-
$
|
90
|
-
$
|
91
|
-
$
|
92
|
-
$
|
93
|
-
$
|
94
|
-
$
|
95
|
-
$
|
96
|
-
$
|
88
|
+
$sky-50: #f0f9ff;
|
89
|
+
$sky-100: #e0f2fe;
|
90
|
+
$sky-200: #bae6fd;
|
91
|
+
$sky-300: #7dd3fc;
|
92
|
+
$sky-400: #38bdf8;
|
93
|
+
$sky-500: #0ea5e9;
|
94
|
+
$sky-600: #0284c7;
|
95
|
+
$sky-700: #0369a1;
|
96
|
+
$sky-800: #075985;
|
97
|
+
$sky-900: #0c4a6e;
|
97
98
|
|
98
99
|
$cyan-50: #ecfeff;
|
99
100
|
$cyan-100: #cffafe;
|
@@ -0,0 +1,37 @@
|
|
1
|
+
// *******************************************************************
|
2
|
+
// Height
|
3
|
+
// Variables for setting the height of an element
|
4
|
+
// height: $h-per-1-2;
|
5
|
+
// *******************************************************************
|
6
|
+
$h-per-1-2: 50%;
|
7
|
+
$h-per-1-3: 33.333333%;
|
8
|
+
$h-per-2-3: 66.666667%;
|
9
|
+
$h-per-1-4: 25%;
|
10
|
+
$h-per-2-4: 50%;
|
11
|
+
$h-per-3-4: 75%;
|
12
|
+
$h-per-1-5: 20%;
|
13
|
+
$h-per-2-5: 40%;
|
14
|
+
$h-per-3-5: 60%;
|
15
|
+
$h-per-4-5: 80%;
|
16
|
+
$h-per-1-6: 16.666667%;
|
17
|
+
$h-per-2-6: 33.333333%;
|
18
|
+
$h-per-3-6: 50%;
|
19
|
+
$h-per-4-6: 66.666667%;
|
20
|
+
$h-per-5-6: 83.333333%;
|
21
|
+
|
22
|
+
// *******************************************************************
|
23
|
+
// Min-Height
|
24
|
+
// Variables for setting the minimum height of an element
|
25
|
+
// min-height: $min-h-0;
|
26
|
+
// *******************************************************************
|
27
|
+
$min-h-0: 0px;
|
28
|
+
$min-h-full: 100%;
|
29
|
+
$min-h-screen: 100vh;
|
30
|
+
|
31
|
+
// *******************************************************************
|
32
|
+
// Max-Height
|
33
|
+
// Variables for setting the maximum height of an element
|
34
|
+
// max-height: $max-h-full;
|
35
|
+
// *******************************************************************
|
36
|
+
$max-h-full: 100%;
|
37
|
+
$max-h-screen: 100vh;
|
@@ -1,39 +1,43 @@
|
|
1
1
|
// *******************************************************************
|
2
2
|
// Default spacing scale
|
3
3
|
// By default, Tailwind includes a generous and comprehensive numeric spacing scale.
|
4
|
-
// Use as padding, margin, width, height,
|
4
|
+
// Use as padding, margin, width, height, translate, etc...
|
5
5
|
// *******************************************************************
|
6
|
-
$size-px:
|
7
|
-
$size-0:
|
8
|
-
$size-
|
9
|
-
$size-
|
10
|
-
$size-
|
11
|
-
$size-
|
12
|
-
$size-5:
|
13
|
-
$size-
|
14
|
-
$size-
|
15
|
-
$size-
|
16
|
-
$size-
|
17
|
-
$size-
|
18
|
-
$size-
|
19
|
-
$size-
|
20
|
-
$size-
|
21
|
-
$size-
|
22
|
-
$size-
|
23
|
-
$size-
|
24
|
-
$size-
|
25
|
-
$size-
|
26
|
-
$size-
|
27
|
-
$size-
|
28
|
-
$size-
|
29
|
-
$size-
|
30
|
-
$size-
|
31
|
-
$size-
|
32
|
-
$size-
|
33
|
-
$size-
|
34
|
-
$size-
|
35
|
-
$size-
|
36
|
-
$size-
|
6
|
+
$size-px: 1px;
|
7
|
+
$size-0: 0px;
|
8
|
+
$size-0-5: 0.125rem;
|
9
|
+
$size-1: 0.25rem;
|
10
|
+
$size-1-5: 0.375rem;
|
11
|
+
$size-2: 0.5rem;
|
12
|
+
$size-2-5: 0.625rem;
|
13
|
+
$size-3: 0.75rem;
|
14
|
+
$size-3-5: 0.875rem;
|
15
|
+
$size-4: 1rem;
|
16
|
+
$size-5: 1.25rem;
|
17
|
+
$size-6: 1.5rem;
|
18
|
+
$size-7: 1.75rem;
|
19
|
+
$size-8: 2rem;
|
20
|
+
$size-9: 2.25rem;
|
21
|
+
$size-10: 2.5rem;
|
22
|
+
$size-11: 2.75rem;
|
23
|
+
$size-12: 3rem;
|
24
|
+
$size-14: 3.5rem;
|
25
|
+
$size-16: 4rem;
|
26
|
+
$size-20: 5rem;
|
27
|
+
$size-24: 6rem;
|
28
|
+
$size-28: 7rem;
|
29
|
+
$size-32: 8rem;
|
30
|
+
$size-36: 9rem;
|
31
|
+
$size-40: 10rem;
|
32
|
+
$size-44: 11rem;
|
33
|
+
$size-48: 12rem;
|
34
|
+
$size-52: 13rem;
|
35
|
+
$size-56: 14rem;
|
36
|
+
$size-60: 15rem;
|
37
|
+
$size-64: 16rem;
|
38
|
+
$size-72: 18rem;
|
39
|
+
$size-80: 20rem;
|
40
|
+
$size-96: 24rem;
|
37
41
|
|
38
42
|
$size-auto: auto;
|
39
43
|
$size-full: 100%;
|
@@ -1,34 +1,34 @@
|
|
1
1
|
// *******************************************************************
|
2
2
|
// Width
|
3
3
|
// Variables for setting the width of an element
|
4
|
-
// width: $w-1-2;
|
5
|
-
// *******************************************************************
|
6
|
-
$w-1-2: 50%;
|
7
|
-
$w-1-3: 33.333333%;
|
8
|
-
$w-2-3: 66.666667%;
|
9
|
-
$w-1-4: 25%;
|
10
|
-
$w-2-4: 50%;
|
11
|
-
$w-3-4: 75%;
|
12
|
-
$w-1-5: 20%;
|
13
|
-
$w-2-5: 40%;
|
14
|
-
$w-3-5: 60%;
|
15
|
-
$w-4-5: 80%;
|
16
|
-
$w-1-6: 16.666667%;
|
17
|
-
$w-2-6: 33.333333%;
|
18
|
-
$w-3-6: 50%;
|
19
|
-
$w-4-6: 66.666667%;
|
20
|
-
$w-5-6: 83.333333%;
|
21
|
-
$w-1-12: 8.333333%;
|
22
|
-
$w-2-12: 16.666667%;
|
23
|
-
$w-3-12: 25%;
|
24
|
-
$w-4-12: 33.333333%;
|
25
|
-
$w-5-12: 41.666667%;
|
26
|
-
$w-6-12: 50%;
|
27
|
-
$w-7-12: 58.333333%;
|
28
|
-
$w-8-12: 66.666667%;
|
29
|
-
$w-9-12: 75%;
|
30
|
-
$w-10-12: 83.333333%;
|
31
|
-
$w-11-12: 91.666667%;
|
4
|
+
// width: $w-per-1-2;
|
5
|
+
// *******************************************************************
|
6
|
+
$w-per-1-2: 50%;
|
7
|
+
$w-per-1-3: 33.333333%;
|
8
|
+
$w-per-2-3: 66.666667%;
|
9
|
+
$w-per-1-4: 25%;
|
10
|
+
$w-per-2-4: 50%;
|
11
|
+
$w-per-3-4: 75%;
|
12
|
+
$w-per-1-5: 20%;
|
13
|
+
$w-per-2-5: 40%;
|
14
|
+
$w-per-3-5: 60%;
|
15
|
+
$w-per-4-5: 80%;
|
16
|
+
$w-per-1-6: 16.666667%;
|
17
|
+
$w-per-2-6: 33.333333%;
|
18
|
+
$w-per-3-6: 50%;
|
19
|
+
$w-per-4-6: 66.666667%;
|
20
|
+
$w-per-5-6: 83.333333%;
|
21
|
+
$w-per-1-12: 8.333333%;
|
22
|
+
$w-per-2-12: 16.666667%;
|
23
|
+
$w-per-3-12: 25%;
|
24
|
+
$w-per-4-12: 33.333333%;
|
25
|
+
$w-per-5-12: 41.666667%;
|
26
|
+
$w-per-6-12: 50%;
|
27
|
+
$w-per-7-12: 58.333333%;
|
28
|
+
$w-per-8-12: 66.666667%;
|
29
|
+
$w-per-9-12: 75%;
|
30
|
+
$w-per-10-12: 83.333333%;
|
31
|
+
$w-per-11-12: 91.666667%;
|
32
32
|
|
33
33
|
// *******************************************************************
|
34
34
|
// Min-Width
|
@@ -61,20 +61,3 @@ $max-w-7xl: 80rem;
|
|
61
61
|
$max-w-full: 100%;
|
62
62
|
$max-w-min: min-content;
|
63
63
|
$max-w-max: max-content;
|
64
|
-
|
65
|
-
// *******************************************************************
|
66
|
-
// Min-Height
|
67
|
-
// Variables for setting the minimum height of an element
|
68
|
-
// min-height: $min-h-0;
|
69
|
-
// *******************************************************************
|
70
|
-
$min-h-0: 0px;
|
71
|
-
$min-h-full: 100%;
|
72
|
-
$min-h-screen: 100vh;
|
73
|
-
|
74
|
-
// *******************************************************************
|
75
|
-
// Max-Height
|
76
|
-
// Variables for setting the maximum height of an element
|
77
|
-
// max-height: $max-h-full;
|
78
|
-
// *******************************************************************
|
79
|
-
$max-h-full: 100%;
|
80
|
-
$max-h-screen: 100vh;
|
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.47",
|
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",
|
data/sass-zero.gemspec
CHANGED
@@ -12,7 +12,7 @@ Gem::Specification.new do |spec|
|
|
12
12
|
spec.homepage = "http://github.com/lazaronixon/sass-zero"
|
13
13
|
spec.license = "MIT"
|
14
14
|
|
15
|
-
spec.add_runtime_dependency "autoprefixer-rails", "
|
15
|
+
spec.add_runtime_dependency "autoprefixer-rails", "~> 10.3"
|
16
16
|
|
17
17
|
spec.files = `git ls-files -z`.split("\x0")
|
18
18
|
end
|
metadata
CHANGED
@@ -1,30 +1,30 @@
|
|
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.47
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- lazaronixon
|
8
|
-
autorequire:
|
8
|
+
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2021-11-16 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: autoprefixer-rails
|
15
15
|
requirement: !ruby/object:Gem::Requirement
|
16
16
|
requirements:
|
17
|
-
- - "
|
17
|
+
- - "~>"
|
18
18
|
- !ruby/object:Gem::Version
|
19
|
-
version:
|
19
|
+
version: '10.3'
|
20
20
|
type: :runtime
|
21
21
|
prerelease: false
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
23
23
|
requirements:
|
24
|
-
- - "
|
24
|
+
- - "~>"
|
25
25
|
- !ruby/object:Gem::Version
|
26
|
-
version:
|
27
|
-
description:
|
26
|
+
version: '10.3'
|
27
|
+
description:
|
28
28
|
email:
|
29
29
|
- lazaronixon@hotmail.com
|
30
30
|
executables: []
|
@@ -42,7 +42,9 @@ files:
|
|
42
42
|
- app/assets/stylesheets/sass-zero/breadboard.scss
|
43
43
|
- app/assets/stylesheets/sass-zero/mixins.scss
|
44
44
|
- app/assets/stylesheets/sass-zero/utilities.scss
|
45
|
+
- app/assets/stylesheets/sass-zero/utilities/align.scss
|
45
46
|
- app/assets/stylesheets/sass-zero/utilities/animation.scss
|
47
|
+
- app/assets/stylesheets/sass-zero/utilities/container.scss
|
46
48
|
- app/assets/stylesheets/sass-zero/utilities/flex.scss
|
47
49
|
- app/assets/stylesheets/sass-zero/utilities/flush.scss
|
48
50
|
- app/assets/stylesheets/sass-zero/utilities/layout.scss
|
@@ -59,6 +61,7 @@ files:
|
|
59
61
|
- app/assets/stylesheets/sass-zero/variables/effects.scss
|
60
62
|
- app/assets/stylesheets/sass-zero/variables/flex.scss
|
61
63
|
- app/assets/stylesheets/sass-zero/variables/grid.scss
|
64
|
+
- app/assets/stylesheets/sass-zero/variables/height.scss
|
62
65
|
- app/assets/stylesheets/sass-zero/variables/spacing.scss
|
63
66
|
- app/assets/stylesheets/sass-zero/variables/transform.scss
|
64
67
|
- app/assets/stylesheets/sass-zero/variables/transition.scss
|
@@ -73,7 +76,7 @@ homepage: http://github.com/lazaronixon/sass-zero
|
|
73
76
|
licenses:
|
74
77
|
- MIT
|
75
78
|
metadata: {}
|
76
|
-
post_install_message:
|
79
|
+
post_install_message:
|
77
80
|
rdoc_options: []
|
78
81
|
require_paths:
|
79
82
|
- lib
|
@@ -89,7 +92,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
89
92
|
version: '0'
|
90
93
|
requirements: []
|
91
94
|
rubygems_version: 3.1.4
|
92
|
-
signing_key:
|
95
|
+
signing_key:
|
93
96
|
specification_version: 4
|
94
97
|
summary: A CSS framework for rapid UI development based on tailwindcss, miligram and
|
95
98
|
BEM.
|