From 9337fccbcec46dae52276a0e397f39586c6c010e Mon Sep 17 00:00:00 2001 From: connors Date: Sun, 16 Feb 2014 12:03:23 -0800 Subject: [PATCH] refactoring icons and buttons in bars --- dist/android-theme.css | 27 ++-------- dist/ratchet.css | 72 +++++++++++-------------- docs/assets/css/docs.css | 26 ++------- docs/components.html | 8 +-- docs/dist/android-theme.css | 27 ++-------- docs/dist/ratchet.css | 72 +++++++++++-------------- sass/bars.scss | 105 ++++++++++++++++-------------------- sass/theme-android.scss | 32 ++--------- 8 files changed, 127 insertions(+), 242 deletions(-) diff --git a/dist/android-theme.css b/dist/android-theme.css index 7a43669..f862805 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -197,12 +197,13 @@ a:active { } .bar .btn { + margin-top: 7px; padding-top: 9px; padding-bottom: 9px; } .bar .btn-link { - padding-top: 0; - padding-bottom: 0; + margin-top: 0; + padding: 0; color: #33b5e5; font-size: 18px; line-height: 49px; @@ -210,27 +211,7 @@ a:active { .bar .btn-link:active, .bar .btn-link.active { color: #1a9bcb; } -.bar .btn-link.pull-left { - padding-left: 12px; - padding-right: 0; -} -.bar .btn-link.pull-right { - padding-left: 0; - padding-right: 12px; -} - -.bar-nav .btn { - margin-top: 7px; -} -.bar-nav .btn-link { - margin-top: 0; - color: #33b5e5; -} -.bar-nav .btn-link:active { - color: #33b5e5; - opacity: .6; -} -.bar-nav .btn-link .icon { +.bar .btn-link .icon { top: 2px; padding: 0; } diff --git a/dist/ratchet.css b/dist/ratchet.css index 2f1df19..b06f205 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -552,50 +552,31 @@ input[type="button"] { font-size: 11px; } -.bar-nav .btn { +.bar .btn { position: relative; z-index: 20; padding: 6px 12px; margin-top: 8px; font-weight: 400; } -.bar-nav .btn.pull-right { +.bar .btn.pull-right { margin-left: 10px; } -.bar-nav .btn.pull-left { +.bar .btn.pull-left { margin-right: 10px; } -.bar-nav .btn-link { +.bar .btn-link { margin-top: 0; - padding-top: 0; - padding-bottom: 0; + padding: 0; font-size: 16px; color: #428bca; line-height: 44px; border: 0; } -.bar-nav .btn-link:active, .bar-nav .btn-link.active { +.bar .btn-link:active, .bar .btn-link.active { color: #3071a9; } -.bar-nav .btn-link .icon { - top: 2px; - padding: 0; -} -.bar-nav .btn-link.pull-left { - margin-left: -10px; -} -.bar-nav .btn-link.pull-left .icon { - margin-right: -5px; - margin-left: -7px; -} -.bar-nav .btn-link.pull-right { - margin-right: -10px; -} -.bar-nav .btn-link.pull-right .icon { - margin-right: -7px; - margin-left: -5px; -} .bar .btn-block { padding: 7px 0 6px; @@ -604,31 +585,28 @@ input[type="button"] { font-size: 16px; } -.bar input[type="search"] { - height: 29px; - margin: 6px 0; +.bar .btn-nav.pull-left { + margin-left: -5px; } - -.bar .segmented-control { - top: 8px; - margin: 0 auto; +.bar .btn-nav.pull-left .icon-left-nav { + margin-right: -3px; +} +.bar .btn-nav.pull-right { + margin-right: -5px; +} +.bar .btn-nav.pull-right .icon-right-nav { + margin-left: -3px; } .bar .icon { position: relative; - padding: 10px 13px; + padding: 10px 0; z-index: 20; font-size: 24px; } -.bar > .icon { - padding-right: 5px; - padding-left: 5px; -} -.bar > .icon.pull-left { - margin-left: -10px; -} -.bar > .icon.pull-right { - margin-right: -10px; +.bar .btn .icon { + top: 2px; + padding: 0; } .bar .title .icon { padding: 0; @@ -638,6 +616,16 @@ input[type="button"] { margin-left: -5px; } +.bar input[type="search"] { + height: 29px; + margin: 6px 0; +} + +.bar .segmented-control { + top: 8px; + margin: 0 auto; +} + .badge { display: inline-block; padding: 2px 9px; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index c330d5a..6df1380 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -1374,12 +1374,13 @@ hr { text-align: left; } .platform-android .bar .btn { + margin-top: 7px; padding-top: 9px; padding-bottom: 9px; } .platform-android .bar .btn-link { - padding-top: 0; - padding-bottom: 0; + margin-top: 0; + padding: 0; color: #33b5e5; font-size: 18px; line-height: 49px; @@ -1387,26 +1388,7 @@ hr { .platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active { color: #1a9bcb; } -.platform-android .bar .btn-link.pull-left { - padding-left: 12px; - padding-right: 0; -} -.platform-android .bar .btn-link.pull-right { - padding-left: 0; - padding-right: 12px; -} -.platform-android .bar-nav .btn { - margin-top: 7px; -} -.platform-android .bar-nav .btn-link { - margin-top: 0; - color: #33b5e5; -} -.platform-android .bar-nav .btn-link:active { - color: #33b5e5; - opacity: .6; -} -.platform-android .bar-nav .btn-link .icon { +.platform-android .bar .btn-link .icon { top: 2px; padding: 0; } diff --git a/docs/components.html b/docs/components.html index aa5e98a..8d5d5cf 100644 --- a/docs/components.html +++ b/docs/components.html @@ -127,11 +127,11 @@ title: Components · Ratchet
- + Left - + Right @@ -141,11 +141,11 @@ title: Components · Ratchet {% highlight html %}
- + Left - + Right diff --git a/docs/dist/android-theme.css b/docs/dist/android-theme.css index 7a43669..f862805 100644 --- a/docs/dist/android-theme.css +++ b/docs/dist/android-theme.css @@ -197,12 +197,13 @@ a:active { } .bar .btn { + margin-top: 7px; padding-top: 9px; padding-bottom: 9px; } .bar .btn-link { - padding-top: 0; - padding-bottom: 0; + margin-top: 0; + padding: 0; color: #33b5e5; font-size: 18px; line-height: 49px; @@ -210,27 +211,7 @@ a:active { .bar .btn-link:active, .bar .btn-link.active { color: #1a9bcb; } -.bar .btn-link.pull-left { - padding-left: 12px; - padding-right: 0; -} -.bar .btn-link.pull-right { - padding-left: 0; - padding-right: 12px; -} - -.bar-nav .btn { - margin-top: 7px; -} -.bar-nav .btn-link { - margin-top: 0; - color: #33b5e5; -} -.bar-nav .btn-link:active { - color: #33b5e5; - opacity: .6; -} -.bar-nav .btn-link .icon { +.bar .btn-link .icon { top: 2px; padding: 0; } diff --git a/docs/dist/ratchet.css b/docs/dist/ratchet.css index 2f1df19..b06f205 100644 --- a/docs/dist/ratchet.css +++ b/docs/dist/ratchet.css @@ -552,50 +552,31 @@ input[type="button"] { font-size: 11px; } -.bar-nav .btn { +.bar .btn { position: relative; z-index: 20; padding: 6px 12px; margin-top: 8px; font-weight: 400; } -.bar-nav .btn.pull-right { +.bar .btn.pull-right { margin-left: 10px; } -.bar-nav .btn.pull-left { +.bar .btn.pull-left { margin-right: 10px; } -.bar-nav .btn-link { +.bar .btn-link { margin-top: 0; - padding-top: 0; - padding-bottom: 0; + padding: 0; font-size: 16px; color: #428bca; line-height: 44px; border: 0; } -.bar-nav .btn-link:active, .bar-nav .btn-link.active { +.bar .btn-link:active, .bar .btn-link.active { color: #3071a9; } -.bar-nav .btn-link .icon { - top: 2px; - padding: 0; -} -.bar-nav .btn-link.pull-left { - margin-left: -10px; -} -.bar-nav .btn-link.pull-left .icon { - margin-right: -5px; - margin-left: -7px; -} -.bar-nav .btn-link.pull-right { - margin-right: -10px; -} -.bar-nav .btn-link.pull-right .icon { - margin-right: -7px; - margin-left: -5px; -} .bar .btn-block { padding: 7px 0 6px; @@ -604,31 +585,28 @@ input[type="button"] { font-size: 16px; } -.bar input[type="search"] { - height: 29px; - margin: 6px 0; +.bar .btn-nav.pull-left { + margin-left: -5px; } - -.bar .segmented-control { - top: 8px; - margin: 0 auto; +.bar .btn-nav.pull-left .icon-left-nav { + margin-right: -3px; +} +.bar .btn-nav.pull-right { + margin-right: -5px; +} +.bar .btn-nav.pull-right .icon-right-nav { + margin-left: -3px; } .bar .icon { position: relative; - padding: 10px 13px; + padding: 10px 0; z-index: 20; font-size: 24px; } -.bar > .icon { - padding-right: 5px; - padding-left: 5px; -} -.bar > .icon.pull-left { - margin-left: -10px; -} -.bar > .icon.pull-right { - margin-right: -10px; +.bar .btn .icon { + top: 2px; + padding: 0; } .bar .title .icon { padding: 0; @@ -638,6 +616,16 @@ input[type="button"] { margin-left: -5px; } +.bar input[type="search"] { + height: 29px; + margin: 6px 0; +} + +.bar .segmented-control { + top: 8px; + margin: 0 auto; +} + .badge { display: inline-block; padding: 2px 9px; diff --git a/sass/bars.scss b/sass/bars.scss index db1d58e..52576ae 100644 --- a/sass/bars.scss +++ b/sass/bars.scss @@ -120,10 +120,10 @@ } -// Nav bars with buttons +// Bars with buttons // -------------------------------------------------- -.bar-nav .btn { +.bar .btn { position: relative; z-index: 20; // Position the buttons on top of .title padding: 6px 12px; @@ -138,11 +138,10 @@ } } -// Nav bars with link buttons (Line the text up with content) -.bar-nav .btn-link { +// Bars with link buttons (Line the text up with content) +.bar .btn-link { margin-top: 0; - padding-top: 0; - padding-bottom: 0; + padding: 0; font-size: 16px; color: $primary-color; line-height: $bar-base-height; @@ -152,34 +151,9 @@ &.active { color: darken($primary-color, 10%); } - - // Make sure link buttons w/ icons line up with the content correctly - .icon { - top: 2px; - padding: 0; - } - &.pull-left { - margin-left: -10px; - - .icon { - margin-right: -5px; - margin-left: -7px; - } - } - &.pull-right { - margin-right: -10px; - - .icon { - margin-right: -7px; - margin-left: -5px; - } - } } - // Bars with block buttons -// -------------------------------------------------- - // Add proper padding .bar .btn-block { padding: 7px 0 6px; @@ -188,24 +162,24 @@ font-size: 16px; // Scale down font size to fit in bar. } +// Nav buttons (Only applicable within bars) +// +// Buttons inside bar that sit closer against the viewport. +.bar .btn-nav { + &.pull-left { + margin-left: -5px; -// Bars for search forms -// -------------------------------------------------- - -// Position/size search bar within the bar -.bar input[type="search"] { - height: 29px; - margin: 6px 0; -} - - -// Bars with segmented controls -// -------------------------------------------------- + .icon-left-nav { + margin-right: -3px; + } + } + &.pull-right { + margin-right: -5px; -// Remove standard segmented bottom margin -.bar .segmented-control { - top: 8px; - margin: 0 auto; + .icon-right-nav { + margin-left: -3px; + } + } } @@ -215,22 +189,17 @@ .bar { .icon { position: relative; - padding: 10px 13px; + padding: 10px 0; z-index: 20; // Position the buttons on top of .title font-size: 24px; } - > .icon { - padding-right: 5px; - padding-left: 5px; - // Offset the bar's side padding - &.pull-left { - margin-left: -10px; - } - &.pull-right { - margin-right: -10px; - } + // Handle the larger icons in btns. + .btn .icon { + top: 2px; + padding: 0; } + // Handle carets in the titles .title .icon { padding: 0; @@ -241,3 +210,23 @@ } } } + + +// Bars for search forms +// -------------------------------------------------- + +// Position/size search bar within the bar +.bar input[type="search"] { + height: 29px; + margin: 6px 0; +} + + +// Bars with segmented controls +// -------------------------------------------------- + +// Remove standard segmented bottom margin +.bar .segmented-control { + top: 8px; + margin: 0 auto; +} diff --git a/sass/theme-android.scss b/sass/theme-android.scss index 0302253..a336e8c 100644 --- a/sass/theme-android.scss +++ b/sass/theme-android.scss @@ -287,12 +287,13 @@ a { // Bars with buttons .bar { .btn { + margin-top: 7px; padding-top: 9px; padding-bottom: 9px; } .btn-link { - padding-top: 0; - padding-bottom: 0; + margin-top: 0; + padding: 0; color: $primary-color; font-size: $font-size-default; line-height: 49px; @@ -302,32 +303,6 @@ a { color: darken($primary-color, 10%); } - // Offset the bar's side padding - &.pull-left { - padding-left: 12px; - padding-right: 0; - } - &.pull-right { - padding-left: 0; - padding-right: 12px; - } - } -} - -// Nav bars with buttons -.bar-nav { - .btn { - margin-top: 7px; - } - .btn-link { - margin-top: 0; - color: $primary-color; - - &:active { - color: $primary-color; - opacity: .6; - } - // Make sure link buttons w/ icons line up with the content correctly .icon { top: 2px; @@ -349,6 +324,7 @@ a { padding-top: 13px; padding-bottom: 13px; } + // Handle carets in the titles .title .icon { padding: 0;