feat: Dark Mode (#7471)
This commit is contained in:
Sivin Varghese
@@ -1,66 +1,64 @@
|
||||
@import '~vue2-datepicker/scss/index';
|
||||
|
||||
.mx-datepicker-popup {
|
||||
z-index: 99999;
|
||||
@apply z-[99999];
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
&.no-margin {
|
||||
.mx-input {
|
||||
margin-bottom: 0;
|
||||
@apply mb-0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.auto-width) {
|
||||
.mx-datepicker-range {
|
||||
width: 320px;
|
||||
@apply w-[320px];
|
||||
}
|
||||
}
|
||||
|
||||
.mx-datepicker {
|
||||
width: 100%;
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.mx-input {
|
||||
border: 1px solid var(--s-200);
|
||||
border-radius: var(--border-radius-normal);
|
||||
box-shadow: none;
|
||||
display: flex;
|
||||
height: 2.5rem;
|
||||
@apply h-[2.5rem] flex border border-solid border-slate-200 dark:border-slate-600 rounded-md shadow-none;
|
||||
}
|
||||
|
||||
.mx-input:disabled,
|
||||
.mx-input[readonly] {
|
||||
background-color: var(--white);
|
||||
cursor: pointer;
|
||||
@apply bg-white dark:bg-slate-900 cursor-pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-calendar-content .cell:hover {
|
||||
@apply bg-slate-75 dark:bg-slate-700 text-slate-900 dark:text-slate-100;
|
||||
}
|
||||
|
||||
.mx-datepicker-inline {
|
||||
width: 100%;
|
||||
@apply w-full;
|
||||
|
||||
.mx-calendar {
|
||||
width: 100%;
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.cell.disabled {
|
||||
background-color: var(--s-25);
|
||||
color: var(--s-200);
|
||||
@apply bg-slate-25 dark:bg-slate-900 text-slate-200 dark:text-slate-300;
|
||||
}
|
||||
|
||||
.mx-time-item.disabled {
|
||||
background-color: var(--s-25);
|
||||
@apply bg-slate-25 dark:bg-slate-900;
|
||||
}
|
||||
|
||||
.today {
|
||||
font-weight: var(--font-weight-bold);
|
||||
@apply font-semibold;
|
||||
}
|
||||
|
||||
.mx-datepicker-main {
|
||||
border: 0;
|
||||
@apply border-0 bg-white dark:bg-slate-800;
|
||||
}
|
||||
|
||||
.mx-time-header {
|
||||
border: 0;
|
||||
@apply border-0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,10 +16,6 @@ select {
|
||||
padding: var(--space-normal);
|
||||
}
|
||||
|
||||
.button-wrapper .button.grey-btn {
|
||||
margin-left: var(--space-normal);
|
||||
}
|
||||
|
||||
code {
|
||||
border: 0;
|
||||
font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
|
||||
|
||||
@@ -1,30 +1,6 @@
|
||||
.app-rtl--wrapper {
|
||||
direction: rtl;
|
||||
|
||||
// Primary sidebar
|
||||
.primary--sidebar {
|
||||
.options-menu.dropdown-pane {
|
||||
right: var(--space-smaller);
|
||||
|
||||
.auto-offline--toggle {
|
||||
padding: var(--space-smaller) var(--space-one) var(--space-smaller)
|
||||
var(--space-smaller);
|
||||
}
|
||||
|
||||
.status-items .button {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Settings header
|
||||
.settings-header {
|
||||
.header--icon {
|
||||
margin-left: var(--space-small);
|
||||
margin-right: var(--space-smaller);
|
||||
}
|
||||
}
|
||||
|
||||
.header-section.back-button {
|
||||
direction: initial;
|
||||
margin-left: var(--space-normal);
|
||||
@@ -73,23 +49,6 @@
|
||||
|
||||
// Conversation details
|
||||
.conversation-details-wrap {
|
||||
.conv-header {
|
||||
.user {
|
||||
margin-left: var(--space-normal);
|
||||
margin-right: unset;
|
||||
|
||||
.user--profile__meta {
|
||||
margin-left: unset;
|
||||
margin-right: var(--space-small);
|
||||
}
|
||||
}
|
||||
|
||||
.actions--container .resolve-actions {
|
||||
margin-left: unset;
|
||||
margin-right: var(--space-small);
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-panel {
|
||||
// Message text
|
||||
.text-content {
|
||||
@@ -137,11 +96,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Conversation sidebar toggle button
|
||||
.sidebar-toggle--button {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
// Conversation sidebar close button
|
||||
.close-button--rtl {
|
||||
transform: rotate(180deg);
|
||||
@@ -285,31 +239,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// scss-lint:disable SelectorDepth
|
||||
.container .header-wrap .header-left-wrap .header-left-wrap > .page-title {
|
||||
margin-right: var(--space-small);
|
||||
}
|
||||
|
||||
.portal-container .container {
|
||||
margin-left: unset !important;
|
||||
margin-right: var(--space-small);
|
||||
|
||||
.configuration-items--wrap {
|
||||
margin-left: var(--space-mega);
|
||||
margin-right: unset !important;
|
||||
}
|
||||
|
||||
thead th {
|
||||
padding-left: var(--space-small);
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
padding-left: var(--space-small);
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.portal-popover__container .portal {
|
||||
.actions-container {
|
||||
margin-left: unset;
|
||||
@@ -413,11 +342,6 @@
|
||||
direction: initial;
|
||||
}
|
||||
|
||||
.inbox--name .inbox--icon {
|
||||
margin-left: var(--space-micro);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.colorpicker--chrome {
|
||||
direction: initial;
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
z-index: var(--z-index-very-high);
|
||||
|
||||
&.dropdown-pane--open {
|
||||
@apply bg-white dark:bg-slate-800;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@@ -1,93 +1,86 @@
|
||||
@mixin label-multiselect-hover {
|
||||
&::after {
|
||||
color: $color-primary-dark;
|
||||
@apply text-woot-600 dark:text-woot-600;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-background;
|
||||
@apply bg-slate-50 dark:bg-slate-700;
|
||||
|
||||
&::after {
|
||||
color: $color-woot;
|
||||
@apply text-woot-500 dark:text-woot-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
&:not(.no-margin) {
|
||||
margin-bottom: var(--space-normal);
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
&.multiselect--disabled {
|
||||
opacity: 0.8;
|
||||
@apply opacity-80;
|
||||
}
|
||||
|
||||
.multiselect--active {
|
||||
>.multiselect__tags {
|
||||
border-color: var(--w-500);
|
||||
> .multiselect__tags {
|
||||
@apply border-woot-500 dark:border-woot-500;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__select {
|
||||
min-height: 2.875rem;
|
||||
padding: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@apply min-h-[2.875rem] p-0 right-0 top-0;
|
||||
|
||||
&::before {
|
||||
right: 0;
|
||||
@apply right-0;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__content-wrapper {
|
||||
@apply bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
|
||||
}
|
||||
|
||||
.multiselect__content {
|
||||
max-width: 100%;
|
||||
@apply max-w-full;
|
||||
|
||||
.multiselect__option {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-normal;
|
||||
@apply text-sm font-normal;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: fit-content;
|
||||
@apply inline-block overflow-hidden text-ellipsis whitespace-nowrap w-fit;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
&.multiselect__option--highlight {
|
||||
background: var(--white);
|
||||
color: var(--color-body);
|
||||
@apply bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100;
|
||||
}
|
||||
|
||||
&.multiselect__option--highlight:hover {
|
||||
background: var(--w-50);
|
||||
color: var(--color-body);
|
||||
@apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
|
||||
|
||||
&::after {
|
||||
background: var(--w-50);
|
||||
color: var(--s-600);
|
||||
@apply bg-woot-50 dark:bg-woot-600 text-slate-600 dark:text-slate-200;
|
||||
}
|
||||
}
|
||||
|
||||
&.multiselect__option--highlight::after {
|
||||
background: transparent;
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
&.multiselect__option--selected {
|
||||
background: var(--w-75);
|
||||
@apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
|
||||
|
||||
&.multiselect__option--highlight:hover {
|
||||
background: var(--w-75);
|
||||
@apply bg-woot-75 dark:bg-woot-600;
|
||||
|
||||
&::after {
|
||||
background: transparent;
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
&::after:hover {
|
||||
color: var(--color-body);
|
||||
@apply text-slate-800 dark:text-slate-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -95,175 +88,130 @@
|
||||
}
|
||||
|
||||
.multiselect__tags {
|
||||
border: 1px solid var(--s-200);
|
||||
border-color: var(--s-200);
|
||||
margin: 0;
|
||||
min-height: 2.75rem;
|
||||
padding-top: $zero;
|
||||
@apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 m-0 min-h-[2.875rem] pt-0;
|
||||
}
|
||||
|
||||
.multiselect__tags-wrap {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
margin-top: $space-smaller;
|
||||
@apply inline-block leading-none mt-1;
|
||||
}
|
||||
|
||||
.multiselect__placeholder {
|
||||
color: $color-gray;
|
||||
font-weight: $font-weight-normal;
|
||||
padding-top: var(--space-slab);
|
||||
@apply text-slate-400 dark:text-slate-400 font-normal pt-3;
|
||||
}
|
||||
|
||||
.multiselect__tag {
|
||||
$vertical-space: $space-smaller + $space-micro;
|
||||
background: $color-background;
|
||||
color: $color-heading;
|
||||
margin-top: $space-smaller;
|
||||
padding: $vertical-space $space-medium $vertical-space $space-one;
|
||||
@apply bg-slate-50 dark:bg-slate-800 mt-1 text-slate-800 dark:text-slate-100 pr-6 pl-2.5 py-1.5;
|
||||
}
|
||||
|
||||
.multiselect__tag-icon {
|
||||
@include label-multiselect-hover;
|
||||
line-height: $space-medium + $space-micro;
|
||||
}
|
||||
|
||||
.multiselect__input {
|
||||
@include ghost-input;
|
||||
font-size: $font-size-small;
|
||||
height: 2.75rem;
|
||||
margin-bottom: $zero;
|
||||
padding: 0;
|
||||
@apply text-sm h-[2.875rem] mb-0 p-0;
|
||||
}
|
||||
|
||||
.multiselect__single {
|
||||
@include text-ellipsis;
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
padding: var(--space-slab) var(--space-one);
|
||||
@apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-labels-wrap {
|
||||
|
||||
&.has-edited,
|
||||
&:hover {
|
||||
.multiselect {
|
||||
cursor: pointer;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
>.multiselect__select {
|
||||
visibility: hidden;
|
||||
> .multiselect__select {
|
||||
@apply invisible;
|
||||
}
|
||||
|
||||
>.multiselect__tags {
|
||||
border-color: transparent;
|
||||
> .multiselect__tags {
|
||||
@apply border-transparent;
|
||||
}
|
||||
|
||||
&.multiselect--active>.multiselect__tags {
|
||||
border-color: $color-woot;
|
||||
&.multiselect--active > .multiselect__tags {
|
||||
@apply border-woot-500 dark:border-woot-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect-wrap--small {
|
||||
$multiselect-height: 2.5rem;
|
||||
|
||||
.multiselect__tags,
|
||||
.multiselect__input {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@apply items-center flex;
|
||||
}
|
||||
|
||||
.multiselect__tags,
|
||||
.multiselect__input,
|
||||
.multiselect {
|
||||
background: var(--white);
|
||||
font-size: var(--font-size-small);
|
||||
height: $multiselect-height;
|
||||
min-height: $multiselect-height;
|
||||
@apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-[5px] text-sm h-10 min-h-[2.5rem];
|
||||
}
|
||||
|
||||
.multiselect__input {
|
||||
height: $multiselect-height - $space-micro;
|
||||
min-height: $multiselect-height - $space-micro;
|
||||
@apply h-[2.375rem] min-h-[2.375rem];
|
||||
}
|
||||
|
||||
.multiselect__single {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: var(--font-size-small);
|
||||
margin: 0;
|
||||
max-height: 2.375rem;
|
||||
padding: var(--space-smaller) var(--space-micro);
|
||||
@apply items-center flex m-0 text-sm max-h-[2.375rem] text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900 py-1 px-0.5;
|
||||
}
|
||||
|
||||
.multiselect__placeholder {
|
||||
margin: 0;
|
||||
padding: var(--space-smaller) var(--space-micro);
|
||||
@apply m-0 py-1 px-0.5;
|
||||
}
|
||||
|
||||
.multiselect__select {
|
||||
min-height: $multiselect-height;
|
||||
@apply min-h-[2.5rem];
|
||||
}
|
||||
|
||||
.multiselect--disabled .multiselect__current,
|
||||
.multiselect--disabled .multiselect__select {
|
||||
background: transparent;
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
.multiselect__tags-wrap {
|
||||
flex-shrink: 0;
|
||||
@apply flex-shrink-0;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect-wrap--medium {
|
||||
$multiselect-height: 3rem;
|
||||
|
||||
.multiselect__tags,
|
||||
.multiselect__input {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@apply items-center flex;
|
||||
}
|
||||
|
||||
.multiselect__tags,
|
||||
.multiselect__input,
|
||||
.multiselect {
|
||||
background: var(--white);
|
||||
font-size: var(--font-size-small);
|
||||
height: $multiselect-height;
|
||||
min-height: $multiselect-height;
|
||||
@apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 text-sm h-12 min-h-[3rem];
|
||||
}
|
||||
|
||||
.multiselect__input {
|
||||
height: $multiselect-height - $space-micro;
|
||||
min-height: $multiselect-height - $space-micro;
|
||||
@apply h-[2.875rem] min-h-[2.875rem];
|
||||
}
|
||||
|
||||
.multiselect__single {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: var(--font-size-small);
|
||||
margin: 0;
|
||||
padding: var(--space-smaller) var(--space-micro);
|
||||
@apply items-center flex m-0 text-sm py-1 px-0.5 text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900;
|
||||
}
|
||||
|
||||
.multiselect__placeholder {
|
||||
margin: 0;
|
||||
padding: var(--space-smaller) var(--space-micro);
|
||||
@apply m-0 py-1 px-0.5;
|
||||
}
|
||||
|
||||
.multiselect__select {
|
||||
min-height: $multiselect-height;
|
||||
@apply min-h-[3rem];
|
||||
}
|
||||
|
||||
.multiselect--disabled .multiselect__current,
|
||||
.multiselect--disabled .multiselect__select {
|
||||
background: transparent;
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
.multiselect__tags-wrap {
|
||||
flex-shrink: 0;
|
||||
@apply flex-shrink-0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,171 +1,112 @@
|
||||
.settings {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Conversation header - Light BG
|
||||
.settings-header {
|
||||
@include flex;
|
||||
@include flex-align($x: justify, $y: middle);
|
||||
height: $header-height;
|
||||
min-height: $header-height;
|
||||
padding: $space-small $space-normal;
|
||||
|
||||
// Resolve Button
|
||||
.button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// User thumbnail and text
|
||||
.page-title {
|
||||
@include flex;
|
||||
@include flex-align($x: center, $y: middle);
|
||||
margin: 0;
|
||||
}
|
||||
@apply overflow-auto;
|
||||
}
|
||||
|
||||
.wizard-box {
|
||||
.item {
|
||||
// @include background-light;
|
||||
|
||||
cursor: pointer;
|
||||
padding: $space-normal $space-normal $space-normal $space-medium;
|
||||
position: relative;
|
||||
@apply cursor-pointer py-4 pr-4 pl-6 relative;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background: $color-border;
|
||||
content: '';
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: $space-normal;
|
||||
width: 2px;
|
||||
@apply bg-slate-75 dark:bg-slate-600 content-[''] h-full absolute top-5 w-0.5;
|
||||
}
|
||||
|
||||
&::before {
|
||||
height: $space-normal;
|
||||
top: $zero;
|
||||
@apply h-4 top-0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
&::before {
|
||||
height: 0;
|
||||
@apply h-0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
height: $zero;
|
||||
@apply h-0;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
h3 {
|
||||
color: $color-woot;
|
||||
@apply text-woot-500 dark:text-woot-500;
|
||||
}
|
||||
|
||||
.step {
|
||||
background: $color-woot;
|
||||
@apply bg-woot-500 dark:bg-woot-500;
|
||||
}
|
||||
}
|
||||
|
||||
&.over {
|
||||
&::after {
|
||||
background: $color-woot;
|
||||
@apply bg-woot-500 dark:bg-woot-500;
|
||||
}
|
||||
|
||||
.step {
|
||||
background: $color-woot;
|
||||
@apply bg-woot-500 dark:bg-woot-500;
|
||||
}
|
||||
|
||||
& + .item {
|
||||
&::before {
|
||||
background: $color-woot;
|
||||
@apply bg-woot-500 dark:bg-woot-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $color-body;
|
||||
font-size: $font-size-default;
|
||||
line-height: 1;
|
||||
padding-left: $space-medium;
|
||||
@apply text-slate-800 dark:text-slate-100 text-base pl-6;
|
||||
}
|
||||
|
||||
.completed {
|
||||
color: $success-color;
|
||||
margin-left: $space-smaller;
|
||||
@apply text-green-500 dark:text-green-500 ml-1;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $color-light-gray;
|
||||
font-size: $font-size-small;
|
||||
margin: 0;
|
||||
padding-left: $space-medium;
|
||||
@apply text-slate-600 dark:text-slate-300 text-sm m-0 pl-6;
|
||||
}
|
||||
|
||||
.step {
|
||||
background: $color-border;
|
||||
border-radius: 20px;
|
||||
color: $color-white;
|
||||
font-size: $font-size-micro;
|
||||
font-weight: $font-weight-medium;
|
||||
height: $space-normal;
|
||||
left: $space-normal;
|
||||
line-height: $space-normal;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: $space-normal;
|
||||
width: $space-normal;
|
||||
z-index: 999;
|
||||
@apply bg-slate-75 dark:bg-slate-600 rounded-2xl font-medium w-4 left-4 leading-4 z-[999] absolute text-center text-white dark:text-white text-xxs top-5;
|
||||
|
||||
i {
|
||||
font-size: $font-size-micro;
|
||||
@apply text-xxs;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-body {
|
||||
@include border-light;
|
||||
@include background-white;
|
||||
@include full-height();
|
||||
padding: $space-medium;
|
||||
@apply border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6;
|
||||
|
||||
&.height-auto {
|
||||
height: auto;
|
||||
@apply h-auto;
|
||||
}
|
||||
}
|
||||
|
||||
.settings--content {
|
||||
margin: $space-small $space-large;
|
||||
@apply my-2 mx-8;
|
||||
|
||||
.title {
|
||||
font-weight: $font-weight-medium;
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: $color-background;
|
||||
max-height: $space-mega;
|
||||
overflow: auto;
|
||||
padding: $space-one;
|
||||
white-space: nowrap;
|
||||
@apply bg-slate-50 dark:bg-slate-800 overflow-auto p-2.5 whitespace-nowrap;
|
||||
|
||||
code {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
@apply bg-transparent border-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-init {
|
||||
padding-top: 30%;
|
||||
text-align: center;
|
||||
@apply pt-[30%] text-center;
|
||||
|
||||
p {
|
||||
padding: $space-medium;
|
||||
@apply p-6;
|
||||
}
|
||||
|
||||
> a > img {
|
||||
width: $space-larger * 5;
|
||||
@apply w-60;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,41 +1 @@
|
||||
.integrations-wrap {
|
||||
.integration {
|
||||
background: $color-white;
|
||||
border: 1px solid $color-border;
|
||||
border-radius: $space-smaller;
|
||||
margin-bottom: $space-normal;
|
||||
padding: $space-normal;
|
||||
|
||||
.integration--image {
|
||||
display: flex;
|
||||
height: 6.25rem;
|
||||
width: 6.25rem;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
padding: $space-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.integration--type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 var(--space-normal);
|
||||
}
|
||||
|
||||
.integration--title {
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
|
||||
.button-wrap {
|
||||
@include flex;
|
||||
@include flex-align(center, middle);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.help-wrap {
|
||||
padding-left: $space-large;
|
||||
}
|
||||
// to be removed
|
||||
|
||||
@@ -42,10 +42,10 @@
|
||||
}
|
||||
|
||||
&.hollow {
|
||||
@apply border border-slate-200 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900;
|
||||
@apply border border-slate-200 dark:border-slate-600 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900;
|
||||
|
||||
&.secondary {
|
||||
@apply text-slate-700 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
|
||||
@apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
|
||||
}
|
||||
|
||||
&.success {
|
||||
@@ -98,7 +98,7 @@
|
||||
}
|
||||
|
||||
&.warning {
|
||||
@apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-100 hover:bg-yellow-200 dark:hover:bg-yellow-200;
|
||||
@apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-700 hover:bg-yellow-200 dark:hover:bg-yellow-200;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -118,11 +118,11 @@
|
||||
}
|
||||
|
||||
&.warning {
|
||||
@apply text-yellow-700 dark:text-yellow-100;
|
||||
@apply text-yellow-700 dark:text-yellow-700;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply hover:bg-woot-50 dark:hover:bg-woot-300;
|
||||
@apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
|
||||
|
||||
&.secondary {
|
||||
@apply hover:bg-slate-50 dark:hover:bg-slate-700;
|
||||
@@ -137,7 +137,7 @@
|
||||
}
|
||||
|
||||
&.warning {
|
||||
@apply hover:bg-yellow-50 dark:hover:bg-yellow-800;
|
||||
@apply hover:bg-yellow-50 dark:hover:bg-yellow-100;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,66 +1 @@
|
||||
$resolve-button-width: 8.25rem;
|
||||
|
||||
// Conversation header - Light BG
|
||||
.conv-header {
|
||||
@include background-white;
|
||||
@include flex;
|
||||
@include flex-align($x: justify, $y: middle);
|
||||
@include border-normal-bottom;
|
||||
padding: var(--space-small) var(--space-normal);
|
||||
|
||||
.multiselect-box {
|
||||
@include flex;
|
||||
@include flex-align($x: justify, $y: middle);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--space-smaller);
|
||||
margin-right: var(--space-small);
|
||||
width: 13.5rem;
|
||||
|
||||
.icon {
|
||||
color: $medium-gray;
|
||||
font-size: $font-size-default;
|
||||
line-height: 2.375rem;
|
||||
padding-left: $space-slab;
|
||||
padding-right: $space-smaller;
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
border-radius: var(--border-radius-small);
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
|
||||
.multiselect__tags {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// User thumbnail and text
|
||||
.user {
|
||||
@include flex;
|
||||
@include flex-align($x: center, $y: middle);
|
||||
margin-right: var(--space-normal);
|
||||
min-width: 0;
|
||||
|
||||
.user--profile__meta {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
margin-left: var(--space-small);
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions-wrap {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
|
||||
&.has-open-sidebar {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
// File to be removed
|
||||
|
||||
@@ -10,114 +10,7 @@
|
||||
}
|
||||
|
||||
.conversation {
|
||||
@include flex;
|
||||
@include flex-shrink;
|
||||
border-left: var(--space-micro) solid transparent;
|
||||
cursor: pointer;
|
||||
padding: 0 var(--space-normal);
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
animation: left-shift-animation 0.25s $swift-ease-out-function;
|
||||
background: var(--color-background);
|
||||
border-left-color: var(--color-woot);
|
||||
}
|
||||
|
||||
|
||||
.conversation--details {
|
||||
padding: var(--space-slab) 0;
|
||||
}
|
||||
|
||||
.conversation--user {
|
||||
font-size: var(--font-size-small);
|
||||
margin: 0 var(--space-small);
|
||||
text-transform: capitalize;
|
||||
|
||||
.label {
|
||||
left: var(--space-one);
|
||||
max-width: var(--space-jumbo);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-overflow: ellipsis;
|
||||
top: var(--space-one);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation--message {
|
||||
color: var(--color-body);
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-normal);
|
||||
height: var(--space-medium);
|
||||
line-height: var(--space-medium);
|
||||
margin: 0 var(--space-small);
|
||||
max-width: 96%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 16.875rem;
|
||||
|
||||
img,
|
||||
svg {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation--meta {
|
||||
@include flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
right: var(--space-normal);
|
||||
top: var(--space-normal);
|
||||
|
||||
.unread {
|
||||
@include round-corner;
|
||||
@include light-shadow;
|
||||
background: darken($success-color, 3%);
|
||||
color: var(--white);
|
||||
display: none;
|
||||
font-size: var(--font-size-micro);
|
||||
font-weight: var(--font-weight-black);
|
||||
height: var(--space-normal);
|
||||
line-height: var(--space-normal);
|
||||
margin-left: auto;
|
||||
margin-top: var(--space-smaller);
|
||||
min-width: var(--space-normal);
|
||||
padding: 0 var(--space-smaller);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: $dark-gray;
|
||||
font-size: var(--font-size-micro);
|
||||
font-weight: var(--font-weight-normal);
|
||||
line-height: var(--space-normal);
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.unread-chat {
|
||||
.unread {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.conversation--message {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.conversation--user {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
}
|
||||
|
||||
&.compact {
|
||||
padding-left: 0;
|
||||
|
||||
.conversation--details {
|
||||
border-radius: var(--border-radius-small);
|
||||
margin-left: 0;
|
||||
padding-left: var(--space-two);
|
||||
padding-right: var(--space-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,352 +1,211 @@
|
||||
// scss-lint:disable MergeableSelector
|
||||
|
||||
@mixin bubble-with-types {
|
||||
padding: $space-small $space-normal;
|
||||
margin: 0;
|
||||
background: $color-woot;
|
||||
border-radius: $space-one;
|
||||
color: var(--white);
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-normal;
|
||||
position: relative;
|
||||
@apply py-2 text-sm font-normal bg-woot-500 dark:bg-woot-500 relative px-4 m-0 text-white dark:text-white;
|
||||
|
||||
.message-text__wrap {
|
||||
position: relative;
|
||||
@apply relative;
|
||||
|
||||
.link {
|
||||
color: var(--white);
|
||||
text-decoration: underline;
|
||||
@apply text-white dark:text-white underline;
|
||||
}
|
||||
}
|
||||
|
||||
.image,
|
||||
.video {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@apply cursor-pointer relative;
|
||||
|
||||
.modal-container {
|
||||
text-align: center;
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
max-height: 76vh;
|
||||
max-width: 76vw;
|
||||
@apply max-h-[76vh] max-w-[76vw];
|
||||
}
|
||||
|
||||
.modal-video {
|
||||
max-height: 76vh;
|
||||
max-width: 76vw;
|
||||
@apply max-h-[76vh] max-w-[76vw];
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-image: linear-gradient(
|
||||
-180deg,
|
||||
transparent 3%,
|
||||
$color-heading 130%
|
||||
);
|
||||
bottom: 0;
|
||||
content: '';
|
||||
height: 20%;
|
||||
left: 0;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@apply bg-gradient-to-t from-transparent via-transparent to-slate-800 bg-repeat bg-clip-border bottom-0 h-[20%] content-[''] left-0 absolute w-full opacity-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conversations-list-wrap {
|
||||
@include flex;
|
||||
border-right: 1px solid var(--s-50);
|
||||
flex-direction: column;
|
||||
|
||||
.load-more-conversations {
|
||||
font-size: $font-size-small;
|
||||
margin: 0;
|
||||
padding: $space-normal;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.end-of-list-text {
|
||||
padding: $space-normal;
|
||||
}
|
||||
|
||||
.conversations-list {
|
||||
flex: 1 1;
|
||||
overflow-y: auto;
|
||||
|
||||
@include breakpoint(large up) {
|
||||
@include scroll-on-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-list__top {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--space-normal);
|
||||
}
|
||||
|
||||
.content-box {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-panel {
|
||||
@include flex;
|
||||
flex: 1 1 1px;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
padding-bottom: var(--space-normal);
|
||||
position: relative;
|
||||
@apply flex-shrink flex-grow basis-px flex flex-col overflow-y-auto relative h-full m-0 pb-4;
|
||||
}
|
||||
|
||||
.conversation-panel > li {
|
||||
@include flex;
|
||||
@include flex-shrink;
|
||||
margin: $zero $zero $space-micro;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@apply flex flex-shrink-0 flex-grow-0 flex-auto max-w-full mt-0 mr-0 mb-1 ml-0 relative first:mt-auto last:mb-0;
|
||||
|
||||
&.unread--toast {
|
||||
+ .right {
|
||||
margin-bottom: var(--space-micro);
|
||||
@apply mb-1;
|
||||
}
|
||||
|
||||
+ .left {
|
||||
margin-bottom: 0;
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
span {
|
||||
@include elegant-card;
|
||||
@include round-corner;
|
||||
background: $color-woot;
|
||||
color: var(--white);
|
||||
font-size: $font-size-mini;
|
||||
font-weight: $font-weight-medium;
|
||||
margin: $space-one auto;
|
||||
padding: $space-smaller $space-two;
|
||||
@apply shadow-lg rounded-full bg-woot-500 dark:bg-woot-500 text-white dark:text-white text-xs font-medium my-2.5 mx-auto px-2.5 py-1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
@include bubble-with-types;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
@apply text-left break-words;
|
||||
|
||||
.aplayer {
|
||||
box-shadow: none;
|
||||
@apply shadow-none;
|
||||
font-family: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
.bubble {
|
||||
@include border-normal;
|
||||
background: $white;
|
||||
border-bottom-left-radius: $space-smaller;
|
||||
border-top-left-radius: $space-smaller;
|
||||
color: $color-body;
|
||||
margin-right: auto;
|
||||
word-break: break-word;
|
||||
@apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50 rounded-r-lg rounded-l mr-auto break-words;
|
||||
|
||||
&.is-image {
|
||||
border-radius: var(--border-radius-large);
|
||||
@apply rounded-lg;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: $color-primary-dark;
|
||||
@apply text-woot-600 dark:text-woot-600;
|
||||
}
|
||||
|
||||
.file {
|
||||
.text-block-title {
|
||||
color: $color-body;
|
||||
@apply text-slate-700 dark:text-woot-300;
|
||||
}
|
||||
|
||||
.icon-wrap {
|
||||
color: $color-woot;
|
||||
@apply text-woot-600 dark:text-woot-600;
|
||||
}
|
||||
|
||||
.download {
|
||||
color: $color-primary-dark;
|
||||
@apply text-woot-600 dark:text-woot-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+ .right {
|
||||
margin-top: $space-one;
|
||||
@apply mt-2.5;
|
||||
|
||||
.bubble {
|
||||
border-top-right-radius: $space-one;
|
||||
@apply rounded-tr-lg;
|
||||
}
|
||||
}
|
||||
|
||||
+ .unread--toast {
|
||||
+ .right {
|
||||
margin-top: $space-one;
|
||||
@apply mt-2.5;
|
||||
|
||||
.bubble {
|
||||
border-top-right-radius: $space-one;
|
||||
@apply rounded-tr-lg;
|
||||
}
|
||||
}
|
||||
|
||||
+ .left {
|
||||
margin-top: 0;
|
||||
@apply mt-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
@include flex-align(right, null);
|
||||
@apply justify-end;
|
||||
|
||||
.wrap {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
margin-right: $space-normal;
|
||||
text-align: right;
|
||||
@apply flex items-end mr-4 text-right;
|
||||
|
||||
.sender--info {
|
||||
padding: var(--space-small) 0 var(--space-smaller) var(--space-small);
|
||||
@apply pt-2 pb-1 pr-0 pl-2;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
border-bottom-right-radius: $space-smaller;
|
||||
border-top-right-radius: $space-smaller;
|
||||
margin-left: auto;
|
||||
word-break: break-word;
|
||||
@apply ml-auto break-words rounded-l-lg rounded-r;
|
||||
|
||||
&.is-private {
|
||||
background: lighten($warning-color, 32%);
|
||||
border: 1px solid lighten($warning-color, 15%);
|
||||
color: $color-heading;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
bottom: 0;
|
||||
color: $medium-gray;
|
||||
position: absolute;
|
||||
right: $space-one;
|
||||
top: $space-smaller + $space-micro;
|
||||
}
|
||||
@apply text-black-900 dark:text-black-900 relative border border-solid bg-[#fff3d5] border-[#ffd97a] dark:bg-[#fff3d5] dark:border-[#ffd97a];
|
||||
}
|
||||
|
||||
&.is-image {
|
||||
border-radius: var(--border-radius-large);
|
||||
@apply rounded-lg;
|
||||
}
|
||||
}
|
||||
|
||||
+ .left {
|
||||
margin-top: $space-one;
|
||||
@apply mt-2.5;
|
||||
|
||||
.bubble {
|
||||
border-top-left-radius: $space-one;
|
||||
@apply rounded-tl-lg;
|
||||
}
|
||||
}
|
||||
|
||||
+ .unread--toast {
|
||||
+ .left {
|
||||
margin-top: $space-one;
|
||||
@apply rounded-lg;
|
||||
|
||||
.bubble {
|
||||
border-top-left-radius: $space-one;
|
||||
@apply rounded-tl-lg;
|
||||
}
|
||||
}
|
||||
|
||||
+ .right {
|
||||
margin-top: 0;
|
||||
@apply mt-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.center {
|
||||
justify-content: center;
|
||||
@apply items-center justify-center;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
--bubble-max-width: 31rem;
|
||||
margin: $zero $space-normal;
|
||||
max-width: Min(var(--bubble-max-width), 84%);
|
||||
max-width: Min(31rem, 84%);
|
||||
@apply my-0 mx-4;
|
||||
|
||||
.sender--name {
|
||||
font-size: $font-size-mini;
|
||||
margin-bottom: $space-smaller;
|
||||
@apply text-xs mb-1;
|
||||
}
|
||||
}
|
||||
|
||||
.sender--thumbnail {
|
||||
@include round-corner();
|
||||
height: $space-slab;
|
||||
margin-right: $space-one;
|
||||
margin-top: $space-micro;
|
||||
width: $space-slab;
|
||||
@apply h-3 mr-3 mt-0.5 w-3 rounded-full;
|
||||
}
|
||||
|
||||
.activity-wrap {
|
||||
background: var(--s-50);
|
||||
border: 1px solid var(--s-100);
|
||||
border-radius: var(--border-radius-medium);
|
||||
display: flex;
|
||||
font-size: var(--font-size-small);
|
||||
justify-content: center;
|
||||
margin: var(--space-smaller) 0;
|
||||
padding: var(--space-smaller) var(--space-micro) var(--space-smaller)
|
||||
var(--space-one);
|
||||
@apply flex justify-center text-sm my-1 mx-0 py-1 pr-0.5 pl-2.5 bg-slate-50 dark:bg-slate-600 text-slate-800 dark:text-slate-100 rounded-md border border-slate-100 dark:border-slate-600 border-solid;
|
||||
|
||||
.is-text {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
text-align: start;
|
||||
|
||||
@include breakpoint(xxxlarge up) {
|
||||
display: flex;
|
||||
}
|
||||
@apply inline-flex items-center text-start 2xl:flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-wrap .message-text__wrap {
|
||||
.text-content p {
|
||||
margin-bottom: 0;
|
||||
@apply mb-0;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
@apply flex relative flex-col;
|
||||
}
|
||||
|
||||
.typing-indicator-wrap {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: -$space-large;
|
||||
width: 100%;
|
||||
@apply items-center flex h-0 absolute w-full -top-8;
|
||||
|
||||
.typing-indicator {
|
||||
@include elegant-card;
|
||||
@include round-corner;
|
||||
background: var(--white);
|
||||
color: $color-light-gray;
|
||||
font-size: $font-size-mini;
|
||||
font-weight: $font-weight-bold;
|
||||
margin: $space-one auto;
|
||||
padding: $space-small $space-normal $space-small $space-two;
|
||||
@apply py-2 pr-4 pl-5 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto;
|
||||
|
||||
.gif {
|
||||
margin-left: $space-small;
|
||||
width: $space-medium;
|
||||
@apply ml-2 w-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -358,16 +217,15 @@
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--color-body);
|
||||
@apply text-slate-800 dark:text-slate-100;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-woot);
|
||||
text-decoration: underline;
|
||||
@apply text-woot-500 dark:text-woot-500 underline;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
@apply mb-0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -378,54 +236,14 @@
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--white);
|
||||
@apply text-white dark:text-white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--white);
|
||||
text-decoration: underline;
|
||||
@apply text-white dark:text-white underline;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-sidebar-wrap {
|
||||
flex: 0 0;
|
||||
flex-basis: 100%;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
z-index: var(--z-index-low);
|
||||
|
||||
@include breakpoint(medium up) {
|
||||
flex-basis: 17.5rem;
|
||||
}
|
||||
|
||||
@include breakpoint(large up) {
|
||||
flex-basis: 18.75rem;
|
||||
}
|
||||
|
||||
@include breakpoint(xlarge up) {
|
||||
flex-basis: 19.375rem;
|
||||
}
|
||||
|
||||
@include breakpoint(xxlarge up) {
|
||||
flex-basis: 20.625rem;
|
||||
}
|
||||
|
||||
@include breakpoint(xxxlarge up) {
|
||||
flex-basis: 25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.activity-wrap {
|
||||
.message-text--metadata {
|
||||
.time {
|
||||
@include breakpoint(xlarge up) {
|
||||
margin-left: var(--space-small);
|
||||
}
|
||||
}
|
||||
@apply mb-0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,29 @@
|
||||
// scss-lint:disable QualifyingElement
|
||||
|
||||
label {
|
||||
@apply text-slate-800 dark:text-slate-200;
|
||||
}
|
||||
|
||||
textarea {
|
||||
@apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
|
||||
}
|
||||
|
||||
input {
|
||||
@apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
|
||||
|
||||
&[disabled] {
|
||||
@apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
@apply bg-white dark:bg-slate-800;
|
||||
}
|
||||
|
||||
select {
|
||||
@apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
|
||||
}
|
||||
|
||||
.error {
|
||||
input[type='color'],
|
||||
input[type='date'],
|
||||
@@ -19,17 +43,11 @@
|
||||
textarea,
|
||||
select,
|
||||
.multiselect > .multiselect__tags {
|
||||
@include thin-border(var(--r-400));
|
||||
@apply border border-solid border-red-400 dark:border-red-400;
|
||||
}
|
||||
|
||||
.message {
|
||||
color: var(--r-400);
|
||||
display: block;
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: $font-weight-normal;
|
||||
margin-bottom: $space-one;
|
||||
margin-top: -$space-normal;
|
||||
width: 100%;
|
||||
@apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,26 +60,19 @@ input {
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
color: $color-heading;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-medium;
|
||||
@apply text-slate-800 dark:text-slate-100 text-sm font-medium;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-weight: $font-weight-normal;
|
||||
@apply font-normal text-slate-600 dark:text-slate-400;
|
||||
}
|
||||
|
||||
.input-group.small {
|
||||
input {
|
||||
font-size: var(--font-size-small);
|
||||
height: var(--space-large);
|
||||
@apply text-sm h-8;
|
||||
}
|
||||
|
||||
.error {
|
||||
border-color: var(--r-400);
|
||||
@apply border-red-400 dark:border-red-400;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
@apply dark:text-slate-300;
|
||||
}
|
||||
|
||||
@@ -1,116 +1,79 @@
|
||||
@import '~dashboard/assets/scss/variables';
|
||||
@import '~dashboard/assets/scss/mixins';
|
||||
|
||||
.modal-mask {
|
||||
@include flex;
|
||||
@include flex-align(center, middle);
|
||||
background-color: $masked-bg;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 9990;
|
||||
// @include flex;
|
||||
// @include flex-align(center, middle);
|
||||
@apply flex items-center justify-center bg-modal dark:bg-modal z-[9990] h-full left-0 fixed top-0 w-full;
|
||||
}
|
||||
|
||||
.modal--close {
|
||||
position: absolute;
|
||||
right: $space-small;
|
||||
top: $space-small;
|
||||
|
||||
&:hover {
|
||||
background: $color-background;
|
||||
}
|
||||
@apply absolute right-2 rtl:right-[unset] rtl:left-2 top-2;
|
||||
}
|
||||
|
||||
.page-top-bar {
|
||||
padding: $space-large $space-large $zero;
|
||||
@apply px-8 pt-9 pb-0;
|
||||
|
||||
img {
|
||||
max-height: 3.75rem;
|
||||
@apply max-h-[3.75rem];
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@include normal-shadow;
|
||||
|
||||
border-radius: $space-smaller;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
width: 37.5rem;
|
||||
@apply shadow-md rounded-sm max-h-full overflow-auto relative w-[37.5rem];
|
||||
|
||||
&.medium {
|
||||
max-width: 80%;
|
||||
width: 56.25rem;
|
||||
@apply max-w-[80%] w-[56.25rem];
|
||||
}
|
||||
|
||||
.content-box {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
@apply h-auto p-0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $color-heading;
|
||||
font-size: $font-size-medium;
|
||||
font-weight: $font-weight-bold;
|
||||
@apply text-slate-800 dark:text-slate-100 text-lg font-semibold;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $font-size-small;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@apply text-sm m-0 p-0 text-slate-600 mt-2 text-sm dark:text-slate-300;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: $space-large;
|
||||
@apply p-8;
|
||||
}
|
||||
|
||||
form,
|
||||
.modal-content {
|
||||
align-self: center;
|
||||
padding: $space-large;
|
||||
@apply pt-4 pb-8 px-8 self-center;
|
||||
|
||||
a {
|
||||
padding: $space-normal;
|
||||
@apply p-4;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
@include flex;
|
||||
@include flex-align($x: flex-end, $y: middle);
|
||||
padding: $space-small $zero;
|
||||
|
||||
.button {
|
||||
margin-left: var(--space-small);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.button {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
// @include flex;
|
||||
// @include flex-align($x: flex-end, $y: middle);
|
||||
@apply flex justify-end items-center py-2 px-0 gap-2;
|
||||
|
||||
&.justify-content-end {
|
||||
justify-content: end;
|
||||
@apply justify-end;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-item {
|
||||
padding: $space-large;
|
||||
@apply p-8;
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
@apply m-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-enter,
|
||||
.modal-leave {
|
||||
opacity: 0;
|
||||
@apply opacity-0;
|
||||
}
|
||||
|
||||
.modal-enter .modal-container,
|
||||
.modal-leave .modal-container {
|
||||
transform: scale(1.1);
|
||||
// @apply transform scale-110;
|
||||
}
|
||||
|
||||
@@ -1,27 +1 @@
|
||||
|
||||
// EMPTY STATES
|
||||
.empty-state {
|
||||
padding: $space-jumbo $space-smaller;
|
||||
|
||||
.title,
|
||||
.message {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: $font-size-giga;
|
||||
font-weight: $font-weight-feather;
|
||||
}
|
||||
|
||||
.message {
|
||||
color: $color-gray;
|
||||
margin: $space-normal auto;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: $space-medium;
|
||||
}
|
||||
}
|
||||
// To be removed
|
||||
|
||||
@@ -1,100 +1,69 @@
|
||||
.tabs--container {
|
||||
display: flex;
|
||||
@apply flex;
|
||||
}
|
||||
|
||||
.tabs--container--with-border {
|
||||
@include border-normal-bottom;
|
||||
@apply border-b border-slate-50 dark:border-slate-800/50;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
border-top-width: 0;
|
||||
display: flex;
|
||||
min-width: var(--space-mega);
|
||||
padding: 0 var(--space-normal);
|
||||
@apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4;
|
||||
}
|
||||
|
||||
.tabs--with-scroll {
|
||||
@apply overflow-hidden py-0 px-1;
|
||||
max-width: calc(100% - 64px);
|
||||
overflow: hidden;
|
||||
padding: 0 var(--space-smaller);
|
||||
}
|
||||
|
||||
.tabs--scroll-button {
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
min-width: var(--space-large);
|
||||
@apply items-center rounded-none cursor-pointer flex h-auto justify-center min-w-[2rem];
|
||||
}
|
||||
|
||||
// Tab chat type
|
||||
.tab--chat-type {
|
||||
@include flex;
|
||||
@apply flex;
|
||||
|
||||
.tabs-title {
|
||||
a {
|
||||
font-size: var(--font-size-default);
|
||||
font-weight: var(--font-weight-medium);
|
||||
padding-bottom: var(--space-slab);
|
||||
padding-top: var(--space-slab);
|
||||
@apply text-base font-medium py-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-title {
|
||||
flex-shrink: 0;
|
||||
margin: 0 var(--space-small);
|
||||
@apply flex-shrink-0 my-0 mx-2;
|
||||
|
||||
.badge {
|
||||
background: var(--color-background);
|
||||
border-radius: var(--space-small);
|
||||
color: var(--color-gray);
|
||||
font-size: var(--font-size-micro);
|
||||
font-weight: var(--font-weight-black);
|
||||
margin: 0 var(--space-smaller);
|
||||
padding: var(--space-smaller);
|
||||
@apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
@apply ml-0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
@apply mr-0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
a {
|
||||
color: darken($medium-gray, 20%);
|
||||
@apply text-slate-800 dark:text-slate-100;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: $medium-gray;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: var(--font-size-small);
|
||||
position: relative;
|
||||
top: 1px;
|
||||
@apply flex items-center flex-row border-b border-transparent text-slate-600 dark:text-slate-200 text-sm top-[1px] relative;
|
||||
transition: border-color 0.15s $swift-ease-out-function;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
a {
|
||||
border-bottom-color: var(--color-woot);
|
||||
color: var(--color-woot);
|
||||
@apply border-b border-woot-500 text-woot-500 dark:text-woot-500;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: $color-extra-light-blue;
|
||||
color: var(--color-woot);
|
||||
@apply bg-woot-50 dark:bg-woot-500 text-woot-500 dark:text-woot-50 dark:bg-opacity-40;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
table {
|
||||
border-spacing: 0;
|
||||
font-size: var(--font-size-small);
|
||||
@apply border-spacing-0 text-sm;
|
||||
|
||||
thead {
|
||||
th {
|
||||
@apply font-medium text-left uppercase text-slate-900 dark:text-slate-200;
|
||||
@apply font-semibold tracking-[1px] text-left uppercase text-slate-900 dark:text-slate-200;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
@apply border-b border-slate-50 dark:border-slate-700;
|
||||
@apply border-b border-slate-50 dark:border-slate-800/30;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: var(--space-small);
|
||||
@apply p-2.5 text-slate-700 dark:text-slate-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -22,37 +21,68 @@ table {
|
||||
.woot-table {
|
||||
tr {
|
||||
.show-if-hover {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s $swift-ease-out-function;
|
||||
@apply opacity-0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.show-if-hover {
|
||||
opacity: 1;
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.agent-name {
|
||||
display: block;
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-transform: capitalize;
|
||||
@apply block font-medium capitalize;
|
||||
}
|
||||
|
||||
.woot-thumbnail {
|
||||
border-radius: 50%;
|
||||
height: 3.125rem;
|
||||
width: 3.125rem;
|
||||
@apply rounded-full h-[3.125rem] w-[3.125rem];
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
@include flex-align(left, null);
|
||||
@include flex;
|
||||
flex-direction: row;
|
||||
min-width: 12.5rem;
|
||||
@apply flex justify-start flex-row min-w-[12.5rem] gap-1;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ve-table {
|
||||
.ve-table-container.ve-table-border-around {
|
||||
@apply border-slate-200 dark:border-slate-700;
|
||||
}
|
||||
|
||||
.ve-table-content {
|
||||
.ve-table-header .ve-table-header-tr .ve-table-header-th {
|
||||
@apply bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-100 border-slate-100 dark:border-slate-700/50;
|
||||
}
|
||||
|
||||
.ve-table-body .ve-table-body-tr .ve-table-body-td {
|
||||
@apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-75 dark:border-slate-800;
|
||||
}
|
||||
|
||||
.ve-table-body.ve-table-row-hover .ve-table-body-tr:hover td {
|
||||
@apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-pagination {
|
||||
.ve-pagination-total {
|
||||
@apply text-slate-600 dark:text-slate-200;
|
||||
}
|
||||
|
||||
.ve-pagination-goto {
|
||||
@apply text-slate-600 dark:text-slate-200;
|
||||
}
|
||||
|
||||
.ve-pagination-li {
|
||||
@apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200 border-slate-75 dark:border-slate-700;
|
||||
}
|
||||
|
||||
.ve-pagination-goto-input {
|
||||
@apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user