diff --git a/dist/android-theme.css b/dist/android-theme.css index e4302f7..cf525af 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -183,6 +183,10 @@ a:active { color: #929292; background-color: #78c6e3; } +.bar-tab .tab-item .icon { + top: 3px; + padding: 0; +} .title { position: static; @@ -222,11 +226,13 @@ a:active { top: 7px; } -.bar > .icon { - top: 13px; +.bar .icon { + padding-top: 13px; + padding-bottom: 13px; } .bar .title .icon-caret { top: 10px; + padding: 0; color: #777; } diff --git a/dist/ratchet.css b/dist/ratchet.css index ca43ed2..e2ae5d8 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -541,8 +541,10 @@ input[type="button"] { color: #428bca; } .bar-tab .tab-item .icon { + top: 2px; width: 24px; height: 24px; + padding: 0; } .bar-tab .tab-item .icon ~ .tab-label { display: block; @@ -576,23 +578,24 @@ input[type="button"] { .bar-nav .btn-link:active, .bar-nav .btn-link.active { color: #3071a9; } +.bar-nav .btn-link .icon { + padding-right: 0; + padding-left: 0; +} .bar-nav .btn-link.pull-left { margin-left: 5px; } .bar-nav .btn-link.pull-left .icon { margin-right: -3px; - margin-left: -8px; + margin-left: -10px; } .bar-nav .btn-link.pull-right { margin-right: 5px; } .bar-nav .btn-link.pull-right .icon { - margin-right: -8px; + margin-right: -10px; margin-left: -3px; } -.bar-nav .btn-link .icon { - top: 2px; -} .bar .btn-block { padding: 7px 0 6px; @@ -613,21 +616,23 @@ input[type="button"] { .bar .icon { position: relative; - top: 2px; + padding: 10px; z-index: 20; font-size: 24px; } -.bar .icon.pull-left { - margin-left: -3px; +.bar > .icon { + padding-right: 5px; + padding-left: 5px; } -.bar .icon.pull-right { - margin-right: -3px; +.bar > .icon.pull-left { + margin-left: -10px; } -.bar > .icon { - top: 10px; +.bar > .icon.pull-right { + margin-right: -10px; } .bar .title .icon-caret { top: 4px; + padding: 0; margin-left: -5px; } diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css index ffeb59a..349517e 100644 --- a/docs-assets/css/docs.css +++ b/docs-assets/css/docs.css @@ -1362,6 +1362,10 @@ hr { color: #929292; background-color: #78c6e3; } +.platform-android .bar-tab .tab-item .icon { + top: 3px; + padding: 0; +} .platform-android .title { position: static; padding-left: 15px; @@ -1396,11 +1400,13 @@ hr { .platform-android .bar .segmented-control { top: 7px; } -.platform-android .bar > .icon { - top: 13px; +.platform-android .bar .icon { + padding-top: 13px; + padding-bottom: 13px; } .platform-android .bar .title .icon-caret { top: 10px; + padding: 0; color: #777; } .platform-android .bar input[type="search"] { diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index 6a2990d..3f3832e 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -104,8 +104,10 @@ // Tab icon .icon { + top: 2px; width: 24px; height: 24px; + padding: 0; // Make the label smaller if it's used with an icon ~ .tab-label { @@ -150,27 +152,28 @@ &.active { color: darken($primary-color, 10%); } - // Make sure link buttons line up with the content correctly + + // Make sure link buttons w/ icons line up with the content correctly + .icon { + padding-right: 0; + padding-left: 0; + } &.pull-left { margin-left: 5px; .icon { margin-right: -3px; - margin-left: -8px; + margin-left: -10px; } } &.pull-right { margin-right: 5px; .icon { - margin-right: -8px; + margin-right: -10px; margin-left: -3px; } } - // Position icons in link buttons correctly. - .icon { - top: 2px; - } } @@ -212,23 +215,26 @@ .bar { .icon { position: relative; - top: 2px; + padding: 10px; 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: -3px; + margin-left: -10px; } &.pull-right { - margin-right: -3px; + margin-right: -10px; } } - > .icon { - top: 10px; - } // Handle carets in the titles .title .icon-caret { top: 4px; + padding: 0; margin-left: -5px; } } diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index 3f4bf2a..fb66ddb 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -268,6 +268,10 @@ a { color: #929292; background-color: #78c6e3; } + .icon { + top: 3px; + padding: 0; + } } } @@ -324,12 +328,14 @@ a { // Bars with Ratchicons .bar { - > .icon { - top: 13px; + .icon { + padding-top: 13px; + padding-bottom: 13px; } // Handle carets in the titles .title .icon-caret { top: 10px; + padding: 0; color: #777; } }