UHasselt Component Library

Notifiction 

<a href="#" class="notification ">
    <span class="icon fal fa-bell   " aria-hidden="true"></span>
</a>
 
<{{element}}
    {{#if title}}title="{{title}}"{{/if}}
    {{#if href}}href="{{href}}"{{/if}}
    {{#if target}}target="{{target}}"{{/if}}
    {{#if id}}id="{{id}}"{{/if}}
    {{#if isDisabled}}disabled{{/if}}
    class="notification {{#if modifier}}notification-{{modifier}}{{/if}}"
>
    {{#if icon}}
        {{ render '@icon' icon }}
    {{/if}}
</{{element}}>
 
{
  "element": "a",
  "title": "",
  "target": "",
  "href": "#",
  "id": "",
  "icon": {
    "style": "fal",
    "icon": "fa-bell"
  },
  "isDisabled": false
}
  • Content: 
    .notification {
    display: inline-block;
    position: relative;

    .icon {
        font-size: 25px;
        transform-origin: 50% 4px;
        transition: color 50ms;
    }

    &:after {
        @apply bg-red;

        content: '';
        display: block;
        position: absolute;
        width: 12px;
        height: 12px;
        top: 0;
        right: 0;
        border-radius: 50%;
    }

    &:hover {
        .icon {
            @apply text-red;

            animation: ring 4s 0s ease-in-out infinite;
        }
    }
}

@keyframes ring {
    0% {
        transform: rotate(0);
    }
    1% {
        transform: rotate(30deg);
    }
    3% {
        transform: rotate(-28deg);
    }
    5% {
        transform: rotate(34deg);
    }
    7% {
        transform: rotate(-32deg);
    }
    9% {
        transform: rotate(30deg);
    }
    11% {
        transform: rotate(-28deg);
    }
    13% {
        transform: rotate(26deg);
    }
    15% {
        transform: rotate(-24deg);
    }
    17% {
        transform: rotate(22deg);
    }
    19% {
        transform: rotate(-20deg);
    }
    21% {
        transform: rotate(18deg);
    }
    23% {
        transform: rotate(-16deg);
    }
    25% {
        transform: rotate(14deg);
    }
    27% {
        transform: rotate(-12deg);
    }
    29% {
        transform: rotate(10deg);
    }
    31% {
        transform: rotate(-8deg);
    }
    33% {
        transform: rotate(6deg);
    }
    35% {
        transform: rotate(-4deg);
    }
    37% {
        transform: rotate(2deg);
    }
    39% {
        transform: rotate(-1deg);
    }
    41% {
        transform: rotate(1deg);
    }

    43% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(0);
    }
}
  • URL: /components/raw/notification/notification.css
  • Filesystem Path: src\components\02-atoms\notification\notification.css
  • Size: 1.9 KB

No notes defined.