claritas-web-framework 6.3.22 → 6.4.1
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/README.md +1 -0
- package/dist/index.css +1 -1
- package/dist/index.html +1 -1
- package/index.html +18 -48
- package/package.json +15 -15
- package/sass/_functions.scss +1 -1
- package/sass/_reboot.scss +2 -0
- package/sass/_root.scss +7 -2
- package/sass/_variables.scss +7 -9
- package/sass/helpers/_grid.scss +41 -23
- package/sass/helpers/_link.scss +1 -4
- package/sass/mixins/_colors.scss +0 -1
- package/sass/mixins/_colors.temp.scss +1 -0
- package/sass/mixins/_container.scss +1 -1
- package/sass/mixins/_grid.scss +132 -46
- package/sass/modules/_button.old.scss +1 -0
- package/sass/modules/_button.scss +0 -1
- package/sass/modules/_list.scss +4 -4
- package/sass/modules/_modal.scss +1 -1
- package/sass/modules/_pill.scss +0 -2
- package/sass/modules/_tag.scss +0 -2
- package/sass/modules/_tooltip.scss +8 -32
- package/sass/modules/form/_checkbox.scss +1 -4
- package/sass/modules/form/_file.scss +1 -4
- package/sass/modules/form/_radio.scss +1 -4
- package/sass/modules/form/_toggle.scss +1 -4
- package/sass/utilities/_border.scss +4 -12
package/dist/index.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Claritas Web Framework</title><script defer="defer" src="index.js"></script><link href="./index.css" rel="stylesheet"></head><body><div class="container padding-y--5"><div class="alert alert--
|
|
1
|
+
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Claritas Web Framework</title><script defer="defer" src="index.js"></script><link href="./index.css" rel="stylesheet"></head><body><div class="container padding-y--5"><div class="alert alert--danger">Hello <a href="/">Click</a></div><hr/><div class="grid--tight"><div class="col--desktop-fit"><div class="card margin--0"><div class="card--body">Column</div></div></div><div class="col--desktop-fit"><div class="card margin--0"><div class="card--body">Column</div></div></div><div class="col--desktop-fit"><div class="card margin--0"><div class="card--body">Column</div></div></div></div></div></body></html>
|
package/index.html
CHANGED
|
@@ -9,55 +9,25 @@
|
|
|
9
9
|
|
|
10
10
|
<body>
|
|
11
11
|
<div class="container padding-y--5">
|
|
12
|
-
<div class="alert alert--
|
|
13
|
-
|
|
14
|
-
<a href="/">Click me</a>
|
|
15
|
-
</div>
|
|
16
|
-
<div class="buttons buttons--grouped">
|
|
17
|
-
<button type="button" class="button button--large">Click me!</button>
|
|
18
|
-
<button type="button" class="button button--purple button--large">Click me!</button>
|
|
19
|
-
<button type="button" class="button button--purple button--large">Click me!</button>
|
|
20
|
-
<button type="button" class="button button--purple button--large">Click me!</button>
|
|
21
|
-
<button type="button" class="button button--purple button--large">Click me!</button>
|
|
22
|
-
<button type="button" class="button button--purple button--large">Click me!</button>
|
|
23
|
-
<button type="button" class="button button--purple button--large">Click me!</button>
|
|
24
|
-
</div>
|
|
25
|
-
|
|
26
|
-
<div>
|
|
27
|
-
<span class="pill">99</span>
|
|
28
|
-
<span class="pill pill--danger">99</span>
|
|
29
|
-
</div>
|
|
30
|
-
|
|
31
|
-
<div>
|
|
32
|
-
<span class="tag">foobar</span>
|
|
33
|
-
<span class="tag tag--danger">foobar</span>
|
|
34
|
-
<span class="foo">foobar</span>
|
|
35
|
-
<span class="tag tag--light">foobar</span>
|
|
36
|
-
<span class="tag tag--warning">foobar</span>
|
|
37
|
-
<span class="tag tag--success">foobar</span>
|
|
38
|
-
<span class="tag tag--primary">foobar</span>
|
|
39
|
-
<span class="tag tag--cyan">foobar</span>
|
|
40
|
-
<span class="tag tag--info">foobar</span>
|
|
41
|
-
<span class="tag tag--purple">foobar</span>
|
|
42
|
-
</div>
|
|
43
|
-
|
|
44
|
-
<div class="switches switches--grouped flex--equal-columns">
|
|
45
|
-
<input
|
|
46
|
-
class="button--switch"
|
|
47
|
-
type="radio"
|
|
48
|
-
id="appointmenttype-1"
|
|
49
|
-
name="appointmenttype-switch"
|
|
50
|
-
value="1"
|
|
51
|
-
checked
|
|
52
|
-
/>
|
|
53
|
-
<label class="button button--primary flex-grow--1" for="appointmenttype-1">
|
|
54
|
-
<span class="display--none display--tablet-initial"> Phone </span>
|
|
55
|
-
</label>
|
|
12
|
+
<div class="alert alert--danger">Hello <a href="/">Click</a></div>
|
|
13
|
+
<hr />
|
|
56
14
|
|
|
57
|
-
|
|
58
|
-
<
|
|
59
|
-
<
|
|
60
|
-
|
|
15
|
+
<div class="grid--tight">
|
|
16
|
+
<div class="col--desktop-fit">
|
|
17
|
+
<div class="card margin--0">
|
|
18
|
+
<div class="card--body">Column</div>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="col--desktop-fit">
|
|
22
|
+
<div class="card margin--0">
|
|
23
|
+
<div class="card--body">Column</div>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="col--desktop-fit">
|
|
27
|
+
<div class="card margin--0">
|
|
28
|
+
<div class="card--body">Column</div>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
61
31
|
</div>
|
|
62
32
|
</div>
|
|
63
33
|
</body>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "claritas-web-framework",
|
|
3
|
-
"version": "6.
|
|
4
|
-
"updated": "
|
|
3
|
+
"version": "6.4.1",
|
|
4
|
+
"updated": "23/05/2023",
|
|
5
5
|
"description": "The CSS framework built for Claritas front end.",
|
|
6
6
|
"main": "index.js",
|
|
7
7
|
"scripts": {
|
|
@@ -19,28 +19,28 @@
|
|
|
19
19
|
"license": "UNLICENSED",
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@alexlafroscia/postcss-color-mod-function": "^4.0.0",
|
|
22
|
-
"css-loader": "^6.7.
|
|
23
|
-
"cssnano": "^6.0.
|
|
24
|
-
"find-unused-sass-variables": "^
|
|
22
|
+
"css-loader": "^6.7.4",
|
|
23
|
+
"cssnano": "^6.0.1",
|
|
24
|
+
"find-unused-sass-variables": "^5.0.0",
|
|
25
25
|
"html-webpack-plugin": "^5.5.1",
|
|
26
|
-
"mini-css-extract-plugin": "^2.7.
|
|
26
|
+
"mini-css-extract-plugin": "^2.7.6",
|
|
27
27
|
"postcss": "^8.4.23",
|
|
28
28
|
"postcss-advanced-variables": "^3.0.1",
|
|
29
29
|
"postcss-import": "^15.1.0",
|
|
30
30
|
"postcss-inline-svg": "^6.0.0",
|
|
31
|
-
"postcss-loader": "^7.
|
|
32
|
-
"postcss-preset-env": "^8.
|
|
31
|
+
"postcss-loader": "^7.3.0",
|
|
32
|
+
"postcss-preset-env": "^8.4.1",
|
|
33
33
|
"postcss-scss": "^4.0.6",
|
|
34
34
|
"prettier": "^2.8.8",
|
|
35
|
-
"sass": "^1.62.
|
|
36
|
-
"sass-loader": "^13.
|
|
37
|
-
"stylelint": "^15.6.
|
|
35
|
+
"sass": "^1.62.1",
|
|
36
|
+
"sass-loader": "^13.3.0",
|
|
37
|
+
"stylelint": "^15.6.2",
|
|
38
38
|
"stylelint-config-standard": "^33.0.0",
|
|
39
39
|
"stylelint-config-standard-scss": "^9.0.0",
|
|
40
|
-
"stylelint-scss": "^
|
|
41
|
-
"webpack": "^5.
|
|
42
|
-
"webpack-cli": "^5.
|
|
43
|
-
"webpack-dev-server": "^4.
|
|
40
|
+
"stylelint-scss": "^5.0.0",
|
|
41
|
+
"webpack": "^5.83.1",
|
|
42
|
+
"webpack-cli": "^5.1.1",
|
|
43
|
+
"webpack-dev-server": "^4.15.0"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"rfs": "^10.0.0"
|
package/sass/_functions.scss
CHANGED
|
@@ -186,7 +186,7 @@ $luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0.
|
|
|
186
186
|
@function color-flip($key, $value, $threshold: $color-flip-threshold, $lightness: $color-flip-l) {
|
|
187
187
|
$color-sum: math.max(color.lightness($value), 0%);
|
|
188
188
|
|
|
189
|
-
@if
|
|
189
|
+
@if $color-sum > $threshold {
|
|
190
190
|
@return hsl(var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$lightness}) / var(--#{$key}-a));
|
|
191
191
|
} @else {
|
|
192
192
|
@return hsl(var(--white-h) var(--white-s) var(--white-l) / var(--white-a));
|
package/sass/_reboot.scss
CHANGED
|
@@ -87,11 +87,13 @@ hr {
|
|
|
87
87
|
|
|
88
88
|
@if $headings-font-family {
|
|
89
89
|
--font-family: #{$headings-font-family};
|
|
90
|
+
|
|
90
91
|
font-family: var(--font-family);
|
|
91
92
|
}
|
|
92
93
|
|
|
93
94
|
@if $headings-font-style {
|
|
94
95
|
--font-style: #{$headings-font-style};
|
|
96
|
+
|
|
95
97
|
font-style: var(--font-style);
|
|
96
98
|
}
|
|
97
99
|
|
package/sass/_root.scss
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
@use "~rfs/scss" as *;
|
|
2
1
|
@use "./variables" as *;
|
|
3
2
|
@use "./mixins/colors" as *;
|
|
4
3
|
|
|
@@ -14,6 +13,10 @@
|
|
|
14
13
|
--#{$key}: #{$value};
|
|
15
14
|
}
|
|
16
15
|
|
|
16
|
+
@each $key, $value in $grays {
|
|
17
|
+
@include define-color-variables($key, $value);
|
|
18
|
+
}
|
|
19
|
+
|
|
17
20
|
@each $key, $value in $all-colors {
|
|
18
21
|
@include define-color-variables($key, $value);
|
|
19
22
|
}
|
|
@@ -27,7 +30,6 @@
|
|
|
27
30
|
|
|
28
31
|
@each $key, $value in $font-sizes {
|
|
29
32
|
--font-size-#{$key}: #{$value};
|
|
30
|
-
// @include rfs($font-size-#{$value}, --font-size-#{$size});
|
|
31
33
|
}
|
|
32
34
|
|
|
33
35
|
--spacer: #{$spacer};
|
|
@@ -40,6 +42,9 @@
|
|
|
40
42
|
--line-height-body: #{$line-height-base};
|
|
41
43
|
--body-text-align: #{$body-text-align};
|
|
42
44
|
--headings-color: #{$headings-color};
|
|
45
|
+
--box-shadow-small: #{$box-shadow-small};
|
|
46
|
+
--box-shadow-medium: #{$box-shadow-medium};
|
|
47
|
+
--box-shadow-large: #{$box-shadow-large};
|
|
43
48
|
|
|
44
49
|
@each $key, $value in $border-radii {
|
|
45
50
|
--border-radius-#{$key}: #{$value};
|
package/sass/_variables.scss
CHANGED
|
@@ -10,6 +10,8 @@ $enable-reduced-motion: true !default;
|
|
|
10
10
|
$enable-button-pointers: true !default;
|
|
11
11
|
$enable-smooth-scroll: true !default;
|
|
12
12
|
$enable-margins: true !default;
|
|
13
|
+
$enable-grid-classes: true !default;
|
|
14
|
+
$enable-cssgrid: true !default;
|
|
13
15
|
|
|
14
16
|
// Color system
|
|
15
17
|
$white: #fff !default;
|
|
@@ -88,7 +90,6 @@ $lightness-value: 55% !default;
|
|
|
88
90
|
// Customize the light and dark text colors for use in our color contrast function.
|
|
89
91
|
$color-contrast-dark: $dark !default;
|
|
90
92
|
$color-contrast-light: $light !default;
|
|
91
|
-
|
|
92
93
|
$all-colors: map.merge($colors, $theme-colors) !default;
|
|
93
94
|
$spacer: 1rem !default;
|
|
94
95
|
$spacers: (
|
|
@@ -99,7 +100,7 @@ $spacers: (
|
|
|
99
100
|
4: $spacer * 1.5,
|
|
100
101
|
5: $spacer * 3,
|
|
101
102
|
) !default;
|
|
102
|
-
|
|
103
|
+
$gutters: $spacers;
|
|
103
104
|
$link-shade-percentage: 20% !default;
|
|
104
105
|
$link-shade-value: 0.8 !default;
|
|
105
106
|
$link-decoration: none !default;
|
|
@@ -108,7 +109,8 @@ $body-background: $white !default;
|
|
|
108
109
|
$body-color: $gray-9 !default;
|
|
109
110
|
$body-text-align: null !default;
|
|
110
111
|
$breakpoints: (
|
|
111
|
-
"
|
|
112
|
+
"none": 0,
|
|
113
|
+
"smallmobile": 320px,
|
|
112
114
|
"mobile": 576px,
|
|
113
115
|
"tablet": 768px,
|
|
114
116
|
"desktop": 1024px,
|
|
@@ -123,10 +125,8 @@ $container-max-widths: (
|
|
|
123
125
|
"fullhd": 1408px,
|
|
124
126
|
) !default;
|
|
125
127
|
$grid-columns: 12 !default;
|
|
126
|
-
$grid-gutter
|
|
127
|
-
$grid-gutter-
|
|
128
|
-
$grid-margin-x: 0.5 !default;
|
|
129
|
-
$grid-margin-x-tight: 0.25 !default;
|
|
128
|
+
$grid-gutter: calc($spacer * 1.5) !default;
|
|
129
|
+
$grid-gutter-tight: calc($spacer * 0.75) !default;
|
|
130
130
|
$font-size-root: null !default;
|
|
131
131
|
$font-size-base: $spacer !default;
|
|
132
132
|
$line-height-base: 1.5 !default;
|
|
@@ -213,7 +213,6 @@ $border-radius-medium: calc($spacer * 0.275) !default;
|
|
|
213
213
|
$border-radius-large: calc($spacer * 0.5) !default;
|
|
214
214
|
$border-radius-round: calc($spacer * 99) !default;
|
|
215
215
|
$border-radius-default: $border-radius-medium !default;
|
|
216
|
-
|
|
217
216
|
$border-radii: (
|
|
218
217
|
"none": $border-radius-none,
|
|
219
218
|
"small": $border-radius-small,
|
|
@@ -222,7 +221,6 @@ $border-radii: (
|
|
|
222
221
|
"round": $border-radius-round,
|
|
223
222
|
"default": $border-radius-default,
|
|
224
223
|
) !default;
|
|
225
|
-
|
|
226
224
|
$hr-border-color: $border-color-main !default;
|
|
227
225
|
$hr-border-opacity: $border-opacity !default;
|
|
228
226
|
$hr-border-width: $border-width !default;
|
package/sass/helpers/_grid.scss
CHANGED
|
@@ -1,37 +1,55 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
|
+
@use "sass:math";
|
|
2
3
|
@use "./../variables" as *;
|
|
3
4
|
@use "./../mixins/breakpoints" as *;
|
|
4
5
|
@use "./../mixins/grid" as *;
|
|
5
6
|
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
// Row
|
|
8
|
+
// Rows contain your columns.
|
|
9
|
+
:root {
|
|
10
|
+
@each $name, $value in $breakpoints {
|
|
11
|
+
--breakpoint-#{$name}: #{$value};
|
|
12
|
+
}
|
|
8
13
|
}
|
|
9
14
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
15
|
+
@if $enable-grid-classes {
|
|
16
|
+
.grid {
|
|
17
|
+
@include make-row;
|
|
18
|
+
}
|
|
13
19
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
20
|
+
.grid--tight {
|
|
21
|
+
@include make-row($grid-gutter-tight);
|
|
22
|
+
}
|
|
17
23
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
24
|
+
.grid,
|
|
25
|
+
.grid--tight {
|
|
26
|
+
> * {
|
|
27
|
+
@include make-col-ready;
|
|
21
28
|
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
22
31
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
28
|
-
}
|
|
32
|
+
@if $enable-cssgrid {
|
|
33
|
+
.g-grid {
|
|
34
|
+
gap: var(--gap, #{$grid-gutter});
|
|
35
|
+
}
|
|
29
36
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
.offset-#{$infix}-#{$value} {
|
|
33
|
-
margin-left: calc(($value / $grid-columns) * 100%);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
37
|
+
.g-grid--tight {
|
|
38
|
+
gap: var(--gap, #{$grid-gutter-tight});
|
|
36
39
|
}
|
|
40
|
+
|
|
41
|
+
.g-grid,
|
|
42
|
+
.g-grid--tight {
|
|
43
|
+
display: grid;
|
|
44
|
+
grid-template-rows: repeat(var(--rows, 1), 1fr);
|
|
45
|
+
grid-template-columns: repeat(var(--columns, #{$grid-columns}), 1fr);
|
|
46
|
+
|
|
47
|
+
@include make-cssgrid;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Columns
|
|
52
|
+
// Common styles for small and large grid columns
|
|
53
|
+
@if $enable-grid-classes {
|
|
54
|
+
@include make-grid-columns;
|
|
37
55
|
}
|
package/sass/helpers/_link.scss
CHANGED
package/sass/mixins/_colors.scss
CHANGED
package/sass/mixins/_grid.scss
CHANGED
|
@@ -1,65 +1,151 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
@use "sass:math";
|
|
2
|
-
@use "sass:
|
|
3
|
+
@use "sass:meta";
|
|
3
4
|
@use "./../variables" as *;
|
|
5
|
+
@use "./../mixins/breakpoints" as *;
|
|
4
6
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
|
|
11
|
-
flex: var(--flex);
|
|
12
|
-
width: var(--width);
|
|
13
|
-
max-width: var(--max-width);
|
|
14
|
-
padding-right: var(--padding-x);
|
|
15
|
-
padding-left: var(--padding-x);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
@mixin make-divider() {
|
|
19
|
-
padding: 0;
|
|
20
|
-
width: 0;
|
|
21
|
-
max-width: 0;
|
|
22
|
-
margin: 0 -1px 0 0;
|
|
23
|
-
border-left: $hr-border-width $hr-border-style
|
|
24
|
-
rgb(
|
|
25
|
-
#{color.red($hr-border-color)} #{color.green($hr-border-color)} #{color.blue($hr-border-color)} / $hr-border-opacity
|
|
26
|
-
);
|
|
27
|
-
}
|
|
7
|
+
// Grid system
|
|
8
|
+
// Generate semantic grid columns with these mixins.
|
|
9
|
+
@mixin make-row($gutter: $grid-gutter) {
|
|
10
|
+
--gutter-x: #{$gutter};
|
|
11
|
+
--gutter-y: 0;
|
|
28
12
|
|
|
29
|
-
@mixin make-grid($margin-x, $margin-y) {
|
|
30
13
|
display: flex;
|
|
31
14
|
flex-wrap: wrap;
|
|
32
|
-
margin-
|
|
33
|
-
margin-
|
|
15
|
+
margin-top: calc(-1 * var(--gutter-y)); // stylelint-disable-line function-disallowed-list
|
|
16
|
+
margin-right: calc(-0.5 * var(--gutter-x)); // stylelint-disable-line function-disallowed-list
|
|
17
|
+
margin-left: calc(-0.5 * var(--gutter-x)); // stylelint-disable-line function-disallowed-list
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@mixin make-col-ready() {
|
|
21
|
+
// Add box sizing if only the grid is loaded
|
|
22
|
+
box-sizing: if(
|
|
23
|
+
meta.global-variable-exists(include-column-box-sizing) and $include-column-box-sizing,
|
|
24
|
+
border-box,
|
|
25
|
+
null
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
|
29
|
+
// always setting `width: 100%;`. This works because we set the width
|
|
30
|
+
// later on to override this initial width.
|
|
31
|
+
flex-shrink: 0;
|
|
32
|
+
width: 100%;
|
|
33
|
+
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
|
|
34
|
+
padding-right: calc(var(--gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
|
|
35
|
+
padding-left: calc(var(--gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
|
|
36
|
+
margin-top: var(--gutter-y);
|
|
37
|
+
}
|
|
34
38
|
|
|
35
|
-
|
|
36
|
-
|
|
39
|
+
@mixin make-col($size: false, $columns: $grid-columns) {
|
|
40
|
+
@if $size {
|
|
41
|
+
flex: 0 0 auto;
|
|
42
|
+
width: math.percentage(math.div($size, $columns));
|
|
43
|
+
} @else {
|
|
44
|
+
flex: 1 1 0;
|
|
45
|
+
max-width: 100%;
|
|
37
46
|
}
|
|
47
|
+
}
|
|
38
48
|
|
|
39
|
-
|
|
40
|
-
|
|
49
|
+
@mixin make-col-auto() {
|
|
50
|
+
flex: 0 0 auto;
|
|
51
|
+
width: auto;
|
|
52
|
+
}
|
|
41
53
|
|
|
42
|
-
|
|
54
|
+
@mixin make-col-fit() {
|
|
55
|
+
flex: 1 0 0%;
|
|
56
|
+
}
|
|
43
57
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
}
|
|
58
|
+
@mixin make-col-offset($size, $columns: $grid-columns) {
|
|
59
|
+
$num: math.div($size, $columns);
|
|
48
60
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
61
|
+
margin-left: if($num == 0, 0, math.percentage($num));
|
|
62
|
+
}
|
|
52
63
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
64
|
+
// Row columns
|
|
65
|
+
// Specify on a parent element(e.g., .grid) to force immediate children into NN
|
|
66
|
+
// number of columns. Supports wrapping to new lines, but does not do a Masonry
|
|
67
|
+
// style grid.
|
|
68
|
+
@mixin row-cols($count) {
|
|
69
|
+
> * {
|
|
70
|
+
flex: 0 0 auto;
|
|
71
|
+
width: math.div(100%, $count);
|
|
56
72
|
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// Framework grid generation
|
|
76
|
+
// Used only by Bootstrap to generate the correct number of grid classes given
|
|
77
|
+
// any value of `$grid-columns`.
|
|
78
|
+
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter, $breakpoints: $breakpoints) {
|
|
79
|
+
@each $breakpoint in map.keys($breakpoints) {
|
|
80
|
+
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
81
|
+
|
|
82
|
+
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
83
|
+
.col-#{$infix},
|
|
84
|
+
.col {
|
|
85
|
+
@include make-col-fit;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.col-#{$infix}-auto {
|
|
89
|
+
@include make-col-auto;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.col-#{$infix}-fit {
|
|
93
|
+
@include make-col-fit;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
@if $columns > 0 {
|
|
97
|
+
@for $i from 1 through $columns {
|
|
98
|
+
.col-#{$infix}-#{$i} {
|
|
99
|
+
@include make-col($i, $columns);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@for $i from 0 through ($columns - 1) {
|
|
104
|
+
@if not($infix == "" and $i == 0) {
|
|
105
|
+
.offset-#{$infix}-#{$i} {
|
|
106
|
+
@include make-col-offset($i, $columns);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
57
111
|
|
|
58
|
-
|
|
59
|
-
|
|
112
|
+
// Gutters
|
|
113
|
+
// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
|
|
114
|
+
@each $key, $value in $gutters {
|
|
115
|
+
.g#{$infix}-#{$key},
|
|
116
|
+
.gx#{$infix}-#{$key} {
|
|
117
|
+
--gutter-x: #{$value};
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.g#{$infix}-#{$key},
|
|
121
|
+
.gy#{$infix}-#{$key} {
|
|
122
|
+
--gutter-y: #{$value};
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
60
126
|
}
|
|
61
127
|
}
|
|
62
128
|
|
|
63
|
-
@mixin make-
|
|
64
|
-
|
|
129
|
+
@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $breakpoints) {
|
|
130
|
+
@each $breakpoint in map.keys($breakpoints) {
|
|
131
|
+
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
132
|
+
|
|
133
|
+
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
134
|
+
@if $columns > 0 {
|
|
135
|
+
@for $i from 1 through $columns {
|
|
136
|
+
.g-col-#{$infix}-#{$i} {
|
|
137
|
+
grid-column: auto / span $i;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
// Start with `1` because `0` is an invalid value.
|
|
142
|
+
// Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
|
|
143
|
+
@for $i from 1 through ($columns - 1) {
|
|
144
|
+
.g-start-#{$infix}-#{$i} {
|
|
145
|
+
grid-column-start: $i;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
65
151
|
}
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
--button-box-shadow: #{$button-box-shadow};
|
|
24
24
|
--button-disabled-opacity: #{$button-disabled-opacity};
|
|
25
25
|
--button-focus-box-shadow: 0 0 #{$input-button-focus-blur} #{$input-button-focus-width} var(--button-border-color);
|
|
26
|
+
|
|
26
27
|
// --button-text-decoration: none;
|
|
27
28
|
// --button-hover-text-decoration: none;
|
|
28
29
|
|
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
--button-border-width: 1px;
|
|
19
19
|
--button-border-style: solid;
|
|
20
20
|
--button-border-radius: var(--border-radius-medium);
|
|
21
|
-
|
|
22
21
|
--button-font-family: #{$button-font-family};
|
|
23
22
|
--button-font-weight: #{$button-font-weight};
|
|
24
23
|
--button-line-height: #{$button-line-height};
|
package/sass/modules/_list.scss
CHANGED
|
@@ -19,12 +19,12 @@ dl {
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
&.grid {
|
|
22
|
-
margin-left: calc($grid-gutter
|
|
23
|
-
margin-right: calc($grid-gutter
|
|
22
|
+
margin-left: calc($grid-gutter * -0.25) !important;
|
|
23
|
+
margin-right: calc($grid-gutter * -0.25) !important;
|
|
24
24
|
|
|
25
25
|
& > * {
|
|
26
|
-
padding-left: calc($grid-gutter
|
|
27
|
-
padding-right: calc($grid-gutter
|
|
26
|
+
padding-left: calc($grid-gutter * 0.25) !important;
|
|
27
|
+
padding-right: calc($grid-gutter * 0.25) !important;
|
|
28
28
|
margin-bottom: calc($spacer * 0.5);
|
|
29
29
|
|
|
30
30
|
&:last-of-type {
|
package/sass/modules/_modal.scss
CHANGED
package/sass/modules/_pill.scss
CHANGED
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
--pill-border-width: 1px;
|
|
17
17
|
--pill-border-style: solid;
|
|
18
18
|
--pill-border-radius: var(--border-radius-round);
|
|
19
|
-
|
|
20
19
|
--pill-font-family: #{$pill-font-family};
|
|
21
20
|
--pill-font-weight: #{$pill-font-weight};
|
|
22
21
|
--pill-line-height: #{$pill-line-height};
|
|
@@ -37,7 +36,6 @@
|
|
|
37
36
|
text-decoration: var(--pill-text-decoration);
|
|
38
37
|
white-space: var(--pill-white-space);
|
|
39
38
|
box-shadow: 0 0 0 0.125em var(--pill-box-shadow-color);
|
|
40
|
-
|
|
41
39
|
display: inline-flex;
|
|
42
40
|
align-items: center;
|
|
43
41
|
vertical-align: top;
|
package/sass/modules/_tag.scss
CHANGED
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
--tag-border-width: 1px;
|
|
19
19
|
--tag-border-style: solid;
|
|
20
20
|
--tag-border-radius: var(--border-radius-medium);
|
|
21
|
-
|
|
22
21
|
--tag-font-family: #{$tag-font-family};
|
|
23
22
|
--tag-font-weight: #{$tag-font-weight};
|
|
24
23
|
--tag-line-height: #{$tag-line-height};
|
|
@@ -39,7 +38,6 @@
|
|
|
39
38
|
text-decoration: var(--tag-text-decoration);
|
|
40
39
|
white-space: var(--tag-white-space);
|
|
41
40
|
box-shadow: 0 0 0 0.125em var(--tag-box-shadow-color);
|
|
42
|
-
|
|
43
41
|
display: inline-flex;
|
|
44
42
|
align-items: center;
|
|
45
43
|
vertical-align: top;
|