update button vertical alignments

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

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"; }

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"; }