Add icon buttons

Orange-OpenSource · Nov 28, 2024 · 2bce01c · 2bce01c
1 parent c6f5314
commit 2bce01c
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 129 deletions.
diff --git 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
@@ -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;