Add a css class to the checkbox indicator

1 files changed, 27 insertions, 27 deletions

diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index 07b3f39e..4dfcfe34 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
+}