Revert "Moved core stylings to sass theme and updated themes"

This reverts commit be3a717.
melloware · Mar 7, 2024 · 50689b5 · 50689b5
1 parent be3a717
commit 50689b5
Show file tree

Hide file tree

Showing 53 changed files with 4,161 additions and 17,591 deletions.
diff --git a/components/lib/checkbox/CheckboxBase.js b/components/lib/checkbox/CheckboxBase.js
@@ -17,6 +17,26 @@ const classes = {
         })
 };
 
+const styles = `
+.p-checkbox {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: bottom;
+    position: relative;
+}
+
+.p-checkbox.p-checkbox-disabled {
+    cursor: auto;
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}        
+`;
+
 export const CheckboxBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Checkbox',
@@ -45,6 +65,7 @@ export const CheckboxBase = ComponentBase.extend({
         children: undefined
     },
     css: {
-        classes
+        classes,
+        styles
     }
 });
diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js
@@ -95,6 +95,25 @@ const buttonStyles = `
     z-index: 1;
 }
 `;
+const checkboxStyles = `
+.p-checkbox {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: bottom;
+    position: relative;
+}
+
+.p-checkbox.p-checkbox-disabled {
+    cursor: auto;
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+`;
 const inputTextStyles = `
 .p-inputtext {
     margin: 0;
@@ -202,6 +221,34 @@ const inputTextStyles = `
     display: block;
     width: 100%;
 }
+`;
+const radioButtonStyles = `
+.p-radiobutton {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(.1);
+    border-radius: 50%;
+    visibility: hidden;
+}
+
+.p-radiobutton-box.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1.0, 1.0);
+    visibility: visible;
+}
+
 `;
 const iconStyles = `
 .p-icon {
@@ -409,7 +456,9 @@ const commonStyle = `
     }
 
     ${buttonStyles}
+    ${checkboxStyles}
     ${inputTextStyles}
+    ${radioButtonStyles}
     ${iconStyles}
 }
 `;

diff --git a/components/lib/inputswitch/InputSwitchBase.js b/components/lib/inputswitch/InputSwitchBase.js
@@ -11,6 +11,30 @@ const classes = {
     slider: 'p-inputswitch-slider'
 };
 
+const styles = `
+@layer primereact {
+    .p-inputswitch {
+        position: relative;
+        display: inline-block;
+    }
+    
+    .p-inputswitch-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border: 1px solid transparent;
+    }
+    
+    .p-inputswitch-slider:before {
+        position: absolute;
+        content: "";
+        top: 50%;
+    }
+}
+`;
 
 export const InputSwitchBase = ComponentBase.extend({
     defaultProps: {
@@ -35,6 +59,7 @@ export const InputSwitchBase = ComponentBase.extend({
         children: undefined
     },
     css: {
-        classes
+        classes,
+        styles
     }
 });
diff --git a/components/lib/radiobutton/RadioButtonBase.js b/components/lib/radiobutton/RadioButtonBase.js
@@ -17,6 +17,36 @@ const classes = {
     icon: 'p-radiobutton-icon'
 };
 
+const styles = `
+@layer primereact {
+    .p-radiobutton {
+        display: inline-flex;
+        cursor: pointer;
+        user-select: none;
+        vertical-align: bottom;
+    }
+    
+    .p-radiobutton-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    
+    .p-radiobutton-icon {
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        transform: translateZ(0) scale(.1);
+        border-radius: 50%;
+        visibility: hidden;
+    }
+    
+    .p-radiobutton-box.p-highlight .p-radiobutton-icon {
+        transform: translateZ(0) scale(1.0, 1.0);
+        visibility: visible;
+    }
+}
+`;
+
 export const RadioButtonBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'RadioButton',
@@ -39,6 +69,7 @@ export const RadioButtonBase = ComponentBase.extend({
         children: undefined
     },
     css: {
-        classes
+        classes,
+        styles
     }
 });