/*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-field { text-align: left !important; } .dc-field { position: absolute; top: 4.1rem; font-size: var(--text-size-xxs); line-height: 1.25; } [dir="ltr"] .dc-field--error { text-align: left; } [dir="rtl"] .dc-field--error { text-align: right; } .dc-field--error { padding-left: 1.1rem; font-size: 1.2rem; font-weight: 400; color: var(--color-text-danger); text-transform: none; line-height: 1.25; line-height: 1; } [dir="ltr"] .dc-field--warn { text-align: left; } [dir="rtl"] .dc-field--warn { text-align: right; } .dc-field--warn { padding-left: 1.2rem; padding-top: 0.4rem; font-size: 1.2rem; font-weight: 400; color: var(--color-text-black); text-transform: none; line-height: 1.25; color: var(--color-text-secondary); } .dc-input__footer .dc-field { position: relative; top: auto; top: initial; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-input { position: relative; width: 100%; display: flex; flex-direction: column; margin-bottom: 3.2rem; line-height: 1.43; } .dc-input:hover:not(.dc-input--disabled) { border-color: var(--color-interactive-hover); } .dc-input[focus-within] { border-color: var(--color-interactive-focus); } .dc-input:focus-within { border-color: var(--color-interactive-focus); } .dc-input[focus-within]:hover { border-color: var(--color-interactive-hover); } .dc-input:focus-within:hover { border-color: var(--color-interactive-hover); } .dc-input--bottom-label-active { margin-bottom: 0; margin-bottom: initial; } .dc-input--bottom-label-active.dc-input--error { margin-bottom: calc(5rem - 12px); } .dc-input__bottom-label { margin-left: 1.2rem; margin-bottom: calc(3.2rem - 12px); } .dc-input--disabled { border-color: var(--color-interactive-default); } .dc-input--disabled .dc-datepicker__display-text { color: var(--color-text-secondary); } @media (max-width: 992px) { .dc-input--error { margin-bottom: 5rem; } } .dc-input--error label { color: var(--brand-primary) !important; } .dc-input--error ::-moz-placeholder { color: var(--color-text-danger) !important; opacity: 1 !important; } .dc-input--error ::placeholder { color: var(--color-text-danger) !important; opacity: 1 !important; } .dc-input__container { display: flex; align-items: center; border-radius: 4px; border: 1px solid var(--color-interactive-default); padding: 0.5rem 1.2rem; height: 4rem; } .dc-input__container:hover:not(.dc-input--disabled) { border-color: var(--color-interactive-hover); } .dc-input__container[focus-within] { border-color: var(--color-interactive-focus); } .dc-input__container:focus-within { border-color: var(--color-interactive-focus); } .dc-input__container[focus-within]:hover { border-color: var(--color-interactive-hover); } .dc-input__container:focus-within:hover { border-color: var(--color-interactive-hover); } .dc-input__container--error { border-color: var(--color-status-danger) !important; } .dc-input__container--disabled { border-color: var(--color-interactive-disabled); } .dc-input__field { background: none; color: var(--color-text-primary); font-size: var(--text-size-xs); text-align: left; width: 100%; height: 100%; min-width: 0; } [dir=rtl] .dc-input__field { text-align: right; } .dc-input__field::-moz-placeholder { line-height: 1.5; opacity: 0; -moz-transition: opacity 0.25s; transition: opacity 0.25s; /* To vertically align placeholder in Firefox */ } .dc-input__field::placeholder { line-height: 1.5; opacity: 0; transition: opacity 0.25s; /* To vertically align placeholder in Firefox */ } @-moz-document url-prefix('') { .dc-input__field::-moz-placeholder { line-height: 1.25; } .dc-input__field::placeholder { line-height: 1.25; } } .dc-input__field--placeholder-visible::-moz-placeholder { opacity: 0.4; } .dc-input__field--placeholder-visible::placeholder { opacity: 0.4; } .dc-input__field { /* Not empty fields */ } .dc-input__field:focus, .dc-input__field:not(:focus):not([value=""]) { outline: none; } .dc-input__field:focus ~ label, .dc-input__field:not(:focus):not([value=""]) ~ label { transform: translate(0, -1.8rem) scale(0.75); padding: 0 4px; } .dc-input__field:disabled { -webkit-text-fill-color: var(--color-text-secondary); opacity: 1; color: var(--color-text-secondary); } .dc-input__field:disabled ~ label { color: var(--color-text-secondary) !important; } .dc-input__field:disabled ~ svg .color1-fill { fill: var(--color-text-secondary); } .dc-input__field:disabled { /* stylelint-disable */ } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .dc-input__field:disabled { color: var(--color-text-primary); } } } .dc-input__field:disabled { /* stylelint-enable */ } .dc-input__field:focus { outline: none; } .dc-input__field:focus ~ label { color: var(--color-interactive-disabled); } .dc-input__field:focus::-moz-placeholder { opacity: 0.4; } .dc-input__field:focus::placeholder { opacity: 0.4; } .dc-input__field:not(.dc-input--no-placeholder):not(:focus):not([value=""]) ~ label { color: var(--color-text-secondary); } .dc-input__field[type=number]::-webkit-inner-spin-button, .dc-input__field[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .dc-input__field[type=number] { -moz-appearance: textfield; } .dc-input__field[type=textarea] { height: 9.6rem; border: none; resize: none; } .dc-input__field[type=textarea] ~ .dc-field--error { top: 10rem; } .dc-input__field { /* To get rid of ugly chrome autofill shadow dom-applied background color */ } .dc-input__field:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px var(--color-surface-primary) inset !important; -webkit-text-fill-color: var(--color-text-primary) !important; } .dc-input__field:-webkit-autofill { border-radius: 4px; } .dc-input__field:-webkit-autofill:hover, .dc-input__field:-webkit-autofill:focus, .dc-input__field:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px var(--color-surface-primary) inset !important; } .dc-input__field::-ms-reveal { display: none; } .dc-input__textarea:not(.dc-input--no-placeholder):not(:focus):empty ~ label { transform: none; color: var(--color-text-secondary); padding: 0 4px; } .dc-input__leading-icon { margin-left: 1rem; top: 1rem; position: absolute; left: 0; pointer-events: none; cursor: text; font-size: var(--text-size-xs); } .dc-input__leading-icon.symbols { top: 0.9rem; } .dc-input__leading-icon.symbols + .dc-input__field { padding-left: 4rem; } .dc-input__leading-icon.symbols--usdc + .dc-input__field, .dc-input__leading-icon.symbols--ust + .dc-input__field { padding-left: 4.8rem; } .dc-input__trailing-icon { right: 0; font-size: var(--text-size-xs); } .dc-input__trailing-icon.symbols { top: 0.9rem; } .dc-input__trailing-icon.symbols + .dc-input__field { padding-right: 4rem; } .dc-input__trailing-icon.symbols--usd { top: 1rem; right: 1.1rem; position: absolute; } .dc-input__trailing-icon.symbols--usdc + .dc-input__field, .dc-input__trailing-icon.symbols--ust + .dc-input__field { padding-right: 4.8rem; } .dc-input__label { white-space: nowrap; color: var(--color-text-secondary); font-size: var(--text-size-xs); background-color: var(--color-surface-primary); position: absolute; pointer-events: none; left: 1.1rem; top: 1.1rem; transition: 0.25s ease all; transform-origin: top left; text-overflow: ellipsis; overflow: hidden; max-width: calc(100% - 1.4rem); } .dc-input:not(.dc-input--no-placeholder) .dc-input:not(.dc-input--no-placeholder) __label { color: var(--color-text-secondary); transition: 0.25s ease all; transform: translateZ(0); } .dc-input__hint { margin: 0.1rem 0 -1.9rem 1.3rem; } .dc-input__hint--relative { margin-left: 1.2rem; position: relative; top: auto; top: initial; } .dc-input__counter { color: var(--color-text-secondary); font-size: 1.2rem; margin-left: 1.2rem; } .dc-input--no-placeholder label { transform: translate(0, -1.8rem) scale(0.75); color: var(--color-text-primary); padding: 0 4px; background-color: var(--color-surface-primary); } .dc-input__footer { display: flex; flex-direction: row; margin-bottom: -1.6rem; } .dc-input__footer > :not(.dc-input__counter) { margin-right: 1.2rem; } .dc-input__footer > .dc-input__counter { margin-left: auto; } .dc-input__wrapper { margin-bottom: 1.6rem; } .dc-input__input-group { border-right-style: none; border-radius: 4px 0 0 4px; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-dropdown-list { position: absolute; margin-top: 4px; border-radius: 4px; z-index: 1; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.24); transform-origin: top; transition: transform 0.25s ease, opacity 0.25s linear; transform: scale(1, 0); cursor: pointer; background-color: var(--color-surface-primary); } .dc-dropdown-list--enter, .dc-dropdown-list--exit { transform: scale(1, 0); opacity: 0; } .dc-dropdown-list--enter-done { transform: scale(1, 1); opacity: 1; } .dc-dropdown-list__group-header { padding: 0.6rem; font-size: 1.4rem; font-weight: bold; color: var(--brand-primary); height: 3.6rem; display: flex; align-items: center; justify-content: center; } .dc-dropdown-list__item { min-height: 40px; display: flex; align-items: center; padding: 1rem 1.6rem; font-size: 1.4rem; color: var(--color-text-secondary); } .dc-dropdown-list__item:hover { background-color: var(--color-interactive-hover); } .dc-dropdown-list__item--active { background-color: var(--color-interactive-active); } .dc-dropdown-list__item-icon { margin-right: 8px; } .dc-dropdown-list__item--disabled { color: var(--color-text-disabled); cursor: not-allowed; } .dc-dropdown-list__separator { display: flex; width: calc(100% - 3.2rem); border-bottom: 1px solid var(--color-interactive-default); margin: 1.6rem; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-autocomplete { width: 100%; position: relative; } .dc-autocomplete__trailing-icon { position: absolute; right: 0; pointer-events: none; margin-right: 1.1rem; cursor: text; transition: transform 0.2s ease; transform: rotate(0deg); transform-origin: 50% 45%; } .dc-autocomplete__trailing-icon--opened { transform: rotate(-180deg); } .dc-autocomplete__trailing-icon--disabled { --fill-color1: var(--color-text-secondary) !important; } .dc-autocomplete__trailing-icon .color1-fill { fill: var(--color-text-secondary); } .dc-autocomplete .dc-input { margin-bottom: 0; } .dc-autocomplete .dc-input--error .dc-autocomplete__trailing-icon .color1-fill { fill: var(--color-text-danger); } .dc-autocomplete .dc-input__field { white-space: nowrap; text-overflow: ellipsis; } .dc-autocomplete .dc-dropdown-list { box-shadow: 0 8px 16px 0 var(--color-shadow-medium); background: var(--color-surface-primary); } .dc-autocomplete:focus, .dc-autocomplete[focus-within], .dc-autocomplete:active { outline: 0; } .dc-autocomplete:focus, .dc-autocomplete:focus-within, .dc-autocomplete:active { outline: 0; } .dc-autocomplete:focus .dc-input:not(.dc-input--error) .dc-autocomplete__trailing-icon .color1-fill, .dc-autocomplete[focus-within] .dc-input:not(.dc-input--error) .dc-autocomplete__trailing-icon .color1-fill, .dc-autocomplete:active .dc-input:not(.dc-input--error) .dc-autocomplete__trailing-icon .color1-fill { fill: var(--brand-secondary); } .dc-autocomplete:focus .dc-input:not(.dc-input--error) .dc-autocomplete__trailing-icon .color1-fill, .dc-autocomplete:focus-within .dc-input:not(.dc-input--error) .dc-autocomplete__trailing-icon .color1-fill, .dc-autocomplete:active .dc-input:not(.dc-input--error) .dc-autocomplete__trailing-icon .color1-fill { fill: var(--brand-secondary); } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .skeleton { width: 100%; height: 100%; background-color: var(--semantic-color-monochrome-surface-normal-lowest); border-radius: var(--semantic-borderRadius-md); } .skeleton.animated { animation: var(--motion-duration-moderate) ease-out alternate infinite pulsate; } @keyframes pulsate { to { background-color: var(--semantic-color-monochrome-surface-normal-low); } } .skeleton.icon { width: var(--size-generic-md); height: var(--size-generic-md); } .skeleton-paragraph { display: flex; flex-direction: column; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define barspinner */ .barspinner { margin: auto; width: 6rem; height: 2rem; white-space: nowrap; } .barspinner__rect { margin: 0.4rem; border-radius: 20px; height: 60%; width: 0.6rem; display: inline-block; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .barspinner__rect--1 { animation-delay: -1.2s; } .barspinner__rect--2 { animation-delay: -1.1s; } .barspinner__rect--3 { animation-delay: -1s; } .barspinner__rect--4 { animation-delay: -0.9s; } .barspinner__rect--5 { animation-delay: -0.8s; } .barspinner--dark .barspinner__rect { background-color: var(--brand-secondary); } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(1); } 20% { transform: scaleY(2); } } /** @define initial-loader */ .initial-loader { width: 100%; height: 100%; justify-content: center; align-items: center; flex-direction: column; display: flex; background: transparent; } .initial-loader--fullscreen { width: 100vw; height: 100vh; } @media (min-width: 1024px) { .initial-loader--fullscreen { height: calc(100vh - 48px - 36px); } } @media (min-width: 320px) and (max-width: 767px) { .initial-loader--fullscreen { height: calc(100vh - 56px); } } .initial-loader__barspinner { margin: 5rem auto; } .initial-loader__barspinner--rect { background-color: var(--brand-secondary); } .loading-dtrader-v2__trade, .loading-dtrader-v2__positions, .loading-dtrader-v2__contract-details { display: flex; flex-direction: column; height: 100%; } .loading-dtrader-v2__trade { position: relative; overflow-x: hidden; } @media (max-width: 600px) { .loading-dtrader-v2__trade { padding: var(--core-spacing-400); gap: var(--semantic-spacing-general-sm); } } .loading-dtrader-v2__trade .skeleton-box { display: flex; flex-direction: row; height: 100%; border-radius: var(--semantic-borderRadius-md); } @media (max-width: 600px) { .loading-dtrader-v2__trade .skeleton-box { height: auto; height: initial; background-color: var(--component-modal-bg); } } .loading-dtrader-v2__trade .skeleton-box__header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; width: 100%; height: 6.5rem; border-radius: 0; border-radius: initial; border-bottom: 1px solid var(--semantic-color-monochrome-border-normal-mid); padding: var(--semantic-spacing-general-sm) var(--semantic-spacing-general-md); } .loading-dtrader-v2__trade .skeleton-box__header .skeleton { flex-shrink: 0; } @media (max-width: 600px) { .loading-dtrader-v2__trade .skeleton-box__header { height: auto; height: initial; border-bottom: none; padding: 0; padding: initial; } } .loading-dtrader-v2__trade .skeleton-box__header-trade-types { display: flex; gap: var(--core-spacing-400); } .loading-dtrader-v2__trade .skeleton-box__trade-types { display: flex; gap: var(--core-spacing-400); } .loading-dtrader-v2__trade .skeleton-box__market { display: flex; flex-direction: column; padding: 0 var(--semantic-spacing-general-sm); background-color: transparent; background-color: initial; } @media (max-width: 600px) { .loading-dtrader-v2__trade .skeleton-box__market { padding: 0; padding: initial; } } .loading-dtrader-v2__trade .skeleton-box__trade-params { display: flex; flex-direction: column; padding: var(--semantic-spacing-general-md); gap: var(--semantic-spacing-general-md); width: 32rem; } @media (max-width: 600px) { .loading-dtrader-v2__trade .skeleton-box__trade-params { width: auto; width: initial; padding: 0; padding: initial; } } .loading-dtrader-v2__trade .skeleton-box__trade-params-row { display: flex; justify-content: space-between; align-items: center; flex-direction: row; } .loading-dtrader-v2__trade .skeleton-box__trade-params-column { display: flex; flex-direction: column; gap: var(--semantic-spacing-general-sm); } .loading-dtrader-v2__trade .skeleton-box__chart { flex-direction: column; width: calc(100% - 32rem); height: 100%; padding: var(--semantic-spacing-general-sm); } @media (max-width: 600px) { .loading-dtrader-v2__trade .skeleton-box__chart { width: auto; width: initial; padding: 0; padding: initial; } } .loading-dtrader-v2__positions { width: 100%; background-color: var(--semantic-color-slate-solid-surface-frame-mid); } .loading-dtrader-v2__positions .skeleton-box__filters, .loading-dtrader-v2__positions .skeleton-box__total-pnl-or-date { display: flex; gap: var(--semantic-spacing-gap-md); margin: var(--semantic-spacing-gap-md) 0; padding: 0 var(--semantic-spacing-gap-md); } .loading-dtrader-v2__positions .skeleton-box__tabs { display: flex; background-color: var(--component-modal-bg); width: 100%; justify-content: space-around; padding: 1.3rem 0; } .loading-dtrader-v2__positions .skeleton-box__total-pnl-or-date { justify-content: space-between; } .loading-dtrader-v2__positions .skeleton-box__contract-cards { width: 100%; display: flex; flex-direction: column; gap: var(--semantic-spacing-gap-md); padding: 0 var(--semantic-spacing-gap-md); } .loading-dtrader-v2__contract-details { background-color: var(--semantic-color-slate-solid-surface-frame-mid); padding: var(--core-spacing-400); gap: var(--semantic-spacing-general-sm); } .loading-dtrader-v2__contract-details .skeleton-box, .loading-dtrader-v2__contract-details .skeleton-box__chart, .loading-dtrader-v2__contract-details .skeleton-box__details { display: flex; flex-direction: column; border-radius: var(--semantic-borderRadius-md); background-color: var(--component-modal-bg); } .loading-dtrader-v2__contract-details .skeleton-box__chart, .loading-dtrader-v2__contract-details .skeleton-box__chart__chart, .loading-dtrader-v2__contract-details .skeleton-box__details__chart { min-height: 360px; padding: var(--semantic-spacing-general-sm); } .loading-dtrader-v2__contract-details .skeleton-box__details, .loading-dtrader-v2__contract-details .skeleton-box__chart__details, .loading-dtrader-v2__contract-details .skeleton-box__details__details { padding: var(--semantic-spacing-general-md); gap: var(--semantic-spacing-general-md); } .loading-dtrader-v2__contract-details .skeleton-box__details-row, .loading-dtrader-v2__contract-details .skeleton-box__chart__details-row, .loading-dtrader-v2__contract-details .skeleton-box__details__details-row { display: flex; justify-content: space-between; padding-top: var(--semantic-spacing-general-sm); } .loading-dtrader-v2__contract-details .skeleton-box__details-row:first-child, .loading-dtrader-v2__contract-details .skeleton-box__chart__details-row:first-child, .loading-dtrader-v2__contract-details .skeleton-box__details__details-row:first-child { padding-top: 0; padding-top: initial; } .loading-dtrader-v2__contract-details .skeleton-box__details-row:not(:last-child), .loading-dtrader-v2__contract-details .skeleton-box__chart__details-row:not(:last-child), .loading-dtrader-v2__contract-details .skeleton-box__details__details-row:not(:last-child) { border-bottom: 1px solid var(--semantic-color-monochrome-border-normal-mid); padding-bottom: var(--semantic-spacing-general-sm); } .loading-dtrader-v2__contract-details .skeleton-box__details-column, .loading-dtrader-v2__contract-details .skeleton-box__chart__details-column, .loading-dtrader-v2__contract-details .skeleton-box__details__details-column { display: flex; flex-direction: column; align-items: flex-end; gap: var(--semantic-spacing-general-2xs); } .loading-dtrader-v2__contract-card { width: 100%; height: 10.4rem; display: flex; flex-direction: column; justify-content: space-between; gap: var(--semantic-spacing-gap-md); flex-shrink: 0; padding: var(--semantic-spacing-general-md); border-radius: var(--semantic-borderRadius-md); background-color: var(--component-modal-bg); } .loading-dtrader-v2__contract-card .details, .loading-dtrader-v2__contract-card .status-and-profit { display: flex; gap: var(--core-spacing-400); align-items: center; } .loading-dtrader-v2__contract-card .status-and-profit { justify-content: space-between; } .loading-dtrader-v2__contract-card .title { display: flex; flex-direction: column; flex-grow: 1; gap: var(--semantic-spacing-general-xs); } .loading-dtrader-v2__contract-card .stake { align-self: flex-end; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-text { font-size: var(--text-size); color: var(--text-color); line-height: var(--text-lh); font-weight: var(--text-weight); text-align: var(--text-align); } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-btn { text-transform: none !important; } .dc-btn { vertical-align: middle; align-items: center; justify-content: center; touch-action: manipulation; cursor: pointer; white-space: nowrap; padding: 0 1.6rem; display: inline-flex; border: 0; height: 3.2rem; border-radius: 4px; transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1); outline: 0; position: relative; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; /* * Text will be transformed to sentence case in JS * text-transform is declared in .dc-btn instead of .dc-btn__text * to ensure consistency (even for children) as per styleguide */ } .dc-btn__toggle { height: auto; padding: 0.8rem 2.5rem; } .dc-btn__text, .dc-btn__icon { display: flex; font-size: 1.4rem; text-align: center; font-weight: 700; color: var(--color-text-black); text-transform: inherit; line-height: 1.5; color: var(--color-text-secondary); pointer-events: none; } .dc-btn__text--circle, .dc-btn__icon--circle { padding-right: 0; } .dc-btn:not([disabled]):hover { text-decoration: none; } .dc-btn__rounded { border-radius: 24px; } .dc-btn--plus { height: 2.4rem !important; border: 1px solid var(--color-interactive-hover) !important; padding: 0 !important; } .dc-btn--plus { width: 2.4rem; background: inherit; background-repeat: no-repeat; background-position: center; } .dc-btn--circle { width: 3.2rem !important; } .dc-btn--circle { height: 3.2rem; border-radius: 50%; } .dc-btn--circular { border-radius: 100px; } .dc-btn--transparent { background: transparent; } .dc-btn--primary { background: var(--color-button-primary-bg); color: var(--color-surface-primary); } .dc-btn--primary:hover:not([disabled]) { background: var(--color-button-primary-hover); } .dc-btn--primary:active:not([disabled]) { background: var(--color-button-primary-bg); } .dc-btn--primary:disabled, .dc-btn--primary[disabled] { cursor: not-allowed !important; } .dc-btn--primary:disabled, .dc-btn--primary[disabled] { opacity: 0.32; } .dc-btn--primary .dc-btn__text, .dc-btn--primary .dc-btn__icon { color: var(--color-button-primary-text); } .dc-btn--primary__light { background: var(--color-button-primary-bg); } .dc-btn--primary__light:hover:not([disabled]) { background: var(--color-button-primary-hover); } .dc-btn--primary__light:active:not([disabled]) { background: var(--color-button-primary-bg); } .dc-btn--primary__light:disabled, .dc-btn--primary__light[disabled] { cursor: not-allowed !important; } .dc-btn--primary__light:disabled, .dc-btn--primary__light[disabled] { opacity: 0.32; } .dc-btn--primary__light .dc-btn__text, .dc-btn--primary__light .dc-btn__icon { color: var(--color-text-primary); } .dc-btn--secondary { background: transparent; border: 1px solid var(--color-button-secondary-border); } .dc-btn--secondary:hover:not([disabled]) { background: var(--color-button-secondary-hover); } .dc-btn--secondary:active:not([disabled]) { border: 1px solid var(--color-button-secondary-border); } .dc-btn--secondary:disabled, .dc-btn--secondary[disabled] { cursor: not-allowed !important; } .dc-btn--secondary:disabled, .dc-btn--secondary[disabled] { opacity: 0.32; } .dc-btn--secondary .dc-btn__text, .dc-btn--secondary .dc-btn__icon { color: var(--color-button-secondary-text); } .dc-btn--tertiary { background: var(--color-button-tertiary-bg); } .dc-btn--tertiary:hover:not([disabled]) { background: var(--color-button-tertiary-hover); } .dc-btn--tertiary:active:not([disabled]) { background: var(--color-button-tertiary-bg); } .dc-btn--tertiary .dc-btn__text, .dc-btn--tertiary .dc-btn__icon { color: var(--color-button-tertiary-text); } .dc-btn--tertiary:disabled, .dc-btn--tertiary[disabled] { cursor: not-allowed !important; } .dc-btn--tertiary:disabled, .dc-btn--tertiary[disabled] { opacity: 0.32; } .dc-btn--alternate { background: var(--color-button-tertiary-bg); border: 2px solid var(--color-button-primary-bg); } .dc-btn--alternate:hover:not([disabled]) { background: var(--color-button-primary-bg); } .dc-btn--alternate:hover:not([disabled]) .dc-btn__text { color: var(--color-text-primary); } .dc-btn--alternate .dc-btn__text, .dc-btn--alternate .dc-btn__icon { color: var(--color-text-primary); } .dc-btn { /* TODO: confirm this button with designer are we still using this? */ } .dc-btn--green { background: var(--color-status-success); } .dc-btn--green:hover:not([disabled]) { background: var(--transparent-success); } .dc-btn--green:active:not([disabled]) { background: var(--color-status-success); } .dc-btn--green .dc-btn__text, .dc-btn--green .dc-btn__icon { color: var(--color-text-primary); } .dc-btn--black { background: var(--color-button-primary-bg); } .dc-btn--black:hover:not([disabled]) { opacity: 0.7; } .dc-btn--black:active:not([disabled]) { opacity: 0.7; } .dc-btn--black .dc-btn__text, .dc-btn--black .dc-btn__icon { color: var(--color-text-primary); } .dc-btn__small { height: 2.4rem; min-width: 4.8rem; border-width: 1px; } .dc-btn__small .dc-btn__text { font-size: 1.2rem; } .dc-btn__medium { height: 3.2rem; min-width: 5.6rem; border-width: 1px; } .dc-btn__medium .dc-btn__text { font-size: 1.4rem; } .dc-btn__large { height: 4rem; min-width: 6.4rem; border-width: 2px; } .dc-btn__large .dc-btn__text { font-size: 1.4rem; } .dc-btn__wide { width: 100%; height: 4rem; } .dc-btn__effect:focus:not(:active):after { content: ""; position: absolute; top: -0.1em; left: -0.1em; bottom: -0.1em; right: -0.1em; border-radius: inherit; border: 0 solid var(--brand-secondary); opacity: 0.4; animation: buttonEffect 0.4s; animation-fill-mode: forwards; display: block; } .dc-btn__group { white-space: nowrap; } .dc-btn__group .dc-btn + .dc-btn { margin-left: 8px; } .dc-btn__button-group { border-radius: 0 4px 4px 0; } .dc-btn { /* TODO: confirm this button with designer are we still using this? */ /* postcss-bem-linter: ignore */ } .dc-btn .initial-loader--btn { background-color: transparent; background-color: initial; /* postcss-bem-linter: ignore */ } .dc-btn .initial-loader--btn .initial-loader__barspinner--rect { background-color: var(--color-surface-primary); } .dc-btn .initial-loader--btn { /* postcss-bem-linter: ignore */ } .dc-btn .initial-loader--btn .barspinner { margin: 0.6rem 4px 0 -4px; /* postcss-bem-linter: ignore */ } .dc-btn .initial-loader--btn .barspinner__rect { height: 35%; } @keyframes buttonEffect { to { opacity: 0; top: -0.6em; left: -0.6em; bottom: -0.6em; right: -0.6em; border-width: 6px; } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-button-menu */ .dc-button-menu { display: flex; justify-content: center; width: 100%; position: relative; } .dc-button-menu__button:first-child { /*rtl:begin:ignore*/ border-top-left-radius: 4px; border-bottom-left-radius: 4px; /*rtl:end:ignore*/ } .dc-button-menu__button:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .dc-button-menu__button { margin: 0; border: none; border-radius: 0px; width: 50%; background-color: var(--color-surface-primary); /* postcss-bem-linter: ignore */ } .dc-button-menu__button .dc-btn__text { display: contents; } @media (min-width: 1024px) { .dc-button-menu__button:hover:not(.dc-button-menu__button--active) { background-color: var(--color-interactive-hover) !important; } } .dc-button-menu__button { /* postcss-bem-linter: ignore */ } [dir="ltr"] .dc-button-menu__button span { text-align: left; } [dir="rtl"] .dc-button-menu__button span { text-align: right; } .dc-button-menu__button span { font-size: 1.4rem; font-weight: 400; color: var(--color-text-black); text-transform: inherit; line-height: 1.5; color: var(--color-text-secondary); } .dc-button-menu__button--active { background-color: var(--color-interactive-active) !important; } .dc-button-menu__button--active { cursor: auto; cursor: initial; } [dir="ltr"] .dc-button-menu__button--active span { text-align: left; } [dir="rtl"] .dc-button-menu__button--active span { text-align: right; } .dc-button-menu__button--active span { font-size: 1.4rem; font-weight: 700; color: var(--color-text-primary); text-transform: inherit; line-height: 1.5; color: var(--color-text-primary); } .dc-button-menu__toggle { margin: 0; border: none; border-radius: 6px; width: 50%; background-color: var(--color-surface-primary); /* postcss-bem-linter: ignore */ } .dc-button-menu__toggle .dc-btn__text { display: contents; } @media (min-width: 1024px) { .dc-button-menu__toggle:hover:not(.dc-button-menu__button--active) { background-color: var(--color-interactive-hover) !important; } } .dc-button-menu__toggle { /* postcss-bem-linter: ignore */ } [dir="ltr"] .dc-button-menu__toggle span { text-align: left; } [dir="rtl"] .dc-button-menu__toggle span { text-align: right; } .dc-button-menu__toggle span { font-size: 1.4rem; font-weight: 400; color: var(--color-text-black); text-transform: inherit; line-height: 1.5; color: var(--color-text-secondary); } .dc-button-menu__toggle--active { background-color: var(--color-surface-primary) !important; } .dc-button-menu__toggle--active { cursor: auto; cursor: initial; } [dir="ltr"] .dc-button-menu__toggle--active span { text-align: left; } [dir="rtl"] .dc-button-menu__toggle--active span { text-align: right; } .dc-button-menu__toggle--active span { font-size: 1.4rem; font-weight: 700; color: var(--color-text-primary); text-transform: inherit; line-height: 1.5; color: var(--color-text-primary); } .dc-button-menu__counter { margin-left: 0.4rem; } .dc-button-menu__wrapper { position: relative; border-radius: 4px; width: 100%; background-color: var(--color-surface-primary); display: flex; } .dc-button-menu__wrapper .dc-button-menu__button, .dc-button-menu__wrapper .dc-button-menu__button--active { z-index: 1; padding: 0.8rem 0.6rem; white-space: normal; } .dc-button-menu__wrapper .dc-button-menu__button .dc-btn__text, .dc-button-menu__wrapper .dc-button-menu__button--active .dc-btn__text { line-height: normal; } .dc-button-menu__wrapper .dc-button-menu__button:nth-last-child(2) { /*rtl:begin:ignore*/ border-top-right-radius: 4px; border-bottom-right-radius: 4px; /*rtl:end:ignore*/ } .dc-button-menu--highlight { display: block; position: absolute; content: ""; height: 100%; top: 0; /*rtl:begin:ignore*/ left: 0; /*rtl:end:ignore*/ z-index: 0; transition: transform 0.25s ease; pointer-events: none; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-popover__wrapper { position: relative; } .dc-popover__container { position: absolute; /*rtl:ignore*/ left: 0; top: 0; width: 280px; } .dc-popover__container-relative { position: relative; } .dc-popover__target__icon .counter { color: var(--brand-primary); font-size: 10px; font-weight: bold; line-height: 1.4em; position: absolute; top: 50%; transform: translateY(-65%); } .dc-popover__bubble { font-size: 1.2rem; text-align: center; font-weight: 400; color: var(--color-text-primary); text-transform: none; line-height: 1.25; cursor: help; position: relative; padding: 0.8rem; max-width: 31.7rem; border-radius: 4px; display: flex; flex-direction: row; background: var(--color-interactive-active); color: var(--color-text-primary); z-index: 1; } .dc-popover__bubble__icon { flex-grow: 1; margin-right: 0.7em; padding-top: 3px; } .dc-popover__bubble__text { flex-grow: 2; direction: ltr; } .dc-popover__bubble--error { direction: ltr; background-color: var(--color-status-danger); } @media (min-width: 320px) and (max-width: 767px) { .dc-popover__trade-params { max-width: calc(100vw - 6.7rem); } } .mobile-widget__item-popover, .accu-info-display__popover { max-width: 28rem; } @media (min-width: 320px) and (max-width: 767px) { .accu-info-display__popover { max-width: 33rem; margin-right: 1rem; } } .react-tiny-popover-container--disabled-pointer-event { pointer-events: none; } .react-tiny-popover-cursor-option { cursor: pointer; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-calendar */ .dc-calendar { outline: 0; border-radius: 5px; z-index: 999; box-sizing: border-box; font-size: 1rem; background: var(--color-modal-bg); border: 1px solid var(--color-surface-border); box-shadow: 0 2px 8px 0 var(--color-shadow-medium); } .dc-calendar__header, .dc-calendar__footer { position: relative; display: flex; align-items: center; height: 5rem; border-radius: 5px; padding: 1.6rem; box-sizing: border-box; } .dc-calendar__header { justify-content: center; } .dc-calendar__footer :last-child:not(:only-child), .dc-calendar__footer .dc-calendar__btn--today { margin-left: auto; } .dc-calendar__body { border-top: 0.1rem solid var(--color-surface-border); border-bottom: 0.1rem solid var(--color-surface-border); } .dc-calendar__body--date, .dc-calendar__body--month, .dc-calendar__body--year, .dc-calendar__body--decade { display: grid; grid-gap: 1.2rem; padding: 0.8rem 2rem; } .dc-calendar__body--date .dc-calendar__cell, .dc-calendar__body--month .dc-calendar__cell, .dc-calendar__body--year .dc-calendar__cell, .dc-calendar__body--decade .dc-calendar__cell { display: flex; justify-content: center; align-items: center; border-radius: 5px; } .dc-calendar__body--date { grid-template-columns: repeat(7, 2.4rem); grid-auto-rows: 2.4rem; } .dc-calendar__body--date .dc-calendar__cell { width: 100%; height: 100%; } .dc-calendar__body--month, .dc-calendar__body--year, .dc-calendar__body--decade { grid-template-columns: repeat(3, minmax(7.2rem, 1fr)); grid-auto-rows: minmax(4.2rem, auto); } .dc-calendar__body--month .dc-calendar__cell, .dc-calendar__body--year .dc-calendar__cell, .dc-calendar__body--decade .dc-calendar__cell { width: 5.6rem; height: 3.2rem; } .dc-calendar__body--month .dc-calendar__cell--other:not(.dc-calendar__cell--today):not(.dc-calendar__cell--active):not(.dc-calendar__cell--disabled), .dc-calendar__body--year .dc-calendar__cell--other:not(.dc-calendar__cell--today):not(.dc-calendar__cell--active):not(.dc-calendar__cell--disabled), .dc-calendar__body--decade .dc-calendar__cell--other:not(.dc-calendar__cell--today):not(.dc-calendar__cell--active):not(.dc-calendar__cell--disabled) { color: var(--color-text-secondary); } .dc-calendar__body--decade .dc-calendar__cell { width: 100%; } .dc-calendar__icon { cursor: pointer; right: 5%; } .dc-calendar__icon--today:hover { cursor: pointer; } .dc-calendar__btn { text-align: center; padding: 0 0.2rem; font-weight: bold; cursor: pointer; border: none; outline: none; background: none; } .dc-calendar__btn--disabled { cursor: default; transition: none; } .dc-calendar__btn--disabled .dc-calendar__icon { cursor: default; } .dc-calendar__btn--is-hidden { display: none; } [dir="ltr"] .dc-calendar__btn--select { text-align: left; } [dir="rtl"] .dc-calendar__btn--select { text-align: right; } .dc-calendar__btn--select { font-size: 1.4rem; font-weight: 700; color: var(--color-text-black); text-transform: none; line-height: 1.5; color: var(--color-text-primary); } .dc-calendar__btn--prev-year, .dc-calendar__btn--next-year, .dc-calendar__btn--prev-month, .dc-calendar__btn--next-month { position: absolute; padding: 0 0.5em; height: 1.4em; } .dc-calendar__btn--prev-year { left: 7%; } .dc-calendar__btn--next-year { right: 7%; } .dc-calendar__btn--prev-month { left: 14%; } .dc-calendar__btn--next-month { right: 14%; } [dir="ltr"] .dc-calendar__cell { text-align: left; } [dir="rtl"] .dc-calendar__cell { text-align: right; } .dc-calendar__cell { font-size: 1.2rem; font-weight: 400; color: var(--color-text-black); text-transform: none; line-height: 1.25; align-self: center; justify-self: center; position: relative; cursor: pointer; color: var(--color-text-secondary); box-sizing: border-box; } .dc-calendar__cell--hover { color: var(--color-text-secondary); background: var(--color-interactive-hover); } .dc-calendar__cell:nth-child(7n):before { padding: 0; border-radius: 4px; } .dc-calendar__cell:nth-child(7n+1):before { left: 0; border-radius: 4px; } .dc-calendar__cell:nth-child(7n+1):after { content: none; } [dir="ltr"] .dc-calendar__cell--bold { text-align: left; } [dir="rtl"] .dc-calendar__cell--bold { text-align: right; } .dc-calendar__cell--bold { font-size: 1.4rem; font-weight: 700; color: var(--color-text-black); text-transform: none; line-height: 1.5; color: var(--color-text-primary); } .dc-calendar__cell--disabled:not(.dc-calendar__cell--today):not(.dc-calendar__cell--between), .dc-calendar__cell--other:not(.dc-calendar__cell--today):not(.dc-calendar__cell--active):not(.dc-calendar__cell--between) { color: var(--color-text-disabled); transition: none; cursor: default; } .dc-calendar__cell--is-hidden { display: none; } .dc-calendar__cell--today { font-weight: bold; color: var(--color-text-primary); border: 1px solid var(--color-interactive-active); } .dc-calendar__cell--today-duration { background: var(--color-interactive-active); } .dc-calendar__cell--active { font-weight: bold; color: var(--color-text-primary); background: var(--color-interactive-active); } .dc-calendar__cell--active:hover { background: var(--color-interactive-active); } .dc-calendar__cell--active-duration { background: var(--color-interactive-active); } .dc-calendar__cell--active-duration:after { position: absolute; content: ""; width: 100%; top: 0; right: 50%; z-index: -1; height: 100%; padding-left: 1rem; background: var(--color-interactive-active); } .dc-calendar__cell--between { font-weight: bold; color: var(--color-text-primary); background: var(--color-interactive-active); } .dc-calendar__cell--between-hover:before { position: absolute; content: ""; width: 100%; z-index: -2; height: 100%; padding-left: 3.2rem; background: var(--color-interactive-hover); } .dc-calendar__cell--between:hover { background: var(--color-interactive-active); } .dc-calendar__cell--between:before { position: absolute; content: ""; width: 100%; z-index: -1; height: 100%; padding-left: 3.2rem; background: var(--color-interactive-active); } .dc-calendar__cell-tooltip { position: absolute; display: inline-grid; cursor: pointer; height: 0; top: 0; left: 0; justify-content: center; width: 100%; } .dc-calendar__cell-tooltip-icon { display: inherit; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-clipboard { cursor: pointer; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-checkbox { display: flex; justify-content: flex-start; cursor: pointer; align-items: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .dc-checkbox__input { display: none; } .dc-checkbox__box { outline: none !important; } .dc-checkbox__box { display: flex; width: 16px; height: 16px; transition: 0.3s ease-in-out; flex-shrink: 0; margin: 0 8px; border-radius: 2px; align-self: center; box-sizing: border-box; border: 2px solid var(--color-interactive-default); } .dc-checkbox__box--active { border: none; background-color: var(--brand-primary); } .dc-checkbox--active { border: none; background-color: var(--brand-primary); } .dc-checkbox--disabled { cursor: not-allowed !important; } .dc-checkbox--disabled { opacity: 0.5; } .dc-checkbox--grey-disabled { background-color: var(--checkbox-disabled-grey); } .dc-checkbox__label--error { color: var(--color-text-danger) !important; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-circular-progress { position: relative; line-height: 0; width: -moz-fit-content; width: fit-content; } .dc-circular-progress__bar { transform: scaleX(-1) rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s; stroke: var(--brand-secondary); } .dc-circular-progress__bar--warning { stroke: var(--color-status-warning); } .dc-circular-progress__bar--danger { stroke: var(--color-status-danger); } .dc-circular-progress--clockwise { transform: rotate(-90deg); } .dc-circular-progress__icon { position: absolute; width: 1.6rem; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** Slideout Animation */ @keyframes SlideIn { from { opacity: 0; max-height: 0; } to { opacity: 1; height: auto; max-height: 100vh; } } @keyframes SlideOut { from { opacity: 1; max-height: 100vh; } to { opacity: 0; max-height: 0; } } .dc-collapsible { padding: 0.8rem; border-radius: 0.4rem; background-color: var(--color-surface-primary); } .dc-collapsible--has-collapsible-btn { padding-top: 0; } .dc-collapsible--has-title { padding-bottom: 0; } .dc-collapsible__button { display: flex; align-items: center; justify-content: center; height: 32px; } .dc-collapsible__button--handle { align-items: baseline; height: 3.8rem; } .dc-collapsible__icon { transition: transform 0.3s ease-in-out; } .dc-collapsible__icon--handle { width: 4rem; height: 0.4rem; margin-top: 0.8rem; border-radius: 0.2rem; background-color: var(--color-interactive-active); } .dc-collapsible__icon--top { transform: rotate(180deg); } .dc-collapsible__icon--top.dc-collapsible__icon--is-open { transform: rotate(0deg); } .dc-collapsible__icon--bottom.dc-collapsible__icon--is-open { transform: rotate(180deg); } .dc-collapsible__item--collapsed { margin: 0 !important; margin: initial !important; padding: 0 !important; padding: initial !important; } .dc-collapsible__item--collapsed { opacity: 0; max-height: 0; overflow: hidden; } .dc-collapsible__title { margin-left: 0; margin-right: auto; } .dc-collapsible .trade-container__fieldset { flex: 1; } .dc-collapsible .trade-container__fieldset .dc-button-menu__wrapper { height: 4rem; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-counter { align-items: center; background: var(--color-status-danger); border-radius: 0.8rem; color: var(--color-surface-primary); display: inline-flex; font-size: 1rem; font-weight: bold; justify-content: center; line-height: 1; padding: 3px 5px; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-progress-slider */ .dc-progress-slider { position: relative; width: 100%; padding: 0; padding: initial; box-sizing: border-box; margin: 8px 0; border-bottom: 1px solid var(--color-surface-border); } .dc-progress-slider--completed { border-bottom: 1px solid var(--color-surface-border); margin: 0.4rem 0 0.8rem; } .dc-progress-slider__track { background: var(--color-text-disabled); position: relative; margin: 2px 0 8px; height: 6px; width: 100%; border-radius: 8px; } .dc-progress-slider__ticks { position: relative; } .dc-progress-slider__ticks-wrapper { position: relative; margin: 2px 0 8px; height: 6px; width: 100%; display: flex; flex-direction: row; justify-content: space-evenly; } .dc-progress-slider__ticks-step { height: 6px; width: 100%; margin: 0 2px; position: relative; background: var(--color-interactive-hover); } .dc-progress-slider__ticks-step:before { position: absolute; content: ""; transition: transform 0.25s ease-in; transform: scale3d(0, 1, 1); transform-origin: left; left: 0; top: 0; height: 6px; width: 100%; background-color: var(--brand-secondary); } .dc-progress-slider__ticks-step--marked:before { transform: scale3d(1, 1, 1); } .dc-progress-slider__ticks-step:first-child { margin-left: 0; } .dc-progress-slider__ticks-step:last-child { margin-right: 0; } .dc-progress-slider__ticks-step:first-child, .dc-progress-slider__ticks-step:first-child:before { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .dc-progress-slider__ticks-step:last-child, .dc-progress-slider__ticks-step:last-child:before { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .dc-progress-slider__ticks-caption { display: flex; justify-content: space-between; } .dc-progress-slider__line { background: var(--color-interactive-hover); position: absolute; top: 0; left: 0; height: 100%; border-radius: 8px; pointer-events: none; transition: width 0.3s; } .dc-progress-slider__line--ticks { height: 2px; } .dc-progress-slider__line--green { background: var(--color-status-success) !important; } .dc-progress-slider__line--yellow { background: var(--color-status-warning) !important; } .dc-progress-slider__line--red { background: var(--color-status-danger) !important; } .dc-progress-slider__infinite-loader { position: relative; height: 4px; display: block; width: 100%; background-color: var(--color-interactive-hover); border-radius: 2px; background-clip: padding-box; margin: 0.5rem 0 1rem; overflow: hidden; } .dc-progress-slider__infinite-loader--indeterminate { background-color: var(--color-interactive-active); } .dc-progress-slider__infinite-loader--indeterminate:before, .dc-progress-slider__infinite-loader--indeterminate:after { content: ""; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; will-change: left, right; } .dc-progress-slider__infinite-loader--indeterminate:before { animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } .dc-progress-slider__infinite-loader--indeterminate:after { animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation-delay: 1.15s; } @keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define .dc-currency-badge */ .dc-currency-badge { align-self: flex-start; padding: 0.3rem; background-color: var(--brand-secondary); border-radius: 4px; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-tick-progress { display: grid; grid-gap: 0.8rem; } .dc-tick-progress__tick { border-radius: 50%; width: 0.8rem; height: 0.8rem; background-color: var(--color-interactive-disabled); } .dc-tick-progress__tick--on { background-color: var(--brand-secondary); } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-progress-slider-mobile { display: flex; flex-direction: column; align-items: center; } .dc-progress-slider-mobile__timer { margin: 0.2rem auto; } .dc-progress-slider-mobile__infinite-loader { position: relative; height: 4px; display: block; width: 100%; background-color: var(--color-interactive-hover); border-radius: 2px; background-clip: padding-box; margin: 0.5rem 0 1rem; overflow: hidden; } .dc-progress-slider-mobile__infinite-loader--indeterminate { background-color: var(--color-interactive-active); } .dc-progress-slider-mobile__infinite-loader--indeterminate:before, .dc-progress-slider-mobile__infinite-loader--indeterminate:after { content: ""; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; will-change: left, right; } .dc-progress-slider-mobile__infinite-loader--indeterminate:before { animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } .dc-progress-slider-mobile__infinite-loader--indeterminate:after { animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation-delay: 1.15s; } @keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-contract-card-dialog; weak */ .dc-contract-card-dialog { position: fixed; display: grid; background: var(--color-surface-primary); border-radius: 4px; box-shadow: 0 4px 8px 2px var(--color-shadow-medium); transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.25s linear; padding: 1.6rem; width: 240px; z-index: 99; } .dc-contract-card-dialog--enter-done { opacity: 1; transform: translate3d(0, 0, 0); } .dc-contract-card-dialog--enter, .dc-contract-card-dialog--exit { opacity: 0; transform: translate3d(-20px, 0, 0); } @media (max-width: 1279px) { .dc-contract-card-dialog__input { border-bottom: 1px solid var(--color-interactive-disabled); padding: 1rem 1.6rem; } .dc-contract-card-dialog__input .dc-popover { padding: 0.6rem 1rem; } } .dc-contract-card-dialog__input .dc-input-wrapper__input { border: 1px solid var(--color-interactive-default); -webkit-appearance: none; -moz-appearance: none; appearance: none; } .dc-contract-card-dialog__input--currency { position: absolute; height: 3.2rem; right: 4rem; align-items: center; justify-content: center; display: flex; background: transparent; border-color: transparent; z-index: 2; color: inherit; } .dc-contract-card-dialog__input--currency--symbol { padding-bottom: 0.2rem; } .dc-contract-card-dialog__input--currency:before { font-size: 1.4rem; text-align: center; font-weight: 400; color: var(--color-text-black); text-transform: none; line-height: 1.5; color: inherit; } .dc-contract-card-dialog__popover { margin-top: -50%; } .dc-contract-card-dialog__popover--accumulator { margin-top: -20%; } .dc-contract-card-dialog__popover-bubble { /* postcss-bem-linter: ignore */ } .dc-contract-card-dialog__popover-bubble .dc-checkbox { margin-top: 0.8rem; /* postcss-bem-linter: ignore */ } .dc-contract-card-dialog__popover-bubble .dc-checkbox__label { font-size: inherit; } .dc-contract-card-dialog__button { margin-top: 0.8rem; } @media (max-width: 1279px) { .dc-contract-card-dialog__button { display: flex; align-items: end; } } .dc-contract-card-dialog__button .dc-btn { width: 100%; } @media (max-width: 1279px) { .dc-contract-card-dialog__button .dc-btn { flex: 1; height: 4rem; margin: 0.8rem; width: -webkit-fill-available; } } .dc-contract-card-dialog__form { display: grid; flex: 1; } @media (max-width: 1279px) { .dc-contract-card-dialog__form { grid-template-rows: auto auto 1fr; } .dc-contract-card-dialog__form--no-stop-loss { grid-template-rows: auto 1fr; } } @media (min-width: 1280px) { .dc-contract-card-dialog__form { grid-gap: 0.8rem; } } .dc-contract-card-dialog__form .dc-checkbox__box { margin-left: 0; } .dc-contract-card-dialog__total-profit { padding: 1.6rem; border-bottom: 1px solid var(--color-interactive-disabled); color: var(--color-text-secondary); display: flex; align-items: center; justify-content: space-between; font-size: 1.4rem; } /** @define dc-contract-card-dialog-toggle; */ .dc-contract-card-dialog-toggle { all: unset; position: absolute; display: flex; justify-content: end; width: calc(100% + 0.4rem); height: calc(100% + 0.4rem); /*rtl:ignore*/ right: 0.4rem; top: -0.4rem; border: 1px solid var(--color-surface-border); border-radius: 4px; } @media (max-width: 1279px) { .dc-contract-card-dialog-toggle { width: 100%; } } .dc-contract-card-dialog-toggle__icon { /*rtl:ignore*/ float: right; margin: 3px; } .dc-contract-card-dialog-toggle:hover:not(:disabled):not(.dc-contract-card-dialog-toggle--disabled) { cursor: pointer; border-color: var(--color-button-secondary-border); } @media (min-width: 601px) and (max-width: 1279px) { .dc-mobile-dialog__contract-update { max-width: 568px; margin: 0 auto; } } .dc-mobile-dialog__contract-update-wrapper { display: grid; grid-template-rows: auto 1fr; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /*rtl:begin:ignore*/ .dc-tooltip { text-decoration: none; font-size: inherit; color: var(--color-text-primary); } .dc-tooltip:before { background: var(--color-status-neutral); } .dc-tooltip:after, .dc-tooltip[data-tooltip-pos=top]:after { border-top-color: var(--color-status-neutral); } .dc-tooltip[data-tooltip-pos=right]:after { border-top-color: transparent; border-right-color: var(--color-status-neutral); } .dc-tooltip[data-tooltip-pos=left]:after { border-top-color: transparent; border-left-color: var(--color-status-neutral); } .dc-tooltip[data-tooltip-pos=bottom]:after { border-top-color: transparent; border-bottom-color: var(--color-status-neutral); } .dc-tooltip__balloon-icon { position: absolute; top: 0; left: -319px; z-index: 999; opacity: 0; transition: opacity 0.3s; pointer-events: none; } .dc-tooltip__balloon-icon--show { transition: opacity 0.3s 0.2s; opacity: 1; } .dc-tooltip[data-tooltip] { cursor: auto; cursor: initial; display: block; } .dc-tooltip[data-tooltip]:before { background: var(--color-status-neutral); } .dc-tooltip[data-tooltip]:after, .dc-tooltip[data-tooltip][data-tooltip-pos=top]:after { border-top-color: var(--color-status-neutral); } .dc-tooltip[data-tooltip][data-tooltip-pos=right]:after { border-top-color: transparent; border-right-color: var(--color-status-neutral); } .dc-tooltip[data-tooltip][data-tooltip-pos=left]:after { border-top-color: transparent; border-left-color: var(--color-status-neutral); } .dc-tooltip[data-tooltip][data-tooltip-pos=bottom]:after { border-top-color: transparent; border-bottom-color: var(--color-status-neutral); } .dc-tooltip[data-tooltip]:hover:after, .dc-tooltip[data-tooltip]:hover:before { opacity: 0.96; pointer-events: auto; transform: translate(-50%, 0); } .dc-tooltip[data-tooltip]:before, .dc-tooltip[data-tooltip]:after { opacity: 0; pointer-events: none; transition: all 0.18s ease-out 0.18s; bottom: 100%; left: 50%; position: absolute; z-index: 1; transform: translate(-50%, 1em); transform-origin: top; } [dir="ltr"] .dc-tooltip[data-tooltip]:before { text-align: left; } [dir="rtl"] .dc-tooltip[data-tooltip]:before { text-align: right; } .dc-tooltip[data-tooltip]:before { font-size: 1.2rem; font-weight: 400; color: var(--color-text-white); text-transform: none; line-height: 1.25; line-height: 1.5; text-decoration: none; letter-spacing: normal; border-radius: 4px; content: attr(data-tooltip); padding: 0.7em; margin-bottom: 10px; width: -moz-max-content; width: max-content; width: 220px; max-width: 280px; } .dc-tooltip[data-tooltip]:after { border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 6px; margin-bottom: -2px; } .dc-tooltip[data-tooltip][data-tooltip-pos=right]:before, .dc-tooltip[data-tooltip][data-tooltip-pos=right]:after { bottom: auto; left: 100%; top: 50%; transform: translate(-1em, -50%); } .dc-tooltip[data-tooltip][data-tooltip-pos=right]:before { margin-left: 1em; } .dc-tooltip[data-tooltip][data-tooltip-pos=right]:hover:after, .dc-tooltip[data-tooltip][data-tooltip-pos=right]:hover:before { transform: translate(0, -50%); } .dc-tooltip[data-tooltip][data-tooltip-pos=left]:before, .dc-tooltip[data-tooltip][data-tooltip-pos=left]:after { bottom: auto; left: auto; right: 100%; top: 50%; transform: translate(1em, -50%); } .dc-tooltip[data-tooltip][data-tooltip-pos=left]:before { /*rtl:ignore*/ margin-right: 1em; } .dc-tooltip[data-tooltip][data-tooltip-pos=left]:hover:after, .dc-tooltip[data-tooltip][data-tooltip-pos=left]:hover:before { transform: translate(0, -50%); } .dc-tooltip[data-tooltip][data-tooltip-pos=bottom]:before, .dc-tooltip[data-tooltip][data-tooltip-pos=bottom]:after { bottom: auto; left: 50%; top: 100%; transform: translate(-50%, -1em); } .dc-tooltip[data-tooltip][data-tooltip-pos=bottom]:before { margin-top: 1.1em; } .dc-tooltip[data-tooltip][data-tooltip-pos=bottom]:hover:after, .dc-tooltip[data-tooltip][data-tooltip-pos=bottom]:hover:before { transform: translate(-50%, 0); } .dc-tooltip--with-label[data-tooltip]:before, .dc-tooltip--with-label[data-tooltip]:after { margin-top: 1em; } .dc-tooltip--error[data-tooltip]:before { background: var(--color-status-danger); } .dc-tooltip--error[data-tooltip]:after, .dc-tooltip--error[data-tooltip][data-tooltip-pos=top]:after { border-top-color: var(--color-status-danger); } .dc-tooltip--error[data-tooltip][data-tooltip-pos=right]:after { border-top-color: transparent; border-right-color: var(--color-status-danger); } .dc-tooltip--error[data-tooltip][data-tooltip-pos=left]:after { border-top-color: transparent; border-left-color: var(--color-status-danger); } .dc-tooltip--error[data-tooltip][data-tooltip-pos=bottom]:after { border-top-color: transparent; border-bottom-color: var(--color-status-danger); } .dc-tooltip--error[data-tooltip]:after, .dc-tooltip--error[data-tooltip]:before, .dc-tooltip--error[data-tooltip][data-tooltip-pos=left]:after, .dc-tooltip--error[data-tooltip][data-tooltip-pos=left]:before { opacity: 0.96; pointer-events: auto; transform: translate(0, -50%); } .dc-tooltip--error[data-tooltip]:before, .dc-tooltip--error[data-tooltip][data-tooltip-pos=left]:before { width: 180px; } .dc-tooltip--error-secondary[data-tooltip]:before { background: var(--color-status-danger); } .dc-tooltip--error-secondary[data-tooltip]:after, .dc-tooltip--error-secondary[data-tooltip][data-tooltip-pos=top]:after { border-top-color: var(--color-status-danger); } .dc-tooltip--error-secondary[data-tooltip][data-tooltip-pos=right]:after { border-top-color: transparent; border-right-color: var(--color-status-danger); } .dc-tooltip--error-secondary[data-tooltip][data-tooltip-pos=left]:after { border-top-color: transparent; border-left-color: var(--color-status-danger); } .dc-tooltip--error-secondary[data-tooltip][data-tooltip-pos=bottom]:after { border-top-color: transparent; border-bottom-color: var(--color-status-danger); } .dc-tooltip--error-secondary[data-tooltip]:after, .dc-tooltip--error-secondary[data-tooltip]:before, .dc-tooltip--error-secondary[data-tooltip][data-tooltip-pos=left]:after, .dc-tooltip--error-secondary[data-tooltip][data-tooltip-pos=left]:before { opacity: 0.96; pointer-events: auto; transform: translate(0, -50%); top: 55%; } /*rtl:end:ignore*/ /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ .dc-input-wrapper__icon, button.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .dc-input-wrapper__icon .color1-fill, button.dc-input-wrapper__icon .color1-fill { fill: var(--color-text-secondary); } .dc-input-wrapper__icon, button.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .dc-input-wrapper__icon .color1-stroke, button.dc-input-wrapper__icon .color1-stroke { stroke: var(--color-text-secondary); } .dc-input-wrapper__icon, button.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .dc-input-wrapper__icon .color2-fill, button.dc-input-wrapper__icon .color2-fill { fill: none; } .dc-input-wrapper__icon, button.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .dc-input-wrapper__icon .color2-stroke, button.dc-input-wrapper__icon .color2-stroke { stroke: none; } .active.dc-input-wrapper__icon, button.active.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .active.dc-input-wrapper__icon .color1-fill, button.active.dc-input-wrapper__icon .color1-fill { fill: var(--color-text-primary); } .active.dc-input-wrapper__icon, button.active.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .active.dc-input-wrapper__icon .color1-stroke, button.active.dc-input-wrapper__icon .color1-stroke { stroke: var(--color-text-primary); } .active.dc-input-wrapper__icon, button.active.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .active.dc-input-wrapper__icon .color2-fill, button.active.dc-input-wrapper__icon .color2-fill { fill: none; } .active.dc-input-wrapper__icon, button.active.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .active.dc-input-wrapper__icon .color2-stroke, button.active.dc-input-wrapper__icon .color2-stroke { stroke: none; } .disabled.dc-input-wrapper__icon, button.disabled.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .disabled.dc-input-wrapper__icon .color1-fill, button.disabled.dc-input-wrapper__icon .color1-fill { fill: var(--color-text-disabled); } .disabled.dc-input-wrapper__icon, button.disabled.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .disabled.dc-input-wrapper__icon .color1-stroke, button.disabled.dc-input-wrapper__icon .color1-stroke { stroke: var(--color-text-disabled); } .disabled.dc-input-wrapper__icon, button.disabled.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .disabled.dc-input-wrapper__icon .color2-fill, button.disabled.dc-input-wrapper__icon .color2-fill { fill: none; } .disabled.dc-input-wrapper__icon, button.disabled.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .disabled.dc-input-wrapper__icon .color2-stroke, button.disabled.dc-input-wrapper__icon .color2-stroke { stroke: none; } .white.dc-input-wrapper__icon, button.white.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .white.dc-input-wrapper__icon .color1-fill, button.white.dc-input-wrapper__icon .color1-fill { fill: var(--color-text-primary); } .white.dc-input-wrapper__icon, button.white.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .white.dc-input-wrapper__icon .color1-stroke, button.white.dc-input-wrapper__icon .color1-stroke { stroke: var(--color-text-primary); } .border_hover_color.dc-input-wrapper__icon, button.border_hover_color.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .border_hover_color.dc-input-wrapper__icon .color1-fill, button.border_hover_color.dc-input-wrapper__icon .color1-fill { fill: var(--color-text-primary); } .border_hover_color.dc-input-wrapper__icon, button.border_hover_color.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .border_hover_color.dc-input-wrapper__icon .color1-stroke, button.border_hover_color.dc-input-wrapper__icon .color1-stroke { stroke: var(--color-text-primary); } .secondary.dc-input-wrapper__icon, button.secondary.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .secondary.dc-input-wrapper__icon .color1-fill, button.secondary.dc-input-wrapper__icon .color1-fill { fill: var(--color-text-secondary); } .secondary.dc-input-wrapper__icon, button.secondary.dc-input-wrapper__icon { /* postcss-bem-linter: ignore */ } .secondary.dc-input-wrapper__icon .color1-stroke, button.secondary.dc-input-wrapper__icon .color1-stroke { stroke: var(--color-text-secondary); } /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-input-field; weak */ .dc-input-field { margin: 0.8rem 0 0; position: relative; } [dir="ltr"] .dc-input-field__label { text-align: left; } [dir="rtl"] .dc-input-field__label { text-align: right; } .dc-input-field__label { font-size: 1.4rem; font-weight: 400; color: var(--color-text-black); text-transform: none; line-height: 1.5; color: var(--color-text-secondary); margin-bottom: 0.2rem; display: inline-block; text-align: center; width: 100%; } .dc-input-field .inline-icon { position: absolute; top: 8px; left: 8px; z-index: 1; cursor: pointer; } [dir="ltr"] .dc-input-field__helper { text-align: left; } [dir="rtl"] .dc-input-field__helper { text-align: right; } .dc-input-field__helper { font-size: 1.2rem; font-weight: 300; color: var(--color-text-secondary); text-transform: none; line-height: 1.25; } /** @define dc-input-wrapper */ .dc-input-wrapper, button.dc-input-wrapper { position: relative; } .dc-input-wrapper__input::-ms-clear, button.dc-input-wrapper__input::-ms-clear { display: none; } .dc-input-wrapper__button, button.dc-input-wrapper__button { position: absolute !important; } .dc-input-wrapper__button, button.dc-input-wrapper__button { z-index: 1; top: 2px; height: 28px; border: none; padding: 0; margin: 0; margin: initial; min-width: 3.2rem; border-radius: 3px; background-color: transparent; background-color: initial; display: flex; justify-content: center; align-items: center; } .dc-input-wrapper__button--increment, button.dc-input-wrapper__button--increment { /* rtl:ignore */ right: 2px; } .dc-input-wrapper__button--decrement, button.dc-input-wrapper__button--decrement { /* rtl:ignore */ left: 2px; } .dc-input-wrapper__button:hover, button.dc-input-wrapper__button:hover { background: var(--color-interactive-hover); cursor: pointer; } .dc-input-wrapper__button:disabled:hover, button.dc-input-wrapper__button:disabled:hover { cursor: not-allowed; background: transparent; } .dc-input-wrapper--disabled, button.dc-input-wrapper--disabled { pointer-events: none; color: var(--color-text-disabled); } .dc-input-wrapper--inline, button.dc-input-wrapper--inline { display: flex; justify-content: space-between; align-items: center; } /** @define input */ .input { font-size: 1.4rem; text-align: center; font-weight: 400; color: var(--color-text-black); text-transform: none; line-height: 1.5; list-style: none; position: relative; display: inline-block; width: 100%; height: 32px; text-align: left; padding-left: 0.8rem; } [dir=rtl] .input { text-align: right; padding-left: 0; padding-right: 0.8rem; } .input { border-radius: 4px; transition: transform 0.3s; background-color: var(--color-surface-primary); border: 1px solid var(--color-surface-border); color: var(--color-text-primary); } .input[type=checkbox] { font-size: 1.2rem; cursor: pointer; display: inline-block; vertical-align: middle; width: 16px; height: 16px; border-radius: 0; padding: 0; background-color: var(--color-surface-primary); border: 1px solid var(--color-text-secondary); } .input[type=checkbox]:active { border-radius: 0; box-shadow: none; border-color: var(--brand-primary); } .input[type=checkbox]:hover { border-color: var(--color-interactive-hover); } .input[type=checkbox]:focus { border-radius: 0; box-shadow: none; border-color: var(--color-interactive-active); } .input[type=checkbox]:checked { background: var(--brand-primary); border-color: var(--brand-primary); } .input[type=checkbox]:checked:after { display: inline-block; } .input[type=checkbox]:checked:hover { border-color: var(--brand-primary); } .input[type=checkbox]::-ms-check { background: transparent; border-color: transparent; color: var(--brand-white); } [dir="ltr"] .input[type=checkbox]:after { text-align: left; } [dir="rtl"] .input[type=checkbox]:after { text-align: right; } .input[type=checkbox]:after { font-size: 1.2rem; font-weight: 400; color: var(--color-text-primary); text-transform: none; line-height: 1.25; content: "L"; transform: scaleX(-1) rotate(-40deg); position: absolute; top: -10%; left: 25%; display: none; } .input:not([type=range]) { touch-action: manipulation; } .input[readonly] { cursor: pointer; } .input::-moz-placeholder { border-color: var(--color-interactive-default); } .input::placeholder { border-color: var(--color-interactive-default); } .input:hover, .input-hover, .dc-input-wrapper__button:hover ~ .dc-input-wrapper__input, button.dc-input-wrapper__button:hover ~ .dc-input-wrapper__input { border-color: var(--color-interactive-hover); } .input:active, .input:focus { outline: 0; border-radius: 4px; border-color: var(--color-interactive-active); color: var(--color-text-primary); } .input--has-inline-prefix { padding-right: 40px !important; border-radius: 4px !important; } .input--error { border: 1px solid var(--brand-primary) !important; } .input--error { color: var(--brand-primary); } .input:disabled { color: var(--color-text-disabled); } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-input-wrapper */ .dc-input-wrapper { position: relative; } .dc-input-wrapper--inline { display: flex; justify-content: space-between; align-items: center; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-themed-scrollbars */ .dc-themed-scrollbars { overflow-y: auto; overflow-x: hidden; position: relative; scroll-behavior: smooth; /* Firefox only */ scrollbar-color: var(--color-interactive-active) var(--color-surface-primary); scrollbar-width: thin; } .dc-themed-scrollbars__autohide::-webkit-scrollbar-thumb { display: none; } .dc-themed-scrollbars__autohide--is-hovered::-webkit-scrollbar-thumb { display: inline; display: initial; } .dc-themed-scrollbars--has-horizontal { overflow-x: auto; } .dc-themed-scrollbars--hidden-scrollbar::-webkit-scrollbar { display: none !important; } .dc-themed-scrollbars--only-horizontal { overflow-y: hidden; overflow-x: auto; } .dc-themed-scrollbars--only-horizontal-overlay { overflow-y: hidden; overflow-x: overlay; } .dc-themed-scrollbars-wrapper { display: flex; justify-content: space-between; margin-bottom: -3rem; padding-bottom: 3rem; white-space: nowrap; } .dc-themed-scrollbars-wrapper li { display: inline-block; box-sizing: border-box; padding: 0 3rem; vertical-align: middle; width: auto; width: initial; height: 40px; } @media (min-width: 320px) and (max-width: 767px) { .dc-themed-scrollbars-wrapper li { padding: 0 1.1rem; } } .dc-themed-scrollbars::-webkit-scrollbar { width: 5px; height: 5px; background-color: transparent; border-radius: 10px; } .dc-themed-scrollbars::-webkit-scrollbar-track { background-color: transparent; } .dc-themed-scrollbars::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--color-interactive-active); } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-mobile-dialog; weak */ .dc-mobile-dialog { box-sizing: border-box; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; overflow: auto; transition: opacity 0.2s; opacity: 0; pointer-events: none; background: var(--color-surface-primary); } .dc-mobile-dialog--enter, .dc-mobile-dialog--exit { opacity: 0; pointer-events: none; } .dc-mobile-dialog--enter .dc-mobile-dialog__content, .dc-mobile-dialog--exit .dc-mobile-dialog__content { transform: scale(0); } .dc-mobile-dialog--enter .dc-mobile-dialog__header, .dc-mobile-dialog--exit .dc-mobile-dialog__header { transform: translateY(-100%); } .dc-mobile-dialog--enter-done { opacity: 1; pointer-events: auto; } .dc-mobile-dialog--enter-done .dc-mobile-dialog__content { transform: scale(1); } .dc-mobile-dialog--enter-done .dc-mobile-dialog__header { transform: translateY(0); } .dc-mobile-dialog__content { margin-top: 4.8rem; box-sizing: border-box; position: relative; z-index: 1; background: var(--color-surface-primary); transition: all 0.2s ease-out; } .dc-mobile-dialog__content--is-full-height { height: 100%; } .dc-mobile-dialog__content > div { height: 100%; } .dc-mobile-dialog__header { box-sizing: border-box; display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; position: fixed; top: 0; padding: 1rem; height: 56px; z-index: 4; background: var(--color-surface-primary); transition: all 0.2s ease-out; transition-delay: 0.2s; border-bottom: 1px solid var(--color-interactive-disabled); } .dc-mobile-dialog__container--has-scroll { overflow-x: hidden; overflow-y: auto; } .dc-mobile-dialog__container--has-info-banner .dc-mobile-dialog__header { position: relative; top: auto; top: initial; z-index: auto; z-index: initial; background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; background: initial; } .dc-mobile-dialog__container--has-info-banner .dc-mobile-dialog__header-wrapper { position: sticky; top: 0; z-index: 4; background: var(--color-surface-primary); width: 100%; border-bottom: 0.01rem solid transparent; } .dc-mobile-dialog__container--has-info-banner .dc-mobile-dialog__header-wrapper .inline-message__information { margin: 1.6rem 0.8rem -0.8rem; } .dc-mobile-dialog__container--has-info-banner .dc-mobile-dialog__header-wrapper .learn-more { height: 5rem; width: calc(100% - 1.6rem); margin: 1.6rem 0.8rem 0.8rem; padding: 1.6rem; display: flex; justify-content: space-between; align-items: center; border: none; background-color: var(--color-surface-primary); cursor: pointer; border-radius: 4px; } .dc-mobile-dialog__container--has-info-banner .dc-mobile-dialog__content { margin-top: 0; margin-top: initial; padding-top: 0; padding-top: initial; } .dc-mobile-dialog__footer { position: fixed; width: 100%; bottom: 0px; z-index: 4; } .dc-mobile-dialog__title { padding: 1.2rem 1.2rem 1.2rem 0.4rem; margin: 0; } .dc-mobile-dialog__close-btn-icon { --fill-color1: var(--color-text-primary) !important; } .dc-mobile-dialog__close-btn-icon { margin: 1.2rem 0.4rem; width: 1.6rem; height: 1.6rem; /* postcss-bem-linter: ignore */ } @charset "UTF-8"; /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-result */ .dc-result__content { display: flex; justify-items: center; align-items: center; flex-direction: column; gap: 0.4rem; } .dc-result__caption { text-transform: capitalize; font-size: 1.4em; font-weight: bold; display: flex; justify-content: center; align-items: center; transition: opacity 0.25s ease; gap: 0.4rem; } .dc-result__caption--won { color: var(--color-text-success); } .dc-result__caption--lost { color: var(--color-text-danger); } .dc-result__caption-wrapper { cursor: pointer; width: 100%; height: calc(100% - 24px); text-decoration: none; position: absolute; top: 24px; z-index: 2; display: flex; justify-content: center; align-items: center; } @media (min-width: 320px) and (max-width: 767px) { .dc-result__caption { pointer-events: none; } } .dc-result__close-btn { position: absolute; top: 2px; /*rtl:ignore*/ right: 8px; cursor: pointer; visibility: visible; } .dc-result__close-btn:after { content: "×"; font-size: 24px; font-weight: 300; color: var(--color-text-secondary); } .dc-result__positions-overlay { max-width: 282px; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-contract-card { box-sizing: border-box; border-radius: 4px; display: flex; flex-direction: column; text-decoration: none; position: relative; padding: 0.8rem; background-color: var(--color-surface-primary); color: var(--color-text-primary); padding-bottom: 0.8rem; } .dc-contract-card:before { content: ""; position: absolute; border-radius: 4px; height: 52px; width: 100%; left: 0; top: 0; } .dc-contract-card--green:before { background-image: linear-gradient(to top, rgba(16, 19, 32, 0), rgba(0, 148, 117, 0.16)); } .dc-contract-card--red:before { background-image: linear-gradient(to top, rgba(16, 19, 32, 0), rgba(227, 28, 75, 0.16)); } .dc-contract-card--loss { color: var(--color-text-danger); } .dc-contract-card--profit { color: var(--color-text-success); } .dc-contract-card__grid { display: grid; grid-template-rows: 1fr auto; grid-gap: 4px; min-height: 4rem; } .dc-contract-card__grid-underlying-trade { grid-template-columns: 1fr 1fr; width: 100%; } @media (min-width: 1280px) { .dc-contract-card__grid-underlying-trade--trader { grid-template-columns: 1.2fr 1fr; } } .dc-contract-card__grid-underlying-trade--trader--accumulator { grid-gap: 1px; } @media (min-width: 1280px) { .dc-contract-card__grid-underlying-trade--trader--accumulator { display: flex; } } .dc-contract-card__grid-underlying-trade--trader--sold { padding-top: 1rem; } .dc-contract-card__grid-underlying-trade--mobile { grid-template-columns: 1fr 1fr 25%; } .dc-contract-card__grid-profit-payout { grid-template-columns: 1fr 1fr; padding: 8px 0; border-radius: 4px; margin-left: -4px; margin-right: -4px; background: var(--color-interactive-hover); } .dc-contract-card__grid-label { font-size: 1rem; align-self: flex-start; text-transform: none; line-height: 1.5; color: var(--color-text-secondary); white-space: nowrap; } .dc-contract-card__grid-value { font-size: 1.2rem; font-weight: bold; align-self: flex-start; line-height: 1.5; } .dc-contract-card__grid-items { grid-template-columns: 1fr 1fr; grid-gap: 0.8rem 0.4rem; padding: 0.8rem 0; } .dc-contract-card__result { position: absolute; top: 0; width: 100%; height: calc(100% - 1rem); border-radius: 4px; z-index: 2; display: flex; align-items: center; justify-content: center; background-color: var(--color-surface-overlay); } .dc-contract-card__result--won, .dc-contract-card__result--won:after { background-image: var(--color-gradient-success); } .dc-contract-card__result--lost, .dc-contract-card__result--lost:after { background-image: var(--color-gradient-danger); } .dc-contract-card__result--lg { max-height: 100%; } .dc-contract-card__result:hover { background: 0 !important; } .dc-contract-card__result:hover .dc-result__content { opacity: 0; } .dc-contract-card__result:after { top: 0; left: 0; width: 100%; height: 100%; border-radius: 4px; z-index: 2; } .dc-contract-card__result--enter, .dc-contract-card__result--exit { opacity: 0; } .dc-contract-card__result--enter-done { opacity: 1; } .dc-contract-card__wrapper { margin: 0 1em; max-width: 284px; width: 100%; border-radius: 4px; transition: transform 0.25s ease, opacity 0.25s linear; position: relative; background: var(--color-surface-primary); border: 1px solid rgba(0, 0, 0, 0.08); border: 1px solid var(--color-surface-border, rgba(0, 0, 0, 0.08)); } .dc-contract-card__wrapper .currency-badge { margin-bottom: 5px; } .dc-contract-card__wrapper--active:before { content: ""; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); position: absolute; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.24); border-radius: 4px; pointer-events: none; } .dc-contract-card__wrapper--enter-done { opacity: 1; transform: translateY(0); } .dc-contract-card__wrapper--enter, .dc-contract-card__wrapper--exit { opacity: 0; transform: translateY(-16px); } .dc-contract-card .purchase-price-container, .dc-contract-card .potential-payout-container { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .dc-contract-card .purchase-price__label, .dc-contract-card .potential-payout__label { font-size: 1rem; align-self: flex-start; text-transform: none; margin-bottom: 4px; color: var(--color-text-secondary); white-space: nowrap; } .dc-contract-card .purchase-price__value, .dc-contract-card .potential-payout__value { font-size: 1em; font-weight: bold; align-self: flex-start; } .dc-contract-card .potential-payout-container { padding-left: 4px; } .dc-contract-card .potential-payout-price__value { font-size: 1em; font-weight: bold; align-self: flex-start; } .dc-contract-card__separator { width: 100%; border-top: 1px solid var(--color-surface-border); margin: 4px 0 0; } .dc-contract-card__underlying-name { display: flex; justify-content: flex-start; align-items: center; font-weight: bold; font-size: 1.2em; max-width: 18rem; min-width: 10rem; } .dc-contract-card__underlying-name--accumulator { max-width: 10rem; } .dc-contract-card__type { font-size: 1.2em; display: flex; justify-content: flex-start; font-weight: bold; /* postcss-bem-linter: ignore */ } .dc-contract-card__type .category-type .color1-fill { fill: var(--brand-primary) !important; } .dc-contract-card__type .category-type .color2-fill { fill: var(--brand-secondary) !important; } .dc-contract-card__symbol { /*rtl:ignore*/ margin-left: 0.4rem; } .dc-contract-card__symbol--smarttrader-contract { width: 7rem; } @media (min-width: 320px) and (max-width: 767px) { .dc-contract-card__symbol--smarttrader-contract { width: auto; width: initial; } } .dc-contract-card__header { display: flex; justify-content: space-evenly; flex-direction: column; margin: 0.5em 0.2em; } @media (min-width: 320px) and (max-width: 767px) { .dc-contract-card__header { margin: 0 8px; } } .dc-contract-card__body { border-radius: 4px; width: 100%; padding: 0.8rem 0.4rem; color: var(--color-text-primary); display: flex; } .dc-contract-card__body-wrapper { width: 100%; } @media (min-width: 320px) and (max-width: 767px) { .dc-contract-card__body { padding: 0 8px; } .dc-contract-card__body-wrapper { display: flex; } } .dc-contract-card-items-wrapper { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "stake current-stake" "deal-cancel-fee limit-order-info" "buy-price limit-order-info"; grid-gap: 0.8rem 0.4rem; flex: 1; margin-top: 0.5rem; } .dc-contract-card-items-wrapper--mobile { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "stake current-stake limit-order-info" "deal-cancel-fee buy-price limit-order-info"; grid-gap: 0.8rem 0.4rem; flex: 1; padding: 0.4rem 0; } .dc-contract-card-items-wrapper--mobile .dc-contract-card-items-wrapper-group .dc-contract-card-item:first-child { margin-bottom: 0.8rem; } .dc-contract-card-items-wrapper--has-progress-slider { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "stake current-stake date-expiry" "deal-cancel-fee buy-price date-expiry" "limit-order-info limit-order-info date-expiry"; } .dc-contract-card-items-wrapper--has-progress-slider .dc-contract-card__limit-order-info { grid-template-columns: 1fr 1fr; } .dc-contract-card-items-wrapper--has-progress-slider .dc-contract-card__stop-loss { order: initial !important; } @media (min-width: 320px) and (max-width: 767px) { .dc-contract-card--turbos .dc-contract-card-item__body, .dc-contract-card--lookbacks .dc-contract-card-item__body { padding-left: 0; } } .dc-contract-card--turbos .dc-contract-card__buy-price, .dc-contract-card--lookbacks .dc-contract-card__buy-price { grid-column: 1/1; grid-row: 1/1; padding: 0.8rem 0 0; } .dc-contract-card--turbos .dc-contract-card__contract-value, .dc-contract-card--lookbacks .dc-contract-card__contract-value { grid-column: 2/2; grid-row: 1/2; padding: 0.8rem 0 0; } .dc-contract-card--turbos .dc-contract-card__entry-spot, .dc-contract-card--lookbacks .dc-contract-card__entry-spot { grid-column: 1/2; grid-row: 2/2; } .dc-contract-card--turbos .dc-contract-card__barrier-level, .dc-contract-card--lookbacks .dc-contract-card__barrier-level { grid-column: 1/1; grid-row: 3/3; } .dc-contract-card--turbos .dc-contract-card__limit-order-info, .dc-contract-card--lookbacks .dc-contract-card__limit-order-info { grid-row: 2/2; grid-column: 2/2; } .dc-contract-card--turbos .dc-contract-card__status, .dc-contract-card--lookbacks .dc-contract-card__status { align-self: center; justify-self: center; grid-row: 1/3; grid-column: 3/3; } @media (min-width: 320px) and (max-width: 767px) { .dc-contract-card--turbos, .dc-contract-card--lookbacks { grid-template-columns: 1fr 1fr 1fr; } } .dc-contract-card__profit-loss { font-size: 1.2em; text-align: center; display: flex; justify-content: flex-start; align-items: center; font-weight: bold; } .dc-contract-card__profit-loss-label { font-size: 1em; margin-bottom: 4px; font-weight: normal; white-space: nowrap; max-width: 90px; } .dc-contract-card__profit-loss--is-crypto { margin-left: -6px; } .dc-contract-card__profit-loss--negative { color: var(--color-text-danger); } .dc-contract-card__profit-loss--negative:before { content: "-"; color: inherit; } .dc-contract-card__profit-loss--positive { color: var(--color-text-success); } .dc-contract-card__profit-loss--positive:before { content: "+"; color: inherit; } .dc-contract-card-item__header { max-width: calc(100% - 2rem); line-height: 1.4; } @media (min-width: 320px) and (max-width: 767px) { .dc-contract-card-item__header { max-width: none; max-width: initial; } } [dir="ltr"] .dc-contract-card-item__body { text-align: left; } [dir="rtl"] .dc-contract-card-item__body { text-align: right; } .dc-contract-card-item__body { font-size: 1.2rem; font-weight: 700; color: var(--color-text-primary); text-transform: none; line-height: 1.25; display: flex; align-self: flex-start; line-height: 1.5; } .dc-contract-card-item__body--is-crypto { margin-left: -6px; } @media (min-width: 320px) and (max-width: 767px) { .dc-contract-card-item__body { padding-left: 0.4rem; } } .dc-contract-card-item__body--loss { color: var(--color-text-danger) !important; } .dc-contract-card-item__body--loss:before { content: "-"; } .dc-contract-card-item__body--profit { color: var(--color-text-success) !important; } .dc-contract-card-item__body--profit:before { content: "+"; } .dc-contract-card-item__total-profit-loss { padding: 0.8rem 0.8rem 0; border-top: 1px solid var(--color-surface-border); display: flex; flex-direction: column; align-items: center; margin-top: 0.8rem; } .dc-contract-card-item__total-profit-loss .dc-contract-card-item__header, .dc-contract-card-item__total-profit-loss .dc-contract-card-item__body { font-size: 1.4rem; line-height: 2rem; align-self: center; } @media (min-width: 320px) and (max-width: 767px) { .dc-contract-card-item__total-profit-loss { flex-direction: row; justify-content: center; grid-column: 1/4; } .dc-contract-card-item__total-profit-loss-value { margin-left: 0.2rem; } } .dc-contract-card-item__total-profit-loss-label, .dc-contract-card-item__total-profit-loss-value { font-size: 1.4rem; line-height: 2rem; } .dc-contract-card-item__payout-limit { padding: 0.8rem 0 0; border-top: 1px solid var(--color-surface-border); display: flex; flex-direction: column; align-items: center; } .dc-contract-card-item__payout-limit .dc-contract-card-item__body { align-self: center; } .dc-contract-card-item__footer .lookbacks--note { margin-top: 0.4rem; } .dc-contract-card__sell-button { display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease, opacity 0.25s linear; padding-top: 0.4rem; margin-top: 0.8rem; border-top: 1px solid var(--color-surface-border); min-height: 4rem; } .dc-contract-card__sell-button--positions { padding: 0.8rem 0; margin: 0 0.8rem; } .dc-contract-card__sell-button--enter-done { opacity: 1; } .dc-contract-card__sell-button--enter, .dc-contract-card__sell-button--exit { opacity: 0; transform: translateY(-8px); } .dc-contract-card__sell-button--has-cancel-btn { gap: 0.8rem; } .dc-contract-card__sell-button--has-cancel-btn .dc-btn { /*rtl:ignore*/ padding: 0 0.5rem; } .dc-contract-card__sell-button--has-cancel-btn .dc-btn--cancel { width: 100%; } .dc-contract-card__sell-button .dc-remaining-time { border-radius: 0.4rem; font-size: 1.2rem; margin-left: 0.8rem; } .dc-contract-card__sell-button .dc-btn--sell, .dc-contract-card__sell-button .dc-btn--cancel { height: 2.4rem; } .dc-contract-card__sell-button .dc-btn--sell .dc-btn__text, .dc-contract-card__sell-button .dc-btn--cancel .dc-btn__text { font-size: 1.2rem; } @media (min-width: 320px) and (max-width: 767px) { .dc-contract-card__sell-button .dc-btn--sell, .dc-contract-card__sell-button .dc-btn--cancel { height: 3.2rem; } } .dc-contract-card__indicative--movement { margin-left: 2px; width: 16px; height: 16px; } .dc-contract-card__indicative--movement:after { content: ""; width: 16px; } .dc-contract-card__status { min-width: 25%; display: flex; align-items: center; justify-content: center; } .dc-contract-card__status .result-icon, .dc-contract-card__status--accumulator-mobile-positions .dc-result__icon { margin-left: 0.4rem; } .dc-contract-card__limit-order-info { grid-area: limit-order-info; display: grid; grid-gap: 0.4rem 0; position: relative; } .dc-contract-card__limit-order-info .dc-contract-card__stop-loss { padding-bottom: 0.4rem; } .dc-contract-card__take-profit { position: relative; } .dc-contract-card__buy-price { grid-area: buy-price; } .dc-contract-card__deal-cancel-fee { grid-area: deal-cancel-fee; } .dc-contract-card__deal-cancel-fee__disabled { color: var(--color-text-disabled); } .dc-contract-card__deal-cancel-fee__disabled .dc-contract-card-item__body { color: inherit; } .dc-contract-card__stake { grid-area: stake; } .dc-contract-card__date-expiry { grid-area: date-expiry; } .dc-contract-card__date-expiry .dc-contract-card-item__body { justify-content: flex-end; } .dc-contract-card__current-stake { grid-area: current-stake; } .dc-contract-card__sell-button-mobile { justify-self: center; align-self: center; } .dc-contract-card__sell-button-mobile .dc-btn--sell { height: 3.2rem !important; } .dc-contract-card__no-resale-msg { font-size: 1.1rem; } .dc-contract-card .contract-audit__wrapper { padding: 2px 0; width: 100%; } .dc-contract-card .contract-audit__wrapper--is-open { margin-top: 0.5em; } .dc-contract-card .contract-audit__toggle { margin: 0 0 -0.5em; width: 100%; } .dc-contract-card .contract-audit__label { font-size: 0.8em; text-align: left; } .dc-contract-card .contract-audit__value { font-size: 1em; text-align: left; } .dc-contract-card .dc-contract-type__type-wrapper { width: auto; width: initial; height: auto; height: initial; } /** @define dc-contract-type */ .dc-contract-type { display: flex; flex-direction: row; align-items: center; text-align: center; margin-left: -4px; } .dc-contract-type__type-wrapper { margin: 0; padding: 0.5em 0.3em; display: flex; justify-content: center; align-items: center; /* postcss-bem-linter: ignore */ } .dc-contract-type__type-wrapper .category-type { width: 20px; height: 20px; } .dc-contract-type__type-label { width: 3.8em; line-height: 1.5; /*rtl:ignore*/ text-align: left; } .dc-contract-type__type-label--smarttrader-contract, .dc-contract-type__type-label--multipliers { width: 7rem; } @media (min-width: 320px) and (max-width: 767px) { .dc-contract-type__type-label--smarttrader-contract, .dc-contract-type__type-label--multipliers { width: 9rem; } } .dc-contract-type__type-label--lookbacks-contract { width: 5rem; } @media (min-width: 320px) and (max-width: 767px) { .dc-contract-type__type-label--lookbacks-contract { width: auto; width: initial; } } .dc-contract-type__type-label-trade-param { font-size: 1rem; line-height: 1rem; color: var(--color-text-secondary); } /** @define dc-btn; */ .dc-btn--sell { width: 100%; } /** @define dc-remaining-time; weak */ .dc-remaining-time { display: inline; } /** @define dc-tick-counter-bar; */ .dc-tick-counter-bar__container { grid-column-start: 1; grid-column-end: 3; position: relative; width: 100%; padding: 0; padding: initial; box-sizing: border-box; margin: 0.8rem 0; border-bottom: 1px solid var(--color-surface-border); } @media (min-width: 320px) and (max-width: 767px) { .dc-tick-counter-bar__container { display: flex; flex-direction: column; align-items: center; border-bottom: 0; border-bottom: initial; margin: 0; margin: initial; } } .dc-tick-counter-bar__track { height: 1.8rem; background: var(--color-surface-primary); border-radius: 4px; position: relative; margin-bottom: 0.8rem; width: 100%; } @media (min-width: 320px) and (max-width: 767px) { .dc-tick-counter-bar__track { display: flex; flex-direction: column; align-items: center; border-bottom: 0; border-bottom: initial; margin: 0.2rem 0 0.4rem; } } .dc-tick-counter-bar__text { position: absolute; width: 100%; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-datepicker; weak */ .dc-datepicker { position: relative; display: inline-block; width: 100%; } .dc-datepicker__container { display: flex; border: 1px solid var(--color-interactive-default); border-radius: 4px; align-items: center; } .dc-datepicker__container:hover:not(.dc-input--disabled) { border-color: var(--color-interactive-hover); } .dc-datepicker__container[focus-within] { border-color: var(--brand-secondary); } .dc-datepicker__container:focus-within { border-color: var(--brand-secondary); } .dc-datepicker__container[focus-within]:hover { border-color: var(--brand-secondary); } .dc-datepicker__container:focus-within:hover { border-color: var(--brand-secondary); } .dc-datepicker__container--error { border-color: var(--brand-primary) !important; } .dc-datepicker__container--disabled { border-color: var(--color-interactive-disabled); } @media (max-width: 1279px) { .dc-datepicker__container input[type=date]::-webkit-calendar-picker-indicator { background: transparent; bottom: 0; color: transparent; cursor: pointer; height: auto; left: 0; position: absolute; right: 0; top: 0; width: auto; } } .dc-datepicker__hint { margin-left: 1.3rem; position: absolute; top: 4.1rem; } .dc-datepicker__hint--relative { margin-left: 1.2rem; position: relative; top: auto; top: initial; } .dc-datepicker__input .dc-input__field { width: 100%; border-radius: 4px; box-sizing: border-box; appearance: none; -webkit-appearance: none; -moz-appearance: none; } .dc-datepicker__input .dc-input__field:hover:not(:disabled) { cursor: pointer; border-color: var(--color-interactive-hover); } .dc-datepicker__input .dc-input__field:focus { outline: none; } .dc-datepicker__input .dc-input__field:active { border-color: var(--color-interactive-active); } .dc-datepicker__input .dc-input__field::-ms-clear { display: none; } .dc-datepicker__input .dc-input__field::-moz-placeholder { /* Fix value placeholder for datepicker for Firefox 19+ */ line-height: 4rem; } .dc-datepicker__input--has-leading-icon .dc-input__field { text-align: center; } .dc-datepicker__picker { position: absolute; z-index: 2; transform: translate3d(0, 0, 0); opacity: 1; } .dc-datepicker__picker--left-enter, .dc-datepicker__picker--left-exit { /*rtl:ignore*/ transform: translate3d(-275px, 0, 0); opacity: 0; } .dc-datepicker__picker--left-enter-done { /*rtl:ignore*/ transform: translate3d(-295px, 0, 0); opacity: 1; } .dc-datepicker__picker--left-enter-done, .dc-datepicker__picker--left-exit { /*rtl:ignore*/ transition: transform 0.25s ease, opacity 0.25s linear; } .dc-datepicker__picker--top-enter, .dc-datepicker__picker--top-exit { transform: translate3d(0, 0, 0); opacity: 0; } .dc-datepicker__picker--top-enter-done { transform: translate3d(0, -40px, 0); opacity: 1; } .dc-datepicker__picker--top-enter-done, .dc-datepicker__picker--top-exit { transition: transform 0.25s ease, opacity 0.25s linear; } .dc-datepicker__picker--bottom-enter, .dc-datepicker__picker--bottom-exit { transform: translate3d(0, 0, 0); opacity: 0; } .dc-datepicker__picker--bottom-enter-done { transform: translate3d(0, 40px, 0); opacity: 1; } .dc-datepicker__picker--bottom-enter-done, .dc-datepicker__picker--bottom-exit { transition: transform 0.25s ease, opacity 0.25s linear; } @media (max-width: 1279px) { .dc-datepicker--hint { margin-bottom: 5rem; } .dc-datepicker__native { opacity: 0; width: 100%; min-width: calc(100% - 1rem); position: absolute; height: 38px; } .dc-datepicker__display { display: flex; align-items: center; justify-content: flex-start; padding-left: 1rem; height: 38px; position: relative; width: 100%; color: var(--color-text-primary); } .dc-datepicker__display-text { background-color: inherit; padding-top: 0.2rem; } .dc-datepicker__display-text--has-error { padding-top: 0; padding-top: initial; } .dc-datepicker__calendar-icon { pointer-events: none; margin-right: 1rem; } .dc-datepicker__placeholder { color: var(--color-text-secondary); transform: none; transition: transform 0.25s linear; position: absolute; font-size: 1.4rem; left: 1.3rem; } .dc-datepicker__placeholder--has-value { transform: translate3d(-14px, -20px, 0px) scale(0.7); color: var(--color-text-secondary); background-color: var(--color-surface-primary); } .dc-datepicker__placeholder--has-error { color: var(--brand-primary); } .dc-datepicker__placeholder--is-focused { color: var(--brand-secondary); } .dc-datepicker__error { display: flex; position: absolute; top: 4.5rem; left: 1.3rem; } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define data-list; weak */ .data-list { position: relative; height: 100%; display: flex; flex-direction: column; } .data-list__body { flex: 1; } .data-list__body-wrapper { display: flex; flex-direction: column; height: 100%; } .data-list__footer { width: 100%; background: var(--color-surface-primary); border-top: 2px solid var(--color-interactive-disabled); display: flex; align-items: center; position: relative; } .data-list__item { height: inherit; } .data-list__item--wrapper { height: inherit; text-decoration: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } @media (min-width: 320px) and (max-width: 767px) { .data-list__item { border-radius: 4px; } } .data-list__row { display: flex; flex-direction: row; padding: 4px 16px; width: 100%; } .data-list__row > * { flex: 1; } .data-list__row-content { font-size: 1.4rem; line-height: 2rem; color: var(--color-text-secondary); } .data-list__row-cell--amount { display: flex; flex-direction: column; align-items: flex-end; flex: none; } .data-list__row-title { font-size: 1.4rem; font-weight: bold; color: var(--color-text-primary); line-height: 2rem; } @media (min-width: 320px) and (max-width: 767px) { .data-list__row-title { font-size: 1.2rem; } } .data-list__row-divider { margin: 0 1.6rem; } .data-list__row-divider:after { content: ""; display: block; border-top: 1px solid var(--color-surface-border); } .data-list__row--wrapper:not(.data-list__item--dynamic-height-wrapper) { height: 100%; } .data-list__row--timer { flex: none; } .data-list__desc--wrapper { height: inherit; display: flex; text-align: center; align-items: center; font-size: var(--text-size-xxs); color: var(--color-text-secondary); padding: 1rem; } /* stylelint-disable-next-line plugin/selector-bem-pattern */ .ReactVirtualized__List { outline: 0; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-data-table */ .dc-data-table { display: flex; flex-direction: column; } /** @define table */ .table { display: flex; flex-direction: column; box-sizing: border-box; font-size: 1.4rem; text-align: center; font-weight: 400; color: var(--color-text-black); text-transform: default; line-height: 1.5; color: var(--color-text-secondary); } .table__cell { padding: 0.75em; display: flex; align-items: center; } .table__cell:first-child { padding-left: 0; } [dir=rtl] .table__cell:first-child { padding-right: 0; padding-left: 0.75em; } .table__cell:last-child { padding-right: 0; } [dir=rtl] .table__cell:last-child { padding-left: 0; padding-right: 0.75em; } .table__row { display: grid; grid-auto-rows: max-content; padding: 0 1.6em; box-sizing: border-box; text-decoration: none; position: relative; } [dir=rtl] .table__row { direction: rtl; } .table__row, .table__row:active, .table__row:visited { color: var(--color-text-secondary); } .table__row--preloader { position: absolute; top: 0; left: 0; height: 100%; max-height: 64px; width: 100%; } [dir=rtl] .table__row--preloader { right: 0; left: auto; left: initial; } .table__row--icon { margin-left: 1rem; } [dir=rtl] .table__row--icon { margin-right: 1rem; margin-left: 0; } .table__head { border-bottom: 2px solid var(--color-surface-border); height: 52px; } .table__head .table__row { color: var(--color-text-primary); height: 100%; border-bottom: none; } .table__body { overflow: hidden; flex-grow: 1; display: flex; flex-direction: column; flex-basis: 0; } .table__body .table__row-link:hover { background-color: var(--color-interactive-hover); cursor: pointer; } .table__body .table__row:last-child { border-bottom: none; } .table__head, .table__foot { font-weight: 500; white-space: nowrap; } .table__foot { border-top: 2px solid var(--color-surface-border); } .table__foot .table__row { color: var(--color-text-secondary); border-bottom: none; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-dialog */ .dc-dialog { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; z-index: 999; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .dc-dialog__wrapper { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 999; transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25); background-color: var(--color-modal-backdrop); } .dc-dialog__wrapper--enter, .dc-dialog__wrapper--exit { opacity: 0; } .dc-dialog__wrapper--enter .dc-dialog__dialog, .dc-dialog__wrapper--exit .dc-dialog__dialog { transform: translate3d(0, 50px, 0); opacity: 0; } .dc-dialog__wrapper--enter-done { opacity: 1; } .dc-dialog__wrapper--enter-done .dc-dialog__dialog { transform: translate3d(0, 0, 0); opacity: 1; } .dc-dialog__wrapper--has-portal { background-color: transparent; } .dc-dialog__dialog { max-width: 560px; max-height: 338px; min-width: 440px; min-height: 176px; margin: 0 15px; margin-top: -48px; padding: 2.4rem; border-radius: 8px; box-sizing: border-box; display: flex; justify-content: space-around; flex-direction: column; align-items: center; box-shadow: 0 2px 8px 0 var(--color-shadow-medium); background-color: var(--color-surface-primary); transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25), opacity 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25); } .dc-dialog__header-wrapper { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .dc-dialog__header-wrapper--end { justify-content: flex-end; } .dc-dialog__header--title { align-self: flex-start; } .dc-dialog__header--close { cursor: pointer; } .dc-dialog__content { align-self: flex-start; margin-bottom: 2.4rem; max-width: calc(440px - 4.8rem); width: 100%; /* postcss-bem-linter: ignore */ } .dc-dialog__content .dc-input__label { background-color: var(--color-surface-primary); } .dc-dialog__content--centered { align-self: center; } .dc-dialog__footer { display: flex; justify-content: flex-end; align-items: center; width: 100%; } @media (min-width: 320px) and (max-width: 767px) { .dc-dialog__footer { flex-wrap: wrap; align-items: flex-start; } } .dc-dialog__button { margin-left: 0.8rem; } @media (min-width: 320px) and (max-width: 767px) { .dc-dialog__button:not(:last-child) { margin-bottom: 1rem; } } @media screen and (max-width: 560px) { .dc-dialog__dialog { min-width: auto; } .dc-dialog__dialog--has-margin { min-width: 0; min-width: initial; width: calc(100vw - 4.8rem); } } @charset "UTF-8"; /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ .dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .dc-dropdown__select-arrow .color1-fill { fill: var(--color-text-secondary); } .dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .dc-dropdown__select-arrow .color1-stroke { stroke: var(--color-text-secondary); } .dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .dc-dropdown__select-arrow .color2-fill { fill: none; } .dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .dc-dropdown__select-arrow .color2-stroke { stroke: none; } .active.dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .active.dc-dropdown__select-arrow .color1-fill { fill: var(--color-text-primary); } .active.dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .active.dc-dropdown__select-arrow .color1-stroke { stroke: var(--color-text-primary); } .active.dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .active.dc-dropdown__select-arrow .color2-fill { fill: none; } .active.dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .active.dc-dropdown__select-arrow .color2-stroke { stroke: none; } .disabled.dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .disabled.dc-dropdown__select-arrow .color1-fill { fill: var(--color-text-disabled); } .disabled.dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .disabled.dc-dropdown__select-arrow .color1-stroke { stroke: var(--color-text-disabled); } .disabled.dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .disabled.dc-dropdown__select-arrow .color2-fill { fill: none; } .disabled.dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .disabled.dc-dropdown__select-arrow .color2-stroke { stroke: none; } .white.dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .white.dc-dropdown__select-arrow .color1-fill { fill: var(--color-text-primary); } .white.dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .white.dc-dropdown__select-arrow .color1-stroke { stroke: var(--color-text-primary); } .border_hover_color.dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .border_hover_color.dc-dropdown__select-arrow .color1-fill { fill: var(--color-text-primary); } .border_hover_color.dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .border_hover_color.dc-dropdown__select-arrow .color1-stroke { stroke: var(--color-text-primary); } .secondary.dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .secondary.dc-dropdown__select-arrow .color1-fill { fill: var(--color-text-secondary); } .secondary.dc-dropdown__select-arrow { /* postcss-bem-linter: ignore */ } .secondary.dc-dropdown__select-arrow .color1-stroke { stroke: var(--color-text-secondary); } /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ [dir="ltr"] .dc-dropdown__label{ left: 0; } [dir="rtl"] .dc-dropdown__label{ right: 0; } .dc-dropdown__label { position: absolute; font-size: var(--text-size-xs); transform: translate(0.5rem, -1rem) scale(0.75); z-index: 2; color: var(--color-text-primary); padding: 0 4px; background-color: var(--color-surface-primary); pointer-events: none; transition: 0.25s ease all; } .dc-dropdown__label--clicked { color: var(--brand-secondary); } .dc-dropdown__display { cursor: pointer; border-radius: 4px; height: 3.2em; display: flex; align-items: center; justify-content: center; background: var(--color-surface-primary); border: 1px solid var(--color-surface-border); } @media (max-width: 1279px) { .dc-dropdown__display { height: 4rem; } } .dc-dropdown__display:hover { outline: 0; border-color: var(--color-interactive-hover); } .dc-dropdown__display:active, .dc-dropdown__display:focus { outline: 0; } .dc-dropdown__display-text { padding-left: 1em; padding-right: 2.5em; display: flex; white-space: nowrap; } .dc-dropdown__display-text--placeholder:after { content: attr(placeholder); position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .dc-dropdown__display--has-suffix-icon { width: 21rem; padding-left: 3rem; padding-right: 0; justify-content: start; } .dc-dropdown__display--is-left-text { justify-content: flex-start; } .dc-dropdown__display--is-left-text .dc-dropdown__display-text { padding-left: 1.2rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: inline-block; } .dc-dropdown__display--duration { margin-top: 1rem; } .dc-dropdown__display--duration .dc-dropdown__display-text { color: var(--color-text-secondary) !important; padding: 0 !important; } .dc-dropdown__display--has-symbol { justify-content: initial; } .dc-dropdown__display--no-border { border-color: var(--color-surface-border); } .dc-dropdown__display-placeholder { position: absolute; top: 1.2rem; left: 1rem; pointer-events: none; transition: 0.25s ease all; transform: translateZ(0); transform-origin: top left; } .dc-dropdown__display-placeholder-text { padding: 0 4px; background: var(--color-surface-primary); } .dc-dropdown__display-placeholder--is-left-text { justify-content: flex-start; left: 8px; } .dc-dropdown__display-placeholder--is-left-text.dc-dropdown__display-placeholder--is-title { transform: translate(0, -1.7rem) scale(0.75); padding: 0 2px; white-space: nowrap; } .dc-dropdown__display-placeholder--is-left-text.dc-dropdown__display-placeholder--is-title .dc-dropdown__display-placeholder-text { color: var(--color-text-secondary) !important; } .dc-dropdown__inner { pointer-events: none; opacity: 0; height: 0; width: 0; } .dc-dropdown__container { position: relative; } .dc-dropdown__hint { margin-left: 1.2rem; } .dc-dropdown--no-margin .dc-dropdown__display { margin: 0; } .dc-dropdown__select-arrow { display: inline-block; font-style: normal; vertical-align: baseline; text-rendering: optimizeLegibility; position: absolute; pointer-events: none; top: calc(50% - 7px); right: 12px; transition: transform 0.2s ease; transform: rotate(0deg); transform-origin: 50% 45%; font-size: 1.6rem; text-align: center; font-weight: 400; color: var(--color-text-black); text-transform: none; line-height: 1.75; } .dc-dropdown__select-arrow:before { content: "⌃"; display: block; height: 0.53em; } .dc-dropdown__select-arrow--up { transform: rotate(-180deg); } .dc-dropdown__select-arrow--error { top: 1.4rem; } .dc-dropdown:active, .dc-dropdown:focus, .dc-dropdown--show { outline: none; border-radius: 4px; } .dc-dropdown:active .dc-dropdown__select-arrow, .dc-dropdown:focus .dc-dropdown__select-arrow, .dc-dropdown--show .dc-dropdown__select-arrow { color: var(--color-text-secondary); } .dc-dropdown--error { margin-bottom: -1.8rem; } .dc-dropdown--error .dc-dropdown__display { border-color: var(--brand-primary) !important; } .dc-dropdown--error .dc-dropdown__label { color: var(--brand-primary) !important; } .dc-dropdown--error .dc-dropdown__display-placeholder-text { color: var(--brand-primary) !important; } .dc-dropdown__list { left: 0; bottom: -0.4rem; height: 0; width: 100%; position: absolute; transition: transform 0.25s ease, opacity 0.25s linear; -webkit-user-select: none; -moz-user-select: none; user-select: none; opacity: 0; transform: scale(1, 0); z-index: 999; } .dc-dropdown__list--enter, .dc-dropdown__list--exit { transform: scale(1, 0); opacity: 0; } .dc-dropdown__list--enter-done { transform: scale(1, 1); opacity: 1; } .dc-dropdown__list--top { bottom: auto; bottom: initial; top: 0.8em; } .dc-dropdown__list--left { top: -0.1em; } .dc-dropdown__list--left--enter, .dc-dropdown__list--left--exit { /*rtl:ignore*/ transform: scale(1, 1) translate3d(2em, 0, 0px); opacity: 0; } .dc-dropdown__list--left--enter-done { opacity: 1; } .dc-dropdown__list--portal { height: auto; margin: 0.4rem 0; } .dc-dropdown__list--portal .dc-list { position: static; } .dc-dropdown--left .dc-dropdown__display { text-align: center; } .dc-dropdown--left .dc-dropdown__display-text { padding-left: 0; padding-left: initial; } .dc-dropdown--left .dc-dropdown__display-symbol { right: 0; float: right; position: relative; margin-left: auto; margin-right: 0.6em; } .dc-dropdown--left .dc-dropdown__select-arrow { /*rtl:ignore*/ left: 0.6em; /*rtl:ignore*/ right: auto; right: initial; } .dc-dropdown--show .dc-dropdown__display { border: 1px solid var(--color-interactive-active); } .dc-dropdown--show > .dc-dropdown__select-arrow { transform: rotate(-180deg); } .dc-dropdown--show > .dc-dropdown__select-arrow--left { transform: rotate(-180deg); } .dc-dropdown--disabled { pointer-events: none; } .dc-dropdown--disabled .dc-dropdown__display { border: 1px solid var(--color-interactive-disabled); } .dc-dropdown--disabled .dc-dropdown__display-text { color: var(--color-text-secondary); } .dc-dropdown-container { position: relative; margin-top: 0.8rem; min-width: 15rem; width: 100%; } .dc-dropdown-container:not(.cfd-personal-details-modal__form *):not(.trade-container__multiplier-dropdown):not(.dc-dropdown--left):not(.contract-type-info__dropdown) { margin-top: 0; margin-top: initial; } .dc-dropdown--has-placeholder .dc-dropdown__display { height: 4rem; } .dc-dropdown--has-placeholder .dc-dropdown__display .dc-dropdown__display-placeholder-text { color: var(--color-text-secondary); } .dc-dropdown--has-placeholder .dc-dropdown__display .dc-dropdown__display-placeholder-text-limit-fit { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: inline-block; max-width: 36.4rem; } .dc-dropdown--has-placeholder .dc-dropdown__display--clicked .dc-dropdown__display-placeholder-text { color: var(--brand-secondary) !important; } .dc-dropdown--has-placeholder .dc-dropdown__select-arrow { top: 12px; right: 16px; } .dc-dropdown--has-suffix-icon { margin-left: 1rem; margin-top: 0; max-width: -moz-fit-content; max-width: fit-content; } .suffix-icon { position: absolute; left: 20px; transition: transform 0.2s ease; transform: rotate(0deg); } .suffix-icon--flip { transform: rotate(-180deg); } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-list { position: absolute; width: 100%; z-index: 2; border-radius: 4px; box-shadow: 0 2px 8px 0 var(--color-shadow-medium); background: var(--color-modal-bg); border: 1px solid var(--color-surface-border); } .dc-list--has-suffix-icon { width: 21rem; } .dc-list--left { width: auto; width: initial; } .dc-list--left .dc-list__item-text, .dc-list--left .dc-list__item-symbol { padding-left: 2.286em; padding-right: 2.286em; overflow: hidden; white-space: nowrap; text-align: center; } .dc-list--large { padding-bottom: 1.6rem; max-height: 404px; } .dc-list--large .dc-list__label { padding: 1.6rem 0.8rem 0.8rem; color: var(--color-text-primary); height: 4rem; } .dc-list--large .dc-list__item-text { width: calc(100% - 1.6rem); padding: 1rem 1.6rem; margin: 0 0.8rem; } .dc-list--large .dc-list__item:not(.dc-list--large .dc-list__item--disabled):not(.dc-list--large .dc-list__item--selected):hover, .dc-list--large .dc-list__item:not(.dc-list--large .dc-list__item--disabled):not(.dc-list--large .dc-list__item--selected):focus { border-radius: 4px; width: calc(100% - 1.6rem); margin: 0 0.8rem; } .dc-list--large .dc-list__item:not(.dc-list--large .dc-list__item--disabled):not(.dc-list--large .dc-list__item--selected):hover .dc-list__item-text, .dc-list--large .dc-list__item:not(.dc-list--large .dc-list__item--disabled):not(.dc-list--large .dc-list__item--selected):focus .dc-list__item-text { width: 100%; margin: 0; } .dc-list--large .dc-list__separator { width: 100%; border-bottom: 4px solid var(--color-surface-border); margin: 1.6rem 0 0; } .dc-list__label { padding: 0.6rem; font-size: 1.4rem; font-weight: bold; color: var(--brand-primary); height: 3.6rem; display: flex; align-items: center; justify-content: center; } .dc-list__item { width: 100%; cursor: pointer; } .dc-list__item-text, .dc-list__item-symbol { display: flex; width: 100%; justify-content: center; pointer-events: none; vertical-align: middle; padding: 0.6rem 1.6rem; } .dc-list__item-text--left { justify-content: flex-start; padding-left: 1em; } .dc-list__item:not(.dc-list__item--disabled):not(.dc-list__item--selected):hover { background-color: var(--color-interactive-hover); color: var(--color-text-secondary); } [dir="ltr"] .dc-list__item--selected .dc-list__item-text,[dir="ltr"] .dc-list__item--selected .dc-list__item-symbol,[dir="ltr"] .dc-list__item--selected .dc-list__item-tooltip { text-align: left; } [dir="rtl"] .dc-list__item--selected .dc-list__item-text,[dir="rtl"] .dc-list__item--selected .dc-list__item-symbol,[dir="rtl"] .dc-list__item--selected .dc-list__item-tooltip { text-align: right; } .dc-list__item--selected .dc-list__item-text, .dc-list__item--selected .dc-list__item-symbol, .dc-list__item--selected .dc-list__item-tooltip { font-size: 1.4rem; font-weight: 700; color: var(--color-text-primary); text-transform: none; line-height: 1.5; line-height: 1.43; color: var(--color-text-primary); background: var(--color-interactive-active); border-radius: 4px; } .dc-list__item:focus:not(.dc-list__item--disabled) { background-color: var(--color-interactive-hover); color: var(--color-text-secondary); outline: none; } .dc-list__item--disabled { color: var(--color-text-disabled); opacity: 0.3; cursor: default; } .dc-list__item-symbol { width: 100%; padding: 0.6rem 0; margin: 0; justify-content: center; display: flex; } .dc-list__separator { display: flex; width: calc(100% - 3.2rem); border-bottom: 1px solid var(--color-interactive-default); margin: 1.6rem; } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .dc-list { /* postcss-bem-linter: ignore */ } .dc-list > div:nth-child(1) .dc-list > div:nth-child(1) { overflow-x: hidden !important; } .dc-list > div:nth-child(1) .dc-list > div:nth-child(1) { overflow-y: auto; /* postcss-bem-linter: ignore */ } .dc-list > div:nth-child(1) .dc-list > div:nth-child(1)::-webkit-scrollbar { -webkit-appearance: none; } .dc-list > div:nth-child(1) .dc-list > div:nth-child(1) { /* postcss-bem-linter: ignore */ } .dc-list > div:nth-child(1) .dc-list > div:nth-child(1) > div:nth-child(1) { padding-bottom: 11.5em !important; } } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-modal; weak */ .dc-modal__container { display: flex; flex-direction: column; position: relative; overflow: hidden; border-radius: 8px; transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25), opacity 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25); background-color: var(--color-modal-bg); border: 1px solid var(--color-surface-border); box-shadow: 0 32px 64px 0 var(--color-shadow-medium); } .dc-modal__container--is-vertical-centered { transform: translateY(-50%) !important; } .dc-modal__container--is-vertical-centered { position: absolute; top: 50vh; } .dc-modal__container--is-vertical-centered .dc-modal__container { min-width: 0; min-width: initial; top: 2rem; } @media (min-width: 320px) and (max-width: 767px) { .dc-modal__container--is-vertical-centered { width: calc(100vw - 4.8rem) !important; } .dc-modal__container--is-vertical-centered { left: 2.4rem; } } .dc-modal__container--is-vertical-top { top: 48px; position: absolute; } @media (max-width: 600px) { .dc-modal__container--is-vertical-top { width: calc(100vw - 3.2rem) !important; } .dc-modal__container--is-vertical-top { top: 56px; left: 1.6rem; } } .dc-modal__container--is-vertical-bottom { bottom: 36px; position: absolute; } @media (max-width: 600px) { .dc-modal__container--is-vertical-bottom { width: calc(100vw - 3.2rem) !important; } .dc-modal__container--is-vertical-bottom { left: 1.6rem; } } .dc-modal__container--hide { display: none; } .dc-modal__container--enter, .dc-modal__container--exit { transform: translateY(50px); opacity: 0; pointer-events: none; } .dc-modal__container--enter-done { transform: translateY(0); opacity: 1; pointer-events: auto; } .dc-modal__container--small { max-width: 440px; } .dc-modal__container--small .dc-modal-header { border-bottom: none; } .dc-modal__container--is-confirmation-modal .dc-modal-header { border-bottom: none; } .dc-modal__container--is-confirmation-modal .dc-modal-header__title { padding: 2.4rem; } .dc-modal__container--is-confirmation-modal .dc-modal-body { padding: 0 2.4rem; } .dc-modal__container--is-confirmation-modal .dc-modal-footer { padding: 2.4rem; } @media (min-width: 601px) { .dc-modal__container { min-width: 440px !important; max-height: calc(100vh - 48px - 36px) !important; } } @media (max-width: 600px) { .dc-modal__container { max-width: calc(100vw - 3.2rem) !important; } } @media (max-width: 1279px) { .dc-modal__container_sent-email__modal { height: 42rem !important; overflow-y: scroll !important; } } .dc-modal { /** @define dc-modal-header */ } .dc-modal-header { display: flex; justify-content: space-between; width: 100%; line-height: 24px; align-items: center; } .dc-modal-header__border-bottom { border-bottom: 2px solid var(--color-surface-border) !important; } .dc-modal-header__icon { margin-right: 1rem; } .dc-modal-header__icon:hover { cursor: pointer; } .dc-modal-header__title { padding: 1.6rem 2.4rem; display: flex; align-items: center; height: 100%; } .dc-modal-header__title:empty { padding: 0; border: none; } @media (min-width: 320px) and (max-width: 767px) { .dc-modal-header__title { font-size: 1.4rem; padding: 1.6rem; line-height: 1.2; } } .dc-modal-header__section { flex-grow: 1; padding: 1.6rem; line-height: 24px; display: flex; align-items: center; } .dc-modal-header__close { display: block; cursor: pointer; padding: 0.6rem 0.8rem; height: 30px; width: 32px; margin: 1.2rem 1.6rem 1.2rem auto; } @media (min-width: 320px) and (max-width: 767px) { .dc-modal-header__close { margin: 0.8rem; } } .dc-modal-header--is-title-centered { justify-content: flex-end; position: relative; } @media (min-width: 320px) and (max-width: 767px) { .dc-modal-header--is-title-centered .dc-modal-header__title { position: absolute; } } .dc-modal-header--is-title-centered .dc-modal-header__title { justify-content: center; width: 100%; } .dc-modal-header--is-title-centered .dc-modal-header__close { z-index: 1; } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .dc-modal-header { /* postcss-bem-linter: ignore */ min-height: 4.8rem; } } } .dc-modal { /** @define dc-modal-body */ } .dc-modal-body:first-child { padding-top: 2.4rem; } .dc-modal-body { padding: 2.4rem; font-size: 1.4rem; line-height: 1.43; color: var(--color-text-primary); } .dc-modal-body__expiration { min-height: 12rem; padding: 1.6rem; } @media (min-width: 320px) and (max-width: 767px) { .dc-modal-body { font-size: 1.2rem; padding: 0.8rem 2.4rem; } } .dc-modal { /** @define dc-modal-footer; weak */ } .dc-modal-footer { display: flex; justify-content: flex-end; padding: 1.6rem; margin-top: auto; } .dc-modal-footer .dc-btn { margin: 0 0.8rem; } .dc-modal-footer .dc-btn:last-child { margin: 0; } .dc-modal-footer--separator { border-top: 2px solid var(--color-surface-border); } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .error-modal { display: flex; flex-direction: column; justify-content: center; align-items: center; } .error-modal .dc-btn { margin: 2.4rem 0 1.6rem; } @media (min-width: 320px) and (max-width: 767px) { .error-modal { height: calc(100vh - 80px); } .error-modal .dc-btn { width: 100%; margin-top: 1.6rem; } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .fullscreen-error { display: flex; flex-direction: column; align-items: center; position: fixed; top: 0; width: 100vw; background: linear-gradient(0deg, #181c25, #3d2832), radial-gradient(108.21% 50% at 52.05% 0%, rgba(255, 68, 79, 0.24) 0%, rgba(255, 68, 79, 0) 100%); z-index: 9999; } .fullscreen-error__content { display: flex; flex-direction: column; align-items: center; gap: var(--core-spacing-400); } .fullscreen-error__button-container .dc-btn { border-radius: 2.4rem; } .fullscreen-error__button-container .dc-btn:hover { background: var(--color-button-primary-hover); } @media (min-width: 601px) { .fullscreen-error { justify-content: center; gap: var(--core-spacing-1600); } .fullscreen-error__button-container .dc-btn { width: 28rem; } } @media (min-width: 320px) and (max-width: 767px) { .fullscreen-error { justify-content: space-between; } .fullscreen-error__content { flex: 1; justify-content: center; padding: var(--core-spacing-1200); } .fullscreen-error__title { font-size: var(--text-size-m); } .fullscreen-error__button-container { padding: var(--core-spacing-1200); width: 100%; } .fullscreen-error__button-container .dc-btn { width: 100%; } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-flyout */ .dc-flyout { height: 100%; width: 30.4rem; position: fixed; z-index: 99; top: 0; /* rtl:begin:ignore */ left: 7.2rem; transform: translateX(-100%); /* rtl:end:ignore */ box-sizing: border-box; pointer-events: none; will-change: transform; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 4px; background-color: var(--color-surface-primary); color: var(--color-text-primary); /* rtl:begin:ignore */ border-right: 1px solid var(--color-surface-border); /* rtl:end:ignore */ } .dc-flyout--open { /* rtl:begin:ignore */ transform: translateX(0); /* rtl:end:ignore */ pointer-events: auto; } .dc-flyout__header { height: 6.4rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 1.6rem; } .dc-flyout__body { height: calc(100% - 6.4rem); box-sizing: border-box; overflow-y: auto; overflow-x: hidden; } .dc-flyout__body--with-footer { height: calc(100% - 6.4rem - 6rem); } .dc-flyout__footer { position: relative; height: 6rem; display: flex; align-items: center; padding: 0 1.6rem; border-top: 1px solid var(--color-surface-border); } .dc-flyout__icon-close { display: inline-flex; align-items: center; justify-content: space-between; cursor: pointer; } .dc-flyout__icon-close svg { width: 1.6rem; height: 1.6rem; } .dc-flyout__icon-close:hover { opacity: 0.8; } @media (max-width: 600px) { .dc-flyout { display: none; } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .inline-message { display: flex; flex-direction: row; align-items: flex-start; padding: 0.8rem; gap: 0.8rem; border-radius: 4px; height: -moz-min-content; height: min-content; } @media (min-width: 768px) { .inline-message__lg { padding: 1.6rem; gap: 1.6rem; border-radius: 8px; } } .inline-message__warning { background: var(--color-status-warning-bg); } .inline-message__information { background: var(--color-status-info-bg); } .inline-message__announcement { background: var(--color-status-info-bg); } .inline-message__error { background: var(--color-status-danger-bg); } .inline-message__icon__sm { margin-top: 0.1rem; } @media (min-width: 320px) and (max-width: 767px) { .inline-message__icon__sm { margin-top: 0; } } .inline-message__icon__md { margin-top: 0.2rem; } @media (min-width: 320px) and (max-width: 767px) { .inline-message__icon__md { margin-top: 0.1rem; } } @media (min-width: 320px) and (max-width: 767px) { .inline-message__icon__lg { margin-top: 0.2rem; } } .inline-message__messages { display: flex; flex-direction: column; flex: 1; align-self: stretch; } .inline-message__messages__xs { margin-top: 0.1rem; } @media (min-width: 320px) and (max-width: 767px) { .inline-message__messages__xs { margin-top: 0.2rem; } } @media (min-width: 320px) and (max-width: 767px) { .inline-message__messages__sm { margin-top: 0.1rem; } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-label { font-size: 14px; font-weight: bold; height: 24px; line-height: 20px; border-radius: 12px; padding: 2px 8px; margin: 0 2px; position: relative; } .dc-label:after { opacity: 0.16; content: ""; width: 100%; height: 100%; top: 0; left: 0; position: absolute; border-radius: 12px; } .dc-label { /* TODO: change all :after to normal background color once styleguide ready */ } .dc-label--general--default { color: var(--color-status-neutral); } .dc-label--general--default:after { background-color: var(--color-status-neutral); } .dc-label--general--adjustment { color: var(--color-status-neutral); } .dc-label--general--adjustment:after { background-color: var(--color-status-neutral); } .dc-label--general--danger { color: var(--color-status-danger); } .dc-label--general--danger:after { background-color: var(--color-status-danger); } .dc-label--general--warn { color: var(--color-status-warning); } .dc-label--general--warn:after { background-color: var(--color-status-warning); } .dc-label--general--success { color: var(--color-status-success); } .dc-label--general--success:after { background-color: var(--color-status-success); } .dc-label--general--transfer { color: var(--status-transfer); } .dc-label--general--transfer:after { background-color: var(--status-transfer); } .dc-label--general--default-invert { color: var(--color-text-secondary); } .dc-label--general--default-invert:after { background-color: var(--color-text-secondary); } .dc-label--general--success-invert { color: var(--color-surface-primary); background-color: var(--color-status-success); } .dc-label--general--warn-invert { color: var(--color-surface-primary); background-color: var(--color-status-warning); } .dc-label--general--info { color: var(--color-status-info); } .dc-label--general--info:after { background-color: var(--color-status-info); } .dc-label--large { height: 28px; border-radius: 20px; padding: 4px 8px 4px 4px; margin: 0 2px; font-size: 16px; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-linear-progress; weak */ .dc-linear-progress { display: flex; height: 4px; justify-content: flex-start; align-items: flex-start; flex-direction: column; position: absolute; bottom: 0; width: 100%; left: 0; } .dc-linear-progress__bar { height: 100%; transition: width 0.5s cubic-bezier(0.62, 0.01, 0.51, 0.95); background-color: var(--brand-primary); } .dc-linear-progress__countdown { position: absolute; left: 1rem; bottom: 1rem; font-size: 12px; color: var(--brand-primary); font-weight: bold; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /* S: Steps N: Number B: Backspace O: Ok Z: Zero */ .dc-numpad { box-sizing: border-box; display: grid; grid-gap: 0.3rem; grid-template-columns: repeat(4, 1fr); } .dc-numpad--is-regular { grid-template-areas: "np np np np" "r3 r3 r3 b" "r2 r2 r2 b" "r1 r1 r1 o" "z z z o"; grid-template-columns: min-content min-content min-content minmax(48px, 1fr); max-width: -moz-min-content; max-width: min-content; } .dc-numpad--is-currency { grid-template-areas: "np np np np" "r3 r3 r3 b" "r2 r2 r2 b" "r1 r1 r1 o" "z z p o"; grid-template-columns: min-content min-content min-content minmax(48px, 1fr); max-width: -moz-min-content; max-width: min-content; } .dc-numpad__input-area { display: grid; grid-area: np; grid-template-areas: "dc inp inp nc"; grid-template-columns: min-content 1fr 1fr min-content; } .dc-numpad__decrement { grid-area: dc; border-top-right-radius: 0; border-bottom-right-radius: 0; } .dc-numpad__increment { grid-area: nc; border-top-left-radius: 0; border-bottom-left-radius: 0; } .dc-numpad__increment, .dc-numpad__decrement { width: 48px; height: 48px; } .dc-numpad__input-field, .dc-numpad__increment, .dc-numpad__decrement { background-color: var(--color-surface-primary); color: var(--color-text-primary); } .dc-numpad__input-field { margin: 0 !important; } .dc-numpad__input-field { grid-area: inp; padding: 0; border: none; border-radius: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; text-align: center; font-weight: 700; color: var(--color-text-black); text-transform: none; line-height: 1.75; color: var(--color-text-primary); } .dc-numpad__input-field input { padding: 0; max-height: 48px; } .dc-numpad__input-field--has-error { color: var(--color-status-danger); font-weight: bold; } [dir="ltr"] .dc-numpad__number { text-align: left; } [dir="rtl"] .dc-numpad__number { text-align: right; } .dc-numpad__number { text-align: left !important; } .dc-numpad__number { border-radius: 2.4rem; background-color: var(--color-surface-primary); width: 48px; height: 48px; font-size: 1.6rem; font-weight: 700; color: var(--color-text-black); text-transform: none; line-height: 1.75; color: var(--color-text-primary); } .dc-numpad__number--is-disabled, .dc-numpad__number[disabled] { background-color: var(--color-interactive-disabled) !important; } .dc-numpad__number--is-disabled, .dc-numpad__number[disabled] { pointer-events: none; touch-action: none; } .dc-numpad__number--r3 { grid-row: 2/2; } .dc-numpad__number--r2 { grid-row: 3/3; } .dc-numpad__number--r1 { grid-row: 4/4; } .dc-numpad__number--zero { width: 100% !important; } .dc-numpad__number--zero { grid-area: z; } .dc-numpad__number--is-left-aligned { text-align: left; width: 100%; padding: 0 0 0 4px; } .dc-numpad__dot { grid-area: p; } .dc-numpad__bkspace { grid-area: b; } .dc-numpad__bkspace button { height: 100%; } .dc-numpad__ok { grid-area: o; } .dc-numpad__ok button { height: 100%; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-page-error */ .dc-page-error__container { display: flex; justify-content: center; align-items: center; height: 100vh; } @media (min-width: 1024px) { .dc-page-error__container--left { justify-content: left; } } @media screen and (max-width: 1024px) { .dc-page-error__container { flex-wrap: wrap; } } .dc-page-error__box { background: var(--color-surface-primary); border: var(--color-surface-border); padding: 2rem; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; } @media (min-width: 1024px) { .dc-page-error__box--left { align-items: start; } } @media screen and (min-width: 1008px) { .dc-page-error__box { max-width: calc(100vw - 45%); } } .dc-page-error__box { /* postcss-bem-linter: ignore */ } .dc-page-error__box .inline-icon { margin: 0 auto; } .dc-page-error__message { font-size: 1.6rem; text-align: center; font-weight: 400; color: var(--color-text-black); text-transform: none; line-height: 1.75; max-width: 502px; margin: 1.6rem 0 2.4rem; } .dc-page-error__message-wrapper { display: flex; justify-content: center; } @media (min-width: 1024px) { .dc-page-error__message-wrapper--left { justify-content: left; } } .dc-page-error__message-wrapper--left .dc-page-error__message-paragraph:not(:last-child) { margin-bottom: 1.6rem; max-width: 38rem; } @media (min-width: 1024px) { .dc-page-error__message--left { text-align: left; } } .dc-page-error__btn { min-width: 14rem; margin: 1rem; } .dc-page-error__btn-wrapper { display: flex; justify-content: center; } @media (min-width: 320px) and (max-width: 767px) { .dc-page-error__btn { margin: 0 0 1.6rem; } .dc-page-error__btn-wrapper { flex-direction: column; } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-page-overlay-portal { position: absolute; height: 100%; width: 100%; top: 48px; transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25), opacity 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25); background-color: var(--color-surface-primary); opacity: 0; } @media (max-width: 1279px) { .dc-page-overlay-portal { top: 56px; } } .dc-page-overlay--enter, .dc-page-overlay--exit { transform: translateY(50px); opacity: 0; pointer-events: none; } .dc-page-overlay--enter-done { transform: translateY(0); opacity: 1; pointer-events: auto; z-index: 9; } .dc-page-overlay__header { position: sticky; top: 0; z-index: 100; background-color: var(--color-surface-primary); padding: 0.8rem 2.4rem; border-bottom: 1px solid var(--color-surface-border); } .dc-page-overlay__header-title { flex: 1; text-align: center; font-size: var(--text-size-m); color: var(--color-text-primary); font-weight: bold; line-height: 1.5; } @media (max-width: 1279px) { .dc-page-overlay__header-title { font-size: 1.6rem; } } .dc-page-overlay__header-close { cursor: pointer; height: 16px; position: absolute; right: 0; } [dir=rtl] .dc-page-overlay__header-close { left: 0; right: auto; right: initial; } @media (max-width: 600px) { .dc-page-overlay__header-close { right: 1.6rem; } [dir=rtl] .dc-page-overlay__header-close { left: 1.6rem; right: auto; right: initial; } } @media (min-width: 601px) and (max-width: 1279px) { .dc-page-overlay__header-close { right: 2.4rem; } [dir=rtl] .dc-page-overlay__header-close { left: 2.4rem; right: auto; right: initial; } } .dc-page-overlay__header-wrapper { width: 100%; display: flex; align-items: center; } @media (max-width: 1279px) { .dc-page-overlay__header-wrapper { height: 4rem; padding: 0; } } @media (max-width: 1279px) { .dc-page-overlay__header { height: 4rem; z-index: 3; padding: 0; margin: 0; } } .dc-page-overlay__header-tradershub { padding: 0.8rem; } .dc-page-overlay__content { padding: 2.4rem 2.4rem 0; display: flex; background-color: var(--color-surface-primary); z-index: 100; } [dir=rtl] .dc-page-overlay__content { direction: rtl; } .dc-page-overlay__content-side-note { min-width: 256px; margin-left: 2.4rem; } [dir=rtl] .dc-page-overlay__content-side-note { margin-right: 2.4rem; margin-left: 0; } @media (max-width: 600px) { .dc-page-overlay__content { flex: 1; padding: 0; } } .dc-page-overlay__header-wrapper, .dc-page-overlay__content { position: relative; } @media (max-width: 1279px) { .dc-page-overlay__header-wrapper, .dc-page-overlay__content { width: 100%; display: flex; justify-content: center; } } @media (max-width: 1279px) { .dc-page-overlay { display: flex; flex-direction: column; height: 100%; } } [dir=rtl] .dc-page-overlay .table__row { direction: rtl; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-progress-bar */ .dc-progress-bar__container { height: 2.4rem; width: 12rem; display: flex; align-items: center; justify-content: center; border-radius: 1.2rem; position: relative; overflow: hidden; } .dc-progress-bar--danger { background-color: var(--color-status-danger); } .dc-progress-bar--warning { background-color: var(--color-status-warning); } .dc-progress-bar--normal { background-color: var(--color-status-success); } .dc-progress-bar__bar { height: 100%; position: absolute; left: 0; } .dc-progress-bar__empty { width: 100%; position: absolute; opacity: 0.16; height: 100%; } .dc-progress-bar__label { z-index: 2; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-radio-group { display: flex; margin-top: 16px; flex-direction: row; align-items: center; } .dc-radio-group__input { display: none; } [dir="ltr"] .dc-radio-group__item { text-align: left; } [dir="rtl"] .dc-radio-group__item { text-align: right; } .dc-radio-group__item { display: flex; font-size: 1.4rem; font-weight: 400; color: var(--color-text-primary); text-transform: none; line-height: 1.5; cursor: pointer; color: var(--color-text-secondary); } .dc-radio-group__item:not(:last-child) { margin-right: 16px; } .dc-radio-group__circle { border: 2px solid var(--color-text-secondary); border-radius: 50%; box-shadow: 0 0 1px 0 var(--color-shadow-medium); min-width: 16px; height: 16px; transition: all 0.3s ease-in-out; margin-right: 8px; align-self: center; } .dc-radio-group__circle--disabled { border-color: var(--color-interactive-disabled); } .dc-radio-group__circle--selected { border-width: 4px; border-color: var(--brand-primary); } .dc-radio-group__circle--error { border-color: var(--color-text-secondary); } .dc-radio-group__label--disabled { color: var(--color-text-disabled); } .dc-radio-group__label--error { color: var(--color-text-danger); } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-select-native { width: 100%; position: relative; } .dc-select-native--hide-selected-value { margin-left: 10px; width: 40px; } .dc-select-native--hide-selected-value .dc-select-native__wrapper { width: 40px; } .dc-select-native__container { border: 1px solid var(--color-interactive-default); border-radius: 4px; display: flex; align-items: center; } .dc-select-native__container:hover:not(.dc-input--disabled) { border-color: var(--color-interactive-hover); } .dc-select-native__container[focus-within] { border-color: var(--brand-secondary); } .dc-select-native__container:focus-within { border-color: var(--brand-secondary); } .dc-select-native__container[focus-within]:hover { border-color: var(--brand-secondary); } .dc-select-native__container:focus-within:hover { border-color: var(--brand-secondary); } .dc-select-native__container--error { border-color: var(--brand-primary) !important; } .dc-select-native__container--disabled { border-color: var(--color-interactive-disabled); } .dc-select-native__wrapper { height: 38px; } .dc-select-native__wrapper .dc-input { margin-bottom: 0px; } .dc-select-native__arrow { position: absolute; right: 1.3rem; top: 1.3rem; --fill-color1: var(--color-text-secondary); } .dc-select-native__display { height: 38px; width: 100%; max-width: calc(100vw - 4rem); display: flex; align-items: center; justify-content: flex-start; padding-left: 1.2rem; } @media (min-width: 601px) and (max-width: 1279px) { .dc-select-native__display { max-width: 56.8rem; } } .dc-select-native__display-text { color: var(--color-text-primary); font-size: 1.4rem; white-space: nowrap; overflow: hidden; max-width: calc(100% - 4rem); text-overflow: ellipsis; display: block; height: 100%; line-height: 3.8rem; } .dc-select-native__placeholder { position: absolute; left: 1.1rem; top: 1.1rem; pointer-events: none; transition: transform 0.25s linear; padding: 0 0.4rem; font-size: 1.4rem; transform: none; background-color: var(--color-surface-primary); color: var(--color-text-secondary); transform-origin: top left; line-height: 1.43; white-space: nowrap; max-width: calc(100% - 3.6rem); text-overflow: ellipsis; overflow: hidden; } .dc-select-native__placeholder--has-value { transform: translate(0, -1.8rem) scale(0.75); color: var(--color-text-secondary); max-width: 100%; } .dc-select-native__placeholder--hide-top-placeholder { transform: translate(0, -1.8rem) scale(0.75); color: var(--color-text-secondary); max-width: 100%; display: none; } .dc-select-native__picker { opacity: 0; width: 100%; height: 38px; left: 0; top: 0; position: absolute; } .dc-select-native--disabled .dc-select-native__display-text { color: var(--color-text-secondary); } .dc-select-native--disabled .dc-select-native__placeholder:not(.dc-select-native__placeholder--has-value) { color: var(--color-text-secondary); } .dc-select-native--error .dc-select-native__placeholder { color: var(--brand-primary); } .dc-select-native__hint { margin-left: 1.2rem; } .dc-select-native__suffix-icon { position: absolute; left: 11px; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .swipeable-notification { width: 100%; min-height: 4.8rem; border-radius: 4px; padding: 0.8rem; background-color: var(--color-interactive-default); display: flex; justify-content: space-between; text-decoration: none; } .swipeable-notification * { color: var(--brand-black)-1; } .swipeable-notification--failure { background-color: var(--brand-danger)-11; } .swipeable-notification--success { background-color: var(--brand-secondary)-8; } .swipeable-notification-content { align-self: center; } .swipeable-notification-time { align-self: flex-end; } .swipeable-notification-appear, .swipeable-notification-enter { transform: translateX(-100vw); } .swipeable-notification-appear-active, .swipeable-notification-enter-active { visibility: hidden; } .swipeable-notification-appear-done, .swipeable-notification-enter-done { visibility: visible; transform: translateX(0); transition: transform 300ms; } .swipeable-notification-exit { transform: translateX(0); } .swipeable-notification-exit-active, .swipeable-notification-exit-active-left, .swipeable-notification-exit-active-right { visibility: hidden; transition: all 300ms; } .swipeable-notification-exit-active-left, .swipeable-notification-exit-active-left-left, .swipeable-notification-exit-active-right-left { transform: translateX(-100vw); } .swipeable-notification-exit-active-right, .swipeable-notification-exit-active-left-right, .swipeable-notification-exit-active-right-right { transform: translateX(100vw); } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-swipeable { position: relative; height: 100%; } .dc-swipeable__view { display: flex; flex-direction: row; transition: left 0.1s linear; width: -moz-max-content; width: max-content; height: inherit; position: relative; } .dc-swipeable__item { position: relative; display: inline-flex; width: 100vw; } .dc-swipeable__item--is-disabled .dc-swipeable__view { left: -100vw; transition: none; } .dc-swipeable__nav { position: absolute; bottom: 0; width: 100vw; display: flex; padding: 1.6rem 0.8rem; justify-content: space-between; pointer-events: none; } .dc-swipeable__nav-elevated { bottom: 9rem; } .dc-swipeable__nav svg { z-index: 3; } .dc-swipeable__nav * { pointer-events: all; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-relative-datepicker { width: 100%; text-align: center; padding-bottom: 16px; position: relative; } .dc-relative-datepicker__span { width: 100%; cursor: pointer; } .dc-relative-datepicker__input { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-tabs { position: relative; display: grid; } .dc-tabs--top { grid-template-rows: auto 1fr; } .dc-tabs--100vw { width: 100vw; } .dc-tabs__list { width: 100%; line-height: 38px; display: flex; position: relative; } @media (min-width: 320px) and (max-width: 767px) { .dc-tabs__list { justify-content: center; } } .dc-tabs__list--overflow-hidden { overflow-y: hidden; display: block; } .dc-tabs__list--border-bottom { border-bottom: 2px solid var(--color-surface-border); } .dc-tabs__list--top { order: 0; } .dc-tabs__list--bottom { order: 1; border-top: 2px solid var(--color-surface-border); } .dc-tabs__list--center { justify-content: center; width: -moz-fit-content; width: fit-content; margin: auto; } .dc-tabs__list--center .dc-tabs__item { padding: 0 2.2rem; } @media (min-width: 320px) and (max-width: 767px) { .dc-tabs__list--fit-content { width: -moz-fit-content; width: fit-content; } } .dc-tabs__list--header-fit-content { width: -moz-fit-content; width: fit-content; } @media (min-width: 320px) and (max-width: 767px) { .dc-tabs__list--header-fit-content { display: flex; justify-content: space-evenly; } } .dc-tabs__list:not(.dc-tabs__list--header-fit-content) { justify-content: center; } .dc-tabs__list--full-width { width: 100vw; } .dc-tabs__item { list-style: none; font-size: 14px; text-align: center; white-space: nowrap; color: var(--color-text-secondary); -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .dc-tabs__item__counter { margin-top: -2rem; vertical-align: middle; } .dc-tabs__item__icon { padding-right: 0.7rem; } @media (min-width: 320px) and (max-width: 767px) { .dc-tabs__item__icon { padding-right: 0; padding-top: 0.5rem; } } .dc-tabs__item--header-fit-content { padding: 0px 29px; } .dc-tabs__item--is-hidden { display: none; } .dc-tabs__item--is-scrollable-and-active { position: relative; } .dc-tabs__item--is-scrollable-and-active:after { border-bottom: 2px solid var(--brand-primary); content: ""; position: absolute; left: 0; display: block; width: 100%; } .dc-tabs__item:not(.dc-tabs__active) { cursor: pointer; color: var(--color-text-secondary); } .dc-tabs__item:not(.dc-tabs__item--header-fit-content) { width: var(--tab-width); } .dc-tabs__active { font-weight: 700; color: var(--color-text-primary); } .dc-tabs__active-line { display: block; position: absolute; /*rtl:begin:ignore*/ left: 0; /*rtl:end:ignore*/ height: 2px; background: var(--brand-primary); transition: all ease-in-out 0.3s; } .dc-tabs__active-line--top { bottom: -2px; } .dc-tabs__active-line--bottom { top: -2px; } .dc-tabs__active-line--is-hidden { display: none; } @media (min-width: 320px) and (max-width: 767px) { .dc-tabs__active-line--fit-content { width: 120px; } } .dc-tabs__active-line:not(.dc-tabs__active-line--header-fit-content) { width: var(--tab-width); } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define dc-toast; */ .dc-toast { width: 100vw; transition: transform 0.25s ease, opacity 0.25s linear; display: flex; justify-content: center; align-items: center; pointer-events: none; } .dc-toast__message { max-width: calc(100vw - 3.2rem); padding: 0.4rem 0.8rem; font-size: 1.4rem; text-align: center; font-weight: 400; color: var(--color-text-black); text-transform: none; line-height: 1.5; color: var(--color-surface-primary); border-radius: 4px; min-height: 34px; display: flex; align-items: center; pointer-events: all; } .dc-toast__error .dc-toast__message { background-color: var(--color-status-danger); } .dc-toast__info .dc-toast__message { background: var(--color-status-info); font-size: 1.2rem; /* iPhone SE screen height fixes due to UI space restrictions */ } @media only screen and (max-height: 580px) { .dc-toast__info .dc-toast__message { font-size: 1rem; } } .dc-toast__notification .dc-toast__message { background: var(--color-interactive-active); padding: 0.9rem 1.2rem; } .dc-toast--enter, .dc-toast--exit { transform: scale(1, 0); opacity: 0; } .dc-toast--enter-done { transform: scale(1, 1); opacity: 1; } .dc-toast--blinker .dc-toast__message { animation: toast_blinking 0.4s alternate infinite; } .dc-toast:not(:first-child) { margin-top: 1rem; } @keyframes toast_blinking { 40% { opacity: 1; } 100% { opacity: 0; } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-toggle-switch { height: 0; width: 0; visibility: hidden; } .dc-toggle-switch__label { display: flex; align-items: center; padding-left: 0.4rem; cursor: pointer; width: 4.9rem; height: 2.52rem; background: var(--color-interactive-disabled); border-radius: 4.9rem; transition: background-color 0.25s; } .dc-toggle-switch__button { width: 1.9rem; height: 1.9rem; border-radius: 1.9rem; transition: transform 0.25s; background: var(--color-surface-primary); } .dc-toggle-switch:checked + .dc-toggle-switch__label { background: var(--color-text-success); } .dc-toggle-switch:checked + .dc-toggle-switch__label .dc-toggle-switch__button { transform: translateX(2.25rem); } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-tick-picker { width: 100%; max-width: 300px; height: 328px; background-color: inherit; display: flex; flex-direction: column; justify-content: flex-end; } .dc-tick-picker div { display: flex; } .dc-tick-picker__calculation { margin-bottom: 28px; justify-content: space-evenly; align-items: center; } .dc-tick-picker__calculation .dc-tick-picker__holder { color: var(--color-trade-fall); flex-direction: column; justify-content: center; text-align: center; margin: 0 1.4rem; } .dc-tick-picker__calculation .operator { background-color: var(--color-surface-primary); width: 48px; height: 48px; } .dc-tick-picker__calculation .operator .dc-btn__text { transform: scale(2); } .dc-tick-picker__submit-wrapper { margin-bottom: 1.6rem; justify-content: center; } .dc-tick-picker__submit-wrapper button { background-color: var(--color-surface-primary); height: 48px; width: 112px; } .dc-tick-picker__submit-wrapper button span { color: var(--color-text-primary); font-size: 1.6rem; } .dc-tick-picker__submit-wrapper--is-disabled { pointer-events: none; } .dc-tick-picker__submit-wrapper--is-disabled .dc-btn { background-color: var(--color-interactive-disabled); } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-tooltip-portal { position: absolute; z-index: 9999; pointer-events: none; } .dc-tooltip-portal__trigger { display: inline-flex; align-items: center; cursor: pointer; } .dc-tooltip-portal__content { background-color: var(--color-surface-inverse); color: var(--color-text-inverse); padding: 0.8rem 1.6rem; border-radius: 0.8rem; font-size: 1.2rem; line-height: 1.5; max-width: 28rem; box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.3); word-wrap: break-word; white-space: normal; } .dc-tooltip-portal__arrow { position: absolute; width: 0; height: 0; border-style: solid; } .dc-tooltip-portal__arrow--top { bottom: -0.6rem; left: 1.6rem; right: auto; border-width: 0.6rem 0.6rem 0; border-color: var(--color-surface-inverse) transparent transparent transparent; } .dc-tooltip-portal__arrow--bottom { top: -0.6rem; left: 1.6rem; right: auto; border-width: 0 0.6rem 0.6rem; border-color: transparent transparent var(--color-surface-inverse) transparent; } .dc-tooltip-portal__arrow--left { right: -0.6rem; left: auto; top: 50%; transform: translateY(-50%); border-width: 0.6rem 0 0.6rem 0.6rem; border-color: transparent transparent transparent var(--color-surface-inverse); } .dc-tooltip-portal__arrow--right { left: -0.6rem; right: auto; top: 50%; transform: translateY(-50%); border-width: 0.6rem 0.6rem 0.6rem 0; border-color: transparent var(--color-surface-inverse) transparent transparent; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /* Loading Spinner */ /** @define block-ui */ .block-ui { position: absolute; z-index: 3; top: 0; left: 0.2em; right: 0; bottom: 0; width: calc(100% - 4px); height: 100%; background: var(--color-surface-overlay); } .block-ui__loading { position: absolute; top: calc(50% - 22px); left: calc(50% - 16px); z-index: 11; } .block-ui__loading-spinner { position: relative; margin: 0 auto; width: 4.2em; } .block-ui__loading-spinner:before { content: ""; display: block; padding-top: 100%; } .block-ui__loading-spinner-circular { animation: rotate 2s linear infinite; height: 100%; transform-origin: center center; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .block-ui__loading-spinner-path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 1.5s ease-in-out infinite, colorRed 6s ease-in-out infinite; stroke-linecap: round; } /* Spinner Loader Animation */ @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } @keyframes colorRed { 100%, 0% { stroke: var(--brand-primary); } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-vertical-tab { display: flex; align-items: flex-start; justify-content: flex-start; border-radius: 4px; height: 100%; } [dir=rtl] .dc-vertical-tab { direction: rtl; } [dir=rtl] .dc-vertical-tab .dc-vertical-tab__header--highlight { border-left: none; border-right: 4px solid var(--brand-primary); } [dir=rtl] .dc-vertical-tab .table__row { direction: rtl; } .dc-vertical-tab--floating { justify-content: center; } .dc-vertical-tab--grid { display: grid; height: calc(100vh - 48px); grid-template-areas: "form-sidebar form-title" "form-sidebar form-content"; grid-template-rows: 5.2rem auto; } .dc-vertical-tab__title { grid-area: form-title; height: 5rem; border-top: 1px solid var(--color-surface-border); } .dc-vertical-tab__content-container { position: relative; z-index: 0; height: 100%; width: 100%; display: flex; flex-flow: column nowrap; flex-grow: 1; } [dir=rtl] .dc-vertical-tab__content-container { direction: rtl; } .dc-vertical-tab__content-container--has-side-note { flex-flow: initial; } .dc-vertical-tab--full-screen { min-height: calc(100svh - 5.4rem - 2.4rem); width: 100%; } @media (max-width: 1279px) { .dc-vertical-tab--full-screen { min-height: calc(100svh - 4rem - 2.4rem); } } .dc-vertical-tab--full-screen.dc-vertical-tab--floating { min-height: calc(100svh - 5.4rem - 2.4rem); } @media (max-width: 1279px) { .dc-vertical-tab--full-screen.dc-vertical-tab--floating { min-height: calc(100svh - 4rem - 2.4rem); } } .dc-vertical-tab:not(.dc-vertical-tab--full-screen):not(.dc-vertical-tab--floating) .dc-vertical-tab__content { padding: 2.4rem; } .dc-vertical-tab__action-bar { width: 100%; display: flex; flex-flow: row-reverse nowrap; justify-content: space-between; align-items: center; padding: 1.6rem; box-sizing: border-box; } .dc-vertical-tab__action-bar-wrapper { cursor: pointer; padding: 0.4rem 0.4rem 0.2rem; border-radius: 4px; margin-left: auto; } [dir=rtl] .dc-vertical-tab__action-bar-wrapper { margin-right: auto; margin-left: 0; margin-left: initial; } .dc-vertical-tab__action-bar-wrapper:hover { background: var(--color-interactive-hover); } .dc-vertical-tab__tab { display: flex; min-width: 28%; height: 100%; flex-direction: column; border-radius: 4px 0 0 4px; background-color: var(--color-surface-section); position: relative; } [dir=rtl] .dc-vertical-tab__tab { border-radius: 0 4px 4px 0; } .dc-vertical-tab__tab--floating { min-width: 256px; padding: 0.8rem; border-radius: 8px; } .dc-vertical-tab__tab--floating .dc-vertical-tab__header--highlight { width: calc(100% - 1.6rem); border-radius: 4px; } .dc-vertical-tab__tab-meta-wrapper { grid-area: form-sidebar; } .dc-vertical-tab__tab-meta-wrapper--floating { position: sticky; top: calc(2.4rem + 41px); } .dc-vertical-tab__tab-bottom-note { position: sticky; margin-top: 1.6rem; } .dc-vertical-tab__header-title { padding: 1.6rem; display: flex; align-items: center; transition: background-color 0.1s ease-in; text-decoration: none; } .dc-vertical-tab--grouped .dc-vertical-tab__header { padding-left: 4.4rem; } [dir=rtl] .dc-vertical-tab--grouped .dc-vertical-tab__header { padding-right: 4.4rem; padding-left: 0; } .dc-vertical-tab--grouped .dc-vertical-tab__header--highlight { z-index: -1; } .dc-vertical-tab--grouped .dc-vertical-tab__header--active { padding-left: 4.8rem; } [dir=rtl] .dc-vertical-tab--grouped .dc-vertical-tab__header--active { padding-right: 4.8rem; padding-left: 0; } .dc-vertical-tab__header__icon.dc-vertical-tab__header__icon--active { margin-right: 2rem; } [dir=rtl] .dc-vertical-tab__header__icon.dc-vertical-tab__header__icon--active { margin-left: 2rem; margin-right: 0; } .dc-vertical-tab__header-group-chevron { position: absolute; right: 2.4rem; transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); } [dir=rtl] .dc-vertical-tab__header-group-chevron { left: 2.4rem; right: auto; right: initial; } .dc-vertical-tab__header-group-chevron--invert { transform: rotate(180deg); } [dir="ltr"] .dc-vertical-tab__header,[dir="ltr"] .dc-vertical-tab__header-group { text-align: left; } [dir="rtl"] .dc-vertical-tab__header,[dir="rtl"] .dc-vertical-tab__header-group { text-align: right; } .dc-vertical-tab__header, .dc-vertical-tab__header-group { font-size: 1.4rem; font-weight: 700; color: var(--color-text-black); text-transform: none; line-height: 1.5; line-height: 1.5; color: var(--color-text-primary); padding: 1rem 1.2rem 1rem 1.6rem; cursor: pointer; } [dir=rtl] .dc-vertical-tab__header, [dir=rtl] .dc-vertical-tab__header-group { padding: 1rem 1.6rem 1rem 1.2rem; } .dc-vertical-tab__header, .dc-vertical-tab__header-group { display: flex; align-items: center; transition: background-color 0.1s ease-in; text-decoration: none; z-index: 1; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .dc-vertical-tab__header:hover:not(.dc-vertical-tab__header--active):not(.dc-vertical-tab__header-group--active), .dc-vertical-tab__header-group:hover:not(.dc-vertical-tab__header--active):not(.dc-vertical-tab__header-group--active) { background-color: var(--color-interactive-hover); } .dc-vertical-tab__header__link, .dc-vertical-tab__header-group__link { font-weight: normal; margin-right: 0.4rem; } [dir=rtl] .dc-vertical-tab__header__link, [dir=rtl] .dc-vertical-tab__header-group__link { margin-left: 0.4rem; margin-right: 0; } .dc-vertical-tab__header__icon, .dc-vertical-tab__header-group__icon { margin-right: 1.6rem; } [dir=rtl] .dc-vertical-tab__header__icon, [dir=rtl] .dc-vertical-tab__header-group__icon { margin-left: 1.6rem; margin-right: 0; } .dc-vertical-tab__header__icon--active, .dc-vertical-tab__header-group__icon--active { --fill-color1: var(--color-text-primary); } .dc-vertical-tab__header__counter, .dc-vertical-tab__header-group__counter { position: absolute; right: 2rem; } [dir=rtl] .dc-vertical-tab__header__counter, [dir=rtl] .dc-vertical-tab__header-group__counter { left: 2rem; right: auto; right: initial; } .dc-vertical-tab__header--active .dc-vertical-tab__header__link, .dc-vertical-tab__header--active .dc-vertical-tab__header-group__link, .dc-vertical-tab__header-group--active .dc-vertical-tab__header__link, .dc-vertical-tab__header-group--active .dc-vertical-tab__header-group__link { color: var(--color-text-primary); font-weight: bold; } .dc-vertical-tab__header--highlight, .dc-vertical-tab__header-group--highlight { position: absolute; display: block; content: ""; color: var(--color-text-primary); background-color: var(--color-surface-primary); border-left: 4px solid var(--brand-primary); width: 100%; height: 41px; transform: translate3d(0, 0, 0); z-index: 0; } .dc-vertical-tab__header--new, .dc-vertical-tab__header-group--new { font-size: 1rem; font-weight: bold; padding: 0 0.4rem; margin: 0 0.4rem; background-color: var(--color-text-danger); color: var(--color-surface-primary); border-radius: 8px; } .dc-vertical-tab__header--floating, .dc-vertical-tab__header-group--floating { border-radius: 4px; } .dc-vertical-tab__content { width: 100%; height: 100%; min-height: inherit; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; border-radius: 0 4px 4px 0; position: relative; grid-area: form-content; } [dir=rtl] .dc-vertical-tab__content { border-radius: 4px 0 0 4px; direction: rtl; } .dc-vertical-tab__content-side-note { min-width: 25.6rem; margin-left: 2.4rem; } [dir=rtl] .dc-vertical-tab__content-side-note { margin-right: 2.4rem; margin-left: 0; } .dc-vertical-tab__content-side-note-item { background-color: var(--color-surface-primary); border-radius: 8px; padding: 1.6rem 2.4rem; color: var(--color-text-secondary); font-size: var(--text-size-xxs); line-height: 1.5; margin-bottom: 2.4rem; width: 25.6rem; } .dc-vertical-tab__content.dc-vertical-tab:not(.dc-vertical-tab--full-screen) { padding: 2.4rem; height: 100%; } .dc-vertical-tab__content--floating { max-width: 106.2rem; min-width: 78.2rem; margin-left: 2.4rem; } [dir=rtl] .dc-vertical-tab__content--floating { margin-right: 2.4rem; margin-left: 0; } @media (min-width: 601px) and (max-width: 1279px) { .dc-vertical-tab__content--floating { max-width: 100vw; min-width: calc(100vw - 25.6rem - 2.4rem - 4.8rem); } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .player { position: static !important; position: initial !important; } .player__wrapper { position: relative; direction: ltr; } .player__loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; justify-content: center; align-items: center; background-color: transparent; } .player__loader-circle { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--color-surface-border); border-top-color: var(--brand-primary); animation: spin 1s infinite linear; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .player__overlay { position: absolute; top: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.72); display: flex; justify-content: center; align-items: center; opacity: 0; -webkit-transform: translate3d(0, 0, 200px); } .player__overlay--visible { opacity: 1; } .player__overlay__icon { margin: 0; } .player__overlay__icon-close { position: fixed; top: 0; right: 0; padding: 1.6rem; } .player__controls__wrapper { position: absolute; bottom: 0.2rem; z-index: 2; width: 100%; height: 5.6rem; padding: 0 1.6rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); opacity: 0; pointer-events: none; transition: opacity 0.25s linear; -webkit-transform: translate3d(0, 0, 200px); } .player__controls__wrapper--visible { opacity: 1; } .player__controls__wrapper--interactive { pointer-events: auto; } .player__controls__progress-bar { width: 100%; background-color: var(--color-surface-primary); height: 0.4rem; border-radius: 4px; margin: 0.8rem 0; cursor: pointer; direction: ltr; } .player__controls__progress-bar:not(.player__controls__progress-bar--v2):before { content: ""; display: block; height: 2rem; width: 100%; position: absolute; bottom: 67%; } .player__controls__progress-bar__filled { position: relative; width: 0%; height: 0.4rem; border-radius: 4px; background-color: var(--brand-primary); direction: ltr; } .player__controls__progress-bar__filled--animated { transition: all 0.3s linear; } .player__controls__progress-bar__filled--ended { width: 100%; } .player__controls__bottom-bar { display: flex; justify-content: space-between; align-items: center; height: 3.6rem; padding-bottom: 0.4rem; direction: ltr; } .player__controls__bottom-bar--v2 { display: flex; flex-direction: column; height: 3.6rem; padding-bottom: 0.4rem; direction: ltr; } .player__controls__bottom-bar--v2 .controls__right--v2 { display: flex; justify-content: flex-end; align-items: center; gap: 0.8rem; direction: ltr; } .player__controls__bottom-bar--blocked { pointer-events: none; } .player__controls__bottom-bar .controls__right { width: 10.2rem; } .player__controls__time-wrapper { margin: 0 1.6rem; } .player__controls__time-wrapper * { color: var(--color-text-white); } .player__controls__time-wrapper--v2 { margin: 0; } .player__controls__time-wrapper--v2 * { color: var(--color-text-white); } .player__controls__button { background: none; border: none; padding: 0; cursor: pointer; width: 2.4rem; height: 2.4rem; display: flex; justify-content: center; align-items: center; } .player__controls__button svg { margin: 0 !important; } .player__controls__button svg { fill: var(--color-text-white); } .player__volume__wrapper { position: relative; } .player__volume__wrapper:before { content: ""; display: block; height: 1rem; width: 4rem; position: absolute; right: -1rem; } .player__volume-bar { position: relative; width: 0.4rem; height: 100%; border-radius: 4px; cursor: pointer; background-color: var(--color-text-secondary); } .player__volume-bar__wrapper { width: 4rem; height: 10.4rem; position: absolute; bottom: 2.5rem; right: -1rem; display: flex; align-items: center; justify-content: center; padding: 0.8rem 0; border-radius: 8px; background-color: var(--color-surface-primary); box-shadow: 0 0.8rem 1.6rem 0 var(--color-shadow-medium); transform: translateY(0); transition: transform 0.25s ease, opacity 0.25s linear; opacity: 0; } .player__volume-bar__wrapper--enter, .player__volume-bar__wrapper--exit { transform: translateY(1rem); opacity: 0; } .player__volume-bar__wrapper--enter-done { transform: translateY(0); opacity: 1; } .player__volume-bar__filled { position: absolute; bottom: 0; width: 0.4rem; border-radius: 4px; background-color: var(--brand-primary); } .player__volume-bar__filled--animated { transition: all 0.3s linear; } .player__volume-dot { position: absolute; left: -0.4rem; bottom: 90%; } .player__progress-dot, .player__volume-dot { width: 1.2rem; height: 1.2rem; border-radius: 50%; background-color: var(--brand-primary); cursor: pointer; } .player__progress-dot { position: absolute; left: calc(100% - 0.6rem); bottom: -0.3rem; } @media (min-width: 1024px) { .player__progress-dot:hover { bottom: -0.6rem; width: 1.6rem; height: 1.6rem; } } .player__progress-dot--increased-drag-area:before { position: absolute; content: ""; height: 2.5rem; width: 2.5rem; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); } .player__progress-dot--enlarged { bottom: -0.6rem; width: 1.6rem; height: 1.6rem; } .player__playback-rate__wrapper { width: 6.2rem; position: relative; } .player__playback-rate__wrapper .playback-rate__icon { position: absolute; left: 0; } .player__playback-rate__wrapper .dc-dropdown__select-arrow { display: none; } .player__playback-rate__wrapper .dc-dropdown__display--playback-rate { width: 6.2rem; height: 2.3rem; background: none; border: none; border-radius: 8px; justify-content: flex-start; } .player__playback-rate__wrapper .dc-dropdown__display--playback-rate--v2 { width: 6.2rem; height: 2.3rem; background: none; border: none; border-radius: 8px; } .player__playback-rate__wrapper .dc-dropdown__display--playback-rate--v2 .dc-dropdown__display-text { padding: 0 0 0 3.5rem; color: var(--color-text-white); font-size: var(--text-size-xxs); } .player__playback-rate__wrapper .dc-dropdown__display--playback-rate .dc-dropdown__display-text { padding: 0 0 0 2.5rem; color: var(--color-text-white); font-size: 1rem; } .player__playback-rate__wrapper .dc-dropdown-container { min-width: 6.2rem; width: auto; width: initial; } .player__playback-rate__wrapper .dc-dropdown-container:before { content: ""; display: block; height: 1.7rem; width: 7rem; position: absolute; bottom: 1rem; } .player__playback-rate__wrapper .dc-dropdown__list { width: 9.7rem; right: 10%; left: auto; left: initial; } .player__playback-rate__wrapper .dc-dropdown__display--playback-rate__item { height: 4rem; display: flex; justify-content: start; align-items: center; } @media (min-width: 320px) and (max-width: 767px) { .player__playback-rate__wrapper .dc-list, .player__playback-rate__wrapper .dc-themed-scrollbars { max-height: 100vh !important; } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .information-banner { display: flex; padding: 1.6rem; background: #e7f2f4; border-radius: 8px; justify-content: space-between; margin-top: 1.6rem; cursor: pointer; } .information-banner__content { display: flex; } [dir="ltr"] .information-banner__content-text { margin-left: 0.4rem; } [dir="rtl"] .information-banner__content-text { margin-right: 0.4rem; } .information-banner__content-text { display: flex; flex-direction: column; padding-top: 0.3rem; } .information-banner__title { font-weight: 700 !important; color: #095a66 !important; } .information-banner__description { color: #095a66 !important; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .landscape-blocker { /* enable temporary landscape blocker UI in landscape */ display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; background: var(--color-surface-primary); align-items: center; justify-content: center; flex-direction: column; color: var(--color-text-primary); font-size: 1.6rem; z-index: 9999; font-weight: bold; gap: 2.4rem; } .landscape-blocker__icon { width: 8rem; height: 6.2rem; } .landscape-blocker__message { padding: 1.6rem 11rem; } @media screen and (orientation: portrait) { .landscape-blocker__message--landscape { display: none; } } .landscape-blocker__message--portrait { text-align: center; line-height: var(--text-lh-m); } @media screen and (orientation: landscape) { .landscape-blocker__message--portrait { display: none; } } @media (min-width: 1280px) { .landscape-blocker { display: none; } } @media screen and (max-width: 600px) and (max-aspect-ratio: 13/9) { .landscape-blocker { display: none; } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .bottom-nav-container { padding: var(--core-spacing-200); width: 100%; border-top: 1px solid var(--component-navigationBar-border-color); height: var(--core-spacing-2800); z-index: 30; position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--component-navigationBar-background-color); } .bottom-nav-item { font-size: var(--core-fontSize-50); } .bottom-nav-item .quill-navigation-bottom-bar__action-label { color: var(--component-navigationBar-label-color-default); } .bottom-nav-item svg { fill: var(--component-navigationBar-icon-default); } .bottom-nav-item__position-badge { z-index: 1; } .bottom-nav-item--active .quill-navigation-bottom-bar__action-label { color: var(--color-nav-item-active); } .bottom-nav-item--active svg { fill: var(--color-nav-item-active); } .bottom-nav-item--positions { position: relative; } .bottom-nav-item--positions .user-guide__anchor { position: absolute; height: var(--core-size-3200); width: var(--core-size-4600); left: 50%; top: 50%; transform: translate(-50%, -70%); } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .endpoint { width: 30vw; min-width: 30rem; margin: 20vh auto; } @media (min-width: 320px) and (max-width: 767px) { .endpoint { margin: auto; } } .endpoint__title { margin-bottom: 1.6rem; } .endpoint__checkbox { margin-top: 4.5rem; margin-bottom: 1.6rem; } .endpoint .dc-btn--secondary { margin-left: 1.6rem; } .endpoint .feature-flags { margin-top: 4rem; } .endpoint .feature-flags__item { margin-top: 1.6rem; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .devtools__toggle-button { background: #ff444f; border: 0px; padding: 0px; position: fixed; z-index: 99999; font-size: 1.5em; margin: 0.5em; cursor: pointer; bottom: 0px; right: 0px; width: 40px; height: 40px; border-radius: 20px; display: flex; justify-content: center; align-items: center; color: #fff; padding-bottom: 2px; font-weight: bold; transition: all 0.2s; } .devtools__toggle-button:hover { scale: 1.1; } .devtools__panel { font-size: max(12px, min(1.5vw, 14px)); font-family: sans-serif; display: flex; background-color: rgb(11, 21, 33); color: #fff; height: 290px; position: fixed; direction: ltr; bottom: 0px; border-top: 1px solid rgb(63, 78, 96); transform-origin: center top; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px; z-index: 100000; transition: all 0.2s ease 0s; left: 0px; width: 100%; max-height: 90%; } .devtools__panel--open { visibility: visible; opacity: 1; pointer-events: all; transform: translateY(0px) scale(1); } .devtools__panel--close { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(15px) scale(1.02); } .devtools__panel-left { flex: 1 1 500px; min-height: 40%; max-height: 100%; overflow: auto; border-right: 1px solid rgb(34, 46, 62); display: flex; flex-direction: column; } .devtools__panel-right { flex: 1 1 500px; display: flex; flex-direction: column; overflow: auto; height: 100%; } .devtools__close-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 0.9em; font-weight: bold; background: rgb(63, 78, 96); border: 0px; border-radius: 0.3em; color: #fff; padding: 0.5em; cursor: pointer; position: absolute; z-index: 99999; margin: 0.5em; bottom: 0px; right: 0px; } .devtools__panel-title { padding: 0.5em; background: rgb(19, 35, 55); position: sticky; top: 0px; z-index: 1; } .devtools__checkbox-container { display: flex; flex-wrap: wrap; } .devtools__checkbox { margin: 10px 5px; } .devtools__checkbox-label { color: #fff; } .devtools__endpoint-container { margin: 10px; gap: 15px; display: flex; flex-direction: column; } .devtools__endpoint-container a { color: #ff444f; } .devtools__endpoint-container .dc-input__field { color: #fff; } .devtools__endpoint-container .dc-input__label { background: rgb(11, 21, 33); } .devtools__endpoint-container .dc-input__field ~ label { color: #fff !important; } .devtools__endpoint-actions { display: flex; gap: 15px; } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .cashier__counter { position: absolute; top: 0.4rem; right: -1.5rem; } @charset "UTF-8"; /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ .dc-modal__container_url-unavailable-modal .dc-modal-header__title, .dc-modal__container_url-unavailable-modal .dc-modal-footer { padding: 2.4rem; } .dc-modal__container_url-unavailable-modal .dc-modal-body { padding: 0 2.4rem; } .dc-modal__container_url-unavailable-modal .dc-modal-body ul { margin: 1rem 0; } .dc-modal__container_url-unavailable-modal .dc-modal-body ul li:before { content: "•"; padding: 0.8rem; } .dc-modal__container_url-unavailable-modal .dc-modal-body a { font-weight: inherit; } @media (min-width: 320px) and (max-width: 767px) { .dc-modal__container_url-unavailable-modal .dc-modal-header__title { font-size: 1.4rem; padding: 1.6rem; } .dc-modal__container_url-unavailable-modal .dc-modal-body { padding: 0 1.6rem; } .dc-modal__container_url-unavailable-modal .dc-modal-body ul li:before { padding: 0.6rem; } .dc-modal__container_url-unavailable-modal .dc-modal-footer { padding: 1.6rem; } } /*------------------------------------* * # Base Constants *------------------------------------*/ /* LAYOUT CONSTANTS */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * RTL Language Mixin */ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor(var(--brand-primary)); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** Need to add new breakpoints for mixins */ /** @define menu-page */ .menu-page { position: relative; width: 100%; height: 100%; overflow: hidden; background-color: var(--color-surface-primary); } .menu-page__header { display: flex; flex-direction: column; height: 11.2rem; padding: 1.2rem 1.6rem 1.6rem; gap: 2.8rem; } .menu-page__header-close { display: flex; justify-content: center; align-items: center; height: 3.2rem; width: 3.2rem; border-radius: 50%; background-color: var(--semantic-color-monochrome-surface-normal-lowest); } .menu-page__main { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; transform: translateX(0); transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); } .menu-page__main--hidden { transform: translateX(-100%); pointer-events: none; } .menu-page__item { height: 5.6rem; padding: 0 1.6rem; cursor: pointer; } .menu-page__item:active { background-color: var(--color-interactive-hover); } .menu-page__language-drawer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: flex; flex-direction: column; background-color: var(--color-surface-primary); overflow-y: auto; overscroll-behavior: none; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); } .menu-page__language-drawer--open { transform: translateX(0) !important; }