mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-12-13 09:11:19 -05:00
d897d4387d
because csrf. also, since we don't have a definite message/banner system in place yet, use the button itself for feedback rather than messages. The button will disable if it has been successfully used, or turn pink if there was an error (and it will not be disabled in that case).
51 lines
912 B
SCSS
51 lines
912 B
SCSS
@import "../../colors";
|
|
|
|
$base-bg: $ui-white;
|
|
$fail-bg: $ui-orange;
|
|
$pass-bg: $ui-aqua;
|
|
|
|
.button {
|
|
display: inline-block;
|
|
margin: .5em 0;
|
|
border: 0;
|
|
border-radius: 5px;
|
|
box-shadow: 0 1px 1px $box-shadow-gray;
|
|
background-color: $ui-blue;
|
|
cursor: pointer;
|
|
padding: .75em 1em;
|
|
color: $type-white;
|
|
font-size: .8rem;
|
|
font-weight: bold;
|
|
|
|
/* USER BUTTON STATES */
|
|
&:hover {
|
|
box-shadow: 0 2px 2px $box-shadow-gray;
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: inset 0 1px 2px $box-shadow-gray;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* DATA BUTTON STATES */
|
|
&.white {
|
|
border-top: 1px inset $active-gray;
|
|
background-color: $base-bg;
|
|
color: $ui-blue;
|
|
}
|
|
|
|
&.pass {
|
|
background-color: $pass-bg;
|
|
}
|
|
|
|
&.fail {
|
|
background-color: $fail-bg;
|
|
}
|
|
|
|
&:disabled {
|
|
box-shadow: none;
|
|
}
|
|
}
|