HTWK/htwkalender-pwa
1
0
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git synced 2025-07-16 09:38:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

lint:#13 formatted

Browse Source
This commit is contained in:
Elmar Kresse
2024-06-10 10:50:27 +02:00
parent ee0894d048
commit 439850f69b
127 changed files with 15740 additions and 11990 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/index.html
View File

@ -1,16 +1,22 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTWKalender</title>
<meta name="description" content="Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.">
<meta name="keywords" content="HTWK, calendar, iCal, dates, events, schedule">
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" type="image/svg+xml" href="/htwk.svg" />
<link rel="mask-icon" href="/htwk-mask.svg" color="#00494c" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="theme-color" content="#1b2022">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTWKalender</title>
<meta
name="description"
content="Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format."
/>
<meta
name="keywords"
content="HTWK, calendar, iCal, dates, events, schedule"
/>
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" type="image/svg+xml" href="/htwk.svg" />
<link rel="mask-icon" href="/htwk-mask.svg" color="#00494c" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="theme-color" content="#1b2022" />
<link
id="theme-link"
rel="stylesheet"

2
frontend/public/primevue-sass-theme/package.json
View File

@ -26,4 +26,4 @@
"bugs": {
"url": "https://github.com/primefaces/primevue-sass-theme/issues"
}
}
}

29
frontend/public/primevue-sass-theme/theme-base/_colors.scss
View File

@ -1,18 +1,17 @@
:root {
@if variable-exists(colors) {
@each $name, $color in $colors {
@for $i from 0 through 5 {
@if ($i == 0) {
--#{$name}-50:#{tint($color, (5 - $i) * 19%)};
}
@else {
--#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
}
}
@for $i from 1 through 4 {
--#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
}
@if variable-exists(colors) {
@each $name, $color in $colors {
@for $i from 0 through 5 {
@if ($i == 0) {
--#{$name}-50: #{tint($color, (5 - $i) * 19%)};
} @else {
--#{$name}-#{$i * 100}: #{tint($color, (5 - $i) * 19%)};
}
}
@for $i from 1 through 4 {
--#{$name}-#{($i + 5) * 100}: #{shade($color, $i * 15%)};
}
}
}
}
}

199
frontend/public/primevue-sass-theme/theme-base/_common.scss
View File

@ -1,198 +1,205 @@
// core
.p-component, .p-component * {
box-sizing: border-box;
.p-component,
.p-component * {
box-sizing: border-box;
}
.p-hidden-space {
visibility: hidden;
visibility: hidden;
}
.p-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
text-decoration: none;
font-size: 100%;
list-style: none;
margin: 0;
padding: 0;
border: 0;
outline: 0;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.p-disabled, .p-disabled * {
cursor: default;
pointer-events: none;
user-select: none;
.p-disabled,
.p-disabled * {
cursor: default;
pointer-events: none;
user-select: none;
}
.p-component-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.p-unselectable-text {
user-select: none;
user-select: none;
}
.p-sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal;
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal;
}
.p-link {
text-align: left;
background-color: transparent;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
user-select: none;
text-align: left;
background-color: transparent;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
user-select: none;
}
.p-link:disabled {
cursor: default;
cursor: default;
}
/* Non vue overlay animations */
.p-connected-overlay {
opacity: 0;
transform: scaleY(0.8);
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
opacity: 0;
transform: scaleY(0.8);
transition:
transform 0.12s cubic-bezier(0, 0, 0.2, 1),
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-connected-overlay-visible {
opacity: 1;
transform: scaleY(1);
opacity: 1;
transform: scaleY(1);
}
.p-connected-overlay-hidden {
opacity: 0;
transform: scaleY(1);
transition: opacity .1s linear;
opacity: 0;
transform: scaleY(1);
transition: opacity 0.1s linear;
}
/* Vue based overlay animations */
.p-connected-overlay-enter-from {
opacity: 0;
transform: scaleY(0.8);
opacity: 0;
transform: scaleY(0.8);
}
.p-connected-overlay-leave-to {
opacity: 0;
opacity: 0;
}
.p-connected-overlay-enter-active {
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
transition:
transform 0.12s cubic-bezier(0, 0, 0.2, 1),
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-connected-overlay-leave-active {
transition: opacity .1s linear;
transition: opacity 0.1s linear;
}
/* Toggleable Content */
.p-toggleable-content-enter-from,
.p-toggleable-content-leave-to {
max-height: 0;
max-height: 0;
}
.p-toggleable-content-enter-to,
.p-toggleable-content-leave-from {
max-height: 1000px;
max-height: 1000px;
}
.p-toggleable-content-leave-active {
overflow: hidden;
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
overflow: hidden;
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
}
.p-toggleable-content-enter-active {
overflow: hidden;
transition: max-height 1s ease-in-out;
overflow: hidden;
transition: max-height 1s ease-in-out;
}
// theme
* {
box-sizing: border-box;
box-sizing: border-box;
}
.p-component {
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings, normal);
font-size: $fontSize;
font-weight: $fontWeight;
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings, normal);
font-size: $fontSize;
font-weight: $fontWeight;
}
.p-component-overlay {
background-color: $maskBg;
transition-duration: $transitionDuration;
background-color: $maskBg;
transition-duration: $transitionDuration;
}
.p-disabled, .p-component:disabled {
opacity: $disabledOpacity;
.p-disabled,
.p-component:disabled {
opacity: $disabledOpacity;
}
.p-error {
color: $errorColor;
color: $errorColor;
}
.p-text-secondary {
color: $textSecondaryColor;
color: $textSecondaryColor;
}
.pi {
font-size: $primeIconFontSize;
font-size: $primeIconFontSize;
}
.p-icon {
width: $primeIconFontSize;
height: $primeIconFontSize;
width: $primeIconFontSize;
height: $primeIconFontSize;
}
.p-link {
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings, normal);
font-size: $fontSize;
border-radius: $borderRadius;
outline-color: transparent;
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings, normal);
font-size: $fontSize;
border-radius: $borderRadius;
outline-color: transparent;
&:focus-visible {
@include focused();
}
&:focus-visible {
@include focused();
}
}
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
animation: p-component-overlay-leave-animation 150ms forwards;
}
.p-component-overlay {
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
}

190
frontend/public/primevue-sass-theme/theme-base/_components.scss
View File

@ -4,109 +4,109 @@
@import "./components/input/_editor";
@layer primevue {
@import "_common";
@import "_common";
//Input
@import "./components/input/_autocomplete";
@import "./components/input/_calendar";
@import "./components/input/_cascadeselect";
@import "./components/input/_checkbox";
@import "./components/input/_chips";
@import "./components/input/_colorpicker";
@import "./components/input/_dropdown";
@import "./components/input/_floatlabel";
@import "./components/input/_iconfield";
@import "./components/input/_inputotp";
@import "./components/input/_inputgroup";
@import "./components/input/_inputicon";
@import "./components/input/_inputnumber";
@import "./components/input/_inputswitch";
@import "./components/input/_inputtext";
@import "./components/input/_knob";
@import "./components/input/_listbox";
@import "./components/input/_multiselect";
@import "./components/input/_password";
@import "./components/input/_radiobutton";
@import "./components/input/_rating";
@import "./components/input/_selectbutton";
@import "./components/input/_slider";
@import "./components/input/_textarea";
@import "./components/input/_treeselect";
@import "./components/input/_togglebutton";
//Input
@import "./components/input/_autocomplete";
@import "./components/input/_calendar";
@import "./components/input/_cascadeselect";
@import "./components/input/_checkbox";
@import "./components/input/_chips";
@import "./components/input/_colorpicker";
@import "./components/input/_dropdown";
@import "./components/input/_floatlabel";
@import "./components/input/_iconfield";
@import "./components/input/_inputotp";
@import "./components/input/_inputgroup";
@import "./components/input/_inputicon";
@import "./components/input/_inputnumber";
@import "./components/input/_inputswitch";
@import "./components/input/_inputtext";
@import "./components/input/_knob";
@import "./components/input/_listbox";
@import "./components/input/_multiselect";
@import "./components/input/_password";
@import "./components/input/_radiobutton";
@import "./components/input/_rating";
@import "./components/input/_selectbutton";
@import "./components/input/_slider";
@import "./components/input/_textarea";
@import "./components/input/_treeselect";
@import "./components/input/_togglebutton";
//Button
@import "./components/button/_button";
@import "./components/button/_speeddial";
@import "./components/button/_splitbutton";
//Button
@import "./components/button/_button";
@import "./components/button/_speeddial";
@import "./components/button/_splitbutton";
//Data
@import "./components/data/_carousel";
@import "./components/data/_datatable";
@import "./components/data/_dataview";
@import "./components/data/_filter";
@import "./components/data/_orderlist";
@import "./components/data/_organizationchart";
@import "./components/data/_paginator";
@import "./components/data/_picklist";
@import "./components/data/_timeline";
@import "./components/data/_tree";
@import "./components/data/_treetable";
//Data
@import "./components/data/_carousel";
@import "./components/data/_datatable";
@import "./components/data/_dataview";
@import "./components/data/_filter";
@import "./components/data/_orderlist";
@import "./components/data/_organizationchart";
@import "./components/data/_paginator";
@import "./components/data/_picklist";
@import "./components/data/_timeline";
@import "./components/data/_tree";
@import "./components/data/_treetable";
//Panel
@import "./components/panel/_accordion";
@import "./components/panel/_card";
@import "./components/panel/_fieldset";
@import "./components/panel/_divider";
@import "./components/panel/_panel";
@import "./components/panel/_scrollpanel";
@import "./components/panel/_splitter";
@import "./components/panel/_stepper";
@import "./components/panel/_tabview";
@import "./components/panel/_toolbar";
//Panel
@import "./components/panel/_accordion";
@import "./components/panel/_card";
@import "./components/panel/_fieldset";
@import "./components/panel/_divider";
@import "./components/panel/_panel";
@import "./components/panel/_scrollpanel";
@import "./components/panel/_splitter";
@import "./components/panel/_stepper";
@import "./components/panel/_tabview";
@import "./components/panel/_toolbar";
//Overlay
@import "./components/overlay/_confirmpopup";
@import "./components/overlay/_dialog";
@import "./components/overlay/_overlaypanel";
@import "./components/overlay/_sidebar";
@import "./components/overlay/_tooltip";
//Overlay
@import "./components/overlay/_confirmpopup";
@import "./components/overlay/_dialog";
@import "./components/overlay/_overlaypanel";
@import "./components/overlay/_sidebar";
@import "./components/overlay/_tooltip";
//File
@import "./components/file/_fileupload";
//File
@import "./components/file/_fileupload";
//Menu
@import "./components/menu/_breadcrumb";
@import "./components/menu/_contextmenu";
@import "./components/menu/_dock";
@import "./components/menu/_megamenu";
@import "./components/menu/_menu";
@import "./components/menu/_menubar";
@import "./components/menu/_panelmenu";
@import "./components/menu/_steps";
@import "./components/menu/_tabmenu";
@import "./components/menu/_tieredmenu";
//Menu
@import "./components/menu/_breadcrumb";
@import "./components/menu/_contextmenu";
@import "./components/menu/_dock";
@import "./components/menu/_megamenu";
@import "./components/menu/_menu";
@import "./components/menu/_menubar";
@import "./components/menu/_panelmenu";
@import "./components/menu/_steps";
@import "./components/menu/_tabmenu";
@import "./components/menu/_tieredmenu";
//Messages
@import "./components/messages/_inlinemessage";
@import "./components/messages/_message";
@import "components/messages/toast";
//Messages
@import "./components/messages/_inlinemessage";
@import "./components/messages/_message";
@import "components/messages/toast";
//MultiMedia
@import "./components/multimedia/_galleria";
@import "./components/multimedia/_image";
//MultiMedia
@import "./components/multimedia/_galleria";
@import "./components/multimedia/_image";
//Misc
@import "./components/misc/_avatar";
@import "./components/misc/_badge";
@import "./components/misc/_blockui";
@import "./components/misc/_chip";
@import "./components/misc/_inplace";
@import "./components/misc/_metergroup";
@import "./components/misc/_progressbar";
@import "./components/misc/_progressspinner";
@import "./components/misc/_ripple";
@import "./components/misc/_scrolltop";
@import "./components/misc/_skeleton";
@import "./components/misc/_tag";
@import "./components/misc/_terminal";
//Misc
@import "./components/misc/_avatar";
@import "./components/misc/_badge";
@import "./components/misc/_blockui";
@import "./components/misc/_chip";
@import "./components/misc/_inplace";
@import "./components/misc/_metergroup";
@import "./components/misc/_progressbar";
@import "./components/misc/_progressspinner";
@import "./components/misc/_ripple";
@import "./components/misc/_scrolltop";
@import "./components/misc/_skeleton";
@import "./components/misc/_tag";
@import "./components/misc/_terminal";
}

404
frontend/public/primevue-sass-theme/theme-base/_mixins.scss
View File

@ -1,278 +1,282 @@
@mixin icon-override($icon) {
&:before {
content: $icon;
}
&:before {
content: $icon;
}
}
@mixin focused() {
outline: $focusOutline;
outline-offset: $focusOutlineOffset;
box-shadow: $focusShadow;
outline: $focusOutline;
outline-offset: $focusOutlineOffset;
box-shadow: $focusShadow;
}
@mixin focused-inset() {
outline: $focusOutline;
outline-offset: -1 * $focusOutlineOffset;
box-shadow: inset $focusShadow;
outline: $focusOutline;
outline-offset: -1 * $focusOutlineOffset;
box-shadow: inset $focusShadow;
}
@mixin focused-input() {
outline: $focusOutline;
outline-offset: $inputFocusOutlineOffset;
box-shadow: $focusShadow;
border-color: $inputFocusBorderColor;
outline: $focusOutline;
outline-offset: $inputFocusOutlineOffset;
box-shadow: $focusShadow;
border-color: $inputFocusBorderColor;
}
@mixin focused-listitem() {
outline: $focusOutline;
outline-offset: $focusOutlineOffset;
box-shadow: $inputListItemFocusShadow;
outline: $focusOutline;
outline-offset: $focusOutlineOffset;
box-shadow: $inputListItemFocusShadow;
}
@mixin invalid-input() {
border-color: $inputErrorBorderColor;
border-color: $inputErrorBorderColor;
}
@mixin menuitem {
margin: $inputListItemMargin;
margin: $inputListItemMargin;
&:first-child {
margin-top: 0;
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
> .p-menuitem-content {
&:last-child {
margin-bottom: 0;
}
> .p-menuitem-content {
color: $menuitemTextColor;
transition: $listItemTransition;
border-radius: $menuitemBorderRadius;
.p-menuitem-link {
color: $menuitemTextColor;
padding: $menuitemPadding;
user-select: none;
.p-menuitem-text {
color: $menuitemTextColor;
transition: $listItemTransition;
border-radius: $menuitemBorderRadius;
}
.p-menuitem-icon {
color: $menuitemIconColor;
margin-right: $inlineSpacing;
}
.p-submenu-icon {
color: $menuitemIconColor;
}
}
}
&.p-highlight {
> .p-menuitem-content {
color: $menuitemTextActiveColor;
background: $menuitemActiveBg;
.p-menuitem-link {
.p-menuitem-text {
color: $menuitemTextActiveColor;
}
.p-menuitem-icon,
.p-submenu-icon {
color: $menuitemIconActiveColor;
}
}
}
&.p-focus {
> .p-menuitem-content {
background: $menuitemActiveFocusBg;
}
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
> .p-menuitem-content {
color: $menuitemTextHoverColor;
background: $menuitemHoverBg;
.p-menuitem-link {
color: $menuitemTextColor;
padding: $menuitemPadding;
user-select: none;
.p-menuitem-text {
color: $menuitemTextHoverColor;
}
.p-menuitem-icon,
.p-submenu-icon {
color: $menuitemTextHoverColor;
}
}
&:hover {
color: $menuitemTextHoverColor;
background: $menuitemHoverBg;
.p-menuitem-link {
.p-menuitem-text {
color: $menuitemTextColor;
color: $menuitemTextHoverColor;
}
.p-menuitem-icon {
color: $menuitemIconColor;
margin-right: $inlineSpacing;
}
.p-menuitem-icon,
.p-submenu-icon {
color: $menuitemIconColor;
color: $menuitemIconHoverColor;
}
}
}
}
}
&.p-highlight {
> .p-menuitem-content {
color: $menuitemTextActiveColor;
background: $menuitemActiveBg;
> .p-menuitem-content {
&:hover {
color: $menuitemTextHoverColor;
background: $menuitemHoverBg;
.p-menuitem-link {
.p-menuitem-text {
color: $menuitemTextActiveColor;
}
.p-menuitem-link {
.p-menuitem-text {
color: $menuitemTextHoverColor;
}
.p-menuitem-icon, .p-submenu-icon {
color: $menuitemIconActiveColor;
}
}
}
&.p-focus {
> .p-menuitem-content {
background: $menuitemActiveFocusBg;
}
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
> .p-menuitem-content {
color: $menuitemTextHoverColor;
background: $menuitemHoverBg;
.p-menuitem-link {
.p-menuitem-text {
color: $menuitemTextHoverColor;
}
.p-menuitem-icon, .p-submenu-icon {
color: $menuitemTextHoverColor;
}
}
&:hover {
color: $menuitemTextHoverColor;
background: $menuitemHoverBg;
.p-menuitem-link {
.p-menuitem-text {
color: $menuitemTextHoverColor;
}
.p-menuitem-icon, .p-submenu-icon {
color: $menuitemIconHoverColor;
}
}
}
}
}
> .p-menuitem-content {
&:hover {
color: $menuitemTextHoverColor;
background: $menuitemHoverBg;
.p-menuitem-link {
.p-menuitem-text {
color: $menuitemTextHoverColor;
}
.p-menuitem-icon, .p-submenu-icon {
color: $menuitemIconHoverColor;
}
}
}
.p-menuitem-icon,
.p-submenu-icon {
color: $menuitemIconHoverColor;
}
}
}
}
}
}
@mixin horizontal-rootmenuitem {
> .p-menuitem-content {
> .p-menuitem-content {
color: $horizontalMenuRootMenuitemTextColor;
transition: $listItemTransition;
border-radius: $horizontalMenuRootMenuitemBorderRadius;
.p-menuitem-link {
padding: $horizontalMenuRootMenuitemPadding;
user-select: none;
.p-menuitem-text {
color: $horizontalMenuRootMenuitemTextColor;
transition: $listItemTransition;
border-radius: $horizontalMenuRootMenuitemBorderRadius;
}
.p-menuitem-icon {
color: $horizontalMenuRootMenuitemIconColor;
margin-right: $inlineSpacing;
}
.p-submenu-icon {
color: $horizontalMenuRootMenuitemIconColor;
margin-left: $inlineSpacing;
}
}
}
&:not(.p-highlight):not(.p-disabled) {
> .p-menuitem-content {
&:hover {
color: $horizontalMenuRootMenuitemTextHoverColor;
background: $horizontalMenuRootMenuitemHoverBg;
.p-menuitem-link {
padding: $horizontalMenuRootMenuitemPadding;
user-select: none;
.p-menuitem-text {
color: $horizontalMenuRootMenuitemTextHoverColor;
}
.p-menuitem-text {
color: $horizontalMenuRootMenuitemTextColor;
}
.p-menuitem-icon {
color: $horizontalMenuRootMenuitemIconColor;
margin-right: $inlineSpacing;
}
.p-submenu-icon {
color: $horizontalMenuRootMenuitemIconColor;
margin-left: $inlineSpacing;
}
}
}
&:not(.p-highlight):not(.p-disabled) {
> .p-menuitem-content {
&:hover {
color: $horizontalMenuRootMenuitemTextHoverColor;
background: $horizontalMenuRootMenuitemHoverBg;
.p-menuitem-link {
.p-menuitem-text {
color: $horizontalMenuRootMenuitemTextHoverColor;
}
.p-menuitem-icon, .p-submenu-icon {
color: $horizontalMenuRootMenuitemIconHoverColor;
}
}
}
.p-menuitem-icon,
.p-submenu-icon {
color: $horizontalMenuRootMenuitemIconHoverColor;
}
}
}
}
}
}
@mixin placeholder {
::-webkit-input-placeholder {
@content
}
:-moz-placeholder {
@content
}
::-moz-placeholder {
@content
}
:-ms-input-placeholder {
@content
}
::-webkit-input-placeholder {
@content;
}
:-moz-placeholder {
@content;
}
::-moz-placeholder {
@content;
}
:-ms-input-placeholder {
@content;
}
}
@mixin scaledPadding($val, $scale) {
padding: nth($val, 1) * $scale nth($val, 2) * $scale;
padding: nth($val, 1) * $scale nth($val, 2) * $scale;
}
@mixin scaledFontSize($val, $scale) {
font-size: $val * $scale;
font-size: $val * $scale;
}
@mixin nested-submenu-indents($val, $index, $length) {
.p-submenu-list {
.p-menuitem {
.p-menuitem-content {
.p-menuitem-link {
padding-left: $val * ($index + 1);
}
}
@if $index < $length {
@include nested-submenu-indents($val, $index + 2, $length);
}
.p-submenu-list {
.p-menuitem {
.p-menuitem-content {
.p-menuitem-link {
padding-left: $val * ($index + 1);
}
}
@if $index < $length {
@include nested-submenu-indents($val, $index + 2, $length);
}
}
}
}
@mixin action-icon($enabled: true) {
width: $actionIconWidth;
height: $actionIconHeight;
color: $actionIconColor;
border: $actionIconBorder;
background: $actionIconBg;
border-radius: $actionIconBorderRadius;
transition: $actionIconTransition;
outline-color: transparent;
width: $actionIconWidth;
height: $actionIconHeight;
color: $actionIconColor;
border: $actionIconBorder;
background: $actionIconBg;
border-radius: $actionIconBorderRadius;
transition: $actionIconTransition;
outline-color: transparent;
@if $enabled {
&:enabled:hover {
@include action-icon-hover();
}
} @else {
&:hover {
@include action-icon-hover();
}
@if $enabled {
&:enabled:hover {
@include action-icon-hover();
}
} @else {
&:hover {
@include action-icon-hover();
}
}
&:focus-visible {
@include focused();
}
&:focus-visible {
@include focused();
}
}
@mixin action-icon-hover() {
color: $actionIconHoverColor;
border-color: $actionIconHoverBorderColor;
background: $actionIconHoverBg;
color: $actionIconHoverColor;
border-color: $actionIconHoverBorderColor;
background: $actionIconHoverBg;
}
@mixin button-states {
// <button> and <a> tags support :enabled selector.
// <button> and <a> tags support :enabled selector.
&:enabled,
&:not(button):not(a):not(.p-disabled) {
@content;
}
&:enabled,
&:not(button):not(a):not(.p-disabled) {
@content;
}
}
@function tint($color, $percentage) {
@return mix(#fff, $color, $percentage);
@return mix(#fff, $color, $percentage);
}
@function shade($color, $percentage) {
@return mix(#000, $color, $percentage);
}
@return mix(#000, $color, $percentage);
}

1127
frontend/public/primevue-sass-theme/theme-base/components/button/_button.scss
View File

File diff suppressed because it is too large Load Diff

190
frontend/public/primevue-sass-theme/theme-base/components/button/_speeddial.scss
View File

@ -1,178 +1,180 @@
@use 'sass:math';
@use "sass:math";
// core
.p-speeddial {
position: absolute;
display: flex;
position: absolute;
display: flex;
}
.p-speeddial-button {
z-index: 1;
z-index: 1;
}
.p-speeddial-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
transition: top 0s linear 0.2s;
pointer-events: none;
z-index: 2;
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
transition: top 0s linear 0.2s;
pointer-events: none;
z-index: 2;
}
.p-speeddial-item {
transform: scale(0);
opacity: 0;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
will-change: transform;
transform: scale(0);
opacity: 0;
transition:
transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
opacity 0.8s;
will-change: transform;
}
.p-speeddial-action {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.p-speeddial-circle .p-speeddial-item,
.p-speeddial-semi-circle .p-speeddial-item,
.p-speeddial-quarter-circle .p-speeddial-item {
position: absolute;
position: absolute;
}
.p-speeddial-rotate {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
will-change: transform;
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
will-change: transform;
}
.p-speeddial-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.p-speeddial-mask-visible {
pointer-events: none;
opacity: 1;
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
pointer-events: none;
opacity: 1;
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.p-speeddial-opened .p-speeddial-list {
pointer-events: auto;
pointer-events: auto;
}
.p-speeddial-opened .p-speeddial-item {
transform: scale(1);
opacity: 1;
transform: scale(1);
opacity: 1;
}
.p-speeddial-opened .p-speeddial-rotate {
transform: rotate(45deg);
transform: rotate(45deg);
}
// theme
.p-speeddial-button {
&.p-button.p-button-icon-only {
width: $speedDialButtonWidth;
height: $speedDialButtonHeight;
&.p-button.p-button-icon-only {
width: $speedDialButtonWidth;
height: $speedDialButtonHeight;
.p-button-icon {
font-size: $speedDialButtonIconFontSize;
}
.p-icon {
width: $speedDialButtonIconFontSize;
height: $speedDialButtonIconFontSize;
}
.p-button-icon {
font-size: $speedDialButtonIconFontSize;
}
.p-icon {
width: $speedDialButtonIconFontSize;
height: $speedDialButtonIconFontSize;
}
}
}
.p-speeddial-list {
outline: 0 none;
outline: 0 none;
}
.p-speeddial-item {
&.p-focus > .p-speeddial-action {
@include focused();
}
&.p-focus > .p-speeddial-action {
@include focused();
}
}
.p-speeddial-action {
width: $speedDialActionWidth;
height: $speedDialActionHeight;
background: $speedDialActionBg;
color: $speedDialActionTextColor;
outline-color: transparent;
transition: $actionIconTransition;
width: $speedDialActionWidth;
height: $speedDialActionHeight;
background: $speedDialActionBg;
color: $speedDialActionTextColor;
outline-color: transparent;
transition: $actionIconTransition;
&:hover {
background: $speedDialActionHoverBg;
color: $speedDialActionTextHoverColor;
}
&:hover {
background: $speedDialActionHoverBg;
color: $speedDialActionTextHoverColor;
}
}
.p-speeddial-direction-up {
.p-speeddial-item {
margin: math.div($inlineSpacing, 2) 0;
.p-speeddial-item {
margin: math.div($inlineSpacing, 2) 0;
&:first-child {
margin-bottom: $inlineSpacing;
}
&:first-child {
margin-bottom: $inlineSpacing;
}
}
}
.p-speeddial-direction-down {
.p-speeddial-item {
margin: math.div($inlineSpacing, 2) 0;
.p-speeddial-item {
margin: math.div($inlineSpacing, 2) 0;
&:first-child {
margin-top: $inlineSpacing;
}
&:first-child {
margin-top: $inlineSpacing;
}
}
}
.p-speeddial-direction-left {
.p-speeddial-item {
margin: 0 math.div($inlineSpacing, 2);
.p-speeddial-item {
margin: 0 math.div($inlineSpacing, 2);
&:first-child {
margin-right: $inlineSpacing;
}
&:first-child {
margin-right: $inlineSpacing;
}
}
}
.p-speeddial-direction-right {
.p-speeddial-item {
margin: 0 math.div($inlineSpacing, 2);
.p-speeddial-item {
margin: 0 math.div($inlineSpacing, 2);
&:first-child {
margin-left: $inlineSpacing;
}
&:first-child {
margin-left: $inlineSpacing;
}
}
}
.p-speeddial-circle,
.p-speeddial-semi-circle,
.p-speeddial-quarter-circle {
.p-speeddial-item {
margin: 0;
.p-speeddial-item {
margin: 0;
&:first-child,
&:last-child {
margin: 0;
}
&:first-child,
&:last-child {
margin: 0;
}
}
}
.p-speeddial-mask {
background-color: $maskBg;
border-radius: $borderRadius;
}
background-color: $maskBg;
border-radius: $borderRadius;
}

49
frontend/public/primevue-sass-theme/theme-base/components/button/_splitbutton.scss
View File

@ -1,50 +1,51 @@
// core
.p-splitbutton {
display: inline-flex;
position: relative;
display: inline-flex;
position: relative;
}
.p-splitbutton .p-splitbutton-defaultbutton,
.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button,
.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover {
flex: 1 1 auto;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0 none;
.p-splitbutton.p-button-outlined
> .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover {
flex: 1 1 auto;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0 none;
}
.p-splitbutton-menubutton,
.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
display: flex;
align-items: center;
justify-content: center;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
display: flex;
align-items: center;
justify-content: center;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-splitbutton .p-menu {
min-width: 100%;
min-width: 100%;
}
.p-fluid .p-splitbutton {
display: flex;
display: flex;
}
// theme
.p-splitbutton {
border-radius: $borderRadius;
border-radius: $borderRadius;
&.p-button-rounded {
border-radius: $roundedButtonBorderRadius;
&.p-button-rounded {
border-radius: $roundedButtonBorderRadius;
> .p-button {
border-radius: $roundedButtonBorderRadius;
}
> .p-button {
border-radius: $roundedButtonBorderRadius;
}
}
&.p-button-raised {
box-shadow: $raisedButtonShadow;
}
}
&.p-button-raised {
box-shadow: $raisedButtonShadow;
}
}

118
frontend/public/primevue-sass-theme/theme-base/components/data/_carousel.scss
View File

@ -1,109 +1,109 @@
// core
.p-carousel {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}
.p-carousel-content {
display: flex;
flex-direction: column;
overflow: auto;
display: flex;
flex-direction: column;
overflow: auto;
}
.p-carousel-prev,
.p-carousel-next {
align-self: center;
flex-grow: 0;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
align-self: center;
flex-grow: 0;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.p-carousel-container {
display: flex;
flex-direction: row;
display: flex;
flex-direction: row;
}
.p-carousel-items-content {
overflow: hidden;
width: 100%;
overflow: hidden;
width: 100%;
}
.p-carousel-items-container {
display: flex;
flex-direction: row;
display: flex;
flex-direction: row;
}
.p-carousel-indicators {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.p-carousel-indicator > button {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
/* Vertical */
.p-carousel-vertical .p-carousel-container {
flex-direction: column;
flex-direction: column;
}
.p-carousel-vertical .p-carousel-items-container {
flex-direction: column;
height: 100%;
flex-direction: column;
height: 100%;
}
/* Keyboard Support */
.p-items-hidden .p-carousel-item {
visibility: hidden;
visibility: hidden;
}
.p-items-hidden .p-carousel-item.p-carousel-item-active {
visibility: visible;
visibility: visible;
}
// theme
.p-carousel {
.p-carousel-content {
.p-carousel-prev,
.p-carousel-next {
@include action-icon();
margin: $inlineSpacing;
}
.p-carousel-content {
.p-carousel-prev,
.p-carousel-next {
@include action-icon();
margin: $inlineSpacing;
}
}
.p-carousel-indicators {
padding: $carouselIndicatorsPadding;
.p-carousel-indicators {
padding: $carouselIndicatorsPadding;
.p-carousel-indicator {
margin-right: $inlineSpacing;
margin-bottom: $inlineSpacing;
button {
background-color: $carouselIndicatorBg;
width: $carouselIndicatorWidth;
height: $carouselIndicatorHeight;
transition: $actionIconTransition;
border-radius: $carouselIndicatorBorderRadius;
.p-carousel-indicator {
margin-right: $inlineSpacing;
margin-bottom: $inlineSpacing;
&:hover {
background: $carouselIndicatorHoverBg;
}
}
button {
background-color: $carouselIndicatorBg;
width: $carouselIndicatorWidth;
height: $carouselIndicatorHeight;
transition: $actionIconTransition;
border-radius: $carouselIndicatorBorderRadius;
&.p-highlight {
button {
background: $highlightBg;
color: $highlightTextColor;
}
}
&:hover {
background: $carouselIndicatorHoverBg;
}
}
&.p-highlight {
button {
background: $highlightBg;
color: $highlightTextColor;
}
}
}
}
}

828
frontend/public/primevue-sass-theme/theme-base/components/data/_datatable.scss
View File

File diff suppressed because it is too large Load Diff

64
frontend/public/primevue-sass-theme/theme-base/components/data/_dataview.scss
View File

@ -1,38 +1,38 @@
.p-dataview {
.p-paginator-top {
border-width: $tableTopPaginatorBorderWidth;
border-radius: 0;
}
.p-paginator-top {
border-width: $tableTopPaginatorBorderWidth;
border-radius: 0;
}
.p-paginator-bottom {
border-width: $tableBottomPaginatorBorderWidth;
border-radius: 0;
}
.p-paginator-bottom {
border-width: $tableBottomPaginatorBorderWidth;
border-radius: 0;
}
.p-dataview-header {
background: $tableHeaderBg;
color: $tableHeaderTextColor;
border: $tableHeaderBorder;
border-width: $tableHeaderBorderWidth;
padding: $tableHeaderPadding;
font-weight: $tableHeaderFontWeight;
}
.p-dataview-header {
background: $tableHeaderBg;
color: $tableHeaderTextColor;
border: $tableHeaderBorder;
border-width: $tableHeaderBorderWidth;
padding: $tableHeaderPadding;
font-weight: $tableHeaderFontWeight;
}
.p-dataview-content {
background: $tableBodyRowBg;
color: $tableBodyRowTextColor;
border: $dataViewContentBorder;
padding: $dataViewContentPadding;
}
.p-dataview-content {
background: $tableBodyRowBg;
color: $tableBodyRowTextColor;
border: $dataViewContentBorder;
padding: $dataViewContentPadding;
}
.p-dataview-footer {
background: $tableFooterBg;
color: $tableFooterTextColor;
border: $tableFooterBorder;
border-width: $tableFooterBorderWidth;
padding: $tableFooterPadding;
font-weight: $tableFooterFontWeight;
border-bottom-left-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
.p-dataview-footer {
background: $tableFooterBg;
color: $tableFooterTextColor;
border: $tableFooterBorder;
border-width: $tableFooterBorderWidth;
padding: $tableFooterPadding;
font-weight: $tableFooterFontWeight;
border-bottom-left-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
}

229
frontend/public/primevue-sass-theme/theme-base/components/data/_filter.scss
View File

@ -1,148 +1,147 @@
.p-column-filter-row {
.p-column-filter-menu-button,
.p-column-filter-clear-button {
margin-left: $inlineSpacing;
}
.p-column-filter-menu-button,
.p-column-filter-clear-button {
margin-left: $inlineSpacing;
}
}
.p-column-filter-menu-button {
width: $actionIconWidth;
height: $actionIconHeight;
color: $actionIconColor;
border: $actionIconBorder;
background: $actionIconBg;
border-radius: $actionIconBorderRadius;
transition: $actionIconTransition;
outline-color: transparent;
width: $actionIconWidth;
height: $actionIconHeight;
color: $actionIconColor;
border: $actionIconBorder;
background: $actionIconBg;
border-radius: $actionIconBorderRadius;
transition: $actionIconTransition;
outline-color: transparent;
&:hover {
color: $actionIconHoverColor;
border-color: $actionIconHoverBorderColor;
background: $actionIconHoverBg;
}
&:hover {
color: $actionIconHoverColor;
border-color: $actionIconHoverBorderColor;
background: $actionIconHoverBg;
}
&.p-column-filter-menu-button-open,
&.p-column-filter-menu-button-open:hover {
background: $actionIconHoverBg;
color: $actionIconHoverColor;
}
&.p-column-filter-menu-button-open,
&.p-column-filter-menu-button-open:hover {
background: $actionIconHoverBg;
color: $actionIconHoverColor;
}
&.p-column-filter-menu-button-active,
&.p-column-filter-menu-button-active:hover {
background: $highlightBg;
color: $highlightTextColor;
}
&:focus-visible {
@include focused();
}
&.p-column-filter-menu-button-active,
&.p-column-filter-menu-button-active:hover {
background: $highlightBg;
color: $highlightTextColor;
}
&:focus-visible {
@include focused();
}
}
.p-column-filter-clear-button {
width: $actionIconWidth;
height: $actionIconHeight;
color: $actionIconColor;
border: $actionIconBorder;
background: $actionIconBg;
border-radius: $actionIconBorderRadius;
transition: $actionIconTransition;
outline-color: transparent;
width: $actionIconWidth;
height: $actionIconHeight;
color: $actionIconColor;
border: $actionIconBorder;
background: $actionIconBg;
border-radius: $actionIconBorderRadius;
transition: $actionIconTransition;
outline-color: transparent;
&:hover {
color: $actionIconHoverColor;
border-color: $actionIconHoverBorderColor;
background: $actionIconHoverBg;
}
&:hover {
color: $actionIconHoverColor;
border-color: $actionIconHoverBorderColor;
background: $actionIconHoverBg;
}
&:focus-visible {
@include focused();
}
&:focus-visible {
@include focused();
}
}
.p-column-filter-overlay {
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
box-shadow: $inputOverlayShadow;
min-width: $menuWidth;
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
box-shadow: $inputOverlayShadow;
min-width: $menuWidth;
.p-column-filter-row-items {
padding: $inputListPadding;
.p-column-filter-row-items {
padding: $inputListPadding;
.p-column-filter-row-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
.p-column-filter-row-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
&:first-child {
margin-top: 0;
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&:last-child {
margin-bottom: 0;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
}
&:not(.p-highlight):not(.p-disabled):hover {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
&:not(.p-highlight):not(.p-disabled):hover {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
&:focus-visible {
@include focused-listitem();
}
}
.p-column-filter-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
&:focus-visible {
@include focused-listitem();
}
}
.p-column-filter-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
}
}
.p-column-filter-overlay-menu {
.p-column-filter-operator {
padding: $inputListHeaderPadding;
border-bottom: $inputListHeaderBorder;
color: $inputListHeaderTextColor;
background: $inputOverlayHeaderBg;
margin: $inputListHeaderMargin;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
.p-column-filter-operator {
padding: $inputListHeaderPadding;
border-bottom: $inputListHeaderBorder;
color: $inputListHeaderTextColor;
background: $inputOverlayHeaderBg;
margin: $inputListHeaderMargin;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
}
.p-column-filter-constraint {
padding: $panelContentPadding;
border-bottom: $divider;
.p-column-filter-matchmode-dropdown {
margin-bottom: $inlineSpacing;
}
.p-column-filter-constraint {
padding: $panelContentPadding;
border-bottom: $divider;
.p-column-filter-matchmode-dropdown {
margin-bottom: $inlineSpacing;
}
.p-column-filter-remove-button {
margin-top: $inlineSpacing;
}
&:last-child {
border-bottom: 0 none;
}
.p-column-filter-remove-button {
margin-top: $inlineSpacing;
}
.p-column-filter-add-rule {
padding: $panelFooterPadding;
&:last-child {
border-bottom: 0 none;
}
}
.p-column-filter-buttonbar {
padding: $panelContentPadding;
}
}
.p-column-filter-add-rule {
padding: $panelFooterPadding;
}
.p-column-filter-buttonbar {
padding: $panelContentPadding;
}
}

190
frontend/public/primevue-sass-theme/theme-base/components/data/_orderlist.scss
View File

@ -1,130 +1,132 @@
// core
.p-orderlist {
display: flex;
display: flex;
}
.p-orderlist-controls {
display: flex;
flex-direction: column;
justify-content: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.p-orderlist-list-container {
flex: 1 1 auto;
flex: 1 1 auto;
}
.p-orderlist-list {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
min-height: 12rem;
max-height: 24rem;
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
min-height: 12rem;
max-height: 24rem;
}
.p-orderlist-item {
cursor: pointer;
overflow: hidden;
position: relative;
cursor: pointer;
overflow: hidden;
position: relative;
}
.p-orderlist.p-state-disabled .p-orderlist-item,
.p-orderlist.p-state-disabled .p-button {
cursor: default;
cursor: default;
}
.p-orderlist.p-state-disabled .p-orderlist-list {
overflow: hidden;
overflow: hidden;
}
// theme
.p-orderlist {
.p-orderlist-controls {
padding: $panelContentPadding;
.p-orderlist-controls {
padding: $panelContentPadding;
.p-button {
margin-bottom: $inlineSpacing;
}
.p-button {
margin-bottom: $inlineSpacing;
}
}
.p-orderlist-list-container {
background: $panelContentBg;
border: $panelContentBorder;
border-radius: $borderRadius;
transition: $formElementTransition;
outline-color: transparent;
&.p-focus {
@include focused-input();
}
}
.p-orderlist-header {
color: $panelHeaderTextColor;
padding: $panelHeaderPadding;
font-weight: $panelHeaderFontWeight;
}
.p-orderlist-list {
color: $panelContentTextColor;
padding: $inputListPadding;
outline: 0 none;
&:not(:first-child) {
border-top: $panelContentBorder;
}
.p-orderlist-list-container {
background: $panelContentBg;
border: $panelContentBorder;
border-radius: $borderRadius;
transition: $formElementTransition;
outline-color: transparent;
.p-orderlist-item {
padding: $inputListItemPadding;
margin: $inputListItemMargin;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition:
transform $transitionDuration,
$listItemTransition;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&:not(.p-highlight):hover {
background: $inputListItemHoverBg;
color: $inputListItemTextHoverColor;
&.p-focus {
@include focused-input();
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
}
.p-orderlist-header {
color: $panelHeaderTextColor;
padding: $panelHeaderPadding;
font-weight: $panelHeaderFontWeight;
}
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
}
}
&.p-orderlist-striped {
.p-orderlist-list {
color: $panelContentTextColor;
padding: $inputListPadding;
outline: 0 none;
&:not(:first-child) {
border-top: $panelContentBorder;
}
.p-orderlist-item {
padding: $inputListItemPadding;
margin: $inputListItemMargin;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: transform $transitionDuration, $listItemTransition;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&:not(.p-highlight):hover {
background: $inputListItemHoverBg;
color: $inputListItemTextHoverColor;
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
.p-orderlist-item:nth-child(even) {
background: $panelContentEvenRowBg;
&:hover {
background: $inputListItemHoverBg;
}
}
}
&.p-orderlist-striped {
.p-orderlist-list {
.p-orderlist-item:nth-child(even) {
background: $panelContentEvenRowBg;
&:hover {
background: $inputListItemHoverBg;
}
}
}
}
}
}
}

142
frontend/public/primevue-sass-theme/theme-base/components/data/_organizationchart.scss
View File

@ -1,106 +1,106 @@
// core
.p-organizationchart-table {
border-spacing: 0;
border-collapse: separate;
margin: 0 auto;
border-spacing: 0;
border-collapse: separate;
margin: 0 auto;
}
.p-organizationchart-table > tbody > tr > td {
text-align: center;
vertical-align: top;
padding: 0 0.75rem;
text-align: center;
vertical-align: top;
padding: 0 0.75rem;
}
.p-organizationchart-node-content {
display: inline-block;
position: relative;
display: inline-block;
position: relative;
}
.p-organizationchart-node-content .p-node-toggler {
position: absolute;
bottom: -0.75rem;
margin-left: -0.75rem;
z-index: 2;
left: 50%;
user-select: none;
cursor: pointer;
width: 1.5rem;
height: 1.5rem;
text-decoration: none;
position: absolute;
bottom: -0.75rem;
margin-left: -0.75rem;
z-index: 2;
left: 50%;
user-select: none;
cursor: pointer;
width: 1.5rem;
height: 1.5rem;
text-decoration: none;
}
.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
position: relative;
top: 0.25rem;
position: relative;
top: 0.25rem;
}
.p-organizationchart-line-down {
margin: 0 auto;
height: 20px;
width: 1px;
margin: 0 auto;
height: 20px;
width: 1px;
}
.p-organizationchart-line-right {
border-radius: 0px;
border-radius: 0px;
}
.p-organizationchart-line-left {
border-radius: 0;
border-radius: 0;
}
.p-organizationchart-selectable-node {
cursor: pointer;
cursor: pointer;
}
// theme
.p-organizationchart {
.p-organizationchart-node-content {
&.p-organizationchart-selectable-node:not(.p-highlight):hover {
background: $inputListItemHoverBg;
color: $inputListItemTextHoverColor;
}
&.p-highlight {
background: $highlightBg;
color: $highlightTextColor;
.p-node-toggler {
i {
color: darken($highlightBg, 25%);
}
}
.p-organizationchart-node-content {
&.p-organizationchart-selectable-node:not(.p-highlight):hover {
background: $inputListItemHoverBg;
color: $inputListItemTextHoverColor;
}
&.p-highlight {
background: $highlightBg;
color: $highlightTextColor;
.p-node-toggler {
i {
color: darken($highlightBg, 25%);
}
}
}
}
.p-organizationchart-line-down {
background: $organizationChartConnectorColor;
}
.p-organizationchart-line-left {
border-right: $panelContentBorder;
border-color: $organizationChartConnectorColor;
}
.p-organizationchart-line-top {
border-top: $panelContentBorder;
border-color: $organizationChartConnectorColor;
}
.p-organizationchart-node-content {
border: $panelContentBorder;
background: $panelContentBg;
color: $panelContentTextColor;
padding: $panelContentPadding;
}
.p-organizationchart-node-content .p-node-toggler {
background: inherit;
color: inherit;
border-radius: 50%;
outline-color: transparent;
&:focus-visible {
@include focused();
}
.p-organizationchart-line-down {
background: $organizationChartConnectorColor;
}
.p-organizationchart-line-left {
border-right: $panelContentBorder;
border-color: $organizationChartConnectorColor;
}
.p-organizationchart-line-top {
border-top: $panelContentBorder;
border-color: $organizationChartConnectorColor;
}
.p-organizationchart-node-content {
border: $panelContentBorder;
background: $panelContentBg;
color: $panelContentTextColor;
padding: $panelContentPadding;
}
.p-organizationchart-node-content .p-node-toggler {
background: inherit;
color: inherit;
border-radius: 50%;
outline-color: transparent;
&:focus-visible {
@include focused();
}
}
}

196
frontend/public/primevue-sass-theme/theme-base/components/data/_paginator.scss
View File

@ -1,21 +1,21 @@
// core
.p-paginator-default {
display: flex;
display: flex;
}
.p-paginator {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.p-paginator-left-content {
margin-right: auto;
margin-right: auto;
}
.p-paginator-right-content {
margin-left: auto;
margin-left: auto;
}
.p-paginator-page,
@ -24,111 +24,111 @@
.p-paginator-first,
.p-paginator-prev,
.p-paginator-current {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
user-select: none;
overflow: hidden;
position: relative;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
user-select: none;
overflow: hidden;
position: relative;
}
.p-paginator-element:focus {
z-index: 1;
position: relative;
z-index: 1;
position: relative;
}
// theme
.p-paginator {
background: $paginatorBg;
color: $paginatorTextColor;
border: $paginatorBorder;
border-width: $paginatorBorderWidth;
padding: $paginatorPadding;
border-radius: $borderRadius;
background: $paginatorBg;
color: $paginatorTextColor;
border: $paginatorBorder;
border-width: $paginatorBorderWidth;
padding: $paginatorPadding;
border-radius: $borderRadius;
.p-paginator-first,
.p-paginator-prev,
.p-paginator-next,
.p-paginator-last {
background-color: $paginatorElementBg;
border: $paginatorElementBorder;
color: $paginatorElementIconColor;
min-width: $paginatorElementWidth;
height: $paginatorElementHeight;
margin: $paginatorElementMargin;
transition: $listItemTransition;
border-radius: $paginatorElementBorderRadius;
.p-paginator-first,
.p-paginator-prev,
.p-paginator-next,
.p-paginator-last {
background-color: $paginatorElementBg;
border: $paginatorElementBorder;
color: $paginatorElementIconColor;
min-width: $paginatorElementWidth;
height: $paginatorElementHeight;
margin: $paginatorElementMargin;
transition: $listItemTransition;
border-radius: $paginatorElementBorderRadius;
&:not(.p-disabled):not(.p-highlight):hover {
background: $paginatorElementHoverBg;
border-color: $paginatorElementHoverBorderColor;
color: $paginatorElementIconHoverColor;
}
&:not(.p-disabled):not(.p-highlight):hover {
background: $paginatorElementHoverBg;
border-color: $paginatorElementHoverBorderColor;
color: $paginatorElementIconHoverColor;
}
}
.p-paginator-first {
border-top-left-radius: $paginatorElementBorderRadius;
border-bottom-left-radius: $paginatorElementBorderRadius;
.p-paginator-first {
border-top-left-radius: $paginatorElementBorderRadius;
border-bottom-left-radius: $paginatorElementBorderRadius;
}
.p-paginator-last {
border-top-right-radius: $paginatorElementBorderRadius;
border-bottom-right-radius: $paginatorElementBorderRadius;
}
.p-dropdown {
margin-left: $inlineSpacing;
margin-right: $inlineSpacing;
height: $paginatorElementHeight;
.p-dropdown-label {
padding-right: 0;
}
.p-paginator-last {
border-top-right-radius: $paginatorElementBorderRadius;
border-bottom-right-radius: $paginatorElementBorderRadius;
}
.p-paginator-page-input {
margin-left: $inlineSpacing;
margin-right: $inlineSpacing;
.p-inputtext {
max-width: $paginatorElementWidth;
}
}
.p-dropdown {
margin-left: $inlineSpacing;
margin-right: $inlineSpacing;
height: $paginatorElementHeight;
.p-paginator-current {
background-color: $paginatorElementBg;
border: $paginatorElementBorder;
color: $paginatorElementIconColor;
min-width: $paginatorElementWidth;
height: $paginatorElementHeight;
margin: $paginatorElementMargin;
padding: 0 $inlineSpacing;
}
.p-dropdown-label {
padding-right: 0;
}
}
.p-paginator-page-input {
margin-left: $inlineSpacing;
margin-right: $inlineSpacing;
.p-inputtext {
max-width: $paginatorElementWidth;
}
}
.p-paginator-current {
background-color: $paginatorElementBg;
border: $paginatorElementBorder;
color: $paginatorElementIconColor;
min-width: $paginatorElementWidth;
height: $paginatorElementHeight;
margin: $paginatorElementMargin;
padding: 0 $inlineSpacing;
}
.p-paginator-pages {
.p-paginator-page {
background-color: $paginatorElementBg;
border: $paginatorElementBorder;
color: $paginatorElementIconColor;
min-width: $paginatorElementWidth;
height: $paginatorElementHeight;
margin: $paginatorElementMargin;
transition: $listItemTransition;
border-radius: $paginatorElementBorderRadius;
&.p-highlight {
background: $highlightBg;
border-color: $highlightBg;
color: $highlightTextColor;
}
&:not(.p-highlight):hover {
background: $paginatorElementHoverBg;
border-color: $paginatorElementHoverBorderColor;
color: $paginatorElementIconHoverColor;
}
}
.p-paginator-pages {
.p-paginator-page {
background-color: $paginatorElementBg;
border: $paginatorElementBorder;
color: $paginatorElementIconColor;
min-width: $paginatorElementWidth;
height: $paginatorElementHeight;
margin: $paginatorElementMargin;
transition: $listItemTransition;
border-radius: $paginatorElementBorderRadius;
&.p-highlight {
background: $highlightBg;
border-color: $highlightBg;
color: $highlightTextColor;
}
&:not(.p-highlight):hover {
background: $paginatorElementHoverBg;
border-color: $paginatorElementHoverBorderColor;
color: $paginatorElementIconHoverColor;
}
}
}
}

186
frontend/public/primevue-sass-theme/theme-base/components/data/_picklist.scss
View File

@ -1,126 +1,128 @@
// core
.p-picklist {
display: flex;
display: flex;
}
.p-picklist-buttons {
display: flex;
flex-direction: column;
justify-content: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.p-picklist-list-wrapper {
flex: 1 1 50%;
flex: 1 1 50%;
}
.p-picklist-list {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
min-height: 12rem;
max-height: 24rem;
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
min-height: 12rem;
max-height: 24rem;
}
.p-picklist-item {
cursor: pointer;
overflow: hidden;
position: relative;
cursor: pointer;
overflow: hidden;
position: relative;
}
.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,
.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {
transition: none;
transition: none;
}
// theme
.p-picklist {
.p-picklist-buttons {
padding: $panelContentPadding;
.p-picklist-buttons {
padding: $panelContentPadding;
.p-button {
margin-bottom: $inlineSpacing;
}
.p-button {
margin-bottom: $inlineSpacing;
}
}
.p-picklist-list-wrapper {
background: $panelContentBg;
border: $panelContentBorder;
border-radius: $borderRadius;
transition: $formElementTransition;
outline-color: transparent;
&.p-focus {
@include focused-input();
}
}
.p-picklist-header {
color: $panelHeaderTextColor;
padding: $panelHeaderPadding;
font-weight: $panelHeaderFontWeight;
}
.p-picklist-list {
color: $panelContentTextColor;
padding: $inputListPadding;
outline: 0 none;
&:not(:first-child) {
border-top: $panelContentBorder;
}
.p-picklist-list-wrapper {
background: $panelContentBg;
border: $panelContentBorder;
border-radius: $borderRadius;
transition: $formElementTransition;
outline-color: transparent;
.p-picklist-item {
padding: $inputListItemPadding;
margin: $inputListItemMargin;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition:
transform $transitionDuration,
$listItemTransition;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&:not(.p-highlight):hover {
background: $inputListItemHoverBg;
color: $inputListItemTextHoverColor;
&.p-focus {
@include focused-input();
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
}
.p-picklist-header {
color: $panelHeaderTextColor;
padding: $panelHeaderPadding;
font-weight: $panelHeaderFontWeight;
}
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
}
}
&.p-picklist-striped {
.p-picklist-list {
color: $panelContentTextColor;
padding: $inputListPadding;
outline: 0 none;
.p-picklist-item:nth-child(even) {
background: $panelContentEvenRowBg;
&:not(:first-child) {
border-top: $panelContentBorder;
}
.p-picklist-item {
padding: $inputListItemPadding;
margin: $inputListItemMargin;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: transform $transitionDuration, $listItemTransition;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&:not(.p-highlight):hover {
background: $inputListItemHoverBg;
color: $inputListItemTextHoverColor;
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
&:hover {
background: $inputListItemHoverBg;
}
}
}
&.p-picklist-striped {
.p-picklist-list {
.p-picklist-item:nth-child(even) {
background: $panelContentEvenRowBg;
&:hover {
background: $inputListItemHoverBg;
}
}
}
}
}
}
}

145
frontend/public/primevue-sass-theme/theme-base/components/data/_timeline.scss
View File

@ -1,151 +1,156 @@
// core
.p-timeline {
display: flex;
flex-grow: 1;
flex-direction: column;
display: flex;
flex-grow: 1;
flex-direction: column;
}
.p-timeline-left .p-timeline-event-opposite {
text-align: right;
text-align: right;
}
.p-timeline-left .p-timeline-event-content {
text-align: left;
text-align: left;
}
.p-timeline-right .p-timeline-event {
flex-direction: row-reverse;
flex-direction: row-reverse;
}
.p-timeline-right .p-timeline-event-opposite {
text-align: left;
text-align: left;
}
.p-timeline-right .p-timeline-event-content {
text-align: right;
text-align: right;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
flex-direction: row-reverse;
flex-direction: row-reverse;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
text-align: right;
.p-timeline-vertical.p-timeline-alternate
.p-timeline-event:nth-child(odd)
.p-timeline-event-opposite {
text-align: right;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
text-align: left;
.p-timeline-vertical.p-timeline-alternate
.p-timeline-event:nth-child(odd)
.p-timeline-event-content {
text-align: left;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
text-align: left;
.p-timeline-vertical.p-timeline-alternate
.p-timeline-event:nth-child(even)
.p-timeline-event-opposite {
text-align: left;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
text-align: right;
.p-timeline-vertical.p-timeline-alternate
.p-timeline-event:nth-child(even)
.p-timeline-event-content {
text-align: right;
}
.p-timeline-event {
display: flex;
position: relative;
min-height: 70px;
display: flex;
position: relative;
min-height: 70px;
}
.p-timeline-event:last-child {
min-height: 0;
min-height: 0;
}
.p-timeline-event-opposite {
flex: 1;
padding: 0 1rem;
flex: 1;
padding: 0 1rem;
}
.p-timeline-event-content {
flex: 1;
padding: 0 1rem;
flex: 1;
padding: 0 1rem;
}
.p-timeline-event-separator {
flex: 0;
display: flex;
align-items: center;
flex-direction: column;
flex: 0;
display: flex;
align-items: center;
flex-direction: column;
}
.p-timeline-event-marker {
display: flex;
align-self: baseline;
display: flex;
align-self: baseline;
}
.p-timeline-event-connector {
flex-grow: 1;
flex-grow: 1;
}
.p-timeline-horizontal {
flex-direction: row;
flex-direction: row;
}
.p-timeline-horizontal .p-timeline-event {
flex-direction: column;
flex: 1;
flex-direction: column;
flex: 1;
}
.p-timeline-horizontal .p-timeline-event:last-child {
flex: 0;
flex: 0;
}
.p-timeline-horizontal .p-timeline-event-separator {
flex-direction: row;
flex-direction: row;
}
.p-timeline-horizontal .p-timeline-event-connector {
width: 100%;
width: 100%;
}
.p-timeline-bottom .p-timeline-event {
flex-direction: column-reverse;
flex-direction: column-reverse;
}
.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
flex-direction: column-reverse;
flex-direction: column-reverse;
}
// theme
.p-timeline {
.p-timeline-event-marker {
border: $timelineEventMarkerBorder;
border-radius: $timelineEventMarkerBorderRadius;
width: $timelineEventMarkerWidth;
height: $timelineEventMarkerHeight;
background-color: $timelineEventMarkerBackground;
.p-timeline-event-marker {
border: $timelineEventMarkerBorder;
border-radius: $timelineEventMarkerBorderRadius;
width: $timelineEventMarkerWidth;
height: $timelineEventMarkerHeight;
background-color: $timelineEventMarkerBackground;
}
.p-timeline-event-connector {
background-color: $timelineEventColor;
}
&.p-timeline-vertical {
.p-timeline-event-opposite,
.p-timeline-event-content {
padding: $timelineVerticalEventContentPadding;
}
.p-timeline-event-connector {
background-color: $timelineEventColor;
width: $timelineEventConnectorSize;
}
}
&.p-timeline-horizontal {
.p-timeline-event-opposite,
.p-timeline-event-content {
padding: $timelineHorizontalEventContentPadding;
}
&.p-timeline-vertical {
.p-timeline-event-opposite,
.p-timeline-event-content {
padding: $timelineVerticalEventContentPadding;
}
.p-timeline-event-connector {
width: $timelineEventConnectorSize;
}
}
&.p-timeline-horizontal {
.p-timeline-event-opposite,
.p-timeline-event-content {
padding: $timelineHorizontalEventContentPadding;
}
.p-timeline-event-connector {
height: $timelineEventConnectorSize;
}
.p-timeline-event-connector {
height: $timelineEventConnectorSize;
}
}
}

224
frontend/public/primevue-sass-theme/theme-base/components/data/_tree.scss
View File

@ -1,174 +1,174 @@
// core
.p-tree-container {
margin: 0;
padding: 0;
list-style-type: none;
overflow: auto;
margin: 0;
padding: 0;
list-style-type: none;
overflow: auto;
}
.p-treenode-children {
margin: 0;
padding: 0;
list-style-type: none;
margin: 0;
padding: 0;
list-style-type: none;
}
.p-tree-wrapper {
overflow: auto;
overflow: auto;
}
.p-treenode-selectable {
cursor: pointer;
user-select: none;
cursor: pointer;
user-select: none;
}
.p-tree-toggler {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
flex-shrink: 0;
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
visibility: hidden;
visibility: hidden;
}
.p-treenode-content {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.p-tree-filter {
width: 100%;
width: 100%;
}
.p-tree-filter-container {
position: relative;
display: block;
width: 100%;
position: relative;
display: block;
width: 100%;
}
.p-tree-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-tree-loading {
position: relative;
min-height: 4rem;
position: relative;
min-height: 4rem;
}
.p-tree .p-tree-loading-overlay {
position: absolute;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.p-tree-flex-scrollable {
display: flex;
flex: 1;
height: 100%;
flex-direction: column;
display: flex;
flex: 1;
height: 100%;
flex-direction: column;
}
.p-tree-flex-scrollable .p-tree-wrapper {
flex: 1;
flex: 1;
}
// theme
.p-tree {
border: $panelContentBorder;
background: $panelContentBg;
color: $panelContentTextColor;
padding: $panelContentPadding;
border-radius: $borderRadius;
border: $panelContentBorder;
background: $panelContentBg;
color: $panelContentTextColor;
padding: $panelContentPadding;
border-radius: $borderRadius;
.p-tree-container {
.p-treenode {
padding: $treeNodePadding;
outline: 0 none;
.p-tree-container {
.p-treenode {
padding: $treeNodePadding;
outline: 0 none;
&:focus > .p-treenode-content {
@include focused-listitem();
&:focus > .p-treenode-content {
@include focused-listitem();
}
.p-treenode-content {
border-radius: $borderRadius;
transition: $listItemTransition;
padding: $treeNodeContentPadding;
.p-tree-toggler {
margin-right: $inlineSpacing;
@include action-icon();
}
.p-treenode-icon {
margin-right: $inlineSpacing;
color: $treeNodeIconColor;
}
.p-checkbox {
margin-right: $inlineSpacing;
&.p-indeterminate {
.p-checkbox-icon {
color: $textColor;
}
}
}
.p-treenode-content {
border-radius: $borderRadius;
transition: $listItemTransition;
padding: $treeNodeContentPadding;
&.p-highlight {
background: $highlightBg;
color: $highlightTextColor;
.p-tree-toggler {
margin-right: $inlineSpacing;
@include action-icon();
}
.p-tree-toggler,
.p-treenode-icon {
color: $highlightTextColor;
.p-treenode-icon {
margin-right: $inlineSpacing;
color: $treeNodeIconColor;
}
.p-checkbox {
margin-right: $inlineSpacing;
&.p-indeterminate {
.p-checkbox-icon {
color: $textColor;
}
}
}
&.p-highlight {
background: $highlightBg;
color: $highlightTextColor;
.p-tree-toggler,
.p-treenode-icon {
color: $highlightTextColor;
&:hover {
color: $highlightTextColor;
}
}
}
&.p-treenode-selectable:not(.p-highlight):hover {
background: $inputListItemHoverBg;
color: $inputListItemTextHoverColor;
}
&:hover {
color: $highlightTextColor;
}
}
}
.p-tree-filter-container {
margin-bottom: $inlineSpacing;
.p-tree-filter {
width: 100%;
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
}
}
.p-tree-filter-icon {
right: nth($inputPadding, 2);
color: $inputIconColor;
&.p-treenode-selectable:not(.p-highlight):hover {
background: $inputListItemHoverBg;
color: $inputListItemTextHoverColor;
}
}
}
}
.p-tree-filter-container {
margin-bottom: $inlineSpacing;
.p-tree-filter {
width: 100%;
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
}
.p-treenode-children {
padding: $treeNodeChildrenPadding;
.p-tree-filter-icon {
right: nth($inputPadding, 2);
color: $inputIconColor;
}
}
.p-tree-loading-icon {
font-size: $loadingIconFontSize;
.p-treenode-children {
padding: $treeNodeChildrenPadding;
}
&.p-icon {
width: $loadingIconFontSize;
height: $loadingIconFontSize;
}
.p-tree-loading-icon {
font-size: $loadingIconFontSize;
&.p-icon {
width: $loadingIconFontSize;
height: $loadingIconFontSize;
}
}
}

576
frontend/public/primevue-sass-theme/theme-base/components/data/_treetable.scss
View File

@ -1,422 +1,428 @@
// core
.p-treetable {
position: relative;
position: relative;
}
.p-treetable table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
.p-treetable .p-sortable-column {
cursor: pointer;
user-select: none;
cursor: pointer;
user-select: none;
}
.p-treetable-responsive-scroll > .p-treetable-wrapper {
overflow-x: auto;
overflow-x: auto;
}
.p-treetable-responsive-scroll > .p-treetable-wrapper > table,
.p-treetable-auto-layout > .p-treetable-wrapper > table {
table-layout: auto;
table-layout: auto;
}
.p-treetable-hoverable-rows .p-treetable-tbody > tr {
cursor: pointer;
cursor: pointer;
}
.p-treetable-toggler {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
overflow: hidden;
position: relative;
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
overflow: hidden;
position: relative;
}
.p-treetable-toggler + .p-checkbox {
vertical-align: middle;
vertical-align: middle;
}
.p-treetable-toggler + .p-checkbox + span {
vertical-align: middle;
vertical-align: middle;
}
/* Resizable */
.p-treetable-resizable > .p-treetable-wrapper {
overflow-x: auto;
overflow-x: auto;
}
.p-treetable-resizable .p-treetable-thead > tr > th,
.p-treetable-resizable .p-treetable-tfoot > tr > td,
.p-treetable-resizable .p-treetable-tbody > tr > td {
overflow: hidden;
overflow: hidden;
}
.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {
background-clip: padding-box;
position: relative;
background-clip: padding-box;
position: relative;
}
.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
display: none;
display: none;
}
.p-treetable .p-column-resizer {
display: block;
position: absolute;
top: 0;
right: 0;
margin: 0;
width: 0.5rem;
height: 100%;
padding: 0px;
cursor: col-resize;
border: 1px solid transparent;
display: block;
position: absolute;
top: 0;
right: 0;
margin: 0;
width: 0.5rem;
height: 100%;
padding: 0px;
cursor: col-resize;
border: 1px solid transparent;
}
.p-treetable .p-column-resizer-helper {
width: 1px;
position: absolute;
z-index: 10;
display: none;
width: 1px;
position: absolute;
z-index: 10;
display: none;
}
.p-treetable .p-treetable-loading-overlay {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* Scrollable */
.p-treetable-scrollable .p-treetable-wrapper {
position: relative;
overflow: auto;
position: relative;
overflow: auto;
}
.p-treetable-scrollable .p-treetable-table {
display: block;
display: block;
}
.p-treetable-scrollable .p-treetable-thead,
.p-treetable-scrollable .p-treetable-tbody,
.p-treetable-scrollable .p-treetable-tfoot {
display: block;
display: block;
}
.p-treetable-scrollable .p-treetable-thead > tr,
.p-treetable-scrollable .p-treetable-tbody > tr,
.p-treetable-scrollable .p-treetable-tfoot > tr {
display: flex;
flex-wrap: nowrap;
width: 100%;
display: flex;
flex-wrap: nowrap;
width: 100%;
}
.p-treetable-scrollable .p-treetable-thead > tr > th,
.p-treetable-scrollable .p-treetable-tbody > tr > td,
.p-treetable-scrollable .p-treetable-tfoot > tr > td {
display: flex;
flex: 1 1 0;
align-items: center;
display: flex;
flex: 1 1 0;
align-items: center;
}
.p-treetable-scrollable .p-treetable-thead {
position: sticky;
top: 0;
z-index: 1;
position: sticky;
top: 0;
z-index: 1;
}
.p-treetable-scrollable .p-treetable-tfoot {
position: sticky;
bottom: 0;
z-index: 1;
position: sticky;
bottom: 0;
z-index: 1;
}
.p-treetable-scrollable .p-frozen-column {
position: sticky;
background: inherit;
position: sticky;
background: inherit;
}
.p-treetable-scrollable th.p-frozen-column {
z-index: 1;
z-index: 1;
}
.p-treetable-scrollable-both .p-treetable-thead > tr > th,
.p-treetable-scrollable-both .p-treetable-tbody > tr > td,
.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
.p-treetable-scrollable-horizontal
.p-treetable-thead
> tr
> th
.p-treetable-scrollable-horizontal
.p-treetable-tbody
> tr
> td,
.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
flex: 0 0 auto;
flex: 0 0 auto;
}
.p-treetable-flex-scrollable {
display: flex;
flex-direction: column;
height: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
.p-treetable-flex-scrollable .p-treetable-wrapper {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
// theme
.p-treetable {
.p-paginator-top {
border-width: $tableTopPaginatorBorderWidth;
border-radius: 0;
.p-paginator-top {
border-width: $tableTopPaginatorBorderWidth;
border-radius: 0;
}
.p-paginator-bottom {
border-width: $tableBottomPaginatorBorderWidth;
border-radius: 0;
}
.p-treetable-header {
background: $tableHeaderBg;
color: $tableHeaderTextColor;
border: $tableHeaderBorder;
border-width: $tableHeaderBorderWidth;
padding: $tableHeaderPadding;
font-weight: $tableHeaderFontWeight;
}
.p-treetable-footer {
background: $tableFooterBg;
color: $tableFooterTextColor;
border: $tableFooterBorder;
border-width: $tableFooterBorderWidth;
padding: $tableFooterPadding;
font-weight: $tableFooterFontWeight;
}
.p-treetable-thead > tr > th {
text-align: $tableCellContentAlignment;
padding: $tableHeaderCellPadding;
border: $tableHeaderCellBorder;
border-width: $tableHeaderCellBorderWidth;
font-weight: $tableHeaderCellFontWeight;
color: $tableHeaderCellTextColor;
background: $tableHeaderCellBg;
transition: $listItemTransition;
}
.p-treetable-tfoot > tr > td {
text-align: $tableCellContentAlignment;
padding: $tableFooterCellPadding;
border: $tableFooterCellBorder;
border-width: $tableFooterCellBorderWidth;
font-weight: $tableFooterCellFontWeight;
color: $tableFooterCellTextColor;
background: $tableFooterCellBg;
}
.p-sortable-column {
outline-color: $focusOutlineColor;
.p-sortable-column-icon {
color: $tableHeaderCellIconColor;
margin-left: $inlineSpacing;
}
.p-paginator-bottom {
border-width: $tableBottomPaginatorBorderWidth;
border-radius: 0;
.p-sortable-column-badge {
border-radius: 50%;
height: $tableSortableColumnBadgeSize;
min-width: $tableSortableColumnBadgeSize;
line-height: $tableSortableColumnBadgeSize;
color: $highlightTextColor;
background: $highlightBg;
margin-left: $inlineSpacing;
}
.p-treetable-header {
background: $tableHeaderBg;
color: $tableHeaderTextColor;
border: $tableHeaderBorder;
border-width: $tableHeaderBorderWidth;
padding: $tableHeaderPadding;
font-weight: $tableHeaderFontWeight;
&:not(.p-highlight):hover {
background: $tableHeaderCellHoverBg;
color: $tableHeaderCellTextHoverColor;
.p-sortable-column-icon {
color: $tableHeaderCellIconHoverColor;
}
}
&.p-highlight {
background: $tableHeaderCellHighlightBg;
color: $tableHeaderCellHighlightTextColor;
.p-sortable-column-icon {
color: $tableHeaderCellHighlightTextColor;
}
}
}
.p-treetable-tbody {
> tr {
background: $tableBodyRowBg;
color: $tableBodyRowTextColor;
transition: $listItemTransition;
> td {
text-align: $tableCellContentAlignment;
border: $tableBodyCellBorder;
border-width: $tableBodyCellBorderWidth;
padding: $tableBodyCellPadding;
.p-treetable-toggler {
@include action-icon();
margin-right: $inlineSpacing;
& + .p-checkbox {
margin-right: $inlineSpacing;
&.p-indeterminate {
.p-checkbox-icon {
color: $textColor;
}
}
}
}
}
&:focus-visible {
outline: 0.15rem solid $focusOutlineColor;
outline-offset: -0.15rem;
}
&.p-highlight {
background: $highlightBg;
color: $highlightTextColor;
.p-treetable-toggler {
color: $highlightTextColor;
&:hover {
color: $highlightTextColor;
}
}
}
}
}
&.p-treetable-hoverable-rows {
.p-treetable-tbody > tr:not(.p-highlight):hover {
background: $tableBodyRowHoverBg;
color: $tableBodyRowTextHoverColor;
.p-treetable-toggler {
color: $tableBodyRowTextHoverColor;
}
}
}
.p-column-resizer-helper {
background: $tableResizerHelperBg;
}
.p-treetable-scrollable-header,
.p-treetable-scrollable-footer {
background: $panelHeaderBg;
}
.p-treetable-loading-icon {
font-size: $loadingIconFontSize;
&.p-icon {
width: $loadingIconFontSize;
height: $loadingIconFontSize;
}
}
&.p-treetable-gridlines {
.p-datatable-header {
border-width: 1px 1px 0 1px;
}
.p-treetable-footer {
background: $tableFooterBg;
color: $tableFooterTextColor;
border: $tableFooterBorder;
border-width: $tableFooterBorderWidth;
padding: $tableFooterPadding;
font-weight: $tableFooterFontWeight;
border-width: 0 1px 1px 1px;
}
.p-treetable-thead > tr > th {
text-align: $tableCellContentAlignment;
padding: $tableHeaderCellPadding;
border: $tableHeaderCellBorder;
border-width: $tableHeaderCellBorderWidth;
font-weight: $tableHeaderCellFontWeight;
color: $tableHeaderCellTextColor;
background: $tableHeaderCellBg;
transition: $listItemTransition;
.p-treetable-top {
border-width: 0 1px 0 1px;
}
.p-treetable-tfoot > tr > td {
text-align: $tableCellContentAlignment;
padding: $tableFooterCellPadding;
border: $tableFooterCellBorder;
border-width: $tableFooterCellBorderWidth;
font-weight: $tableFooterCellFontWeight;
color: $tableFooterCellTextColor;
background: $tableFooterCellBg;
.p-treetable-bottom {
border-width: 0 1px 1px 1px;
}
.p-sortable-column {
outline-color: $focusOutlineColor;
.p-sortable-column-icon {
color: $tableHeaderCellIconColor;
margin-left: $inlineSpacing;
}
.p-sortable-column-badge {
border-radius: 50%;
height: $tableSortableColumnBadgeSize;
min-width: $tableSortableColumnBadgeSize;
line-height: $tableSortableColumnBadgeSize;
color: $highlightTextColor;
background: $highlightBg;
margin-left: $inlineSpacing;
}
&:not(.p-highlight):hover {
background: $tableHeaderCellHoverBg;
color: $tableHeaderCellTextHoverColor;
.p-sortable-column-icon {
color: $tableHeaderCellIconHoverColor;
}
}
&.p-highlight {
background: $tableHeaderCellHighlightBg;
color: $tableHeaderCellHighlightTextColor;
.p-sortable-column-icon {
color: $tableHeaderCellHighlightTextColor;
}
.p-treetable-thead {
> tr {
> th {
border-width: 1px;
}
}
}
.p-treetable-tbody {
> tr {
background: $tableBodyRowBg;
color: $tableBodyRowTextColor;
transition: $listItemTransition;
> td {
text-align: $tableCellContentAlignment;
border: $tableBodyCellBorder;
border-width: $tableBodyCellBorderWidth;
padding: $tableBodyCellPadding;
.p-treetable-toggler {
@include action-icon();
margin-right: $inlineSpacing;
& + .p-checkbox {
margin-right: $inlineSpacing;
&.p-indeterminate {
.p-checkbox-icon {
color: $textColor;
}
}
}
}
}
&:focus-visible {
outline: 0.15rem solid $focusOutlineColor;
outline-offset: -0.15rem;
}
&.p-highlight {
background: $highlightBg;
color: $highlightTextColor;
.p-treetable-toggler {
color: $highlightTextColor;
&:hover {
color: $highlightTextColor;
}
}
}
> tr {
> td {
border-width: 1px;
}
}
}
&.p-treetable-hoverable-rows {
.p-treetable-tbody > tr:not(.p-highlight):hover {
background: $tableBodyRowHoverBg;
color: $tableBodyRowTextHoverColor;
.p-treetable-toggler {
color: $tableBodyRowTextHoverColor;
}
.p-treetable-tfoot {
> tr {
> td {
border-width: 1px;
}
}
}
}
&.p-treetable-sm {
.p-treetable-header {
@include scaledPadding($tableHeaderPadding, $scaleSM);
}
.p-column-resizer-helper {
background: $tableResizerHelperBg;
.p-treetable-thead > tr > th {
@include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
}
.p-treetable-scrollable-header,
.p-treetable-scrollable-footer {
background: $panelHeaderBg;
.p-treetable-tbody > tr > td {
@include scaledPadding($tableBodyCellPadding, $tableScaleSM);
}
.p-treetable-loading-icon {
font-size: $loadingIconFontSize;
&.p-icon {
width: $loadingIconFontSize;
height: $loadingIconFontSize;
}
.p-treetable-tfoot > tr > td {
@include scaledPadding($tableFooterPadding, $tableScaleSM);
}
&.p-treetable-gridlines {
.p-datatable-header {
border-width: 1px 1px 0 1px;
}
.p-treetable-footer {
@include scaledPadding($tableFooterPadding, $tableScaleSM);
}
}
.p-treetable-footer {
border-width: 0 1px 1px 1px;
}
.p-treetable-top {
border-width: 0 1px 0 1px;
}
.p-treetable-bottom {
border-width: 0 1px 1px 1px;
}
.p-treetable-thead {
> tr {
> th {
border-width: 1px;
}
}
}
.p-treetable-tbody {
> tr {
> td {
border-width: 1px;
}
}
}
.p-treetable-tfoot {
> tr {
> td {
border-width: 1px;
}
}
}
&.p-treetable-lg {
.p-treetable-header {
@include scaledPadding($tableHeaderPadding, $tableScaleLG);
}
&.p-treetable-sm {
.p-treetable-header {
@include scaledPadding($tableHeaderPadding, $scaleSM);
}
.p-treetable-thead > tr > th {
@include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
}
.p-treetable-tbody > tr > td {
@include scaledPadding($tableBodyCellPadding, $tableScaleSM);
}
.p-treetable-tfoot > tr > td {
@include scaledPadding($tableFooterPadding, $tableScaleSM);
}
.p-treetable-footer {
@include scaledPadding($tableFooterPadding, $tableScaleSM);
}
.p-treetable-thead > tr > th {
@include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
}
&.p-treetable-lg {
.p-treetable-header {
@include scaledPadding($tableHeaderPadding, $tableScaleLG);
}
.p-treetable-thead > tr > th {
@include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
}
.p-treetable-tbody > tr > td {
@include scaledPadding($tableBodyCellPadding, $tableScaleLG);
}
.p-treetable-tfoot > tr > td {
@include scaledPadding($tableFooterPadding, $tableScaleLG);
}
.p-treetable-footer {
@include scaledPadding($tableFooterPadding, $tableScaleLG);
}
.p-treetable-tbody > tr > td {
@include scaledPadding($tableBodyCellPadding, $tableScaleLG);
}
.p-treetable-tfoot > tr > td {
@include scaledPadding($tableFooterPadding, $tableScaleLG);
}
.p-treetable-footer {
@include scaledPadding($tableFooterPadding, $tableScaleLG);
}
}
}

160
frontend/public/primevue-sass-theme/theme-base/components/file/_fileupload.scss
View File

@ -1,128 +1,128 @@
// core
.p-fileupload-content {
position: relative;
position: relative;
}
.p-fileupload-content .p-progressbar {
width: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.p-button.p-fileupload-choose {
position: relative;
overflow: hidden;
position: relative;
overflow: hidden;
}
.p-fileupload-buttonbar {
display: flex;
flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
.p-fileupload > input[type='file'],
.p-fileupload-basic input[type='file'] {
display: none;
.p-fileupload > input[type="file"],
.p-fileupload-basic input[type="file"] {
display: none;
}
.p-fluid .p-fileupload .p-button {
width: auto;
width: auto;
}
.p-fileupload-file {
display: flex;
flex-wrap: wrap;
align-items: center;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.p-fileupload-file-thumbnail {
flex-shrink: 0;
flex-shrink: 0;
}
.p-fileupload-file-actions {
margin-left: auto;
margin-left: auto;
}
// theme
.p-fileupload {
.p-fileupload-buttonbar {
background: $panelHeaderBg;
padding: $panelHeaderPadding;
border: $panelHeaderBorder;
color: $panelHeaderTextColor;
border-bottom: 0 none;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
gap: $inlineSpacing;
.p-fileupload-buttonbar {
background: $panelHeaderBg;
padding: $panelHeaderPadding;
border: $panelHeaderBorder;
color: $panelHeaderTextColor;
border-bottom: 0 none;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
gap: $inlineSpacing;
.p-button {
&.p-fileupload-choose.p-focus {
@include focused();
}
}
.p-button {
&.p-fileupload-choose.p-focus {
@include focused();
}
}
}
.p-fileupload-content {
background: $panelContentBg;
padding: $fileUploadContentPadding;
border: $panelContentBorder;
color: $panelContentTextColor;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
.p-fileupload-content {
background: $panelContentBg;
padding: $fileUploadContentPadding;
border: $panelContentBorder;
color: $panelContentTextColor;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
&.p-fileupload-highlight {
border: $fileUploadContentHoverBorder;
background-color: $highlightBg;
}
&.p-fileupload-highlight {
border: $fileUploadContentHoverBorder;
background-color: $highlightBg;
}
}
.p-fileupload-file {
padding: $fileUploadFilePadding;
border: $fileUploadFileBorder;
border-radius: $borderRadius;
gap: $inlineSpacing;
margin-bottom: $inlineSpacing;
.p-fileupload-file {
padding: $fileUploadFilePadding;
border: $fileUploadFileBorder;
border-radius: $borderRadius;
gap: $inlineSpacing;
margin-bottom: $inlineSpacing;
&:last-child {
margin-bottom: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.p-fileupload-file-name {
margin-bottom: $inlineSpacing;
}
.p-fileupload-file-name {
margin-bottom: $inlineSpacing;
}
.p-fileupload-file-size {
margin-right: $inlineSpacing;
}
.p-fileupload-file-size {
margin-right: $inlineSpacing;
}
.p-progressbar {
height: $fileUploadProgressBarHeight;
}
.p-progressbar {
height: $fileUploadProgressBarHeight;
}
.p-fileupload-row {
>div {
padding: $tableBodyCellPadding;
}
.p-fileupload-row {
> div {
padding: $tableBodyCellPadding;
}
}
&.p-fileupload-advanced {
.p-message {
margin-top: 0;
}
&.p-fileupload-advanced {
.p-message {
margin-top: 0;
}
}
}
.p-fileupload-choose {
&:not(.p-disabled):hover {
background: $buttonHoverBg;
color: $buttonTextHoverColor;
border-color: $buttonHoverBorderColor;
}
&:not(.p-disabled):hover {
background: $buttonHoverBg;
color: $buttonTextHoverColor;
border-color: $buttonHoverBorderColor;
}
&:not(.p-disabled):active {
background: $buttonActiveBg;
color: $buttonTextActiveColor;
border-color: $buttonActiveBorderColor;
}
}
&:not(.p-disabled):active {
background: $buttonActiveBg;
color: $buttonTextActiveColor;
border-color: $buttonActiveBorderColor;
}
}

274
frontend/public/primevue-sass-theme/theme-base/components/input/_autocomplete.scss
View File

@ -2,215 +2,215 @@
// core
.p-autocomplete {
display: inline-flex;
display: inline-flex;
}
.p-autocomplete-loader {
position: absolute;
top: 50%;
margin-top: -0.5rem;
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-autocomplete-dd .p-autocomplete-input {
flex: 1 1 auto;
width: 1%;
flex: 1 1 auto;
width: 1%;
}
.p-autocomplete-dd .p-autocomplete-input,
.p-autocomplete-dd .p-autocomplete-multiple-container {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-autocomplete-dd .p-autocomplete-dropdown {
border-top-left-radius: 0;
border-bottom-left-radius: 0px;
border-top-left-radius: 0;
border-bottom-left-radius: 0px;
}
.p-autocomplete .p-autocomplete-panel {
min-width: 100%;
min-width: 100%;
}
.p-autocomplete-panel {
position: absolute;
overflow: auto;
top: 0;
left: 0;
position: absolute;
overflow: auto;
top: 0;
left: 0;
}
.p-autocomplete-items {
margin: 0;
padding: 0;
list-style-type: none;
margin: 0;
padding: 0;
list-style-type: none;
}
.p-autocomplete-item {
cursor: pointer;
white-space: nowrap;
position: relative;
overflow: hidden;
cursor: pointer;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.p-autocomplete-multiple-container {
margin: 0;
padding: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-autocomplete-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-autocomplete-token-icon {
cursor: pointer;
cursor: pointer;
}
.p-autocomplete-input-token {
flex: 1 1 auto;
display: inline-flex;
flex: 1 1 auto;
display: inline-flex;
}
.p-autocomplete-input-token input {
border: 0 none;
outline: 0 none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
border: 0 none;
outline: 0 none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
}
.p-fluid .p-autocomplete {
display: flex;
display: flex;
}
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
width: 1%;
width: 1%;
}
// theme
.p-autocomplete {
.p-autocomplete-loader {
right: nth($inputPadding, 2);
}
&.p-autocomplete-dd {
.p-autocomplete-loader {
right: nth($inputPadding, 2);
}
&.p-autocomplete-dd {
.p-autocomplete-loader {
right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
}
}
&:not(.p-disabled):hover {
.p-autocomplete-multiple-container {
border-color: $inputHoverBorderColor;
}
}
&:not(.p-disabled).p-focus {
.p-autocomplete-multiple-container {
@include focused-input();
}
right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
}
}
&:not(.p-disabled):hover {
.p-autocomplete-multiple-container {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
gap: $inlineSpacing;
outline-color: transparent;
border-color: $inputHoverBorderColor;
}
}
.p-autocomplete-input-token {
padding: math.div(nth($inputPadding, 1), 2) 0;
&:not(.p-disabled).p-focus {
.p-autocomplete-multiple-container {
@include focused-input();
}
}
input {
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings, normal);
font-size: $inputTextFontSize;
color: $textColor;
padding: 0;
margin: 0;
}
}
.p-autocomplete-multiple-container {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
gap: $inlineSpacing;
outline-color: transparent;
.p-autocomplete-token {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
background: $chipBg;
color: $chipTextColor;
border-radius: $chipBorderRadius;
.p-autocomplete-input-token {
padding: math.div(nth($inputPadding, 1), 2) 0;
.p-autocomplete-token-icon {
margin-left: $inlineSpacing;
}
&.p-focus {
background: $chipFocusBg;
color: $chipFocusTextColor;
}
}
input {
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings, normal);
font-size: $inputTextFontSize;
color: $textColor;
padding: 0;
margin: 0;
}
}
&.p-invalid.p-component > .p-inputtext {
@include invalid-input();
.p-autocomplete-token {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
background: $chipBg;
color: $chipTextColor;
border-radius: $chipBorderRadius;
.p-autocomplete-token-icon {
margin-left: $inlineSpacing;
}
&.p-focus {
background: $chipFocusBg;
color: $chipFocusTextColor;
}
}
}
&.p-invalid.p-component > .p-inputtext {
@include invalid-input();
}
}
.p-autocomplete-panel {
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
box-shadow: $inputOverlayShadow;
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
box-shadow: $inputOverlayShadow;
.p-autocomplete-items {
padding: $inputListPadding;
.p-autocomplete-items {
padding: $inputListPadding;
.p-autocomplete-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
.p-autocomplete-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
&:first-child {
margin-top: 0;
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&:last-child {
margin-bottom: 0;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
&.p-focus {
background: $highlightFocusBg;
}
}
.p-autocomplete-item-group {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
}
.p-autocomplete-item-group {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
}
}
}

554
frontend/public/primevue-sass-theme/theme-base/components/input/_calendar.scss
View File

@ -1,408 +1,408 @@
// core
.p-calendar {
display: inline-flex;
max-width: 100%;
display: inline-flex;
max-width: 100%;
}
.p-calendar .p-inputtext {
flex: 1 1 auto;
width: 1%;
flex: 1 1 auto;
width: 1%;
}
.p-calendar-w-btn .p-inputtext {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-calendar-w-btn .p-datepicker-trigger {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-calendar .p-datepicker-trigger-icon {
cursor: pointer;
cursor: pointer;
}
/* Fluid */
.p-fluid .p-calendar {
display: flex;
display: flex;
}
.p-fluid .p-calendar .p-inputtext {
width: 1%;
width: 1%;
}
/* Datepicker */
.p-calendar .p-datepicker {
min-width: 100%;
min-width: 100%;
}
.p-datepicker {
width: auto;
width: auto;
}
.p-datepicker-inline {
display: inline-block;
overflow-x: auto;
display: inline-block;
overflow-x: auto;
}
/* Header */
.p-datepicker-header {
display: flex;
align-items: center;
justify-content: space-between;
display: flex;
align-items: center;
justify-content: space-between;
}
.p-datepicker-header .p-datepicker-title {
margin: 0 auto;
margin: 0 auto;
}
.p-datepicker-prev,
.p-datepicker-next {
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
/* Multiple Month DatePicker */
.p-datepicker-multiple-month .p-datepicker-group-container {
display: flex;
display: flex;
}
.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
flex: 1 1 auto;
flex: 1 1 auto;
}
/* DatePicker Table */
.p-datepicker table {
width: 100%;
border-collapse: collapse;
width: 100%;
border-collapse: collapse;
}
.p-datepicker td > span {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 0 auto;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 0 auto;
overflow: hidden;
position: relative;
}
/* Month Picker */
.p-monthpicker-month {
width: 33.3%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
width: 33.3%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
/* Year Picker */
.p-yearpicker-year {
width: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
width: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
/* Button Bar */
.p-datepicker-buttonbar {
display: flex;
justify-content: space-between;
align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Time Picker */
.p-timepicker {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
.p-timepicker button {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
.p-timepicker > div {
display: flex;
align-items: center;
flex-direction: column;
display: flex;
align-items: center;
flex-direction: column;
}
/* Touch UI */
.p-datepicker-touch-ui,
.p-calendar .p-datepicker-touch-ui {
min-width: 80vw;
min-width: 80vw;
}
// theme
.p-calendar {
&.p-invalid.p-component > .p-inputtext {
@include invalid-input();
}
&.p-invalid.p-component > .p-inputtext {
@include invalid-input();
}
&:not(.p-calendar-disabled).p-focus > .p-inputtext {
@include focused-input();
}
&:not(.p-calendar-disabled).p-focus > .p-inputtext {
@include focused-input();
}
}
.p-datepicker {
padding: $calendarPadding;
background: $calendarInlineBg;
color: $calendarTextColor;
border: $calendarBorder;
border-radius: $borderRadius;
padding: $calendarPadding;
background: $calendarInlineBg;
color: $calendarTextColor;
border: $calendarBorder;
border-radius: $borderRadius;
&:not(.p-datepicker-inline) {
background: $calendarBg;
border: $calendarOverlayBorder;
box-shadow: $inputOverlayShadow;
.p-datepicker-header {
background: $calendarHeaderBg;
}
}
&:not(.p-datepicker-inline) {
background: $calendarBg;
border: $calendarOverlayBorder;
box-shadow: $inputOverlayShadow;
.p-datepicker-header {
padding: $calendarHeaderPadding;
background: $calendarHeaderBg;
}
}
.p-datepicker-header {
padding: $calendarHeaderPadding;
color: $calendarHeaderTextColor;
background: $calendarInlineHeaderBg;
font-weight: $calendarHeaderFontWeight;
margin: $inputListHeaderMargin;
border-bottom: $calendarHeaderBorder;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
.p-datepicker-prev,
.p-datepicker-next {
@include action-icon();
}
.p-datepicker-title {
line-height: $actionIconHeight;
.p-datepicker-year,
.p-datepicker-month {
color: $calendarHeaderTextColor;
background: $calendarInlineHeaderBg;
transition: $actionIconTransition;
font-weight: $calendarHeaderFontWeight;
margin: $inputListHeaderMargin;
border-bottom: $calendarHeaderBorder;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
padding: $calendarHeaderCellPadding;
.p-datepicker-prev,
.p-datepicker-next {
@include action-icon();
&:enabled:hover {
color: $calendarMonthYearHeaderHoverTextColor;
}
}
.p-datepicker-title {
line-height: $actionIconHeight;
.p-datepicker-month {
margin-right: $inlineSpacing;
}
}
}
.p-datepicker-year,
.p-datepicker-month {
color: $calendarHeaderTextColor;
transition: $actionIconTransition;
font-weight: $calendarHeaderFontWeight;
padding: $calendarHeaderCellPadding;
table {
font-size: $fontSize;
margin: $calendarTableMargin;
&:enabled:hover {
color: $calendarMonthYearHeaderHoverTextColor;
}
}
th {
padding: $calendarHeaderCellPadding;
.p-datepicker-month {
margin-right: $inlineSpacing;
}
}
> span {
width: $calendarCellDateWidth;
height: $calendarCellDateHeight;
}
}
table {
font-size: $fontSize;
margin: $calendarTableMargin;
td {
padding: $calendarCellDatePadding;
th {
padding: $calendarHeaderCellPadding;
> span {
width: $calendarCellDateWidth;
height: $calendarCellDateHeight;
border-radius: $calendarCellDateBorderRadius;
transition: $listItemTransition;
border: $calendarCellDateBorder;
outline-color: transparent;
> span {
width: $calendarCellDateWidth;
height: $calendarCellDateHeight;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
}
td {
padding: $calendarCellDatePadding;
> span {
width: $calendarCellDateWidth;
height: $calendarCellDateHeight;
border-radius: $calendarCellDateBorderRadius;
transition: $listItemTransition;
border: $calendarCellDateBorder;
outline-color: transparent;
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
}
&:focus {
@include focused();
}
}
&.p-datepicker-today {
> span {
background: $calendarCellDateTodayBg;
color: $calendarCellDateTodayTextColor;
border-color: $calendarCellDateTodayBorderColor;
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
}
}
}
&:focus {
@include focused();
}
}
&.p-datepicker-today {
> span {
background: $calendarCellDateTodayBg;
color: $calendarCellDateTodayTextColor;
border-color: $calendarCellDateTodayBorderColor;
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
}
}
}
}
}
.p-datepicker-buttonbar {
padding: $calendarButtonBarPadding;
border-top: $divider;
.p-button {
width: auto;
}
}
.p-timepicker {
border-top: $divider;
padding: $calendarTimePickerPadding;
button {
@include action-icon();
&:last-child {
margin-top: 0.2em;
}
}
.p-datepicker-buttonbar {
padding: $calendarButtonBarPadding;
border-top: $divider;
.p-button {
width: auto;
}
span {
font-size: $calendarTimePickerTimeFontSize;
}
> div {
padding: $calendarTimePickerElementPadding;
}
}
&.p-datepicker-timeonly {
.p-timepicker {
border-top: $divider;
padding: $calendarTimePickerPadding;
button {
@include action-icon();
&:last-child {
margin-top: 0.2em;
}
}
span {
font-size: $calendarTimePickerTimeFontSize;
}
> div {
padding: $calendarTimePickerElementPadding;
}
border-top: 0 none;
}
}
&.p-datepicker-timeonly {
.p-timepicker {
border-top: 0 none;
.p-monthpicker {
margin: $calendarTableMargin;
.p-monthpicker-month {
padding: $calendarCellDatePadding;
transition: $listItemTransition;
border-radius: $borderRadius;
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
}
}
}
.p-yearpicker {
margin: $calendarTableMargin;
.p-yearpicker-year {
padding: $calendarCellDatePadding;
transition: $listItemTransition;
border-radius: $borderRadius;
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
}
}
}
&.p-datepicker-multiple-month {
.p-datepicker-group {
border-left: $divider;
padding-right: $calendarPadding;
padding-left: $calendarPadding;
padding-top: 0;
padding-bottom: 0;
&:first-child {
padding-left: 0;
border-left: 0 none;
}
&:last-child {
padding-right: 0;
}
}
}
&.p-datepicker-mobile {
table {
th,
td {
padding: $calendarCellDatePaddingSM;
}
}
}
&:not(.p-disabled) {
table {
td {
span:not(.p-highlight):not(.p-disabled) {
outline-color: transparent;
&:hover {
background: $calendarCellDateHoverBg;
}
&:focus {
@include focused();
}
}
}
}
.p-monthpicker {
margin: $calendarTableMargin;
.p-monthpicker-month {
&:not(.p-disabled) {
outline-color: transparent;
.p-monthpicker-month {
padding: $calendarCellDatePadding;
transition: $listItemTransition;
border-radius: $borderRadius;
&:not(.p-highlight):hover {
background: $calendarCellDateHoverBg;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
}
&:focus {
@include focused();
}
}
}
}
.p-yearpicker {
margin: $calendarTableMargin;
.p-yearpicker-year {
&:not(.p-disabled) {
outline-color: transparent;
.p-yearpicker-year {
padding: $calendarCellDatePadding;
transition: $listItemTransition;
border-radius: $borderRadius;
&:not(.p-highlight):hover {
background: $calendarCellDateHoverBg;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
}
}
}
&.p-datepicker-multiple-month {
.p-datepicker-group {
border-left: $divider;
padding-right: $calendarPadding;
padding-left: $calendarPadding;
padding-top: 0;
padding-bottom: 0;
&:first-child {
padding-left: 0;
border-left: 0 none;
}
&:last-child {
padding-right: 0;
}
}
}
&.p-datepicker-mobile {
table {
th,
td {
padding: $calendarCellDatePaddingSM;
}
}
}
&:not(.p-disabled) {
table {
td {
span:not(.p-highlight):not(.p-disabled) {
outline-color: transparent;
&:hover {
background: $calendarCellDateHoverBg;
}
&:focus {
@include focused();
}
}
}
}
.p-monthpicker {
.p-monthpicker-month {
&:not(.p-disabled) {
outline-color: transparent;
&:not(.p-highlight):hover {
background: $calendarCellDateHoverBg;
}
&:focus {
@include focused();
}
}
}
}
.p-yearpicker {
.p-yearpicker-year {
&:not(.p-disabled) {
outline-color: transparent;
&:not(.p-highlight):hover {
background: $calendarCellDateHoverBg;
}
&:focus {
@include focused();
}
}
}
&:focus {
@include focused();
}
}
}
}
}
}

254
frontend/public/primevue-sass-theme/theme-base/components/input/_cascadeselect.scss
View File

@ -1,199 +1,199 @@
// core
.p-cascadeselect {
display: inline-flex;
cursor: pointer;
user-select: none;
display: inline-flex;
cursor: pointer;
user-select: none;
}
.p-cascadeselect-trigger {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-cascadeselect-label {
display: block;
white-space: nowrap;
overflow: hidden;
flex: 1 1 auto;
width: 1%;
text-overflow: ellipsis;
cursor: pointer;
display: block;
white-space: nowrap;
overflow: hidden;
flex: 1 1 auto;
width: 1%;
text-overflow: ellipsis;
cursor: pointer;
}
.p-cascadeselect-label-empty {
overflow: hidden;
visibility: hidden;
overflow: hidden;
visibility: hidden;
}
.p-cascadeselect .p-cascadeselect-panel {
min-width: 100%;
min-width: 100%;
}
.p-cascadeselect-item {
cursor: pointer;
font-weight: normal;
white-space: nowrap;
cursor: pointer;
font-weight: normal;
white-space: nowrap;
}
.p-cascadeselect-item-content {
display: flex;
align-items: center;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
}
.p-cascadeselect-group-icon {
margin-left: auto;
margin-left: auto;
}
.p-cascadeselect-items {
margin: 0;
padding: 0;
list-style-type: none;
min-width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
min-width: 100%;
}
.p-fluid .p-cascadeselect {
display: flex;
display: flex;
}
.p-fluid .p-cascadeselect .p-cascadeselect-label {
width: 1%;
width: 1%;
}
.p-cascadeselect-sublist {
position: absolute;
min-width: 100%;
z-index: 1;
display: none;
position: absolute;
min-width: 100%;
z-index: 1;
display: none;
}
.p-cascadeselect-item-active {
overflow: visible;
overflow: visible;
}
.p-cascadeselect-item-active > .p-cascadeselect-sublist {
display: block;
left: 100%;
top: 0;
display: block;
left: 100%;
top: 0;
}
.p-cascadeselect-enter-from,
.p-cascadeselect-leave-active {
opacity: 0;
opacity: 0;
}
.p-cascadeselect-enter-active {
transition: opacity 150ms;
transition: opacity 150ms;
}
// theme
.p-cascadeselect {
background: $inputBg;
border: $inputBorder;
transition: $formElementTransition;
border-radius: $borderRadius;
outline-color: transparent;
background: $inputBg;
border: $inputBorder;
transition: $formElementTransition;
border-radius: $borderRadius;
outline-color: transparent;
&:not(.p-disabled):hover {
border-color: $inputHoverBorderColor;
&:not(.p-disabled):hover {
border-color: $inputHoverBorderColor;
}
&:not(.p-disabled).p-focus {
@include focused-input();
}
&.p-variant-filled {
background-color: $inputFilledBg;
&:enabled:hover {
background-color: $inputFilledHoverBg;
}
&:not(.p-disabled).p-focus {
@include focused-input();
&:enabled:focus {
background-color: $inputFilledFocusBg;
}
}
.p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: $inputPadding;
&.p-placeholder {
color: $inputPlaceholderTextColor;
}
&.p-variant-filled {
background-color: $inputFilledBg;
&:enabled:hover {
background-color: $inputFilledHoverBg;
}
&:enabled:focus {
background-color: $inputFilledFocusBg;
}
&:enabled:focus {
outline: 0 none;
box-shadow: none;
}
}
.p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: $inputPadding;
.p-cascadeselect-trigger {
background: transparent;
color: $inputIconColor;
width: $inputGroupAddOnMinWidth;
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
&.p-placeholder {
color: $inputPlaceholderTextColor;
}
&:enabled:focus {
outline: 0 none;
box-shadow: none;
}
}
.p-cascadeselect-trigger {
background: transparent;
color: $inputIconColor;
width: $inputGroupAddOnMinWidth;
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
&.p-invalid.p-component {
@include invalid-input();
}
&.p-invalid.p-component {
@include invalid-input();
}
}
.p-cascadeselect-panel {
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
box-shadow: $inputOverlayShadow;
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
box-shadow: $inputOverlayShadow;
.p-cascadeselect-items {
padding: $inputListPadding;
.p-cascadeselect-items {
padding: $inputListPadding;
.p-cascadeselect-item {
margin: $inputListItemMargin;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
.p-cascadeselect-item {
margin: $inputListItemMargin;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
&:first-child {
margin-top: 0;
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&:last-child {
margin-bottom: 0;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
.p-cascadeselect-item-content {
padding: $inputListItemPadding;
}
.p-cascadeselect-group-icon {
font-size: $menuitemSubmenuIconFontSize;
}
&.p-focus {
background: $highlightFocusBg;
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
.p-cascadeselect-item-content {
padding: $inputListItemPadding;
}
.p-cascadeselect-group-icon {
font-size: $menuitemSubmenuIconFontSize;
}
}
}
}

228
frontend/public/primevue-sass-theme/theme-base/components/input/_checkbox.scss
View File

@ -1,158 +1,158 @@
// core
.p-checkbox {
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
}
.p-checkbox-input {
cursor: pointer;
cursor: pointer;
}
.p-checkbox-box {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
// theme
.p-checkbox {
width: $checkboxWidth;
height: $checkboxHeight;
.p-checkbox-input {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border: $checkboxBorder;
border-radius: $borderRadius;
}
.p-checkbox-box {
border: $checkboxBorder;
background: $inputBg;
width: $checkboxWidth;
height: $checkboxHeight;
color: $textColor;
border-radius: $borderRadius;
transition: $formElementTransition;
outline-color: transparent;
.p-checkbox-input {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border: $checkboxBorder;
border-radius: $borderRadius;
.p-checkbox-icon {
transition-duration: $transitionDuration;
color: $checkboxIconActiveColor;
font-size: $checkboxIconFontSize;
&.p-icon {
width: $checkboxIconFontSize;
height: $checkboxIconFontSize;
}
}
}
&.p-highlight {
.p-checkbox-box {
border-color: $checkboxActiveBorderColor;
background: $checkboxActiveBg;
}
}
&:not(.p-disabled) {
&:has(.p-checkbox-input:hover) {
.p-checkbox-box {
border-color: $inputHoverBorderColor;
}
&.p-highlight {
.p-checkbox-box {
border-color: $checkboxActiveHoverBorderColor;
background: $checkboxActiveHoverBg;
color: $checkboxIconActiveHoverColor;
}
}
}
&:has(.p-checkbox-input:focus-visible) {
.p-checkbox-box {
@include focused-input();
}
}
}
&.p-invalid > .p-checkbox-box {
@include invalid-input();
}
&.p-variant-filled {
.p-checkbox-box {
border: $checkboxBorder;
background: $inputBg;
width: $checkboxWidth;
height: $checkboxHeight;
color: $textColor;
border-radius: $borderRadius;
transition: $formElementTransition;
outline-color: transparent;
.p-checkbox-icon {
transition-duration: $transitionDuration;
color: $checkboxIconActiveColor;
font-size: $checkboxIconFontSize;
&.p-icon {
width: $checkboxIconFontSize;
height: $checkboxIconFontSize;
}
}
background-color: $inputFilledBg;
}
&.p-highlight {
.p-checkbox-box {
border-color: $checkboxActiveBorderColor;
background: $checkboxActiveBg;
}
.p-checkbox-box {
background: $checkboxActiveBg;
}
}
&:not(.p-disabled) {
&:has(.p-checkbox-input:hover) {
.p-checkbox-box {
border-color: $inputHoverBorderColor;
}
&.p-highlight {
.p-checkbox-box {
border-color: $checkboxActiveHoverBorderColor;
background: $checkboxActiveHoverBg;
color: $checkboxIconActiveHoverColor;
}
}
}
&:has(.p-checkbox-input:focus-visible) {
.p-checkbox-box {
@include focused-input();
}
}
}
&.p-invalid > .p-checkbox-box {
@include invalid-input();
}
&.p-variant-filled {
&:has(.p-checkbox-input:hover) {
.p-checkbox-box {
background-color: $inputFilledBg;
background-color: $inputFilledHoverBg;
}
&.p-highlight {
.p-checkbox-box {
background: $checkboxActiveBg;
}
}
&:not(.p-disabled) {
&:has(.p-checkbox-input:hover) {
.p-checkbox-box {
background-color: $inputFilledHoverBg;
}
&.p-highlight {
.p-checkbox-box {
background: $checkboxActiveHoverBg;
}
}
}
.p-checkbox-box {
background: $checkboxActiveHoverBg;
}
}
}
}
}
}
.p-input-filled {
.p-checkbox {
.p-checkbox {
.p-checkbox-box {
background-color: $inputFilledBg;
}
&.p-highlight {
.p-checkbox-box {
background: $checkboxActiveBg;
}
}
&:not(.p-disabled) {
&:has(.p-checkbox-input:hover) {
.p-checkbox-box {
background-color: $inputFilledBg;
background-color: $inputFilledHoverBg;
}
&.p-highlight {
.p-checkbox-box {
background: $checkboxActiveBg;
}
}
&:not(.p-disabled) {
&:has(.p-checkbox-input:hover) {
.p-checkbox-box {
background-color: $inputFilledHoverBg;
}
&.p-highlight {
.p-checkbox-box {
background: $checkboxActiveHoverBg;
}
}
}
.p-checkbox-box {
background: $checkboxActiveHoverBg;
}
}
}
}
}
}
@if ($highlightBg == $checkboxActiveBg) {
.p-highlight {
.p-checkbox {
.p-checkbox-box {
border-color: $checkboxIconActiveColor;
}
}
.p-highlight {
.p-checkbox {
.p-checkbox-box {
border-color: $checkboxIconActiveColor;
}
}
}
}

132
frontend/public/primevue-sass-theme/theme-base/components/input/_chips.scss
View File

@ -2,101 +2,101 @@
// core
.p-chips {
display: inline-flex;
display: inline-flex;
}
.p-chips-multiple-container {
margin: 0;
padding: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-chips-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-chips-input-token {
flex: 1 1 auto;
display: inline-flex;
flex: 1 1 auto;
display: inline-flex;
}
.p-chips-token-icon {
cursor: pointer;
cursor: pointer;
}
.p-chips-input-token input {
border: 0 none;
outline: 0 none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
border: 0 none;
outline: 0 none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
}
.p-fluid .p-chips {
display: flex;
display: flex;
}
// theme
.p-chips {
&:not(.p-disabled):hover {
.p-chips-multiple-container {
border-color: $inputHoverBorderColor;
}
}
&:not(.p-disabled).p-focus {
.p-chips-multiple-container {
@include focused-input();
}
}
&:not(.p-disabled):hover {
.p-chips-multiple-container {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
outline-color: transparent;
border-color: $inputHoverBorderColor;
}
}
.p-chips-token {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
margin-right: $inlineSpacing;
background: $chipBg;
color: $chipTextColor;
border-radius: $chipBorderRadius;
&:not(.p-disabled).p-focus {
.p-chips-multiple-container {
@include focused-input();
}
}
&.p-focus {
background: $chipFocusBg;
color: $chipFocusTextColor;
}
.p-chips-multiple-container {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
outline-color: transparent;
.p-chips-token-icon {
margin-left: $inlineSpacing;
}
}
.p-chips-token {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
margin-right: $inlineSpacing;
background: $chipBg;
color: $chipTextColor;
border-radius: $chipBorderRadius;
.p-chips-input-token {
padding: math.div(nth($inputPadding, 1), 2) 0;
&.p-focus {
background: $chipFocusBg;
color: $chipFocusTextColor;
}
input {
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings, normal);
font-size: $inputTextFontSize;
color: $textColor;
padding: 0;
margin: 0;
}
}
.p-chips-token-icon {
margin-left: $inlineSpacing;
}
}
&.p-invalid.p-component > .p-inputtext {
@include invalid-input();
.p-chips-input-token {
padding: math.div(nth($inputPadding, 1), 2) 0;
input {
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings, normal);
font-size: $inputTextFontSize;
color: $textColor;
padding: 0;
margin: 0;
}
}
}
&.p-invalid.p-component > .p-inputtext {
@include invalid-input();
}
}

36
frontend/public/primevue-sass-theme/theme-base/components/input/_colorpicker.scss
View File

@ -1,28 +1,38 @@
// core
.p-colorpicker-panel .p-colorpicker-color {
background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%),
linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%);
}
.p-colorpicker-panel .p-colorpicker-hue {
background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
background: linear-gradient(
0deg,
red 0,
#ff0 17%,
#0f0 33%,
#0ff 50%,
#00f 67%,
#f0f 83%,
red
);
}
// theme
.p-colorpicker-preview {
width: $colorPickerPreviewWidth;
height: $colorPickerPreviewHeight;
.p-colorpicker-preview {
width: $colorPickerPreviewWidth;
height: $colorPickerPreviewHeight;
}
.p-colorpicker-panel {
background: $colorPickerBg;
border: $colorPickerBorder;
background: $colorPickerBg;
border: $colorPickerBorder;
.p-colorpicker-color-handle,
.p-colorpicker-hue-handle {
border-color: $colorPickerHandleColor;
}
.p-colorpicker-color-handle,
.p-colorpicker-hue-handle {
border-color: $colorPickerHandleColor;
}
}
.p-colorpicker-overlay-panel {
box-shadow: $inputOverlayShadow;
}
box-shadow: $inputOverlayShadow;
}

348
frontend/public/primevue-sass-theme/theme-base/components/input/_dropdown.scss
View File

@ -1,252 +1,252 @@
// core
.p-dropdown {
display: inline-flex;
cursor: pointer;
position: relative;
user-select: none;
display: inline-flex;
cursor: pointer;
position: relative;
user-select: none;
}
.p-dropdown-clear-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-dropdown-trigger {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-dropdown-label {
display: block;
white-space: nowrap;
overflow: hidden;
flex: 1 1 auto;
width: 1%;
text-overflow: ellipsis;
cursor: pointer;
display: block;
white-space: nowrap;
overflow: hidden;
flex: 1 1 auto;
width: 1%;
text-overflow: ellipsis;
cursor: pointer;
}
.p-dropdown-label-empty {
overflow: hidden;
opacity: 0;
overflow: hidden;
opacity: 0;
}
input.p-dropdown-label {
cursor: default;
cursor: default;
}
.p-dropdown .p-dropdown-panel {
min-width: 100%;
min-width: 100%;
}
.p-dropdown-panel {
position: absolute;
top: 0;
left: 0;
position: absolute;
top: 0;
left: 0;
}
.p-dropdown-items-wrapper {
overflow: auto;
overflow: auto;
}
.p-dropdown-item {
cursor: pointer;
font-weight: normal;
white-space: nowrap;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
cursor: pointer;
font-weight: normal;
white-space: nowrap;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
}
.p-dropdown-item-group {
cursor: auto;
cursor: auto;
}
.p-dropdown-items {
margin: 0;
padding: 0;
list-style-type: none;
margin: 0;
padding: 0;
list-style-type: none;
}
.p-dropdown-filter {
width: 100%;
width: 100%;
}
.p-dropdown-filter-container {
position: relative;
position: relative;
}
.p-dropdown-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-fluid .p-dropdown {
display: flex;
display: flex;
}
.p-fluid .p-dropdown .p-dropdown-label {
width: 1%;
width: 1%;
}
// theme
.p-dropdown {
background: $inputBg;
border: $inputBorder;
transition: $formElementTransition;
border-radius: $borderRadius;
outline-color: transparent;
background: $inputBg;
border: $inputBorder;
transition: $formElementTransition;
border-radius: $borderRadius;
outline-color: transparent;
&:not(.p-disabled):hover {
border-color: $inputHoverBorderColor;
}
&:not(.p-disabled).p-focus {
@include focused-input();
}
&.p-variant-filled {
background: $inputFilledBg;
&:not(.p-disabled):hover {
border-color: $inputHoverBorderColor;
background-color: $inputFilledHoverBg;
}
&:not(.p-disabled).p-focus {
@include focused-input();
}
&.p-variant-filled {
background: $inputFilledBg;
&:not(.p-disabled):hover {
background-color: $inputFilledHoverBg;
}
&:not(.p-disabled).p-focus {
background-color: $inputFilledFocusBg;
.p-inputtext {
background-color: transparent;
}
}
}
&.p-dropdown-clearable {
.p-dropdown-label {
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
}
background-color: $inputFilledFocusBg;
.p-inputtext {
background-color: transparent;
}
}
}
&.p-dropdown-clearable {
.p-dropdown-label {
background: transparent;
border: 0 none;
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
}
}
&.p-placeholder {
color: $inputPlaceholderTextColor;
}
.p-dropdown-label {
background: transparent;
border: 0 none;
&:focus,
&:enabled:focus {
outline: 0 none;
box-shadow: none;
}
&.p-placeholder {
color: $inputPlaceholderTextColor;
}
.p-dropdown-trigger {
background: transparent;
color: $inputIconColor;
width: $inputGroupAddOnMinWidth;
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
&:focus,
&:enabled:focus {
outline: 0 none;
box-shadow: none;
}
}
.p-dropdown-clear-icon {
color: $inputIconColor;
right: $inputGroupAddOnMinWidth;
}
.p-dropdown-trigger {
background: transparent;
color: $inputIconColor;
width: $inputGroupAddOnMinWidth;
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
&.p-invalid.p-component {
@include invalid-input();
}
.p-dropdown-clear-icon {
color: $inputIconColor;
right: $inputGroupAddOnMinWidth;
}
&.p-invalid.p-component {
@include invalid-input();
}
}
.p-dropdown-panel {
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
box-shadow: $inputOverlayShadow;
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
box-shadow: $inputOverlayShadow;
.p-dropdown-header {
padding: $inputListHeaderPadding;
border-bottom: $inputListHeaderBorder;
color: $inputListHeaderTextColor;
background: $inputOverlayHeaderBg;
margin: $inputListHeaderMargin;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
.p-dropdown-header {
padding: $inputListHeaderPadding;
border-bottom: $inputListHeaderBorder;
color: $inputListHeaderTextColor;
background: $inputOverlayHeaderBg;
margin: $inputListHeaderMargin;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
.p-dropdown-filter {
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
}
.p-dropdown-filter-icon {
right: nth($inputPadding, 2);
color: $inputIconColor;
}
.p-dropdown-filter {
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
}
.p-dropdown-items {
padding: $inputListPadding;
.p-dropdown-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
.p-dropdown-check-icon {
position: relative;
margin-left: -1 * $inlineSpacing;
margin-right: $inlineSpacing;
}
}
.p-dropdown-item-group {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
}
.p-dropdown-empty-message {
padding: $inputListItemPadding;
color: $inputListItemTextColor;
background: $inputListItemBg;
}
.p-dropdown-filter-icon {
right: nth($inputPadding, 2);
color: $inputIconColor;
}
}
.p-dropdown-items {
padding: $inputListPadding;
.p-dropdown-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
.p-dropdown-check-icon {
position: relative;
margin-left: -1 * $inlineSpacing;
margin-right: $inlineSpacing;
}
}
.p-dropdown-item-group {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
}
.p-dropdown-empty-message {
padding: $inputListItemPadding;
color: $inputListItemTextColor;
background: $inputListItemBg;
}
}
}

198
frontend/public/primevue-sass-theme/theme-base/components/input/_editor.scss
View File

@ -1,122 +1,122 @@
.p-editor-container {
.p-editor-toolbar {
background: $editorToolbarBg;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
.p-editor-toolbar {
background: $editorToolbarBg;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
&.ql-snow {
border: $editorToolbarBorder;
&.ql-snow {
border: $editorToolbarBorder;
.ql-stroke {
stroke: $editorToolbarIconColor;
}
.ql-fill {
fill: $editorToolbarIconColor;
}
.ql-picker {
.ql-picker-label {
border: 0 none;
color: $editorToolbarIconColor;
&:hover {
color: $editorToolbarIconHoverColor;
.ql-stroke {
stroke: $editorToolbarIconColor;
stroke: $editorToolbarIconHoverColor;
}
.ql-fill {
fill: $editorToolbarIconColor;
fill: $editorToolbarIconHoverColor;
}
.ql-picker {
.ql-picker-label {
border: 0 none;
color: $editorToolbarIconColor;
}
}
&:hover {
color: $editorToolbarIconHoverColor;
&.ql-expanded {
.ql-picker-label {
color: $editorToolbarIconHoverColor;
.ql-stroke {
stroke: $editorToolbarIconHoverColor;
}
.ql-fill {
fill: $editorToolbarIconHoverColor;
}
}
}
&.ql-expanded {
.ql-picker-label {
color: $editorToolbarIconHoverColor;
.ql-stroke {
stroke: $editorToolbarIconHoverColor;
}
.ql-fill {
fill: $editorToolbarIconHoverColor;
}
}
.ql-picker-options {
background: $inputOverlayBg;
border:$inputOverlayBorder;
box-shadow:$inputOverlayShadow;
border-radius: $borderRadius;
padding: $inputListPadding;
.ql-picker-item {
color: $inputListItemTextColor;
&:hover {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
}
&:not(.ql-icon-picker) {
.ql-picker-item {
padding: $inputListItemPadding;
}
}
}
.ql-stroke {
stroke: $editorToolbarIconHoverColor;
}
.ql-fill {
fill: $editorToolbarIconHoverColor;
}
}
.ql-picker-options {
background: $inputOverlayBg;
border: $inputOverlayBorder;
box-shadow: $inputOverlayShadow;
border-radius: $borderRadius;
padding: $inputListPadding;
.ql-picker-item {
color: $inputListItemTextColor;
&:hover {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
}
&:not(.ql-icon-picker) {
.ql-picker-item {
padding: $inputListItemPadding;
}
}
}
}
}
}
.p-editor-content {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
&.ql-snow {
border: $editorContentBorder;
}
.p-editor-content {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
.ql-editor {
background: $inputBg;
color: $inputTextColor;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}
&.ql-snow {
border: $editorContentBorder;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus {
color: $editorToolbarIconHoverColor;
.ql-editor {
background: $inputBg;
color: $inputTextColor;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
.ql-stroke {
stroke: $editorToolbarIconHoverColor;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus {
color: $editorToolbarIconHoverColor;
.ql-fill {
fill: $editorToolbarIconHoverColor;
}
}
.ql-stroke {
stroke: $editorToolbarIconHoverColor;
}
.ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected {
color: $editorIconActiveColor;
.ql-fill {
fill: $editorToolbarIconHoverColor;
}
.ql-stroke {
stroke: $editorIconActiveColor;
}
.ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected {
color: $editorIconActiveColor;
.ql-stroke {
stroke: $editorIconActiveColor;
}
.ql-fill {
fill: $editorIconActiveColor;
}
.ql-picker-label {
color: $editorIconActiveColor;
}
.ql-fill {
fill: $editorIconActiveColor;
}
.ql-picker-label {
color: $editorIconActiveColor;
}
}
}

38
frontend/public/primevue-sass-theme/theme-base/components/input/_floatlabel.scss
View File

@ -1,21 +1,21 @@
// core
.p-float-label {
display: block;
position: relative;
display: block;
position: relative;
}
.p-float-label label {
position: absolute;
pointer-events: none;
top: 50%;
margin-top: -.5rem;
transition-property: all;
transition-timing-function: ease;
line-height: 1;
position: absolute;
pointer-events: none;
top: 50%;
margin-top: -0.5rem;
transition-property: all;
transition-timing-function: ease;
line-height: 1;
}
.p-float-label:has(textarea) label {
top: 1rem;
top: 1rem;
}
.p-float-label:has(input:focus) label,
@ -25,22 +25,22 @@
.p-float-label:has(textarea.p-filled) label,
.p-float-label:has(.p-inputwrapper-focus) label,
.p-float-label:has(.p-inputwrapper-filled) label {
top: -.75rem;
font-size: 12px;
top: -0.75rem;
font-size: 12px;
}
.p-float-label .p-placeholder,
.p-float-label input::placeholder,
.p-float-label .p-inputtext::placeholder {
opacity: 0;
transition-property: all;
transition-timing-function: ease;
opacity: 0;
transition-property: all;
transition-timing-function: ease;
}
.p-float-label .p-focus .p-placeholder,
.p-float-label input:focus::placeholder,
.p-float-label .p-inputtext:focus::placeholder {
opacity: 1;
transition-property: all;
transition-timing-function: ease;
}
opacity: 1;
transition-property: all;
transition-timing-function: ease;
}

10
frontend/public/primevue-sass-theme/theme-base/components/input/_iconfield.scss
View File

@ -1,10 +1,10 @@
// core
.p-icon-field {
position: relative;
position: relative;
}
.p-icon-field > .p-input-icon {
position: absolute;
top: 50%;
margin-top: -.5rem;
}
position: absolute;
top: 50%;
margin-top: -0.5rem;
}

106
frontend/public/primevue-sass-theme/theme-base/components/input/_inputgroup.scss
View File

@ -1,64 +1,64 @@
// core
.p-inputgroup {
display: flex;
align-items: stretch;
width: 100%;
display: flex;
align-items: stretch;
width: 100%;
}
.p-inputgroup-addon {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.p-inputgroup .p-float-label {
display: flex;
align-items: stretch;
width: 100%;
display: flex;
align-items: stretch;
width: 100%;
}
.p-inputgroup .p-inputtext,
.p-fluid .p-inputgroup .p-inputtext,
.p-inputgroup .p-inputwrapper,
.p-fluid .p-inputgroup .p-input {
flex: 1 1 auto;
width: 1%;
flex: 1 1 auto;
width: 1%;
}
// theme
.p-inputgroup-addon {
background: $inputGroupBg;
color: $inputGroupTextColor;
border-top: $inputBorder;
border-left: $inputBorder;
border-bottom: $inputBorder;
padding: $inputPadding;
min-width: $inputGroupAddOnMinWidth;
background: $inputGroupBg;
color: $inputGroupTextColor;
border-top: $inputBorder;
border-left: $inputBorder;
border-bottom: $inputBorder;
padding: $inputPadding;
min-width: $inputGroupAddOnMinWidth;
&:last-child {
border-right: $inputBorder;
}
&:last-child {
border-right: $inputBorder;
}
}
.p-inputgroup {
> .p-component,
> .p-inputwrapper > .p-inputtext,
> .p-float-label > .p-component {
border-radius: 0;
margin: 0;
> .p-component,
> .p-inputwrapper > .p-inputtext,
> .p-float-label > .p-component {
border-radius: 0;
margin: 0;
+ .p-inputgroup-addon {
border-left: 0 none;
}
&:focus {
z-index: 1;
~ label {
z-index: 1;
}
}
+ .p-inputgroup-addon {
border-left: 0 none;
}
&:focus {
z-index: 1;
~ label {
z-index: 1;
}
}
}
}
.p-inputgroup-addon:first-child,
@ -66,37 +66,37 @@
.p-inputgroup input:first-child,
.p-inputgroup > .p-inputwrapper:first-child,
.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
.p-inputgroup .p-float-label:first-child input {
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
.p-inputgroup-addon:last-child,
.p-inputgroup button:last-child,
.p-inputgroup input:last-child,
.p-inputgroup > .p-inputwrapper:last-child,
.p-inputgroup > .p-inputwrapper:last-child,
.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
.p-inputgroup .p-float-label:last-child input {
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
.p-fluid {
.p-inputgroup {
.p-button {
width: auto;
.p-inputgroup {
.p-button {
width: auto;
&.p-button-icon-only {
width: $buttonIconOnlyWidth;
}
}
&.p-button-icon-only {
width: $buttonIconOnlyWidth;
}
}
}
}

14
frontend/public/primevue-sass-theme/theme-base/components/input/_inputicon.scss
View File

@ -1,15 +1,15 @@
// core
.p-fluid .p-icon-field-left,
.p-fluid .p-icon-field-right {
width: 100%;
width: 100%;
}
.p-icon-field-left > .p-input-icon:first-of-type {
left: nth($inputPadding, 2);
color: $inputIconColor;
left: nth($inputPadding, 2);
color: $inputIconColor;
}
.p-icon-field-right > .p-input-icon:last-of-type {
right: nth($inputPadding, 2);
color: $inputIconColor;
}
.p-icon-field-right > .p-input-icon:last-of-type {
right: nth($inputPadding, 2);
color: $inputIconColor;
}

118
frontend/public/primevue-sass-theme/theme-base/components/input/_inputnumber.scss
View File

@ -1,120 +1,124 @@
// core
.p-inputnumber {
display: inline-flex;
display: inline-flex;
}
.p-inputnumber-button {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {
display: none;
.p-inputnumber-buttons-horizontal
.p-button.p-inputnumber-button
.p-button-label {
display: none;
}
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 0;
}
.p-inputnumber-buttons-stacked .p-inputnumber-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
padding: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
padding: 0;
}
.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}
.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
flex: 1 1 auto;
.p-inputnumber-buttons-stacked
.p-inputnumber-button-group
.p-button.p-inputnumber-button {
flex: 1 1 auto;
}
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
order: 3;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
order: 3;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-inputnumber-buttons-horizontal .p-inputnumber-input {
order: 2;
border-radius: 0;
order: 2;
border-radius: 0;
}
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
order: 1;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
order: 1;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-inputnumber-buttons-vertical {
flex-direction: column;
flex-direction: column;
}
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {
order: 1;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
width: 100%;
order: 1;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
width: 100%;
}
.p-inputnumber-buttons-vertical .p-inputnumber-input {
order: 2;
border-radius: 0;
text-align: center;
order: 2;
border-radius: 0;
text-align: center;
}
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {
order: 3;
border-top-left-radius: 0;
border-top-right-radius: 0;
width: 100%;
order: 3;
border-top-left-radius: 0;
border-top-right-radius: 0;
width: 100%;
}
.p-inputnumber-input {
flex: 1 1 auto;
flex: 1 1 auto;
}
.p-fluid .p-inputnumber {
width: 100%;
width: 100%;
}
.p-fluid .p-inputnumber .p-inputnumber-input {
width: 1%;
width: 1%;
}
.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
width: 100%;
width: 100%;
}
// theme
.p-inputnumber {
&.p-invalid.p-component > .p-inputtext {
@include invalid-input();
&.p-invalid.p-component > .p-inputtext {
@include invalid-input();
}
&.p-variant-filled > .p-inputnumber-input {
background-color: $inputFilledBg;
&:enabled:hover {
background-color: $inputFilledHoverBg;
}
&.p-variant-filled > .p-inputnumber-input {
background-color: $inputFilledBg;
&:enabled:hover {
background-color: $inputFilledHoverBg;
}
&:enabled:focus {
background-color: $inputFilledFocusBg;
}
&:enabled:focus {
background-color: $inputFilledFocusBg;
}
}
}

10
frontend/public/primevue-sass-theme/theme-base/components/input/_inputotp.scss
View File

@ -1,10 +1,10 @@
.p-inputotp {
display: flex;
align-items: center;
gap: $inlineSpacing;
display: flex;
align-items: center;
gap: $inlineSpacing;
}
.p-inputotp-input {
text-align: center;
width: 2 * nth($inputPadding, 2) + 1rem;
text-align: center;
width: 2 * nth($inputPadding, 2) + 1rem;
}

140
frontend/public/primevue-sass-theme/theme-base/components/input/_inputswitch.scss
View File

@ -1,99 +1,99 @@
@use 'sass:math';
@use "sass:math";
// core
.p-inputswitch {
display: inline-block;
display: inline-block;
}
.p-inputswitch-input {
cursor: pointer;
cursor: pointer;
}
.p-inputswitch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid transparent;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid transparent;
}
.p-inputswitch-slider:before {
position: absolute;
content: '';
top: 50%;
position: absolute;
content: "";
top: 50%;
}
// theme
.p-inputswitch {
width: $inputSwitchWidth;
height: $inputSwitchHeight;
width: $inputSwitchWidth;
height: $inputSwitchHeight;
.p-inputswitch-input {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border-radius: $inputSwitchBorderRadius;
.p-inputswitch-input {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border-radius: $inputSwitchBorderRadius;
}
.p-inputswitch-slider {
background: $inputSwitchSliderOffBg;
transition: $formElementTransition;
border-radius: $inputSwitchBorderRadius;
outline-color: transparent;
&:before {
background: $inputSwitchHandleOffBg;
width: $inputSwitchHandleWidth;
height: $inputSwitchHandleHeight;
left: $inputSwitchSliderPadding;
margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
border-radius: $inputSwitchHandleBorderRadius;
transition-duration: $transitionDuration;
}
}
&.p-highlight {
.p-inputswitch-slider {
background: $inputSwitchSliderOffBg;
transition: $formElementTransition;
border-radius: $inputSwitchBorderRadius;
outline-color: transparent;
background: $inputSwitchSliderOnBg;
&:before {
background: $inputSwitchHandleOffBg;
width: $inputSwitchHandleWidth;
height: $inputSwitchHandleHeight;
left: $inputSwitchSliderPadding;
margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
border-radius: $inputSwitchHandleBorderRadius;
transition-duration: $transitionDuration;
}
&:before {
background: $inputSwitchHandleOnBg;
transform: translateX($inputSwitchHandleWidth);
}
}
}
&.p-highlight {
&:not(.p-disabled) {
&:has(.p-inputswitch-input:hover) {
.p-inputswitch-slider {
background: $inputSwitchSliderOffHoverBg;
}
&.p-highlight {
.p-inputswitch-slider {
background: $inputSwitchSliderOnBg;
&:before {
background: $inputSwitchHandleOnBg;
transform: translateX($inputSwitchHandleWidth);
}
background: $inputSwitchSliderOnHoverBg;
}
}
}
&:not(.p-disabled) {
&:has(.p-inputswitch-input:hover) {
.p-inputswitch-slider {
background: $inputSwitchSliderOffHoverBg;
}
&.p-highlight {
.p-inputswitch-slider {
background: $inputSwitchSliderOnHoverBg;
}
}
}
&:has(.p-inputswitch-input:focus-visible) {
.p-inputswitch-slider {
@include focused();
}
}
&:has(.p-inputswitch-input:focus-visible) {
.p-inputswitch-slider {
@include focused();
}
}
}
&.p-invalid > .p-inputswitch-slider {
@include invalid-input();
}
}
&.p-invalid > .p-inputswitch-slider {
@include invalid-input();
}
}

126
frontend/public/primevue-sass-theme/theme-base/components/input/_inputtext.scss
View File

@ -1,107 +1,107 @@
// core
.p-fluid .p-inputtext {
width: 100%;
width: 100%;
}
// theme
.p-inputtext {
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings, normal);
font-size: $inputTextFontSize;
color: $inputTextColor;
background: $inputBg;
padding: $inputPadding;
border: $inputBorder;
transition: $formElementTransition;
appearance: none;
border-radius: $borderRadius;
outline-color: transparent;
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings, normal);
font-size: $inputTextFontSize;
color: $inputTextColor;
background: $inputBg;
padding: $inputPadding;
border: $inputBorder;
transition: $formElementTransition;
appearance: none;
border-radius: $borderRadius;
outline-color: transparent;
&:enabled:hover {
border-color: $inputHoverBorderColor;
}
&:enabled:focus {
@include focused-input();
}
&.p-invalid.p-component {
@include invalid-input();
}
&.p-variant-filled {
background-color: $inputFilledBg;
&:enabled:hover {
border-color: $inputHoverBorderColor;
background-color: $inputFilledHoverBg;
}
&:enabled:focus {
@include focused-input();
background-color: $inputFilledFocusBg;
}
}
&.p-invalid.p-component {
@include invalid-input();
}
&.p-inputtext-sm {
@include scaledFontSize($inputTextFontSize, $scaleSM);
@include scaledPadding($inputPadding, $scaleSM);
}
&.p-variant-filled {
background-color: $inputFilledBg;
&:enabled:hover {
background-color: $inputFilledHoverBg;
}
&:enabled:focus {
background-color: $inputFilledFocusBg;
}
}
&.p-inputtext-sm {
@include scaledFontSize($inputTextFontSize, $scaleSM);
@include scaledPadding($inputPadding, $scaleSM);
}
&.p-inputtext-lg {
@include scaledFontSize($inputTextFontSize, $scaleLG);
@include scaledPadding($inputPadding, $scaleLG);
}
&.p-inputtext-lg {
@include scaledFontSize($inputTextFontSize, $scaleLG);
@include scaledPadding($inputPadding, $scaleLG);
}
}
.p-float-label > label {
left: nth($inputPadding, 2);
color: $inputPlaceholderTextColor;
transition-duration: $transitionDuration;
left: nth($inputPadding, 2);
color: $inputPlaceholderTextColor;
transition-duration: $transitionDuration;
}
.p-float-label > .p-invalid + label {
color: $inputErrorBorderColor;
color: $inputErrorBorderColor;
}
.p-icon-field-left > .p-inputtext {
padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
}
.p-icon-field-left.p-float-label > label {
left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
}
.p-icon-field-right > .p-inputtext {
padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
}
@include placeholder {
color: $inputPlaceholderTextColor;
color: $inputPlaceholderTextColor;
}
.p-input-filled {
.p-inputtext {
background-color: $inputFilledBg;
.p-inputtext {
background-color: $inputFilledBg;
&:enabled:hover {
background-color: $inputFilledHoverBg;
}
&:enabled:focus {
background-color: $inputFilledFocusBg;
}
&:enabled:hover {
background-color: $inputFilledHoverBg;
}
&:enabled:focus {
background-color: $inputFilledFocusBg;
}
}
}
.p-inputtext-sm {
.p-inputtext {
@include scaledFontSize($inputTextFontSize, $scaleSM);
@include scaledPadding($inputPadding, $scaleSM);
}
.p-inputtext {
@include scaledFontSize($inputTextFontSize, $scaleSM);
@include scaledPadding($inputPadding, $scaleSM);
}
}
.p-inputtext-lg {
.p-inputtext {
@include scaledFontSize($inputTextFontSize, $scaleLG);
@include scaledPadding($inputPadding, $scaleLG);
}
.p-inputtext {
@include scaledFontSize($inputTextFontSize, $scaleLG);
@include scaledPadding($inputPadding, $scaleLG);
}
}

22
frontend/public/primevue-sass-theme/theme-base/components/input/_knob.scss
View File

@ -1,20 +1,20 @@
// core
.p-knob-range {
fill: none;
transition: stroke 0.1s ease-in;
fill: none;
transition: stroke 0.1s ease-in;
}
.p-knob-value {
animation-name: dash-frame;
animation-fill-mode: forwards;
fill: none;
animation-name: dash-frame;
animation-fill-mode: forwards;
fill: none;
}
.p-knob-text {
font-size: 1.3rem;
text-align: center;
font-size: 1.3rem;
text-align: center;
}
@keyframes dash-frame {
100% {
stroke-dashoffset: 0;
}
}
100% {
stroke-dashoffset: 0;
}
}

196
frontend/public/primevue-sass-theme/theme-base/components/input/_listbox.scss
View File

@ -1,139 +1,139 @@
// core
.p-listbox-list-wrapper {
overflow: auto;
overflow: auto;
}
.p-listbox-list {
list-style-type: none;
margin: 0;
padding: 0;
list-style-type: none;
margin: 0;
padding: 0;
}
.p-listbox-item {
cursor: pointer;
position: relative;
overflow: hidden;
cursor: pointer;
position: relative;
overflow: hidden;
}
.p-listbox-item-group {
cursor: auto;
cursor: auto;
}
.p-listbox-filter-container {
position: relative;
position: relative;
}
.p-listbox-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-listbox-filter {
width: 100%;
width: 100%;
}
// theme
.p-listbox {
background: $inputListBg;
color: $inputListTextColor;
border: $inputListBorder;
border-radius: $borderRadius;
transition: $formElementTransition;
outline-color: transparent;
background: $inputListBg;
color: $inputListTextColor;
border: $inputListBorder;
border-radius: $borderRadius;
transition: $formElementTransition;
outline-color: transparent;
.p-listbox-header {
padding: $inputListHeaderPadding;
border-bottom: $inputListHeaderBorder;
color: $inputListHeaderTextColor;
background: $inputListHeaderBg;
margin: $inputListHeaderMargin;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
.p-listbox-header {
padding: $inputListHeaderPadding;
border-bottom: $inputListHeaderBorder;
color: $inputListHeaderTextColor;
background: $inputListHeaderBg;
margin: $inputListHeaderMargin;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
.p-listbox-filter {
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
}
.p-listbox-filter-icon {
right: nth($inputPadding, 2);
color: $inputIconColor;
}
.p-listbox-filter {
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
}
.p-listbox-list {
padding: $inputListPadding;
outline: 0 none;
.p-listbox-filter-icon {
right: nth($inputPadding, 2);
color: $inputIconColor;
}
}
.p-listbox-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
.p-listbox-list {
padding: $inputListPadding;
outline: 0 none;
&:first-child {
margin-top: 0;
}
.p-listbox-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
&:last-child {
margin-bottom: 0;
}
&:first-child {
margin-top: 0;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
}
}
&:last-child {
margin-bottom: 0;
}
.p-listbox-item-group {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
}
.p-listbox-empty-message {
padding: $inputListItemPadding;
color: $inputListItemTextColor;
background: $inputListItemBg;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
}
}
&:not(.p-disabled) {
.p-listbox-item {
&.p-highlight {
&.p-focus {
background: $highlightFocusBg;
}
}
.p-listbox-item-group {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
.p-listbox-empty-message {
padding: $inputListItemPadding;
color: $inputListItemTextColor;
background: $inputListItemBg;
}
}
&:hover {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
}
&:not(.p-disabled) {
.p-listbox-item {
&.p-highlight {
&.p-focus {
background: $highlightFocusBg;
}
}
}
&.p-focus {
@include focused-input();
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
&.p-invalid {
@include invalid-input();
&:hover {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
}
}
}
}
&.p-focus {
@include focused-input();
}
&.p-invalid {
@include invalid-input();
}
}

380
frontend/public/primevue-sass-theme/theme-base/components/input/_multiselect.scss
View File

@ -2,277 +2,275 @@
// core
.p-multiselect {
display: inline-flex;
cursor: pointer;
user-select: none;
display: inline-flex;
cursor: pointer;
user-select: none;
}
.p-multiselect-trigger {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-multiselect-label-container {
overflow: hidden;
flex: 1 1 auto;
cursor: pointer;
overflow: hidden;
flex: 1 1 auto;
cursor: pointer;
}
.p-multiselect-label {
display: block;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
}
.p-multiselect-label-empty {
overflow: hidden;
visibility: hidden;
overflow: hidden;
visibility: hidden;
}
.p-multiselect-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-multiselect-token-icon {
cursor: pointer;
cursor: pointer;
}
.p-multiselect .p-multiselect-panel {
min-width: 100%;
min-width: 100%;
}
.p-multiselect-items-wrapper {
overflow: auto;
overflow: auto;
}
.p-multiselect-items {
margin: 0;
padding: 0;
list-style-type: none;
margin: 0;
padding: 0;
list-style-type: none;
}
.p-multiselect-item {
cursor: pointer;
display: flex;
align-items: center;
font-weight: normal;
white-space: nowrap;
position: relative;
overflow: hidden;
cursor: pointer;
display: flex;
align-items: center;
font-weight: normal;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.p-multiselect-item-group {
cursor: auto;
cursor: auto;
}
.p-multiselect-header {
display: flex;
align-items: center;
justify-content: space-between;
display: flex;
align-items: center;
justify-content: space-between;
}
.p-multiselect-filter-container {
position: relative;
flex: 1 1 auto;
position: relative;
flex: 1 1 auto;
}
.p-multiselect-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-multiselect-filter-container .p-inputtext {
width: 100%;
width: 100%;
}
.p-multiselect-close {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
position: relative;
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
position: relative;
margin-left: auto;
}
.p-fluid .p-multiselect {
display: flex;
display: flex;
}
// theme
.p-multiselect {
background: $inputBg;
border: $inputBorder;
transition: $formElementTransition;
border-radius: $borderRadius;
outline-color: transparent;
background: $inputBg;
border: $inputBorder;
transition: $formElementTransition;
border-radius: $borderRadius;
outline-color: transparent;
&:not(.p-disabled):hover {
border-color: $inputHoverBorderColor;
}
&:not(.p-disabled).p-focus {
@include focused-input();
}
&.p-variant-filled {
background: $inputFilledBg;
&:not(.p-disabled):hover {
border-color: $inputHoverBorderColor;
background-color: $inputFilledHoverBg;
}
&:not(.p-disabled).p-focus {
@include focused-input();
background-color: $inputFilledFocusBg;
}
}
&.p-variant-filled {
background: $inputFilledBg;
.p-multiselect-label {
padding: $inputPadding;
transition: $formElementTransition;
&:not(.p-disabled):hover {
background-color: $inputFilledHoverBg;
}
&:not(.p-disabled).p-focus {
background-color: $inputFilledFocusBg;
}
&.p-placeholder {
color: $inputPlaceholderTextColor;
}
}
.p-multiselect-label {
padding: $inputPadding;
transition: $formElementTransition;
&.p-multiselect-chip {
.p-multiselect-token {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
margin-right: $inlineSpacing;
background: $chipBg;
color: $chipTextColor;
border-radius: $chipBorderRadius;
&.p-placeholder {
color: $inputPlaceholderTextColor;
}
.p-multiselect-token-icon {
margin-left: $inlineSpacing;
}
}
}
&.p-multiselect-chip {
.p-multiselect-token {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
margin-right: $inlineSpacing;
background: $chipBg;
color: $chipTextColor;
border-radius: $chipBorderRadius;
.p-multiselect-trigger {
background: transparent;
color: $inputIconColor;
width: $inputGroupAddOnMinWidth;
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
.p-multiselect-token-icon {
margin-left: $inlineSpacing;
}
}
}
.p-multiselect-trigger {
background: transparent;
color: $inputIconColor;
width: $inputGroupAddOnMinWidth;
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
&.p-invalid.p-component {
@include invalid-input();
}
&.p-invalid.p-component {
@include invalid-input();
}
}
.p-inputwrapper-filled {
&.p-multiselect {
&.p-multiselect-chip {
.p-multiselect-label {
padding: math.div(nth($inputPadding, 1), 2)
nth($inputPadding, 2);
}
}
&.p-multiselect {
&.p-multiselect-chip {
.p-multiselect-label {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
}
}
}
}
.p-multiselect-panel {
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
box-shadow: $inputOverlayShadow;
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
box-shadow: $inputOverlayShadow;
.p-multiselect-header {
padding: $inputListHeaderPadding;
border-bottom: $inputListHeaderBorder;
color: $inputListHeaderTextColor;
background: $inputOverlayHeaderBg;
margin: $inputListHeaderMargin;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
.p-multiselect-header {
padding: $inputListHeaderPadding;
border-bottom: $inputListHeaderBorder;
color: $inputListHeaderTextColor;
background: $inputOverlayHeaderBg;
margin: $inputListHeaderMargin;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
.p-multiselect-filter-container {
.p-inputtext {
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
}
.p-multiselect-filter-container {
.p-inputtext {
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
}
.p-multiselect-filter-icon {
right: nth($inputPadding, 2);
color: $inputIconColor;
}
}
.p-checkbox {
margin-right: $inlineSpacing;
}
.p-multiselect-close {
margin-left: $inlineSpacing;
@include action-icon();
}
.p-multiselect-filter-icon {
right: nth($inputPadding, 2);
color: $inputIconColor;
}
}
.p-multiselect-items {
padding: $inputListPadding;
.p-multiselect-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
.p-checkbox {
margin-right: $inlineSpacing;
}
}
.p-multiselect-item-group {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
}
.p-multiselect-empty-message {
padding: $inputListItemPadding;
color: $inputListItemTextColor;
background: $inputListItemBg;
}
.p-checkbox {
margin-right: $inlineSpacing;
}
.p-multiselect-close {
margin-left: $inlineSpacing;
@include action-icon();
}
}
.p-multiselect-items {
padding: $inputListPadding;
.p-multiselect-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
.p-checkbox {
margin-right: $inlineSpacing;
}
}
.p-multiselect-item-group {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
}
.p-multiselect-empty-message {
padding: $inputListItemPadding;
color: $inputListItemTextColor;
background: $inputListItemBg;
}
}
}

62
frontend/public/primevue-sass-theme/theme-base/components/input/_password.scss
View File

@ -1,62 +1,62 @@
// core
.p-password {
display: inline-flex;
display: inline-flex;
}
.p-password .p-password-panel {
min-width: 100%;
min-width: 100%;
}
.p-password-meter {
height: 10px;
height: 10px;
}
.p-password-strength {
height: 100%;
width: 0;
transition: width 1s ease-in-out;
height: 100%;
width: 0;
transition: width 1s ease-in-out;
}
.p-fluid .p-password {
display: flex;
display: flex;
}
.p-password-input::-ms-reveal,
.p-password-input::-ms-clear {
display: none;
display: none;
}
// theme
.p-password {
&.p-invalid.p-component > .p-inputtext {
@include invalid-input();
}
&.p-invalid.p-component > .p-inputtext {
@include invalid-input();
}
}
.p-password-panel {
padding: $panelContentPadding;
background: $panelContentBg;
color: $panelContentTextColor;
border: $overlayContentBorder;
box-shadow: $inputOverlayShadow;
border-radius: $borderRadius;
padding: $panelContentPadding;
background: $panelContentBg;
color: $panelContentTextColor;
border: $overlayContentBorder;
box-shadow: $inputOverlayShadow;
border-radius: $borderRadius;
.p-password-meter {
margin-bottom: $inlineSpacing;
background: $passwordMeterBg;
.p-password-meter {
margin-bottom: $inlineSpacing;
background: $passwordMeterBg;
.p-password-strength {
&.weak {
background: $passwordWeakBg;
}
.p-password-strength {
&.weak {
background: $passwordWeakBg;
}
&.medium {
background: $passwordMediumBg;
}
&.medium {
background: $passwordMediumBg;
}
&.strong {
background: $passwordStrongBg;
}
}
&.strong {
background: $passwordStrongBg;
}
}
}
}

240
frontend/public/primevue-sass-theme/theme-base/components/input/_radiobutton.scss
View File

@ -1,170 +1,170 @@
// core
.p-radiobutton {
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
}
.p-radiobutton-input {
cursor: pointer;
cursor: pointer;
}
.p-radiobutton-box {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
.p-radiobutton-icon {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0) scale(.1);
border-radius: 50%;
visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0) scale(0.1);
border-radius: 50%;
visibility: hidden;
}
.p-radiobutton.p-highlight .p-radiobutton-icon {
transform: translateZ(0) scale(1.0, 1.0);
visibility: visible;
transform: translateZ(0) scale(1, 1);
visibility: visible;
}
// theme
.p-radiobutton {
width: $radiobuttonWidth;
height: $radiobuttonHeight;
.p-radiobutton-input {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border: $radiobuttonBorder;
border-radius: 50%;
}
.p-radiobutton-box {
border: $radiobuttonBorder;
background: $inputBg;
width: $radiobuttonWidth;
height: $radiobuttonHeight;
color: $textColor;
border-radius: 50%;
transition: $formElementTransition;
outline-color: transparent;
.p-radiobutton-input {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border: $radiobuttonBorder;
border-radius: 50%;
.p-radiobutton-icon {
width: $radiobuttonIconSize;
height: $radiobuttonIconSize;
transition-duration: $transitionDuration;
background-color: $radiobuttonIconActiveColor;
}
}
&.p-highlight {
.p-radiobutton-box {
border-color: $radiobuttonActiveBorderColor;
background: $radiobuttonActiveBg;
}
}
&:not(.p-disabled) {
&:has(.p-radiobutton-input:hover) {
.p-radiobutton-box {
border-color: $inputHoverBorderColor;
}
&.p-highlight {
.p-radiobutton-box {
border-color: $radiobuttonActiveHoverBorderColor;
background: $radiobuttonActiveHoverBg;
.p-radiobutton-icon {
background-color: $radiobuttonIconActiveHoverColor;
}
}
}
}
.p-radiobutton-box {
border: $radiobuttonBorder;
background: $inputBg;
width: $radiobuttonWidth;
height: $radiobuttonHeight;
color: $textColor;
border-radius: 50%;
transition: $formElementTransition;
outline-color: transparent;
&:has(.p-radiobutton-input:focus-visible) {
.p-radiobutton-box {
@include focused-input();
}
}
}
.p-radiobutton-icon {
width: $radiobuttonIconSize;
height: $radiobuttonIconSize;
transition-duration: $transitionDuration;
background-color: $radiobuttonIconActiveColor;
}
&.p-invalid > .p-radiobutton-box {
@include invalid-input();
}
&.p-variant-filled {
.p-radiobutton-box {
background-color: $inputFilledBg;
}
&.p-highlight {
.p-radiobutton-box {
border-color: $radiobuttonActiveBorderColor;
background: $radiobuttonActiveBg;
}
.p-radiobutton-box {
background: $radiobuttonActiveBg;
}
}
&:not(.p-disabled) {
&:has(.p-radiobutton-input:hover) {
.p-radiobutton-box {
border-color: $inputHoverBorderColor;
}
&.p-highlight {
.p-radiobutton-box {
border-color: $radiobuttonActiveHoverBorderColor;
background: $radiobuttonActiveHoverBg;
.p-radiobutton-icon {
background-color: $radiobuttonIconActiveHoverColor;
}
}
}
}
&:has(.p-radiobutton-input:focus-visible) {
.p-radiobutton-box {
@include focused-input();
}
}
}
&.p-invalid > .p-radiobutton-box {
@include invalid-input();
}
&.p-variant-filled {
&:has(.p-radiobutton-input:hover) {
.p-radiobutton-box {
background-color: $inputFilledBg;
background-color: $inputFilledHoverBg;
}
&.p-highlight {
.p-radiobutton-box {
background: $radiobuttonActiveBg;
}
}
&:not(.p-disabled) {
&:has(.p-radiobutton-input:hover) {
.p-radiobutton-box {
background-color: $inputFilledHoverBg;
}
&.p-highlight {
.p-radiobutton-box {
background: $radiobuttonActiveHoverBg;
}
}
}
.p-radiobutton-box {
background: $radiobuttonActiveHoverBg;
}
}
}
}
}
}
.p-input-filled {
.p-radiobutton {
.p-radiobutton {
.p-radiobutton-box {
background-color: $inputFilledBg;
}
&.p-highlight {
.p-radiobutton-box {
background: $radiobuttonActiveBg;
}
}
&:not(.p-disabled) {
&:has(.p-radiobutton-input:hover) {
.p-radiobutton-box {
background-color: $inputFilledBg;
background-color: $inputFilledHoverBg;
}
&.p-highlight {
.p-radiobutton-box {
background: $radiobuttonActiveBg;
}
}
&:not(.p-disabled) {
&:has(.p-radiobutton-input:hover) {
.p-radiobutton-box {
background-color: $inputFilledHoverBg;
}
&.p-highlight {
.p-radiobutton-box {
background: $radiobuttonActiveHoverBg;
}
}
}
.p-radiobutton-box {
background: $radiobuttonActiveHoverBg;
}
}
}
}
}
}
@if ($highlightBg == $radiobuttonActiveBg) {
.p-highlight {
.p-radiobutton {
.p-radiobutton-box {
border-color: $radiobuttonIconActiveColor;
}
}
.p-highlight {
.p-radiobutton {
.p-radiobutton-box {
border-color: $radiobuttonIconActiveColor;
}
}
}
}

114
frontend/public/primevue-sass-theme/theme-base/components/input/_rating.scss
View File

@ -1,81 +1,81 @@
@use 'sass:math';
@use "sass:math";
// core
.p-rating {
position: relative;
display: flex;
align-items: center;
position: relative;
display: flex;
align-items: center;
}
.p-rating-item {
display: inline-flex;
align-items: center;
cursor: pointer;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.p-rating.p-readonly .p-rating-item {
cursor: default;
cursor: default;
}
// theme
.p-rating {
gap: $inlineSpacing;
gap: $inlineSpacing;
.p-rating-item {
outline-color: transparent;
border-radius: 50%;
.p-rating-icon {
color: $ratingStarIconOffColor;
transition: $formElementTransition;
font-size: $ratingIconFontSize;
&.p-icon {
width: $ratingIconFontSize;
height: $ratingIconFontSize;
}
&.p-rating-cancel {
color: $ratingCancelIconColor;
}
}
&.p-focus {
@include focused();
}
&.p-rating-item-active {
.p-rating-icon {
color: $ratingStarIconOnColor;
}
}
}
&:not(.p-disabled):not(.p-readonly) {
.p-rating-item {
outline-color: transparent;
border-radius: 50%;
&:hover {
.p-rating-icon {
color: $ratingStarIconOffColor;
transition: $formElementTransition;
font-size: $ratingIconFontSize;
color: $ratingStarIconHoverColor;
&.p-icon {
width: $ratingIconFontSize;
height: $ratingIconFontSize;
}
&.p-rating-cancel {
color: $ratingCancelIconColor;
}
}
&.p-focus {
@include focused();
}
&.p-rating-item-active {
.p-rating-icon {
color: $ratingStarIconOnColor;
}
}
}
&:not(.p-disabled):not(.p-readonly) {
.p-rating-item {
&:hover {
.p-rating-icon {
color: $ratingStarIconHoverColor;
&.p-rating-cancel {
color: $ratingCancelIconHoverColor;
}
}
}
&.p-rating-cancel {
color: $ratingCancelIconHoverColor;
}
}
}
}
}
}
@if ($highlightBg == $ratingStarIconOnColor) {
.p-highlight {
.p-rating {
.p-rating-item {
&.p-rating-item-active {
.p-rating-icon {
color: $highlightTextColor;
}
}
}
.p-highlight {
.p-rating {
.p-rating-item {
&.p-rating-item-active {
.p-rating-icon {
color: $highlightTextColor;
}
}
}
}
}
}
}

86
frontend/public/primevue-sass-theme/theme-base/components/input/_selectbutton.scss
View File

@ -1,50 +1,50 @@
.p-selectbutton {
.p-button {
background: $toggleButtonBg;
border: $toggleButtonBorder;
color: $toggleButtonTextColor;
transition: $formElementTransition;
.p-button {
background: $toggleButtonBg;
border: $toggleButtonBorder;
color: $toggleButtonTextColor;
transition: $formElementTransition;
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconColor;
}
&:not(.p-disabled):not(.p-highlight):hover {
background: $toggleButtonHoverBg;
border-color: $toggleButtonHoverBorderColor;
color: $toggleButtonTextHoverColor;
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconHoverColor;
}
}
&.p-highlight {
background: $toggleButtonActiveBg;
border-color: $toggleButtonActiveBorderColor;
color: $toggleButtonTextActiveColor;
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconActiveColor;
}
&:hover {
background: $toggleButtonActiveHoverBg;
border-color: $toggleButtonActiveHoverBorderColor;
color: $toggleButtonTextActiveHoverColor;
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconColor;
}
&:not(.p-disabled):not(.p-highlight):hover {
background: $toggleButtonHoverBg;
border-color: $toggleButtonHoverBorderColor;
color: $toggleButtonTextHoverColor;
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconHoverColor;
}
}
&.p-highlight {
background: $toggleButtonActiveBg;
border-color: $toggleButtonActiveBorderColor;
color: $toggleButtonTextActiveColor;
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconActiveColor;
}
&:hover {
background: $toggleButtonActiveHoverBg;
border-color: $toggleButtonActiveHoverBorderColor;
color: $toggleButtonTextActiveHoverColor;
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconActiveHoverColor;
}
}
color: $toggleButtonIconActiveHoverColor;
}
}
}
}
&.p-invalid > .p-button {
@include invalid-input();
}
}
&.p-invalid > .p-button {
@include invalid-input();
}
}

110
frontend/public/primevue-sass-theme/theme-base/components/input/_slider.scss
View File

@ -1,91 +1,91 @@
@use 'sass:math';
@use "sass:math";
// core
.p-slider {
position: relative;
position: relative;
}
.p-slider .p-slider-handle {
cursor: grab;
touch-action: none;
display: block;
cursor: grab;
touch-action: none;
display: block;
}
.p-slider-range {
display: block;
display: block;
}
.p-slider-horizontal .p-slider-range {
top: 0;
left: 0;
height: 100%;
top: 0;
left: 0;
height: 100%;
}
.p-slider-horizontal .p-slider-handle {
top: 50%;
top: 50%;
}
.p-slider-vertical {
height: 100px;
height: 100px;
}
.p-slider-vertical .p-slider-handle {
left: 50%;
left: 50%;
}
.p-slider-vertical .p-slider-range {
bottom: 0;
left: 0;
width: 100%;
bottom: 0;
left: 0;
width: 100%;
}
// theme
.p-slider {
background: $sliderBg;
border: $sliderBorder;
border-radius: $borderRadius;
background: $sliderBg;
border: $sliderBorder;
border-radius: $borderRadius;
&.p-slider-horizontal {
height: $sliderHorizontalHeight;
.p-slider-handle {
margin-top: math.div(-1 * $sliderHandleHeight, 2);
margin-left: math.div(-1 * $sliderHandleWidth, 2);
}
}
&.p-slider-vertical {
width: $sliderVerticalWidth;
.p-slider-handle {
margin-left: math.div(-1 * $sliderHandleWidth, 2);
margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
}
}
&.p-slider-horizontal {
height: $sliderHorizontalHeight;
.p-slider-handle {
height: $sliderHandleHeight;
width: $sliderHandleWidth;
background: $sliderHandleBg;
border: $sliderHandleBorder;
border-radius: $sliderHandleBorderRadius;
transition: $formElementTransition;
outline-color: transparent;
&:focus-visible {
@include focused();
}
margin-top: math.div(-1 * $sliderHandleHeight, 2);
margin-left: math.div(-1 * $sliderHandleWidth, 2);
}
}
.p-slider-range {
background: $sliderRangeBg;
border-radius: $borderRadius;
}
&.p-slider-vertical {
width: $sliderVerticalWidth;
&:not(.p-disabled) {
.p-slider-handle:hover {
background: $sliderHandleHoverBg;
border-color: $sliderHandleHoverBorderColor;
}
.p-slider-handle {
margin-left: math.div(-1 * $sliderHandleWidth, 2);
margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
}
}
.p-slider-handle {
height: $sliderHandleHeight;
width: $sliderHandleWidth;
background: $sliderHandleBg;
border: $sliderHandleBorder;
border-radius: $sliderHandleBorderRadius;
transition: $formElementTransition;
outline-color: transparent;
&:focus-visible {
@include focused();
}
}
.p-slider-range {
background: $sliderRangeBg;
border-radius: $borderRadius;
}
&:not(.p-disabled) {
.p-slider-handle:hover {
background: $sliderHandleHoverBg;
border-color: $sliderHandleHoverBorderColor;
}
}
}

8
frontend/public/primevue-sass-theme/theme-base/components/input/_textarea.scss
View File

@ -1,9 +1,9 @@
// core
.p-inputtextarea-resizable {
overflow: hidden;
resize: none;
overflow: hidden;
resize: none;
}
.p-fluid .p-inputtextarea {
width: 100%;
}
width: 100%;
}

152
frontend/public/primevue-sass-theme/theme-base/components/input/_togglebutton.scss
View File

@ -1,100 +1,100 @@
// core
.p-togglebutton {
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
}
.p-togglebutton-input {
cursor: pointer;
cursor: pointer;
}
.p-togglebutton .p-button {
flex: 1 1 auto;
flex: 1 1 auto;
}
// theme
.p-togglebutton {
.p-togglebutton-input {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border: $toggleButtonBorder;
border-radius: $borderRadius;
}
.p-togglebutton-input {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border: $toggleButtonBorder;
border-radius: $borderRadius;
}
.p-button {
background: $toggleButtonBg;
border: $toggleButtonBorder;
color: $toggleButtonTextColor;
transition: $formElementTransition;
outline-color: transparent;
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconColor;
}
}
&.p-highlight {
.p-button {
background: $toggleButtonBg;
border: $toggleButtonBorder;
color: $toggleButtonTextColor;
transition: $formElementTransition;
outline-color: transparent;
background: $toggleButtonActiveBg;
border-color: $toggleButtonActiveBorderColor;
color: $toggleButtonTextActiveColor;
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconColor;
}
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconActiveColor;
}
}
}
&.p-highlight {
&:not(.p-disabled) {
&:has(.p-togglebutton-input:hover) {
&:not(.p-highlight) {
.p-button {
background: $toggleButtonActiveBg;
border-color: $toggleButtonActiveBorderColor;
color: $toggleButtonTextActiveColor;
background: $toggleButtonHoverBg;
border-color: $toggleButtonHoverBorderColor;
color: $toggleButtonTextHoverColor;
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconActiveColor;
}
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconHoverColor;
}
}
}
&.p-highlight {
.p-button {
background: $toggleButtonActiveHoverBg;
border-color: $toggleButtonActiveHoverBorderColor;
color: $toggleButtonTextActiveHoverColor;
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconActiveHoverColor;
}
}
}
}
&:not(.p-disabled) {
&:has(.p-togglebutton-input:hover) {
&:not(.p-highlight) {
.p-button {
background: $toggleButtonHoverBg;
border-color: $toggleButtonHoverBorderColor;
color: $toggleButtonTextHoverColor;
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconHoverColor;
}
}
}
&.p-highlight {
.p-button {
background: $toggleButtonActiveHoverBg;
border-color: $toggleButtonActiveHoverBorderColor;
color: $toggleButtonTextActiveHoverColor;
.p-button-icon-left,
.p-button-icon-right {
color: $toggleButtonIconActiveHoverColor;
}
}
}
}
&:has(.p-togglebutton-input:focus-visible) {
.p-button {
@include focused-input();
}
}
&:has(.p-togglebutton-input:focus-visible) {
.p-button {
@include focused-input();
}
}
}
&.p-invalid > .p-button {
@include invalid-input();
}
}
&.p-invalid > .p-button {
@include invalid-input();
}
}

195
frontend/public/primevue-sass-theme/theme-base/components/input/_treeselect.scss
View File

@ -2,157 +2,156 @@
// core
.p-treeselect {
display: inline-flex;
cursor: pointer;
user-select: none;
display: inline-flex;
cursor: pointer;
user-select: none;
}
.p-treeselect-trigger {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-treeselect-label-container {
overflow: hidden;
flex: 1 1 auto;
cursor: pointer;
overflow: hidden;
flex: 1 1 auto;
cursor: pointer;
}
.p-treeselect-label {
display: block;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
}
.p-treeselect-label-empty {
overflow: hidden;
visibility: hidden;
overflow: hidden;
visibility: hidden;
}
.p-treeselect-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-treeselect .p-treeselect-panel {
min-width: 100%;
min-width: 100%;
}
.p-treeselect-items-wrapper {
overflow: auto;
overflow: auto;
}
.p-fluid .p-treeselect {
display: flex;
display: flex;
}
// theme
.p-treeselect {
background: $inputBg;
border: $inputBorder;
transition: $formElementTransition;
border-radius: $borderRadius;
outline-color: transparent;
background: $inputBg;
border: $inputBorder;
transition: $formElementTransition;
border-radius: $borderRadius;
outline-color: transparent;
&:not(.p-disabled):hover {
border-color: $inputHoverBorderColor;
}
&:not(.p-disabled).p-focus {
@include focused-input();
}
&.p-variant-filled {
background: $inputFilledBg;
&:not(.p-disabled):hover {
border-color: $inputHoverBorderColor;
background-color: $inputFilledHoverBg;
}
&:not(.p-disabled).p-focus {
@include focused-input();
background-color: $inputFilledFocusBg;
}
}
&.p-variant-filled {
background: $inputFilledBg;
.p-treeselect-label {
padding: $inputPadding;
transition: $formElementTransition;
&:not(.p-disabled):hover {
background-color: $inputFilledHoverBg;
}
&:not(.p-disabled).p-focus {
background-color: $inputFilledFocusBg;
}
&.p-placeholder {
color: $inputPlaceholderTextColor;
}
}
.p-treeselect-label {
padding: $inputPadding;
transition: $formElementTransition;
&.p-placeholder {
color: $inputPlaceholderTextColor;
}
&.p-treeselect-chip {
.p-treeselect-token {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
margin-right: $inlineSpacing;
background: $chipBg;
color: $chipTextColor;
border-radius: $chipBorderRadius;
}
}
&.p-treeselect-chip {
.p-treeselect-token {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
margin-right: $inlineSpacing;
background: $chipBg;
color: $chipTextColor;
border-radius: $chipBorderRadius;
}
}
.p-treeselect-trigger {
background: transparent;
color: $inputIconColor;
width: $inputGroupAddOnMinWidth;
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
.p-treeselect-trigger {
background: transparent;
color: $inputIconColor;
width: $inputGroupAddOnMinWidth;
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
&.p-invalid.p-component {
@include invalid-input();
}
&.p-invalid.p-component {
@include invalid-input();
}
}
.p-inputwrapper-filled {
&.p-treeselect {
&.p-treeselect-chip {
.p-treeselect-label {
padding: math.div(nth($inputPadding, 1), 2)
nth($inputPadding, 2);
}
}
&.p-treeselect {
&.p-treeselect-chip {
.p-treeselect-label {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
}
}
}
}
.p-treeselect-panel {
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
box-shadow: $inputOverlayShadow;
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
box-shadow: $inputOverlayShadow;
.p-treeselect-items-wrapper {
.p-tree {
border: 0 none;
}
.p-treeselect-empty-message {
padding: $inputListItemPadding;
color: $inputListItemTextColor;
background: $inputListItemBg;
}
.p-treeselect-items-wrapper {
.p-tree {
border: 0 none;
}
.p-treeselect-empty-message {
padding: $inputListItemPadding;
color: $inputListItemTextColor;
background: $inputListItemBg;
}
}
}
.p-input-filled {
.p-treeselect {
background: $inputFilledBg;
.p-treeselect {
background: $inputFilledBg;
&:not(.p-disabled):hover {
background-color: $inputFilledHoverBg;
}
&:not(.p-disabled).p-focus {
background-color: $inputFilledFocusBg;
}
&:not(.p-disabled):hover {
background-color: $inputFilledHoverBg;
}
&:not(.p-disabled).p-focus {
background-color: $inputFilledFocusBg;
}
}
}

54
frontend/public/primevue-sass-theme/theme-base/components/input/_tristatecheckbox.scss
View File

@ -1,46 +1,46 @@
// core
.p-checkbox {
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
}
.p-checkbox-input {
cursor: pointer;
cursor: pointer;
}
.p-checkbox-box {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
// theme
.p-tristatecheckbox {
&.p-variant-filled {
&.p-variant-filled {
.p-checkbox-box {
background-color: $inputFilledBg;
}
&.p-highlight {
.p-checkbox-box {
background: $checkboxActiveBg;
}
}
&:not(.p-disabled) {
&:has(.p-checkbox-input:hover) {
.p-checkbox-box {
background-color: $inputFilledBg;
background-color: $inputFilledHoverBg;
}
&.p-highlight {
.p-checkbox-box {
background: $checkboxActiveBg;
}
}
&:not(.p-disabled) {
&:has(.p-checkbox-input:hover) {
.p-checkbox-box {
background-color: $inputFilledHoverBg;
}
&.p-highlight {
.p-checkbox-box {
background: $checkboxActiveHoverBg;
}
}
}
.p-checkbox-box {
background: $checkboxActiveHoverBg;
}
}
}
}
}
}

102
frontend/public/primevue-sass-theme/theme-base/components/menu/_breadcrumb.scss
View File

@ -1,77 +1,77 @@
// core
.p-breadcrumb {
overflow-x: auto;
overflow-x: auto;
}
.p-breadcrumb .p-breadcrumb-list {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
flex-wrap: nowrap;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.p-breadcrumb .p-menuitem-text {
line-height: 1;
line-height: 1;
}
.p-breadcrumb .p-menuitem-link {
text-decoration: none;
display: flex;
align-items: center;
text-decoration: none;
display: flex;
align-items: center;
}
.p-breadcrumb .p-menuitem-separator {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.p-breadcrumb::-webkit-scrollbar {
display: none;
display: none;
}
// theme
.p-breadcrumb {
background: $breadcrumbBg;
border: $breadcrumbBorder;
border-radius: $borderRadius;
padding: $breadcrumbPadding;
background: $breadcrumbBg;
border: $breadcrumbBorder;
border-radius: $borderRadius;
padding: $breadcrumbPadding;
.p-breadcrumb-list {
li {
.p-menuitem-link {
transition: $listItemTransition;
border-radius: $borderRadius;
outline-color: transparent;
.p-breadcrumb-list {
li {
.p-menuitem-link {
transition: $listItemTransition;
border-radius: $borderRadius;
outline-color: transparent;
&:focus-visible {
@include focused();
}
.p-menuitem-text {
color: $breadcrumbItemTextColor;
}
.p-menuitem-icon {
color: $breadcrumbItemIconColor;
}
}
&.p-menuitem-separator {
margin: 0 $inlineSpacing 0 $inlineSpacing;
color: $breadcrumbSeparatorColor;
}
&:last-child {
.p-menuitem-text {
color: $breadcrumbLastItemTextColor;
}
.p-menuitem-icon {
color: $breadcrumbLastItemIconColor;
}
}
&:focus-visible {
@include focused();
}
.p-menuitem-text {
color: $breadcrumbItemTextColor;
}
.p-menuitem-icon {
color: $breadcrumbItemIconColor;
}
}
&.p-menuitem-separator {
margin: 0 $inlineSpacing 0 $inlineSpacing;
color: $breadcrumbSeparatorColor;
}
&:last-child {
.p-menuitem-text {
color: $breadcrumbLastItemTextColor;
}
.p-menuitem-icon {
color: $breadcrumbLastItemIconColor;
}
}
}
}
}

94
frontend/public/primevue-sass-theme/theme-base/components/menu/_contextmenu.scss
View File

@ -1,83 +1,83 @@
// core
.p-contextmenu ul {
margin: 0;
padding: 0;
list-style: none;
margin: 0;
padding: 0;
list-style: none;
}
.p-contextmenu .p-submenu-list {
position: absolute;
min-width: 100%;
z-index: 1;
position: absolute;
min-width: 100%;
z-index: 1;
}
.p-contextmenu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-contextmenu .p-menuitem-text {
line-height: 1;
line-height: 1;
}
.p-contextmenu .p-menuitem {
position: relative;
position: relative;
}
.p-contextmenu .p-menuitem-link .p-submenu-icon {
margin-left: auto;
margin-left: auto;
}
.p-contextmenu-enter-from,
.p-contextmenu-leave-active {
opacity: 0;
opacity: 0;
}
.p-contextmenu-enter-active {
transition: opacity 250ms;
transition: opacity 250ms;
}
// theme
.p-contextmenu {
padding: $verticalMenuPadding;
background: $overlayMenuBg;
color: $menuTextColor;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
border-radius: $borderRadius;
min-width: $menuWidth;
.p-contextmenu-root-list {
outline: 0 none;
}
.p-submenu-list {
padding: $verticalMenuPadding;
background: $overlayMenuBg;
color: $menuTextColor;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
border-radius: $borderRadius;
min-width: $menuWidth;
}
.p-contextmenu-root-list {
outline: 0 none;
}
.p-submenu-list {
padding: $verticalMenuPadding;
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
border-radius: $borderRadius;
}
.p-menuitem {
@include menuitem();
}
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-submenu-icon {
font-size: $menuitemSubmenuIconFontSize;
&.p-icon {
width: $menuitemSubmenuIconFontSize;
height: $menuitemSubmenuIconFontSize;
}
.p-menuitem {
@include menuitem();
}
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-submenu-icon {
font-size: $menuitemSubmenuIconFontSize;
&.p-icon {
width: $menuitemSubmenuIconFontSize;
height: $menuitemSubmenuIconFontSize;
}
}
}

236
frontend/public/primevue-sass-theme/theme-base/components/menu/_dock.scss
View File

@ -1,201 +1,201 @@
// core
.p-dock {
position: absolute;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
position: absolute;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.p-dock-list-container {
display: flex;
pointer-events: auto;
display: flex;
pointer-events: auto;
}
.p-dock-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
.p-dock-item {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.p-dock-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
cursor: default;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
cursor: default;
}
.p-dock-item-second-prev,
.p-dock-item-second-next {
transform: scale(1.2);
transform: scale(1.2);
}
.p-dock-item-prev,
.p-dock-item-next {
transform: scale(1.4);
transform: scale(1.4);
}
.p-dock-item-current {
transform: scale(1.6);
z-index: 1;
transform: scale(1.6);
z-index: 1;
}
/* Position */
/* top */
.p-dock-top {
left: 0;
top: 0;
width: 100%;
left: 0;
top: 0;
width: 100%;
}
.p-dock-top .p-dock-item {
transform-origin: center top;
transform-origin: center top;
}
/* bottom */
.p-dock-bottom {
left: 0;
bottom: 0;
width: 100%;
left: 0;
bottom: 0;
width: 100%;
}
.p-dock-bottom .p-dock-item {
transform-origin: center bottom;
transform-origin: center bottom;
}
/* right */
.p-dock-right {
right: 0;
top: 0;
height: 100%;
right: 0;
top: 0;
height: 100%;
}
.p-dock-right .p-dock-item {
transform-origin: center right;
transform-origin: center right;
}
.p-dock-right .p-dock-list {
flex-direction: column;
flex-direction: column;
}
/* left */
.p-dock-left {
left: 0;
top: 0;
height: 100%;
left: 0;
top: 0;
height: 100%;
}
.p-dock-left .p-dock-item {
transform-origin: center left;
transform-origin: center left;
}
.p-dock-left .p-dock-list {
flex-direction: column;
flex-direction: column;
}
// theme
.p-dock {
.p-dock-list-container {
background: $dockBg;
border: $dockBorder;
padding: $dockPadding;
border-radius: $dockBorderRadius;
.p-dock-list-container {
background: $dockBg;
border: $dockBorder;
padding: $dockPadding;
border-radius: $dockBorderRadius;
.p-dock-list {
outline: 0 none;
}
.p-dock-list {
outline: 0 none;
}
.p-dock-item {
padding: $dockItemPadding;
border-radius: $dockItemBorderRadius;
}
&.p-focus {
@include focused-listitem();
}
.p-dock-item {
padding: $dockItemPadding;
border-radius: $dockItemBorderRadius;
&.p-focus {
@include focused-listitem();
}
}
.p-dock-link {
width: $dockActionWidth;
height: $dockActionHeight;
}
&.p-dock-top,
&.p-dock-bottom {
.p-dock-item-second-prev,
.p-dock-item-second-next {
margin: 0 $dockSecondItemsMargin;
}
.p-dock-link {
width: $dockActionWidth;
height: $dockActionHeight;
.p-dock-item-prev,
.p-dock-item-next {
margin: 0 $dockFirstItemsMargin;
}
.p-dock-item-current {
margin: 0 $dockCurrentItemMargin;
}
}
&.p-dock-left,
&.p-dock-right {
.p-dock-item-second-prev,
.p-dock-item-second-next {
margin: $dockSecondItemsMargin 0;
}
.p-dock-item-prev,
.p-dock-item-next {
margin: $dockFirstItemsMargin 0;
}
.p-dock-item-current {
margin: $dockCurrentItemMargin 0;
}
}
&.p-dock-mobile {
&.p-dock-top,
&.p-dock-bottom {
.p-dock-item-second-prev,
.p-dock-item-second-next {
margin: 0 $dockSecondItemsMargin;
}
.p-dock-list-container {
overflow-x: auto;
width: 100%;
.p-dock-item-prev,
.p-dock-item-next {
margin: 0 $dockFirstItemsMargin;
}
.p-dock-item-current {
margin: 0 $dockCurrentItemMargin;
.p-dock-list {
margin: 0 auto;
}
}
}
&.p-dock-left,
&.p-dock-right {
.p-dock-item-second-prev,
.p-dock-item-second-next {
margin: $dockSecondItemsMargin 0;
}
.p-dock-item-prev,
.p-dock-item-next {
margin: $dockFirstItemsMargin 0;
}
.p-dock-item-current {
margin: $dockCurrentItemMargin 0;
}
}
&.p-dock-mobile {
&.p-dock-top,
&.p-dock-bottom {
.p-dock-list-container {
overflow-x: auto;
width: 100%;
.p-dock-list {
margin: 0 auto;
}
}
}
&.p-dock-left,
&.p-dock-right {
.p-dock-list-container {
overflow-y: auto;
height: 100%;
.p-dock-list {
margin: auto 0;
}
}
}
.p-dock-list-container {
overflow-y: auto;
height: 100%;
.p-dock-list {
.p-dock-item {
transform: none;
margin: 0;
}
margin: auto 0;
}
}
}
.p-dock-list {
.p-dock-item {
transform: none;
margin: 0;
}
}
}
}

379
frontend/public/primevue-sass-theme/theme-base/components/menu/_megamenu.scss
View File

@ -1,98 +1,106 @@
// core
.p-megamenu {
display: flex;
position: relative;
display: flex;
position: relative;
}
.p-megamenu-root-list {
margin: 0;
padding: 0;
list-style: none;
margin: 0;
padding: 0;
list-style: none;
}
.p-megamenu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-megamenu .p-menuitem-text {
line-height: 1;
line-height: 1;
}
.p-megamenu-panel {
display: none;
width: auto;
z-index: 1;
left: 0;
min-width: 100%;
display: none;
width: auto;
z-index: 1;
left: 0;
min-width: 100%;
}
.p-megamenu-panel:not(.p-megamenu-mobile) {
position: absolute;
position: absolute;
}
.p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
display: block;
display: block;
}
.p-megamenu-submenu {
margin: 0;
padding: 0;
list-style: none;
margin: 0;
padding: 0;
list-style: none;
}
.p-megamenu-button {
display: none;
cursor: pointer;
align-items: center;
justify-content: center;
text-decoration: none;
display: none;
cursor: pointer;
align-items: center;
justify-content: center;
text-decoration: none;
}
/* Horizontal */
.p-megamenu-horizontal {
align-items: center;
align-items: center;
}
.p-megamenu-horizontal .p-megamenu-root-list {
display: flex;
align-items: center;
flex-wrap: wrap;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-megamenu-horizontal .p-megamenu-end {
margin-left: auto;
align-self: center;
margin-left: auto;
align-self: center;
}
/* Vertical */
.p-megamenu-vertical {
flex-direction: column;
flex-direction: column;
}
.p-megamenu-vertical:not(.p-megamenu-mobile) {
display: inline-flex;
display: inline-flex;
}
.p-megamenu-vertical .p-megamenu-root-list {
flex-direction: column;
flex-direction: column;
}
.p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
left: 100%;
top: 0;
.p-megamenu-vertical:not(.p-megamenu-mobile)
.p-megamenu-root-list
> .p-menuitem-active
> .p-megamenu-panel {
left: 100%;
top: 0;
}
.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
margin-left: auto;
.p-megamenu-vertical
.p-megamenu-root-list
> .p-menuitem
> .p-menuitem-content
> .p-menuitem-link
> .p-submenu-icon {
margin-left: auto;
}
.p-megamenu-grid {
display: flex;
display: flex;
}
.p-megamenu-col-2,
@ -100,202 +108,201 @@
.p-megamenu-col-4,
.p-megamenu-col-6,
.p-megamenu-col-12 {
flex: 0 0 auto;
padding: 0.5rem;
flex: 0 0 auto;
padding: 0.5rem;
}
.p-megamenu-col-2 {
width: 16.6667%;
width: 16.6667%;
}
.p-megamenu-col-3 {
width: 25%;
width: 25%;
}
.p-megamenu-col-4 {
width: 33.3333%;
width: 33.3333%;
}
.p-megamenu-col-6 {
width: 50%;
width: 50%;
}
.p-megamenu-col-12 {
width: 100%;
width: 100%;
}
.p-megamenu.p-megamenu-mobile .p-megamenu-button {
display: flex;
display: flex;
}
.p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
position: absolute;
display: none;
width: 100%;
position: absolute;
display: none;
width: 100%;
}
.p-megamenu.p-megamenu-mobile .p-submenu-list {
width: 100%;
position: static;
box-shadow: none;
border: 0 none;
width: 100%;
position: static;
box-shadow: none;
border: 0 none;
}
.p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem {
width: 100%;
position: static;
width: 100%;
position: static;
}
.p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
display: flex;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
}
.p-megamenu.p-megamenu-mobile .p-megamenu-grid {
flex-wrap: wrap;
overflow: auto;
max-height: 90%;
flex-wrap: wrap;
overflow: auto;
max-height: 90%;
}
// theme
.p-megamenu {
padding: $horizontalMenuPadding;
background: $horizontalMenuBg;
color: $horizontalMenuTextColor;
border: $horizontalMenuBorder;
padding: $horizontalMenuPadding;
background: $horizontalMenuBg;
color: $horizontalMenuTextColor;
border: $horizontalMenuBorder;
border-radius: $borderRadius;
.p-megamenu-root-list {
outline: 0 none;
}
.p-menuitem {
@include menuitem();
}
.p-megamenu-panel {
background: $overlayMenuBg;
color: $menuTextColor;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
border-radius: $borderRadius;
}
.p-megamenu-root-list {
outline: 0 none;
.p-submenu-header {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
}
.p-submenu-list {
padding: $verticalMenuPadding;
min-width: $menuWidth;
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
}
.p-menuitem {
@include menuitem();
}
.p-megamenu-panel {
background: $overlayMenuBg;
color: $menuTextColor;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
border-radius: $borderRadius;
}
.p-submenu-header {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
}
.p-submenu-list {
padding: $verticalMenuPadding;
min-width: $menuWidth;
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
&.p-megamenu-vertical {
min-width: $menuWidth;
padding: $verticalMenuPadding;
}
&.p-megamenu-horizontal {
.p-megamenu-root-list {
> .p-menuitem {
@include horizontal-rootmenuitem();
}
}
}
&.p-megamenu-mobile {
&.p-megamenu-vertical {
min-width: $menuWidth;
padding: $verticalMenuPadding;
width: 100%;
padding: $horizontalMenuPadding;
}
&.p-megamenu-horizontal {
.p-megamenu-root-list {
> .p-menuitem {
@include horizontal-rootmenuitem();
}
}
.p-megamenu-button {
width: $actionIconWidth;
height: $actionIconHeight;
color: $horizontalMenuRootMenuitemIconColor;
border-radius: $actionIconBorderRadius;
transition: $actionIconTransition;
outline-color: transparent;
&:hover {
color: $horizontalMenuRootMenuitemIconHoverColor;
background: $horizontalMenuRootMenuitemHoverBg;
}
&:focus {
@include focused();
}
}
&.p-megamenu-mobile {
&.p-megamenu-vertical {
width: 100%;
padding: $horizontalMenuPadding;
}
.p-megamenu-root-list {
padding: $verticalMenuPadding;
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
.p-megamenu-button {
width: $actionIconWidth;
height: $actionIconHeight;
color: $horizontalMenuRootMenuitemIconColor;
border-radius: $actionIconBorderRadius;
transition: $actionIconTransition;
outline-color: transparent;
&:hover {
color: $horizontalMenuRootMenuitemIconHoverColor;
background: $horizontalMenuRootMenuitemHoverBg;
}
&:focus {
@include focused();
}
}
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-megamenu-root-list {
padding: $verticalMenuPadding;
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-submenu-icon {
font-size: $menuitemSubmenuIconFontSize;
}
.p-menuitem {
.p-menuitem-content {
.p-menuitem-link {
.p-submenu-icon {
font-size: $menuitemSubmenuIconFontSize;
margin-left: auto;
transition: transform $transitionDuration;
}
.p-menuitem {
.p-menuitem-content {
.p-menuitem-link {
.p-submenu-icon {
margin-left: auto;
transition: transform $transitionDuration;
}
}
}
&.p-menuitem-active {
> .p-menuitem-content {
> .p-menuitem-link {
> .p-submenu-icon {
transform: rotate(-180deg);
}
}
}
}
}
.p-submenu-list {
.p-submenu-icon {
transition: transform $transitionDuration;
transform: rotate(90deg);
}
.p-menuitem-active {
> .p-menuitem-content {
> .p-menuitem-link {
> .p-submenu-icon {
transform: rotate(-90deg);
}
}
}
}
}
@include nested-submenu-indents(nth($menuitemPadding, 1), 2, 2);
}
}
&.p-menuitem-active {
> .p-menuitem-content {
> .p-menuitem-link {
> .p-submenu-icon {
transform: rotate(-180deg);
}
}
}
}
}
.p-submenu-list {
.p-submenu-icon {
transition: transform $transitionDuration;
transform: rotate(90deg);
}
.p-menuitem-active {
> .p-menuitem-content {
> .p-menuitem-link {
> .p-submenu-icon {
transform: rotate(-90deg);
}
}
}
}
}
@include nested-submenu-indents(nth($menuitemPadding, 1), 2, 2);
}
}
}

74
frontend/public/primevue-sass-theme/theme-base/components/menu/_menu.scss
View File

@ -1,54 +1,54 @@
// core
.p-menu ul {
margin: 0;
padding: 0;
list-style: none;
margin: 0;
padding: 0;
list-style: none;
}
.p-menu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-menu .p-menuitem-text {
line-height: 1;
line-height: 1;
}
// theme
.p-menu {
padding: $verticalMenuPadding;
background: $menuBg;
color: $menuTextColor;
border: $menuBorder;
border-radius: $borderRadius;
min-width: $menuWidth;
padding: $verticalMenuPadding;
background: $menuBg;
color: $menuTextColor;
border: $menuBorder;
border-radius: $borderRadius;
min-width: $menuWidth;
.p-menuitem {
@include menuitem();
}
.p-menuitem {
@include menuitem();
}
&.p-menu-overlay {
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
}
&.p-menu-overlay {
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
}
.p-submenu-header {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
border-top-right-radius: $submenuHeaderBorderRadius;
border-top-left-radius: $submenuHeaderBorderRadius;
}
.p-submenu-header {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
border-top-right-radius: $submenuHeaderBorderRadius;
border-top-left-radius: $submenuHeaderBorderRadius;
}
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
}

310
frontend/public/primevue-sass-theme/theme-base/components/menu/_menubar.scss
View File

@ -1,222 +1,226 @@
// core
.p-menubar {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.p-menubar ul {
margin: 0;
padding: 0;
list-style: none;
margin: 0;
padding: 0;
list-style: none;
}
.p-menubar .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-menubar .p-menuitem-text {
line-height: 1;
line-height: 1;
}
.p-menubar .p-menuitem {
position: relative;
position: relative;
}
.p-menubar-root-list {
display: flex;
align-items: center;
flex-wrap: wrap;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-menubar-root-list > li ul {
display: none;
z-index: 1;
display: none;
z-index: 1;
}
.p-menubar-root-list > .p-menuitem-active > .p-submenu-list {
display: block;
display: block;
}
.p-menubar .p-submenu-list {
display: none;
position: absolute;
z-index: 1;
display: none;
position: absolute;
z-index: 1;
}
.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
display: block;
left: 100%;
top: 0;
display: block;
left: 100%;
top: 0;
}
.p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
margin-left: auto;
.p-menubar
.p-submenu-list
.p-menuitem
.p-menuitem-content
.p-menuitem-link
.p-submenu-icon {
margin-left: auto;
}
.p-menubar .p-menubar-end {
margin-left: auto;
align-self: center;
margin-left: auto;
align-self: center;
}
.p-menubar-button {
display: none;
cursor: pointer;
align-items: center;
justify-content: center;
text-decoration: none;
display: none;
cursor: pointer;
align-items: center;
justify-content: center;
text-decoration: none;
}
.p-menubar.p-menubar-mobile {
position: relative;
position: relative;
}
.p-menubar.p-menubar-mobile .p-menubar-button {
display: flex;
display: flex;
}
.p-menubar.p-menubar-mobile .p-menubar-root-list {
position: absolute;
display: none;
width: 100%;
position: absolute;
display: none;
width: 100%;
}
.p-menubar.p-menubar-mobile .p-submenu-list {
width: 100%;
position: static;
box-shadow: none;
border: 0 none;
width: 100%;
position: static;
box-shadow: none;
border: 0 none;
}
.p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem {
width: 100%;
position: static;
width: 100%;
position: static;
}
.p-menubar.p-menubar-mobile-active .p-menubar-root-list {
display: flex;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
}
// theme
.p-menubar {
padding: $horizontalMenuPadding;
background: $horizontalMenuBg;
color: $horizontalMenuTextColor;
border: $horizontalMenuBorder;
padding: $horizontalMenuPadding;
background: $horizontalMenuBg;
color: $horizontalMenuTextColor;
border: $horizontalMenuBorder;
border-radius: $borderRadius;
.p-menubar-root-list {
outline: 0 none;
> .p-menuitem {
@include horizontal-rootmenuitem();
}
}
.p-menuitem {
@include menuitem();
}
.p-submenu-list {
padding: $verticalMenuPadding;
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
min-width: $menuWidth;
border-radius: $borderRadius;
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-submenu-icon {
font-size: $menuitemSubmenuIconFontSize;
}
}
&.p-menubar-mobile {
.p-menubar-button {
width: $actionIconWidth;
height: $actionIconHeight;
color: $horizontalMenuRootMenuitemIconColor;
border-radius: $actionIconBorderRadius;
transition: $actionIconTransition;
outline-color: transparent;
&:hover {
color: $horizontalMenuRootMenuitemIconHoverColor;
background: $horizontalMenuRootMenuitemHoverBg;
}
&:focus {
@include focused();
}
}
.p-menubar-root-list {
outline: 0 none;
padding: $verticalMenuPadding;
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
> .p-menuitem {
@include horizontal-rootmenuitem();
}
}
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-menuitem {
@include menuitem();
}
.p-submenu-icon {
font-size: $menuitemSubmenuIconFontSize;
}
.p-submenu-list {
padding: $verticalMenuPadding;
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
min-width: $menuWidth;
border-radius: $borderRadius;
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-submenu-icon {
font-size: $menuitemSubmenuIconFontSize;
}
}
&.p-menubar-mobile {
.p-menubar-button {
width: $actionIconWidth;
height: $actionIconHeight;
color: $horizontalMenuRootMenuitemIconColor;
border-radius: $actionIconBorderRadius;
transition: $actionIconTransition;
outline-color: transparent;
&:hover {
color: $horizontalMenuRootMenuitemIconHoverColor;
background: $horizontalMenuRootMenuitemHoverBg;
}
&:focus {
@include focused();
}
}
.p-menubar-root-list {
padding: $verticalMenuPadding;
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-menuitem {
.p-menuitem-content {
.p-menuitem-link {
.p-submenu-icon {
font-size: $menuitemSubmenuIconFontSize;
margin-left: auto;
transition: transform $transitionDuration;
}
.p-menuitem {
.p-menuitem-content {
.p-menuitem-link {
.p-submenu-icon {
margin-left: auto;
transition: transform $transitionDuration;
}
}
}
&.p-menuitem-active {
> .p-menuitem-content {
> .p-menuitem-link {
> .p-submenu-icon {
transform: rotate(-180deg);
}
}
}
}
}
.p-submenu-list {
.p-submenu-icon {
transition: transform $transitionDuration;
transform: rotate(90deg);
}
.p-menuitem-active {
> .p-menuitem-content {
> .p-menuitem-link {
> .p-submenu-icon {
transform: rotate(-90deg);
}
}
}
}
}
@include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
}
}
&.p-menuitem-active {
> .p-menuitem-content {
> .p-menuitem-link {
> .p-submenu-icon {
transform: rotate(-180deg);
}
}
}
}
}
.p-submenu-list {
.p-submenu-icon {
transition: transform $transitionDuration;
transform: rotate(90deg);
}
.p-menuitem-active {
> .p-menuitem-content {
> .p-menuitem-link {
> .p-submenu-icon {
transform: rotate(-90deg);
}
}
}
}
}
@include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
}
}
}
}

316
frontend/public/primevue-sass-theme/theme-base/components/menu/_panelmenu.scss
View File

@ -1,189 +1,189 @@
// core
.p-panelmenu .p-panelmenu-header-action {
display: flex;
align-items: center;
user-select: none;
cursor: pointer;
position: relative;
text-decoration: none;
display: flex;
align-items: center;
user-select: none;
cursor: pointer;
position: relative;
text-decoration: none;
}
.p-panelmenu .p-panelmenu-header-action:focus {
z-index: 1;
z-index: 1;
}
.p-panelmenu .p-submenu-list {
margin: 0;
padding: 0;
list-style: none;
margin: 0;
padding: 0;
list-style: none;
}
.p-panelmenu .p-menuitem-link {
display: flex;
align-items: center;
user-select: none;
cursor: pointer;
text-decoration: none;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
user-select: none;
cursor: pointer;
text-decoration: none;
position: relative;
overflow: hidden;
}
.p-panelmenu .p-menuitem-text {
line-height: 1;
line-height: 1;
}
// theme
.p-panelmenu {
.p-panelmenu-header {
outline: 0 none;
.p-panelmenu-header {
outline: 0 none;
.p-panelmenu-header-content {
border: $accordionHeaderBorder;
color: $accordionHeaderTextColor;
background: $accordionHeaderBg;
border-radius: $borderRadius;
transition: $listItemTransition;
outline-color: transparent;
.p-panelmenu-header-action {
color: $accordionHeaderTextColor;
padding: $accordionHeaderPadding;
font-weight: $accordionHeaderFontWeight;
.p-submenu-icon {
margin-right: $inlineSpacing;
}
.p-menuitem-icon {
margin-right: $inlineSpacing;
}
}
}
&:not(.p-disabled) {
&:focus-visible {
.p-panelmenu-header-content {
border: $accordionHeaderBorder;
color: $accordionHeaderTextColor;
background: $accordionHeaderBg;
border-radius: $borderRadius;
transition: $listItemTransition;
outline-color: transparent;
.p-panelmenu-header-action {
color: $accordionHeaderTextColor;
padding: $accordionHeaderPadding;
font-weight: $accordionHeaderFontWeight;
.p-submenu-icon {
margin-right: $inlineSpacing;
}
.p-menuitem-icon {
margin-right: $inlineSpacing;
}
}
@include focused-inset();
}
}
}
&:not(.p-disabled) {
&:focus-visible {
.p-panelmenu-header-content {
@include focused-inset();
}
}
&:not(.p-highlight):not(.p-disabled):hover {
.p-panelmenu-header-content {
background: $accordionHeaderHoverBg;
border-color: $accordionHeaderHoverBorderColor;
color: $accordionHeaderTextHoverColor;
}
}
&:not(.p-disabled).p-highlight {
.p-panelmenu-header-content {
background: $accordionHeaderActiveBg;
border-color: $accordionHeaderActiveBorderColor;
color: $accordionHeaderTextActiveColor;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
margin-bottom: 0;
}
&:hover {
.p-panelmenu-header-content {
border-color: $accordionHeaderActiveHoverBorderColor;
background: $accordionHeaderActiveHoverBg;
color: $accordionHeaderTextActiveHoverColor;
}
}
}
}
&:not(.p-highlight):not(.p-disabled):hover {
.p-panelmenu-content {
padding: $verticalMenuPadding;
border: $accordionContentBorder;
background: $accordionContentBg;
color: $accordionContentTextColor;
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
.p-panelmenu-root-list {
outline: 0 none;
}
.p-menuitem {
@include menuitem();
.p-menuitem-content {
.p-menuitem-link {
.p-submenu-icon {
margin-right: $inlineSpacing;
}
}
}
}
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-submenu-list:not(.p-panelmenu-root-list) {
padding: $treeNodeChildrenPadding;
}
}
.p-panelmenu-panel {
margin-bottom: $accordionSpacing;
@if $accordionSpacing == 0 {
.p-panelmenu-header {
.p-panelmenu-header-content {
border-radius: 0;
}
}
.p-panelmenu-content {
border-radius: 0;
}
&:not(:first-child) {
.p-panelmenu-header {
.p-panelmenu-header-content {
border-top: 0 none;
}
&:not(.p-highlight):not(.p-disabled):hover,
&:not(.p-disabled).p-highlight:hover {
.p-panelmenu-header-content {
background: $accordionHeaderHoverBg;
border-color: $accordionHeaderHoverBorderColor;
color: $accordionHeaderTextHoverColor;
border-top: 0 none;
}
}
}
}
&:first-child {
.p-panelmenu-header {
.p-panelmenu-header-content {
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
}
}
}
&:last-child {
.p-panelmenu-header:not(.p-highlight) {
.p-panelmenu-header-content {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}
&:not(.p-disabled).p-highlight {
.p-panelmenu-header-content {
background: $accordionHeaderActiveBg;
border-color: $accordionHeaderActiveBorderColor;
color: $accordionHeaderTextActiveColor;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
margin-bottom: 0;
}
&:hover {
.p-panelmenu-header-content {
border-color: $accordionHeaderActiveHoverBorderColor;
background: $accordionHeaderActiveHoverBg;
color: $accordionHeaderTextActiveHoverColor;
}
}
.p-panelmenu-content {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}
}
.p-panelmenu-content {
padding: $verticalMenuPadding;
border: $accordionContentBorder;
background: $accordionContentBg;
color: $accordionContentTextColor;
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
.p-panelmenu-root-list {
outline: 0 none;
}
.p-menuitem {
@include menuitem();
.p-menuitem-content {
.p-menuitem-link {
.p-submenu-icon {
margin-right: $inlineSpacing;
}
}
}
}
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-submenu-list:not(.p-panelmenu-root-list) {
padding: $treeNodeChildrenPadding;
}
}
.p-panelmenu-panel {
margin-bottom: $accordionSpacing;
@if $accordionSpacing == 0 {
.p-panelmenu-header {
.p-panelmenu-header-content {
border-radius: 0;
}
}
.p-panelmenu-content {
border-radius: 0;
}
&:not(:first-child) {
.p-panelmenu-header {
.p-panelmenu-header-content {
border-top: 0 none;
}
&:not(.p-highlight):not(.p-disabled):hover,
&:not(.p-disabled).p-highlight:hover {
.p-panelmenu-header-content {
border-top: 0 none;
}
}
}
}
&:first-child {
.p-panelmenu-header {
.p-panelmenu-header-content {
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
}
}
}
&:last-child {
.p-panelmenu-header:not(.p-highlight) {
.p-panelmenu-header-content {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}
.p-panelmenu-content {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}
}
}
}
}

152
frontend/public/primevue-sass-theme/theme-base/components/menu/_steps.scss
View File

@ -1,112 +1,112 @@
@use 'sass:math';
@use "sass:math";
// core
.p-steps {
position: relative;
position: relative;
}
.p-steps .p-steps-list {
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
}
.p-steps-item {
position: relative;
display: flex;
justify-content: center;
flex: 1 1 auto;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
flex: 1 1 auto;
overflow: hidden;
}
.p-steps-item .p-menuitem-link {
display: inline-flex;
flex-direction: column;
align-items: center;
overflow: hidden;
text-decoration: none;
cursor: pointer;
display: inline-flex;
flex-direction: column;
align-items: center;
overflow: hidden;
text-decoration: none;
cursor: pointer;
}
.p-steps.p-steps-readonly .p-steps-item {
cursor: auto;
cursor: auto;
}
.p-steps-item.p-steps-current .p-menuitem-link {
cursor: default;
cursor: default;
}
.p-steps-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.p-steps-number {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.p-steps-title {
display: block;
display: block;
}
// theme
.p-steps {
.p-steps-item {
.p-menuitem-link {
background: transparent;
transition: $listItemTransition;
border-radius: $borderRadius;
background: $stepsItemBg;
outline-color: transparent;
.p-steps-item {
.p-menuitem-link {
background: transparent;
transition: $listItemTransition;
border-radius: $borderRadius;
background: $stepsItemBg;
outline-color: transparent;
.p-steps-number {
color: $stepsItemNumberColor;
border: $stepsItemBorder;
background: $stepsItemBg;
min-width: $stepsItemNumberWidth;
height: $stepsItemNumberHeight;
line-height: $stepsItemNumberHeight;
font-size: $stepsItemNumberFontSize;
z-index: 1;
border-radius: $stepsItemNumberBorderRadius;
}
.p-steps-number {
color: $stepsItemNumberColor;
border: $stepsItemBorder;
background: $stepsItemBg;
min-width: $stepsItemNumberWidth;
height: $stepsItemNumberHeight;
line-height: $stepsItemNumberHeight;
font-size: $stepsItemNumberFontSize;
z-index: 1;
border-radius: $stepsItemNumberBorderRadius;
}
.p-steps-title {
margin-top: $inlineSpacing;
color: $stepsItemTextColor;
}
.p-steps-title {
margin-top: $inlineSpacing;
color: $stepsItemTextColor;
}
&:not(.p-disabled):focus-visible {
@include focused();
}
}
&.p-highlight {
.p-steps-number {
background: $highlightBg;
color: $highlightTextColor;
}
.p-steps-title {
font-weight: $stepsItemActiveFontWeight;
color: $textColor;
}
}
&:before {
content:' ';
border-top: $divider;
width: 100%;
top: 50%;
left: 0;
display: block;
position: absolute;
margin-top: math.div(-1 * $stepsItemNumberHeight, 2);
}
&:not(.p-disabled):focus-visible {
@include focused();
}
}
&.p-highlight {
.p-steps-number {
background: $highlightBg;
color: $highlightTextColor;
}
.p-steps-title {
font-weight: $stepsItemActiveFontWeight;
color: $textColor;
}
}
&:before {
content: " ";
border-top: $divider;
width: 100%;
top: 50%;
left: 0;
display: block;
position: absolute;
margin-top: math.div(-1 * $stepsItemNumberHeight, 2);
}
}
}

124
frontend/public/primevue-sass-theme/theme-base/components/menu/_tabmenu.scss
View File

@ -1,92 +1,92 @@
// core
.p-tabmenu {
overflow-x: auto;
overflow-x: auto;
}
.p-tabmenu-nav {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
flex-wrap: nowrap;
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
flex-wrap: nowrap;
}
.p-tabmenu-nav a {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
position: relative;
text-decoration: none;
text-decoration: none;
overflow: hidden;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
position: relative;
text-decoration: none;
text-decoration: none;
overflow: hidden;
}
.p-tabmenu-nav a:focus {
z-index: 1;
z-index: 1;
}
.p-tabmenu-nav .p-menuitem-text {
line-height: 1;
line-height: 1;
}
.p-tabmenu-ink-bar {
display: none;
z-index: 1;
display: none;
z-index: 1;
}
.p-tabmenu::-webkit-scrollbar {
display: none;
display: none;
}
// theme
.p-tabmenu {
.p-tabmenu-nav {
background: $tabviewNavBg;
border: $tabviewNavBorder;
border-width: $tabviewNavBorderWidth;
.p-tabmenu-nav {
background: $tabviewNavBg;
border: $tabviewNavBorder;
border-width: $tabviewNavBorderWidth;
.p-tabmenuitem {
margin-right: $tabviewHeaderSpacing;
.p-tabmenuitem {
margin-right: $tabviewHeaderSpacing;
.p-menuitem-link {
border: $tabviewHeaderBorder;
border-width: $tabviewHeaderBorderWidth;
border-color: $tabviewHeaderBorderColor;
background: $tabviewHeaderBg;
color: $tabviewHeaderTextColor;
padding: $tabviewHeaderPadding;
font-weight: $tabviewHeaderFontWeight;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
transition: $listItemTransition;
margin: $tabviewHeaderMargin;
outline-color: transparent;
.p-menuitem-link {
border: $tabviewHeaderBorder;
border-width: $tabviewHeaderBorderWidth;
border-color: $tabviewHeaderBorderColor;
background: $tabviewHeaderBg;
color: $tabviewHeaderTextColor;
padding: $tabviewHeaderPadding;
font-weight: $tabviewHeaderFontWeight;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
transition: $listItemTransition;
margin: $tabviewHeaderMargin;
outline-color: transparent;
.p-menuitem-icon {
margin-right: $inlineSpacing;
}
&:not(.p-disabled):focus-visible {
@include focused-inset();
}
}
&:not(.p-highlight):not(.p-disabled):hover {
.p-menuitem-link {
background: $tabviewHeaderHoverBg;
border-color: $tabviewHeaderHoverBorderColor;
color: $tabviewHeaderTextHoverColor;
}
}
&.p-highlight {
.p-menuitem-link {
background: $tabviewHeaderActiveBg;
border-color: $tabviewHeaderActiveBorderColor;
color: $tabviewHeaderTextActiveColor;
}
}
.p-menuitem-icon {
margin-right: $inlineSpacing;
}
&:not(.p-disabled):focus-visible {
@include focused-inset();
}
}
&:not(.p-highlight):not(.p-disabled):hover {
.p-menuitem-link {
background: $tabviewHeaderHoverBg;
border-color: $tabviewHeaderHoverBorderColor;
color: $tabviewHeaderTextHoverColor;
}
}
&.p-highlight {
.p-menuitem-link {
background: $tabviewHeaderActiveBg;
border-color: $tabviewHeaderActiveBorderColor;
color: $tabviewHeaderTextActiveColor;
}
}
}
}
}

118
frontend/public/primevue-sass-theme/theme-base/components/menu/_tieredmenu.scss
View File

@ -1,95 +1,95 @@
// core
.p-tieredmenu ul {
margin: 0;
padding: 0;
list-style: none;
margin: 0;
padding: 0;
list-style: none;
}
.p-tieredmenu .p-submenu-list {
position: absolute;
min-width: 100%;
z-index: 1;
display: none;
position: absolute;
min-width: 100%;
z-index: 1;
display: none;
}
.p-tieredmenu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-tieredmenu .p-menuitem-text {
line-height: 1;
line-height: 1;
}
.p-tieredmenu .p-menuitem {
position: relative;
position: relative;
}
.p-tieredmenu .p-menuitem-link .p-submenu-icon {
margin-left: auto;
margin-left: auto;
}
.p-tieredmenu .p-menuitem-active > .p-submenu-list {
display: block;
left: 100%;
top: 0;
display: block;
left: 100%;
top: 0;
}
.p-tieredmenu-enter-from,
.p-tieredmenu-leave-active {
opacity: 0;
opacity: 0;
}
.p-tieredmenu-enter-active {
transition: opacity 250ms;
transition: opacity 250ms;
}
// theme
.p-tieredmenu {
padding: $verticalMenuPadding;
background: $menuBg;
color: $menuTextColor;
border: $menuBorder;
border-radius: $borderRadius;
min-width: $menuWidth;
&.p-tieredmenu-overlay {
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
}
.p-tieredmenu-root-list {
outline: 0 none;
}
.p-submenu-list {
padding: $verticalMenuPadding;
background: $menuBg;
color: $menuTextColor;
border: $menuBorder;
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
border-radius: $borderRadius;
min-width: $menuWidth;
}
&.p-tieredmenu-overlay {
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
}
.p-tieredmenu-root-list {
outline: 0 none;
}
.p-submenu-list {
padding: $verticalMenuPadding;
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
border-radius: $borderRadius;
}
.p-menuitem {
@include menuitem();
}
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-submenu-icon {
font-size: $menuitemSubmenuIconFontSize;
&.p-icon {
width: $menuitemSubmenuIconFontSize;
height: $menuitemSubmenuIconFontSize;
}
.p-menuitem {
@include menuitem();
}
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-submenu-icon {
font-size: $menuitemSubmenuIconFontSize;
&.p-icon {
width: $menuitemSubmenuIconFontSize;
height: $menuitemSubmenuIconFontSize;
}
}
}

178
frontend/public/primevue-sass-theme/theme-base/components/messages/_inlinemessage.scss
View File

@ -1,112 +1,112 @@
// core
.p-inline-message {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: top;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: top;
}
.p-inline-message-icon {
flex-shrink: 0;
flex-shrink: 0;
}
.p-inline-message-icon-only .p-inline-message-text {
visibility: hidden;
width: 0;
visibility: hidden;
width: 0;
}
.p-fluid .p-inline-message {
display: flex;
display: flex;
}
// theme
.p-inline-message {
padding: $inlineMessagePadding;
margin: $inlineMessageMargin;
border-radius: $borderRadius;
padding: $inlineMessagePadding;
margin: $inlineMessageMargin;
border-radius: $borderRadius;
&.p-inline-message-info {
background: $infoMessageBg;
border: $infoMessageBorder;
border-width: $inlineMessageBorderWidth;
color: $infoMessageTextColor;
.p-inline-message-icon {
color: $infoMessageIconColor;
}
}
&.p-inline-message-success {
background: $successMessageBg;
border: $successMessageBorder;
border-width: $inlineMessageBorderWidth;
color: $successMessageTextColor;
.p-inline-message-icon {
color: $successMessageIconColor;
}
}
&.p-inline-message-warn {
background: $warningMessageBg;
border: $warningMessageBorder;
border-width: $inlineMessageBorderWidth;
color: $warningMessageTextColor;
.p-inline-message-icon {
color: $warningMessageIconColor;
}
}
&.p-inline-message-error {
background: $errorMessageBg;
border: $errorMessageBorder;
border-width: $inlineMessageBorderWidth;
color: $errorMessageTextColor;
.p-inline-message-icon {
color: $errorMessageIconColor;
}
}
@if variable-exists(secondaryMessageBg) {
&.p-inline-message-secondary {
background: $secondaryMessageBg;
border: $secondaryMessageBorder;
border-width: $inlineMessageBorderWidth;
color: $secondaryMessageTextColor;
.p-inline-message-icon {
color: $secondaryMessageIconColor;
}
}
}
@if variable-exists(contrastMessageBg) {
&.p-inline-message-contrast {
background: $contrastMessageBg;
border: $contrastMessageBorder;
border-width: $inlineMessageBorderWidth;
color: $contrastMessageTextColor;
.p-inline-message-icon {
color: $contrastMessageIconColor;
}
}
}
&.p-inline-message-info {
background: $infoMessageBg;
border: $infoMessageBorder;
border-width: $inlineMessageBorderWidth;
color: $infoMessageTextColor;
.p-inline-message-icon {
font-size: $inlineMessageIconFontSize;
margin-right: $inlineSpacing;
color: $infoMessageIconColor;
}
}
.p-inline-message-text {
font-size: $inlineMessageTextFontSize;
}
&.p-inline-message-success {
background: $successMessageBg;
border: $successMessageBorder;
border-width: $inlineMessageBorderWidth;
color: $successMessageTextColor;
&.p-inline-message-icon-only {
.p-inline-message-icon {
margin-right: 0;
}
.p-inline-message-icon {
color: $successMessageIconColor;
}
}
&.p-inline-message-warn {
background: $warningMessageBg;
border: $warningMessageBorder;
border-width: $inlineMessageBorderWidth;
color: $warningMessageTextColor;
.p-inline-message-icon {
color: $warningMessageIconColor;
}
}
&.p-inline-message-error {
background: $errorMessageBg;
border: $errorMessageBorder;
border-width: $inlineMessageBorderWidth;
color: $errorMessageTextColor;
.p-inline-message-icon {
color: $errorMessageIconColor;
}
}
@if variable-exists(secondaryMessageBg) {
&.p-inline-message-secondary {
background: $secondaryMessageBg;
border: $secondaryMessageBorder;
border-width: $inlineMessageBorderWidth;
color: $secondaryMessageTextColor;
.p-inline-message-icon {
color: $secondaryMessageIconColor;
}
}
}
@if variable-exists(contrastMessageBg) {
&.p-inline-message-contrast {
background: $contrastMessageBg;
border: $contrastMessageBorder;
border-width: $inlineMessageBorderWidth;
color: $contrastMessageTextColor;
.p-inline-message-icon {
color: $contrastMessageIconColor;
}
}
}
.p-inline-message-icon {
font-size: $inlineMessageIconFontSize;
margin-right: $inlineSpacing;
}
.p-inline-message-text {
font-size: $inlineMessageTextFontSize;
}
&.p-inline-message-icon-only {
.p-inline-message-icon {
margin-right: 0;
}
}
}

283
frontend/public/primevue-sass-theme/theme-base/components/messages/_message.scss
View File

@ -1,185 +1,188 @@
// core
.p-message-wrapper {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.p-message-icon {
flex-shrink: 0;
flex-shrink: 0;
}
.p-message-close {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-message-close.p-link {
margin-left: auto;
overflow: hidden;
position: relative;
margin-left: auto;
overflow: hidden;
position: relative;
}
.p-message-enter-from {
opacity: 0;
opacity: 0;
}
.p-message-enter-active {
transition: opacity 0.3s;
transition: opacity 0.3s;
}
.p-message.p-message-leave-from {
max-height: 1000px;
max-height: 1000px;
}
.p-message.p-message-leave-to {
max-height: 0;
opacity: 0;
margin: 0;
max-height: 0;
opacity: 0;
margin: 0;
}
.p-message-leave-active {
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
overflow: hidden;
transition:
max-height 0.3s cubic-bezier(0, 1, 0, 1),
opacity 0.3s,
margin 0.15s;
}
.p-message-leave-active .p-message-close {
display: none;
display: none;
}
// theme
.p-message {
margin: $messageMargin;
border-radius: $borderRadius;
margin: $messageMargin;
border-radius: $borderRadius;
.p-message-wrapper {
padding: $messagePadding;
.p-message-wrapper {
padding: $messagePadding;
}
.p-message-close {
width: $actionIconWidth;
height: $actionIconHeight;
border-radius: $actionIconBorderRadius;
background: transparent;
transition: $actionIconTransition;
outline-color: transparent;
&:hover {
background: rgba(255, 255, 255, 0.5);
}
&:focus-visible {
@include focused();
}
}
&.p-message-info {
background: $infoMessageBg;
border: $infoMessageBorder;
border-width: $messageBorderWidth;
color: $infoMessageTextColor;
.p-message-icon {
color: $infoMessageIconColor;
}
.p-message-close {
width: $actionIconWidth;
height: $actionIconHeight;
border-radius: $actionIconBorderRadius;
background: transparent;
transition: $actionIconTransition;
outline-color: transparent;
&:hover {
background: rgba(255, 255, 255, 0.5);
}
&:focus-visible {
@include focused();
}
color: $infoMessageIconColor;
}
}
&.p-message-info {
background: $infoMessageBg;
border: $infoMessageBorder;
border-width: $messageBorderWidth;
color: $infoMessageTextColor;
.p-message-icon {
color: $infoMessageIconColor;
}
.p-message-close {
color: $infoMessageIconColor;
}
}
&.p-message-success {
background: $successMessageBg;
border: $successMessageBorder;
border-width: $messageBorderWidth;
color: $successMessageTextColor;
.p-message-icon {
color: $successMessageIconColor;
}
.p-message-close {
color: $successMessageIconColor;
}
}
&.p-message-warn {
background: $warningMessageBg;
border: $warningMessageBorder;
border-width: $messageBorderWidth;
color: $warningMessageTextColor;
.p-message-icon {
color: $warningMessageIconColor;
}
.p-message-close {
color: $warningMessageIconColor;
}
}
&.p-message-error {
background: $errorMessageBg;
border: $errorMessageBorder;
border-width: $messageBorderWidth;
color: $errorMessageTextColor;
.p-message-icon {
color: $errorMessageIconColor;
}
.p-message-close {
color: $errorMessageIconColor;
}
}
@if variable-exists(secondaryMessageBg) {
&.p-message-secondary {
background: $secondaryMessageBg;
border: $secondaryMessageBorder;
border-width: $messageBorderWidth;
color: $secondaryMessageTextColor;
.p-message-icon {
color: $secondaryMessageIconColor;
}
.p-message-close {
color: $secondaryMessageIconColor;
}
}
}
@if variable-exists(contrastMessageBg) {
&.p-message-contrast {
background: $contrastMessageBg;
border: $contrastMessageBorder;
border-width: $messageBorderWidth;
color: $contrastMessageTextColor;
.p-message-icon {
color: $contrastMessageIconColor;
}
.p-message-close {
color: $contrastMessageIconColor;
}
}
}
.p-message-text {
font-size: $messageTextFontSize;
font-weight: $messageTextFontWeight;
}
&.p-message-success {
background: $successMessageBg;
border: $successMessageBorder;
border-width: $messageBorderWidth;
color: $successMessageTextColor;
.p-message-icon {
font-size: $messageIconFontSize;
margin-right: $inlineSpacing;
color: $successMessageIconColor;
}
.p-icon:not(.p-message-close-icon) {
width: $messageIconFontSize;
height: $messageIconFontSize;
.p-message-close {
color: $successMessageIconColor;
}
}
&.p-message-warn {
background: $warningMessageBg;
border: $warningMessageBorder;
border-width: $messageBorderWidth;
color: $warningMessageTextColor;
.p-message-icon {
color: $warningMessageIconColor;
}
.p-message-close {
color: $warningMessageIconColor;
}
}
&.p-message-error {
background: $errorMessageBg;
border: $errorMessageBorder;
border-width: $messageBorderWidth;
color: $errorMessageTextColor;
.p-message-icon {
color: $errorMessageIconColor;
}
.p-message-close {
color: $errorMessageIconColor;
}
}
@if variable-exists(secondaryMessageBg) {
&.p-message-secondary {
background: $secondaryMessageBg;
border: $secondaryMessageBorder;
border-width: $messageBorderWidth;
color: $secondaryMessageTextColor;
.p-message-icon {
color: $secondaryMessageIconColor;
}
.p-message-close {
color: $secondaryMessageIconColor;
}
}
}
@if variable-exists(contrastMessageBg) {
&.p-message-contrast {
background: $contrastMessageBg;
border: $contrastMessageBorder;
border-width: $messageBorderWidth;
color: $contrastMessageTextColor;
.p-message-icon {
color: $contrastMessageIconColor;
}
.p-message-close {
color: $contrastMessageIconColor;
}
}
}
.p-message-text {
font-size: $messageTextFontSize;
font-weight: $messageTextFontWeight;
}
.p-message-icon {
font-size: $messageIconFontSize;
margin-right: $inlineSpacing;
}
.p-icon:not(.p-message-close-icon) {
width: $messageIconFontSize;
height: $messageIconFontSize;
}
}

304
frontend/public/primevue-sass-theme/theme-base/components/messages/_toast.scss
View File

@ -1,203 +1,213 @@
// core
.p-toast {
width: 25rem;
white-space: pre-line;
word-break: break-word;
width: 25rem;
white-space: pre-line;
word-break: break-word;
}
.p-toast-message-icon {
flex-shrink: 0;
flex-shrink: 0;
}
.p-toast-message-content {
display: flex;
align-items: flex-start;
display: flex;
align-items: flex-start;
}
.p-toast-message-text {
flex: 1 1 auto;
flex: 1 1 auto;
}
.p-toast-top-center {
transform: translateX(-50%);
transform: translateX(-50%);
}
.p-toast-bottom-center {
transform: translateX(-50%);
transform: translateX(-50%);
}
.p-toast-center {
min-width: 20vw;
transform: translate(-50%, -50%);
min-width: 20vw;
transform: translate(-50%, -50%);
}
.p-toast-icon-close {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.p-toast-icon-close.p-link {
cursor: pointer;
cursor: pointer;
}
/* Animations */
.p-toast-message-enter-from {
opacity: 0;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
opacity: 0;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}
.p-toast-message-leave-from {
max-height: 1000px;
max-height: 1000px;
}
.p-toast .p-toast-message.p-toast-message-leave-to {
max-height: 0;
opacity: 0;
margin-bottom: 0;
overflow: hidden;
max-height: 0;
opacity: 0;
margin-bottom: 0;
overflow: hidden;
}
.p-toast-message-enter-active {
-webkit-transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transition:
transform 0.3s,
opacity 0.3s;
transition:
transform 0.3s,
opacity 0.3s;
}
.p-toast-message-leave-active {
-webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
-webkit-transition:
max-height 0.45s cubic-bezier(0, 1, 0, 1),
opacity 0.3s,
margin-bottom 0.3s;
transition:
max-height 0.45s cubic-bezier(0, 1, 0, 1),
opacity 0.3s,
margin-bottom 0.3s;
}
// theme
.p-toast {
opacity: $toastOpacity;
opacity: $toastOpacity;
.p-toast-message {
margin: $toastMargin;
box-shadow: $toastShadow;
border-radius: $borderRadius;
.p-toast-message {
margin: $toastMargin;
box-shadow: $toastShadow;
border-radius: $borderRadius;
.p-toast-message-content {
padding: $toastPadding;
border-width: $toastBorderWidth;
.p-toast-message-content {
padding: $toastPadding;
border-width: $toastBorderWidth;
.p-toast-message-text {
margin: $toastMessageTextMargin;
}
.p-toast-message-text {
margin: $toastMessageTextMargin;
}
.p-toast-message-icon {
font-size: $toastIconFontSize;
.p-toast-message-icon {
font-size: $toastIconFontSize;
&.p-icon {
width: $toastIconFontSize;
height: $toastIconFontSize;
}
}
.p-toast-summary {
font-weight: $toastTitleFontWeight;
}
.p-toast-detail {
margin: $toastDetailMargin;
}
&.p-icon {
width: $toastIconFontSize;
height: $toastIconFontSize;
}
}
.p-toast-icon-close {
width: $toastIconFontSize;
height: $toastIconFontSize;
border-radius: $actionIconBorderRadius;
background: transparent;
transition: $actionIconTransition;
outline-color: transparent;
.p-toast-summary {
font-weight: $toastTitleFontWeight;
}
&:hover {
background: rgba(255, 255, 255, 0.5);
}
&:focus-visible {
@include focused();
}
}
&.p-toast-message-info {
background: $infoMessageBg;
border: $infoMessageBorder;
border-width: $messageBorderWidth;
color: $infoMessageTextColor;
.p-toast-message-icon,
.p-toast-icon-close {
color: $infoMessageIconColor;
}
}
&.p-toast-message-success {
background: $successMessageBg;
border: $successMessageBorder;
border-width: $messageBorderWidth;
color: $successMessageTextColor;
.p-toast-message-icon,
.p-toast-icon-close {
color: $successMessageIconColor;
}
}
&.p-toast-message-warn {
background: $warningMessageBg;
border: $warningMessageBorder;
border-width: $messageBorderWidth;
color: $warningMessageTextColor;
.p-toast-message-icon,
.p-toast-icon-close {
color: $warningMessageIconColor;
}
}
&.p-toast-message-error {
background: $errorMessageBg;
border: $errorMessageBorder;
border-width: $messageBorderWidth;
color: $errorMessageTextColor;
.p-toast-message-icon,
.p-toast-icon-close {
color: $errorMessageIconColor;
}
}
@if variable-exists(secondaryMessageBg) {
&.p-toast-message-secondary {
background: $secondaryMessageBg;
border: $secondaryMessageBorder;
border-width: $messageBorderWidth;
color: $secondaryMessageTextColor;
.p-toast-message-icon,
.p-toast-icon-close {
color: $secondaryMessageIconColor;
}
}
}
@if variable-exists(contrastMessageBg) {
&.p-toast-message-contrast {
background: $contrastMessageBg;
border: $contrastMessageBorder;
border-width: $messageBorderWidth;
color: $contrastMessageTextColor;
.p-toast-message-icon,
.p-toast-icon-close {
color: $contrastMessageIconColor;
}
}
}
.p-toast-detail {
margin: $toastDetailMargin;
}
}
.p-toast-icon-close {
width: $toastIconFontSize;
height: $toastIconFontSize;
border-radius: $actionIconBorderRadius;
background: transparent;
transition: $actionIconTransition;
outline-color: transparent;
&:hover {
background: rgba(255, 255, 255, 0.5);
}
&:focus-visible {
@include focused();
}
}
&.p-toast-message-info {
background: $infoMessageBg;
border: $infoMessageBorder;
border-width: $messageBorderWidth;
color: $infoMessageTextColor;
.p-toast-message-icon,
.p-toast-icon-close {
color: $infoMessageIconColor;
}
}
&.p-toast-message-success {
background: $successMessageBg;
border: $successMessageBorder;
border-width: $messageBorderWidth;
color: $successMessageTextColor;
.p-toast-message-icon,
.p-toast-icon-close {
color: $successMessageIconColor;
}
}
&.p-toast-message-warn {
background: $warningMessageBg;
border: $warningMessageBorder;
border-width: $messageBorderWidth;
color: $warningMessageTextColor;
.p-toast-message-icon,
.p-toast-icon-close {
color: $warningMessageIconColor;
}
}
&.p-toast-message-error {
background: $errorMessageBg;
border: $errorMessageBorder;
border-width: $messageBorderWidth;
color: $errorMessageTextColor;
.p-toast-message-icon,
.p-toast-icon-close {
color: $errorMessageIconColor;
}
}
@if variable-exists(secondaryMessageBg) {
&.p-toast-message-secondary {
background: $secondaryMessageBg;
border: $secondaryMessageBorder;
border-width: $messageBorderWidth;
color: $secondaryMessageTextColor;
.p-toast-message-icon,
.p-toast-icon-close {
color: $secondaryMessageIconColor;
}
}
}
@if variable-exists(contrastMessageBg) {
&.p-toast-message-contrast {
background: $contrastMessageBg;
border: $contrastMessageBorder;
border-width: $messageBorderWidth;
color: $contrastMessageTextColor;
.p-toast-message-icon,
.p-toast-icon-close {
color: $contrastMessageIconColor;
}
}
}
}
}

70
frontend/public/primevue-sass-theme/theme-base/components/misc/_avatar.scss
View File

@ -1,71 +1,71 @@
// core
.p-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
font-size: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
font-size: 1rem;
}
.p-avatar.p-avatar-image {
background-color: transparent;
background-color: transparent;
}
.p-avatar.p-avatar-circle {
border-radius: 50%;
border-radius: 50%;
}
.p-avatar-circle img {
border-radius: 50%;
border-radius: 50%;
}
.p-avatar .p-avatar-icon {
font-size: 1rem;
font-size: 1rem;
}
.p-avatar img {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.p-avatar-group .p-avatar + .p-avatar {
margin-left: -1rem;
margin-left: -1rem;
}
.p-avatar-group {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
// theme
.p-avatar {
background-color: $avatarBg;
border-radius: $borderRadius;
background-color: $avatarBg;
border-radius: $borderRadius;
&.p-avatar-lg {
width: 3rem;
height: 3rem;
font-size: 1.5rem;
&.p-avatar-lg {
width: 3rem;
height: 3rem;
font-size: 1.5rem;
.p-avatar-icon {
font-size: 1.5rem;
}
.p-avatar-icon {
font-size: 1.5rem;
}
}
&.p-avatar-xl {
width: 4rem;
height: 4rem;
font-size: 2rem;
&.p-avatar-xl {
width: 4rem;
height: 4rem;
font-size: 2rem;
.p-avatar-icon {
font-size: 2rem;
}
.p-avatar-icon {
font-size: 2rem;
}
}
}
.p-avatar-group {
.p-avatar {
border: 2px solid $panelContentBg;
}
}
.p-avatar {
border: 2px solid $panelContentBg;
}
}

140
frontend/public/primevue-sass-theme/theme-base/components/misc/_badge.scss
View File

@ -1,95 +1,95 @@
// core
.p-badge {
display: inline-block;
border-radius: 10px;
text-align: center;
padding: 0 .5rem;
display: inline-block;
border-radius: 10px;
text-align: center;
padding: 0 0.5rem;
}
.p-overlay-badge {
position: relative;
position: relative;
}
.p-overlay-badge .p-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(50%,-50%);
transform-origin: 100% 0;
margin: 0;
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
transform-origin: 100% 0;
margin: 0;
}
.p-badge.p-badge-dot {
width: .5rem;
min-width: .5rem;
height: .5rem;
border-radius: 50%;
padding: 0;
width: 0.5rem;
min-width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
padding: 0;
}
.p-badge-no-gutter {
padding: 0;
border-radius: 50%;
padding: 0;
border-radius: 50%;
}
// theme
.p-badge {
background: $badgeBg;
color: $badgeTextColor;
font-size: $badgeFontSize;
font-weight: $badgeFontWeight;
min-width: $badgeMinWidth;
height: $badgeHeight;
line-height: $badgeHeight;
background: $badgeBg;
color: $badgeTextColor;
font-size: $badgeFontSize;
font-weight: $badgeFontWeight;
min-width: $badgeMinWidth;
height: $badgeHeight;
line-height: $badgeHeight;
&.p-badge-secondary {
background-color: $secondaryButtonBg;
color: $secondaryButtonTextColor;
}
&.p-badge-success {
background-color: $successButtonBg;
color: $successButtonTextColor;
}
&.p-badge-info {
background-color: $infoButtonBg;
color: $infoButtonTextColor;
}
&.p-badge-warning {
background-color: $warningButtonBg;
color: $warningButtonTextColor;
}
&.p-badge-danger {
background-color: $dangerButtonBg;
color: $dangerButtonTextColor;
}
@if variable-exists(secondaryMessageBg) {
&.p-badge-secondary {
background-color: $secondaryButtonBg;
color: $secondaryButtonTextColor;
background-color: $secondaryButtonBg;
color: $secondaryButtonTextColor;
}
&.p-badge-success {
background-color: $successButtonBg;
color: $successButtonTextColor;
&.p-badge-contrast {
background-color: $contrastButtonBg;
color: $contrastButtonTextColor;
}
}
&.p-badge-info {
background-color: $infoButtonBg;
color: $infoButtonTextColor;
}
&.p-badge-lg {
font-size: 1.5 * $badgeFontSize;
min-width: 1.5 * $badgeMinWidth;
height: 1.5 * $badgeHeight;
line-height: 1.5 * $badgeHeight;
}
&.p-badge-warning {
background-color: $warningButtonBg;
color: $warningButtonTextColor;
}
&.p-badge-danger {
background-color: $dangerButtonBg;
color: $dangerButtonTextColor;
}
@if variable-exists(secondaryMessageBg) {
&.p-badge-secondary {
background-color: $secondaryButtonBg;
color: $secondaryButtonTextColor;
}
&.p-badge-contrast {
background-color: $contrastButtonBg;
color: $contrastButtonTextColor;
}
}
&.p-badge-lg {
font-size: 1.5 * $badgeFontSize;
min-width: 1.5 * $badgeMinWidth;
height: 1.5 * $badgeHeight;
line-height: 1.5 * $badgeHeight;
}
&.p-badge-xl {
font-size: 2 * $badgeFontSize;
min-width: 2 * $badgeMinWidth;
height: 2 * $badgeHeight;
line-height: 2 * $badgeHeight;
}
}
&.p-badge-xl {
font-size: 2 * $badgeFontSize;
min-width: 2 * $badgeMinWidth;
height: 2 * $badgeHeight;
line-height: 2 * $badgeHeight;
}
}

10
frontend/public/primevue-sass-theme/theme-base/components/misc/_blockui.scss
View File

@ -1,17 +1,17 @@
// core
.p-blockui-container {
position: relative;
position: relative;
}
.p-blockui.p-component-overlay {
position: absolute;
position: absolute;
}
.p-blockui-document.p-component-overlay {
position: fixed;
position: fixed;
}
// theme
.p-blockui {
border-radius: $borderRadius;
}
border-radius: $borderRadius;
}

82
frontend/public/primevue-sass-theme/theme-base/components/misc/_chip.scss
View File

@ -1,64 +1,64 @@
@use 'sass:math';
@use "sass:math";
// core
.p-chip {
display: inline-flex;
align-items: center;
display: inline-flex;
align-items: center;
}
.p-chip-text {
line-height: 1.5;
line-height: 1.5;
}
.p-chip-icon.pi {
line-height: 1.5;
line-height: 1.5;
}
.p-chip-remove-icon {
line-height: 1.5;
cursor: pointer;
line-height: 1.5;
cursor: pointer;
}
.p-chip img {
border-radius: 50%;
border-radius: 50%;
}
// theme
.p-chip {
background-color: $chipBg;
color: $chipTextColor;
border-radius: $chipBorderRadius;
padding: 0 nth($inputPadding, 2);
background-color: $chipBg;
color: $chipTextColor;
border-radius: $chipBorderRadius;
padding: 0 nth($inputPadding, 2);
.p-chip-text {
line-height: 1.5;
margin-top: math.div(nth($inputPadding, 1), 2);
margin-bottom: math.div(nth($inputPadding, 1), 2);
.p-chip-text {
line-height: 1.5;
margin-top: math.div(nth($inputPadding, 1), 2);
margin-bottom: math.div(nth($inputPadding, 1), 2);
}
.p-chip-icon {
margin-right: $inlineSpacing;
}
img {
width: 1.5 + nth($inputPadding, 1);
height: 1.5 + nth($inputPadding, 1);
margin-left: -1 * nth($inputPadding, 2);
margin-right: $inlineSpacing;
}
.p-chip-remove-icon {
margin-left: $inlineSpacing;
border-radius: $borderRadius;
transition: $actionIconTransition;
outline-color: transparent;
&:focus-visible {
@include focused();
}
.p-chip-icon {
margin-right: $inlineSpacing;
&:focus {
outline: 0 none;
}
img {
width: 1.5 + nth($inputPadding, 1);
height: 1.5 + nth($inputPadding, 1);
margin-left: -1 * nth($inputPadding, 2);
margin-right: $inlineSpacing;
}
.p-chip-remove-icon {
margin-left: $inlineSpacing;
border-radius: $borderRadius;
transition: $actionIconTransition;
outline-color: transparent;
&:focus-visible {
@include focused();
}
&:focus {
outline: 0 none;
}
}
}
}
}

39
frontend/public/primevue-sass-theme/theme-base/components/misc/_inplace.scss
View File

@ -1,38 +1,37 @@
// core
.p-inplace .p-inplace-display {
display: inline;
cursor: pointer;
display: inline;
cursor: pointer;
}
.p-inplace .p-inplace-content {
display: inline;
display: inline;
}
.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
display: flex;
display: flex;
}
.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
flex: 1 1 auto;
width: 1%;
flex: 1 1 auto;
width: 1%;
}
// theme
.p-inplace {
.p-inplace-display {
padding: $inplacePadding;
border-radius: $borderRadius;
transition: $formElementTransition;
outline-color: transparent;
.p-inplace-display {
padding: $inplacePadding;
border-radius: $borderRadius;
transition: $formElementTransition;
outline-color: transparent;
&:not(.p-disabled):hover {
background: $inplaceHoverBg;
color: $inplaceTextHoverColor;
}
&:focus {
@include focused();
}
&:not(.p-disabled):hover {
background: $inplaceHoverBg;
color: $inplaceTextHoverColor;
}
}
&:focus {
@include focused();
}
}
}

148
frontend/public/primevue-sass-theme/theme-base/components/misc/_metergroup.scss
View File

@ -2,116 +2,116 @@
// core
.p-metergroup {
display: flex;
display: flex;
}
.p-metergroup-meters {
display: flex;
display: flex;
}
.p-metergroup-vertical .p-metergroup-meters {
flex-direction: column;
flex-direction: column;
}
.p-metergroup-labels {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style-type: none;
}
.p-metergroup-vertical .p-metergroup-labels {
align-items: start;
align-items: start;
}
.p-metergroup-labels-vertical {
flex-direction: column;
flex-direction: column;
}
.p-metergroup-label {
display: inline-flex;
align-items: center;
display: inline-flex;
align-items: center;
}
.p-metergroup-label-marker {
display: inline-flex;
display: inline-flex;
}
// theme
.p-metergroup {
gap: $inlineSpacing * 2;
gap: $inlineSpacing * 2;
.p-metergroup-meters {
background: $progressBarBg;
border-radius: $borderRadius;
}
.p-metergroup-meter {
border: $progressBarBorder;
background: $progressBarValueBg;
}
.p-metergroup-labels {
.p-metergroup-label {
gap: $inlineSpacing;
}
.p-metergroup-label-marker {
background: $progressBarValueBg;
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
}
.p-metergroup-label-icon {
width: 1rem;
height: 1rem;
}
&.p-metergroup-labels-vertical {
gap: $inlineSpacing;
}
&.p-metergroup-labels-horizontal {
gap: $inlineSpacing * 2;
}
}
&.p-metergroup-horizontal {
flex-direction: column;
.p-metergroup-meters {
background: $progressBarBg;
border-radius: $borderRadius;
height: 0.5rem;
}
.p-metergroup-meter {
border: $progressBarBorder;
background: $progressBarValueBg;
.p-metergroup-meter:first-of-type {
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
.p-metergroup-labels {
.p-metergroup-label {
gap: $inlineSpacing;
}
.p-metergroup-meter:last-of-type {
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
}
.p-metergroup-label-marker {
background: $progressBarValueBg;
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
}
&.p-metergroup-vertical {
flex-direction: row;
.p-metergroup-label-icon {
width: 1rem;
height: 1rem;
}
&.p-metergroup-labels-vertical {
gap: $inlineSpacing;
}
&.p-metergroup-labels-horizontal {
gap: $inlineSpacing * 2;
}
.p-metergroup-meters {
width: 0.5rem;
height: 100%;
}
&.p-metergroup-horizontal {
flex-direction: column;
.p-metergroup-meters {
height: 0.5rem;
}
.p-metergroup-meter:first-of-type {
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
.p-metergroup-meter:last-of-type {
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
.p-metergroup-meter:first-of-type {
border-top-left-radius: $borderRadius;
border-top-right-radius: $borderRadius;
}
&.p-metergroup-vertical {
flex-direction: row;
.p-metergroup-meters {
width: 0.5rem;
height: 100%;
}
.p-metergroup-meter:first-of-type {
border-top-left-radius: $borderRadius;
border-top-right-radius: $borderRadius;
}
.p-metergroup-meter:last-of-type {
border-bottom-left-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
.p-metergroup-meter:last-of-type {
border-bottom-left-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
}
}

192
frontend/public/primevue-sass-theme/theme-base/components/misc/_progressbar.scss
View File

@ -1,128 +1,132 @@
// core
.p-progressbar {
position: relative;
overflow: hidden;
position: relative;
overflow: hidden;
}
.p-progressbar-determinate .p-progressbar-value {
height: 100%;
width: 0%;
position: absolute;
display: none;
border: 0 none;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100%;
width: 0%;
position: absolute;
display: none;
border: 0 none;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.p-progressbar-determinate .p-progressbar-label {
display: inline-flex;
display: inline-flex;
}
.p-progressbar-determinate .p-progressbar-value-animate {
transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.p-progressbar-indeterminate .p-progressbar-value::before {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
content: "";
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: p-progressbar-indeterminate-anim 2.1s
cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
animation: p-progressbar-indeterminate-anim 2.1s
cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.p-progressbar-indeterminate .p-progressbar-value::after {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s;
content: "";
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: p-progressbar-indeterminate-anim-short 2.1s
cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation: p-progressbar-indeterminate-anim-short 2.1s
cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s;
}
@-webkit-keyframes p-progressbar-indeterminate-anim {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes p-progressbar-indeterminate-anim {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@-webkit-keyframes p-progressbar-indeterminate-anim-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
@keyframes p-progressbar-indeterminate-anim-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
// theme
.p-progressbar {
border: $progressBarBorder;
height: $progressBarHeight;
background: $progressBarBg;
border-radius: $borderRadius;
border: $progressBarBorder;
height: $progressBarHeight;
background: $progressBarBg;
border-radius: $borderRadius;
.p-progressbar-value {
border: 0 none;
margin: 0;
background: $progressBarValueBg;
}
.p-progressbar-value {
border: 0 none;
margin: 0;
background: $progressBarValueBg;
}
.p-progressbar-label {
color: $progressBarValueTextColor;
line-height: $progressBarHeight;
}
.p-progressbar-label {
color: $progressBarValueTextColor;
line-height: $progressBarHeight;
}
}

108
frontend/public/primevue-sass-theme/theme-base/components/misc/_progressspinner.scss
View File

@ -1,77 +1,79 @@
// core
.p-progress-spinner {
position: relative;
margin: 0 auto;
width: 100px;
height: 100px;
display: inline-block;
position: relative;
margin: 0 auto;
width: 100px;
height: 100px;
display: inline-block;
}
.p-progress-spinner::before {
content: '';
display: block;
padding-top: 100%;
content: "";
display: block;
padding-top: 100%;
}
.p-progress-spinner-svg {
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
// theme
.p-progress-spinner-svg {
animation: p-progress-spinner-rotate 2s linear infinite;
animation: p-progress-spinner-rotate 2s linear infinite;
}
.p-progress-spinner-circle {
stroke-dasharray: 89, 200;
stroke-dashoffset: 0;
stroke: $progressSpinnerStrokeColor;
animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
stroke-linecap: round;
stroke-dasharray: 89, 200;
stroke-dashoffset: 0;
stroke: $progressSpinnerStrokeColor;
animation:
p-progress-spinner-dash 1.5s ease-in-out infinite,
p-progress-spinner-color 6s ease-in-out infinite;
stroke-linecap: round;
}
@keyframes p-progress-spinner-rotate {
100% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes p-progress-spinner-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
@keyframes p-progress-spinner-color {
100%,
0% {
stroke: $progressSpinnerColorOne;
}
40% {
stroke: $progressSpinnerColorTwo;
}
66% {
stroke: $progressSpinnerColorThree;
}
80%,
90% {
stroke: $progressSpinnerColorFour;
}
}
100%,
0% {
stroke: $progressSpinnerColorOne;
}
40% {
stroke: $progressSpinnerColorTwo;
}
66% {
stroke: $progressSpinnerColorThree;
}
80%,
90% {
stroke: $progressSpinnerColorFour;
}
}

30
frontend/public/primevue-sass-theme/theme-base/components/misc/_ripple.scss
View File

@ -1,29 +1,29 @@
// core
.p-ripple {
overflow: hidden;
position: relative;
overflow: hidden;
position: relative;
}
.p-ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
transform: scale(0);
pointer-events: none;
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
transform: scale(0);
pointer-events: none;
}
.p-ink-active {
animation: ripple 0.4s linear;
animation: ripple 0.4s linear;
}
.p-ripple-disabled .p-ink {
display: none;
display: none;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
100% {
opacity: 0;
transform: scale(2.5);
}
}

60
frontend/public/primevue-sass-theme/theme-base/components/misc/_scrolltop.scss
View File

@ -1,60 +1,60 @@
// core
.p-scrolltop {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.p-scrolltop-sticky {
position: sticky;
position: sticky;
}
.p-scrolltop-sticky.p-link {
margin-left: auto;
margin-left: auto;
}
.p-scrolltop-enter-from {
opacity: 0;
opacity: 0;
}
.p-scrolltop-enter-active {
transition: opacity 0.15s;
transition: opacity 0.15s;
}
.p-scrolltop.p-scrolltop-leave-to {
opacity: 0;
opacity: 0;
}
.p-scrolltop-leave-active {
transition: opacity 0.15s;
transition: opacity 0.15s;
}
// theme
.p-scrolltop {
width: $scrollTopWidth;
height: $scrollTopHeight;
border-radius: $scrollTopBorderRadius;
box-shadow: $inputOverlayShadow;
transition: $actionIconTransition;
width: $scrollTopWidth;
height: $scrollTopHeight;
border-radius: $scrollTopBorderRadius;
box-shadow: $inputOverlayShadow;
transition: $actionIconTransition;
&.p-link {
background: $scrollTopBg;
&.p-link {
background: $scrollTopBg;
&:hover {
background: $scrollTopHoverBg;
}
&:hover {
background: $scrollTopHoverBg;
}
}
.p-scrolltop-icon {
font-size: $scrollTopFontSize;
color: $scrollTopTextColor;
.p-scrolltop-icon {
font-size: $scrollTopFontSize;
color: $scrollTopTextColor;
&.p-icon {
width: $scrollTopFontSize;
height: $scrollTopFontSize;
}
&.p-icon {
width: $scrollTopFontSize;
height: $scrollTopFontSize;
}
}
}
}

53
frontend/public/primevue-sass-theme/theme-base/components/misc/_skeleton.scss
View File

@ -1,43 +1,48 @@
// core
.p-skeleton {
overflow: hidden;
overflow: hidden;
}
.p-skeleton::after {
content: '';
animation: p-skeleton-animation 1.2s infinite;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
transform: translateX(-100%);
z-index: 1;
content: "";
animation: p-skeleton-animation 1.2s infinite;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
transform: translateX(-100%);
z-index: 1;
}
.p-skeleton.p-skeleton-circle {
border-radius: 50%;
border-radius: 50%;
}
.p-skeleton-none::after {
animation: none;
animation: none;
}
@keyframes p-skeleton-animation {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
// theme
.p-skeleton {
background-color: $skeletonBg;
border-radius: $borderRadius;
background-color: $skeletonBg;
border-radius: $borderRadius;
&:after {
background: linear-gradient(90deg, rgba(255, 255, 255, 0), $skeletonAnimationBg, rgba(255, 255, 255, 0));
}
}
&:after {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
$skeletonAnimationBg,
rgba(255, 255, 255, 0)
);
}
}

102
frontend/public/primevue-sass-theme/theme-base/components/misc/_tag.scss
View File

@ -2,72 +2,72 @@
// core
.p-tag {
display: inline-flex;
align-items: center;
justify-content: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
.p-tag-icon,
.p-tag-value,
.p-tag-icon.pi {
line-height: 1.5;
line-height: 1.5;
}
.p-tag.p-tag-rounded {
border-radius: 10rem;
border-radius: 10rem;
}
// theme
.p-tag {
background: $badgeBg;
color: $badgeTextColor;
background: $badgeBg;
color: $badgeTextColor;
font-size: $badgeFontSize;
font-weight: $badgeFontWeight;
padding: $tagPadding;
border-radius: $borderRadius;
&.p-tag-success {
background-color: $successButtonBg;
color: $successButtonTextColor;
}
&.p-tag-info {
background-color: $infoButtonBg;
color: $infoButtonTextColor;
}
&.p-tag-warning {
background-color: $warningButtonBg;
color: $warningButtonTextColor;
}
&.p-tag-danger {
background-color: $dangerButtonBg;
color: $dangerButtonTextColor;
}
@if variable-exists(secondaryMessageBg) {
&.p-tag-secondary {
background-color: $secondaryButtonBg;
color: $secondaryButtonTextColor;
}
&.p-tag-contrast {
background-color: $contrastButtonBg;
color: $contrastButtonTextColor;
}
}
.p-tag-icon {
font-size: $badgeFontSize;
font-weight: $badgeFontWeight;
padding: $tagPadding;
border-radius: $borderRadius;
&.p-tag-success {
background-color: $successButtonBg;
color: $successButtonTextColor;
&:not(:last-child) {
margin-right: math.div($inlineSpacing, 2);
}
&.p-tag-info {
background-color: $infoButtonBg;
color: $infoButtonTextColor;
}
&.p-tag-warning {
background-color: $warningButtonBg;
color: $warningButtonTextColor;
}
&.p-tag-danger {
background-color: $dangerButtonBg;
color: $dangerButtonTextColor;
}
@if variable-exists(secondaryMessageBg) {
&.p-tag-secondary {
background-color: $secondaryButtonBg;
color: $secondaryButtonTextColor;
}
&.p-tag-contrast {
background-color: $contrastButtonBg;
color: $contrastButtonTextColor;
}
}
.p-tag-icon {
font-size: $badgeFontSize;
&:not(:last-child) {
margin-right: math.div($inlineSpacing, 2);
}
&.p-icon {
width: $badgeFontSize;
height: $badgeFontSize;
}
&.p-icon {
width: $badgeFontSize;
height: $badgeFontSize;
}
}
}

40
frontend/public/primevue-sass-theme/theme-base/components/misc/_terminal.scss
View File

@ -1,37 +1,37 @@
// core
.p-terminal {
height: 18rem;
overflow: auto;
height: 18rem;
overflow: auto;
}
.p-terminal-prompt-container {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.p-terminal-input {
flex: 1 1 auto;
border: 0 none;
background-color: transparent;
color: inherit;
padding: 0;
outline: 0 none;
flex: 1 1 auto;
border: 0 none;
background-color: transparent;
color: inherit;
padding: 0;
outline: 0 none;
}
.p-terminal-input::-ms-clear {
display: none;
display: none;
}
// theme
.p-terminal {
background: $panelContentBg;
color: $panelContentTextColor;
border: $panelContentBorder;
padding: $panelContentPadding;
background: $panelContentBg;
color: $panelContentTextColor;
border: $panelContentBorder;
padding: $panelContentPadding;
.p-terminal-input {
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings, normal);
font-size: $inputTextFontSize;
}
.p-terminal-input {
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings, normal);
font-size: $inputTextFontSize;
}
}

528
frontend/public/primevue-sass-theme/theme-base/components/multimedia/_galleria.scss
View File

@ -1,439 +1,445 @@
// core
.p-galleria-content {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}
.p-galleria-item-wrapper {
display: flex;
flex-direction: column;
position: relative;
display: flex;
flex-direction: column;
position: relative;
}
.p-galleria-item-container {
position: relative;
display: flex;
height: 100%;
position: relative;
display: flex;
height: 100%;
}
.p-galleria-item-nav {
position: absolute;
top: 50%;
margin-top: -0.5rem;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: absolute;
top: 50%;
margin-top: -0.5rem;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.p-galleria-item-prev {
left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-galleria-item-next {
right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-galleria-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.p-galleria-item-nav-onhover .p-galleria-item-nav {
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease-in-out;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
pointer-events: all;
opacity: 1;
.p-galleria-item-nav-onhover
.p-galleria-item-wrapper:hover
.p-galleria-item-nav {
pointer-events: all;
opacity: 1;
}
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
pointer-events: none;
.p-galleria-item-nav-onhover
.p-galleria-item-wrapper:hover
.p-galleria-item-nav.p-disabled {
pointer-events: none;
}
.p-galleria-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
/* Thumbnails */
.p-galleria-thumbnail-wrapper {
display: flex;
flex-direction: column;
overflow: auto;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: auto;
flex-shrink: 0;
}
.p-galleria-thumbnail-prev,
.p-galleria-thumbnail-next {
align-self: center;
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
align-self: center;
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.p-galleria-thumbnail-prev span,
.p-galleria-thumbnail-next span {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
.p-galleria-thumbnail-container {
display: flex;
flex-direction: row;
display: flex;
flex-direction: row;
}
.p-galleria-thumbnail-items-container {
overflow: hidden;
width: 100%;
overflow: hidden;
width: 100%;
}
.p-galleria-thumbnail-items {
display: flex;
display: flex;
}
.p-galleria-thumbnail-item {
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.5;
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.5;
}
.p-galleria-thumbnail-item:hover {
opacity: 1;
transition: opacity 0.3s;
opacity: 1;
transition: opacity 0.3s;
}
.p-galleria-thumbnail-item-current {
opacity: 1;
opacity: 1;
}
/* Positions */
/* Thumbnails */
.p-galleria-thumbnails-left .p-galleria-content,
.p-galleria-thumbnails-right .p-galleria-content {
flex-direction: row;
flex-direction: row;
}
.p-galleria-thumbnails-left .p-galleria-item-wrapper,
.p-galleria-thumbnails-right .p-galleria-item-wrapper {
flex-direction: row;
flex-direction: row;
}
.p-galleria-thumbnails-left .p-galleria-item-wrapper,
.p-galleria-thumbnails-top .p-galleria-item-wrapper {
order: 2;
order: 2;
}
.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
order: 1;
order: 1;
}
.p-galleria-thumbnails-left .p-galleria-thumbnail-container,
.p-galleria-thumbnails-right .p-galleria-thumbnail-container {
flex-direction: column;
flex-grow: 1;
flex-direction: column;
flex-grow: 1;
}
.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
flex-direction: column;
height: 100%;
flex-direction: column;
height: 100%;
}
/* Indicators */
.p-galleria-indicators {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.p-galleria-indicator > button {
display: inline-flex;
align-items: center;
display: inline-flex;
align-items: center;
}
.p-galleria-indicators-left .p-galleria-item-wrapper,
.p-galleria-indicators-right .p-galleria-item-wrapper {
flex-direction: row;
align-items: center;
flex-direction: row;
align-items: center;
}
.p-galleria-indicators-left .p-galleria-item-container,
.p-galleria-indicators-top .p-galleria-item-container {
order: 2;
order: 2;
}
.p-galleria-indicators-left .p-galleria-indicators,
.p-galleria-indicators-top .p-galleria-indicators {
order: 1;
order: 1;
}
.p-galleria-indicators-left .p-galleria-indicators,
.p-galleria-indicators-right .p-galleria-indicators {
flex-direction: column;
flex-direction: column;
}
.p-galleria-indicator-onitem .p-galleria-indicators {
position: absolute;
display: flex;
z-index: 1;
position: absolute;
display: flex;
z-index: 1;
}
.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
top: 0;
left: 0;
width: 100%;
align-items: flex-start;
top: 0;
left: 0;
width: 100%;
align-items: flex-start;
}
.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
right: 0;
top: 0;
height: 100%;
align-items: flex-end;
.p-galleria-indicator-onitem.p-galleria-indicators-right
.p-galleria-indicators {
right: 0;
top: 0;
height: 100%;
align-items: flex-end;
}
.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
bottom: 0;
left: 0;
width: 100%;
align-items: flex-end;
.p-galleria-indicator-onitem.p-galleria-indicators-bottom
.p-galleria-indicators {
bottom: 0;
left: 0;
width: 100%;
align-items: flex-end;
}
.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
left: 0;
top: 0;
height: 100%;
align-items: flex-start;
left: 0;
top: 0;
height: 100%;
align-items: flex-start;
}
/* FullScreen */
.p-galleria-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.p-galleria-close {
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.p-galleria-mask .p-galleria-item-nav {
position: fixed;
top: 50%;
margin-top: -0.5rem;
position: fixed;
top: 50%;
margin-top: -0.5rem;
}
/* Animation */
.p-galleria-enter-active {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-galleria-leave-active {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.p-galleria-enter-from,
.p-galleria-leave-to {
opacity: 0;
transform: scale(0.7);
opacity: 0;
transform: scale(0.7);
}
.p-galleria-enter-active .p-galleria-item-nav {
opacity: 0;
opacity: 0;
}
/* Keyboard Support */
.p-items-hidden .p-galleria-thumbnail-item {
visibility: hidden;
visibility: hidden;
}
.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
visibility: visible;
visibility: visible;
}
// theme
.p-galleria {
.p-galleria-close {
margin: $galleriaCloseIconMargin;
background: $galleriaCloseIconBg;
color: $galleriaCloseIconColor;
width: $galleriaCloseIconWidth;
height: $galleriaCloseIconHeight;
.p-galleria-close {
margin: $galleriaCloseIconMargin;
background: $galleriaCloseIconBg;
color: $galleriaCloseIconColor;
width: $galleriaCloseIconWidth;
height: $galleriaCloseIconHeight;
transition: $actionIconTransition;
border-radius: $galleriaCloseIconBorderRadius;
.p-galleria-close-icon {
font-size: $galleriaCloseIconFontSize;
}
.p-icon {
width: $galleriaCloseIconFontSize;
height: $galleriaCloseIconFontSize;
}
&:hover {
background: $galleriaCloseIconHoverBg;
color: $galleriaCloseIconHoverColor;
}
}
.p-galleria-item-nav {
background: $galleriaItemNavigatorBg;
color: $galleriaItemNavigatorColor;
width: $galleriaItemNavigatorWidth;
height: $galleriaItemNavigatorHeight;
transition: $actionIconTransition;
border-radius: $galleriaItemNavigatorBorderRadius;
margin: $galleriaItemNavigatorMargin;
.p-galleria-item-prev-icon,
.p-galleria-item-next-icon {
font-size: $galleriaItemNavigatorFontSize;
}
.p-icon {
width: $galleriaCloseIconFontSize;
height: $galleriaCloseIconFontSize;
}
&:not(.p-disabled) {
&:hover {
background: $galleriaItemNavigatorHoverBg;
color: $galleriaItemNavigatorHoverColor;
}
}
}
.p-galleria-caption {
background: $galleriaCaptionBg;
color: $galleriaCaptionTextColor;
padding: $galleriaCaptionPadding;
}
.p-galleria-indicators {
padding: $galleriaIndicatorsPadding;
.p-galleria-indicator {
button {
background-color: $galleriaIndicatorBg;
width: $galleriaIndicatorWidth;
height: $galleriaIndicatorHeight;
transition: $actionIconTransition;
border-radius: $galleriaCloseIconBorderRadius;
.p-galleria-close-icon {
font-size: $galleriaCloseIconFontSize;
}
.p-icon {
width: $galleriaCloseIconFontSize;
height: $galleriaCloseIconFontSize;
}
border-radius: $galleriaIndicatorBorderRadius;
&:hover {
background: $galleriaCloseIconHoverBg;
color: $galleriaCloseIconHoverColor;
background: $galleriaIndicatorHoverBg;
}
}
&.p-highlight {
button {
background: $highlightBg;
color: $highlightTextColor;
}
}
}
}
.p-galleria-item-nav {
background: $galleriaItemNavigatorBg;
color: $galleriaItemNavigatorColor;
width: $galleriaItemNavigatorWidth;
height: $galleriaItemNavigatorHeight;
transition: $actionIconTransition;
border-radius: $galleriaItemNavigatorBorderRadius;
margin: $galleriaItemNavigatorMargin;
.p-galleria-item-prev-icon,
.p-galleria-item-next-icon {
font-size: $galleriaItemNavigatorFontSize;
}
.p-icon {
width: $galleriaCloseIconFontSize;
height: $galleriaCloseIconFontSize;
}
&:not(.p-disabled) {
&:hover {
background: $galleriaItemNavigatorHoverBg;
color: $galleriaItemNavigatorHoverColor;
}
}
&.p-galleria-indicators-bottom,
&.p-galleria-indicators-top {
.p-galleria-indicator {
margin-right: $inlineSpacing;
}
}
.p-galleria-caption {
background: $galleriaCaptionBg;
color: $galleriaCaptionTextColor;
padding: $galleriaCaptionPadding;
&.p-galleria-indicators-left,
&.p-galleria-indicators-right {
.p-galleria-indicator {
margin-bottom: $inlineSpacing;
}
}
&.p-galleria-indicator-onitem {
.p-galleria-indicators {
padding: $galleriaIndicatorsPadding;
background: $galleriaIndicatorsBgOnItem;
.p-galleria-indicator {
button {
background-color: $galleriaIndicatorBg;
width: $galleriaIndicatorWidth;
height: $galleriaIndicatorHeight;
transition: $actionIconTransition;
border-radius: $galleriaIndicatorBorderRadius;
.p-galleria-indicator {
button {
background: $galleriaIndicatorBgOnItem;
&:hover {
background: $galleriaIndicatorHoverBg;
}
}
&.p-highlight {
button {
background: $highlightBg;
color: $highlightTextColor;
}
}
&:hover {
background: $galleriaIndicatorHoverBgOnItem;
}
}
&.p-highlight {
button {
background: $highlightBg;
color: $highlightTextColor;
}
}
}
}
}
.p-galleria-thumbnail-container {
background: $galleriaThumbnailContainerBg;
padding: $galleriaThumbnailContainerPadding;
.p-galleria-thumbnail-prev,
.p-galleria-thumbnail-next {
margin: $inlineSpacing;
background-color: $galleriaThumbnailNavigatorBg;
color: $galleriaThumbnailNavigatorColor;
width: $galleriaThumbnailNavigatorWidth;
height: $galleriaThumbnailNavigatorHeight;
transition: $actionIconTransition;
border-radius: $galleriaThumbnailNavigatorBorderRadius;
&:hover {
background: $galleriaThumbnailNavigatorHoverBg;
color: $galleriaThumbnailNavigatorHoverColor;
}
}
&.p-galleria-indicators-bottom,
&.p-galleria-indicators-top {
.p-galleria-indicator {
margin-right: $inlineSpacing;
}
}
&.p-galleria-indicators-left,
&.p-galleria-indicators-right {
.p-galleria-indicator {
margin-bottom: $inlineSpacing;
}
}
&.p-galleria-indicator-onitem {
.p-galleria-indicators {
background: $galleriaIndicatorsBgOnItem;
.p-galleria-indicator {
button {
background: $galleriaIndicatorBgOnItem;
&:hover {
background: $galleriaIndicatorHoverBgOnItem;
}
}
&.p-highlight {
button {
background: $highlightBg;
color: $highlightTextColor;
}
}
}
}
}
.p-galleria-thumbnail-container {
background: $galleriaThumbnailContainerBg;
padding: $galleriaThumbnailContainerPadding;
.p-galleria-thumbnail-prev,
.p-galleria-thumbnail-next {
margin: $inlineSpacing;
background-color: $galleriaThumbnailNavigatorBg;
color: $galleriaThumbnailNavigatorColor;
width: $galleriaThumbnailNavigatorWidth;
height: $galleriaThumbnailNavigatorHeight;
transition: $actionIconTransition;
border-radius: $galleriaThumbnailNavigatorBorderRadius;
&:hover {
background: $galleriaThumbnailNavigatorHoverBg;
color: $galleriaThumbnailNavigatorHoverColor;
}
}
.p-galleria-thumbnail-item-content {
outline-color: transparent;
&:focus-visible {
@include focused();
}
}
.p-galleria-thumbnail-item-content {
outline-color: transparent;
&:focus-visible {
@include focused();
}
}
}
}
.p-galleria-mask {
--maskbg: #{$galleriaMaskBg};
--maskbg: #{$galleriaMaskBg};
}

144
frontend/public/primevue-sass-theme/theme-base/components/multimedia/_image.scss
View File

@ -1,128 +1,128 @@
// core
.p-image-mask {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.p-image-preview-container {
position: relative;
display: inline-block;
line-height: 0;
position: relative;
display: inline-block;
line-height: 0;
}
.p-image-preview-indicator {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
border: none;
padding: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
border: none;
padding: 0;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
opacity: 1;
cursor: pointer;
opacity: 1;
cursor: pointer;
}
.p-image-preview-container > img {
cursor: pointer;
cursor: pointer;
}
.p-image-toolbar {
position: absolute;
top: 0;
right: 0;
display: flex;
z-index: 1;
position: absolute;
top: 0;
right: 0;
display: flex;
z-index: 1;
}
.p-image-action.p-link {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
.p-image-action.p-disabled {
pointer-events: auto;
pointer-events: auto;
}
.p-image-preview {
transition: transform 0.15s;
max-width: 100vw;
max-height: 100vh;
transition: transform 0.15s;
max-width: 100vw;
max-height: 100vh;
}
.p-image-preview-enter-active {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-image-preview-leave-active {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.p-image-preview-enter-from,
.p-image-preview-leave-to {
opacity: 0;
transform: scale(0.7);
opacity: 0;
transform: scale(0.7);
}
// theme
.p-image-mask {
--maskbg: #{$imageMaskBg};
--maskbg: #{$imageMaskBg};
}
.p-image-preview-indicator {
background-color: transparent;
color: $imagePreviewIndicatorColor;
transition: $actionIconTransition;
background-color: transparent;
color: $imagePreviewIndicatorColor;
transition: $actionIconTransition;
.p-icon {
width: $imagePreviewActionIconFontSize;
height: $imagePreviewActionIconFontSize;
}
.p-icon {
width: $imagePreviewActionIconFontSize;
height: $imagePreviewActionIconFontSize;
}
}
.p-image-preview-container {
&:hover {
> .p-image-preview-indicator {
background-color: $imagePreviewIndicatorBg;
}
&:hover {
> .p-image-preview-indicator {
background-color: $imagePreviewIndicatorBg;
}
}
}
.p-image-toolbar {
padding: $imagePreviewToolbarPadding;
padding: $imagePreviewToolbarPadding;
}
.p-image-action.p-link {
color: $imagePreviewActionIconColor;
background-color: $imagePreviewActionIconBg;
width: $imagePreviewActionIconWidth;
height: $imagePreviewActionIconHeight;
border-radius: $imagePreviewActionIconBorderRadius;
transition: $actionIconTransition;
margin-right: $inlineSpacing;
color: $imagePreviewActionIconColor;
background-color: $imagePreviewActionIconBg;
width: $imagePreviewActionIconWidth;
height: $imagePreviewActionIconHeight;
border-radius: $imagePreviewActionIconBorderRadius;
transition: $actionIconTransition;
margin-right: $inlineSpacing;
&:last-child {
margin-right: 0;
}
&:last-child {
margin-right: 0;
}
&:hover {
color: $imagePreviewActionIconHoverColor;
background-color: $imagePreviewActionIconHoverBg;
}
&:hover {
color: $imagePreviewActionIconHoverColor;
background-color: $imagePreviewActionIconHoverBg;
}
i {
font-size: $imagePreviewActionIconFontSize;
}
i {
font-size: $imagePreviewActionIconFontSize;
}
.p-icon {
width: $imagePreviewActionIconFontSize;
height: $imagePreviewActionIconFontSize;
}
}
.p-icon {
width: $imagePreviewActionIconFontSize;
height: $imagePreviewActionIconFontSize;
}
}

167
frontend/public/primevue-sass-theme/theme-base/components/overlay/_confirmpopup.scss
View File

@ -1,144 +1,147 @@
// core
.p-confirm-popup {
position: absolute;
margin-top: 10px;
top: 0;
left: 0;
position: absolute;
margin-top: 10px;
top: 0;
left: 0;
}
.p-confirm-popup-flipped {
margin-top: -10px;
margin-bottom: 10px;
margin-top: -10px;
margin-bottom: 10px;
}
/* Animation */
.p-confirm-popup-enter-from {
opacity: 0;
transform: scaleY(0.8);
opacity: 0;
transform: scaleY(0.8);
}
.p-confirm-popup-leave-to {
opacity: 0;
opacity: 0;
}
.p-confirm-popup-enter-active {
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
transition:
transform 0.12s cubic-bezier(0, 0, 0.2, 1),
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-confirm-popup-leave-active {
transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
}
.p-confirm-popup:after,
.p-confirm-popup:before {
bottom: 100%;
left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
bottom: 100%;
left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.p-confirm-popup:after {
border-width: 8px;
margin-left: -8px;
border-width: 8px;
margin-left: -8px;
}
.p-confirm-popup:before {
border-width: 10px;
margin-left: -10px;
border-width: 10px;
margin-left: -10px;
}
.p-confirm-popup-flipped:after,
.p-confirm-popup-flipped:before {
bottom: auto;
top: 100%;
bottom: auto;
top: 100%;
}
.p-confirm-popup.p-confirm-popup-flipped:after {
border-bottom-color: transparent;
border-bottom-color: transparent;
}
.p-confirm-popup.p-confirm-popup-flipped:before {
border-bottom-color: transparent;
border-bottom-color: transparent;
}
.p-confirm-popup .p-confirm-popup-content {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
// theme
.p-confirm-popup {
background: $overlayContentBg;
color: $panelContentTextColor;
border: $overlayContentBorder;
border-radius: $borderRadius;
box-shadow: $overlayContainerShadow;
background: $overlayContentBg;
color: $panelContentTextColor;
border: $overlayContentBorder;
border-radius: $borderRadius;
box-shadow: $overlayContainerShadow;
.p-confirm-popup-content {
padding: $confirmPopupContentPadding;
.p-confirm-popup-content {
padding: $confirmPopupContentPadding;
}
.p-confirm-popup-footer {
text-align: right;
padding: $confirmPopupFooterPadding;
button {
margin: 0 $inlineSpacing 0 0;
width: auto;
&:last-child {
margin: 0;
}
}
}
.p-confirm-popup-footer {
text-align: right;
padding: $confirmPopupFooterPadding;
&:after {
border-style: solid;
border-color: rgba($overlayContentBg, 0);
border-bottom-color: $overlayContentBg;
}
button {
margin: 0 $inlineSpacing 0 0;
width: auto;
&:before {
border-style: solid;
&:last-child {
margin: 0;
}
}
@if (nth($overlayContentBorder, 2) == "none") {
border-color: rgba($overlayContentBg, 0);
border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
} @else {
border-color: rgba(nth($overlayContentBorder, 3), 0);
border-bottom-color: scale-color(
nth($overlayContentBorder, 3),
$lightness: -5%
);
}
}
&.p-confirm-popup-flipped {
&:after {
border-style: solid;
border-color: rgba($overlayContentBg, 0);
border-bottom-color: $overlayContentBg;
border-top-color: $overlayContentBg;
}
&:before {
border-style: solid;
@if (nth($overlayContentBorder, 2) == 'none') {
border-color: rgba($overlayContentBg, 0);
border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
}
@else {
border-color: rgba(nth($overlayContentBorder, 3), 0);
border-bottom-color: scale-color(nth($overlayContentBorder, 3), $lightness: -5%);
}
@if (nth($overlayContentBorder, 2) == "none") {
border-top-color: $overlayContentBg;
} @else {
border-top-color: nth($overlayContentBorder, 3);
}
}
}
&.p-confirm-popup-flipped {
&:after {
border-top-color: $overlayContentBg;
}
.p-confirm-popup-icon {
font-size: $primeIconFontSize * 1.5;
&:before {
@if (nth($overlayContentBorder, 2) == 'none') {
border-top-color: $overlayContentBg;
}
@else {
border-top-color: nth($overlayContentBorder, 3);
}
}
&.p-icon {
width: $primeIconFontSize * 1.5;
height: $primeIconFontSize * 1.5;
}
}
.p-confirm-popup-icon {
font-size: $primeIconFontSize * 1.5;
&.p-icon {
width: $primeIconFontSize * 1.5;
height: $primeIconFontSize * 1.5;
}
}
.p-confirm-popup-message {
margin-left: $inlineSpacing * 2;
}
.p-confirm-popup-message {
margin-left: $inlineSpacing * 2;
}
}

176
frontend/public/primevue-sass-theme/theme-base/components/overlay/_dialog.scss
View File

@ -1,58 +1,58 @@
// core
.p-dialog-mask.p-component-overlay {
pointer-events: auto;
pointer-events: auto;
}
.p-dialog {
max-height: 90%;
transform: scale(1);
max-height: 90%;
transform: scale(1);
}
.p-dialog-content {
overflow-y: auto;
overflow-y: auto;
}
.p-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.p-dialog-footer {
flex-shrink: 0;
flex-shrink: 0;
}
.p-dialog .p-dialog-header-icons {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.p-dialog .p-dialog-header-icon {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Fluid */
.p-fluid .p-dialog-footer .p-button {
width: auto;
width: auto;
}
/* Animation */
/* Center */
.p-dialog-enter-active {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-dialog-leave-active {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.p-dialog-enter-from,
.p-dialog-leave-to {
opacity: 0;
transform: scale(0.7);
opacity: 0;
transform: scale(0.7);
}
/* Top, Bottom, Left, Right, Top* and Bottom* */
@ -64,8 +64,8 @@
.p-dialog-topright .p-dialog,
.p-dialog-bottomleft .p-dialog,
.p-dialog-bottomright .p-dialog {
margin: 0.75rem;
transform: translate3d(0px, 0px, 0px);
margin: 0.75rem;
transform: translate3d(0px, 0px, 0px);
}
.p-dialog-top .p-dialog-enter-active,
.p-dialog-top .p-dialog-leave-active,
@ -83,15 +83,15 @@
.p-dialog-bottomleft .p-dialog-leave-active,
.p-dialog-bottomright .p-dialog-enter-active,
.p-dialog-bottomright .p-dialog-leave-active {
transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.p-dialog-top .p-dialog-enter-from,
.p-dialog-top .p-dialog-leave-to {
transform: translate3d(0px, -100%, 0px);
transform: translate3d(0px, -100%, 0px);
}
.p-dialog-bottom .p-dialog-enter-from,
.p-dialog-bottom .p-dialog-leave-to {
transform: translate3d(0px, 100%, 0px);
transform: translate3d(0px, 100%, 0px);
}
.p-dialog-left .p-dialog-enter-from,
.p-dialog-left .p-dialog-leave-to,
@ -99,7 +99,7 @@
.p-dialog-topleft .p-dialog-leave-to,
.p-dialog-bottomleft .p-dialog-enter-from,
.p-dialog-bottomleft .p-dialog-leave-to {
transform: translate3d(-100%, 0px, 0px);
transform: translate3d(-100%, 0px, 0px);
}
.p-dialog-right .p-dialog-enter-from,
.p-dialog-right .p-dialog-leave-to,
@ -107,86 +107,86 @@
.p-dialog-topright .p-dialog-leave-to,
.p-dialog-bottomright .p-dialog-enter-from,
.p-dialog-bottomright .p-dialog-leave-to {
transform: translate3d(100%, 0px, 0px);
transform: translate3d(100%, 0px, 0px);
}
/* Maximize */
.p-dialog-maximized {
width: 100vw !important;
height: 100vh !important;
top: 0px !important;
left: 0px !important;
max-height: 100%;
height: 100%;
width: 100vw !important;
height: 100vh !important;
top: 0px !important;
left: 0px !important;
max-height: 100%;
height: 100%;
}
.p-dialog-maximized .p-dialog-content {
flex-grow: 1;
flex-grow: 1;
}
.p-confirm-dialog .p-dialog-content {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
// theme
.p-dialog {
border-radius: $borderRadius;
box-shadow: $overlayContainerShadow;
border: $overlayContentBorder;
border-radius: $borderRadius;
box-shadow: $overlayContainerShadow;
border: $overlayContentBorder;
.p-dialog-header {
border-bottom: $dialogHeaderBorder;
background: $dialogHeaderBg;
color: $dialogHeaderTextColor;
padding: $dialogHeaderPadding;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
.p-dialog-header {
border-bottom: $dialogHeaderBorder;
background: $dialogHeaderBg;
color: $dialogHeaderTextColor;
padding: $dialogHeaderPadding;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
.p-dialog-title {
font-weight: $dialogHeaderFontWeight;
font-size: $dialogHeaderFontSize;
}
.p-dialog-header-icon {
@include action-icon();
margin-right: $inlineSpacing;
&:last-child {
margin-right: 0;
}
}
.p-dialog-title {
font-weight: $dialogHeaderFontWeight;
font-size: $dialogHeaderFontSize;
}
.p-dialog-content {
background: $overlayContentBg;
color: $panelContentTextColor;
padding: $dialogContentPadding;
.p-dialog-header-icon {
@include action-icon();
margin-right: $inlineSpacing;
&:last-of-type {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
&:last-child {
margin-right: 0;
}
}
}
.p-dialog-content {
background: $overlayContentBg;
color: $panelContentTextColor;
padding: $dialogContentPadding;
&:last-of-type {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}
.p-dialog-footer {
border-top: $dialogFooterBorder;
background: $overlayContentBg;
color: $panelFooterTextColor;
padding: $dialogFooterPadding;
display: flex;
justify-content: flex-end;
gap: $inlineSpacing;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
&.p-confirm-dialog {
.p-confirm-dialog-icon {
font-size: $primeIconFontSize * 2;
}
.p-dialog-footer {
border-top: $dialogFooterBorder;
background: $overlayContentBg;
color: $panelFooterTextColor;
padding: $dialogFooterPadding;
display: flex;
justify-content: flex-end;
gap: $inlineSpacing;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
&.p-confirm-dialog {
.p-confirm-dialog-icon {
font-size: $primeIconFontSize * 2;
}
.p-confirm-dialog-message:not(:first-child) {
margin-left: $inlineSpacing * 2;
}
.p-confirm-dialog-message:not(:first-child) {
margin-left: $inlineSpacing * 2;
}
}
}

159
frontend/public/primevue-sass-theme/theme-base/components/overlay/_overlaypanel.scss
View File

@ -1,136 +1,139 @@
@use 'sass:math';
@use "sass:math";
// core
.p-overlaypanel {
margin-top: 10px;
margin-top: 10px;
}
.p-overlaypanel-flipped {
margin-top: -10px;
margin-bottom: 10px;
margin-top: -10px;
margin-bottom: 10px;
}
.p-overlaypanel-close {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
/* Animation */
.p-overlaypanel-enter-from {
opacity: 0;
transform: scaleY(0.8);
opacity: 0;
transform: scaleY(0.8);
}
.p-overlaypanel-leave-to {
opacity: 0;
opacity: 0;
}
.p-overlaypanel-enter-active {
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
transition:
transform 0.12s cubic-bezier(0, 0, 0.2, 1),
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-overlaypanel-leave-active {
transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
}
.p-overlaypanel:after,
.p-overlaypanel:before {
bottom: 100%;
left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
bottom: 100%;
left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.p-overlaypanel:after {
border-width: 8px;
margin-left: -8px;
border-width: 8px;
margin-left: -8px;
}
.p-overlaypanel:before {
border-width: 10px;
margin-left: -10px;
border-width: 10px;
margin-left: -10px;
}
.p-overlaypanel-flipped:after,
.p-overlaypanel-flipped:before {
bottom: auto;
top: 100%;
bottom: auto;
top: 100%;
}
.p-overlaypanel.p-overlaypanel-flipped:after {
border-bottom-color: transparent;
border-bottom-color: transparent;
}
.p-overlaypanel.p-overlaypanel-flipped:before {
border-bottom-color: transparent;
border-bottom-color: transparent;
}
// theme
.p-overlaypanel {
background: $overlayContentBg;
color: $panelContentTextColor;
border: $overlayContentBorder;
border-radius: $borderRadius;
box-shadow: $overlayContainerShadow;
background: $overlayContentBg;
color: $panelContentTextColor;
border: $overlayContentBorder;
border-radius: $borderRadius;
box-shadow: $overlayContainerShadow;
.p-overlaypanel-content {
padding: $panelContentPadding;
.p-overlaypanel-content {
padding: $panelContentPadding;
}
.p-overlaypanel-close {
background: $buttonBg;
color: $buttonTextColor;
width: $actionIconWidth;
height: $actionIconHeight;
transition: $actionIconTransition;
border-radius: $actionIconBorderRadius;
position: absolute;
top: math.div(-1 * $actionIconWidth, 2);
right: math.div(-1 * $actionIconWidth, 2);
&:enabled:hover {
background: $buttonHoverBg;
color: $buttonTextHoverColor;
}
}
.p-overlaypanel-close {
background: $buttonBg;
color: $buttonTextColor;
width: $actionIconWidth;
height: $actionIconHeight;
transition: $actionIconTransition;
border-radius: $actionIconBorderRadius;
position: absolute;
top: math.div(-1 * $actionIconWidth, 2);
right: math.div(-1 * $actionIconWidth, 2);
&:after {
border-style: solid;
border-color: rgba($overlayContentBg, 0);
border-bottom-color: $overlayContentBg;
}
&:enabled:hover {
background: $buttonHoverBg;
color: $buttonTextHoverColor;
}
&:before {
border-style: solid;
@if (nth($overlayContentBorder, 2) == "none") {
border-color: rgba($overlayContentBg, 0);
border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
} @else {
border-color: rgba(nth($overlayContentBorder, 3), 0);
border-bottom-color: scale-color(
nth($overlayContentBorder, 3),
$lightness: -5%
);
}
}
&.p-overlaypanel-flipped {
&:after {
border-style: solid;
border-color: rgba($overlayContentBg, 0);
border-bottom-color: $overlayContentBg;
border-top-color: $overlayContentBg;
}
&:before {
border-style: solid;
@if (nth($overlayContentBorder, 2) == 'none') {
border-color: rgba($overlayContentBg, 0);
border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
}
@else {
border-color: rgba(nth($overlayContentBorder, 3), 0);
border-bottom-color: scale-color(nth($overlayContentBorder, 3), $lightness: -5%);
}
}
&.p-overlaypanel-flipped {
&:after {
border-top-color: $overlayContentBg;
}
&:before {
@if (nth($overlayContentBorder, 2) == 'none') {
border-top-color: $overlayContentBg;
}
@else {
border-top-color: nth($overlayContentBorder, 3);
}
}
@if (nth($overlayContentBorder, 2) == "none") {
border-top-color: $overlayContentBg;
} @else {
border-top-color: nth($overlayContentBorder, 3);
}
}
}
}

160
frontend/public/primevue-sass-theme/theme-base/components/overlay/_sidebar.scss
View File

@ -1,179 +1,179 @@
// core
.p-sidebar-mask {
display: none;
pointer-events: none;
background-color: transparent;
transition-property: background-color;
display: none;
pointer-events: none;
background-color: transparent;
transition-property: background-color;
}
.p-sidebar-mask.p-component-overlay {
pointer-events: auto;
pointer-events: auto;
}
.p-sidebar-visible {
display: flex;
display: flex;
}
.p-sidebar {
display: flex;
flex-direction: column;
pointer-events: auto;
transform: translate3d(0px, 0px, 0px);
position: relative;
transition: transform 0.3s;
display: flex;
flex-direction: column;
pointer-events: auto;
transform: translate3d(0px, 0px, 0px);
position: relative;
transition: transform 0.3s;
}
.p-sidebar-content {
overflow-y: auto;
flex-grow: 1;
overflow-y: auto;
flex-grow: 1;
}
.p-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.p-sidebar-icon {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.p-sidebar-full .p-sidebar {
transition: none;
transform: none;
width: 100vw !important;
height: 100vh !important;
max-height: 100%;
top: 0px !important;
left: 0px !important;
transition: none;
transform: none;
width: 100vw !important;
height: 100vh !important;
max-height: 100%;
top: 0px !important;
left: 0px !important;
}
/* Animation */
/* Center */
.p-sidebar-left .p-sidebar-enter-from,
.p-sidebar-left .p-sidebar-leave-to {
transform: translateX(-100%);
transform: translateX(-100%);
}
.p-sidebar-right .p-sidebar-enter-from,
.p-sidebar-right .p-sidebar-leave-to {
transform: translateX(100%);
transform: translateX(100%);
}
.p-sidebar-top .p-sidebar-enter-from,
.p-sidebar-top .p-sidebar-leave-to {
transform: translateY(-100%);
transform: translateY(-100%);
}
.p-sidebar-bottom .p-sidebar-enter-from,
.p-sidebar-bottom .p-sidebar-leave-to {
transform: translateY(100%);
transform: translateY(100%);
}
.p-sidebar-full .p-sidebar-enter-from,
.p-sidebar-full .p-sidebar-leave-to {
opacity: 0;
opacity: 0;
}
.p-sidebar-full .p-sidebar-enter-active,
.p-sidebar-full .p-sidebar-leave-active {
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Size */
.p-sidebar-left .p-sidebar {
width: 20rem;
height: 100%;
width: 20rem;
height: 100%;
}
.p-sidebar-right .p-sidebar {
width: 20rem;
height: 100%;
width: 20rem;
height: 100%;
}
.p-sidebar-top .p-sidebar {
height: 10rem;
width: 100%;
height: 10rem;
width: 100%;
}
.p-sidebar-bottom .p-sidebar {
height: 10rem;
width: 100%;
height: 10rem;
width: 100%;
}
.p-sidebar-left .p-sidebar-sm,
.p-sidebar-right .p-sidebar-sm {
width: 20rem;
width: 20rem;
}
.p-sidebar-left .p-sidebar-md,
.p-sidebar-right .p-sidebar-md {
width: 40rem;
width: 40rem;
}
.p-sidebar-left .p-sidebar-lg,
.p-sidebar-right .p-sidebar-lg {
width: 60rem;
width: 60rem;
}
.p-sidebar-top .p-sidebar-sm,
.p-sidebar-bottom .p-sidebar-sm {
height: 10rem;
height: 10rem;
}
.p-sidebar-top .p-sidebar-md,
.p-sidebar-bottom .p-sidebar-md {
height: 20rem;
height: 20rem;
}
.p-sidebar-top .p-sidebar-lg,
.p-sidebar-bottom .p-sidebar-lg {
height: 30rem;
height: 30rem;
}
.p-sidebar-left .p-sidebar-content,
.p-sidebar-right .p-sidebar-content,
.p-sidebar-top .p-sidebar-content,
.p-sidebar-bottom .p-sidebar-content {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
@media screen and (max-width: 64em) {
.p-sidebar-left .p-sidebar-lg,
.p-sidebar-left .p-sidebar-md,
.p-sidebar-right .p-sidebar-lg,
.p-sidebar-right .p-sidebar-md {
width: 20rem;
}
.p-sidebar-left .p-sidebar-lg,
.p-sidebar-left .p-sidebar-md,
.p-sidebar-right .p-sidebar-lg,
.p-sidebar-right .p-sidebar-md {
width: 20rem;
}
}
// theme
.p-sidebar {
background: $overlayContentBg;
color: $panelContentTextColor;
border: $overlayContentBorder;
box-shadow: $overlayContainerShadow;
background: $overlayContentBg;
color: $panelContentTextColor;
border: $overlayContentBorder;
box-shadow: $overlayContainerShadow;
.p-sidebar-header {
padding: $panelHeaderPadding;
.p-sidebar-header {
padding: $panelHeaderPadding;
.p-sidebar-header-content {
font-weight: $dialogHeaderFontWeight;
font-size: $dialogHeaderFontSize;
}
.p-sidebar-close,
.p-sidebar-icon {
@include action-icon();
}
& + .p-sidebar-content {
padding-top: 0;
}
.p-sidebar-header-content {
font-weight: $dialogHeaderFontWeight;
font-size: $dialogHeaderFontSize;
}
.p-sidebar-content {
padding: $panelContentPadding;
.p-sidebar-close,
.p-sidebar-icon {
@include action-icon();
}
}
& + .p-sidebar-content {
padding-top: 0;
}
}
.p-sidebar-content {
padding: $panelContentPadding;
}
}

92
frontend/public/primevue-sass-theme/theme-base/components/overlay/_tooltip.scss
View File

@ -1,90 +1,90 @@
// core
.p-tooltip {
position:absolute;
display:none;
padding: .25em .5rem;
max-width: 12.5rem;
position: absolute;
display: none;
padding: 0.25em 0.5rem;
max-width: 12.5rem;
}
.p-tooltip.p-tooltip-right,
.p-tooltip.p-tooltip-left {
padding: 0 .25rem;
padding: 0 0.25rem;
}
.p-tooltip.p-tooltip-top,
.p-tooltip.p-tooltip-bottom {
padding:.25em 0;
padding: 0.25em 0;
}
.p-tooltip .p-tooltip-text {
white-space: pre-line;
word-break: break-word;
white-space: pre-line;
word-break: break-word;
}
.p-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
scale: 2;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
scale: 2;
}
.p-tooltip-right .p-tooltip-arrow {
margin-top: -.25rem;
border-width: .25em .25em .25em 0;
margin-top: -0.25rem;
border-width: 0.25em 0.25em 0.25em 0;
}
.p-tooltip-left .p-tooltip-arrow {
margin-top: -.25rem;
border-width: .25em 0 .25em .25rem;
margin-top: -0.25rem;
border-width: 0.25em 0 0.25em 0.25rem;
}
.p-tooltip.p-tooltip-top {
padding: .25em 0;
padding: 0.25em 0;
}
.p-tooltip-top .p-tooltip-arrow {
margin-left: -.25rem;
border-width: .25em .25em 0;
margin-left: -0.25rem;
border-width: 0.25em 0.25em 0;
}
.p-tooltip-bottom .p-tooltip-arrow {
margin-left: -.25rem;
border-width: 0 .25em .25rem;
margin-left: -0.25rem;
border-width: 0 0.25em 0.25rem;
}
// theme
.p-tooltip {
.p-tooltip-text {
background: $tooltipBg;
color: $tooltipTextColor;
padding: $tooltipPadding;
box-shadow: $inputOverlayShadow;
border-radius: $borderRadius;
}
.p-tooltip-text {
background: $tooltipBg;
color: $tooltipTextColor;
padding: $tooltipPadding;
box-shadow: $inputOverlayShadow;
border-radius: $borderRadius;
}
&.p-tooltip-right {
.p-tooltip-arrow {
border-right-color: $tooltipBg;
}
&.p-tooltip-right {
.p-tooltip-arrow {
border-right-color: $tooltipBg;
}
}
&.p-tooltip-left {
.p-tooltip-arrow {
border-left-color: $tooltipBg;
}
&.p-tooltip-left {
.p-tooltip-arrow {
border-left-color: $tooltipBg;
}
}
&.p-tooltip-top {
.p-tooltip-arrow {
border-top-color: $tooltipBg;
}
&.p-tooltip-top {
.p-tooltip-arrow {
border-top-color: $tooltipBg;
}
}
&.p-tooltip-bottom {
.p-tooltip-arrow {
border-bottom-color: $tooltipBg;
}
&.p-tooltip-bottom {
.p-tooltip-arrow {
border-bottom-color: $tooltipBg;
}
}
}

240
frontend/public/primevue-sass-theme/theme-base/components/panel/_accordion.scss
View File

@ -1,138 +1,138 @@
// core
.p-accordion-header-action {
cursor: pointer;
display: flex;
align-items: center;
user-select: none;
position: relative;
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
user-select: none;
position: relative;
text-decoration: none;
}
.p-accordion-header-action:focus {
z-index: 1;
z-index: 1;
}
.p-accordion-header-text {
line-height: 1;
line-height: 1;
}
// theme
.p-accordion {
.p-accordion-header {
.p-accordion-header {
.p-accordion-header-link {
padding: $accordionHeaderPadding;
border: $accordionHeaderBorder;
color: $accordionHeaderTextColor;
background: $accordionHeaderBg;
font-weight: $accordionHeaderFontWeight;
border-radius: $borderRadius;
transition: $listItemTransition;
outline-color: transparent;
.p-accordion-toggle-icon {
margin-right: $inlineSpacing;
}
}
&:not(.p-disabled) {
.p-accordion-header-link {
&:focus-visible {
@include focused-inset();
}
}
}
&:not(.p-highlight):not(.p-disabled):hover {
.p-accordion-header-link {
background: $accordionHeaderHoverBg;
border-color: $accordionHeaderHoverBorderColor;
color: $accordionHeaderTextHoverColor;
}
}
&:not(.p-disabled).p-highlight {
.p-accordion-header-link {
background: $accordionHeaderActiveBg;
border-color: $accordionHeaderActiveBorderColor;
color: $accordionHeaderTextActiveColor;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
&:hover {
.p-accordion-header-link {
padding: $accordionHeaderPadding;
border: $accordionHeaderBorder;
color: $accordionHeaderTextColor;
background: $accordionHeaderBg;
font-weight: $accordionHeaderFontWeight;
border-radius: $borderRadius;
transition: $listItemTransition;
outline-color: transparent;
.p-accordion-toggle-icon {
margin-right: $inlineSpacing;
}
}
&:not(.p-disabled) {
.p-accordion-header-link {
&:focus-visible {
@include focused-inset();
}
}
}
&:not(.p-highlight):not(.p-disabled):hover {
.p-accordion-header-link {
background: $accordionHeaderHoverBg;
border-color: $accordionHeaderHoverBorderColor;
color: $accordionHeaderTextHoverColor;
}
}
&:not(.p-disabled).p-highlight {
.p-accordion-header-link {
background: $accordionHeaderActiveBg;
border-color: $accordionHeaderActiveBorderColor;
color: $accordionHeaderTextActiveColor;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
&:hover {
.p-accordion-header-link {
border-color: $accordionHeaderActiveHoverBorderColor;
background: $accordionHeaderActiveHoverBg;
color: $accordionHeaderTextActiveHoverColor;
}
}
border-color: $accordionHeaderActiveHoverBorderColor;
background: $accordionHeaderActiveHoverBg;
color: $accordionHeaderTextActiveHoverColor;
}
}
}
}
.p-accordion-content {
padding: $accordionContentPadding;
border: $accordionContentBorder;
background: $accordionContentBg;
color: $accordionContentTextColor;
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
.p-accordion-tab {
margin-bottom: $accordionSpacing;
@if $accordionSpacing == 0 {
.p-accordion-header {
.p-accordion-header-link {
border-radius: 0;
}
}
.p-accordion-content {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:first-child) {
.p-accordion-header {
.p-accordion-header-link {
border-top: 0 none;
}
&:not(.p-highlight):not(.p-disabled):hover,
&:not(.p-disabled).p-highlight:hover {
.p-accordion-header-link {
border-top: 0 none;
}
}
}
}
&:first-child {
.p-accordion-header {
.p-accordion-header-link {
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
}
}
}
&:last-child {
.p-accordion-header:not(.p-highlight) {
.p-accordion-header-link {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}
.p-accordion-content {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}
}
.p-accordion-content {
padding: $accordionContentPadding;
border: $accordionContentBorder;
background: $accordionContentBg;
color: $accordionContentTextColor;
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
.p-accordion-tab {
margin-bottom: $accordionSpacing;
@if $accordionSpacing == 0 {
.p-accordion-header {
.p-accordion-header-link {
border-radius: 0;
}
}
.p-accordion-content {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:first-child) {
.p-accordion-header {
.p-accordion-header-link {
border-top: 0 none;
}
&:not(.p-highlight):not(.p-disabled):hover,
&:not(.p-disabled).p-highlight:hover {
.p-accordion-header-link {
border-top: 0 none;
}
}
}
}
&:first-child {
.p-accordion-header {
.p-accordion-header-link {
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
}
}
}
&:last-child {
.p-accordion-header:not(.p-highlight) {
.p-accordion-header-link {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}
.p-accordion-content {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}
}
}
}

46
frontend/public/primevue-sass-theme/theme-base/components/panel/_card.scss
View File

@ -1,30 +1,30 @@
.p-card {
background: $panelContentBg;
color: $panelContentTextColor;
box-shadow: $cardShadow;
border-radius: $borderRadius;
background: $panelContentBg;
color: $panelContentTextColor;
box-shadow: $cardShadow;
border-radius: $borderRadius;
.p-card-body {
padding: $cardBodyPadding;
}
.p-card-body {
padding: $cardBodyPadding;
}
.p-card-title {
font-size: $cardTitleFontSize;
font-weight: $cardTitleFontWeight;
margin-bottom: $inlineSpacing;
}
.p-card-title {
font-size: $cardTitleFontSize;
font-weight: $cardTitleFontWeight;
margin-bottom: $inlineSpacing;
}
.p-card-subtitle {
font-weight: $cardSubTitleFontWeight;
margin-bottom: $inlineSpacing;
color: $cardSubTitleColor;
}
.p-card-subtitle {
font-weight: $cardSubTitleFontWeight;
margin-bottom: $inlineSpacing;
color: $cardSubTitleColor;
}
.p-card-content {
padding: $cardContentPadding;
}
.p-card-content {
padding: $cardContentPadding;
}
.p-card-footer {
padding: $cardFooterPadding;
}
.p-card-footer {
padding: $cardFooterPadding;
}
}

142
frontend/public/primevue-sass-theme/theme-base/components/panel/_divider.scss
View File

@ -1,96 +1,96 @@
// core
.p-divider-horizontal {
display: flex;
width: 100%;
position: relative;
align-items: center;
display: flex;
width: 100%;
position: relative;
align-items: center;
}
.p-divider-horizontal:before {
position: absolute;
display: block;
top: 50%;
left: 0;
width: 100%;
content: '';
position: absolute;
display: block;
top: 50%;
left: 0;
width: 100%;
content: "";
}
.p-divider-content {
z-index: 1;
z-index: 1;
}
.p-divider-vertical {
min-height: 100%;
margin: 0 1rem;
display: flex;
position: relative;
justify-content: center;
min-height: 100%;
margin: 0 1rem;
display: flex;
position: relative;
justify-content: center;
}
.p-divider-vertical:before {
position: absolute;
display: block;
top: 0;
left: 50%;
height: 100%;
content: '';
position: absolute;
display: block;
top: 0;
left: 50%;
height: 100%;
content: "";
}
.p-divider {
&.p-divider-solid.p-divider-horizontal:before {
border-top-style: solid;
}
&.p-divider-solid.p-divider-vertical:before {
border-left-style: solid;
}
&.p-divider-dashed.p-divider-horizontal:before {
border-top-style: dashed;
}
&.p-divider-dashed.p-divider-vertical:before {
border-left-style: dashed;
}
&.p-divider-dotted.p-divider-horizontal:before {
border-top-style: dotted;
}
&.p-divider-dotted.p-divider-vertical:before {
border-left-style: dotted;
}
&.p-divider-solid.p-divider-horizontal:before {
border-top-style: solid;
}
&.p-divider-solid.p-divider-vertical:before {
border-left-style: solid;
}
&.p-divider-dashed.p-divider-horizontal:before {
border-top-style: dashed;
}
&.p-divider-dashed.p-divider-vertical:before {
border-left-style: dashed;
}
&.p-divider-dotted.p-divider-horizontal:before {
border-top-style: dotted;
}
&.p-divider-dotted.p-divider-vertical:before {
border-left-style: dotted;
}
}
// theme
.p-divider {
.p-divider-content {
background-color: $panelContentBg;
}
&.p-divider-horizontal {
margin: $dividerHorizontalMargin;
padding: $dividerHorizontalPadding;
&:before {
border-top: $dividerSize solid $dividerColor;
}
.p-divider-content {
background-color: $panelContentBg;
padding: 0 $inlineSpacing;
}
}
&.p-divider-vertical {
margin: $dividerVerticalMargin;
padding: $dividerVerticalPadding;
&:before {
border-left: $dividerSize solid $dividerColor;
}
&.p-divider-horizontal {
margin: $dividerHorizontalMargin;
padding: $dividerHorizontalPadding;
&:before {
border-top: $dividerSize solid $dividerColor;
}
.p-divider-content {
padding: 0 $inlineSpacing;
}
.p-divider-content {
padding: $inlineSpacing 0;
}
&.p-divider-vertical {
margin: $dividerVerticalMargin;
padding: $dividerVerticalPadding;
&:before {
border-left: $dividerSize solid $dividerColor;
}
.p-divider-content {
padding: $inlineSpacing 0;
}
}
}
}
}

98
frontend/public/primevue-sass-theme/theme-base/components/panel/_fieldset.scss
View File

@ -1,73 +1,73 @@
// core
.p-fieldset-legend > a,
.p-fieldset-legend > span {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.p-fieldset-toggleable .p-fieldset-legend a {
cursor: pointer;
user-select: none;
overflow: hidden;
position: relative;
text-decoration: none;
cursor: pointer;
user-select: none;
overflow: hidden;
position: relative;
text-decoration: none;
}
.p-fieldset-legend-text {
line-height: 1;
line-height: 1;
}
// theme
.p-fieldset {
border: $panelContentBorder;
background: $panelContentBg;
color: $panelContentTextColor;
border: $panelContentBorder;
background: $panelContentBg;
color: $panelContentTextColor;
border-radius: $borderRadius;
.p-fieldset-legend {
padding: $panelHeaderPadding;
border: $panelHeaderBorder;
color: $panelHeaderTextColor;
background: $panelHeaderBg;
font-weight: $panelHeaderFontWeight;
border-radius: $borderRadius;
}
&.p-fieldset-toggleable {
.p-fieldset-legend {
padding: 0;
transition: $actionIconTransition;
a {
padding: $panelHeaderPadding;
border: $panelHeaderBorder;
color: $panelHeaderTextColor;
background: $panelHeaderBg;
font-weight: $panelHeaderFontWeight;
border-radius: $borderRadius;
}
transition: $listItemTransition;
outline-color: transparent;
&.p-fieldset-toggleable {
.p-fieldset-legend {
padding: 0;
transition: $actionIconTransition;
a {
padding: $panelHeaderPadding;
color: $panelHeaderTextColor;
border-radius: $borderRadius;
transition: $listItemTransition;
outline-color: transparent;
.p-fieldset-toggler {
margin-right: $inlineSpacing;
}
&:focus-visible {
@include focused();
}
&:hover {
color: $panelHeaderTextHoverColor;
}
}
&:hover {
background: $panelHeaderHoverBg;
border-color: $panelHeaderHoverBorderColor;
color: $panelHeaderTextHoverColor;
}
.p-fieldset-toggler {
margin-right: $inlineSpacing;
}
}
.p-fieldset-content {
padding: $panelContentPadding;
&:focus-visible {
@include focused();
}
&:hover {
color: $panelHeaderTextHoverColor;
}
}
&:hover {
background: $panelHeaderHoverBg;
border-color: $panelHeaderHoverBorderColor;
color: $panelHeaderTextHoverColor;
}
}
}
.p-fieldset-content {
padding: $panelContentPadding;
}
}

100
frontend/public/primevue-sass-theme/theme-base/components/panel/_panel.scss
View File

@ -1,69 +1,69 @@
// core
.p-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
}
.p-panel-title {
line-height: 1;
line-height: 1;
}
.p-panel-header-icon {
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
overflow: hidden;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
overflow: hidden;
position: relative;
}
// theme
.p-panel {
.p-panel-header {
border: $panelHeaderBorder;
padding: $panelHeaderPadding;
background: $panelHeaderBg;
color: $panelHeaderTextColor;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
.p-panel-title {
font-weight: $panelHeaderFontWeight;
}
.p-panel-header-icon {
@include action-icon();
}
}
&.p-panel-toggleable {
.p-panel-header {
border: $panelHeaderBorder;
padding: $panelHeaderPadding;
background: $panelHeaderBg;
color: $panelHeaderTextColor;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
.p-panel-title {
font-weight: $panelHeaderFontWeight;
}
.p-panel-header-icon {
@include action-icon();
}
padding: $panelToggleableHeaderPadding;
}
}
&.p-panel-toggleable {
.p-panel-header {
padding: $panelToggleableHeaderPadding;
}
}
.p-panel-content {
padding: $panelContentPadding;
border: $panelContentBorder;
background: $panelContentBg;
color: $panelContentTextColor;
border-top: 0 none;
.p-panel-content {
padding: $panelContentPadding;
border: $panelContentBorder;
background: $panelContentBg;
color: $panelContentTextColor;
border-top: 0 none;
&:last-child {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
&:last-child {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}
.p-panel-footer {
padding: $panelFooterPadding;
border: $panelFooterBorder;
background: $panelFooterBg;
color: $panelFooterTextColor;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
border-top: 0 none;
}
.p-panel-footer {
padding: $panelFooterPadding;
border: $panelFooterBorder;
background: $panelFooterBg;
color: $panelFooterTextColor;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
border-top: 0 none;
}
}

74
frontend/public/primevue-sass-theme/theme-base/components/panel/_scrollpanel.scss
View File

@ -1,70 +1,70 @@
// core
.p-scrollpanel-wrapper {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
float: left;
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
float: left;
}
.p-scrollpanel-content {
height: calc(100% + 18px);
width: calc(100% + 18px);
padding: 0 18px 18px 0;
position: relative;
overflow: auto;
box-sizing: border-box;
scrollbar-width: none;
height: calc(100% + 18px);
width: calc(100% + 18px);
padding: 0 18px 18px 0;
position: relative;
overflow: auto;
box-sizing: border-box;
scrollbar-width: none;
}
.p-scrollpanel-content::-webkit-scrollbar {
display: none;
display: none;
}
.p-scrollpanel-bar {
position: relative;
background: #c1c1c1;
border-radius: 3px;
z-index: 2;
cursor: pointer;
opacity: 0;
transition: opacity 0.25s linear;
position: relative;
background: #c1c1c1;
border-radius: 3px;
z-index: 2;
cursor: pointer;
opacity: 0;
transition: opacity 0.25s linear;
}
.p-scrollpanel-bar-y {
width: 9px;
top: 0;
width: 9px;
top: 0;
}
.p-scrollpanel-bar-x {
height: 9px;
bottom: 0;
height: 9px;
bottom: 0;
}
.p-scrollpanel-hidden {
visibility: hidden;
visibility: hidden;
}
.p-scrollpanel:hover .p-scrollpanel-bar,
.p-scrollpanel:active .p-scrollpanel-bar {
opacity: 1;
opacity: 1;
}
.p-scrollpanel-grabbed {
user-select: none;
user-select: none;
}
// theme
.p-scrollpanel {
.p-scrollpanel-bar {
background: $scrollPanelTrackBg;
border: $scrollPanelTrackBorder;
transition: $formElementTransition;
outline-color: transparent;
.p-scrollpanel-bar {
background: $scrollPanelTrackBg;
border: $scrollPanelTrackBorder;
transition: $formElementTransition;
outline-color: transparent;
&:focus-visible {
@include focused();
}
&:focus-visible {
@include focused();
}
}
}
}

90
frontend/public/primevue-sass-theme/theme-base/components/panel/_splitter.scss
View File

@ -1,87 +1,87 @@
// core
.p-splitter {
display: flex;
flex-wrap: nowrap;
display: flex;
flex-wrap: nowrap;
}
.p-splitter-vertical {
flex-direction: column;
flex-direction: column;
}
.p-splitter-gutter {
flex-grow: 0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: col-resize;
flex-grow: 0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: col-resize;
}
.p-splitter-horizontal.p-splitter-resizing {
cursor: col-resize;
user-select: none;
cursor: col-resize;
user-select: none;
}
.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
height: 24px;
width: 100%;
height: 24px;
width: 100%;
}
.p-splitter-horizontal > .p-splitter-gutter {
cursor: col-resize;
cursor: col-resize;
}
.p-splitter-vertical.p-splitter-resizing {
cursor: row-resize;
user-select: none;
cursor: row-resize;
user-select: none;
}
.p-splitter-vertical > .p-splitter-gutter {
cursor: row-resize;
cursor: row-resize;
}
.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
width: 24px;
height: 100%;
width: 24px;
height: 100%;
}
.p-splitter-panel {
flex-grow: 1;
overflow: hidden;
flex-grow: 1;
overflow: hidden;
}
.p-splitter-panel-nested {
display: flex;
display: flex;
}
.p-splitter-panel .p-splitter {
flex-grow: 1;
border: 0 none;
flex-grow: 1;
border: 0 none;
}
// theme
.p-splitter {
border: $panelContentBorder;
background: $panelContentBg;
border-radius: $borderRadius;
color: $panelContentTextColor;
border: $panelContentBorder;
background: $panelContentBg;
border-radius: $borderRadius;
color: $panelContentTextColor;
.p-splitter-gutter {
transition: $actionIconTransition;
background: $splitterGutterBg;
.p-splitter-gutter-handle {
background: $splitterGutterHandleBg;
transition: $formElementTransition;
outline-color: transparent;
&:focus-visible {
@include focused();
}
}
}
.p-splitter-gutter {
transition: $actionIconTransition;
background: $splitterGutterBg;
.p-splitter-gutter-resizing {
background: $splitterGutterHandleBg;
.p-splitter-gutter-handle {
background: $splitterGutterHandleBg;
transition: $formElementTransition;
outline-color: transparent;
&:focus-visible {
@include focused();
}
}
}
}
.p-splitter-gutter-resizing {
background: $splitterGutterHandleBg;
}
}

304
frontend/public/primevue-sass-theme/theme-base/components/panel/_stepper.scss
View File

@ -1,202 +1,202 @@
@use 'sass:math';
@use "sass:math";
//core
.p-stepper .p-stepper-nav {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0;
list-style-type: none;
overflow-x: auto;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0;
list-style-type: none;
overflow-x: auto;
}
.p-stepper-vertical .p-stepper-nav {
flex-direction: column;
flex-direction: column;
}
.p-stepper-header {
position: relative;
display: flex;
flex: 1 1 auto;
align-items: center;
position: relative;
display: flex;
flex: 1 1 auto;
align-items: center;
&:last-of-type {
flex: initial;
}
&:last-of-type {
flex: initial;
}
}
.p-stepper-header .p-stepper-action {
border: 0 none;
display: inline-flex;
align-items: center;
text-decoration: none;
cursor: pointer;
border: 0 none;
display: inline-flex;
align-items: center;
text-decoration: none;
cursor: pointer;
&:focus-visible {
@include focused();
}
&:focus-visible {
@include focused();
}
}
.p-stepper.p-stepper-readonly .p-stepper-header {
cursor: auto;
cursor: auto;
}
.p-stepper-header.p-highlight .p-stepper-action {
cursor: default;
cursor: default;
}
.p-stepper-title {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.p-stepper-number {
position: relative;
display: flex;
align-items: center;
justify-content: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.p-stepper-separator {
flex: 1 1 0;
flex: 1 1 0;
}
//theme
.p-stepper {
.p-stepper-nav {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style-type: none;
}
.p-stepper-header {
padding: $inlineSpacing;
.p-stepper-nav {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style-type: none;
}
.p-stepper-action {
transition: $listItemTransition;
border-radius: $borderRadius;
background: $stepsItemBg;
outline-color: transparent;
.p-stepper-number {
color: $stepsItemNumberColor;
border: $stepsItemBorder;
border-width: 2px;
background: $stepsItemBg;
min-width: $stepsItemNumberWidth;
height: $stepsItemNumberHeight;
line-height: $stepsItemNumberHeight;
font-size: $stepsItemNumberFontSize;
border-radius: $stepsItemNumberBorderRadius;
transition: $actionIconTransition;
}
.p-stepper-title {
margin-left: $inlineSpacing;
color: $stepsItemTextColor;
font-weight: $stepsItemActiveFontWeight;
transition: $actionIconTransition;
}
.p-stepper-header {
padding: $inlineSpacing;
&:not(.p-disabled):focus-visible {
@include focused();
}
}
.p-stepper-action {
transition: $listItemTransition;
border-radius: $borderRadius;
background: $stepsItemBg;
outline-color: transparent;
&.p-highlight {
.p-stepper-number {
background: $highlightBg;
color: $highlightTextColor;
}
.p-stepper-number {
color: $stepsItemNumberColor;
border: $stepsItemBorder;
border-width: 2px;
background: $stepsItemBg;
min-width: $stepsItemNumberWidth;
height: $stepsItemNumberHeight;
line-height: $stepsItemNumberHeight;
font-size: $stepsItemNumberFontSize;
border-radius: $stepsItemNumberBorderRadius;
transition: $actionIconTransition;
}
.p-stepper-title {
color: $textColor;
}
}
.p-stepper-title {
margin-left: $inlineSpacing;
color: $stepsItemTextColor;
font-weight: $stepsItemActiveFontWeight;
transition: $actionIconTransition;
}
&:not(.p-disabled):focus-visible {
@include focused();
}
&:has(~ .p-highlight) {
@if variable-exists(primaryColor) {
.p-stepper-separator {
background-color: $primaryColor;
}
}
}
&:not(.p-disabled):focus-visible {
@include focused();
}
}
.p-stepper-panels {
background: $tabviewContentBg;
padding: $tabviewContentPadding;
color: $tabviewContentTextColor;
&.p-highlight {
.p-stepper-number {
background: $highlightBg;
color: $highlightTextColor;
}
.p-stepper-title {
color: $textColor;
}
}
.p-stepper-separator {
background-color: $timelineEventColor;
&:not(.p-disabled):focus-visible {
@include focused();
}
&:has(~ .p-highlight) {
@if variable-exists(primaryColor) {
.p-stepper-separator {
background-color: $primaryColor;
}
}
}
}
.p-stepper-panels {
background: $tabviewContentBg;
padding: $tabviewContentPadding;
color: $tabviewContentTextColor;
}
.p-stepper-separator {
background-color: $timelineEventColor;
width: 100%;
height: 2px;
margin-inline-start: calc($inlineSpacing * 2);
transition: $listItemTransition;
}
&.p-stepper-vertical {
display: flex;
flex-direction: column;
.p-stepper-toggleable-content {
display: flex;
flex: 1 1 auto;
background: $tabviewContentBg;
color: $tabviewContentTextColor;
}
.p-stepper-panel {
display: flex;
flex-direction: column;
flex: initial;
&.p-stepper-panel-active {
flex: 1 1 auto;
}
.p-stepper-header {
flex: initial;
}
.p-stepper-content {
width: 100%;
height: 2px;
margin-inline-start: calc($inlineSpacing * 2);
transition: $listItemTransition;
}
padding-left: calc($inlineSpacing * 2);
}
&.p-stepper-vertical {
display: flex;
flex-direction: column;
.p-stepper-separator {
flex: 0 0 auto;
width: 2px;
height: auto;
margin-inline-start: calc($inlineSpacing * 7 / 2 + 2px);
}
.p-stepper-toggleable-content {
display: flex;
flex: 1 1 auto;
background: $tabviewContentBg;
color: $tabviewContentTextColor;
&:has(~ .p-stepper-panel-active) {
@if variable-exists(primaryColor) {
.p-stepper-separator {
background-color: $primaryColor;
}
}
}
.p-stepper-panel {
display: flex;
flex-direction: column;
flex: initial;
&.p-stepper-panel-active {
flex: 1 1 auto;
}
.p-stepper-header {
flex: initial;
}
.p-stepper-content {
width: 100%;
padding-left: calc($inlineSpacing * 2);
}
.p-stepper-separator {
flex: 0 0 auto;
width: 2px;
height: auto;
margin-inline-start: calc($inlineSpacing * 7 / 2 + 2px);
}
&:has(~ .p-stepper-panel-active) {
@if variable-exists(primaryColor) {
.p-stepper-separator {
background-color: $primaryColor;
}
}
}
&:last-of-type {
.p-stepper-content {
padding-left: calc($inlineSpacing * 6);
}
}
&:last-of-type {
.p-stepper-content {
padding-left: calc($inlineSpacing * 6);
}
}
}
}
}

186
frontend/public/primevue-sass-theme/theme-base/components/panel/_tabview.scss
View File

@ -1,140 +1,140 @@
// core
.p-tabview-nav-container {
position: relative;
position: relative;
}
.p-tabview-scrollable .p-tabview-nav-container {
overflow: hidden;
overflow: hidden;
}
.p-tabview-nav-content {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
overscroll-behavior: contain auto;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
overscroll-behavior: contain auto;
}
.p-tabview-nav {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
flex: 1 1 auto;
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
flex: 1 1 auto;
}
.p-tabview-header-action {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
position: relative;
text-decoration: none;
overflow: hidden;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
position: relative;
text-decoration: none;
overflow: hidden;
}
.p-tabview-ink-bar {
display: none;
z-index: 1;
display: none;
z-index: 1;
}
.p-tabview-header-action:focus {
z-index: 1;
z-index: 1;
}
.p-tabview-title {
line-height: 1;
white-space: nowrap;
line-height: 1;
white-space: nowrap;
}
.p-tabview-nav-btn {
position: absolute;
top: 0;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.p-tabview-nav-prev {
left: 0;
left: 0;
}
.p-tabview-nav-next {
right: 0;
right: 0;
}
.p-tabview-nav-content::-webkit-scrollbar {
display: none;
display: none;
}
// theme
.p-tabview {
.p-tabview-nav {
background: $tabviewNavBg;
border: $tabviewNavBorder;
border-width: $tabviewNavBorderWidth;
.p-tabview-nav {
background: $tabviewNavBg;
border: $tabviewNavBorder;
border-width: $tabviewNavBorderWidth;
li {
margin-right: $tabviewHeaderSpacing;
li {
margin-right: $tabviewHeaderSpacing;
.p-tabview-nav-link {
border: $tabviewHeaderBorder;
border-width: $tabviewHeaderBorderWidth;
border-color: $tabviewHeaderBorderColor;
background: $tabviewHeaderBg;
color: $tabviewHeaderTextColor;
padding: $tabviewHeaderPadding;
font-weight: $tabviewHeaderFontWeight;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
transition: $listItemTransition;
margin: $tabviewHeaderMargin;
outline-color: transparent;
&:not(.p-disabled):focus-visible {
@include focused-inset();
}
}
&:not(.p-highlight):not(.p-disabled):hover {
.p-tabview-nav-link {
background: $tabviewHeaderHoverBg;
border-color: $tabviewHeaderHoverBorderColor;
color: $tabviewHeaderTextHoverColor;
}
}
&.p-highlight {
.p-tabview-nav-link {
background: $tabviewHeaderActiveBg;
border-color: $tabviewHeaderActiveBorderColor;
color: $tabviewHeaderTextActiveColor;
}
}
}
}
.p-tabview-nav-btn.p-link {
background: $tabviewHeaderActiveBg;
color: $tabviewHeaderTextActiveColor;
width: $buttonIconOnlyWidth;
box-shadow: $raisedButtonShadow;
border-radius: 0;
.p-tabview-nav-link {
border: $tabviewHeaderBorder;
border-width: $tabviewHeaderBorderWidth;
border-color: $tabviewHeaderBorderColor;
background: $tabviewHeaderBg;
color: $tabviewHeaderTextColor;
padding: $tabviewHeaderPadding;
font-weight: $tabviewHeaderFontWeight;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
transition: $listItemTransition;
margin: $tabviewHeaderMargin;
outline-color: transparent;
&:focus-visible {
@include focused-inset();
&:not(.p-disabled):focus-visible {
@include focused-inset();
}
}
}
.p-tabview-panels {
background: $tabviewContentBg;
padding: $tabviewContentPadding;
border: $tabviewContentBorder;
color: $tabviewContentTextColor;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
&:not(.p-highlight):not(.p-disabled):hover {
.p-tabview-nav-link {
background: $tabviewHeaderHoverBg;
border-color: $tabviewHeaderHoverBorderColor;
color: $tabviewHeaderTextHoverColor;
}
}
&.p-highlight {
.p-tabview-nav-link {
background: $tabviewHeaderActiveBg;
border-color: $tabviewHeaderActiveBorderColor;
color: $tabviewHeaderTextActiveColor;
}
}
}
}
.p-tabview-nav-btn.p-link {
background: $tabviewHeaderActiveBg;
color: $tabviewHeaderTextActiveColor;
width: $buttonIconOnlyWidth;
box-shadow: $raisedButtonShadow;
border-radius: 0;
outline-color: transparent;
&:focus-visible {
@include focused-inset();
}
}
.p-tabview-panels {
background: $tabviewContentBg;
padding: $tabviewContentPadding;
border: $tabviewContentBorder;
color: $tabviewContentTextColor;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}

32
frontend/public/primevue-sass-theme/theme-base/components/panel/_toolbar.scss
View File

@ -1,33 +1,33 @@
// core
.p-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.p-toolbar-group-start,
.p-toolbar-group-center,
.p-toolbar-group-end {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.p-toolbar-group-left,
.p-toolbar-group-right {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
// theme
.p-toolbar {
background: $panelHeaderBg;
border: $panelHeaderBorder;
padding: $panelHeaderPadding;
border-radius: $borderRadius;
gap: $inlineSpacing;
background: $panelHeaderBg;
border: $panelHeaderBorder;
padding: $panelHeaderPadding;
border-radius: $borderRadius;
gap: $inlineSpacing;
.p-toolbar-separator {
margin: 0 $inlineSpacing;
}
.p-toolbar-separator {
margin: 0 $inlineSpacing;
}
}

306
frontend/public/primevue-sass-theme/themes/lara/lara-dark/_extensions.scss
View File

@ -1,166 +1,186 @@
@mixin focused-ring($ring-color) {
box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px $ring-color, 0 1px 2px 0 rgba(0, 0, 0, 0.0);
box-shadow:
0 0 0 2px #1c2127,
0 0 0 4px $ring-color,
0 1px 2px 0 rgba(0, 0, 0, 0);
}
@layer primevue {
.p-button-label {
font-weight: 0;
.p-button-label {
font-weight: 0;
}
.p-selectbutton > .p-button,
.p-togglebutton.p-button {
transition:
background-color $transitionDuration,
border-color $transitionDuration,
box-shadow $transitionDuration;
}
.p-accordion {
.p-accordion-header {
.p-accordion-header-link {
transition:
background-color $transitionDuration,
border-color $transitionDuration,
box-shadow $transitionDuration;
}
}
.p-selectbutton > .p-button,
.p-togglebutton.p-button {
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
}
.p-accordion {
.p-accordion-header {
.p-accordion-header-link {
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
}
}
.p-tabview {
.p-tabview-nav {
li {
.p-tabview-nav-link {
transition:
background-color $transitionDuration,
border-color $transitionDuration,
box-shadow $transitionDuration;
}
}
}
.p-tabview {
.p-tabview-nav {
li {
.p-tabview-nav-link {
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
}
}
}
.p-tabmenu {
.p-tabmenu-nav {
.p-tabmenuitem {
.p-menuitem-link {
transition:
background-color $transitionDuration,
border-color $transitionDuration,
box-shadow $transitionDuration;
}
}
}
}
.p-carousel {
.p-carousel-indicators .p-carousel-indicator.p-highlight button {
background-color: $primaryColor;
}
}
.p-galleria {
.p-galleria-indicators .p-galleria-indicator.p-highlight button {
background-color: $primaryColor;
}
}
.p-button {
&:focus {
@include focused-ring(rgba($buttonBg, 0.7));
}
.p-tabmenu {
.p-tabmenu-nav {
.p-tabmenuitem {
.p-menuitem-link {
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
}
}
}
}
.p-carousel {
.p-carousel-indicators .p-carousel-indicator.p-highlight button {
background-color: $primaryColor;
}
}
.p-galleria {
.p-galleria-indicators .p-galleria-indicator.p-highlight button {
background-color: $primaryColor;
}
}
.p-button {
&:focus {
@include focused-ring(rgba($buttonBg, .7));
}
&.p-button-secondary:enabled:focus {
@include focused-ring(rgba($secondaryButtonBg, .7));
}
&.p-button-success:enabled:focus {
@include focused-ring(rgba($successButtonBg, .7));
}
&.p-button-info:enabled:focus {
@include focused-ring(rgba($infoButtonBg, .7));
}
&.p-button-warning:enabled:focus {
@include focused-ring(rgba($warningButtonBg, .7));
}
&.p-button-help:enabled:focus {
@include focused-ring(rgba($helpButtonBg, .7));
}
&.p-button-danger:enabled:focus {
@include focused-ring(rgba($dangerButtonBg, .7));
}
}
.p-datatable {
.p-datatable-tbody {
> tr {
&.p-datatable-dragpoint-top > td {
box-shadow: inset 0 2px 0 0 $primaryColor;
}
&.p-datatable-dragpoint-bottom > td {
box-shadow: inset 0 -2px 0 0 $primaryColor;
}
}
}
}
.p-speeddial-item {
&.p-focus > .p-speeddial-action {
@include focused-ring(rgba($buttonBg, .7));
}
&.p-button-secondary:enabled:focus {
@include focused-ring(rgba($secondaryButtonBg, 0.7));
}
&.p-button-success:enabled:focus {
@include focused-ring(rgba($successButtonBg, 0.7));
}
&.p-button-info:enabled:focus {
@include focused-ring(rgba($infoButtonBg, 0.7));
}
&.p-button-warning:enabled:focus {
@include focused-ring(rgba($warningButtonBg, 0.7));
}
&.p-button-help:enabled:focus {
@include focused-ring(rgba($helpButtonBg, 0.7));
}
&.p-button-danger:enabled:focus {
@include focused-ring(rgba($dangerButtonBg, 0.7));
}
}
.p-datatable {
.p-datatable-tbody {
> tr {
&.p-datatable-dragpoint-top > td {
box-shadow: inset 0 2px 0 0 $primaryColor;
}
&.p-datatable-dragpoint-bottom > td {
box-shadow: inset 0 -2px 0 0 $primaryColor;
}
}
}
}
.p-speeddial-item {
&.p-focus > .p-speeddial-action {
@include focused-ring(rgba($buttonBg, 0.7));
}
}
.p-toast-message {
backdrop-filter: blur(10px);
}
.p-message {
.p-message-close {
&:hover {
background: rgba(255, 255, 255, 0.1);
}
}
}
.p-toast {
.p-toast-message {
backdrop-filter: blur(10px);
}
.p-message {
.p-message-close {
&:hover {
background: rgba(255,255,255,.1);
}
.p-toast-icon-close {
&:hover {
background: rgba(255, 255, 255, 0.1);
}
}
}
}
.p-toast {
.p-toast-message {
.p-toast-icon-close {
&:hover {
background: rgba(255,255,255,.1);
}
}
.p-inline-message-text {
font-weight: 0;
}
.p-picklist-buttons .p-button,
.p-orderlist-controls .p-button {
transition:
opacity $transitionDuration,
background-color $transitionDuration,
color $transitionDuration,
border-color $transitionDuration,
box-shadow $transitionDuration;
}
.p-steps {
.p-steps-item {
&.p-highlight {
.p-steps-number {
background: $primaryColor;
color: $primaryTextColor;
}
}
}
}
.p-inline-message-text {
font-weight: 0;
}
.p-picklist-buttons .p-button,
.p-orderlist-controls .p-button {
transition: opacity $transitionDuration, background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
}
.p-steps {
.p-steps-item {
&.p-highlight {
.p-steps-number {
background: $primaryColor;
color: $primaryTextColor;
}
}
.p-stepper {
.p-stepper-header {
.p-stepper-action {
.p-stepper-number {
border-style: solid;
border-color: $shade600;
}
}
}
.p-stepper {
.p-stepper-header {
.p-stepper-action {
.p-stepper-number {
border-style: solid;
border-color: $shade600;
}
}
&.p-highlight {
.p-stepper-action {
.p-stepper-number {
background: $primaryColor;
color: $primaryTextColor;
}
}
}
&.p-highlight {
.p-stepper-action {
.p-stepper-number {
background: $primaryColor;
color: $primaryTextColor;
}
}
}
}
}
}
}

269
frontend/public/primevue-sass-theme/themes/lara/lara-dark/_variables.scss
View File

@ -1,47 +1,50 @@
$colors: (
"blue": #004699,
"green": #00964e,
"yellow": #ffed00,
"cyan": #009ee3,
"pink": #e5007d,
"indigo": #6366f1,
"teal": #14b8a6,
"orange": #f97316,
"bluegray": #64748b,
"purple": #a855f7,
"red": #e53009,
"primary": $primaryColor,
"htwk-yellow": #ffed00,
"htwk-yellow-24": rgba(255, 237, 0, 0.24),
"htwk-yellow-16": rgba(255, 237, 0, 0.16),
"htwk-yellow-01": rgba(255, 237, 0, 0.1),
"htwk-magenta": #e5007d,
"htwk-rot": #e53009,
"htwk-gruen": #00964e,
"htwk-cyan": #009ee3,
"htwk-blau": #004699,
"htwk-silbergrau": #bec3c6,
"htwk-silbergrau-80": #cbd3d1,
"htwk-silbergrau-60": #d8dedc,
"htwk-silbergrau-40": #e5e9e8,
"htwk-grau-140": #1b2022,
"htwk-grau-120": #242b2d,
"htwk-grau": #2e3639,
"htwk-grau-80": #575e60,
"htwk-grau-60": #818688,
"htwk-grau-40": #abaeaf,
"htwk-dunkelblau": #022541,
"htwk-dunkelblau-80": #345067,
"htwk-dunkelblau-60": #677c8d,
"htwk-dunkelblau-40": #99a7b3,
"htwk-schwarz": #000000,
"blue": #004699,
"green": #00964e,
"yellow": #ffed00,
"cyan": #009ee3,
"pink": #e5007d,
"indigo": #6366f1,
"teal": #14b8a6,
"orange": #f97316,
"bluegray": #64748b,
"purple": #a855f7,
"red": #e53009,
"primary": $primaryColor,
"htwk-yellow": #ffed00,
"htwk-yellow-24": rgba(255, 237, 0, 0.24),
"htwk-yellow-16": rgba(255, 237, 0, 0.16),
"htwk-yellow-01": rgba(255, 237, 0, 0.1),
"htwk-magenta": #e5007d,
"htwk-rot": #e53009,
"htwk-gruen": #00964e,
"htwk-cyan": #009ee3,
"htwk-blau": #004699,
"htwk-silbergrau": #bec3c6,
"htwk-silbergrau-80": #cbd3d1,
"htwk-silbergrau-60": #d8dedc,
"htwk-silbergrau-40": #e5e9e8,
"htwk-grau-140": #1b2022,
"htwk-grau-120": #242b2d,
"htwk-grau": #2e3639,
"htwk-grau-80": #575e60,
"htwk-grau-60": #818688,
"htwk-grau-40": #abaeaf,
"htwk-dunkelblau": #022541,
"htwk-dunkelblau-80": #345067,
"htwk-dunkelblau-60": #677c8d,
"htwk-dunkelblau-40": #99a7b3,
"htwk-schwarz": #000000,
);
//shades
$shade000: rgba(255, 255, 255, 0.87) !default; //text color
$shade100: rgba(255, 255, 255, 0.6) !default; //text secondary color
$shade500: #6b7280 !default;
$shade600: map-get($colors, "htwk-grau-140") !default; //input bg, border, divider
$shade600: map-get(
$colors,
"htwk-grau-140"
) !default; //input bg, border, divider
$shade700: map-get($colors, "htwk-grau") !default; //menu bg
$shade800: map-get($colors, "htwk-grau") !default; //elevated surface
$shade900: rgba(map-get($colors, "htwk-schwarz"), 1) !default; //ground surface
@ -49,15 +52,33 @@ $shade900: rgba(map-get($colors, "htwk-schwarz"), 1) !default; //ground surface
$hoverBg: rgba(255, 255, 255, 0.03) !default;
//global
$fontFamily: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
$fontFamily:
"Source Sans Pro",
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Twemoji Country Flags,
Roboto,
Arial,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji,
Segoe UI Symbol !default;
$fontSize: 1rem !default;
$fontWeight: normal !default;
$textColor: $shade000 !default;
$textSecondaryColor: $shade100 !default;
$borderRadius: 6px !default;
$transitionDuration: 0.2s !default;
$formElementTransition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
$actionIconTransition: background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
$formElementTransition:
background-color $transitionDuration,
color $transitionDuration,
border-color $transitionDuration,
box-shadow $transitionDuration !default;
$actionIconTransition:
background-color $transitionDuration,
color $transitionDuration,
box-shadow $transitionDuration !default;
$listItemTransition: box-shadow $transitionDuration !default;
$primeIconFontSize: 1rem !default;
$divider: 1px solid $shade600 !default;
@ -135,8 +156,10 @@ $inputListHeaderBorder: 1px solid $shade600 !default;
$inputOverlayBg: $inputListBg !default;
$inputOverlayHeaderBg: $inputListHeaderBg !default;
$inputOverlayBorder: 1px solid $shade600 !default;
$inputOverlayShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
$inputOverlayShadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
//password
$passwordMeterBg: $shade600 !default;
@ -157,8 +180,10 @@ $buttonHoverBorderColor: $primaryLightColor !default;
$buttonActiveBg: $primaryLighterColor !default;
$buttonTextActiveColor: $primaryTextColor !default;
$buttonActiveBorderColor: $primaryLighterColor !default;
$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
$raisedButtonShadow:
0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
$roundedButtonBorderRadius: 2rem !default;
$textButtonHoverBgOpacity: 0.04 !default;
@ -178,18 +203,19 @@ $secondaryButtonActiveBg: #e2e8f0 !default;
$secondaryButtonTextActiveColor: $secondaryButtonTextColor !default;
$secondaryButtonActiveBorderColor: #e2e8f0 !default;
$secondaryButtonFocusShadow: 0 0 0 1px
scale-color($secondaryButtonBg, $lightness: 30%) !default;
scale-color($secondaryButtonBg, $lightness: 30%) !default;
$infoButtonBg: map-get($colors, "htwk-blau") !default;
$infoButtonTextColor: #b1dafa !default;
$infoButtonBorder: 1px solid map-get($colors, "htwk-blau") !default;
$infoButtonHoverBg: scale-color($infoButtonBg, $lightness: 30%) !default;
$infoButtonHoverBg: scale-color($infoButtonBg, $lightness: 30%) !default;
$infoButtonTextHoverColor: $infoButtonTextColor !default;
$infoButtonHoverBorderColor: map-get($colors, "htwk-cyan") !default;
$infoButtonActiveBg: map-get($colors, "htwk-cyan") !default;
$infoButtonTextActiveColor: $infoButtonTextColor !default;
$infoButtonActiveBorderColor: map-get($colors, "htwk-cyan") !default;
$infoButtonFocusShadow: 0 0 0 1px scale-color($infoButtonHoverBg, $lightness: 30%) !default;
$infoButtonFocusShadow: 0 0 0 1px
scale-color($infoButtonHoverBg, $lightness: 30%) !default;
$successButtonBg: map-get($colors, "htwk-gruen") !default;
$successButtonTextColor: #052e16 !default;
@ -201,19 +227,25 @@ $successButtonActiveBg: #bbf7d0 !default;
$successButtonTextActiveColor: $successButtonTextColor !default;
$successButtonActiveBorderColor: #bbf7d0 !default;
$successButtonFocusShadow: 0 0 0 1px
scale-color($successButtonBg, $lightness: 30%) !default;
scale-color($successButtonBg, $lightness: 30%) !default;
$warningButtonBg: map-get($colors, "htwk-yellow") !default;
$warningButtonTextColor: #493c08 !default;
$warningButtonBorder: 1px solid map-get($colors, "htwk-yellow") !default;
$warningButtonHoverBg: scale-color($warningButtonBg, $lightness: 30%) !default;
$warningButtonTextHoverColor: $warningButtonTextColor !default;
$warningButtonHoverBorderColor: scale-color($warningButtonBg, $lightness: 10%) !default;
$warningButtonHoverBorderColor: scale-color(
$warningButtonBg,
$lightness: 10%
) !default;
$warningButtonActiveBg: scale-color($warningButtonBg, $lightness: 30%) !default;
$warningButtonTextActiveColor: $warningButtonTextColor !default;
$warningButtonActiveBorderColor: scale-color($warningButtonBg, $lightness: 30%) !default;
$warningButtonActiveBorderColor: scale-color(
$warningButtonBg,
$lightness: 30%
) !default;
$warningButtonFocusShadow: 0 0 0 1px
scale-color($warningButtonBg, $lightness: 30%) !default;
scale-color($warningButtonBg, $lightness: 30%) !default;
$helpButtonBg: #c084fc !default;
$helpButtonTextColor: #3b0764 !default;
@ -236,7 +268,7 @@ $dangerButtonActiveBg: #fecaca !default;
$dangerButtonTextActiveColor: $dangerButtonTextColor !default;
$dangerButtonActiveBorderColor: #fecaca !default;
$dangerButtonFocusShadow: 0 0 0 1px
scale-color($dangerButtonBg, $lightness: 30%) !default;
scale-color($dangerButtonBg, $lightness: 30%) !default;
$contrastButtonBg: #ffffff !default;
$contrastButtonTextColor: $shade900 !default;
@ -478,8 +510,10 @@ $cardSubTitleFontWeight: 100 !default;
$cardSubTitleColor: $shade100 !default;
$cardContentPadding: 1.25rem 0 !default;
$cardFooterPadding: 1.25rem 0 0 0 !default;
$cardShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;
$cardShadow:
0 2px 1px -1px rgba(0, 0, 0, 0.2),
0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;
//editor
$editorToolbarBg: $panelHeaderBg !default;
@ -644,8 +678,10 @@ $contrastMessageIconColor: $contrastButtonTextColor !default;
//overlays
$overlayContentBorder: 1px solid $shade600 !default;
$overlayContentBg: $panelContentBg !default;
$overlayContainerShadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12) !default;
$overlayContainerShadow:
0px 11px 15px -7px rgba(0, 0, 0, 0.2),
0px 24px 38px 3px rgba(0, 0, 0, 0.14),
0px 9px 46px 8px rgba(0, 0, 0, 0.12) !default;
//dialog
$dialogHeaderBg: $shade800 !default;
@ -719,8 +755,10 @@ $submenuHeaderBorderRadius: 0 !default;
$submenuHeaderFontWeight: 0 !default;
$overlayMenuBg: $menuBg !default;
$overlayMenuBorder: 1px solid $shade600 !default;
$overlayMenuShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
$overlayMenuShadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
$verticalMenuPadding: 0.25rem 0 !default;
$menuSeparatorMargin: 0.25rem 0 !default;
@ -887,55 +925,68 @@ $imagePreviewActionIconFontSize: 1.5rem !default;
$imagePreviewActionIconBorderRadius: 50% !default;
:root {
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
font-variation-settings: normal;
--font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
--surface-a: #{$shade800};
--surface-b: #{$shade900};
--surface-c: #{$hoverBg};
--surface-d: #{$shade600};
--surface-e: #{$shade800};
--surface-f: #{$shade800};
--text-color: #{$shade000};
--text-color-secondary: #{$shade100};
--primary-color: #{$primaryColor};
--primary-color-text: #{$primaryTextColor};
--surface-0: #{map-get($colors, "htwk-schwarz")};
--surface-50: #1d2530;
--surface-100: #363d47;
--surface-200: #4f565e;
--surface-300: #686e75;
--surface-400: #82868c;
--surface-500: #9b9ea3;
--surface-600: #b4b6ba;
--surface-700: #cdcfd1;
--surface-800: #e6e7e8;
--surface-900: #ffffff;
--gray-50: #e6e7e8;
--gray-100: #cdcfd1;
--gray-200: #b4b6ba;
--gray-300: #9b9ea3;
--gray-400: #82868c;
--gray-500: #686e75;
--gray-600: #4f565e;
--gray-700: #363d47;
--gray-800: #1d2530;
--gray-900: #{map-get($colors, "htwk-schwarz")};
--content-padding: #{$panelContentPadding};
--inline-spacing: #{$inlineSpacing};
--border-radius: #{$borderRadius};
--surface-ground: #{map-get($colors, "htwk-grau")};
--surface-section: #{map-get($colors, "htwk-grau")};
--surface-card: #{map-get($colors, "htwk-grau")};
--surface-overlay: #{map-get($colors, "htwk-grau")};
--surface-border: #{map-get($colors, "htwk-dunkelblau-60")};
--surface-hover: rgba(255, 255, 255, 0.03);
--focus-ring: #{$focusShadow};
--maskbg: #{$maskBg};
--highlight-bg: #{$highlightBg};
--highlight-text-color: #{$highlightTextColor};
color-scheme: dark;
background-color: #{map-get($colors, "htwk-grau-140")};
font-family:
"Source Sans Pro",
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Twemoji Country Flags,
Roboto,
Arial,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji,
Segoe UI Symbol;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
font-variation-settings: normal;
--font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI,
Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji,
Segoe UI Emoji, Segoe UI Symbol;
--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
--surface-a: #{$shade800};
--surface-b: #{$shade900};
--surface-c: #{$hoverBg};
--surface-d: #{$shade600};
--surface-e: #{$shade800};
--surface-f: #{$shade800};
--text-color: #{$shade000};
--text-color-secondary: #{$shade100};
--primary-color: #{$primaryColor};
--primary-color-text: #{$primaryTextColor};
--surface-0: #{map-get($colors, "htwk-schwarz")};
--surface-50: #1d2530;
--surface-100: #363d47;
--surface-200: #4f565e;
--surface-300: #686e75;
--surface-400: #82868c;
--surface-500: #9b9ea3;
--surface-600: #b4b6ba;
--surface-700: #cdcfd1;
--surface-800: #e6e7e8;
--surface-900: #ffffff;
--gray-50: #e6e7e8;
--gray-100: #cdcfd1;
--gray-200: #b4b6ba;
--gray-300: #9b9ea3;
--gray-400: #82868c;
--gray-500: #686e75;
--gray-600: #4f565e;
--gray-700: #363d47;
--gray-800: #1d2530;
--gray-900: #{map-get($colors, "htwk-schwarz")};
--content-padding: #{$panelContentPadding};
--inline-spacing: #{$inlineSpacing};
--border-radius: #{$borderRadius};
--surface-ground: #{map-get($colors, "htwk-grau")};
--surface-section: #{map-get($colors, "htwk-grau")};
--surface-card: #{map-get($colors, "htwk-grau")};
--surface-overlay: #{map-get($colors, "htwk-grau")};
--surface-border: #{map-get($colors, "htwk-dunkelblau-60")};
--surface-hover: rgba(255, 255, 255, 0.03);
--focus-ring: #{$focusShadow};
--maskbg: #{$maskBg};
--highlight-bg: #{$highlightBg};
--highlight-text-color: #{$highlightTextColor};
color-scheme: dark;
background-color: #{map-get($colors, "htwk-grau-140")};
}

164
frontend/public/primevue-sass-theme/themes/lara/lara-dark/yellow/theme.scss
View File

@ -5,16 +5,21 @@ $primaryLightestColor: rgba(255, 237, 0, 0.1) !default;
$primaryTextColor: #030712 !default;
$highlightBg: rgba($primaryColor, 0.16) !default;
$highlightTextColor: rgba(255,255,255,0.87) !default;
$highlightTextColor: rgba(255, 255, 255, 0.87) !default;
$highlightFocusBg: rgba($primaryColor, 0.24) !default;
@import '../_variables';
@import './_fonts';
@import '../../../../theme-base/_components';
@import '../_extensions';
@import "../_variables";
@import "./_fonts";
@import "../../../../theme-base/_components";
@import "../_extensions";
:root {
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 100;
}
@ -76,10 +81,10 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
border: 1px solid map-get($colors, "htwk-yellow"); /*#93c5fd*/
font-size: 1rem;
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
border-radius: 6px;
display: flex;
align-items: center;
@ -136,10 +141,10 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
color: rgba(255, 255, 255, 0.87);
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
}
.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover,
@ -150,23 +155,29 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
color: rgba(255, 255, 255, 0.87);
}
.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active,
.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active,
.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active {
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active,
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active,
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active {
background: map-get($colors, "htwk-yellow"); /*#93c5fd*/
border-color: map-get($colors, "htwk-yellow"); /*#93c5fd*/
color: map-get($colors, "htwk-schwarz"); /*#1c2127*/
}
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
background: map-get($colors, "primary");
border-color: map-get($colors, "htwk-yellow-24");
color: map-get($colors, "htwk-schwarz"); /*#1c2127*/
@ -227,10 +238,10 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close {
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close {
opacity: 1;
display: flex;
align-items: center;
@ -245,34 +256,34 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
background: transparent;
border-radius: 50%;
transition:
background-color 0.2s,
color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
box-shadow 0.2s;
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:before {
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:before {
content: "\e90b";
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:hover {
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:hover {
color: rgba(255, 255, 255, 0.87);
border-color: transparent;
background: rgba(255, 255, 255, 0.03);
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:focus {
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "htwk-yellow"), 0.5); /*rgba(147, 197, 253, 0.5)*/
@ -293,16 +304,16 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
}
.fc.fc-theme-standard
.fc-view-harness
.fc-event.fc-daygrid-block-event
.fc-event-main {
.fc-view-harness
.fc-event.fc-daygrid-block-event
.fc-event-main {
color: map-get($colors, "htwk-schwarz"); /*#1c2127*/
}
.fc.fc-theme-standard
.fc-view-harness
.fc-event.fc-daygrid-dot-event
.fc-daygrid-event-dot {
.fc-view-harness
.fc-event.fc-daygrid-dot-event
.fc-daygrid-event-dot {
background: map-get($colors, "primary");
border-color: map-get($colors, "htwk-yellow-24");
}
@ -322,10 +333,10 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
border: 1px solid map-get($colors, "htwk-yellow"); /*#93c5fd*/
font-size: 1rem;
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
border-radius: 6px;
}
@ -387,10 +398,10 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
color: rgba(255, 255, 255, 0.87);
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
}
.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover,
@ -402,42 +413,42 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
}
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active,
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active,
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active {
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active {
background: map-get($colors, "htwk-yellow"); /*#93c5fd*/
border-color: map-get($colors, "htwk-yellow"); /*#93c5fd*/
color: map-get($colors, "htwk-schwarz"); /*#1c2127*/
}
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
background: map-get($colors, "primary");
border-color: map-get($colors, "htwk-yellow-24");
color: map-get($colors, "htwk-schwarz"); /*#1c2127*/
}
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-dayGridMonth-button:not(:disabled):focus,
.fc-toolbar
.fc-button.fc-dayGridMonth-button:not(:disabled):focus,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridWeek-button:not(:disabled):focus,
.fc-toolbar
.fc-button.fc-timeGridWeek-button:not(:disabled):focus,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridDay-button:not(:disabled):focus {
.fc-toolbar
.fc-button.fc-timeGridDay-button:not(:disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "htwk-yellow"), 0.5); /*rgba(147, 197, 253, 0.5)*/
@ -460,6 +471,9 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
.fc.fc-theme-standard .fc-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(map-get($colors, "htwk-yellow"), 0.16); /*rgba(147, 197, 253, 0.16)*/
background: rgba(
map-get($colors, "htwk-yellow"),
0.16
); /*rgba(147, 197, 253, 0.16)*/
}
}

260
frontend/public/primevue-sass-theme/themes/lara/lara-light/_extensions.scss
View File

@ -1,139 +1,159 @@
@mixin focused-ring($ring-color) {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px $ring-color, 0 1px 2px 0 rgba(0, 0, 0, 1.0);
box-shadow:
0 0 0 2px #ffffff,
0 0 0 4px $ring-color,
0 1px 2px 0 rgba(0, 0, 0, 1);
}
@layer primevue {
.p-button-label {
font-weight: 600;
.p-button-label {
font-weight: 600;
}
.p-selectbutton > .p-button,
.p-togglebutton.p-button {
transition:
background-color $transitionDuration,
border-color $transitionDuration,
box-shadow $transitionDuration;
}
.p-accordion {
.p-accordion-header {
.p-accordion-header-link {
transition:
background-color $transitionDuration,
border-color $transitionDuration,
box-shadow $transitionDuration;
}
}
}
.p-tabview {
.p-tabview-nav {
li {
.p-tabview-nav-link {
transition:
background-color $transitionDuration,
border-color $transitionDuration,
box-shadow $transitionDuration;
}
}
}
}
.p-tabmenu {
.p-tabmenu-nav {
.p-tabmenuitem {
.p-menuitem-link {
transition:
background-color $transitionDuration,
border-color $transitionDuration,
box-shadow $transitionDuration;
}
}
}
}
.p-carousel {
.p-carousel-indicators .p-carousel-indicator.p-highlight button {
background-color: $primaryColor;
}
}
.p-galleria {
.p-galleria-indicators .p-galleria-indicator.p-highlight button {
background-color: $primaryColor;
}
}
.p-button {
&:focus {
@include focused-ring(scale-color($buttonBg, $lightness: 50%));
}
.p-selectbutton > .p-button,
.p-togglebutton.p-button {
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
}
.p-accordion {
.p-accordion-header {
.p-accordion-header-link {
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
}
}
}
.p-tabview {
.p-tabview-nav {
li {
.p-tabview-nav-link {
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
}
}
}
&.p-button-secondary:enabled:focus {
@include focused-ring(scale-color($secondaryButtonBg, $lightness: 50%));
}
.p-tabmenu {
.p-tabmenu-nav {
.p-tabmenuitem {
.p-menuitem-link {
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
}
}
}
}
.p-carousel {
.p-carousel-indicators .p-carousel-indicator.p-highlight button {
background-color: $primaryColor;
}
}
.p-galleria {
.p-galleria-indicators .p-galleria-indicator.p-highlight button {
background-color: $primaryColor;
}
}
.p-button {
&:focus {
@include focused-ring(scale-color($buttonBg, $lightness: 50%));
}
&.p-button-secondary:enabled:focus {
@include focused-ring(scale-color($secondaryButtonBg, $lightness: 50%));
}
&.p-button-success:enabled:focus {
@include focused-ring($successButtonBg);
}
&.p-button-info:enabled:focus {
@include focused-ring(scale-color($infoButtonBg, $lightness: 50%));
}
&.p-button-warning:enabled:focus {
@include focused-ring(scale-color($warningButtonBg, $lightness: 50%));
}
&.p-button-help:enabled:focus {
@include focused-ring(scale-color($helpButtonBg, $lightness: 50%));
}
&.p-button-danger:enabled:focus {
@include focused-ring(scale-color($dangerButtonBg, $lightness: 50%));
}
}
.p-datatable {
.p-datatable-tbody {
> tr {
&.p-datatable-dragpoint-top > td {
box-shadow: inset 0 2px 0 0 $primaryColor;
}
&.p-datatable-dragpoint-bottom > td {
box-shadow: inset 0 -2px 0 0 $primaryColor;
}
}
}
}
.p-speeddial-item {
&.p-focus > .p-speeddial-action {
@include focused-ring(scale-color($buttonBg, $lightness: 50%));
}
&.p-button-success:enabled:focus {
@include focused-ring($successButtonBg);
}
.p-toast-message {
backdrop-filter: blur(10px);
&.p-button-info:enabled:focus {
@include focused-ring(scale-color($infoButtonBg, $lightness: 50%));
}
.p-inline-message-text {
font-weight: 500;
&.p-button-warning:enabled:focus {
@include focused-ring(scale-color($warningButtonBg, $lightness: 50%));
}
.p-picklist-buttons .p-button,
.p-orderlist-controls .p-button {
transition: opacity $transitionDuration, background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
&.p-button-help:enabled:focus {
@include focused-ring(scale-color($helpButtonBg, $lightness: 50%));
}
.p-steps {
.p-steps-item {
&.p-highlight {
.p-steps-number {
background: $primaryColor;
color: $primaryTextColor;
}
}
&.p-button-danger:enabled:focus {
@include focused-ring(scale-color($dangerButtonBg, $lightness: 50%));
}
}
.p-datatable {
.p-datatable-tbody {
> tr {
&.p-datatable-dragpoint-top > td {
box-shadow: inset 0 2px 0 0 $primaryColor;
}
}
.p-stepper {
.p-stepper-header {
&.p-highlight {
.p-stepper-number {
background: $primaryColor;
color: $primaryTextColor;
}
}
&.p-datatable-dragpoint-bottom > td {
box-shadow: inset 0 -2px 0 0 $primaryColor;
}
}
}
}
}
.p-speeddial-item {
&.p-focus > .p-speeddial-action {
@include focused-ring(scale-color($buttonBg, $lightness: 50%));
}
}
.p-toast-message {
backdrop-filter: blur(10px);
}
.p-inline-message-text {
font-weight: 500;
}
.p-picklist-buttons .p-button,
.p-orderlist-controls .p-button {
transition:
opacity $transitionDuration,
background-color $transitionDuration,
color $transitionDuration,
border-color $transitionDuration,
box-shadow $transitionDuration;
}
.p-steps {
.p-steps-item {
&.p-highlight {
.p-steps-number {
background: $primaryColor;
color: $primaryTextColor;
}
}
}
}
.p-stepper {
.p-stepper-header {
&.p-highlight {
.p-stepper-number {
background: $primaryColor;
color: $primaryTextColor;
}
}
}
}
}

1506
frontend/public/primevue-sass-theme/themes/lara/lara-light/_variables.scss
View File

File diff suppressed because it is too large Load Diff

166
frontend/public/primevue-sass-theme/themes/lara/lara-light/blue/theme.scss
View File

@ -4,17 +4,22 @@ $primaryDarkColor: #002d67 !default;
$primaryDarkerColor: #022541 !default;
$primaryTextColor: #ffffff !default;
$highlightBg: #EFF6FF !default;
$highlightBg: #eff6ff !default;
$highlightTextColor: $primaryDarkerColor !default;
$highlightFocusBg: rgba($primaryColor, .24) !default;
$highlightFocusBg: rgba($primaryColor, 0.24) !default;
@import '../_variables';
@import './_fonts';
@import '../../../../theme-base/_components';
@import '../_extensions';
@import "../_variables";
@import "./_fonts";
@import "../../../../theme-base/_components";
@import "../_extensions";
:root {
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 100;
}
@ -65,10 +70,10 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
border: 1px solid map-get($colors, "primary"); /*#93c5fd*/
font-size: 1rem;
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
border-radius: 6px;
display: flex;
align-items: center;
@ -125,10 +130,10 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
color: rgba(255, 255, 255, 0.87);
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
}
.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover,
@ -139,23 +144,29 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
color: rgba(255, 255, 255, 0.87);
}
.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active,
.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active,
.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active {
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active,
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active,
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active {
background: map-get($colors, "primary"); /*#93c5fd*/
border-color: map-get($colors, "primary"); /*#93c5fd*/
color: $primaryTextColor; /*#1c2127*/
}
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
background: map-get($colors, "primary");
border-color: map-get($colors, "primary-24");
color: $primaryTextColor; /*#1c2127*/
@ -216,10 +227,10 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close {
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close {
opacity: 1;
display: flex;
align-items: center;
@ -234,34 +245,34 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
background: transparent;
border-radius: 50%;
transition:
background-color 0.2s,
color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
box-shadow 0.2s;
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:before {
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:before {
content: "\e90b";
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:hover {
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:hover {
color: rgba(255, 255, 255, 0.87);
border-color: transparent;
background: rgba(255, 255, 255, 0.03);
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:focus {
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
@ -282,16 +293,16 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
}
.fc.fc-theme-standard
.fc-view-harness
.fc-event.fc-daygrid-block-event
.fc-event-main {
.fc-view-harness
.fc-event.fc-daygrid-block-event
.fc-event-main {
color: $primaryTextColor; /*#1c2127*/
}
.fc.fc-theme-standard
.fc-view-harness
.fc-event.fc-daygrid-dot-event
.fc-daygrid-event-dot {
.fc-view-harness
.fc-event.fc-daygrid-dot-event
.fc-daygrid-event-dot {
background: map-get($colors, "primary");
border-color: map-get($colors, "primary-24");
}
@ -311,10 +322,10 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
border: 1px solid map-get($colors, "primary"); /*#93c5fd*/
font-size: 1rem;
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
border-radius: 6px;
}
@ -376,10 +387,10 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
color: rgba(255, 255, 255, 0.87);
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
}
.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover,
@ -391,42 +402,42 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
}
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active,
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active,
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active {
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active {
background: map-get($colors, "primary"); /*#93c5fd*/
border-color: map-get($colors, "primary"); /*#93c5fd*/
color: $primaryTextColor; /*#1c2127*/
}
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
background: map-get($colors, "primary");
border-color: map-get($colors, "primary-24");
color: $primaryTextColor; /*#1c2127*/
}
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-dayGridMonth-button:not(:disabled):focus,
.fc-toolbar
.fc-button.fc-dayGridMonth-button:not(:disabled):focus,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridWeek-button:not(:disabled):focus,
.fc-toolbar
.fc-button.fc-timeGridWeek-button:not(:disabled):focus,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridDay-button:not(:disabled):focus {
.fc-toolbar
.fc-button.fc-timeGridDay-button:not(:disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
@ -449,6 +460,9 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
.fc.fc-theme-standard .fc-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(map-get($colors, "primary"), 0.16); /*rgba(147, 197, 253, 0.16)*/
background: rgba(
map-get($colors, "primary"),
0.16
); /*rgba(147, 197, 253, 0.16)*/
}
}

178
frontend/public/primevue-sass-theme/themes/lara/lara-light/green/theme.scss
View File

@ -1,22 +1,35 @@
@use 'sass:color';
@use "sass:color";
$primaryColor: #00944c !default;
$primaryLightColor: color.scale($primaryColor, $lightness: 10%, $saturation: -10%) !default;
$primaryLightColor: color.scale(
$primaryColor,
$lightness: 10%,
$saturation: -10%
) !default;
$primaryDarkColor: color.scale($primaryColor, $lightness: -40%) !default;
$primaryDarkerColor: color.scale($primaryColor, $lightness: -80%) !default;
$primaryTextColor: #ffffff !default;
$highlightBg: color.scale($primaryColor, $lightness: 90%, $saturation: -80%) !default;
$highlightBg: color.scale(
$primaryColor,
$lightness: 90%,
$saturation: -80%
) !default;
$highlightTextColor: $primaryDarkerColor !default;
$highlightFocusBg: rgba($primaryColor, .24) !default;
$highlightFocusBg: rgba($primaryColor, 0.24) !default;
@import '../_variables';
@import './_fonts';
@import '../../../../theme-base/_components';
@import '../_extensions';
@import "../_variables";
@import "./_fonts";
@import "../../../../theme-base/_components";
@import "../_extensions";
:root {
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 100;
}
@ -78,10 +91,10 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
border: 1px solid map-get($colors, "primary"); /*#93c5fd*/
font-size: 1rem;
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
border-radius: 6px;
display: flex;
align-items: center;
@ -138,10 +151,10 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
color: rgba(255, 255, 255, 0.87);
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
}
.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover,
@ -152,23 +165,29 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
color: rgba(255, 255, 255, 0.87);
}
.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active,
.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active,
.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active {
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active,
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active,
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active {
background: map-get($colors, "primary"); /*#93c5fd*/
border-color: map-get($colors, "primary"); /*#93c5fd*/
color: $primaryTextColor; /*#1c2127*/
}
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
background: map-get($colors, "primary");
border-color: map-get($colors, "primary-24");
color: $primaryTextColor; /*#1c2127*/
@ -229,10 +248,10 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close {
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close {
opacity: 1;
display: flex;
align-items: center;
@ -247,34 +266,34 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
background: transparent;
border-radius: 50%;
transition:
background-color 0.2s,
color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
box-shadow 0.2s;
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:before {
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:before {
content: "\e90b";
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:hover {
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:hover {
color: rgba(255, 255, 255, 0.87);
border-color: transparent;
background: rgba(255, 255, 255, 0.03);
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:focus {
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
@ -295,16 +314,16 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
}
.fc.fc-theme-standard
.fc-view-harness
.fc-event.fc-daygrid-block-event
.fc-event-main {
.fc-view-harness
.fc-event.fc-daygrid-block-event
.fc-event-main {
color: $primaryTextColor; /*#1c2127*/
}
.fc.fc-theme-standard
.fc-view-harness
.fc-event.fc-daygrid-dot-event
.fc-daygrid-event-dot {
.fc-view-harness
.fc-event.fc-daygrid-dot-event
.fc-daygrid-event-dot {
background: map-get($colors, "primary");
border-color: map-get($colors, "primary-24");
}
@ -324,10 +343,10 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
border: 1px solid map-get($colors, "primary"); /*#93c5fd*/
font-size: 1rem;
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
border-radius: 6px;
}
@ -389,10 +408,10 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
color: rgba(255, 255, 255, 0.87);
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
}
.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover,
@ -404,42 +423,42 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
}
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active,
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active,
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active {
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active {
background: map-get($colors, "primary"); /*#93c5fd*/
border-color: map-get($colors, "primary"); /*#93c5fd*/
color: $primaryTextColor; /*#1c2127*/
}
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
background: map-get($colors, "primary");
border-color: map-get($colors, "primary-24");
color: $primaryTextColor; /*#1c2127*/
}
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-dayGridMonth-button:not(:disabled):focus,
.fc-toolbar
.fc-button.fc-dayGridMonth-button:not(:disabled):focus,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridWeek-button:not(:disabled):focus,
.fc-toolbar
.fc-button.fc-timeGridWeek-button:not(:disabled):focus,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridDay-button:not(:disabled):focus {
.fc-toolbar
.fc-button.fc-timeGridDay-button:not(:disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
@ -462,6 +481,9 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
.fc.fc-theme-standard .fc-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(map-get($colors, "primary"), 0.16); /*rgba(147, 197, 253, 0.16)*/
background: rgba(
map-get($colors, "primary"),
0.16
); /*rgba(147, 197, 253, 0.16)*/
}
}

3496
frontend/public/themes/lara-dark-blue/theme.css
View File

File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More