@mediusinc/mng-commons 3.6.0 → 4.0.0-rc.1

package/scss/v2/theme/theme-base/components/menu/_panelmenu.scss

@@ -1,53 +1,60 @@
 .p-panelmenu {
     .p-panelmenu-header {
-        > a {
-            padding: $accordionHeaderPadding;
+        outline: 0 none;
+
+        .p-panelmenu-header-content {
             border: $accordionHeaderBorder;
             color: $accordionHeaderTextColor;
             background: $accordionHeaderBg;
-            font-weight: $accordionHeaderFontWeight;
             border-radius: $borderRadius;
             transition: $listItemTransition;
 
-            .p-panelmenu-icon {
-                margin-right: $inlineSpacing;
-            }
+            .p-panelmenu-header-action {
+                color: $accordionHeaderTextColor;
+                padding: $accordionHeaderPadding;
+                font-weight: $accordionHeaderFontWeight;
+
+                .p-submenu-icon {
+                    margin-right: $inlineSpacing;
+                }
 
-            .p-menuitem-icon {
-                margin-right: $inlineSpacing;
+                .p-menuitem-icon {
+                    margin-right: $inlineSpacing;
+                }
             }
+        }
 
-            &:focus {
-                @include focused();
+        &:not(.p-disabled) {
+            &:focus-visible {
+                .p-panelmenu-header-content {
+                    @include focused-inset();
+                }
             }
         }
 
-        &:not(.p-highlight):not(.p-disabled) {
-            > a:hover {
+        &:not(.p-highlight):not(.p-disabled):hover {
+            .p-panelmenu-header-content {
                 background: $accordionHeaderHoverBg;
                 border-color: $accordionHeaderHoverBorderColor;
                 color: $accordionHeaderTextHoverColor;
             }
         }
 
-        &.p-highlight {
-            margin-bottom: 0;
-
-            > a {
+        &: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;
             }
 
-            &:not(.p-disabled) {
-                > a {
-                    &:hover {
-                        border-color: $accordionHeaderActiveHoverBorderColor;
-                        background: $accordionHeaderActiveHoverBg;
-                        color: $accordionHeaderTextActiveHoverColor;
-                    }
+            &:hover {
+                .p-panelmenu-header-content {
+                    border-color: $accordionHeaderActiveHoverBorderColor;
+                    background: $accordionHeaderActiveHoverBg;
+                    color: $accordionHeaderTextActiveHoverColor;
                 }
             }
         }
@@ -58,24 +65,34 @@
         border: $accordionContentBorder;
         background: $accordionContentBg;
         color: $accordionContentTextColor;
-        margin-bottom: $accordionSpacing;
         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 {
-            .p-menuitem-link {
-                @include menuitem-link();
+            @include menuitem();
 
-                .p-panelmenu-icon {
-                    margin-right: $inlineSpacing;
+            .p-menuitem-content {
+                .p-menuitem-link {
+                    .p-submenu-icon {
+                        margin-right: $inlineSpacing;
+                    }
                 }
             }
         }
 
-        .p-submenu-list:not(.p-panelmenu-root-submenu) {
+        .p-menuitem-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+
+        .p-submenu-list:not(.p-panelmenu-root-list) {
             padding: $treeNodeChildrenPadding;
         }
     }
@@ -85,7 +102,7 @@
 
         @if $accordionSpacing == 0 {
             .p-panelmenu-header {
-                > a {
+                .p-panelmenu-header-content {
                     border-radius: 0;
                 }
             }
@@ -96,13 +113,13 @@
 
             &:not(:first-child) {
                 .p-panelmenu-header {
-                    > a {
+                    .p-panelmenu-header-content {
                         border-top: 0 none;
                     }
 
                     &:not(.p-highlight):not(.p-disabled):hover,
                     &:not(.p-disabled).p-highlight:hover {
-                        > a {
+                        .p-panelmenu-header-content {
                             border-top: 0 none;
                         }
                     }
@@ -111,7 +128,7 @@
 
             &:first-child {
                 .p-panelmenu-header {
-                    > a {
+                    .p-panelmenu-header-content {
                         border-top-right-radius: $borderRadius;
                         border-top-left-radius: $borderRadius;
                     }
@@ -120,7 +137,7 @@
 
             &:last-child {
                 .p-panelmenu-header:not(.p-highlight) {
-                    > a {
+                    .p-panelmenu-header-content {
                         border-bottom-right-radius: $borderRadius;
                         border-bottom-left-radius: $borderRadius;
                     }
@@ -131,10 +148,6 @@
                     border-bottom-left-radius: $borderRadius;
                 }
             }
-        } 
-    }
-
-    .p-menuitem-badge {
-        @include menuitem-badge();
+        }
     }
 }

package/scss/v2/theme/theme-base/components/menu/_slidemenu.scss

@@ -6,8 +6,16 @@
     border-radius: $borderRadius;
     width: $menuWidth;
 
-    .p-menuitem-link {
-        @include menuitem-link();
+    .p-slidemenu-root-list {
+        outline: 0 none;
+    }
+
+    .p-submenu-list {
+        outline: 0 none;
+    }
+
+    .p-menuitem {
+        @include menuitem();
     }
 
     &.p-slidemenu-overlay {
@@ -23,23 +31,7 @@
         box-shadow: $overlayMenuShadow;
     }
 
-    .p-slidemenu {
-        &.p-slidemenu-active {
-            > .p-slidemenu-link {
-                background: $menuitemActiveBg;
-
-                .p-slidemenu-text {
-                    color: $menuitemTextActiveColor;
-                }
-
-                .p-slidemenu-icon, .p-slidemenu-icon {
-                    color: $menuitemIconActiveColor;
-                }
-            }
-        }
-    }
-
-    .p-slidemenu-separator {
+    .p-menuitem-separator {
         border-top: $divider;
         margin: $menuSeparatorMargin;
     }
@@ -55,7 +47,10 @@
 
     .p-slidemenu-backward {
         padding: $menuitemPadding;
-	    color: $menuitemTextColor;
+        color: $menuitemTextColor;
+        &:not(.p-disabled):focus {
+            @include focused-inset();
+        }
     }
 
     .p-menuitem-badge {

package/scss/v2/theme/theme-base/components/menu/_steps.scss

@@ -25,7 +25,7 @@
                 color: $stepsItemTextColor;
             }
 
-            &:not(.p-disabled):focus {
+            &:not(.p-disabled):focus-visible {
                 @include focused();
             }
         }
@@ -43,7 +43,7 @@
         }
 
         &:before {
-            content:' ';
+            content: ' ';
             border-top: $divider;
             width: 100%;
             top: 50%;

package/scss/v2/theme/theme-base/components/menu/_tabmenu.scss

@@ -3,7 +3,6 @@
         background: $tabviewNavBg;
         border: $tabviewNavBorder;
         border-width: $tabviewNavBorderWidth;
-        
 
         .p-menuitem-badge {
             @include menuitem-badge();
@@ -29,7 +28,7 @@
                     margin-right: $inlineSpacing;
                 }
 
-                &:not(.p-disabled):focus {
+                &:not(.p-disabled):focus-visible {
                     @include focused-inset();
                 }
             }

package/scss/v2/theme/theme-base/components/menu/_tieredmenu.scss

@@ -6,16 +6,16 @@
     border-radius: $borderRadius;
     width: $menuWidth;
 
-    .p-menuitem-link {
-        @include menuitem-link();
-    }
-
     &.p-tieredmenu-overlay {
         background: $overlayMenuBg;
         border: $overlayMenuBorder;
         box-shadow: $overlayMenuShadow;
     }
 
+    .p-tieredmenu-root-list {
+        outline: 0 none;
+    }
+
     .p-submenu-list {
         padding: $verticalMenuPadding;
         background: $overlayMenuBg;
@@ -24,42 +24,20 @@
     }
 
     .p-menuitem {
-        margin: $verticalMenuitemMargin;
-    
-        &:last-child {
-            margin: 0;
-        }
-
-        &.p-menuitem-active {
-            > .p-menuitem-link {
-                background: $menuitemActiveBg;
-
-                .p-menuitem-text {
-                    color: $menuitemTextActiveColor;
-                }
-
-                .p-menuitem-icon, .p-submenu-icon {
-                    color: $menuitemIconActiveColor;
-                }
-            }
-        }
+        @include menuitem();
     }
 
-    .p-menu-separator {
+    .p-menuitem-separator {
         border-top: $divider;
         margin: $menuSeparatorMargin;
     }
 
     .p-submenu-icon {
         font-size: $menuitemSubmenuIconFontSize;
-    }
 
-    .p-icon {
-        width: $menuitemSubmenuIconFontSize;
-        height: $menuitemSubmenuIconFontSize;
-    }
-
-    .p-menuitem-badge {
-        @include menuitem-badge();
+        &.p-icon {
+            width: $menuitemSubmenuIconFontSize;
+            height: $menuitemSubmenuIconFontSize;
+        }
     }
 }

package/scss/v2/theme/theme-base/components/messages/_message.scss

@@ -14,10 +14,10 @@
         transition: $actionIconTransition;
 
         &:hover {
-            background: rgba(255,255,255,.3);
+            background: rgba(255, 255, 255, 0.5);
         }
 
-        &:focus {
+        &:focus-visible {
             @include focused();
         }
     }

package/scss/v2/theme/theme-base/components/messages/_toast.scss

@@ -40,10 +40,10 @@
             transition: $actionIconTransition;
 
             &:hover {
-                background: rgba(255,255,255,.3);
+                background: rgba(255, 255, 255, 0.5);
             }
 
-            &:focus {
+            &:focus-visible {
                 @include focused();
             }
         }
@@ -95,6 +95,5 @@
                 color: $errorMessageIconColor;
             }
         }
-
     }
 }

package/scss/v2/theme/theme-base/components/misc/_chip.scss

@@ -30,9 +30,13 @@
     .pi-chip-remove-icon {
         border-radius: $borderRadius;
         transition: $actionIconTransition;
-        
-        &:focus {
+
+        &:focus-visible {
             @include focused();
         }
+
+        &:focus {
+            outline: 0 none;
+        }
     }
-}
+}

package/scss/v2/theme/theme-base/components/misc/_inplace.scss

@@ -14,4 +14,3 @@
         }
     }
 }
-

package/scss/v2/theme/theme-base/components/misc/_terminal.scss

@@ -1,11 +1,12 @@
 .p-terminal {
-	background: $panelContentBg;
-	color: $panelContentTextColor;
-	border: $panelContentBorder;
-	padding: $panelContentPadding;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    border: $panelContentBorder;
+    padding: $panelContentPadding;
 
-	.p-terminal-input {
-		font-size: $fontSize;
-		font-family: $fontFamily;
-	}
+    .p-terminal-input {
+        font-family: var(--font-family);
+        font-feature-settings: var(--font-feature-settings, normal);
+        font-size: $inputTextFontSize;
+    }
 }

package/scss/v2/theme/theme-base/components/multimedia/_galleria.scss

@@ -141,6 +141,12 @@
                 color: $galleriaThumbnailNavigatorHoverColor;
             }
         }
+
+        .p-galleria-thumbnail-item-content {
+            &:focus-visible {
+                @include focused();
+            }
+        }
     }
 }
 

package/scss/v2/theme/theme-base/components/overlay/_confirmpopup.scss

@@ -35,8 +35,7 @@
         @if (nth($overlayContentBorder, 2) == 'none') {
             border-color: rgba($overlayContentBg, 0);
             border-bottom-color: $overlayContentBg;
-        }
-        @else {
+        } @else {
             border-color: rgba(nth($overlayContentBorder, 3), 0);
             border-bottom-color: nth($overlayContentBorder, 3);
         }
@@ -50,8 +49,7 @@
         &:before {
             @if (nth($overlayContentBorder, 2) == 'none') {
                 border-top-color: $overlayContentBg;
-            }
-            @else {
+            } @else {
                 border-top-color: nth($overlayContentBorder, 3);
             }
         }
@@ -59,7 +57,7 @@
 
     .p-confirm-popup-icon {
         font-size: $primeIconFontSize * 1.5;
-        
+
         &.p-icon {
             width: $primeIconFontSize * 1.5;
             height: $primeIconFontSize * 1.5;

package/scss/v2/theme/theme-base/components/panel/_accordion.scss

@@ -16,8 +16,8 @@
 
         &:not(.p-disabled) {
             .p-accordion-header-link {
-                &:focus {
-                    @include focused();
+                &:focus-visible {
+                    @include focused-inset();
                 }
             }
         }
@@ -65,7 +65,7 @@
         .p-accordion-tab {
             margin-bottom: $accordionSpacing;
         }
-        
+
         @if $accordionSpacing == 0 {
             .p-accordion-header {
                 .p-accordion-header-link {
@@ -114,6 +114,6 @@
                     border-bottom-left-radius: $borderRadius;
                 }
             }
-        } 
+        }
     }
 }

package/scss/v2/theme/theme-base/components/panel/_fieldset.scss

@@ -28,7 +28,7 @@
                     margin-right: $inlineSpacing;
                 }
 
-                &:focus {
+                &:focus-visible {
                     @include focused();
                 }
             }

package/scss/v2/theme/theme-base/components/panel/_panel.scss

@@ -27,9 +27,12 @@
         border: $panelContentBorder;
         background: $panelContentBg;
         color: $panelContentTextColor;
-        border-bottom-right-radius: $borderRadius;
-        border-bottom-left-radius: $borderRadius;
         border-top: 0 none;
+
+        &:last-child {
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
     }
 
     .p-panel-footer {
@@ -37,13 +40,15 @@
         border: $panelFooterBorder;
         background: $panelFooterBg;
         color: $panelFooterTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
         border-top: 0 none;
     }
 
     .p-panel-icons-end {
         order: 2;
         margin-left: auto;
-    }    
+    }
 
     .p-panel-icons-start {
         order: 0;
@@ -52,7 +57,7 @@
 
     .p-panel-icons-center {
         order: 2;
-        width:100%;
-        text-align:center;
+        width: 100%;
+        text-align: center;
     }
 }

package/scss/v2/theme/theme-base/components/panel/_tabview.scss

@@ -1,4 +1,8 @@
 .p-tabview {
+    .p-tabview-nav-content {
+        scroll-padding-inline: $buttonIconOnlyWidth;
+    }
+
     .p-tabview-nav {
         background: $tabviewNavBg;
         border: $tabviewNavBorder;
@@ -20,7 +24,7 @@
                 transition: $listItemTransition;
                 margin: $tabviewHeaderMargin;
 
-                &:not(.p-disabled):focus {
+                &:not(.p-disabled):focus-visible {
                     @include focused-inset();
                 }
             }
@@ -62,7 +66,7 @@
         box-shadow: $raisedButtonShadow;
         border-radius: 0;
 
-        &:focus {
+        &:focus-visible {
             @include focused-inset();
         }
     }