fix(badge): extract badge-border-radius variable

* refactor borde-radius usage
telerik · Feb 11, 2020 · d646feb · d646feb
1 parent 86f93e9
commit d646feb
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 20 deletions.
diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
@@ -294,18 +294,20 @@ $avatar-text: contrast-wcag( $avatar-bg ) !default;
 
 
 // Badge
-$badge-font-size: 75% !default;
-$badge-line-height: 1 !default;
-
-$badge-padding: ($padding-y / 2) !default;
+$badge-padding-x: $badge-padding-x !default;
+$badge-padding-y: $badge-padding-y !default;
 $badge-border-width: 1px !default;
+$badge-border-radius: $badge-border-radius !default;
+
+$badge-font-size: $badge-font-size !default;
+$badge-line-height: 1 !default;
 
-$badge-size: calc( #{$badge-line-height} * 1em + 2 * #{$badge-padding} +  2 * #{$badge-border-width} ) !default;
+$badge-size: calc( #{$badge-line-height * 1em} + #{$badge-padding-y * 2} + #{$badge-border-width * 2} ) !default;
 $badge-overlay-x: calc( #{$badge-size} / 2) !default;
 $badge-overlay-y: $badge-overlay-x !default;
 
 $badge-secondary-bg: $secondary !default;
-$badge-secondary-text:  $base-text !default;
+$badge-secondary-text: $base-text !default;
 $badge-secondary-border: $badge-secondary-bg !default;
 
 $badge-primary-bg: $primary !default;

diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
@@ -301,13 +301,15 @@ $avatar-text: contrast-wcag( $avatar-bg ) !default;
 
 
 // Badge
+$badge-padding-x: $padding-y !default;
+$badge-padding-y: $badge-padding-x !default;
+$badge-border-width: 1px !default;
+$badge-border-radius: $border-radius !default;
+
 $badge-font-size: 75% !default;
 $badge-line-height: 1 !default;
 
-$badge-padding: $padding-y !default;
-$badge-border-width: 1px !default;
-
-$badge-size: calc( #{$badge-line-height} * 1em + 2 * #{$badge-padding} +  2 * #{$badge-border-width} ) !default;
+$badge-size: calc( #{$badge-line-height * 1em} + #{$badge-padding-y * 2} + #{$badge-border-width * 2} ) !default;
 $badge-overlay-x: calc( #{$badge-size} / 2) !default;
 $badge-overlay-y: $badge-overlay-x !default;
 

diff --git a/packages/default/scss/badge/_layout.scss b/packages/default/scss/badge/_layout.scss
@@ -1,9 +1,9 @@
 @include exports( "badge/layout" ) {
 
     .k-badge {
-        @include border-radius();
+        @include border-radius( $badge-border-radius );
         margin: 0 0 0 ($spacer / 2);
-        padding: $badge-padding;
+        padding: $badge-padding-y $badge-padding-x;
         border-width: $badge-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -62,8 +62,8 @@
         transform: translate(100%, -100%);
 
         &:empty {
-            top: calc( #{$badge-padding} + #{$badge-border-width} );
-            right: calc( #{$badge-padding} + #{$badge-border-width} );
+            top: calc( #{$badge-padding-y} + #{$badge-border-width} );
+            right: calc( #{$badge-padding-x} + #{$badge-border-width} );
         }
 
         // RTL
@@ -75,7 +75,7 @@
             transform: translate(-100%, -100%);
 
             &:empty {
-                left: calc( #{$badge-padding} + #{$badge-border-width} );
+                left: calc( #{$badge-padding-x} + #{$badge-border-width} );
             }
         }
     }

diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
@@ -336,18 +336,20 @@ $avatar-text: contrast-wcag( $avatar-bg ) !default;
 
 
 // Badge
+$badge-padding-x: $padding-y !default;
+$badge-padding-y: $badge-padding-x !default;
+$badge-border-width: 1px !default;
+$badge-border-radius: $border-radius !default;
+
 $badge-font-size: 75% !default;
 $badge-line-height: 1 !default;
 
-$badge-padding: $padding-y !default;
-$badge-border-width: 1px !default;
-
-$badge-size: calc( #{$badge-line-height} * 1em + 2 * #{$badge-padding} +  2 * #{$badge-border-width} ) !default;
+$badge-size: calc( #{$badge-line-height * 1em} + #{$badge-padding-y * 2} + #{$badge-border-width * 2} ) !default;
 $badge-overlay-x: calc( #{$badge-size} / 2) !default;
 $badge-overlay-y: $badge-overlay-x !default;
 
 $badge-secondary-bg: true-mix( $base-text, $base-bg, 12%) !default;
-$badge-secondary-text:  $base-text !default;
+$badge-secondary-text: $base-text !default;
 $badge-secondary-border: $badge-secondary-bg !default;
 
 $badge-primary-bg: $primary !default;