fomantic-ui-sass 2.6.4 → 2.7.0

data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss

@@ -1,5 +1,5 @@
 /*!
- * # Semantic UI 2.6.4 - Sidebar
+ * # Semantic UI 2.7.0 - Sidebar
  * http://github.com/semantic-org/semantic-ui/
  *
  *
@@ -30,8 +30,8 @@
   -webkit-overflow-scrolling: touch;
   height: 100% !important;
   max-height: 100%;
-  border-radius: 0em !important;
-  margin: 0em !important;
+  border-radius: 0 !important;
+  margin: 0 !important;
   overflow-y: auto !important;
   z-index: 102;
 }
@@ -48,15 +48,15 @@
 
 .ui.left.sidebar {
   right: auto;
-  left: 0px;
+  left: 0;
   -webkit-transform: translate3d(-100%, 0, 0);
           transform: translate3d(-100%, 0, 0);
 }
 .ui.right.sidebar {
-  right: 0px !important;
+  right: 0 !important;
   left: auto !important;
-  -webkit-transform: translate3d(100%, 0%, 0);
-          transform: translate3d(100%, 0%, 0);
+  -webkit-transform: translate3d(100%, 0, 0);
+          transform: translate3d(100%, 0, 0);
 }
 .ui.top.sidebar,
 .ui.bottom.sidebar {
@@ -64,14 +64,14 @@
   height: auto !important;
 }
 .ui.top.sidebar {
-  top: 0px !important;
+  top: 0 !important;
   bottom: auto !important;
   -webkit-transform: translate3d(0, -100%, 0);
           transform: translate3d(0, -100%, 0);
 }
 .ui.bottom.sidebar {
   top: auto !important;
-  bottom: 0px !important;
+  bottom: 0 !important;
   -webkit-transform: translate3d(0, 100%, 0);
           transform: translate3d(0, 100%, 0);
 }
@@ -83,7 +83,7 @@
 .pushable {
   height: 100%;
   overflow-x: hidden;
-  padding: 0em !important;
+  padding: 0 !important;
 }
 
 /* Whole Page */
@@ -147,8 +147,8 @@ body.pushable > .pusher {
 
 .pushable > .pusher:after {
   position: fixed;
-  top: 0px;
-  right: 0px;
+  top: 0;
+  right: 0;
   content: '';
   background-color: rgba(0, 0, 0, 0.4);
   overflow: hidden;
@@ -164,7 +164,7 @@ body.pushable > .pusher {
 ---------------*/
 
 .ui.sidebar.menu .item {
-  border-radius: 0em !important;
+  border-radius: 0 !important;
 }
 
 
@@ -204,13 +204,13 @@ body.pushable > .pusher {
 /* Shadow Direction */
 .ui.left.visible.sidebar,
 .ui.right.visible.sidebar {
-  -webkit-box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15);
-          box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15);
+  -webkit-box-shadow: 0 0 20px rgba(34, 36, 38, 0.15);
+          box-shadow: 0 0 20px rgba(34, 36, 38, 0.15);
 }
 .ui.top.visible.sidebar,
 .ui.bottom.visible.sidebar {
-  -webkit-box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15);
-          box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15);
+  -webkit-box-shadow: 0 0 20px rgba(34, 36, 38, 0.15);
+          box-shadow: 0 0 20px rgba(34, 36, 38, 0.15);
 }
 
 /* Visible On Load */
@@ -344,12 +344,12 @@ body.pushable > .pusher {
 
 /* Initial */
 .ui.left.overlay.sidebar {
-  -webkit-transform: translate3d(-100%, 0%, 0);
-          transform: translate3d(-100%, 0%, 0);
+  -webkit-transform: translate3d(-100%, 0, 0);
+          transform: translate3d(-100%, 0, 0);
 }
 .ui.right.overlay.sidebar {
-  -webkit-transform: translate3d(100%, 0%, 0);
-          transform: translate3d(100%, 0%, 0);
+  -webkit-transform: translate3d(100%, 0, 0);
+          transform: translate3d(100%, 0, 0);
 }
 .ui.top.overlay.sidebar {
   -webkit-transform: translate3d(0%, -100%, 0);
@@ -371,20 +371,20 @@ body.pushable > .pusher {
 
 /* End - Sidebar */
 .ui.visible.left.overlay.sidebar {
-  -webkit-transform: translate3d(0%, 0%, 0);
-          transform: translate3d(0%, 0%, 0);
+  -webkit-transform: translate3d(0%, 0, 0);
+          transform: translate3d(0%, 0, 0);
 }
 .ui.visible.right.overlay.sidebar {
-  -webkit-transform: translate3d(0%, 0%, 0);
-          transform: translate3d(0%, 0%, 0);
+  -webkit-transform: translate3d(0%, 0, 0);
+          transform: translate3d(0%, 0, 0);
 }
 .ui.visible.top.overlay.sidebar {
-  -webkit-transform: translate3d(0%, 0%, 0);
-          transform: translate3d(0%, 0%, 0);
+  -webkit-transform: translate3d(0%, 0, 0);
+          transform: translate3d(0%, 0, 0);
 }
 .ui.visible.bottom.overlay.sidebar {
-  -webkit-transform: translate3d(0%, 0%, 0);
-          transform: translate3d(0%, 0%, 0);
+  -webkit-transform: translate3d(0%, 0, 0);
+          transform: translate3d(0%, 0, 0);
 }
 
 /* End - Pusher */

data/app/assets/stylesheets/semantic-ui/modules/_slider.scss

@@ -0,0 +1,768 @@
+
+
+/*******************************
+             Theme
+ *******************************/
+
+.ui.slider:not(.vertical) {
+  width: 100%;
+  padding: 1em 0.5em;
+}
+.ui.slider {
+  position: relative;
+}
+.ui.slider: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 {
+  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 .inner .thumb {
+  left: auto;
+  right: 0;
+}
+.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;
+  position: absolute;
+  -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%;
+}
+
+/* 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%;
+}
+
+/* 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: #2185D0;
+}
+.ui.primary.inverted.slider .inner .track-fill {
+  background-color: #54C8FF;
+}
+
+/* Basic */
+.ui.primary.slider.basic .inner .thumb {
+  background-color: #2185D0;
+}
+.ui.primary.slider.basic .inner .thumb:hover,
+.ui.primary.slider.basic:focus .inner .thumb {
+  background-color: #1678c2;
+}
+
+/* Basic Inverted */
+.ui.primary.inverted.slider.basic .inner .thumb {
+  background-color: #54C8FF;
+}
+.ui.primary.inverted.slider.basic .inner .thumb:hover,
+.ui.primary.inverted.slider.basic:focus .inner .thumb {
+  background-color: #21b8ff;
+}
+
+/* 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
+---------------*/
+
+
+/* Small */
+.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;
+}
+
+/* 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;
+}
+
+/* Large */
+.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;
+}
+
+/* Large 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;
+}
+
+/* Big */
+.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;
+}
+
+/* Big 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;
+}
+
+
+/*******************************
+        Slider Overrides
+*******************************/
+