semantic-ui-react-spinbutton/dist/index.css

Spinbuttons for Semantic UI React

.spinbutton-o3pfL {
  /* Use flex layout */
}
.spinbutton-o3pfL,
  .spinbutton-o3pfL > .buttons-gPhpG {
    display: inline-flex
  }
.spinbutton-o3pfL.vertical-NPwPZ, .spinbutton-o3pfL > .buttons-gPhpG.vertical-NPwPZ {
      flex-direction: column;
    }
.spinbutton-o3pfL.horizontal-WCywh, .spinbutton-o3pfL > .buttons-gPhpG.horizontal-WCywh {
      flex-direction: row;
    }
.spinbutton-o3pfL {

  /* Fit Buttons into container */
}
.spinbutton-o3pfL .up-YCggi,
  .spinbutton-o3pfL .down-IqEiE {
    margin: 0;
    flex-grow: 1;
  }
.spinbutton-o3pfL {

  /* Reverse button order on horizontal layout */
}
.spinbutton-o3pfL.horizontal-WCywh > .up-YCggi, .spinbutton-o3pfL > .buttons-gPhpG.horizontal-WCywh > .up-YCggi {
      order: 1;
    }
.spinbutton-o3pfL.horizontal-WCywh > .down-IqEiE, .spinbutton-o3pfL > .buttons-gPhpG.horizontal-WCywh > .down-IqEiE {
      order: -1;
    }
.spinbutton-o3pfL {

  /* Wider buttons on vertical layout */
}
.spinbutton-o3pfL.vertical-NPwPZ > .up-YCggi,
  .spinbutton-o3pfL.vertical-NPwPZ > .down-IqEiE,
  .spinbutton-o3pfL > .buttons-gPhpG.vertical-NPwPZ > .up-YCggi,
  .spinbutton-o3pfL > .buttons-gPhpG.vertical-NPwPZ > .down-IqEiE {
    padding-top: .25em;
    padding-bottom: .25em;
  }
.spinbutton-o3pfL {

  /* Thinner buttons on horizontal layout */
}
.spinbutton-o3pfL.horizontal-WCywh > .up-YCggi,
  .spinbutton-o3pfL.horizontal-WCywh > .down-IqEiE,
  .spinbutton-o3pfL > .buttons-gPhpG.horizontal-WCywh > .up-YCggi,
  .spinbutton-o3pfL > .buttons-gPhpG.horizontal-WCywh > .down-IqEiE {
    padding-left: .5em;
    padding-right: .5em;
  }
.spinbutton-o3pfL {

  /* Remove rounded corners between buttons */
  /* Remove rounded corners on buttons next to content */
}
.spinbutton-o3pfL.vertical-NPwPZ > .down-IqEiE,
  .spinbutton-o3pfL.horizontal-WCywh > .up-YCggi,
  .spinbutton-o3pfL > .buttons-gPhpG.vertical-NPwPZ > .down-IqEiE,
  .spinbutton-o3pfL > .buttons-gPhpG.horizontal-WCywh > .up-YCggi,
  .spinbutton-o3pfL.right-iC8wb > .buttons-gPhpG.vertical-NPwPZ > .up-YCggi,
  .spinbutton-o3pfL.right-iC8wb > .buttons-gPhpG.horizontal-WCywh > .down-IqEiE,
  .spinbutton-o3pfL.bottom-WQcEM > .buttons-gPhpG.vertical-NPwPZ > .up-YCggi,
  .spinbutton-o3pfL.bottom-WQcEM > .buttons-gPhpG.horizontal-WCywh > .down-IqEiE {
    border-top-left-radius: 0;
  }
.spinbutton-o3pfL.vertical-NPwPZ > .down-IqEiE,
  .spinbutton-o3pfL.horizontal-WCywh > .down-IqEiE,
  .spinbutton-o3pfL > .buttons-gPhpG.vertical-NPwPZ > .down-IqEiE,
  .spinbutton-o3pfL > .buttons-gPhpG.horizontal-WCywh > .down-IqEiE,
  .spinbutton-o3pfL.left-Adm0Y > .buttons-gPhpG.vertical-NPwPZ > .up-YCggi,
  .spinbutton-o3pfL.left-Adm0Y > .buttons-gPhpG.horizontal-WCywh > .up-YCggi,
  .spinbutton-o3pfL.bottom-WQcEM > .buttons-gPhpG.vertical-NPwPZ > .up-YCggi,
  .spinbutton-o3pfL.bottom-WQcEM > .buttons-gPhpG.horizontal-WCywh > .up-YCggi {
    border-top-right-radius: 0;
  }
