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.
@@ -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-4;
95
+ line-height: $leading-none;
50
96
  }
51
97
 
52
98
  .txt--6xl {
53
99
  font-size: $text-6xl;
54
- line-height: $leading-4;
100
+ line-height: $leading-none;
55
101
  }
56
102
 
57
103
  .txt--7xl {
58
104
  font-size: $text-7xl;
59
- line-height: $leading-4;
105
+ line-height: $leading-none;
60
106
  }
61
107
 
62
108
  .txt--8xl {
63
109
  font-size: $text-8xl;
64
- line-height: $leading-4;
110
+ line-height: $leading-none;
65
111
  }
66
112
 
67
113
  .txt--9xl {
68
114
  font-size: $text-9xl;
69
- line-height: $leading-4;
70
- }
71
-
72
- .txt--nowrap {
73
- white-space: nowrap;
115
+ line-height: $leading-none;
74
116
  }
75
117
 
76
- .txt--break-words {
77
- word-wrap: break-word;
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
  }
@@ -1,4 +1,6 @@
1
+ @import "sass-zero/utilities/align";
1
2
  @import "sass-zero/utilities/animation";
3
+ @import "sass-zero/utilities/container";
2
4
  @import "sass-zero/utilities/flex";
3
5
  @import "sass-zero/utilities/flush";
4
6
  @import "sass-zero/utilities/layout";
@@ -19,7 +19,7 @@ $rounded-full: 9999px;
19
19
  // border-width: $border;
20
20
  // *******************************************************************
21
21
  $border-0: 0;
22
+ $border: 1px;
22
23
  $border-2: 2px;
23
24
  $border-4: 4px;
24
25
  $border-8: 8px;
25
- $border: 1px;
@@ -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
- $light-blue-50: #f0f9ff;
88
- $light-blue-100: #e0f2fe;
89
- $light-blue-200: #bae6fd;
90
- $light-blue-300: #7dd3fc;
91
- $light-blue-400: #38bdf8;
92
- $light-blue-500: #0ea5e9;
93
- $light-blue-600: #0284c7;
94
- $light-blue-700: #0369a1;
95
- $light-blue-800: #075985;
96
- $light-blue-900: #0c4a6e;
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, transform
4
+ // Use as padding, margin, width, height, translate, etc...
5
5
  // *******************************************************************
6
- $size-px: 1px;
7
- $size-0: 0px;
8
- $size-1: 0.25rem;
9
- $size-2: 0.5rem;
10
- $size-3: 0.75rem;
11
- $size-4: 1rem;
12
- $size-5: 1.25rem;
13
- $size-6: 1.5rem;
14
- $size-7: 1.75rem;
15
- $size-8: 2rem;
16
- $size-9: 2.25rem;
17
- $size-10: 2.5rem;
18
- $size-11: 2.75rem;
19
- $size-12: 3rem;
20
- $size-14: 3.5rem;
21
- $size-16: 4rem;
22
- $size-20: 5rem;
23
- $size-24: 6rem;
24
- $size-28: 7rem;
25
- $size-32: 8rem;
26
- $size-36: 9rem;
27
- $size-40: 10rem;
28
- $size-44: 11rem;
29
- $size-48: 12rem;
30
- $size-52: 13rem;
31
- $size-56: 14rem;
32
- $size-60: 15rem;
33
- $size-64: 16rem;
34
- $size-72: 18rem;
35
- $size-80: 20rem;
36
- $size-96: 24rem;
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;
@@ -9,4 +9,5 @@
9
9
  @import "variables/transform";
10
10
  @import "variables/typography";
11
11
  @import "variables/width";
12
+ @import "variables/height";
12
13
  @import "variables/zindex";
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "0.0.43"
3
+ VERSION = "0.0.47"
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.43",
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", ">= 9.7.4"
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.43
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: 2020-12-15 00:00:00.000000000 Z
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: 9.7.4
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: 9.7.4
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.