Updated Core Stylings

primefaces · Mar 7, 2024 · 9cb51c7 · 9cb51c7
1 parent 069347e
commit 9cb51c7
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 8 deletions.
diff --git a/theme-base/components/input/_checkbox.scss b/theme-base/components/input/_checkbox.scss
@@ -1,21 +1,31 @@
 //core
 .p-checkbox {
+    position: relative;
     display: inline-flex;
-    cursor: pointer;
     user-select: none;
     vertical-align: bottom;
-    position: relative;
 }
 
-.p-checkbox.p-checkbox-disabled {
-    cursor: auto;
+.p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
 }
 
 .p-checkbox-box {
     display: flex;
     justify-content: center;
     align-items: center;
-}  
+}
 
 // theme
 .p-checkbox {

diff --git a/theme-base/components/input/_inputswitch.scss b/theme-base/components/input/_inputswitch.scss
@@ -6,6 +6,21 @@
     display: inline-block;
 }
 
+.p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+}
+
 .p-inputswitch-slider {
     position: absolute;
     cursor: pointer;
@@ -18,7 +33,7 @@
 
 .p-inputswitch-slider:before {
     position: absolute;
-    content: "";
+    content: '';
     top: 50%;
 }
 

diff --git a/theme-base/components/input/_radiobutton.scss b/theme-base/components/input/_radiobutton.scss
@@ -1,11 +1,15 @@
 //core
 .p-radiobutton {
+    position: relative;
     display: inline-flex;
-    cursor: pointer;
     user-select: none;
     vertical-align: bottom;
 }
 
+.p-radiobutton-input {
+    cursor: pointer;
+}
+
 .p-radiobutton-box {
     display: flex;
     justify-content: center;
@@ -20,7 +24,7 @@
     visibility: hidden;
 }
 
-.p-radiobutton-box.p-highlight .p-radiobutton-icon {
+.p-radiobutton.p-highlight .p-radiobutton-icon {
     transform: translateZ(0) scale(1.0, 1.0);
     visibility: visible;
 }

diff --git a/theme-base/components/input/_togglebutton.scss b/theme-base/components/input/_togglebutton.scss
@@ -1,3 +1,18 @@
+//core
+.p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-togglebutton-input {
+    cursor: pointer;
+}
+
+.p-togglebutton .p-button {
+    flex: 1 1 auto;
+}
 //theme
 .p-togglebutton {
     .p-togglebutton-input {

diff --git a/theme-base/components/input/_tristatecheckbox.scss b/theme-base/components/input/_tristatecheckbox.scss
@@ -1,3 +1,22 @@
+//core
+.p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-checkbox-input {
+    cursor: pointer;
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+//theme
 .p-tristatecheckbox {
     &.p-variant-filled {
         .p-checkbox-box {