feat: Add RTL Support to Widget (#11022)
This PR adds RTL support to the web widget for improved right-to-left language compatibility, updates colors, and cleans up code. Fixes https://linear.app/chatwoot/issue/CW-4089/rtl-issues-on-widget https://github.com/chatwoot/chatwoot/issues/9791 Other PR: https://github.com/chatwoot/chatwoot/pull/11016
This commit is contained in:
Sivin Varghese
@@ -1,71 +0,0 @@
|
||||
$button-border-width: 1px;
|
||||
// Buttons
|
||||
.button {
|
||||
appearance: none;
|
||||
background: $color-primary;
|
||||
border: $button-border-width solid $color-primary;
|
||||
border-radius: $border-radius;
|
||||
color: $color-white;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: $font-size-default;
|
||||
height: $space-two * 2;
|
||||
line-height: $line-height;
|
||||
outline: none;
|
||||
padding: $space-smaller $space-normal;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: lighten($color-primary, 7%);
|
||||
border-color: $color-primary;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
background: $color-primary;
|
||||
border-color: darken($color-primary, 5%);
|
||||
color: lighten($color-primary, 20%);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-size: $font-size-small;
|
||||
height: $space-medium;
|
||||
padding: $space-smaller $space-slab;
|
||||
}
|
||||
|
||||
&.large {
|
||||
font-size: $font-size-medium;
|
||||
height: $space-larger;
|
||||
padding: $space-small $space-medium;
|
||||
}
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.transparent {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.compact {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
// scss-lint:disable PropertySortOrder DeclarationOrder QualifyingElement
|
||||
$form-border-width: 1px;
|
||||
$input-height: $space-two * 2;
|
||||
|
||||
.form-input {
|
||||
@include placeholder {
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
appearance: none;
|
||||
background: $color-white;
|
||||
border: 1px solid $color-border;
|
||||
border-radius: $border-radius;
|
||||
box-sizing: border-box;
|
||||
color: $color-body;
|
||||
display: block;
|
||||
font-family: $font-family;
|
||||
font-size: $font-size-medium;
|
||||
height: $input-height;
|
||||
line-height: 1.5;
|
||||
max-width: 100%;
|
||||
outline: none;
|
||||
padding: $space-smaller;
|
||||
position: relative;
|
||||
transition: background .2s,
|
||||
border .2s,
|
||||
box-shadow .2s,
|
||||
color .2s;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
// Input sizes
|
||||
&.small {
|
||||
font-size: $font-size-small;
|
||||
height: $space-large;
|
||||
padding: $space-small $space-one;
|
||||
}
|
||||
|
||||
&.default {
|
||||
font-size: $font-size-default;
|
||||
height: $space-medium;
|
||||
padding: $space-smaller $space-slab;
|
||||
}
|
||||
|
||||
&.large {
|
||||
font-size: $font-size-medium;
|
||||
height: $space-larger;
|
||||
padding: $space-slab $space-two;
|
||||
}
|
||||
|
||||
&.input-inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Input types
|
||||
&[type="file"] {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Textarea
|
||||
textarea.form-input {
|
||||
font-family: $font-family;
|
||||
|
||||
@include placeholder {
|
||||
color: $color-light-gray;
|
||||
}
|
||||
|
||||
&,
|
||||
&.large,
|
||||
&.small {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
// scss-lint:disable PseudoElement SpaceBeforeBrace VendorPrefix
|
||||
$shadow-color-1: rgba(50, 50, 93, 0.08);
|
||||
$shadow-color-2: rgba(0, 0, 0, 0.07);
|
||||
$shadow-color-3: rgba(50, 50, 93, 0.08);
|
||||
$shadow-color-4: rgba(0, 0, 0, 0.05);
|
||||
|
||||
$color-shadow-medium: rgba(50, 50, 93, 0.08);
|
||||
$color-shadow-light: rgba(50, 50, 93, 0.04);
|
||||
$color-shadow-large: rgba(50, 50, 93, 0.25);
|
||||
$color-shadow-outline: rgba(66, 153, 225, 0.5);
|
||||
|
||||
@mixin normal-shadow {
|
||||
box-shadow: 0 $space-small $space-normal $shadow-color-1,
|
||||
0 $space-smaller $space-slab $shadow-color-2;
|
||||
}
|
||||
|
||||
@mixin light-shadow {
|
||||
box-shadow: 0 $space-smaller 6px $shadow-color-3, 0 1px 3px $shadow-color-4;
|
||||
}
|
||||
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {
|
||||
@content;
|
||||
}
|
||||
|
||||
&:-moz-placeholder {
|
||||
@content;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
@content;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin shadow {
|
||||
box-shadow: 0 1px 10px 2px $color-shadow-medium,
|
||||
0 1px 5px 1px $color-shadow-light;
|
||||
}
|
||||
|
||||
@mixin shadow-medium {
|
||||
box-shadow: 0 4px 24px 4px $color-shadow-medium,
|
||||
0 2px 16px 2px $color-shadow-light;
|
||||
}
|
||||
|
||||
@mixin shadow-large {
|
||||
box-shadow: 0 10px 15px -16px $color-shadow-medium,
|
||||
0 4px 6px -8px $color-shadow-light;
|
||||
}
|
||||
|
||||
@mixin shadow-big {
|
||||
box-shadow: 0 20px 25px -20px $color-shadow-medium,
|
||||
0 10px 10px -10px $color-shadow-light;
|
||||
}
|
||||
|
||||
@mixin shadow-mega {
|
||||
box-shadow: 0 25px 50px -12px $color-shadow-big;
|
||||
}
|
||||
|
||||
@mixin shadow-inner {
|
||||
box-shadow: inset 0 2px 4px 0 $color-shadow-light;
|
||||
}
|
||||
|
||||
@mixin shadow-outline {
|
||||
box-shadow: 0 0 0 3px $color-shadow-outline;
|
||||
}
|
||||
|
||||
@mixin shadow-none {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@mixin button-size {
|
||||
min-height: $space-large;
|
||||
min-width: $space-large;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.icon-button {
|
||||
@include button-size;
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
// Font sizes
|
||||
$font-size-micro: 0.5rem;
|
||||
$font-size-mini: 0.625rem;
|
||||
$font-size-small: 0.75rem;
|
||||
$font-size-default: 0.875rem;
|
||||
$font-size-medium: 1rem;
|
||||
$font-size-large: 1.25rem;
|
||||
$font-size-big: 1.5rem;
|
||||
$font-size-bigger: 2rem;
|
||||
$font-size-mega: 2.5rem;
|
||||
$font-size-giga: 3.5rem;
|
||||
|
||||
// spaces
|
||||
$zero: 0;
|
||||
$space-micro: 0.125rem;
|
||||
$space-smaller: 0.25rem;
|
||||
$space-small: 0.5rem;
|
||||
$space-one: 0.625rem;
|
||||
$space-slab: 0.75rem;
|
||||
$space-normal: 1rem;
|
||||
$space-two: 1.25rem;
|
||||
$space-medium: 1.5rem;
|
||||
$space-large: 2rem;
|
||||
$space-larger: 3rem;
|
||||
$space-big: 4rem;
|
||||
$space-jumbo: 5rem;
|
||||
$space-mega: 6.25rem;
|
||||
|
||||
$border-radius-small: 0.1875rem;
|
||||
$border-radius-normal: 0.3125rem;
|
||||
|
||||
// font-weight
|
||||
$font-weight-feather: 100;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-normal: 400;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-bold: 600;
|
||||
$font-weight-black: 700;
|
||||
|
||||
// Colors
|
||||
$color-woot: #1f93ff;
|
||||
$color-primary: $color-woot;
|
||||
$color-gray: #6e6f73;
|
||||
$color-light-gray: #999a9b;
|
||||
$color-border: #e0e6ed;
|
||||
$color-border-transparent: rgba(224, 230, 237, 0.5);
|
||||
$color-border-light: #f0f4f5;
|
||||
$color-border-dark: #cad0d4;
|
||||
$color-background: #f4f6fb;
|
||||
$color-background-light: #fafafa;
|
||||
$color-white: #fff;
|
||||
$color-body: #3c4858;
|
||||
$color-heading: #1f2d3d;
|
||||
$color-error: #ff382d;
|
||||
$color-success: #44ce4b;
|
||||
|
||||
// Color-palettes
|
||||
|
||||
$color-primary-light: #c7e3ff;
|
||||
$color-primary-dark: darken($color-woot, 20%);
|
||||
|
||||
// Snackbar default
|
||||
$woot-snackbar-bg: #323232;
|
||||
$woot-snackbar-button: #ffeb3b;
|
||||
|
||||
$swift-ease-out-duration: 0.4s !default;
|
||||
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
|
||||
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
|
||||
|
||||
$border-radius: 0.1875px;
|
||||
$line-height: 1;
|
||||
$footer-height: 11.2rem;
|
||||
$header-expanded-height: $space-medium * 10;
|
||||
|
||||
$font-family: 'Inter',
|
||||
-apple-system,
|
||||
system-ui,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Helvetica Neue',
|
||||
Tahoma,
|
||||
Arial,
|
||||
sans-serif;
|
||||
|
||||
// Break points
|
||||
$break-point-medium: 667px;
|
||||
@@ -4,28 +4,18 @@
|
||||
|
||||
.conversation-wrap {
|
||||
.agent-message {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
margin: 0 0 $space-micro $space-small;
|
||||
max-width: 88%;
|
||||
@apply items-end flex flex-row justify-start mt-0 ltr:mr-0 rtl:mr-2 mb-0.5 ltr:ml-2 rtl:ml-0 max-w-[88%];
|
||||
|
||||
.avatar-wrap {
|
||||
flex-shrink: 0;
|
||||
height: $space-medium;
|
||||
width: $space-medium;
|
||||
@apply flex-shrink-0 h-6 w-6;
|
||||
|
||||
.user-thumbnail-box {
|
||||
margin-top: -$space-large;
|
||||
@apply -mt-8;
|
||||
}
|
||||
}
|
||||
|
||||
.message-wrap {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
margin-left: $space-small;
|
||||
max-width: 90%;
|
||||
@apply flex-grow flex-shrink-0 ltr:ml-2 rtl:mr-2 max-w-[90%];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,10 +32,7 @@
|
||||
}
|
||||
|
||||
.agent-name {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-medium;
|
||||
margin: $space-small 0;
|
||||
padding-left: $space-micro;
|
||||
@apply text-xs font-medium my-2 ltr:pl-0.5 rtl:pr-0.5;
|
||||
}
|
||||
|
||||
.has-attachment {
|
||||
@@ -56,146 +43,127 @@
|
||||
}
|
||||
|
||||
&.has-text {
|
||||
margin-top: $space-smaller;
|
||||
@apply mt-1;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-message-wrap {
|
||||
+ .agent-message-wrap {
|
||||
margin-top: $space-micro;
|
||||
@apply mt-0.5;
|
||||
|
||||
.agent-message .chat-bubble {
|
||||
border-top-left-radius: $space-smaller;
|
||||
@apply ltr:rounded-tl-[0.25rem] rtl:rounded-tr-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
+ .user-message-wrap {
|
||||
margin-top: $space-normal;
|
||||
@apply mt-4;
|
||||
}
|
||||
|
||||
&.has-response + .user-message-wrap {
|
||||
margin-top: $space-micro;
|
||||
@apply mt-0.5;
|
||||
|
||||
.chat-bubble {
|
||||
border-top-right-radius: $space-smaller;
|
||||
@apply ltr:rounded-tr-[0.25rem] rtl:rounded-tl-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
&.has-response + .agent-message-wrap {
|
||||
margin-top: $space-normal;
|
||||
@apply mt-4;
|
||||
}
|
||||
}
|
||||
|
||||
.user-message {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin: 0 $space-smaller $space-micro auto;
|
||||
max-width: 85%;
|
||||
text-align: right;
|
||||
@apply flex items-end flex-row justify-end max-w-[85%] ltr:text-right rtl:text-left mt-0 ltr:ml-auto rtl:mr-auto ltr:mr-1 rtl:ml-1 mb-0.5;
|
||||
|
||||
.message-wrap {
|
||||
margin-right: $space-small;
|
||||
max-width: 100%;
|
||||
@apply max-w-full ltr:mr-2 rtl:ml-2;
|
||||
}
|
||||
|
||||
.in-progress,
|
||||
.is-failed {
|
||||
.in-progress {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.is-failed {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
@apply flex items-end flex-row-reverse;
|
||||
|
||||
.chat-bubble.user {
|
||||
background: $color-error !important;
|
||||
// TODO: Remove the important
|
||||
@apply bg-n-ruby-9 dark:bg-n-ruby-9 #{!important};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user.has-attachment {
|
||||
.icon-wrap {
|
||||
color: $color-white;
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.download {
|
||||
color: $color-white;
|
||||
@apply text-white;
|
||||
}
|
||||
}
|
||||
|
||||
.user-message-wrap {
|
||||
+ .user-message-wrap {
|
||||
margin-top: $space-micro;
|
||||
@apply mt-0.5;
|
||||
|
||||
.user-message .chat-bubble {
|
||||
border-top-right-radius: $space-smaller;
|
||||
@apply ltr:rounded-tr-[0.25rem] rtl:rounded-tl-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
+ .agent-message-wrap {
|
||||
margin-top: $space-normal;
|
||||
@apply mt-4;
|
||||
}
|
||||
}
|
||||
|
||||
p:not(:last-child) {
|
||||
margin-bottom: $space-normal;
|
||||
@apply mb-4;
|
||||
}
|
||||
}
|
||||
|
||||
.unread-messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 0;
|
||||
overflow-y: auto;
|
||||
padding-bottom: $space-small;
|
||||
width: 100%;
|
||||
@apply flex flex-col flex-nowrap mt-0 overflow-y-auto w-full pb-2;
|
||||
|
||||
.chat-bubble-wrap {
|
||||
margin-bottom: $space-smaller;
|
||||
@apply mb-1;
|
||||
|
||||
&:first-child {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
border: 1px solid $color-border-dark;
|
||||
@apply border border-solid border-n-slate-5 dark:border-n-slate-11/50 text-n-black;
|
||||
}
|
||||
|
||||
+ .chat-bubble-wrap {
|
||||
.chat-bubble {
|
||||
border-top-left-radius: $space-smaller;
|
||||
@apply ltr:rounded-tl-[0.25rem] rtl:rounded-tr-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child .chat-bubble {
|
||||
border-bottom-left-radius: $space-two;
|
||||
@apply ltr:rounded-bl-[1.25rem] rtl:rounded-br-[1.25rem];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-widget-right .unread-wrap {
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
@apply ltr:text-right rtl:text-left overflow-hidden;
|
||||
|
||||
.chat-bubble-wrap {
|
||||
.chat-bubble {
|
||||
border-bottom-right-radius: $space-smaller;
|
||||
border-radius: $space-two;
|
||||
@apply ltr:rounded-br-[0.25rem] rtl:rounded-bl-[0.25rem] rounded-[1.25rem];
|
||||
}
|
||||
|
||||
+ .chat-bubble-wrap {
|
||||
.chat-bubble {
|
||||
border-top-right-radius: $space-smaller;
|
||||
@apply ltr:rounded-tr-[0.25rem] rtl:rounded-tl-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child .chat-bubble {
|
||||
border-bottom-right-radius: $space-two;
|
||||
@apply ltr:rounded-br-[1.25rem] rtl:rounded-bl-[1.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -205,15 +173,8 @@
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
@include light-shadow;
|
||||
border-radius: $space-two;
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
font-size: $font-size-default;
|
||||
line-height: 1.5;
|
||||
max-width: 100%;
|
||||
padding: $space-slab $space-normal;
|
||||
text-align: left;
|
||||
@apply shadow-[0_0.25rem_6px_rgba(50,50,93,0.08),0_1px_3px_rgba(0,0,0,0.05)] rounded-[1.25rem] inline-block text-sm leading-[1.5] max-w-full ltr:text-left rtl:text-right py-3 px-4 text-white;
|
||||
|
||||
word-break: break-word;
|
||||
|
||||
:not([audio]) {
|
||||
@@ -221,7 +182,7 @@
|
||||
}
|
||||
|
||||
> a {
|
||||
color: $color-primary;
|
||||
@apply text-n-brand;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@@ -230,19 +191,18 @@
|
||||
}
|
||||
|
||||
&.user {
|
||||
border-bottom-right-radius: $space-smaller;
|
||||
@apply ltr:rounded-br-[0.25rem] rtl:rounded-bl-[0.25rem];
|
||||
|
||||
> a {
|
||||
color: $color-white;
|
||||
@apply text-white;
|
||||
}
|
||||
}
|
||||
|
||||
&.agent {
|
||||
border-bottom-left-radius: $space-smaller;
|
||||
color: $color-body;
|
||||
@apply ltr:rounded-bl-[0.25rem] rtl:rounded-br-[0.25rem] text-n-slate-12;
|
||||
|
||||
.link {
|
||||
color: $color-woot;
|
||||
@apply text-n-brand;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,20 +5,12 @@
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
@import 'variables';
|
||||
@import 'buttons';
|
||||
@import 'mixins';
|
||||
@import 'forms';
|
||||
@import 'utilities';
|
||||
@import 'shared/assets/fonts/widget_fonts';
|
||||
@import 'views/conversation';
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: $font-family;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
height: 100%;
|
||||
@apply antialiased h-full bg-n-background;
|
||||
}
|
||||
|
||||
.is-mobile {
|
||||
@@ -43,19 +35,15 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
ul {
|
||||
list-style: disc;
|
||||
padding-left: $space-slab;
|
||||
@apply ltr:pl-3 rtl:pr-3;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
padding-left: $space-normal;
|
||||
@apply ltr:pl-4 rtl:pr-4;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,3 +70,316 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
@apply block font-medium py-1 px-0 capitalize;
|
||||
}
|
||||
|
||||
input:not(.reset-base),
|
||||
textarea:not(.reset-base) {
|
||||
font-family: inherit;
|
||||
@apply rounded-lg box-border bg-n-background dark:bg-n-alpha-2 border-none outline outline-1 outline-offset-[-1px] outline-n-weak block text-base leading-[1.5] p-2.5 w-full text-n-slate-12 focus:outline-n-brand focus:ring-1 focus:ring-n-brand;
|
||||
|
||||
&:disabled {
|
||||
@apply opacity-40 cursor-not-allowed;
|
||||
}
|
||||
|
||||
&:placeholder-shown {
|
||||
@apply text-ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
select:not(.reset-base) {
|
||||
@apply bg-n-background dark:bg-n-alpha-2 w-full p-2.5 border-none outline outline-1 outline-offset-[-1px] outline-n-weak rounded-lg text-n-slate-12 text-base ltr:pr-10 rtl:pl-10 font-normal ltr:bg-[right_-1.6rem_center] rtl:bg-[left_-1.6rem_center] focus:outline-n-brand focus:ring-1 focus:ring-n-brand;
|
||||
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 9px 6px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
p code {
|
||||
@apply bg-n-slate-3 dark:bg-n-alpha-2 text-n-slate-11 text-sm inline-block rounded py-px px-1;
|
||||
}
|
||||
|
||||
pre {
|
||||
@apply bg-n-slate-3 dark:bg-n-alpha-2 text-n-slate-11 overflow-y-auto rounded-md p-2 mt-1 mb-2 block leading-[1.5] whitespace-pre-wrap;
|
||||
|
||||
code {
|
||||
@apply bg-transparent text-n-slate-11 p-0 text-sm;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@apply ltr:border-l-4 rtl:border-r-4 border-n-slate-3 dark:border-n-alpha-2 border-solid my-1 px-0 text-n-slate-11 py-1 ltr:pr-2 rtl:pr-4 ltr:pl-4 rtl:pl-2;
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply appearance-none bg-n-brand border border-solid border-n-brand text-white cursor-pointer inline-block text-sm h-10 leading-none outline-none outline-0 py-1 px-4 text-center no-underline select-none align-middle whitespace-nowrap;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
@apply no-underline border-n-brand brightness-110;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
@apply no-underline border-n-brand brightness-125;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.small {
|
||||
@apply text-xs h-6 py-1 px-3;
|
||||
}
|
||||
|
||||
&.large {
|
||||
@apply text-base h-12 py-2 px-6;
|
||||
}
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.transparent {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.compact {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// scss-lint:disable PropertySortOrder
|
||||
@layer base {
|
||||
// NEXT COLORS START
|
||||
:root {
|
||||
// slate
|
||||
--slate-1: 252 252 253;
|
||||
--slate-2: 249 249 251;
|
||||
--slate-3: 240 240 243;
|
||||
--slate-4: 232 232 236;
|
||||
--slate-5: 224 225 230;
|
||||
--slate-6: 217 217 224;
|
||||
--slate-7: 205 206 214;
|
||||
--slate-8: 185 187 198;
|
||||
--slate-9: 139 141 152;
|
||||
--slate-10: 128 131 141;
|
||||
--slate-11: 96 100 108;
|
||||
--slate-12: 28 32 36;
|
||||
|
||||
// iris
|
||||
--iris-1: 253 253 255;
|
||||
--iris-2: 248 248 255;
|
||||
--iris-3: 240 241 254;
|
||||
--iris-4: 230 231 255;
|
||||
--iris-5: 218 220 255;
|
||||
--iris-6: 203 205 255;
|
||||
--iris-7: 184 186 248;
|
||||
--iris-8: 155 158 240;
|
||||
--iris-9: 91 91 214;
|
||||
--iris-10: 81 81 205;
|
||||
--iris-11: 87 83 198;
|
||||
--iris-12: 39 41 98;
|
||||
|
||||
// ruby
|
||||
--ruby-1: 255 252 253;
|
||||
--ruby-2: 255 247 248;
|
||||
--ruby-3: 254 234 237;
|
||||
--ruby-4: 255 220 225;
|
||||
--ruby-5: 255 206 214;
|
||||
--ruby-6: 248 191 200;
|
||||
--ruby-7: 239 172 184;
|
||||
--ruby-8: 229 146 163;
|
||||
--ruby-9: 229 70 102;
|
||||
--ruby-10: 220 59 93;
|
||||
--ruby-11: 202 36 77;
|
||||
--ruby-12: 100 23 43;
|
||||
|
||||
// amber
|
||||
--amber-1: 254 253 251;
|
||||
--amber-2: 254 251 233;
|
||||
--amber-3: 255 247 194;
|
||||
--amber-4: 255 238 156;
|
||||
--amber-5: 251 229 119;
|
||||
--amber-6: 243 214 115;
|
||||
--amber-7: 233 193 98;
|
||||
--amber-8: 226 163 54;
|
||||
--amber-9: 255 197 61;
|
||||
--amber-10: 255 186 24;
|
||||
--amber-11: 171 100 0;
|
||||
--amber-12: 79 52 34;
|
||||
|
||||
// teal
|
||||
--teal-1: 250 254 253;
|
||||
--teal-2: 243 251 249;
|
||||
--teal-3: 224 248 243;
|
||||
--teal-4: 204 243 234;
|
||||
--teal-5: 184 234 224;
|
||||
--teal-6: 161 222 210;
|
||||
--teal-7: 131 205 193;
|
||||
--teal-8: 83 185 171;
|
||||
--teal-9: 18 165 148;
|
||||
--teal-10: 13 155 138;
|
||||
--teal-11: 0 133 115;
|
||||
--teal-12: 13 61 56;
|
||||
|
||||
// gray
|
||||
--gray-1: 252 252 252;
|
||||
--gray-2: 249 249 249;
|
||||
--gray-3: 240 240 240;
|
||||
--gray-4: 232 232 232;
|
||||
--gray-5: 224 224 224;
|
||||
--gray-6: 217 217 217;
|
||||
--gray-7: 206 206 206;
|
||||
--gray-8: 187 187 187;
|
||||
--gray-9: 141 141 141;
|
||||
--gray-10: 131 131 131;
|
||||
--gray-11: 100 100 100;
|
||||
--gray-12: 32 32 32;
|
||||
|
||||
--background-color: 253 253 253;
|
||||
--text-blue: 8 109 224;
|
||||
--border-container: 236 236 236;
|
||||
--border-strong: 235 235 235;
|
||||
--border-weak: 234 234 234;
|
||||
--solid-1: 255 255 255;
|
||||
--solid-2: 255 255 255;
|
||||
--solid-3: 255 255 255;
|
||||
--solid-active: 255 255 255;
|
||||
--solid-amber: 252 232 193;
|
||||
--solid-blue: 218 236 255;
|
||||
--solid-iris: 230 231 255;
|
||||
|
||||
--alpha-1: 67, 67, 67, 0.06;
|
||||
--alpha-2: 201, 202, 207, 0.15;
|
||||
--alpha-3: 255, 255, 255, 0.96;
|
||||
--black-alpha-1: 0, 0, 0, 0.12;
|
||||
--black-alpha-2: 0, 0, 0, 0.04;
|
||||
--border-blue: 39, 129, 246, 0.5;
|
||||
--white-alpha: 255, 255, 255, 0.8;
|
||||
}
|
||||
|
||||
.dark {
|
||||
// slate
|
||||
--slate-1: 17 17 19;
|
||||
--slate-2: 24 25 27;
|
||||
--slate-3: 33 34 37;
|
||||
--slate-4: 39 42 45;
|
||||
--slate-5: 46 49 53;
|
||||
--slate-6: 54 58 63;
|
||||
--slate-7: 67 72 78;
|
||||
--slate-8: 90 97 105;
|
||||
--slate-9: 105 110 119;
|
||||
--slate-10: 119 123 132;
|
||||
--slate-11: 176 180 186;
|
||||
--slate-12: 237 238 240;
|
||||
|
||||
// iris
|
||||
--iris-1: 19 19 30;
|
||||
--iris-2: 23 22 37;
|
||||
--iris-3: 32 34 72;
|
||||
--iris-4: 38 42 101;
|
||||
--iris-5: 48 51 116;
|
||||
--iris-6: 61 62 130;
|
||||
--iris-7: 74 74 149;
|
||||
--iris-8: 89 88 177;
|
||||
--iris-9: 91 91 214;
|
||||
--iris-10: 84 114 228;
|
||||
--iris-11: 158 177 255;
|
||||
--iris-12: 224 223 254;
|
||||
|
||||
// ruby
|
||||
--ruby-1: 25 17 19;
|
||||
--ruby-2: 30 21 23;
|
||||
--ruby-3: 58 20 30;
|
||||
--ruby-4: 78 19 37;
|
||||
--ruby-5: 94 26 46;
|
||||
--ruby-6: 111 37 57;
|
||||
--ruby-7: 136 52 71;
|
||||
--ruby-8: 179 68 90;
|
||||
--ruby-9: 229 70 102;
|
||||
--ruby-10: 236 90 114;
|
||||
--ruby-11: 255 148 157;
|
||||
--ruby-12: 254 210 225;
|
||||
|
||||
// amber
|
||||
--amber-1: 22 18 12;
|
||||
--amber-2: 29 24 15;
|
||||
--amber-3: 48 32 8;
|
||||
--amber-4: 63 39 0;
|
||||
--amber-5: 77 48 0;
|
||||
--amber-6: 92 61 5;
|
||||
--amber-7: 113 79 25;
|
||||
--amber-8: 143 100 36;
|
||||
--amber-9: 255 197 61;
|
||||
--amber-10: 255 214 10;
|
||||
--amber-11: 255 202 22;
|
||||
--amber-12: 255 231 179;
|
||||
|
||||
// teal
|
||||
--teal-1: 13 21 20;
|
||||
--teal-2: 17 28 27;
|
||||
--teal-3: 13 45 42;
|
||||
--teal-4: 2 59 55;
|
||||
--teal-5: 8 72 67;
|
||||
--teal-6: 20 87 80;
|
||||
--teal-7: 28 105 97;
|
||||
--teal-8: 32 126 115;
|
||||
--teal-9: 18 165 148;
|
||||
--teal-10: 14 179 158;
|
||||
--teal-11: 11 216 182;
|
||||
--teal-12: 173 240 221;
|
||||
|
||||
// gray
|
||||
--gray-1: 17 17 17;
|
||||
--gray-2: 25 25 25;
|
||||
--gray-3: 34 34 34;
|
||||
--gray-4: 42 42 42;
|
||||
--gray-5: 49 49 49;
|
||||
--gray-6: 58 58 58;
|
||||
--gray-7: 72 72 72;
|
||||
--gray-8: 96 96 96;
|
||||
--gray-9: 110 110 110;
|
||||
--gray-10: 123 123 123;
|
||||
--gray-11: 180 180 180;
|
||||
--gray-12: 238 238 238;
|
||||
|
||||
--background-color: 18 18 19;
|
||||
--border-strong: 52 52 52;
|
||||
--border-weak: 38 38 42;
|
||||
--solid-1: 23 23 26;
|
||||
--solid-2: 29 30 36;
|
||||
--solid-3: 44 45 54;
|
||||
--solid-active: 53 57 66;
|
||||
--solid-amber: 42 37 30;
|
||||
--solid-blue: 16 49 91;
|
||||
--solid-iris: 38 42 101;
|
||||
--text-blue: 126 182 255;
|
||||
|
||||
--alpha-1: 36, 36, 36, 0.8;
|
||||
--alpha-2: 139, 147, 182, 0.15;
|
||||
--alpha-3: 36, 38, 45, 0.9;
|
||||
--black-alpha-1: 0, 0, 0, 0.3;
|
||||
--black-alpha-2: 0, 0, 0, 0.2;
|
||||
--border-blue: 39, 129, 246, 0.5;
|
||||
--border-container: 236, 236, 236, 0;
|
||||
--white-alpha: 255, 255, 255, 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user