Newer
Older
pre-www / src / assets / css / blocks / files-list.css
.block-files-list{
    &__inner{
        > p{
            @apply font-bold mb-4;
        }
        ul{
            @apply flex flex-wrap gap-3.75;
            li{
                a{
                    min-height: 2.25rem;
                    @apply relative inline-flex items-center bg-grey-100 pl-10 pr-3 py-1.5;
                    &::before{
                        content: '';
                        background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m24.852 19.834-6.354 6.353-6.354-6.353.708-.708 5.146 5.147V9.5h1v14.773l5.146-5.147.708.708ZM27 28H10v-1h17v1Z' fill='%23000'/%3E%3C/svg%3E");
                        @apply w-9 aspect-square bg-no-repeat bg-center absolute top-0 left-0;
                    }
                }
                &:hover{
                    a{
                        @apply bg-black text-white;
                        &::before{
                            background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m24.852 19.834-6.354 6.353-6.354-6.353.708-.708 5.146 5.147V9.5h1v14.773l5.146-5.147.708.708ZM27 28H10v-1h17v1Z' fill='%23fff'/%3E%3C/svg%3E");
                        }
                    }
                }
            }
        }
    }
    @at-root body.has-primary-bg{
        .block-files-list{
            &__inner{
                ul{
                    li{
                        a{
                            @apply bg-yellow-200;
                        }
                        &:hover{
                            a{
                                @apply bg-black text-yellow-100;
                                &::before{
                                    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m24.852 19.834-6.354 6.353-6.354-6.353.708-.708 5.146 5.147V9.5h1v14.773l5.146-5.147.708.708ZM27 28H10v-1h17v1Z' fill='%23FFCC00'/%3E%3C/svg%3E");
                                }        
                            }
                        }
                    }
                }
            }
        }
    }
}