UNPKG

@atlassian/aui

Version:

Atlassian User Interface Framework

1 lines 3.52 kB
{"version":3,"names":[],"mappings":"","sources":["imports/aui-theme/components/navigation.less"],"sourcesContent":["@import '../theme';\n\n@aui-nav-text-color: @ak-color-N500;\n@aui-nav-heading-text-color: @ak-color-N200;\n@aui-nav-heading-text-font-size: @aui-font-size-xsmall;\n\n// ### Nav items\n\n@aui-nav-link-selected-text-color: @aui-nav-text-color;\n@aui-nav-link-selected-bg-color: @ak-color-N30A;\n@aui-nav-link-active-text-color: @aui-nav-text-color;\n@aui-nav-link-active-bg-color: @ak-color-B50;\n@aui-nav-link-bg-color: transparent;\n@aui-nav-link-color: @aui-nav-text-color;\n@aui-nav-link-border-radius: @aui-border-radius-small;\n\n// These values cannot change until a major version. See the item-base for an explanation.\n@aui-nav-link-effective-height: 30px;\n@aui-nav-link-spacing-horizontal: 10px;\n@aui-nav-link-spacing-vertical: 7px;\n\n// ### Nav sub-tree\n\n@aui-nav-group-divider-color: @ak-color-N40;\n@aui-nav-subtree-line-color: @ak-color-N40;\n@aui-nav-subtree-toggle-icon-color: @ak-color-N80;\n@aui-nav-subtree-toggle-icon-size: 20px;\n\n@aui-nav-subtree-indicator-width: 1px;\n@aui-nav-item-actions-dropdown-trigger-hover-color: @aui-button-default-hover-bg-color;\n\n// ### Actions lists\n\n@aui-nav-actions-list-margin-top: @aui-grid;\n@aui-nav-actions-list-item-margin-bottom: (@aui-grid / 2);\n@aui-nav-actions-list-item-font-size: @aui-font-size-medium;\n\n@aui-nav-actions-list-divider-color: @ak-color-N100;\n@aui-nav-actions-list-divider-size: 2px;\n@aui-nav-actions-list-divider-spacing: 10px;\n\n// ### Paginated\n\n@aui-nav-pagination-text-color: @aui-text-color;\n@aui-nav-pagination-active-text-color: @aui-color-gray;\n\n\n// ### Groups\n\n@aui-navgroup-horizontal-bg-color: @ak-color-N20;\n\n#aui-nav {\n .item-base(@height: @aui-nav-link-effective-height) {\n border-radius: @aui-nav-link-border-radius;\n box-sizing: content-box;\n // This *cannot* be changed to flexbox until a major version.\n // Plain-text often ends up in these items alongside elements that are currently floated;\n // it wouldn't be possible to re-arrange them correctly using flexbox.\n display: block;\n // the line-height + padding adds up to an effective 30px height for the element,\n // but the inner content box is only 16px tall. This enables things like\n // lozenges and small icons to line up correctly with the text, without explicit treatment.\n // this is assumed and exploited in places like the sidebar's navigation.\n line-height: unit((@height - (2 * @aui-nav-link-spacing-vertical)) / @aui-nav-actions-list-item-font-size);\n padding: @aui-nav-link-spacing-vertical @aui-nav-link-spacing-horizontal;\n }\n\n .item-style(normal) {\n background-color: @aui-nav-link-bg-color;\n color: @aui-nav-link-color;\n text-decoration: none;\n }\n\n .item-style(hover) {\n background-color: @aui-nav-link-selected-bg-color;\n // color is not set; it should be determined by whether the item is selected or not.\n text-decoration: none;\n }\n\n .item-style(active) {\n background-color: @aui-nav-link-active-bg-color;\n color: @aui-nav-link-active-text-color;\n text-decoration: none;\n }\n\n .item-style(selected) {\n background-color: @aui-nav-link-selected-bg-color;\n color: @aui-nav-link-selected-text-color;\n font-weight: @aui-font-weight-medium;\n }\n}\n"],"file":"navigation.css"}