101 lines
1.5 KiB
SCSS
101 lines
1.5 KiB
SCSS
@import '~@/styles/vars';
|
|
|
|
button,
|
|
.btn,
|
|
.btn-action,
|
|
.btn-icon {
|
|
border: 0;
|
|
border-radius: .25em;
|
|
cursor: pointer;
|
|
font-family: $body-font;
|
|
font-size: inherit;
|
|
font-weight: bold;
|
|
padding: .5em 1em;
|
|
|
|
a { text-decoration: none; }
|
|
}
|
|
|
|
.btn, .btn-icon { color: $fg-primary; }
|
|
|
|
.btn-icon {
|
|
|
|
border-radius: 1em;
|
|
padding: .5em;
|
|
margin: 0 .5em;
|
|
|
|
&:hover, &:focus {
|
|
background-color: darken($bg-primary, 20%);
|
|
}
|
|
}
|
|
|
|
.btn-action {
|
|
background-color: $color2;
|
|
color: $color3;
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
&:hover, &:focus {
|
|
background-color: lighten($color2, 20%);
|
|
}
|
|
}
|
|
|
|
.form-waiting .wait-spinner {
|
|
border: solid thin $fg-primary;
|
|
border-radius: .25em;
|
|
cursor: wait;
|
|
font-family: $body-font;
|
|
font-size: inherit;
|
|
padding: .5em 1em;
|
|
}
|
|
|
|
a.btn, a.btn-action { text-decoration: none; }
|
|
|
|
.header,
|
|
.header-action {
|
|
align-items: baseline;
|
|
font-size: 1.2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.header-action {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
& > * { display: inline-block; }
|
|
|
|
& > .btn, & > .btn-action { font-size: inherit; }
|
|
}
|
|
|
|
.main { flex-grow: 1; }
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
label {
|
|
display: inline-block;
|
|
margin: .5rem 0;
|
|
min-width: 10em;
|
|
}
|
|
|
|
select { background-color: white; }
|
|
|
|
.form-actions,
|
|
.form-waiting {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
}
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea {
|
|
font-size: inherit;
|
|
padding: .35em .5em;
|
|
|
|
&:disabled { cursor: wait; }
|
|
}
|
|
|
|
textarea { font-family: $body-font; }
|
|
|