[ACS-4013] Fix pagination focus styling (#2793)

* [ACS-4013] Fix pagination focus styling * [ACS-4013] Missing style remove * [ACS-4013] Moved pagination styling to proper place, make focus color var global * [ACS-4013] CR fixes
Alfresco · Nov 18, 2022 · ed22d2d · ed22d2d
1 parent 39f5904
commit ed22d2d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 21 deletions.
diff --git a/app/src/app/ui/mixins.scss b/app/src/app/ui/mixins.scss
@@ -14,3 +14,8 @@
   height: 100%;
   overflow: hidden;
 }
+
+@mixin rounded-border($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) {
+  border: $thickness solid $border-color;
+  border-radius: $radius;
+}
diff --git a/app/src/app/ui/overrides/adf-pagination.theme.scss b/app/src/app/ui/overrides/adf-pagination.theme.scss
@@ -14,6 +14,22 @@
     line-height: 24px !important;
     padding: 16px 0;
     background: var(--theme-pagination-background-color);
+
+    &__perpage-block,
+    &__actualinfo-block {
+      .mat-icon-button {
+        &:focus {
+          border: none;
+          left: 3px;
+        }
+
+        &.cdk-focused {
+          .mat-icon {
+            @include rounded-border();
+          }
+        }
+      }
+    }
   }
 
   .adf-pagination__range-block {
@@ -44,5 +60,4 @@
   .adf-pagination__controls-block {
     padding-right: 24px !important;
   }
-
 }
diff --git a/app/src/app/ui/theme.scss b/app/src/app/ui/theme.scss
@@ -6,14 +6,8 @@
 
 @include custom-theme($custom-theme);
 
-$focus-color: #1f74db;
 $contrast-gray: #646569;
 
-@mixin rounded-border($border-color, $thickness: 2px, $radius: 4px) {
-  border: $thickness solid $border-color;
-  border-radius: $radius;
-}
-
 .mat-toolbar {
   color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
 }
@@ -59,8 +53,7 @@ $contrast-gray: #646569;
 
 .mat-icon-button, .mat-button, .mat-checkbox, .mat-raised-button {
   &:focus {
-    @include rounded-border($focus-color);
-    left: 6px;
+    @include rounded-border();
   }
   .mat-ripple-element {
     display: none;
@@ -70,7 +63,7 @@ $contrast-gray: #646569;
       display: none;
     }
     .mat-checkbox-ripple {
-      @include rounded-border($focus-color);
+      @include rounded-border();
       height: 22px;
       width: 22px;
       left: calc(50% - 13px);
@@ -80,13 +73,13 @@ $contrast-gray: #646569;
 }
 
 .adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected > svg {
-  fill: #1f74db !important;
+  fill: var(--theme-blue-button-color) !important;
 }
 
 .mat-list-base .mat-list-option:focus {
   background-color: white;
   .mat-list-item-content {
-    border: 2px solid #1f74db;
+    border: 2px solid var(--theme-blue-button-color);
   }
 }
 
@@ -95,7 +88,7 @@ $contrast-gray: #646569;
     display: none;
   }
   &:focus {
-    @include rounded-border($focus-color);
+    @include rounded-border();
     background-color: white;
   }
   &.cdk-keyboard-focused:not([disabled]) {
@@ -106,7 +99,7 @@ $contrast-gray: #646569;
 .mat-option {
   &.cdk-focused {
     .mat-option-ripple {
-      @include rounded-border($focus-color);
+      @include rounded-border();
     }
   }
 }
@@ -130,7 +123,7 @@ $contrast-gray: #646569;
 
   &.mat-primary.mat-checked:not(.mat-disabled) {
     .mat-slide-toggle-bar {
-      background-color: $focus-color;
+      background-color: var(--theme-blue-button-color);
     }
     .mat-slide-toggle-thumb {
       background-color: white;
@@ -142,15 +135,15 @@ $contrast-gray: #646569;
   }
   &.cdk-focused {
     .mat-slide-toggle-bar {
-      border: 2px solid $focus-color;
+      border: 2px solid var(--theme-blue-button-color);
     }
   }
 }
 
 .mat-stroked-button, .mat-flat-button {
   &.cdk-focused {
     .mat-button-ripple.mat-ripple {
-      border: 2px solid $focus-color;
+      border: 2px solid var(--theme-blue-button-color);
       top: -4px;
       left: -4px;
       bottom: -4px;
@@ -162,14 +155,14 @@ $contrast-gray: #646569;
 .mat-option {
   &.cdk-focused {
     .mat-option-ripple {
-      @include rounded-border($focus-color);
+      @include rounded-border();
     }
   }
 }
 
 .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) {
   background-color: white !important;
-  border: 2px solid $focus-color;
+  border: 2px solid var(--theme-blue-button-color);
 }
 
 .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
@@ -178,7 +171,7 @@ $contrast-gray: #646569;
 
 .mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]) {
   background-color: white;
-  border: 2px solid $focus-color;
+  border: 2px solid var(--theme-blue-button-color);
 }
 
 .adf-error-snackbar {
@@ -190,7 +183,7 @@ $contrast-gray: #646569;
 }
 
 .adf-info-snackbar {
-  background-color: $focus-color;
+  background-color: var(--theme-blue-button-color);
 
   .mat-simple-snackbar, .mat-simple-snackbar-action {
       color: white;
@@ -200,3 +193,4 @@ $contrast-gray: #646569;
 .adf-empty-content__icon {
   color: $contrast-gray;
 }
+