samagra-chatui/es/styles/var.less

The React library for Chatbot UI

@global-style: true;

// Color Palette
@brand-1: #ff5000;
@brand-2: #ff9000;
@brand-3: #fff9eb;
@black: #000;
@white: #fff;
@gray-1: #111;
@gray-2: #666;
@gray-3: #999;
@gray-4: #ccc;
@gray-5: #ddd;
@gray-6: #eee;
@gray-7: #f5f5f5;
@gray-8: #f8f8f8;

@blue: #39f;
@gray-dark: #333;
@green: #62d957;
@orange: #f70;
@red: #ff3634;
@yellow: #ffc233;
@yellow-light: #fff9db;

// Box Shadow
@shadow-1: 0 3px 4px 0 rgba(0, 0, 0, 0.04);
@shadow-2: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
@shadow-3: 0 6px 10px 0 rgba(0, 0, 0, 0.08);

// Gutter
@gutter: 12px;

// Body
@body-bg: @white;
@body-color: var(--gray-1);

// Links
@link-color: var(--blue);
@link-decoration: none;
// @link-hover-color: darken(@link-color, 15%);
@link-hover-decoration: underline;

// Typography
@font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
  Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';
@font-family-base: @font-family-sans-serif;

@font-size-root: 16px;
@font-size-base: 1rem;

@font-size-xxs: 1rem * (10px / @font-size-root);
@font-size-xs: 1rem * (12px / @font-size-root);
@font-size-sm: 1rem * (14px / @font-size-root);
@font-size-md: 1rem * (16px / @font-size-root);
@font-size-lg: 1rem * (18px / @font-size-root);

// @font-weight-lighter: lighter;
// @font-weight-light: 300;
@font-weight-normal: 400;
@font-weight-bold: 500;
// @font-weight-bolder: bolder;

@font-weight-base: @font-weight-normal;

@line-height-base: 1.5;
@line-height-lg: 1.75;
@line-height-sm: 1.25;

// Border
@border-width: 1px;
// @border-color: @gray-4;
@border-radius-sm: 0.25rem; // 4px
@border-radius-md: 0.75rem; // 12px
@border-radius-lg: 1.25rem; // 20px

// Avatar
@avatar-size: 36px;
@avatar-size-sm: 24px;
@avatar-size-lg: 40px;

@avatar-square-border-radius: 4px;

// Backdrop
@backdrop-bg: rgba(0, 0, 0, 0.7);

// Button
@btn-padding: 5px 12px;
@btn-border-radius: 999px;
@btn-bg: var(--white);
@btn-font-family: inherit;
@btn-font-size: @font-size-sm;
@btn-font-weight: @font-weight-normal;
@btn-line-height: @line-height-base;

@btn-hover-bg: rgba(0, 0, 0, 0.04);
@btn-active-bg: rgba(0, 0, 0, 0.08);

@btn-padding-sm: 4px 12px;
// @btn-border-radius-sm: 15px;
@btn-font-size-sm: @font-size-sm;

@btn-padding-lg: 7px 12px;
// @btn-border-radius-lg: 50px;
@btn-font-size-lg: @font-size-md;

@btn-block-spacing-y: 9px;

@btn-border-width: @border-width;
@btn-border-color: var(--gray-5);

@btn-transition: 0.15s ease-in-out;

@btn-primary-border-color: transparent;
@btn-primary-color: var(--white);
@btn-primary-bg: linear-gradient(90deg, var(--brand-2) 0%, var(--brand-1) 98%);
@btn-primary-hover-bg: @btn-primary-bg right/200%;
@btn-primary-active-bg: @btn-primary-bg right/400%;

// Composer
@composer-padding: 9px var(--gutter);

@composer-input-max-height: 132px;
@composer-input-min-height: 36px;
@composer-input-padding: 8px 12px;
@composer-input-border: 0;
@composer-input-bg: var(--white);
@composer-input-border-radius: 12px;
@composer-input-caret-color: var(--brand-2);
@composer-input-transition: border-color 0.15s ease-in-out;

// Input
@input-width: 100%;
@input-min-height: 24px;
@input-margin: 0;
@input-padding: 5px @gutter;
@input-border: 1px solid var(--gray-6);
@input-border-radius: 12px;
@input-bg: var(--white);
@input-font-family: inherit;
@input-font-size: @font-size-sm;
@input-line-height: 1.5;
@input-color: var(--gray-1);
@input-resize: none;

// List
@list-bg: var(--white);
@list-border-width: @border-width;
@list-border-color: var(--gray-7);
@list-border-radius: 2px;

