framework7/components/stepper/stepper-ios.less

Full featured mobile HTML framework for building iOS & Android apps

.ios {
  @import (multiple) '../../less/colors-ios.less';
  .stepper {
    height: 29px;
  }
  .stepper-button, .stepper-button-minus, .stepper-button-plus {
    border: 1px solid @themeColor;
    color: @themeColor;
    border-radius: 5px;
    line-height: 27px;
    height: 29px;
    width: 40px;
    .f7-icons {
      font-size: 22px;
    }
    .ltr({
      &:first-child {
        border-radius: 5px 0 0 5px;
      }
      &:last-child {
        border-radius: 0 5px 5px 0;
      }
    });
    .rtl({
      &:first-child {
        border-radius: 0 5px 5px 0;
      }
      &:last-child {
        border-radius: 5px 0 0 5px;
      }
    });
    &.active-state {
      background: rgba(red(@themeColor), green(@themeColor), blue(@themeColor), .15);
    }
    + .stepper-button,
    + .stepper-button-minus,
    + .stepper-button-plus {
      .ltr({
        border-left: none;
      });
      .rtl({
        border-right: none;
      });
    }
  }
  .stepper-button-plus, .stepper-button-minus {
    &:after, &:before {
      background: @themeColor;
    }
  }
  .stepper-input-wrap,
  .stepper-value {
    border-top: 1px solid @themeColor;
    border-bottom: 1px solid @themeColor;
  }
  .stepper .stepper-value {
    color: @themeColor;
    font-size: 17px;
  }
  .stepper .stepper-input-wrap {
    input {
      height: 100%;
      text-align: center;
      color: @themeColor;
      font-size: 17px;
    }
  }

  .stepper-fill, .stepper-fill-ios {
    .stepper-button, .stepper-button-minus, .stepper-button-plus {
      color: #fff;
      background: @themeColor;
      &.active-state {
        opacity: 0.8;
      }
    }
    .stepper-button-plus, .stepper-button-minus {
      &:before, &:after {
        background-color: #fff;
      }
    }
    .stepper-button + .stepper-button,
    .stepper-button-minus + .stepper-button-plus {
      .ltr({
        border-left: 1px solid rgba(0,0,0,0.1);
      });
      .rtl({
        border-right: 1px solid rgba(0,0,0,0.1);
      });
    }
  }
  .stepper-round, .stepper-round-ios {
    .stepper-button, .stepper-button-minus, .stepper-button-plus {
      .ltr({
        &:first-child {
          border-radius: 29px 0 0 29px;
        }
        &:last-child {
          border-radius: 0 29px 29px 0;
        }
      });
      .rtl({
        &:first-child {
          border-radius: 0 29px 29px 0;
        }
        &:last-child {
          border-radius: 29px 0 0 29px;
        }
      });
    }
  }
  .stepper-small, .stepper-small-ios {
    height: 26px;
    .stepper-input-wrap, .stepper-value {
      border-top-width: 2px;
      border-bottom-width: 2px;
    }
    .stepper-button, .stepper-button-minus, .stepper-button-plus {
      height: 26px;
      transition-duration: 200ms;
      line-height: 22px;
      border-width: 2px;
      .f7-icons {
        font-size: 18px;
      }
    }
    &.stepper-fill, &.stepper-fill-ios {
      .stepper-button, .stepper-button-minus, .stepper-button-plus {
        &.active-state {
          color: @themeColor;
          border-color: @themeColor;
          background-color: transparent;
          opacity: 1;
        }
      }
      .stepper-button-plus, .stepper-button-minus {
        &.active-state {
          &:before, &:after {
            background-color: @themeColor;
          }
        }
      }
    }
  }
  .stepper-big, .stepper-big-ios {
    height: 44px;
    .stepper-button, .stepper-button-minus, .stepper-button-plus {
      height: 44px;
      line-height: 42px;
    }
  }

  .color-theme-loop({
    .color-theme-@{colorThemeName} {
      .stepper-button, .stepper-button-minus, .stepper-button-plus {
        border-color: @colorThemeValue;
        color: @colorThemeValue;
        &.active-state {
          background-color: rgba(red(@colorThemeValue), green(@colorThemeValue), blue(@colorThemeValue), .15);
        }
      }
      .stepper-button-plus, .stepper-button-minus {
        &:after, &:before {
          background-color: @colorThemeValue;
        }
      }
      .stepper-value,
      .stepper-input-wrap {
        border-top-color: @colorThemeValue;
        border-bottom-color: @colorThemeValue;
      }
      .stepper-value,
      .stepper-input-wrap input {
        color: @colorThemeValue;
      }

      .stepper-fill, .stepper-fill-ios {
        .stepper-button, .stepper-button-minus, .stepper-button-plus {
          background-color: @colorThemeValue;
        }
        .stepper-button-plus, .stepper-button-minus {
          &:before, &:after {
            background-color: #fff;
          }
        }
      }
      .stepper-small, .stepper-small-ios {
        &.stepper-fill {
          .stepper-button, .stepper-button-minus, .stepper-button-plus {
            &.active-state {
              color: @colorThemeValue;
              border-color: @colorThemeValue;
              background-color: transparent;
            }
          }
          .stepper-button-plus, .stepper-button-minus {
            &.active-state {
              &:before, &:after {
                background-color: @colorThemeValue;
              }
            }
          }
        }
      }
    }
  });
  .color-loop({
    .stepper.color-@{colorName} {
      .stepper-button, .stepper-button-minus, .stepper-button-plus {
        border-color: @colorValue;
        color: @colorValue;
        &.active-state {
          background-color: rgba(red(@colorValue), green(@colorValue), blue(@colorValue), .15);
        }
      }
      .stepper-button-plus, .stepper-button-minus {
        &:after, &:before {
          background-color: @colorValue;
        }
      }
      .stepper-value,
      .stepper-input-wrap {
        border-top-color: @colorValue;
        border-bottom-color: @colorValue;
      }
      .stepper-value,
      .stepper-input-wrap input {
        color: @colorValue;
      }
    }

    .stepper-fill.color-@{colorName}, .stepper-fill-ios.color-@{colorName} {
      .stepper-button, .stepper-button-minus, .stepper-button-plus {
        background-color: @colorValue;
      }
      .stepper-button-plus, .stepper-button-minus {
        &:before, &:after {
          background-color: #fff;
        }
      }
    }
    .stepper-small.color-@{colorName},
    .stepper-small-ios.color-@{colorName} {
      &.stepper-fill {
        .stepper-button, .stepper-button-minus, .stepper-button-plus {
          &.active-state {
            color: @colorValue;
            border-color: @colorValue;
            background-color: transparent;
          }
        }
        .stepper-button-plus, .stepper-button-minus {
          &.active-state {
            &:before, &:after {
              background-color: @colorValue;
            }
          }
        }
      }
    }
  });
}