@qrsln/lootstrap 22.2.7-beta.0 → 22.2.10-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/css/lootstrap.css +3511 -3237
  2. package/dist/css/lootstrap.css.map +1 -1
  3. package/dist/css/lootstrap.min.css +3 -3
  4. package/dist/css/test.css +70 -47
  5. package/dist/css/test.css.map +1 -1
  6. package/package.json +1 -1
  7. package/scss/Abstracts/Functions/_color.scss +11 -10
  8. package/scss/Abstracts/Functions/_shadow.scss +2 -2
  9. package/scss/Abstracts/Mixins/_color.scss +1 -18
  10. package/scss/Abstracts/_variables.scss +57 -23
  11. package/scss/Architecture/Components/_alert.scss +30 -32
  12. package/scss/Architecture/Components/_button-close.scss +11 -2
  13. package/scss/Architecture/Utils/_color.scss +64 -89
  14. package/scss/Architecture/Utils/_filters.scss +1 -0
  15. package/scss/Architecture/Utils/_spacing.scss +7 -21
  16. package/scss/Architecture/Utils/_text.scss +42 -109
  17. package/scss/Architecture/Utils/_utilities.scss +55 -15
  18. package/scss/Architecture/__dir-components.scss +3 -3
  19. package/scss/Architecture/_reboot.scss +6 -6
  20. package/scss/Architecture/_root.scss +4 -6
  21. package/scss/_header.scss +2 -2
package/scss/Architecture/Components/_alert.scss CHANGED
@@ -6,38 +6,6 @@
6
6
  $component-Name: $var-Prefix + 'alert-';
7
7
  @import "../_theme-customized";
8
8
 
