blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Style <button> elements same as .btn class

Browse Source
This commit is contained in:
Pablo Vazquez 2022-07-20 15:16:17 +02:00 committed by Francesco Siddi
parent 11a352968a
commit 8d75da524d
1 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/app/src/assets/base.css
View File

@ -286,6 +286,12 @@ dl dd:empty {
margin-left: auto; margin-left: auto;
} }
.btn-bar .align-center,
.btn-bar-group .align-center {
margin-left: auto;
margin-right: auto;
}
.btn-bar-group { .btn-bar-group {
align-items: center; align-items: center;
display: flex; display: flex;
@ -297,7 +303,9 @@ dl dd:empty {
} }
.btn-bar-group select+.btn, .btn-bar-group select+.btn,
.btn-bar-group .btn+select { .btn-bar-group select+button,
.btn-bar-group .btn+select,
.btn-bar-group button+select {
margin-left: var(--spacer-sm) margin-left: var(--spacer-sm)
} }
@ -312,7 +320,7 @@ select {
padding: var(--spacer-xs) var(--spacer-sm); padding: var(--spacer-xs) var(--spacer-sm);
} }
.btn { button, .btn {
align-items: center; align-items: center;
background-color: var(--color-button-background); background-color: var(--color-button-background);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -325,13 +333,21 @@ select {
padding: var(--spacer-xs) var(--spacer-sm); padding: var(--spacer-xs) var(--spacer-sm);
touch-action: manipulation; touch-action: manipulation;
transition-duration: var(--transition-speed); transition-duration: var(--transition-speed);
transition-property: color, background-color, border-color; transition-property: background-color, border-color, color;
user-select: none;
} }
.btn-bar .btn+.btn { .btn-bar.btn-bar-wide {
justify-content: space-between;
width: 100%;
}
.btn-bar .btn+.btn,
.btn-bar button+button {
margin-left: var(--spacer-sm); margin-left: var(--spacer-sm);
} }
button[disabled],
.btn[disabled] { .btn[disabled] {
background-color: transparent; background-color: transparent;
border-color: var(--color-button-background); border-color: var(--color-button-background);
@ -340,11 +356,13 @@ select {
pointer-events: none; pointer-events: none;
} }
button:hover:not([disabled]),
.btn:hover:not([disabled]) { .btn:hover:not([disabled]) {
transition: all 100ms; transition: all 100ms;
color: white; color: white;
} }
button:focus,
.btn:focus { .btn:focus {
/* Make sure the outline is clearly visible inside the button. */ /* Make sure the outline is clearly visible inside the button. */
outline-offset: -0.5em; outline-offset: -0.5em;