Add slider module
This commit is contained in:
grandeljay
parent
6a7b019026
commit
c596f7c1ad
21 changed files with 4518 additions and 16 deletions
|
|
@ -19,5 +19,42 @@
|
||||||
"autoInstall": false,
|
"autoInstall": false,
|
||||||
"rtl": false,
|
"rtl": false,
|
||||||
"version": "2.9.0",
|
"version": "2.9.0",
|
||||||
"components": ["api", "button", "calendar", "card", "checkbox", "container", "dimmer", "divider", "dropdown", "form", "grid", "header", "icon", "image", "input", "label", "list", "loader", "menu", "message", "modal", "placeholder", "popup", "progress", "reset", "segment", "sidebar", "site", "statistic", "step", "tab", "table", "text", "toast", "transition"]
|
"components": [
|
||||||
}
|
"api",
|
||||||
|
"button",
|
||||||
|
"calendar",
|
||||||
|
"card",
|
||||||
|
"checkbox",
|
||||||
|
"container",
|
||||||
|
"dimmer",
|
||||||
|
"divider",
|
||||||
|
"dropdown",
|
||||||
|
"form",
|
||||||
|
"grid",
|
||||||
|
"header",
|
||||||
|
"icon",
|
||||||
|
"image",
|
||||||
|
"input",
|
||||||
|
"label",
|
||||||
|
"list",
|
||||||
|
"loader",
|
||||||
|
"menu",
|
||||||
|
"message",
|
||||||
|
"modal",
|
||||||
|
"placeholder",
|
||||||
|
"popup",
|
||||||
|
"progress",
|
||||||
|
"reset",
|
||||||
|
"segment",
|
||||||
|
"sidebar",
|
||||||
|
"site",
|
||||||
|
"slider",
|
||||||
|
"statistic",
|
||||||
|
"step",
|
||||||
|
"tab",
|
||||||
|
"table",
|
||||||
|
"text",
|
||||||
|
"toast",
|
||||||
|
"transition"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
|
||||||
2
semantic/dist/components/api.min.js
vendored
2
semantic/dist/components/api.min.js
vendored
File diff suppressed because one or more lines are too long
2
semantic/dist/components/calendar.min.js
vendored
2
semantic/dist/components/calendar.min.js
vendored
File diff suppressed because one or more lines are too long
2
semantic/dist/components/checkbox.min.js
vendored
2
semantic/dist/components/checkbox.min.js
vendored
File diff suppressed because one or more lines are too long
2
semantic/dist/components/dropdown.min.js
vendored
2
semantic/dist/components/dropdown.min.js
vendored
File diff suppressed because one or more lines are too long
2
semantic/dist/components/form.min.js
vendored
2
semantic/dist/components/form.min.js
vendored
File diff suppressed because one or more lines are too long
2
semantic/dist/components/modal.min.js
vendored
2
semantic/dist/components/modal.min.js
vendored
File diff suppressed because one or more lines are too long
2
semantic/dist/components/popup.min.js
vendored
2
semantic/dist/components/popup.min.js
vendored
File diff suppressed because one or more lines are too long
2
semantic/dist/components/progress.min.js
vendored
2
semantic/dist/components/progress.min.js
vendored
File diff suppressed because one or more lines are too long
2
semantic/dist/components/sidebar.min.js
vendored
2
semantic/dist/components/sidebar.min.js
vendored
File diff suppressed because one or more lines are too long
2
semantic/dist/components/site.min.js
vendored
2
semantic/dist/components/site.min.js
vendored
File diff suppressed because one or more lines are too long
801
semantic/dist/components/slider.css
vendored
Normal file
801
semantic/dist/components/slider.css
vendored
Normal file
|
|
@ -0,0 +1,801 @@
|
||||||
|
|
||||||
|
|
||||||
|
/*******************************
|
||||||
|
Theme
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
.ui.slider:not(.vertical):not(.checkbox) {
|
||||||
|
width: 100%;
|
||||||
|
padding: 1em 0.5em;
|
||||||
|
}
|
||||||
|
.ui.slider:not(.checkbox) {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.ui.slider:not(.checkbox):focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
.ui.slider .inner {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.ui.slider:not(.vertical) .inner {
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
.ui.slider .inner:hover {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
.ui.slider .inner .track {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
.ui.slider:not(.vertical) .inner .track {
|
||||||
|
width: 100%;
|
||||||
|
height: 0.4em;
|
||||||
|
top: 0.55em;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.ui.slider .inner .track-fill {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #1B1C1D;
|
||||||
|
}
|
||||||
|
.ui.slider:not(.vertical) .inner .track-fill {
|
||||||
|
height: 0.4em;
|
||||||
|
top: 0.55em;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.ui.slider .inner .thumb {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 1.5em;
|
||||||
|
width: 1.5em;
|
||||||
|
background: #FFFFFF -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
|
||||||
|
background: #FFFFFF -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
||||||
|
background: #FFFFFF 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;
|
||||||
|
-webkit-transition: background 0.3s ease;
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
}
|
||||||
|
.ui.slider:not(.disabled) .inner .thumb:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #f2f2f2 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
|
||||||
|
background: #f2f2f2 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
||||||
|
background: #f2f2f2 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
||||||
|
}
|
||||||
|
.ui.slider:not(.disabled):focus .inner .thumb {
|
||||||
|
background: #f2f2f2 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
|
||||||
|
background: #f2f2f2 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
||||||
|
background: #f2f2f2 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*******************************
|
||||||
|
States
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Disabled
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
.ui.disabled.slider:not(.checkbox) {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.ui.disabled.slider .inner:hover {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
.ui.disabled.slider .inner .track-fill {
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Reversed
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
.ui.reversed.slider .inner .track-fill {
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.ui.reversed.slider:not(.vertical) .inner .thumb {
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.ui.reversed.vertical.slider .inner .thumb {
|
||||||
|
left: 0.03em;
|
||||||
|
}
|
||||||
|
.ui.labeled.reversed.slider > .labels .label {
|
||||||
|
-webkit-transform: translate(-100%, -100%);
|
||||||
|
transform: translate(-100%, -100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*******************************
|
||||||
|
Variations
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Vertical
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
.ui.vertical.slider {
|
||||||
|
height: 100%;
|
||||||
|
width: 1.5em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
}
|
||||||
|
.ui.vertical.slider .inner {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.ui.vertical.slider .inner .track {
|
||||||
|
height: 100%;
|
||||||
|
width: 0.4em;
|
||||||
|
left: 0.55em;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.ui.vertical.slider .inner .track-fill {
|
||||||
|
width: 0.4em;
|
||||||
|
left: 0.55em;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vertical Reversed */
|
||||||
|
.ui.vertical.reversed.slider .inner .thumb {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.ui.vertical.reversed.slider .inner .track-fill {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Labeled
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
.ui.labeled.slider > .labels {
|
||||||
|
height: 1.5em;
|
||||||
|
width: auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.ui.labeled.slider:not(.vertical) > .labels {
|
||||||
|
-webkit-transform: translateY(-50%);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
.ui.labeled.slider > .labels .label {
|
||||||
|
display: -webkit-inline-box;
|
||||||
|
display: -ms-inline-flexbox;
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 0.2em 0;
|
||||||
|
position: absolute;
|
||||||
|
-webkit-transform: translate(-50%, -100%);
|
||||||
|
transform: translate(-50%, -100%);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.ui.bottom.aligned.labeled.slider > .labels .label {
|
||||||
|
bottom: 0;
|
||||||
|
-webkit-transform: translate(-50%, 100%);
|
||||||
|
transform: translate(-50%, 100%);
|
||||||
|
}
|
||||||
|
.ui.labeled.ticked.slider > .labels .label::after {
|
||||||
|
content: ' ';
|
||||||
|
height: 1.5em;
|
||||||
|
width: 1px;
|
||||||
|
background: #ccc;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
.ui.bottom.aligned.labeled.ticked.slider > .labels .label::after {
|
||||||
|
top: auto;
|
||||||
|
bottom: 100%;
|
||||||
|
}
|
||||||
|
.ui.labeled.ticked.slider > .labels .halftick.label::after {
|
||||||
|
height: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vertical Labels */
|
||||||
|
.ui.labeled.vertical.slider > .labels {
|
||||||
|
width: 1.5em;
|
||||||
|
height: auto;
|
||||||
|
left: 50%;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
.ui.labeled.vertical.slider > .labels .label {
|
||||||
|
-webkit-transform: translate(-100%, -50%);
|
||||||
|
transform: translate(-100%, -50%);
|
||||||
|
}
|
||||||
|
.ui.labeled.vertical.slider > .labels .label::after {
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1px;
|
||||||
|
left: 100%;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
.ui.labeled.vertical.slider > .labels .halftick.label::after {
|
||||||
|
width: 0.75em;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vertical Reversed Labels */
|
||||||
|
.ui.labeled.vertical.reversed.slider > .labels .label {
|
||||||
|
-webkit-transform: translate(-100%, 50%);
|
||||||
|
transform: translate(-100%, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Hover
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
.ui.hover.slider .inner .thumb {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.2s linear;
|
||||||
|
transition: opacity 0.2s linear;
|
||||||
|
}
|
||||||
|
.ui.hover.slider:not(.disabled):hover .inner .thumb,
|
||||||
|
.ui.hover.slider:not(.disabled):focus .inner .thumb {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Inverted
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
.ui.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #545454;
|
||||||
|
}
|
||||||
|
.ui.inverted.slider .inner .track {
|
||||||
|
background-color: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Colors
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.primary.slider .inner .track-fill {
|
||||||
|
background-color: #6435C9;
|
||||||
|
}
|
||||||
|
.ui.primary.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #A291FB;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.primary.slider.basic .inner .thumb {
|
||||||
|
background-color: #6435C9;
|
||||||
|
}
|
||||||
|
.ui.primary.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.primary.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #5829bb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.primary.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #A291FB;
|
||||||
|
}
|
||||||
|
.ui.primary.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.primary.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #745aff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.secondary.slider .inner .track-fill {
|
||||||
|
background-color: #1B1C1D;
|
||||||
|
}
|
||||||
|
.ui.secondary.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #545454;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.secondary.slider.basic .inner .thumb {
|
||||||
|
background-color: #1B1C1D;
|
||||||
|
}
|
||||||
|
.ui.secondary.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.secondary.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #27292a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.secondary.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #545454;
|
||||||
|
}
|
||||||
|
.ui.secondary.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.secondary.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #6e6e6e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.red.slider .inner .track-fill {
|
||||||
|
background-color: #DB2828;
|
||||||
|
}
|
||||||
|
.ui.red.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #FF695E;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.red.slider.basic .inner .thumb {
|
||||||
|
background-color: #DB2828;
|
||||||
|
}
|
||||||
|
.ui.red.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.red.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #d01919;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.red.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #FF695E;
|
||||||
|
}
|
||||||
|
.ui.red.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.red.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #ff392b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.orange.slider .inner .track-fill {
|
||||||
|
background-color: #F2711C;
|
||||||
|
}
|
||||||
|
.ui.orange.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #FF851B;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.orange.slider.basic .inner .thumb {
|
||||||
|
background-color: #F2711C;
|
||||||
|
}
|
||||||
|
.ui.orange.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.orange.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #f26202;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.orange.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #FF851B;
|
||||||
|
}
|
||||||
|
.ui.orange.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.orange.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #e76b00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.yellow.slider .inner .track-fill {
|
||||||
|
background-color: #FBBD08;
|
||||||
|
}
|
||||||
|
.ui.yellow.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #FFE21F;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.yellow.slider.basic .inner .thumb {
|
||||||
|
background-color: #FBBD08;
|
||||||
|
}
|
||||||
|
.ui.yellow.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.yellow.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #eaae00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.yellow.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #FFE21F;
|
||||||
|
}
|
||||||
|
.ui.yellow.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.yellow.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #ebcd00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.olive.slider .inner .track-fill {
|
||||||
|
background-color: #B5CC18;
|
||||||
|
}
|
||||||
|
.ui.olive.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #D9E778;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.olive.slider.basic .inner .thumb {
|
||||||
|
background-color: #B5CC18;
|
||||||
|
}
|
||||||
|
.ui.olive.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.olive.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #a7bd0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.olive.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #D9E778;
|
||||||
|
}
|
||||||
|
.ui.olive.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.olive.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #d2e745;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.green.slider .inner .track-fill {
|
||||||
|
background-color: #21BA45;
|
||||||
|
}
|
||||||
|
.ui.green.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #2ECC40;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.green.slider.basic .inner .thumb {
|
||||||
|
background-color: #21BA45;
|
||||||
|
}
|
||||||
|
.ui.green.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.green.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #16ab39;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.green.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #2ECC40;
|
||||||
|
}
|
||||||
|
.ui.green.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.green.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #1ea92e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.teal.slider .inner .track-fill {
|
||||||
|
background-color: #00B5AD;
|
||||||
|
}
|
||||||
|
.ui.teal.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #6DFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.teal.slider.basic .inner .thumb {
|
||||||
|
background-color: #00B5AD;
|
||||||
|
}
|
||||||
|
.ui.teal.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.teal.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #009c95;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.teal.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #6DFFFF;
|
||||||
|
}
|
||||||
|
.ui.teal.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.teal.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #3affff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.blue.slider .inner .track-fill {
|
||||||
|
background-color: #2185D0;
|
||||||
|
}
|
||||||
|
.ui.blue.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #54C8FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.blue.slider.basic .inner .thumb {
|
||||||
|
background-color: #2185D0;
|
||||||
|
}
|
||||||
|
.ui.blue.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.blue.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #1678c2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.blue.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #54C8FF;
|
||||||
|
}
|
||||||
|
.ui.blue.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.blue.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #21b8ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.violet.slider .inner .track-fill {
|
||||||
|
background-color: #6435C9;
|
||||||
|
}
|
||||||
|
.ui.violet.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #A291FB;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.violet.slider.basic .inner .thumb {
|
||||||
|
background-color: #6435C9;
|
||||||
|
}
|
||||||
|
.ui.violet.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.violet.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #5829bb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.violet.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #A291FB;
|
||||||
|
}
|
||||||
|
.ui.violet.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.violet.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #745aff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.purple.slider .inner .track-fill {
|
||||||
|
background-color: #A333C8;
|
||||||
|
}
|
||||||
|
.ui.purple.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #DC73FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.purple.slider.basic .inner .thumb {
|
||||||
|
background-color: #A333C8;
|
||||||
|
}
|
||||||
|
.ui.purple.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.purple.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #9627ba;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.purple.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #DC73FF;
|
||||||
|
}
|
||||||
|
.ui.purple.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.purple.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #cf40ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.pink.slider .inner .track-fill {
|
||||||
|
background-color: #E03997;
|
||||||
|
}
|
||||||
|
.ui.pink.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #FF8EDF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.pink.slider.basic .inner .thumb {
|
||||||
|
background-color: #E03997;
|
||||||
|
}
|
||||||
|
.ui.pink.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.pink.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #e61a8d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.pink.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #FF8EDF;
|
||||||
|
}
|
||||||
|
.ui.pink.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.pink.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #ff5bd1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.brown.slider .inner .track-fill {
|
||||||
|
background-color: #A5673F;
|
||||||
|
}
|
||||||
|
.ui.brown.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #D67C1C;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.brown.slider.basic .inner .thumb {
|
||||||
|
background-color: #A5673F;
|
||||||
|
}
|
||||||
|
.ui.brown.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.brown.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #975b33;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.brown.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #D67C1C;
|
||||||
|
}
|
||||||
|
.ui.brown.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.brown.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #b0620f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.grey.slider .inner .track-fill {
|
||||||
|
background-color: #767676;
|
||||||
|
}
|
||||||
|
.ui.grey.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #DCDDDE;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.grey.slider.basic .inner .thumb {
|
||||||
|
background-color: #767676;
|
||||||
|
}
|
||||||
|
.ui.grey.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.grey.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #838383;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.grey.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #DCDDDE;
|
||||||
|
}
|
||||||
|
.ui.grey.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.grey.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #c2c4c5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.black.slider .inner .track-fill {
|
||||||
|
background-color: #1B1C1D;
|
||||||
|
}
|
||||||
|
.ui.black.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #545454;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
.ui.black.slider.basic .inner .thumb {
|
||||||
|
background-color: #1B1C1D;
|
||||||
|
}
|
||||||
|
.ui.black.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.black.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #27292a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
.ui.black.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #545454;
|
||||||
|
}
|
||||||
|
.ui.black.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.black.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Basic
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.slider.basic .inner .thumb {
|
||||||
|
background-color: #1B1C1D;
|
||||||
|
}
|
||||||
|
.ui.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #27292a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Basic Inverted
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
.ui.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #545454;
|
||||||
|
}
|
||||||
|
.ui.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Sizing
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
.ui.slider.small .inner .thumb {
|
||||||
|
height: 1em;
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
.ui.slider.small:not(.vertical) .inner {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
.ui.slider.small:not(.vertical) .inner .track,
|
||||||
|
.ui.slider.small:not(.vertical) .inner .track-fill {
|
||||||
|
height: 0.3em;
|
||||||
|
top: 0.35em;
|
||||||
|
}
|
||||||
|
.ui.small.labeled.slider:not(.vertical) > .labels,
|
||||||
|
.ui.small.labeled.slider:not(.vertical) > .labels .label::after {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
.ui.small.labeled.slider:not(.vertical) > .labels .halftick.label::after {
|
||||||
|
height: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Vertical */
|
||||||
|
.ui.slider.small.vertical .inner {
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
.ui.slider.small.vertical .inner .track,
|
||||||
|
.ui.slider.small.vertical .inner .track-fill {
|
||||||
|
width: 0.3em;
|
||||||
|
left: 0.35em;
|
||||||
|
}
|
||||||
|
.ui.small.labeled.vertical.slider > .labels,
|
||||||
|
.ui.small.labeled.vertical.slider > .labels .label::after {
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
.ui.small.labeled.vertical.slider > .labels .halftick.label::after {
|
||||||
|
width: 0.5em;
|
||||||
|
}
|
||||||
|
.ui.slider.large .inner .thumb {
|
||||||
|
height: 2em;
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
.ui.slider.large:not(.vertical) .inner {
|
||||||
|
height: 2em;
|
||||||
|
}
|
||||||
|
.ui.slider.large:not(.vertical) .inner .track,
|
||||||
|
.ui.slider.large:not(.vertical) .inner .track-fill {
|
||||||
|
height: 0.5em;
|
||||||
|
top: 0.75em;
|
||||||
|
}
|
||||||
|
.ui.large.labeled.slider:not(.vertical) > .labels,
|
||||||
|
.ui.large.labeled.slider:not(.vertical) > .labels .label::after {
|
||||||
|
height: 2em;
|
||||||
|
}
|
||||||
|
.ui.large.labeled.slider:not(.vertical) > .labels .halftick.label::after {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Vertical */
|
||||||
|
.ui.slider.large.vertical .inner {
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
.ui.slider.large.vertical .inner .track,
|
||||||
|
.ui.slider.large.vertical .inner .track-fill {
|
||||||
|
width: 0.5em;
|
||||||
|
left: 0.75em;
|
||||||
|
}
|
||||||
|
.ui.large.labeled.vertical.slider > .labels,
|
||||||
|
.ui.large.labeled.vertical.slider > .labels .label::after {
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
.ui.large.labeled.vertical.slider > .labels .halftick.label::after {
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
.ui.slider.big .inner .thumb {
|
||||||
|
height: 2.5em;
|
||||||
|
width: 2.5em;
|
||||||
|
}
|
||||||
|
.ui.slider.big:not(.vertical) .inner {
|
||||||
|
height: 2.5em;
|
||||||
|
}
|
||||||
|
.ui.slider.big:not(.vertical) .inner .track,
|
||||||
|
.ui.slider.big:not(.vertical) .inner .track-fill {
|
||||||
|
height: 0.6em;
|
||||||
|
top: 0.95em;
|
||||||
|
}
|
||||||
|
.ui.big.labeled.slider:not(.vertical) > .labels,
|
||||||
|
.ui.big.labeled.slider:not(.vertical) > .labels .label::after {
|
||||||
|
height: 2.5em;
|
||||||
|
}
|
||||||
|
.ui.big.labeled.slider:not(.vertical) > .labels .halftick.label::after {
|
||||||
|
height: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Vertical */
|
||||||
|
.ui.slider.big.vertical .inner {
|
||||||
|
width: 2.5em;
|
||||||
|
}
|
||||||
|
.ui.slider.big.vertical .inner .track,
|
||||||
|
.ui.slider.big.vertical .inner .track-fill {
|
||||||
|
width: 0.6em;
|
||||||
|
left: 0.95em;
|
||||||
|
}
|
||||||
|
.ui.big.labeled.vertical.slider > .labels,
|
||||||
|
.ui.big.labeled.vertical.slider > .labels .label::after {
|
||||||
|
width: 2.5em;
|
||||||
|
}
|
||||||
|
.ui.big.labeled.vertical.slider > .labels .halftick.label::after {
|
||||||
|
width: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*******************************
|
||||||
|
Slider Overrides
|
||||||
|
*******************************/
|
||||||
|
|
||||||
1353
semantic/dist/components/slider.js
vendored
Normal file
1353
semantic/dist/components/slider.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
semantic/dist/components/slider.min.css
vendored
Normal file
1
semantic/dist/components/slider.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
11
semantic/dist/components/slider.min.js
vendored
Normal file
11
semantic/dist/components/slider.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
semantic/dist/components/tab.min.js
vendored
2
semantic/dist/components/tab.min.js
vendored
File diff suppressed because one or more lines are too long
2
semantic/dist/components/toast.min.js
vendored
2
semantic/dist/components/toast.min.js
vendored
File diff suppressed because one or more lines are too long
945
semantic/dist/semantic.css
vendored
945
semantic/dist/semantic.css
vendored
|
|
@ -41734,6 +41734,951 @@ input::selection {
|
||||||
/*******************************
|
/*******************************
|
||||||
Site Overrides
|
Site Overrides
|
||||||
*******************************/
|
*******************************/
|
||||||
|
/*******************************
|
||||||
|
Theme
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
.ui.slider:not(.vertical):not(.checkbox) {
|
||||||
|
width: 100%;
|
||||||
|
padding: 1em 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider:not(.checkbox) {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider:not(.checkbox):focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider .inner {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider:not(.vertical) .inner {
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider .inner:hover {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider .inner .track {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider:not(.vertical) .inner .track {
|
||||||
|
width: 100%;
|
||||||
|
height: 0.4em;
|
||||||
|
top: 0.55em;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider .inner .track-fill {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #1B1C1D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider:not(.vertical) .inner .track-fill {
|
||||||
|
height: 0.4em;
|
||||||
|
top: 0.55em;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider .inner .thumb {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 1.5em;
|
||||||
|
width: 1.5em;
|
||||||
|
background: #FFFFFF -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
|
||||||
|
background: #FFFFFF -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
||||||
|
background: #FFFFFF 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;
|
||||||
|
-webkit-transition: background 0.3s ease;
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider:not(.disabled) .inner .thumb:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #f2f2f2 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
|
||||||
|
background: #f2f2f2 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
||||||
|
background: #f2f2f2 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider:not(.disabled):focus .inner .thumb {
|
||||||
|
background: #f2f2f2 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
|
||||||
|
background: #f2f2f2 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
||||||
|
background: #f2f2f2 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
|
/*******************************
|
||||||
|
States
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Disabled
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
.ui.disabled.slider:not(.checkbox) {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.disabled.slider .inner:hover {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.disabled.slider .inner .track-fill {
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Reversed
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
.ui.reversed.slider .inner .track-fill {
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.reversed.slider:not(.vertical) .inner .thumb {
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.reversed.vertical.slider .inner .thumb {
|
||||||
|
left: 0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.labeled.reversed.slider > .labels .label {
|
||||||
|
-webkit-transform: translate(-100%, -100%);
|
||||||
|
transform: translate(-100%, -100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*******************************
|
||||||
|
Variations
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Vertical
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
.ui.vertical.slider {
|
||||||
|
height: 100%;
|
||||||
|
width: 1.5em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.vertical.slider .inner {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.vertical.slider .inner .track {
|
||||||
|
height: 100%;
|
||||||
|
width: 0.4em;
|
||||||
|
left: 0.55em;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.vertical.slider .inner .track-fill {
|
||||||
|
width: 0.4em;
|
||||||
|
left: 0.55em;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vertical Reversed */
|
||||||
|
|
||||||
|
.ui.vertical.reversed.slider .inner .thumb {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.vertical.reversed.slider .inner .track-fill {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Labeled
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
.ui.labeled.slider > .labels {
|
||||||
|
height: 1.5em;
|
||||||
|
width: auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.labeled.slider:not(.vertical) > .labels {
|
||||||
|
-webkit-transform: translateY(-50%);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.labeled.slider > .labels .label {
|
||||||
|
display: -webkit-inline-box;
|
||||||
|
display: -ms-inline-flexbox;
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 0.2em 0;
|
||||||
|
position: absolute;
|
||||||
|
-webkit-transform: translate(-50%, -100%);
|
||||||
|
transform: translate(-50%, -100%);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.bottom.aligned.labeled.slider > .labels .label {
|
||||||
|
bottom: 0;
|
||||||
|
-webkit-transform: translate(-50%, 100%);
|
||||||
|
transform: translate(-50%, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.labeled.ticked.slider > .labels .label::after {
|
||||||
|
content: ' ';
|
||||||
|
height: 1.5em;
|
||||||
|
width: 1px;
|
||||||
|
background: #ccc;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.bottom.aligned.labeled.ticked.slider > .labels .label::after {
|
||||||
|
top: auto;
|
||||||
|
bottom: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.labeled.ticked.slider > .labels .halftick.label::after {
|
||||||
|
height: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vertical Labels */
|
||||||
|
|
||||||
|
.ui.labeled.vertical.slider > .labels {
|
||||||
|
width: 1.5em;
|
||||||
|
height: auto;
|
||||||
|
left: 50%;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.labeled.vertical.slider > .labels .label {
|
||||||
|
-webkit-transform: translate(-100%, -50%);
|
||||||
|
transform: translate(-100%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.labeled.vertical.slider > .labels .label::after {
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1px;
|
||||||
|
left: 100%;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.labeled.vertical.slider > .labels .halftick.label::after {
|
||||||
|
width: 0.75em;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vertical Reversed Labels */
|
||||||
|
|
||||||
|
.ui.labeled.vertical.reversed.slider > .labels .label {
|
||||||
|
-webkit-transform: translate(-100%, 50%);
|
||||||
|
transform: translate(-100%, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Hover
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
.ui.hover.slider .inner .thumb {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.2s linear;
|
||||||
|
transition: opacity 0.2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.hover.slider:not(.disabled):hover .inner .thumb,
|
||||||
|
.ui.hover.slider:not(.disabled):focus .inner .thumb {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Inverted
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
.ui.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #545454;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.inverted.slider .inner .track {
|
||||||
|
background-color: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Colors
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.primary.slider .inner .track-fill {
|
||||||
|
background-color: #6435C9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.primary.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #A291FB;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.primary.slider.basic .inner .thumb {
|
||||||
|
background-color: #6435C9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.primary.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.primary.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #5829bb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.primary.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #A291FB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.primary.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.primary.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #745aff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.secondary.slider .inner .track-fill {
|
||||||
|
background-color: #1B1C1D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.secondary.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #545454;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.secondary.slider.basic .inner .thumb {
|
||||||
|
background-color: #1B1C1D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.secondary.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.secondary.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #27292a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.secondary.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #545454;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.secondary.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.secondary.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #6e6e6e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.red.slider .inner .track-fill {
|
||||||
|
background-color: #DB2828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.red.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #FF695E;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.red.slider.basic .inner .thumb {
|
||||||
|
background-color: #DB2828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.red.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.red.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #d01919;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.red.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #FF695E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.red.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.red.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #ff392b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.orange.slider .inner .track-fill {
|
||||||
|
background-color: #F2711C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.orange.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #FF851B;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.orange.slider.basic .inner .thumb {
|
||||||
|
background-color: #F2711C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.orange.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.orange.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #f26202;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.orange.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #FF851B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.orange.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.orange.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #e76b00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.yellow.slider .inner .track-fill {
|
||||||
|
background-color: #FBBD08;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.yellow.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #FFE21F;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.yellow.slider.basic .inner .thumb {
|
||||||
|
background-color: #FBBD08;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.yellow.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.yellow.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #eaae00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.yellow.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #FFE21F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.yellow.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.yellow.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #ebcd00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.olive.slider .inner .track-fill {
|
||||||
|
background-color: #B5CC18;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.olive.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #D9E778;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.olive.slider.basic .inner .thumb {
|
||||||
|
background-color: #B5CC18;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.olive.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.olive.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #a7bd0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.olive.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #D9E778;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.olive.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.olive.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #d2e745;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.green.slider .inner .track-fill {
|
||||||
|
background-color: #21BA45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.green.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #2ECC40;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.green.slider.basic .inner .thumb {
|
||||||
|
background-color: #21BA45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.green.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.green.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #16ab39;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.green.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #2ECC40;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.green.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.green.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #1ea92e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.teal.slider .inner .track-fill {
|
||||||
|
background-color: #00B5AD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.teal.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #6DFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.teal.slider.basic .inner .thumb {
|
||||||
|
background-color: #00B5AD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.teal.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.teal.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #009c95;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.teal.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #6DFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.teal.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.teal.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #3affff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.blue.slider .inner .track-fill {
|
||||||
|
background-color: #2185D0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.blue.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #54C8FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.blue.slider.basic .inner .thumb {
|
||||||
|
background-color: #2185D0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.blue.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.blue.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #1678c2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.blue.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #54C8FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.blue.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.blue.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #21b8ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.violet.slider .inner .track-fill {
|
||||||
|
background-color: #6435C9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.violet.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #A291FB;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.violet.slider.basic .inner .thumb {
|
||||||
|
background-color: #6435C9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.violet.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.violet.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #5829bb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.violet.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #A291FB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.violet.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.violet.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #745aff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.purple.slider .inner .track-fill {
|
||||||
|
background-color: #A333C8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.purple.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #DC73FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.purple.slider.basic .inner .thumb {
|
||||||
|
background-color: #A333C8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.purple.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.purple.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #9627ba;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.purple.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #DC73FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.purple.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.purple.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #cf40ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.pink.slider .inner .track-fill {
|
||||||
|
background-color: #E03997;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.pink.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #FF8EDF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.pink.slider.basic .inner .thumb {
|
||||||
|
background-color: #E03997;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.pink.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.pink.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #e61a8d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.pink.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #FF8EDF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.pink.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.pink.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #ff5bd1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.brown.slider .inner .track-fill {
|
||||||
|
background-color: #A5673F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.brown.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #D67C1C;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.brown.slider.basic .inner .thumb {
|
||||||
|
background-color: #A5673F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.brown.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.brown.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #975b33;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.brown.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #D67C1C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.brown.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.brown.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #b0620f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.grey.slider .inner .track-fill {
|
||||||
|
background-color: #767676;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.grey.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #DCDDDE;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.grey.slider.basic .inner .thumb {
|
||||||
|
background-color: #767676;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.grey.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.grey.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #838383;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.grey.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #DCDDDE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.grey.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.grey.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #c2c4c5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.black.slider .inner .track-fill {
|
||||||
|
background-color: #1B1C1D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.black.inverted.slider .inner .track-fill {
|
||||||
|
background-color: #545454;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
.ui.black.slider.basic .inner .thumb {
|
||||||
|
background-color: #1B1C1D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.black.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.black.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #27292a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic Inverted */
|
||||||
|
|
||||||
|
.ui.black.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #545454;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.black.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.black.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Basic
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.slider.basic .inner .thumb {
|
||||||
|
background-color: #1B1C1D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #27292a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Basic Inverted
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
/* Standard */
|
||||||
|
|
||||||
|
.ui.inverted.slider.basic .inner .thumb {
|
||||||
|
background-color: #545454;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.inverted.slider.basic .inner .thumb:hover,
|
||||||
|
.ui.inverted.slider.basic:focus .inner .thumb {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------
|
||||||
|
Sizing
|
||||||
|
---------------*/
|
||||||
|
|
||||||
|
.ui.slider.small .inner .thumb {
|
||||||
|
height: 1em;
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider.small:not(.vertical) .inner {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider.small:not(.vertical) .inner .track,
|
||||||
|
.ui.slider.small:not(.vertical) .inner .track-fill {
|
||||||
|
height: 0.3em;
|
||||||
|
top: 0.35em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.small.labeled.slider:not(.vertical) > .labels,
|
||||||
|
.ui.small.labeled.slider:not(.vertical) > .labels .label::after {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.small.labeled.slider:not(.vertical) > .labels .halftick.label::after {
|
||||||
|
height: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Vertical */
|
||||||
|
|
||||||
|
.ui.slider.small.vertical .inner {
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider.small.vertical .inner .track,
|
||||||
|
.ui.slider.small.vertical .inner .track-fill {
|
||||||
|
width: 0.3em;
|
||||||
|
left: 0.35em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.small.labeled.vertical.slider > .labels,
|
||||||
|
.ui.small.labeled.vertical.slider > .labels .label::after {
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.small.labeled.vertical.slider > .labels .halftick.label::after {
|
||||||
|
width: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider.large .inner .thumb {
|
||||||
|
height: 2em;
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider.large:not(.vertical) .inner {
|
||||||
|
height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider.large:not(.vertical) .inner .track,
|
||||||
|
.ui.slider.large:not(.vertical) .inner .track-fill {
|
||||||
|
height: 0.5em;
|
||||||
|
top: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.large.labeled.slider:not(.vertical) > .labels,
|
||||||
|
.ui.large.labeled.slider:not(.vertical) > .labels .label::after {
|
||||||
|
height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.large.labeled.slider:not(.vertical) > .labels .halftick.label::after {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Vertical */
|
||||||
|
|
||||||
|
.ui.slider.large.vertical .inner {
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider.large.vertical .inner .track,
|
||||||
|
.ui.slider.large.vertical .inner .track-fill {
|
||||||
|
width: 0.5em;
|
||||||
|
left: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.large.labeled.vertical.slider > .labels,
|
||||||
|
.ui.large.labeled.vertical.slider > .labels .label::after {
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.large.labeled.vertical.slider > .labels .halftick.label::after {
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider.big .inner .thumb {
|
||||||
|
height: 2.5em;
|
||||||
|
width: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider.big:not(.vertical) .inner {
|
||||||
|
height: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider.big:not(.vertical) .inner .track,
|
||||||
|
.ui.slider.big:not(.vertical) .inner .track-fill {
|
||||||
|
height: 0.6em;
|
||||||
|
top: 0.95em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.big.labeled.slider:not(.vertical) > .labels,
|
||||||
|
.ui.big.labeled.slider:not(.vertical) > .labels .label::after {
|
||||||
|
height: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.big.labeled.slider:not(.vertical) > .labels .halftick.label::after {
|
||||||
|
height: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Vertical */
|
||||||
|
|
||||||
|
.ui.slider.big.vertical .inner {
|
||||||
|
width: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.slider.big.vertical .inner .track,
|
||||||
|
.ui.slider.big.vertical .inner .track-fill {
|
||||||
|
width: 0.6em;
|
||||||
|
left: 0.95em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.big.labeled.vertical.slider > .labels,
|
||||||
|
.ui.big.labeled.vertical.slider > .labels .label::after {
|
||||||
|
width: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.big.labeled.vertical.slider > .labels .halftick.label::after {
|
||||||
|
width: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*******************************
|
||||||
|
Slider Overrides
|
||||||
|
*******************************/
|
||||||
/*!
|
/*!
|
||||||
* # Fomantic-UI 2.9.0 - Statistic
|
* # Fomantic-UI 2.9.0 - Statistic
|
||||||
* http://github.com/fomantic/Fomantic-UI/
|
* http://github.com/fomantic/Fomantic-UI/
|
||||||
|
|
|
||||||
1354
semantic/dist/semantic.js
vendored
1354
semantic/dist/semantic.js
vendored
File diff suppressed because it is too large
Load diff
2
semantic/dist/semantic.min.css
vendored
2
semantic/dist/semantic.min.css
vendored
File diff suppressed because one or more lines are too long
2
semantic/dist/semantic.min.js
vendored
2
semantic/dist/semantic.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue