<div class="message ">
    This is simple info message. Have a nice day! If you believe it is the right one you can ignore this notice.
</div>
<div class="message {{ class }}" {{{ attributes }}} >
    {{ text }}
</div>
{
  "class": "",
  "attributes": "",
  "text": "This is simple info message. Have a nice day! If you believe it is the right one you can ignore this notice."
}
  • Content:
    $message__padding               : $spacer $spacer--medium !default;
    $message__padding\@medium       : $spacer $spacer--extra-large !default;
    $message__margin                : $spacer auto !default;
    $message__font-size             : $font-size-small !default;
    $message__transition            : $transition-base !default;
    $message__background            : $white !default;
    $message__background--success   : $white !default;
    $message__background--error     : $white !default;
    $message__color                 : $color-primary !default;
    $message__color--success        : $color-primary !default;
    $message__color--error          : $color-primary !default;
    $message__border-width          : 1px 1px $spacer--extra-small 1px !default;
    $message__border-color          : $border-color-base $border-color-base $color-info $border-color-base !default;
    $message__border-style          : solid !default;
    $message__border-color--success : $border-color-base $border-color-base $color-success $border-color-base !default;
    $message__border-color--error   : $border-color-base $border-color-base $color-error $border-color-base !default;
    $message__border-radius         : 0 !default;
    $message__icon-spacer           : $spacer--semi-medium !default;
    $message__icon-width            : $spacer--semi-medium + $spacer--small !default;
    $message__icon-order            : -1 !default;
    $message__icon-margin           : 0 $spacer 0 0 !default;
    $message__icon-fill             : $color-info !default;
    $message__icon-fill--success    : $color-success !default;
    $message__icon-fill--error      : $color-error !default;
    $message__icon-bg-image         : svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"><path fill="#{$message__icon-fill}" d="M7 .333A6.67 6.67 0 0 0 .333 7 6.67 6.67 0 0 0 7 13.667 6.67 6.67 0 0 0 13.667 7 6.67 6.67 0 0 0 7 .333zm.667 10H6.333V9h1.334v1.333zm0-2.666H6.333v-4h1.334v4z"/></svg>') !default;
    $message__icon-bg-image--success: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"><path fill="#{$message__icon-fill--success}" d="M7 .333A6.67 6.67 0 0 0 .333 7 6.67 6.67 0 0 0 7 13.667 6.67 6.67 0 0 0 13.667 7 6.67 6.67 0 0 0 7 .333zm-1.333 10L2.333 7l.94-.94 2.394 2.387 5.06-5.06.94.946-6 6z"/></svg>') !default;
    $message__icon-bg-image--eror   : svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"><path fill="#{$message__icon-fill--error}" d="M.667 13h14.666L8 .333.667 13zm8-2H7.333V9.667h1.334V11zm0-2.667H7.333V5.667h1.334v2.666z"/></svg>') !default;
    
  • URL: /components/raw/message/_message-variables.scss
  • Filesystem Path: build/components/Molecules/message/_message-variables.scss
  • Size: 2.5 KB
  • Content:
    @import 'message-variables';
    
    .message {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: $max-content-width;
        padding: $message__padding;
        margin: $message__margin;
        background-color: $message__background;
        border-color: $message__border-color;
        border-width: $message__border-width;
        border-style: $message__border-style;
        border-radius: $message__border-radius;
        color: $message__color;
        font-size: $message__font-size;
        transition: $message__transition;
    
        &[style="display: block;"] {
            display: flex !important; // sass-lint:disable-line no-important
        }
    
        p {
            color: $message__color;
            font-size: $message__font-size;
            line-height: inherit;
            margin: 0;
        }
    
        @include mq($screen-m) {
            padding: $message__padding\@medium;
        }
    
        &:after {
            content: '';
            position: relative;
            order: $message__icon-order;
            height: $message__icon-spacer;
            width: $message__icon-width;
            min-width: $message__icon-width;
            margin: $message__icon-margin;
            background-image: $message__icon-bg-image;
            background-repeat: no-repeat;
            background-size: $message__icon-spacer;
        }
    
        &--success {
            background-color: $message__background--success;
            border-color: $message__border-color--success;
            color: $message__color--success;
    
            &:after {
                background-image: $message__icon-bg-image--success;
            }
        }
    
        &--error {
            background-color: $message__background--error;
            border-color: $message__border-color--error;
            color: $message__color--error;
    
            &:after {
                background-image: $message__icon-bg-image--eror;
            }
        }
    
        .link {
            text-decoration: underline;
        }
    }
    
    //extend messages generated in backend or 3rd party modules
    .message-success {
        @extend .message--success;
    }
    
    .message-error {
        @extend .message--error;
    }
    
  • URL: /components/raw/message/_message.scss
  • Filesystem Path: build/components/Molecules/message/_message.scss
  • Size: 2.1 KB

No notes defined.