bulma-rails 1.0.1 → 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +30 -3
- data/app/assets/stylesheets/bulma.scss +1 -1
- data/app/assets/stylesheets/sass/components/navbar.scss +41 -30
- data/app/assets/stylesheets/sass/components/panel.scss +2 -2
- data/app/assets/stylesheets/sass/elements/button.scss +6 -0
- data/app/assets/stylesheets/sass/elements/content.scss +8 -2
- data/app/assets/stylesheets/sass/elements/image.scss +4 -2
- data/app/assets/stylesheets/sass/elements/title.scss +4 -2
- data/app/assets/stylesheets/sass/form/checkbox-radio.scss +7 -3
- data/app/assets/stylesheets/sass/form/input-textarea.scss +3 -11
- data/app/assets/stylesheets/sass/form/shared.scss +11 -5
- data/app/assets/stylesheets/sass/form/tools.scss +23 -12
- data/app/assets/stylesheets/sass/grid/columns.scss +109 -25
- data/app/assets/stylesheets/sass/grid/grid.scss +1 -1
- data/app/assets/stylesheets/sass/helpers/aspect-ratio.scss +5 -3
- data/app/assets/stylesheets/sass/helpers/border.scss +1 -1
- data/app/assets/stylesheets/sass/helpers/color.scss +200 -220
- data/app/assets/stylesheets/sass/helpers/flexbox.scss +7 -7
- data/app/assets/stylesheets/sass/helpers/float.scss +7 -7
- data/app/assets/stylesheets/sass/helpers/gap.scss +3 -3
- data/app/assets/stylesheets/sass/helpers/other.scss +4 -4
- data/app/assets/stylesheets/sass/helpers/overflow.scss +4 -4
- data/app/assets/stylesheets/sass/helpers/position.scss +4 -4
- data/app/assets/stylesheets/sass/helpers/spacing.scss +6 -6
- data/app/assets/stylesheets/sass/helpers/typography.scss +29 -27
- data/app/assets/stylesheets/sass/helpers/visibility.scss +61 -61
- data/app/assets/stylesheets/sass/layout/container.scss +16 -8
- data/app/assets/stylesheets/sass/layout/hero.scss +6 -3
- data/app/assets/stylesheets/sass/layout/section.scss +4 -0
- data/app/assets/stylesheets/sass/themes/dark.scss +2 -1
- data/app/assets/stylesheets/sass/themes/light.scss +6 -5
- data/app/assets/stylesheets/sass/utilities/css-variables.scss +101 -24
- data/app/assets/stylesheets/sass/utilities/functions.scss +100 -48
- data/app/assets/stylesheets/sass/utilities/initial-variables.scss +4 -4
- data/app/assets/stylesheets/sass/utilities/mixins.scss +5 -3
- data/bulma-rails.gemspec +1 -1
- metadata +2 -3
- data/app/assets/stylesheets/sass/grid/columns-v2.scss +0 -957
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7a6542800c9a7e7f290a001bcac7d0ffb0530edd2e6a05c1c1ae2de62856f8db
|
4
|
+
data.tar.gz: a6bd388a7d6d777d26666a565e217e049a36e624f4aa5896363ce686f92cfbd1
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 36be5b9e8b3b428849590e1ee7f7fe3747a041f00f6830b1abf6d197121e470d7208a8bb6f5e1b56f768419c0bd8f70f8f01e5aa1f2b8131750d42ad9d44934f
|
7
|
+
data.tar.gz: 8f24ac595609e494c9fd2a6ba9c41c56ebccae4e3d6b3777ba0efdcfafa5ecd27eee21c713b79503e36110ff57ad45a81e250b0c2b4969d4aab734410ef3bbc1
|
data/README.md
CHANGED
@@ -51,14 +51,41 @@ For using mixins add the following line to your `application.scss`:
|
|
51
51
|
|
52
52
|
@use "sass/utilities/mixins";
|
53
53
|
|
54
|
-
For more information about Mixins see [Bulma Sass Mixins](https://bulma.io/documentation/
|
54
|
+
For more information about Mixins see [Bulma Sass Mixins](https://bulma.io/documentation/sass/mixins/)
|
55
|
+
|
56
|
+
## Customization
|
57
|
+
|
58
|
+
To overwrite Bulma’s Sass variables with your own value, write `@use` and the `with` keyword for example to your `application.scss`:
|
59
|
+
```
|
60
|
+
// Set your brand colors
|
61
|
+
$purple: #8a4d76;
|
62
|
+
$pink: #fa7c91;
|
63
|
+
$brown: #757763;
|
64
|
+
$beige-light: #d0d1cd;
|
65
|
+
$beige-lighter: #eff0eb;
|
66
|
+
|
67
|
+
// Override global Sass variables from the /utilities folder
|
68
|
+
@use "sass/utilities" with (
|
69
|
+
$family-primary: '"Nunito", sans-serif',
|
70
|
+
$grey-dark: $brown,
|
71
|
+
$grey-light: $beige-light,
|
72
|
+
$primary: $purple,
|
73
|
+
$link: $pink,
|
74
|
+
$control-border-width: 2px
|
75
|
+
);
|
76
|
+
|
77
|
+
// Load all styles
|
78
|
+
@use "bulma";
|
79
|
+
```
|
80
|
+
|
81
|
+
This allows you to override Bulma’s global variables from the `utilities` folder.
|
82
|
+
|
83
|
+
For more information about Customization see [Customize with Modular Sass](https://bulma.io/documentation/customize/with-modular-sass/)
|
55
84
|
|
56
85
|
## Helpful references
|
57
86
|
|
58
87
|
Migrating to Bulma v1 and discover what changes, see [Migrating to Bulma v1](https://bulma.io/documentation/start/migrating-to-v1/)
|
59
88
|
|
60
|
-
For information about customizing Bulma, see: [Bulma Customization Concepts](https://bulma.io/documentation/customize/concepts/)
|
61
|
-
|
62
89
|
## Contributing
|
63
90
|
|
64
91
|
1. Fork it
|
@@ -4,9 +4,9 @@
|
|
4
4
|
@use "../utilities/extends";
|
5
5
|
@use "../utilities/mixins" as mx;
|
6
6
|
|
7
|
-
$navbar-h: cv.getVar("scheme-h");
|
8
|
-
$navbar-s: cv.getVar("scheme-s");
|
9
|
-
$navbar-l: cv.getVar("scheme-main-l");
|
7
|
+
$navbar-h: cv.getVar("scheme-h") !default;
|
8
|
+
$navbar-s: cv.getVar("scheme-s") !default;
|
9
|
+
$navbar-l: cv.getVar("scheme-main-l") !default;
|
10
10
|
$navbar-background-color: cv.getVar("scheme-main") !default;
|
11
11
|
$navbar-box-shadow-size: 0 0.125em 0 0 !default;
|
12
12
|
$navbar-box-shadow-color: cv.getVar("background") !default;
|
@@ -16,26 +16,35 @@ $navbar-padding-horizontal: 2rem !default;
|
|
16
16
|
$navbar-z: 30 !default;
|
17
17
|
$navbar-fixed-z: 30 !default;
|
18
18
|
|
19
|
-
$navbar-item-background-a: 0;
|
20
|
-
$navbar-item-background-l: cv.getVar("scheme-main-l");
|
21
|
-
$navbar-item-background-l-delta: 0
|
22
|
-
$navbar-item-hover-background-l-delta: cv.getVar(
|
23
|
-
|
24
|
-
|
25
|
-
$navbar-item-
|
26
|
-
|
27
|
-
|
28
|
-
$navbar-item-
|
29
|
-
$navbar-item-
|
19
|
+
$navbar-item-background-a: 0 !default;
|
20
|
+
$navbar-item-background-l: cv.getVar("scheme-main-l") !default;
|
21
|
+
$navbar-item-background-l-delta: 0% !default;
|
22
|
+
$navbar-item-hover-background-l-delta: cv.getVar(
|
23
|
+
"hover-background-l-delta"
|
24
|
+
) !default;
|
25
|
+
$navbar-item-active-background-l-delta: cv.getVar(
|
26
|
+
"active-background-l-delta"
|
27
|
+
) !default;
|
28
|
+
$navbar-item-color-l: cv.getVar("text-l") !default;
|
29
|
+
$navbar-item-color: hsl(
|
30
|
+
#{cv.getVar("navbar-h")},
|
31
|
+
#{cv.getVar("navbar-s")},
|
32
|
+
#{cv.getVar("navbar-item-color-l")}
|
33
|
+
) !default;
|
34
|
+
$navbar-item-selected-h: cv.getVar("link-h") !default;
|
35
|
+
$navbar-item-selected-s: cv.getVar("link-s") !default;
|
36
|
+
$navbar-item-selected-l: cv.getVar("link-l") !default;
|
37
|
+
$navbar-item-selected-background-l: cv.getVar("link-l") !default;
|
38
|
+
$navbar-item-selected-color-l: cv.getVar("link-invert-l") !default;
|
30
39
|
$navbar-item-img-max-height: 1.75rem !default;
|
31
40
|
|
32
|
-
$navbar-dropdown-item-h: cv.getVar("scheme-h");
|
33
|
-
$navbar-dropdown-item-s: cv.getVar("scheme-s");
|
34
|
-
$navbar-dropdown-item-l: cv.getVar("scheme-main-l");
|
35
|
-
$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l");
|
36
|
-
$navbar-dropdown-item-color-l: cv.getVar("text-l");
|
41
|
+
$navbar-dropdown-item-h: cv.getVar("scheme-h") !default;
|
42
|
+
$navbar-dropdown-item-s: cv.getVar("scheme-s") !default;
|
43
|
+
$navbar-dropdown-item-l: cv.getVar("scheme-main-l") !default;
|
44
|
+
$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l") !default;
|
45
|
+
$navbar-dropdown-item-color-l: cv.getVar("text-l") !default;
|
37
46
|
|
38
|
-
$navbar-burger-color: cv.getVar("
|
47
|
+
$navbar-burger-color: cv.getVar("link") !default;
|
39
48
|
|
40
49
|
$navbar-tab-hover-background-color: transparent !default;
|
41
50
|
$navbar-tab-hover-border-bottom-color: cv.getVar("link") !default;
|
@@ -119,6 +128,7 @@ $navbar-colors: dv.$colors !default;
|
|
119
128
|
"navbar-item-hover-background-l-delta": #{$navbar-item-hover-background-l-delta},
|
120
129
|
"navbar-item-active-background-l-delta": #{$navbar-item-active-background-l-delta},
|
121
130
|
"navbar-item-color-l": #{$navbar-item-color-l},
|
131
|
+
"navbar-item-color": #{$navbar-item-color},
|
122
132
|
"navbar-item-selected-h": #{$navbar-item-selected-h},
|
123
133
|
"navbar-item-selected-s": #{$navbar-item-selected-s},
|
124
134
|
"navbar-item-selected-l": #{$navbar-item-selected-l},
|
@@ -254,9 +264,13 @@ body {
|
|
254
264
|
.#{iv.$class-prefix}navbar-burger {
|
255
265
|
@extend %reset;
|
256
266
|
@include mx.burger(2.5rem);
|
257
|
-
|
258
|
-
|
259
|
-
|
267
|
+
|
268
|
+
& {
|
269
|
+
align-self: center;
|
270
|
+
color: cv.getVar("navbar-burger-color");
|
271
|
+
margin-inline-start: auto;
|
272
|
+
margin-inline-end: 0.375rem;
|
273
|
+
}
|
260
274
|
}
|
261
275
|
|
262
276
|
.#{iv.$class-prefix}navbar-menu {
|
@@ -265,12 +279,9 @@ body {
|
|
265
279
|
|
266
280
|
.#{iv.$class-prefix}navbar-item,
|
267
281
|
.#{iv.$class-prefix}navbar-link {
|
268
|
-
color:
|
269
|
-
#{cv.getVar("navbar-h")},
|
270
|
-
#{cv.getVar("navbar-s")},
|
271
|
-
#{cv.getVar("navbar-item-color-l")}
|
272
|
-
);
|
282
|
+
color: cv.getVar("navbar-item-color");
|
273
283
|
display: block;
|
284
|
+
gap: 0.75rem;
|
274
285
|
line-height: 1.5;
|
275
286
|
padding: 0.5rem 0.75rem;
|
276
287
|
position: relative;
|
@@ -650,8 +661,8 @@ a.#{iv.$class-prefix}navbar-item,
|
|
650
661
|
|
651
662
|
.#{iv.$class-prefix}navbar-dropdown {
|
652
663
|
background-color: cv.getVar("navbar-dropdown-background-color");
|
653
|
-
border-
|
654
|
-
border-
|
664
|
+
border-end-start-radius: cv.getVar("navbar-dropdown-radius");
|
665
|
+
border-end-end-radius: cv.getVar("navbar-dropdown-radius");
|
655
666
|
border-top-color: cv.getVar("navbar-dropdown-border-color");
|
656
667
|
border-top-style: cv.getVar("navbar-dropdown-border-style");
|
657
668
|
border-top-width: cv.getVar("navbar-dropdown-border-width");
|
@@ -192,8 +192,8 @@ $panel-colors: dv.$colors !default;
|
|
192
192
|
}
|
193
193
|
|
194
194
|
&:last-child {
|
195
|
-
border-
|
196
|
-
border-
|
195
|
+
border-end-start-radius: cv.getVar("panel-radius");
|
196
|
+
border-end-end-radius: cv.getVar("panel-radius");
|
197
197
|
}
|
198
198
|
}
|
199
199
|
|
@@ -410,6 +410,12 @@ $no-palette: ("white", "black", "light", "dark");
|
|
410
410
|
&:active {
|
411
411
|
@include cv.register-vars(());
|
412
412
|
}
|
413
|
+
|
414
|
+
&[disabled],
|
415
|
+
fieldset[disabled] & {
|
416
|
+
background-color: transparent;
|
417
|
+
box-shadow: none;
|
418
|
+
}
|
413
419
|
}
|
414
420
|
|
415
421
|
&.#{iv.$class-prefix}is-inverted {
|
@@ -133,7 +133,10 @@ $content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
|
|
133
133
|
ol {
|
134
134
|
list-style-position: outside;
|
135
135
|
margin-inline-start: 2em;
|
136
|
-
|
136
|
+
|
137
|
+
&:not(:first-child) {
|
138
|
+
margin-top: 1em;
|
139
|
+
}
|
137
140
|
|
138
141
|
&:not([type]) {
|
139
142
|
list-style-type: decimal;
|
@@ -159,7 +162,10 @@ $content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
|
|
159
162
|
ul {
|
160
163
|
list-style: disc outside;
|
161
164
|
margin-inline-start: 2em;
|
162
|
-
|
165
|
+
|
166
|
+
&:not(:first-child) {
|
167
|
+
margin-top: 1em;
|
168
|
+
}
|
163
169
|
|
164
170
|
ul {
|
165
171
|
list-style-type: circle;
|
@@ -1,3 +1,5 @@
|
|
1
|
+
@use "sass:list";
|
2
|
+
|
1
3
|
@use "../utilities/initial-variables" as iv;
|
2
4
|
@use "../utilities/css-variables" as cv;
|
3
5
|
@use "../utilities/mixins" as mx;
|
@@ -37,8 +39,8 @@ $dimensions: 16 24 32 48 64 96 128 !default;
|
|
37
39
|
}
|
38
40
|
|
39
41
|
@each $pair in iv.$aspect-ratios {
|
40
|
-
$w: nth($pair, 1);
|
41
|
-
$h: nth($pair, 2);
|
42
|
+
$w: list.nth($pair, 1);
|
43
|
+
$h: list.nth($pair, 2);
|
42
44
|
|
43
45
|
&.#{iv.$class-prefix}is-#{$w}by#{$h} {
|
44
46
|
aspect-ratio: #{$w} / #{$h};
|
@@ -1,3 +1,5 @@
|
|
1
|
+
@use "sass:list";
|
2
|
+
|
1
3
|
@use "../utilities/css-variables" as cv;
|
2
4
|
@use "../utilities/derived-variables" as dv;
|
3
5
|
@use "../utilities/initial-variables" as iv;
|
@@ -90,7 +92,7 @@ $subtitle-strong-weight: cv.getVar("weight-semibold") !default;
|
|
90
92
|
|
91
93
|
// Sizes
|
92
94
|
@each $size in dv.$sizes {
|
93
|
-
$i: index(dv.$sizes, $size);
|
95
|
+
$i: list.index(dv.$sizes, $size);
|
94
96
|
|
95
97
|
&.#{iv.$class-prefix}is-#{$i} {
|
96
98
|
font-size: $size;
|
@@ -119,7 +121,7 @@ $subtitle-strong-weight: cv.getVar("weight-semibold") !default;
|
|
119
121
|
|
120
122
|
// Sizes
|
121
123
|
@each $size in dv.$sizes {
|
122
|
-
$i: index(dv.$sizes, $size);
|
124
|
+
$i: list.index(dv.$sizes, $size);
|
123
125
|
|
124
126
|
&.#{iv.$class-prefix}is-#{$i} {
|
125
127
|
font-size: $size;
|
@@ -25,8 +25,12 @@
|
|
25
25
|
|
26
26
|
.#{iv.$class-prefix}radio {
|
27
27
|
@extend %checkbox-radio;
|
28
|
+
}
|
28
29
|
|
29
|
-
|
30
|
-
|
31
|
-
|
30
|
+
.#{iv.$class-prefix}checkboxes,
|
31
|
+
.#{iv.$class-prefix}radios {
|
32
|
+
display: flex;
|
33
|
+
flex-wrap: wrap;
|
34
|
+
column-gap: 1em;
|
35
|
+
row-gap: 0.5em;
|
32
36
|
}
|
@@ -1,3 +1,5 @@
|
|
1
|
+
@use "sass:list";
|
2
|
+
|
1
3
|
@use "shared";
|
2
4
|
@use "../utilities/css-variables" as cv;
|
3
5
|
@use "../utilities/initial-variables" as iv;
|
@@ -12,16 +14,6 @@ $textarea-colors: shared.$form-colors !default;
|
|
12
14
|
%input-textarea {
|
13
15
|
@extend %input;
|
14
16
|
|
15
|
-
@include cv.register-vars(
|
16
|
-
(
|
17
|
-
"input-h": #{cv.getVar("scheme-h")},
|
18
|
-
"input-s": #{cv.getVar("scheme-s")},
|
19
|
-
"input-border-style": solid,
|
20
|
-
"input-border-width": 1px,
|
21
|
-
"input-border-l": #{cv.getVar("border-l")},
|
22
|
-
)
|
23
|
-
);
|
24
|
-
|
25
17
|
box-shadow: shared.$input-shadow;
|
26
18
|
max-width: 100%;
|
27
19
|
width: 100%;
|
@@ -32,7 +24,7 @@ $textarea-colors: shared.$form-colors !default;
|
|
32
24
|
|
33
25
|
// Colors
|
34
26
|
@each $name, $pair in $textarea-colors {
|
35
|
-
$color: nth($pair, 1);
|
27
|
+
$color: list.nth($pair, 1);
|
36
28
|
|
37
29
|
&.#{iv.$class-prefix}is-#{$name} {
|
38
30
|
@include cv.register-vars(
|
@@ -9,8 +9,15 @@ $form-colors: dv.$colors !default;
|
|
9
9
|
$input-h: #{cv.getVar("scheme-h")} !default;
|
10
10
|
$input-s: #{cv.getVar("scheme-s")} !default;
|
11
11
|
$input-l: #{cv.getVar("scheme-main-l")} !default;
|
12
|
+
$input-border-style: solid !default;
|
13
|
+
$input-border-width: cv.getVar("control-border-width") !default;
|
12
14
|
$input-border-l: cv.getVar("border-l") !default;
|
13
15
|
$input-border-l-delta: 0% !default;
|
16
|
+
$input-border-color: hsl(
|
17
|
+
cv.getVar("input-h"),
|
18
|
+
cv.getVar("input-s"),
|
19
|
+
calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
|
20
|
+
) !default;
|
14
21
|
$input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
|
15
22
|
$input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default;
|
16
23
|
$input-color-l: cv.getVar("text-strong-l") !default;
|
@@ -64,8 +71,11 @@ $input-radius: cv.getVar("radius") !default;
|
|
64
71
|
"input-h": #{$input-h},
|
65
72
|
"input-s": #{$input-s},
|
66
73
|
"input-l": #{$input-l},
|
74
|
+
"input-border-style": #{$input-border-style},
|
75
|
+
"input-border-width": #{$input-border-width},
|
67
76
|
"input-border-l": #{$input-border-l},
|
68
77
|
"input-border-l-delta": #{$input-border-l-delta},
|
78
|
+
"input-border-color": #{$input-border-color},
|
69
79
|
"input-hover-border-l-delta": #{$input-hover-border-l-delta},
|
70
80
|
"input-active-border-l-delta": #{$input-active-border-l-delta},
|
71
81
|
"input-focus-h": #{$input-focus-h},
|
@@ -103,11 +113,7 @@ $input-radius: cv.getVar("radius") !default;
|
|
103
113
|
)}
|
104
114
|
)
|
105
115
|
);
|
106
|
-
border-color:
|
107
|
-
cv.getVar("input-h"),
|
108
|
-
cv.getVar("input-s"),
|
109
|
-
calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
|
110
|
-
);
|
116
|
+
border-color: cv.getVar("input-border-color");
|
111
117
|
border-radius: cv.getVar("input-radius");
|
112
118
|
color: hsl(
|
113
119
|
#{cv.getVar("input-h")},
|
@@ -6,20 +6,35 @@
|
|
6
6
|
@use "../utilities/mixins" as mx;
|
7
7
|
|
8
8
|
$label-color: cv.getVar("text-strong") !default;
|
9
|
+
$label-spacing: 0.5em !default;
|
9
10
|
$label-weight: cv.getVar("weight-semibold") !default;
|
10
11
|
|
11
12
|
$help-size: cv.getVar("size-small") !default;
|
12
13
|
|
13
14
|
$label-colors: shared.$form-colors !default;
|
14
15
|
|
16
|
+
$field-block-spacing: 0.75rem !default;
|
17
|
+
|
18
|
+
:root {
|
19
|
+
@include cv.register-vars(
|
20
|
+
(
|
21
|
+
"label-color": #{$label-color},
|
22
|
+
"label-spacing": #{$label-spacing},
|
23
|
+
"label-weight": #{$label-weight},
|
24
|
+
"help-size": #{$help-size},
|
25
|
+
"field-block-spacing": #{$field-block-spacing},
|
26
|
+
)
|
27
|
+
);
|
28
|
+
}
|
29
|
+
|
15
30
|
.#{iv.$class-prefix}label {
|
16
|
-
color:
|
31
|
+
color: cv.getVar("label-color");
|
17
32
|
display: block;
|
18
33
|
font-size: cv.getVar("size-normal");
|
19
34
|
font-weight: $label-weight;
|
20
35
|
|
21
36
|
&:not(:last-child) {
|
22
|
-
margin-bottom:
|
37
|
+
margin-bottom: cv.getVar("label-spacing");
|
23
38
|
}
|
24
39
|
|
25
40
|
// Sizes
|
@@ -38,7 +53,7 @@ $label-colors: shared.$form-colors !default;
|
|
38
53
|
|
39
54
|
.#{iv.$class-prefix}help {
|
40
55
|
display: block;
|
41
|
-
font-size:
|
56
|
+
font-size: cv.getVar("help-size");
|
42
57
|
margin-top: 0.25rem;
|
43
58
|
|
44
59
|
@each $name, $pair in $label-colors {
|
@@ -57,7 +72,7 @@ $label-colors: shared.$form-colors !default;
|
|
57
72
|
.#{iv.$class-prefix}field {
|
58
73
|
@include cv.register-vars(
|
59
74
|
(
|
60
|
-
"block-spacing":
|
75
|
+
"block-spacing": #{cv.getVar("field-block-spacing")},
|
61
76
|
)
|
62
77
|
);
|
63
78
|
|
@@ -85,10 +100,8 @@ $label-colors: shared.$form-colors !default;
|
|
85
100
|
.#{iv.$class-prefix}button,
|
86
101
|
.#{iv.$class-prefix}input,
|
87
102
|
.#{iv.$class-prefix}select select {
|
88
|
-
|
89
|
-
border-
|
90
|
-
border-top-right-radius: 0;
|
91
|
-
// }
|
103
|
+
border-start-end-radius: 0;
|
104
|
+
border-end-end-radius: 0;
|
92
105
|
}
|
93
106
|
}
|
94
107
|
|
@@ -96,10 +109,8 @@ $label-colors: shared.$form-colors !default;
|
|
96
109
|
.#{iv.$class-prefix}button,
|
97
110
|
.#{iv.$class-prefix}input,
|
98
111
|
.#{iv.$class-prefix}select select {
|
99
|
-
|
100
|
-
border-
|
101
|
-
border-top-left-radius: 0;
|
102
|
-
// }
|
112
|
+
border-start-start-radius: 0;
|
113
|
+
border-end-start-radius: 0;
|
103
114
|
}
|
104
115
|
}
|
105
116
|
|
@@ -20,7 +20,7 @@ $column-gap: 0.75rem !default;
|
|
20
20
|
flex-basis: 0;
|
21
21
|
flex-grow: 1;
|
22
22
|
flex-shrink: 1;
|
23
|
-
padding:
|
23
|
+
padding: cv.getVar("column-gap");
|
24
24
|
|
25
25
|
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
26
26
|
> &.#{iv.$class-prefix}is-narrow {
|
@@ -137,9 +137,7 @@ $column-gap: 0.75rem !default;
|
|
137
137
|
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
138
138
|
> &.#{iv.$class-prefix}is-#{$i} {
|
139
139
|
flex: none;
|
140
|
-
width:
|
141
|
-
math.percentage(math.div($i, 12)) - calc(#{cv.getVar("column-gap")} / 2)
|
142
|
-
);
|
140
|
+
width: math.percentage(math.div($i, 12));
|
143
141
|
}
|
144
142
|
|
145
143
|
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
@@ -243,11 +241,7 @@ $column-gap: 0.75rem !default;
|
|
243
241
|
@for $i from 0 through 12 {
|
244
242
|
&.#{iv.$class-prefix}is-#{$i}-mobile {
|
245
243
|
flex: none;
|
246
|
-
width:
|
247
|
-
math.percentage(math.div($i, 12)) - calc(
|
248
|
-
#{cv.getVar("column-gap")} / 2
|
249
|
-
)
|
250
|
-
);
|
244
|
+
width: math.percentage(math.div($i, 12));
|
251
245
|
}
|
252
246
|
|
253
247
|
&.#{iv.$class-prefix}is-offset-#{$i}-mobile {
|
@@ -372,11 +366,7 @@ $column-gap: 0.75rem !default;
|
|
372
366
|
&.#{iv.$class-prefix}is-#{$i},
|
373
367
|
&.#{iv.$class-prefix}is-#{$i}-tablet {
|
374
368
|
flex: none;
|
375
|
-
width:
|
376
|
-
math.percentage(math.div($i, 12)) - calc(
|
377
|
-
#{cv.getVar("column-gap")} / 2
|
378
|
-
)
|
379
|
-
);
|
369
|
+
width: math.percentage(math.div($i, 12));
|
380
370
|
}
|
381
371
|
|
382
372
|
&.#{iv.$class-prefix}is-offset-#{$i},
|
@@ -585,11 +575,7 @@ $column-gap: 0.75rem !default;
|
|
585
575
|
@for $i from 0 through 12 {
|
586
576
|
&.#{iv.$class-prefix}is-#{$i}-desktop {
|
587
577
|
flex: none;
|
588
|
-
width:
|
589
|
-
math.percentage(math.div($i, 12)) - calc(
|
590
|
-
#{cv.getVar("column-gap")} / 2
|
591
|
-
)
|
592
|
-
);
|
578
|
+
width: math.percentage(math.div($i, 12));
|
593
579
|
}
|
594
580
|
|
595
581
|
&.#{iv.$class-prefix}is-offset-#{$i}-desktop {
|
@@ -693,11 +679,7 @@ $column-gap: 0.75rem !default;
|
|
693
679
|
@for $i from 0 through 12 {
|
694
680
|
&.#{iv.$class-prefix}is-#{$i}-widescreen {
|
695
681
|
flex: none;
|
696
|
-
width:
|
697
|
-
math.percentage(math.div($i, 12)) - calc(
|
698
|
-
#{cv.getVar("column-gap")} / 2
|
699
|
-
)
|
700
|
-
);
|
682
|
+
width: math.percentage(math.div($i, 12));
|
701
683
|
}
|
702
684
|
|
703
685
|
&.#{iv.$class-prefix}is-offset-#{$i}-widescreen {
|
@@ -821,7 +803,9 @@ $column-gap: 0.75rem !default;
|
|
821
803
|
}
|
822
804
|
|
823
805
|
&:not(:last-child) {
|
824
|
-
margin-bottom: calc(
|
806
|
+
margin-bottom: calc(
|
807
|
+
#{cv.getVar("block-spacing")} - #{cv.getVar("column-gap")}
|
808
|
+
);
|
825
809
|
}
|
826
810
|
|
827
811
|
// Modifiers
|
@@ -874,4 +858,104 @@ $column-gap: 0.75rem !default;
|
|
874
858
|
display: flex;
|
875
859
|
}
|
876
860
|
}
|
861
|
+
|
862
|
+
@for $i from 0 through 8 {
|
863
|
+
&.#{iv.$class-prefix}is-#{$i} {
|
864
|
+
@include cv.register-vars(
|
865
|
+
(
|
866
|
+
"column-gap": #{$i * 0.25rem},
|
867
|
+
)
|
868
|
+
);
|
869
|
+
}
|
870
|
+
|
871
|
+
@include mx.mobile {
|
872
|
+
&.#{iv.$class-prefix}is-#{$i}-mobile {
|
873
|
+
@include cv.register-vars(
|
874
|
+
(
|
875
|
+
"column-gap": #{$i * 0.25rem},
|
876
|
+
)
|
877
|
+
);
|
878
|
+
}
|
879
|
+
}
|
880
|
+
|
881
|
+
@include mx.tablet {
|
882
|
+
&.#{iv.$class-prefix}is-#{$i}-tablet {
|
883
|
+
@include cv.register-vars(
|
884
|
+
(
|
885
|
+
"column-gap": #{$i * 0.25rem},
|
886
|
+
)
|
887
|
+
);
|
888
|
+
}
|
889
|
+
}
|
890
|
+
|
891
|
+
@include mx.tablet-only {
|
892
|
+
&.#{iv.$class-prefix}is-#{$i}-tablet-only {
|
893
|
+
@include cv.register-vars(
|
894
|
+
(
|
895
|
+
"column-gap": #{$i * 0.25rem},
|
896
|
+
)
|
897
|
+
);
|
898
|
+
}
|
899
|
+
}
|
900
|
+
|
901
|
+
@include mx.touch {
|
902
|
+
&.#{iv.$class-prefix}is-#{$i}-touch {
|
903
|
+
@include cv.register-vars(
|
904
|
+
(
|
905
|
+
"column-gap": #{$i * 0.25rem},
|
906
|
+
)
|
907
|
+
);
|
908
|
+
}
|
909
|
+
}
|
910
|
+
|
911
|
+
@include mx.desktop {
|
912
|
+
&.#{iv.$class-prefix}is-#{$i}-desktop {
|
913
|
+
@include cv.register-vars(
|
914
|
+
(
|
915
|
+
"column-gap": #{$i * 0.25rem},
|
916
|
+
)
|
917
|
+
);
|
918
|
+
}
|
919
|
+
}
|
920
|
+
|
921
|
+
@include mx.desktop-only {
|
922
|
+
&.#{iv.$class-prefix}is-#{$i}-desktop-only {
|
923
|
+
@include cv.register-vars(
|
924
|
+
(
|
925
|
+
"column-gap": #{$i * 0.25rem},
|
926
|
+
)
|
927
|
+
);
|
928
|
+
}
|
929
|
+
}
|
930
|
+
|
931
|
+
@include mx.widescreen {
|
932
|
+
&.#{iv.$class-prefix}is-#{$i}-widescreen {
|
933
|
+
@include cv.register-vars(
|
934
|
+
(
|
935
|
+
"column-gap": #{$i * 0.25rem},
|
936
|
+
)
|
937
|
+
);
|
938
|
+
}
|
939
|
+
}
|
940
|
+
|
941
|
+
@include mx.widescreen-only {
|
942
|
+
&.#{iv.$class-prefix}is-#{$i}-widescreen-only {
|
943
|
+
@include cv.register-vars(
|
944
|
+
(
|
945
|
+
"column-gap": #{$i * 0.25rem},
|
946
|
+
)
|
947
|
+
);
|
948
|
+
}
|
949
|
+
}
|
950
|
+
|
951
|
+
@include mx.fullhd {
|
952
|
+
&.#{iv.$class-prefix}is-#{$i}-fullhd {
|
953
|
+
@include cv.register-vars(
|
954
|
+
(
|
955
|
+
"column-gap": #{$i * 0.25rem},
|
956
|
+
)
|
957
|
+
);
|
958
|
+
}
|
959
|
+
}
|
960
|
+
}
|
877
961
|
}
|
@@ -1,10 +1,12 @@
|
|
1
|
+
@use "sass:list";
|
2
|
+
|
1
3
|
@use "../utilities/initial-variables" as iv;
|
2
4
|
|
3
5
|
@each $pair in iv.$aspect-ratios {
|
4
|
-
$w: nth($pair, 1);
|
5
|
-
$h: nth($pair, 2);
|
6
|
+
$w: list.nth($pair, 1);
|
7
|
+
$h: list.nth($pair, 2);
|
6
8
|
|
7
|
-
.#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
|
9
|
+
.#{iv.$class-prefix}#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
|
8
10
|
aspect-ratio: #{$w} / #{$h};
|
9
11
|
}
|
10
12
|
}
|