UHasselt Component Library

App Colors 

<section class="colors">
    <h4 class="atm-heading">UHasselt Red</h4>
    <div class="colors">
        <div class="item">
            <div class="color color--red default"></div>
            <span class="color-description">default<br />#E03131</span>
        </div>
        <div class="item">
            <div class="color color--red mod-100"></div>
            <span class="color-description">#F9D8D6</span>
        </div>
        <div class="item">
            <div class="color color--red mod-200"></div>
            <span class="color-description">#F3B1AD</span>
        </div>
        <div class="item">
            <div class="color color--red mod-300"></div>
            <span class="color-description">#EC8A83</span>
        </div>
        <div class="item">
            <div class="color color--red mod-400"></div>
            <span class="color-description">#E6635A</span>
        </div>
        <div class="item">
            <div class="color color--red mod-500"></div>
            <span class="color-description">#E03131</span>
        </div>
        <div class="item">
            <div class="color color--red mod-600"></div>
            <span class="color-description">#A62219</span>
        </div>
        <div class="item">
            <div class="color color--red mod-700"></div>
            <span class="color-description">#771812</span>
        </div>
        <div class="item">
            <div class="color color--red mod-800"></div>
            <span class="color-description">#470F0B</span>
        </div>
        <div class="item">
            <div class="color color--red mod-900"></div>
            <span class="color-description">#180504</span>
        </div>
    </div>

    <h4 class="atm-heading">UHasselt Black</h4>
    <div class="colors">
        <div class="item">
            <div class="color color--black default"></div>
            <span class="color-description">default<br />#000000</span>
        </div>
        <div class="item">
            <div class="color color--black mod-100"></div>
            <span class="color-description">#E3E3E3</span>
        </div>
        <div class="item">
            <div class="color color--black mod-200"></div>
            <span class="color-description">#D4D4D4</span>
        </div>
        <div class="item">
            <div class="color color--black mod-300"></div>
            <span class="color-description">#BDBDBD</span>
        </div>
        <div class="item">
            <div class="color color--black mod-400"></div>
            <span class="color-description">#A5A5A5</span>
        </div>
        <div class="item">
            <div class="color color--black mod-500"></div>
            <span class="color-description">#8E8E8E</span>
        </div>
        <div class="item">
            <div class="color color--black mod-600"></div>
            <span class="color-description">#5E5E5E</span>
        </div>
        <div class="item">
            <div class="color color--black mod-700"></div>
            <span class="color-description">#474747</span>
        </div>
        <div class="item">
            <div class="color color--black mod-800"></div>
            <span class="color-description">#2F2F2F</span>
        </div>
        <div class="item">
            <div class="color color--black mod-900"></div>
            <span class="color-description">#181818</span>
        </div>
    </div>

    <h4 class="atm-heading">UHasselt Gray</h4>
    <div class="colors">
        <div class="item">
            <div class="color color--gray default"></div>
            <span class="color-description">default<br />#E3E3E3</span>
        </div>
        <div class="item">
            <div class="color color--gray mod-100"></div>
            <span class="color-description">#FBFBFB</span>
        </div>
        <div class="item">
            <div class="color color--gray mod-200"></div>
            <span class="color-description">#F9F9F9</span>
        </div>
        <div class="item">
            <div class="color color--gray mod-300"></div>
            <span class="color-description">#F7F7F7</span>
        </div>
        <div class="item">
            <div class="color color--gray mod-400"></div>
            <span class="color-description">#F6F6F6</span>
        </div>
        <div class="item">
            <div class="color color--gray mod-500"></div>
            <span class="color-description">#E3E3E3</span>
        </div>
        <div class="item">
            <div class="color color--gray mod-600"></div>
            <span class="color-description">#F2F2F2</span>
        </div>
        <div class="item">
            <div class="color color--gray mod-700"></div>
            <span class="color-description">#F0F0F0</span>
        </div>
        <div class="item">
            <div class="color color--gray mod-800"></div>
            <span class="color-description">#EEEEEE</span>
        </div>
        <div class="item">
            <div class="color color--gray mod-900"></div>
            <span class="color-description">#E3E3E3</span>
        </div>
    </div>
    </div>
 
