@pi0/framework7/src/components/range/range-ios.less

Full featured mobile HTML framework for building iOS & Android apps

.ios {
  @import (multiple) '../../less/colors-ios.less';
  .range-slider {
    height: 28px;
  }
  .range-bar {
    background: #b7b8b7;
    border-radius: 2px;
    height: 1px;
  }
  .range-bar-active {
    background: @themeColor;
  }
  .range-knob-wrap {
    height: 28px;
    width: 28px;
    margin-top: -14px;
    .ltr({ margin-left: -14px; });
    .rtl({ margin-right: -14px; });
  }
  .range-knob {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }
  .range-knob-label {
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    background: #fff;
    border-radius: 5px;
    color: #000;
    font-size: 12px;
    margin-bottom: 6px;
    transform: translateX(-50%) translateY(100%) scale(0);
  }
  .range-knob-active-state .range-knob-label {
    transform: translateX(-50%) translateY(0%) scale(1);
  }
  .color-theme-loop({
    .color-theme-@{colorThemeName} .range-slider .range-bar-active {
      background-color: @colorThemeValue;
    }
  });
  .color-loop({
    .range-slider.color-@{colorName} .range-bar-active {
      background-color: @colorValue;
    }
  });
}