entrouvert
/
gadjo
15
0
Fork 0
Code Issues Pull Requests 2 Releases Activity

css: use css vars to manage style of buttons versions (#77630)
gitea/gadjo/pipeline/head This commit looks good Details

This commit is contained in:
Thomas Jund 2023-05-16 17:46:51 +02:00
parent a2b2605df0
commit d4ff8f8dea
1 changed files with 20 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
gadjo/static/css/_forms.scss
View File

@ -10,10 +10,7 @@ $widget-focus-color: $widget-color;
$widget-focus-outline: 1px solid $primary-color;
$widget-focus-outline-offset: 0;
$button-color: $primary-color;
$button-cancel-color: darken(grayscale($button-color), 10%);
$button-delete-color: #CD2026;
$button-submit-color: #215D9C;
$button-delete-color: $red;
$button-focus-outline: $widget-focus-outline !default;
$button-focus-outline-offset: $widget-focus-outline-offset !default;
@ -91,6 +88,11 @@ a.button {
}
%button {
--color: var(--primary-color);
--outline-color: var(--primary-color);
--hover-color: white;
--hover-background: var(--color);
display: inline-block;
padding: 5px 15px;
cursor: pointer;
@ -99,13 +101,13 @@ a.button {
font-weight: bold;
background: white;
text-align: center;
border: 1px solid $button-color;
color: $button-color;
border: 1px solid var(--color);
color: var(--color);
transition: border-color 0.2s ease, box-shadow 0.2s linear;
&[aria-pressed=true], &:hover {
border-color: darken($button-color, 20%);
background: $button-color;
color: white;
border-color: hsla(0, 0%, 0%, 0.6);
background: var(--hover-background);
color: var(--hover-color);
}
&.disabled, &:disabled {
@ -116,12 +118,12 @@ a.button {
border-color: #888;
pointer-events: none;
}
&:active { border-color: darken($button-color, 10%); }
&:active { border-color: hsla(0, 0%, 0%, 0.3); }
&:focus {
@if $button-focus-outline == none {
outline: 1px dotted $button-background;
} @else {
outline: $button-focus-outline;
outline: 1px solid var(--outline-color);
outline-offset: $button-focus-outline-offset;
}
}
@ -136,17 +138,9 @@ input[type=submit] {
}
a.cancel-button, button.cancel-button, div.buttons .cancel-button input, div.buttons a.cancel, div.buttons .cancel-button button {
color: $button-cancel-color;
border-color: $button-cancel-color;
&:hover {
background: #eee;
color: $button-cancel-color;
border-color: darken($button-cancel-color, 20%);
}
&:active { border-color: darken($button-cancel-color, 10%); }
&:focus {
outline-color: darken($button-cancel-color, 10%);
}
--color: #727272;
--hover-color: var(--color);
--hover-background: #eee;
}
div.buttons {
@ -165,28 +159,12 @@ div.buttons {
}
a.delete-button, button.delete-button, div.buttons .delete-button input, div.buttons .delete-button button {
color: $button-delete-color;
border-color: $button-delete-color;
&:hover {
background: $button-delete-color;
color: white;
border-color: darken($button-delete-color, 20%);
}
&:active { border-color: darken($button-delete-color, 10%); }
&:focus {
outline-color: darken($button-delete-color, 10%);
}
--color: #{$button-delete-color};
--outline-color: #{darken($button-delete-color, 10%)};
}
a.submit-button, button.submit-button, div.buttons .submit-button input, div.buttons .submit-button button {
color: $button-submit-color;
border-color: $button-submit-color;
&:hover {
color: white;
background: $button-submit-color;
border-color: darken($button-submit-color, 20%);
}
&:active { border-color: darken($button-submit-color, 10%); }
--color: var(--blue-dusty);
}
form.disabled-during-submit {
@ -696,7 +674,7 @@ div.godo--editor {
border-bottom-right-radius: 3px;
}
&.active {
background: $button-color;
background: var(--color);
color: white;
}
}