From 2ad2ab503fb599212ad3e5604da742bc909c053b Mon Sep 17 00:00:00 2001 From: awesomerobot Date: Mon, 3 Aug 2015 21:03:11 -0400 Subject: [PATCH] aligning text-logos and header with flexbox --- app/assets/stylesheets/common/base/header.scss | 10 +++++++++- app/assets/stylesheets/common/base/topic-post.scss | 12 ++++++++---- app/assets/stylesheets/common/base/topic.scss | 7 ++++--- .../stylesheets/common/components/badges.css.scss | 4 ++++ app/assets/stylesheets/desktop/header.scss | 2 +- app/assets/stylesheets/mobile/header.scss | 1 - 6 files changed, 26 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss index ed398f4a06d..b12f28f9a8a 100644 --- a/app/assets/stylesheets/common/base/header.scss +++ b/app/assets/stylesheets/common/base/header.scss @@ -13,6 +13,11 @@ .contents { margin: 8px 0; + display: -ms-flexbox; + display: flex; + + -ms-flex-align: center; + align-items: center; } .title { @@ -34,8 +39,11 @@ } .panel { - float: right; position: relative; + margin-left: auto; + + -ms-flex-order: 3; + order: 3; } .login-button, button.sign-up-button { diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index ec590ae39c6..4ef0c4dba0c 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -261,6 +261,12 @@ table.md-table { } .small-action { + display: -ms-flexbox; + display: flex; + + -ms-flex-align: center; + align-items: center; + .topic-avatar { padding: 5px 0; border-top: none; @@ -274,8 +280,7 @@ table.md-table { } .small-action-desc { - padding: 0.5em 0 0.5em 4em; - margin-top: 5px; + padding: 0 1.5%; text-transform: uppercase; font-weight: bold; font-size: 0.9em; @@ -287,7 +292,7 @@ table.md-table { font-weight: normal; font-size: 14px; p { - margin: 5px 0; + margin: 0; } } @@ -298,7 +303,6 @@ table.md-table { > p { margin: 0; - padding-top: 4px; } } diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss index 18701110bc0..a0e036ed041 100644 --- a/app/assets/stylesheets/common/base/topic.scss +++ b/app/assets/stylesheets/common/base/topic.scss @@ -27,11 +27,12 @@ } .extra-info-wrapper { + -ms-flex-order: 2; + order: 2; + + line-height: 1.5; .badge-wrapper { float: left; - &.bullet { - margin-top: 5px; - } } } diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss index 8008d48b210..caa751af5e2 100644 --- a/app/assets/stylesheets/common/components/badges.css.scss +++ b/app/assets/stylesheets/common/components/badges.css.scss @@ -52,8 +52,12 @@ &.bullet { //bullet category style + display: -ms-inline-flexbox; display: inline-flex; + + -ms-flex-align: center; align-items: baseline; + margin-right: 10px; span.badge-category { diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss index 3caae9f485c..66fddf863cb 100644 --- a/app/assets/stylesheets/desktop/header.scss +++ b/app/assets/stylesheets/desktop/header.scss @@ -8,7 +8,7 @@ padding-top: 3px; height: 60px; .fa-home { - padding:8px; + padding: 0 8px 0 0; font-size: 2.1em; } } diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss index 08bb4dfb175..e3dd106200f 100644 --- a/app/assets/stylesheets/mobile/header.scss +++ b/app/assets/stylesheets/mobile/header.scss @@ -11,7 +11,6 @@ // some protection for text-only site titles .title { max-width: 130px; - height: 39px; overflow: hidden; padding: 0; text-overflow: clip;