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

Atlassian User Interface Framework

{"version":3,"sources":["aui-sidebar-grouping.less","imports/aui-theme/components/navigation.less"],"names":[],"mappings":"AAcA,YAEI;EAEI,gBAAA;EACA,mBAAA;EACA,eAAA;;AANR,YAEI,mBAMI;EACI,cAAA;;AAQR,YAAC,uBAIG;ECkBA,kBAAA;EACA,uBAAA;EAIA,cAAA;EAKA,uBAAA;EACA,iBAAA;EAIA,6BAAA;EACA,cAAA;EACA,qBAAA;ED/BI,yEAAA;EACA,eAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,kBAAA;;AAEA,YAfP,uBAIG,mBAWK;AACD,YAhBP,uBAIG,mBAYK;EC2BL,uCAAA;EAEA,qBAAA;;ADzBI,YApBP,uBAIG,mBAgBK;ECmCL,uCAAA;EACA,cAAA;EACA,gBAAA;;ADzDJ,YAAC,uBAIG,mBAoBI;EACI,aAAA;;AAIJ,YA7BP,uBAIG,mBAyBK;AACD,YA9BP,uBAIG,mBA0BK;EACG,gBAAA;EACA,gBAAA;EACA,YAAA;EACA,UAAA;;AAlCZ,YAAC,uBAuCG;EACI,qBAAA;EACA,YAAA;;AAEA,YA3CP,uBAuCG,2BAIK;EAGG,oFAAA;EACA,qBAAA;EACA,yBAAA;EACA,kBAAA;EACA,SAAS,EAAT;EACA,cAAA;EACA,YAAA;EACA,OAAA;EACA,iBAAA;EACA,kBAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;;AAMA,YAhEX,uBAuCG,2BAsBK,MAGI;AAAD,YAhEX,uBAuCG,2BAuBK,MAEI;AAAD,YAhEX,uBAuCG,2BAwBK,OACI;EACG,yBAAA;EACA,qBAAA;;AAlEhB,YAAC,uBAuCG,2BA+BI;EACI,6BAAA;EACA,gBAAA;EACA,iBAAA;;AAzEZ,YAAC,uBA8EG;EACI,gBAAA;EACA,YAAA;;AAEA,YAlFP,uBA8EG,4BAIK;EACG,aAAA;;AAGJ,YAtFP,uBA8EG,4BAQK;AACD,YAvFP,uBA8EG,4BASK;EACG,6BAAA;;AAxFZ,YAAC,uBA8EG,4BAaI;EACI,cAAA;EACA,YAAA;;AA7FZ,YAAC,uBA8EG,4BAaI,SAII;EACI,cAAA;;AAhGhB,YAAC,uBA8EG,4BAaI,SAII,KAGI;EACI,eAAA;EACA,gBAAA;EACA,kBAAA;;AArGpB,YAAC,uBA8EG,4BAaI,SAII,KAGI,gBAMI;EACI,WAAA;EACA,cAAA;;AAGJ,YA7GnB,uBA8EG,4BAaI,SAII,KAGI,gBAWK;ECtDjB,uCAAA;EACA,cAAA;EACA,gBAAA;;ADzDJ,YAAC,uBA8EG,4BAaI,SAII,KAoBI;EACI,SAAA;EACA,MAAM,aAAN;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,UAAA;EACA,kBAAA;EACA,UAAA;;AA3HpB,YAAC,uBA8EG,4BAaI,SAII,KAgCI;EACI,aAAA;;AAhIpB,YAAC,uBA8EG,4BAaI,SAII,KAoCI;EACI,aAAA;;AApIpB,YAAC,uBA8EG,4BAaI,SA8CI;EACI,aAAA;;AA1IhB,YAAC,uBA8EG,4BAgEI;EACI,6BAAA;EACA,gBAAA;EACA,iBAAA","sourcesContent":["@import 'aui-sidebar-config.less';\n\n//\n// Imported by aui-sidebar.\n//\n// Implements grouping strategies for sidebar items. The various group\n// types are wrappers around the base aui-nav pattern. Different groups\n// behave and are styled differently depending on whether the sidebar\n// is expanded or collapsed.\n//\n\n//\n// Sidebar navigation grouping\n//\n.aui-sidebar {\n\n    .aui-sidebar-group {\n        // Note: these margins should collapse with those of aui-nav itself.\n        margin-top: (@aui-sidebar-grid * 2);\n        margin-bottom: @aui-sidebar-grid;\n        padding: 0 @aui-sidebar-gutter;\n\n        .aui-nav-heading {\n            padding: 0 (@aui-sidebar-spacing - @aui-sidebar-gutter);\n        }\n    }\n\n\n    //-----------------------\n    // Sidebar narrow state - add collapsed styles.\n    //-----------------------\n    &[aria-expanded=\"false\"] {\n        @aui-sidebar-nav-group-divider-width: 2px;\n\n        // Replaces aui-nav with a default image to reflect nested content\n        .aui-sidebar-group {\n            // by default, groups collapse and are meant to look like clickable buttons.\n            #aui-nav.item-base(@aui-sidebar-nav-link-expected-height);\n            #aui-nav.item-style(normal);\n            background: url(images/icons/sidebar/icon-group.svg) 50% center no-repeat;\n            cursor: pointer;\n            height: @aui-sidebar-icon-size;\n            margin-left: @aui-sidebar-grid;\n            margin-right: @aui-sidebar-grid;\n            position: relative;\n\n            &:focus,\n            &:hover {\n                #aui-nav.item-style(hover);\n            }\n\n            &.active {\n                #aui-nav.item-style(selected);\n            }\n\n            > .aui-nav {\n                display: none;\n            }\n\n            // remove the faux button effect; these things are still groups.\n            &.aui-sidebar-group-actions,\n            &.aui-sidebar-group-tier-one {\n                background: none;\n                border-radius: 0;\n                cursor: auto;\n                padding: 0;\n            }\n        }\n\n        // make the group actions look like a special kind of rounded button.\n        .aui-sidebar-group-actions {\n            margin: @aui-sidebar-grid 0 @aui-sidebar-spacing 0;\n            height: @aui-icon-size-large;\n\n            &::after {\n                @aui-sidebar-group-actions-border-width: 1px;\n\n                background: url(images/icons/sidebar/icon-group-actions.svg) no-repeat center center;\n                background-size: @aui-sidebar-icon-size;\n                border: @aui-sidebar-group-actions-border-width solid @aui-sidebar-background-color;\n                border-radius: 50%;\n                content: \"\";\n                display: block;\n                height: @aui-icon-size-large;\n                left: 0;\n                margin-left: ((@aui-sidebar-collapsed-width - @aui-sidebar-header-avatar-collapsed - (@aui-sidebar-group-actions-border-width * 2)) / 2);\n                margin-right: ((@aui-sidebar-collapsed-width - @aui-sidebar-header-avatar-collapsed - (@aui-sidebar-group-actions-border-width * 2)) / 2);\n                position: absolute;\n                top: 0;\n                width: @aui-icon-size-large;\n            }\n\n            &:hover,\n            &:focus,\n            &.active {\n                &::after {\n                    background-color: @ak-color-N0;\n                    border-color: @aui-nav-group-divider-color;\n                }\n            }\n\n            ~ .aui-sidebar-group-tier-one {\n                border-top: @aui-sidebar-nav-group-divider-width solid @aui-nav-group-divider-color;\n                margin-top: @aui-sidebar-spacing;\n                padding-top: @aui-sidebar-grid;\n            }\n        }\n\n        // use when the nav items have icons - shows the icon in the collapsed state\n        .aui-sidebar-group-tier-one {\n            background: none;\n            height: auto;\n\n            &:after {\n                display: none;\n            }\n\n            &:focus,\n            &:hover {\n                background-color: transparent;\n            }\n\n            .aui-nav {\n                display: block;\n                height: auto;\n\n                > li {\n                    display: block;\n\n                    > .aui-nav-item {\n                        padding-left: 0;\n                        padding-right: 0;\n                        text-align: center;\n\n                        // Adjust the position of the icon\n                        > .aui-icon {\n                            float: none;\n                            margin: 0 auto;\n                        }\n\n                        &.active {\n                            #aui-nav.item-style(selected);\n                        }\n                    }\n\n                    // visually hide the labels while allowing screen readers to still see them\n                    .aui-nav-item-label {\n                        border: 0;\n                        clip: rect(0 0 0 0);\n                        height: 1px;\n                        margin: -1px;\n                        overflow: hidden;\n                        padding: 0;\n                        position: absolute;\n                        width: 1px;\n                    }\n\n                    // remove any top level twixy expand/collapse triggers\n                    > .aui-nav-subtree-toggle {\n                        display: none;\n                    }\n\n                    .aui-nav-item-actions {\n                        display: none;\n                    }\n                }\n\n                // remove nested navs - contents to be sucked into fly-out menus\n                .aui-nav {\n                    display: none;\n                }\n            }\n\n            ~ .aui-sidebar-group-tier-one {\n                border-top: @aui-sidebar-nav-group-divider-width solid @aui-nav-group-divider-color;\n                margin-top: @aui-sidebar-grid;\n                padding-top: @aui-sidebar-grid;\n            }\n        }\n    }\n    // END Collapsed state\n}\n// END Sidebar\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-grouping.css"}