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