DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

design: add styling for disabled buttons

Browse source
This commit is contained in:
Pierre de La Morinerie 2018-07-18 16:20:51 +02:00 committed by gregoirenovel
parent a386a0ffb2
commit 030562a32f
2 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/assets/stylesheets/new_design/buttons.scss
View file

@ -10,11 +10,11 @@
line-height: 20px; line-height: 20px;
background-color: #FFFFFF; background-color: #FFFFFF;
color: $black; color: $black;
cursor: pointer;
text-align: center; text-align: center;
-webkit-appearance: none; -webkit-appearance: none;
&:hover { &:hover:not(:disabled) {
cursor: pointer;
background: $light-grey; background: $light-grey;
text-decoration: none; text-decoration: none;
} }
@ -24,12 +24,17 @@
outline: none; outline: none;
} }
&:disabled {
opacity: 0.5;
filter: saturate(50%);
}
&.primary { &.primary {
color: #FFFFFF; color: #FFFFFF;
border-color: $blue; border-color: $blue;
background-color: $blue; background-color: $blue;
&:hover { &:hover:not(:disabled) {
background: $light-blue; background: $light-blue;
} }
} }
@ -39,7 +44,7 @@
border-color: $blue; border-color: $blue;
background-color: #FFFFFF; background-color: #FFFFFF;
&:hover { &:hover:not(:disabled) {
color: #FFFFFF; color: #FFFFFF;
background: $light-blue; background: $light-blue;
} }
@ -62,7 +67,7 @@
border-color: $green; border-color: $green;
background-color: $green; background-color: $green;
&:hover { &:hover:not(:disabled) {
color: $green; color: $green;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
@ -73,7 +78,7 @@
border-color: $black; border-color: $black;
background-color: $black; background-color: $black;
&:hover { &:hover:not(:disabled) {
color: $black; color: $black;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
@ -84,7 +89,7 @@
border-color: $dark-red; border-color: $dark-red;
background-color: $dark-red; background-color: $dark-red;
&:hover { &:hover:not(:disabled) {
color: $dark-red; color: $dark-red;
background-color: #FFFFFF; background-color: #FFFFFF;
} }

9
app/views/root/patron.html.haml
View file

@ -58,6 +58,15 @@
= link_to "#", class: "button icon-only" do = link_to "#", class: "button icon-only" do
%span.icon.follow %span.icon.follow
%p
%button.button{ disabled: true } .button.disabled
%button.button.primary{ disabled: true } .button.primary.disabled
%button.button.secondary{ disabled: true } .button.secondary.disabled
%button.button.danger{ disabled: true } .button.danger.disabled
%p %p
= link_to ".button.accepted", "#", class: "button accepted" = link_to ".button.accepted", "#", class: "button accepted"