<section class="colors">
    <h4 class="atm-heading">UHasselt Red</h4>
    <div class="colors">
        {{#each colors.red}}
            <div class="item">
                <div class="color color--{{ color }} {{#if modifier}}{{modifier}}{{/if}}"></div>
                <span class="color-description">{{{ description }}}</span>
            </div>
        {{/each}}
    </div>

    <h4 class="atm-heading">UHasselt Black</h4>
    <div class="colors">
        {{#each colors.black}}
            <div class="item">
                <div class="color color--{{ color }} {{#if modifier}}{{modifier}}{{/if}}"></div>
                <span class="color-description">{{{ description }}}</span>
            </div>
        {{/each}}
    </div>

    <h4 class="atm-heading">UHasselt Gray</h4>
    <div class="colors">
        {{#each colors.gray}}
            <div class="item">
                <div class="color color--{{ color }} {{#if modifier}}{{modifier}}{{/if}}"></div>
                <span class="color-description">{{{ description }}}</span>
            </div>
        {{/each}}
    </div>
</div>
 
{
  "colors": {
    "red": [
      {
        "color": "red",
        "modifier": "default",
        "description": "default<br/>#E03131"
      },
      {
        "color": "red",
        "modifier": "mod-100",
        "description": "#F9D8D6"
      },
      {
        "color": "red",
        "modifier": "mod-200",
        "description": "#F3B1AD"
      },
      {
        "color": "red",
        "modifier": "mod-300",
        "description": "#EC8A83"
      },
      {
        "color": "red",
        "modifier": "mod-400",
        "description": "#E6635A"
      },
      {
        "color": "red",
        "modifier": "mod-500",
        "description": "#E03131"
      },
      {
        "color": "red",
        "modifier": "mod-600",
        "description": "#A62219"
      },
      {
        "color": "red",
        "modifier": "mod-700",
        "description": "#771812"
      },
      {
        "color": "red",
        "modifier": "mod-800",
        "description": "#470F0B"
      },
      {
        "color": "red",
        "modifier": "mod-900",
        "description": "#180504"
      }
    ],
    "black": [
      {
        "color": "black",
        "modifier": "default",
        "description": "default<br/>#000000"
      },
      {
        "color": "black",
        "modifier": "mod-100",
        "description": "#E3E3E3"
      },
      {
        "color": "black",
        "modifier": "mod-200",
        "description": "#D4D4D4"
      },
      {
        "color": "black",
        "modifier": "mod-300",
        "description": "#BDBDBD"
      },
      {
        "color": "black",
        "modifier": "mod-400",
        "description": "#A5A5A5"
      },
      {
        "color": "black",
        "modifier": "mod-500",
        "description": "#8E8E8E"
      },
      {
        "color": "black",
        "modifier": "mod-600",
        "description": "#5E5E5E"
      },
      {
        "color": "black",
        "modifier": "mod-700",
        "description": "#474747"
      },
      {
        "color": "black",
        "modifier": "mod-800",
        "description": "#2F2F2F"
      },
      {
        "color": "black",
        "modifier": "mod-900",
        "description": "#181818"
      }
    ],
    "gray": [
      {
        "color": "gray",
        "modifier": "default",
        "description": "default<br/>#E3E3E3"
      },
      {
        "color": "gray",
        "modifier": "mod-100",
        "description": "#FBFBFB"
      },
      {
        "color": "gray",
        "modifier": "mod-200",
        "description": "#F9F9F9"
      },
      {
        "color": "gray",
        "modifier": "mod-300",
        "description": "#F7F7F7"
      },
      {
        "color": "gray",
        "modifier": "mod-400",
        "description": "#F6F6F6"
      },
      {
        "color": "gray",
        "modifier": "mod-500",
        "description": "#E3E3E3"
      },
      {
        "color": "gray",
        "modifier": "mod-600",
        "description": "#F2F2F2"
      },
      {
        "color": "gray",
        "modifier": "mod-700",
        "description": "#F0F0F0"
      },
      {
        "color": "gray",
        "modifier": "mod-800",
        "description": "#EEEEEE"
      },
      {
        "color": "gray",
        "modifier": "mod-900",
        "description": "#E3E3E3"
      }
    ]
  }
}
  • Content: 
    section.colors {
    @apply m-4;
}

.colors {
    @apply my-4;

    > .item {
        @apply mr-2 mb-2 inline-block text-center;

        > .color {
            @apply block w-14 h-14 rounded-full;

            &.color--red.default {
                @apply bg-red;
            }
            &.color--red.mod-100 {
                @apply bg-red-100;
            }
            &.color--red.mod-200 {
                @apply bg-red-200;
            }
            &.color--red.mod-300 {
                @apply bg-red-300;
            }
            &.color--red.mod-400 {
                @apply bg-red-400;
            }
            &.color--red.mod-500 {
                @apply bg-red-500;
            }
            &.color--red.mod-600 {
                @apply bg-red-600;
            }
            &.color--red.mod-700 {
                @apply bg-red-700;
            }
            &.color--red.mod-800 {
                @apply bg-red-800;
            }
            &.color--red.mod-900 {
                @apply bg-red-900;
            }

            &.color--black.default {
                @apply bg-black;
            }
            &.color--black.mod-100 {
                @apply bg-black-100;
            }
            &.color--black.mod-200 {
                @apply bg-black-200;
            }
            &.color--black.mod-300 {
                @apply bg-black-300;
            }
            &.color--black.mod-400 {
                @apply bg-black-400;
            }
            &.color--black.mod-500 {
                @apply bg-black-500;
            }
            &.color--black.mod-600 {
                @apply bg-black-600;
            }
            &.color--black.mod-700 {
                @apply bg-black-700;
            }
            &.color--black.mod-800 {
                @apply bg-black-800;
            }
            &.color--black.mod-900 {
                @apply bg-black-900;
            }

            &.color--gray.default {
                @apply bg-gray;
            }
            &.color--gray.mod-100 {
                @apply bg-gray-100;
            }
            &.color--gray.mod-200 {
                @apply bg-gray-200;
            }
            &.color--gray.mod-300 {
                @apply bg-gray-300;
            }
            &.color--gray.mod-400 {
                @apply bg-gray-400;
            }
            &.color--gray.mod-500 {
                @apply bg-gray-500;
            }
            &.color--gray.mod-600 {
                @apply bg-gray-600;
            }
            &.color--gray.mod-700 {
                @apply bg-gray-700;
            }
            &.color--gray.mod-800 {
                @apply bg-gray-800;
            }
            &.color--gray.mod-900 {
                @apply bg-gray-900;
            }
        }

        > .color-description {
            @apply text-sm;
        }
    }
}
  • URL: /components/raw/app-colors/app-colors.css
  • Filesystem Path: src\components\06-app-base\app-colors\app-colors.css
  • Size: 3 KB

No notes defined.