@atlassian/aui/lib/css/flag.css.map

Atlassian User Interface Framework

{"version":3,"sources":["flag.less","imports/mixins.less","imports/mixins/shadows.less"],"names":[],"mappings":"AAEA;EAEI,oBAAA;EACA,eAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;;AAGJ;EACI,OAAA;EACA,iBAAA;EACA,UAAA;EACA,kBAAA;EACA,UAAA;ECqCI,kCAAA;;ADjCJ,SAAC;EACG,WAAA;EACA,aAAA;EACA,UAAA;EACA,gBAAA;EACA,MAAA;EC4BA,gFAAA;;ADrBJ,SAAC;EACG,mBAAA;EACA,UAAA;EACA,MAAA;EACA,OAAA;;AAzBR,SA4BI;EEbQ,iFAAA;EFeJ,oBAAA;EACA,eAAA;EACA,YAAA","sourcesContent":["@import './imports/global';\n\n#aui-flag-container {\n    @gutter: @aui-grid * 3;\n    pointer-events: none; // so that users can click through the margin of the flag.\n    position: fixed;\n    top: @aui-header-logo-height + @gutter;\n    right: @gutter;\n    z-index: 4000;\n}\n\n.aui-flag {\n    left: 0;\n    max-height: 300px; //We need to set an explicit value to be able to animate the property\n    opacity: 0;\n    position: relative;\n    top: -10px;\n    #aui.transition(opacity @aui-flag-fade-in-time);\n    #aui.transition(top @aui-flag-slide-in-time);\n\n    &[aria-hidden=\"true\"] {\n        left: 300px;\n        max-height: 0;\n        opacity: 0;\n        overflow: hidden;\n        top: 0;\n        #aui.transition(max-height @aui-flag-stack-shrink-time @aui-flag-stack-shrink-delay);\n        #aui.transition(margin-bottom @aui-flag-stack-shrink-time @aui-flag-stack-shrink-delay);\n        #aui.transition(opacity @aui-flag-fade-out-time);\n        #aui.transition(left @aui-flag-slide-out-time);\n    }\n\n    &[aria-hidden=\"false\"] {\n        margin-bottom: @aui-flag-vertical-padding; // it's on the bottom so there's less clunky animation when flags in a stack disappear\n        opacity: 1;\n        top: 0;\n        left: 0;\n    }\n\n    .aui-message {\n        #aui.shadow.z500();\n        pointer-events: auto; // to allow normal interaction with messages inside flags\n        border-width: 0;\n        width: 300px;\n    }\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","\n#aui {\n    .shadow {\n        // For use on cards and other things that sit flush on top of other layers.\n        .z100() {\n            box-shadow:\n                0 1px 1px @ak-color-N40A,\n                0 0 1px 0 @ak-color-N50A;\n        }\n\n        // For inline dialogs\n        .z200() {\n            box-shadow:\n                0 4px 8px -2px @ak-color-N50A,\n                0 0 1px @ak-color-N60A;\n        }\n\n        // For modal dialogs\n        .z300() {\n            box-shadow:\n                0 8px 16px -4px @ak-color-N50A,\n                0 0 1px @ak-color-N60A;\n        }\n\n        // For flags and notifications\n        .z500() {\n            box-shadow:\n                0 20px 32px -8px @ak-color-N50A,\n                0 0 1px @ak-color-N60A;\n        }\n\n        // Deprecated since AUI 7.3\n        .inner(@inner: 0 1px 0 0 rgba(255, 255, 255, 0.1) inset) {\n            box-shadow+: @inner;\n        }\n\n        // Deprecated since AUI 7.3\n        .outer(@outer: 0 1px 1px 0 rgba(0, 0, 0, 0.2)) {\n            box-shadow+: @outer;\n        }\n\n        // Deprecated since AUI 7.3\n        .inner-and-outer(@inner: 0 1px 0 0 rgba(255, 255, 255, 0.1) inset, @outer: 0 1px 1px 0 rgba(0, 0, 0, 0.2)) {\n            .inner(@inner);\n            .outer(@outer);\n        }\n    }\n}\n"],"file":"flag.css"}