123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 |
- /*!
- * # 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;
- }
|