beathers 5.5.0 → 5.5.4
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.
- package/CHANGELOG +13 -0
- package/css/beathers.min.css +2 -2
- package/css/beathers.min.css.map +1 -1
- package/package.json +3 -2
- package/readme.md +14 -6
- package/scripts/commands/build.js +1 -1
- package/scripts/helpers/BuildScssVariables.d.ts.map +1 -1
- package/scripts/helpers/BuildScssVariables.js +21 -18
- package/scripts/helpers/Merge.d.ts.map +1 -1
- package/scripts/helpers/Merge.js +4 -3
- package/scss/_variables.scss +20 -8
- package/scss/beathers.min.scss +2 -1
- package/scss/style/_glass.scss +21 -25
- package/scss/style/_grid.scss +12 -9
- package/scss/style/_resets.scss +71 -3
- package/scss/style/_shaping.scss +1 -1
package/readme.md
CHANGED
|
@@ -168,9 +168,9 @@ You can create one of these files in your project root:
|
|
|
168
168
|
| `defaultFontFamilies` <br /> Fallback fonts (as array) | `string[]` | ["system-ui", "sans-serif"] |
|
|
169
169
|
| `fontMainPath` <br /> Your fonts path | `string` | "/fonts/" |
|
|
170
170
|
| `fontFormat` <br /> Your fonts format | `string` | "woff2" |
|
|
171
|
-
| `fontWeights` <br /> Your fonts weights (as array) | `thin
|
|
172
|
-
| `fontStyles` <br /> Your fonts styles (as array) | `normal
|
|
173
|
-
| `fontSizes` <br /> Your fonts sizes (as json) | Record<`string`, `${number}px` `${number}rem` `${number}em`>
|
|
171
|
+
| `fontWeights` <br /> Your fonts weights (as array) | `thin` \| `extra-light` \| `light` \| `regular` \| `medium` \| `semibold` \| `bold` \| `extra-bold` \| `black` | ["regular", "medium", "bold"] |
|
|
172
|
+
| `fontStyles` <br /> Your fonts styles (as array) | `normal`\|`italic`,`oblique` | ["normal"] |
|
|
173
|
+
| `fontSizes` <br /> Your fonts sizes (as json) | Record<`string`, `${number}px` \| `${number}rem` \| `${number}em`> | subtitle1: "16px" <br /> (Azvailable: h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, button, body1, body2, caption, overline) <br /> (Note: You can add/remove) |
|
|
174
174
|
| `textTruncate` <br /> Text truncation | `number` | 3 |
|
|
175
175
|
| `fonts` <br /> Custom font definitions <br /> (Local/External) (as json) | {weights: same as `weights`, styles: same as `styles`, <br /> variants: {"fontName" :{title: `string`, unicode?: `string`, format?: `woff`, isLocal?: `boolean`, url?: `https://${string}`, `http://${string}`}}} | {variants: {"font1" :{title: "roboto"}}} |
|
|
176
176
|
| **SETTINGS** |
|
|
@@ -180,9 +180,16 @@ You can create one of these files in your project root:
|
|
|
180
180
|
| `insetValues` <br /> Inset values (as array) | `number[]` | [0, 5] |
|
|
181
181
|
| `bordersValue` <br /> Default border width (as array) | `number[]` | [1, 2] |
|
|
182
182
|
| `radiuses` <br /> Border radius values (as array) | `number[]` | [5,10,15] |
|
|
183
|
-
| `breakpoints` <br /> Responsive breakpoints (as json) | Record
|
|
184
|
-
| `wrappers` <br /> Container widths (as json) | Record
|
|
185
|
-
| `guttersValues` <br /> Spacing values (as json) | Record
|
|
183
|
+
| `breakpoints` <br /> Responsive breakpoints (as json) | Record<`sm` \| `md` \| `lg` \| `xl` \| `xxl`, `${number}px` \| `${number}rem` \| `${number}em`> | {"sm": "640px", "md": "768px"} |
|
|
184
|
+
| `wrappers` <br /> Container widths (as json) | Record<`sm` \| `md` \| `lg` \| `xl` \| `xxl`, { width: `${number}px` \| `${number}rem` \| `${number}em`; padding?: `${number}px` `${number}rem` `${number}em`}> | {"sm": {"width": "540px", "padding":"15px"}} |
|
|
185
|
+
| `guttersValues` <br /> Spacing values (as json) | Record<`auto` \| `number`, `${number}px` \| `${number}rem` \| `${number}em`> | {"auto": "1rem", 1: "0.25rem"} |
|
|
186
|
+
| **GLASS** |
|
|
187
|
+
| `blur` <br /> Backdrop filter blur intensity | `0` \| `${number}px` | 8px |
|
|
188
|
+
| `borderThickness` <br /> Glass border width | `${number}px` \| `${number}rem` \| `${number}em` | 1px |
|
|
189
|
+
| `lightAngle` <br /> Angle for border lighting | `${number}deg` | 45deg |
|
|
190
|
+
| `glassColor` <br /> Base glass background color (as json) | `{ light?: "#${string}"; dark?: "#${string}" }` | {light: #ffffff, dark: #000000} |
|
|
191
|
+
| `border1Color` <br /> Primary border color (as json) | `{ light?: "#${string}"; dark?: "#${string}" }` | {light: #e6e6e6, dark: #303030} |
|
|
192
|
+
| `border2Color` <br /> Secondary border color (as json) | `{ light?: "#${string}"; dark?: "#${string}" }` | {light: #e6e6e6, dark: #303030} |
|
|
186
193
|
| **ROLES** |
|
|
187
194
|
| `useMediaQueries` <br /> Enable responsive utilities | `boolean` | `true` |
|
|
188
195
|
| `useIcons` <br /> Include icon styles | `boolean` | `true` |
|
|
@@ -214,6 +221,7 @@ You can create one of these files in your project root:
|
|
|
214
221
|
| `useBorders` <br /> Include border utilities | `boolean` | `true` |
|
|
215
222
|
| `useTextBorders` <br /> Include text border utilities | `boolean` | `true` |
|
|
216
223
|
| `useRadius` <br /> Include border radius utilities | `boolean` | `true` |
|
|
224
|
+
| `useGlass` <br /> Include glassmorphism utilities | `boolean` | `true` |
|
|
217
225
|
|
|
218
226
|
### TypeScript Configuration Example
|
|
219
227
|
|
|
@@ -76,7 +76,7 @@ async function BuildTheme(customOutputPath) {
|
|
|
76
76
|
const theme = DeepMerge(defaults, userConfigs);
|
|
77
77
|
const variablesString = BuildScssVariables(theme, !!customOutputPath);
|
|
78
78
|
await fs.writeFile(variablesPath, variablesString, { flag: 'w' });
|
|
79
|
-
console.log(`✅ Theme variables generated
|
|
79
|
+
console.log(`✅ Theme variables generated`);
|
|
80
80
|
console.log('');
|
|
81
81
|
console.log('🔨 Compiling SCSS to CSS...');
|
|
82
82
|
const userProjectRoot = process.cwd();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BuildScssVariables.d.ts","sourceRoot":"","sources":["../../src/scripts/helpers/BuildScssVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"BuildScssVariables.d.ts","sourceRoot":"","sources":["../../src/scripts/helpers/BuildScssVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAgLnC,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,YAAY,GAAE,OAAe,GAAG,MAAM,CAWtF"}
|
|
@@ -15,18 +15,14 @@ function BuildColors(colors) {
|
|
|
15
15
|
scss += '$colors: ();\n';
|
|
16
16
|
return scss;
|
|
17
17
|
}
|
|
18
|
-
function BuildTypography(typography
|
|
18
|
+
function BuildTypography(typography) {
|
|
19
19
|
let scss = '\n\n// --- Typography ---\n';
|
|
20
20
|
scss += '$defaultFontFamilies:';
|
|
21
21
|
scss += typography?.defaultFontFamilies?.length ? typography.defaultFontFamilies.join(', ').replace(/"/g, '') : 'null';
|
|
22
22
|
scss += ';\n';
|
|
23
|
-
let fontPath = typography?.fontMainPath
|
|
24
|
-
if (fontPath
|
|
25
|
-
|
|
26
|
-
fontPath = `../../../${fontPath}`;
|
|
27
|
-
else
|
|
28
|
-
fontPath = `../../..${fontPath}`;
|
|
29
|
-
}
|
|
23
|
+
let fontPath = typography?.fontMainPath;
|
|
24
|
+
if (!fontPath?.startsWith('/'))
|
|
25
|
+
fontPath = `/${fontPath}`;
|
|
30
26
|
scss += `$fontMainPath: ${fontPath ? `"${fontPath}"` : 'null'};\n`;
|
|
31
27
|
scss += `$fontFormat: ${typography?.fontFormat ? `"${typography.fontFormat}"` : 'null'};\n`;
|
|
32
28
|
scss += '$fontWeights: (';
|
|
@@ -138,22 +134,29 @@ function BuildGlass(glass) {
|
|
|
138
134
|
if (!glass)
|
|
139
135
|
return '';
|
|
140
136
|
let scss = '\n\n// --- Glass ---\n';
|
|
141
|
-
scss += `$glassBlur: ${glass.blur};\n`;
|
|
142
|
-
scss += `$
|
|
143
|
-
scss += `$
|
|
144
|
-
scss +=
|
|
145
|
-
scss +=
|
|
146
|
-
scss +=
|
|
147
|
-
scss +=
|
|
148
|
-
scss +=
|
|
149
|
-
scss +=
|
|
137
|
+
scss += `$glassBlur: ${glass.blur ?? 'null'};\n`;
|
|
138
|
+
scss += `$glassBorderThickness: ${glass.borderThickness ?? 'null'};\n`;
|
|
139
|
+
scss += `$glassLightAngle: ${glass.lightAngle ?? 'null'};\n`;
|
|
140
|
+
scss += '$glassColor: (\n';
|
|
141
|
+
scss += ` 'light': ${glass?.glassColor?.light ?? '#ffffff'},\n`;
|
|
142
|
+
scss += ` 'dark': ${glass?.glassColor?.dark ?? '#000000'},\n`;
|
|
143
|
+
scss += ');\n';
|
|
144
|
+
scss += '$glassBorder1Color: (\n';
|
|
145
|
+
scss += ` 'light': ${glass?.border1Color?.light ?? '#e6e6e6'},\n`;
|
|
146
|
+
scss += ` 'dark': ${glass?.border1Color?.dark ?? '#303030'},\n`;
|
|
147
|
+
scss += ');\n';
|
|
148
|
+
scss += '$glassBorder2Color: (\n';
|
|
149
|
+
scss += ` 'light': ${glass?.border2Color?.light ?? '#e6e6e6'},\n`;
|
|
150
|
+
scss += ` 'dark': ${glass?.border2Color?.dark ?? '#303030'},\n`;
|
|
151
|
+
scss += ');\n';
|
|
150
152
|
return scss;
|
|
151
153
|
}
|
|
154
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
152
155
|
export function BuildScssVariables(theme, isLocalBuild = false) {
|
|
153
156
|
const { colors, roles, settings, typography, glass } = theme;
|
|
154
157
|
let scss = '// Generated by Beathers builder\n // Do not edit this file directly\n\n';
|
|
155
158
|
scss += BuildColors(colors);
|
|
156
|
-
scss += BuildTypography(typography
|
|
159
|
+
scss += BuildTypography(typography);
|
|
157
160
|
scss += BuildSettings(settings);
|
|
158
161
|
scss += BuildRoles(roles);
|
|
159
162
|
scss += BuildGlass(glass);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Merge.d.ts","sourceRoot":"","sources":["../../src/scripts/helpers/Merge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,wBAAgB,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,KAAK,
|
|
1
|
+
{"version":3,"file":"Merge.d.ts","sourceRoot":"","sources":["../../src/scripts/helpers/Merge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,wBAAgB,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,KAAK,CA4BzF"}
|
package/scripts/helpers/Merge.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export function DeepMerge(defaults, configs) {
|
|
2
2
|
if (!configs)
|
|
3
3
|
return defaults;
|
|
4
|
-
const { colors: tColors, roles: tRoles, settings: tSettings, typography: tTypography } = defaults ?? {};
|
|
5
|
-
const { colors: sColors, roles: sRoles, settings: sSettings, typography: sTypography } = configs ?? {};
|
|
4
|
+
const { colors: tColors, roles: tRoles, settings: tSettings, typography: tTypography, glass: tGlass } = defaults ?? {};
|
|
5
|
+
const { colors: sColors, roles: sRoles, settings: sSettings, typography: sTypography, glass: sGlass } = configs ?? {};
|
|
6
6
|
const colors = { ...tColors, ...sColors };
|
|
7
7
|
const roles = { ...tRoles, ...sRoles };
|
|
8
8
|
const settings = {
|
|
@@ -22,5 +22,6 @@ export function DeepMerge(defaults, configs) {
|
|
|
22
22
|
(sTypography?.fontSizes && { fontSizes: { ...tTypography?.fontSizes, ...sTypography?.fontSizes } })),
|
|
23
23
|
...(tTypography?.fonts || (sTypography?.fonts && { fonts: { ...tTypography?.fonts, ...sTypography?.fonts } })),
|
|
24
24
|
};
|
|
25
|
-
|
|
25
|
+
const glass = { ...tGlass, ...sGlass };
|
|
26
|
+
return { colors, roles, settings, typography, glass };
|
|
26
27
|
}
|
package/scss/_variables.scss
CHANGED
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
// Generated by Beathers builder
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
// Do not edit this file directly
|
|
5
3
|
|
|
6
4
|
// --- Colors ---
|
|
7
5
|
$colors: ();
|
|
8
6
|
|
|
9
|
-
|
|
10
7
|
// --- Typography ---
|
|
11
|
-
$defaultFontFamilies:null;
|
|
12
|
-
$fontMainPath:
|
|
8
|
+
$defaultFontFamilies: null;
|
|
9
|
+
$fontMainPath: '/undefined';
|
|
13
10
|
$fontFormat: null;
|
|
14
11
|
$fontWeights: ();
|
|
15
12
|
$fontStyles: ();
|
|
@@ -17,7 +14,6 @@ $fontSizes: ();
|
|
|
17
14
|
$textTruncate: ();
|
|
18
15
|
$fonts: ();
|
|
19
16
|
|
|
20
|
-
|
|
21
17
|
// --- Settings ---
|
|
22
18
|
$axisDivisions: null;
|
|
23
19
|
$opacities: ();
|
|
@@ -29,7 +25,6 @@ $breakpoints: ();
|
|
|
29
25
|
$wrappers: ();
|
|
30
26
|
$guttersValues: ();
|
|
31
27
|
|
|
32
|
-
|
|
33
28
|
// --- Roles ---
|
|
34
29
|
$useMediaQueries: false;
|
|
35
30
|
$useIcons: true;
|
|
@@ -62,3 +57,20 @@ $useBorders: true;
|
|
|
62
57
|
$useTextBorders: true;
|
|
63
58
|
$useRadius: true;
|
|
64
59
|
$useGlass: true;
|
|
60
|
+
|
|
61
|
+
// --- Glass ---
|
|
62
|
+
$glassBlur: null;
|
|
63
|
+
$glassColor: (
|
|
64
|
+
'light': #ffffff,
|
|
65
|
+
'dark': #000000,
|
|
66
|
+
);
|
|
67
|
+
$glassBorderThickness: null;
|
|
68
|
+
$glassBorder1Color: (
|
|
69
|
+
'light': #e6e6e6,
|
|
70
|
+
'dark': #303030,
|
|
71
|
+
);
|
|
72
|
+
$glassBorder2Color: (
|
|
73
|
+
'light': #e6e6e6,
|
|
74
|
+
'dark': #303030,
|
|
75
|
+
);
|
|
76
|
+
$glassLightAngle: null;
|
package/scss/beathers.min.scss
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Beathers v5.5.
|
|
2
|
+
* Beathers v5.5.4 (https://bhoenixstudio.com/beathers)
|
|
3
3
|
* Copyright 2020-2025 Bhoenix Studio
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -9,3 +9,4 @@
|
|
|
9
9
|
@use './style/typographic';
|
|
10
10
|
@use './style/grid';
|
|
11
11
|
@use './style/shaping';
|
|
12
|
+
@use './style/glass';
|
package/scss/style/_glass.scss
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
1
2
|
@use '../functions/colors' as colors;
|
|
2
3
|
@use '../settings/index' as settings;
|
|
3
4
|
@use '../settings/defaults' as defs;
|
|
@@ -10,34 +11,29 @@ $useColorsDarkMode: if(vars.$useColorsDarkMode != null, vars.$useColorsDarkMode,
|
|
|
10
11
|
$glassBlur: if(vars.$glassBlur != null, vars.$glassBlur, defs.$glassBlur);
|
|
11
12
|
$glassColor: if(vars.$glassColor != null, vars.$glassColor, defs.$glassColor);
|
|
12
13
|
$glassBorderThickness: if(vars.$glassBorderThickness != null, vars.$glassBorderThickness, defs.$glassBorderThickness);
|
|
13
|
-
$
|
|
14
|
-
$
|
|
14
|
+
$glassBorder1Color: if(vars.$glassBorder1Color != null, vars.$glassBorder1Color, defs.$glassBorder1Color);
|
|
15
|
+
$glassBorder2Color: if(vars.$glassBorder2Color != null, vars.$glassBorder2Color, defs.$glassBorder2Color);
|
|
15
16
|
$glassLightAngle: if(vars.$glassLightAngle != null, vars.$glassLightAngle, defs.$glassLightAngle);
|
|
16
17
|
|
|
17
18
|
@if $useGlass {
|
|
18
|
-
:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
--glass-border-1-color-dark: colors.hexToRgba(map-get($border1Color, 'dark'), 0.4, 'Glass.dark');
|
|
25
|
-
--glass-border-2-color-light: colors.hexToRgba(map-get($border2Color, 'light'), 0.1, 'Glass.light');
|
|
26
|
-
--glass-border-2-color-dark: colors.hexToRgba(map-get($border2Color, 'dark'), 0.1, 'Glass.dark');
|
|
27
|
-
--glass-light-angle: #{$glassLightAngle};
|
|
28
|
-
}
|
|
19
|
+
$glassColorLight: colors.hexToRgba(map.get($glassColor, 'light'), 0.15, 'Glass.light');
|
|
20
|
+
$glassColorDark: colors.hexToRgba(map.get($glassColor, 'dark'), 0.15, 'Glass.dark');
|
|
21
|
+
$glassBorder1ColorLight: colors.hexToRgba(map.get($glassBorder1Color, 'light'), 0.4, 'Glass.light');
|
|
22
|
+
$glassBorder1ColorDark: colors.hexToRgba(map.get($glassBorder1Color, 'dark'), 0.4, 'Glass.dark');
|
|
23
|
+
$glassBorder2ColorLight: colors.hexToRgba(map.get($glassBorder2Color, 'light'), 0.4, 'Glass.light');
|
|
24
|
+
$glassBorder2ColorDark: colors.hexToRgba(map.get($glassBorder2Color, 'dark'), 0.4, 'Glass.dark');
|
|
29
25
|
|
|
30
26
|
.bg\:glass {
|
|
31
27
|
position: relative;
|
|
32
28
|
isolation: isolate;
|
|
33
|
-
backdrop-filter: blur(var(--glass-blur));
|
|
29
|
+
backdrop-filter: blur(var(--glass-blur, $glassBlur));
|
|
34
30
|
|
|
35
31
|
&::before {
|
|
36
32
|
content: '';
|
|
37
33
|
position: absolute;
|
|
38
34
|
inset: 0;
|
|
39
35
|
border-radius: inherit;
|
|
40
|
-
border: var(--glass-border-thickness) solid transparent;
|
|
36
|
+
border: var(--glass-border-thickness, $glassBorderThickness) solid transparent;
|
|
41
37
|
mask:
|
|
42
38
|
linear-gradient(black, black) border-box,
|
|
43
39
|
linear-gradient(black, black) padding-box;
|
|
@@ -49,14 +45,14 @@ $glassLightAngle: if(vars.$glassLightAngle != null, vars.$glassLightAngle, defs.
|
|
|
49
45
|
.light &,
|
|
50
46
|
.light\:#{&},
|
|
51
47
|
&.light {
|
|
52
|
-
background: var(--glass-color-light);
|
|
48
|
+
background: var(--glass-color-light, $glassColorLight);
|
|
53
49
|
|
|
54
50
|
&::before {
|
|
55
51
|
background: linear-gradient(
|
|
56
|
-
var(--glass-light-angle),
|
|
57
|
-
var(--glass-border-2-color-light),
|
|
58
|
-
var(--glass-border-1-color-light),
|
|
59
|
-
var(--glass-border-2-color-light)
|
|
52
|
+
var(--glass-light-angle, $glassLightAngle),
|
|
53
|
+
var(--glass-border-2-color-light, $glassBorder2ColorLight),
|
|
54
|
+
var(--glass-border-1-color-light, $glassBorder1ColorLight),
|
|
55
|
+
var(--glass-border-2-color-light, $glassBorder2ColorLight)
|
|
60
56
|
)
|
|
61
57
|
border-box;
|
|
62
58
|
}
|
|
@@ -67,14 +63,14 @@ $glassLightAngle: if(vars.$glassLightAngle != null, vars.$glassLightAngle, defs.
|
|
|
67
63
|
.dark &,
|
|
68
64
|
.dark\:#{&},
|
|
69
65
|
&.dark {
|
|
70
|
-
background: var(--glass-color-dark);
|
|
66
|
+
background: var(--glass-color-dark, $glassColorDark);
|
|
71
67
|
|
|
72
68
|
&::before {
|
|
73
69
|
background: linear-gradient(
|
|
74
|
-
var(--glass-light-angle),
|
|
75
|
-
var(--glass-border-2-color-dark),
|
|
76
|
-
var(--glass-border-1-color-dark),
|
|
77
|
-
var(--glass-border-2-color-dark)
|
|
70
|
+
var(--glass-light-angle, $glassLightAngle),
|
|
71
|
+
var(--glass-border-2-color-dark, $glassBorder2ColorDark),
|
|
72
|
+
var(--glass-border-1-color-dark, $glassBorder1ColorDark),
|
|
73
|
+
var(--glass-border-2-color-dark, $glassBorder2ColorDark)
|
|
78
74
|
)
|
|
79
75
|
border-box;
|
|
80
76
|
}
|
package/scss/style/_grid.scss
CHANGED
|
@@ -47,15 +47,18 @@ $useFlex: if(vars.$useFlex != null, vars.$useFlex, settings.$useFlex);
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
&.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
50
|
+
&.wrapper {
|
|
51
|
+
&.row,
|
|
52
|
+
&.row-reverse {
|
|
53
|
+
@include func.flexDivision(width, 'cols', $size, $divider);
|
|
54
|
+
@include func.flexDivision(width, 'col', $size, $divider);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&.column,
|
|
58
|
+
&.column-reverse {
|
|
59
|
+
@include func.flexDivision(height, 'rows', $size, $divider);
|
|
60
|
+
@include func.flexDivision(height, 'row', $size, $divider);
|
|
61
|
+
}
|
|
59
62
|
}
|
|
60
63
|
}
|
|
61
64
|
}
|
package/scss/style/_resets.scss
CHANGED
|
@@ -24,18 +24,72 @@ body {
|
|
|
24
24
|
*,
|
|
25
25
|
::before,
|
|
26
26
|
::after {
|
|
27
|
-
font-family:
|
|
27
|
+
font-family: 'regular', $defaultFontFamilies;
|
|
28
28
|
margin: 0;
|
|
29
29
|
padding: 0;
|
|
30
30
|
box-sizing: border-box;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
input,
|
|
34
|
+
textarea,
|
|
35
|
+
select,
|
|
36
|
+
button,
|
|
37
|
+
kbd,
|
|
38
|
+
samp,
|
|
39
|
+
table,
|
|
40
|
+
table *,
|
|
41
|
+
h1,
|
|
42
|
+
h2,
|
|
43
|
+
h3,
|
|
44
|
+
h4,
|
|
45
|
+
h5,
|
|
46
|
+
h6 {
|
|
47
|
+
font-family: inherit;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
table {
|
|
51
|
+
border-collapse: collapse;
|
|
52
|
+
border-spacing: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
button {
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
background: transparent;
|
|
58
|
+
border: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
33
61
|
:focus,
|
|
34
62
|
button:focus {
|
|
35
63
|
outline: unset;
|
|
36
64
|
box-shadow: unset;
|
|
37
65
|
}
|
|
38
66
|
|
|
67
|
+
fieldset {
|
|
68
|
+
border: 0;
|
|
69
|
+
margin: 0;
|
|
70
|
+
padding: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
legend {
|
|
74
|
+
padding: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
details {
|
|
78
|
+
display: block;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
summary {
|
|
82
|
+
display: list-item;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
img,
|
|
86
|
+
video,
|
|
87
|
+
svg {
|
|
88
|
+
max-width: 100%;
|
|
89
|
+
height: auto;
|
|
90
|
+
display: block;
|
|
91
|
+
}
|
|
92
|
+
|
|
39
93
|
ul {
|
|
40
94
|
margin: unset;
|
|
41
95
|
list-style: none;
|
|
@@ -46,6 +100,20 @@ ul {
|
|
|
46
100
|
}
|
|
47
101
|
}
|
|
48
102
|
|
|
103
|
+
hr {
|
|
104
|
+
border: 0;
|
|
105
|
+
height: 1px;
|
|
106
|
+
background: currentColor;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
p,
|
|
110
|
+
figure,
|
|
111
|
+
blockquote,
|
|
112
|
+
dl,
|
|
113
|
+
dd {
|
|
114
|
+
margin: 0;
|
|
115
|
+
}
|
|
116
|
+
|
|
49
117
|
a {
|
|
50
118
|
text-decoration: unset;
|
|
51
119
|
}
|
|
@@ -54,13 +122,13 @@ a {
|
|
|
54
122
|
@if $useColorsLightMode {
|
|
55
123
|
.light::selection {
|
|
56
124
|
background-color: colors.useColorWithMap('third');
|
|
57
|
-
color: colors.useColorWithMap('
|
|
125
|
+
color: colors.useColorWithMap('black');
|
|
58
126
|
}
|
|
59
127
|
}
|
|
60
128
|
@if $useColorsDarkMode {
|
|
61
129
|
.dark::selection {
|
|
62
130
|
background-color: colors.useColorWithMap('third', 'dark');
|
|
63
|
-
color: colors.useColorWithMap('
|
|
131
|
+
color: colors.useColorWithMap('white');
|
|
64
132
|
}
|
|
65
133
|
}
|
|
66
134
|
}
|
package/scss/style/_shaping.scss
CHANGED
|
@@ -72,7 +72,7 @@ $radiuses: if(vars.$radiuses != null, vars.$radiuses, defs.$radiuses);
|
|
|
72
72
|
$checkedSpread: val.number($spread, 'Shadows.spread');
|
|
73
73
|
$checkedOpacity: val.opacity($opacity, 'Shadows.opacity');
|
|
74
74
|
|
|
75
|
-
$mainClass: if($size, '#{$size}#{$divider}
|
|
75
|
+
$mainClass: if($size, '#{$size}#{$divider}shadow\:#{$class}', 'shadow\:#{$class}');
|
|
76
76
|
|
|
77
77
|
.#{$mainClass} {
|
|
78
78
|
box-shadow: func.shadowValue($x)
|