azion-theme 1.3.5

package/src/azion-dark/variables/_media.scss

@@ -0,0 +1,231 @@
+/// Padding of a carousel indicators container
+/// @group media
+$carouselIndicatorsPadding: 1rem;
+
+/// Padding of a carousel indicator
+/// @group media
+$carouselIndicatorBg: #e9ecef;
+
+/// Padding of a carousel indicator in hover state
+/// @group media
+$carouselIndicatorHoverBg: #dee2e6;
+
+/// Border radius of a carousel indicator
+/// @group media
+$carouselIndicatorBorderRadius: 0;
+
+/// Width of a carousel indicator
+/// @group media
+$carouselIndicatorWidth: 2rem;
+
+/// Height of a carousel indicator
+/// @group media
+$carouselIndicatorHeight: 0.5rem;
+
+/// Background of a galleria modal
+/// @group media
+$galleriaMaskBg: rgba(0, 0, 0, 0.9);
+
+/// Margin of a galleria close icon
+/// @group media
+$galleriaCloseIconMargin: 0.5rem;
+
+/// Font size of a galleria close icon
+/// @group media
+$galleriaCloseIconFontSize: 2rem;
+
+/// Background of a galleria close icon
+/// @group media
+$galleriaCloseIconBg: transparent;
+
+/// Color of a galleria close icon
+/// @group media
+$galleriaCloseIconColor: #ebedef;
+
+/// Background of a galleria close icon in hover state
+/// @group media
+$galleriaCloseIconHoverBg: rgba(255, 255, 255, 0.1);
+
+/// Color of a galleria close icon in hover state
+/// @group media
+$galleriaCloseIconHoverColor: #ebedef;
+
+/// Width of a galleria close icon
+/// @group media
+$galleriaCloseIconWidth: 4rem;
+
+/// Height of a galleria close icon
+/// @group media
+$galleriaCloseIconHeight: 4rem;
+
+/// Border radius of a galleria close icon
+/// @group media
+$galleriaCloseIconBorderRadius: 50%;
+
+/// Background of a galleria navigator item
+/// @group media
+$galleriaItemNavigatorBg: rgba(0, 0, 0, 0.2);
+
+/// Color of a galleria navigator item
+/// @group media
+$galleriaItemNavigatorColor: #aeb6bf;
+
+/// Margin of a galleria navigator item
+/// @group media
+$galleriaItemNavigatorMargin: 0.5rem 0;
+
+/// Font size of a galleria navigator item
+/// @group media
+$galleriaItemNavigatorFontSize: 2rem;
+
+/// Background of a galleria navigator item in hover state
+/// @group media
+$galleriaItemNavigatorHoverBg: rgba(0, 0, 0, 0.3);
+
+/// Color of a galleria navigator item in hover state
+/// @group media
+$galleriaItemNavigatorHoverColor: #ebedef;
+
+/// Width of a galleria navigator item
+/// @group media
+$galleriaItemNavigatorWidth: 4rem;
+
+/// Height of a galleria navigator item
+/// @group media
+$galleriaItemNavigatorHeight: 4rem;
+
+/// Border radius of a galleria navigator item
+/// @group media
+$galleriaItemNavigatorBorderRadius: $borderRadius;
+
+/// Background of a galleria caption
+/// @group media
+$galleriaCaptionBg: rgba(0, 0, 0, 0.5);
+
+/// Color of a galleria caption
+/// @group media
+$galleriaCaptionTextColor: #ebedef;
+
+/// Padding of a galleria caption
+/// @group media
+$galleriaCaptionPadding: 1rem;
+
+/// Padding of a galleria indicators container
+/// @group media
+$galleriaIndicatorsPadding: 1rem;
+
+/// Background of a galleria indicator
+/// @group media
+$galleriaIndicatorBg: #e9ecef;
+
+/// Background of a galleria indicator in hover state
+/// @group media
+$galleriaIndicatorHoverBg: #dee2e6;
+
+/// Border radius of a galleria indicator
+/// @group media
+$galleriaIndicatorBorderRadius: 50%;
+
+/// Width of a galleria indicator
+/// @group media
+$galleriaIndicatorWidth: 1rem;
+
+/// Height of a galleria indicator
+/// @group media
+$galleriaIndicatorHeight: 1rem;
+
+/// Background of a galleria indicator container when placed inside the viewport
+/// @group media
+$galleriaIndicatorsBgOnItem: rgba(0, 0, 0, 0.5);
+
+/// Background of a galleria indicator when placed inside the viewport
+/// @group media
+$galleriaIndicatorBgOnItem: rgba(255, 255, 255, 0.4);
+
+/// Background of a galleria indicator in hover state when placed inside the viewport
+/// @group media
+$galleriaIndicatorHoverBgOnItem: rgba(255, 255, 255, 0.6);
+
+/// Background of a galleria thumbnail container
+/// @group media
+$galleriaThumbnailContainerBg: rgba(0, 0, 0, 0.9);
+
+/// Padding of a galleria thumbnail container
+/// @group media
+$galleriaThumbnailContainerPadding: 1rem 0.25rem;
+
+/// Background of a galleria thumbnail navigator
+/// @group media
+$galleriaThumbnailNavigatorBg: transparent;
+
+/// Color of a galleria thumbnail navigator
+/// @group media
+$galleriaThumbnailNavigatorColor: #aeb6bf;
+
+/// Background of a galleria thumbnail navigator in hover state
+/// @group media
+$galleriaThumbnailNavigatorHoverBg: rgba(255, 255, 255, 0.1);
+
+/// Color of a galleria thumbnail navigator in hover state
+/// @group media
+$galleriaThumbnailNavigatorHoverColor: #aeb6bf;
+
+/// Border radius of a galleria thumbnail navigator in hover state
+/// @group media
+$galleriaThumbnailNavigatorBorderRadius: 50%;
+
+/// Width of a galleria thumbnail navigator in hover state
+/// @group media
+$galleriaThumbnailNavigatorWidth: 2rem;
+
+/// Height of a galleria thumbnail navigator in hover state
+/// @group media
+$galleriaThumbnailNavigatorHeight: 2rem;
+
+/// Background of an image preview modal
+/// @group media
+$imageMaskBg: rgba(0, 0, 0, 0.9) !default;
+
+/// Padding of image preview toolbar
+/// @group media
+$imagePreviewToolbarPadding: 1rem !default;
+
+/// Text color of the image preview indicator
+/// @group media
+$imagePreviewIndicatorColor: #f8f9fa !default;
+
+/// Background of the image preview indicator
+/// @group media
+$imagePreviewIndicatorBg: rgba(0, 0, 0, 0.5) !default;
+
+/// Background of an image action item
+/// @group media
+$imagePreviewActionIconBg: transparent !default;
+
+/// Text color of an image action item
+/// @group media
+$imagePreviewActionIconColor: #f8f9fa !default;
+
+/// Background of an image action item in hover state
+/// @group media
+$imagePreviewActionIconHoverBg: rgba(255, 255, 255, 0.1) !default;
+
+/// Tect color of an image action item in hover state
+/// @group media
+$imagePreviewActionIconHoverColor: #f8f9fa !default;
+
+/// Width of an image action item
+/// @group media
+$imagePreviewActionIconWidth: 3rem !default;
+
+/// Height of an image action item
+/// @group media
+$imagePreviewActionIconHeight: 3rem !default;
+
+/// Font size of an image action item icon
+/// @group media
+$imagePreviewActionIconFontSize: 1.5rem !default;
+
+/// Border radius of an image action item
+/// @group media
+$imagePreviewActionIconBorderRadius: 50% !default;

