Skip to content

Commit 4e83030

Browse files
vladimirlukyanovvladimirlukyanov
committed
v1.1.896
– base update – tooltip update – dark/light generator update
1 parent 2245944 commit 4e83030

File tree

6 files changed

+57
-109
lines changed

6 files changed

+57
-109
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "@nulllogic/scssleon",
33
"description": "Most advanced, simple and clean SCSS framework",
4-
"version": "1.0.6",
5-
"version_short": "1.0.6",
4+
"version": "1.0.7",
5+
"version_short": "1.0.7",
66
"keywords": [
77
"css",
88
"sass",

‎scss/_base.scss

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ html {
2121
color-scheme: string.unquote($color_scheme);
2222
}
2323

24-
// data-theme attribute is changing the color scheme
24+
// [data-theme] attribute is changing the color scheme
2525
html[data-theme="dark"] {
2626
color-scheme: dark
2727
}
@@ -32,21 +32,8 @@ html[data-theme="light"] {
3232

3333
@each $tag, $properties in functions.get-theme($theme, 'html') {
3434
@each $scheme in string.split(functions.get-config($config, 'color-scheme'), ' ') {
35-
36-
@if $scheme == 'light' {
37-
#{$tag} {
38-
@include mixins.generate-properties(#{$tag}, $properties, $config, (
39-
scheme: $scheme,
40-
));
41-
}
42-
}
43-
44-
@if $scheme == 'dark' {
45-
[data-theme="#{$scheme}"] #{$tag} {
46-
@include mixins.generate-properties(#{$tag}, $properties, $config, (
47-
scheme: $scheme,
48-
));
49-
}
35+
#{$tag} {
36+
@include mixins.generate-properties(#{$tag}, $properties, $config);
5037
}
5138
}
5239
}

‎scss/_content.scss

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,32 +17,15 @@ $color_scheme: functions.get-config($config, 'color-scheme');
1717
@if ($is-content-enabled) {
1818
@each $scheme in string.split(functions.get-config($config, 'color-scheme'), ' ') {
1919

20-
@if $scheme == 'light' {
21-
.content {
22-
@each $tag, $properties in functions.get-theme($theme, 'content') {
20+
.content {
21+
@each $tag, $properties in functions.get-theme($theme, 'content') {
2322

24-
// Only apply styling to elements, that stand right after `.content` class
25-
& > #{$tag} {
26-
@include mixins.generate-properties(#{$tag}, $properties, $config, (
27-
scheme: $scheme,
28-
));
29-
}
23+
// Only apply styling to elements, that stand right after `.content` class
24+
& > #{$tag} {
25+
@include mixins.generate-properties(#{$tag}, $properties, $config);
3026
}
3127
}
3228
}
3329

34-
@if $scheme == 'dark' {
35-
.content:where([data-theme="#{$scheme}"], [data-theme="#{$scheme}"] *) {
36-
@each $tag, $properties in functions.get-theme($theme, 'content') {
37-
38-
// Only apply styling to elements, that stand right after `.content` class
39-
& > #{$tag} {
40-
@include mixins.generate-properties(#{$tag}, $properties, $config, (
41-
scheme: $scheme,
42-
));
43-
}
44-
}
45-
}
46-
}
4730
}
4831
}

‎scss/mixins/generators/_components.scss

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,8 @@
2222
$theme-component: $component;
2323
}
2424

25-
@each $scheme in string.split(functions.get-config($config, 'color-scheme'), ' ') {
26-
27-
@if $scheme == 'light' {
28-
.#{$class} {
29-
@include properties.generate-properties($class, $theme-component, $config, map.deep-merge((
30-
scheme: $scheme,
31-
), $options));
32-
}
33-
}
34-
35-
@if $scheme == 'dark' {
36-
.#{$class}:where([data-theme="#{$scheme}"], [data-theme="#{$scheme}"] *) {
37-
@include properties.generate-properties($class, $theme-component, $config, map.deep-merge((
38-
scheme: $scheme,
39-
), $options));
40-
}
41-
}
25+
.#{$class} {
26+
@include properties.generate-properties($class, $theme-component, $config, $options);
4227
}
4328

4429
}

‎scss/mixins/generators/_properties.scss

Lines changed: 41 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
$variable_options_custom_name: functions.get-config($options, 'variable.name');
5656
$variable_options_exclude: functions.get-config($options, 'variable.exclude');
5757

58-
$variable_name : $tag;
58+
$variable_name: $tag;
5959

6060
@if ($variable_options_custom_name != nil) {
6161
$variable_name: $variable_options_custom_name;
@@ -84,15 +84,22 @@
8484
}
8585
}
8686

