feat: add new realization for checkboxes

Author: mikhailovSvyat

src/v2/img/sprites/svg/common/icon-checkmark.svg

@@ -13,5 +13,35 @@
         }
       }
     }
+
+    &._svg {
+      .control__indicator {
+        position: relative;
+
+        .svg-icon._icon-checkmark {
+          display: none;
+          position: absolute;
+          top: 2px;
+          left: 2px;
+          width: 16px;
+          height: 16px;
+          fill: $white;
+        }
+      }
+
+      .control__input {
+        &:checked ~ .control__indicator {
+          background-image: none;
+
+          ._icon-checkmark {
+            display: block;
+          }
+        }
+      }
+
+      .control__description {
+        margin-left: 6px;
+      }
+    }
   }
 }

src/v2/scss/components/_forms/_checkbox.scss

@@ -23,6 +23,11 @@
 	height: 32px;
 }
 
+.sprite-img._icon-checkmark {
+	width: 24px;
+	height: 24px;
+}
+
 .sprite-img._icon-facebook {
 	width: 24px;
 	height: 24px;

src/v2/scss/sprites/_common.scss

@@ -6,25 +6,52 @@
     <div class="container page-content">
         <div class="row">
             <div class="col-lg-9">
-                <h2>States</h2>
+                <h2>Bg-img realization</h2>
                 <table>
                     <tr>
                         <td>
-                            Enabled Selected<br>
                             <label class="ui option checkbox">
-                                <input type="checkbox" class="control__input">
+                                <input type="checkbox" class="control__input" checked>
                                 <span class="control__indicator"></span>
+                                <span class="control__description">Enabled Selected</span>
                             </label>
 
                         </td>
                         <td>
-                            Disabled Selected
+                            <label class="ui option checkbox disabled">
+                                <input type="checkbox" class="control__input" checked disabled>
+                                <span class="control__indicator"></span>
+                                <span class="control__description">Disabled Selected</span>
+                            </label>
                         </td>
-                        <td>Hover Selected</td>
-                        <td>Focus Selected</td>
-                        <td>Pressed Selected</td>
                     </tr>
                 </table>
+              <br>
+              <br>
+                <h2>Svg realization</h2>
+                <table>
+                  <tr>
+                    <td>
+                      <label class="ui option checkbox _svg">
+                        <input type="checkbox" class="control__input" checked>
+                        <span class="control__indicator">
+                          {{ macros.svg_icon('checkmark') }}
+                        </span>
+                        <span class="control__description">Enabled Selected</span>
+                      </label>
+
+                    </td>
+                    <td>
+                      <label class="ui option checkbox _svg disabled">
+                        <input type="checkbox" class="control__input" checked disabled>
+                        <span class="control__indicator">
+                          {{ macros.svg_icon('checkmark') }}
+                        </span>
+                        <span class="control__description">Disabled Selected</span>
+                      </label>
+                    </td>
+                  </tr>
+                </table>
             </div>
         </div>
     </div>