Permalink
Browse files

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

  • Loading branch information...
MikeMitterer committed Mar 11, 2015
1 parent fa26260 commit f5d8dc3928a8c206c9a506098e1249d58ebe64d6
Showing with 27 additions and 13 deletions.
  1. +0 −1 gensamples
  2. +27 −12 lib/sass/footer/_mini_footer-flex.scss
View
@@ -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 {

0 comments on commit f5d8dc3

Please sign in to comment.