UCI

Star

<div class="star-wrapper">
    <span class="star
"></span>
</div>
<div class="star-wrapper">
    <span class="star
        {{#if isHollow}}
            star_hollow
        {{/if}}"
    ></span>
</div>
/* No context defined. */
  • Content:
    .star {
        position: relative;
        display: block;
        width: 0;
        height: 0;
        margin-left: 0.9em;
        margin-right: 0.9em;
        margin-bottom: 1.2em;
        border-right: 0.3em solid transparent;
        border-bottom: 0.7em solid var(--color-accent);
        border-left: 0.3em solid transparent;
    
        /* Controls the size of a star */
        font-size: 7px;
    
        &::before,
        &::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            top: 0.6em;
            left: -1em;
            border-right: 1em solid transparent;
            border-bottom: 0.7em solid var(--color-accent);
            border-left: 1em solid transparent;
            transform: rotate(-35deg);
        }
    
        &::after {
            transform: rotate(35deg);
        }
    
        &_hollow {
            border-bottom-color: var(--color-accent-light);
    
            &::before,
            &::after {
                border-bottom-color: var(--color-accent-light);
            }
        }
    
        &-wrapper {
            margin-right: 10px;
    
            &:last-child {
                margin-right: 0;
            }
        }
    }
    
  • URL: /components/raw/star/star.css
  • Filesystem Path: src/01-atoms/star/star.css
  • Size: 1.1 KB

No notes defined.