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

package/scss/v2/theme/theme-base/components/button/_splitbutton.scss

@@ -7,16 +7,14 @@
             color: $buttonBg;
             border: $outlinedButtonBorder;
 
-            @include button-states {
-                &:hover {
-                    background: rgba($buttonBg, $textButtonHoverBgOpacity);
-                    color: $buttonBg;
-                }
+            &:not(:disabled):hover {
+                background: rgba($buttonBg, $textButtonHoverBgOpacity);
+                color: $buttonBg;
+            }
 
-                &:active {
-                    background: rgba($buttonBg, $textButtonActiveBgOpacity);
-                    color: $buttonBg;
-                }
+            &:not(:disabled):active {
+                background: rgba($buttonBg, $textButtonActiveBgOpacity);
+                color: $buttonBg;
             }
         }
 
@@ -25,16 +23,14 @@
                 color: $plainButtonTextColor;
                 border-color: $plainButtonTextColor;
 
-                @include button-states {
-                    &:hover {
-                        background: $plainButtonHoverBgColor;
-                        color: $plainButtonTextColor;
-                    }
+                &:not(:disabled):hover {
+                    background: $plainButtonHoverBgColor;
+                    color: $plainButtonTextColor;
+                }
 
-                    &:active {
-                        background: $plainButtonActiveBgColor;
-                        color: $plainButtonTextColor;
-                    }
+                &:not(:disabled):active {
+                    background: $plainButtonActiveBgColor;
+                    color: $plainButtonTextColor;
                 }
             }
         }
@@ -46,18 +42,16 @@
             color: $buttonBg;
             border-color: transparent;
 
-            @include button-states {
-                &:hover {
-                    background: rgba($buttonBg, $textButtonHoverBgOpacity);
-                    color: $buttonBg;
-                    border-color: transparent;
-                }
+            &:not(:disabled):hover {
+                background: rgba($buttonBg, $textButtonHoverBgOpacity);
+                color: $buttonBg;
+                border-color: transparent;
+            }
 
-                &:active {
-                    background: rgba($buttonBg, $textButtonActiveBgOpacity);
-                    color: $buttonBg;
-                    border-color: transparent;
-                }
+            &:not(:disabled):active {
+                background: rgba($buttonBg, $textButtonActiveBgOpacity);
+                color: $buttonBg;
+                border-color: transparent;
             }
         }
 
@@ -65,22 +59,19 @@
             > .p-button {
                 color: $plainButtonTextColor;
 
-                @include button-states {
-                    &:hover {
-                        background: $plainButtonHoverBgColor;
-                        color: $plainButtonTextColor;
-                    }
+                &:not(:disabled):hover {
+                    background: $plainButtonHoverBgColor;
+                    color: $plainButtonTextColor;
+                }
 
-                    &:active {
-                        background: $plainButtonActiveBgColor;
-                        color: $plainButtonTextColor;
-                    }
+                &:not(:disabled):active {
+                    background: $plainButtonActiveBgColor;
+                    color: $plainButtonTextColor;
                 }
             }
         }
     }
 
-
     &.p-button-raised {
         box-shadow: $raisedButtonShadow;
     }
@@ -116,23 +107,21 @@
     }
 }
 
