jquery.fancyspinbox.scss

/*
 * jquery.fancyspinbox.js
 * version 0.1.0
 * (c) 2015 Maya Kokits
 * License: MIT
 */

// Settings for jquery.fancyspinbox:

// Height of the spinbox element, without borders.
$spinbox-height: 2rem !default;

// Item text padding
$spinbox-padding-left: 0.6rem !default;
$spinbox-padding-right: 0.6rem !default;

// Width of the spin buttons
$spinbox-button-width: $spinbox-height*0.9 !default;

// Text color
$spinbox-color: #16425B !default;

// Main color
$spinbox-main-color: #16425B !default;

// Background color
$spinbox-background-color: #F7EACF !default;
$spinbox-background-color-focus: #D8CDB6 !default;

// Border
$spinbox-border: 2px solid $spinbox-main-color !default;
$spinbox-border-radius: 4px !default;

// Dropdown
$spinbox-dropdown-border: $spinbox-border !default;
$spinbox-dropdown-border-radius: $spinbox-border-radius !default;
$spinbox-dropdown-color: $spinbox-color !default;
$spinbox-dropdown-background-color: $spinbox-background-color !default;

// Items, hovered
$spinbox-item-hover-color: $spinbox-color !default;
$spinbox-item-hover-background-color: #81C3D7 !default;

// Items, selected
$spinbox-selected-color: $spinbox-dropdown-background-color !default;
$spinbox-selected-background-color: $spinbox-main-color !default;

// Triangle arrows, double (spin) and single (dropdown)
$spinbox-spin-triangle-size: 7px !default;
$spinbox-dropdown-triangle-size: 8px !default;
$spinbox-triangle-color: $spinbox-main-color !default;
$spinbox-triangle-color-active: #81C3D7 !default;


.fancy-spinbox {

  box-sizing: content-box;
  height: $spinbox-height;
  padding: 0 $spinbox-button-width 0 0;
  border: $spinbox-border;
  border-radius: $spinbox-border-radius;
  display: inline-block;
  position: relative;
  color: $spinbox-color;
  background-color: $spinbox-background-color;
  outline: 0;
  
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  
  &:focus {
    background-color: $spinbox-background-color-focus;
  }
  
  .crop {
    margin: 0;
    padding: 0;
    border: 0 none;
    height: $spinbox-height;
    display: inline-block;
    overflow: hidden;
  }

  ul {
    cursor: default;
    margin: 0;
    padding: 0;
    border: 0 none;
    list-style: none;
    text-align: left;
  }
  
  li {
    width: auto;
    height: $spinbox-height;
    line-height: $spinbox-height;
    margin: 0;
    padding: 0 $spinbox-padding-right 0 $spinbox-padding-left;
    white-space: nowrap;
  }
  
  ul.dropdown {
    position: absolute;
    top: $spinbox-height;
    left: -9999px;
    z-index: 999;
    border: $spinbox-dropdown-border;
    border-radius: $spinbox-dropdown-border-radius;
    color: $spinbox-dropdown-color;
    background-color: $spinbox-dropdown-background-color;
    
    &:empty {
      display: none;
    }
    
    li {
      overflow: hidden;
    }
    
    li.selected, li.selected * {
      color: $spinbox-selected-color;
      background-color: $spinbox-selected-background-color;
    }
    
    li:hover, li:hover * {
      color: $spinbox-item-hover-color;
      background-color: $spinbox-item-hover-background-color;
    }
  }
  
  .buttons {
    position: absolute;
    top: 0;
    right: 0;
    width: $spinbox-button-width;
  }
  
  button {
    position: relative;
    width: $spinbox-button-width;
    height: $spinbox-height*0.5;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    display: block;
    outline: 0;
    cursor: default;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    
    &::-moz-focus-inner {
      border: 0;
      outline: 0;
    }
    
    &:active, &.toggle-dropdown:active {
      &>span.triangle-up {
        border-bottom-color: $spinbox-triangle-color-active;
      }

      &>span.triangle-down {
        border-top-color: $spinbox-triangle-color-active;
      }
    }
    
    &.toggle-dropdown {
      height: $spinbox-height;
      
      &>span.triangle-down {
        position: static;
        border-left: $spinbox-dropdown-triangle-size solid transparent;
        border-right: $spinbox-dropdown-triangle-size solid transparent;
        border-top: $spinbox-dropdown-triangle-size solid $spinbox-triangle-color;
        display: inline-block;
        vertical-align: middle;
        margin: 0;
      }
    }
  
    span {
      position: absolute;
      width: 0;
      height: 0;
      border-left: $spinbox-spin-triangle-size solid transparent;
      border-right: $spinbox-spin-triangle-size solid transparent;
      display: block;
      
      &.triangle-up {
        border-bottom: $spinbox-spin-triangle-size solid $spinbox-triangle-color;
        bottom: 2px;
        right: $spinbox-padding-left;
      }
      
      &.triangle-down {
        border-top: $spinbox-spin-triangle-size solid $spinbox-triangle-color;   
        top: 2px;
        right: $spinbox-padding-left;
      }
      
    }
    
  }

}