fomantic-ui-sass 2.8.6 → 2.8.7

data/app/assets/stylesheets/semantic-ui/elements/_step.scss

@@ -158,13 +158,13 @@
 }
 
 /* Icon */
-.ui.steps .step > .icon {
+.ui.steps .step > i.icon {
   line-height: 1;
   font-size: 2.5em;
   margin: 0 1rem 0 0;
 }
-.ui.steps .step > .icon,
-.ui.steps .step > .icon ~ .content {
+.ui.steps .step > i.icon,
+.ui.steps .step > i.icon ~ .content {
   display: block;
   -webkit-box-flex: 0;
       -ms-flex: 0 1 auto;
@@ -174,7 +174,7 @@
 }
 
 /* Horizontal Icon */
-.ui.steps:not(.vertical) .step > .icon {
+.ui.steps:not(.vertical) .step > i.icon {
   width: auto;
 }
 
@@ -330,7 +330,7 @@
   }
   
 /* Icon */
-  .ui.steps:not(.unstackable) .step > .icon,
+  .ui.steps:not(.unstackable) .step > i.icon,
   .ui.ordered.steps:not(.unstackable) .step:before {
     margin: 0 0 1rem 0;
   }
@@ -372,7 +372,7 @@
   color: #4183C4;
 }
 .ui.ordered.steps .step.active:before,
-.ui.steps .active.step .icon {
+.ui.steps .active.step i.icon {
   color: rgba(0, 0, 0, 0.85);
 }
 
@@ -401,7 +401,7 @@
 }
 
 /* Completed */
-.ui.steps .step.completed > .icon:before,
+.ui.steps .step.completed > i.icon:before,
 .ui.ordered.steps .step.completed:before {
   color: #21BA45;
 }
@@ -480,7 +480,7 @@
   }
   
 /* Icon */
-  .ui[class*="tablet stackable"].steps .step > .icon,
+  .ui[class*="tablet stackable"].steps .step > i.icon,
   .ui[class*="tablet stackable"].ordered.steps .step:before {
     margin: 0 0 1rem 0;
   }
@@ -643,7 +643,7 @@
   background: #333333;
 }
 .ui.inverted.ordered.steps .step.active:before,
