feat(buttonGroup): add styles for button group telerik/kendo#7846

Author: Magdalena Grigorova

scss/button/_layout.scss

@@ -126,29 +126,33 @@
         vertical-align: middle;
         position: relative;
 
-        .k-button {
-            @include border-radius( 0 );
+        .k-item {
+            position: relative;
         }
-        .k-button ~ .k-button {
+        .k-item ~ .k-item {
             margin-left: -$button-border-width;
         }
 
+        .k-button {
+            @include border-radius( 0 );
+        }
+
         .k-button:hover,
         .k-button.k-state-hover,
         .k-button.k-state-active {
             z-index: 2;
         }
 
         .k-group-start,
-        .k-button:first-child {
+        .k-item:first-child .k-button {
             @include border-left-radius();
         }
         .k-group-end,
-        .k-button:last-child {
+        .k-item:last-child .k-button {
             @include border-right-radius();
         }
         .k-group-start.k-group-end,
-        .k-button:first-child:last-child {
+        .k-item:first-child:last-child .k-button {
             @include border-radius();
         }
 
@@ -168,7 +172,7 @@
     .k-button-group-stretched {
         display: flex;
 
-        > .k-button {
+        .k-item > .k-button {
             display: inline-block;
             flex: 1 1 0;
             overflow: hidden;

scss/button/_theme.scss

@@ -235,4 +235,11 @@
         color: $accent;
     }
 
+
+    // Badge
+    .k-badge {
+        background-color: $accent;
+        color: $accent-contrast;
+    }
+
 }

scss/common/_base.scss

@@ -115,6 +115,24 @@
     .k-flip-h.k-flip-v { transform: scale(-1, -1); }
 
 
+    // Badge
+    .k-badge {
+        height: 2em;
+        min-width: .9em;
+        position: absolute;
+        top: -1em;
+        right: -1em;
+        font-size: .6rem;
+        line-height: 2em;
+        margin-left: .5em;
+        padding: 0 .55em;
+        border-radius: 5em;
+        text-align: center;
+        overflow: hidden;
+        z-index: 5;
+    }
+
+
     // Dirty indicator
     .k-dirty {
         margin: 0;