diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 63372b772a..c21bac5148 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -23,7 +23,7 @@
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; // TODO to check
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} var(--#{$prefix}btn-focus-shadow-rgb); // OUDS mod
- --#{$prefix}icon-spacing: #{$btn-icon-padding-x}; // OUDS mod TODO to check
+ --#{$prefix}icon-spacing: #{$btn-icon-padding-left}; // OUDS mod TODO to check
// scss-docs-end btn-css-vars
display: inline-block;
@@ -83,6 +83,7 @@
// OUDS mod: no `.btn-check:checked:focus-visible + &` to handle box shadow
// OUDS mod: selectors are slightly different to handle `.btn-check`
+ // TODO how to handle to disable links with aria-disabled only
.btn-check:disabled + &,
&:disabled,
&.disabled,
@@ -97,11 +98,14 @@
}
// End mod
- // OUDS mod: with icon
- &:not(.btn-icon) > svg {
- transform: translateY(1px);
+ &:not(.btn-icon) > svg,
+ &:not(.btn-icon) > img,
+ &:not(.btn-icon) > .bm-short-icon {
+ @extend .bm-short-icon;
+ margin-right: $ouds-button-space-column-gap-icon;
+ margin-left: subtract(var(--#{$prefix}icon-spacing), var(--#{$prefix}btn-padding-x));
+ vertical-align: text-bottom;
}
- // End mod
}
@@ -211,15 +215,11 @@
}
}
-@each $color, $value in $theme-colors {
- .btn-outline-#{$color} {
- $btn-outline-hover-color: var(--#{$prefix}highlight-color);
- @if index(("primary", "warning", "light"), #{$color}) {
- $btn-outline-hover-color: $black;
- } @else if (#{$color} == "dark") {
- $btn-outline-hover-color: $white;
+@if $enable-bootstrap-compatibility { // OUDS mod
+ @each $color, $value in $theme-colors {
+ .btn-outline-#{$color} {
+ @extend .btn-default; // OUDS mod
}
- @include button-outline-variant(var(--#{$prefix}#{$color}), $btn-outline-hover-color);
}
}
// scss-docs-end btn-variant-loops
@@ -321,18 +321,24 @@
// OUDS mod: 6th argument to set .btn-icon padding
// OUDS mod: 7th argument to set .btn-letter-spacing
-.btn-lg {
- @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg, $btn-line-height-lg, $btn-icon-padding-x-lg, $btn-letter-spacing-lg);
-}
-
-.btn-sm {
- @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm, $btn-line-height-sm, $btn-icon-padding-x-sm, $btn-letter-spacing-sm);
-}
+//.btn-lg {
+// @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg, $btn-line-height-lg, $btn-icon-padding-x-lg, $btn-letter-spacing-lg);
+//}
+//
+//.btn-sm {
+// @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm, $btn-line-height-sm, $btn-icon-padding-x-sm, $btn-letter-spacing-sm);
+//}
// OUDS mod: icon button
.btn-icon {
- padding: var(--#{$prefix}icon-spacing);
+ --#{$prefix}btn-padding-x: #{$ouds-button-space-inset-icon-alone};
+
+ > svg,
+ > img,
+ > .bm-medium-icon {
+ @extend .bm-medium-icon;
+ }
}
// End mod
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 47fab10d3d..fc876305a0 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -992,9 +992,10 @@ $btn-transition: $transition-focus !default; // OUDS mod
// scss-docs-end btn-variables
// OUDS mod: icon button
-$btn-icon-padding-x: subtract($spacer * .5, var(--#{$prefix}border-width)) !default;
-$btn-icon-padding-x-sm: $spacer * .25 !default;
-$btn-icon-padding-x-lg: add($spacer * .5, calc(var(--#{$prefix}border-width) * 1.5)) !default; // stylelint-disable-line function-disallowed-list
+$btn-icon-padding-x: subtract($ouds-button-space-padding-inline-icon-start, var(--#{$prefix}border-width)) !default;
+$btn-icon-padding-left: $ouds-button-space-padding-inline-icon-start !default;
+// TODO to confirm to delete $btn-icon-padding-x-sm: $spacer * .25 !default;
+// TODO to confirm to delete $btn-icon-padding-x-lg: add($spacer * .5, calc(var(--#{$prefix}border-width) * 1.5)) !default; // stylelint-disable-line function-disallowed-list
// OUDS mod: social button
// scss-docs-start social-buttons
$btn-social-networks: (
@@ -2296,7 +2297,7 @@ $quantity-selector-width: 7.5rem !default;
$quantity-selector-sm-width: 5.625rem !default;
$quantity-selector-btn-padding-x: add($btn-icon-padding-x, 2px) !default;
-$quantity-selector-btn-padding-x-sm: add($btn-icon-padding-x-sm, 2px) !default;
+$quantity-selector-btn-padding-x-sm: add($btn-icon-padding-x, 2px) !default;
$quantity-selector-btn-bg: var(--#{$prefix}body-bg) !default;
$quantity-selector-btn-border: var(--#{$prefix}border-width) solid var(--#{$prefix}color-border-emphasized) !default;
diff --git a/site/content/docs/0.0/components/buttons.md b/site/content/docs/0.0/components/buttons.md
index b8e0abb087..fa90e702d0 100644
--- a/site/content/docs/0.0/components/buttons.md
+++ b/site/content/docs/0.0/components/buttons.md
@@ -51,34 +51,52 @@ Boosted includes several button variants, each serving its own semantic purpose,
{{< /callout >}}
+
+## Loading state
+
+{{< example >}}
+
+ Loading...
+
+{{< /example >}}
+
## With icon
The recommended way of using an icon in a button is [an embedded SVG]({{< docsref "/extend/icons" >}}). You need to:
-- set its dimensions to `1.25rem` to match button size—except for `.btn-sm` where you should use `1rem`,
-- apply `.me-1` on it to get consistent spacing,
-- fill it using `currentColor` to respect button color scheme,
+- set its dimensions to default `1rem` size, the icon will adapt automatically,
+- fill it using `currentColor` to respect button color scheme.
+
+You don't need to apply `.me-shorter` class on the icon to get consistent spacing, as the margin is already handled by Boosted.
Please note that if you experience a problem with a cropped SVG, we recommend using the `.overflow-visible` utility on the SVG to fix its rendering.
+If really needed, you can use a font icon associated the `.bm-short-icon` class to explicitly set the size.
+
{{< example >}}
-