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

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

@@ -7,13 +7,13 @@
     transition: $formElementTransition;
     border-radius: $borderRadius;
 
-    &:enabled:hover {
+    &:not(:disabled):hover {
         background: $buttonHoverBg;
         color: $buttonTextHoverColor;
         border-color: $buttonHoverBorderColor;
     }
 
-    &:enabled:active {
+    &:not(:disabled):active {
         background: $buttonActiveBg;
         color: $buttonTextActiveColor;
         border-color: $buttonActiveBorderColor;
@@ -24,13 +24,13 @@
         color: $buttonBg;
         border: $outlinedButtonBorder;
 
-        &:enabled:hover {
+        &:not(:disabled):hover {
             background: rgba($buttonBg, $textButtonHoverBgOpacity);
             color: $buttonBg;
             border: $outlinedButtonBorder;
         }
 
-        &:enabled:active {
+        &:not(:disabled):active {
             background: rgba($buttonBg, $textButtonActiveBgOpacity);
             color: $buttonBg;
             border: $outlinedButtonBorder;
@@ -40,12 +40,12 @@
             color: $plainButtonTextColor;
             border-color: $plainButtonTextColor;
 
-            &:enabled:hover {
+            &:not(:disabled):hover {
                 background: $plainButtonHoverBgColor;
                 color: $plainButtonTextColor;
             }
 
-            &:enabled:active {
+            &:not(:disabled):active {
                 background: $plainButtonActiveBgColor;
                 color: $plainButtonTextColor;
             }
@@ -57,13 +57,13 @@
         color: $buttonBg;
         border-color: transparent;
 
-        &:enabled:hover {
+        &:not(:disabled):hover {
             background: rgba($buttonBg, $textButtonHoverBgOpacity);
             color: $buttonBg;
             border-color: transparent;
         }
 
-        &:enabled:active {
+        &:not(:disabled):active {
             background: rgba($buttonBg, $textButtonActiveBgOpacity);
             color: $buttonBg;
             border-color: transparent;
@@ -72,12 +72,12 @@
         &.p-button-plain {
             color: $plainButtonTextColor;
 
-            &:enabled:hover {
+            &:not(:disabled):hover {
                 background: $plainButtonHoverBgColor;
                 color: $plainButtonTextColor;
             }
 
-            &:enabled:active {
+            &:not(:disabled):active {
                 background: $plainButtonActiveBgColor;
                 color: $plainButtonTextColor;
             }
@@ -93,7 +93,7 @@
     }
 
     .p-button-icon-left {
-         margin-right: $inlineSpacing;
+        margin-right: $inlineSpacing;
     }
 
     .p-button-icon-right {
@@ -105,7 +105,7 @@
     }
 
     .p-button-icon-top {
-       margin-bottom: $inlineSpacing;
+        margin-bottom: $inlineSpacing;
     }
 
     .p-badge {
@@ -187,22 +187,24 @@
     }
 }
 
-.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
+.p-button.p-button-secondary,
+.p-buttonset.p-button-secondary > .p-button,
+.p-splitbutton.p-button-secondary > .p-button {
     color: $secondaryButtonTextColor;
     background: $secondaryButtonBg;
     border: $secondaryButtonBorder;
 
-    &:enabled:hover {
+    &:not(:disabled):hover {
         background: $secondaryButtonHoverBg;
         color: $secondaryButtonTextHoverColor;
         border-color: $secondaryButtonHoverBorderColor;
     }
 
-    &:enabled:focus {
+    &:not(:disabled):focus {
         box-shadow: $secondaryButtonFocusShadow;
     }
 
-    &:enabled:active {
+    &:not(:disabled):active {
         background: $secondaryButtonActiveBg;
         color: $secondaryButtonTextActiveColor;
         border-color: $secondaryButtonActiveBorderColor;
@@ -213,13 +215,13 @@
         color: $secondaryButtonBg;
         border: $outlinedButtonBorder;
 
-        &:enabled:hover {
+        &:not(:disabled):hover {
             background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
             color: $secondaryButtonBg;
             border: $outlinedButtonBorder;
         }
 
-        &:enabled:active {
+        &:not(:disabled):active {
             background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
             color: $secondaryButtonBg;
             border: $outlinedButtonBorder;
@@ -231,13 +233,13 @@
         color: $secondaryButtonBg;
         border-color: transparent;
 
-        &:enabled:hover {
+        &:not(:disabled):hover {
             background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
             border-color: transparent;
             color: $secondaryButtonBg;
         }
 
-        &:enabled:active {
+        &:not(:disabled):active {
             background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
             border-color: transparent;
             color: $secondaryButtonBg;
@@ -245,22 +247,24 @@
     }
 }
 
-.p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
+.p-button.p-button-info,
+.p-buttonset.p-button-info > .p-button,
+.p-splitbutton.p-button-info > .p-button {
     color: $infoButtonTextColor;
     background: $infoButtonBg;
     border: $infoButtonBorder;
 
-    &:enabled:hover {
+    &:not(:disabled):hover {
         background: $infoButtonHoverBg;
         color: $infoButtonTextHoverColor;
         border-color: $infoButtonHoverBorderColor;
     }
 
-    &:enabled:focus {
+    &:not(:disabled):focus {
         box-shadow: $infoButtonFocusShadow;
     }
 
-    &:enabled:active {
+    &:not(:disabled):active {
         background: $infoButtonActiveBg;
         color: $infoButtonTextActiveColor;
         border-color: $infoButtonActiveBorderColor;
@@ -271,13 +275,13 @@
         color: $infoButtonBg;
         border: $outlinedButtonBorder;
 
-        &:enabled:hover {
+        &:not(:disabled):hover {
             background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
             color: $infoButtonBg;
             border: $outlinedButtonBorder;
         }
 
-        &:enabled:active {
+        &:not(:disabled):active {
             background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
             color: $infoButtonBg;
             border: $outlinedButtonBorder;
@@ -289,13 +293,13 @@
         color: $infoButtonBg;
         border-color: transparent;
 
-        &:enabled:hover {
+        &:not(:disabled):hover {
             background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
             border-color: transparent;
             color: $infoButtonBg;
         }
 
-        &:enabled:active {
+        &:not(:disabled):active {
             background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
             border-color: transparent;
             color: $infoButtonBg;
@@ -303,22 +307,24 @@
     }
 }
 
-.p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
+.p-button.p-button-success,
+.p-buttonset.p-button-success > .p-button,
+.p-splitbutton.p-button-success > .p-button {
     color: $successButtonTextColor;
     background: $successButtonBg;
     border: $successButtonBorder;
 
-    &:enabled:hover {
+    &:not(:disabled):hover {
         background: $successButtonHoverBg;
         color: $successButtonTextHoverColor;
         border-color: $successButtonHoverBorderColor;
     }
 
-    &:enabled:focus {
+    &:not(:disabled):focus {
         box-shadow: $successButtonFocusShadow;
     }
 
-    &:enabled:active {
+    &:not(:disabled):active {
         background: $successButtonActiveBg;
         color: $successButtonTextActiveColor;
         border-color: $successButtonActiveBorderColor;
@@ -329,13 +335,13 @@
         color: $successButtonBg;
         border: $outlinedButtonBorder;
 
-        &:enabled:hover {
+        &:not(:disabled):hover {
             background: rgba($successButtonBg, $textButtonHoverBgOpacity);
             color: $successButtonBg;
             border: $outlinedButtonBorder;
         }
 
-        &:enabled:active {
+        &:not(:disabled):active {
             background: rgba($successButtonBg, $textButtonActiveBgOpacity);
             color: $successButtonBg;
             border: $outlinedButtonBorder;
@@ -347,13 +353,13 @@
         color: $successButtonBg;
         border-color: transparent;
 
-        &:enabled:hover {
+        &:not(:disabled):hover {
             background: rgba($successButtonBg, $textButtonHoverBgOpacity);
             border-color: transparent;
             color: $successButtonBg;
         }
 
-        &:enabled:active {
+        &:not(:disabled):active {
             background: rgba($successButtonBg, $textButtonActiveBgOpacity);
             border-color: transparent;
             color: $successButtonBg;
@@ -361,22 +367,24 @@
     }
 }
 
-.p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button {
+.p-button.p-button-warning,
+.p-buttonset.p-button-warning > .p-button,
+.p-splitbutton.p-button-warning > .p-button {
     color: $warningButtonTextColor;
     background: $warningButtonBg;
     border: $warningButtonBorder;
 
-    &:enabled:hover {
+    &:not(:disabled):hover {
         background: $warningButtonHoverBg;
         color: $warningButtonTextHoverColor;
         border-color: $warningButtonHoverBorderColor;
     }
 
-    &:enabled:focus {
+    &:not(:disabled):focus {
         box-shadow: $warningButtonFocusShadow;
     }
 
-    &:enabled:active {
+    &:not(:disabled):active {
         background: $warningButtonActiveBg;
         color: $warningButtonTextActiveColor;
         border-color: $warningButtonActiveBorderColor;
@@ -387,13 +395,13 @@
         color: $warningButtonBg;
         border: $outlinedButtonBorder;
 
-        &:enabled:hover {
+        &:not(:disabled):hover {
             background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
             color: $warningButtonBg;
             border: $outlinedButtonBorder;
         }
 
-        &:enabled:active {
+        &:not(:disabled):active {
             background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
             color: $warningButtonBg;
             border: $outlinedButtonBorder;
@@ -405,13 +413,13 @@
         color: $warningButtonBg;
         border-color: transparent;
 
-        &:enabled:hover {
+        &:not(:disabled):hover {
             background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
             border-color: transparent;
             color: $warningButtonBg;
         }
 
-        &:enabled:active {
+        &:not(:disabled):active {
             background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
             border-color: transparent;
             color: $warningButtonBg;
@@ -419,22 +427,24 @@
     }
 }
 
-.p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button {
+.p-button.p-button-help,
+.p-buttonset.p-button-help > .p-button,
+.p-splitbutton.p-button-help > .p-button {
     color: $helpButtonTextColor;
     background: $helpButtonBg;
     border: $helpButtonBorder;
 
-    &:enabled:hover {
+    &:not(:disabled):hover {
         background: $helpButtonHoverBg;
         color: $helpButtonTextHoverColor;
         border-color: $helpButtonHoverBorderColor;
     }
 
-    &:enabled:focus {
+    &:not(:disabled):focus {
         box-shadow: $helpButtonFocusShadow;
     }
 
-    &:enabled:active {
+    &:not(:disabled):active {
         background: $helpButtonActiveBg;
         color: $helpButtonTextActiveColor;
         border-color: $helpButtonActiveBorderColor;
@@ -445,13 +455,13 @@
         color: $helpButtonBg;
         border: $outlinedButtonBorder;
 
-        &:enabled:hover {
+        &:not(:disabled):hover {
             background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
             color: $helpButtonBg;
             border: $outlinedButtonBorder;
         }
 
-        &:enabled:active {
+        &:not(:disabled):active {
             background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
             color: $helpButtonBg;
             border: $outlinedButtonBorder;
@@ -463,13 +473,13 @@
         color: $helpButtonBg;
         border-color: transparent;
 
-        &:enabled:hover {
+        &:not(:disabled):hover {
             background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
             border-color: transparent;
             color: $helpButtonBg;
         }
 
-        &:enabled:active {
+        &:not(:disabled):active {
             background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
             border-color: transparent;
             color: $helpButtonBg;
@@ -477,22 +487,24 @@
     }
 }
 
-.p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
+.p-button.p-button-danger,
+.p-buttonset.p-button-danger > .p-button,
+.p-splitbutton.p-button-danger > .p-button {
     color: $dangerButtonTextColor;
     background: $dangerButtonBg;
     border: $dangerButtonBorder;
 
-    &:enabled:hover {
+    &:not(:disabled):hover {
         background: $dangerButtonHoverBg;
         color: $dangerButtonTextHoverColor;
         border-color: $dangerButtonHoverBorderColor;
     }
 
-    &:enabled:focus {
+    &:not(:disabled):focus {
         box-shadow: $dangerButtonFocusShadow;
     }
 
-    &:enabled:active {
+    &:not(:disabled):active {
         background: $dangerButtonActiveBg;
         color: $dangerButtonTextActiveColor;
         border-color: $dangerButtonActiveBorderColor;
@@ -503,13 +515,13 @@
         color: $dangerButtonBg;
         border: $outlinedButtonBorder;
 
-        &:enabled:hover {
+        &:not(:disabled):hover {
             background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
             color: $dangerButtonBg;
             border: $outlinedButtonBorder;
         }
 
-        &:enabled:active {
+        &:not(:disabled):active {
             background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
             color: $dangerButtonBg;
             border: $outlinedButtonBorder;
@@ -521,13 +533,13 @@
         color: $dangerButtonBg;
         border-color: transparent;
 
-        &:enabled:hover {
+        &:not(:disabled):hover {
             background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
             border-color: transparent;
             color: $dangerButtonBg;
         }
 
-        &:enabled:active {
+        &:not(:disabled):active {
             background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
             border-color: transparent;
             color: $dangerButtonBg;
@@ -540,25 +552,25 @@
     background: transparent;
     border: transparent;
 
-    &:enabled:hover {
-        background:  transparent;
+    &:not(:disabled):hover {
+        background: transparent;
         color: $linkButtonHoverColor;
-        border-color:  transparent;
+        border-color: transparent;
 
         .p-button-label {
             text-decoration: $linkButtonTextHoverDecoration;
         }
     }
 
-    &:enabled:focus {
+    &:not(:disabled):focus {
         background: transparent;
         box-shadow: $linkButtonFocusShadow;
-        border-color:  transparent;
+        border-color: transparent;
     }
 
-    &:enabled:active {
-        background:  transparent;
+    &:not(:disabled):active {
+        background: transparent;
         color: $linkButtonColor;
-        border-color:  transparent;
+        border-color: transparent;
     }
 }

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

@@ -16,6 +16,16 @@
     }
 }
 
+.p-speeddial-list {
+    outline: 0 none;
+}
+
+.p-speeddial-item {
+    &.p-focus > .p-speeddial-action {
+        @include focused();
+    }
+}
+
 .p-speeddial-action {
     width: $speedDialActionWidth;
     height: $speedDialActionHeight;
@@ -83,4 +93,4 @@
 
 .p-speeddial-mask {
     background-color: $maskBg;
-}
+}