Adding helpers (#196)

* sidebar and select documentation CSS * feat: Added margin auto helpers and increased border radius range to 15 * feat: changing inverse outline color to button Co-authored-by: Anusha Ganti <[email protected]>
denali-design · Sep 22, 2021 · de907f4 · de907f4
1 parent facc153
commit de907f4
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/scss/components/button.scss b/scss/components/button.scss
@@ -63,7 +63,7 @@ $button-outline-focus-text-color: map-get($denali-brand-colors,"400") !default;
 $button-outline-focus-border: solid 1px map-get($denali-brand-colors,"400") !default;
 $button-outline-focus-inverse-bg-color: rgba(map-get($denali-brand-colors,"400"), .26) !default;
 $button-outline-focus-inverse-text-color: map-get($denali-grey-colors,"100") !default;
-$button-outline-focus-inverse-border: solid 1px map-get($denali-brand-colors,"400") !default;
+$button-outline-focus-inverse-border: solid 1px map-get($denali-brand-colors,"200") !default;
 $button-outline-disabled-bg-color: rgba(map-get($denali-grey-colors,"800"), .12) !default;
 $button-outline-disabled-text-color: rgba(map-get($denali-grey-colors,"800"), .5) !default;
 $button-outline-disabled-border: solid 1px rgba(map-get($denali-grey-colors,"800"), .5) !default;

diff --git a/scss/helpers/borders.scss b/scss/helpers/borders.scss
@@ -4,7 +4,7 @@
 
 
 // Border Radius
-@for $i from 1 through 10 {
+@for $i from 1 through 15 {
   .br-#{$i} {
     border-radius: 0px + $i !important;
   }

diff --git a/scss/helpers/margin.scss b/scss/helpers/margin.scss
@@ -10,7 +10,39 @@
 }
 
 .m-auto {
-  margin: auto;
+  margin: auto !important;
+}
+
+// Margin Left Auto
+.m-l-auto {
+  margin-left: auto !important;
+}
+
+// Margin Right Auto
+.m-r-auto{
+  margin-right: auto !important;
+}
+
+// Margin Top Auto
+.m-t-auto{
+  margin-top: auto !important;
+}
+
+// Margin Bottom Auto
+.m-b-auto{
+  margin-bottom: auto !important;
+}
+
+// Margin Horizontal Auto
+.m-x-auto{
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+// Margin Vertical Auto
+.m-y-auto{
+  margin-top: auto !important;
+  margin-bottom: auto !important;
 }
 
 // Margin Top