.spinbutton-o3pfL.vertical-NPwPZ > .up-YCggi,
  .spinbutton-o3pfL.horizontal-WCywh > .down-IqEiE,
  .spinbutton-o3pfL > .buttons-gPhpG.vertical-NPwPZ > .up-YCggi,
  .spinbutton-o3pfL > .buttons-gPhpG.horizontal-WCywh > .down-IqEiE,
  .spinbutton-o3pfL.left-Adm0Y > .buttons-gPhpG.vertical-NPwPZ > .down-IqEiE,
  .spinbutton-o3pfL.left-Adm0Y > .buttons-gPhpG.horizontal-WCywh > .up-YCggi,
  .spinbutton-o3pfL.top-PlmTf > .buttons-gPhpG.vertical-NPwPZ > .down-IqEiE,
  .spinbutton-o3pfL.top-PlmTf > .buttons-gPhpG.horizontal-WCywh > .up-YCggi {
    border-bottom-right-radius: 0;
  }
.spinbutton-o3pfL.vertical-NPwPZ > .up-YCggi,
  .spinbutton-o3pfL.horizontal-WCywh > .up-YCggi,
  .spinbutton-o3pfL > .buttons-gPhpG.vertical-NPwPZ > .up-YCggi,
  .spinbutton-o3pfL > .buttons-gPhpG.horizontal-WCywh > .up-YCggi,
  .spinbutton-o3pfL.right-iC8wb > .buttons-gPhpG.vertical-NPwPZ > .down-IqEiE,
  .spinbutton-o3pfL.right-iC8wb > .buttons-gPhpG.horizontal-WCywh > .down-IqEiE,
  .spinbutton-o3pfL.top-PlmTf > .buttons-gPhpG.vertical-NPwPZ > .down-IqEiE,
  .spinbutton-o3pfL.top-PlmTf > .buttons-gPhpG.horizontal-WCywh > .down-IqEiE {
    border-bottom-left-radius: 0;
  }
.spinbutton-o3pfL {

  /* Remove rounded corners on nested spinbuttons */
}
.spinbutton-o3pfL > .spinbutton-o3pfL .up-YCggi,
    .spinbutton-o3pfL > .spinbutton-o3pfL .down-IqEiE {
      border-radius: 0;
    }

.inputspinner-4RTkr {
  display: inline-flex

  /* Set default width for horizontal layout */
}
.inputspinner-4RTkr.left-loXxn,
  .inputspinner-4RTkr.right-q6Mll {
    width: 254px;
  }
.inputspinner-4RTkr {
  /* Set half width for vertical layout */
}
.inputspinner-4RTkr.top-C4WrO,
  .inputspinner-4RTkr.bottom-7hKJ6 {
    width: 127px;
  }
.inputspinner-4RTkr {

  /* Make INPUT element width grow with container */
}
.inputspinner-4RTkr > .ui.input {
    width: 100%;
  }
.inputspinner-4RTkr {
  
  /* Make INPUT element height grow with container */
}
.inputspinner-4RTkr.top-C4WrO > .ui.input,
  .inputspinner-4RTkr.bottom-7hKJ6 > .ui.input {
    height: 100%;
  }
.inputspinner-4RTkr {

  /* Remove rounded corners from first and last child */
}
.inputspinner-4RTkr.top-C4WrO > .ui.input > :first-child,
  .inputspinner-4RTkr.left-loXxn > .ui.input > :first-child {
    border-top-left-radius: 0;
  }
.inputspinner-4RTkr.top-C4WrO > .ui.input > :last-child,
  .inputspinner-4RTkr.right-q6Mll > .ui.input > :last-child,
  .inputspinner-4RTkr.top-C4WrO > .ui.input.icon > :nth-last-child(2),
  .inputspinner-4RTkr.right-q6Mll > .ui.input.icon > :nth-last-child(2) {
    border-top-right-radius: 0;
  }
.inputspinner-4RTkr.right-q6Mll > .ui.input > :last-child,
  .inputspinner-4RTkr.bottom-7hKJ6 > .ui.input > :last-child,
  .inputspinner-4RTkr.right-q6Mll > .ui.input.icon > :nth-last-child(2),
  .inputspinner-4RTkr.bottom-7hKJ6 > .ui.input.icon > :nth-last-child(2) {
    border-bottom-right-radius: 0;
  }
.inputspinner-4RTkr.left-loXxn > .ui.input > :first-child,
  .inputspinner-4RTkr.bottom-7hKJ6 > .ui.input > :first-child {
    border-bottom-left-radius: 0;
  }

.numberinputspinner-23Ef3 {
}