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

.icon- renamed to .ion.ion-

Browse Source
This commit is contained in:
Adam Bradley
2013-11-04 09:45:56 -06:00
parent 64a214d08f
commit 86bf5ed92d
30 changed files with 2252 additions and 2260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/ionic/_bar.scss
View File

@ -108,7 +108,7 @@
font-size: $button-bar-button-font-size;
line-height: $button-bar-button-height - $button-border-width;
i, .icon {
.ion {
font-size: $button-bar-button-icon-size;
line-height: $button-bar-button-height - $button-border-width - 1;
}

25
scss/ionic/_button.scss
View File

@ -1,10 +1,14 @@
// Buttons
// -------------------------------
.button {
position: relative;
display: inline-block;
margin: 0;
padding: $button-padding;
padding-top: 1px;
padding: 1px $button-padding 0 $button-padding;
min-width: ($button-padding * 3) + $button-font-size;
min-height: $button-height;
border-width: $button-border-width;
@ -22,7 +26,7 @@
cursor: pointer;
i, .icon {
.ion {
display: inline-block;
padding: 0 0 $button-border-width 0;
vertical-align: inherit;
@ -34,7 +38,7 @@
padding: 2px 4px;
background: none;
i, .icon {
.ion {
font-size: $button-large-icon-size;
}
}
@ -117,26 +121,29 @@
}
.button-small {
padding: $button-small-padding;
padding: 0 $button-small-padding;
min-width: $button-small-height;
min-height: $button-small-height;
font-size: $button-small-font-size;
line-height: $button-small-height - $button-border-width;
i, .icon {
.ion {
font-size: $button-small-icon-size;
line-height: $button-small-height - $button-border-width - 1;
}
}
.button-large {
padding: $button-large-padding;
padding: 0 $button-large-padding;
min-width: ($button-large-padding * 3) + $button-large-font-size;
min-height: $button-large-height;
font-size: $button-large-font-size;
line-height: $button-large-height - $button-border-width;
i, .icon {
.ion {
font-size: $button-large-icon-size;
line-height: $button-large-height - $button-border-width - 1;
line-height: $button-large-height - ($button-border-width * 2) - 1;
padding-bottom: ($button-border-width * 2);
}
}

4
scss/ionic/_form.scss
View File

@ -67,7 +67,7 @@ textarea {
color: $input-label-color;
font-weight: bold;
}
i, .icon {
.ion {
@include flex(0, 0, 24px);
position: static;
height: auto;
@ -85,7 +85,7 @@ textarea {
background-color: transparent;
box-shadow: none;
.input-label, [class^="icon-"], [class*=" icon-"] {
.input-label, .ion {
display: inline-block;
padding: 4px 0;
vertical-align: middle;

65
scss/ionic/_icons.scss
View File

@ -1,53 +1,56 @@
i.icon-default, .icon.icon-default {
// Icons
// -------------------------------
.ion-default {
color: $brand-default;
}
i.icon-secondary, .icon.icon-secondary {
.ion-secondary {
color: darken($brand-secondary, 10%);
}
i.icon-primary, .icon.icon-primary {
.ion-primary {
color: $brand-primary;
}
i.icon-info, .icon.icon-info {
.ion-info {
color: $brand-info;
}
i.icon-success, .icon.icon-success {
.ion-success {
color: $brand-success;
}
i.icon-warning, .icon.icon-warning {
.ion-warning {
color: $brand-warning;
}
i.icon-danger, .icon.icon-danger {
.ion-danger {
color: $brand-danger;
}
i.icon-dark, .icon.icon-dark {
.ion-dark {
color: $brand-dark;
}
i.icon-gray-darker, .icon.icon-gray-darker {
.ion-gray-darker {
color: $gray-darker;
}
i.icon-gray-dark, .icon.icon-gray-dark {
.ion-gray-dark {
color: $gray-dark;
}
i.icon-gray, .icon.icon-gray {
.ion-gray {
color: $gray;
}
i.icon-gray-light, .icon.icon-gray-light {
.ion-gray-light {
color: $gray-light;
}
i.icon-gray-lighter, .icon.icon-gray-lighter {
.ion-gray-lighter {
color: $gray-light;
}
@ -61,51 +64,51 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
padding: 1px;
}
&.icon-default:before {
&.ion-default:before {
background: $brand-default;
}
&.icon-secondary:before {
&.ion-secondary:before {
background: $brand-secondary;
}
&.icon-primary:before {
&.ion-primary:before {
background: $brand-primary;
}
&.icon-info:before {
&.ion-info:before {
background: $brand-info;
}
&.icon-success:before {
&.ion-success:before {
background: $brand-success;
}
&.icon-warning:before {
&.ion-warning:before {
background: $brand-warning;
}
&.icon-danger:before {
&.ion-danger:before {
background: $brand-danger;
}
&.icon-dark:before {
&.ion-dark:before {
background: $brand-dark;
}
&.icon-gray-darker:before {
&.ion-gray-darker:before {
background: $gray-darker;
}
&.icon-gray-dark:before {
&.ion-gray-dark:before {
background: $gray-dark;
}
&.icon-gray:before {
&.ion-gray:before {
background: $gray;
}
&.icon-gray-light:before {
&.ion-gray-light:before {
background: $gray-light;
}
&.icon-gray-lighter:before {
&.ion-gray-lighter:before {
background: $gray-lighter;
}
}
.icon-loading {
font-family: 'ionicons';
.ion-loading {
font-family: 'Ionicons';
speak: none;
font-weight: normal;
font-variant: normal;
@ -123,8 +126,8 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
}
}
.icon-refreshing {
font-family: 'ionicons';
.ion-refreshing {
font-family: 'Ionicons';
speak: none;
font-weight: normal;
font-variant: normal;
@ -140,4 +143,4 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
&:before {
content: "\e144";
}
}
}

22
scss/ionic/_items.scss
View File

@ -174,8 +174,7 @@ a.item {
// List Icons
// -------------------------------
.item i,
.item .icon {
.item .ion {
@include display-flex();
@include align-items(center);
position: absolute;
@ -193,7 +192,7 @@ a.item {
.item-icon-left {
padding-left: ($item-padding * 3);
i, .icon {
.ion {
left: $item-padding / 2;
}
}
@ -205,17 +204,14 @@ a.item {
}
}
.item-icon-right i,
.item-icon-right .icon {
.item-icon-right .ion {
right: $item-padding / 2;
}
.item-icon-left.item-icon-right i:first-child,
.item-icon-left.item-icon-right .icon:first-child {
.item-icon-left.item-icon-right .ion:first-child {
right: auto;
}
.item-icon-left.item-icon-right i:last-child,
.item-icon-left.item-icon-right .icon:last-child {
.item-icon-left.item-icon-right .ion:last-child {
left: auto;
}
@ -243,7 +239,7 @@ button.item:active,
font-size: $item-icon-font-size;
min-height: $item-icon-font-size;
i {
.ion {
position: relative;
line-height: $item-icon-font-size - 1;
left: auto;
@ -264,7 +260,7 @@ button.item:active,
font-size: $item-icon-font-size;
min-height: $item-icon-font-size;
i {
.ion {
position: relative;
line-height: $item-icon-font-size - 1;
left: auto;
@ -285,7 +281,7 @@ button.item:after {
right: $item-padding - 4;
height: 100%;
color: #ccc;
content: "\e0fc"; // icon-chevron-right
content: "\e0fc"; // ion-chevron-right
text-transform: none;
font-weight: normal;
font-style: normal;
@ -448,7 +444,7 @@ button.item-button-right:after {
height: 100%;
}
i, .icon {
.ion {
color: $brand-danger;
font-size: 24px;
}

10
scss/ionic/_tabs.scss
View File

@ -93,8 +93,7 @@
line-height: $tabs-text-font-size;
}
.tab-item i,
.tab-item .icon {
.tab-item .ion {
display: block;
margin: 0 auto;
height: $tabs-icon-size;
@ -104,7 +103,7 @@
.tabs-icon-left .tab-item,
.tabs-icon-right .tab-item {
font-size: $tabs-text-with-icon-font-size;
i, .icon {
.ion {
font-size: $tabs-icon-size - 8;
display: inline-block;
vertical-align: top;
@ -112,8 +111,7 @@
}
}
.tabs-icon-only i,
.tabs-icon-only .icon {
.tabs-icon-only .ion {
line-height: inherit;
}
@ -150,7 +148,7 @@
@include display-flex();
padding: 0;
i, .icon {
.ion {
position: relative;
}
}

12
scss/ionic/_variables.scss
View File

@ -211,28 +211,28 @@ $info-border: darken(adjust-hue($info-bg, -10), 7%);
$button-color: #222;
$button-block-margin: 10px !default;
$button-clear-padding: 0 6px;
$button-clear-padding: 6px !default;
$button-border-radius: 2px;
$button-border-width: 1px;
$button-font-size: 16px;
$button-height: 42px;
$button-padding: 0 12px;
$button-padding: 12px !default;
$button-icon-size: 24px;
$button-large-font-size: 18px;
$button-large-height: 54px;
$button-large-padding: 0 12px;
$button-large-padding: 16px !default;
$button-large-icon-size: 32px;
$button-small-font-size: 12px;
$button-small-height: 28px;
$button-small-padding: 0 4px;
$button-small-padding: 4px !default;
$button-small-icon-size: 16px;
$button-bar-button-font-size: 12px;
$button-bar-button-height: 31px !default;
$button-bar-button-padding: 0 8px;
$button-bar-button-height: 31px;
$button-bar-button-padding: 8px !default;
$button-bar-button-icon-size: 24px;
$button-default-bg: $brand-default;