@pi0/framework7/src/components/toggle/toggle-md.less

Full featured mobile HTML framework for building iOS & Android apps

.md {
  @import (multiple) '../../less/colors-md.less';
  .toggle {
    width: 36px;
    height: 14px;
    input[type="checkbox"]:checked + .toggle-icon {
      background: rgba(red(@themeColor), green(@themeColor), blue(@themeColor), 0.5);
      &:after {
        .ltr({ transform: translateX(16px); });
        .rtl({ transform: translateX(-16px); });
        background: @themeColor;
      }
    }
  }
  .toggle-icon {
    width: 36px;
    height: 14px;
    border-radius: 14px;
    background: #b0afaf;
    &:after {
      height: 20px;
      width: 20px;
      top: -3px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.4);
      border-radius: 10px;
      .ltr({ left: 0; });
      .rtl({ right: 0; });
    }
  }

  .color-theme-loop({
    .color-theme-@{colorThemeName} .toggle input[type="checkbox"]:checked + .toggle-icon {
      background: rgba(red(@colorThemeValue), green(@colorThemeValue), blue(@colorThemeValue), 0.5);
      &:after {
        background: @colorThemeValue;
      }
    }
  });
  .color-loop({
    .toggle.color-@{colorName} input[type="checkbox"]:checked + .toggle-icon {
      background: rgba(red(@colorValue), green(@colorValue), blue(@colorValue), 0.5);
      &:after {
        background: @colorValue;
      }
    }
  });
}