remove .hover css

This commit is contained in:
Adam Bradley
2015-09-18 21:46:15 -05:00
parent 703a3678e6
commit db714ce341
12 changed files with 36 additions and 139 deletions

View File

@ -34,8 +34,7 @@ a {
color: $link-color; color: $link-color;
background-color: transparent; background-color: transparent;
} }
.enable-hover a:hover, .enable-hover a:hover {
a.hover {
color: $link-hover-color; color: $link-hover-color;
} }

View File

@ -113,9 +113,7 @@ button,
} }
.enable-hover button:hover, .enable-hover button:hover,
.enable-hover [button]:hover, .enable-hover [button]:hover {
button.hover
[button].hover {
opacity: $button-hover-opacity; opacity: $button-hover-opacity;
color: $button-text-color; color: $button-text-color;
text-decoration: none; text-decoration: none;

View File

@ -83,9 +83,7 @@ button,
} }
&.enable-hover button[clear]:hover, &.enable-hover button[clear]:hover,
&.enable-hover [button][clear]:hover, &.enable-hover [button][clear]:hover {
button[clear].hover,
[button][clear].hover {
background-color: $button-md-clear-hover-bg-color; background-color: $button-md-clear-hover-bg-color;
} }

View File

@ -3,36 +3,31 @@
<ion-title>Default Buttons</ion-title> <ion-title>Default Buttons</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-content class="padding" style="text-align:center"> <ion-content padding style="text-align:center">
<p> <p>
<button>Default</button> <button>Default</button>
<button class="hover">D.hover</button> <button class="activated">Default.activated</button>
<button class="activated">D.activated</button>
</p> </p>
<p> <p>
<button secondary>Secondary</button> <button secondary>Secondary</button>
<button secondary class="hover">S.hover</button> <button secondary class="activated">Secondary.activated</button>
<button secondary class="activated">S.activated</button>
</p> </p>
<p> <p>
<button danger>Danger</button> <button danger>Danger</button>
<button danger class="hover">D.hover</button> <button danger class="activated">Danger.activated</button>
<button danger class="activated">D.activated</button>
</p> </p>
<p> <p>
<button light>Light</button> <button light>Light</button>
<button light class="hover">L.hover</button> <button light class="activated">Light.activated</button>
<button light class="activated">L.activated</button>
</p> </p>
<p> <p>
<button dark>Dark</button> <button dark>Dark</button>
<button dark class="hover">D.hover</button> <button dark class="activated">Dark.activated</button>
<button dark class="activated">D.activated</button>
</p> </p>
</ion-content> </ion-content>

View File

@ -3,7 +3,7 @@
<ion-title>Block Buttons</ion-title> <ion-title>Block Buttons</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-content class="padding" style="text-align:center"> <ion-content padding style="text-align:center">
<p> <p>
<a button block href="#">a[button][block]</a> <a button block href="#">a[button][block]</a>

View File

@ -3,36 +3,31 @@
<ion-title>Clear Buttons</ion-title> <ion-title>Clear Buttons</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-content class="padding" style="text-align:center"> <ion-content padding style="text-align:center">
<p> <p>
<button clear>D</button> <button clear>Default</button>
<button clear class="hover">D.hover</button> <button clear class="activated">Default.activated</button>
<button clear class="activated">D.activated</button>
</p> </p>
<p> <p>
<button clear secondary>S</button> <button clear secondary>Secondary</button>
<button clear secondary class="hover">S.hover</button> <button clear secondary class="activated">Secondary.activated</button>
<button clear secondary class="activated">S.activated</button>
</p> </p>
<p> <p>
<button clear danger>D</button> <button clear danger>Danger</button>
<button clear danger class="hover">D.hover</button> <button clear danger class="activated">Danger.activated</button>
<button clear danger class="activated">D.activated</button>
</p> </p>
<p> <p>
<button clear light>L</button> <button clear light>Light</button>
<button clear light class="hover">L.hover</button> <button clear light class="activated">Light.activated</button>
<button clear light class="activated">L.activated</button>
</p> </p>
<p> <p>
<button clear dark>D</button> <button clear dark>Dark</button>
<button clear dark class="hover">D.hover</button> <button clear dark class="activated">Dark.activated</button>
<button clear dark class="activated">D.activated</button>
</p> </p>
</ion-content> </ion-content>

View File

