FAA Pattern Library - Network

Color Circle Icon: Default 

<div class="color-circle-icon color-circle-icon--network">
    <span class="color-circle-icon__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="#FFF" fill-rule="evenodd" d="M13 2a1 1 0 0 1 .117 1.993L13 4H2v18h18V11a1 1 0 0 1 1.993-.117L22 11v13H0V2h13zm5 2l2 2L8.5 17.5 5 19l1.5-3.5L18 4zm4-4l2 2-3 3-2-2 3-3z"/>
</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": "edit"
}
  • 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.