sit-onyx 1.0.0-alpha.62 → 1.0.0-alpha.63
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/package.json +2 -1
- package/src/styles/breakpoints.scss +25 -0
- package/src/styles/grid.scss +17 -15
- package/src/styles/index.scss +1 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sit-onyx",
|
|
3
3
|
"description": "A design system and Vue.js component library created by Schwarz IT",
|
|
4
|
-
"version": "1.0.0-alpha.
|
|
4
|
+
"version": "1.0.0-alpha.63",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Schwarz IT KG",
|
|
7
7
|
"license": "Apache-2.0",
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
"./style.css": "./dist/style.css",
|
|
22
22
|
"./locales/*": "./src/i18n/locales/*",
|
|
23
23
|
"./src/styles/*": "./src/styles/*",
|
|
24
|
+
"./breakpoints.scss": "./src/styles/breakpoints.scss",
|
|
24
25
|
"./types": "./src/types/index.ts"
|
|
25
26
|
},
|
|
26
27
|
"homepage": "https://onyx.schwarz",
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/*#region breakpoints*/
|
|
2
|
+
$breakpoints: (
|
|
3
|
+
"2xs": 320px,
|
|
4
|
+
xs: 576px,
|
|
5
|
+
sm: 768px,
|
|
6
|
+
md: 992px,
|
|
7
|
+
lg: 1440px,
|
|
8
|
+
xl: 1920px,
|
|
9
|
+
);
|
|
10
|
+
/*#endregion breakpoints*/
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Applies CSS only to the given onyx breakpoint.
|
|
14
|
+
* @param {string} $min-max - Whether the breakpoint should be considered as min or max width.
|
|
15
|
+
* @param {string} $name - name of the onyx breakpoint. One of: 2xs, xs, sm, md, lg or xl
|
|
16
|
+
* @param {number} $offset - optional offset to add to the min/max width. Useful if both min and max are used for the same breakpoint
|
|
17
|
+
*
|
|
18
|
+
* @example breakpoint(min, sm)
|
|
19
|
+
* @example breakpoint(max, sm)
|
|
20
|
+
*/
|
|
21
|
+
@mixin breakpoint($min-max, $name, $offset: 0) {
|
|
22
|
+
@media screen and (#{$min-max}-width: #{map-get($breakpoints, $name) + $offset}) {
|
|
23
|
+
@content;
|
|
24
|
+
}
|
|
25
|
+
}
|
package/src/styles/grid.scss
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
|
+
@use "breakpoints.scss" as *;
|
|
2
|
+
|
|
1
3
|
// prettier-ignore
|
|
2
4
|
$gridVariants: (
|
|
3
|
-
// NAME
|
|
4
|
-
"2xs"
|
|
5
|
-
"xs"
|
|
6
|
-
"sm"
|
|
7
|
-
"md"
|
|
8
|
-
"lg"
|
|
9
|
-
"xl"
|
|
5
|
+
// NAME MAX-VARIANT COLUMNS GUTTER MARGIN
|
|
6
|
+
"2xs" none 4 1rem 1rem,
|
|
7
|
+
"xs" none 8 1rem 1rem,
|
|
8
|
+
"sm" none 8 1.5rem 2rem,
|
|
9
|
+
"md" none 12 1.5rem 4rem,
|
|
10
|
+
"lg" "md" 16 2rem 4rem,
|
|
11
|
+
"xl" "lg" 16 2rem 4rem,
|
|
10
12
|
);
|
|
11
13
|
|
|
12
14
|
/**
|
|
@@ -24,7 +26,7 @@ $gridVariants: (
|
|
|
24
26
|
}
|
|
25
27
|
|
|
26
28
|
/**
|
|
27
|
-
* Grid container class to allow optional centering for grids with max width
|
|
29
|
+
* Grid container class to allow optional centering for grids with max width
|
|
28
30
|
*/
|
|
29
31
|
.onyx-grid-center {
|
|
30
32
|
margin: 0 auto;
|
|
@@ -33,7 +35,7 @@ $gridVariants: (
|
|
|
33
35
|
/**
|
|
34
36
|
* Grid container class for "xl" breakpoint variant with 20 columns
|
|
35
37
|
*/
|
|
36
|
-
@
|
|
38
|
+
@include breakpoint(min, xl, $offset: 1) {
|
|
37
39
|
.onyx-grid-xl-20 {
|
|
38
40
|
--onyx-grid-columns: 20;
|
|
39
41
|
}
|
|
@@ -70,23 +72,23 @@ $gridVariants: (
|
|
|
70
72
|
/**
|
|
71
73
|
* Grid container class for defining breakpoint specific max width
|
|
72
74
|
*/
|
|
73
|
-
@mixin generateGridMax($
|
|
75
|
+
@mixin generateGridMax($name, $maxVariant, $margin) {
|
|
74
76
|
.onyx-grid-max-#{$maxVariant} {
|
|
75
|
-
--onyx-grid-max-width: #{$
|
|
77
|
+
--onyx-grid-max-width: #{map-get($breakpoints, $name)};
|
|
76
78
|
}
|
|
77
79
|
}
|
|
78
80
|
|
|
79
|
-
@each $name, $
|
|
80
|
-
@if $
|
|
81
|
+
@each $name, $maxVariant, $columns, $gutter, $margin in $gridVariants {
|
|
82
|
+
@if $name == "2xs" {
|
|
81
83
|
@include generateGridProperties($columns, $gutter, $margin);
|
|
82
84
|
@include generateSpans(1, $columns, $name);
|
|
83
85
|
} @else {
|
|
84
|
-
@
|
|
86
|
+
@include breakpoint(min, $name, $offset: 1) {
|
|
85
87
|
@include generateGridProperties($columns, $gutter, $margin);
|
|
86
88
|
@include generateSpans(1, $columns, $name);
|
|
87
89
|
|
|
88
90
|
@if $maxVariant != none {
|
|
89
|
-
@include generateGridMax($
|
|
91
|
+
@include generateGridMax($name, $maxVariant, $margin);
|
|
90
92
|
}
|
|
91
93
|
|
|
92
94
|
@if $name == "xl" {
|