mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-02 03:57:52 +00:00
7d4e6d0257
* chore: Refactor tables in all screen for RTL * Notification page footer * Apply suggestions from code review * chore: Minor ixes * chore: Adds rtl comment * chore: Code clean up for contact table --------- Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
500 lines
9.6 KiB
SCSS
500 lines
9.6 KiB
SCSS
.app-rtl--wrapper {
|
|
direction: rtl;
|
|
|
|
// Primary sidebar
|
|
.primary--sidebar {
|
|
border-left: 1px solid var(--s-50);
|
|
border-right: 0;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Secondary sidebar
|
|
.secondary-sidebar {
|
|
.secondary-menu {
|
|
border-left: 1px solid var(--s-50);
|
|
border-right: 0;
|
|
|
|
.nested.vertical.menu {
|
|
.badge--icon {
|
|
margin-left: var(--space-smaller);
|
|
margin-right: unset;
|
|
}
|
|
|
|
.menu-label {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.secondary-menu--icon {
|
|
margin-left: var(--space-smaller);
|
|
margin-right: unset;
|
|
}
|
|
|
|
.account-context--group .account-context--switch-group {
|
|
--overlay-shadow: linear-gradient(
|
|
to left,
|
|
rgba(255, 255, 255, 0) 0%,
|
|
rgba(255, 255, 255, 1) 50%
|
|
);
|
|
background-image: var(--overlay-shadow);
|
|
}
|
|
|
|
// Help center sidebar
|
|
.sidebar-header--wrap .header-title--wrap {
|
|
margin-left: unset;
|
|
margin-right: var(--space-small);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Woot button
|
|
.button {
|
|
.icon--emoji + .button__content {
|
|
padding-left: 0;
|
|
padding-right: var(--space-small);
|
|
}
|
|
|
|
.icon--font + .button__content {
|
|
padding-left: 0;
|
|
padding-right: var(--space-small);
|
|
}
|
|
|
|
.icon + .button__content {
|
|
padding-left: 0;
|
|
padding-right: var(--space-small);
|
|
}
|
|
}
|
|
|
|
// Settings header
|
|
.settings-header {
|
|
.header--icon {
|
|
margin-left: var(--space-small);
|
|
margin-right: var(--space-smaller);
|
|
}
|
|
}
|
|
|
|
.settings.back-button {
|
|
direction: initial;
|
|
margin-left: var(--space-normal);
|
|
margin-right: var(--space-smaller);
|
|
}
|
|
|
|
// Settings header action button
|
|
.button--fixed-top {
|
|
left: $space-small;
|
|
position: fixed;
|
|
right: unset;
|
|
top: $space-small;
|
|
}
|
|
|
|
// Woot Tabs
|
|
.tabs-title {
|
|
&:first-child {
|
|
margin-left: var(--space-small);
|
|
margin-right: unset;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-left: unset;
|
|
margin-right: var(--space-small);
|
|
}
|
|
}
|
|
|
|
// woot tables
|
|
table,
|
|
thead,
|
|
th {
|
|
text-align: right;
|
|
}
|
|
|
|
// Table footer
|
|
.footer {
|
|
.page-meta {
|
|
direction: initial;
|
|
}
|
|
}
|
|
|
|
// Wizard box
|
|
.wizard-box {
|
|
direction: initial;
|
|
}
|
|
|
|
// 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 {
|
|
p {
|
|
unicode-bidi: plaintext;
|
|
}
|
|
|
|
ul {
|
|
padding-left: unset;
|
|
padding-right: var(--space-two);
|
|
}
|
|
|
|
li {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
// Message items and actions
|
|
li {
|
|
&.right {
|
|
.sender--info {
|
|
padding: var(--space-small) var(--space-smaller)
|
|
var(--space-smaller) 0;
|
|
}
|
|
|
|
.context-menu-wrap {
|
|
margin-left: 0;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Conversation footer
|
|
.conversation-footer {
|
|
.preview-item {
|
|
direction: initial;
|
|
}
|
|
}
|
|
|
|
// Custom attributes section in conversation sidebar
|
|
.conversation-sidebar-wrap .checkbox-wrap {
|
|
.checkbox {
|
|
margin-left: var(--space-small);
|
|
}
|
|
}
|
|
|
|
// Conversation sidebar toggle button
|
|
.sidebar-toggle--button {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
// Conversation sidebar close button
|
|
.close-button--rtl {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
// Resolve actions button
|
|
.resolve-actions {
|
|
.button-group .button:first-child {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: var(--border-radius-normal);
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: var(--border-radius-normal);
|
|
}
|
|
|
|
.button-group .button:last-child {
|
|
border-bottom-left-radius: var(--border-radius-normal);
|
|
border-bottom-right-radius: 0;
|
|
border-top-left-radius: var(--border-radius-normal);
|
|
border-top-right-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Conversation list
|
|
.conversations-list-wrap {
|
|
border-right: 0;
|
|
|
|
.conversation {
|
|
.conversation--meta {
|
|
left: $space-normal;
|
|
right: unset;
|
|
|
|
.unread {
|
|
margin-left: unset;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
.show-more--button {
|
|
margin: unset;
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
.search-header--wrap {
|
|
.search--input {
|
|
text-align: right;
|
|
}
|
|
|
|
.layout-switch__container {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
// Card label
|
|
.label-container {
|
|
.label {
|
|
margin-left: var(--space-smaller);
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
// Secondary sidebar toggle button
|
|
.toggle-sidebar {
|
|
margin-left: 0;
|
|
margin-right: var(--space-minus-small);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
// Bulk actions
|
|
.bulk-action__container {
|
|
.triangle {
|
|
left: var(--triangle-position);
|
|
right: unset;
|
|
}
|
|
|
|
.bulk-action__agents {
|
|
left: var(--space-small);
|
|
right: unset;
|
|
}
|
|
|
|
.labels-container {
|
|
left: var(--space-small);
|
|
right: unset;
|
|
|
|
.label-checkbox {
|
|
margin: 0 0 0 var(--space-one);
|
|
}
|
|
}
|
|
|
|
.actions-container {
|
|
left: var(--space-small);
|
|
right: unset;
|
|
}
|
|
|
|
.bulk-action__teams {
|
|
left: var(--space-small);
|
|
right: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Contact notes
|
|
.card.note-wrap {
|
|
.time-stamp {
|
|
unicode-bidi: plaintext;
|
|
}
|
|
}
|
|
|
|
// Labels
|
|
.label {
|
|
direction: initial;
|
|
}
|
|
|
|
// Notification panel
|
|
.notification-wrap {
|
|
left: 0;
|
|
right: var(--space-jumbo);
|
|
|
|
.action-button {
|
|
margin-left: var(--space-small);
|
|
margin-right: 0;
|
|
}
|
|
|
|
.notification-content--wrap {
|
|
margin-left: 0;
|
|
margin-right: var(--space-small);
|
|
}
|
|
}
|
|
|
|
// Help center
|
|
.article-container .row--article-block {
|
|
td:last-child {
|
|
direction: initial;
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
margin-right: var(--space-one);
|
|
}
|
|
}
|
|
|
|
.edit-article--container {
|
|
.header-right--wrap {
|
|
.button-group .button:first-child {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: var(--border-radius-normal);
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: var(--border-radius-normal);
|
|
}
|
|
|
|
.button-group .button:last-child {
|
|
border-bottom-left-radius: var(--border-radius-normal);
|
|
border-bottom-right-radius: 0;
|
|
border-top-left-radius: var(--border-radius-normal);
|
|
border-top-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
.header-left--wrap {
|
|
.back-button {
|
|
direction: initial;
|
|
}
|
|
}
|
|
|
|
.article--buttons {
|
|
.dropdown-pane {
|
|
left: 0;
|
|
position: absolute;
|
|
right: unset;
|
|
}
|
|
}
|
|
|
|
.sidebar-button {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
.article-settings--container {
|
|
border-left: 0;
|
|
border-right: 1px solid var(--color-border-light);
|
|
flex-direction: row-reverse;
|
|
margin-left: 0;
|
|
margin-right: var(--space-normal);
|
|
padding-left: 0;
|
|
padding-right: var(--space-normal);
|
|
}
|
|
|
|
.category-list--container .header-left--wrap {
|
|
direction: initial;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
// Toggle switch
|
|
.toggle-button {
|
|
&.small {
|
|
span {
|
|
&.active {
|
|
transform: translate(var(--space-minus-small), var(--space-zero));
|
|
}
|
|
}
|
|
}
|
|
|
|
span {
|
|
--minus-space-one-point-five: -1.5rem;
|
|
|
|
&.active {
|
|
transform: translate(
|
|
var(--minus-space-one-point-five),
|
|
var(--space-zero)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Widget builder
|
|
.widget-builder-container .widget-preview {
|
|
direction: initial;
|
|
}
|
|
|
|
// Modal
|
|
.modal-container {
|
|
text-align: right;
|
|
|
|
.modal-footer {
|
|
button {
|
|
margin-left: 0;
|
|
margin-right: var(--space-small);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Other changes
|
|
|
|
.account-selector--wrap {
|
|
direction: initial;
|
|
}
|
|
|
|
.inbox--name .inbox--icon {
|
|
margin-left: var(--space-micro);
|
|
margin-right: 0;
|
|
}
|
|
|
|
.colorpicker--chrome {
|
|
direction: initial;
|
|
}
|
|
|
|
.mention--box {
|
|
direction: initial;
|
|
}
|
|
|
|
.contact--details .contact--bio {
|
|
direction: ltr;
|
|
}
|
|
|
|
.merge-contacts .child-contact-wrap {
|
|
direction: ltr;
|
|
}
|
|
|
|
.contact--form .input-group {
|
|
direction: initial;
|
|
}
|
|
|
|
// scss-lint:disable QualifyingElement
|
|
.dropdown-menu--header > span.title {
|
|
text-align: right;
|
|
}
|
|
}
|