quinn.css

/**
 * SLIDER STYLES
 * =============
 */

.quinn { position: relative; }

/* Elements with sprited backgrounds. */

.quinn .bar .left, .quinn .bar .main, .quinn .bar .right,
.quinn .delta-bar .left, .quinn .delta-bar .main, .quinn
.delta-bar .right, .quinn .handle,
.quinn .reset, .quinn .minus, .quinn .plus, .quinn .help {
  /* If you change the image URL, be sure to also change the URL for the
   * HiDPI sprite at the bottom of this CSS file. */
  background-image: url(images/default.png);
  background-repeat: no-repeat;
}

/* Slider height */
.quinn, .quinn .bar, .quinn .delta-bar {
  height: 5px;
}

/* Float clearing */

.quinn {
  padding: 3px 0;
  zoom: 1;
}

.quinn:after {
  content: "";
  display: table;
  clear: both;
}

/**
 * Slider bar components
 * ---------------------
 *
 * The left, main, and right elements are purely visual, and display the
 * curve to the left, the main slider bar background, and the curve to
 * the right. They're positionned absolutely to the .quinn element.
 *
 * An extra 12px space is added to the left and right, since the handle
 * width is 24px; this allows the handle to look correct when the slider
 * is all the way to the left or right.
 */

.quinn .bar, .quinn .delta-bar {
  float: left;
  position: absolute;
}

.quinn .bar {
  width: 100%;
}

.quinn .bar .left, .quinn .bar .main, .quinn .bar .right,
.quinn .delta-bar .left, .quinn .delta-bar .main,
.quinn .delta-bar .right {
  height: 5px;
  position: absolute;
  z-index: 1;
}

.quinn .bar .left, .quinn .bar .right,
.quinn .delta-bar .left, .quinn .delta-bar .right {
  height: 5px;
  width: 4px
}

.quinn .bar .left, .quinn .delta-bar .left {
  background-position: -50px -25px;
  left: 0;
}

.quinn .bar .main, .quinn .delta-bar .main {
  background-position: 0 -150px;
  background-repeat: repeat-x;
  left: 4px;
  right: 4px;
}

.quinn .bar .right, .quinn .delta-bar .right {
  background-position: -56px -25px;
  right: 0px;
}

/**
 * Delta bar
 * ---------
 *
 * The delta bar is a style applied to the area to the bar on the left
 * of the handle.
 */

.quinn .delta-bar {
  overflow: hidden;
  width: auto;
  z-index: 5;
}

.quinn .delta-bar .left,
.quinn .delta-bar .main,
.quinn .delta-bar .right {
  z-index: 2;
}

.quinn .delta-bar .left {
  background-position: -70px -25px;
}

.quinn .delta-bar .main {
  background-position: 0 -200px;
  right: 4px;
}

.quinn .delta-bar .right {
  background-position: -76px -25px;
  right: 0px;
}

/**
 * Slider handle
 * -------------
 *
 * The slider handle is the main button on which the user may click and
 * drag in order to adjust the slider value.
 */

.quinn .handle {
  background-position: 0 0;
  cursor: default;
  height: 21px;
  left: 0%;
  margin: -8px -8px 0 -8px;
  outline: none;
  position: absolute;
  width: 21px;
  z-index: 5;
}

.quinn .handle:active, .quinn .handle.active {
  background-position: 0 -30px;
}

.quinn.disabled .handle:active {
  background-position: 0 0;
}

.quinn .handle:focus {
  background-position: 0 -60px;
}

/**
 * Multiple-value sliders
 * ----------------------
 *
 * Styles specific to sliders which instead of having a single value,
 * represent a range by having two values (a minimum and maximum).
 */

.quinn.multiple .handle {
  background-position: -100px 0;
  height: 26px;
  margin-top: -9px;
  width: 19px;
}

.quinn.multple .handle.active {
  background-position: -100px -30px;
}

.quinn.multiple .handle:focus {
  background-position: -100px -60px;
}

/**
 * HiDPI sprite
 * ------------
 */

@media only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-devicepixel-ratio: 1.5),
       only screen and (min-resolution: 1.5dppx) {

  .quinn .bar .left, .quinn .bar .main, .quinn .bar .right,
  .quinn .delta-bar .left, .quinn .delta-bar .main, .quinn
  .delta-bar .right, .quinn .handle,
  .quinn .reset, .quinn .minus, .quinn .plus, .quinn .help {
    background-image: url(images/default-hidpi.png);
    background-size: 130px 250px;
  }

}