<div class="color-circle-icon color-circle-icon--network">
    <span class="color-circle-icon__icon"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="24" viewBox="0 0 26 24">
    <path fill="#FFF" fill-rule="nonzero" d="M23 5a1 1 0 0 1-1.993.117L21 5V1a1 1 0 0 1 1.993-.117L23 1v1h3v22H0V2h3V1A1 1 0 0 1 4.993.883L5 1v4a1 1 0 0 1-1.993.117L3 5V4H2v18h22V4h-1v1zM5 19v2H3v-2h2zm3 0v2H6v-2h2zm3 0v2H9v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3-3v2h-2v-2h2zM5 16v2H3v-2h2zm3 0v2H6v-2h2zm3 0v2H9v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm-9-3v2H9v-2h2zm-6 0v2H3v-2h2zm3 0v2H6v-2h2zm6 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zM5 10v2H3v-2h2zm3 0v2H6v-2h2zm3 0v2H9v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm0-3v2h-2V7h2zM11 7v2H9V7h2zm3 0v2h-2V7h2zm3 0v2h-2V7h2zm3 0v2h-2V7h2zm0-5v2H6V2h14z"/>
</svg>
</span>
</div>
<div class="color-circle-icon color-circle-icon--{{ siteUnit }}">
    {% if icon %}
        <span class="color-circle-icon__icon">{% include 'bits/icons/'~ icon ~'.twig' %}</span>
    {% endif %}
</div>
{
  "siteUnit": "network",
  "departmentName": "Network",
  "background": "light",
  "name": "Edit",
  "icon": "calendar"
}
  • Content:
    .color-circle-icon
        --backgroundColor illiniOrange
        --iconColor white
    
        &--arch
            --backgroundColor industrialBlue
            --borderColor transparent
            --iconColor white
    
        &--art
            --backgroundColor archesBlue
            --borderColor transparent
            --iconColor white
    
        &--college
            --backgroundColor cloud
            --borderColor illiniOrange
            --iconColor illiniBlue
    
        &--dance
            --backgroundColor archesBlue
            --borderColor transparent
            --iconColor white
    
        &--durp
            --backgroundColor illiniOrange
            --borderColor transparent
            --iconColor white
    
        &--landarch
            --backgroundColor cloud
            --borderColor illiniOrange
            --iconColor illiniBlue
    
        &--theatre
            --backgroundColor illiniOrange
            --borderColor transparent
            --iconColor illiniBlue
    
        &--music
            --backgroundColor transparent
            --borderColor illiniOrange
            --iconColor illiniBlue
    
        align-items center
        background-color var(--backgroundColor)
        border 2px solid var(--borderColor)
        border-radius 50%
        display flex
        justify-content center
        height 48px
        width 48px
    
        &__icon
            display flex
    
        &__icon > svg > path
            fill var(--iconColor)
    
    
  • URL: /components/raw/color-circle-icon/color-circle-icon.styl
  • Filesystem Path: components/bits/color-circle-icon/color-circle-icon.styl
  • Size: 1.3 KB

There are no notes for this item.