scss/toolkit/effects/skew.scss in titon-toolkit-1.1.0 vs scss/toolkit/effects/skew.scss in titon-toolkit-1.2.0

@@ -6,62 +6,56 @@
 
 @import "../common";
 
 //-------------------- Button --------------------//
 
-.#{$vendor-prefix}button.#{$shape-skew-class} { border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0; }
+.#{$vendor-prefix}button.#{$shape-skew-class} {
+    border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
+}
 
 //-------------------- ButtonGroup --------------------//
 
 .#{$vendor-prefix}button-group.#{$shape-skew-class} {
     border-top-left-radius: $skew;
     border-top-right-radius: $skew;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 
-    > li:first-child .#{$vendor-prefix}button,
-    > .#{$vendor-prefix}button:first-child,
-    > .#{$vendor-prefix}button.first {
+    @include button-group-first-child {
         border-top-left-radius: $skew;
         border-bottom-left-radius: 0;
     }
 
-    > li:last-child .#{$vendor-prefix}button,
-    > .#{$vendor-prefix}button:last-child,
-    > .#{$vendor-prefix}button.last {
+    @include button-group-last-child {
         border-top-right-radius: $skew;
         border-bottom-right-radius: 0;
     }
 }
 
 .#{$vendor-prefix}button-group--vertical {
     &.#{$shape-skew-class} {
         border-top-left-radius: $skew-y 1.5rem;
         border-bottom-left-radius: $skew-y 1.5rem;
 
-        > li:first-child .#{$vendor-prefix}button,
-        > .#{$vendor-prefix}button:first-child {
+        @include button-group-first-child {
             border-top-left-radius: $skew-reverse;
         }
 
-        > li:last-child .#{$vendor-prefix}button,
-        > .#{$vendor-prefix}button:last-child {
+        @include button-group-last-child {
             border-bottom-left-radius: $skew-reverse;
             border-top-right-radius: 0;
         }
     }
 
     &.#{$shape-skew-class}-reverse {
         border-top-right-radius: $skew-y 1.25rem;
         border-bottom-right-radius: $skew-y 1.25rem;
 
-        > li:first-child .#{$vendor-prefix}button,
-        > .#{$vendor-prefix}button:first-child {
+        @include button-group-first-child {
             border-top-right-radius: $skew-reverse;
         }
 
-        > li:last-child .#{$vendor-prefix}button,
-        > .#{$vendor-prefix}button:last-child {
+        @include button-group-last-child {
             border-bottom-right-radius: $skew-reverse;
         }
     }
 }
 
\ No newline at end of file