fix: Reworked styles for button and related components: combobox, inp…

…ut-group, carousel, tile (#1999)
SAP · Jan 14, 2021 · ec7f9a6 · ec7f9a6
1 parent 816c4c2
commit ec7f9a6
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 69 deletions.
diff --git a/src/carousel.scss b/src/carousel.scss
@@ -9,16 +9,13 @@ $button: #{$fd-namespace}-button;
   $fd-carousel-page-indicator-border: 0.0625rem solid var(--sapPageFooter_BorderColor) !default;
   $fd-carousel-button-size: 2.125rem !default;
   $fd-carousel-touchable-button-size: 2.625rem !default;
-  $fd-carousel-button-focus-outline-offset: -0.125rem !default;
+  $fd-carousel-button-focus-outline-offset: 0.0625rem !default;
   $fd-carousel-button-content-offset: 0.5rem !default;
   $fd-carousel-dot-size: var(--fdCarousel_Dot_Size) !default;
   $fd-carousel-dot-active-size: 0.5rem !default;
 
   @mixin after-position-overwrite() {
-    top: $fd-carousel-button-focus-outline-offset;
-    bottom: $fd-carousel-button-focus-outline-offset;
-    left: $fd-carousel-button-focus-outline-offset;
-    right: $fd-carousel-button-focus-outline-offset;
+    outline-offset: $fd-carousel-button-focus-outline-offset;
   }
 
   @include fd-reset();
@@ -157,9 +154,7 @@ $button: #{$fd-namespace}-button;
     }
 
     @include fd-focus() {
-      &::after {
-        @include after-position-overwrite();
-      }
+      @include after-position-overwrite();
     }
 
     @include fd-active() {

diff --git a/src/input-group.scss b/src/input-group.scss
@@ -129,7 +129,7 @@ $fd-input-border-radius: var(--sapField_BorderCornerRadius);
     @include fd-ellipsis();
 
     color: var(--sapContent_NonInteractiveIconColor);
-    background-color: var(--sapField_Background);
+    background: none !important;
     font-size: var(--sapFontLargeSize);
     min-width: 2.25rem;
     min-height: $fd-form-input-height;
@@ -203,6 +203,16 @@ $fd-input-border-radius: var(--sapField_BorderCornerRadius);
 
     border: none;
     width: 100%;
+    z-index: auto !important;
+    position: static !important;
+
+    @include fd-focus() {
+      outline: 0 !important;
+    }
+
+    &::before {
+      display: none !important;
+    }
   }
 
   .#{$fd-namespace}-button.#{$block}__button {

diff --git a/src/mixins/button/_button-helper.scss b/src/mixins/button/_button-helper.scss
@@ -6,23 +6,12 @@ $block: #{$fd-namespace}-button;
   background-color: $backgroundColor;
 }
 
-@mixin buttonFocus($fd-button-outline-offset: 0.0625rem) {
-  &::after {
-    content: "";
-    position: absolute;
-    width: auto;
-    height: auto;
-    top: $fd-button-outline-offset;
-    left: $fd-button-outline-offset;
-    right: $fd-button-outline-offset;
-    bottom: $fd-button-outline-offset;
-    border: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
-    @content;
-  }
+@mixin buttonFocus($fd-button-outline-offset: -0.1875rem) {
+  outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
+  outline-offset: $fd-button-outline-offset;
+  @content;
 
   &.#{$block}--toggled {
-    &::after {
-      border: var(--sapContent_FocusWidth) dotted var(--sapContent_ContrastFocusColor);
-    }
+    outline-color: var(--sapContent_ContrastFocusColor);
   }
 }
diff --git a/src/mixins/button/_standard.scss b/src/mixins/button/_standard.scss
@@ -44,9 +44,7 @@
 }
 
 @mixin standardPressedFocus() {
-  &::after {
-    border-color: var(--sapContent_ContrastFocusColor);
-  }
+  outline-color: var(--sapContent_ContrastFocusColor);
 }
 
 @mixin standardFocus() {

diff --git a/src/tile.scss b/src/tile.scss
@@ -67,13 +67,23 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
 @mixin set-height($height) {
   height: $height;
   min-height: $height;
-  max-height: $height;
+
+  @if ($height == 'auto') {
+    max-height: none;
+  } @else {
+    max-height: $height;
+  }
 }
 
 @mixin set-width($width) {
   width: $width;
   min-width: $width;
-  max-width: $width;
+
+  @if ($width == 'auto') {
+    max-width: none;
+  } @else {
+    max-width: $width;
+  }
 }
 
 @mixin line-clamp($lines: 2) {
@@ -102,33 +112,6 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
   }
 }
 
-@mixin focus-close-button-outline() {
-  &:focus,
-  &.is-focus {
-    outline: none;
-
-    &::after {
-      content: '';
-      width: 1.5rem;
-      height: 1.5rem;
-      top: -0.0625rem;
-      left: 0.4375rem;
-      right: 0;
-      bottom: 0;
-      z-index: 3;
-
-      @content;
-    }
-
-    @include fd-rtl() {
-      &::after {
-        left: 0;
-        right: 0.4375rem;
-      }
-    }
-  }
-}
-
 @mixin reset-position-absolute {
   position: relative;
   top: 0;
@@ -622,9 +605,8 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
     }
 
     .#{$block}__action-close {
-      @include set-height(2rem);
-      @include set-width(2rem);
-      @include focus-close-button-outline();
+      @include set-height(auto);
+      @include set-width(auto);
 
       display: flex;
       align-items: flex-start;
@@ -652,14 +634,25 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
         color: var(--sapButton_IconColor);
         font-size: 0.75rem;
 
+        // Extended clickable/touchable area
         &::before {
-          width: auto;
-          height: auto;
+          @include set-height(2rem);
+          @include set-width(2rem);
+
+          top: 0;
+          right: 0;
+          left: auto;
+          bottom: auto;
+
+          @include fd-rtl() {
+            right: auto;
+            left: 0;
+          }
         }
       }
 
       @include fd-focus() {
-        outline: none;
+        @include buttonFocus(-0.0625rem);
       }
 
       &::-moz-focus-inner {
@@ -700,12 +693,6 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
       @include fd-active() {
         background: transparent;
         border-color: transparent;
-
-        @include fd-focus() {
-          &::after {
-            border-color: var(--sapContent_FocusColor);
-          }
-        }
       }
     }