mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-02 03:57:52 +00:00
chore: Reset the base font-size to 16px instead of 10px (#7455)
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
This commit is contained in:
@@ -4,7 +4,7 @@ $base-font-family: PlusJakarta, Inter, -apple-system, BlinkMacSystemFont, "Segoe
|
|||||||
sans-serif !default;
|
sans-serif !default;
|
||||||
$heading-font-family: $base-font-family !default;
|
$heading-font-family: $base-font-family !default;
|
||||||
|
|
||||||
$base-font-size: 10px !default;
|
$base-font-size: 16px !default;
|
||||||
|
|
||||||
$base-line-height: 1.5 !default;
|
$base-line-height: 1.5 !default;
|
||||||
$heading-line-height: 1.2 !default;
|
$heading-line-height: 1.2 !default;
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
border-radius: var(--border-radius-normal);
|
border-radius: var(--border-radius-normal);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 4rem;
|
height: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx-input:disabled,
|
.mx-input:disabled,
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
height: 4.0rem;
|
height: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
|
|||||||
@@ -48,7 +48,7 @@
|
|||||||
// Disable contrast warnings in Foundation.
|
// Disable contrast warnings in Foundation.
|
||||||
$contrast-warnings: false;
|
$contrast-warnings: false;
|
||||||
|
|
||||||
$global-font-size: 10px;
|
$global-font-size: 16px;
|
||||||
$global-width: 100%;
|
$global-width: 100%;
|
||||||
$global-lineheight: 1.5;
|
$global-lineheight: 1.5;
|
||||||
$foundation-palette: (primary: $color-woot,
|
$foundation-palette: (primary: $color-woot,
|
||||||
@@ -117,7 +117,7 @@ $header-font-style: normal;
|
|||||||
$font-family-monospace: $body-font-family;
|
$font-family-monospace: $body-font-family;
|
||||||
$header-color: $color-heading;
|
$header-color: $color-heading;
|
||||||
$header-lineheight: 1.4;
|
$header-lineheight: 1.4;
|
||||||
$header-margin-bottom: 0.5rem;
|
$header-margin-bottom: 0.3125rem;
|
||||||
$header-styles: (small: ("h1": ("font-size": 24),
|
$header-styles: (small: ("h1": ("font-size": 24),
|
||||||
"h2": ("font-size": 20),
|
"h2": ("font-size": 20),
|
||||||
"h3": ("font-size": 19),
|
"h3": ("font-size": 19),
|
||||||
@@ -153,11 +153,11 @@ $list-lineheight: $paragraph-lineheight;
|
|||||||
$list-margin-bottom: $paragraph-margin-bottom;
|
$list-margin-bottom: $paragraph-margin-bottom;
|
||||||
$list-style-type: disc;
|
$list-style-type: disc;
|
||||||
$list-style-position: outside;
|
$list-style-position: outside;
|
||||||
$list-side-margin: 1.25rem;
|
$list-side-margin: 0.78125rem;
|
||||||
$list-nested-side-margin: 1.25rem;
|
$list-nested-side-margin: 0.78125rem;
|
||||||
$defnlist-margin-bottom: 1rem;
|
$defnlist-margin-bottom: 0.6875rem;
|
||||||
$defnlist-term-weight: $global-weight-bold;
|
$defnlist-term-weight: $global-weight-bold;
|
||||||
$defnlist-term-margin-bottom: 0.3rem;
|
$defnlist-term-margin-bottom: 0.1875rem;
|
||||||
$blockquote-color: $dark-gray;
|
$blockquote-color: $dark-gray;
|
||||||
$blockquote-padding: rem-calc(9 20 0 19);
|
$blockquote-padding: rem-calc(9 20 0 19);
|
||||||
$blockquote-border: 1px solid $medium-gray;
|
$blockquote-border: 1px solid $medium-gray;
|
||||||
@@ -179,9 +179,9 @@ $lead-lineheight: 1.6;
|
|||||||
$subheader-lineheight: 1.4;
|
$subheader-lineheight: 1.4;
|
||||||
$subheader-color: $dark-gray;
|
$subheader-color: $dark-gray;
|
||||||
$subheader-font-weight: $global-weight-normal;
|
$subheader-font-weight: $global-weight-normal;
|
||||||
$subheader-margin-top: 0.2rem;
|
$subheader-margin-top: 0.125rem;
|
||||||
$subheader-margin-bottom: 0.5rem;
|
$subheader-margin-bottom: 0.3125rem;
|
||||||
$stat-font-size: 2.5rem;
|
$stat-font-size: 1.5625rem;
|
||||||
|
|
||||||
// 6. Abide
|
// 6. Abide
|
||||||
// --------
|
// --------
|
||||||
@@ -202,11 +202,11 @@ $accordion-plusminus: true;
|
|||||||
$accordion-title-font-size: rem-calc(12);
|
$accordion-title-font-size: rem-calc(12);
|
||||||
$accordion-item-color: $primary-color;
|
$accordion-item-color: $primary-color;
|
||||||
$accordion-item-background-hover: $light-gray;
|
$accordion-item-background-hover: $light-gray;
|
||||||
$accordion-item-padding: 1.25rem 1rem;
|
$accordion-item-padding: 0.78125rem 0.625rem;
|
||||||
$accordion-content-background: $white;
|
$accordion-content-background: $white;
|
||||||
$accordion-content-border: 1px solid $light-gray;
|
$accordion-content-border: 1px solid $light-gray;
|
||||||
$accordion-content-color: $body-font-color;
|
$accordion-content-color: $body-font-color;
|
||||||
$accordion-content-padding: 1rem;
|
$accordion-content-padding: 0.625rem;
|
||||||
|
|
||||||
// 8. Accordion Menu
|
// 8. Accordion Menu
|
||||||
// -----------------
|
// -----------------
|
||||||
@@ -234,7 +234,7 @@ $breadcrumbs-item-font-size: rem-calc(11);
|
|||||||
$breadcrumbs-item-color: $primary-color;
|
$breadcrumbs-item-color: $primary-color;
|
||||||
$breadcrumbs-item-color-current: $black;
|
$breadcrumbs-item-color-current: $black;
|
||||||
$breadcrumbs-item-color-disabled: $medium-gray;
|
$breadcrumbs-item-color-disabled: $medium-gray;
|
||||||
$breadcrumbs-item-margin: 0.75rem;
|
$breadcrumbs-item-margin: 0.46875rem;
|
||||||
$breadcrumbs-item-uppercase: true;
|
$breadcrumbs-item-uppercase: true;
|
||||||
$breadcrumbs-item-slash: true;
|
$breadcrumbs-item-slash: true;
|
||||||
|
|
||||||
@@ -275,8 +275,8 @@ $buttongroup-radius-on-each: false;
|
|||||||
$callout-background: $white;
|
$callout-background: $white;
|
||||||
$callout-background-fade: 85%;
|
$callout-background-fade: 85%;
|
||||||
$callout-border: 1px solid rgba($black, 0.25);
|
$callout-border: 1px solid rgba($black, 0.25);
|
||||||
$callout-margin: 0 0 1rem 0;
|
$callout-margin: 0 0 0.625rem 0;
|
||||||
$callout-padding: 1rem;
|
$callout-padding: 0.625rem;
|
||||||
$callout-font-color: $body-font-color;
|
$callout-font-color: $body-font-color;
|
||||||
$callout-font-color-alt: $body-background;
|
$callout-font-color-alt: $body-background;
|
||||||
$callout-radius: $global-radius;
|
$callout-radius: $global-radius;
|
||||||
@@ -320,10 +320,10 @@ $drilldown-background: $white;
|
|||||||
// 17. Dropdown
|
// 17. Dropdown
|
||||||
// ------------
|
// ------------
|
||||||
|
|
||||||
$dropdown-padding: 1rem;
|
$dropdown-padding: 0.625rem;
|
||||||
$dropdown-background: $body-background;
|
$dropdown-background: $body-background;
|
||||||
$dropdown-border: 1px solid $medium-gray;
|
$dropdown-border: 1px solid $medium-gray;
|
||||||
$dropdown-font-size: 1rem;
|
$dropdown-font-size: 0.625rem;
|
||||||
$dropdown-width: 300px;
|
$dropdown-width: 300px;
|
||||||
$dropdown-radius: $global-radius;
|
$dropdown-radius: $global-radius;
|
||||||
$dropdown-sizes: (tiny: 100px,
|
$dropdown-sizes: (tiny: 100px,
|
||||||
@@ -354,7 +354,7 @@ $helptext-font-style: italic;
|
|||||||
$input-prefix-color: $color-body;
|
$input-prefix-color: $color-body;
|
||||||
$input-prefix-background: var(--b-100);
|
$input-prefix-background: var(--b-100);
|
||||||
$input-prefix-border: 1px solid $color-border;
|
$input-prefix-border: 1px solid $color-border;
|
||||||
$input-prefix-padding: 1rem;
|
$input-prefix-padding: 0.625rem;
|
||||||
$form-label-color: $color-body;
|
$form-label-color: $color-body;
|
||||||
$form-label-font-size: rem-calc(14);
|
$form-label-font-size: rem-calc(14);
|
||||||
$form-label-font-weight: $font-weight-medium;
|
$form-label-font-weight: $font-weight-medium;
|
||||||
@@ -406,14 +406,14 @@ $menu-margin-nested: $space-medium;
|
|||||||
$menu-item-padding: $space-slab;
|
$menu-item-padding: $space-slab;
|
||||||
$menu-item-color-active: $white;
|
$menu-item-color-active: $white;
|
||||||
$menu-item-background-active: $color-background;
|
$menu-item-background-active: $color-background;
|
||||||
$menu-icon-spacing: 0.25rem;
|
$menu-icon-spacing: 0.15625rem;
|
||||||
$menu-item-background-hover: $light-gray;
|
$menu-item-background-hover: $light-gray;
|
||||||
$menu-border: $light-gray;
|
$menu-border: $light-gray;
|
||||||
|
|
||||||
// 23. Meter
|
// 23. Meter
|
||||||
// ---------
|
// ---------
|
||||||
|
|
||||||
$meter-height: 1rem;
|
$meter-height: 0.625rem;
|
||||||
$meter-radius: $global-radius;
|
$meter-radius: $global-radius;
|
||||||
$meter-background: $medium-gray;
|
$meter-background: $medium-gray;
|
||||||
$meter-fill-good: $success-color;
|
$meter-fill-good: $success-color;
|
||||||
@@ -423,11 +423,11 @@ $meter-fill-bad: $alert-color;
|
|||||||
// 24. Off-canvas
|
// 24. Off-canvas
|
||||||
// --------------
|
// --------------
|
||||||
|
|
||||||
$offcanvas-sizes: (small: 23rem,
|
$offcanvas-sizes: (small: 14.375,
|
||||||
medium: 23rem,
|
medium: 14.375,
|
||||||
);
|
);
|
||||||
$offcanvas-vertical-sizes: (small: 23rem,
|
$offcanvas-vertical-sizes: (small: 14.375,
|
||||||
medium: 23rem,
|
medium: 14.375,
|
||||||
);
|
);
|
||||||
$offcanvas-background: $light-gray;
|
$offcanvas-background: $light-gray;
|
||||||
$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
|
$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
|
||||||
@@ -445,14 +445,14 @@ $maincontent-class: 'off-canvas-content';
|
|||||||
|
|
||||||
$orbit-bullet-background: $medium-gray;
|
$orbit-bullet-background: $medium-gray;
|
||||||
$orbit-bullet-background-active: $dark-gray;
|
$orbit-bullet-background-active: $dark-gray;
|
||||||
$orbit-bullet-diameter: 1.2rem;
|
$orbit-bullet-diameter: 0.75rem;
|
||||||
$orbit-bullet-margin: 0.1rem;
|
$orbit-bullet-margin: 0.0625rem;
|
||||||
$orbit-bullet-margin-top: 0.8rem;
|
$orbit-bullet-margin-top: 0.5rem;
|
||||||
$orbit-bullet-margin-bottom: 0.8rem;
|
$orbit-bullet-margin-bottom: 0.5rem;
|
||||||
$orbit-caption-background: rgba($black, 0.5);
|
$orbit-caption-background: rgba($black, 0.5);
|
||||||
$orbit-caption-padding: 1rem;
|
$orbit-caption-padding: 0.625rem;
|
||||||
$orbit-control-background-hover: rgba($black, 0.5);
|
$orbit-control-background-hover: rgba($black, 0.5);
|
||||||
$orbit-control-padding: 1rem;
|
$orbit-control-padding: 0.625rem;
|
||||||
$orbit-control-zindex: 10;
|
$orbit-control-zindex: 10;
|
||||||
|
|
||||||
// 26. Pagination
|
// 26. Pagination
|
||||||
@@ -476,7 +476,7 @@ $pagination-arrows: true;
|
|||||||
// 27. Progress Bar
|
// 27. Progress Bar
|
||||||
// ----------------
|
// ----------------
|
||||||
|
|
||||||
$progress-height: 1rem;
|
$progress-height: 0.625rem;
|
||||||
$progress-background: $medium-gray;
|
$progress-background: $medium-gray;
|
||||||
$progress-margin-bottom: $global-margin;
|
$progress-margin-bottom: $global-margin;
|
||||||
$progress-meter-background: $primary-color;
|
$progress-meter-background: $primary-color;
|
||||||
@@ -504,13 +504,13 @@ $reveal-overlay-background: rgba($black, 0.45);
|
|||||||
// 30. Slider
|
// 30. Slider
|
||||||
// ----------
|
// ----------
|
||||||
|
|
||||||
$slider-width-vertical: 0.5rem;
|
$slider-width-vertical: 0.3125rem;
|
||||||
$slider-transition: all 0.2s ease-in-out;
|
$slider-transition: all 0.2s ease-in-out;
|
||||||
$slider-height: 0.5rem;
|
$slider-height: 0.3125rem;
|
||||||
$slider-background: $light-gray;
|
$slider-background: $light-gray;
|
||||||
$slider-fill-background: $medium-gray;
|
$slider-fill-background: $medium-gray;
|
||||||
$slider-handle-height: 1.4rem;
|
$slider-handle-height: 0.875rem;
|
||||||
$slider-handle-width: 1.4rem;
|
$slider-handle-width: 0.875rem;
|
||||||
$slider-handle-background: $primary-color;
|
$slider-handle-background: $primary-color;
|
||||||
$slider-opacity-disabled: 0.25;
|
$slider-opacity-disabled: 0.25;
|
||||||
$slider-radius: $global-radius;
|
$slider-radius: $global-radius;
|
||||||
@@ -569,7 +569,7 @@ $tab-expand-max: 6;
|
|||||||
$tab-content-background: transparent;
|
$tab-content-background: transparent;
|
||||||
$tab-content-border: transparent;
|
$tab-content-border: transparent;
|
||||||
$tab-content-color: foreground($tab-background, $primary-color);
|
$tab-content-color: foreground($tab-background, $primary-color);
|
||||||
$tab-content-padding: 1rem;
|
$tab-content-padding: 0.625rem;
|
||||||
|
|
||||||
// 34. Thumbnail
|
// 34. Thumbnail
|
||||||
// -------------
|
// -------------
|
||||||
@@ -586,11 +586,11 @@ $thumbnail-radius: $global-radius;
|
|||||||
|
|
||||||
$titlebar-background: $black;
|
$titlebar-background: $black;
|
||||||
$titlebar-color: $white;
|
$titlebar-color: $white;
|
||||||
$titlebar-padding: 0.5rem;
|
$titlebar-padding: 0.3125rem;
|
||||||
$titlebar-text-font-weight: bold;
|
$titlebar-text-font-weight: bold;
|
||||||
$titlebar-icon-color: $white;
|
$titlebar-icon-color: $white;
|
||||||
$titlebar-icon-color-hover: $medium-gray;
|
$titlebar-icon-color-hover: $medium-gray;
|
||||||
$titlebar-icon-spacing: 0.25rem;
|
$titlebar-icon-spacing: 0.15625rem;
|
||||||
|
|
||||||
// 36. Tooltip
|
// 36. Tooltip
|
||||||
// -----------
|
// -----------
|
||||||
@@ -599,19 +599,19 @@ $has-tip-font-weight: $global-weight-bold;
|
|||||||
$has-tip-border-bottom: dotted 1px $dark-gray;
|
$has-tip-border-bottom: dotted 1px $dark-gray;
|
||||||
$tooltip-background-color: $black;
|
$tooltip-background-color: $black;
|
||||||
$tooltip-color: $white;
|
$tooltip-color: $white;
|
||||||
$tooltip-padding: 0.75rem;
|
$tooltip-padding: 0.46875rem;
|
||||||
$tooltip-font-size: $font-size-mini;
|
$tooltip-font-size: $font-size-mini;
|
||||||
$tooltip-pip-width: 0.75rem;
|
$tooltip-pip-width: 0.46875rem;
|
||||||
$tooltip-pip-height: $tooltip-pip-width * 0.866;
|
$tooltip-pip-height: $tooltip-pip-width * 0.866;
|
||||||
$tooltip-radius: $global-radius;
|
$tooltip-radius: $global-radius;
|
||||||
|
|
||||||
// 37. Top Bar
|
// 37. Top Bar
|
||||||
// -----------
|
// -----------
|
||||||
|
|
||||||
$topbar-padding: 0.5rem;
|
$topbar-padding: 0.3125;
|
||||||
$topbar-background: $light-gray;
|
$topbar-background: $light-gray;
|
||||||
$topbar-submenu-background: $topbar-background;
|
$topbar-submenu-background: $topbar-background;
|
||||||
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
|
$topbar-title-spacing: 0.3125 0.625rem 0.3125 0;
|
||||||
$topbar-input-width: 200px;
|
$topbar-input-width: 200px;
|
||||||
$topbar-unstack-breakpoint: medium;
|
$topbar-unstack-breakpoint: medium;
|
||||||
|
|
||||||
|
|||||||
@@ -237,8 +237,8 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin three-column-grid($column-one-width: 25.6rem,
|
@mixin three-column-grid($column-one-width: 16rem,
|
||||||
$column-three-width: 25.6rem) {
|
$column-three-width: 16rem) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|||||||
@@ -439,7 +439,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
--minus-space-one-point-five: -1.5rem;
|
--minus-space-one-point-five: -0.9375rem;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
transform: translate(
|
transform: translate(
|
||||||
|
|||||||
@@ -1,30 +1,30 @@
|
|||||||
// Font sizes
|
// Font sizes
|
||||||
$font-size-nano: 0.8rem;
|
$font-size-nano: 0.5rem;
|
||||||
$font-size-micro: 1.0rem;
|
$font-size-micro: 0.675rem;
|
||||||
$font-size-mini: 1.2rem;
|
$font-size-mini: 0.75rem;
|
||||||
$font-size-small: 1.4rem;
|
$font-size-small: 0.875rem;
|
||||||
$font-size-default: 1.6rem;
|
$font-size-default: 1rem;
|
||||||
$font-size-medium: 1.8rem;
|
$font-size-medium: 1.125rem;
|
||||||
$font-size-large: 2.2rem;
|
$font-size-large: 1.375rem;
|
||||||
$font-size-big: 2.4rem;
|
$font-size-big: 1.5rem;
|
||||||
$font-size-bigger: 3.0rem;
|
$font-size-bigger: 1.75rem;
|
||||||
$font-size-mega: 3.4rem;
|
$font-size-mega: 2.125rem;
|
||||||
$font-size-giga: 4.0rem;
|
$font-size-giga: 2.5rem;
|
||||||
|
|
||||||
// spaces
|
// spaces
|
||||||
$zero: 0;
|
$zero: 0;
|
||||||
$space-micro: 0.2rem;
|
$space-micro: 0.125rem;
|
||||||
$space-smaller: 0.4rem;
|
$space-smaller: 0.25rem;
|
||||||
$space-small: 0.8rem;
|
$space-small: 0.5rem;
|
||||||
$space-one: 1rem;
|
$space-one: 0.675rem;
|
||||||
$space-slab: 1.2rem;
|
$space-slab: 0.75rem;
|
||||||
$space-normal: 1.6rem;
|
$space-normal: 1rem;
|
||||||
$space-two: 2.0rem;
|
$space-two: 1.25rem;
|
||||||
$space-medium: 2.4rem;
|
$space-medium: 1.5rem;
|
||||||
$space-large: 3.2rem;
|
$space-large: 2rem;
|
||||||
$space-larger: 4.8rem;
|
$space-larger: 3rem;
|
||||||
$space-jumbo: 6.4rem;
|
$space-jumbo: 4rem;
|
||||||
$space-mega: 10.0rem;
|
$space-mega: 6.25rem;
|
||||||
|
|
||||||
// font-weight
|
// font-weight
|
||||||
$font-weight-feather: 100;
|
$font-weight-feather: 100;
|
||||||
@@ -35,8 +35,8 @@ $font-weight-bold: 600;
|
|||||||
$font-weight-black: 700;
|
$font-weight-black: 700;
|
||||||
|
|
||||||
//Navbar
|
//Navbar
|
||||||
$nav-bar-width: 23rem;
|
$nav-bar-width: 14.375rem;
|
||||||
$header-height: 5.6rem;
|
$header-height: 3.5rem;
|
||||||
|
|
||||||
$woot-logo-padding: $space-large $space-two;
|
$woot-logo-padding: $space-large $space-two;
|
||||||
|
|
||||||
@@ -71,20 +71,20 @@ $color-primary-light: #c7e3ff;
|
|||||||
$color-primary-dark: darken($color-woot, 20%);
|
$color-primary-dark: darken($color-woot, 20%);
|
||||||
|
|
||||||
// Thumbnail
|
// Thumbnail
|
||||||
$thumbnail-radius: 4rem;
|
$thumbnail-radius: 2.5rem;
|
||||||
|
|
||||||
// chat-header
|
// chat-header
|
||||||
$conv-header-height: 4rem;
|
$conv-header-height: 2.5rem;
|
||||||
|
|
||||||
// Inbox List
|
// Inbox List
|
||||||
|
|
||||||
$inbox-thumb-size: 4.8rem;
|
$inbox-thumb-size: 3rem;
|
||||||
|
|
||||||
|
|
||||||
// Spinner
|
// Spinner
|
||||||
$spinkit-spinner-color: $color-white !default;
|
$spinkit-spinner-color: $color-white !default;
|
||||||
$spinkit-spinner-margin: 0 0 0 1.6rem !default;
|
$spinkit-spinner-margin: 0 0 0 1rem !default;
|
||||||
$spinkit-size: 1.6rem !default;
|
$spinkit-size: 1rem !default;
|
||||||
|
|
||||||
// Snackbar default
|
// Snackbar default
|
||||||
$woot-snackbar-bg: #323232;
|
$woot-snackbar-bg: #323232;
|
||||||
@@ -101,5 +101,5 @@ $ionicons-font-path: '~ionicons/fonts';
|
|||||||
$transition-ease-in: all 0.250s ease-in;
|
$transition-ease-in: all 0.250s ease-in;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--dashboard-app-tabs-height: 3.9rem;
|
--dashboard-app-tabs-height: 2.4375rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.multiselect__select {
|
.multiselect__select {
|
||||||
min-height: 4.6rem;
|
min-height: 2.875rem;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -98,7 +98,7 @@
|
|||||||
border: 1px solid var(--s-200);
|
border: 1px solid var(--s-200);
|
||||||
border-color: var(--s-200);
|
border-color: var(--s-200);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 4.4rem;
|
min-height: 2.75rem;
|
||||||
padding-top: $zero;
|
padding-top: $zero;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -130,7 +130,7 @@
|
|||||||
.multiselect__input {
|
.multiselect__input {
|
||||||
@include ghost-input;
|
@include ghost-input;
|
||||||
font-size: $font-size-small;
|
font-size: $font-size-small;
|
||||||
height: 4.4rem;
|
height: 2.75rem;
|
||||||
margin-bottom: $zero;
|
margin-bottom: $zero;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
@@ -168,7 +168,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.multiselect-wrap--small {
|
.multiselect-wrap--small {
|
||||||
$multiselect-height: 4.0rem;
|
$multiselect-height: 2.5rem;
|
||||||
|
|
||||||
.multiselect__tags,
|
.multiselect__tags,
|
||||||
.multiselect__input {
|
.multiselect__input {
|
||||||
@@ -195,7 +195,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
font-size: var(--font-size-small);
|
font-size: var(--font-size-small);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
max-height: 3.8rem;
|
max-height: 2.375rem;
|
||||||
padding: var(--space-smaller) var(--space-micro);
|
padding: var(--space-smaller) var(--space-micro);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -219,7 +219,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.multiselect-wrap--medium {
|
.multiselect-wrap--medium {
|
||||||
$multiselect-height: 4.8rem;
|
$multiselect-height: 3rem;
|
||||||
|
|
||||||
.multiselect__tags,
|
.multiselect__tags,
|
||||||
.multiselect__input {
|
.multiselect__input {
|
||||||
|
|||||||
@@ -8,8 +8,8 @@
|
|||||||
|
|
||||||
.integration--image {
|
.integration--image {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 10rem;
|
height: 6.25rem;
|
||||||
width: 10rem;
|
width: 6.25rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
$default-button-height: 4.0rem;
|
$default-button-height: 2.5rem;
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
$resolve-button-width: 13.2rem;
|
$resolve-button-width: 8.25rem;
|
||||||
|
|
||||||
// Conversation header - Light BG
|
// Conversation header - Light BG
|
||||||
.conv-header {
|
.conv-header {
|
||||||
@@ -14,12 +14,12 @@ $resolve-button-width: 13.2rem;
|
|||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
border-radius: var(--space-smaller);
|
border-radius: var(--space-smaller);
|
||||||
margin-right: var(--space-small);
|
margin-right: var(--space-small);
|
||||||
width: 21.6rem;
|
width: 13.5rem;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
color: $medium-gray;
|
color: $medium-gray;
|
||||||
font-size: $font-size-default;
|
font-size: $font-size-default;
|
||||||
line-height: 3.8rem;
|
line-height: 2.375rem;
|
||||||
padding-left: $space-slab;
|
padding-left: $space-slab;
|
||||||
padding-right: $space-smaller;
|
padding-right: $space-smaller;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -81,7 +81,7 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: 27rem;
|
width: 16.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversation--meta {
|
.conversation--meta {
|
||||||
|
|||||||
@@ -273,7 +273,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
--bubble-max-width: 49.6rem;
|
--bubble-max-width: 31rem;
|
||||||
margin: $zero $space-normal;
|
margin: $zero $space-normal;
|
||||||
max-width: Min(var(--bubble-max-width), 84%);
|
max-width: Min(var(--bubble-max-width), 84%);
|
||||||
|
|
||||||
|
|||||||
@@ -27,7 +27,7 @@
|
|||||||
padding: $space-large $space-large $zero;
|
padding: $space-large $space-large $zero;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-height: 6rem;
|
max-height: 3.75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -39,11 +39,11 @@
|
|||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 60rem;
|
width: 37.5rem;
|
||||||
|
|
||||||
&.medium {
|
&.medium {
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
width: 90rem;
|
width: 56.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-box {
|
.content-box {
|
||||||
|
|||||||
@@ -29,7 +29,7 @@
|
|||||||
// Override min-height : 50px in foundation
|
// Override min-height : 50px in foundation
|
||||||
//
|
//
|
||||||
max-height: $space-mega * 2.4;
|
max-height: $space-mega * 2.4;
|
||||||
min-height: 4.8rem;
|
min-height: 3rem;
|
||||||
padding: var(--space-normal) 0 0;
|
padding: var(--space-normal) 0 0;
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
@@ -40,7 +40,7 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
max-height: $space-mega * 2.4;
|
max-height: $space-mega * 2.4;
|
||||||
// Override min-height : 50px in foundation
|
// Override min-height : 50px in foundation
|
||||||
min-height: 4.8rem;
|
min-height: 3rem;
|
||||||
padding: var(--space-normal) 0 0;
|
padding: var(--space-normal) 0 0;
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -47,7 +47,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-pane {
|
.dropdown-pane {
|
||||||
bottom: 6rem;
|
bottom: 3.75rem;
|
||||||
display: block;
|
display: block;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
.ui-snackbar-container {
|
.ui-snackbar-container {
|
||||||
left: 0;
|
left: 0;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 40rem;
|
max-width: 25rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
@@ -16,9 +16,9 @@
|
|||||||
border-radius: $space-smaller;
|
border-radius: $space-smaller;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
margin-bottom: $space-small;
|
margin-bottom: $space-small;
|
||||||
max-width: 40rem;
|
max-width: 25rem;
|
||||||
min-height: 3rem;
|
min-height: 1.875rem;
|
||||||
min-width: 24rem;
|
min-width: 15rem;
|
||||||
padding: $space-slab $space-medium;
|
padding: $space-slab $space-medium;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
|
|
||||||
.ui-snackbar-action {
|
.ui-snackbar-action {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
padding-left: 3rem;
|
padding-left: 1.875rem;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background: none;
|
background: none;
|
||||||
|
|||||||
@@ -43,15 +43,15 @@ table {
|
|||||||
|
|
||||||
.woot-thumbnail {
|
.woot-thumbnail {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 5rem;
|
height: 3.125rem;
|
||||||
width: 5rem;
|
width: 3.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-wrapper {
|
.button-wrapper {
|
||||||
@include flex-align(left, null);
|
@include flex-align(left, null);
|
||||||
@include flex;
|
@include flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
min-width: 20rem;
|
min-width: 12.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
|
|||||||
@@ -972,7 +972,7 @@ export default {
|
|||||||
|
|
||||||
.conversations-list-wrap {
|
.conversations-list-wrap {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
flex-basis: clamp(32rem, 4vw + 34rem, 44rem);
|
flex-basis: clamp(20rem, 4vw + 21.25rem, 27.5rem);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&.hide {
|
&.hide {
|
||||||
|
|||||||
@@ -343,11 +343,11 @@ export default {
|
|||||||
.error-message {
|
.error-message {
|
||||||
color: var(--r-400);
|
color: var(--r-400);
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1.4rem;
|
font-size: 0.875rem;
|
||||||
font-size: var(--font-size-small);
|
font-size: var(--font-size-small);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 0.625rem;
|
||||||
margin-top: -1.6rem;
|
margin-top: -1rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -106,7 +106,7 @@ export default {
|
|||||||
.modal-container {
|
.modal-container {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 48rem;
|
width: 30rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.modal-big {
|
.modal-big {
|
||||||
|
|||||||
@@ -77,7 +77,7 @@ export default {
|
|||||||
@import '~dashboard/assets/scss/mixins';
|
@import '~dashboard/assets/scss/mixins';
|
||||||
|
|
||||||
.ui-notification-container {
|
.ui-notification-container {
|
||||||
max-width: 40rem;
|
max-width: 25rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: var(--space-normal);
|
right: var(--space-normal);
|
||||||
top: var(--space-normal);
|
top: var(--space-normal);
|
||||||
@@ -94,7 +94,7 @@ export default {
|
|||||||
border-radius: var(--border-radius-medium);
|
border-radius: var(--border-radius-medium);
|
||||||
box-shadow: var(--shadow-large);
|
box-shadow: var(--shadow-large);
|
||||||
|
|
||||||
min-width: 24rem;
|
min-width: 15rem;
|
||||||
padding: var(--space-normal);
|
padding: var(--space-normal);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -258,11 +258,11 @@ export default {
|
|||||||
|
|
||||||
.dropdown-pane {
|
.dropdown-pane {
|
||||||
left: unset;
|
left: unset;
|
||||||
top: 4.2rem;
|
top: 2.625rem;
|
||||||
margin-top: var(--space-micro);
|
margin-top: var(--space-micro);
|
||||||
right: 0;
|
right: 0;
|
||||||
max-width: 20rem;
|
max-width: 12.5rem;
|
||||||
min-width: 15.6rem;
|
min-width: 9.75rem;
|
||||||
|
|
||||||
.dropdown-menu__item {
|
.dropdown-menu__item {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|||||||
@@ -230,7 +230,7 @@ export default {
|
|||||||
|
|
||||||
.account-selector--modal {
|
.account-selector--modal {
|
||||||
.modal-container {
|
.modal-container {
|
||||||
width: 40rem;
|
width: 25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -284,7 +284,7 @@ export default {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
height: 6rem;
|
height: 3.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.current-user--options {
|
.current-user--options {
|
||||||
|
|||||||
@@ -50,7 +50,7 @@
|
|||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
:href="href"
|
:href="href"
|
||||||
class="button small clear secondary"
|
class="button small clear secondary custom-sidebar--button"
|
||||||
:class="{ 'is-active': isActive }"
|
:class="{ 'is-active': isActive }"
|
||||||
@click="e => handleProfileSettingClick(e, navigate)"
|
@click="e => handleProfileSettingClick(e, navigate)"
|
||||||
>
|
>
|
||||||
@@ -64,7 +64,7 @@
|
|||||||
<woot-dropdown-item v-if="currentUser.type === 'SuperAdmin'">
|
<woot-dropdown-item v-if="currentUser.type === 'SuperAdmin'">
|
||||||
<a
|
<a
|
||||||
href="/super_admin"
|
href="/super_admin"
|
||||||
class="button small clear secondary"
|
class="button small clear secondary custom-sidebar--button"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener nofollow noreferrer"
|
rel="noopener nofollow noreferrer"
|
||||||
@click="$emit('close')"
|
@click="$emit('close')"
|
||||||
@@ -157,4 +157,9 @@ export default {
|
|||||||
top: unset;
|
top: unset;
|
||||||
z-index: var(--z-index-low);
|
z-index: var(--z-index-low);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-sidebar--button {
|
||||||
|
height: var(--space-large) !important;
|
||||||
|
padding: var(--space-smaller) 0.675rem !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -258,7 +258,7 @@ export default {
|
|||||||
background: var(--white);
|
background: var(--white);
|
||||||
border-right: 1px solid var(--s-50);
|
border-right: 1px solid var(--s-50);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 20rem;
|
width: 12.5rem;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
position: unset;
|
position: unset;
|
||||||
|
|||||||
@@ -52,8 +52,8 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.announcement-popup {
|
.announcement-popup {
|
||||||
max-width: 24rem;
|
max-width: 15rem;
|
||||||
min-width: 16rem;
|
min-width: 10rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -52,9 +52,9 @@ export default {
|
|||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-height: 34rem;
|
max-height: 21.25rem;
|
||||||
max-width: 38rem;
|
max-width: 23.75rem;
|
||||||
min-width: 24rem;
|
min-width: 15rem;
|
||||||
|
|
||||||
.header--wrap {
|
.header--wrap {
|
||||||
background: var(--s-50);
|
background: var(--s-50);
|
||||||
@@ -62,7 +62,7 @@ export default {
|
|||||||
border-top-left-radius: var(--border-radius-normal);
|
border-top-left-radius: var(--border-radius-normal);
|
||||||
border-top-right-radius: var(--border-radius-normal);
|
border-top-right-radius: var(--border-radius-normal);
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 4rem;
|
height: 2.5rem;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: var(--space-small);
|
padding: var(--space-small);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
--space-one-point-five: 1.5rem;
|
--space-one-point-five: 0.9375rem;
|
||||||
background-color: var(--white);
|
background-color: var(--white);
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
box-shadow: var(--toggle-button-box-shadow);
|
box-shadow: var(--toggle-button-box-shadow);
|
||||||
|
|||||||
@@ -75,7 +75,7 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
margin-top: var(--space-normal);
|
margin-top: var(--space-normal);
|
||||||
max-height: 20rem;
|
max-height: 12.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-item {
|
.preview-item {
|
||||||
@@ -84,7 +84,7 @@ export default {
|
|||||||
background: var(--color-background-light);
|
background: var(--color-background-light);
|
||||||
background: var(--b-50);
|
background: var(--b-50);
|
||||||
border-radius: var(--border-radius-normal);
|
border-radius: var(--border-radius-normal);
|
||||||
width: 24rem;
|
width: 15rem;
|
||||||
padding: var(--space-smaller);
|
padding: var(--space-smaller);
|
||||||
margin-bottom: var(--space-one);
|
margin-bottom: var(--space-one);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ export default {
|
|||||||
.option-item--inbox {
|
.option-item--inbox {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 3.8rem;
|
height: 2.375rem;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 0 var(--space-smaller);
|
padding: 0 var(--space-smaller);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -225,8 +225,8 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.audio-wave-wrapper {
|
.audio-wave-wrapper {
|
||||||
min-height: 8rem;
|
min-height: 5rem;
|
||||||
height: 8rem;
|
height: 5rem;
|
||||||
}
|
}
|
||||||
.video-js .vjs-control-bar {
|
.video-js .vjs-control-bar {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|||||||
@@ -468,8 +468,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ProseMirror-woot-style {
|
.ProseMirror-woot-style {
|
||||||
min-height: 8rem;
|
min-height: 5rem;
|
||||||
max-height: 12rem;
|
max-height: 7.5rem;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -230,8 +230,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ProseMirror-woot-style {
|
.ProseMirror-woot-style {
|
||||||
min-height: 8rem;
|
min-height: 5rem;
|
||||||
max-height: 12rem;
|
max-height: 7.5rem;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -241,6 +241,6 @@ export default {
|
|||||||
box-shadow: var(--shadow-large);
|
box-shadow: var(--shadow-large);
|
||||||
border-radius: var(--border-radius-normal);
|
border-radius: var(--border-radius-normal);
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
min-width: 40rem;
|
min-width: 25rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -365,6 +365,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
font-size: 8rem;
|
font-size: 5rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -90,7 +90,7 @@ export default {
|
|||||||
margin-top: var(--space-smaller);
|
margin-top: var(--space-smaller);
|
||||||
padding: var(--space-normal);
|
padding: var(--space-normal);
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 21rem;
|
width: 13.125rem;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: var(--font-size-small);
|
font-size: var(--font-size-small);
|
||||||
|
|||||||
@@ -176,23 +176,23 @@ export default {
|
|||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
|
|
||||||
@include breakpoint(medium up) {
|
@include breakpoint(medium up) {
|
||||||
flex-basis: 28rem;
|
flex-basis: 17.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(large up) {
|
@include breakpoint(large up) {
|
||||||
flex-basis: 30em;
|
flex-basis: 18.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(xlarge up) {
|
@include breakpoint(xlarge up) {
|
||||||
flex-basis: 31em;
|
flex-basis: 19.375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(xxlarge up) {
|
@include breakpoint(xxlarge up) {
|
||||||
flex-basis: 33rem;
|
flex-basis: 20.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(xxxlarge up) {
|
@include breakpoint(xxxlarge up) {
|
||||||
flex-basis: 40rem;
|
flex-basis: 25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::v-deep .contact--panel {
|
&::v-deep .contact--panel {
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ export default {
|
|||||||
|
|
||||||
img {
|
img {
|
||||||
margin: var(--space-normal);
|
margin: var(--space-normal);
|
||||||
width: 10rem;
|
width: 6.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
|||||||
@@ -520,7 +520,7 @@ export default {
|
|||||||
|
|
||||||
.image,
|
.image,
|
||||||
.video {
|
.video {
|
||||||
max-width: 32rem;
|
max-width: 20rem;
|
||||||
padding: var(--space-micro);
|
padding: var(--space-micro);
|
||||||
|
|
||||||
> img,
|
> img,
|
||||||
@@ -534,13 +534,13 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.video {
|
.video {
|
||||||
height: 18rem;
|
height: 11.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-image.is-text > .message-text__wrap,
|
&.is-image.is-text > .message-text__wrap,
|
||||||
&.is-video.is-text > .message-text__wrap {
|
&.is-video.is-text > .message-text__wrap {
|
||||||
max-width: 32rem;
|
max-width: 20rem;
|
||||||
padding: var(--space-small) var(--space-normal);
|
padding: var(--space-small) var(--space-normal);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -430,22 +430,22 @@ export default {
|
|||||||
.modal-mask {
|
.modal-mask {
|
||||||
&::v-deep {
|
&::v-deep {
|
||||||
.ProseMirror-woot-style {
|
.ProseMirror-woot-style {
|
||||||
max-height: 40rem;
|
max-height: 25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reply-box {
|
.reply-box {
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
max-width: 120rem;
|
max-width: 75rem;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reply-box .reply-box__top {
|
.reply-box .reply-box__top {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 44rem;
|
min-height: 27.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reply-box__top .input {
|
.reply-box__top .input {
|
||||||
min-height: 44rem;
|
min-height: 27.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-dialog {
|
.emoji-dialog {
|
||||||
|
|||||||
@@ -112,7 +112,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.scroll-wrap {
|
.scroll-wrap {
|
||||||
padding: var(--space-larger) 13.6rem;
|
padding: var(--space-larger) 8.5rem;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -96,7 +96,7 @@ export default {
|
|||||||
left: 0;
|
left: 0;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
max-height: 20rem;
|
max-height: 12.5rem;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: var(--space-small) var(--space-small) 0 var(--space-small);
|
padding: var(--space-small) var(--space-small) 0 var(--space-small);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -71,6 +71,6 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.modal-content {
|
.modal-content {
|
||||||
padding: 2.5rem 3.2rem;
|
padding: 1.5625rem 2rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -125,7 +125,7 @@ export default {
|
|||||||
.template__list-container {
|
.template__list-container {
|
||||||
background-color: var(--s-25);
|
background-color: var(--s-25);
|
||||||
border-radius: var(--border-radius-medium);
|
border-radius: var(--border-radius-medium);
|
||||||
max-height: 30rem;
|
max-height: 18.75rem;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: var(--space-one);
|
padding: var(--space-one);
|
||||||
|
|
||||||
|
|||||||
@@ -97,7 +97,7 @@ export default {
|
|||||||
button {
|
button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: var(--space-smaller);
|
top: var(--space-smaller);
|
||||||
right: 16rem;
|
right: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -341,7 +341,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
font-weight: var(--font-weight-bold);
|
font-weight: var(--font-weight-bold);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 8rem;
|
min-width: 5rem;
|
||||||
padding: var(--space-smaller);
|
padding: var(--space-smaller);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -249,15 +249,15 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.label-actions-box {
|
.label-actions-box {
|
||||||
--triangle-position: 8.5rem;
|
--triangle-position: 5.3125rem;
|
||||||
}
|
}
|
||||||
.update-actions-box {
|
.update-actions-box {
|
||||||
--triangle-position: 5.6rem;
|
--triangle-position: 3.5rem;
|
||||||
}
|
}
|
||||||
.agent-actions-box {
|
.agent-actions-box {
|
||||||
--triangle-position: 2.8rem;
|
--triangle-position: 1.75rem;
|
||||||
}
|
}
|
||||||
.team-actions-box {
|
.team-actions-box {
|
||||||
--triangle-position: 0.2rem;
|
--triangle-position: 0.125rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -259,8 +259,8 @@ export default {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: var(--space-small);
|
gap: var(--space-small);
|
||||||
background: var(--s-25);
|
background: var(--s-25);
|
||||||
height: 4rem;
|
height: 2.5rem;
|
||||||
width: 5.2rem;
|
width: 3.25rem;
|
||||||
border-radius: var(--border-radius-normal) 0 0 var(--border-radius-normal);
|
border-radius: var(--border-radius-normal) 0 0 var(--border-radius-normal);
|
||||||
padding: var(--space-small) var(--space-smaller) var(--space-small)
|
padding: var(--space-small) var(--space-smaller) var(--space-small)
|
||||||
var(--space-small);
|
var(--space-small);
|
||||||
@@ -288,9 +288,9 @@ export default {
|
|||||||
z-index: var(--z-index-low);
|
z-index: var(--z-index-low);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: var(--space-giga);
|
height: var(--space-giga);
|
||||||
width: 20rem;
|
width: 12.5rem;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
top: 4rem;
|
top: 2.5rem;
|
||||||
border-radius: var(--border-radius-default);
|
border-radius: var(--border-radius-default);
|
||||||
padding: 0 0 var(--space-smaller) 0;
|
padding: 0 0 var(--space-smaller) 0;
|
||||||
background-color: var(--white);
|
background-color: var(--white);
|
||||||
@@ -314,7 +314,7 @@ export default {
|
|||||||
.country-dropdown--item {
|
.country-dropdown--item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 2.8rem;
|
height: 1.75rem;
|
||||||
padding: 0 var(--space-smaller);
|
padding: 0 var(--space-smaller);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@@ -336,7 +336,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.country-name {
|
.country-name {
|
||||||
max-width: 12rem;
|
max-width: 7.5rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|||||||
@@ -85,7 +85,7 @@ export default {
|
|||||||
box-shadow: var(--shadow-medium);
|
box-shadow: var(--shadow-medium);
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
max-height: 15.6rem;
|
max-height: 9.75rem;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: var(--space-small) var(--space-small) 0;
|
padding: var(--space-small) var(--space-small) 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -138,7 +138,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: 40rem;
|
min-width: 25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forward-slash {
|
.forward-slash {
|
||||||
|
|||||||
@@ -252,7 +252,7 @@ export default {
|
|||||||
.context-menu--delete-modal {
|
.context-menu--delete-modal {
|
||||||
::v-deep {
|
::v-deep {
|
||||||
.modal-container {
|
.modal-container {
|
||||||
max-width: 48rem;
|
max-width: 30rem;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-weight: var(--font-weight-medium);
|
font-weight: var(--font-weight-medium);
|
||||||
|
|||||||
@@ -72,7 +72,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&::v-deep .ProseMirror-woot-style {
|
&::v-deep .ProseMirror-woot-style {
|
||||||
max-height: 36rem;
|
max-height: 22.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -222,8 +222,8 @@ export default {
|
|||||||
}
|
}
|
||||||
.search-root {
|
.search-root {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 72rem;
|
max-width: 45rem;
|
||||||
min-height: 32rem;
|
min-height: 20rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: var(--space-normal);
|
padding: var(--space-normal);
|
||||||
|
|||||||
@@ -129,13 +129,13 @@ export default {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
||||||
.chat-bubble {
|
.chat-bubble {
|
||||||
border-radius: 2rem;
|
border-radius: 1.25rem;
|
||||||
box-shadow: var(--shadow-medium);
|
box-shadow: var(--shadow-medium);
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: var(--font-size-nano);
|
font-size: var(--font-size-nano);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
padding: 1.3rem 1.75rem;
|
padding: 0.8125rem 1.09375rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|||||||
@@ -70,7 +70,7 @@ export default {
|
|||||||
background: white;
|
background: white;
|
||||||
|
|
||||||
&.is-focused {
|
&.is-focused {
|
||||||
box-shadow: 0 0 0 0.1rem var(--color-woot), 0 0 0.2rem 0.2rem var(--w-100);
|
box-shadow: 0 0 0 1px var(--color-woot), 0 0 2px 2px var(--w-100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<section class="contacts-table-wrap">
|
<section class="contacts-table-wrap">
|
||||||
<ve-table
|
<ve-table
|
||||||
:fixed-header="true"
|
:fixed-header="true"
|
||||||
max-height="calc(100vh - 11.4rem)"
|
max-height="calc(100vh - 7.125rem)"
|
||||||
scroll-width="187rem"
|
scroll-width="187rem"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:table-data="tableData"
|
:table-data="tableData"
|
||||||
|
|||||||
@@ -225,24 +225,24 @@ export default {
|
|||||||
|
|
||||||
.search-icon {
|
.search-icon {
|
||||||
height: var(--font-size-medium);
|
height: var(--font-size-medium);
|
||||||
line-height: 3.6rem;
|
line-height: 2.25rem;
|
||||||
font-size: var(--font-size-small);
|
font-size: var(--font-size-small);
|
||||||
color: var(--b-700);
|
color: var(--b-700);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.contact-search {
|
.contact-search {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 3.8rem;
|
height: 2.375rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: var(--font-size-small);
|
font-size: var(--font-size-small);
|
||||||
padding-left: calc(var(--space-large) + var(--space-smaller));
|
padding-left: calc(var(--space-large) + var(--space-smaller));
|
||||||
padding-right: 6rem;
|
padding-right: 3.75rem;
|
||||||
border-color: var(--s-100);
|
border-color: var(--s-100);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
margin-left: var(--space-small);
|
margin-left: var(--space-small);
|
||||||
height: 3.2rem;
|
height: 2rem;
|
||||||
right: var(--space-smaller);
|
right: var(--space-smaller);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 0 var(--space-small);
|
padding: 0 var(--space-small);
|
||||||
|
|||||||
@@ -305,7 +305,7 @@ export default {
|
|||||||
|
|
||||||
.label {
|
.label {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 0.2rem;
|
padding: 0.125rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -69,9 +69,9 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.macro-preview {
|
.macro-preview {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
max-height: 36rem;
|
max-height: 22.5rem;
|
||||||
min-height: var(--space-jumbo);
|
min-height: var(--space-jumbo);
|
||||||
width: 27.2rem;
|
width: 17rem;
|
||||||
border-radius: var(--border-radius-normal);
|
border-radius: var(--border-radius-normal);
|
||||||
background-color: var(--white);
|
background-color: var(--white);
|
||||||
box-shadow: var(--shadow-dropdown-pane);
|
box-shadow: var(--shadow-dropdown-pane);
|
||||||
@@ -93,7 +93,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.macro-block-border {
|
.macro-block-border {
|
||||||
top: 0.625rem;
|
top: 0.390625rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: var(--space-minus-smaller);
|
bottom: var(--space-minus-smaller);
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -103,13 +103,13 @@ export default {
|
|||||||
|
|
||||||
.macro-block-dot {
|
.macro-block-dot {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -0.35rem;
|
left: -0.21875rem;
|
||||||
height: var(--space-small);
|
height: var(--space-small);
|
||||||
width: var(--space-small);
|
width: var(--space-small);
|
||||||
border: 2px solid var(--s-100);
|
border: 2px solid var(--s-100);
|
||||||
background-color: var(--white);
|
background-color: var(--white);
|
||||||
border-radius: var(--border-radius-full);
|
border-radius: var(--border-radius-full);
|
||||||
top: 0.4375rem;
|
top: 0.2734375rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -381,7 +381,7 @@ export default {
|
|||||||
.contact-input {
|
.contact-input {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 3.9rem;
|
height: 2.4735rem;
|
||||||
background: var(--color-background-light);
|
background: var(--color-background-light);
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
padding: var(--space-smaller) var(--space-small);
|
padding: var(--space-smaller) var(--space-small);
|
||||||
@@ -395,7 +395,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.message-input {
|
.message-input {
|
||||||
min-height: 8rem;
|
min-height: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.gutter-small {
|
.row.gutter-small {
|
||||||
|
|||||||
@@ -105,7 +105,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 20rem;
|
max-height: 12.5rem;
|
||||||
|
|
||||||
.search-wrap {
|
.search-wrap {
|
||||||
margin-bottom: var(--space-small);
|
margin-bottom: var(--space-small);
|
||||||
|
|||||||
@@ -156,7 +156,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.name-wrap {
|
.name-wrap {
|
||||||
max-width: 20rem;
|
max-width: 12.5rem;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|||||||
@@ -118,7 +118,7 @@ export default {
|
|||||||
|
|
||||||
.name-wrap {
|
.name-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
max-width: 22rem;
|
max-width: 13.75rem;
|
||||||
|
|
||||||
.text-block-title {
|
.text-block-title {
|
||||||
font-weight: var(--font-weight-bold);
|
font-weight: var(--font-weight-bold);
|
||||||
|
|||||||
@@ -80,7 +80,7 @@ export default {
|
|||||||
.edit-article--container {
|
.edit-article--container {
|
||||||
margin: var(--space-large) auto;
|
margin: var(--space-large) auto;
|
||||||
padding: 0 var(--space-medium);
|
padding: 0 var(--space-medium);
|
||||||
max-width: 89.6rem;
|
max-width: 56rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -89,7 +89,7 @@ export default {
|
|||||||
font-weight: var(--font-weight-bold);
|
font-weight: var(--font-weight-bold);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: var(--space-jumbo);
|
min-height: var(--space-jumbo);
|
||||||
max-height: 64rem;
|
max-height: 40rem;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-bottom: var(--space-small);
|
margin-bottom: var(--space-small);
|
||||||
border: 0px solid transparent;
|
border: 0px solid transparent;
|
||||||
|
|||||||
@@ -180,7 +180,7 @@ export default {
|
|||||||
}
|
}
|
||||||
.dropdown-pane--open {
|
.dropdown-pane--open {
|
||||||
top: var(--space-larger);
|
top: var(--space-larger);
|
||||||
right: 14.8rem;
|
right: 9.25rem;
|
||||||
}
|
}
|
||||||
.selected-value {
|
.selected-value {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|||||||
@@ -92,7 +92,7 @@ export default {
|
|||||||
background-color: var(--white);
|
background-color: var(--white);
|
||||||
border-radius: var(--border-radius-normal);
|
border-radius: var(--border-radius-normal);
|
||||||
box-shadow: var(--shadow-large);
|
box-shadow: var(--shadow-large);
|
||||||
max-width: 48rem;
|
max-width: 30rem;
|
||||||
z-index: var(--z-index-high);
|
z-index: var(--z-index-high);
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
|||||||
@@ -227,7 +227,7 @@ export default {
|
|||||||
.article-settings--container {
|
.article-settings--container {
|
||||||
flex: 0.3;
|
flex: 0.3;
|
||||||
min-width: var(--space-giga);
|
min-width: var(--space-giga);
|
||||||
max-width: 36rem;
|
max-width: 22.5rem;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border-left: 1px solid var(--color-border-light);
|
border-left: 1px solid var(--color-border-light);
|
||||||
margin-left: var(--space-normal);
|
margin-left: var(--space-normal);
|
||||||
|
|||||||
@@ -248,7 +248,7 @@ export default {
|
|||||||
.notification-wrap {
|
.notification-wrap {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 90vh;
|
height: 90vh;
|
||||||
width: 52rem;
|
width: 32.5rem;
|
||||||
background-color: var(--white);
|
background-color: var(--white);
|
||||||
border-radius: var(--border-radius-medium);
|
border-radius: var(--border-radius-medium);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -195,17 +195,17 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail--column {
|
.thumbnail--column {
|
||||||
width: 5.2rem;
|
width: 3.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timestamp--column {
|
.timestamp--column {
|
||||||
min-width: 13rem;
|
min-width: 8.125rem;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-contant--wrap {
|
.notification-contant--wrap {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-width: 50rem;
|
max-width: 31.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification--message-title {
|
.notification--message-title {
|
||||||
|
|||||||
@@ -110,11 +110,11 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 1rem;
|
padding: 0.625rem;
|
||||||
background-color: #e0bbbb;
|
background-color: #e0bbbb;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.2rem;
|
font-size: 0.75rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -228,14 +228,14 @@ export default {
|
|||||||
|
|
||||||
.item {
|
.item {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
max-width: 10rem;
|
max-width: 6.25rem;
|
||||||
min-width: 8rem;
|
min-width: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-description {
|
.item-description {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
max-width: 16rem;
|
max-width: 10rem;
|
||||||
min-width: 10rem;
|
min-width: 6.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.key {
|
.key {
|
||||||
|
|||||||
@@ -141,7 +141,7 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.remote-address {
|
.remote-address {
|
||||||
width: 14rem;
|
width: 8.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap-break-words {
|
.wrap-break-words {
|
||||||
|
|||||||
@@ -365,6 +365,6 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
::v-deep .ProseMirror-woot-style {
|
::v-deep .ProseMirror-woot-style {
|
||||||
height: 8rem;
|
height: 5rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -314,6 +314,6 @@ export default {
|
|||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
min-width: 20rem;
|
min-width: 12.5rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -281,6 +281,6 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
::v-deep .ProseMirror-woot-style {
|
::v-deep .ProseMirror-woot-style {
|
||||||
height: 8rem;
|
height: 5rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -141,7 +141,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ProseMirror-woot-style {
|
.ProseMirror-woot-style {
|
||||||
min-height: 20rem;
|
min-height: 12.5rem;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: var(--font-size-default);
|
font-size: var(--font-size-default);
|
||||||
|
|||||||
@@ -145,7 +145,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ProseMirror-woot-style {
|
.ProseMirror-woot-style {
|
||||||
min-height: 20rem;
|
min-height: 12.5rem;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: var(--font-size-default);
|
font-size: var(--font-size-default);
|
||||||
|
|||||||
@@ -209,7 +209,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.short-code {
|
.short-code {
|
||||||
width: 14rem;
|
width: 8.75rem;
|
||||||
}
|
}
|
||||||
.wrap-break-words {
|
.wrap-break-words {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
|||||||
@@ -456,7 +456,7 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
min-height: 65rem;
|
min-height: 40.625rem;
|
||||||
margin: var(--space-zero) var(--space-two) var(--space-two) var(--space-two);
|
margin: var(--space-zero) var(--space-two) var(--space-two) var(--space-two);
|
||||||
padding: var(--space-one) var(--space-one) var(--space-one) var(--space-one);
|
padding: var(--space-one) var(--space-one) var(--space-one) var(--space-one);
|
||||||
background: var(--s-50);
|
background: var(--s-50);
|
||||||
|
|||||||
@@ -204,7 +204,7 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.day-wrap::v-deep .multiselect {
|
.day-wrap::v-deep .multiselect {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 12rem;
|
width: 7.5rem;
|
||||||
|
|
||||||
> .multiselect__tags {
|
> .multiselect__tags {
|
||||||
padding-left: var(--space-slab);
|
padding-left: var(--space-slab);
|
||||||
@@ -266,7 +266,7 @@ export default {
|
|||||||
.day {
|
.day {
|
||||||
font-size: var(--font-size-small);
|
font-size: var(--font-size-small);
|
||||||
font-weight: var(--font-weight-medium);
|
font-weight: var(--font-weight-medium);
|
||||||
width: 13rem;
|
width: 8.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
|||||||
@@ -188,7 +188,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.timezone-input-wrap {
|
.timezone-input-wrap {
|
||||||
max-width: 60rem;
|
max-width: 37.5rem;
|
||||||
|
|
||||||
&::v-deep .multiselect {
|
&::v-deep .multiselect {
|
||||||
margin-top: var(--space-small);
|
margin-top: var(--space-small);
|
||||||
@@ -196,7 +196,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.unavailable-input-wrap {
|
.unavailable-input-wrap {
|
||||||
max-width: 60rem;
|
max-width: 37.5rem;
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
min-height: var(--space-jumbo);
|
min-height: var(--space-jumbo);
|
||||||
|
|||||||
@@ -138,13 +138,13 @@ export default {
|
|||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
25% {
|
25% {
|
||||||
transform: translateX(0.375rem);
|
transform: translateX(0.234375rem);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: translateX(-0.375rem);
|
transform: translateX(-0.234375rem);
|
||||||
}
|
}
|
||||||
75% {
|
75% {
|
||||||
transform: translateX(0.375rem);
|
transform: translateX(0.234375rem);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
|
|||||||
@@ -101,7 +101,7 @@ export default {
|
|||||||
padding: var(--space-slab);
|
padding: var(--space-slab);
|
||||||
background-color: var(--white);
|
background-color: var(--white);
|
||||||
// full screen height subtracted by the height of the header
|
// full screen height subtracted by the height of the header
|
||||||
height: calc(100vh - 5.6rem);
|
height: calc(100vh - 3.5rem);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-left: 1px solid var(--s-50);
|
border-left: 1px solid var(--s-50);
|
||||||
|
|||||||
@@ -112,7 +112,7 @@ export default {
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.profile--settings--row {
|
.profile--settings--row {
|
||||||
.ProseMirror-woot-style {
|
.ProseMirror-woot-style {
|
||||||
height: 8rem;
|
height: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-root {
|
.editor-root {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="csat--table-container">
|
<div class="csat--table-container">
|
||||||
<ve-table
|
<ve-table
|
||||||
max-height="calc(100vh - 35rem)"
|
max-height="calc(100vh - 21.875rem)"
|
||||||
:fixed-header="true"
|
:fixed-header="true"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:table-data="tableData"
|
:table-data="tableData"
|
||||||
@@ -194,7 +194,7 @@ export default {
|
|||||||
color: var(--b-600);
|
color: var(--b-600);
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: var(--font-size-small);
|
font-size: var(--font-size-small);
|
||||||
height: 20rem;
|
height: 12.5rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -160,7 +160,7 @@ $heatmap-hover-border-color: (
|
|||||||
level-6: var(--w-700),
|
level-6: var(--w-700),
|
||||||
);
|
);
|
||||||
|
|
||||||
$tile-height: 3rem;
|
$tile-height: 1.875rem;
|
||||||
$tile-gap: var(--space-smaller);
|
$tile-gap: var(--space-smaller);
|
||||||
$container-gap-row: var(--space-one);
|
$container-gap-row: var(--space-one);
|
||||||
$container-gap-column: var(--space-two);
|
$container-gap-column: var(--space-two);
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="agent-table-container">
|
<div class="agent-table-container">
|
||||||
<ve-table
|
<ve-table
|
||||||
max-height="calc(100vh - 35rem)"
|
max-height="calc(100vh - 21.875rem)"
|
||||||
:fixed-header="true"
|
:fixed-header="true"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:table-data="tableData"
|
:table-data="tableData"
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
:root {
|
:root {
|
||||||
--border-radius-small: 0.3rem;
|
--border-radius-small: 0.1875rem;
|
||||||
--border-radius-normal: 0.5rem;
|
--border-radius-normal: 0.3125rem;
|
||||||
--border-radius-medium: 0.7rem;
|
--border-radius-medium: 0.4375rem;
|
||||||
--border-radius-large: 0.9rem;
|
--border-radius-large: 0.5625rem;
|
||||||
--border-radius-full: 10rem;
|
--border-radius-full: 6.25rem;
|
||||||
--border-radius-rounded: 50%;
|
--border-radius-rounded: 50%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
:root {
|
:root {
|
||||||
--font-size-nano: 0.8rem;
|
--font-size-nano: 0.5rem;
|
||||||
--font-size-micro: 1rem;
|
--font-size-micro: 0.625rem;
|
||||||
--font-size-mini: 1.2rem;
|
--font-size-mini: 0.75rem;
|
||||||
--font-size-small: 1.4rem;
|
--font-size-small: 0.875rem;
|
||||||
--font-size-default: 1.6rem;
|
--font-size-default: 1rem;
|
||||||
--font-size-medium: 1.8rem;
|
--font-size-medium: 1.125rem;
|
||||||
--font-size-two: 2rem;
|
--font-size-two: 1.25rem;
|
||||||
--font-size-large: 2.2rem;
|
--font-size-large: 1.375rem;
|
||||||
--font-size-big: 2.4rem;
|
--font-size-big: 1.5rem;
|
||||||
--font-size-bigger: 3rem;
|
--font-size-bigger: 1.875rem;
|
||||||
--font-size-mega: 3.4rem;
|
--font-size-mega: 2.125rem;
|
||||||
--font-size-giga: 4rem;
|
--font-size-giga: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,8 +9,8 @@
|
|||||||
--shadow-larger: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
--shadow-larger: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
||||||
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||||
--shadow-dropdown-pane:
|
--shadow-dropdown-pane:
|
||||||
0 0.8rem 1.6rem rgb(50 50 93 / 8%),
|
0 0.5rem 1rem rgb(50 50 93 / 8%),
|
||||||
0 0.4rem 1.2rem rgb(0 0 0 / 7%);
|
0 0.25rem 0.75rem rgb(0 0 0 / 7%);
|
||||||
--shadow-bulk-action-container:
|
--shadow-bulk-action-container:
|
||||||
6px 3px 22px 9px rgb(181 181 181 / 25%);
|
6px 3px 22px 9px rgb(181 181 181 / 25%);
|
||||||
--shadow-context-menu: rgb(22 23 24 / 30%) 0px 10px 38px -10px,
|
--shadow-context-menu: rgb(22 23 24 / 30%) 0px 10px 38px -10px,
|
||||||
|
|||||||
@@ -1,33 +1,33 @@
|
|||||||
:root {
|
:root {
|
||||||
// spaces
|
// spaces
|
||||||
--space-zero: 0;
|
--space-zero: 0;
|
||||||
--space-micro: 0.2rem;
|
--space-micro: 0.125rem;
|
||||||
--space-smaller: 0.4rem;
|
--space-smaller: 0.25rem;
|
||||||
--space-small: 0.8rem;
|
--space-small: 0.5rem;
|
||||||
--space-one: 1rem;
|
--space-one: 0.625rem;
|
||||||
--space-slab: 1.2rem;
|
--space-slab: 0.75rem;
|
||||||
--space-snug: 1.4rem;
|
--space-snug: 0.875rem;
|
||||||
--space-normal: 1.6rem;
|
--space-normal: 1rem;
|
||||||
--space-two: 2rem;
|
--space-two: 1.25rem;
|
||||||
--space-medium: 2.4rem;
|
--space-medium: 1.5rem;
|
||||||
--space-large: 3.2rem;
|
--space-large: 2rem;
|
||||||
--space-larger: 4.8rem;
|
--space-larger: 3rem;
|
||||||
--space-jumbo: 6.4rem;
|
--space-jumbo: 4rem;
|
||||||
--space-mega: 10rem;
|
--space-mega: 6.25rem;
|
||||||
--space-giga: 24rem;
|
--space-giga: 15rem;
|
||||||
|
|
||||||
--space-minus-micro: -0.2rem;
|
--space-minus-micro: -0.125rem;
|
||||||
--space-minus-smaller: -0.4rem;
|
--space-minus-smaller: -0.25rem;
|
||||||
--space-minus-half: -0.5rem;
|
--space-minus-half: -0.3125rem;
|
||||||
--space-minus-small: -0.8rem;
|
--space-minus-small: -0.5rem;
|
||||||
--space-minus-one: -1rem;
|
--space-minus-one: -0.625rem;
|
||||||
--space-minus-slab: -1.2rem;
|
--space-minus-slab: -0.75rem;
|
||||||
--space-minus-snug: -1.4rem;
|
--space-minus-snug: -0.875rem;
|
||||||
--space-minus-normal: -1.6rem;
|
--space-minus-normal: -1rem;
|
||||||
--space-minus-two: -2rem;
|
--space-minus-two: -1.25rem;
|
||||||
--space-minus-medium: -2.4rem;
|
--space-minus-medium: -1.5rem;
|
||||||
--space-minus-large: -3.2rem;
|
--space-minus-large: -2rem;
|
||||||
--space-minus-larger: -4.8rem;
|
--space-minus-larger: -3rem;
|
||||||
--space-minus-jumbo: -6.4rem;
|
--space-minus-jumbo: -4rem;
|
||||||
--space-minus-mega: -10rem;
|
--space-minus-mega: -6.25rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -177,7 +177,7 @@ export default {
|
|||||||
|
|
||||||
.dropdown-pane {
|
.dropdown-pane {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
top: 4.2rem;
|
top: 2.625rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -131,7 +131,7 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-height: 20rem;
|
max-height: 12.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-wrap {
|
.search-wrap {
|
||||||
@@ -164,7 +164,7 @@ export default {
|
|||||||
|
|
||||||
.multiselect-dropdown--list {
|
.multiselect-dropdown--list {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 16rem;
|
max-height: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.multiselect-dropdown--item {
|
.multiselect-dropdown--item {
|
||||||
|
|||||||
@@ -191,7 +191,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 20rem;
|
max-height: 12.5rem;
|
||||||
|
|
||||||
.search-wrap {
|
.search-wrap {
|
||||||
margin-bottom: var(--space-small);
|
margin-bottom: var(--space-small);
|
||||||
|
|||||||
@@ -66,6 +66,7 @@
|
|||||||
"md5": "^2.3.0",
|
"md5": "^2.3.0",
|
||||||
"ninja-keys": "^1.1.9",
|
"ninja-keys": "^1.1.9",
|
||||||
"opus-recorder": "^8.0.5",
|
"opus-recorder": "^8.0.5",
|
||||||
|
"pinia": "^2.1.4",
|
||||||
"postcss": "^8.4.24",
|
"postcss": "^8.4.24",
|
||||||
"postcss-loader": "^4.2.0",
|
"postcss-loader": "^4.2.0",
|
||||||
"semver": "7.3.5",
|
"semver": "7.3.5",
|
||||||
|
|||||||
18
yarn.lock
18
yarn.lock
@@ -6455,6 +6455,11 @@
|
|||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
prettier "^1.18.2"
|
prettier "^1.18.2"
|
||||||
|
|
||||||
|
"@vue/devtools-api@^6.5.0":
|
||||||
|
version "6.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
|
||||||
|
integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
|
||||||
|
|
||||||
"@vue/reactivity-transform@3.3.4":
|
"@vue/reactivity-transform@3.3.4":
|
||||||
version "3.3.4"
|
version "3.3.4"
|
||||||
resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz#52908476e34d6a65c6c21cd2722d41ed8ae51929"
|
resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz#52908476e34d6a65c6c21cd2722d41ed8ae51929"
|
||||||
@@ -15606,6 +15611,14 @@ pify@^4.0.1:
|
|||||||
resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
|
resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
|
||||||
integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
|
integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
|
||||||
|
|
||||||
|
pinia@^2.1.4:
|
||||||
|
version "2.1.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.4.tgz#a642adfe6208e10c36d3dc16184a91064788142a"
|
||||||
|
integrity sha512-vYlnDu+Y/FXxv1ABo1vhjC+IbqvzUdiUC3sfDRrRyY2CQSrqqaa+iiHmqtARFxJVqWQMCJfXx1PBvFs9aJVLXQ==
|
||||||
|
dependencies:
|
||||||
|
"@vue/devtools-api" "^6.5.0"
|
||||||
|
vue-demi ">=0.14.5"
|
||||||
|
|
||||||
pinkie-promise@^2.0.0:
|
pinkie-promise@^2.0.0:
|
||||||
version "2.0.1"
|
version "2.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
|
resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
|
||||||
@@ -20215,6 +20228,11 @@ vue-color@2.8.1:
|
|||||||
material-colors "^1.0.0"
|
material-colors "^1.0.0"
|
||||||
tinycolor2 "^1.1.2"
|
tinycolor2 "^1.1.2"
|
||||||
|
|
||||||
|
vue-demi@>=0.14.5:
|
||||||
|
version "0.14.5"
|
||||||
|
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9"
|
||||||
|
integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==
|
||||||
|
|
||||||
vue-docgen-api@^4.44.15:
|
vue-docgen-api@^4.44.15:
|
||||||
version "4.73.0"
|
version "4.73.0"
|
||||||
resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.73.0.tgz#13ef47c349374f5fd375093199085bd83e6b096c"
|
resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.73.0.tgz#13ef47c349374f5fd375093199085bd83e6b096c"
|
||||||
|
|||||||
Reference in New Issue
Block a user