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

started different button sizes

Browse Source
This commit is contained in:
Adam Bradley
2013-10-28 20:32:04 -05:00
parent e66a27996b
commit fe71fda9e3
9 changed files with 854 additions and 721 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
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.
@ -199,6 +199,7 @@ legend {
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
* 4. Remove any default :focus styles
* 5. Make sure webkit font smoothing is being inherited
*/
button,
input,
@ -215,7 +216,9 @@ textarea {
outline-style: none;
/* 4 */
outline-width: 0;
/* 4 */ }
/* 4 */
-webkit-font-smoothing: inherit;
/* 5 */ }
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
@ -1727,7 +1730,7 @@ input[type="file"] {
line-height: 34px; }
select {
border: 1px solid #cccccc;
border: 1px solid #ccc;
background-color: white; }
select[multiple],
@ -1799,7 +1802,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" */
@ -1814,7 +1817,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; }
@ -2099,11 +2102,27 @@ 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;
min-height: 32px;
padding: 1px 8px 1px 8px; }
.button-small [class^="icon-"],
.button-small [class*=" icon-"] {
font-size: 20px; }
.button-large {
font-size: 24px;
min-height: 52px;
padding: 12px 18px 12px 18px; }
.button-large [class^="icon-"],
.button-large [class*=" icon-"] {
font-size: 32px; }
.padding > .button.block:first-child {
margin-top: 0; }
@ -2441,9 +2460,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"; }
@ -2456,9 +2475,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"; }

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

@ -92,6 +92,7 @@
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
* 4. Remove any default :focus styles
* 5. Make sure webkit font smoothing is being inherited
*/
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
@ -1027,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 */
@ -1048,7 +1049,9 @@
outline-style: none;
/* 4 */
outline-width: 0;
/* 4 */ }
/* 4 */
-webkit-font-smoothing: inherit;
/* 5 */ }
.ionic button,
.ionic input {
line-height: normal; }
@ -2385,7 +2388,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] {
@ -2434,7 +2437,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%;
@ -2447,7 +2450,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 {
@ -2799,10 +2802,24 @@
.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;
min-height: 32px;
padding: 1px 8px 1px 8px; }
.ionic .button-small [class^="icon-"],
.ionic .button-small [class*=" icon-"] {
font-size: 20px; }
.ionic .button-large {
font-size: 24px;
min-height: 52px;
padding: 12px 18px 12px 18px; }
.ionic .button-large [class^="icon-"],
.ionic .button-large [class*=" icon-"] {
font-size: 32px; }
.ionic .padding > .button.block:first-child {
margin-top: 0; }
.ionic .button-full,
@ -3051,9 +3068,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 {
@ -3065,9 +3082,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,

43
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.
@ -1278,6 +1278,7 @@ legend {
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
* 4. Remove any default :focus styles
* 5. Make sure webkit font smoothing is being inherited
*/
button,
input,
@ -1294,7 +1295,9 @@ textarea {
outline-style: none;
/* 4 */
outline-width: 0;
/* 4 */ }
/* 4 */
-webkit-font-smoothing: inherit;
/* 5 */ }
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
@ -2870,7 +2873,7 @@ input[type="file"] {
line-height: 34px; }
select {
border: 1px solid #cccccc;
border: 1px solid #ccc;
background-color: white; }
select[multiple],
@ -2925,7 +2928,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 {
@ -2940,7 +2943,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); }
@ -3320,11 +3323,27 @@ 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;
min-height: 32px;
padding: 1px 8px 1px 8px; }
.button-small [class^="icon-"],
.button-small [class*=" icon-"] {
font-size: 20px; }
.button-large {
font-size: 24px;
min-height: 52px;
padding: 12px 18px 12px 18px; }
.button-large [class^="icon-"],
.button-large [class*=" icon-"] {
font-size: 32px; }
.padding > .button.block:first-child {
margin-top: 0; }
@ -3767,9 +3786,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"; }
@ -3782,9 +3801,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"; }

1332
dist/js/ionic.js vendored
View File

File diff suppressed because it is too large Load Diff

8
scss/ionic/_bar.scss
View File

