Newer
Older
pre-www / src / assets / css / blocks / stats.css
@EcosistemaWebIuav EcosistemaWebIuav on 26 Feb 1 KB feat: pagina chi siamo, blocco stats
.block-stats{
    --block-stats-bg: theme(colors.white);
    --block-stats-color: theme(colors.black);
    --block-stats-row-border: theme(colors.black);
    /* --block-stats-bg: #0066FF;
    --block-stats-color: #fff; */
    /* --block-stats-row-border: #fff; */
    background: var(--block-stats-bg);
    color: var(--block-stats-color);
    &-row{
        border-top: 1px solid var(--block-stats-row-border);
        @apply grid gap-x-[calc(var(--grid-gutter)*2)] lg:grid-cols-4 pt-sm;
        &:not(:last-child){
            @apply pb-lg;
        }
        &__title{
            @apply font-bold text-size-md;
        }
    }
    &__data{
        grid-column: span 3;
        @apply mt-sm lg:mt-0;
    }
    &__subrow{
        @apply grid gap-x-[calc(var(--grid-gutter)*2)] md:grid-cols-3 pt-sm;
        &:first-child{
            @apply pt-0;
        }
        &:first-child:last-child{
            @apply pb-md md:pb-lg;
        }
        + .block-stats__subrow{
            @screen lg{
                grid-column: 2/5;
            }
            .block-stats-column{
                border-top: 1px solid var(--block-stats-row-border);
                @apply pt-base;
            }
        }
    }
    &-column{
        @apply pb-xs;
        &:not(:last-child){
            border-bottom: 1px solid var(--block-stats-row-border);
        }
        &__number{
            @apply block text-size-3xl;
        }
        &__content{
            @apply text-size-md;
        }
        &:not(:first-child){
            .block-stats-column{
                &__number{
                    @apply text-size-lg;
                }
                &__content{
                    @apply text-size-sm;
                }        
            }
        }
    }
}