@ -3,46 +3,37 @@
<ion-title>Outline Buttons</ion-title> <ion-title>Outline Buttons</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-content class="padding" style="text-align:center"> <ion-content padding style="text-align:center">
<p> <p>
<button outline>D</button> <button outline>Default</button>
<button outline class="hover">D.hover</button> <button outline class="activated">Default.activated</button>
<button outline class="activated">D.activated</button>
</p> </p>
<p> <p>
<button outline secondary>S</button> <button outline secondary>Secondary</button>
<button outline secondary class="hover">S.hover</button> <button outline secondary class="activated">Secondary.activated</button>
<button outline secondary class="activated">S.activated</button>
</p> </p>
<p> <p>
<button outline danger>D</button> <button outline danger>Danger</button>
<button outline danger class="hover">D.hover</button> <button outline danger class="activated">Danger.activated</button>
<button outline danger class="activated">D.activated</button>
</p> </p>
<p> <p>
<button outline light>L</button> <button outline light>Light</button>
<button outline light class="hover">L.hover</button> <button outline light class="activated">Light.activated</button>
<button outline light class="activated">L.activated</button>
</p> </p>
<p> <p>
<button outline dark>D</button> <button outline dark>Dark</button>
<button outline dark class="hover">D.hover</button> <button outline dark class="activated">Dark.activated</button>
<button outline dark class="activated">D.activated</button>
</p> </p>
<p> <p>
<button outline block>button[outline][block]</button> <button outline block>button[outline][block]</button>
</p> </p>
<p>
<button outline block class="hover">[outline][block].hover</button>
</p>
<p> <p>
<button outline block class="activated">[outline][block].activated</button> <button outline block class="activated">[outline][block].activated</button>
</p> </p>
@ -51,10 +42,6 @@
<button outline block secondary>button[outline][block][secondary]</button> <button outline block secondary>button[outline][block][secondary]</button>
</p> </p>
<p>
<button outline block secondary class="hover">[outline][block][secondary].hover</button>
</p>
<p> <p>
<button outline block secondary class="activated">[outline][block][secondary].activated</button> <button outline block secondary class="activated">[outline][block][secondary].activated</button>
</p> </p>

View File

@ -3,7 +3,7 @@
<ion-title>Round Buttons</ion-title> <ion-title>Round Buttons</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-content class="padding"> <ion-content padding>
<button round>button</button> <button round>button</button>
<button round light>button light</button> <button round light>button light</button>
<button round secondary>button secondary</button> <button round secondary>button secondary</button>

View File

@ -3,7 +3,7 @@
<ion-title>Button Sizes</ion-title> <ion-title>Button Sizes</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-content class="padding"> <ion-content padding>
<p> <p>
<a button href="#">a[button]</a> <a button href="#">a[button]</a>

View File

@ -80,8 +80,7 @@ ion-tab {
background: none; background: none;
} }
.enable-hover .tab-button:hover, .enable-hover .tab-button:hover {
.tab-button.hover {
color: $tab-button-text-inactive; color: $tab-button-text-inactive;
} }

View File

@ -25,28 +25,10 @@
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button class="hover">
<icon ios=contact></icon>
</button>
<button class="hover">
<icon search></icon>
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button class="hover">
<icon more></icon>
</button>
</ion-nav-items>
<ion-title>Defaults.hover</ion-title>
</ion-toolbar>
<ion-toolbar> <ion-toolbar>
<ion-nav-items primary> <ion-nav-items primary>
<button class="activated"> <button class="activated">
<icon ios=contact></icon> <icon ios="contact"></icon>
</button> </button>
<button class="activated"> <button class="activated">
<icon search></icon> <icon search></icon>
@ -81,26 +63,6 @@
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button clear class="hover">
<icon contact></icon>
</button>
<button clear class="hover">
<icon contact></icon>
Clear
</button>
</ion-nav-items>
<ion-title>Clear</ion-title>
<ion-nav-items secondary>
<button clear secondary class="hover">
Help
<icon help-circle></icon>
</button>
</ion-nav-items>
</ion-toolbar>
<ion-toolbar> <ion-toolbar>
<ion-nav-items primary> <ion-nav-items primary>
<button clear class="activated"> <button clear class="activated">
@ -140,25 +102,6 @@
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button outline class="hover">
<icon contact></icon>
</button primary>
<button outline class="hover">
<icon star></icon>
Star
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button secondary outline class="hover">
<icon contact></icon>
</button>
</ion-nav-items>
<ion-title>Outline.hover</ion-title>
</ion-toolbar>
<ion-toolbar> <ion-toolbar>
<ion-nav-items primary> <ion-nav-items primary>
<button outline class="activated"> <button outline class="activated">
@ -193,21 +136,6 @@
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button class="hover">
Btn
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button secondary class="hover">
Btn
</button>
</ion-nav-items>
<ion-title>ColorAttr.hover</ion-title>
</ion-toolbar>
<ion-toolbar> <ion-toolbar>
<ion-nav-items primary> <ion-nav-items primary>
<button class="activated"> <button class="activated">

View File

@ -41,8 +41,6 @@ $toolbar-order: (
.enable-hover .toolbar button:hover, .enable-hover .toolbar button:hover,
.enable-hover .toolbar [button]:hover, .enable-hover .toolbar [button]:hover,
.toolbar button.hover,
.toolbar [button].hover,
.toolbar button.activated, .toolbar button.activated,
.toolbar [button].activated { .toolbar [button].activated {
color: $toolbar-active-color; color: $toolbar-active-color;