GoodNew5

<script lang="ts" setup>
export interface Props {
  disabled?: boolean
  checked: boolean
}

defineProps<Props>()
const emit = defineEmits(['update:checked'])

const onInput = (event: Event) => {

GoodNew5

.switch {
  --track-size: calc(var(--thumb-size) * 2);
  --track-padding: .2rem;

  --track-inactive: hsl(80 0% 80%);
  --track-active: hsl(80 60% 45%);

  --track-color-inactive: var(--track-inactive);
  --track-color-active: var(--track-active);

GoodNew5

<template>
  <swiper
    class="profile-modal-tabs__slider"
    :options="sliderOptions"
  >
    <div class="swiper-slide">
      1
    </div>
    <div class="swiper-slide">
      2

GoodNew5

.circle {
  --progress-width: 4px;
  --progress-color: var(--ROUGE_SARDE);
  --expires-color: var(--BLUE_PLAZA);

  position: relative;
  border-radius: 50%;
  border: solid var(--progress-width) #aaa;

  @include lg {

GoodNew5

<template>
  <div
      class="circle"
      :style="`--progress-value: ${percent};`"
    >
      <div class="circle__progress" />
  </div>
</template>

<script>

GoodNew5

.day-month-dropdown {
  @include lg {
    position: relative;
    width: rem(100px);
  }
}

.day-month-dropdown__list {
  @include lg {
    position: absolute;

GoodNew5

<template>
  <div
    v-click-outside="clickOutside"
    :class="[
      'day-month-dropdown', {
        'day-month-dropdown--opened': isOpened
      }]"
  >
    <btn
      ref="dropdownBtnRef"

GoodNew5

<div v-bar="{
    preventParentScroll: true,
}">
  <div>
  </div>
</div>

GoodNew5

...mapActions('modal', { openModal: 'open' })

this.openModal({
  name: 'activate-account-form',
  props: {},
  component: () => import(/* webpackChunkName: "auth" */ '@/components/activate-account-form')
})

GoodNew5

  .opacity-enter-active,
  .opacity-leave-active {
    transition: all .4s;
  }

  .opacity-enter-to,
  .opacity-leave {
    opacity: 1;
  }