87-
@mixin generate-colors($tag, $value, $config, $options, $requested_color : 'light') {
87+
@mixin generate-colors($tag, $value, $config, $options) {
8888
$prefix: functions.get-config($config, 'prefix');
8989

9090
@each $color, $color-properties in $value {
91-
@if ($color == $requested_color) {
91+
@if ($color == 'light') {
9292
@each $color-property, $color-value in $color-properties {
9393
@include generate-css-properties($tag, $color-property, $color-value, $config, $options);
9494
}
9595
}
96+
@if ($color == 'dark') {
97+
&:where([data-theme="#{$color}"], [data-theme="#{$color}"] *) {
98+
@each $color-property, $color-value in $color-properties {
99+
@include generate-css-properties($tag, $color-property, $color-value, $config, $options);
100+
}
101+
}
102+
}
96103
}
97104
}
98105

@@ -160,55 +167,43 @@
160167
$prefix: functions.get-config($config, 'prefix');
161168
$is_scheme_dark: functions.get-config($options, 'scheme') != nil and functions.get-config($options, 'scheme') == 'dark';
162169

163-
@if (not $is_scheme_dark) {
164-
@each $property, $value in $properties {
165-
// Variables
166-
// Looking for "--" symbols in the beginning of the property
167-
// Example: --flex-direction : row
168-
@if (
169-
meta.type-of($property) == 'string' and string.index($property, "--") == 1
170-
) {
171-
@include generate-css-properties($tag, $property, $value, $config, $options);
172-
}
173-
174-
// Colors
175-
@else if ($property == '_colors') {
176-
@include generate-colors($tag, $value, $config, $options, 'light');
177-
}
170+
@each $property, $value in $properties {
171+
// Variables
172+
// Looking for "--" symbols in the beginning of the property
173+
// Example: --flex-direction : row
174+
@if (
175+
meta.type-of($property) == 'string' and string.index($property, "--") == 1
176+
) {
177+
@include generate-css-properties($tag, $property, $value, $config, $options);
178+
}
178179

179-
// Responsive
180-
@else if ($property == '_responsive') {
181-
@include generate-responsive($tag, $value, $config);
182-
}
180+
// Colors
181+
@else if ($property == '_colors') {
182+
@include generate-colors($tag, $value, $config, $options);
183+
}
183184

184-
// Sub classes
185-
@else if ($property == "_subclasses") {
186-
@each $class, $class_properties in $value {
187-
@include generate-subclasses($tag, $class, $class_properties, $config, $options);
188-
}
189-
}
185+
// Responsive
186+
@else if ($property == '_responsive') {
187+
@include generate-responsive($tag, $value, $config);
188+
}
190189

191-
// At-rules
192-
@else if ($property == '_atrule') {
193-
@include generate-atrule($tag, $value, $config, $options);
190+
// Sub classes
191+
@else if ($property == '_subclasses') {
192+
@each $class, $class_properties in $value {
193+
@include generate-subclasses($tag, $class, $class_properties, $config, $options);
194194
}
195+
}
195196

196-
// Animations
197-
@else if ($property == '_animations') {
198-
@include generate-animation($tag, $value, $config, $options);
199-
} @else {
200-
@include generate-css-variables($tag, $property, $value, $config, $options);
201-
}
197+
// At-rules
198+
@else if ($property == '_atrule') {
199+
@include generate-atrule($tag, $value, $config, $options);
202200
}
203-
} @else {
204-
@each $property, $value in $properties {
205-
@if ($property == '_colors') {
206-
@include generate-colors($tag, $value, $config, $options, 'dark');
207-
} @else if ($property == '_subclasses') {
208-
@each $class, $class_properties in $value {
209-
@include generate-subclasses($tag, $class, $class_properties, $config, $options);
210-
}
211-
}
201+
202+
// Animations
203+
@else if ($property == '_animations') {
204+
@include generate-animation($tag, $value, $config, $options);
205+
} @else {
206+
@include generate-css-variables($tag, $property, $value, $config, $options);
212207
}
213208
}
214209
}

‎scss/themes/_default.scss

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1806,7 +1806,7 @@ $components-config: (
18061806
)
18071807
),
18081808

1809-
'& .tooltip' : (
1809+
'.tooltip' : (
18101810

18111811
--padding: 0.25rem 0.5rem,
18121812

@@ -1829,6 +1829,9 @@ $components-config: (
18291829

18301830
color: inherit,
18311831

1832+
transition: string.unquote('transform 0.15s ease-in, opacity 0.15s ease-in, display 0.15s ease-in allow-discrete'),
1833+
translate: -50% 0,
1834+
18321835
_colors : (
18331836
light : (
18341837
background: #fff,
@@ -1840,9 +1843,6 @@ $components-config: (
18401843
)
18411844
),
18421845

1843-
transition: string.unquote('transform 0.15s ease-in, opacity 0.15s ease-in, display 0.15s ease-in allow-discrete'),
1844-
translate: -50% 0,
1845-
18461846
_atrule : (
18471847
'@starting-style' : (
18481848
opacity: 0,
@@ -1957,8 +1957,6 @@ $components-config: (
19571957
),
19581958
)
19591959
),
1960-
1961-
19621960
)
19631961
)
19641962
)

0 commit comments

Comments
 (0)