Kistenkoning components for Magento 2

Chat 

<section class="chat">
    <ul class="chat__list">
        <li class="chat__message chat__message--incoming">
            <div class="chat__username">
                Admin
            </div>
            <div class="chat__message-content">
                <p class="chat__message-text">
                    Please, provide us with additional details and attach photos if possible so that we could approve your request.
                </p>
                <div class="chat__message-date">
                    2019-08-20 13:05:27
                </div>
            </div>
        </li>
        <li class="chat__message chat__message--sent">
            <div class="chat__username">
                User
            </div>
            <div class="chat__message-content chat__message-content--sent">
                <p class="chat__message-text">
                    Hello. I want to return this item because of the material, it is not as good as I expected!
                </p>
                <div class="chat__message-date">
                    2019-08-20 13:06:33
                </div>
            </div>
        </li>
    </ul>
    <div class="chat__control">
        <div class="chat__message-field">
            <div class="input ">
                <label class="
            label
            input__label
                label--hidden
            
        " for="field-id">
                    Label text
                </label>

                <textarea class="input__field input__field--textarea chat__textarea" id="field-id" name="field-name" placeholder="Message"></textarea>
            </div>

        </div>
        <div class="chat__message-send">
            <button class="button " type="button" aria-label="button">
                Send
            </button>

        </div>
    </div>
    <div class="file-upload file-upload--native button-extend">
        <div class="file-upload__wrapper" data-role="send-files">
            <label tabindex="0" for="file">
                <input id="file" type="file" name="file" accept=".pdf,.doc,.png" data-size="1024" />
                Your file (pdf, doc, max 1 MB)
            </label>
        </div>
        <div class="file-upload__attachments">
            <div data-role="attached-item">
                <span>
                    some-file.jpg
                </span>
                <button type="button" data-role="delete-button">
                    <span>
                        Delete
                    </span>
                </button>
            </div>
            <div data-role="attached-item">
                <span>
                    some-file.jpg
                </span>
                <button type="button" data-role="delete-button">
                    <span>
                        Delete
                    </span>
                </button>
            </div>
        </div>
    </div>

</section>
 
<section class="chat">
    <ul class="chat__list">
        <li class="chat__message chat__message--incoming">
            <div class="chat__username">
                {{ message.incoming.username }}
            </div>
            <div class="chat__message-content">
                <p class="chat__message-text">
                    {{ message.incoming.text }}
                </p>
                <div class="chat__message-date">
                    {{ message.incoming.date }}
                </div>
            </div>
        </li>
        <li class="chat__message chat__message--sent">
            <div class="chat__username">
                {{ message.sent.username }}
            </div>
            <div class="chat__message-content chat__message-content--sent">
                <p class="chat__message-text">
                    {{ message.sent.text }}
                </p>
                <div class="chat__message-date">
                    {{ message.sent.date }}
                </div>
            </div>
        </li>
    </ul>
    <div class="chat__control">
        <div class="chat__message-field">
            {{ render '@input--textarea' input merge=true }}
        </div>
        <div class="chat__message-send">
            {{ render '@button' button merge=true }}
        </div>
    </div>
    {{ render '@file-upload--native' }}
</section>
 
{
  "message": {
    "incoming": {
      "username": "Admin",
      "text": "Please, provide us with additional details and attach photos if possible so that we could approve your request.",
      "date": "2019-08-20 13:05:27"
    },
    "sent": {
      "username": "User",
      "text": "Hello. I want to return this item because of the material, it is not as good as I expected!",
      "date": "2019-08-20 13:06:33"
    }
  },
  "input": {
    "label": {
      "hidden": true
    },
    "field": {
      "class": "chat__textarea",
      "placeholder": "Message"
    }
  },
  "button": {
    "text": "Send"
  }
}
  • Content: 
    $chat__padding                          : $spacer--semi-medium !default;
$chat__background                       : $gray-lighter !default;

$chat__list-margin                      : 0 0 $spacer--medium !default;
$chat__list-padding                     : 0 !default;
$chat__list-max-height                  : 300px !default;
$chat__list-overflow-y                  : auto !default;

$chat__message-padding                  : $spacer $spacer--medium !default;
$chat__message-text-align--sent         : right !default;
$chat__message-align-self--incoming     : flex-start !default;

$chat__message-content-padding          : $spacer--medium !default;
$chat__message-content-background       : $gray !default;
$chat__message-content-background--sent : $gray-light !default;
$chat__message-content-border-radius    : 10px !default;

$chat__message-text-font-size           : $font-size-base !default;

$chat__message-date-text-align          : right !default;
$chat__message-date-color               : $gray-dark !default;
$chat__message-date-font-size           : $font-size-small !default;

$chat__message-send-margin              : 0 0 $spacer--medium !default;

$chat__message-field-width              : 100% !default;
$chat__message-field-margin             : 0 $spacer 0 0 !default;

$chat__textarea-min-height              : 48px !default;
$chat__username-color                   : $gray-dark !default;
  • URL: /components/raw/chat/_chat-variables.scss
  • Filesystem Path: build/components/Organisms/chat/_chat-variables.scss
  • Size: 1.4 KB
  • Content: 
    @import 'chat-variables';

.chat {
    padding: $chat__padding;
    background: $chat__background;

    &__list {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin: $chat__list-margin;
        padding: $chat__list-padding;
        max-height: $chat__list-max-height;
        overflow-y: $chat__list-overflow-y;
        list-style: none;
    }

    &__message {
        padding: $chat__message-padding;

        &--sent {
            text-align: $chat__message-text-align--sent;
        }

        &--incoming {
            align-self: $chat__message-align-self--incoming;
        }
    }

    &__message-content {
        padding: $chat__message-content-padding;
        background:  $chat__message-content-background;
        border-radius: $chat__message-content-border-radius;

        &--sent {
            background: $chat__message-content-background--sent;
        }
    }

    &__message-text {
        font-size: $chat__message-text-font-size;
    }

    &__message-date {
        text-align:  $chat__message-date-text-align;
        color: $chat__message-date-color;
        font-size:  $chat__message-date-font-size;
    }

    &__message-send {
        margin: $chat__message-send-margin;
    }

    &__message-field {
        width: $chat__message-field-width;
        margin:  $chat__message-field-margin;
    }

    &__control {
        display: flex;
        align-items: center;
    }

    &__textarea {
        min-height: $chat__textarea-min-height;
    }

    &__username {
        color: $chat__username-color;
    }
}
  • URL: /components/raw/chat/_chat.scss
  • Filesystem Path: build/components/Organisms/chat/_chat.scss
  • Size: 1.6 KB

There are no notes for this item.