Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-24 14:53:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve disabled toggles

Browse source
This commit is contained in:
Marcos Moura 2016-09-09 14:02:47 -03:00
parent a725fa7433
commit 156ae82e72
3 changed files with 22 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/mdButtonToggle/mdButtonToggle.scss
View file

@ -1,13 +1,15 @@
@import '../../core/stylesheets/variables.scss';
.md-button-toggle {
.md-button:not([disabled]) {
color: rgba(#000, .54);
.md-button {
&:not([disabled]) {
color: rgba(#000, .54);
&:hover:not(.md-toggle) {
&:not(.md-raised) {
background-color: rgba(#999, .2);
text-decoration: none;
&:hover:not(.md-toggle) {
&:not(.md-raised) {
background-color: rgba(#999, .2);
text-decoration: none;
}
}
}
}

17
src/components/mdButtonToggle/mdButtonToggle.theme
View file

@ -16,7 +16,7 @@
color: #{'BACKGROUND-CONTRAST-600'};
background-color: #{'BACKGROUND-COLOR-500'};
&:hover {
&:hover:not([disabled]) {
background-color: #{'BACKGROUND-COLOR-600'};
}
@ -29,7 +29,7 @@
color: #{'PRIMARY-CONTRAST'};
background-color: #{'PRIMARY-COLOR'};
&:hover {
&:hover:not([disabled]) {
background-color: #{'PRIMARY-COLOR-600'};
}
@ -42,7 +42,7 @@
color: #{'ACCENT-CONTRAST'};
background-color: #{'ACCENT-COLOR'};
&:hover {
&:hover:not([disabled]) {
background-color: #{'ACCENT-COLOR-600'};
}
@ -55,7 +55,7 @@
color: #{'WARN-CONTRAST'};
background-color: #{'WARN-COLOR'};
&:hover {
&:hover:not([disabled]) {
background-color: #{'WARN-COLOR-600'};
}
@ -63,5 +63,14 @@
background-color: #{'WARN-COLOR-700'};
}
}
[disabled] {
color: rgba(#000, .26);
&.md-toggle {
color: #{'BACKGROUND-CONTRAST-0.2'};
background-color: rgba(#000, .26);
}
}
}
}

2
src/docs/pages/ButtonToggle.vue
View file

@ -7,7 +7,7 @@
<md-icon>format_bold</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-button class="md-icon-button" disabled>
<md-icon>format_italic</md-icon>
</md-button>