Refactor #49

primefaces · Jan 14, 2024 · 3520a5c · 3520a5c
1 parent ff3f179
commit 3520a5c
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 55 deletions.
diff --git a/theme-base/components/input/_togglebutton.scss b/theme-base/components/input/_togglebutton.scss
@@ -1,10 +1,4 @@
-.p-togglebutton.p-button {
-    background: $toggleButtonBg;
-    border: $toggleButtonBorder;
-    color: $toggleButtonTextColor;
-    transition: $formElementTransition;
-    outline-color: transparent;
-
+.p-togglebutton {
     .p-togglebutton-input {
         appearance: none;
         position: absolute;
@@ -21,53 +15,69 @@
         border-radius: $borderRadius;
     }
 
-    .p-button-icon-left,
-    .p-button-icon-right {
-        color: $toggleButtonIconColor;
+    .p-button {
+        background: $toggleButtonBg;
+        border: $toggleButtonBorder;
+        color: $toggleButtonTextColor;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconColor;
+        }
     }
 
     &.p-highlight {
-        background: $toggleButtonActiveBg;
-        border-color: $toggleButtonActiveBorderColor;
-        color: $toggleButtonTextActiveColor;
+        .p-button {
+            background: $toggleButtonActiveBg;
+            border-color: $toggleButtonActiveBorderColor;
+            color: $toggleButtonTextActiveColor;
 
-        .p-button-icon-left,
-        .p-button-icon-right {
-            color: $toggleButtonIconActiveColor;
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconActiveColor;
+            }
         }
     }
 
     &:not(.p-disabled) {
-        &:hover {
+        &:has(.p-togglebutton-input:hover) {
             &:not(.p-highlight) {
-                background: $toggleButtonHoverBg;
-                border-color: $toggleButtonHoverBorderColor;
-                color: $toggleButtonTextHoverColor;
+                .p-button {
+                    background: $toggleButtonHoverBg;
+                    border-color: $toggleButtonHoverBorderColor;
+                    color: $toggleButtonTextHoverColor;
 
-                .p-button-icon-left,
-                .p-button-icon-right {
-                    color: $toggleButtonIconHoverColor;
+                    .p-button-icon-left,
+                    .p-button-icon-right {
+                        color: $toggleButtonIconHoverColor;
+                    }
                 }
             }
 
             &.p-highlight {
-                background: $toggleButtonActiveHoverBg;
-                border-color: $toggleButtonActiveHoverBorderColor;
-                color: $toggleButtonTextActiveHoverColor;
+                .p-button {
+                    background: $toggleButtonActiveHoverBg;
+                    border-color: $toggleButtonActiveHoverBorderColor;
+                    color: $toggleButtonTextActiveHoverColor;
 
-                .p-button-icon-left,
-                .p-button-icon-right {
-                    color: $toggleButtonIconActiveHoverColor;
+                    .p-button-icon-left,
+                    .p-button-icon-right {
+                        color: $toggleButtonIconActiveHoverColor;
+                    }
                 }
             }
         }
 
         &:has(.p-togglebutton-input:focus-visible) {
-            @include focused-input();
+            .p-button {
+                @include focused-input();
+            }
         }
     }
 
-    &.p-invalid {
+    &.p-invalid > .p-button {
         @include invalid-input();
     }
 }
diff --git a/themes/aura/aura-light/extensions/_togglebutton.scss b/themes/aura/aura-light/extensions/_togglebutton.scss
@@ -1,26 +1,30 @@
-.p-togglebutton.p-button {
-    .p-button-label,
-    .p-button-icon {
-        position: relative;
-    }
+.p-togglebutton {
+    .p-button {
+        .p-button-label,
+        .p-button-icon {
+            position: relative;
+        }
 
-    &::before {
-        content: '';
-        background-color: transparent;
-        transition: $formElementTransition;
-        position: absolute;
-        left: .25rem;
-        top: .25rem;
-        width: calc(100% - .5rem);
-        height: calc(100% - .5rem);
-        border-radius: 4px;
+        &::before {
+            content: '';
+            background-color: transparent;
+            transition: $formElementTransition;
+            position: absolute;
+            left: .25rem;
+            top: .25rem;
+            width: calc(100% - .5rem);
+            height: calc(100% - .5rem);
+            border-radius: 4px;
+        }
     }
 
     &.p-highlight {
-        &::before {
-            background: $shade000;
-            border-color: $shade000;
-            box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
+        .p-button {
+            &::before {
+                background: $shade000;
+                border-color: $shade000;
+                box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
+            }
         }
     }
 }
diff --git a/themes/material/extensions/_togglebutton.scss b/themes/material/extensions/_togglebutton.scss
@@ -1,12 +1,16 @@
-.p-togglebutton.p-button {
+.p-togglebutton {
     &:not(.p-disabled) {
         &:has(.p-togglebutton-input:focus-visible) {
-            background: $toggleButtonActiveBg;
-            border-color: $toggleButtonActiveBorderColor;
+            .p-button {
+                background: $toggleButtonActiveBg;
+                border-color: $toggleButtonActiveBorderColor;
+            }
 
             &.p-highlight {
-                background: $toggleButtonActiveHoverBg;
-                border-color: $toggleButtonActiveHoverBorderColor;
+                .p-button {
+                    background: $toggleButtonActiveHoverBg;
+                    border-color: $toggleButtonActiveHoverBorderColor;
+                }
             }
         }
     }