javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-12 03:59:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

Header button love

Browse Source
This commit is contained in:
Max Lynch
2013-09-09 17:29:30 -05:00
parent c7b0728fad
commit 58d13c4af8
5 changed files with 25 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
example/headers.html
View File

@@ -20,9 +20,9 @@
<section> <section>
<header class="bar bar-header bar-dark"> <header class="bar bar-header bar-dark">
<a class="button">Back</a>
<h1 class="title">Really really really really really really really really long title!</h1> <h1 class="title">Really really really really really really really really long title!</h1>
<a class="button button-clear">Back</a> <a class="button">This</a>
<a class="button button-clear">This</a>
</header> </header>
<div class="bar bar-header-secondary bar-dark"> <div class="bar bar-header-secondary bar-dark">
<div class="button-bar"> <div class="button-bar">
@@ -32,13 +32,13 @@
</div> </div>
</div> </div>
<header class="bar bar-header bar-dark"> <header class="bar bar-header bar-dark">
<a class="button button-clear">Back</a> <a class="button">Back</a>
<div class="button-bar"> <div class="button-bar">
<a class="button">Success</a> <a class="button">Success</a>
<a class="button">Warning</a> <a class="button">Warning</a>
<a class="button">Danger</a> <a class="button">Danger</a>
</div> </div>
<a class="button button-clear">This</a> <a class="button">This</a>
</header> </header>
<main class="content content-padded has-header"> <main class="content content-padded has-header">

10
scss/ionic/_structure-variables.scss
View File

@@ -20,14 +20,18 @@ $roundedRadius: 5px;
// ------------------------------- // -------------------------------
$barHeight: 44px !default; $barHeight: 44px !default;
$barLineHeight: 44px !default; $barLineHeight: 44px !default;
$barButtonsLineHeight: 6px !default; $barButtonLineHeight: 23px !default;
$barButtonBarLineHeight: 18px !default;
$barTitleFontSize: $fontSizeLarge; $barTitleFontSize: $fontSizeLarge;
$barTitleLineHeightComputed: 26px;//$barHeight - 2; $barTitleLineHeightComputed: 26px;//$barHeight - 2;
$barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2); $barPaddingPortrait: 5px;
$barPaddingPortrait: 8px;
$barPaddingLandscape: 5px; $barPaddingLandscape: 5px;
// Button bar stuff
// -------------------------------
$buttonBarButtonLineHeight: 15px !default;
// Horizontal forms & lists // Horizontal forms & lists
// ------------------------------- // -------------------------------
$horizontalComponentOffset: 180px !default; $horizontalComponentOffset: 180px !default;

2
scss/ionic/_theme-variables.scss
View File

@@ -65,7 +65,7 @@ $darkColor: #333;
// Buttons // Buttons
// ------------------------------- // -------------------------------
$buttonColor: #222; $buttonColor: #222;
$buttonPadding: 10px 15px; $buttonPadding: 4px 12px;
$buttonClearPadding: 10px 0px; $buttonClearPadding: 10px 0px;
$buttonBorderRadius: 2px; $buttonBorderRadius: 2px;
$buttonBorderWidth: 1px; $buttonBorderWidth: 1px;

10
scss/ionic/structure/_bar.scss
View File

@@ -49,6 +49,16 @@
.button { .button {
@include box-flex(0); @include box-flex(0);
line-height: $barButtonLineHeight;
font-size: 12px;
}
.button-bar {
line-height: $barButtonBarLineHeight;
}
.button-bar + .button, .button + .button-bar {
margin-left: 5px;
} }
// Place the last button in a bar on the right of the bar // Place the last button in a bar on the right of the bar

4
scss/ionic/structure/_button-group.scss
View File

@@ -76,7 +76,7 @@
@include box-flex(1); @include box-flex(1);
// Fix for box-flex width issue // Fix for box-flex width issue
line-height: 8px; line-height: $buttonBarButtonLineHeight;
border-radius: 0; border-radius: 0;
overflow: hidden; overflow: hidden;
@@ -87,6 +87,8 @@
border-width: 1px 0px 1px 1px; border-width: 1px 0px 1px 1px;
padding: 8px 16px;
&:last-child { &:last-child {
border-right-width: 1px; border-right-width: 1px;
} }