MINOR: Right align elements in toolbar and add rounding on buttons

silverstripe · Nov 12, 2018 · 0ba2ccf · 0ba2ccf
1 parent 63d11f7
commit 0ba2ccf
Showing 1 changed file with 33 additions and 0 deletions.
diff --git a/client/src/components/Toolbar/Toolbar.scss b/client/src/components/Toolbar/Toolbar.scss
@@ -14,6 +14,39 @@
   .btn {
     margin-bottom: 0;
   }
+
+  .right {
+    margin-left: auto;
+
+    .btn-group:not(last-child) {
+      margin-right: 10px !important;
+    }
+  }
+
+  .rounded {
+
+    &.btn, >.btn {
+      width: 32px;
+      padding-left: 7px;
+
+      &:last-child{
+        border-top-right-radius: 100px !important;
+        border-bottom-right-radius: 100px !important;
+      }
+
+      &:first-child {
+        border-top-left-radius: 100px !important;
+        border-bottom-left-radius: 100px !important;
+      }
+
+    }
+
+    border-radius: 100px !important;
+
+    &::before, .btn::before {
+      margin-right: 0;
+    }
+  }
 }
 
 // Northern bar containing breadcrumb, tabs etc.