skeleton-screen-css
Version:
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.
1 lines • 5.95 kB
Source Map (JSON)
{"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA,cAAA;AA0BA,cAAA;AACA;EACI;IACI,oCAAA;YAAA,4BAAA;;EAEJ;IACI,mCAAA;YAAA,2BAAA;;;AALR;EACI;IACI,oCAAA;YAAA,4BAAA;;EAEJ;IACI,mCAAA;YAAA,2BAAA;;;AAIR,sBAAA;AACA;EACI,cAAA;EACA,qCAtCqB;EAuCrB,kBAAA;EACA,gBAAA;;AAEA;EACI,WAAA;EACA,4CAAA;UAAA,oCAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;EACA,oCAAA;UAAA,4BAAA;EACA,UAAA;EACA,uFAAA;;;AAIR,gBAAA;AACA;EACI,gBAAA;EACA,yBAAA;UAAA,iBAAA;;;AAGJ,qBAAA;AAEI;EACI,mBA7DmB;;AAgEvB;EACI,gBAjEmB;;AAoEvB;EACI,kBArEmB;;AAwEvB;EACI,iBAzEmB;;AA4EvB;EACI,kBAzEgB;;AA4EpB;EACI,eA7EgB;;AAgFpB;EACI,iBAjFgB;;AAoFpB;EACI,gBArFgB;;AAwFpB;EACI,UAAA;;AAGJ;EACI,UAAA;;AAGJ;EACI,UAAA;;AAGJ;EACI,UAAA;;AAGJ;EACI,UAAA;;AAGJ;EACI,UAAA;;AAGJ;EACI,UAAA;;AAGJ;EACI,UAAA;;AAGJ;EACI,UAAA;;AAGJ;EACI,WAAA;;AAGJ;EACI,aAAA;;AAGJ;EACI,oBAAA;;AAGJ;EACI,sBAAA;;AAGJ;EACI,8BAAA;;AAGJ;EACI,mBAAA;;AAGJ;EACI,2BAAA;;AAGJ;EACI,mBAAA;;AAGJ;EACI,uBAAA;;AAGJ;EACI,qBAAA;;AAGJ;EACI,oBAAA;;AAGJ;EACI,sBAAA;;AAGJ;EACI,uBAAA;;AAGJ;EACI,oBAAA;;AAGJ;EACI,8BAAA;;AAGJ;EACI,6BAAA;;;AAIR,mBAAA;AACA;EACI,aAnMuB;;;AAsM3B,qBAAA;AACA;EACI,cAAA;EACA,WAAA;EACA,YAAA;EACA,kBAnM0B;EAoM1B,6CAtMuB;EAuMvB,yBAtM6B;;;AAyMjC;EACI,kBAAA;EACA,WAxMmB;EAyMnB,YAzMmB;;;AA8MvB;EACI,WAAA;EACA,WA9MiB;;;AAmNrB;EACI,mBAlN0B;EAmN1B,WAAA;EACA,YAnNmB;;;AAwNvB;EACI,mBA1N0B;EA2N1B,WAAA;EACA,YAzNuB;;;AA8N3B;EACI,WAAA;EACA,aA9NqB","file":"index.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"]}