engelsystem/resources/assets/themes/base.scss

381 lines
6.3 KiB
SCSS
Raw Normal View History

2021-07-29 20:18:40 +02:00
// Basic variables
2022-12-22 18:28:51 +01:00
@use 'sass:map';
2021-07-29 20:18:40 +02:00
// select 2 variables
$link-decoration: none !default;
$link-hover-decoration: underline !default;
2022-12-22 18:28:51 +01:00
$nav-tabs-link-active-color: #fff !default;
$nav-tabs-link-active-bg: $primary !default;
2021-08-14 16:57:23 +02:00
$nav-tabs-link-active-border-color: none !default;
2021-07-29 20:18:40 +02:00
// Imports
2022-12-22 18:28:51 +01:00
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/maps';
@import '~bootstrap/scss/mixins';
$custom-colors: (
2022-12-22 18:28:51 +01:00
black: #000,
);
$theme-colors: map-merge($theme-colors, $custom-colors);
2022-04-21 11:16:16 +02:00
$form-label-font-weight: $font-weight-bold;
2022-12-22 18:28:51 +01:00
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/containers';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/tables';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/pagination';
@import '~bootstrap/scss/badge';
@import '~bootstrap/scss/alert';
@import '~bootstrap/scss/progress';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/close';
@import '~bootstrap/scss/popover';
@import '~bootstrap/scss/helpers';
@import '~bootstrap/scss/utilities/api';
@import '~bootstrap-icons/font/bootstrap-icons';
@import 'choices';
2022-12-22 18:28:51 +01:00
@import 'error';
@import 'barchart';
2014-12-06 19:02:02 +01:00
$navbar-height: 3.125rem;
body {
padding-top: 70px;
}
.footer a {
color: $text-muted;
}
2021-07-24 12:38:23 +02:00
.text-inherit {
2022-12-22 18:28:51 +01:00
color: inherit;
2021-07-24 12:38:23 +02:00
2022-12-22 18:28:51 +01:00
&:hover {
color: inherit;
}
2021-07-24 12:38:23 +02:00
}
2018-10-05 17:09:06 +02:00
.icon-icon_angel {
background-color: $body-color;
2018-10-05 17:09:06 +02:00
display: inline-block;
width: 1em;
height: 1em;
mask: url(../icons/angel.svg) no-repeat 50% 50%;
mask-size: cover;
}
2021-08-05 01:00:12 +02:00
.text-light .icon-icon_angel {
2022-12-22 18:28:51 +01:00
background-color: map.get($theme-colors, 'light');
2021-08-05 01:00:12 +02:00
}
.dark .icon-icon_angel {
2022-12-22 18:28:51 +01:00
background-color: map.get($theme-colors, 'dark');
2021-08-05 01:00:12 +02:00
}
2018-10-05 17:09:06 +02:00
a .icon-icon_angel {
background-color: $link-color;
2018-10-05 17:09:06 +02:00
}
.navbar .icon-icon_angel {
background-color: $nav-link-disabled-color;
2018-10-05 17:09:06 +02:00
}
2022-04-21 11:16:16 +02:00
.navbar-brand .icon-icon_angel,
table a > .icon-icon_angel {
background-color: $body-color;
2018-10-05 17:09:06 +02:00
}
2021-07-24 12:38:23 +02:00
.nav-item--userhints {
2022-12-22 18:28:51 +01:00
margin: -$navbar-padding-y 0;
2021-07-24 12:38:23 +02:00
}
.popover--userhints .alert:last-of-type {
2022-12-22 18:28:51 +01:00
margin-bottom: 0;
2021-07-24 12:38:23 +02:00
}
.table .form-group {
margin-bottom: 0;
}
2017-12-12 21:57:57 +01:00
.stats {
2017-12-26 17:08:14 +01:00
font-size: 20px;
2017-12-26 17:37:17 +01:00
height: 150px;
2018-12-27 12:30:58 +01:00
text-align: center;
.number {
font-size: 80px;
font-weight: 200;
}
@media (max-width: map-get($grid-breakpoints, 'md')) {
2018-12-27 12:30:58 +01:00
font-size: inherit;
.number {
font-size: 40px;
}
2017-12-13 12:46:15 +01:00
}
2017-12-12 21:57:57 +01:00
}
.dashboard-card {
2018-12-27 12:30:58 +01:00
position: relative;
font-size: 20px;
color: $headings-color;
.card-link {
2018-12-27 12:30:58 +01:00
position: absolute;
2017-12-13 12:22:26 +01:00
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: $primary; /* Fix to make div clickable in IE */
2017-12-13 12:22:26 +01:00
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
2018-12-27 12:30:58 +01:00
}
.card-link:hover {
2017-12-13 12:22:26 +01:00
opacity: 0.3;
2018-12-27 12:30:58 +01:00
}
2017-12-13 12:22:26 +01:00
}
2022-07-22 15:42:27 +02:00
// prevent dropdown-menu from overflowing the view
2022-07-21 18:40:37 +02:00
.dropdown-menu {
2022-12-22 18:28:51 +01:00
max-height: calc(100vh - 300px); // 300px: menu offset
overflow: auto;
2022-07-21 18:40:37 +02:00
}
2022-07-22 15:42:27 +02:00
@media (min-width: map-get($grid-breakpoints, 'lg')) {
2022-12-22 18:28:51 +01:00
.dropdown-menu {
max-height: calc(100vh - $navbar-height - 16px); // 16px extra padding
}
2022-07-22 15:42:27 +02:00
}
.selection .checkbox {
2018-12-27 12:30:58 +01:00
display: block;
}
2016-11-05 10:06:06 +01:00
.shift-calendar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
2018-11-13 17:47:19 +01:00
align-items: stretch;
2016-11-05 10:06:06 +01:00
width: 100%;
2017-01-02 15:43:36 +01:00
.lane {
background: $table-striped-bg;
2017-01-02 15:43:36 +01:00
flex-grow: 1;
min-width: 280px;
width: 280px;
flex-shrink: 1;
.header {
border-bottom: 1px solid $table-border-color;
2017-01-02 15:43:36 +01:00
height: 30px;
padding: 5px 5px 5px 16px;
}
.tick {
height: 30px;
border-top: 1px solid darken($table-striped-bg, 2%);
2017-01-02 15:43:36 +01:00
}
2016-11-05 10:06:06 +01:00
.tick.hour {
border-top: 2px solid $table-border-color;
2016-11-05 10:06:06 +01:00
font-size: 0.9em;
padding-left: 5px;
}
2017-01-02 15:43:36 +01:00
2016-11-05 10:06:06 +01:00
.tick.day {
border-top: 2px solid $primary;
2016-11-05 10:06:06 +01:00
font-size: 0.9em;
padding-left: 5px;
}
2017-01-02 15:43:36 +01:00
}
.lane.time {
border-right: 1px solid $table-border-color;
2017-01-02 15:43:36 +01:00
flex-grow: 0;
min-width: 50px;
width: 50px;
flex-shrink: 0;
}
2018-12-27 12:30:58 +01:00
.shift-card {
2018-12-27 12:30:58 +01:00
z-index: 0;
overflow: hidden;
position: relative;
2019-10-20 14:54:00 +02:00
margin: 0 5px 5px 0;
2018-12-27 12:30:58 +01:00
&:hover {
overflow: visible;
z-index: 100;
}
2019-10-20 14:54:00 +02:00
.shift {
min-height: 100%;
2018-12-27 12:30:58 +01:00
}
2017-01-02 15:43:36 +01:00
}
2014-12-15 23:09:06 +01:00
}
2017-12-27 12:45:48 +01:00
.column_duration {
2018-12-27 12:30:58 +01:00
text-align: right;
2017-12-27 12:45:48 +01:00
}
2022-12-22 18:28:51 +01:00
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
code {
background-color: inherit;
}
}
2014-12-07 00:08:09 +01:00
.messages {
&:focus {
outline: none;
}
2018-12-27 12:30:58 +01:00
2014-12-07 00:08:09 +01:00
a:focus {
outline: none;
}
}
2014-12-07 21:02:22 +01:00
.messages span.text-danger {
animation: pulse 1s infinite;
}
.legend .label {
white-space: pre-wrap;
line-height: 2;
}
.shift-calendar.table-responsive {
overflow-x: inherit;
}
// Reference links
2022-12-22 18:28:51 +01:00
h1,
h2,
h3,
h4,
h5,
h6,
.card-header {
a.ref-link {
display: none;
}
2020-12-27 17:55:41 +01:00
&:hover {
a.ref-link {
display: inline;
2020-12-27 17:55:41 +01:00
}
}
}
.ref-id[id] {
padding-top: 3em;
}
2021-07-29 20:18:40 +02:00
// Cards
2021-07-24 12:38:23 +02:00
.card-body > *:last-child {
2022-12-22 18:28:51 +01:00
margin-bottom: 0;
2021-07-24 12:38:23 +02:00
}
2021-07-29 20:18:40 +02:00
.card-header {
&.bg-dark {
2022-12-22 18:28:51 +01:00
color: map.get($theme-colors, 'light');
2021-07-29 20:18:40 +02:00
}
&.bg-light {
2022-12-22 18:28:51 +01:00
color: map.get($theme-colors, 'dark');
2021-07-29 20:18:40 +02:00
}
}
// code tag
code {
background-color: $input-disabled-bg;
@include border-radius($input-border-radius);
}
2014-12-07 21:02:22 +01:00
@keyframes pulse {
0% {
2017-01-02 15:43:36 +01:00
transform: rotate(0deg);
2014-12-07 21:02:22 +01:00
}
10% {
2017-01-02 15:43:36 +01:00
transform: rotate(5deg) translateY(-2px);
2014-12-07 21:02:22 +01:00
}
20% {
2017-01-02 15:43:36 +01:00
transform: rotate(-5deg);
2014-12-07 21:02:22 +01:00
}
2017-01-02 15:43:36 +01:00
30% {
2022-12-22 18:28:51 +01:00
transform: rotate(5deg) translateY(-2px);
2014-12-07 21:02:22 +01:00
}
2017-01-02 15:43:36 +01:00
40% {
transform: rotate(-5deg);
2014-12-07 21:02:22 +01:00
}
2017-01-02 15:43:36 +01:00
50% {
transform: rotate(0deg) translateY(-2px);
2014-12-07 21:02:22 +01:00
}
75% {
transform: rotate(0deg) translateY(0px);
}
}
2019-07-24 20:57:27 +02:00
@media print {
a[href]:after {
2022-12-22 18:28:51 +01:00
content: '';
2019-07-24 20:57:27 +02:00
}
2019-12-30 14:06:07 +01:00
}
.conversation {
height: 55vh;
overflow-x: hidden;
2022-12-22 18:28:51 +01:00
overflow-y: auto;
}
.message {
max-width: 75%;
display: inline-block;
}
/* Hide the arrow up/down buttons rendered by the browser in the input field */
/* Chrome, Safari, Edge, Opera */
2022-12-22 18:28:51 +01:00
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
2022-12-22 18:28:51 +01:00
input[type='number'] {
-moz-appearance: textfield;
}