mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git
synced 2026-01-16 11:02:25 +01:00
Merge branch 'refs/heads/main' into 3-semi-offline-room-finder
# Conflicts: # frontend/src/components/RoomOccupationOffline.vue # frontend/src/model/roomOccupancyList.ts
This commit is contained in:
Elmar Kresse
8
.gitattributes
vendored
Normal file
8
.gitattributes
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
*.ts text eol=lf
|
||||
*.go text eol=lf
|
||||
*.js text eol=lf
|
||||
*.json text eol=lf
|
||||
*.vue text eol=lf
|
||||
*.md text eol=lf
|
||||
*.css text eol=lf
|
||||
*.scss text eol=lf
|
||||
@@ -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/package-lock.json
generated
2
frontend/package-lock.json
generated
@@ -4477,6 +4477,7 @@
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
|
||||
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
@@ -4486,6 +4487,7 @@
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.1.3.tgz",
|
||||
"integrity": "sha512-ZfbMu+nbzW0mEzC8VZrLiSWvUIaI3aRHeq33mTe7Y38UctKukgqPR4nTDwcwS4d64Gf8GghnVsroBuMY3eiTeA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"date-fns": "^3.0.0"
|
||||
}
|
||||
|
||||
BIN
frontend/public/1280x720.png
Normal file
BIN
frontend/public/1280x720.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
frontend/public/390x844.png
Normal file
BIN
frontend/public/390x844.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
@@ -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%)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
to {
|
||||
background-color: var(--maskbg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes p-component-overlay-leave-animation {
|
||||
from {
|
||||
background-color: var(--maskbg);
|
||||
}
|
||||
to {
|
||||
background-color: transparent;
|
||||
}
|
||||
@keyframes p-component-overlay-leave-animation {
|
||||
from {
|
||||
background-color: var(--maskbg);
|
||||
}
|
||||
to {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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";
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
color: $menuitemTextColor;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $menuitemBorderRadius;
|
||||
|
||||
.p-menuitem-link {
|
||||
color: $menuitemTextColor;
|
||||
padding: $menuitemPadding;
|
||||
user-select: none;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $menuitemTextColor;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
&.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 {
|
||||
color: $menuitemTextColor;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $menuitemBorderRadius;
|
||||
&:hover {
|
||||
color: $menuitemTextHoverColor;
|
||||
background: $menuitemHoverBg;
|
||||
|
||||
.p-menuitem-link {
|
||||
color: $menuitemTextColor;
|
||||
padding: $menuitemPadding;
|
||||
user-select: none;
|
||||
.p-menuitem-text {
|
||||
color: $menuitemTextHoverColor;
|
||||
}
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $menuitemTextColor;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.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);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
.p-carousel-indicator {
|
||||
margin-right: $inlineSpacing;
|
||||
margin-bottom: $inlineSpacing;
|
||||
|
||||
button {
|
||||
background-color: $carouselIndicatorBg;
|
||||
width: $carouselIndicatorWidth;
|
||||
height: $carouselIndicatorHeight;
|
||||
transition: $actionIconTransition;
|
||||
border-radius: $carouselIndicatorBorderRadius;
|
||||
button {
|
||||
background-color: $carouselIndicatorBg;
|
||||
width: $carouselIndicatorWidth;
|
||||
height: $carouselIndicatorHeight;
|
||||
transition: $actionIconTransition;
|
||||
border-radius: $carouselIndicatorBorderRadius;
|
||||
|
||||
&:hover {
|
||||
background: $carouselIndicatorHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
button {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: $carouselIndicatorHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
button {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
.p-orderlist-item:nth-child(even) {
|
||||
background: $panelContentEvenRowBg;
|
||||
|
||||
&: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-striped {
|
||||
.p-orderlist-list {
|
||||
.p-orderlist-item:nth-child(even) {
|
||||
background: $panelContentEvenRowBg;
|
||||
|
||||
&:hover {
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-picklist-striped {
|
||||
.p-picklist-list {
|
||||
.p-picklist-item:nth-child(even) {
|
||||
background: $panelContentEvenRowBg;
|
||||
|
||||
&:hover {
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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-expanded {
|
||||
.ql-picker-label {
|
||||
color: $editorToolbarIconHoverColor;
|
||||
|
||||
.ql-stroke {
|
||||
stroke: $editorToolbarIconHoverColor;
|
||||
}
|
||||
|
||||
.ql-picker {
|
||||
.ql-picker-label {
|
||||
border: 0 none;
|
||||
color: $editorToolbarIconColor;
|
||||
|
||||
&:hover {
|
||||
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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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,13 +66,13 @@
|
||||
.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,
|
||||
@@ -80,23 +80,23 @@
|
||||
.p-inputgroup input: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// core
|
||||
.p-inputtextarea-resizable {
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.p-fluid .p-inputtextarea {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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-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-item {
|
||||
padding: $dockItemPadding;
|
||||
border-radius: $dockItemBorderRadius;
|
||||
|
||||
&.p-focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
.p-dock-item-prev,
|
||||
.p-dock-item-next {
|
||||
margin: 0 $dockFirstItemsMargin;
|
||||
}
|
||||
|
||||
.p-dock-link {
|
||||
width: $dockActionWidth;
|
||||
height: $dockActionHeight;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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-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 {
|
||||
width: 100%;
|
||||
padding: $horizontalMenuPadding;
|
||||
}
|
||||
|
||||
.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-root-list {
|
||||
outline: 0 none;
|
||||
}
|
||||
padding: $verticalMenuPadding;
|
||||
background: $overlayMenuBg;
|
||||
border: $overlayMenuBorder;
|
||||
box-shadow: $overlayMenuShadow;
|
||||
|
||||
.p-menuitem {
|
||||
@include menuitem();
|
||||
}
|
||||
.p-menuitem-separator {
|
||||
border-top: $divider;
|
||||
margin: $menuSeparatorMargin;
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
padding: $horizontalMenuPadding;
|
||||
}
|
||||
|
||||
.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-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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-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-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, 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
.p-panelmenu-content {
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
&:focus {
|
||||
outline: 0 none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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)
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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};
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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-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;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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-horizontal:before {
|
||||
border-top-style: solid;
|
||||
}
|
||||
|
||||
&.p-divider-solid.p-divider-vertical:before {
|
||||
border-left-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-horizontal:before {
|
||||
border-top-style: dashed;
|
||||
}
|
||||
|
||||
&.p-divider-dashed.p-divider-vertical:before {
|
||||
border-left-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-horizontal:before {
|
||||
border-top-style: dotted;
|
||||
}
|
||||
|
||||
&.p-divider-dotted.p-divider-vertical:before {
|
||||
border-left-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-vertical {
|
||||
margin: $dividerVerticalMargin;
|
||||
padding: $dividerVerticalPadding;
|
||||
|
||||
&:before {
|
||||
border-left: $dividerSize solid $dividerColor;
|
||||
}
|
||||
|
||||
.p-divider-content {
|
||||
padding: $inlineSpacing 0;
|
||||
}
|
||||
.p-divider-content {
|
||||
padding: $inlineSpacing 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
transition: $actionIconTransition;
|
||||
background: $splitterGutterBg;
|
||||
|
||||
.p-splitter-gutter-handle {
|
||||
background: $splitterGutterHandleBg;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
.p-splitter-gutter-handle {
|
||||
background: $splitterGutterHandleBg;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitter-gutter-resizing {
|
||||
background: $splitterGutterHandleBg;
|
||||
}
|
||||
.p-splitter-gutter-resizing {
|
||||
background: $splitterGutterHandleBg;
|
||||
}
|
||||
}
|
||||
@@ -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-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.p-stepper-header {
|
||||
padding: $inlineSpacing;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
&:not(.p-disabled):focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
.p-stepper-header {
|
||||
padding: $inlineSpacing;
|
||||
&.p-highlight {
|
||||
.p-stepper-number {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
&:not(.p-disabled):focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-stepper-number {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
|
||||
.p-stepper-title {
|
||||
color: $textColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled):focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
|
||||
&:has(~ .p-highlight) {
|
||||
@if variable-exists(primaryColor) {
|
||||
.p-stepper-separator {
|
||||
background-color: $primaryColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
.p-stepper-title {
|
||||
color: $textColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-stepper-panels {
|
||||
background: $tabviewContentBg;
|
||||
padding: $tabviewContentPadding;
|
||||
color: $tabviewContentTextColor;
|
||||
&:not(.p-disabled):focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
|
||||
.p-stepper-separator {
|
||||
background-color: $timelineEventColor;
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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-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-selectbutton > .p-button,
|
||||
.p-togglebutton.p-button {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
&.p-button-secondary:enabled:focus {
|
||||
@include focused-ring(rgba($secondaryButtonBg, 0.7));
|
||||
}
|
||||
|
||||
.p-accordion {
|
||||
.p-accordion-header {
|
||||
.p-accordion-header-link {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
}
|
||||
&.p-button-success:enabled:focus {
|
||||
@include focused-ring(rgba($successButtonBg, 0.7));
|
||||
}
|
||||
|
||||
.p-tabview {
|
||||
.p-tabview-nav {
|
||||
li {
|
||||
.p-tabview-nav-link {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.p-button-info:enabled:focus {
|
||||
@include focused-ring(rgba($infoButtonBg, 0.7));
|
||||
}
|
||||
|
||||
.p-tabmenu {
|
||||
.p-tabmenu-nav {
|
||||
.p-tabmenuitem {
|
||||
.p-menuitem-link {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.p-button-warning:enabled:focus {
|
||||
@include focused-ring(rgba($warningButtonBg, 0.7));
|
||||
}
|
||||
|
||||
.p-carousel {
|
||||
.p-carousel-indicators .p-carousel-indicator.p-highlight button {
|
||||
background-color: $primaryColor;
|
||||
}
|
||||
&.p-button-help:enabled:focus {
|
||||
@include focused-ring(rgba($helpButtonBg, 0.7));
|
||||
}
|
||||
|
||||
.p-galleria {
|
||||
.p-galleria-indicators .p-galleria-indicator.p-highlight button {
|
||||
background-color: $primaryColor;
|
||||
}
|
||||
&.p-button-danger:enabled:focus {
|
||||
@include focused-ring(rgba($dangerButtonBg, 0.7));
|
||||
}
|
||||
}
|
||||
|
||||
.p-button {
|
||||
&:focus {
|
||||
@include focused-ring(rgba($buttonBg, .7));
|
||||
.p-datatable {
|
||||
.p-datatable-tbody {
|
||||
> tr {
|
||||
&.p-datatable-dragpoint-top > td {
|
||||
box-shadow: inset 0 2px 0 0 $primaryColor;
|
||||
}
|
||||
|
||||
&.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-dragpoint-bottom > td {
|
||||
box-shadow: inset 0 -2px 0 0 $primaryColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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-speeddial-item {
|
||||
&.p-focus > .p-speeddial-action {
|
||||
@include focused-ring(rgba($buttonBg, .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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")};
|
||||
}
|
||||
|
||||
@@ -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,18 @@ $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)*/
|
||||
}
|
||||
}
|
||||
|
||||
.fc-event-selected::after, .fc-event:focus::after {
|
||||
background: var(--fc-event-selected-overlay-color);
|
||||
inset: -1px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@@ -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-button-secondary:enabled:focus {
|
||||
@include focused-ring(scale-color($secondaryButtonBg, $lightness: 50%));
|
||||
}
|
||||
|
||||
.p-accordion {
|
||||
.p-accordion-header {
|
||||
.p-accordion-header-link {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
}
|
||||
&.p-button-success:enabled:focus {
|
||||
@include focused-ring($successButtonBg);
|
||||
}
|
||||
|
||||
.p-tabview {
|
||||
.p-tabview-nav {
|
||||
li {
|
||||
.p-tabview-nav-link {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.p-button-info:enabled:focus {
|
||||
@include focused-ring(scale-color($infoButtonBg, $lightness: 50%));
|
||||
}
|
||||
|
||||
.p-tabmenu {
|
||||
.p-tabmenu-nav {
|
||||
.p-tabmenuitem {
|
||||
.p-menuitem-link {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.p-button-warning:enabled:focus {
|
||||
@include focused-ring(scale-color($warningButtonBg, $lightness: 50%));
|
||||
}
|
||||
|
||||
.p-carousel {
|
||||
.p-carousel-indicators .p-carousel-indicator.p-highlight button {
|
||||
background-color: $primaryColor;
|
||||
}
|
||||
&.p-button-help:enabled:focus {
|
||||
@include focused-ring(scale-color($helpButtonBg, $lightness: 50%));
|
||||
}
|
||||
|
||||
.p-galleria {
|
||||
.p-galleria-indicators .p-galleria-indicator.p-highlight button {
|
||||
background-color: $primaryColor;
|
||||
}
|
||||
&.p-button-danger:enabled:focus {
|
||||
@include focused-ring(scale-color($dangerButtonBg, $lightness: 50%));
|
||||
}
|
||||
}
|
||||
|
||||
.p-button {
|
||||
&:focus {
|
||||
@include focused-ring(scale-color($buttonBg, $lightness: 50%));
|
||||
.p-datatable {
|
||||
.p-datatable-tbody {
|
||||
> tr {
|
||||
&.p-datatable-dragpoint-top > td {
|
||||
box-shadow: inset 0 2px 0 0 $primaryColor;
|
||||
}
|
||||
|
||||
&.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-dragpoint-bottom > td {
|
||||
box-shadow: inset 0 -2px 0 0 $primaryColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable {
|
||||
.p-datatable-tbody {
|
||||
> tr {
|
||||
&.p-datatable-dragpoint-top > 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-datatable-dragpoint-bottom > td {
|
||||
box-shadow: inset 0 -2px 0 0 $primaryColor;
|
||||
}
|
||||
}
|
||||
.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-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;
|
||||
}
|
||||
}
|
||||
.p-stepper {
|
||||
.p-stepper-header {
|
||||
&.p-highlight {
|
||||
.p-stepper-number {
|
||||
background: $primaryColor;
|
||||
color: $primaryTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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
Reference in New Issue
Block a user