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,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;
|
||||
&:focus {
|
||||
outline: 0 none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1.5 + nth($inputPadding, 1);
|
||||
height: 1.5 + nth($inputPadding, 1);
|
||||
margin-left: -1 * nth($inputPadding, 2);
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-chip-remove-icon {
|
||||
margin-left: $inlineSpacing;
|
||||
border-radius: $borderRadius;
|
||||
transition: $actionIconTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0 none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user