fomantic-ui-sass 2.8.2 → 2.8.7

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

@@ -52,7 +52,7 @@
 
 
 /* Header */
-.ui.inverted.segment > .ui.header > .sub.header,
+.ui.inverted.segment > .ui.header .sub.header,
 .ui.inverted.segment > .ui.header {
   color: #FFFFFF;
 }
@@ -472,6 +472,12 @@
 .ui.horizontal.segments:not(.stackable) > .segment:first-child {
   border-left: none;
 }
+.ui.horizontal.segments > .segment:first-child {
+  border-radius: 0.28571429rem 0 0 0.28571429rem;
+}
+.ui.horizontal.segments > .segment:last-child {
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
+}
 
 
 /*******************************

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;
 }
 
@@ -258,6 +258,13 @@
   border-width: 0 1px 1px 0;
   display: none;
 }
+.ui.right.vertical.steps .step:after {
+  border-width: 1px 0 0 1px;
+  left: 0;
+  right: 100%;
+  -webkit-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
+          transform: translateY(-50%) translateX(-50%) rotate(-45deg);
+}
 .ui.vertical.steps .active.step:after {
   display: block;
 }
@@ -323,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;
   }
@@ -365,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);
 }
 
@@ -394,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;
 }
@@ -473,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;
   }
@@ -636,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

@@ -13,6 +13,9 @@
              Text
 *******************************/
 
+span.ui.text {
+  line-height: 1;
+}
 span.ui.primary.text {
   color: #2185D0;
 }
@@ -103,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/_checkbox.scss

@@ -220,6 +220,7 @@
   cursor: default !important;
   opacity: 0.5;
   color: #000000;
+  pointer-events: none;
 }
 
 /*--------------

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;
@@ -64,7 +64,7 @@
 
 /* Loose Coupling */
 .ui.segment > .ui.dimmer:not(.page) {
-  border-radius: inherit !important;
+  border-radius: inherit;
 }
 
 /* Scrollbars */
@@ -155,6 +155,9 @@
   -webkit-transform-origin: center center;
           transform-origin: center center;
 }
+.ui.page.dimmer.modals {
+  -moz-perspective: none;
+}
 body.animating.in.dimmable,
 body.dimmed.dimmable {
   overflow: hidden;
@@ -182,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);
 }
 
 /*--------------
@@ -204,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);
 }
 
 /*--------------
@@ -218,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 > * {
@@ -230,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);
 }
 
 /*--------------
@@ -252,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);
 }
 
 /*--------------
@@ -287,16 +290,16 @@ body.dimmable > .dimmer {
   transform: translateY(-50%);
   -webkit-transform: translateY(calc(-50% - 0.5px));
 }
-.ui.segment > .ui[class*="top dimmer"] {
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
+.ui.segment > .ui.ui[class*="top dimmer"] {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
-.ui.segment > .ui[class*="center dimmer"] {
-  border-radius: 0 !important;
+.ui.segment > .ui.ui[class*="center dimmer"] {
+  border-radius: 0;
 }
-.ui.segment > .ui[class*="bottom dimmer"] {
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
+.ui.segment > .ui.ui[class*="bottom dimmer"] {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 .ui[class*="center dimmer"].transition[class*="fade up"].in {
   -webkit-animation-name: fadeInUpCenter;

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

@@ -116,6 +116,7 @@
   display: block;
   border: none;
   height: auto;
+  min-height: 2.57142857rem;
   text-align: left;
   border-top: none;
   line-height: 1em;
@@ -131,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
@@ -148,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 {
@@ -192,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;
@@ -208,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
@@ -229,7 +250,7 @@
   top: 0;
   left: 100%;
   right: auto;
-  margin: 0 0 0 -0.5em !important;
+  margin: 0 -0.5em !important;
   border-radius: 0.28571429rem !important;
   z-index: 21 !important;
 }
@@ -245,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,
@@ -313,9 +334,9 @@
 }
 
 /* Automatically float dropdown menu right on last menu item */
-.ui.menu .right.menu .dropdown:last-child .menu,
-.ui.menu .right.dropdown.item .menu,
-.ui.buttons > .ui.dropdown:last-child .menu {
+.ui.menu .right.menu .dropdown:last-child > .menu:not(.left),
+.ui.menu .right.dropdown.item > .menu:not(.left),
+.ui.buttons > .ui.dropdown:last-child > .menu:not(.left) {
   left: auto;
   right: 0;
 }
@@ -443,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;
   }
@@ -460,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;
   }
@@ -477,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;
   }
@@ -494,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;
   }
@@ -598,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
   ---------------*/
@@ -632,7 +705,7 @@ select.ui.dropdown {
   cursor: text;
   position: relative;
   left: 1px;
-  z-index: 3;
+  z-index: auto;
 }
 
 /* Search Selection */
@@ -660,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 {
@@ -726,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 {
@@ -758,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;
 }
@@ -809,6 +890,9 @@ select.ui.dropdown {
   width: 2.2em;
   line-height: 1.21428571em;
 }
+.ui.multiple.search.dropdown.button {
+  min-width: 14em;
+}
 
 /*--------------
        Inline
@@ -1322,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%;
 }
 
@@ -1378,14 +1462,21 @@ select.ui.dropdown {
   opacity: 1;
 }
 .ui.simple.dropdown > .menu > .item:active > .menu,
-.ui.simple.dropdown:hover > .menu > .item:hover > .menu {
+.ui.simple.dropdown .menu .item:hover > .menu {
   overflow: visible;
   width: auto;
   height: auto;
   top: 0 !important;
-  left: 100% !important;
+  left: 100%;
   opacity: 1;
 }
+.ui.simple.dropdown > .menu > .item:active > .left.menu,
+.ui.simple.dropdown .menu .item:hover > .left.menu,
+.right.menu .ui.simple.dropdown > .menu > .item:active > .menu:not(.right),
+.right.menu .ui.simple.dropdown > .menu .item:hover > .menu:not(.right) {
+  left: auto;
+  right: 100%;
+}
 .ui.simple.disabled.dropdown:hover .menu {
   display: none;
   height: 0;
@@ -1757,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;
 }