mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2025-08-11 06:03:50 +02:00
feat:#47 updated primevue theme for sass
This commit is contained in:
Elmar Kresse
@@ -0,0 +1,138 @@
|
||||
// core
|
||||
.p-accordion-header-action {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.p-accordion-header-action:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-accordion-header-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-accordion {
|
||||
.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 {
|
||||
border-color: $accordionHeaderActiveHoverBorderColor;
|
||||
background: $accordionHeaderActiveHoverBg;
|
||||
color: $accordionHeaderTextActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-accordion-content {
|
||||
padding: $accordionContentPadding;
|
||||
border: $accordionContentBorder;
|
||||
background: $accordionContentBg;
|
||||
color: $accordionContentTextColor;
|
||||
border-top: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-accordion-tab {
|
||||
margin-bottom: $accordionSpacing;
|
||||
|
||||
@if $accordionSpacing == 0 {
|
||||
.p-accordion-header {
|
||||
.p-accordion-header-link {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.p-accordion-content {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
.p-accordion-header {
|
||||
.p-accordion-header-link {
|
||||
border-top: 0 none;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled):hover,
|
||||
&:not(.p-disabled).p-highlight:hover {
|
||||
.p-accordion-header-link {
|
||||
border-top: 0 none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.p-accordion-header {
|
||||
.p-accordion-header-link {
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.p-accordion-header:not(.p-highlight) {
|
||||
.p-accordion-header-link {
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
.p-accordion-content {
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
.p-card {
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
box-shadow: $cardShadow;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-card-body {
|
||||
padding: $cardBodyPadding;
|
||||
}
|
||||
|
||||
.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-content {
|
||||
padding: $cardContentPadding;
|
||||
}
|
||||
|
||||
.p-card-footer {
|
||||
padding: $cardFooterPadding;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
// core
|
||||
.p-divider-horizontal {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-divider-horizontal:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.p-divider-content {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-divider-vertical {
|
||||
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: '';
|
||||
}
|
||||
|
||||
.p-divider {
|
||||
&.p-divider-solid.p-divider-horizontal:before {
|
||||
border-top-style: solid;
|
||||
}
|
||||
|
||||
&.p-divider-solid.p-divider-vertical:before {
|
||||
border-left-style: solid;
|
||||
}
|
||||
|
||||
&.p-divider-dashed.p-divider-horizontal:before {
|
||||
border-top-style: dashed;
|
||||
}
|
||||
|
||||
&.p-divider-dashed.p-divider-vertical:before {
|
||||
border-left-style: dashed;
|
||||
}
|
||||
|
||||
&.p-divider-dotted.p-divider-horizontal:before {
|
||||
border-top-style: dotted;
|
||||
}
|
||||
|
||||
&.p-divider-dotted.p-divider-vertical:before {
|
||||
border-left-style: dotted;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
padding: 0 $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-divider-vertical {
|
||||
margin: $dividerVerticalMargin;
|
||||
padding: $dividerVerticalPadding;
|
||||
|
||||
&:before {
|
||||
border-left: $dividerSize solid $dividerColor;
|
||||
}
|
||||
|
||||
.p-divider-content {
|
||||
padding: $inlineSpacing 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
// core
|
||||
.p-fieldset-legend > a,
|
||||
.p-fieldset-legend > span {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-fieldset-legend-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-fieldset {
|
||||
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;
|
||||
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-content {
|
||||
padding: $panelContentPadding;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
// core
|
||||
.p-panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-panel-title {
|
||||
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;
|
||||
}
|
||||
|
||||
// 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 {
|
||||
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-footer {
|
||||
padding: $panelFooterPadding;
|
||||
border: $panelFooterBorder;
|
||||
background: $panelFooterBg;
|
||||
color: $panelFooterTextColor;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
border-top: 0 none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
// core
|
||||
.p-scrollpanel-wrapper {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-scrollpanel-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar-x {
|
||||
height: 9px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.p-scrollpanel-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-scrollpanel:hover .p-scrollpanel-bar,
|
||||
.p-scrollpanel:active .p-scrollpanel-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.p-scrollpanel-grabbed {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-scrollpanel {
|
||||
.p-scrollpanel-bar {
|
||||
background: $scrollPanelTrackBg;
|
||||
border: $scrollPanelTrackBorder;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
// core
|
||||
.p-splitter {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.p-splitter-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-splitter-gutter {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
|
||||
height: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-splitter-horizontal > .p-splitter-gutter {
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.p-splitter-vertical.p-splitter-resizing {
|
||||
cursor: row-resize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-splitter-vertical > .p-splitter-gutter {
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
|
||||
width: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.p-splitter-panel {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-splitter-panel-nested {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-splitter-panel .p-splitter {
|
||||
flex-grow: 1;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-splitter {
|
||||
border: $panelContentBorder;
|
||||
background: $panelContentBg;
|
||||
border-radius: $borderRadius;
|
||||
color: $panelContentTextColor;
|
||||
|
||||
.p-splitter-gutter {
|
||||
transition: $actionIconTransition;
|
||||
background: $splitterGutterBg;
|
||||
|
||||
.p-splitter-gutter-handle {
|
||||
background: $splitterGutterHandleBg;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitter-gutter-resizing {
|
||||
background: $splitterGutterHandleBg;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
// core
|
||||
.p-tabview-nav-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-tabview-scrollable .p-tabview-nav-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-tabview-nav-content {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-tabview-header-action {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-tabview-header-action:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-tabview-title {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-tabview-nav-prev {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-tabview-nav-next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.p-tabview-nav-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-tabview {
|
||||
.p-tabview-nav {
|
||||
background: $tabviewNavBg;
|
||||
border: $tabviewNavBorder;
|
||||
border-width: $tabviewNavBorderWidth;
|
||||
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
// core
|
||||
.p-toolbar {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-toolbar-group-left,
|
||||
.p-toolbar-group-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-toolbar {
|
||||
background: $panelHeaderBg;
|
||||
border: $panelHeaderBorder;
|
||||
padding: $panelHeaderPadding;
|
||||
border-radius: $borderRadius;
|
||||
gap: $inlineSpacing;
|
||||
|
||||
.p-toolbar-separator {
|
||||
margin: 0 $inlineSpacing;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user