fix: fix open styling issues, set correct :focus styling (only) when …

…using the keyboard
intershop · Feb 20, 2024 · a0c8f05 · a0c8f05
1 parent 2aa0089
commit a0c8f05
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 32 deletions.
diff --git a/src/app/extensions/rating/formly/rating-stars-field/rating-stars-field.component.html b/src/app/extensions/rating/formly/rating-stars-field/rating-stars-field.component.html
@@ -2,7 +2,7 @@
   <ng-container *ngFor="let fill of stars; index as i">
     <button
       type="button"
-      class="text-muted mt-4 btn btn-link btn-link-action"
+      class="text-muted btn btn-link btn-link-action"
       [title]="'product.review.rating.tooltip' | translate : { '0': i + 1 }"
       (click)="setStars(i + 1)"
     >

diff --git a/src/styles/components/header/back-to-top.scss b/src/styles/components/header/back-to-top.scss
@@ -21,6 +21,6 @@ html:not(.cypress-tests) {
   animation: back-to-top-btn-animation 0.15s ease-in-out;
 
   @media (max-width: $screen-xs-max) {
-    width: auto;
+    width: auto !important;
   }
 }
diff --git a/src/styles/global/buttons.scss b/src/styles/global/buttons.scss
@@ -116,35 +116,25 @@ button.btn-link {
   &.btn-tool {
     padding: 0;
     background-color: transparent;
-    border: 1px solid transparent;
+    border: none;
   }
 
   &.btn-link-action {
     padding: 0;
+    margin-bottom: 1px; // fix inline display
     font-size: unset;
   }
 
   &:hover,
   &:focus {
     text-decoration: none;
-  }
-}
 
-/* .btn-link-action {
-  padding: 0;
-  margin-right: 0 !important;
-  margin-bottom: 0 !important;
-  font-size: unset;
-  border: none;
-}
-
-@media (max-width: $screen-xs-max) {
-  .btn-link-action {
-    display: unset !important;
-    width: unset !important;
+    &:not(:focus-visible) {
+      // remove shadow for non-keyboard :focus (shadow is kept if user uses the keyboard)
+      box-shadow: none;
+    }
   }
 }
-*/
 
 // multiple buttons margin handling (use "button-group" in case the buttons are not direct siblings)
 .button-group .btn,

diff --git a/src/styles/pages/category/filter-panel.scss b/src/styles/pages/category/filter-panel.scss
@@ -94,6 +94,11 @@
         }
       }
 
+      .btn-link-action {
+        width: 100%;
+        text-align: left;
+      }
+
       span {
         &.icon-notselected {
           display: inline-block;
@@ -323,22 +328,25 @@ input {
 }
 
 @media (max-width: $screen-xs-max) {
-  .mobile-filter-toggle {
-    display: block;
-    padding: $space-default 0;
-    margin-bottom: $space-default;
-    font-family: $font-family-condensedregular;
-    font-size: 15px;
-    font-weight: 700;
-    text-align: center;
-    text-transform: uppercase;
+  button.btn-link-action {
+    &.mobile-filter-toggle {
+      display: block;
+      width: 100%;
+      padding: $space-default 0;
+      margin-bottom: $space-default;
+      font-family: $font-family-condensedregular;
+      font-size: 15px;
+      font-weight: 700;
+      text-align: center;
+      text-transform: uppercase;
 
-    &:hover {
-      text-decoration: none;
-    }
+      &:hover {
+        text-decoration: none;
+      }
 
-    .ng-fa-icon {
-      display: block;
+      .ng-fa-icon {
+        display: block;
+      }
     }
   }
 }