Fix down arrow position
This commit is contained in:
Eduard Kuzmenko
parent
e74c576f47
commit
9349027fb8
|
|
@ -233,12 +233,13 @@ $chat-input-border-radius: 1rem;
|
|||
}
|
||||
|
||||
.btn-record-cancel {
|
||||
--multiplier: -1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
top: 0;
|
||||
|
||||
@include hover() {
|
||||
|
|
@ -258,7 +259,11 @@ $chat-input-border-radius: 1rem;
|
|||
// background-color: var(--surface-color) !important;
|
||||
|
||||
// here percents can be used since there are no other transforms
|
||||
transform: translateX(calc(-100% + var(--padding-horizontal) * -1 + #{-$btn-send-margin}));
|
||||
transform: translateX(calc((100% + var(--padding-horizontal) + #{$btn-send-margin}) * var(--multiplier)));
|
||||
|
||||
.is-rtl & {
|
||||
--multiplier: 1;
|
||||
}
|
||||
|
||||
/* @include respond-to(handhelds) {
|
||||
transform: translateX(calc(-100% + #{-.5rem + -$btn-send-margin}));
|
||||
|
|
@ -273,7 +278,7 @@ $chat-input-border-radius: 1rem;
|
|||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
inset-inline-end: 5px;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
border-radius: 50%;
|
||||
|
|
@ -301,14 +306,15 @@ $chat-input-border-radius: 1rem;
|
|||
.float {
|
||||
align-self: center;
|
||||
display: none !important;
|
||||
margin: 0 .75rem 0 0 !important;
|
||||
margin: 0 !important;
|
||||
margin-inline-end: .75rem !important;
|
||||
|
||||
@include animation-level(2) {
|
||||
animation: grow-icon .4s forwards ease-in-out !important;
|
||||
}
|
||||
|
||||
@include respond-to(esg-bottom-new) {
|
||||
margin-right: .125rem !important;
|
||||
margin-inline-end: .125rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -320,7 +326,7 @@ $chat-input-border-radius: 1rem;
|
|||
|
||||
.btn-send-container {
|
||||
position: absolute;
|
||||
right: var(--padding-horizontal);
|
||||
inset-inline-end: var(--padding-horizontal);
|
||||
bottom: 0;
|
||||
padding-bottom: inherit;
|
||||
display: flex;
|
||||
|
|
@ -420,7 +426,7 @@ $chat-input-border-radius: 1rem;
|
|||
height: 10px;
|
||||
background-color: var(--danger-color);
|
||||
border-radius: 50%;
|
||||
margin: 0 9px;
|
||||
margin-inline: 9px;
|
||||
display: inline-block;
|
||||
|
||||
@include animation-level(2) {
|
||||
|
|
@ -512,7 +518,7 @@ $chat-input-border-radius: 1rem;
|
|||
|
||||
&:not(.is-recording) {
|
||||
.btn-record-cancel {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
width: 0px;
|
||||
}
|
||||
}
|
||||
|
|
@ -802,7 +808,7 @@ $chat-input-border-radius: 1rem;
|
|||
|
||||
body.is-right-column-shown & {
|
||||
//left: calc(var(--right-column-width) / -2);
|
||||
right: calc(var(--right-column-width));
|
||||
inset-inline-end: calc(var(--right-column-width));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -906,7 +912,7 @@ $chat-input-border-radius: 1rem;
|
|||
}
|
||||
|
||||
&::before {
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -973,7 +979,7 @@ $chat-input-border-radius: 1rem;
|
|||
}
|
||||
|
||||
.btn-icon {
|
||||
margin: 0 5px 0 6px;
|
||||
margin-inline: 6px 5px;
|
||||
//color: #3f454a;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
|
|
@ -1003,16 +1009,15 @@ $chat-input-border-radius: 1rem;
|
|||
|
||||
&-forward {
|
||||
&:before {
|
||||
margin-right: 14px;
|
||||
margin-inline-end: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&-delete {
|
||||
margin-right: .625rem;
|
||||
margin-left: .375rem;
|
||||
margin-inline: .375rem .625rem;
|
||||
|
||||
&:before {
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1025,7 +1030,7 @@ $chat-input-border-radius: 1rem;
|
|||
}
|
||||
|
||||
.fake-rows-wrapper {
|
||||
left: var(--padding-horizontal);
|
||||
inset-inline-start: var(--padding-horizontal);
|
||||
top: 0;
|
||||
width: calc(100% - var(--chat-input-size) - (var(--padding-horizontal) * 2) - .5rem);
|
||||
}
|
||||
|
|
@ -1082,7 +1087,7 @@ $chat-input-border-radius: 1rem;
|
|||
|
||||
.rows-wrapper {
|
||||
transform: translateX(0) scaleX(1);
|
||||
border-bottom-right-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
// transform: translateX(calc((var(--chat-input-size) + 0.5rem) / -2)) scaleX(1);
|
||||
// transition: transform $input-transition-time, width $input-transition-time, max-height $input-transition-time, border-radius $input-half-transition-time/* , opacity 0s 0s */;
|
||||
// background-color: transparent;
|
||||
|
|
@ -1110,7 +1115,7 @@ $chat-input-border-radius: 1rem;
|
|||
position: absolute;
|
||||
//bottom: -.1875rem;
|
||||
bottom: -1px;
|
||||
right: -8.4px;
|
||||
inset-inline-end: -8.4px;
|
||||
width: 11px;
|
||||
height: 20px;
|
||||
//background-repeat: no-repeat no-repeat;
|
||||
|
|
@ -1118,6 +1123,10 @@ $chat-input-border-radius: 1rem;
|
|||
//background-image: url('assets/img/msg-tail-left-blur.svg');
|
||||
fill: var(--surface-color);
|
||||
transform: scaleX(-1);
|
||||
|
||||
.is-rtl & {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
.attach-file {
|
||||
|
|
@ -1197,7 +1206,7 @@ $chat-input-border-radius: 1rem;
|
|||
.reply {
|
||||
order: 1;
|
||||
flex: 1 1 auto;
|
||||
margin: 0 .625rem;
|
||||
margin-inline: .625rem;
|
||||
// min-height: 35px;
|
||||
|
||||
/* &-content {
|
||||
|
|
@ -1229,11 +1238,11 @@ $chat-input-border-radius: 1rem;
|
|||
.btn-menu {
|
||||
top: auto;
|
||||
bottom: calc(100% + .5rem);
|
||||
left: 3.125rem;
|
||||
inset-inline-start: 3.125rem;
|
||||
transform: scale(1) !important;
|
||||
|
||||
&-item {
|
||||
padding-right: 1.5rem;
|
||||
padding-inline-end: 1.5rem;
|
||||
|
||||
&-text {
|
||||
order: 1;
|
||||
|
|
@ -1243,7 +1252,8 @@ $chat-input-border-radius: 1rem;
|
|||
&-field {
|
||||
--size: 1.25rem;
|
||||
order: 0;
|
||||
margin: 0 var(--icon-margin) 0 0;
|
||||
margin: 0;
|
||||
margin-inline-end: var(--icon-margin);
|
||||
}
|
||||
|
||||
&-box {
|
||||
|
|
@ -1260,7 +1270,7 @@ $chat-input-border-radius: 1rem;
|
|||
}
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
left: calc(var(--padding-horizontal) * -1);
|
||||
inset-inline-start: calc(var(--padding-horizontal) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1321,7 +1331,7 @@ $chat-input-border-radius: 1rem;
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: var(--commands-margin-left);
|
||||
margin-inline-start: var(--commands-margin-left);
|
||||
cursor: pointer;
|
||||
|
||||
.animated-menu-close-icon {
|
||||
|
|
@ -1345,15 +1355,15 @@ $chat-input-border-radius: 1rem;
|
|||
width: var(--send-as-size);
|
||||
height: var(--send-as-size);
|
||||
// margin: 0 0.375rem .4375rem var(--send-as-margin-left);
|
||||
margin-left: var(--send-as-margin-left);
|
||||
margin-inline-start: var(--send-as-margin-left);
|
||||
background: none !important;
|
||||
|
||||
.btn-menu {
|
||||
max-height: 20rem;
|
||||
max-width: 20rem;
|
||||
top: auto;
|
||||
right: auto;
|
||||
left: calc(var(--padding-horizontal) * -1 - .25rem) !important;
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: calc(var(--padding-horizontal) * -1 - .25rem) !important;
|
||||
width: auto;
|
||||
height: auto;
|
||||
transform: scale3d(1, 1, 1);
|
||||
|
|
@ -1366,7 +1376,7 @@ $chat-input-border-radius: 1rem;
|
|||
}
|
||||
|
||||
&-icon {
|
||||
margin-right: calc(var(--icon-margin) - .5rem);
|
||||
margin-inline-end: calc(var(--icon-margin) - .5rem);
|
||||
|
||||
&.active:before {
|
||||
--offset: -.125rem;
|
||||
|
|
@ -1451,7 +1461,7 @@ $chat-input-border-radius: 1rem;
|
|||
|
||||
.input-message-container {
|
||||
--translateX: calc(var(--offset-translateX));
|
||||
margin-right: var(--translateX);
|
||||
margin-inline-end: var(--translateX);
|
||||
transform: translate(var(--translateX));
|
||||
}
|
||||
|
||||
|
|
@ -1514,7 +1524,8 @@ $chat-input-border-radius: 1rem;
|
|||
color: var(--secondary-text-color);
|
||||
|
||||
// ! EXPERIMENTAL
|
||||
margin: 0 var(--button-horizontal-margin) 5px;
|
||||
margin-block: 0 5px;
|
||||
margin-inline: var(--button-horizontal-margin);
|
||||
padding: 0;
|
||||
width: var(--button-size);
|
||||
height: var(--button-size);
|
||||
|
|
@ -1707,7 +1718,7 @@ $chat-input-border-radius: 1rem;
|
|||
//margin-left: 45px;
|
||||
|
||||
.bubble-content-wrapper {
|
||||
margin-left: 45px; //margin-left: 3rem; #DO JS3
|
||||
margin-inline-start: 45px; //margin-left: 3rem; #DO JS3
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
max-width: calc(100% - var(--message-handhelds-margin));
|
||||
|
|
@ -1826,7 +1837,7 @@ $chat-input-border-radius: 1rem;
|
|||
}
|
||||
|
||||
.bubbles-corner-button {
|
||||
right: var(--chat-input-padding);
|
||||
inset-inline-end: var(--chat-input-padding);
|
||||
//top: calc((var(--chat-input-size) * -1) - 6px);
|
||||
bottom: calc(var(--chat-input-size) + var(--bottom) + 10px);
|
||||
z-index: 2;
|
||||
|
|
@ -1842,7 +1853,7 @@ $chat-input-border-radius: 1rem;
|
|||
.badge {
|
||||
position: absolute;
|
||||
top: -.25rem;
|
||||
right: -.25rem;
|
||||
inset-inline-end: -.25rem;
|
||||
|
||||
&.badge-primary:not(.badge-gray) {
|
||||
background-color: var(--chatlist-status-color);
|
||||
|
|
@ -1850,7 +1861,7 @@ $chat-input-border-radius: 1rem;
|
|||
|
||||
@include respond-to(handhelds) {
|
||||
top: -.75rem;
|
||||
right: .1875rem;
|
||||
inset-inline-end: .1875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ body.is-right-column-shown {
|
|||
}
|
||||
|
||||
.chat-info {
|
||||
padding-left: .1875rem;
|
||||
padding-inline-start: .1875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -216,11 +216,11 @@ body.is-right-column-shown {
|
|||
.chat-info {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
padding-left: 49px;
|
||||
padding-inline-start: 49px;
|
||||
//--utils-width: NaN;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
padding-left: 52px;
|
||||
padding-inline-start: 52px;
|
||||
}
|
||||
|
||||
//&.have-utils-width {
|
||||
|
|
@ -267,7 +267,7 @@ body.is-right-column-shown {
|
|||
height: 2.25rem;
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
margin-right: .5rem;
|
||||
margin-inline-end: .5rem;
|
||||
padding: 0 1.375rem; // same as in new media popup
|
||||
|
||||
&:not(.hide) + .chat-mute-button {
|
||||
|
|
@ -277,7 +277,7 @@ body.is-right-column-shown {
|
|||
|
||||
.content {
|
||||
flex: 1 1 auto;
|
||||
padding-left: 1.125rem;
|
||||
padding-inline-start: 1.125rem;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -317,7 +317,7 @@ body.is-right-column-shown {
|
|||
|
||||
.chat:not([data-type="chat"]) & {
|
||||
.content {
|
||||
padding-left: 16px;
|
||||
padding-inline-start: 16px;
|
||||
}
|
||||
|
||||
/* .user-title {
|
||||
|
|
@ -335,8 +335,7 @@ body.is-right-column-shown {
|
|||
min-height: auto !important;
|
||||
position: absolute;
|
||||
top: calc(var(--topbar-call-height) * -1);
|
||||
right: 0;
|
||||
left: 1px; // because I have border-right on left sidebar that "pushes" the chat
|
||||
inset-inline: 1px 0; // because I have border-right on left sidebar that "pushes" the chat
|
||||
color: #fff;
|
||||
z-index: 2;
|
||||
cursor: pointer !important;
|
||||
|
|
@ -346,7 +345,7 @@ body.is-right-column-shown {
|
|||
}
|
||||
|
||||
@include respond-to(until-floating-left-sidebar) {
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
|
|
@ -400,7 +399,7 @@ body.is-right-column-shown {
|
|||
align-items: center;
|
||||
|
||||
.btn-icon {
|
||||
margin-right: .375rem;
|
||||
margin-inline-end: .375rem;
|
||||
}
|
||||
|
||||
.call-description {
|
||||
|
|
@ -441,6 +440,10 @@ body.is-right-column-shown {
|
|||
transform-origin: left center;
|
||||
pointer-events: none;
|
||||
|
||||
.is-rtl & {
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
@include sidebar-transform(false, false);
|
||||
|
||||
&-canvas {
|
||||
|
|
|
|||
|
|
@ -165,6 +165,7 @@ ul.chatlist {
|
|||
--background: unset;
|
||||
background: var(--background) !important;
|
||||
-webkit-user-drag: none;
|
||||
// align-items: stretch !important;
|
||||
|
||||
//@include hover-background-effect();
|
||||
@include hover(filled-gray, --background, false);
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
--offset-left: 0px;
|
||||
margin: 1.5rem 1.1875rem;
|
||||
display: block;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
min-width: var(--size);
|
||||
min-height: var(--size);
|
||||
|
||||
|
||||
@include animation-level(2) {
|
||||
transition: .2s opacity;
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
.checkbox-box {
|
||||
position: absolute;
|
||||
left: var(--offset-left);
|
||||
inset-inline-start: var(--offset-left);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: var(--size);
|
||||
|
|
@ -42,8 +42,8 @@
|
|||
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
|
||||
}
|
||||
|
||||
&-check,
|
||||
&-background,
|
||||
&-check,
|
||||
&-background,
|
||||
&-border {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
}
|
||||
|
||||
&-border {
|
||||
right: 0;
|
||||
inset-inline: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
border: 2px solid #8d969c;
|
||||
|
|
@ -64,12 +64,12 @@
|
|||
right: -15%;
|
||||
bottom: -15%;
|
||||
left: -15%;
|
||||
|
||||
|
||||
background-color: var(--primary-color);
|
||||
transform: scale(1);
|
||||
border-radius: 50%;
|
||||
transition: transform .2s 0s ease-in-out;
|
||||
|
||||
|
||||
@include animation-level(0) {
|
||||
transition: none !important;
|
||||
}
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
|
||||
use {
|
||||
stroke: #fff;
|
||||
stroke-width: 3.75;
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
stroke-dashoffset: 0;
|
||||
transition: stroke-dasharray .1s .15s ease-in-out, visibility 0s .15s;
|
||||
visibility: visible; // fix blinking on parent's transform
|
||||
|
||||
|
||||
@include animation-level(0) {
|
||||
transition: none !important;
|
||||
}
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
|
||||
.checkbox-caption {
|
||||
position: relative;
|
||||
padding-left: 3.375rem;
|
||||
padding-inline-start: 3.375rem;
|
||||
transition: .2s opacity;
|
||||
color: inherit;
|
||||
pointer-events: none;
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
margin-right: 0;
|
||||
|
||||
.checkbox-box {
|
||||
left: auto;
|
||||
inset-inline-start: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -134,7 +134,8 @@
|
|||
overflow: hidden;
|
||||
border-radius: $border-radius-medium;
|
||||
|
||||
.checkbox-box, .checkbox-caption {
|
||||
.checkbox-box,
|
||||
.checkbox-caption {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -172,16 +173,17 @@
|
|||
--size: 1.375rem;
|
||||
--offset-left: 0px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
margin: 1.25rem 0;
|
||||
line-height: var(--line-height); // omg it centers the text
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&.hidden-widget {
|
||||
cursor: default;
|
||||
|
||||
.radio-field-main {
|
||||
&::before, &::after {
|
||||
&::before,
|
||||
&::after {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -193,7 +195,7 @@
|
|||
&::before {
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
|
||||
&::after {
|
||||
transform: translateY(-50%) scale(1);
|
||||
}
|
||||
|
|
@ -203,7 +205,7 @@
|
|||
|
||||
// ! can't use &-main here, check popup create poll
|
||||
.radio-field-main {
|
||||
padding-left: 3.5rem;
|
||||
padding-inline-start: 3.5rem;
|
||||
position: relative;
|
||||
// color: var(--primary-text-color);
|
||||
color: inherit;
|
||||
|
|
@ -213,7 +215,7 @@
|
|||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: var(--offset-left);
|
||||
inset-inline-start: var(--offset-left);
|
||||
top: 50%;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
|
@ -231,7 +233,7 @@
|
|||
}
|
||||
|
||||
&::after {
|
||||
left: calc(var(--offset-left) + .3125rem);
|
||||
inset-inline-start: calc(var(--offset-left) + .3125rem);
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
border-radius: 50%;
|
||||
|
|
@ -253,13 +255,11 @@
|
|||
&.radio-field-right {
|
||||
.radio-field-main {
|
||||
&:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
inset-inline: auto 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: auto;
|
||||
right: .3125rem;
|
||||
inset-inline: auto .3125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -275,7 +275,8 @@
|
|||
} */
|
||||
}
|
||||
|
||||
[type="checkbox"], [type="radio"] {
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
|
|
@ -298,12 +299,13 @@
|
|||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* &:checked + .checkbox-box {
|
||||
|
||||
} */
|
||||
|
||||
&:disabled + .checkbox-box, &:disabled ~ .checkbox-caption {
|
||||
&:disabled + .checkbox-box,
|
||||
&:disabled ~ .checkbox-caption {
|
||||
cursor: default;
|
||||
opacity: var(--disabled-opacity);
|
||||
}
|
||||
|
|
@ -367,7 +369,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 var(--offset);
|
||||
|
||||
|
||||
@include animation-level(2) {
|
||||
transition: background-color .1s;
|
||||
}
|
||||
|
|
@ -381,7 +383,7 @@
|
|||
transform: translateX(calc(var(--offset) * -1));
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
|
||||
|
||||
@include animation-level(2) {
|
||||
transition: border-color .1s, transform .1s cubic-bezier(.22, .75, .7, 1.44);
|
||||
}
|
||||
|
|
@ -390,7 +392,7 @@
|
|||
|
||||
[type="checkbox"]:checked + .checkbox-toggle {
|
||||
background-color: var(--primary-color);
|
||||
|
||||
|
||||
&:before {
|
||||
border-color: var(--primary-color);
|
||||
transform: translateX(calc(var(--toggle-width) - 1.25rem + var(--offset)));
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@
|
|||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
direction: ltr;
|
||||
z-index: 6;
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,10 @@
|
|||
user-select: none;
|
||||
white-space: nowrap;
|
||||
|
||||
.is-rtl & {
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
@include animation-level(2) {
|
||||
transition: .2s transform, .2s padding, .1s opacity, font-weight 0s .1s;
|
||||
}
|
||||
|
|
@ -203,13 +207,13 @@
|
|||
/* &.error, &.valid {
|
||||
transition: .2s border-width;
|
||||
} */
|
||||
|
||||
|
||||
&:focus ~ .arrow-down {
|
||||
margin-top: -4px;
|
||||
transform: rotate(225deg);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
|
||||
&:focus ~ label {
|
||||
color: var(--primary-color);
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
|
@ -224,10 +228,10 @@
|
|||
&:not(:empty):focus ~ label {
|
||||
transition-delay: 0s, 0s, 0s, 0s;
|
||||
} */
|
||||
|
||||
&:focus ~ label,
|
||||
&:valid ~ label,
|
||||
&:not(:empty) ~ label,
|
||||
|
||||
&:focus ~ label,
|
||||
&:valid ~ label,
|
||||
&:not(:empty) ~ label,
|
||||
&:disabled ~ label {
|
||||
transform: translate(-.1875rem, calc(var(--height) / -2 + .0625rem)) scale(.75);
|
||||
padding: 0 .3125rem;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
height: 100vh;
|
||||
width: 1px;
|
||||
background-color: var(--border-color);
|
||||
right: -1px;
|
||||
inset-inline-end: -1px;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
.selector-user {
|
||||
height: 30px;
|
||||
position: absolute !important;
|
||||
left: 6px;
|
||||
inset-inline-start: 6px;
|
||||
top: 6px;
|
||||
z-index: 1;
|
||||
margin-inline-start: 0;
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
}
|
||||
|
||||
.selector-user:last-of-type {
|
||||
left: 38px;
|
||||
inset-inline-start: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -390,7 +390,7 @@
|
|||
}
|
||||
|
||||
&-avatar {
|
||||
left: auto !important;
|
||||
inset-inline-start: auto !important;
|
||||
top: .75rem !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -494,7 +494,7 @@
|
|||
align-self: center;
|
||||
cursor: default;
|
||||
padding-inline-start: 4.5rem;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
height: 3.5rem;
|
||||
|
||||
.force-reconnect {
|
||||
|
|
@ -507,7 +507,7 @@
|
|||
|
||||
.preloader-container {
|
||||
right: auto;
|
||||
left: 1rem;
|
||||
inset-inline-start: 1rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
|
|
@ -820,7 +820,7 @@
|
|||
|
||||
> .checkbox-field {
|
||||
.checkbox-box {
|
||||
left: auto;
|
||||
inset-inline-start: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -997,8 +997,9 @@
|
|||
height: 160px;
|
||||
margin: 1rem auto 1.3125rem;
|
||||
|
||||
.rlottie, .rlottie-vector {
|
||||
left: .625rem;
|
||||
.rlottie,
|
||||
.rlottie-vector {
|
||||
inset-inline-start: .625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ poll-element {
|
|||
margin-top: 7px;
|
||||
font-size: 14px;
|
||||
margin-left: -9px;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
left: 1.5rem;
|
||||
inset-inline-start: 1.5rem;
|
||||
bottom: .5625rem;
|
||||
pointer-events: none;
|
||||
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
.profile-subtitle {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.peer-typing-container {
|
||||
|
|
@ -280,7 +280,7 @@
|
|||
--size: 3.375rem;
|
||||
position: absolute !important;
|
||||
top: calc(var(--size) / -2);
|
||||
right: 1.25rem;
|
||||
inset-inline-end: 1.25rem;
|
||||
transform: none;
|
||||
transition: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
font-size: 15px;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ $row-border-radius: $border-radius-medium;
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
// align-items: flex-start;
|
||||
|
||||
&.no-subtitle,
|
||||
&.row-small {
|
||||
|
|
|
|||
|
|
@ -108,6 +108,10 @@
|
|||
position: relative;
|
||||
border-radius: 50% !important;
|
||||
|
||||
.is-rtl & {
|
||||
float: right;
|
||||
}
|
||||
|
||||
html.is-safari & {
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
|
||||
}
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@
|
|||
max-width: 480px;
|
||||
margin: 1rem auto;
|
||||
line-height: var(--line-height);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
|
||||
li {
|
||||
margin-top: .5rem;
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
h6 {
|
||||
font-size: 1.25rem;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
margin: 0;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
|
||||
&-title {
|
||||
flex: 1;
|
||||
padding: 0 1rem 0 1.5rem;
|
||||
padding-inline: 1.5rem 1rem;
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
@include text-overflow();
|
||||
|
||||
& + .btn {
|
||||
margin-right: .625rem;
|
||||
margin-inline-end: .625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
&-close {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 1rem;
|
||||
margin-inline-start: 1rem;
|
||||
}
|
||||
|
||||
&-header {
|
||||
|
|
|
|||
|
|
@ -890,7 +890,7 @@ b {
|
|||
cursor: pointer;
|
||||
/* font-weight: 500; */
|
||||
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
display: grid;
|
||||
grid-template-columns: calc(26px + 2rem) 1fr 80px;
|
||||
|
||||
|
|
@ -912,7 +912,7 @@ b {
|
|||
|
||||
.phone-code {
|
||||
color: $placeholder-color;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
// this dimensions will be used for monkey business
|
||||
|
|
|
|||
Loading…
Reference in New Issue