Alpaca components for Magento 2

Message: Default 

<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.