-.p-splitbutton.p-button-secondary {    
+.p-splitbutton.p-button-secondary {
     &.p-button-outlined {
         > .p-button {
             background-color: transparent;
             color: $secondaryButtonBg;
             border: $outlinedButtonBorder;
 
-            @include button-states {
-                &:hover {
-                    background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
-                    color: $secondaryButtonBg;
-                }
+            &:not(:disabled):hover {
+                background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+                color: $secondaryButtonBg;
+            }
 
-                &:active {
-                    background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
-                    color: $secondaryButtonBg;
-                }
+            &:not(:disabled):active {
+                background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+                color: $secondaryButtonBg;
             }
         }
     }
@@ -143,18 +132,16 @@
             color: $secondaryButtonBg;
             border-color: transparent;
 
-            @include button-states {
-                &:hover {
-                    background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
-                    border-color: transparent;
-                    color: $secondaryButtonBg;
-                }
+            &:not(:disabled):hover {
+                background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $secondaryButtonBg;
+            }
 
-                &:active {
-                    background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
-                    border-color: transparent;
-                    color: $secondaryButtonBg;
-                }
+            &:not(:disabled):active {
+                background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $secondaryButtonBg;
             }
         }
     }
@@ -167,16 +154,14 @@
             color: $infoButtonBg;
             border: $outlinedButtonBorder;
 
-            @include button-states {
-                &:hover {
-                    background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
-                    color: $infoButtonBg;
-                }
+            &:not(:disabled):hover {
+                background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+                color: $infoButtonBg;
+            }
 
-                &:active {
-                    background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
-                    color: $infoButtonBg;
-                }
+            &:not(:disabled):active {
+                background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+                color: $infoButtonBg;
             }
         }
     }
@@ -187,18 +172,16 @@
             color: $infoButtonBg;
             border-color: transparent;
 
-            @include button-states {
-                &:hover {
-                    background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
-                    border-color: transparent;
-                    color: $infoButtonBg;
-                }
+            &:not(:disabled):hover {
+                background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $infoButtonBg;
+            }
 
-                &:active {
-                    background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
-                    border-color: transparent;
-                    color: $infoButtonBg;
-                }
+            &:not(:disabled):active {
+                background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $infoButtonBg;
             }
         }
     }
@@ -211,16 +194,14 @@
             color: $successButtonBg;
             border: $outlinedButtonBorder;
 
-            @include button-states {
-                &:hover {
-                    background: rgba($successButtonBg, $textButtonHoverBgOpacity);
-                    color: $successButtonBg;
-                }
+            &:not(:disabled):hover {
+                background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+                color: $successButtonBg;
+            }
 
-                &:active {
-                    background: rgba($successButtonBg, $textButtonActiveBgOpacity);
-                    color: $successButtonBg;
-                }
+            &:not(:disabled):active {
+                background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+                color: $successButtonBg;
             }
         }
     }
@@ -231,18 +212,16 @@
             color: $successButtonBg;
             border-color: transparent;
 
-            @include button-states {
-                &:hover {
-                    background: rgba($successButtonBg, $textButtonHoverBgOpacity);
-                    border-color: transparent;
-                    color: $successButtonBg;
-                }
+            &:not(:disabled):hover {
+                background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $successButtonBg;
+            }
 
-                &:active {
-                    background: rgba($successButtonBg, $textButtonActiveBgOpacity);
-                    border-color: transparent;
-                    color: $successButtonBg;
-                }
+            &:not(:disabled):active {
+                background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $successButtonBg;
             }
         }
     }
@@ -255,16 +234,14 @@
             color: $warningButtonBg;
             border: $outlinedButtonBorder;
 
-            @include button-states {
-                &:hover {
-                    background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
-                    color: $warningButtonBg;
-                }
+            &:not(:disabled):hover {
+                background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+                color: $warningButtonBg;
+            }
 
-                &:active {
-                    background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
-                    color: $warningButtonBg;
-                }
+            &:not(:disabled):active {
+                background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+                color: $warningButtonBg;
             }
         }
     }
@@ -275,18 +252,16 @@
             color: $warningButtonBg;
             border-color: transparent;
 
-            @include button-states {
-                &:hover {
-                    background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
-                    border-color: transparent;
-                    color: $warningButtonBg;
-                }
+            &:not(:disabled):hover {
+                background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $warningButtonBg;
+            }
 
-                &:active {
-                    background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
-                    border-color: transparent;
-                    color: $warningButtonBg;
-                }
+            &:not(:disabled):active {
+                background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $warningButtonBg;
             }
         }
     }
@@ -299,16 +274,14 @@
             color: $helpButtonBg;
             border: $outlinedButtonBorder;
 
-            @include button-states {
-                &:hover {
-                    background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
-                    color: $helpButtonBg;
-                }
+            &:not(:disabled):hover {
+                background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+                color: $helpButtonBg;
+            }
 
-                &:active {
-                    background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
-                    color: $helpButtonBg;
-                }
+            &:not(:disabled):active {
+                background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+                color: $helpButtonBg;
             }
         }
     }
