fix: button alignment (#897)

* update other files

* Child select col elements

* remove commented text

src/wmnds/assets/sass/styles/wmnds-grid/_wmnds-grid.scss

@@ -21,7 +21,7 @@
     -ms-flex-line-pack: start;
     align-content: flex-start;
 
-    [class*="wmnds-col-"] {
+    & > [class*="wmnds-col-"] {
       display: inline-block;
       zoom: 1;
       letter-spacing: normal;

src/wmnds/components/button/_button.njk

@@ -23,7 +23,7 @@
       {{
         wmndsIcon({
           icon: iconLeft,
-          class: ('wmnds-btn__icon '+iconClasses)
+          class: ('wmnds-btn__icon wmnds-btn__icon--left '+iconClasses)
         })
       }}
 

src/wmnds/components/button/_button.scss

@@ -5,19 +5,22 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
 // default button styles aka cta btn
 &.wmnds-btn {
   box-sizing: border-box;
-  display: inline-block;
+  display: inline-flex;
   position: relative;
-  padding: $size-sm;
+  min-height: 50px;
+  padding: $size-xs $size-xsm;
   transition: $btn-transition;
   border: 1px solid transparent;
   border-radius: $btn-border-radius;
   color: $white;
   background-color: get-color(cta);
   font-size: 1rem;
   font-weight: bold;
-  text-align: center;
+  line-height: 1.3rem;
   text-decoration: none;
   cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
 
   &:hover {
     background-color: get-color(cta, 30, dark);
@@ -37,7 +40,12 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
     width: 22px;
     height: 22px;
     fill: $white;
-    vertical-align: top;
+    flex: 0 0 22px;
+  }
+
+  // button icon left style
+  &__icon--left {
+    margin-right: $size-xs;
   }
 
   .wmnds-swift-logo-inline {
@@ -47,7 +55,6 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
   // button icon right style
   &__icon--right {
     margin-left: $size-sm;
-    float: right;
   }
 
   // Dark background variant
@@ -204,6 +211,16 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
       fill: get-color(primary);
     }
 
+    &:not(.wmnds-text-align-left),
+    &:not(.wmnds-text-align-center),
+    &:not(.wmnds-text-align-right) {
+      justify-content: flex-start;
+
+      .wmnds-btn__icon--right {
+        margin-left: auto;
+      }
+    }
+
     .wmnds-btn__coloured-icon {
       &--bus {
         fill: get-color(bus);
@@ -294,7 +311,6 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
 
   // block modifier for full width buttons
   &--block {
-    display: block;
     width: 100%;
   }
 
@@ -303,9 +319,23 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
     text-align: left;
   }
 
+  // include helpers for button alignment
+  &.wmnds-text-align-left {
+    justify-content: flex-start;
+  }
+
+  &.wmnds-text-align-center {
+    justify-content: center;
+  }
+
+  &.wmnds-text-align-right {
+    justify-content: flex-end;
+  }
+
   // Show button like a normal link modifier
   &--link {
     display: inline;
+    min-height: 0;
     padding: 0;
     border-radius: 0;
     color: get-color(cta, 10, dark);

src/wmnds/patterns/footer/_footer.scss

@@ -31,7 +31,7 @@
     padding: $size-lg $size-xs;
 
     .wmnds-btn {
-      display: block;
+      width: 100%;
       color: get-color(primary);
       background-color: $white;
     }

src/wmnds/patterns/header-v2/_header-v2.scss

@@ -231,6 +231,7 @@ $header-height-mobile: 4rem;
       display: block;
       z-index: 100;
       height: 2.25rem;
+      min-height: 0;
       padding: 0 1.35rem;
       border-color: $white;
       color: $white;