@mediusinc/mng-commons 3.6.0 → 3.7.0-rc.0

package/scss/v2/theme/theme-base/_mixins.scss

@@ -1,91 +1,180 @@
 @mixin icon-override($icon) {
-	&:before {
-		content: $icon;
-	}
+    &:before {
+        content: $icon;
+    }
 }
 
 @mixin focused() {
-	outline: $focusOutline;
+    outline: $focusOutline;
     outline-offset: $focusOutlineOffset;
     box-shadow: $focusShadow;
 }
 
 @mixin focused-inset() {
-	outline: $focusOutline;
+    outline: $focusOutline;
     outline-offset: $focusOutlineOffset;
     box-shadow: inset $focusShadow;
 }
 
 @mixin focused-input() {
-	@include focused();
-	border-color: $inputFocusBorderColor;
+    @include focused();
+    border-color: $inputFocusBorderColor;
 }
 
 @mixin focused-listitem() {
-	outline: $focusOutline;
+    outline: $focusOutline;
     outline-offset: $focusOutlineOffset;
     box-shadow: $inputListItemFocusShadow;
 }
 
 @mixin invalid-input() {
-	border-color: $inputErrorBorderColor;
+    border-color: $inputErrorBorderColor;
 }
 
 @mixin menuitem-link {
-	padding: $menuitemPadding;
-	color: $menuitemTextColor;
+    padding: $menuitemPadding;
+    color: $menuitemTextColor;
     border-radius: $menuitemBorderRadius;
     transition: $listItemTransition;
     user-select: none;
 
-	.p-menuitem-text {
+    .p-menuitem-text {
         color: $menuitemTextColor;
-	}
+    }
 
-	.p-menuitem-icon {
-		color: $menuitemIconColor;
-		margin-right: $inlineSpacing;
+    .p-menuitem-icon {
+        color: $menuitemIconColor;
+        margin-right: $inlineSpacing;
     }
 
     .p-submenu-icon {
         color: $menuitemIconColor;
     }
 
-	&:not(.p-disabled):hover {
-		background: $menuitemHoverBg;
+    &:not(.p-disabled):hover {
+        background: $menuitemHoverBg;
 
-		.p-menuitem-text {
-			color: $menuitemTextHoverColor;
-		}
+        .p-menuitem-text {
+            color: $menuitemTextHoverColor;
+        }
 
-		.p-menuitem-icon {
-			color: $menuitemIconHoverColor;
+        .p-menuitem-icon {
+            color: $menuitemIconHoverColor;
         }
 
         .p-submenu-icon {
             color: $menuitemIconHoverColor;
         }
-	}
+    }
+
+    &:focus {
+        @include focused-listitem();
+    }
+}
+
+@mixin menuitem {
+    > .p-menuitem-content {
+        color: $menuitemTextColor;
+        transition: $listItemTransition;
+        border-radius: $menuitemBorderRadius;
+
+        .p-menuitem-link {
+            color: $menuitemTextColor;
+            padding: $menuitemPadding;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $menuitemTextColor;
+            }
+
+            .p-menuitem-icon {
+                color: $menuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+
+            .p-submenu-icon {
+                color: $menuitemIconColor;
+            }
+        }
+    }
+
+    &.p-highlight {
+        > .p-menuitem-content {
+            color: $menuitemTextActiveColor;
+            background: $menuitemActiveBg;
+
+            .p-menuitem-link {
+                .p-menuitem-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-menuitem-icon,
+                .p-submenu-icon {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
 
-	&:focus {
-		@include focused-listitem();
-	}
+        &.p-focus {
+            > .p-menuitem-content {
+                background: $menuitemActiveFocusBg;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus {
+            > .p-menuitem-content {
+                color: $menuitemTextFocusColor;
+                background: $menuitemFocusBg;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextFocusColor;
+                    }
+
+                    .p-menuitem-icon,
+                    .p-submenu-icon {
+                        color: $menuitemIconFocusColor;
+                    }
+                }
+            }
+        }
+
+        > .p-menuitem-content {
+            &:hover {
+                color: $menuitemTextHoverColor;
+                background: $menuitemHoverBg;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextHoverColor;
+                    }
+
+                    .p-menuitem-icon,
+                    .p-submenu-icon {
+                        color: $menuitemIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
 }
 
 @mixin horizontal-rootmenuitem-link {
-	padding: $horizontalMenuRootMenuitemPadding;
-	color: $horizontalMenuRootMenuitemTextColor;
+    padding: $horizontalMenuRootMenuitemPadding;
+    color: $horizontalMenuRootMenuitemTextColor;
     border-radius: $horizontalMenuRootMenuitemBorderRadius;
     transition: $listItemTransition;
     user-select: none;
 
-	.p-menuitem-text {
+    .p-menuitem-text {
         color: $horizontalMenuRootMenuitemTextColor;
-	}
+    }
 
-	.p-menuitem-icon {
-		color: $horizontalMenuRootMenuitemIconColor;
-		margin-right: $inlineSpacing;
+    .p-menuitem-icon {
+        color: $horizontalMenuRootMenuitemIconColor;
+        margin-right: $inlineSpacing;
     }
 
     .p-submenu-icon {
@@ -93,40 +182,87 @@
         margin-left: $inlineSpacing;
     }
 
-	&:not(.p-disabled):hover {
-		background: $horizontalMenuRootMenuitemHoverBg;
+    &:not(.p-disabled):hover {
+        background: $horizontalMenuRootMenuitemHoverBg;
 
-		.p-menuitem-text {
-			color: $horizontalMenuRootMenuitemTextHoverColor;
-		}
+        .p-menuitem-text {
+            color: $horizontalMenuRootMenuitemTextHoverColor;
+        }
 
-		.p-menuitem-icon {
-			color: $horizontalMenuRootMenuitemIconHoverColor;
+        .p-menuitem-icon {
+            color: $horizontalMenuRootMenuitemIconHoverColor;
         }
 
         .p-submenu-icon {
             color: $horizontalMenuRootMenuitemIconHoverColor;
         }
-	}
+    }
+
+    &:focus {
+        @include focused-listitem();
+    }
+}
+
+@mixin horizontal-rootmenuitem {
+    > .p-menuitem-content {
+        color: $horizontalMenuRootMenuitemTextColor;
+        transition: $listItemTransition;
+        border-radius: $horizontalMenuRootMenuitemBorderRadius;
+
+        .p-menuitem-link {
+            padding: $horizontalMenuRootMenuitemPadding;
+            user-select: none;
 
-	&:focus {
-		@include focused-listitem();
-	}
+            .p-menuitem-text {
+                color: $horizontalMenuRootMenuitemTextColor;
+            }
+
+            .p-menuitem-icon {
+                color: $horizontalMenuRootMenuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+
+            .p-submenu-icon {
+                color: $horizontalMenuRootMenuitemIconColor;
+                margin-left: $inlineSpacing;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        > .p-menuitem-content {
+            &:hover {
+                color: $horizontalMenuRootMenuitemTextHoverColor;
+                background: $horizontalMenuRootMenuitemHoverBg;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $horizontalMenuRootMenuitemTextHoverColor;
+                    }
+
+                    .p-menuitem-icon,
+                    .p-submenu-icon {
+                        color: $horizontalMenuRootMenuitemIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
 }
 
 @mixin placeholder {
-	::-webkit-input-placeholder {
-		@content
-	}
-	:-moz-placeholder {
-		@content
-	}
-	::-moz-placeholder {
-		@content
-	}
-	:-ms-input-placeholder {
-		@content
-	}
+    ::-webkit-input-placeholder {
+        @content;
+    }
+    :-moz-placeholder {
+        @content;
+    }
+    ::-moz-placeholder {
+        @content;
+    }
+    :-ms-input-placeholder {
+        @content;
+    }
 }
 
 @mixin scaledPadding($val, $scale) {
@@ -138,12 +274,13 @@
 }
 
 @mixin nested-submenu-indents($val, $index, $length) {
-    ul {
-        li {
-            a {
-                padding-left: $val * ($index + 1);
+    .p-submenu-list {
+        .p-menuitem {
+            .p-menuitem-content {
+                .p-menuitem-link {
+                    padding-left: $val * ($index + 1);
+                }
             }
-
             @if $index < $length {
                 @include nested-submenu-indents($val, $index + 2, $length);
             }
@@ -166,7 +303,7 @@
         background: $actionIconHoverBg;
     }
 
-    &:focus {
+    &:focus-visible {
         @include focused();
     }
 }
@@ -179,13 +316,10 @@
     @return mix(#000, $color, $percentage);
 }
 
-@mixin button-states {
-    // <button> and <a> tags support :enabled selector.
-
-    &:enabled,
-    &:not(button):not(a):not(.p-disabled) {
-        @content;
-    }
+@mixin focused-inset() {
+    outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: inset $focusShadow;
 }
 
 @mixin menuitem-badge {
@@ -200,4 +334,4 @@
     margin-left: $inlineSpacing;
     padding-left: $inlineSpacing;
     padding-right: $inlineSpacing;
-}
+}