aril 1.1.63 → 1.1.65

package/theme/styles/theme/base/_mixins.scss

@@ -1,337 +1,337 @@
-@mixin icon-override($icon) {
-	&:before {
-		content: $icon;
-	}
-}
-
-@mixin focused() {
-	outline: $focusOutline;
-	outline-offset: $focusOutlineOffset;
-	box-shadow: $focusShadow;
-}
-
-@mixin focused-inset() {
-	outline: $focusOutline;
-	outline-offset: $focusOutlineOffset;
-	box-shadow: inset $focusShadow;
-}
-
-@mixin focused-input() {
-	@include focused();
-	border-color: $inputFocusBorderColor;
-}
-
-@mixin focused-listitem() {
-	outline: $focusOutline;
-	outline-offset: $focusOutlineOffset;
-	box-shadow: $inputListItemFocusShadow;
-}
-
-@mixin invalid-input() {
-	border-color: $inputErrorBorderColor;
-}
-
-@mixin menuitem-link {
-	padding: $menuitemPadding;
-	color: $menuitemTextColor;
-	border-radius: $menuitemBorderRadius;
-	transition: $listItemTransition;
-	user-select: none;
-
-	.p-menuitem-text {
-		color: $menuitemTextColor;
-	}
-
-	.p-menuitem-icon {
-		color: $menuitemIconColor;
-		margin-right: $inlineSpacing;
-	}
-
-	.p-submenu-icon {
-		color: $menuitemIconColor;
-	}
-
-	&:not(.p-disabled):hover {
-		background: $menuitemHoverBg;
-
-		.p-menuitem-text {
-			color: $menuitemTextHoverColor;
-		}
-
-		.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;
-				}
-			}
-		}
-
-		&.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;
-	border-radius: $horizontalMenuRootMenuitemBorderRadius;
-	transition: $listItemTransition;
-	user-select: none;
-
-	.p-menuitem-text {
-		color: $horizontalMenuRootMenuitemTextColor;
-	}
-
-	.p-menuitem-icon {
-		color: $horizontalMenuRootMenuitemIconColor;
-		margin-right: $inlineSpacing;
-	}
-
-	.p-submenu-icon {
-		color: $horizontalMenuRootMenuitemIconColor;
-		margin-left: $inlineSpacing;
-	}
-
-	&:not(.p-disabled):hover {
-		background: $horizontalMenuRootMenuitemHoverBg;
-
-		.p-menuitem-text {
-			color: $horizontalMenuRootMenuitemTextHoverColor;
-		}
-
-		.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;
-
-			.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;
-	}
-}
-
-@mixin scaledPadding($val, $scale) {
-	padding: nth($val, 1) * $scale nth($val, 2) * $scale;
-}
-
-@mixin scaledFontSize($val, $scale) {
-	font-size: $val * $scale;
-}
-
-@mixin nested-submenu-indents($val, $index, $length) {
-	.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);
-			}
-		}
-	}
-}
-
-@mixin action-icon($enabled: true) {
-	width: $actionIconWidth;
-	height: $actionIconHeight;
-	color: $actionIconColor;
-	border: $actionIconBorder;
-	background: $actionIconBg;
-	border-radius: $actionIconBorderRadius;
-	transition: $actionIconTransition;
-
-	&:enabled:hover {
-		color: $actionIconHoverColor;
-		border-color: $actionIconHoverBorderColor;
-		background: $actionIconHoverBg;
-	}
-
-	&:focus-visible {
-		@include focused();
-	}
-}
-
-@function tint($color, $percentage) {
-	@return mix(#fff, $color, $percentage);
-}
-
-@function shade($color, $percentage) {
-	@return mix(#000, $color, $percentage);
-}
-
-@mixin focused-inset() {
-	outline: $focusOutline;
-	outline-offset: $focusOutlineOffset;
-	box-shadow: inset $focusShadow;
-}
-
-@mixin menuitem-badge {
-	background: $badgeBg;
-	color: $badgeTextColor;
-	font-size: $badgeFontSize;
-	font-weight: $badgeFontWeight;
-	min-width: $badgeMinWidth;
-	height: $badgeHeight;
-	line-height: $badgeHeight;
-	border-radius: $borderRadius;
-	margin-left: $inlineSpacing;
-	padding-left: $inlineSpacing;
-	padding-right: $inlineSpacing;
-}
+@mixin icon-override($icon) {
+	&:before {
+		content: $icon;
+	}
+}
+
+@mixin focused() {
+	outline: $focusOutline;
+	outline-offset: $focusOutlineOffset;
+	box-shadow: $focusShadow;
+}
+
+@mixin focused-inset() {
+	outline: $focusOutline;
+	outline-offset: $focusOutlineOffset;
+	box-shadow: inset $focusShadow;
+}
+
+@mixin focused-input() {
+	@include focused();
+	border-color: $inputFocusBorderColor;
+}
+
+@mixin focused-listitem() {
+	outline: $focusOutline;
+	outline-offset: $focusOutlineOffset;
+	box-shadow: $inputListItemFocusShadow;
+}
+
+@mixin invalid-input() {
+	border-color: $inputErrorBorderColor;
+}
+
+@mixin menuitem-link {
+	padding: $menuitemPadding;
+	color: $menuitemTextColor;
+	border-radius: $menuitemBorderRadius;
+	transition: $listItemTransition;
+	user-select: none;
+
+	.p-menuitem-text {
+		color: $menuitemTextColor;
+	}
+
+	.p-menuitem-icon {
+		color: $menuitemIconColor;
+		margin-right: $inlineSpacing;
+	}
+
+	.p-submenu-icon {
+		color: $menuitemIconColor;
+	}
+
+	&:not(.p-disabled):hover {
+		background: $menuitemHoverBg;
+
+		.p-menuitem-text {
+			color: $menuitemTextHoverColor;
+		}
+
+		.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;
+				}
+			}
+		}
+
+		&.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;
+	border-radius: $horizontalMenuRootMenuitemBorderRadius;
+	transition: $listItemTransition;
+	user-select: none;
+
+	.p-menuitem-text {
+		color: $horizontalMenuRootMenuitemTextColor;
+	}
+
+	.p-menuitem-icon {
+		color: $horizontalMenuRootMenuitemIconColor;
+		margin-right: $inlineSpacing;
+	}
+
+	.p-submenu-icon {
+		color: $horizontalMenuRootMenuitemIconColor;
+		margin-left: $inlineSpacing;
+	}
+
+	&:not(.p-disabled):hover {
+		background: $horizontalMenuRootMenuitemHoverBg;
+
+		.p-menuitem-text {
+			color: $horizontalMenuRootMenuitemTextHoverColor;
+		}
+
+		.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;
+
+			.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;
+	}
+}
+
+@mixin scaledPadding($val, $scale) {
+	padding: nth($val, 1) * $scale nth($val, 2) * $scale;
+}
+
+@mixin scaledFontSize($val, $scale) {
+	font-size: $val * $scale;
+}
+
+@mixin nested-submenu-indents($val, $index, $length) {
+	.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);
+			}
+		}
+	}
+}
+
+@mixin action-icon($enabled: true) {
+	width: $actionIconWidth;
+	height: $actionIconHeight;
+	color: $actionIconColor;
+	border: $actionIconBorder;
+	background: $actionIconBg;
+	border-radius: $actionIconBorderRadius;
+	transition: $actionIconTransition;
+
+	&:enabled:hover {
+		color: $actionIconHoverColor;
+		border-color: $actionIconHoverBorderColor;
+		background: $actionIconHoverBg;
+	}
+
+	&:focus-visible {
+		@include focused();
+	}
+}
+
+@function tint($color, $percentage) {
+	@return mix(#fff, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+	@return mix(#000, $color, $percentage);
+}
+
+@mixin focused-inset() {
+	outline: $focusOutline;
+	outline-offset: $focusOutlineOffset;
+	box-shadow: inset $focusShadow;
+}
+
+@mixin menuitem-badge {
+	background: $badgeBg;
+	color: $badgeTextColor;
+	font-size: $badgeFontSize;
+	font-weight: $badgeFontWeight;
+	min-width: $badgeMinWidth;
+	height: $badgeHeight;
+	line-height: $badgeHeight;
+	border-radius: $borderRadius;
+	margin-left: $inlineSpacing;
+	padding-left: $inlineSpacing;
+	padding-right: $inlineSpacing;
+}