@list-item-padding: 10px var(--gutter);
@list-item-color: var(--gray-1);
@list-item-font-size: 15px;
@list-item-line-height: 1.6;
@list-item-icon-color: var(--gray-3);

@list-item-hover-bg: @btn-hover-bg;

@list-item-active-bg: var(--gray-6);

// Navbar
@navbar-height: 44px;
@navbar-padding: 0 var(--gutter);
@navbar-bg: var(--gray-6);
@navbar-border-color: var(--gray-5);

@navbar-color: var(--gray-1);
@navbar-font-size: @font-size-lg;
@navbar-logo-height: @navbar-height - 8px;

// Notice
@notice-padding: @gutter;
@notice-border-radius: 12px;
@notice-bg: var(--white);
@notice-icon-color: var(--brand-1);

@notice-content-color: var(--gray-1);
@notice-content-font-size: 13px;

// Popover
@popover-border-radius: 6px;
@popover-bg: var(--white);
@popover-box-shadow: @modal-box-shadow;

// RateActions
@rate-btn-bg: var(--white);

// Bubble
@bubble-max-width: 680px;

@bubble-left-bg: var(--white);
@bubble-left-color: '';
@bubble-left-border-radius: 12px;

@bubble-right-bg: var(--brand-3);
@bubble-right-color: '';
@bubble-right-border-radius: 12px;

@bubble-left-gutter: 48px;
@bubble-right-gutter: 40px;

@bubble-text-padding: 12px;

@bubble-img-max-width: 200px;
@bubble-img-max-height: 200px;

@bubble-typing-padding: 8px 16px;

// Card
@card-padding: 12px;
@card-title-padding: @card-padding @card-padding 6px;
@card-title-font-size: @font-size-md;
@card-title-font-weight: @font-weight-bold;
@card-subtitle-font-size: @font-size-xxs;
@card-subtitle-color: var(--gray-3);
@card-border-width: @border-width;
@card-border-radius: 12px;
// @card-border-color: ;
@card-bg: var(--white);

@card-text-color: var(--gray-dark);

@card-size-xl: 300px;
@card-size-lg: 160px;
@card-size-md: 120px;
@card-size-sm: 104px;
@card-size-xs: 80px;

@card-fluid-width: calc(100% - 48px);
@card-max-width: 680px;
@card-min-width: 260px;

@card-btn-padding: 10px;
@card-btn-line-height: 1.5;
@card-btn-spacing-x: @gutter;
@card-btn-spacing-y: 0;
@card-btn-border-color: var(--gray-6);

@card-column-btn-bg: var(--white);
@card-column-btn-color: var(--gray-3);

@card-column-btn-primary-color: var(--brand-1);

@card-column-btn-hover-bg: var(--gray-7);
@card-column-btn-active-bg: var(--gray-7);

@card-column-btn-disabled-color: var(--gray-4);

// Carousel
@carousel-dots-bottom: 8px;

@carousel-dot-width: 8px;
@carousel-dot-height: @carousel-dot-width;
@carousel-dot-margin: 0 4px;
@carousel-dot-padding: 0;
@carousel-dot-border: 0;
@carousel-dot-border-radius: 50%;
@carousel-dot-bg: var(--gray-4);
@carousel-dot-transition: 0.3s;

// Icon
@icon-size-lg: 30px;

// IconButton
@icon-button-border: 0;
@icon-button-border-radius: 3px;
@icon-button-bg: transparent;
@icon-button-color: var(--gray-2);
@icon-button-size: 18px;

@icon-button-primary-color: var(--brand-2);

@icon-button-lg-border-radius: 6px;
@icon-button-lg-size: 24px;

@icon-button-disabled-border-color: var(--gray-6);
@icon-button-disabled-color: var(--gray-6);

// Modals
@modal-width: 320px;
@modal-border-radius: 12px;

@modal-bg: var(--white);
@modal-box-shadow: var(--shadow-3);

@modal-header-padding: @gutter;

@modal-title-margin: 0;
@modal-title-color: var(--gray-1);
@modal-title-font-size: @font-size-lg;
@modal-title-font-weight: @font-weight-bold;

@modal-close-padding: 0;
@modal-close-color: var(--gray-1);

@modal-footer-x-padding: @gutter;
@modal-btn-x-spacing: @gutter;

@modal-btn-y-padding: 12px;
@modal-btn-y-border-width: 1px;
@modal-btn-y-border-color: var(--gray-6);
@modal-btn-y-bg: var(--white);
@modal-btn-y-color: var(--gray-2);
@modal-btn-y-primary-color: var(--brand-1);

@modal-fade-transform: translate(0, -50px);
@modal-show-transform: none;
@modal-opacity: 0;
@modal-show-opacity: 1;
@modal-transition: transform 0.3s ease-out, opacity 0.15s linear;

// Popup
@popup-border-radius: 27px 27px 0 0;
@popup-bg: var(--white);

@popup-max-height: 70vh;
@popup-wide-width: 480px;

@popup-header-padding: 18px 40px 10px;

@popup-title-margin: @modal-title-margin;
@popup-title-color: @modal-title-color;
@popup-title-font-size: @modal-title-font-size;

@popup-close-color: @modal-close-color;

@popup-footer-padding: 9px @gutter;
@popup-btn-x-spacing: 9px;

// SendConfirm
@send-confirm-dialog-width: 480px;
@send-confirm-dialog-margin: 20px;
@send-confirm-inner-height: 320px;

// Progress bars
@progress-height: 2px;
@progress-bg: var(--gray-5);
@progress-border-radius: 100px;
@progress-bar-bg: var(--blue);
@progress-bar-transition: width 0.6s ease;

@progress-bar-bg-success: var(--green);
@progress-bar-bg-error: var(--red);

// QuickReplies
@quick-replies-padding: 9px var(--gutter);
@quick-replies-bg: var(--gray-7);

@quick-reply-color: var(--gray-1);
@quick-reply-font-size: @font-size-sm;

@quick-reply-hover-bg: var(--gray-6);

@quick-reply-dot-top: 0;
@quick-reply-dot-right: 0;
@quick-reply-dot-size: 8px;
@quick-reply-dot-bg: var(--red);

// ScrollView
@scroll-view-spacing-x: 6px;

// Tabs
@tabs-nav-link-padding: 4px 12px;
@tabs-nav-link-border: 0;
@tabs-nav-link-border-radius: 20px;
@tabs-nav-link-bg: transparent;
@tabs-nav-link-color: var(--gray-2);
@tabs-nav-link-font-size: @font-size-sm;
@tabs-nav-link-transition: 0.3s;

@tabs-nav-link-hover-color: var(--gray-1);

@tabs-nav-link-active-color: @tabs-nav-link-hover-color;

@tabs-nav-pointer-height: 3px;
@tabs-nav-pointer-bg: var(--btn-primary-bg);
@tabs-nav-pointer-border-radius: 2px;
@tabs-nav-pointer-transition: 0.3s;

// Tag
@tag-margin: 0 4px 0 0;
@tag-padding: 0 6px;
@tag-border-radius: 4px;
@tag-color: var(--brand-1);
@tag-font-size: 12px;

// Price
@price-font-size: @font-size-sm;

// Goods
@goods-img-width: 72px;
@goods-img-height: @goods-img-width;
@goods-img-border-radius: 12px;

@goods-padding: @gutter;
@goods-gap: 9px;
@goods-desc-color: var(--gray-3);
@goods-meta-color: var(--gray-3);
@goods-meta-font-size: @font-size-xxs;
@goods-border-width: 1px;
@goods-border-color: var(--gray-7);
@goods-count-color: var(--gray-3);
@goods-count-font-size: @font-size-xs;
@goods-unit-font-size: @font-size-xxs;
@goods-buy-btn-bg: var(--brand-1);
@goods-buy-btn-color: #fff;
@goods-buy-btn-padding: 2px;
@goods-detail-btn-min-width: 48px;
@goods-detail-btn-padding: 0 10px;
@goods-detail-btn-border-radius: 10px;
@goods-detail-btn-font-size: @font-size-xxs;
@goods-detail-btn-line-height: 18px;
@goods-status-color: var(--highlight-2);

// MessageList
@message-list-padding: var(--gutter);

@message-spacer-y: 12px;

// Toast
@toast-content-padding: 18px 24px;
@toast-content-border-radius: 12px;
@toast-content-bg: rgba(0, 0, 0, 0.7);

@toast-message-margin: 0;
@toast-message-color: var(--white);
@toast-message-font-size: 16px;

// Z-index
@zindex-backdrop: 100;
@zindex-modal: 100;
@zindex-popup: @zindex-modal;
@zindex-popover: 1030;
@zindex-toast: 200;
@zindex-tooltip: 200;
@zindex-recorder-toast: 100;

@zindex-navbar: 10;
@zindex-footer: 10;
@zindex-quick-replies: 110;
@zindex-rate-actions: 10;

@zindex-step-dot: 2;