feat: add new realization for checkboxes

cscenter · Jul 13, 2021 · e901657 · e901657
1 parent 9259224
commit e901657
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 1 deletion.
diff --git a/src/v2/img/sprites/svg/common/icon-checkmark.svg b/src/v2/img/sprites/svg/common/icon-checkmark.svg
diff --git a/src/v2/scss/components/_forms/_checkbox.scss b/src/v2/scss/components/_forms/_checkbox.scss
@@ -13,5 +13,31 @@
         }
       }
     }
+
+    &._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;
+          }
+        }
+      }
+    }
   }
 }
diff --git a/src/v2/scss/sprites/_common.scss b/src/v2/scss/sprites/_common.scss
@@ -23,6 +23,11 @@
 	height: 32px;
 }
 
+.sprite-img._icon-checkmark {
+	width: 24px;
+	height: 24px;
+}
+
 .sprite-img._icon-facebook {
 	width: 24px;
 	height: 24px;

diff --git a/templates/v2/components/forms/checkboxes.jinja2 b/templates/v2/components/forms/checkboxes.jinja2
@@ -18,13 +18,46 @@
 
                         </td>
                         <td>
-                            Disabled Selected
+                            Disabled Selected<br>
+                            <label class="ui option checkbox disabled">
+                                <input type="checkbox" class="control__input" checked disabled>
+                                <span class="control__indicator"></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>
+                      Enabled Selected<br>
+                      <label class="ui option checkbox _svg">
+                        <input type="checkbox" class="control__input">
+                        <span class="control__indicator">
+                          {{ macros.svg_icon('checkmark') }}
+                        </span>
+                      </label>
+
+                    </td>
+                    <td>
+                      Disabled Selected <br>
+                      <label class="ui option checkbox _svg disabled">
+                        <input type="checkbox" class="control__input" checked disabled>
+                        <span class="control__indicator">
+                          {{ macros.svg_icon('checkmark') }}
+                        </span>
+                      </label>
+                    </td>
+                    <td>Hover Selected</td>
+                    <td>Focus Selected</td>
+                    <td>Pressed Selected</td>
+                  </tr>
+                </table>
             </div>
         </div>
     </div>