-.ui.inverted.steps .active.step .icon {
+.ui.inverted.steps .active.step i.icon {
   color: #ffffff;
 }
 

data/app/assets/stylesheets/semantic-ui/elements/_text.scss

@@ -106,6 +106,18 @@ span.ui.black.text {
 span.ui.inverted.black.text {
   color: #545454;
 }
+span.ui.error.text {
+  color: #DB2828;
+}
+span.ui.info.text {
+  color: #31CCEC;
+}
+span.ui.success.text {
+  color: #21BA45;
+}
+span.ui.warning.text {
+  color: #F2C037;
+}
 span.ui.disabled.text {
   opacity: 0.45;
 }

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

@@ -72,7 +72,7 @@
 .ui.calendar .ui.table tr th {
   border-left: none;
 }
-.ui.calendar .ui.table tr th .icon {
+.ui.calendar .ui.table tr th i.icon {
   margin: 0;
 }
 .ui.calendar .ui.table tr:first-child th {
@@ -104,7 +104,7 @@
   position: absolute;
   right: 0;
 }
-.ui.calendar .ui.table tr .disabled {
+.ui.ui.calendar .ui.table tr .disabled {
   pointer-events: auto;
   cursor: default;
   color: rgba(40, 40, 40, 0.3);
@@ -127,21 +127,28 @@
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.ui.calendar .ui.table.inverted tr td.range {
+.ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus,
+.ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus {
+  -webkit-box-shadow: inset 0 0 0 1px #85B7D9;
+          box-shadow: inset 0 0 0 1px #85B7D9;
+}
+.ui.inverted.calendar .ui.table.inverted tr td.range {
   background: rgba(255, 255, 255, 0.08);
   color: #ffffff;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus,
-.ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus {
+.ui.inverted.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
+.ui.inverted.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus {
   -webkit-box-shadow: inset 0 0 0 1px #85B7D9;
           box-shadow: inset 0 0 0 1px #85B7D9;
 }
-.ui.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
-.ui.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus {
-  -webkit-box-shadow: inset 0 0 0 1px #85B7D9;
-          box-shadow: inset 0 0 0 1px #85B7D9;
+.ui.inverted.calendar .ui.inverted.table tr .disabled {
+  color: rgba(225, 225, 225, 0.3);
+}
+.ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled) {
+  color: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.02);
 }
 
 

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

@@ -26,7 +26,7 @@
   text-align: center;
   vertical-align: middle;
   padding: 1em;
-  background-color: rgba(0, 0, 0, 0.85);
+  background: rgba(0, 0, 0, 0.85);
   opacity: 0;
   line-height: 1;
   -webkit-animation-fill-mode: both;
@@ -185,10 +185,10 @@ body.dimmable > .dimmer {
 
 /* Dimmer Color */
 .blurring.dimmable > .dimmer {
-  background-color: rgba(0, 0, 0, 0.6);
+  background: rgba(0, 0, 0, 0.6);
 }
 .blurring.dimmable > .inverted.dimmer {
-  background-color: rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.6);
 }
 
 /*--------------
@@ -207,13 +207,13 @@ body.dimmable > .dimmer {
   ---------------*/
 
 .medium.medium.medium.medium.medium.dimmer {
-  background-color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.65);
 }
 .light.light.light.light.light.dimmer {
-  background-color: rgba(0, 0, 0, 0.45);
+  background: rgba(0, 0, 0, 0.45);
 }
 .very.light.light.light.light.dimmer {
-  background-color: rgba(0, 0, 0, 0.25);
+  background: rgba(0, 0, 0, 0.25);
 }
 
 /*--------------
@@ -221,7 +221,7 @@ body.dimmable > .dimmer {
   ---------------*/
 
 .ui.inverted.dimmer {
-  background-color: rgba(255, 255, 255, 0.85);
+  background: rgba(255, 255, 255, 0.85);
 }
 .ui.inverted.dimmer > .content,
 .ui.inverted.dimmer > .content > * {
@@ -233,13 +233,13 @@ body.dimmable > .dimmer {
     ---------------*/
 
 .medium.medium.medium.medium.medium.inverted.dimmer {
-  background-color: rgba(255, 255, 255, 0.65);
+  background: rgba(255, 255, 255, 0.65);
 }
 .light.light.light.light.light.inverted.dimmer {
-  background-color: rgba(255, 255, 255, 0.45);
+  background: rgba(255, 255, 255, 0.45);
 }
 .very.light.light.light.light.inverted.dimmer {
-  background-color: rgba(255, 255, 255, 0.25);
+  background: rgba(255, 255, 255, 0.25);
 }
 
 /*--------------
@@ -255,21 +255,21 @@ body.dimmable > .dimmer {
   width: 0;
   height: 0;
   z-index: -100;
-  background-color: rgba(0, 0, 0, 0);
+  background: rgba(0, 0, 0, 0);
 }
 .dimmed.dimmable > .ui.simple.dimmer {
   overflow: visible;
   opacity: 1;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.85);
+  background: rgba(0, 0, 0, 0.85);
   z-index: 1;
 }
 .ui.simple.inverted.dimmer {
-  background-color: rgba(255, 255, 255, 0);
+  background: rgba(255, 255, 255, 0);
 }
 .dimmed.dimmable > .ui.simple.inverted.dimmer {
-  background-color: rgba(255, 255, 255, 0.85);
+  background: rgba(255, 255, 255, 0.85);
 }
 
 /*--------------

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

@@ -132,6 +132,15 @@
 .ui.dropdown .menu > .item:first-child {
   border-top-width: 0;
 }
+.ui.dropdown .menu > .item.vertical {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 
 /*--------------
   Floated Content
@@ -149,7 +158,7 @@
   margin-left: 0 !important;
   margin-right: 1em !important;
 }
-.ui.dropdown .menu .item > .icon.floated,
+.ui.dropdown .menu .item > i.icon.floated,
 .ui.dropdown .menu .item > .flag.floated,
 .ui.dropdown .menu .item > .image.floated,
 .ui.dropdown .menu .item > img.floated {
@@ -193,7 +202,7 @@
   padding: 0.5em 1em;
 }
 .ui.dropdown .menu > .input:not(.transparent) .button,
-.ui.dropdown .menu > .input:not(.transparent) .icon,
+.ui.dropdown .menu > .input:not(.transparent) i.icon,
 .ui.dropdown .menu > .input:not(.transparent) .label {
   padding-top: 0.5em;
   padding-bottom: 0.5em;
@@ -209,6 +218,17 @@
   margin: 0 0 0 1em;
   color: rgba(0, 0, 0, 0.4);
 }
+.ui.dropdown .menu > .item.vertical > .description {
+  margin: 0;
+}
+
+/*-----------------
+      Item Text
+-------------------*/
+
+.ui.dropdown .menu > .item.vertical > .text {
+  margin-bottom: 0.25em;
+}
 
 /*-----------------
        Message
@@ -246,26 +266,26 @@
 
 
 /* Icons / Flags / Labels / Image */
-.ui.dropdown > .text > .icon,
+.ui.dropdown > .text > i.icon,
 .ui.dropdown > .text > .label,
 .ui.dropdown > .text > .flag,
 .ui.dropdown > .text > img,
 .ui.dropdown > .text > .image {
   margin-top: 0em;
 }
-.ui.dropdown .menu > .item > .icon,
+.ui.dropdown .menu > .item > i.icon,
 .ui.dropdown .menu > .item > .label,
 .ui.dropdown .menu > .item > .flag,
 .ui.dropdown .menu > .item > .image,
 .ui.dropdown .menu > .item > img {
   margin-top: 0em;
 }
-.ui.dropdown > .text > .icon,
+.ui.dropdown > .text > i.icon,
 .ui.dropdown > .text > .label,
 .ui.dropdown > .text > .flag,
 .ui.dropdown > .text > img,
 .ui.dropdown > .text > .image,
-.ui.dropdown .menu > .item > .icon,
+.ui.dropdown .menu > .item > i.icon,
 .ui.dropdown .menu > .item > .label,
 .ui.dropdown .menu > .item > .flag,
 .ui.dropdown .menu > .item > .image,
@@ -444,12 +464,12 @@ select.ui.dropdown {
   padding: 0.78571429rem 1.14285714rem;
 }
 @media only screen and (max-width: 767.98px) {
-  .ui.selection.dropdown[class*="very short"] .menu {
-    max-height: 4.00714286rem;
-  }
   .ui.selection.dropdown.short .menu {
     max-height: 6.01071429rem;
   }
+  .ui.selection.dropdown[class*="very short"] .menu {
+    max-height: 4.00714286rem;
+  }
   .ui.selection.dropdown .menu {
     max-height: 8.01428571rem;
   }
@@ -461,12 +481,12 @@ select.ui.dropdown {
   }
 }
 @media only screen and (min-width: 768px) {
-  .ui.selection.dropdown[class*="very short"] .menu {
-    max-height: 5.34285714rem;
-  }
   .ui.selection.dropdown.short .menu {
     max-height: 8.01428571rem;
   }
+  .ui.selection.dropdown[class*="very short"] .menu {
+    max-height: 5.34285714rem;
+  }
   .ui.selection.dropdown .menu {
     max-height: 10.68571429rem;
   }
@@ -478,12 +498,12 @@ select.ui.dropdown {
   }
 }
 @media only screen and (min-width: 992px) {
-  .ui.selection.dropdown[class*="very short"] .menu {
-    max-height: 8.01428571rem;
-  }
   .ui.selection.dropdown.short .menu {
     max-height: 12.02142857rem;
   }
+  .ui.selection.dropdown[class*="very short"] .menu {
+    max-height: 8.01428571rem;
+  }
   .ui.selection.dropdown .menu {
     max-height: 16.02857143rem;
   }
@@ -495,12 +515,12 @@ select.ui.dropdown {
   }
 }
 @media only screen and (min-width: 1920px) {
-  .ui.selection.dropdown[class*="very short"] .menu {
-    max-height: 10.68571429rem;
-  }
   .ui.selection.dropdown.short .menu {
     max-height: 16.02857143rem;
   }
+  .ui.selection.dropdown[class*="very short"] .menu {
+    max-height: 10.68571429rem;
+  }
   .ui.selection.dropdown .menu {
     max-height: 21.37142857rem;
   }
@@ -599,6 +619,58 @@ select.ui.dropdown {
           box-shadow: none !important;
 }
 
+/* CSS specific to iOS devices or firefox mobile only  */
+@supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) or (-moz-appearance:none) {
+  @media (-moz-touch-enabled), (pointer: coarse) {
+    .ui.dropdown .scrollhint.menu:not(.hidden):before {
+      -webkit-animation: scrollhint 2s ease 2;
+              animation: scrollhint 2s ease 2;
+      content: '';
+      z-index: 15;
+      display: block;
+      position: absolute;
+      opacity: 0;
+      right: 0.25em;
+      top: 0;
+      height: 100%;
+      border-right: 0.25em solid;
+      border-left: 0;
+      -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.75)), to(rgba(0, 0, 0, 0))) 1 100%;
+      -webkit-border-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%;
+           -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%;
+              border-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.75)), to(rgba(0, 0, 0, 0))) 1 100%;
+              border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%;
+    }
+    .ui.inverted.dropdown .scrollhint.menu:not(.hidden):before {
+      -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.75)), to(rgba(255, 255, 255, 0))) 1 100%;
+      -webkit-border-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%;
+           -o-border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%;
+              border-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.75)), to(rgba(255, 255, 255, 0))) 1 100%;
+              border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%;
+    }
+    @-webkit-keyframes scrollhint {
+      0% {
+        opacity: 1;
+        top: 100%;
+      }
+      100% {
+        opacity: 0;
+        top: 0;
+      }
+    }
+    @keyframes scrollhint {
+      0% {
+        opacity: 1;
+        top: 100%;
+      }
+      100% {
+        opacity: 0;
+        top: 0;
+      }
+    }
+  }
+}
+
 /*--------------
      Searchable
   ---------------*/