package/src/azion-dark/variables/_menu.scss

@@ -0,0 +1,291 @@
+/// Background of a steps item
+/// @group menu
+$stepsItemBg: #00000000;
+
+/// Border of a steps item
+/// @group menu
+$stepsItemBorder: 1px solid #3e3e3e;
+
+/// Text color of a steps item
+/// @group menu
+$stepsItemTextColor: $textSecondaryColor;
+
+/// Width of a steps itrem number
+/// @group menu
+$stepsItemNumberWidth: 1.75rem;
+
+/// Height of a steps itrem number
+/// @group menu
+$stepsItemNumberHeight: 1.75rem;
+
+/// Font size of a steps itrem number
+/// @group menu
+$stepsItemNumberFontSize: 1rem;
+
+/// Color of a steps itrem number
+/// @group menu
+$stepsItemNumberColor: $textColor;
+
+/// Border radius of a steps itrem number
+/// @group menu
+$stepsItemNumberBorderRadius: $borderRadius;
+
+/// Font weight of an active steps itrem number
+/// @group menu
+$stepsItemActiveFontWeight: 600;
+
+/// Width of a vertical menu such as tieredmenu or context menu
+/// @group menu
+$menuWidth: 12.5rem;
+
+/// Background of a menu
+/// @group menu
+$menuBg: #1c1c1c;
+
+/// Border of a menu
+/// @group menu
+$menuBorder: 1px solid #3e3e3e;
+
+/// Text color of a menu
+/// @group menu
+$menuTextColor: $textColor;
+
+/// Padding of a menuitem
+/// @group menu
+$menuitemPadding: 0.75rem 0.5rem;
+
+/// Border radius of a menuitem
+/// @group menu
+$menuitemBorderRadius: 6px;
+
+/// Text color of a menuitem
+/// @group menu
+$menuitemTextColor: $textColor;
+
+/// Icon color of a menuitem
+/// @group menu
+$menuitemIconColor: $textColor;
+
+/// Text color of a menuitem in hover state
+/// @group menu
+$menuitemTextHoverColor: $textColor;
+
+/// Icon color of a menuitem in hover state
+/// @group menu
+$menuitemIconHoverColor: $textColor;
+
+/// Background of a menuitem in hover state
+/// @group menu
+$menuitemHoverBg: rgba($primaryColor, 0.06);
+
+/// Text color of a menuitem in focus state
+/// @group menu
+$menuitemTextFocusColor: $textColor;
+
+/// Icon color of a menuitem in focus state
+/// @group menu
+$menuitemIconFocusColor: $textColor;
+
+/// Background of a menuitem in focus state
+/// @group menu
+$menuitemFocusBg: rgba($primaryColor, 0.06);
+
+/// Text color of a menuitem in active state
+/// @group menu
+$menuitemTextActiveColor: $textColor;
+
+/// Icon color of a menuitem in active state
+/// @group menu
+$menuitemIconActiveColor: $textSecondaryColor;
+
+/// Background of a menuitem in active state
+/// @group menu
+$menuitemActiveBg: rgba($primaryColor, 0.08);
+
+/// Background of a menuitem in active and focus states
+/// @group menu
+$menuitemActiveFocusBg: rgba($primaryColor, 0.06);
+
+/// Font size of an icon indicating the item has a submenu
+/// @group menu
+$menuitemSubmenuIconFontSize: 0.875rem;
+
+/// Margin of a submenu header
+/// @group menu
+$submenuHeaderMargin: 0;
+
+/// Padding of a submenu header
+/// @group menu
+$submenuHeaderPadding: 0.5rem;
+
+/// Background of a submenu header
+/// @group menu
+$submenuHeaderBg: transparent;
+
+/// Text color of a submenu header
+/// @group menu
+$submenuHeaderTextColor: $textColor;
+
+/// Border radius of a submenu header
+/// @group menu
+$submenuHeaderBorderRadius: 0;
+
+/// Font weight of a submenu header
+/// @group menu
+$submenuHeaderFontWeight: 500;
+
+/// Background of an overlay menu
+/// @group menu
+$overlayMenuBg: $menuBg;
+
+/// Border of an overlay menu
+/// @group menu
+$overlayMenuBorder: 0 none;
+
+/// Box shadow of an overlay menu
+/// @group menu
+$overlayMenuShadow:
+  0px 1px 10px 0px rgba(0, 0, 0, 0.12),
+  0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+  0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+  0px 0px 0px 1px #3c3c3c;
+
+/// Padding of a vertical menu e.g. tieredmenu, contextmenu
+/// @group menu
+$verticalMenuPadding: 0.5rem;
+
+/// Margin of a menuitem separator
+/// @group menu
+$menuSeparatorMargin: 0.25rem 0;
+
+/// Padding of a breadcrumb
+/// @group menu
+$breadcrumbPadding: 0.25rem;
+
+/// Background of a breadcrumb
+/// @group menu
+$breadcrumbBg: none;
+
+/// Border of a breadcrumb
+/// @group menu
+$breadcrumbBorder: none;
+
+/// Text color of a breadcrumb item
+/// @group menu
+$breadcrumbItemTextColor: var(--text-color-secondary);
+
+/// Icon color of a breadcrumb item
+/// @group menu
+$breadcrumbItemIconColor: var(--text-color-secondary);
+
+/// Text color of the breadcrumb item
+/// @group menu
+$breadcrumbLastItemTextColor: var(--text-color);
+
+/// Icon color of the breadcrumb item
+/// @group menu
+$breadcrumbLastItemIconColor: var(--text-color);
+
+/// Color of a breadcrumb separator
+/// @group menu
+$breadcrumbSeparatorColor: var(--text-color-secondary);
+
+/// Padding of a horizontal menu e.g. menubar
+/// @group menu
+$horizontalMenuPadding: 0.375rem;
+
+/// Background of a horizontal menu e.g. menubar
+/// @group menu
+$horizontalMenuBg: #1c1c1c;
+
+/// Border of a horizontal menu e.g. menubar
+/// @group menu
+$horizontalMenuBorder: $menuBorder;
+
+/// Text color of a horizontal menu e.g. menubar
+/// @group menu
+$horizontalMenuTextColor: $menuTextColor;
+
+/// Padding of a horizontal menu root item e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemPadding: $menuitemPadding;
+
+/// Border radius of a horizontal menu root item e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemBorderRadius: $borderRadius;
+
+/// Text color of a horizontal menu root item e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemTextColor: $menuitemTextColor;
+
+/// Icon color of a horizontal menu root item e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemIconColor: $menuitemIconColor;
+
+/// Text color of a horizontal menu root item in hover state e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor;
+
+/// Icon color of a horizontal menu root item in hover state e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor;
+
+/// Background of a horizontal menu root item in hover state e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg;
+
+/// Text color of a horizontal menu root item in hover active e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemTextActiveColor: $menuitemTextActiveColor;
+
+/// Icon color of a horizontal menu root item in hover active e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor;
+
+/// Background of a horizontal menu root item in active state e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg;
+
+/// Width of an action item on dock
+/// @group menu
+$dockActionWidth: 4rem;
+
+/// Height of an action item on dock
+/// @group menu
+$dockActionHeight: 4rem;
+
+/// Padding of an action item on dock
+/// @group menu
+$dockItemPadding: 0.5rem;
+
+/// Border radius of an action item on dock
+/// @group menu
+$dockItemBorderRadius: $borderRadius;
+
+/// Margin of the current action item on dock
+/// @group menu
+$dockCurrentItemMargin: 1.5rem;
+
+/// Margin of the previous and next action item on dock
+/// @group menu
+$dockFirstItemsMargin: 1.3rem;
+
+/// Margin of the second previous and second next action item on dock
+/// @group menu
+$dockSecondItemsMargin: 0.9rem;
+
+/// Background of the list on dock
+/// @group menu
+$dockBg: rgba(255, 255, 255, 0.1);
+
+/// Border of the list on dock
+/// @group menu
+$dockBorder: 1px solid rgba(255, 255, 255, 0.2);
+
+/// Padding of the list on dock
+/// @group menu
+$dockPadding: 0.5rem 0.5rem;
+
+/// Border Radius of the list on dock
+/// @group menu
+$dockBorderRadius: 0.5rem;

