Spinner

There are no notes for this item.

<!-- Default -->
<div class="spinner">
    <input type="number" class="input-box input-box--number input-box--default" value="0">
    <div class="input-box__spinner">
        <button type="button" class="input-box__spinner__up"></button>
        <button type="button" class="input-box__spinner__down"></button>
    </div>
</div>

<!-- Selected -->
<div class="spinner">
    <input type="number" class="input-box input-box--number input-box--selected" checked value="0">
    <div class="input-box__spinner">
        <button type="button" class="input-box__spinner__up"></button>
        <button type="button" class="input-box__spinner__down"></button>
    </div>
</div>

<!-- Disabled -->
<div class="spinner">
    <input type="number" class="input-box input-box--number input-box--disabled" disabled value="0">
    <div class="input-box__spinner">
        <button type="button" class="input-box__spinner__up"></button>
        <button type="button" class="input-box__spinner__down"></button>
    </div>
</div>

  • Content:
    /*------------------------------------*\
        #SPINNER
    \*------------------------------------*/
    
    // Check Inputbox CSS
    
    .spinner {
      position: relative;
      display: inline-block;
    }
    
    .input-box--number {
      min-width: 268px;
    }
    
    .input-box__spinner {
      background-color: $background-default;
      width: 26px;
      height: 22px;
      display: block;
      position: absolute;
      right: 1px;
      top: 1px;
      border-radius: 5px;
      pointer-events: none;
    }
    
    .input-box__spinner__up,
    .input-box__spinner__down {
      background-color: transparent;
      border: none;
      margin: 0;
      padding: 0;
      float: left;
      line-height: 0;
      height: 9px;
      width: 26px;
    }
    
    .input-box__spinner__up:after,
    .input-box__spinner__down:after {
      position: absolute;
      content: '';
      display: block;
      border-style: solid;
      right: 7px;
    }
    
    .input-box__spinner__up:after{
      border-width: 0 5px 6px 5px;
      border-color: transparent transparent $border-default transparent;
    }
    
    .input-box:hover ~ .input-box__spinner .input-box__spinner__up:after {
      border-color: transparent transparent $border-hover transparent;
    }
    
    .input-box:active ~ .input-box__spinner .input-box__spinner__up:after {
      border-color: transparent transparent $border-active transparent;
    }
    
    .input-box__spinner__down:after {
      border-width: 6px 5px 0 5px;
      border-color: $border-default transparent transparent transparent;
    }
    
    .input-box:hover ~ .input-box__spinner .input-box__spinner__down:after {
      border-color: $border-hover transparent transparent transparent;
    }
    
    .input-box:active ~ .input-box__spinner .input-box__spinner__down:after {
      border-color: $border-active transparent transparent transparent;
    }
    
    .input-box--disabled ~ .input-box__spinner {
      background-color: $background-disabled;
      opacity: .5;
    }
    
    .input-box--disabled ~ .input-box__spinner .input-box__spinner__up:after,
    .input-box--disabled ~ .input-box__spinner .input-box__spinner__down:after {
      opacity: .5;
    }
    
    .input-box--disabled:hover ~ .input-box__spinner .input-box__spinner__up:after {
      border-color: transparent transparent $border-default transparent;
    }
    
    .input-box--disabled:hover ~ .input-box__spinner .input-box__spinner__down:after {
      border-color: $border-default transparent transparent transparent;
    }
    
  • URL: /components/raw/spinner/spinner.scss
  • Filesystem Path: components/03-molecules/03-spinner/spinner.scss
  • Size: 2.2 KB