mixtape/zero.Backoffice.UI/app/components/ui-toggle.vue

 <template>
  <div class="ui-toggle" :class="{'is-disabled': disabled, 'is-negative': negative, 'is-active': on, 'is-content-left': contentLeft }">
    <input type="checkbox" :value="on" @input="onChange" :disabled="disabled" />
    <span class="ui-toggle-switch" :class="{ 'is-active': on }"><i></i></span>
    <i class="fth-minus-circle ui-toggle-off-warning" v-if="offContent && !on && offWarning"></i>
    <span class="ui-toggle-text" v-if="onContent && on" v-localize="onContent"></span>
    <span class="ui-toggle-text" v-if="offContent && !on" v-localize="offContent"></span>
  </div>
</template>


<script>
  export default {
    name: 'uiToggle',

    props: {
      on: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
      negative: {
        type: Boolean,
        default: false
      },
      onContent: {
        type: String,
        default: null
      },
      offContent: {
        type: String,
        default: null
      },
      offWarning: {
        type: Boolean,
        default: false
      },
      contentLeft: {
        type: Boolean,
        default: false
      }
    },

    methods: {

      onChange(ev)
      {
        this.$emit('update:on', !this.on);
      }
    }
  }
</script>

<style lang="scss">
  .ui-toggle
  {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 22px;

    input
    {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      z-index: 2;
      opacity: 0;
      cursor: pointer;
    }

    &.is-disabled input
    {
      cursor: default;
    }

    &.is-content-left
    {
      flex-direction: row-reverse;

      .ui-toggle-text
      {
        margin-left: 0;
        margin-right: 12px;
      }
    }
  }

  .ui-toggle-text
  {
    margin-top: 1px;
    margin-left: 12px;

    .ui-toggle.is-active &
    {
      font-weight: 600;
    }
  }

  .ui-toggle-switch 
  {
    display: inline-block;
    height: 22px;
    width: 36px;
    background: var(--color-toggle);
    border-radius: 20px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    z-index: 1;
    pointer-events: none;

    i
    {
      display: inline-block;
      height: 14px;
      width: 14px;
      border-radius: 20px;
      margin: 3px;
      background: var(--color-toggle-fg);
      transition: all 0.2s ease;
    }

    &.is-active
    {
      background: var(--color-toggled);
    }

    &.is-active i
    {
      background: var(--color-toggled-fg);
      transform: translateX(14px);
    }

    input:focus + &
    {
      border: var(--color-input-focus-border);
      box-shadow: var(--color-input-focus-shadow);
      outline: none;

      &.is-active
      {
        background-color: var(--color-toggled);
      }
    }

    .ui-toggle.is-disabled &
    {
      opacity: 0.7;
      pointer-events: none;
    }
  }

  .ui-toggle.onbg .ui-toggle-switch:not(.is-active)
  {
    background: var(--color-bg);
  }

  .ui-toggle.is-negative .ui-toggle-switch.is-active
  {
    background: var(--color-negative);
    border-color: transparent !important;

    i
    {
      background: white;
    }
  }

  .ui-toggle.is-accent .ui-toggle-switch.is-active
  {
    background: var(--color-accent);
    border-color: transparent !important;

    i
    {
      background: var(--color-accent-fg);
    }
  }

  .ui-toggle-off-warning
  {
    margin: 0 10px 0 -5px;
  }
</style>