- small visual bugs

AmerTm · Jun 13, 2019 · 6ec78a4 · 6ec78a4
1 parent b3bdb08
commit 6ec78a4
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 19 deletions.
diff --git a/src/assets/jss/material-kit-react/components/paginationStyle.jsx b/src/assets/jss/material-kit-react/components/paginationStyle.jsx
@@ -21,6 +21,7 @@ const paginationStyle = {
     ":first-of-type": {
       marginleft: "0"
     },
+    letterSpacing: "unset",
     border: "0",
     borderRadius: "30px !important",
     transition: "all .3s",

diff --git a/src/assets/jss/material-kit-react/customCheckboxRadioSwitch.jsx b/src/assets/jss/material-kit-react/customCheckboxRadioSwitch.jsx
@@ -7,10 +7,19 @@ import {
 
 const customCheckboxRadioSwitch = {
   checkRoot: {
-    padding: "14px"
+    padding: "12px",
+    "&:hover": {
+      backgroundColor: "unset"
+    }
   },
   radioRoot: {
-    padding: "16px"
+    padding: "12px",
+    "&:hover": {
+      backgroundColor: "unset"
+    }
+  },
+  labelRoot: {
+    marginLeft: "-14px"
   },
   checkboxAndRadio: {
     position: "relative",
@@ -57,7 +66,8 @@ const customCheckboxRadioSwitch = {
     lineHeight: "1.428571429",
     fontWeight: "400",
     display: "inline-flex",
-    transition: "0.3s ease all"
+    transition: "0.3s ease all",
+    letterSpacing: "unset"
   },
   labelHorizontal: {
     color: "rgba(0, 0, 0, 0.26)",
@@ -161,6 +171,9 @@ const customCheckboxRadioSwitch = {
     "& $switchIcon": {
       borderColor: "#9c27b0"
     }
+  },
+  switchRoot: {
+    height: "48px"
   }
 };
 

diff --git a/src/views/Components/Sections/SectionBasics.jsx b/src/views/Components/Sections/SectionBasics.jsx
@@ -237,10 +237,11 @@ class SectionBasics extends React.Component {
                         onClick={() => this.handleToggle(21)}
                         checkedIcon={<Check className={classes.checkedIcon} />}
                         icon={<Check className={classes.uncheckedIcon} />}
-                        classes={{ checked: classes.checked }}
+                        classes={{ checked: classes.checked, root: classes.checkRoot }}
                       />
                     }
-                    classes={{ label: classes.label }}
+                    classes={{ label: classes.label,
+                    root: classes.labelRoot }}
                     label="Unchecked"
                   />
                 </div>
@@ -261,10 +262,11 @@ class SectionBasics extends React.Component {
                         }
                         checkedIcon={<Check className={classes.checkedIcon} />}
                         icon={<Check className={classes.uncheckedIcon} />}
-                        classes={{ checked: classes.checked }}
+                        classes={{ checked: classes.checked, root: classes.checkRoot }}
                       />
                     }
-                    classes={{ label: classes.label }}
+                    classes={{ label: classes.label,
+                    root: classes.labelRoot }}
                     label="Checked"
                   />
                 </div>
@@ -282,12 +284,13 @@ class SectionBasics extends React.Component {
                         tabIndex={-1}
                         checkedIcon={<Check className={classes.checkedIcon} />}
                         icon={<Check className={classes.uncheckedIcon} />}
-                        classes={{ checked: classes.checked }}
+                        classes={{ checked: classes.checked, root: classes.checkRoot }}
                       />
                     }
                     classes={{
                       label: classes.label,
-                      disabled: classes.disabledCheckboxAndRadio
+                      disabled: classes.disabledCheckboxAndRadio,
+                      root: classes.labelRoot
                     }}
                     label="Disabled Unchecked"
                   />
@@ -309,12 +312,13 @@ class SectionBasics extends React.Component {
                         }
                         checkedIcon={<Check className={classes.checkedIcon} />}
                         icon={<Check className={classes.uncheckedIcon} />}
-                        classes={{ checked: classes.checked }}
+                        classes={{ checked: classes.checked, root: classes.checkRoot }}
                       />
                     }
                     classes={{
                       label: classes.label,
-                      disabled: classes.disabledCheckboxAndRadio
+                      disabled: classes.disabledCheckboxAndRadio,
+                      root: classes.labelRoot
                     }}
                     label="Disabled Checked"
                   />
@@ -348,12 +352,14 @@ class SectionBasics extends React.Component {
                           <FiberManualRecord className={classes.radioChecked} />
                         }
                         classes={{
-                          checked: classes.radio
+                          checked: classes.radio,
+                          root: classes.radioRoot
                         }}
                       />
                     }
                     classes={{
-                      label: classes.label
+                      label: classes.label,
+                      root: classes.labelRoot
                     }}
                     label="First Radio"
                   />
@@ -382,12 +388,14 @@ class SectionBasics extends React.Component {
                           <FiberManualRecord className={classes.radioChecked} />
                         }
                         classes={{
-                          checked: classes.radio
+                          checked: classes.radio,
+                          root: classes.radioRoot
                         }}
                       />
                     }
                     classes={{
-                      label: classes.label
+                      label: classes.label,
+                      root: classes.labelRoot
                     }}
                     label="Second Radio"
                   />
@@ -417,12 +425,14 @@ class SectionBasics extends React.Component {
                         }
                         classes={{
                           checked: classes.radio,
-                          disabled: classes.disabledCheckboxAndRadio
+                          disabled: classes.disabledCheckboxAndRadio,
+                          root: classes.radioRoot
                         }}
                       />
                     }
                     classes={{
-                      label: classes.label
+                      label: classes.label,
+                      root: classes.labelRoot
                     }}
                     label="Disabled Unchecked Radio"
                   />
@@ -452,11 +462,13 @@ class SectionBasics extends React.Component {
                         }
                         classes={{
                           checked: classes.radio,
-                          disabled: classes.disabledCheckboxAndRadio
+                          disabled: classes.disabledCheckboxAndRadio,
+                          root: classes.radioRoot
                         }}
                       />
                     }
-                    classes={{ label: classes.label }}
+                    classes={{ label: classes.label,
+                    root: classes.labelRoot }}
                     label="Disabled Checked Radio"
                   />
                 </div>