javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

button bar button tweaks

Browse Source
This commit is contained in:
Adam Bradley
2013-11-06 21:35:00 -06:00
parent 703a745179
commit c6c85730a4
5 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Gruntfile.js
View File

@ -84,7 +84,6 @@ module.exports = function(grunt) {
dist: { dist: {
files: { files: {
'dist/css/ionic.css': 'scss/ionic/ionic.scss', 'dist/css/ionic.css': 'scss/ionic/ionic.scss',
'dist/css/ionic-scoped.css': 'scss/ionic/ionic-scoped.scss',
'dist/css/ionic-ios7.css': 'scss/ionic-ios7/ionic-ios7.scss' 'dist/css/ionic-ios7.css': 'scss/ionic-ios7/ionic-ios7.scss'
} }
} }

8
dist/css/ionic.css vendored
View File

@ -2510,16 +2510,18 @@ a.subduedΓÇÄ {
.bar > .button { .bar > .button {
z-index: 1; z-index: 1;
padding: 0 8px; padding: 0 8px;
min-width: 43px; height: 32px;
min-width: 44px;
min-height: 31px; min-height: 31px;
font-size: 12px; font-size: 12px;
line-height: 30px; } line-height: 29px; }
.bar > .button .icon { .bar > .button .icon {
font-size: 24px; font-size: 24px;
line-height: 29px; } line-height: 29px; }
.bar .button-bar > .button { .bar .button-bar > .button {
height: 32px;
min-height: 31px; min-height: 31px;
line-height: 31px; } line-height: 30px; }
.bar .button-bar + .button, .bar .button + .button-bar { .bar .button-bar + .button, .bar .button + .button-bar {
margin-left: 5px; } margin-left: 5px; }
.bar .title + .button:last-child, .bar .title + .button:last-child,

12
scss/ionic/_bar.scss
View File

@ -104,20 +104,22 @@
> .button { > .button {
z-index: 1; z-index: 1;
padding: 0 $button-bar-button-padding; padding: 0 $button-bar-button-padding;
height: $button-bar-button-height;
min-width: $button-bar-button-height + $button-bar-button-font-size; min-width: $button-bar-button-height + $button-bar-button-font-size;
min-height: $button-bar-button-height; min-height: $button-bar-button-height - 1;
font-size: $button-bar-button-font-size; font-size: $button-bar-button-font-size;
line-height: $button-bar-button-height - $button-border-width; line-height: $button-bar-button-height - $button-border-width - 2;
.icon { .icon {
font-size: $button-bar-button-icon-size; font-size: $button-bar-button-icon-size;
line-height: $button-bar-button-height - $button-border-width - 1; line-height: $button-bar-button-height - $button-border-width - 2;
} }
} }
.button-bar > .button { .button-bar > .button {
min-height: $button-bar-button-height; height: $button-bar-button-height;
line-height: $button-bar-button-height; min-height: $button-bar-button-height - 1;
line-height: $button-bar-button-height - 2;
} }
.button-bar + .button, .button + .button-bar { .button-bar + .button, .button + .button-bar {

5
scss/ionic/_variables.scss
View File

@ -231,7 +231,7 @@ $button-small-padding: 4px !default;
$button-small-icon-size: 16px; $button-small-icon-size: 16px;
$button-bar-button-font-size: 12px; $button-bar-button-font-size: 12px;
$button-bar-button-height: 31px; $button-bar-button-height: 32px;
$button-bar-button-padding: 8px !default; $button-bar-button-padding: 8px !default;
$button-bar-button-icon-size: 24px; $button-bar-button-icon-size: 24px;
@ -280,9 +280,6 @@ $button-dark-active-border: #000;
// ------------------------------- // -------------------------------
$bar-height: 44px !default; $bar-height: 44px !default;
$bar-button-line-height: 23px !default;
$bar-button-clear-line-height: 34px !default;
$bar-button-bar-line-height: 18px !default;
$bar-title-font-size: $font-size-large; $bar-title-font-size: $font-size-large;
$bar-padding-portrait: 5px; $bar-padding-portrait: 5px;
$bar-padding-landscape: 5px; $bar-padding-landscape: 5px;

4
test/headers.html
View File

@ -26,7 +26,7 @@
<div class="bar bar-header-secondary bar-success"> <div class="bar bar-header-secondary bar-success">
<a class="button"> <a class="button">
<i class="icon ion-home"></i> Home <i class="icon ion-navicon"></i> Home
</a> </a>
<div class="button-bar"> <div class="button-bar">
<a class="button">Success</a> <a class="button">Success</a>
@ -40,7 +40,7 @@
<header class="bar bar-header bar-default"> <header class="bar bar-header bar-default">
<a class="button button-default"> <a class="button button-default">
<i class="icon ion-home"></i> Home <i class="icon ion-navicon"></i> Home
</a> </a>
<div class="button-bar"> <div class="button-bar">
<a class="button">Success</a> <a class="button">Success</a>