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,77 @@
|
||||
// core
|
||||
.p-breadcrumb {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-breadcrumb-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-link {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-breadcrumb::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-breadcrumb {
|
||||
background: $breadcrumbBg;
|
||||
border: $breadcrumbBorder;
|
||||
border-radius: $borderRadius;
|
||||
padding: $breadcrumbPadding;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
// core
|
||||
.p-contextmenu ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.p-contextmenu .p-submenu-list {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-contextmenu .p-menuitem-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.p-contextmenu .p-menuitem {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-contextmenu .p-menuitem-link .p-submenu-icon {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.p-contextmenu-enter-from,
|
||||
.p-contextmenu-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.p-contextmenu-enter-active {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,201 @@
|
||||
// core
|
||||
.p-dock {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-dock-list {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-dock-link {
|
||||
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);
|
||||
}
|
||||
|
||||
.p-dock-item-prev,
|
||||
.p-dock-item-next {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
|
||||
.p-dock-item-current {
|
||||
transform: scale(1.6);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Position */
|
||||
/* top */
|
||||
.p-dock-top {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-dock-top .p-dock-item {
|
||||
transform-origin: center top;
|
||||
}
|
||||
|
||||
/* bottom */
|
||||
.p-dock-bottom {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-dock-bottom .p-dock-item {
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
/* right */
|
||||
.p-dock-right {
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.p-dock-right .p-dock-item {
|
||||
transform-origin: center right;
|
||||
}
|
||||
|
||||
.p-dock-right .p-dock-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* left */
|
||||
.p-dock-left {
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.p-dock-left .p-dock-item {
|
||||
transform-origin: center left;
|
||||
}
|
||||
|
||||
.p-dock-left .p-dock-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-dock {
|
||||
.p-dock-list-container {
|
||||
background: $dockBg;
|
||||
border: $dockBorder;
|
||||
padding: $dockPadding;
|
||||
border-radius: $dockBorderRadius;
|
||||
|
||||
.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-prev,
|
||||
.p-dock-item-next {
|
||||
margin: 0 $dockFirstItemsMargin;
|
||||
}
|
||||
|
||||
.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-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 {
|
||||
.p-dock-item {
|
||||
transform: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,301 @@
|
||||
// core
|
||||
.p-megamenu {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-megamenu-root-list {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-megamenu .p-menuitem-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.p-megamenu-panel {
|
||||
display: none;
|
||||
width: auto;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-megamenu-panel:not(.p-megamenu-mobile) {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-megamenu-submenu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.p-megamenu-button {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Horizontal */
|
||||
.p-megamenu-horizontal {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-megamenu-horizontal .p-megamenu-root-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-megamenu-horizontal .p-megamenu-end {
|
||||
margin-left: auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* Vertical */
|
||||
.p-megamenu-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-megamenu-vertical:not(.p-megamenu-mobile) {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-megamenu-vertical .p-megamenu-root-list {
|
||||
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 .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.p-megamenu-grid {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-megamenu-col-2,
|
||||
.p-megamenu-col-3,
|
||||
.p-megamenu-col-4,
|
||||
.p-megamenu-col-6,
|
||||
.p-megamenu-col-12 {
|
||||
flex: 0 0 auto;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.p-megamenu-col-2 {
|
||||
width: 16.6667%;
|
||||
}
|
||||
|
||||
.p-megamenu-col-3 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.p-megamenu-col-4 {
|
||||
width: 33.3333%;
|
||||
}
|
||||
|
||||
.p-megamenu-col-6 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.p-megamenu-col-12 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-megamenu.p-megamenu-mobile .p-megamenu-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-megamenu.p-megamenu-mobile .p-submenu-list {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
|
||||
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%;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-megamenu {
|
||||
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 {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
// core
|
||||
.p-menu ul {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-menu .p-menuitem-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-menu {
|
||||
padding: $verticalMenuPadding;
|
||||
background: $menuBg;
|
||||
color: $menuTextColor;
|
||||
border: $menuBorder;
|
||||
border-radius: $borderRadius;
|
||||
min-width: $menuWidth;
|
||||
|
||||
.p-menuitem {
|
||||
@include menuitem();
|
||||
}
|
||||
|
||||
&.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-menuitem-separator {
|
||||
border-top: $divider;
|
||||
margin: $menuSeparatorMargin;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
// core
|
||||
.p-menubar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-menubar ul {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-menubar .p-menuitem-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.p-menubar .p-menuitem {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-menubar-root-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-menubar-root-list > li ul {
|
||||
display: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-menubar-root-list > .p-menuitem-active > .p-submenu-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-menubar .p-submenu-list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
|
||||
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-menubar-end {
|
||||
margin-left: auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.p-menubar-button {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.p-menubar.p-menubar-mobile {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-menubar.p-menubar-mobile .p-menubar-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-menubar.p-menubar-mobile .p-menubar-root-list {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-menubar.p-menubar-mobile .p-submenu-list {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-menubar.p-menubar-mobile-active .p-menubar-root-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-menubar {
|
||||
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 {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
// core
|
||||
.p-panelmenu .p-panelmenu-header-action {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-panelmenu .p-submenu-list {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-panelmenu .p-menuitem-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-panelmenu {
|
||||
.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 {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
@use 'sass:math';
|
||||
|
||||
// core
|
||||
.p-steps {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-list {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-steps-item .p-menuitem-link {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-steps-item.p-steps-current .p-menuitem-link {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.p-steps-title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.p-steps-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-steps-title {
|
||||
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-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;
|
||||
}
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
// core
|
||||
.p-tabmenu {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.p-tabmenu-nav {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-tabmenu-nav a:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-tabmenu-nav .p-menuitem-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.p-tabmenu-ink-bar {
|
||||
display: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-tabmenu::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-tabmenu {
|
||||
.p-tabmenu-nav {
|
||||
background: $tabviewNavBg;
|
||||
border: $tabviewNavBorder;
|
||||
border-width: $tabviewNavBorderWidth;
|
||||
|
||||
.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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
// core
|
||||
.p-tieredmenu ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.p-tieredmenu .p-submenu-list {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-tieredmenu .p-menuitem-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.p-tieredmenu .p-menuitem {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-tieredmenu .p-menuitem-link .p-submenu-icon {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.p-tieredmenu .p-menuitem-active > .p-submenu-list {
|
||||
display: block;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.p-tieredmenu-enter-from,
|
||||
.p-tieredmenu-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.p-tieredmenu-enter-active {
|
||||
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: $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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user