@atlassian/aui/lib/css/aui-toggle.css.map

Atlassian User Interface Framework

{"version":3,"sources":["aui-toggle.less"],"names":[],"mappings":";;;AAMA;EACI,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,eAAA;EACA,oBAAA;EACA,gBAAA;EACA,kBAAA;EACA,wBAAA;EACA,WAAA;;AAIA,UAAC;EACG,SAAS,OAAT;;AAIJ,UAAC;EACG,6BAAA;EACA,kBAAA;EACA,SAAA;EACA,SAAS,EAAT;EACA,OAAA;EACA,oBAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;;AAMA,UAFH,IAAI,YAAY,IAAI,QAEhB,MAAO,kBAAkB;EACtB,yBAAA;;AAIJ,UAPH,IAAI,YAAY,IAAI,QAOhB,MAAO,kBAAiB,QAAS;EAC9B,yBAAA;;AAKR,UAAC;AACD,UAAC;EACG,YAAA;;AAFJ,UAAC,UAIG;AAHJ,UAAC,MAGG;EACI,YAAA;EACA,oBAAA;;AAKR,UAAC,MACG,iBAAgB;AADpB,UAAC,MAEG,kBAAiB;EACb,UAAA;EACA,gBAAA;;AAIJ,UARH,MAQI;EACG,0CAAA;;AAIR,UAAC,UACG;EACI,yBAAA;;AAFR,UAAC,UAKG;AALJ,UAAC,UAMG;EACI,cAAA;;AAOR,WAAC;EACG,0BAAA;EACA,gCAAA;EACA,kBAAA;EACA,SAAA;EACA,eAAA;EACA,YAAA;EACA,OAAA;EACA,SAAA;EACA,UAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;EACA,WAAA;;AAIJ,WAAC;EACG,yBAAA;EACA,kBAAA;EACA,SAAA;EACA,sBAAA;EACA,cAAA;EACA,OAAA;EACA,oBAAA;EACA,kBAAA;EACA,QAAA;EACA,yCAAA;EACA,MAAA;;AAIJ,WAAC,KAAK;EACF,yBAAA;EACA,kBAAA;EACA,WAAA;EACA,SAAS,EAAT;EACA,cAAA;EACA,SAAA;EACA,kBAAA;EACA,QAAA;EACA,uDAAA;EACA,uCAAA;EACA,WAAA;;AAIJ,WAAC;AACD,WAAC;EACG,kBAAA;EACA,QAAA;;AAEA,WALH,KAKI;AAAD,WAJH,MAII;EAEG,SAAA;EACA,eAAe,gBAAf;EACA,mBAAmB,gBAAnB;EACA,WAAW,gBAAX;EACA,qCAAA;;AAIR,WAAC;EACG,cAAA;EACA,SAAA;;AAGJ,WAAC;EACG,cAAA;EACA,UAAA;;AAIJ,WAAC,MAAM,QAAQ,QAAS,cAAG;AAC3B,WAAC,MAAM,sBAAuB,cAAG;EAG7B,yBAAA;;AASA,WALH,MAAM,QAAS,cAAG,KAKd;AAAD,WAJH,MAAM,sBAAuB,cAAG,KAI5B;EACG,eAAe,gBAAf;EACA,mBAAmB,gBAAnB;EACA,WAAW,gBAAX","sourcesContent":["@import './imports/global';\n\n/**\n * Toggle button\n */\n\naui-toggle {\n    box-sizing: border-box;\n    cursor: pointer;\n    display: inline-block;\n    font-size: @aui-toggle-font-size;\n    height: @aui-toggle-height;\n    padding: @aui-toggle-vertical-padding @aui-toggle-horizontal-padding;\n    position: relative;\n    vertical-align: baseline;\n    width: @aui-toggle-width;\n\n    // because all content inside this control is absolute position, we need some text so that\n    // the vertical alignment works\n    &::before {\n        content: \"\\00a0\"; // non-breaking space char\n    }\n\n    // invisible \"overlay\" which intercepts mouse clicks and provides the tint for the disabled/busy states\n    &::after {\n        background-color: transparent;\n        border-radius: @aui-toggle-border-radius;\n        bottom: 0;\n        content: '';\n        left: 0;\n        pointer-events: none;\n        position: absolute;\n        right: 0;\n        top: 0;\n    }\n\n    // hover and focus state\n    &:not([disabled]):not([busy]) {\n        // Off\n        &:hover .aui-toggle-input + .aui-toggle-view {\n            background-color: @aui-toggle-default-bg-hover-color;\n        }\n\n        // On\n        &:hover .aui-toggle-input:checked + .aui-toggle-view {\n            background-color: @aui-toggle-on-hover-color;\n        }\n    }\n\n    // disabled/busy state\n    &[disabled],\n    &[busy] {\n        cursor: auto;\n\n        .aui-toggle-input {\n            cursor: auto;\n            pointer-events: none;\n        }\n    }\n\n    // busy state\n    &[busy] {\n        .aui-toggle-tick::before,\n        .aui-toggle-cross::before {\n            opacity: 0;\n            transition: auto;\n        }\n\n        // tint the \"overlay\" to fade it out like a disabled control\n        &::after {\n            background-color: @aui-toggle-disabled-overlay-color;\n        }\n    }\n\n    &[disabled] {\n        .aui-toggle-view {\n            background-color: @ak-color-N20;\n        }\n\n        .aui-toggle-tick,\n        .aui-toggle-cross {\n            color: @ak-color-N70;\n        }\n    }\n}\n\n// the actual native checkbox to determine on/off/disabled state\n.aui-toggle {\n    &-input {\n        -webkit-appearance: button;\n        -moz-appearance: radio-container; // CSS appearance: none is broken on Firefox. We use this to hide the input. Works as if setting appearance: none;\n        border-radius: @aui-toggle-border-radius;\n        bottom: 0;\n        cursor: pointer;\n        height: 100%;\n        left: 0;\n        margin: 0;\n        padding: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        width: 100%;\n    }\n\n    // this is what provides the visual styles for the component\n    &-view {\n        background-color: @aui-toggle-default-bg-color;\n        border-radius: @aui-toggle-border-radius;\n        bottom: 0;\n        box-sizing: border-box;\n        display: block;\n        left: 0;\n        pointer-events: none;\n        position: absolute;\n        right: 0;\n        transition: background-color @aui-toggle-animation-background-color-delay linear;\n        top: 0;\n    }\n\n    // the \"handle\" which moves from side-to-side\n    &-view::after {\n        background-color: @aui-toggle-button-color;\n        border-radius: @aui-toggle-border-radius;\n        bottom: @aui-toggle-border-width;\n        content: '';\n        display: block;\n        left: @aui-toggle-border-width;\n        position: absolute;\n        top: @aui-toggle-border-width;\n        -webkit-transition: -webkit-transform @aui-toggle-animation-slide-delay ease-in-out; // for Safari, but causes flickering for all subsequent elements on the same layer. Browser bug.\n        transition: transform @aui-toggle-animation-slide-delay ease-in-out;\n        width: @aui-toggle-handle-width;\n    }\n\n    // tick and cross icon\n    &-tick,\n    &-cross {\n        position: absolute;\n        top: @aui-toggle-icon-top;\n\n        &::before {\n            // center the glyph in the absolute middle\n            left: 50%;\n            -ms-transform: translateX(-50%);\n            -webkit-transform: translateX(-50%);\n            transform: translateX(-50%);\n            transition: opacity @aui-toggle-animation-visible-delay ease-in-out;\n        }\n    }\n\n    &-tick {\n        color: @aui-toggle-tick-color;\n        left: @aui-toggle-horizontal-padding;\n    }\n\n    &-cross {\n        color: @aui-toggle-cross-color;\n        right: @aui-toggle-horizontal-padding;\n    }\n\n    // checked state (on/off)\n    &-input:checked:enabled + &-view,\n    &-input.indeterminate-checked + &-view {\n        // .indeterminate-checked is to workaround Chrome and Safari no longer\n        // matching :checked when .indeterminate is set to true.\n        background-color: @aui-toggle-on-color;\n    }\n\n    // checked state (on/off)\n    &-input:checked + &-view,\n    &-input.indeterminate-checked + &-view {\n        // .indeterminate-checked is to workaround Chrome and Safari no longer\n        // matching :checked when .indeterminate is set to true.\n\n        &::after {\n            -ms-transform: translateX(@aui-toggle-slide-width);\n            -webkit-transform: translateX(@aui-toggle-slide-width);\n            transform: translateX(@aui-toggle-slide-width);\n        }\n    }\n}\n"],"file":"aui-toggle.css"}