easemob-chat-uikit 1.0.0-beta

package/style/themes/default.scss

@@ -0,0 +1,286 @@
+@import '../color/color.scss';
+
+$theme: light;
+// The prefix to use on all css classes from Chat UI.
+$cui-prefix: cui;
+
+
+$white: #fff;
+$black: #000;
+$font-color: $gray-3;
+$title-color: $gray-1;
+// Base background color for most components
+$component-background: #fff;
+
+$heading-color: rgba(0, 0, 0, 0.85);
+$text-color-secondary: rgba(0, 0, 0, 0.45);
+$icon-color-hover: rgba(0, 0, 0, 0.75);
+// height rules
+$height-base: 36px;
+$height-lg: 48px;
+$height-sm: 28px;
+
+// vertical margins
+$margin-lg: 24px; // containers
+$margin-md: 16px; // small containers and buttons
+$margin-sm: 12px; // Form controls and items
+$margin-xs: 8px; // small items
+$margin-xss: 4px; // more small
+
+// vertical paddings
+$padding-lg: 24px; // containers
+$padding-md: 20px; // small containers and buttons
+$padding-sm: 16px; // Form controls and items
+$padding-s: 12px; // small items
+$padding-xs: 8px; // small items
+$padding-xss: 4px; // more small
+// font
+$font-size-base: 14px;
+$font-size-lg: $font-size-base + 2px;
+$font-size-sm: 12px;
+
+$line-height-base: 1.5715;
+
+$text-color: fade($black, 85%);
+
+// Media queries breakpoints
+// @screen-xs and @screen-xs-min is not used in Grid
+// smallest break point is @screen-md
+$screen-xs: 480px;
+$screen-xs-min: $screen-xs;
+// 👆 Extra small screen / phone
+
+// 👇 Small screen / tablet
+$screen-sm: 576px;
+$screen-sm-min: $screen-sm;
+
+// Medium screen / desktop
+$screen-md: 768px;
+$screen-md-min: $screen-md;
+
+// Large screen / wide desktop
+$screen-lg: 992px;
+$screen-lg-min: $screen-lg;
+
+// Extra large screen / full hd
+$screen-xl: 1200px;
+$screen-xl-min: $screen-xl;
+
+// Extra extra large screen / large desktop
+$screen-xxl: 1600px;
+$screen-xxl-min: $screen-xxl;
+
+// provide a maximum
+$screen-xs-max: ($screen-sm-min - 1px);
+$screen-sm-max: ($screen-md-min - 1px);
+$screen-md-max: ($screen-lg-min - 1px);
+$screen-lg-max: ($screen-xl-min - 1px);
+$screen-xl-max: ($screen-xxl-min - 1px);
+
+// -------- Colors -----------
+// >>> Primary
+$primary-color: $blue-6;
+$highlight-color: $red-5;
+// $primary-color-hover: color(~`colorPalette('@{primary-color}', 5) `);
+// $primary-color-active: color(~`colorPalette('@{primary-color}', 7) `);
+// $primary-color-outline: fade(@primary-color, @outline-fade);
+
+// Shadow
+$shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
+  0 -12px 48px 16px rgba(0, 0, 0, 0.03);
+$shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
+  0 12px 48px 16px rgba(0, 0, 0, 0.03);
+$shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05),
+  -12px 0 48px 16px rgba(0, 0, 0, 0.03);
+$shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),
+  12px 0 48px 16px rgba(0, 0, 0, 0.03);
+$shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+  0 9px 28px 8px rgba(0, 0, 0, 0.05);
+$shadow-color: rgba(0, 0, 0, 0.15);
+$shadow-color-inverse: $component-background;
+$box-shadow-base: $shadow-2;
+
+// Animation
+$ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
+$ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
+$ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+$ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+$ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+$ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
+$ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
+$ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
+$ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
+$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+$ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+
+$animation-duration-slow: 0.3s; // Modal
+$animation-duration-base: 0.2s;
+$animation-duration-fast: 0.1s; // Tooltip
+
+/** Border */
+$border-width-base: 1px; // width of the border for a component
+$border-style-base: solid; // style of a components border
+$border-radius-base: 4px;
+$border-color-base: $gray-8; // base border outline a component
+$border-color-split: $gray-9; // split border inside a component
+$border-color-inverse: $white;
+
+$background-color-light: $gray-98; // background of header and selected item
+$background-color-base: $gray-95; // Default grey background color
+
+// Disabled states
+$disabled-color: $gray-7;
+$disabled-bg: $gray-95;
+$disabled-active-bg: $gray-95;
+$disabled-color-dark: rgba(255, 255, 255, 0.75);
+
+/** Button */
+$btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+
+$btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+$btn-font-weight: 40;
+$btn-border-width: $border-width-base;
+$btn-border-style: $border-style-base;
+$btn-border-radius-base: $border-radius-base;
+$btn-height-base: $height-base;
+$btn-padding-horizontal-base: $padding-md -1px;
+$btn-padding-horizontal-lg: $btn-padding-horizontal-base;
+$btn-padding-horizontal-sm: $padding-xs - 1px;
+
+$btn-default-color: $gray-3;
+$btn-default-bg: $component-background;
+$btn-default-border: $border-color-base;
+
+$btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+$btn-primary-color: #fff;
+$btn-primary-bg: $primary-color;
+
+$btn-height-lg: $height-lg;
+$btn-font-size-lg: $font-size-lg;
+
+$btn-height-sm: $height-sm;
+$btn-font-size-sm: $font-size-base;
+$btn-border-radius-sm: $border-radius-base;
+
+$primary-color-hover: $blue-5;
+$primary-color-active: $blue-7;
+
+$btn-disable-color: $disabled-color;
+$btn-disable-bg: $disabled-bg;
+$btn-disable-border: $disabled-bg;
+
+$btn-ghost-color: $text-color;
+$btn-ghost-bg: transparent;
+$btn-ghost-border: $border-color-base;
+
+$btn-circle-size: $btn-height-base;
+$btn-circle-size-lg: $btn-height-lg;
+$btn-circle-size-sm: $btn-height-sm;
+
+// Avatar
+$avatar-size-base: 32px;
+$avatar-size-lg: 40px;
+$avatar-size-sm: 24px;
+$avatar-font-size-base: 18px;
+$avatar-font-size-lg: 24px;
+$avatar-font-size-sm: 14px;
+$avatar-bg: #ccc;
+$avatar-color: #fff;
+$avatar-border-radius: $border-radius-base;
+$avatar-group-overlapping: -8px;
+$avatar-group-space: 3px;
+$avatar-group-border-color: #fff;
+
+// Badge
+$badge-height: 20px;
+$badge-height-sm: 14px;
+$badge-dot-size: 6px;
+$badge-font-size: $font-size-sm;
+$badge-font-size-sm: $font-size-sm;
+$badge-font-weight: normal;
+$badge-status-size: 6px;
+$badge-text-color: $component-background;
+$badge-color: $highlight-color;
+
+// z-index list, order by `z-index`
+$zindex-badge: auto;
+$zindex-table-fixed: 2;
+$zindex-affix: 10;
+$zindex-back-top: 10;
+$zindex-picker-panel: 10;
+$zindex-popup-close: 10;
+$zindex-modal: 1000;
+$zindex-modal-mask: 1000;
+$zindex-message: 1010;
+$zindex-notification: 1010;
+$zindex-popover: 1030;
+$zindex-dropdown: 1050;
+$zindex-picker: 1050;
+$zindex-popoconfirm: 1060;
+$zindex-tooltip: 1070;
+$zindex-image: 1080;
+
+// Modal
+$modal-header-padding-vertical: $padding-md;
+$modal-header-padding-horizontal: $padding-lg;
+$modal-body-padding: $padding-lg;
+$modal-header-bg: $component-background;
+$modal-header-padding: $modal-header-padding-vertical $modal-header-padding-horizontal;
+$modal-header-border-width: $border-width-base;
+$modal-header-border-style: $border-style-base;
+$modal-header-title-line-height: 22px;
+$modal-header-title-font-size: $font-size-lg;
+$modal-header-border-color-split: $border-color-split;
+$modal-header-close-size: $modal-header-title-line-height + 2 * $modal-header-padding-vertical;
+$modal-content-bg: $component-background;
+$modal-heading-color: $heading-color;
+$modal-close-color: $text-color-secondary;
+$modal-footer-bg: transparent;
+$modal-footer-border-color-split: $border-color-split;
+$modal-footer-border-style: $border-style-base;
+$modal-footer-padding-vertical: 10px;
+$modal-footer-padding-horizontal: 16px;
+$modal-footer-border-width: $border-width-base;
+$modal-mask-bg: rgba(0,0,0, 0.45);
+$modal-confirm-body-padding: 32px 32px 24px;
+$modal-confirm-title-font-size: $font-size-lg;
+$modal-border-radius: $border-radius-base;
+
+// Tooltip
+// Tooltip max width
+$tooltip-max-width: 250px;
+// Tooltip text color
+$tooltip-color: $text-color;
+// Tooltip background color
+$tooltip-bg: #fff;
+// Tooltip arrow width
+$tooltip-arrow-width: 8px * 1.414; // sqrt(2)
+// Tooltip distance with trigger
+$tooltip-distance: $tooltip-arrow-width - 1px + 4px;
+// Tooltip arrow color
+$tooltip-arrow-color: $tooltip-bg;
+$tooltip-border-radius: $border-radius-base;
+$arrow-border-radius: 2px;
+
+
+// Popover
+// Popover body background color
+$popover-bg: $component-background;
+// Popover text color
+$popover-color: $text-color;
+// Popover maximum width
+$popover-min-width: 177px;
+$popover-min-height: 32px;
+// Popover arrow width
+$popover-arrow-width: $tooltip-arrow-width;
+// Popover arrow color
+$popover-arrow-color: $popover-bg;
+// Popover outer arrow width
+// Popover outer arrow color
+$popover-arrow-outer-color: $popover-bg;
+// Popover distance with trigger
+$popover-distance: $popover-arrow-width + 4px;
+$popover-padding-horizontal: $padding-md;