svantic/elements/range/range.css

A set of Fomantic-UI components for Svelte framework

/*!
 * # Semantic UI 2.6.4 - Range
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Range
*******************************/

.ui.range {
  height: 20px;
  width: 100%;
}
.ui.range .inner {
  margin: 0 10px 0 10px;
  height: 20px;
  position: relative;
}
.ui.range .inner:hover {
  cursor: pointer;
}
.ui.range .inner .track {
  position: absolute;
  height: 4px;
  width: 100%;
  border-radius: 0.28571429rem;
  top: 9px;
  left: 0;
  background-color: rgba(0, 0, 0, 0.05);
}
.ui.range .inner .track-fill {
  position: absolute;
  height: 4px;
  width: 0;
  border-radius: 0.28571429rem;
  top: 9px;
  left: 0;
  background-color: #1b1c1d;
}
.ui.range .inner .thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background: #fff -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
  background: #fff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  border-radius: 100%;
  -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15),
    0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15),
    0 0 0 1px rgba(34, 36, 38, 0.15) inset;
}

/*--------------
    Inverted
---------------*/

.ui.inverted.range .inner .track {
  background-color: rgba(255, 255, 255, 0.08);
}
.ui.inverted.range .inner .track-fill {
  background-color: #545454;
}

/*--------------
     Colors
---------------*/

/* Red */
.ui.red.range .inner .track-fill {
  background-color: #db2828;
}
.ui.red.inverted.range .inner .track-fill {
  background-color: #ff695e;
}

/* Orange */
.ui.orange.range .inner .track-fill {
  background-color: #f2711c;
}
.ui.orange.inverted.range .inner .track-fill {
  background-color: #ff851b;
}

/* Yellow */
.ui.yellow.range .inner .track-fill {
  background-color: #fbbd08;
}
.ui.yellow.inverted.range .inner .track-fill {
  background-color: #ffe21f;
}

/* Olive */
.ui.olive.range .inner .track-fill {
  background-color: #b5cc18;
}
.ui.olive.inverted.range .inner .track-fill {
  background-color: #d9e778;
}

/* Green */
.ui.green.range .inner .track-fill {
  background-color: #21ba45;
}
.ui.green.inverted.range .inner .track-fill {
  background-color: #2ecc40;
}

/* Teal */
.ui.teal.range .inner .track-fill {
  background-color: #00b5ad;
}
.ui.teal.inverted.range .inner .track-fill {
  background-color: #6dffff;
}

/* Blue */
.ui.blue.range .inner .track-fill {
  background-color: #2185d0;
}
.ui.blue.inverted.range .inner .track-fill {
  background-color: #54c8ff;
}

/* Violet */
.ui.violet.range .inner .track-fill {
  background-color: #6435c9;
}
.ui.violet.inverted.range .inner .track-fill {
  background-color: #a291fb;
}

/* Purple */
.ui.purple.range .inner .track-fill {
  background-color: #a333c8;
}
.ui.purple.inverted.range .inner .track-fill {
  background-color: #dc73ff;
}

/* Pink */
.ui.pink.range .inner .track-fill {
  background-color: #e03997;
}
.ui.pink.inverted.range .inner .track-fill {
  background-color: #ff8edf;
}

/* Brown */
.ui.brown.range .inner .track-fill {
  background-color: #a5673f;
}
.ui.brown.inverted.range .inner .track-fill {
  background-color: #d67c1c;
}

/* Grey */
.ui.grey.range .inner .track-fill {
  background-color: #767676;
}
.ui.grey.inverted.range .inner .track-fill {
  background-color: #dcddde;
}

/* Black */
.ui.black.range .inner .track-fill {
  background-color: #1b1c1d;
}
.ui.black.inverted.range .inner .track-fill {
  background-color: #545454;
}

/*--------------
    Disabled
---------------*/

.ui.range.disabled {
  opacity: 0.5;
}
.ui.range.disabled .inner:hover {
  cursor: auto;
}
.ui.range.disabled .inner .track-fill {
  background: #767676;
}