root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Proposal: Refactor .btn to BEM-style .button

This commit is contained in:
ethandietrich00808 2025-04-25 13:23:10 -04:00
parent 9f4d383046
commit d74a5734fc
2 changed files with 140 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
scss/_button-group.scss
View File

@ -1,29 +1,29 @@
// Make the div behave like a button // Make the div behave like a button
.btn-group, .button-group,
.btn-group-vertical { .button-group-vertical {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
vertical-align: middle; // match .btn alignment given font-size hack above vertical-align: middle; // match .button alignment given font-size hack above
> .btn { > .button {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
} }
// Bring the hover, focused, and "active" buttons to the front to overlay // Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly // the borders properly
> .btn-check:checked + .btn, > .button-check:checked + .button,
> .btn-check:focus + .btn, > .button-check:focus + .button,
> .btn:hover, > .button:hover,
> .btn:focus, > .button:focus,
> .btn:active, > .button:active,
> .btn.active { > .button.active {
z-index: 1; z-index: 1;
} }
} }
// Optional: Group multiple button groups together for a toolbar // Optional: Group multiple button groups together for a toolbar
.btn-toolbar { .button-group-toolbar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
@ -33,29 +33,29 @@
} }
} }
.btn-group { .button-group {
@include border-radius($btn-border-radius); @include border-radius($btn-border-radius);
// Prevent double borders when buttons are next to each other // Prevent double borders when buttons are next to each other
> :not(.btn-check:first-child) + .btn, > :not(.button-check:first-child) + .button,
> .btn-group:not(:first-child) { > .button-group:not(:first-child) {
margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
} }
// Reset rounded corners // Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle), > .button:not(:last-child):not(.dropdown-toggle),
> .btn.dropdown-toggle-split:first-child, > .button.dropdown-toggle-split:first-child,
> .btn-group:not(:last-child) > .btn { > .button-group:not(:last-child) > .button {
@include border-end-radius(0); @include border-end-radius(0);
} }
// The left radius should be 0 if the button is: // The left radius should be 0 if the button is:
// - the "third or more" child // - the "third or more" child
// - the second child and the previous element isn't `.btn-check` (making it the first child visually) // - the second child and the previous element isn't `.button-check` (making it the first child visually)
// - part of a btn-group which isn't the first child // - part of a button-group which isn't the first child
> .btn:nth-child(n + 3), > .button:nth-child(n + 3),
> :not(.btn-check) + .btn, > :not(.button-check) + .button,
> .btn-group:not(:first-child) > .btn { > .button-group:not(:first-child) > .button {
@include border-start-radius(0); @include border-start-radius(0);
} }
} }
@ -64,15 +64,15 @@
// //
// Remix the default button sizing classes into new ones for easier manipulation. // Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-sm > .btn { @extend .btn-sm; } .button-group-small > .button { @extend .button-small; }
.btn-group-lg > .btn { @extend .btn-lg; } .button-group-large > .button { @extend .button-large; }
// //
// Split button dropdowns // Split button dropdowns
// //
.dropdown-toggle-split { .button-group-dropdown-toggle {
padding-right: $btn-padding-x * .75; padding-right: $btn-padding-x * .75;
padding-left: $btn-padding-x * .75; padding-left: $btn-padding-x * .75;
@ -87,12 +87,12 @@
} }
} }
.btn-sm + .dropdown-toggle-split { .button-small + .button-group-dropdown-toggle {
padding-right: $btn-padding-x-sm * .75; padding-right: $btn-padding-x-sm * .75;
padding-left: $btn-padding-x-sm * .75; padding-left: $btn-padding-x-sm * .75;
} }
.btn-lg + .dropdown-toggle-split { .button-large + .button-group-dropdown-toggle {
padding-right: $btn-padding-x-lg * .75; padding-right: $btn-padding-x-lg * .75;
padding-left: $btn-padding-x-lg * .75; padding-left: $btn-padding-x-lg * .75;
} }
@ -100,11 +100,11 @@
// The clickable button for toggling the menu // The clickable button for toggling the menu
// Set the same inset shadow as the :active state // Set the same inset shadow as the :active state
.btn-group.show .dropdown-toggle { .button-group.show .button-group-dropdown-toggle {
@include box-shadow($btn-active-box-shadow); @include box-shadow($btn-active-box-shadow);
// Show no shadow for `.btn-link` since it has no other button styles. // Show no shadow for `.button-link` since it has no other button styles.
&.btn-link { &.button-link {
@include box-shadow(none); @include box-shadow(none);
} }
} }
@ -114,34 +114,34 @@
// Vertical button groups // Vertical button groups
// //
.btn-group-vertical { .button-group-vertical {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
> .btn, > .button,
> .btn-group { > .button-group {
width: 100%; width: 100%;
} }
> .btn:not(:first-child), > .button:not(:first-child),
> .btn-group:not(:first-child) { > .button-group:not(:first-child) {
margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
} }
// Reset rounded corners // Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle), > .button:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn { > .button-group:not(:last-child) > .button {
@include border-bottom-radius(0); @include border-bottom-radius(0);
} }
// The top radius should be 0 if the button is: // The top radius should be 0 if the button is:
// - the "third or more" child // - the "third or more" child
// - the second child and the previous element isn't `.btn-check` (making it the first child visually) // - the second child and the previous element isn't `.button-check` (making it the first child visually)
// - part of a btn-group which isn't the first child // - part of a button-group which isn't the first child
> .btn:nth-child(n + 3), > .button:nth-child(n + 3),
> :not(.btn-check) + .btn, > :not(.button-check) + .button,
> .btn-group:not(:first-child) > .btn { > .button-group:not(:first-child) > .button {
@include border-top-radius(0); @include border-top-radius(0);
} }
} }

