frontend/css/components/_toolbars.scss in trestle-0.9.8 vs frontend/css/components/_toolbars.scss in trestle-0.10.0.pre

@@ -1,54 +1,41 @@
 .btn-toolbar {
-  .btn,
-  .btn-group,
-  .input-group {
-    + .btn,
-    + .btn-group,
-    + .input-group {
-      margin-left: 5px;
-    }
-  }
-
-  .btn-group {
-    .btn,
-    .btn-group {
-      + .btn,
-      + .btn-group {
-        margin-left: 0;
-      }
-    }
-  }
+  gap: 5px;
 }
 
 .primary-toolbar {
   .btn {
-    @extend .btn-lg;
+    --#{$prefix}btn-padding-x:     1.25rem;
+    --#{$prefix}btn-padding-y:     0.5rem;
+    --#{$prefix}btn-font-size:     1.35rem;
 
-    font-size: 1.35rem;
-    padding: 0.5rem 1.25rem;
-
-    @include media-breakpoint-down(sm) {
-      font-size: 1.25rem;
-      padding: 0.35rem 0.75rem;
+    @include media-breakpoint-down(md) {
+      --#{$prefix}btn-padding-x:     0.75rem;
+      --#{$prefix}btn-padding-y:     0.35rem;
+      --#{$prefix}btn-font-size:     1.25rem;
+      --#{$prefix}btn-border-radius: #{$btn-border-radius-sm};
     }
   }
 }
 
 .secondary-toolbar {
   .btn {
-    @extend .btn-sm;
+    --#{$prefix}btn-padding-x: #{$btn-padding-x-sm};
+    --#{$prefix}btn-padding-y: #{$btn-padding-y-sm};
+    --#{$prefix}btn-font-size: #{$btn-font-size-sm};
 
     > i {
       font-size: 80%;
 
       + .btn-label {
         margin-left: 3px;
       }
     }
 
-    @include media-breakpoint-down(sm) {
-      font-size: 0.75rem;
-      padding: 0.2rem 0.5rem;
+    @include media-breakpoint-down(md) {
+      --#{$prefix}btn-padding-x: 0.5rem;
+      --#{$prefix}btn-padding-y: 0.2rem;
+      --#{$prefix}btn-font-size: 0.75rem;
+      --#{$prefix}btn-border-radius: #{$btn-border-radius-sm};
     }
   }
 }