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

i, .icon selectors, no more wildcard icon selector

Browse Source
This commit is contained in:
Adam Bradley
2013-10-31 17:07:42 -05:00
parent ca3bbb24ab
commit d724b78632
8 changed files with 77 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -656,8 +656,7 @@ a.subdued‎ {
background-color: transparent; background-color: transparent;
font-size: 12px; font-size: 12px;
line-height: 28px; } line-height: 28px; }
.bar > .button [class^="icon-"], .bar > .button i, .bar > .button .icon {
.bar > .button [class*=" icon-"] {
margin-top: 1px; } margin-top: 1px; }
.bar .button-bar { .bar .button-bar {
line-height: 18px; } line-height: 18px; }
@ -930,7 +929,8 @@ a.subdued‎ {
font-size: 10px; font-size: 10px;
line-height: 14px; } line-height: 14px; }
.tab-item i { .tab-item i,
.tab-item .icon {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
height: 32px; height: 32px;
@ -939,14 +939,16 @@ a.subdued‎ {
.tabs-icon-left .tab-item, .tabs-icon-left .tab-item,
.tabs-icon-right .tab-item { .tabs-icon-right .tab-item {
font-size: 10px; } font-size: 10px; }
.tabs-icon-left .tab-item i, .tabs-icon-left .tab-item i, .tabs-icon-left .tab-item .icon,
.tabs-icon-right .tab-item i { .tabs-icon-right .tab-item i,
.tabs-icon-right .tab-item .icon {
font-size: 24px; font-size: 24px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
line-height: 49px; } line-height: 49px; }
.tabs-icon-only i { .tabs-icon-only i,
.tabs-icon-only .icon {
line-height: inherit; } line-height: inherit; }
/* Navigational tab */ /* Navigational tab */
@ -1178,7 +1180,8 @@ a.item {
overflow: hidden; overflow: hidden;
white-space: nowrap; } white-space: nowrap; }
.item i { .item i,
.item .icon {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
@ -1199,7 +1202,7 @@ a.item {
.item-icon-left { .item-icon-left {
padding-left: 45px; } padding-left: 45px; }
.item-icon-left i { .item-icon-left i, .item-icon-left .icon {
left: 7.5px; } left: 7.5px; }
.item-slider.item-icon-left { .item-slider.item-icon-left {
@ -1207,13 +1210,16 @@ a.item {
.item-slider.item-icon-left .item-content { .item-slider.item-icon-left .item-content {
padding-left: 45px; } padding-left: 45px; }
.item-icon-right i { .item-icon-right i,
.item-icon-right .icon {
right: 7.5px; } right: 7.5px; }
.item-icon-left.item-icon-right i:first-child { .item-icon-left.item-icon-right i:first-child,
.item-icon-left.item-icon-right .icon:first-child {
right: auto; } right: auto; }
.item-icon-left.item-icon-right i:last-child { .item-icon-left.item-icon-right i:last-child,
.item-icon-left.item-icon-right .icon:last-child {
left: auto; } left: auto; }
a.item:active, a.item:active,
@ -1339,7 +1345,7 @@ button.item-icon-right:after {
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; } -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.item-edit .button { .item-edit .button {
height: 100%; } height: 100%; }
.item-edit i { .item-edit i, .item-edit .icon {
color: #ef4e3a; color: #ef4e3a;
font-size: 24px; } font-size: 24px; }
.item-edit.ng-enter { .item-edit.ng-enter {
@ -1552,7 +1558,7 @@ textarea {
max-width: 200px; max-width: 200px;
color: black; color: black;
font-weight: bold; } font-weight: bold; }
.item-input [class^="icon-"], .item-input [class*=" icon-"] { .item-input i, .item-input .icon {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-webkit-flex: 0 0 24px; -webkit-flex: 0 0 24px;
-moz-box-flex: 0; -moz-box-flex: 0;

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

@ -212,7 +212,7 @@
-webkit-transform: rotate(360deg); -webkit-transform: rotate(360deg);
transform: rotate(360deg); } } transform: rotate(360deg); } }
} }
.ionic [class*="icon-"] { .ionic i, .ionic .icon {
font-family: 'ionicons'; font-family: 'ionicons';
speak: none; speak: none;
font-style: normal; font-style: normal;
@ -1589,8 +1589,7 @@
background-color: transparent; background-color: transparent;
font-size: 12px; font-size: 12px;
line-height: 28px; } line-height: 28px; }
.ionic .bar > .button [class^="icon-"], .ionic .bar > .button i, .ionic .bar > .button .icon {
.ionic .bar > .button [class*=" icon-"] {
margin-top: 1px; } margin-top: 1px; }
.ionic .bar .button-bar { .ionic .bar .button-bar {
line-height: 18px; } line-height: 18px; }
@ -1840,7 +1839,8 @@
.ionic .tabs-icon-bottom .tab-item { .ionic .tabs-icon-bottom .tab-item {
font-size: 10px; font-size: 10px;
line-height: 14px; } line-height: 14px; }
.ionic .tab-item i { .ionic .tab-item i,
.ionic .tab-item .icon {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
height: 32px; height: 32px;
@ -1848,13 +1848,15 @@
.ionic .tabs-icon-left .tab-item, .ionic .tabs-icon-left .tab-item,
.ionic .tabs-icon-right .tab-item { .ionic .tabs-icon-right .tab-item {
font-size: 10px; } font-size: 10px; }
.ionic .tabs-icon-left .tab-item i, .ionic .tabs-icon-left .tab-item i, .ionic .tabs-icon-left .tab-item .icon,
.ionic .tabs-icon-right .tab-item i { .ionic .tabs-icon-right .tab-item i,
.ionic .tabs-icon-right .tab-item .icon {
font-size: 24px; font-size: 24px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
line-height: 49px; } line-height: 49px; }
.ionic .tabs-icon-only i { .ionic .tabs-icon-only i,
.ionic .tabs-icon-only .icon {
line-height: inherit; } line-height: inherit; }
.ionic .tab-item.active, .ionic .tab-item:active { .ionic .tab-item.active, .ionic .tab-item:active {
opacity: 1; } opacity: 1; }
@ -2067,7 +2069,8 @@
.ionic .item-slider.item-text-wrap p { .ionic .item-slider.item-text-wrap p {
overflow: hidden; overflow: hidden;
white-space: nowrap; } white-space: nowrap; }
.ionic .item i { .ionic .item i,
.ionic .item .icon {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
@ -2086,17 +2089,20 @@
font-size: 28px; } font-size: 28px; }
.ionic .item-icon-left { .ionic .item-icon-left {
padding-left: 45px; } padding-left: 45px; }
.ionic .item-icon-left i { .ionic .item-icon-left i, .ionic .item-icon-left .icon {
left: 7.5px; } left: 7.5px; }
.ionic .item-slider.item-icon-left { .ionic .item-slider.item-icon-left {
padding-left: 0; } padding-left: 0; }
.ionic .item-slider.item-icon-left .item-content { .ionic .item-slider.item-icon-left .item-content {
padding-left: 45px; } padding-left: 45px; }
.ionic .item-icon-right i { .ionic .item-icon-right i,
.ionic .item-icon-right .icon {
right: 7.5px; } right: 7.5px; }
.ionic .item-icon-left.item-icon-right i:first-child { .ionic .item-icon-left.item-icon-right i:first-child,
.ionic .item-icon-left.item-icon-right .icon:first-child {
right: auto; } right: auto; }
.ionic .item-icon-left.item-icon-right i:last-child { .ionic .item-icon-left.item-icon-right i:last-child,
.ionic .item-icon-left.item-icon-right .icon:last-child {
left: auto; } left: auto; }
.ionic a.item:active, .ionic a.item:active,
.ionic button.item:active, .ionic button.item:active,
@ -2205,7 +2211,7 @@
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; } -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.ionic .item-edit .button { .ionic .item-edit .button {
height: 100%; } height: 100%; }
.ionic .item-edit i { .ionic .item-edit i, .ionic .item-edit .icon {
color: #ef4e3a; color: #ef4e3a;
font-size: 24px; } font-size: 24px; }
.ionic .item-edit.ng-enter { .ionic .item-edit.ng-enter {
@ -2387,7 +2393,7 @@
max-width: 200px; max-width: 200px;
color: black; color: black;
font-weight: bold; } font-weight: bold; }
.ionic .item-input [class^="icon-"], .ionic .item-input [class*=" icon-"] { .ionic .item-input i, .ionic .item-input .icon {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-webkit-flex: 0 0 24px; -webkit-flex: 0 0 24px;
-moz-box-flex: 0; -moz-box-flex: 0;

34
dist/css/ionic.css vendored
View File

@ -6,7 +6,7 @@
font-weight: normal; font-weight: normal;
font-style: normal; } font-style: normal; }
[class*="icon-"] { i, .icon {
font-family: 'ionicons'; font-family: 'ionicons';
speak: none; speak: none;
font-style: normal; font-style: normal;
@ -2025,8 +2025,7 @@ a.subdued‎ {
background-color: transparent; background-color: transparent;
font-size: 12px; font-size: 12px;
line-height: 28px; } line-height: 28px; }
.bar > .button [class^="icon-"], .bar > .button i, .bar > .button .icon {
.bar > .button [class*=" icon-"] {
margin-top: 1px; } margin-top: 1px; }
.bar .button-bar { .bar .button-bar {
line-height: 18px; } line-height: 18px; }
@ -2299,7 +2298,8 @@ a.subdued‎ {
font-size: 10px; font-size: 10px;
line-height: 14px; } line-height: 14px; }
.tab-item i { .tab-item i,
.tab-item .icon {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
height: 32px; height: 32px;
@ -2308,14 +2308,16 @@ a.subdued‎ {
.tabs-icon-left .tab-item, .tabs-icon-left .tab-item,
.tabs-icon-right .tab-item { .tabs-icon-right .tab-item {
font-size: 10px; } font-size: 10px; }
.tabs-icon-left .tab-item i, .tabs-icon-left .tab-item i, .tabs-icon-left .tab-item .icon,
.tabs-icon-right .tab-item i { .tabs-icon-right .tab-item i,
.tabs-icon-right .tab-item .icon {
font-size: 24px; font-size: 24px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
line-height: 49px; } line-height: 49px; }
.tabs-icon-only i { .tabs-icon-only i,
.tabs-icon-only .icon {
line-height: inherit; } line-height: inherit; }
/* Navigational tab */ /* Navigational tab */
@ -2581,7 +2583,8 @@ a.item {
overflow: hidden; overflow: hidden;
white-space: nowrap; } white-space: nowrap; }
.item i { .item i,
.item .icon {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
@ -2602,7 +2605,7 @@ a.item {
.item-icon-left { .item-icon-left {
padding-left: 45px; } padding-left: 45px; }
.item-icon-left i { .item-icon-left i, .item-icon-left .icon {
left: 7.5px; } left: 7.5px; }
.item-slider.item-icon-left { .item-slider.item-icon-left {
@ -2610,13 +2613,16 @@ a.item {
.item-slider.item-icon-left .item-content { .item-slider.item-icon-left .item-content {
padding-left: 45px; } padding-left: 45px; }
.item-icon-right i { .item-icon-right i,
.item-icon-right .icon {
right: 7.5px; } right: 7.5px; }
.item-icon-left.item-icon-right i:first-child { .item-icon-left.item-icon-right i:first-child,
.item-icon-left.item-icon-right .icon:first-child {
right: auto; } right: auto; }
.item-icon-left.item-icon-right i:last-child { .item-icon-left.item-icon-right i:last-child,
.item-icon-left.item-icon-right .icon:last-child {
left: auto; } left: auto; }
a.item:active, a.item:active,
@ -2742,7 +2748,7 @@ button.item-icon-right:after {
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; } -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.item-edit .button { .item-edit .button {
height: 100%; } height: 100%; }
.item-edit i { .item-edit i, .item-edit .icon {
color: #ef4e3a; color: #ef4e3a;
font-size: 24px; } font-size: 24px; }
.item-edit.ng-enter { .item-edit.ng-enter {
@ -2955,7 +2961,7 @@ textarea {
max-width: 200px; max-width: 200px;
color: black; color: black;
font-weight: bold; } font-weight: bold; }
.item-input [class^="icon-"], .item-input [class*=" icon-"] { .item-input i, .item-input .icon {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-webkit-flex: 0 0 24px; -webkit-flex: 0 0 24px;
-moz-box-flex: 0; -moz-box-flex: 0;

2
ionicons/style.scss
View File

@ -9,7 +9,7 @@
font-style: normal; font-style: normal;
} }
[class*="icon-"] { i, .icon {
font-family: 'ionicons'; font-family: 'ionicons';
speak: none; speak: none;
font-style: normal; font-style: normal;

3
scss/ionic/_bar.scss
View File

@ -111,8 +111,7 @@
font-size: 12px; font-size: 12px;
line-height: 28px; line-height: 28px;
[class^="icon-"], i, .icon {
[class*=" icon-"] {
margin-top: 1px; margin-top: 1px;
} }
} }

2
scss/ionic/_form.scss
View File

@ -67,7 +67,7 @@ textarea {
color: $input-label-color; color: $input-label-color;
font-weight: bold; font-weight: bold;
} }
[class^="icon-"], [class*=" icon-"] { i, .icon {
@include flex(0, 0, 24px); @include flex(0, 0, 24px);
position: static; position: static;
height: auto; height: auto;

16
scss/ionic/_items.scss
View File

@ -174,7 +174,8 @@ a.item {
// List Icons // List Icons
// ------------------------------- // -------------------------------
.item i { .item i,
.item .icon {
@include display-flex(); @include display-flex();
@include align-items(center); @include align-items(center);
position: absolute; position: absolute;
@ -190,7 +191,7 @@ a.item {
.item-icon-left { .item-icon-left {
padding-left: ($item-padding * 3); padding-left: ($item-padding * 3);
i { i, .icon {
left: $item-padding / 2; left: $item-padding / 2;
} }
} }
@ -202,14 +203,17 @@ a.item {
} }
} }
.item-icon-right i { .item-icon-right i,
.item-icon-right .icon {
right: $item-padding / 2; right: $item-padding / 2;
} }
.item-icon-left.item-icon-right i:first-child { .item-icon-left.item-icon-right i:first-child,
.item-icon-left.item-icon-right .icon:first-child {
right: auto; right: auto;
} }
.item-icon-left.item-icon-right i:last-child { .item-icon-left.item-icon-right i:last-child,
.item-icon-left.item-icon-right .icon:last-child {
left: auto; left: auto;
} }
@ -379,7 +383,7 @@ button.item-icon-right:after {
height: 100%; height: 100%;
} }
i { i, .icon {
color: $brand-danger; color: $brand-danger;
font-size: 24px; font-size: 24px;
} }

8
scss/ionic/_tabs.scss
View File

@ -96,7 +96,8 @@
line-height: $tabs-text-font-size; line-height: $tabs-text-font-size;
} }
.tab-item i { .tab-item i,
.tab-item .icon {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
height: $tabs-icon-size; height: $tabs-icon-size;
@ -106,7 +107,7 @@
.tabs-icon-left .tab-item, .tabs-icon-left .tab-item,
.tabs-icon-right .tab-item { .tabs-icon-right .tab-item {
font-size: $tabs-text-with-icon-font-size; font-size: $tabs-text-with-icon-font-size;
i { i, .icon {
font-size: $tabs-icon-size - 8; font-size: $tabs-icon-size - 8;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
@ -114,7 +115,8 @@
} }
} }
.tabs-icon-only i { .tabs-icon-only i,
.tabs-icon-only .icon {
line-height: inherit; line-height: inherit;
} }