From 91502a25a4feaec60891ee5f7b7623fe4e05e0a8 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 22 Mar 2019 13:49:58 -0400
Subject: [PATCH] Add a css class to the checkbox indicator

---
 src/components/checkbox/checkbox.js   |  2 +-
 src/components/checkbox/checkbox.scss | 54 +++++++++++++--------------
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
index 324a7597d6..76e7e4f48d 100644
--- a/src/components/checkbox/checkbox.js
+++ b/src/components/checkbox/checkbox.js
@@ -36,7 +36,7 @@ export default {
     return (
       <label class="checkbox" {...wrapperProps}>
         <input type="checkbox" {...inputProps} />
-        <i />
+        <i class="checkbox-indicator" />
         {children && <span>{children}</span>}
       </label>
     )
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index 07b3f39e1d..4dfcfe3404 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -5,39 +5,39 @@
   display: inline-block;
   padding-left: 1.2em;
 
+  &-indicator::before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    content: '✔';
+    transition: color 200ms;
+    width: 1.1em;
+    height: 1.1em;
+    border-radius: $fallback--checkboxRadius;
+    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+    box-shadow: 0px 0px 2px black inset;
+    box-shadow: var(--inputShadow);
+    background-color: $fallback--fg;
+    background-color: var(--input, $fallback--fg);
+    vertical-align: top;
+    text-align: center;
+    line-height: 1.1em;
+    font-size: 1.1em;
+    color: transparent;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
   input[type=checkbox] {
     display: none;
 
-    & + i::before {
-      position: absolute;
-      left: 0;
-      top: 0;
-      display: block;
-      content: '✔';
-      transition: color 200ms;
-      width: 1.1em;
-      height: 1.1em;
-      border-radius: $fallback--checkboxRadius;
-      border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
-      box-shadow: 0px 0px 2px black inset;
-      box-shadow: var(--inputShadow);
-      background-color: $fallback--fg;
-      background-color: var(--input, $fallback--fg);
-      vertical-align: top;
-      text-align: center;
-      line-height: 1.1em;
-      font-size: 1.1em;
-      color: transparent;
-      overflow: hidden;
-      box-sizing: border-box;
-    }
-
-    &:checked + i::before {
+    &:checked + .checkbox-indicator::before {
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
 
-    &:disabled + i::before {
+    &:disabled + .checkbox-indicator::before {
       opacity: .5;
     }
   }
@@ -45,4 +45,4 @@
   & > span {
     margin-left: .5em;
   }
-}
\ No newline at end of file
+}