@@ -661,13 +733,16 @@ select.ui.dropdown {
 }
 
 /* Filtered Text */
-.ui.active.search.dropdown input.search:focus + .text .icon,
+.ui.active.search.dropdown input.search:focus + .text i.icon,
 .ui.active.search.dropdown input.search:focus + .text .flag {
   opacity: 0.45;
 }
 .ui.active.search.dropdown input.search:focus + .text {
   color: rgba(115, 115, 115, 0.87) !important;
 }
+.ui.search.dropdown.button > span.sizer {
+  display: none;
+}
 
 /* Search Menu */
 .ui.search.dropdown .menu {
@@ -727,7 +802,7 @@ select.ui.dropdown {
 
 
 /* Multiple Selection */
-.ui.multiple.dropdown {
+.ui.ui.multiple.dropdown {
   padding: 0.22619048em 3.2em 0.22619048em 0.35714286em;
 }
 .ui.multiple.dropdown .menu {
@@ -759,6 +834,11 @@ select.ui.dropdown {
   margin: 0.45238095em 0 0.45238095em 0.64285714em;
   line-height: 1.21428571em;
 }
+.ui.multiple.dropdown > .text.default {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .ui.multiple.dropdown > .label ~ input.search {
   margin-left: 0.14285714em !important;
 }
@@ -810,6 +890,9 @@ select.ui.dropdown {
   width: 2.2em;
   line-height: 1.21428571em;
 }
+.ui.multiple.search.dropdown.button {
+  min-width: 14em;
+}
 
 /*--------------
        Inline
@@ -1323,20 +1406,20 @@ select.ui.dropdown {
      Columnar
 ---------------*/
 
+.ui.column.dropdown > .menu {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
 .ui.dropdown[class*="two column"] > .menu > .item {
-  display: inline-block;
   width: 50%;
 }
 .ui.dropdown[class*="three column"] > .menu > .item {
-  display: inline-block;
   width: 33%;
 }
 .ui.dropdown[class*="four column"] > .menu > .item {
-  display: inline-block;
   width: 25%;
 }
 .ui.dropdown[class*="five column"] > .menu > .item {
-  display: inline-block;
   width: 20%;
 }
 
@@ -1765,7 +1848,7 @@ select.ui.dropdown {
 .ui.inverted.default.dropdown:not(.button) > input:focus ~ .text {
   color: rgba(255, 255, 255, 0.7);
 }
-.ui.inverted.active.search.dropdown input.search:focus + .text .icon,
+.ui.inverted.active.search.dropdown input.search:focus + .text i.icon,
 .ui.inverted.active.search.dropdown input.search:focus + .text .flag {
   opacity: 0.45;
 }