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
2023-07-03 14:53:00 -07:00
committed by GitHub
parent 986abde531
commit 985b3f3bfc
96 changed files with 305 additions and 281 deletions

View File

@@ -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;

View File

@@ -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,

View File

@@ -8,7 +8,7 @@
} }
select { select {
height: 4.0rem; height: 2.5rem;
} }
.card { .card {

View File

@@ -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;

View File

@@ -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;

View File

@@ -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(

View File

@@ -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;
} }

View File

@@ -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 {

View File

@@ -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%;

View File

@@ -1,4 +1,4 @@
$default-button-height: 4.0rem; $default-button-height: 2.5rem;
.button { .button {
align-items: center; align-items: center;

View File

@@ -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;
} }

View File

@@ -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 {

View File

@@ -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%);

View File

@@ -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 {

View File

@@ -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;
} }

View File

@@ -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;

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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%;
} }

View File

@@ -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 {

View File

@@ -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);
} }

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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>

View File

@@ -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;

View File

@@ -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;

View File

@@ -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%;

View File

@@ -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);

View File

@@ -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);
} }

View File

@@ -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);
} }

View File

@@ -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;

View File

@@ -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;
} }

View File

@@ -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>

View File

@@ -365,6 +365,6 @@ export default {
} }
.icon { .icon {
font-size: 8rem; font-size: 5rem;
} }
</style> </style>

View File

@@ -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);

View File

@@ -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 {

View File

@@ -116,7 +116,7 @@ export default {
img { img {
margin: var(--space-normal); margin: var(--space-normal);
width: 10rem; width: 6.25rem;
} }
span { span {

View File

@@ -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);
} }

View File

@@ -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 {

View File

@@ -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;

View File

@@ -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;

View File

@@ -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>

View File

@@ -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);

View File

@@ -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>

View File

@@ -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);
} }
} }

View File

@@ -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>

View File

@@ -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;

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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);

View File

@@ -72,7 +72,7 @@ export default {
} }
&::v-deep .ProseMirror-woot-style { &::v-deep .ProseMirror-woot-style {
max-height: 36rem; max-height: 22.5rem;
} }
} }

View File

@@ -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);

View File

@@ -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 {

View File

@@ -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);
} }
} }

View File

@@ -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"

View File

@@ -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);

View File

@@ -305,7 +305,7 @@ export default {
.label { .label {
color: #fff; color: #fff;
padding: 0.2rem; padding: 0.125rem;
} }
} }

View File

@@ -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;
} }
} }

View File

@@ -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 {

View File

@@ -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);

View File

@@ -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;

View File

@@ -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);

View File

@@ -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;

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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);

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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;
} }

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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);

View File

@@ -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);

View File

@@ -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;

View File

@@ -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);

View File

@@ -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 {

View File

@@ -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);

View File

@@ -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);

View File

@@ -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);

View File

@@ -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 {

View File

@@ -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%;

View File

@@ -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);

View File

@@ -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"

View File

@@ -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%;
} }

View File

@@ -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;
} }

View File

@@ -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,

View File

@@ -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;
} }

View File

@@ -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%;
} }
} }

View File

@@ -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 {

View File

@@ -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);

View File

@@ -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",

View File

@@ -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"