feature: mini-footer-flex optimized with flexbox-settings

MikeMitterer · Mar 11, 2015 · f5d8dc3 · f5d8dc3
1 parent fa26260
commit f5d8dc3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/gensamples b/gensamples
diff --git a/lib/sass/footer/_mini_footer-flex.scss b/lib/sass/footer/_mini_footer-flex.scss
@@ -10,36 +10,53 @@ $footer-heading-font-size : 24px !default;
 $footer-heading-line-height : (1.5 * $footer-heading-font-size) !default;
 $footer-btn-size : 36px !default;
 
-$mini-footer-flex-height : 56px !default;
+//$mini-footer-flex-height : 56px !default;
 
 .wsk-mini-footer-flex {
     display          : flex;
     flex-direction   : row;
+    //flex-wrap: wrap;
+    justify-content  : flex-start; // ⇾
+    align-content    : space-between; // ||
+    align-items      : center; // ↓
+    //padding          : 0 $padding 0 $padding;
     padding          : $padding;
     color            : $footer-color;
     background-color : $footer-bg-color;
-    height           : $mini-footer-flex-height;
-    min-height       : $mini-footer-flex-height;
+    //height           : $mini-footer-flex-height;
+    //min-height       : $mini-footer-flex-height;
     box-sizing       : border-box;
 
     .wsk-mini-footer--left-section {
         display       : flex;
         align-content : flex-start;
         align-items   : center;
         flex-grow     : 1;
+        flex-wrap     : wrap;
 
         .wsk-logo {
             line-height   : $footer-btn-size;
             margin-bottom : 0;
             margin-right  : $padding;
         }
+
+        .wsk-mini-footer--social-btn {
+            &:last-child { margin-right : 0; }
+        }
     }
 
     .wsk-mini-footer--right-section {
-        float         : none;
-        display       : flex;
-        align-content : flex-start;
-        align-items   : center;
+        float           : none;
+        display         : flex;
+        flex-direction  : row;
+        flex-wrap       : wrap;
+        justify-content : flex-end; // ⇾
+        align-content   : space-between; // ||
+        align-items     : flex-start; // ↓
+
+        .wsk-mini-footer--social-btn {
+            &:first-child { margin-left : 0; }
+        }
     }
 
     .wsk-mini-footer--link-list {
@@ -63,13 +80,11 @@ $mini-footer-flex-height : 56px !default;
         width            : $footer-btn-size;
         height           : $footer-btn-size;
         padding          : 0;
-        margin           : 0 $padding 0 0;
+        margin           : 2px;
+
         background-color : $footer-button-fill-color;
         border           : none;
-
-        &:last-child {
-            margin-right : 0;
-        }
+        flex-shrink      : 0;
     }
 
     &:after {