framework7/components/checkbox/checkbox-md.less

Full featured mobile HTML framework for building iOS & Android apps

.md {
  @import (multiple) '../../less/colors-md.less';
  .icon-checkbox, .checkbox i {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    border: 2px solid #6d6d6d;
    transition-duration: 200ms;
    background-color: transparent;
    &:after {
      width: 18px;
      height: 18px;
      left: -2px;
      top: -2px;
      transition-duration: 200ms;
      opacity: 0;
      background: no-repeat center;
      .svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='#ffffff' width='24' height='24' viewBox='0 0 24 24'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
      background-size: 100% auto;
    }
  }
  label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox,
  label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox,
  .checkbox input[type="checkbox"]:checked ~ i {
    background-color: @themeColor;
    border-color: @themeColor;
    &:after {
      opacity: 1;
    }
  }
  label.item-checkbox {
    position: relative;
    overflow: hidden;
    z-index: 0;
    > .icon-checkbox {
      .ltr({
        margin-right: 38px;
        // + .item-media {
        //   margin-left: -30px;
        // }
      });
      .rtl({
        margin-left: 38px;
        // + .item-media {
        //   margin-right: -30px;
        // }
      });
    }
    .item-content, &.item-content {
      .item-media {
        align-self: center;
      }
    }
    &.active-state {
      background-color: rgba(0,0,0,0.1);
    }
  }

  // Dark Theme
  & when (@includeDarkTheme) {
    .theme-dark {
      label.item-checkbox.active-state {
        background-color: rgba(255,255,255,0.05);
      }
      .icon-checkbox, .checkbox i {
        border-color: rgba(255,255,255,0.54);
      }
    }
  }

  .color-theme-loop({
    .color-theme-@{colorThemeName} {
      label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox,
      label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox,
      .checkbox input[type="checkbox"]:checked ~ i {
        background-color: @colorThemeValue;
        border-color: @colorThemeValue;
      }
      .checkbox .ripple-wave {
        background: rgba(red(@colorThemeValue), green(@colorThemeValue), blue(@colorThemeValue), 0.5);
      }
    }
  });
  .color-loop({
    label.item-checkbox.color-@{colorName} input[type="checkbox"]:checked ~ .icon-checkbox,
    label.item-checkbox.color-@{colorName} input[type="checkbox"]:checked ~ * .icon-checkbox,
    .checkbox.color-@{colorName} input[type="checkbox"]:checked ~ i {
      background-color: @colorValue;
      border-color: @colorValue;
    }
    .checkbox.color-@{colorName} .ripple-wave {
      background: rgba(red(@colorValue), green(@colorValue), blue(@colorValue), 0.5);
    }
  });
}