@atlassian/aui/lib/css/aui-sidebar-navigation.css.map

Atlassian User Interface Framework

{"version":3,"sources":["aui-sidebar-navigation.less","imports/mixins.less","imports/aui-theme/components/navigation.less"],"names":[],"mappings":"AAUA,YAOI,cAAc;AANlB,oBAMI,cAAc;EACV,mBAAA;EACA,gBAAA;;AATR,YAOI,cAAc,oBAIV;AAVR,oBAMI,cAAc,oBAIV;EACI,iBAAA;;AAZZ,YAgBI;AAfJ,oBAeI;ECmBI,mBAAA;EACA,uBAAA;EACA,gBAAA;EDnBA,cAAA;EACA,iBAAA;;AAnBR,YAsBI,uBAAuB,SACnB,KACI;AAvBZ,oBAqBI,uBAAuB,SACnB,KACI;EEmBJ,kBAAA;EACA,uBAAA;EAIA,cAAA;EAKA,uBAAA;EACA,iBAAA;EF5BQ,iBAAA;EACA,mBAAA;;AA3BhB,YAsBI,uBAAuB,SAUnB;AA/BR,oBAqBI,uBAAuB,SAUnB;EAEI,QAAA;EACA,YAAA;EACA,WAAA;;AAKA,YAnBR,uBAAuB,SAkBnB,SACK,WACG,cAAc;AADlB,oBAnBR,uBAAuB,SAkBnB,SACK,WACG,cAAc;EACV,SAAA;EACA,gBAAA;;AA5CpB,YAsBI,uBAAuB,SAkBnB,SAQI;AA/CZ,oBAqBI,uBAAuB,SAkBnB,SAQI;EACI,eAAA;;AAjDhB,YAsDI,uBAAuB,SAAS,kBAAkB;AArDtD,oBAqDI,uBAAuB,SAAS,kBAAkB;EEsB9C,uCAAA;EACA,cAAA;EACA,gBAAA;;AF9ER,YA0DI,SACI;AA1DR,oBAyDI,SACI;EACI,kBAAA;;AA5DZ,YA0DI,SACI,KAGI;AA7DZ,oBAyDI,SACI,KAGI;EC3BJ,mBAAA;EACA,uBAAA;EACA,gBAAA;;ADrCR,YA0DI,SACI,KAGI,gBAGI;AAhEhB,oBAyDI,SACI,KAGI,gBAGI;EACI,cAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,WAAA;;AAEA,YAdhB,SACI,KAGI,gBAGI,YAOK;AAAD,oBAdhB,SACI,KAGI,gBAGI,YAOK;EACG,eAAA;EACA,iBAAA;;AAGJ,YAnBhB,SACI,KAGI,gBAGI,YAYK,eAAe;AAAhB,oBAnBhB,SACI,KAGI,gBAGI,YAYK,eAAe;EACZ,eAAA;EAEA,YAAA;;AAhFxB,YAwFI,uBAAuB,SAAS,KAAI,eAChC;AAxFR,oBAuFI,uBAAuB,SAAS,KAAI,eAChC;EAII,QAAA;EACA,SAAA;EACA,cAAA;;AA/FZ,YAwFI,uBAAuB,SAAS,KAAI,eAChC,0BAQI;AAhGZ,oBAuFI,uBAAuB,SAAS,KAAI,eAChC,0BAQI;EACI,kBAAA;;AAlGhB,YAwFI,uBAAuB,SAAS,KAAI,eAChC,0BAQI,gBAGI;AAnGhB,oBAuFI,uBAAuB,SAAS,KAAI,eAChC,0BAQI,gBAGI;EACI,aAAA;;AArGpB,YAwFI,uBAAuB,SAAS,KAAI,eAChC,0BAgBI;AAxGZ,oBAuFI,uBAAuB,SAAS,KAAI,eAChC,0BAgBI;EACI,kBAAA;;AA1GhB,YAiHI;AAhHJ,oBAgHI;EACI,aAAA;;AAQJ,YAAC,uBAGG;EACI,aAAA;;AAJR,YAAC,uBAQG,uBAAuB,SAAS,KAAI,eAChC,0BACI;EACI,eAAA;;AAXhB,YAAC,uBAQG,uBAAuB,SAAS,KAAI,eAChC,0BACI,gBAGI;EACI,cAAA;;AAdpB,YAAC,uBAoBG,kBAAkB,KAAK,IAAG;EACtB,OAAA;EACA,QAAA;;AAtBR,YAAC,uBAyBG;EACI,aAAA;;AAOZ,2BAA4B;EACxB,aAAA;EACA,YAAA;EACA,iBAAA;;AAGJ;EACI,gBAAA;EACA,uBAAA;EACA,eAAA;EACA,WAAA","sourcesContent":["@import 'aui-sidebar-config.less';\n\n//\n// Imported by aui-sidebar.\n//\n// Implements the navigation pattern overrides for vertical navigation\n// so that it works both inside the sidebar panel itself as well as in the inline-dialogs\n// shown when the sidebar is contracted.\n//\n\n.aui-sidebar,\n.aui-sidebar-submenu {\n\n    //\n    // Nav pattern integration\n    //\n\n    .aui-navgroup .aui-sidebar-button {\n        margin-bottom: @aui-sidebar-grid;\n        margin-left: 3px;\n\n        > .aui-icon {\n            margin-right: 3px;\n        }\n    }\n\n    .aui-nav-item-label {\n        #aui.text-truncate();\n        display: block;\n        word-wrap: normal;\n    }\n\n    .aui-navgroup-vertical .aui-nav {\n        > li {\n            > .aui-nav-item {\n                #aui-nav.item-base(@aui-sidebar-nav-link-expected-height);\n                padding-left: @aui-sidebar-nav-link-inner-spacing;\n                padding-right: (@aui-icon-size-small + @aui-sidebar-nav-link-inner-spacing ); // room on the right for dropdown action menus\n            }\n        }\n\n        // Actions\n        .aui-nav-item-actions {\n            @actions-button-size: @aui-icon-size-small;\n            top: ((@aui-sidebar-nav-link-expected-height - @actions-button-size) / 2);\n            height: @actions-button-size;\n            width: @actions-button-size;\n        }\n\n        // Nested navigation\n        .aui-nav {\n            &[data-more] {\n                .aui-nav-more ~ li {\n                    height: 0;\n                    overflow: hidden;\n                }\n            }\n\n            .aui-nav-item-actions {\n                margin-right: 0;\n            }\n        }\n    }\n\n    .aui-navgroup-vertical .aui-nav .aui-nav-selected > .aui-nav-item {\n        #aui-nav.item-style(selected);\n    }\n\n    .aui-nav {\n        > li {\n            position: relative;\n\n            > .aui-nav-item {\n                #aui.text-truncate();\n\n                > .aui-icon {\n                    color: @aui-sidebar-icon-color;\n                    height: @aui-sidebar-icon-size;\n                    width: @aui-sidebar-icon-size;\n                    margin-right: @aui-sidebar-nav-link-icon-spacing;\n                    float: left;\n\n                    &::before {\n                        font-size: @aui-sidebar-icon-size;\n                        margin-top: -( @aui-sidebar-icon-size / 2);\n                    }\n\n                    &.aui-icon-small::before {\n                        font-size: @aui-icon-size-small;\n                        // change padding to maintain the 20px box size so that relative positioning still works\n                        padding: ((@aui-sidebar-icon-size - @aui-icon-size-small) / 2);\n                    }\n                }\n            }\n        }\n    }\n\n    // twixi for nested navigation\n    .aui-navgroup-vertical .aui-nav > li[aria-expanded] {\n        > .aui-nav-subtree-toggle {\n            @box-size: @aui-sidebar-nav-link-expected-height; // that assumption in aui-navigation about the .aui-nav-item height? yeeeeah, it's invalid here.\n            @fake-icon-with-spacing: @aui-nav-subtree-toggle-icon-size + @aui-sidebar-nav-link-icon-spacing;\n\n            top: ((@box-size - @aui-nav-subtree-toggle-icon-size) / 2);\n            left: @aui-sidebar-nav-link-inner-spacing; // push it \"inside\" the .aui-nav-item, though the element actually adjacent to it.\n            color: @aui-sidebar-toggle-icon-color;\n\n            + .aui-nav-item {\n                padding-left: (@aui-sidebar-nav-link-inner-spacing + @fake-icon-with-spacing);\n\n                > .aui-icon {\n                    display: none; // the subtree toggle is shown in place of this icon.\n                }\n            }\n\n            ~ .aui-nav {\n                padding-left: @fake-icon-with-spacing;\n            }\n        }\n    }\n\n    // divider between multiple aui-sidebar-groups or aui-navs inside the sidebar, without a aui-nav-heading.\n    // they used to be displayed, but the design went \"borderless\", so now they're not.\n    hr {\n        display: none;\n    }\n}\n\n//-----------------------\n// Sidebar narrow state - add collapsed styles.\n//-----------------------\n.aui-sidebar {\n    &[aria-expanded=\"false\"] {\n        @aui-sidebar-nav-group-divider-width: 2px;\n\n        .aui-nav-heading {\n            display: none;\n        }\n\n        // show the icon for an expandable twixi menu (if it has one)\n        .aui-navgroup-vertical .aui-nav > li[aria-expanded] {\n            > .aui-nav-subtree-toggle {\n                + .aui-nav-item {\n                    padding-left: 0;\n\n                    > .aui-icon {\n                        display: block; // the subtree toggle doesn't exist in the reduced width sidebar\n                    }\n                }\n            }\n        }\n\n        .aui-nav-sortable > li > a:after {\n            left: 0;\n            top: (@aui-sidebar-grid * .8);\n        }\n\n        .aui-nav-item-actions {\n            display: none;\n        }\n    }\n}\n// END Sidebar\n//-----------------------\n\n.aui-sidebar-submenu-dialog > .aui-inline-dialog-contents {\n    padding: @aui-sidebar-grid;\n    width: 300px;\n    max-height: 812px;\n}\n\n.aui-sidebar-submenu {\n    position: static;\n    background: transparent;\n    border-right: 0;\n    width: auto;\n}\n","@import 'aui-theme/components/messages';\n@import 'aui-theme/core/colors';\n\n@import './mixins/dropdown2-trigger-chevron-icon';\n@import './mixins/icon-pseudoelement';\n@import './mixins/media-queries';\n@import './mixins/shadows';\n@import './mixins/tab-indicator';\n@import './mixins/typography';\n\n#aui {\n    .animation(@animation) {\n        -webkit-animation: @animation;\n        animation: @animation;\n    }\n\n    .border-radius(@radius) {\n        border-radius: @radius;\n    }\n\n    .box-sizing(@sizing: border-box) {\n        box-sizing: @sizing;\n    }\n\n    .prevent-text-selection() {\n        -ms-user-select: none; // IE10+\n        -moz-user-select: none;\n        -webkit-user-select: none;\n        user-select: none;\n    }\n\n    .gradient {\n        .vertical(@start-color: #fff, @end-color: #f2f2f2, @start-percent: 0%, @end-percent: 100%) {\n            background: @end-color;\n            background: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent);\n        }\n    }\n\n    .rotate(@angle) {\n        -webkit-transform: rotate(@angle);\n        -ms-transform: rotate(@angle);\n        transform: rotate(@angle);\n    }\n\n    .text-truncate() {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n    }\n\n    .transition(@transition) {\n        // Using + is deliberate; it will comma-append the value to whatever value already exists.\n        // See http://lesscss.org/features/#merge-feature-comma\n        transition+: @transition;\n    }\n\n    .transition {\n        .fadeIn(@length: 0.2s, @delay: 0s, @max-opacity: 1) {\n            opacity: @max-opacity;\n            transition: opacity @length;\n            transition-delay: @delay;\n            visibility: visible;\n        }\n\n        .fadeOut(@length: 0.2s, @delay: 0s) {\n            opacity: 0;\n            transition: opacity @length, visibility @length;\n            transition-delay: @delay;\n            visibility: hidden;\n        }\n    }\n\n    .transform-rotate(@angle) {\n        -ms-transform: rotate(@angle);\n        -webkit-transform: rotate(@angle);\n        transform: rotate(@angle);\n    }\n\n    .height-calc(@calc) {\n        height: ~\"calc(@{calc})\";\n    }\n\n    .placeholder(@color) {\n        // each rule for each browser must be in a different selector, as browsers will\n        // ignore the whole line if it doesn't recognise something.\n        // see https://css-tricks.com/almanac/selectors/p/placeholder/ for more details.\n\n        // Affect Safari and Chrome.\n        &::-webkit-input-placeholder {\n            color: @color;\n            opacity: 1;\n        }\n        // Affect Firefox 18+. The opacity is necessary to override browser defaults.\n        &::-moz-placeholder {\n            color: @color;\n            opacity: 1;\n        }\n        // IE 10 implements placeholder text via a pseudo-class, not a pseudo-element;\n        // that's why there's a single colon here instead of two.\n        &:-ms-input-placeholder {\n            color: @color;\n        }\n        // This is the likely official CSS spec way of achieving placeholder text.\n        &::placeholder {\n            color: @color;\n        }\n        // Target AUI's JS equivalent of the CSS proposal for the `:placeholder-shown` pseudo-class.\n        &.aui-placeholder-shown, &.placeholder-shown {\n            color: @color;\n        }\n    }\n\n    //\n    // Responsive mixins\n    //\n    .responsive-small(@rules) {\n        html.aui-responsive {\n            @media screen and (max-width: 767px) {\n                @rules();\n            }\n        }\n    }\n    .responsive-medium(@rules) {\n        html.aui-responsive {\n            @media screen and (max-width: 800px) {\n                @rules();\n            }\n        }\n    }\n\n    .responsive-large(@rules) {\n        html.aui-responsive {\n            @media screen and (max-width: 1023px) {\n                @rules();\n            }\n        }\n    }\n\n    // messages / flags\n\n    .icon-bar() {\n        //The actual icon\n        &::after {\n            #aui.icon-pseudoelement(@aui-icon-font-family);\n            color: @aui-color-white;\n            font-size: @aui-message-icon-size;\n            left: @aui-message-padding-left;\n            line-height: @aui-message-line-height;\n            position: absolute;\n            top: @aui-message-vertical-padding;\n        }\n\n        // For the backward compatible changes\n        &::before {\n            display: none;\n        }\n    }\n\n    .icon-glyph(@content, @color) {\n        //The actual icon\n        &::after {\n            content: @content;\n            color: @color;\n        }\n    }\n}\n","@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":"aui-sidebar-navigation.css"}