150 lines
2.3 KiB
SCSS
150 lines
2.3 KiB
SCSS
.button {
|
|
transition: all $transition;
|
|
border: 0;
|
|
text-transform: uppercase;
|
|
font-size: 0.85rem;
|
|
font-weight: bold;
|
|
height: $button-height;
|
|
box-shadow: $shadow-sm;
|
|
|
|
&.is-hovered,
|
|
&:hover {
|
|
box-shadow: $shadow-md;
|
|
}
|
|
|
|
&.fullheight {
|
|
padding-right: 7px;
|
|
height: 100%;
|
|
}
|
|
|
|
&.is-active,
|
|
&.is-focused,
|
|
&:active,
|
|
&:focus,
|
|
&:focus:not(:active) {
|
|
box-shadow: $shadow-xs !important;
|
|
}
|
|
|
|
&.is-primary.is-outlined:hover {
|
|
color: $white;
|
|
}
|
|
|
|
&.is-small {
|
|
border-radius: $radius;
|
|
}
|
|
}
|
|
|
|
.field.has-addons .button {
|
|
height: 2.5rem;
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.field.has-addons .select select {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.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: $color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.select:after {
|
|
margin-top: -0.575rem;
|
|
}
|
|
|
|
.select select {
|
|
border-width: $thickness;
|
|
|
|
&:not([multiple]) {
|
|
height: calc(2.25rem + #{$thickness});
|
|
}
|
|
|
|
&.is-active,
|
|
&.is-focused,
|
|
&:active,
|
|
&:focus,
|
|
&:focus:not(:active) {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.field.has-addons .control .select select {
|
|
height: 100%;
|
|
}
|
|
|
|
.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 .3rem;
|
|
height: auto;
|
|
padding: .3rem;
|
|
|
|
&:focus {
|
|
background: $input-background-color;
|
|
border-color: $input-focus-border-color;
|
|
}
|
|
|
|
&.disabled {
|
|
&:focus, &:hover {
|
|
background: transparent !important;
|
|
border-color: transparent !important;
|
|
cursor: default !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
.input.title {
|
|
height: auto;
|
|
}
|
|
}
|