HTWK/htwkalender
1
1
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git synced 2025-08-11 14:13:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat:#47 updated primevue theme for sass

Browse Source
This commit is contained in:
Elmar Kresse
2024-03-30 14:43:21 +01:00
parent d58b633159
commit d93287d732
104 changed files with 14548 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
frontend/public/primevue-sass-theme/theme-base/components/panel/_stepper.scss Normal file
View File

@@ -0,0 +1,202 @@
@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;
}
.p-stepper-vertical .p-stepper-nav {
flex-direction: column;
}
.p-stepper-header {
position: relative;
display: flex;
flex: 1 1 auto;
align-items: center;
&: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;
&:focus-visible {
@include focused();
}
}
.p-stepper.p-stepper-readonly .p-stepper-header {
cursor: auto;
}
.p-stepper-header.p-highlight .p-stepper-action {
cursor: default;
}
.p-stepper-title {
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;
}
.p-stepper-separator {
flex: 1 1 0;
}
//theme
.p-stepper {
.p-stepper-nav {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style-type: none;
}
.p-stepper-header {
padding: $inlineSpacing;
.p-stepper-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-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%;
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);
}
}
}
}
}