updated button component and colors

This commit is contained in:
thecozies 2024-01-07 18:23:05 -06:00
parent 1d16efc3f0
commit 66adb00e53
6 changed files with 82 additions and 19 deletions

View File

@ -107,7 +107,7 @@
<div class="config__footer"> <div class="config__footer">
<div> <div>
<button <button
class="button" class="button button--secondary"
nav-return="rr_manual" nav-return="rr_manual"
data-attrif-disabled="!options_changed" data-attrif-disabled="!options_changed"
onclick="apply_options" onclick="apply_options"

File diff suppressed because one or more lines are too long

View File

@ -1,32 +1,69 @@
@use 'sass:color'; @use 'sass:color';
@mixin create-button-variation($base-col) {
background-color: rgba($base-col, 0.05);
color: $color-text-dim;
border-color: rgba($base-col, 0.8);
&:focus {
color: $color-text;
border-color: $base-col;
background-color: rgba($base-col, 0.3);
}
&:disabled,&[disabled] {
color: $color-text-inactive;
}
&:active {
background-color: rgba($base-col, 0.2);
color: color.scale($color-text, $lightness: 20%);
}
}
.button { .button {
@extend %label-md; @extend %label-lg;
@include create-button-variation($color-primary);
display: block; display: block;
padding: 16dp 20dp; padding: space(24);
background-color: rgba($color-primary-d, 0.8);
color: $color-text;
border-radius: $border-radius-md; border-radius: $border-radius-md;
border-width: space(1);
width: auto; width: auto;
height: auto; height: auto;
// Setting it by default for convenience
// &--primary {
// @include create-button-variation($color-primary);
// }
&--secondary {
@include create-button-variation($color-secondary);
}
&--tertiary {
@include create-button-variation($color-text);
}
&--success {
@include create-button-variation($color-success);
}
&--error {
@include create-button-variation($color-error);
}
&--warning {
@include create-button-variation($color-warning);
}
&:not([disabled]) { &:not([disabled]) {
@extend %nav-all; @extend %nav-all;
} }
&:focus {
// color: $color-primary-l;
background-color: $color-primary-d;
}
&:disabled,&[disabled] { &:disabled,&[disabled] {
opacity: 0.5; opacity: 0.5;
color: $color-text-inactive;
}
&:active {
background-color: color.scale($color-primary-d, $lightness: -10%);
color: color.scale($color-text, $lightness: 20%);
} }
&__label { &__label {

View File

@ -5,6 +5,7 @@ $base-height: 1080;
.centered-page { .centered-page {
display: flex; display: flex;
// visibility: hidden;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -25,7 +26,7 @@ $base-height: 1080;
height: 100%; height: 100%;
background: $color-bg-shadow-2; background: $color-bg-shadow-2;
border-radius: $border-radius-modal; border-radius: $border-radius-modal;
border-color: $color-border-soft; border-color: $color-bg-shadow;
border-width: space(1); border-width: space(1);
} }

View File

@ -29,7 +29,7 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: space(20) space(20); padding: space(20) space(20);
background-color: $color-bg-shadow-2; background-color: $color-bg-shadow;
border-bottom-left-radius: $border-radius-modal; border-bottom-left-radius: $border-radius-modal;
border-bottom-right-radius: $border-radius-modal; border-bottom-right-radius: $border-radius-modal;
} }

View File

@ -12,20 +12,45 @@ $color-text-inactive: rgba(255, 255, 255, 0.6000);
$color-primary: #B97DF2; $color-primary: #B97DF2;
$color-primary-l: #DABAF7; $color-primary-l: #DABAF7;
$color-primary-d: #7A2AC6; $color-primary-d: #7A2AC6;
$color-primary-a5: rgba(185, 125, 242, 0.0500);
$color-primary-a20: rgba(185, 125, 242, 0.2000);
$color-primary-a30: rgba(185, 125, 242, 0.3000);
$color-primary-a80: rgba(185, 125, 242, 0.8000);
$color-secondary: #17D6E8; $color-secondary: #17D6E8;
$color-secondary-l: #A2EFF6; $color-secondary-l: #A2EFF6;
$color-secondary-d: #25A1AD; $color-secondary-d: #25A1AD;
$color-secondary-a5: rgba(23, 214, 232, 0.0500);
$color-secondary-a20: rgba(23, 214, 232, 0.2000);
$color-secondary-a30: rgba(23, 214, 232, 0.3000);
$color-secondary-a80: rgba(23, 214, 232, 0.8000);
$color-warning: #E9CD35; $color-warning: #E9CD35;
$color-warning-l: #F9E57C; $color-warning-l: #F9E57C;
$color-warning-d: #C5AA16; $color-warning-d: #C5AA16;
$color-warning-a5: rgba(233, 205, 53, 0.0500);
$color-warning-a20: rgba(233, 205, 53, 0.2000);
$color-warning-a30: rgba(233, 205, 53, 0.3000);
$color-warning-a80: rgba(233, 205, 53, 0.8000);
$color-error: #F86039; $color-error: #F86039;
$color-error-l: #FE8667; $color-error-l: #FE8667;
$color-error-d: #B23919; $color-error-d: #B23919;
$color-error-a5: rgba(248, 96, 57, 0.0500);
$color-error-a20: rgba(248, 96, 57, 0.2000);
$color-error-a30: rgba(248, 96, 57, 0.3000);
$color-error-a80: rgba(248, 96, 57, 0.8000);
$color-success: #45D043; $color-success: #45D043;
$color-success-l: #AAEAA9; $color-success-l: #AAEAA9;
$color-success-d: #2CA72A; $color-success-d: #2CA72A;
$color-success-a5: rgba(69, 208, 67, 0.0500);
$color-success-a20: rgba(69, 208, 67, 0.2000);
$color-success-a30: rgba(69, 208, 67, 0.3000);
$color-success-a80: rgba(69, 208, 67, 0.8000);
$color-border: rgba(255, 255, 255, 0.2000); $color-border: rgba(255, 255, 255, 0.2000);
$color-border-soft: rgba(255, 255, 255, 0.1000); $color-border-soft: rgba(255, 255, 255, 0.1000);
$color-border-hard: rgba(255, 255, 255, 0.3000); $color-border-hard: rgba(255, 255, 255, 0.3000);
$color-border-solid: rgba(255, 255, 255, 0.6000); $color-border-solid: rgba(255, 255, 255, 0.6000);
$color-transparent: rgba(0, 0, 0, 0.0000); $color-transparent: rgba(0, 0, 0, 0.0000);
$color-primary-a50: rgba(185, 125, 242, 0.5000);
$color-secondary-a50: rgba(23, 214, 232, 0.5000);
$color-warning-a50: rgba(233, 205, 53, 0.5000);
$color-error-a50: rgba(248, 96, 57, 0.5000);
$color-success-a50: rgba(69, 208, 67, 0.5000);