fix(Checkbox): colors and disabled

TheComputerM · Aug 24, 2020 · a499dec · a499dec
1 parent 3fffdec
commit a499dec
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 21 deletions.
diff --git a/packages/docs/src/examples/components/checkboxes/colors.svelte b/packages/docs/src/examples/components/checkboxes/colors.svelte
@@ -4,9 +4,9 @@
 
 <Checkbox activeClass="red-text">Red when active.</Checkbox>
 <Checkbox class="blue-text" activeClass="blue-text">Always blue.</Checkbox>
-<Checkbox class="green-text" activeClass="green-text">
-  <span class="text--primary">Always green, but not the text.</span>
-</Checkbox>
-<Checkbox class="cyan-text" activeClass="indigo-text">
-  Cyan to indigo.
-</Checkbox>
+<br />
+<div class="d-flex justify-space-between">
+  <Checkbox checked activeClass="secondary-text">secondary</Checkbox>
+  <Checkbox checked activeClass="error-text">error</Checkbox>
+  <Checkbox checked activeClass="success-text">success</Checkbox>
+</div>
diff --git a/packages/svelte-materialify/src/components/Checkbox/Checkbox.scss b/packages/svelte-materialify/src/components/Checkbox/Checkbox.scss
@@ -4,12 +4,11 @@
   display: flex;
   align-items: center;
   position: relative;
-  color: var(--theme-text-secondary);
 }
 
 .s-checkbox__wrapper {
   overflow: unset !important;
-  color: inherit;
+  color: var(--theme-text-secondary);
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -18,7 +17,6 @@
   width: $checkbox-size;
   position: relative;
   user-select: none;
-  cursor: pointer;
   border-radius: 100%;
 
   &::before {
@@ -37,8 +35,17 @@
     opacity: 0;
   }
 
-  &:hover::before {
-    opacity: 0.15;
+  &:not(.disabled) {
+    cursor: pointer;
+
+    &:hover::before {
+      opacity: 0.16;
+    }
+  }
+
+  &.disabled {
+    opacity: $checkbox-disabled-opacity;
+    color: var(--theme-controls-disabled) !important;
   }
 }
 
@@ -51,7 +58,7 @@
   border-radius: 2px;
   color: inherit;
   background-color: transparent;
-  transition: 0.3s map-get($transitions, "swing");
+  transition: background-color 0.3s map-get($transitions, "swing");
   pointer-events: none;
 }
 
@@ -80,16 +87,13 @@ input {
   margin: 0;
   padding: 0;
 
-  &:disabled ~ .s-checkbox__background {
-    color: var(--theme-controls-disabled) !important;
-  }
-
   &:checked ~ .s-checkbox__background,
   &:indeterminate ~ .s-checkbox__background {
     background-color: currentColor;
+    border: none;
   }
 }
 
 label {
-  padding-left: 8px;
+  padding-left: 12px;
 }
diff --git a/packages/svelte-materialify/src/components/Checkbox/Checkbox.svelte b/packages/svelte-materialify/src/components/Checkbox/Checkbox.svelte
@@ -5,7 +5,7 @@
   };
 
   const check = 'M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z';
-  const dash = 'M4,10.5L4,13.5L20,13.5L20,10.5L4,10.5Z';
+  const dash = 'M4,11L4,13L20,13L20,11L4,11Z';
 </script>
 
 <script>
@@ -63,9 +63,10 @@
 
 </style>
 
-<div class="s-checkbox {classes}" {style}>
+<div class="s-checkbox" {style}>
   <div
-    class="s-checkbox__wrapper {checked || indeterminate ? activeClass : ''}"
+    class="s-checkbox__wrapper {classes} {checked || indeterminate ? activeClass : ''}"
+    class:disabled
     use:Ripple={{ centered: true }}>
     <input
       type="checkbox"
@@ -77,7 +78,7 @@
       {value}
       on:change={groupUpdate}
       on:change />
-    <div class="s-checkbox__background">
+    <div class="s-checkbox__background" aria-hidden="true">
       {#if checked || indeterminate}
         <svg
           xmlns="http://www.w3.org/2000/svg"