Button component color tweaks

This commit is contained in:
Angelos Chalaris 2016-12-06 11:26:12 +02:00
parent d2ab873d4c
commit 21ca8d498f
4 changed files with 7 additions and 6 deletions

View file

@ -678,7 +678,7 @@ button {
button, [type="button"], [type="submit"], [type="reset"], a.button, label.button, .button {
display: inline-block;
background: rgba(207, 207, 207, 0.75);
background: rgba(189, 189, 189, 0.65);
color: #212121;
border: 0;
border-radius: 2px;
@ -690,7 +690,7 @@ button, [type="button"], [type="submit"], [type="reset"], a.button, label.button
transition: all 0.3s ease 0s;
cursor: pointer; }
button:hover, button:active, button:focus, [type="button"]:hover, [type="button"]:active, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:active, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:active, [type="reset"]:focus, a.button:hover, a.button:active, a.button:focus, label.button:hover, label.button:active, label.button:focus, .button:hover, .button:active, .button:focus {
background: #cfcfcf;
background: rgba(189, 189, 189, 0.8);
opacity: 1; }
button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled], a.button:disabled, a.button[disabled], label.button:disabled, label.button[disabled], .button:disabled, .button[disabled] {
cursor: not-allowed;

File diff suppressed because one or more lines are too long

View file

@ -607,3 +607,4 @@
- Tweaks to the `checkbox` and `radio` components. Added a lot of customization and recalculated their values from the ground up. This should fix problems with displaying them on different screens.
- Updated the awkward `navigation` `header` component after the `button` changes.
- Logo in `header` changed to reflect the new style.
- Changed `button` default coloration to a material color palette from Google Material Design, so that it will now be more consistent. Tweaked `opacity` to make this work.

View file

@ -209,9 +209,9 @@ $input-disabled-opacity: 0.75; // Opacity for disabled input
$input-readonly-back-color: #e0e0e0; // Background color for readonly input
$input-readonly-border-color: #bdbdbd; // Border color for readonly input
$input-placeholder-fore-color: #616161; // Text color for input placeholder
$button-back-color: #cfcfcf; // Back color for button elements
$button-back-opacity: 0.75; // Background opacity for button elements
$button-hover-back-opacity: 1; // Background opacity for button elements
$button-back-color: #bdbdbd; // Back color for button elements
$button-back-opacity: 0.65; // Background opacity for button elements
$button-hover-back-opacity: 0.8; // Background opacity for button elements
// on hover or focus
$button-fore-color: $fore-color; // Text color for button elements
$button-border-style: 0; // Border style for button elements