@@ -319,18 +292,16 @@
             color: $helpButtonBg;
             border-color: transparent;
 
-            @include button-states {
-                &:hover {
-                    background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
-                    border-color: transparent;
-                    color: $helpButtonBg;
-                }
+            &:not(:disabled):hover {
+                background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $helpButtonBg;
+            }
 
-                &:active {
-                    background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
-                    border-color: transparent;
-                    color: $helpButtonBg;
-                }
+            &:not(:disabled):active {
+                background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $helpButtonBg;
             }
         }
     }
@@ -343,16 +314,14 @@
             color: $dangerButtonBg;
             border: $outlinedButtonBorder;
 
-            @include button-states {
-                &:hover {
-                    background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
-                    color: $dangerButtonBg;
-                }
+            &:not(:disabled):hover {
+                background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+                color: $dangerButtonBg;
+            }
 
-                &:active {
-                    background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
-                    color: $dangerButtonBg;
-                }
+            &:not(:disabled):active {
+                background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+                color: $dangerButtonBg;
             }
         }
     }
@@ -363,19 +332,17 @@
             color: $dangerButtonBg;
             border-color: transparent;
 
-            @include button-states {
-                &:hover {
-                    background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
-                    border-color: transparent;
-                    color: $dangerButtonBg;
-                }
+            &:not(:disabled):hover {
+                background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $dangerButtonBg;
+            }
 
-                &:active {
-                    background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
-                    border-color: transparent;
-                    color: $dangerButtonBg;
-                }
+            &:not(:disabled):active {
+                background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $dangerButtonBg;
             }
         }
     }
-} 
+}

package/scss/v2/theme/theme-base/components/data/_carousel.scss

@@ -13,7 +13,7 @@
         .p-carousel-indicator {
             margin-right: $inlineSpacing;
             margin-bottom: $inlineSpacing;
-           
+
             button {
                 background-color: $carouselIndicatorBg;
                 width: $carouselIndicatorWidth;

package/scss/v2/theme/theme-base/components/data/_datatable.scss

@@ -91,7 +91,7 @@
             }
         }
 
-        &:focus {
+        &:focus-visible {
             box-shadow: $inputListItemFocusShadow;
             outline: 0 none;
         }
@@ -121,9 +121,9 @@
                 }
             }
 
-            &:focus {
+            &:focus-visible {
                 outline: 0.15rem solid $focusOutlineColor;
-                outline-offset: 0.15rem;
+                outline-offset: -0.15rem;
             }
 
             &.p-highlight {

package/scss/v2/theme/theme-base/components/data/_dataview.scss

@@ -25,15 +25,6 @@
         padding: $dataViewContentPadding;
     }
 
-    &.p-dataview-list {
-        .p-dataview-content {
-            > .p-grid > div {
-                border: $dataViewListItemBorder;
-                border-width: $dataViewListItemBorderWidth;
-            }
-        }
-    }
-
     .p-dataview-footer {
         background: $tableFooterBg;
         color: $tableFooterTextColor;

package/scss/v2/theme/theme-base/components/data/_filter.scss

@@ -32,10 +32,9 @@
         color: $highlightTextColor;
     }
 
-    &:focus {
+    &:focus-visible {
         @include focused();
     }
-
 }
 
 .p-column-filter-clear-button {
@@ -53,7 +52,7 @@
         background: $actionIconHoverBg;
     }
 
-    &:focus {
+    &:focus-visible {
         @include focused();
     }
 }
@@ -88,7 +87,7 @@
                 background: $inputListItemHoverBg;
             }
 
-            &:focus {
+            &:focus-visible {
                 @include focused-listitem();
             }
         }
@@ -134,5 +133,5 @@
 
     .p-column-filter-buttonbar {
         padding: $panelContentPadding;
-    } 
-}
+    }
+}

package/scss/v2/theme/theme-base/components/data/_orderlist.scss

@@ -35,7 +35,7 @@
             right: nth($inputPadding, 2);
             color: $inputIconColor;
         }
