arrow_back
View code

<div class="cdt-container cdt-margin-top-xlg">
    <div class="cdt-alert cdt-alert--primary cdt-alert--visible cdt-padding-lg border-radius--md">
        <div class="flex align-items--center justify-content--between">
            <div class="flex align-items--center grow-1">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="25.31" viewBox="0 0 24 25.31"><circle cx="12" cy="12" r="12" fill="currentColor"/><text transform="translate(8.5 17.92)" font-size="20" fill="#fff" font-family="Baskerville-BoldItalic, Baskerville" font-weight="700" font-style="italic">i</text></svg>
                <div class="cdt-padding-left-md"><strong>Success: </strong>Here goes the success message.</div>
            </div>
            <div class="cdt-alert--close cdt-margin-left-md">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><line x1="2.67" y1="2.59" x2="21.37" y2="21.2" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><line x1="21.32" y1="2.55" x2="2.72" y2="21.25" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/></svg>
            </div>
            <div></div>
        </div>
    </div>
</div>
                        
Copy HTML

/*
 * File: _alert.scss
 * Location /src/scss/components
 * Alert component
 */

@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

@function alpha($color, $opacity) {
    $color: str-replace($color, 'var(');
    $color: str-replace($color, ')');
    @return hsla(var(#{$color+'-h'}), var(#{$color+'-s'}), var(#{$color+'-l'}), $opacity);
    @return $color;
}

.cdt {
    &-alert {
        position: absolute;
        width: 98%;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        border-radius: 3px;
        display: none;
        
        &--success {
            background: alpha(var(--success-color), 0.15);
            .icon {
                color: var(--success-color);
            }
        }
        &--primary {
            background: alpha(var(--primary-color), 0.15);
            .icon {
                color: var(--primary-color);
            }
        }
        &--error {
            background: alpha(var(--error-color), 0.15);
            .icon {
                color: var(--error-color);
            }
        }
        &--warning {
            background: alpha(var(--warning-color), 0.15);
            .icon {
                color: var(--warning-color);
            }
        }
        &--secondary {
            background: alpha(var(--secondary-color), 0.15);
            .icon {
                color: var(--secondary-color);
            }
        }
        &--visible {
            display: block;
        }
        &--close {
            display: inline-block;
            flex-shrink: 0;
            cursor: pointer;
        }
    }
}

:root {
    --icon-size: 24px;
}

.icon {
    fill: currentColor;
    height: var(--icon-size);
    width: var(--icon-size);
}

.flex {
    display: flex;
}

.justify-content--between {
    justify-content: space-between;
}

.align-items--center {
    align-items: center;
}

.border-radius {
    &--sm {
        border-radius: 3px;
    }
    &--md {
        border-radius: 5px;
    }
}
.grow-1 {
    flex-grow: 1;
}
                        
Copy SCSS

/*
 * File: alert.js
 * Location /src/js/components
 * Alert component
*/

(function() {
    document.querySelectorAll('.cdt-alert').forEach(alert => {
        alert.querySelector('.cdt-alert--close').addEventListener('click', e => {
            alert.classList.remove('cdt-alert--visible');
        })
    })
})();
Copy JS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.