publik-base-theme/static/includes/_misc.scss

736 lines
12 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

$notification_base_color: #F9DEDE !default;
$notification_error_color: $notification_base_color !default;
$notification_warning_color: saturate(adjust-hue($notification_base_color, 45deg), 20%) !default;
$notification_success_color: adjust-hue($notification_base_color, 120deg) !default;
$notification_info_color: adjust-hue($notification_base_color, 220deg) !default;
// $notification-style:
// classic: black icon
// border-icon: colored icon on left boder
$notification-style: classic !default;
div.textcell {
h3, h4, h5, p, table {
margin: 0.7em 0.5rem;
}
p, table, ul, ol {
line-height: 1.4;
}
}
@media screen and ($max-mobile-viewport) {
img {
max-width: 100%;
}
}
span#environment-label,
div#footer div.cell.test-banner {
position: fixed;
line-height: 200%;
font-weight: bold;
color: white;
top: 5em;
right: -5em;
background: red;
width: 25em;
z-index: 1000;
@include vendor-prefix('transform', 'rotate(45deg)');
@include vendor-prefix('transform-origin', 'center center');
text-align: center;
border: 2px solid darken(#f00, 10%);
white-space: pre;
opacity: 0.9;
pointer-events: none;
@media screen and ($max-mobile-viewport) {
top: auto;
bottom: 3rem;
right: -1rem;
width: 25vw;
padding: 0 1rem;
font-size: 70%;
opacity: 0.7;
border: 0;
@include vendor-prefix('transform', 'rotate(-45deg)');
@include vendor-prefix('transform-origin', 'bottom right');
}
}
div#footer div.cell.test-banner p {
margin: 0;
}
#login-methods {
width: 48%;
float: left;
}
#welcome-text {
padding: 0 1em;
width: 48%;
width: calc(48% - 2em);
float: right;
}
@media screen and ($max-mobile-viewport) {
#welcome-text,
#login-methods {
width: auto;
float: none;
}
}
br.clear {
clear: both;
}
div#login-methods label {
display: block;
}
div#login-methods input {
margin-left: 0.7em;
}
@if $cell-border == none {
// add a border with "OU" between authentication blocks
#registration-blocks .a2-block:not(:first-child),
#login-page .block:not(:first-child) {
position: relative;
border-left: 1px solid #999;
padding-left: 2rem;
border-radius: 0;
overflow: visible;
&::after {
content: "OU";
display: block;
position: absolute;
left: -1.5rem;
width: 3rem;
text-align: center;
background: white;
top: 1rem;
height: 3rem;
line-height: 3rem;
}
@media screen and ($max-mobile-viewport) {
border-left: none;
padding-left: 0;
&::after {
content: none;
}
}
}
}
.block-fc a.button:focus {
@if $button-focus-outline == none {
outline: 1px dotted $button-background;
} @else {
outline: $button-focus-outline;
outline-offset: $button-focus-outline-offset;
}
}
#profile span.label {
color: lighten($font-color, 20%);
font-size: 90%;
display: block;
}
#profile div.value {
margin-left: 0;
margin-bottom: 0.7em;
span.nodata {
font-style: italic;
}
}
a#publik-portal-agent {
z-index: 10000;
position: absolute;
top: 0px;
right: 5px;
background: white;
color: #888;
padding: 5px 10px;
border: 1px solid #888;
border-width: 0 1px 1px 1px;
@media screen and ($max-mobile-viewport) {
display: none;
}
}
div#consent_banner {
position: fixed;
width: 100%;
z-index: 10000;
background: rgba(255, 255, 255, 0.95);
text-align: center;
box-shadow: 0 0 8px 1px #666;
padding: 0.7em 0;
bottom: 0;
& div.actions {
padding-top: 0.7em;
}
& button {
position: absolute;
right: 0;
top: 0;
background: transparent;
border: none;
cursor: pointer;
}
}
%top-consent-banner {
@media screen and ($max-mobile-viewport) {
position: absolute;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 0 8px 1px #333;
top: 0;
bottom: auto;
}
}
@if $nav-mobile-mode == bottom-bar {
div#consent_banner {
@extend %top-consent-banner;
}
} @else {
body.pwa div#consent_banner {
@extend %top-consent-banner;
}
}
.block-password input[type=text], .block-password input[type=password] {
width: 25em;
}
ul.logout-list {
padding: 0;
margin: 1em;
}
div#continue-link {
margin: 1em;
}
// overlay for page changes; this requires one of transitions/$foo.scss files,
// (see additional explanations in there) and some custom javascript code to
// create the overlay on a given event; for example:
//
// $(function() {
// $(window).on('pageshow', function() {
// $('#page-change-overlay').remove();
// });
// $('form.quixote').on('submit', function() {
// var overlay = $('<div id="page-change-overlay"></div>').appendTo('body');
// overlay[0].offsetHeight; // force redraw to get fade-in of overlay
// overlay.toggleClass('on');
// return true;
// });
// });
div#page-change-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
transition: all 0.3s ease;
z-index: 100000;
background: white;
opacity: 0;
}
div#page-change-overlay.on {
z-index: 100000;
opacity: 0.9;
}
// django.contrib.messages
#messages {
& ul {
margin: 0;
padding: 0;
list-style: none;
}
}
@mixin notification-message($color, $symbol) {
box-sizing: content-box;
background: $color;
color: text-color($color);
margin: 1rem 0;
padding: 0.5rem;
padding-left: 4rem;
position: relative;
@if $notification-style == border-icon {
border-left: 4px solid darken($color, 40%);
padding-left: 2rem;
}
min-height: 2rem;
&::before {
content: $symbol;
font-family: FontAwesome;
font-size: 2rem;
position: absolute;
left: 1rem;
top: 0.5rem;
@if $notification-style == border-icon {
color: darken($color, 40%);
left: calc(-0.5rem - 2px);
width: 1rem;
display: block;
text-align: center;
background: white;
border-radius: 1rem;
padding: 0;
}
}
p {
margin: 0 0 0.6rem 0;
&:first-child {
padding-top: 0.5rem;
}
&:last-child {
margin-bottom: 0;
}
}
}
#messages li.error, .errornotice {
@include notification-message($notification_error_color, "\f06a");
}
#messages li.warning, .warningnotice {
@include notification-message($notification_warning_color, "\f071");
}
#messages li.success, .successnotice {
@include notification-message($notification_success_color, "\f058"); // check-circle
}
#messages li.info, .infonotice {
@include notification-message($notification_info_color, "\f05a");
}
form ul.errorlist.nonfield {
margin-top: 0;
li {
@extend .errornotice;
margin-top: 0;
}
}
// lingo cells
table.invoices th.invoice-amount {
text-align: right;
padding-right: 0.7em;
}
td.amount {
text-align: right;
}
table.invoices {
width: 100%;
th {
text-align: left;
padding: 0.3em;
}
td {
padding: 0.3em 0.7em;
}
tr:nth-child(even) {
background: #eee;
}
td:last-child {
width: 8em;
line-height: 150%;
}
a.icon-view, a.icon-pdf {
white-space: nowrap;
}
a.icon-view:before {
padding-right: 0.7em;
font-family: FontAwesome;
content: "\f06e\00a0"; // eye
}
a.icon-pdf:before {
padding-right: 0.7em;
font-family: FontAwesome;
content: "\f1c1\00a0"; // file-pdf-o
}
}
// invoice popup
div.ui-dialog #item {
span.amount, span.timestamp {
position: absolute;
right: 1em;
}
div {
margin: 1.5em 0;
border-bottom: 1px dotted #ccc;
padding-bottom: 0.3em;
&.paid-info::before,
&.no-online-payment-reason::before {
content: '\f05a'; // info-circle
font-family: FontAwesome;
margin-right: 0.3em;
}
}
}
div.ui-dialog.alert .ui-dialog-titlebar {
background: #E65050;
}
// fargo
div#user-files {
position: relative;
table {
width: 100%;
border-collapse: collapse;
}
th {
text-align: left;
padding: 0.3em;
text-transform: lowercase;
}
th a {
color: inherit;
}
tbody tr {
cursor: pointer;
}
tbody tr:hover td.title {
text-decoration: underline;
}
tr.description-row {
cursor: auto;
font-size: 90%;
}
td {
padding: 0.3em 1em;
border: 1px solid white;
}
td.size {
text-align: right;
}
td.thumbnail {
text-align: center;
}
tbody tr.odd {
background: white;
}
tbody tr.even {
background: #eee;
}
a.icon-remove,
a.icon-edit {
&::before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: none;
content: "\f040"; // pencil
color: $button-background;
}
display: inline-block;
}
a.icon-remove::before { content: "\f057"; } // times-circle
// support for legacy delete button markup, to be removed
button.icon-remove-sign {
border: none;
background: none;
box-shadow: none;
padding: 2px;
line-height: 100%;
color: $button-background;
margin-right: 0;
}
button.icon-remove-sign::before {
font-family: FontAwesome;
content: "\f057";
}
td.action-column {
width: 1.5em;
text-align: center;
vertical-align: middle;
}
tr::before {
font-family: FontAwesome;
content: "";
vertical-align: middle;
text-align: center;
display: table-cell;
width: 2em;
}
tr.mime-text::before { content: "\f0f6"; } // -file-text-o
tr.mime-image::before { content: "\f1c5"; } // -file-image-o
tr.mime-audio::before { content: "\f1c7"; } // -file-audio-o
tr.mime-video::before { content: "\f1c8"; } // -file-video-o
tr.mime-application::before { content: "\f016"; } // -file-o
tr.mime-application-pdf::before { content: "\f1c1"; } // -file-pdf-o
td.thumbnail {
max-width: 100px;
img {
min-width: 60px;
max-width: 100%;
}
}
}
// fargo
div.table-container {
ul.pagination {
min-height: 2rem;
list-style: none;
margin: 0 0 1em 0;
padding: 1.5em 0.7em 1em 0;
li {
display: none;
float: left;
line-height: 150%;
}
> li.cardinality {
float: right;
}
li.previous, li.next {
display: block;
a {
@extend %button !optional;
}
}
li.current {
display: block;
position: absolute;
right: 1rem;
}
}
}
.fargo-pick-popup th {
text-align: left;
padding: 0.3em;
text-transform: lowercase;
}
table.shades tbody tr:nth-child(2n+1) {
background: #eee;
}
table.headers th {
background: $button-background;
color: $button-color;
padding: 0.7em 1em;
}
table.centered-cells td {
text-align: center;
}
.combo-search-results em {
background: yellow;
}
div.a2-continue {
padding: 1em;
}
div.meetings_table {
// style for templates/qommon/forms/widgets/select--meetings.html
margin-top: 0.7em;
display: flex;
align-items: flex-start;
width: 100%;
& > div {
flex: 0 1 auto;
width: 20%;
text-align: center;
display: none;
}
div.head {
padding-bottom: 0.7em;
}
button {
margin: 0;
width: 3em;
height: 3em;
&.next {
margin-left: 1em;
}
&.prev {
margin-right: 1em;
}
}
div span {
display: block;
cursor: pointer;
padding: 0.2em 0;
&.disabled {
opacity: 0.3;
cursor: not-allowed;
}
}
span.selectable {
&:hover {
background: #ccc;
color: black;
}
&.on {
background: $button-background;
color: $button-color;
}
}
&.mobile {
> div {
width: 100%;
}
div span {
display: inline-block;
padding: 0.5em;
margin: 0.5em;
}
button {
&.prev, &.next {
margin: 0;
}
}
}
}
div.location-icon {
pointer-events: none;
width: 10px;
height: 10px;
background: red;
border-radius: 100%;
position: relative;
top: -5px;
left: -5px;
border: 1px solid #800;
z-index: -100 !important;
}
div.leaflet-control-gps {
&.pending {
opacity: 0.5;
a {
cursor: wait;
}
}
}
// evaluation field
.star-choice {
span {
&::before {
font-family: FontAwesome;
content: "\f006"; // star-o
color: #888;
font-size: 22px;
display: inline-block;
transition: transform ease 0.2s;
}
&.selected::before, &:hover::before {
content: "\f005"; // star
color: #ffaa00;
}
&:hover::before {
transform: scale(1.4);
opacity: 0.8;
}
}
}
#fc-linking {
padding: 0 1rem;
&.no-account {
text-align: center;
}
}
div.leaflet-bottom, div.leaflet-top {
z-index: 800;
}
.login-actions {
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
}
.field-live-hint {
position: absolute;
background: #ffffee;
color: #333;
z-index: 1000000;
padding: 1em 1em;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
span::before {
font-family: FontAwesome;
content: "\f0eb"; // lightbulb
padding-right: 0.5em;
}
button.action,
button.close {
margin: 0 1em;
padding: 0;
color: blue !important;
border: none !important;
text-decoration: underline !important;
background: transparent !important;
box-shadow: none !important;
min-width: auto;
}
button.close {
color: #333 !important;
margin: 0;
text-decoration: none !important;
&::after {
content: "×";
}
}
}