-    }      
+    }
 
     .p-orderlist-list {
         border: $panelContentBorder;
@@ -44,6 +44,7 @@
         padding: $inputListPadding;
         border-bottom-right-radius: $borderRadius;
         border-bottom-left-radius: $borderRadius;
+        outline: 0 none;
 
         .p-orderlist-item {
             padding: $inputListItemPadding;
@@ -53,13 +54,23 @@
             background: $inputListItemBg;
             transition: $listItemTransition;
 
-            &:focus {
-                @include focused-listitem();
+            &:not(.p-highlight):hover {
+                background: $inputListItemHoverBg;
+                color: $inputListItemTextHoverColor;
+            }
+
+            &.p-focus {
+                color: $inputListItemTextFocusColor;
+                background: $inputListItemFocusBg;
             }
 
             &.p-highlight {
                 color: $highlightTextColor;
                 background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
             }
         }
 
@@ -100,4 +111,4 @@
         background: $panelContentBg;
         margin: 0;
     }
-}
+}

package/scss/v2/theme/theme-base/components/data/_organizationchart.scss

@@ -43,7 +43,7 @@
         color: inherit;
         border-radius: 50%;
 
-        &:focus {
+        &:focus-visible {
             @include focused();
         }
     }

package/scss/v2/theme/theme-base/components/data/_picklist.scss

@@ -44,6 +44,7 @@
         padding: $inputListPadding;
         border-bottom-right-radius: $borderRadius;
         border-bottom-left-radius: $borderRadius;
+        outline: 0 none;
 
         .p-picklist-item {
             padding: $inputListItemPadding;
@@ -53,13 +54,23 @@
             background: $inputListItemBg;
             transition: $listItemTransition;
 
-            &:focus {
-                @include focused-listitem();
+            &:not(.p-highlight):hover {
+                background: $inputListItemHoverBg;
+                color: $inputListItemTextHoverColor;
+            }
+
+            &.p-focus {
+                color: $inputListItemTextFocusColor;
+                background: $inputListItemFocusBg;
             }
 
             &.p-highlight {
                 color: $highlightTextColor;
                 background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
             }
         }
 
@@ -100,4 +111,4 @@
         background: $panelContentBg;
         margin: 0;
     }
-}
+}

package/scss/v2/theme/theme-base/components/data/_timeline.scss

@@ -1,6 +1,6 @@
 .p-timeline {
     .p-timeline-event-marker {
-        border: $timelineEventMarkerBorder; 
+        border: $timelineEventMarkerBorder;
         border-radius: $timelineEventMarkerBorderRadius;
         width: $timelineEventMarkerWidth;
         height: $timelineEventMarkerHeight;
@@ -13,7 +13,7 @@
 
     &.p-timeline-vertical {
         .p-timeline-event-opposite,
-        .p-timeline-event-content  {
+        .p-timeline-event-content {
             padding: $timelineVerticalEventContentPadding;
         }
 
@@ -24,7 +24,7 @@
 
     &.p-timeline-horizontal {
         .p-timeline-event-opposite,
-        .p-timeline-event-content  {
+        .p-timeline-event-content {
             padding: $timelineHorizontalEventContentPadding;
         }
 
@@ -33,6 +33,3 @@
         }
     }
 }
-
-
-

package/scss/v2/theme/theme-base/components/data/_tree.scss

@@ -8,6 +8,11 @@
     .p-tree-container {
         .p-treenode {
             padding: $treeNodePadding;
+            outline: 0 none;
+
+            &:focus > .p-treenode-content {
+                @include focused-listitem();
+            }
 
             .p-treenode-content {
                 border-radius: $borderRadius;
@@ -34,10 +39,6 @@
                     }
                 }
 
-                &:focus {
-                    @include focused-listitem();
-                }
-
                 &.p-highlight {
                     background: $highlightBg;
                     color: $highlightTextColor;
@@ -96,7 +97,7 @@
         &.p-treenode-droppoint-active {
             background-color: scale-color($highlightBg, $lightness: -20%);
         }
-    } 
+    }
 
     &.p-tree-horizontal {
         .p-treenode {
@@ -139,7 +140,7 @@
                     background: $inputListItemHoverBg;
                     color: $inputListItemTextHoverColor;
                 }
-                
+
                 &:focus {
                     @include focused();
                 }