Menu-stack
Variables
$config
Variable Type: Map
Module Settings
$config: (
"nested-indent" : 0.5em,
"rule-style" : "light",
"rule-margin" : 0.5em,
"toggle-icon-rotate" : false,
"label-color" : "type-secondary",
"label-margin" : 0.5em,
"label-text-transform" : null,
"label-type-size" : false,
"label-font-weight" : bold,
"label-line-height" : true,
"link-separated-margin" : false,
"link-separated-rule-style" : false,
"link-active-selectors" : (".is-active",),
"link-background-color" : transparent,
"link-background-color-active" : "control-background-active",
"link-background-color-hover" : rgba(0,0,0,0.2),
"link-border-radius" : true,
"link-color" : "type-secondary",
"link-color-active" : "control-active",
"link-color-hover" : "type",
"link-font-weight" : null,
"link-line-height" : true,
"link-icon-margin" : 0.65em,
"link-icon-width" : 1em,
"link-icon-font-size" : null,
"link-margin" : 0.2em,
"link-padding-x": 0.85em,
"link-padding-y": 0.4em,
"link-transition-duration": 200ms,
"link-transition-properties": (border-color, background-color, color, box-shadow),
"compact-link-padding-x": 0.75em,
"compact-link-padding-y": 0.25em,
"compact-link-margin" : 0.2em,
"compact-link-border-radius" : null,
"compact-selectable-input-width": 2.2em,
"compact-selectable-input-top" : 0.5em,
"compact-selectable-input-font-size": 0.8em,
"selectable-input-width" : 3em,
"selectable-input-top" : 0.73em,
"selectable-input-font-size" : null,
"title-color" : null,
"title-font-weight" : bold,
"title-separator-enabled": true,
"title-separator-color" : "rule",
"title-rule-style" : "light",
"title-separated-margin" : false,
"columns-gap" : 2rem,
"columns-min-width" : 18rem,
);File Information
- File: _menu-stack.scss
- Group: menu-stack
- Type: variable
- Lines (comments): 34-83
- Lines (code): 85-135
Map Properties
| Name | Type | Default | Description |
|---|---|---|---|
| link-separated-margin | Boolean | false | Enables a margin between the items in the menu-stack. |
| link-separated-rule-style | Boolean | false | Enables a rule between the items in the menu-stack. |
| nested-indent | Dimension | 0.5em | The indentation of child lists within the menu-stack. |
| rule-margin | Dimension | 0.5em | Sets the padding and margin of the rule. |
| rule-style | String | default | Determines the styling of the rule. Uses the rule.scss component. |
| toggle-icon-rotate | Number | false | Set a value to rotate the collapsible item toggle icon rotation when open (ie. 90deg) |
| compact-link-padding-x | Dimension | 0.75em | The links horizontal padding when using the compact option. |
| compact-link-padding-y | Dimension | 0.25em | The links vertical padding when using the compact option. |
| compact-link-margin | Dimension | 0.2em | Margin between items when compact |
| compact-link-border-radius | Dimension | null | Unless set will use the normal link border radius |
| compact-selectable-input-width | Dimension | 2em | The width of the checkbox/radio input (when compact modifier) |
| compact-selectable-input-font-size | Dimension | null | Optional compact input font-size |
| compact-selectable-input-top | Dimension | null | Optional y/top for input |
| label-color | Color | null | The type color of the label. |
| label-margin | Dimension | 0.5em | The margin of the label. |
| label-text-transform | CssValue | uppercase | Transforms the label text. |
| label-type-size | CssValue | false | Adjusts the type size of the label. Only uses font-size from type size. |
| label-font-weight | CssValue | bold | Adjust label font weight |
| label-line-height | CssValue | true | Adjust the label line-height, defaults to typography line-height-dense |
| link-active-selectors | list | (.is-active, '[aria-current=page | ')] Selectors to apply active styling. |
| link-background-color | Color | transparent | The background color of the menu-stack toggle. |
| link-background-color-active | Color | rgb(219, 219, 219) | The background color of the menu-stack toggle when active. |
| link-background-color-hover | Color | rgb(219, 219, 219) | The background color of the menu-stack toggle when hovered or focused. |
| link-border-radius | Dimension | true | The border radius of the menu-stack toggle. If set to true, will use the border radius from the button component. |
| link-color | String | link | The type color of the menu-stack toggle. This uses color.scss, so the value of this option should be a color variable from color.scss. |
| link-color-active | Color | black | The type color of the menu-stack toggle when active. |
| link-color-hover | String | link-hover | The type color of the menu-stack toggle when hovered or focused. This uses color.scss, so the value of this option should be a color variable from color.scss. |
| link-font-weight | CssValue | null | The font weight of the menu-stack toggle. |
| link-line-height | CssValue | true | Adjust the link line-height, defaults to typography line-height-dense |
| link-icon-margin | Dimension | 0.65em | Adds a right margin to the icon. |
| link-icon-width | Dimension | 1em | The width of the icon. |
| link-icon-font-size | Dimension | null | Set the font-size for the icon (not set by default) |
| link-margin | Dimension | 0.2em | Margin for the menu-stack toggle. |
| link-padding-x | Dimension | 1em | Horizontal padding for menu-stack toggle. |
| link-padding-y | Dimension | 0.35em | Vertical padding for menu-stack toggle. |
| selectable-input-width | Dimension | 3em | The width of the checkbox/radio input |
| selectable-input-top | Dimension | 0.73em | To fine tune the y/top value for absolutely positioned input, if you pass null/falsey it will use the padding which isn't always perfect since this is setup to not be centered when wrapping lines in label |
| selectable-input-font-size | Dimension | null | Optional to set a specific font-size on the input |
| link-transition-duration | Duration | 200ms | The duration of the link state transition. |
| link-transition-properties | List | (border-color, background-color, color, box-shadow) | The properties to transition on link state change. |
| title-color | CssValue | null | Color to use for the title modifier |
| title-font-weight | CssValue | bold | The font weight for the title modifier. |
| title-separator-enabled | Boolean | true | Enables a separator rule below the title item. |
| title-separator-color | Color | rule | The color of the title separator rule. |
| title-rule-style | String | light | The rule style to use for the title separator. |
| title-separated-margin | Boolean | false | Use specific margin for title separated items. |
| columns-gap | Dimension | 2rem | The gap between columns in a columns menu stack. |
| columns-min-width | Dimension | 18rem | The minimum width of a column in a columns menu stack. |
Mixins
set()
Mixin
Change modules $config
File Information
- File: _menu-stack.scss
- Group: menu-stack
- Type: mixin
- Lines (comments): 137-140
- Lines (code): 142-144
Examples
@include ulu.component-menu-stack-set(( "property" : value ));Parameters
| Name | Type | Description |
|---|---|---|
| $changes | Map |
Map of changes |
Require
styles()
Mixin
Prints component styles
File Information
- File: _menu-stack.scss
- Group: menu-stack
- Type: mixin
- Lines (comments): 161-165
- Lines (code): 167-400
Examples
@include ulu.component-menu-stack-styles();Todos
- Colors stuff
- Selector prefix
Require
Functions
get()
Function
Get a config option
File Information
- File: _menu-stack.scss
- Group: menu-stack
- Type: function
- Lines (comments): 146-149
- Lines (code): 151-154
Examples
@include ulu.component-menu-stack-get("property");Parameters
| Name | Type | Description |
|---|---|---|
| $name | Map |
Name of property |