feat(badge): rework badge styles to use stacked styles

telerik · Aug 4, 2020 · 04c279f · 04c279f
1 parent efffbe8
commit 04c279f
Show file tree

Hide file tree

Showing 15 changed files with 117 additions and 65 deletions.
diff --git a/packages/bootstrap/scss/badge/_index.scss b/packages/bootstrap/scss/badge/_index.scss
@@ -3,6 +3,7 @@
 
 
 // Dependencies
+@import "../utils/_position.scss";
 @import "../icons/_index.scss";
 
 

diff --git a/packages/bootstrap/scss/map/_index.scss b/packages/bootstrap/scss/map/_index.scss
@@ -4,6 +4,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
+@import "../utils/_position.scss";
 @import "../button/_index.scss";
 @import "../scroller/_index.scss";
 @import "../icons/_index.scss";

diff --git a/packages/bootstrap/scss/utils/_index.scss b/packages/bootstrap/scss/utils/_index.scss
@@ -10,6 +10,7 @@
 @import "_flex.scss";
 @import "_float.scss";
 @import "_grid.scss";
+@import "_position.scss";
 @import "_spacing.scss";
 @import "_text.scss";
 @import "_transform.scss";
diff --git a/packages/bootstrap/scss/utils/_position.scss b/packages/bootstrap/scss/utils/_position.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/utils/_position.scss";
diff --git a/packages/default/scss/badge/_index.scss b/packages/default/scss/badge/_index.scss
@@ -3,6 +3,7 @@
 
 
 // Dependencies
+@import "../utils/_position.scss";
 @import "../icons/_index.scss";
 
 