9
- /* BRANDS */
10
- .Alert {
11
- &.Brand-facebook {
12
- background: linear-gradient(to bottom right, #3B5998, #6d84b4)
13
- }
14
-
15
- &.Brand-github {
16
- background: linear-gradient(to bottom right, #333, #373737)
17
- }
18
-
19
- &.Brand-instagram {
20
- background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)
21
- }
22
-
23
- &.Brand-linkedin {
24
- background: linear-gradient(to bottom right, #0077B5, #00a0dc)
25
- }
26
-
27
- &.Brand-twitter {
28
- background: linear-gradient(to bottom right, #1DA1F2, #0084b4)
29
- }
30
-
31
- &.Brand-wikipedia {
32
- background: linear-gradient(to bottom right, #636466, #000)
33
- }
34
-
35
- &.Brand-youtube {
36
- background: linear-gradient(to bottom right, #f00, #e62117)
37
- }
38
- }
39
-
40
-
41
9
  .Alert {
42
10
  display: flex;
43
11
  position: relative;
@@ -153,3 +121,33 @@ $component-Name: $var-Prefix + 'alert-';
153
121
  }
154
122
  }
155
123
 
124
+ /* BRANDS */
125
+ .Alert {
126
+ &.Brand-facebook {
127
+ background: linear-gradient(to bottom right, #3B5998, #6d84b4)
128
+ }
129
+
130
+ &.Brand-github {
131
+ background: linear-gradient(to bottom right, #333, #373737)
132
+ }
133
+
134
+ &.Brand-instagram {
135
+ background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)
136
+ }
137
+
138
+ &.Brand-linkedin {
139
+ background: linear-gradient(to bottom right, #0077B5, #00a0dc)
140
+ }
141
+
142
+ &.Brand-twitter {
143
+ background: linear-gradient(to bottom right, #1DA1F2, #0084b4)
144
+ }
145
+
146
+ &.Brand-wikipedia {
147
+ background: linear-gradient(to bottom right, #636466, #000)
148
+ }
149
+
150
+ &.Brand-youtube {
151
+ background: linear-gradient(to bottom right, #f00, #e62117)
152
+ }
153
+ }
package/scss/Architecture/Components/_button-close.scss CHANGED
@@ -25,10 +25,14 @@ $svg-cross-2-64: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53
25
25
  color: transparent;
26
26
  cursor: pointer;
27
27
 
28
- &:hover {
28
+ &:not(:disabled):not(.Disabled):hover {
29
29
  opacity: 1;
30
30
  text-decoration: none;
31
31
  }
32
+
33
+ &:disabled, &.Disabled {
34
+ cursor: default;
35
+ }
32
36
  }
33
37
 
34
38
  .Btn-close-2nd {
@@ -54,10 +58,15 @@ $svg-cross-2-64: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53
54
58
  cursor: pointer;
55
59
  vertical-align: middle;
56
60
 
57
- &:focus, &:hover {
61
+ &:not(:disabled):not(.Disabled):hover,
62
+ &:not(:disabled):not(.Disabled):focus {
58
63
  opacity: 1;
59
64
  }
60
65
 
66
+ &:disabled, &.Disabled {
67
+ cursor: default;
68
+ }
69
+
61
70
  &:before, &:after {
62
71
  content: " ";
63
72
  position: absolute;
package/scss/Architecture/Utils/_color.scss CHANGED
@@ -2,102 +2,77 @@
2
2
  // Utils - Bg & Fg & Border Colors
3
3
  // ===========================================================================
4
4
 
5
- @include Bg-Text-Border-variables($colors-all);
5
+ $var-Prefix: $var-Prefix;
6
+ $colors-Background-hsla: $colors-Background-hsla;
7
+ $colors-Text-hsla: $colors-Text-hsla;
8
+ $colors-Border-hsla: $colors-Border-hsla;
9
+ $color-Alpha-map: $color-Alpha-map;
10
+ $color-Lightness-map: $color-Lightness-map;
6
11
 
7
- $utilities-bg: () !default;
8
- $utilities-bg: (
9
- // Text
10
- "Text-lightness": (
11
- Prefix: Text-lightness, Properties: --#{$var-Prefix}text-lightness, Important: false,
12
- Values: $color-Lightness-map
13
- ),
14
- "Text-color": (
15
- Prefix: Text, Properties: color, Important: true,
16
- Values: $colors-Text-hsla
17
- ),
18
- "Text-alpha": (
19
- Prefix: Text-alpha, Properties: --#{$var-Prefix}text-alpha, Important: false,
20
- Values: $color-Alpha-map
21
- ),
22
- // Border-color, Border-alpha
23
- "Border-color": (
24
- Prefix: Border, Properties: border-color, Important: true,
25
- Values: map-merge($colors-Border-hsla, ("transparent": transparent)),
26
- ),
27
- "Border-alpha": (
28
- Prefix: Border-alpha, Properties: --#{$var-Prefix}border-alpha, Important: false,
29
- Values: $color-Alpha-map,
30
- ),
31
- // Bg
32
- "Bg-lightness": (
33
- Prefix: Bg-lightness, Properties: --#{$var-Prefix}bg-lightness, Important: false,
34
- Values: $color-Lightness-map
35
- ),
36
- "Bg-color": (
37
- Prefix: Bg, Properties: background-color, Important: true,
38
- Values: map-merge($colors-Background-hsla, ("transparent": transparent)),
39
- ),
12
+ // Not: Must be before real class set
13
+ @each $colorKey, $colorValue in $colors-all {
14
+ .Bg-#{$colorKey} {
15
+ --#{$var-Prefix}bg-lightness: #{lightness($colorValue)};
16
+ --#{$var-Prefix}bg-alpha: 1;
17
+ }
18
+ .Text-#{$colorKey} {
19
+ --#{$var-Prefix}text-lightness: #{lightness($colorValue)};
20
+ --#{$var-Prefix}text-alpha: 1;
21
+ }
22
+ .Border-#{$colorKey} {
23
+ --#{$var-Prefix}border-alpha: 1;
24
+ }
25
+ }
26
+
27
+ $utilities-Colors: () !default;
28
+ $utilities-Colors: (
29
+ // New Approach
30
+ "Bg": (Prefix: Bg, Properties: background-color, Important: true, Values:$colors-Background-hsla,),
31
+ "Fg": (Prefix: Fg, Properties: color, Important: true, Values: $colors-Text-hsla),
32
+ "Bc": (Prefix: Bc, Properties: border-color, Important: true, Values: $colors-Border-hsla),
33
+ // Pseudo Colors
34
+ "Bg-pseudo": (Prefix: Bg-pseudo, Properties: --#{$var-Prefix}bg-color, Important: true, Values:$colors-Background-hsla,),
35
+ "Bc-pseudo": (Prefix: Bc-pseudo, Properties: --#{$var-Prefix}bc-color, Important: true, Values:$colors-Border-hsla,),
36
+ // Border
37
+ "Bc-t": (Prefix: Bc-t, Properties: border-top-color, Important: true, Values: $colors-Border-hsla),
38
+ "Bc-r": (Prefix: Bc-r, Properties: border-right-color, Important: true, Values: $colors-Border-hsla),
39
+ "Bc-b": (Prefix: Bc-b, Properties: border-bottom-color, Important: true, Values: $colors-Border-hsla),
40
+ "Bc-l": (Prefix: Bc-l, Properties: border-left-color, Important: true, Values: $colors-Border-hsla),
41
+ // Alpha
40
42
  "Bg-alpha": (Prefix: Bg-alpha, Properties: --#{$var-Prefix}bg-alpha, Important: false, Values: $color-Alpha-map),
41
- // Opacity
42
- "Opacity": (Prefix: Opacity, Properties: opacity, Important: true, Values: $opacity-map),
43
- // Pseudo colors
44
- "Before-bg-before": (
45
- Prefix: Before-bg, Properties: background-color, Important: true, Pseudo:before,
46
- Values: $colors-Background-hsla
47
- ),
48
- "Before-border-before": (
49
- Prefix: Before-border, Properties: border-color, Important: true, Pseudo:before,
50
- Values: $colors-Border-hsla
51
- ),
52
- "Before-bg-after": (
53
- Prefix: After-bg, Properties: background-color, Important: true, Pseudo:after,
54
- Values: $colors-Background-hsla
55
- ),
56
- "Before-border-after": (
57
- Prefix: After-border, Properties: border-color, Important: true, Pseudo:after,
58
- Values: $colors-Border-hsla
59
- ),
43
+ "Fg-alpha": (Prefix: Fg-alpha, Properties: --#{$var-Prefix}text-alpha, Important: false, Values: $color-Alpha-map),
44
+ "Bc-alpha": (Prefix: Bc-alpha, Properties: --#{$var-Prefix}border-alpha, Important: false, Values: $color-Alpha-map,),
45
+ // lightness
46
+ "Bg-lightness": (Prefix: Bg-lightness, Properties: --#{$var-Prefix}bg-lightness, Important: false, Values: $color-Lightness-map),
47
+ "Fg-lightness": (Prefix: Fg-lightness, Properties: --#{$var-Prefix}text-lightness, Important: false, Values: $color-Lightness-map),
60
48
  );
61
49
 
62
- @include Utilities($utilities-bg);
63
-
64
- // ===========================================================================
65
- // Text Color
66
- // ===========================================================================
50
+ @include Utilities($utilities-Colors);
67
51
 
68
52
  /*
69
- // .Text-<color>, .Text-<theme>, .Text-muted {}
70
- // .Text-alpha-0, .Text-alpha-100 { }
71
- // .Text-lightness-0, .Text-lightness-100 {}
53
+ // Pseudo colors
72
54
  */
55
+ // Background
56
+ .Bg-before {
57
+ &:before {
58
+ background-color: var(--#{$var-Prefix}bg-color) !important;
59
+ }
60
+ }
73
61
 
74
- // ===========================================================================
62
+ .Bg-after {
63
+ &:after {
64
+ background-color: var(--#{$var-Prefix}bg-color) !important;
65
+ }
66
+ }
75
67
  // Border
76
- // ===========================================================================
77
-
78
- /*
79
- // .Border-<color>, .Border-<theme>, .Border-transparent {}
80
- // .Border-alpha-0, .Border-alpha-100 {}
81
- */
82
-
83
- // ===========================================================================
84
- // Bg
85
- // ===========================================================================
86
-
87
- /*
88
- // .Bg-<color>, .Bg-<theme> {}
89
- // .Bg-alpha-0, .Bg-alpha-100 {}
90
- // .Bg-lightness-0, .Bg-lightness-100 {}
91
- // .Opacity-0, .Opacity-100 {}
92
- */
68
+ .Bc-before {
69
+ &:before {
70
+ border-color: var(--#{$var-Prefix}bc-color) !important;
71
+ }
72
+ }
93
73
 
94
- // ===========================================================================
95
- // Pseudo colors
96
- // ===========================================================================
97
-
98
- /*
99
- // .Before-bg-<color>:before, .Before-bg-<theme>:before {}
100
- // .Before-border-<color>:before, .Before-border-<theme>:before {}
101
- // .After-bg-<color>:after, .After-bg-<theme>:after {}
102
- // .After-border-<color>:after, .After-border-<theme>:after {}
103
- */
74
+ .Bc-after {
75
+ &:after {
76
+ border-color: var(--#{$var-Prefix}bc-color) !important;
77
+ }
78
+ }
package/scss/Architecture/Utils/_filters.scss CHANGED
@@ -80,6 +80,7 @@ $filter-Colors: (
80
80
  "light" : $filter-Light,
81
81
  "dark" : $filter-Dark,
82
82
  //NONE
83
+ "black" : $filter-Dark,
83
84
  "none" : $filter-Dark,
84
85
  );
85
86
 
package/scss/Architecture/Utils/_spacing.scss CHANGED
@@ -1,10 +1,8 @@
1
1
  // ===========================================================================
2
2
  // Utils - Spacing
3
+ // Margin, Padding
3
4
  // ===========================================================================
4
5
 
5
- /*
6
- // Margin, Padding
7
- */
8
6
  // Values: Prefix: *, Properties: *, Important: *, Responsive: *, Values: *, Values: *, Pseudo:*
9
7
  $utilities-Spacing: () !default;
10
8
  $utilities-Spacing: (
@@ -20,27 +18,17 @@ $utilities-Spacing: (
20
18
  ),
21
19
  // Margin directions
22
20
  "M-top": (Prefix: MT, Properties: margin-top, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
23
- "M-right": (Prefix: MR, Properties: margin-right, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
24
21
  "M-end": (Prefix: ME, Properties: margin-right, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
25
22
  "M-bottom": (Prefix: MB, Properties: margin-bottom, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
26
- "M-left": (Prefix: ML, Properties: margin-left, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
27
23
  "M-start": (Prefix: MS, Properties: margin-left, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
28
24
  // Negative Margin
29
- "Neg M": (
30
- Prefix: M, Properties: margin, Important: true, Responsive: true, Values: $negative-spacers
31
- ),
32
- "Neg MX": (
33
- Prefix: MX, Properties: margin-right margin-left, Important: true, Responsive: true, Values: $negative-spacers
34
- ),
35
- "Neg MY": (
36
- Prefix: MY, Properties: margin-top margin-bottom, Important: true, Responsive: true, Values: $negative-spacers
37
- ),
25
+ "Neg M": (Prefix: M, Properties: margin, Important: true, Responsive: true, Values: $negative-spacers),
26
+ "Neg MX": (Prefix: MX, Properties: margin-right margin-left, Important: true, Responsive: true, Values: $negative-spacers),
27
+ "Neg MY": (Prefix: MY, Properties: margin-top margin-bottom, Important: true, Responsive: true, Values: $negative-spacers),
38
28
  // Negative Margin directions
39
29
  "Neg M-top": (Prefix: MT, Properties: margin-top, Important: true, Responsive: true, Values: $negative-spacers),
40
- "Neg M-right": (Prefix: MR, Properties: margin-right, Important: true, Responsive: true, Values: $negative-spacers),
41
30
  "Neg M-end": (Prefix: ME, Properties: margin-right, Important: true, Responsive: true, Values: $negative-spacers),
42
31
  "Neg M-bottom": (Prefix: MB, Properties: margin-bottom, Important: true, Responsive: true, Values: $negative-spacers),
43
- "Neg M-left": (Prefix: ML, Properties: margin-left, Important: true, Responsive: true, Values: $negative-spacers),
44
32
  "Neg M-start": (Prefix: MS, Properties: margin-left, Important: true, Responsive: true, Values: $negative-spacers),
45
33
  // Padding
46
34
  "P": (Prefix: P, Properties: padding, Important: true, Responsive: true, Values: $spacers-map),
@@ -48,10 +36,8 @@ $utilities-Spacing: (
48
36
  "PY": (Prefix: PY, Properties: padding-top padding-bottom, Important: true, Responsive: true, Values: $spacers-map),
49
37
  // Padding directions
50
38
  "P-top": (Prefix: PT, Properties: padding-top, Important: true, Responsive: true, Values: $spacers-map),
51
- "P-right": (Prefix: PR, Properties: padding-right, Important: true, Responsive: true, Values: $spacers-map),
52
39
  "P-end": (Prefix: PE, Properties: padding-right, Important: true, Responsive: true, Values: $spacers-map),
53
40
  "P-bottom": (Prefix: PB, Properties: padding-bottom, Important: true, Responsive: true, Values: $spacers-map),
54
- "P-left": (Prefix: PL, Properties: padding-left, Important: true, Responsive: true, Values: $spacers-map),
55
41
  "P-start": (Prefix: PS, Properties: padding-left, Important: true, Responsive: true, Values: $spacers-map),
56
42
  );
57
43
 
@@ -64,10 +50,10 @@ $utilities-Spacing: (
64
50
  /*
65
51
  Margin .M-<0-5>, .M-auto {}
66
52
  Margin X, Y .M<X,Y>-<0-5>, .M<X,Y>-auto {}
67
- Margin directions .M<T,R,E,B,L,S>-<0-5>, .M<T,R,E,B,L,S>-auto {}
53
+ Margin directions .M<T,E,B,S>-<0-5>, .M<T,E,B,S>-auto {}
68
54
  Negative Margin .M-N<0-5>
69
55
  Negative Margin X, Y .M<X,Y>-N<0-5>
70
- Negative M directions .M<T,R,E,B,L,S>-N<0-5> {}
56
+ Negative M directions .M<T,E,B,S>-N<0-5> {}
71
57
  */
72
58
 
73
59
  // ===========================================================================
@@ -77,5 +63,5 @@ Negative M directions .M<T,R,E,B,L,S>-N<0-5> {}
77
63
  /*
78
64
  Padding .P-<0-5> {}
79
65
  Padding X, Y .P<X,Y>-<0-5> {}
80
- Padding directions .P<T,R,E,B,L,S>-<0-5> {}
66
+ Padding directions .P<T,E,B,S>-<0-5> {}
81
67
  */
package/scss/Architecture/Utils/_text.scss CHANGED
@@ -2,129 +2,62 @@
2
2
  // Utils - Text
3
3
  // ===========================================================================
4
4
 
5
- //TODO...
6
-
7
5
  // Values: Prefix: *, Properties: *, Important: *, Responsive: *, Values: *, Values: *, Pseudo:*
8
6
  $utilities-Text: () !default;
9
7
  $utilities-Text: (
10
- // font-family
11
- // "font-family": (
12
- // Prefix: Font, Properties: font-family, Important: true,
13
- // Values: (monospace: var(--#{$variable-prefix}font-monospace))
14
- // ),
15
- // "font-size": (
16
- // Prefix: FS, Properties: font-size, Important: true,
17
- // Values: $font-sizes
18
- // ),
19
- "font-style": (
20
- Prefix: FST, Properties: font-style, Important: true,
21
- Values: italic normal
22
- ),
23
- "font-weight": (
24
- Prefix: FW, Properties: font-weight, Important: true,
25
- Values: (
26
- light: $font-weight-light,
27
- lighter: $font-weight-lighter,
28
- normal: $font-weight-normal,
29
- bold: $font-weight-bold,
30
- bolder: $font-weight-bolder
31
- )
32
- ),
33
- //"line-height": (
34
- // Prefix: LH, Properties: line-height, Important: true,
35
- // Values: (
36
- // 1: 1,
37
- // sm: $line-height-sm,
38
- // base: $line-height-base,
39
- // lg: $line-height-lg,
40
- // )
41
- //),
42
8
  "Text-align": (
43
- Prefix: Txt, Properties: text-align, Important: true, Responsive: true,
44
- Values: (left: left, right: right, start: left, end: right, center: center)
9
+ Prefix: Text, Properties: text-align, Important: true, Responsive: true,
10
+ Values: (start: left, center: center, end: right)
11
+ ),
12
+ "Text-transform": (
13
+ Prefix: Text, Properties: text-transform, Important: true,
14
+ Values: lowercase uppercase capitalize
45
15
  ),
46
16
  "Text-decoration": (
47
- Prefix: Txt-decoration, Properties: text-decoration, Important: true,
17
+ Prefix: Text-decoration, Properties: text-decoration, Important: true,
18
+ Values: (none, underline, line-through, overline,)
19
+ ),
20
+ // Font
21
+ "Font-style": (
22
+ Prefix: FST, Properties: font-style, Important: true,
23
+ Values: italic normal
24
+ ),
25
+ "Font-weight": (
26
+ Prefix: FW, Properties: font-weight, Important: true,
48
27
  Values: (
49
- none:none,
50
- underline:underline,
51
- overline:overline,
52
- strikethrough:line-through,
53
- multiple:underline overline line-through,
54
- blink:blink,
55
- wavy:underline overline wavy,
28
+ light: $font-weight-light,
29
+ lighter: $font-weight-lighter,
30
+ normal: $font-weight-normal,
31
+ bold: $font-weight-bold,
32
+ bolder: $font-weight-bolder
56
33
  )
57
34
  ),
58
- "Text-transform": (
59
- Prefix: Txt, Properties: text-transform, Important: true,
60
- Values: lowercase uppercase capitalize
61
- ),
62
- "white-space": (
63
- Prefix: WS, Properties: white-space, Important: true,
64
- Values: normal nowrap
35
+ "Font-size": (Prefix: FS, Properties: font-size, Important: true, Values: $font-sizes),
36
+ "Font-family": (Prefix: Font, Properties: font-family, Important: true, Values: (monospace: var(--#{$var-Prefix}font-monospace))),
37
+ // Line
38
+ "Line-height": (
39
+ Prefix: LH, Properties: line-height, Important: true,
40
+ Values: (1: 1, sm: $line-height-sm, base: $line-height-base, lg: $line-height-lg,)
65
41
  ),
66
42
  );
67
43
 
68
44
  @include Utilities($utilities-Text);
69
45
 
70
46
 
71
- /*
72
- // Text-align + Responsive variants
73
- */
74
-
75
- .Txt-left, .Txt-right, .Txt-center {
76
- }
77
-
78
- /*
79
- // Text-transform
80
- */
81
-
82
- .Txt-lowercase, .Txt-uppercase, .Txt-capitalize {
83
- }
84
-
85
-
86
- // TODO: Txt-d
87
-
88
- //.Txt-d {
89
- // //text-decoration: #{var(--Txt-dl)} #{var(--Txt-ds)} #{var(--Txt-dc)};
90
- // text-decoration-line: #{var(--Txt-dl)};
91
- // text-decoration-style: #{var(--Txt-ds)};
92
- // text-decoration-color: #{var(--Txt-dc)};
93
- //}
94
-
95
- //@include Utility-applier(true, Txt-d, text-decoration, (none:none));
96
-
97
- .Txt-d, .Txt-d-none {
98
- }
99
-
100
- /*
101
- // text-decoration-line -dl-: none underline overline line-through blink
102
- */
103
-
104
- //@include Utility-applier(false, Txt-dl, --Txt-dl, (under:underline));
105
- //@include Utility-applier(false, Txt-dl, --Txt-dl, (over:overline));
106
- //@include Utility-applier(false, Txt-dl, --Txt-dl, (through:line-through));
107
- //@include Utility-applier(false, Txt-dl, --Txt-dl, (blink:blink));
108
- //@include Utility-applier(false, Txt-dl, --Txt-dl, (under-over:underline overline));
109
- //@include Utility-applier(false, Txt-dl, --Txt-dl, (under-over-through:overline underline line-through));
110
-
111
- .Txt-dl-under, .Txt-dl-over, .Txt-dl-through, .Txt-dl-blink, .Txt-dl-under-over, .Txt-dl-under-over-through {
112
- }
113
-
114
- /*
115
- // text-decoration-style -ds-: solid double dotted dashed wavy
116
- */
117
-
118
- //@include Utility-applier(false, Txt-ds, --Txt-ds, (solid:solid, double:double, dotted:dotted, dashed:dashed, wavy:wavy));
119
-
120
- .Txt-ds-solid, .Txt-ds-double, .Txt-ds-dotted, .Txt-ds-dashed, .Txt-ds-wavy {
121
- }
122
-
123
- /*
124
- // text-decoration-color -dc-: theme-colors
125
- */
126
47
 
127
- //@include Utility-applier(false, Txt-dc, --Txt-dc, $colors-theme);
128
48
 
129
- .Txt-dc-primary, .Txt-dc-secondary, .Txt-dc-success, .Txt-dc-info, .Txt-dc-warning, .Txt-dc-danger, .Txt-dc-light, .Txt-dc-dark {
130
- }
49
+ // REST ==> TODOs
50
+ // "white-space": (
51
+ // property: white-space,
52
+ // class: text,
53
+ // values: (
54
+ // wrap: normal,
55
+ // nowrap: nowrap,
56
+ // )
57
+ // ),
58
+ // "word-wrap": (
59
+ // property: word-wrap word-break,
60
+ // class: text,
61
+ // values: (break: break-word),
62
+ // rtl: false
63
+ // ),
package/scss/Architecture/Utils/_utilities.scss CHANGED
@@ -6,6 +6,14 @@
6
6
  $utilities: () !default;
7
7
  $utilities: (
8
8
  /*
9
+ // Opacity
10
+ */
11
+ "Opacity": (Prefix: Opacity, Properties: opacity, Important: true,
12
+ Values: (
13
+ 0: 0, 5: 0.05, 10: 0.1, 15: 0.15, 20: 0.2, 25: 0.25, 30: 0.3, 35: 0.35, 40: 0.4, 45: 0.45, 50: 0.5,
14
+ 55: 0.55, 60: 0.6, 65: 0.65, 70: 0.7, 75: 0.75, 80: 0.8, 85: 0.85, 90: 0.9, 95: 0.95, 100: 1,
15
+ ),),
16
+ /*
9
17
  // Cursor
10
18
  */
11
19
  "Cursor": (
@@ -48,12 +56,57 @@ $utilities: (
48
56
  Values: inline inline-block block grid table table-row table-cell flex inline-flex none
49
57
  ),
50
58
  /*
59
+ // Flex, Flex-direction, Flex-grow, Flex-shrink,Flex-wrap
60
+ */
61
+ "Flex": (Prefix: Flex, Properties: flex, Important: true, Responsive: true, Values: (fill: 1 1 auto)),
62
+ "Flex-direction": (
63
+ Prefix: Flex, Properties: flex-direction, Important: true, Responsive: true,
64
+ Values: row column row-reverse column-reverse
65
+ ),
66
+ "Flex-grow": (
67
+ Prefix: Flex, Properties: flex-grow, Important: true, Responsive: true, Values: (grow-0: 0, grow-1: 1,)
68
+ ),
69
+ "Flex-shrink": (
70
+ Prefix: Flex, Properties: flex-shrink, Important: true, Responsive: true, Values: (shrink-0: 0, shrink-1: 1,)
71
+ ),
72
+ "Flex-wrap": (
73
+ Prefix: Flex, Properties: flex-wrap, Important: true, Responsive: true, Values: wrap nowrap wrap-reverse
74
+ ),
75
+ /*
76
+ // Justify content, Align-items, Align-content, Align-self
77
+ */
78
+ "Justify-content": (
79
+ Prefix: Justify-content, Properties: justify-content, Important: true, Responsive: true,
80
+ Values: (
81
+ start: flex-start, end: flex-end, center: center,
82
+ between: space-between, around: space-around, evenly: space-evenly,
83
+ )
84
+ ),
85
+ "Align-items": (
86
+ Prefix: Align-items, Properties: align-items, Important: true, Responsive: true,
87
+ Values: (start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch,)
88
+ ),
89
+ "Align-content": (
90
+ Prefix: Align-content, Properties: align-content, Important: true, Responsive: true,
91
+ Values: (start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, stretch: stretch,)
92
+ ),
93
+ "Align-self": (
94
+ Prefix: Align-self, Properties: align-self, Important: true, Responsive: true,
95
+ Values: (auto: auto, start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch,)
96
+ ),
97
+ /*
98
+ // Order
99
+ */
100
+ "Order": (
101
+ Prefix: Order, Properties: order, Important: true, Responsive: true,
102
+ Values: (first: -1, 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, last: 6)
103
+ ),
104
+ /*
51
105
  // Shadow
52
106
  */
53
107
  "Box Shadow": (
54
108
  Prefix: Shadow, Properties: box-shadow, Important: true, Values: $Shadow-map
55
109
  ),
56
-
57
110
  /*
58
111
  // Sizing Width, Height
59
112
  */
@@ -64,19 +117,6 @@ $utilities: (
64
117
  "Max-Height": (Prefix: MH, Properties: max-height, Important: true, Values: (100: 100%)),
65
118
  "viewport-Height": (Prefix: VH, Properties: height, Important: true, Values: (100: 100vw)),
66
119
  /*
67
- // Flex
68
- */
69
- /*
70
- // justify-content align-items align-content align-self
71
- */
72
- /*
73
- // order
74
- */
75
- "Order": (
76
- Prefix: Order, Properties: order, Important: true, Responsive: true,
77
- Values: (first: -1, 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, last: 6)
78
- ),
79
- /*
80
120
  // Visibility
81
121
  */
82
122
  "Visibility": (
@@ -105,7 +145,7 @@ $utilities: (
105
145
  /*
106
146
  // Box Shadow --component-shadow-color: 0, 0, 0;
107
147
  // .Shadow-<null,2x,3x>
108
- // .Shadow-<inner,both,br,t,r,l,b,x,y>-<null,2x,3x>
148
+ // .Shadow-<inner,both,br,t,e,b,s,x,y>-<null,2x,3x>
109
149
  */
110
150
 
111
151
  /*
package/scss/Architecture/__dir-components.scss CHANGED
@@ -41,9 +41,9 @@
41
41
  */
42
42
 
43
43
  .Alert, .Breadcrumb, .Btn, .Calendar, .Card, .Dialog, .List, .Pagination, .Progress, .Rating, .Timeline, .Timer, .Toast {
44
- font-family: var(--ls-font);
45
- font-size: var(--ls-font-size);
46
- font-weight: var(--ls-font-weight);
44
+ font-family: var(--#{$var-Prefix}font-sans-serif);
45
+ font-size: $font-size-base;
46
+ font-weight: normal;
47
47
  }
48
48
 
49
49
 
package/scss/Architecture/_reboot.scss CHANGED
@@ -99,12 +99,12 @@ $headings-color: null !default;
99
99
  $font-size-sm: $font-size-base * .875 !default;
100
100
  $font-size-lg: $font-size-base * 1.25 !default;
101
101
 
102
- $h1-font-size: $font-size-base * 2.5 !default;
103
- $h2-font-size: $font-size-base * 2 !default;
104
- $h3-font-size: $font-size-base * 1.75 !default;
105
- $h4-font-size: $font-size-base * 1.5 !default;
106
- $h5-font-size: $font-size-base * 1.25 !default;
107
- $h6-font-size: $font-size-base !default;
102
+ //$h1-font-size: $font-size-base * 2.5 !default;
103
+ //$h2-font-size: $font-size-base * 2 !default;
104
+ //$h3-font-size: $font-size-base * 1.75 !default;
105
+ //$h4-font-size: $font-size-base * 1.5 !default;
106
+ //$h5-font-size: $font-size-base * 1.25 !default;
107
+ //$h6-font-size: $font-size-base !default;
108
108
 
109
109
  h1 {
110
110
  @extend %heading;