186
scss/_buttons.scss
View File

@ -1,123 +1,133 @@
// Button variables
$button-hover-bg-shade-amount: 10% !default;
$button-hover-border-shade-amount: 12.5% !default;
$button-active-bg-shade-amount: 15% !default;
$button-active-border-shade-amount: 17.5% !default;
$button-hover-bg-tint-amount: 10% !default;
$button-hover-border-tint-amount: 12.5% !default;
$button-active-bg-tint-amount: 15% !default;
$button-active-border-tint-amount: 17.5% !default;
// //
// Base styles // Base styles
// //
.btn { .button {
// scss-docs-start btn-css-vars // scss-docs-start button-css-vars
--#{$prefix}btn-padding-x: #{$btn-padding-x}; --#{$prefix}button-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y}; --#{$prefix}button-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family}; --#{$prefix}button-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$prefix}btn-font-size); @include rfs($btn-font-size, --#{$prefix}button-font-size);
--#{$prefix}btn-font-weight: #{$btn-font-weight}; --#{$prefix}button-font-weight: #{$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height}; --#{$prefix}button-line-height: #{$btn-line-height};
--#{$prefix}btn-color: #{$btn-color}; --#{$prefix}button-color: #{$btn-color};
--#{$prefix}btn-bg: transparent; --#{$prefix}button-bg: transparent;
--#{$prefix}btn-border-width: #{$btn-border-width}; --#{$prefix}button-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent; --#{$prefix}button-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius}; --#{$prefix}button-border-radius: #{$btn-border-radius};
--#{$prefix}btn-hover-border-color: transparent; --#{$prefix}button-hover-border-color: transparent;
--#{$prefix}btn-box-shadow: #{$btn-box-shadow}; --#{$prefix}button-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; --#{$prefix}button-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5); --#{$prefix}button-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}button-focus-shadow-rgb), .5);
// scss-docs-end btn-css-vars // scss-docs-end button-css-vars
display: inline-block; display: inline-block;
padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x); padding: var(--#{$prefix}button-padding-y) var(--#{$prefix}button-padding-x);
font-family: var(--#{$prefix}btn-font-family); font-family: var(--#{$prefix}button-font-family);
@include font-size(var(--#{$prefix}btn-font-size)); @include font-size(var(--#{$prefix}button-font-size));
font-weight: var(--#{$prefix}btn-font-weight); font-weight: var(--#{$prefix}button-font-weight);
line-height: var(--#{$prefix}btn-line-height); line-height: var(--#{$prefix}button-line-height);
color: var(--#{$prefix}btn-color); color: var(--#{$prefix}button-color);
text-align: center; text-align: center;
text-decoration: if($link-decoration == none, null, none); text-decoration: if($link-decoration == none, null, none);
white-space: $btn-white-space; white-space: $btn-white-space;
vertical-align: middle; vertical-align: middle;
cursor: if($enable-button-pointers, pointer, null); cursor: if($enable-button-pointers, pointer, null);
user-select: none; user-select: none;
border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color); border: var(--#{$prefix}button-border-width) solid var(--#{$prefix}button-border-color);
@include border-radius(var(--#{$prefix}btn-border-radius)); @include border-radius(var(--#{$prefix}button-border-radius));
@include gradient-bg(var(--#{$prefix}btn-bg)); @include gradient-bg(var(--#{$prefix}button-bg));
@include box-shadow(var(--#{$prefix}btn-box-shadow)); @include box-shadow(var(--#{$prefix}button-box-shadow));
@include transition($btn-transition); @include transition($btn-transition);
&:hover { &:hover {
color: var(--#{$prefix}btn-hover-color); color: var(--#{$prefix}button-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null); text-decoration: if($link-hover-decoration == underline, none, null);
background-color: var(--#{$prefix}btn-hover-bg); background-color: var(--#{$prefix}button-hover-bg);
border-color: var(--#{$prefix}btn-hover-border-color); border-color: var(--#{$prefix}button-hover-border-color);
} }
.btn-check + &:hover { .button-check + &:hover {
// override for the checkbox/radio buttons // override for the checkbox/radio buttons
color: var(--#{$prefix}btn-color); color: var(--#{$prefix}button-color);
background-color: var(--#{$prefix}btn-bg); background-color: var(--#{$prefix}button-bg);
border-color: var(--#{$prefix}btn-border-color); border-color: var(--#{$prefix}button-border-color);
} }
&:focus-visible { &:focus-visible {
color: var(--#{$prefix}btn-hover-color); color: var(--#{$prefix}button-hover-color);
@include gradient-bg(var(--#{$prefix}btn-hover-bg)); @include gradient-bg(var(--#{$prefix}button-hover-bg));
border-color: var(--#{$prefix}btn-hover-border-color); border-color: var(--#{$prefix}button-hover-border-color);
outline: 0; outline: 0;
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows { @if $enable-shadows {
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{$prefix}button-box-shadow), var(--#{$prefix}button-focus-box-shadow);
} @else { } @else {
box-shadow: var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{$prefix}button-focus-box-shadow);
} }
} }
.btn-check:focus-visible + & { .button-check:focus-visible + & {
border-color: var(--#{$prefix}btn-hover-border-color); border-color: var(--#{$prefix}button-hover-border-color);
outline: 0; outline: 0;
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows { @if $enable-shadows {
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{$prefix}button-box-shadow), var(--#{$prefix}button-focus-box-shadow);
} @else { } @else {
box-shadow: var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{$prefix}button-focus-box-shadow);
} }
} }
.btn-check:checked + &, .button-check:checked + &,
:not(.btn-check) + &:active, :not(.button-check) + &:active,
&:first-child:active, &:first-child:active,
&.active, &.active,
&.show { &.show {
color: var(--#{$prefix}btn-active-color); color: var(--#{$prefix}button-active-color);
background-color: var(--#{$prefix}btn-active-bg); background-color: var(--#{$prefix}button-active-bg);
// Remove CSS gradients if they're enabled // Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null); background-image: if($enable-gradients, none, null);
border-color: var(--#{$prefix}btn-active-border-color); border-color: var(--#{$prefix}button-active-border-color);
@include box-shadow(var(--#{$prefix}btn-active-shadow)); @include box-shadow(var(--#{$prefix}button-active-shadow));
&:focus-visible { &:focus-visible {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows { @if $enable-shadows {
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{$prefix}button-active-shadow), var(--#{$prefix}button-focus-box-shadow);
} @else { } @else {
box-shadow: var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{$prefix}button-focus-box-shadow);
} }
} }
} }
.btn-check:checked:focus-visible + & { .button-check:checked:focus-visible + & {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows { @if $enable-shadows {
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{$prefix}button-active-shadow), var(--#{$prefix}button-focus-box-shadow);
} @else { } @else {
box-shadow: var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{$prefix}button-focus-box-shadow);
} }
} }
&:disabled, &:disabled,
&.disabled, &.disabled,
fieldset:disabled & { fieldset:disabled & {
color: var(--#{$prefix}btn-disabled-color); color: var(--#{$prefix}button-disabled-color);
pointer-events: none; pointer-events: none;
background-color: var(--#{$prefix}btn-disabled-bg); background-color: var(--#{$prefix}button-disabled-bg);
background-image: if($enable-gradients, none, null); background-image: if($enable-gradients, none, null);
border-color: var(--#{$prefix}btn-disabled-border-color); border-color: var(--#{$prefix}button-disabled-border-color);
opacity: var(--#{$prefix}btn-disabled-opacity); opacity: var(--#{$prefix}button-disabled-opacity);
@include box-shadow(none); @include box-shadow(none);
} }
} }
@ -127,26 +137,26 @@
// Alternate buttons // Alternate buttons
// //
// scss-docs-start btn-variant-loops // scss-docs-start button-variant-loops
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
.btn-#{$color} { .button--#{$color} {
@if $color == "light" { @if $color == "light" {
@include button-variant( @include button-variant(
$value, $value,
$value, $value,
$hover-background: shade-color($value, $btn-hover-bg-shade-amount), $hover-background: shade-color($value, $button-hover-bg-shade-amount),
$hover-border: shade-color($value, $btn-hover-border-shade-amount), $hover-border: shade-color($value, $button-hover-border-shade-amount),
$active-background: shade-color($value, $btn-active-bg-shade-amount), $active-background: shade-color($value, $button-active-bg-shade-amount),
$active-border: shade-color($value, $btn-active-border-shade-amount) $active-border: shade-color($value, $button-active-border-shade-amount)
); );
} @else if $color == "dark" { } @else if $color == "dark" {
@include button-variant( @include button-variant(
$value, $value,
$value, $value,
$hover-background: tint-color($value, $btn-hover-bg-tint-amount), $hover-background: tint-color($value, $button-hover-bg-tint-amount),
$hover-border: tint-color($value, $btn-hover-border-tint-amount), $hover-border: tint-color($value, $button-hover-border-tint-amount),
$active-background: tint-color($value, $btn-active-bg-tint-amount), $active-background: tint-color($value, $button-active-bg-tint-amount),
$active-border: tint-color($value, $btn-active-border-tint-amount) $active-border: tint-color($value, $button-active-border-tint-amount)
); );
} @else { } @else {
@include button-variant($value, $value); @include button-variant($value, $value);
@ -155,11 +165,11 @@
} }
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
.btn-outline-#{$color} { .button--outline-#{$color} {
@include button-outline-variant($value); @include button-outline-variant($value);
} }
} }
// scss-docs-end btn-variant-loops // scss-docs-end button-variant-loops
// //
@ -167,19 +177,19 @@
// //
// Make a button look and behave like a link // Make a button look and behave like a link
.btn-link { .button--link {
--#{$prefix}btn-font-weight: #{$font-weight-normal}; --#{$prefix}button-font-weight: #{$font-weight-normal};
--#{$prefix}btn-color: #{$btn-link-color}; --#{$prefix}button-color: #{$btn-link-color};
--#{$prefix}btn-bg: transparent; --#{$prefix}button-bg: transparent;
--#{$prefix}btn-border-color: transparent; --#{$prefix}button-border-color: transparent;
--#{$prefix}btn-hover-color: #{$btn-link-hover-color}; --#{$prefix}button-hover-color: #{$btn-link-hover-color};
--#{$prefix}btn-hover-border-color: transparent; --#{$prefix}button-hover-border-color: transparent;
--#{$prefix}btn-active-color: #{$btn-link-hover-color}; --#{$prefix}button-active-color: #{$btn-link-hover-color};
--#{$prefix}btn-active-border-color: transparent; --#{$prefix}button-active-border-color: transparent;
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color}; --#{$prefix}button-disabled-color: #{$btn-link-disabled-color};
--#{$prefix}btn-disabled-border-color: transparent; --#{$prefix}button-disabled-border-color: transparent;
--#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows --#{$prefix}button-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
--#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb}; --#{$prefix}button-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
text-decoration: $link-decoration; text-decoration: $link-decoration;
@if $enable-gradients { @if $enable-gradients {
@ -192,11 +202,11 @@
} }
&:focus-visible { &:focus-visible {
color: var(--#{$prefix}btn-color); color: var(--#{$prefix}button-color);
} }
&:hover { &:hover {
color: var(--#{$prefix}btn-hover-color); color: var(--#{$prefix}button-hover-color);
} }
// No need for an active state here // No need for an active state here
@ -207,10 +217,10 @@
// Button Sizes // Button Sizes
// //
.btn-lg { .button--large {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg); @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
} }
.btn-sm { .button--small {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm); @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
} }