Merge pull request primefaces#126 from primefaces/issue-125

Issue 125 - Add variant styles
pip25 · Apr 30, 2024 · f875d90 · f875d90
2 parents 965646e + 1be9481
commit f875d90
Show file tree

Hide file tree

Showing 13 changed files with 189 additions and 6 deletions.
diff --git a/theme-base/components/data/_tree.scss b/theme-base/components/data/_tree.scss
@@ -37,6 +37,28 @@
 							color: $textColor;
 						}
 					}
+
+                    &.p-variant-filled {
+                        .p-checkbox-box {
+                            background-color: $inputFilledBg;
+
+                            &.p-highlight {
+                                background: $checkboxActiveBg;
+                            }
+                        }
+
+                        &:not(.p-disabled) {
+                            .p-checkbox-box {
+                                &:hover {
+                                    background-color: $inputFilledHoverBg;
+                                }
+
+                                &.p-highlight:hover {
+                                    background: $checkboxActiveHoverBg;
+                                }
+                            }
+                        }
+                    }
 				}
 
 				&.p-highlight {

diff --git a/theme-base/components/data/_treetable.scss b/theme-base/components/data/_treetable.scss
@@ -115,6 +115,28 @@
                             color: $textColor;
                         }
                     }
+
+                    &.p-variant-filled {
+                        .p-checkbox-box {
+                            background-color: $inputFilledBg;
+
+                            &.p-highlight {
+                                background: $checkboxActiveBg;
+                            }
+                        }
+
+                        &:not(.p-disabled) {
+                            .p-checkbox-box {
+                                &:hover {
+                                    background-color: $inputFilledHoverBg;
+                                }
+
+                                &.p-highlight:hover {
+                                    background: $checkboxActiveHoverBg;
+                                }
+                            }
+                        }
+                    }
                 }
             }
 

diff --git a/theme-base/components/input/_cascadeselect.scss b/theme-base/components/input/_cascadeselect.scss
@@ -39,6 +39,18 @@
     &.p-invalid.p-component {
         @include invalid-input();
     }
+
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
 }
 
 .p-cascadeselect-panel {

diff --git a/theme-base/components/input/_checkbox.scss b/theme-base/components/input/_checkbox.scss
@@ -46,6 +46,28 @@
             }
         }
     }
+
+    &.p-variant-filled {
+        .p-checkbox-box {
+            background-color: $inputFilledBg;
+
+            &.p-highlight {
+                background: $checkboxActiveBg;
+            }
+        }
+
+        &:not(.p-checkbox-disabled) {
+            .p-checkbox-box {
+                &:hover {
+                    background-color: $inputFilledHoverBg;
+                }
+
+                &.p-highlight:hover {
+                    background: $checkboxActiveHoverBg;
+                }
+            }
+        }
+    }
 }
 
 p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
@@ -61,13 +83,11 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
                 background: $checkboxActiveBg;
             }
         }
-
         &:not(.p-checkbox-disabled) {
             .p-checkbox-box {
                 &:hover {
                     background-color: $inputFilledHoverBg;
                 }
-
                 &.p-highlight:hover {
                     background: $checkboxActiveHoverBg;
                 }

diff --git a/theme-base/components/input/_dropdown.scss b/theme-base/components/input/_dropdown.scss
@@ -49,6 +49,18 @@
     &.p-invalid.p-component {
         @include invalid-input();
     }
+
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
 }
 
 .p-dropdown-panel {

diff --git a/theme-base/components/input/_inputmask.scss b/theme-base/components/input/_inputmask.scss
@@ -13,4 +13,18 @@ p-inputmask.p-inputmask-clearable {
         color: $inputIconColor;
         right: nth($inputPadding, 2);
     }
+}
+
+.p-inputmask {
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
 }
diff --git a/theme-base/components/input/_inputnumber.scss b/theme-base/components/input/_inputnumber.scss
@@ -25,4 +25,18 @@ p-inputnumber.p-inputnumber-clearable {
            right: $buttonIconOnlyWidth + nth($inputPadding, 2);
         }
     }
+}
+
+p-inputnumber.p-inputnumber {
+    &.p-variant-filled > .p-inputnumber-input {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
 }
diff --git a/theme-base/components/input/_inputtext.scss b/theme-base/components/input/_inputtext.scss
@@ -22,6 +22,18 @@
         @include invalid-input();
     }
 
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+
     &.p-inputtext-sm {
         @include scaledFontSize($inputTextFontSize, $scaleSM);
         @include scaledPadding($inputPadding, $scaleSM);

diff --git a/theme-base/components/input/_multiselect.scss b/theme-base/components/input/_multiselect.scss
@@ -45,6 +45,17 @@
         border-bottom-right-radius: $borderRadius;
     }
 
+    &.p-variant-filled {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
 }
 
 .p-inputwrapper-filled {

diff --git a/theme-base/components/input/_radiobutton.scss b/theme-base/components/input/_radiobutton.scss
@@ -38,6 +38,24 @@
             }
         }
     }
+
+    &.p-variant-filled {
+        .p-radiobutton-box {
+            background-color: $inputFilledBg;
+
+            &:not(.p-disabled):hover {
+                background-color: $inputFilledHoverBg;
+            }
+
+            &.p-highlight {
+                background: $radiobuttonActiveBg;
+
+                &:not(.p-disabled):hover {
+                    background: $radiobuttonActiveHoverBg;
+                }
+            }
+        }
+    }
 }
 
 p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {

diff --git a/theme-base/components/input/_treeselect.scss b/theme-base/components/input/_treeselect.scss
@@ -40,6 +40,18 @@
         border-top-right-radius: $borderRadius;
         border-bottom-right-radius: $borderRadius;
     }
+
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
 }
 
 p-treeselect.ng-invalid.ng-dirty > .p-treeselect {

diff --git a/themes/material/extensions/_checkbox.scss b/themes/material/extensions/_checkbox.scss
@@ -51,13 +51,11 @@
             box-shadow: 0 0 1px 10px rgba($checkboxActiveBg, .12);
         }
     }
-}
 
-.p-input-filled {
-    .p-checkbox {
+    &.p-variant-filled {
         .p-checkbox-box {
             background-color: $inputBg;
-
+    
             &:not(.p-disabled):hover {
                 background-color: $inputBg;
             }

diff --git a/themes/material/extensions/_dropdown.scss b/themes/material/extensions/_dropdown.scss
@@ -11,6 +11,22 @@
     &:not(.p-disabled).p-focus {
         box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
     }
+
+    &.p-variant-filled {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+
+            .p-inputtext {
+                background-color: transparent;
+            }
+        }
+    }
 }
 
 .p-dropdown-item {