Skip to content

Commit 40fdb9f

Browse files
mdomdo
authored
New forms and buttons (#41708)
1 parent 3d22332 commit 40fdb9f

32 files changed

+485
-413
lines changed

‎scss/_breadcrumb.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use "sass:string";
22
@use "config" as *;
33
@use "variables" as *;
4+
@use "functions" as *;
45
@use "mixins/border-radius" as *;
56
@use "vendor/rfs" as *;
67

‎scss/_root.scss‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
// @use "maps" as *;
77
@use "vendor/rfs" as *;
88
@use "mixins/color-mode" as *;
9+
@use "forms/form-variables" as *;
910

1011
// mdo-do: do we need theme?
1112
@layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities;
@@ -173,9 +174,15 @@
173174

174175
// Focus styles
175176
// scss-docs-start root-focus-variables
176-
--#{$prefix}focus-ring-width: #{$focus-ring-width};
177-
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
178-
--#{$prefix}focus-ring-color: #{$focus-ring-color};
177+
// --#{$prefix}focus-ring-width: #{$focus-ring-width};
178+
// --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
179+
// --#{$prefix}focus-ring-color: #{$focus-ring-color};
180+
181+
--#{$prefix}focus-ring-width: 3px;
182+
--#{$prefix}focus-ring-offset: -1px;
183+
--#{$prefix}focus-ring-color: var(--#{$prefix}primary-focus-ring);
184+
--#{$prefix}focus-ring: var(--#{$prefix}focus-ring-width) solid var(--#{$prefix}focus-ring-color);
185+
179186
// scss-docs-end root-focus-variables
180187

181188
// scss-docs-start root-form-validation-variables

‎scss/_utilities.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
@use "functions" as *;
66
@use "theme" as *;
77

8+
// add:
9+
// - placeItems
10+
// - double check css grid helpers
11+
//
12+
// update:
13+
// - focus-ring if needed
14+
815
$utilities: () !default;
916
// stylelint-disable-next-line scss/dollar-variable-default
1017
$utilities: map.merge(

‎scss/_variables.scss‎

Lines changed: 0 additions & 261 deletions
Large diffs are not rendered by default.

‎scss/bootstrap.scss‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,19 @@
44
// Global CSS variables, layer definitions, and configuration
55
@use "root";
66

7-
// Reboot & Content
7+
// Subdir imports
88
@use "content";
9-
10-
// Layout
119
@use "layout";
12-
13-
// Forms
1410
@use "forms";
11+
@use "buttons";
1512

1613
// Components
1714
@use "accordion";
1815
@use "alert";
1916
@use "badge";
2017
@use "breadcrumb";
21-
@use "buttons";
22-
@use "button-group";
2318
@use "card";
2419
@use "carousel";
25-
@use "close";
2620
@use "dropdown";
2721
@use "list-group";
2822
@use "modal";

‎scss/_button-group.scss‎ renamed to ‎scss/buttons/_button-group.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
@use "config" as *;
2-
@use "variables" as *;
3-
@use "mixins/border-radius" as *;
4-
@use "mixins/box-shadow" as *;
1+
@use "../config" as *;
2+
@use "../variables" as *;
3+
@use "../mixins/border-radius" as *;
4+
@use "../mixins/box-shadow" as *;
5+
@use "button-variables" as *;
56

67
@layer components {
78
// Make the div behave like a button

‎scss/buttons/_button-variables.scss‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@use "sass:color";
2+
@use "../config" as *;
3+
@use "../colors" as *;
4+
@use "../variables" as *;
5+
@use "../functions" as *;
6+
@use "../forms/form-variables" as *;
7+
8+
// scss-docs-start btn-variables
9+
$btn-color: var(--#{$prefix}body-color) !default;
10+
$btn-padding-y: $input-btn-padding-y !default;
11+
$btn-padding-x: $input-btn-padding-x !default;
12+
$btn-font-family: $input-btn-font-family !default;
13+
$btn-font-size: $input-btn-font-size !default;
14+
$btn-line-height: $input-btn-line-height !default;
15+
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
16+
17+
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
18+
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
19+
$btn-font-size-sm: $input-btn-font-size-sm !default;
20+
21+
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
22+
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
23+
$btn-font-size-lg: $input-btn-font-size-lg !default;
24+
25+
$btn-border-width: $input-btn-border-width !default;
26+
27+
$btn-font-weight: $font-weight-normal !default;
28+
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
29+
// $btn-focus-width: $input-btn-focus-width !default;
30+
// $btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
31+
$btn-disabled-opacity: .65 !default;
32+
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
33+
34+
$btn-link-color: var(--#{$prefix}link-color) !default;
35+
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
36+
$btn-link-disabled-color: $gray-600 !default;
37+
$btn-link-color-contrast: color-contrast($link-color) !default;
38+
$btn-link-focus-shadow-rgb: to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
39+
40+
// Allows for customizing button radius independently from global border radius
41+
$btn-border-radius: var(--#{$prefix}border-radius) !default;
42+
$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
43+
$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
44+
45+
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
46+
47+
$btn-hover-bg-shade-amount: 15% !default;
48+
$btn-hover-bg-tint-amount: 15% !default;
49+
$btn-hover-border-shade-amount: 20% !default;
50+
$btn-hover-border-tint-amount: 10% !default;
51+
$btn-active-bg-shade-amount: 20% !default;
52+
$btn-active-bg-tint-amount: 20% !default;
53+
$btn-active-border-shade-amount: 25% !default;
54+
$btn-active-border-tint-amount: 10% !default;
55+
// scss-docs-end btn-variables

‎scss/_buttons.scss‎ renamed to ‎scss/buttons/_button.scss‎

Lines changed: 19 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
@use "sass:color";
2-
@use "colors" as *;
3-
@use "config" as *;
4-
@use "variables" as *;
5-
@use "functions" as *;
6-
@use "vendor/rfs" as *;
7-
@use "mixins/border-radius" as *;
8-
@use "mixins/box-shadow" as *;
9-
@use "mixins/transition" as *;
10-
@use "mixins/gradients" as *;
2+
@use "../colors" as *;
3+
@use "../config" as *;
4+
@use "../variables" as *;
5+
@use "../functions" as *;
6+
@use "../vendor/rfs" as *;
7+
@use "../mixins/border-radius" as *;
8+
@use "../mixins/box-shadow" as *;
9+
@use "../mixins/focus-ring" as *;
10+
@use "../mixins/gradients" as *;
11+
@use "../mixins/transition" as *;
12+
@use "button-variables" as *;
1113

1214
// Button variants
1315
//
@@ -35,7 +37,7 @@
3537
--#{$prefix}btn-hover-color: #{$hover-color};
3638
--#{$prefix}btn-hover-bg: #{$hover-background};
3739
--#{$prefix}btn-hover-border-color: #{$hover-border};
38-
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
40+
// --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
3941
--#{$prefix}btn-active-color: #{$active-color};
4042
--#{$prefix}btn-active-bg: #{$active-background};
4143
--#{$prefix}btn-active-border-color: #{$active-border};
@@ -102,7 +104,7 @@
102104
--#{$prefix}btn-hover-border-color: transparent;
103105
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
104106
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
105-
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
107+
// --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
106108
// scss-docs-end btn-css-vars
107109

108110
display: inline-block;
@@ -142,24 +144,13 @@
142144
color: var(--#{$prefix}btn-hover-color);
143145
@include gradient-bg(var(--#{$prefix}btn-hover-bg));
144146
border-color: var(--#{$prefix}btn-hover-border-color);
145-
outline: 0;
146-
// Avoid using mixin so we can pass custom focus shadow properly
147-
@if $enable-shadows {
148-
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
149-
} @else {
150-
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
151-
}
147+
@include focus-ring(true);
148+
--#{$prefix}focus-ring-offset: 1px;
152149
}
153150

154151
.btn-check:focus-visible + & {
155152
border-color: var(--#{$prefix}btn-hover-border-color);
156-
outline: 0;
157-
// Avoid using mixin so we can pass custom focus shadow properly
158-
@if $enable-shadows {
159-
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
160-
} @else {
161-
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
162-
}
153+
@include focus-ring(true);
163154
}
164155

165156
.btn-check:checked + &,
@@ -175,22 +166,12 @@
175166
@include box-shadow(var(--#{$prefix}btn-active-shadow));
176167

177168
&:focus-visible {
178-
// Avoid using mixin so we can pass custom focus shadow properly
179-
@if $enable-shadows {
180-
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
181-
} @else {
182-
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
183-
}
169+
@include focus-ring(true);
184170
}
185171
}
186172

187173
.btn-check:checked:focus-visible + & {
188-
// Avoid using mixin so we can pass custom focus shadow properly
189-
@if $enable-shadows {
190-
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
191-
} @else {
192-
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
193-
}
174+
@include focus-ring(true);
194175
}
195176

196177
&:disabled,
@@ -263,7 +244,7 @@
263244
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
264245
--#{$prefix}btn-disabled-border-color: transparent;
265246
--#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
266-
--#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
247+
// --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
267248

268249
text-decoration: $link-decoration;
269250
@if $enable-gradients {

‎scss/_close.scss‎ renamed to ‎scss/buttons/_close.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
@use "config" as *;
2-
@use "colors" as *;
3-
@use "variables" as *;
4-
@use "mixins/border-radius" as *;
5-
@use "mixins/color-mode" as *;
1+
@use "../config" as *;
2+
@use "../colors" as *;
3+
@use "../variables" as *;
4+
@use "../mixins/border-radius" as *;
5+
@use "../mixins/color-mode" as *;
66

77
// scss-docs-start close-variables
88
$btn-close-width: 1em !default;

‎scss/buttons/index.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@forward "button-variables";
2+
@forward "button";
3+
@forward "button-group";
4+
@forward "close";

0 commit comments

Comments
 (0)