react-accessible-shuttle/css/shuttle.css.map

A tiny, zero dependency, shuttle (a.k.a list shuttle, dual listbox, etc.) implementation in React using hooks.

{"version":3,"sourceRoot":"","sources":["../src/styles/shuttle.scss"],"names":[],"mappings":"AAEA,SACI,aAGI,mEAEI,iBAIR,oBACI,YACA,aACA,sBACA,aACA,cAEA,wCACI,gBAIR,eACI,6BACA,kBACA,aACA,eAEA,gCACI,mBAGJ,yBACI,oBACA,sBACA,WACA,kBACA,mBAGJ,qBACI,eAGJ,mEAGI,kBACA,yBAIR,mBACI,aACA,sBACA,uBAEA,qBACI,iBACA","file":"shuttle.css","sourcesContent":["$base-class-name: 'shuttle' !default;\n\n.#{$base-class-name} {\n    display: flex;\n\n    &--ush {\n        .#{$base-class-name}__container,\n        .#{$base-class-name}__controls {\n            user-select: none;\n        }\n    }\n\n    &__container {\n        width: 250px;\n        height: 400px;\n        border: 1px solid #ccc;\n        padding: 0.5em;\n        overflow: auto;\n\n        & + & {\n            margin-left: 1em;\n        }\n    }\n\n    &__item {\n        border: 1px solid transparent;\n        border-radius: 3px;\n        padding: 0.5em;\n        cursor: pointer;\n\n        &:not(:last-child) {\n            margin-bottom: 0.5em;\n        }\n\n        &--disabled {\n            pointer-events: none;\n            background-color: #ddd;\n            color: #444;\n            border-color: #999;\n            cursor: not-allowed;\n        }\n\n        &:focus {\n            outline: 0 none;\n        }\n\n        &--selected,\n        &:hover,\n        &:focus {\n            border-color: lighten(blue, 30%);\n            background-color: lighten(blue, 45%);\n        }\n    }\n\n    &__controls {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n\n        & > * {\n            margin: 0.75em 1em;\n            font-size: 1.2em;\n        }\n    }\n}\n"]}