package/src/azion-dark/variables/_message.scss

@@ -0,0 +1,145 @@
+/// Margin of a message
+/// @group message
+$messageMargin: 0;
+
+/// Padding of a message
+/// @group message
+$messagePadding: 0.5rem;
+
+/// Border width of a message
+/// @group message
+$messageBorderWidth: none;
+
+/// Font size of a message icon
+/// @group message
+$messageIconFontSize: 24px;
+
+/// Font size of a message text
+/// @group message
+$messageTextFontSize: 1rem;
+
+/// Font weight of a message text
+/// @group message
+$messageTextFontWeight: 500;
+
+/// Padding of an inline message
+/// @group message
+$inlineMessagePadding: 0.5rem;
+
+/// Margin of an inline message
+/// @group message
+$inlineMessageMargin: 0;
+
+/// Font size of an inline message icon
+/// @group message
+$inlineMessageIconFontSize: 1rem;
+
+/// Padding of an inline message text
+/// @group message
+$inlineMessageTextFontSize: 1rem;
+
+/// Border width of an inline message text
+/// @group message
+$inlineMessageBorderWidth: none;
+
+/// Font size of a toast message icon
+/// @group message
+$toastIconFontSize: 32px;
+
+/// Margin of a toast message text
+/// @group message
+$toastMessageTextMargin: 0 0 0 1rem;
+
+/// Margin of a toast message
+/// @group message
+$toastMargin: 0 0 1rem 0;
+
+/// Padding of a toast message
+/// @group message
+$toastPadding: 1rem;
+
+/// Border width of a toast message
+/// @group message
+$toastBorderWidth: none;
+
+/// Box shadow of a toast message
+/// @group message
+$toastShadow:
+  0px 1px 4px 0px rgba(0, 0, 0, 0.08),
+  0px 0px 0px 1px #3e3e3e;
+
+/// Opacity of a toast message
+/// @group message
+$toastOpacity: 1;
+
+/// Font weight of a toast message title text
+/// @group message
+$toastTitleFontWeight: 700;
+
+/// Margin of a toast message detail text
+/// @group message
+$toastDetailMargin: $inlineSpacing 0 0 0;
+
+/// Background of an info message
+/// @group message
+$infoMessageBg: #a6a6a61f;
+
+/// Border of an info message
+/// @group message
+$infoMessageBorder: none;
+
+/// Text color of an info message
+/// @group message
+$infoMessageTextColor: $textColor;
+
+/// Icon color of an info message
+/// @group message
+$infoMessageIconColor: $textColor;
+
+/// Background of a success message
+/// @group message
+$successMessageBg: #39e4781f;
+
+/// Border of a success message
+/// @group message
+$successMessageBorder: none;
+
+/// Text color of a success message
+/// @group message
+$successMessageTextColor: $textColor;
+
+/// Icon color of a success message
+/// @group message
+$successMessageIconColor: #39e478;
+
+/// Background of a warning message
+/// @group message
+$warningMessageBg: #ffb64d1f;
+
+/// Border of a warning message
+/// @group message
+$warningMessageBorder: none;
+
+/// Text color of a warning message
+/// @group message
+$warningMessageTextColor: $textColor;
+
+/// Icon color of a warning message
+/// @group message
+$warningMessageIconColor: #ffb64d;
+
+/// Background of an error message
+/// @group message
+$errorMessageBg: #f2646433;
+
+/// Border of an error message
+/// @group message
+$errorMessageBorder: none;
+
+/// Text color of an error message
+/// @group message
+$errorMessageTextColor: $textColor;
+
+/// Icon color of an error message
+/// @group message
+$errorMessageIconColor: #f26464;