mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2025-08-11 06:03:50 +02:00
fix:#53 linted formatted frontend files
This commit is contained in:
Elmar Kresse
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user