fix(label): angular label adjustments

telerik · May 19, 2020 · 8afa893 · 8afa893
1 parent 3ce6602
commit 8afa893
Show file tree

Hide file tree

Showing 4 changed files with 151 additions and 0 deletions.
diff --git a/packages/default/scss/checkbox/_layout.scss b/packages/default/scss/checkbox/_layout.scss
@@ -124,6 +124,12 @@
     .k-checkbox-label > .k-checkbox {
         margin-right: $checkbox-label-margin-x;
     }
+    kendo-label.k-checkbox-label > .k-checkbox:last-child {
+        margin-right: 0;
+    }
+    kendo-label.k-checkbox-label > .k-label:first-child {
+        margin-right: $checkbox-label-margin-x;
+    }
 
     .k-checkbox-list {
         margin: $checkbox-list-margin;
@@ -163,6 +169,13 @@
             margin-right: 0;
             margin-left: $checkbox-label-margin-x;
         }
+        kendo-label.k-checkbox-label > .k-checkbox:last-child {
+            margin-left: 0;
+        }
+        kendo-label.k-checkbox-label > .k-label:first-child {
+            margin-right: 0;
+            margin-left: $checkbox-label-margin-x;
+        }
 
         .k-list-horizontal {
             .k-checkbox-item {

diff --git a/packages/default/scss/input/_layout.scss b/packages/default/scss/input/_layout.scss
@@ -281,6 +281,10 @@
 
 
     // Label
+    kendo-label > .k-label {
+        margin: 0;
+    }
+
     .k-label-optional {
         margin-left: $label-optional-margin-x;
         font-size: $label-optional-font-size;

diff --git a/packages/default/scss/radio/_layout.scss b/packages/default/scss/radio/_layout.scss
@@ -58,6 +58,10 @@
         position: relative;
         cursor: pointer;
 
+        .k-label {
+            cursor: pointer;
+        }
+
         // Hide empty label
         &:empty {
             display: none;
@@ -94,6 +98,12 @@
     .k-radio-label > .k-radio {
         margin-right: $radio-label-margin-x;
     }
+    kendo-label.k-radio-label > .k-radio:last-child {
+        margin-right: 0;
+    }
+    kendo-label.k-radio-label > .k-label:first-child {
+        margin-right: $radio-label-margin-x;
+    }
 
     .k-radio-list {
         margin: $radio-list-margin;
@@ -132,6 +142,13 @@
             margin-right: 0;
             margin-left: $radio-label-margin-x;
         }
+        kendo-label.k-radio-label > .k-radio:last-child {
+            margin-left: 0;
+        }
+        kendo-label.k-radio-label > .k-label:first-child {
+            margin-right: 0;
+            margin-left: $radio-label-margin-x;
+        }
 
         .k-list-horizontal {
             .k-radio-item {

diff --git a/tests/visual/label-angular.html b/tests/visual/label-angular.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="en" class="k-typography k-no-animations">
+<head>
+    <title>Label (Angular)</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" data-role="kendo-theme" href="../../packages/default/dist/all.css" />
+    <link rel="stylesheet" href="assets/styles.css" />
+    <script src="assets/scripts.js"></script>
+
+    <style>
+        #test-area {
+            grid-template-columns: repeat(4, 1fr);
+        }
+    </style>
+</head>
+<body>
+
+    <div id="test-area" class="grid">
+
+        <span>Checkbox</span>
+        <span>Radio</span>
+        <span dir="rtl">Checkbox (RTL)</span>
+        <span dir="rtl">Radio (RTL)</span>
+
+        <section>
+            <input type="checkbox" class="k-checkbox" checked>
+            <kendo-label class="k-checkbox-label">
+                <label class="k-label">Checked</label>
+            </kendo-label>
+        </section>
+
+        <section>
+            <input type="radio" class="k-radio" checked>
+            <kendo-label class="k-radio-label">
+                <label class="k-label">Checked</label>
+            </kendo-label>
+        </section>
+
+        <section dir="rtl">
+            <input type="checkbox" class="k-checkbox" checked>
+            <kendo-label class="k-checkbox-label" dir="rtl">
+                <label class="k-label">Checked</label>
+            </kendo-label>
+        </section>
+
+        <section dir="rtl">
+            <input type="radio" class="k-radio" checked>
+            <kendo-label class="k-radio-label" dir="rtl">
+                <label class="k-label">Checked</label>
+            </kendo-label>
+        </section>
+
+        <span>Input inside Label</span>
+        <span>Input inside Label</span>
+        <span dir="rtl">Input inside Label (RTL)</span>
+        <span dir="rtl">Input inside Label (RTL)</span>
+
+        <section>
+            <kendo-label class="k-checkbox-label">
+                <label class="k-label">Checked</label>
+                <input type="checkbox" class="k-checkbox" checked>
+            </kendo-label>
+
+            <br />
+
+            <kendo-label class="k-checkbox-label">
+                <input type="checkbox" class="k-checkbox" checked>
+                <label class="k-label">Checked</label>
+            </kendo-label>
+        </section>
+
+        <section>
+            <kendo-label class="k-radio-label">
+                <label class="k-label">Baz</label>
+                <input type="radio" class="k-radio" checked>
+            </kendo-label>
+
+            <br />
+
+            <kendo-label class="k-radio-label">
+                <input type="radio" class="k-radio" checked>
+                <label class="k-label">Baz</label>
+            </kendo-label>
+        </section>
+
+        <section dir="rtl">
+            <kendo-label class="k-checkbox-label" dir="rtl">
+                <label class="k-label">Checked</label>
+                <input type="checkbox" class="k-checkbox" checked>
+            </kendo-label>
+
+            <br />
+
+            <kendo-label class="k-checkbox-label" dir="rtl">
+                <input type="checkbox" class="k-checkbox" checked>
+                <label class="k-label">Checked</label>
+            </kendo-label>
+        </section>
+
+        <section dir="rtl">
+            <kendo-label class="k-radio-label" dir="rtl">
+                <label class="k-label">Baz</label>
+                <input type="radio" class="k-radio" checked>
+            </kendo-label>
+
+            <br />
+
+            <kendo-label class="k-radio-label" dir="rtl">
+                <input type="radio" class="k-radio" checked>
+                <label class="k-label">Baz</label>
+            </kendo-label>
+        </section>
+
+    </div>
+
+</body>
+</html>