@ -75,12 +75,6 @@
@include bar-style($bar-dark-bg, $bar-dark-border-color, $white);
}
//
//Disabled temporarily because it's annoying for testing.
//@media screen and (orientation : landscape) {
//padding: $barPaddingLandscape;
//}
// Title inside of a bar is centered
.title {
position: absolute;
@ -114,7 +108,7 @@
z-index: 1;
margin: 0;
padding: 2px 8px 0 8px;
min-height: 34px;
min-height: $button-bar-button-min-hieght;
background-color: transparent;
font-size: 12px;
line-height: 28px;

34
scss/ionic/_button.scss
View File

@ -3,8 +3,8 @@
display: inline-block;
margin: 0;
padding: 9px 12px 7px 12px;
min-height: 44px;
padding: $button-padding;
min-height: $button-min-height;
border-width: $button-border-width;
border-style: solid;
@ -17,7 +17,7 @@
text-overflow: ellipsis;
font-size: $button-font-size;
line-height: 24px;
line-height: $button-line-height;
cursor: pointer;
@ -26,8 +26,8 @@
display: inline-block;
padding: 0;
vertical-align: sub;
font-size: 24px;
line-height: 24px;
font-size: $button-icon-font-size;
line-height: $button-line-height;
}
&.button-icon {
@ -36,7 +36,7 @@
[class^="icon-"],
[class*=" icon-"] {
font-size: 32px;
font-size: $button-icon-large-font-size;
}
}
@ -114,7 +114,28 @@
margin-bottom: $button-block-margin;
}
}
.button-small {
font-size: $button-font-size - 4;
min-height: 32px;
padding: 1px 8px 1px 8px;
[class^="icon-"],
[class*=" icon-"] {
font-size: $button-icon-font-size - 4;
}
}
.button-large {
font-size: $button-font-size + 8;
min-height: $button-min-height + 8;
padding: 12px 18px 12px 18px;
[class^="icon-"],
[class*=" icon-"] {
font-size: $button-icon-font-size + 8;
}
}
.padding > .button.block:first-child {
@ -140,4 +161,3 @@ button.button-full,
a.button {
text-decoration: none;
}

2
scss/ionic/_reset.scss
View File

@ -234,6 +234,7 @@ legend {
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
* 4. Remove any default :focus styles
* 5. Make sure webkit font smoothing is being inherited
*/
button,
@ -246,6 +247,7 @@ textarea {
outline-offset: 0; /* 4 */
outline-style: none; /* 4 */
outline-width: 0; /* 4 */
-webkit-font-smoothing: inherit; /* 5 */
}
/**

12
scss/ionic/_variables.scss
View File

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

60
test/buttons.html
View File

@ -28,7 +28,7 @@
<div class="padding">
<h3>&lt;a&gt; default</h3>
<h3>a.button default</h3>
<p>
<a class="button button-default"><i class="icon-home"></i> .button-default</a>
<a class="button button-secondary"><i class="icon-home"></i></a>
@ -42,7 +42,7 @@
<hr>
<h3>&lt;button&gt; default</h3>
<h3>button.button default</h3>
<p>
<button class="button button-default"><i class="icon-home"></i> .button-default</button>
<button class="button button-secondary">.button-secondary</button>
@ -56,6 +56,62 @@
<hr>
<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-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>
<a class="button button-large button-success">.button-success</a>
<a class="button button-large button-warning"><i class="icon-home"></i> .button-warning</a>
<a class="button button-large button-danger">.button-danger</a>
<a class="button button-large button-dark"><i class="icon-home"></i> .button-dark</a>
</p>
<hr>
<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-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>
<button class="button button-large button-success"><i class="icon-home"></i></button>
<button class="button button-large button-warning">.button-warning</button>
<button class="button button-large button-danger"><i class="icon-home"></i> .button-danger</button>
<button class="button button-large button-dark"><i class="icon-home"></i></button>
</p>
<hr>
<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-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>
<a class="button button-small button-success">.button-success</a>
<a class="button button-small button-warning"><i class="icon-home"></i> .button-warning</a>
<a class="button button-small button-danger">.button-danger</a>
<a class="button button-small button-dark"><i class="icon-home"></i> .button-dark</a>
</p>
<hr>
<h3>button.button. button-small default</h3>
<p>
<button class="button button-small button-default"><i class="icon-home"></i> .button-default</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>
<button class="button button-small button-success"><i class="icon-home"></i></button>
<button class="button button-small button-warning">.button-warning</button>
<button class="button button-small button-danger"><i class="icon-home"></i> .button-danger</button>
<button class="button button-small 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>