Added pointer and flex-direction

js-tasks-ru · Dec 28, 2024 · 337d450 · 337d450
1 parent 398dad4
commit 337d450
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 27 deletions.
diff --git a/07-lection5/03-toggler/index.html b/07-lection5/03-toggler/index.html
@@ -13,37 +13,40 @@
 
 <body>
     <div class="container">
-        <label class="toggler">
-            <input class="toggler__input" type="checkbox">
-            <div class="toggler__state">
-                <div class="toggler__control">
-                    <i class="toggler__icon" data-feather="circle"></i>
+        <div class="toggler__group">
+            <label class="toggler">
+                <input class="toggler__input" type="checkbox">
+                <div class="toggler__state">
+                    <div class="toggler__control">
+                        <i class="toggler__icon" data-feather="circle"></i>
+                    </div>
+                    <div class="toggler__label">Off</div>
                 </div>
-                <div class="toggler__label">Off</div>
-            </div>
-        </label>
-
-        <label class="toggler">
-            <input class="toggler__input" type="checkbox" checked>
-            <div class="toggler__state">
-                <div class="toggler__control">
-                    <i class="toggler__icon" data-feather="circle"></i>
+            </label>
+
+            <label class="toggler">
+                <input class="toggler__input" type="checkbox" checked>
+                <div class="toggler__state">
+                    <div class="toggler__control">
+                        <i class="toggler__icon" data-feather="circle"></i>
+                    </div>
+                    <div class="toggler__label">On</div>
                 </div>
-                <div class="toggler__label">On</div>
-            </div>
-        </label>
-
-        <label class="toggler">
-            <input class="toggler__input" type="checkbox" disabled>
-            <div class="toggler__state">
-                <div class="toggler__control">
-                    <i class="toggler__icon" data-feather="circle"></i>
+            </label>
+
+            <label class="toggler">
+                <input class="toggler__input" type="checkbox" disabled>
+                <div class="toggler__state">
+                    <div class="toggler__control">
+                        <i class="toggler__icon" data-feather="circle"></i>
+                    </div>
+                    <div class="toggler__label">Disabled</div>
                 </div>
-                <div class="toggler__label">Disabled</div>
-            </div>
-        </label>
+            </label>
+        </div>
     </div>
 
+
     <script>
         feather.replace();
     </script>

diff --git a/07-lection5/03-toggler/toggler.css b/07-lection5/03-toggler/toggler.css
@@ -1,6 +1,11 @@
-.toggler {
+.toggler__group {
     display: flex;
     flex-direction: column;
+    gap: 16px;
+}
+
+.toggler {
+    display: inline-block;
     position: relative;
 }
 
@@ -55,6 +60,7 @@
 .toggler__input:disabled ~ .toggler__state .toggler__control {
     border-color: var(--grey-2, #DDE2E5);
     background-color: var(--grey-2, #DDE2E5);
+    cursor: default;
 }
 
 .toggler__input:disabled ~ .toggler__state .toggler__icon {