908 lines
19 KiB
SCSS
908 lines
19 KiB
SCSS
/*
|
|
* https://github.com/morethanwords/tweb
|
|
* Copyright (C) 2019-2021 Eduard Kuzmenko
|
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
|
*/
|
|
|
|
$btn-menu-z-index: 4;
|
|
|
|
.btn,
|
|
.btn-icon {
|
|
background: none;
|
|
outline: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
|
|
body.animation-level-0 & {
|
|
transition: none;
|
|
}
|
|
|
|
@include btn-hoverable();
|
|
|
|
&:disabled {
|
|
pointer-events: none !important;
|
|
opacity: var(--disabled-opacity);
|
|
}
|
|
}
|
|
|
|
.btn-icon {
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
border-radius: 50% !important;
|
|
color: var(--secondary-text-color);
|
|
background-color: transparent;
|
|
border: none;
|
|
padding: .5rem;
|
|
position: relative;
|
|
// overflow: hidden;
|
|
transition: color .15s ease-in-out, opacity .15s ease-in-out/* , background-color .15s ease-in-out */;
|
|
|
|
/* kostil */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&.rp {
|
|
overflow: hidden;
|
|
}
|
|
|
|
&.active {
|
|
color: var(--primary-color);
|
|
}
|
|
}
|
|
|
|
.btn-corner {
|
|
--offset: 1.25rem;
|
|
--translateY: calc(54px + var(--offset));
|
|
position: absolute !important;
|
|
bottom: var(--offset);
|
|
inset-inline-end: var(--offset);
|
|
//transition: .2s ease;
|
|
transition: transform var(--btn-corner-transition) !important;
|
|
transform: translate3d(0, var(--translateY), 0);
|
|
z-index: 3;
|
|
user-select: none;
|
|
background-color: var(--primary-color);
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
color: #fff;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
box-shadow: none !important;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 !important;
|
|
|
|
@include hover() {
|
|
background-color: var(--dark-primary-color);
|
|
}
|
|
|
|
&.is-visible {
|
|
--translateY: 0;
|
|
}
|
|
|
|
body.animation-level-0 & {
|
|
transition: none !important;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 1 !important;
|
|
pointer-events: all !important;
|
|
}
|
|
|
|
.preloader-circular {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
}
|
|
}
|
|
|
|
.btn-menu {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
background-color: var(--menu-background-color);
|
|
z-index: $btn-menu-z-index;
|
|
top: 100%;
|
|
padding: .3125rem 0;
|
|
border-radius: $border-radius-medium;
|
|
opacity: 0;
|
|
transform: scale(.8) !important;
|
|
transition: opacity var(--btn-menu-transition), transform var(--btn-menu-transition), visibility var(--btn-menu-transition);
|
|
font-size: 1rem;
|
|
backdrop-filter: var(--menu-backdrop-filter);
|
|
min-width: 11.25rem;
|
|
// max-width: 16.25rem;
|
|
|
|
&-old,
|
|
.is-mobile & {
|
|
padding: .5rem 0;
|
|
background-color: var(--surface-color);
|
|
backdrop-filter: none;
|
|
min-width: auto;
|
|
|
|
.btn-menu-item {
|
|
--padding-left: 1rem;
|
|
--padding-right: 2.5rem;
|
|
--icon-margin: 1.5rem;
|
|
--icon-size: 1.5rem;
|
|
height: 3rem;
|
|
line-height: var(--line-height-16);
|
|
font-size: var(--font-size-16);
|
|
border-radius: 0;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
transform: none !important;
|
|
|
|
&:before {
|
|
color: var(--secondary-text-color);
|
|
align-self: unset;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.btn-menu-footer {
|
|
background-color: var(--background-color);
|
|
}
|
|
}
|
|
|
|
&/* ,
|
|
&-reactions */ {
|
|
box-shadow: var(--menu-box-shadow);
|
|
}
|
|
|
|
body.animation-level-0 & {
|
|
transition: none;
|
|
}
|
|
|
|
-webkit-user-select: none; /* disable selection/Copy of UIWebView */
|
|
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
|
|
|
|
&.active {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: scale3d(1, 1, 1) !important; // * scale3d (NOT scale) will fix jumping text
|
|
}
|
|
|
|
.is-mobile &.was-open {
|
|
transform: scale3d(1, 1, 1) !important; // * scale3d (NOT scale) will fix jumping text
|
|
}
|
|
|
|
/* &:not(.active) {
|
|
&, .btn-menu-item {
|
|
pointer-events: none !important;
|
|
}
|
|
} */
|
|
|
|
&.bottom-left,
|
|
.is-rtl &.bottom-right {
|
|
right: 0;
|
|
left: auto;
|
|
top: 100%;
|
|
transform-origin: top right;
|
|
}
|
|
|
|
&.bottom-right,
|
|
.is-rtl &.bottom-left {
|
|
left: 0;
|
|
right: auto;
|
|
top: 100%;
|
|
transform-origin: top left;
|
|
}
|
|
|
|
&.bottom-center {
|
|
transform-origin: top center;
|
|
}
|
|
|
|
&.top-left {
|
|
top: initial;
|
|
right: 0;
|
|
left: auto;
|
|
bottom: 100%;
|
|
transform-origin: bottom right;
|
|
}
|
|
|
|
&.top-right,
|
|
.is-rtl &.top-left {
|
|
top: initial;
|
|
left: 0;
|
|
right: auto;
|
|
bottom: 100%;
|
|
transform-origin: bottom left;
|
|
}
|
|
|
|
&.top-center {
|
|
transform-origin: bottom center;
|
|
}
|
|
|
|
&.center-left {
|
|
transform-origin: center right;
|
|
}
|
|
|
|
&.center-right {
|
|
transform-origin: center left;
|
|
}
|
|
|
|
&-item {
|
|
--padding-vertical: .25rem;
|
|
--padding-left: .75rem;
|
|
--padding-right: .75rem;
|
|
--icon-margin: 1.25rem;
|
|
--icon-size: 1.25rem;
|
|
display: flex;
|
|
position: relative;
|
|
padding: var(--padding-vertical) var(--padding-right) var(--padding-vertical) var(--padding-left);
|
|
height: 2rem;
|
|
cursor: pointer !important;
|
|
pointer-events: all !important;
|
|
color: var(--primary-text-color);
|
|
text-transform: none;
|
|
white-space: nowrap;
|
|
// overflow: hidden;
|
|
// text-overflow: ellipsis;
|
|
align-items: center;
|
|
text-align: start;
|
|
font-size: var(--font-size-14);
|
|
line-height: var(--line-height-14);
|
|
border-radius: .3125rem;
|
|
margin-inline: .3125rem;
|
|
font-weight: 500;
|
|
transform: scale(1);
|
|
|
|
&.tgico-char:before {
|
|
width: var(--icon-size);
|
|
}
|
|
|
|
@include animation-level(2) {
|
|
transition: transform var(--btn-menu-transition);
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(.96);
|
|
}
|
|
|
|
// background-blend-mode: overlay, normal;
|
|
// @include hover() {
|
|
// background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(0, 0, 0, 0.05);
|
|
// }
|
|
|
|
@include hover-background-effect();
|
|
|
|
&.danger {
|
|
@include hover-background-effect(red);
|
|
}
|
|
|
|
&:before {
|
|
color: var(--primary-text-color);
|
|
font-size: var(--icon-size);
|
|
align-self: flex-start;
|
|
margin-top: .125rem;
|
|
}
|
|
|
|
&-icon,
|
|
&:before {
|
|
margin-inline-end: var(--icon-margin);
|
|
position: relative;
|
|
}
|
|
|
|
&-icon {
|
|
--add: .25rem;
|
|
--total: calc(var(--icon-size) + var(--add));
|
|
flex: 0 0 auto;
|
|
width: var(--total);
|
|
height: var(--total);
|
|
margin-inline-end: calc(var(--icon-margin) - var(--add) / 2);
|
|
margin-inline-start: calc(var(--add) / -2);
|
|
|
|
.media-photo {
|
|
width: inherit;
|
|
height: inherit;
|
|
}
|
|
}
|
|
|
|
@include respond-to(handhelds) {
|
|
--padding-right: 1.875rem;
|
|
}
|
|
|
|
&-text {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
|
|
&,
|
|
&-fake {
|
|
// margin-top: 1px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&-fake {
|
|
--margin-left: calc(var(--icon-size) + var(--icon-margin));
|
|
position: absolute;
|
|
margin-inline-start: var(--margin-left);
|
|
max-width: calc(100% - var(--margin-left) - var(--padding-left) - var(--padding-right));
|
|
|
|
@include text-overflow();
|
|
}
|
|
}
|
|
|
|
&-subtitle {
|
|
font-size: .875rem;
|
|
color: var(--secondary-text-color);
|
|
}
|
|
|
|
&-header {
|
|
color: var(--secondary-text-color);
|
|
height: 2rem;
|
|
font-weight: var(--font-weight-bold);
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.stacked-avatars {
|
|
--margin-right: -.6875rem;
|
|
flex: 0 0 auto;
|
|
inset-inline-end: .5rem;
|
|
// margin-right: -1.5rem;
|
|
// margin-left: 1rem;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
|
|
/* @include respond-to(handhelds) {
|
|
margin-right: -.875rem;
|
|
} */
|
|
}
|
|
|
|
&.is-multiline {
|
|
height: auto;
|
|
font-size: .75rem;
|
|
width: fit-content;
|
|
min-width: calc(100% - .625rem);
|
|
max-width: 16.25rem;
|
|
|
|
.btn-menu-item-text {
|
|
white-space: pre-wrap;
|
|
width: fit-content;
|
|
}
|
|
}
|
|
|
|
.checkbox-field-toggle {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/* &-overlay {
|
|
position: fixed !important;
|
|
left: -100vw;
|
|
right: -100vw;
|
|
top: -100vh;
|
|
bottom: -100vh;
|
|
z-index: 1;
|
|
background-color: rgba(0, 0, 0, .2);
|
|
} */
|
|
&-overlay {
|
|
position: fixed !important;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: $btn-menu-z-index;
|
|
cursor: default;
|
|
user-select: none;
|
|
//background-color: rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
/* &-toggle */&-overlay {
|
|
left: -100vw;
|
|
right: -100vw;
|
|
top: -100vh;
|
|
bottom: -100vh;
|
|
|
|
width: auto !important;
|
|
max-width: none !important;
|
|
}
|
|
|
|
&.has-footer {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
&-footer {
|
|
height: 2.5rem;
|
|
// background: var(--background-color-true);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-bottom-left-radius: inherit;
|
|
border-bottom-right-radius: inherit;
|
|
font-size: .875rem;
|
|
color: currentColor;
|
|
// cursor: default;
|
|
|
|
/* &-text {
|
|
margin-top: -.125rem;
|
|
} */
|
|
}
|
|
|
|
hr {
|
|
padding: 0;
|
|
margin: .3125rem 0;
|
|
display: block !important;
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: calc(100% - 1.875rem);
|
|
opacity: .6;
|
|
}
|
|
|
|
html:not(.is-mobile) & .badge {
|
|
background-color: transparent;
|
|
color: var(--secondary-text-color);
|
|
}
|
|
|
|
&-reactions {
|
|
--inner-shadow-degree: 90deg;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
height: inherit;
|
|
border-radius: var(--height);
|
|
background-color: var(--menu-background-color);
|
|
position: absolute;
|
|
opacity: 0;
|
|
transform: scale(.8);
|
|
backdrop-filter: var(--menu-backdrop-filter);
|
|
filter: drop-shadow(0 .125rem .5rem rgba(0, 0, 0, .24));
|
|
transform-origin: bottom left;
|
|
|
|
&-container {
|
|
--height: 2.25rem;
|
|
--bubble-side-offset: 0rem;
|
|
--other-side-offset: 0rem;
|
|
--menu-offset: calc((var(--height) + .5rem) * -1);
|
|
--width: calc(var(--menu-width) + (var(--bubble-side-offset) + var(--other-side-offset)) * -1);
|
|
// position: absolute;
|
|
margin-top: var(--menu-offset);
|
|
width: var(--width);
|
|
max-width: var(--width);
|
|
margin-inline-start: var(--other-side-offset);
|
|
// left: var(--bubble-side-offset);
|
|
display: flex;
|
|
// justify-content: flex-end;
|
|
justify-content: flex-start;
|
|
height: var(--height);
|
|
position: fixed;
|
|
z-index: 4;
|
|
|
|
.contextmenu.center-left + &,
|
|
.contextmenu.bottom-left + & {
|
|
.btn-menu-reactions {
|
|
transform-origin: bottom right !important;
|
|
}
|
|
}
|
|
|
|
.contextmenu.bottom-center + & {
|
|
.btn-menu-reactions {
|
|
transform-origin: bottom center !important;
|
|
}
|
|
}
|
|
|
|
&-vertical {
|
|
// top: var(--other-side-offset);
|
|
// left: calc((var(--height) + .5rem) * -1);
|
|
width: var(--height);
|
|
height: var(--width);
|
|
max-width: var(--height);
|
|
max-height: var(--width);
|
|
flex-direction: column;
|
|
margin-top: 0;
|
|
margin-inline-start: var(--menu-offset);
|
|
|
|
.btn-menu-reactions {
|
|
--inner-shadow-degree: 180deg;
|
|
width: inherit;
|
|
height: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform-origin: top right;
|
|
}
|
|
|
|
.btn-menu-reactions-reaction {
|
|
--padding-vertical: var(--padding-base);
|
|
--padding-horizontal: 0rem;
|
|
}
|
|
|
|
.btn-menu-reactions-bubble-big {
|
|
right: calc(var(--size) / -2);
|
|
bottom: var(--offset);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include animation-level(2) {
|
|
transition: opacity var(--transition-standard-in), transform var(--transition-standard-in);
|
|
}
|
|
|
|
&.is-visible {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
&-bubble {
|
|
position: absolute;
|
|
background-color: inherit;
|
|
border-radius: 50%;
|
|
z-index: -1;
|
|
|
|
/* &-small {
|
|
width: .5rem;
|
|
height: .5rem;
|
|
right: .5rem;
|
|
bottom: -1.25rem;
|
|
} */
|
|
|
|
&-big {
|
|
--size: 1rem;
|
|
--offset: calc(var(--height) / 2);
|
|
width: var(--size);
|
|
height: var(--size);
|
|
right: var(--offset);
|
|
// left: var(--offset);
|
|
bottom: calc(var(--size) / -2);
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
content: " ";
|
|
pointer-events: none;
|
|
border-radius: inherit;
|
|
background: linear-gradient(var(--inner-shadow-degree), var(--surface-color) 0%, rgba(var(--surface-color-rgb), 0) 1rem, rgba(var(--surface-color-rgb), 0) calc(100% - 1rem), var(--surface-color) 100%);
|
|
}
|
|
|
|
.scrollable {
|
|
$padding: .25rem;
|
|
position: relative;
|
|
display: flex;
|
|
border-radius: inherit;
|
|
|
|
&-x {
|
|
align-items: center;
|
|
padding: 0 #{$padding};
|
|
}
|
|
|
|
&-y {
|
|
align-items: center;
|
|
padding: #{$padding} 0;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
&-reaction {
|
|
--size: 1.625rem;
|
|
--padding-base: .25rem;
|
|
--padding-vertical: 0rem;
|
|
--padding-horizontal: var(--padding-base);
|
|
width: calc(var(--size) + var(--padding-horizontal) * 2);
|
|
height: calc(var(--size) + var(--padding-vertical) * 2);
|
|
flex: 0 0 auto;
|
|
padding: var(--padding-vertical) var(--padding-horizontal);
|
|
cursor: pointer;
|
|
|
|
&-scale {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
html:not(.is-safari) & {
|
|
transform: scale(1);
|
|
}
|
|
|
|
html:not(.is-safari) body.animation-level-2 & {
|
|
transition: transform .1s linear;
|
|
}
|
|
}
|
|
|
|
&-select {
|
|
html.no-touch:not(.is-safari) & {
|
|
transform: scale(1);
|
|
|
|
&:hover,
|
|
&:active {
|
|
transform: scale(1.25);
|
|
}
|
|
}
|
|
|
|
html.no-touch:not(.is-safari) body.animation-level-2 & {
|
|
transition: transform var(--transition-standard-in);
|
|
}
|
|
}
|
|
|
|
.media-sticker-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
/* position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0; */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-primary {
|
|
border-radius: $border-radius-medium;
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 54px;
|
|
border: none;
|
|
font-weight: var(--font-weight-bold);
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding: 0; // new
|
|
transition: .2s opacity;
|
|
|
|
@include hover() {
|
|
transition: /* .2s background-color, */.2s opacity;
|
|
background: var(--dark-primary-color);
|
|
}
|
|
|
|
&-transparent {
|
|
color: var(--primary-color);
|
|
background-color: transparent;
|
|
|
|
@include hover() {
|
|
background: var(--light-primary-color);
|
|
}
|
|
|
|
.c-ripple__circle {
|
|
background-color: var(--light-primary-color);
|
|
}
|
|
|
|
&.danger {
|
|
@include hover-background-effect(red, false);
|
|
}
|
|
|
|
.preloader-circular .preloader-path {
|
|
stroke: var(--primary-color);
|
|
}
|
|
}
|
|
|
|
body.animation-level-0 & {
|
|
transition: none;
|
|
}
|
|
|
|
> svg,
|
|
use {
|
|
height: calc(100% - 20px);
|
|
inset-inline-end: 15px;
|
|
left: auto;
|
|
}
|
|
|
|
&:disabled {
|
|
pointer-events: none !important;
|
|
opacity: var(--disabled-opacity);
|
|
}
|
|
}
|
|
|
|
.btn-control {
|
|
width: auto;
|
|
height: 2.5rem;
|
|
line-height: 2.5rem;
|
|
align-items: center;
|
|
padding-inline: .75rem 1.5rem;
|
|
margin: .9375rem auto 1rem;
|
|
border-radius: 1.25rem;
|
|
display: flex;
|
|
|
|
&.tgico:before {
|
|
font-size: 1.5rem;
|
|
margin-inline-end: .375rem;
|
|
}
|
|
}
|
|
|
|
// ! example: multiselect input, button in pinned messages chat, settings, chat background tab
|
|
.btn-transparent {
|
|
color: var(--primary-text-color);
|
|
background-color: transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 1rem;
|
|
height: 3rem;
|
|
//width: auto;
|
|
//text-transform: capitalize;
|
|
font-weight: normal;
|
|
line-height: var(--line-height); // * it centers the text
|
|
|
|
@include respond-to(handhelds) {
|
|
height: 3rem;
|
|
}
|
|
|
|
@include hover-background-effect();
|
|
|
|
&.danger {
|
|
@include hover-background-effect(red);
|
|
}
|
|
|
|
&.primary {
|
|
@include hover-background-effect(primary);
|
|
}
|
|
|
|
// * tgico
|
|
&:before {
|
|
color: var(--secondary-text-color);
|
|
font-size: 1.5rem;
|
|
margin-inline-end: 2rem;
|
|
|
|
@include respond-to(handhelds) {
|
|
margin-inline-end: 1.5rem;
|
|
}
|
|
}
|
|
|
|
&.btn-short:before {
|
|
margin-inline-end: 1rem;
|
|
}
|
|
}
|
|
|
|
.btn-primary.btn-circle {
|
|
.preloader-circular {
|
|
height: calc(100% - 20px);
|
|
right: auto;
|
|
left: auto;
|
|
margin: 0;
|
|
top: 10px;
|
|
|
|
.preloader-path {
|
|
stroke: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-menu-toggle {
|
|
position: relative;
|
|
overflow: visible !important;
|
|
font-weight: normal !important;
|
|
cursor: pointer !important;
|
|
pointer-events: all !important;
|
|
|
|
&:not(.btn-primary):not(.btn-corner).menu-open {
|
|
background-color: var(--light-secondary-text-color);
|
|
}
|
|
|
|
.btn-menu {
|
|
margin-top: .5rem;
|
|
}
|
|
}
|
|
|
|
.btn-circle {
|
|
--size: 54px;
|
|
border-radius: 50%;
|
|
height: var(--size);
|
|
width: var(--size);
|
|
line-height: var(--size);
|
|
|
|
@include respond-to(handhelds) {
|
|
--size: 46px;
|
|
}
|
|
|
|
path {
|
|
fill: white;
|
|
}
|
|
}
|
|
|
|
.btn-disabled {
|
|
pointer-events: none !important;
|
|
cursor: default !important;
|
|
color: var(--secondary-text-color) !important;
|
|
|
|
&:before {
|
|
color: inherit !important;
|
|
}
|
|
}
|
|
|
|
.btn-secondary:not(:first-child) {
|
|
margin-top: .5rem !important;
|
|
}
|
|
|
|
.btn-color-primary {
|
|
background: var(--primary-color);
|
|
color: #fff;
|
|
|
|
/* .c-ripple__circle {
|
|
background-color: var(--light-primary-color);
|
|
} */
|
|
}
|
|
|
|
.call-button {
|
|
width: var(--call-button-size);
|
|
height: var(--call-button-size);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
font-size: 1.5rem;
|
|
position: relative;
|
|
border-radius: 50%;
|
|
backdrop-filter: blur(25px);
|
|
|
|
&-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
width: var(--call-button-size);
|
|
|
|
&.disabled {
|
|
pointer-events: none;
|
|
|
|
.call-button { // ! fix backdrop-filter transition
|
|
pointer-events: none;
|
|
|
|
&,
|
|
&-text {
|
|
opacity: .8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-text {
|
|
white-space: nowrap;
|
|
font-size: .875rem;
|
|
margin-top: .25rem;
|
|
|
|
@include animation-level(2) {
|
|
transition: opacity var(--transition-standard-in);
|
|
}
|
|
}
|
|
|
|
@include animation-level(2) {
|
|
transition: background-color var(--transition-standard-in), opacity var(--transition-standard-in);
|
|
}
|
|
|
|
& + &,
|
|
&-container + &-container {
|
|
margin-inline-start: var(--call-button-margin);
|
|
}
|
|
}
|
|
|
|
// .btn-update {
|
|
// position: absolute;
|
|
// right: 0;
|
|
// bottom: 0;
|
|
// left: 0;
|
|
// height: 2.5rem;
|
|
// line-height: 2.5rem;
|
|
// text-align: center;
|
|
// color: #fff;
|
|
|
|
// &-weave {
|
|
// position: absolute;
|
|
// top: 0;
|
|
// right: 0;
|
|
// bottom: -2.5rem;
|
|
// left: 0;
|
|
// z-index: -1;
|
|
// transform: scale(1, -1);
|
|
|
|
// &-canvas {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
.btn-update {
|
|
width: auto;
|
|
padding: 0 2rem !important;
|
|
border-radius: var(--size);
|
|
font-size: 1rem;
|
|
font-weight: var(--font-weight-bold);
|
|
/* margin-right: calc(var(--size) + 0.5rem); */
|
|
/* left: var(--offset); */
|
|
inset-inline-end: auto !important;
|
|
}
|