fix(project): fix checkbox styling to meet designs

jwplayer · Aug 4, 2021 · 44e2691 · 44e2691
1 parent a680510
commit 44e2691
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/src/components/Checkbox/Checkbox.module.scss b/src/components/Checkbox/Checkbox.module.scss
@@ -59,13 +59,13 @@
     vertical-align: middle;
     border-radius: 2px;
     cursor: pointer;
-    transition: all 0.5s;
+    transition: all 0.3s;
     appearance: none;
 
     &::before {
       display: inline-block;
       font-family: system-ui;
-      font-weight: 900;
+      font-weight: 600;
       font-size: 0;
       content: 'L';
     }
@@ -91,10 +91,13 @@
     }
 
     &:checked {
-      background-color: var(--primary-color);
+      background-color: theme.$forms-checkbox-bg;
       &::before {
-        font-size: 16px;
-        transform: translateY(-1px) scaleX(-1) rotate(-45deg);
+        font-size: 20px;
+        transform: translateY(-3px) translateX(1px) scaleX(-0.95) rotate(-45deg);
+      }
+      &:hover {
+        background-color: theme.$forms-checkbox-bg-hover;
       }
     }
   }

diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
@@ -206,5 +206,5 @@ $panel-header-border-bottom: 1px solid rgba(255, 255, 255, 0.32);
 // Forms
 $forms-primary-color: rgb(1, 163, 157);
 $forms-primary-color-hover: rgba(1, 163, 157, 0.8);
-$forms-checkbox-bg: #cccccc;
-$forms-checkbox-bg-hover: #eeeeee;
+$forms-checkbox-bg: rgb(1, 163, 157);
+$forms-checkbox-bg-hover: rgba(1, 163, 157, 0.7);