skeleton-screen-css/dist/index.min.css.map

Zero dependencies, framework agnostic, a minimalistic set of skeleton screen elements consisting of pure css. Includes scss source, minified and non-minified compiled css files with browser vendor prefixes.

{"version":3,"sources":["index.scss"],"names":[],"mappings":"AA2BA,+BACI,GACI,mCAAA,CAAA,4BAEJ,GACI,kCAAA,CAAA,4BALR,uBACI,GACI,mCAAA,CAAA,4BAEJ,GACI,kCAAA,CAAA,4BAKR,yDACI,aAAA,CACA,gCAtCqB,CAuCrB,iBAAA,CACA,gBAEA,uFACI,UAAA,CACA,2CAAA,CAAA,mCAAA,CACA,WAAA,CACA,MAAA,CACA,iBAAA,CACA,OAAA,CACA,KAAA,CACA,mCAAA,CAAA,2BAAA,CACA,SAAA,CACA,6EAKR,KACI,eAAA,CACA,wBAAA,CAAA,iBAKA,SACI,mBAGJ,SACI,gBAGJ,SACI,kBAGJ,SACI,iBAGJ,UACI,kBAGJ,UACI,eAGJ,UACI,iBAGJ,UACI,gBAGJ,WACI,UAGJ,WACI,UAGJ,WACI,UAGJ,WACI,UAGJ,WACI,UAGJ,WACI,UAGJ,WACI,UAGJ,WACI,UAGJ,WACI,UAGJ,YACI,WAGJ,WACI,aAGJ,kBACI,oBAGJ,kBACI,sBAGJ,0BACI,8BAGJ,eACI,mBAGJ,uBACI,2BAGJ,mBACI,mBAGJ,kBACI,uBAGJ,gBACI,qBAGJ,oBACI,oBAGJ,oBACI,sBAGJ,qBACI,uBAGJ,kBACI,oBAGJ,sBACI,8BAGJ,qBACI,6BAKR,aACI,aAIJ,UACI,aAAA,CACA,UAAA,CACA,WAAA,CACA,iBAnM0B,CAoM1B,wCAtMuB,CAuMvB,sBAGJ,YACI,iBAAA,CACA,UAxMmB,CAyMnB,YAKJ,QACI,UAAA,CACA,WAKJ,UAGI,YAKJ,yBAPI,kBAlN0B,CAmN1B,WAMJ,eAGI,YAKJ,YACI,UAAA,CACA","file":"index.min.css","sourceRoot":"../src","sourcesContent":["/* Variables */\n$skeleton-element-color: rgba(0, 0, 0, 0.17) !default;\n\n$skeleton-loading-animation-time: 1.3s !default;\n\n$skeleton-margin-standart: 16px !default;\n\n$skeleton-wrapper-padding: $skeleton-margin-standart !default;\n\n$skeleton-margin-small: calc($skeleton-margin-standart / 2) !default;\n\n$skeleton-card-box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.17) !default;\n$skeleton-card-background-color: #ffffff !default;\n$skeleton-card-border-radius: 5px !default;\n\n$skeleton-circle-size: 50px !default;\n\n$skeleton-hr-height: 2px !default;\n\n$skeleton-line-border-radius: 15px !default;\n$skeleton-line-height: 12px !default;\n\n$skeleton-headline-height: calc($skeleton-line-height * 2) !default;\n\n$skeleton-square-height: 150px !default;\n\n/* Animation */\n@keyframes ssc-loading {\n    from {\n        transform: translateX(-100%);\n    }\n    to {\n        transform: translateX(100%);\n    }\n}\n\n/* Animation partial */\n%ssc-animation {\n    display: block;\n    background-color: $skeleton-element-color;\n    position: relative;\n    overflow: hidden;\n\n    &:after {\n        content: \"\";\n        animation: ssc-loading $skeleton-loading-animation-time infinite;\n        height: 100%;\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        transform: translateX(-100%);\n        z-index: 1;\n        background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.3), transparent);\n    }\n}\n\n/** Main class */\n.ssc {\n    cursor: progress;\n    user-select: none;\n}\n\n/** Helpers classes */\n.ssc {\n    .mb {\n        margin-bottom: $skeleton-margin-standart;\n    }\n\n    .mt {\n        margin-top: $skeleton-margin-standart;\n    }\n\n    .mr {\n        margin-right: $skeleton-margin-standart;\n    }\n\n    .ml {\n        margin-left: $skeleton-margin-standart;\n    }\n\n    .mbs {\n        margin-bottom: $skeleton-margin-small;\n    }\n\n    .mts {\n        margin-top: $skeleton-margin-small;\n    }\n\n    .mrs {\n        margin-right: $skeleton-margin-small;\n    }\n\n    .mls {\n        margin-left: $skeleton-margin-small;\n    }\n\n    .w-10 {\n        width: 10%;\n    }\n\n    .w-20 {\n        width: 20%;\n    }\n\n    .w-30 {\n        width: 30%;\n    }\n\n    .w-40 {\n        width: 40%;\n    }\n\n    .w-50 {\n        width: 50%;\n    }\n\n    .w-60 {\n        width: 60%;\n    }\n\n    .w-70 {\n        width: 70%;\n    }\n\n    .w-80 {\n        width: 80%;\n    }\n\n    .w-90 {\n        width: 90%;\n    }\n\n    .w-100 {\n        width: 100%;\n    }\n\n    .flex {\n        display: flex;\n    }\n\n    .inline-flex {\n        display: inline-flex;\n    }\n\n    .flex-column {\n        flex-direction: column;\n    }\n\n    .flex-column-reverse {\n        flex-direction: column-reverse;\n    }\n\n    .flex-row {\n        flex-direction: row;\n    }\n\n    .flex-row-reverse {\n        flex-direction: row-reverse;\n    }\n\n    .align-center {\n        align-items: center;\n    }\n\n    .align-start {\n        align-items: flex-start;\n    }\n\n    .align-end {\n        align-items: flex-end;\n    }\n\n    .align-stretch {\n        align-items: stretch;\n    }\n\n    .justify-start {\n        justify-content: start;\n    }\n\n    .justify-center {\n        justify-content: center;\n    }\n\n    .justify-end {\n        justify-content: end;\n    }\n\n    .justify-between {\n        justify-content: space-between;\n    }\n\n    .justify-around {\n        justify-content: space-around;\n    }\n}\n\n/** Wrapper class */\n.ssc-wrapper {\n    padding: $skeleton-wrapper-padding;\n}\n\n/* Figures, Objects */\n.ssc-card {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: $skeleton-card-border-radius;\n    box-shadow: $skeleton-card-box-shadow;\n    background-color: $skeleton-card-background-color;\n}\n\n.ssc-circle {\n    border-radius: 50%;\n    width: $skeleton-circle-size;\n    height: $skeleton-circle-size;\n\n    @extend %ssc-animation;\n}\n\n.ssc-hr {\n    width: 100%;\n    height: $skeleton-hr-height;\n\n    @extend %ssc-animation;\n}\n\n.ssc-line {\n    border-radius: $skeleton-line-border-radius;\n    width: 100%;\n    height: $skeleton-line-height;\n\n    @extend %ssc-animation;\n}\n\n.ssc-head-line {\n    border-radius: $skeleton-line-border-radius;\n    width: 100%;\n    height: $skeleton-headline-height;\n\n    @extend %ssc-animation;\n}\n\n.ssc-square {\n    width: 100%;\n    height: $skeleton-square-height;\n\n    @extend %ssc-animation;\n}\n"]}