diff --git a/packages/default/scss/badge/_layout.scss b/packages/default/scss/badge/_layout.scss
@@ -1,15 +1,14 @@
 @include exports( "badge/layout" ) {
 
     .k-badge {
-        padding: $badge-padding-y $badge-padding-x;
-        border-width: $badge-border-width;
+        padding: 0;
+        border-width: 0;
         border-style: solid;
         border-color: transparent;
         box-sizing: border-box;
         color: inherit;
         background-color: transparent;
-        font-size: $badge-font-size;
-        line-height: $badge-line-height;
+        font: inherit;
         text-align: center;
         white-space: nowrap;
         display: inline-flex;
@@ -24,12 +23,6 @@
     }
 
 
-    // Empty badge
-    .k-badge:empty {
-        padding: $badge-padding-y;
-    }
-
-
     // Links
     a.k-badge,
     .k-badge > a {
@@ -61,6 +54,14 @@
 
         &:empty { padding: $badge-padding-y-sm; }
     }
+    .k-badge-md {
+        padding: $badge-padding-y $badge-padding-x;
+        border-width: $badge-border-width;
+        font-size: $badge-font-size;
+        line-height: $badge-line-height;
+
+        &:empty { padding: $badge-padding-y; }
+    }
     .k-badge-lg {
         padding: $badge-padding-y-lg $badge-padding-x-lg;
         border-width: $badge-border-width-lg;
@@ -73,41 +74,44 @@
 
     // Badge shapes
     .k-badge-rounded {
-        @include border-radius( $badge-border-radius );
-
-        &-sm { @include border-radius( $badge-border-radius-sm ); }
-        &-lg { @include border-radius( $badge-border-radius-lg ); }
+        &.k-badge-sm { @include border-radius( $badge-border-radius-sm ); }
+        &.k-badge-md { @include border-radius( $badge-border-radius ); }
+        &.k-badge-lg { @include border-radius( $badge-border-radius-lg ); }
     }
     .k-badge-pill {
         border-radius: 5rem;
     }
     .k-badge-circle {
         padding: 0 !important; // sass-lint:disable-line no-important
-        width: $badge-size;
-        height: $badge-size;
         border-radius: 100%;
 
-        &-sm {
+        &.k-badge-sm {
             width: $badge-size-sm;
             height: $badge-size-sm;
         }
-        &-lg {
+        &.k-badge-md {
+            width: $badge-size;
+            height: $badge-size;
+        }
+        &.k-badge-lg {
             width: $badge-size-lg;
             height: $badge-size-lg;
         }
     }
     .k-badge-dot {
         padding: 0 !important;  // sass-lint:disable-line no-important
-        width: $badge-dot-size;
-        height: $badge-dot-size;
         border-radius: 100%;
         font-size: 0;
 
-        &-sm {
+        &.k-badge-sm {
             width: $badge-dot-size-sm;
             height: $badge-dot-size-sm;
         }
-        &-lg {
+        &.k-badge-md {
+            width: $badge-dot-size;
+            height: $badge-dot-size;
+        }
+        &.k-badge-lg {
             width: $badge-dot-size-lg;
             height: $badge-dot-size-lg;
         }
@@ -123,73 +127,52 @@
         overflow: visible;
     }
     @each $placement, $translate in ("inside": null, "edge": 50, "outside": 100) {
-        $infix: if( $placement == "edge", "", "-#{$placement}");
-
-        .k-badge#{$infix} {
-            &-top-start {
-                position: absolute;
-                z-index: 9999;
-                top: 0;
-                left: 0;
+
+        .k-badge-#{$placement} {
+            position: absolute;
+            z-index: 9999;
+
+            &.k-top-start {
                 @if $translate {
                     transform: translate( -1% * $translate, -1% * $translate );
                 }
             }
-            &-top-end {
-                position: absolute;
-                z-index: 9999;
-                top: 0;
-                right: 0;
+            &.k-top-end {
                 @if $translate {
                     transform: translate( 1% * $translate, -1% * $translate );
                 }
             }
-            &-bottom-start {
-                position: absolute;
-                z-index: 9999;
-                bottom: 0;
-                left: 0;
+            &.k-bottom-start {
                 @if $translate {
                     transform: translate( -1% * $translate, 1% * $translate );
                 }
             }
-            &-bottom-end {
-                position: absolute;
-                z-index: 9999;
-                bottom: 0;
-                right: 0;
+            &.k-bottom-end {
                 @if $translate {
                     transform: translate( 1% * $translate, 1% * $translate );
                 }
             }
         }
 
-        .k-rtl .k-badge#{$infix},
-        [dir="rtl"] .k-badge#{$infix} {
-            &-top-start {
-                left: auto;
-                right: 0;
+        .k-rtl .k-badge-#{$placement},
+        [dir="rtl"].k-badge-#{$placement},
+        [dir="rtl"] .k-badge-#{$placement} {
+            &.k-top-start {
                 @if $translate {
                     transform: translate( 1% * $translate, -1% * $translate );
                 }
             }
-            &-top-end {
-                right: auto;
-                left: 0;
+            &.k-top-end {
                 @if $translate {
                     transform: translate( -1% * $translate, -1% * $translate );
                 }
             }
-            &-bottom-start {
-                left: auto;
-                right: 0;
+            &.k-bottom-start {
                 @if $translate {
                     transform: translate( 1% * $translate, 1% * $translate );
                 }
             }
-            &-bottom-end {
-                right: auto;
-                left: 0;
+            &.k-bottom-end {
                 @if $translate {
                     transform: translate( -1% * $translate, 1% * $translate );
                 }

diff --git a/packages/default/scss/badge/_theme.scss b/packages/default/scss/badge/_theme.scss
@@ -2,7 +2,7 @@
 
     // Solid badges
     @each $name, $color in $theme-colors {
-        .k-badge-#{$name} {
+        .k-badge-solid.k-badge-#{$name} {
             border-color: $color;
             color: contrast-wcag( $color );
             background-color: $color;
@@ -16,7 +16,7 @@
     }
 
     @each $name, $color in $theme-colors {
-        .k-badge-outline-#{$name} {
+        .k-badge-outline.k-badge-#{$name} {
             color: $color;
         }
     }

diff --git a/packages/default/scss/map/_index.scss b/packages/default/scss/map/_index.scss
@@ -4,6 +4,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
+@import "../utils/_position.scss";
 @import "../button/_index.scss";
 @import "../scroller/_index.scss";
 @import "../icons/_index.scss";

diff --git a/packages/default/scss/map/_layout.scss b/packages/default/scss/map/_layout.scss
@@ -55,10 +55,6 @@
         display: flex;
         align-items: center;
     }
-    .k-pos-top { top: 0; }
-    .k-pos-bottom { bottom: 0; }
-    .k-pos-left { left: 0; }
-    .k-pos-right { right: 0; }
 
 
     // Navigator

diff --git a/packages/default/scss/utils/_index.scss b/packages/default/scss/utils/_index.scss
@@ -10,6 +10,7 @@
 @import "_flex.scss";
 @import "_float.scss";
 @import "_grid.scss";
+@import "_position.scss";
 @import "_spacing.scss";
 @import "_text.scss";
 @import "_transform.scss";
diff --git a/packages/default/scss/utils/_position.scss b/packages/default/scss/utils/_position.scss
@@ -0,0 +1,62 @@
+@include exports( "utils/position" ) {
+
+    @each $pos in (static, relative, absolute, fixed, sticky) {
+        .k-#{$pos},
+        .k-pos-#{$pos} { position: $pos; } // sass-lint:disable-line brace-style
+    }
+
+    @each $side in (top, right, bottom, left) {
+        .k-#{$side},
+        .k-pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
+    }
+
+    .k-top-start,
+    .k-pos-top-start {
+        top: 0;
+        left: 0;
+
+        .k-rtl &,
+        &[dir="rtl"],
+        [dir="rtl"] & {
+            left: auto;
+            right: 0;
+        }
+    }
+    .k-top-end,
+    .k-pos-top-end {
+        top: 0;
+        right: 0;
+
+        .k-rtl &,
+        &[dir="rtl"],
+        [dir="rtl"] & {
+            right: auto;
+            left: 0;
+        }
+    }
+    .k-bottom-start,
+    .k-pos-bottom-start {
+        bottom: 0;
+        left: 0;
+
+        .k-rtl &,
+        &[dir="rtl"],
+        [dir="rtl"] & {
+            left: auto;
+            right: 0;
+        }
+    }
+    .k-bottom-end,
+    .k-pos-bottom-end {
+        bottom: 0;
+        right: 0;
+
+        .k-rtl &,
+        &[dir="rtl"],
+        [dir="rtl"] & {
+            right: auto;
+            left: 0;
+        }
+    }
+
+}
diff --git a/packages/material/scss/badge/_index.scss b/packages/material/scss/badge/_index.scss
@@ -3,6 +3,7 @@
 
 
 // Dependencies
+@import "../utils/_position.scss";
 @import "../icons/_index.scss";
 
 

diff --git a/packages/material/scss/map/_index.scss b/packages/material/scss/map/_index.scss
@@ -4,6 +4,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
+@import "../utils/_position.scss";
 @import "../button/_index.scss";
 @import "../scroller/_index.scss";
 @import "../icons/_index.scss";

diff --git a/packages/material/scss/utils/_index.scss b/packages/material/scss/utils/_index.scss
@@ -10,6 +10,7 @@
 @import "_flex.scss";
 @import "_float.scss";
 @import "_grid.scss";
+@import "_position.scss";
 @import "_spacing.scss";
 @import "_text.scss";
 @import "_transform.scss";
diff --git a/packages/material/scss/utils/_position.scss b/packages/material/scss/utils/_position.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/utils/_position.scss";