@ubertheme/base/src/components/Skeleton/skeleton.css

UB PWA Base module handles the base components and functions for all PWA modules at Ubertheme.

/*
    Table Content
    1. @Title
    2. @Mobile
    3. @Desktop
*/
:root {
    --skeleton-light-color: 242, 242, 242; /* #f2f2f2; */
    --skeleton-gray-color: 230, 230, 230; /* #e6e6e6; */
}

.root {
    display: inline-block;
    margin: 15px;
    position: relative;
    text-align: center;
}

/* @Title */
.title {
    animation: shine-lines 1.4s ease infinite;
    background-color: rgb(var(--skeleton-light-color));
    background-image: linear-gradient(90deg,
            rgb(var(--skeleton-light-color)) 25%,
            rgba(var(--skeleton-gray-color)) 37%,
            rgb(var(--skeleton-light-color)) 63%);
    background-size: 400% 100%;
    border-radius: 2px;
    display: inline-block;
    height: 20px;
    vertical-align: middle;
    width: 80px;
}

/* @Mobile */
.itemMobile {
    border-bottom: 1px solid rgba(var(--base-black-color), 0.05);
    float: left;
    height: 3.5rem;
    line-height: 3.5rem;
    text-align: left;
    width: 100%;
}

.itemMobile .title-0 {
    width: 3.125rem;
}

.itemMobile .title-1 {
    width: 7.5rem;
}

.itemMobile .title-2 {
    width: 11.25rem;
}

.itemMobile .title-3 {
    width: 6.25rem;
}

.itemMobile .title-4 {
    width: 4.375rem;
}

/* @Desktop */
.itemDesktop {
    composes: root;
}

/* For UB PWA Slider */
.itemSlider {}

.itemSlider .item {
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 2px;
    box-shadow: 0 0 1px -1px rgba(0, 0, 0, 0.14);
    height: 220px;
    margin: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: center;
    width: 375px;
}

.fullWidth .item {
    max-width: 1240px;
    width: 100%;
}

@media screen and (max-width: 320px) {
    .itemSlider div.item {
        width: 256px;
    }
    .fullWidth div.item {
        width: 100%;
    }
}

@media screen and (max-width: 479px) {
    .itemSlider .item {
        width: 311px;
    }
    .fullWidth .item {
        width: 100%;
    }
}

.itemSlider span {
    animation: shine-lines 1.4s ease infinite;
    background-color: rgb(var(--skeleton-light-color));
    background-image: linear-gradient(90deg,
            rgb(var(--skeleton-light-color)) 25%,
            rgba(var(--skeleton-gray-color)) 37%,
            rgb(var(--skeleton-light-color)) 63%);
    background-size: 400% 100%;
    display: inline-block;
    position: absolute;
    vertical-align: middle;
}

.itemSlider .title {
    bottom: 60px;
    left: 10px;
    position: absolute;
    width: 80px;
}

.itemSlider .desc {
    border-radius: 2px;
    bottom: 10px;
    height: 40px;
    left: 10px;
    width: 160px;
}

.itemSlider .next {
    border-radius: 100%;
    height: 20px;
    left: 10px;
    margin-top: -10px;
    top: 50%;
    width: 20px;
}

.itemSlider .pre {
    border-radius: 100%;
    height: 20px;
    margin-top: -10px;
    right: 10px;
    top: 50%;
    width: 20px;
}

/* Keyframe effect */
@keyframes shine-lines {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}