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

update button vertical alignments

Browse Source
This commit is contained in:
Adam Bradley
2013-10-30 07:48:47 -05:00
parent 082259dcfb
commit 83a00fa301
8 changed files with 934 additions and 791 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
dist/css/ionic-ios7.css vendored
View File

@ -182,7 +182,7 @@ sub {
fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; }
border: 1px solid #c0c0c0; }
/**
* 1. Correct `color` not being inherited in IE 8/9.
@ -1629,7 +1629,7 @@ input[type="file"] {
line-height: 34px; }
select {
border: 1px solid #cccccc;
border: 1px solid #ccc;
background-color: white; }
select[multiple],
@ -1701,7 +1701,7 @@ input[type="checkbox"][readonly] {
right: 20px;
transition: 0.2s ease;
transition-property: left, right;
transition-delay: 0s, 0.05s; }
transition-delay: 0s, .05s; }
.toggle :checked + .track {
/* When the toggle is "on" */
@ -1716,7 +1716,7 @@ input[type="checkbox"][readonly] {
right: 0;
left: 20px;
-webkit-transform: none;
transition-delay: 0.05s, 0s; }
transition-delay: .05s, 0s; }
.item-radio {
padding: 0; }
@ -1792,23 +1792,22 @@ input[type="range"] {
font-size: 16px;
line-height: 23px;
cursor: pointer; }
.button [class^="icon-"],
.button [class*=" icon-"] {
.button i, .button .icon {
display: inline-block;
padding: 0;
vertical-align: inherit;
font-size: 24px;
line-height: 22px; }
.button.button-icon {
padding: 4px 5px;
padding: 12px 6px;
background: none; }
.button.button-icon [class^="icon-"],
.button.button-icon [class*=" icon-"] {
.button.button-icon i, .button.button-icon .icon {
font-size: 32px; }
.button.button-clear {
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;
padding: 4px 5px;
padding: 12px 6px;
max-height: 44px;
border: none;
background: none;
box-shadow: none; }
@ -2001,25 +2000,25 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active {
background: none;
box-shadow: none;
text-shadow: 0px 0px 10px white; }
text-shadow: 0px 0px 10px #fff; }
.button.block, .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
.button-small {
font-size: 12px;
padding: 1px 8px 1px 8px;
min-height: 32px;
padding: 1px 8px 1px 8px; }
.button-small [class^="icon-"],
.button-small [class*=" icon-"] {
font-size: 20px; }
line-height: 29px;
font-size: 12px; }
.button-small i, .button-small .icon {
font-size: 20px;
line-height: 26px; }
.button-large {
font-size: 24px;
padding: 12px 18px 12px 18px;
min-height: 52px;
padding: 12px 18px 12px 18px; }
.button-large [class^="icon-"],
.button-large [class*=" icon-"] {
font-size: 24px; }
.button-large i, .button-large .icon {
font-size: 32px; }
.padding > .button.block:first-child {
@ -2359,9 +2358,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.icon-loading:before {
content: "\e144"; }
@ -2374,9 +2373,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.icon-refreshing:before {
content: "\e144"; }

51
dist/css/ionic-scoped.css vendored
View File

@ -1028,7 +1028,7 @@
.ionic fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; }
border: 1px solid #c0c0c0; }
.ionic legend {
padding: 0;
/* 2 */
@ -2286,7 +2286,7 @@
.ionic input[type="file"] {
line-height: 34px; }
.ionic select {
border: 1px solid #cccccc;
border: 1px solid #ccc;
background-color: white; }
.ionic select[multiple],
.ionic select[size] {
@ -2335,7 +2335,7 @@
border-radius: 50%;
background: white;
content: ' ';
transition: background-color 0.1s ease-in-out; }
transition: background-color .1s ease-in-out; }
.ionic .checkbox input:after {
position: absolute;
top: 34%;
@ -2348,7 +2348,7 @@
border-right: 0;
content: ' ';
opacity: 0;
transition: opacity 0.05s ease-in-out;
transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.ionic .checkbox input:checked:before {
@ -2491,23 +2491,22 @@
font-size: 16px;
line-height: 23px;
cursor: pointer; }
.ionic .button [class^="icon-"],
.ionic .button [class*=" icon-"] {
.ionic .button i, .ionic .button .icon {
display: inline-block;
padding: 0;
vertical-align: inherit;
font-size: 24px;
line-height: 22px; }
.ionic .button.button-icon {
padding: 4px 5px;
padding: 12px 6px;
background: none; }
.ionic .button.button-icon [class^="icon-"],
.ionic .button.button-icon [class*=" icon-"] {
.ionic .button.button-icon i, .ionic .button.button-icon .icon {
font-size: 32px; }
.ionic .button.button-clear {
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;
padding: 4px 5px;
padding: 12px 6px;
max-height: 44px;
border: none;
background: none;
box-shadow: none; }
@ -2700,23 +2699,23 @@
.ionic .button.button-icon:active, .ionic .button.button-icon.active {
background: none;
box-shadow: none;
text-shadow: 0px 0px 10px white; }
text-shadow: 0px 0px 10px #fff; }
.ionic .button.block, .ionic .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
.ionic .button-small {
font-size: 12px;
padding: 1px 8px 1px 8px;
min-height: 32px;
padding: 1px 8px 1px 8px; }
.ionic .button-small [class^="icon-"],
.ionic .button-small [class*=" icon-"] {
font-size: 20px; }
line-height: 29px;
font-size: 12px; }
.ionic .button-small i, .ionic .button-small .icon {
font-size: 20px;
line-height: 26px; }
.ionic .button-large {
font-size: 24px;
padding: 12px 18px 12px 18px;
min-height: 52px;
padding: 12px 18px 12px 18px; }
.ionic .button-large [class^="icon-"],
.ionic .button-large [class*=" icon-"] {
font-size: 24px; }
.ionic .button-large i, .ionic .button-large .icon {
font-size: 32px; }
.ionic .padding > .button.block:first-child {
margin-top: 0; }
@ -2966,9 +2965,9 @@
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.ionic .icon-loading:before {
content: "\e144"; }
.ionic .icon-refreshing {
@ -2980,9 +2979,9 @@
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.ionic .icon-refreshing:before {
content: "\e144"; }
.ionic .hidden,

51
dist/css/ionic.css vendored
View File

@ -1261,7 +1261,7 @@ sub {
fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; }
border: 1px solid #c0c0c0; }
/**
* 1. Correct `color` not being inherited in IE 8/9.
@ -2772,7 +2772,7 @@ input[type="file"] {
line-height: 34px; }
select {
border: 1px solid #cccccc;
border: 1px solid #ccc;
background-color: white; }
select[multiple],
@ -2827,7 +2827,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%;
background: white;
content: ' ';
transition: background-color 0.1s ease-in-out; }
transition: background-color .1s ease-in-out; }
/* the checkmark within the box */
.checkbox input:after {
@ -2842,7 +2842,7 @@ input[type="checkbox"][readonly] {
border-right: 0;
content: ' ';
opacity: 0;
transition: opacity 0.05s ease-in-out;
transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
@ -3013,23 +3013,22 @@ input[type="range"] {
font-size: 16px;
line-height: 23px;
cursor: pointer; }
.button [class^="icon-"],
.button [class*=" icon-"] {
.button i, .button .icon {
display: inline-block;
padding: 0;
vertical-align: inherit;
font-size: 24px;
line-height: 22px; }
.button.button-icon {
padding: 4px 5px;
padding: 12px 6px;
background: none; }
.button.button-icon [class^="icon-"],
.button.button-icon [class*=" icon-"] {
.button.button-icon i, .button.button-icon .icon {
font-size: 32px; }
.button.button-clear {
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;
padding: 4px 5px;
padding: 12px 6px;
max-height: 44px;
border: none;
background: none;
box-shadow: none; }
@ -3222,25 +3221,25 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active {
background: none;
box-shadow: none;
text-shadow: 0px 0px 10px white; }
text-shadow: 0px 0px 10px #fff; }
.button.block, .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
.button-small {
font-size: 12px;
padding: 1px 8px 1px 8px;
min-height: 32px;
padding: 1px 8px 1px 8px; }
.button-small [class^="icon-"],
.button-small [class*=" icon-"] {
font-size: 20px; }
line-height: 29px;
font-size: 12px; }
.button-small i, .button-small .icon {
font-size: 20px;
line-height: 26px; }
.button-large {
font-size: 24px;
padding: 12px 18px 12px 18px;
min-height: 52px;
padding: 12px 18px 12px 18px; }
.button-large [class^="icon-"],
.button-large [class*=" icon-"] {
font-size: 24px; }
.button-large i, .button-large .icon {
font-size: 32px; }
.padding > .button.block:first-child {
@ -3685,9 +3684,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.icon-loading:before {
content: "\e144"; }
@ -3700,9 +3699,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.icon-refreshing:before {
content: "\e144"; }

1472
dist/js/ionic.js vendored
View File

File diff suppressed because it is too large Load Diff

2
scss/ionic/_bar.scss
View File

@ -106,7 +106,7 @@
z-index: 1;
margin: 0;
padding: 2px 8px 0 8px;
min-height: $button-bar-button-min-hieght;
min-height: $button-bar-button-min-height;
background-color: transparent;
font-size: 12px;
line-height: 28px;

23
scss/ionic/_button.scss
View File

@ -21,8 +21,7 @@
cursor: pointer;
[class^="icon-"],
[class*=" icon-"] {
i, .icon {
display: inline-block;
padding: 0;
vertical-align: inherit;
@ -34,8 +33,7 @@
padding: $button-clear-padding;
background: none;
[class^="icon-"],
[class*=" icon-"] {
i, .icon {
font-size: $button-icon-large-font-size;
}
}
@ -43,6 +41,7 @@
&.button-clear {
@include transition(opacity .1s);
padding: $button-clear-padding;
max-height: 44px;
border: none;
background: none;
box-shadow: none;
@ -117,23 +116,23 @@
}
.button-small {
font-size: $button-font-size - 4;
min-height: 32px;
padding: 1px 8px 1px 8px;
min-height: $button-small-min-height;
line-height: $button-small-line-height;
font-size: $button-font-size - 4;
[class^="icon-"],
[class*=" icon-"] {
i, .icon {
font-size: $button-icon-font-size - 4;
line-height: $button-small-line-height - 3;
}
}
.button-large {
font-size: $button-font-size + 8;
min-height: $button-min-height + 8;
padding: 12px 18px 12px 18px;
min-height: $button-min-height + 8;
font-size: $button-font-size + 8;
[class^="icon-"],
[class*=" icon-"] {
i, .icon {
font-size: $button-icon-font-size + 8;
}
}

7
scss/ionic/_variables.scss
View File

@ -212,18 +212,21 @@ $info-border: darken(adjust-hue($info-bg, -10), 7%);
$button-color: #222;
$button-padding: 10px 12px 7px 12px;
$button-block-margin: 10px !default;
$button-clear-padding: 4px 5px;
$button-clear-padding: 12px 6px;
$button-border-radius: 2px;
$button-border-width: 1px;
$button-font-size: 16px;
$button-line-height: 23px;
$button-min-height: 44px;
$button-small-line-height: 29px !default;
$button-small-min-height: 32px !default;
$button-icon-font-size: 24px;
$button-icon-large-font-size: 32px;
$button-bar-button-line-height: 15px !default;
$button-bar-button-min-hieght: 33px !default;
$button-bar-button-min-height: 33px !default;
$button-default-bg: $brand-default;
$button-default-border: #ddd;

68
test/buttons.html
View File

@ -30,7 +30,7 @@
<h3>a.button default</h3>
<p>
<a class="button button-default"><i class="icon-home"></i> .button-default</a>
<a class="button button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary"><i class="icon-home"></i></a>
<a class="button button-primary"><i class="icon-home"></i> .button-primary</a>
<a class="button button-info"><i class="icon-home"></i></a>
@ -44,7 +44,7 @@
<h3>button.button default</h3>
<p>
<button class="button button-default"><i class="icon-home"></i> .button-default</button>
<button class="button button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-secondary">.button-secondary</button>
<button class="button button-primary"><i class="icon-home"></i> .button-primary</button>
<button class="button button-info">.button-info</button>
@ -58,7 +58,7 @@
<h3>a.button.button-large default</h3>
<p>
<a class="button button-large button-default"><i class="icon-home"></i> .button-default</a>
<a class="button button-large button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-large button-secondary"><i class="icon-home"></i></a>
<a class="button button-large button-primary"><i class="icon-home"></i> .button-primary</a>
<a class="button button-large button-info"><i class="icon-home"></i></a>
@ -72,7 +72,7 @@
<h3>button.button. button-large default</h3>
<p>
<button class="button button-large button-default"><i class="icon-home"></i> .button-default</button>
<button class="button button-large button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-large button-secondary">.button-secondary</button>
<button class="button button-large button-primary"><i class="icon-home"></i> .button-primary</button>
<button class="button button-large button-info">.button-info</button>
@ -86,7 +86,7 @@
<h3>a.button.button-small default</h3>
<p>
<a class="button button-small button-default"><i class="icon-home"></i> .button-default</a>
<a class="button button-small button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-small button-secondary"><i class="icon-home"></i></a>
<a class="button button-small button-primary"><i class="icon-home"></i> .button-primary</a>
<a class="button button-small button-info"><i class="icon-home"></i></a>
@ -98,9 +98,9 @@
<hr>
<h3>button.button. button-small default</h3>
<h3>button.button.button-small</h3>
<p>
<button class="button button-small button-default"><i class="icon-home"></i> .button-default</button>
<button class="button button-small button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-small button-secondary">.button-secondary</button>
<button class="button button-small button-primary"><i class="icon-home"></i> .button-primary</button>
<button class="button button-small button-info">.button-info</button>
@ -112,9 +112,37 @@
<hr>
<h3>a.button.button-clear (Mixed in with others)</h3>
<p>
<a class="button button-clear button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary"><i class="icon-home"></i></a>
<a class="button button-clear button-primary"><i class="icon-home"></i> .button-primary</a>
<a class="button button-clear button-info"><i class="icon-home"></i></a>
<a class="button button-success">.button-success</a>
<a class="button button-warning"><i class="icon-home"></i> .button-warning</a>
<a class="button button-clear button-danger">.button-danger</a>
<a class="button button-clear button-dark"><i class="icon-home"></i> .button-dark</a>
</p>
<hr>
<h3>button.button.button-clear default</h3>
<p>
<button class="button button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-clear button-secondary">.button-secondary</button>
<button class="button button-primary"><i class="icon-home"></i> .button-primary</button>
<button class="button button-clear button-info">.button-info</button>
<button class="button button-clear button-success"><i class="icon-home"></i></button>
<button class="button button-clear button-warning">.button-warning</button>
<button class="button button-clear button-danger"><i class="icon-home"></i> .button-danger</button>
<button class="button button-dark"><i class="icon-home"></i></button>
</p>
<hr>
<h3>a.block (parent w/ padding)</h3>
<p>
<a class="button block button-default"><i class="icon-home"></i> .button-default</a>
<a class="button block button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button block button-secondary">.button-secondary</a>
<a class="button block button-primary">.button-primary</a>
<a class="button block button-info">.button-info</a>
@ -128,7 +156,7 @@
<h3>button.block (parent w/ padding)</h3>
<p>
<button class="button block button-default"><i class="icon-home"></i> .button-default</button>
<button class="button block button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button block button-secondary">.button-secondary</button>
<button class="button block button-primary">.button-primary</button>
<button class="button block button-info">.button-info</button>
@ -170,7 +198,7 @@
<h3>a.button-outline</h3>
<p>
<a class="button button-default button-outline"><i class="icon-home"></i> .button-default</a>
<a class="button button-default button-outline"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary button-outline">.button-secondary</a>
<a class="button button-primary button-outline">.button-primary</a>
<a class="button button-info button-outline">.button-info</a>
@ -184,7 +212,7 @@
<h3>button.button-outline</h3>
<p>
<button class="button button-default button-outline"><i class="icon-home"></i> .button-default</button>
<button class="button button-default button-outline"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-secondary button-outline">.button-secondary</button>
<button class="button button-primary button-outline">.button-primary</button>
<button class="button button-info button-outline">.button-info</button>
@ -198,7 +226,7 @@
<h3>a.block.button-outline (parent w/ padding)</h3>
<p>
<a class="button button-default button-outline block"><i class="icon-home"></i> .button-default</a>
<a class="button button-default button-outline block"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary button-outline block">.button-secondary</a>
<a class="button button-primary button-outline block">.button-primary</a>
<a class="button button-info button-outline block">.button-info</a>
@ -212,7 +240,7 @@
<h3>button.block.button-outline (parent w/ padding)</h3>
<p>
<button class="button button-default button-outline block"><i class="icon-home"></i> .button-default</button>
<button class="button button-default button-outline block"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-secondary button-outline block">.button-secondary</button>
<button class="button button-primary button-outline block">.button-primary</button>
<button class="button button-info button-outline block">.button-info</button>
@ -226,7 +254,7 @@
<h3>a.button-clear</h3>
<p>
<a class="button button-default button-clear"><i class="icon-home"></i> .button-default</a>
<a class="button button-default button-clear"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary button-clear">.button-secondary</a>
<a class="button button-primary button-clear">.button-primary</a>
<a class="button button-info button-clear">.button-info</a>
@ -240,7 +268,7 @@
<h3>button.button-clear</h3>
<p>
<button class="button button-default button-clear"><i class="icon-home"></i> .button-default</button>
<button class="button button-default button-clear"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-secondary button-clear">.button-secondary</button>
<button class="button button-primary button-clear">.button-primary</button>
<button class="button button-info button-clear">.button-info</button>
@ -254,7 +282,7 @@
<h3>a.block.button-clear (parent w/ padding)</h3>
<p>
<a class="button button-default button-clear block"><i class="icon-home"></i> .button-default</a>
<a class="button button-default button-clear block"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary button-clear block">.button-secondary</a>
<a class="button button-primary button-clear block">.button-primary</a>
<a class="button button-info button-clear block">.button-info</a>
@ -268,7 +296,7 @@
<h3>button.block.button-clear (parent w/ padding)</h3>
<p>
<button class="button button-default button-clear block"><i class="icon-home"></i> .button-default</button>
<button class="button button-default button-clear block"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-secondary button-clear block">.button-secondary</button>
<button class="button button-primary button-clear block">.button-primary</button>
<button class="button button-info button-clear block">.button-info</button>
@ -284,7 +312,7 @@
<h3>a.block (parent w/out padding)</h3>
<p>
<a class="button block button-default"><i class="icon-home"></i> .button-default</a>
<a class="button block button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button block button-secondary">.button-secondary</a>
<a class="button block button-primary">.button-primary</a>
<a class="button block button-info">.button-info</a>
@ -298,7 +326,7 @@
<h3>a.block (.button-full on the parent)</h3>
<p class="button-full">
<a class="button button-default"><i class="icon-home"></i> .button-default</a>
<a class="button button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary">.button-secondary</a>
<a class="button button-primary">.button-primary</a>
<a class="button button-info">.button-info</a>
@ -312,7 +340,7 @@
<h3>button.block.button-full on each button and nothing on the parent</h3>
<p>
<button class="button button-full button-default"><i class="icon-home"></i> .button-default</button>
<button class="button button-full button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-full button-secondary">.button-secondary</button>
<button class="button button-full button-primary">.button-primary</button>
<button class="button button-full button-info">.button-info</button>