forked from vikunja/frontend
konrad
1935af83c3
Cleanup Use the http factory everywhere instead of the created element Use the current domain if the api path is relative to the frontend host Format Prevent setting an empty url Fix styling Add changing api url Add change url component Co-authored-by: kolaente <k@knt.li> Reviewed-on: vikunja/frontend#264 Co-Authored-By: konrad <konrad@kola-entertainments.de> Co-Committed-By: konrad <konrad@kola-entertainments.de>
189 lines
2.9 KiB
SCSS
189 lines
2.9 KiB
SCSS
.button {
|
|
transition: all $transition;
|
|
border: 0;
|
|
text-transform: uppercase;
|
|
font-size: 0.85rem;
|
|
font-weight: bold;
|
|
height: $button-height;
|
|
box-shadow: 0.3em 0.3em 1em lighten($dark, 75);
|
|
|
|
&.is-hovered,
|
|
&:hover {
|
|
box-shadow: 0.6em 0.6em 1em lighten($dark, 75);
|
|
}
|
|
|
|
&.fullheight {
|
|
padding-right: 7px;
|
|
height: 100%;
|
|
}
|
|
|
|
&.is-active,
|
|
&.is-focused,
|
|
&:active,
|
|
&:focus,
|
|
&:focus:not(:active) {
|
|
box-shadow: 0.1em 0.1em 0.7em lighten($dark, 75) !important;
|
|
}
|
|
|
|
&.icon-only {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
@each $name, $pair in $colors {
|
|
$color: nth($pair, 1);
|
|
|
|
&.is-#{$name} {
|
|
box-shadow: 0.3em 0.3em 1em lighten($color, 30);
|
|
|
|
&.is-hovered,
|
|
&:hover {
|
|
box-shadow: 0.6em 0.6em 1em lighten($color, 30);
|
|
}
|
|
|
|
&.is-active,
|
|
&.is-focused,
|
|
&:active,
|
|
&:focus,
|
|
&:focus:not(:active) {
|
|
box-shadow: 0.1em 0.1em 0.7em lighten($color, 30) !important;
|
|
}
|
|
|
|
&.is-outlined {
|
|
border: 2px solid $color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-primary.is-outlined:hover {
|
|
color: $white;
|
|
}
|
|
|
|
&.noshadow {
|
|
&,
|
|
&.is-hovered,
|
|
&:hover,
|
|
&.is-active,
|
|
&.is-focused,
|
|
&:active,
|
|
&:focus,
|
|
&:focus:not(:active) {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&.is-small {
|
|
border-radius: $radius;
|
|
}
|
|
}
|
|
|
|
.field.has-addons .button {
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.input,
|
|
.textarea {
|
|
transition: all $transition;
|
|
box-shadow: none;
|
|
|
|
&.is-active,
|
|
&.is-focused,
|
|
&:active,
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
@each $name, $pair in $colors {
|
|
$color: nth($pair, 1);
|
|
$color-invert: nth($pair, 2);
|
|
|
|
&.is-#{$name} {
|
|
&.is-active,
|
|
&.is-focused,
|
|
&:active,
|
|
&:focus,
|
|
&:focus:not(:active) {
|
|
border-color: darken($color, 10);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.select:after {
|
|
margin-top: -0.575em;
|
|
}
|
|
|
|
.select select {
|
|
border-width: $thickness;
|
|
|
|
&:not([multiple]) {
|
|
height: calc(2.25em + #{$thickness});
|
|
}
|
|
|
|
&.is-active,
|
|
&.is-focused,
|
|
&:active,
|
|
&:focus,
|
|
&:focus:not(:active) {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.field.has-addons {
|
|
.control .select select {
|
|
height: 2.25em;
|
|
}
|
|
}
|
|
|
|
.bigbuttons {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.buttonright {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.control.has-icons-left .icon, .control.has-icons-right .icon {
|
|
z-index: 0;
|
|
}
|
|
|
|
// Buttons icons
|
|
.button .icon.is-small {
|
|
margin-right: 0.05rem !important;
|
|
}
|
|
|
|
// menu buttons
|
|
.button-bottom {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.button-right {
|
|
float: right;
|
|
}
|
|
|
|
.control.has-icons-left .icon, .control.has-icons-right .icon {
|
|
z-index: 4;
|
|
}
|
|
|
|
// Contenteditable form
|
|
.input.title {
|
|
font-size: 1.8rem;
|
|
font-family: $vikunja-font;
|
|
font-weight: 400 !important;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
margin: 0 .3em;
|
|
height: auto;
|
|
padding: .3em;
|
|
|
|
&:focus {
|
|
background: $input-background-color;
|
|
border-color: $input-focus-border-color;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
.input.title {
|
|
height: auto;
|
|
}
|
|
}
|