fomantic-ui 2.9.0-beta.31 → 2.9.0-beta.312

package/src/definitions/modules/dropdown.less

@@ -128,7 +128,7 @@
   font-size: @itemFontSize;
   color: @itemColor;
 
-  padding: @itemPadding !important;
+  padding: @itemPadding;
   text-transform: @itemTextTransform;
   font-weight: @itemFontWeight;
   box-shadow: @itemBoxShadow;
@@ -191,7 +191,7 @@
   border-top: none;
 }
 
-.ui.dropdown.dropdown .menu > .input {
+.ui.ui.ui.dropdown .menu > .input {
   width: auto;
   display: flex;
   margin: @menuInputMargin;
@@ -259,7 +259,7 @@
 }
 
 /* Hide Arrow */
-.ui.dropdown .menu .menu:after {
+.ui.dropdown .menu .menu::after {
   display: none;
 }
 
@@ -329,8 +329,8 @@
 ---------------*/
 
 /* Remove Menu Item Divider */
-.ui.dropdown .ui.menu > .item:before,
-.ui.menu .ui.dropdown .menu > .item:before {
+.ui.dropdown .ui.menu > .item::before,
+.ui.menu .ui.dropdown .menu > .item::before {
   display: none;
 }
 
@@ -367,9 +367,15 @@
   .ui.dropdown.icon.button > .dropdown.icon {
     margin: 0;
   }
-  .ui.button.dropdown .menu {
+  .ui.dropdown.button .menu {
     min-width: 100%;
   }
+  .ui.dropdown.button:not(.pointing):not(.floating).active {
+    border-radius: @borderRadius @borderRadius 0 0;
+  }
+  .ui.dropdown.button:not(.pointing):not(.floating) > .menu {
+    border-radius: 0 0 @borderRadius @borderRadius;
+  }
 }
 
 
@@ -455,8 +461,8 @@ select.ui.dropdown {
     box-shadow: @selectionMenuBoxShadow;
     transition: @selectionMenuTransition;
   }
-  .ui.selection.dropdown .menu:after,
-  .ui.selection.dropdown .menu:before {
+  .ui.selection.dropdown .menu::after,
+  .ui.selection.dropdown .menu::before {
     display: none;
   }
 
@@ -556,7 +562,7 @@ select.ui.dropdown {
   /* Menu Item */
   .ui.selection.dropdown .menu > .item {
     border-top: @selectionItemDivider;
-    padding: @selectionItemPadding !important;
+    padding: @selectionItemPadding;
     white-space: normal;
     word-wrap: normal;
   }
@@ -566,6 +572,16 @@ select.ui.dropdown {
     display: none;
   }
 
+  /* User addition item */
+  .ui.dropdown > .menu > .stuck.addition.item:first-child {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    box-shadow: @selectionVisibleBoxShadow;
+    background: @menuBackground;
+    z-index: @additionZIndex;
+  }
+
   /* Hover */
   .ui.selection.dropdown:hover {
     border-color: @selectionHoverBorderColor;
@@ -573,10 +589,12 @@ select.ui.dropdown {
   }
 
   /* Active */
+  .ui.selection.simple.dropdown:hover,
   .ui.selection.active.dropdown {
     border-color: @selectionVisibleBorderColor;
     box-shadow: @selectionVisibleBoxShadow;
   }
+  .ui.selection.simple.dropdown:hover .menu,
   .ui.selection.active.dropdown .menu {
     border-color: @selectionVisibleBorderColor;
     box-shadow: @selectionVisibleMenuBoxShadow;
@@ -634,7 +652,7 @@ select.ui.dropdown {
     /* 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 {
+        .ui.dropdown .scrollhint.menu:not(.hidden)::before {
           animation: scrollhint @scrollhintDuration @scrollhintEasing @scrollhintIteration;
           content: '';
           z-index: @scrollhintZIndex;
@@ -649,7 +667,7 @@ select.ui.dropdown {
           border-image: linear-gradient(to bottom, @scrollhintStartColor, @scrollhintEndColor) 1 100%;
         }
 
-        .ui.inverted.dropdown .scrollhint.menu:not(.hidden):before {
+        .ui.inverted.dropdown .scrollhint.menu:not(.hidden)::before {
           border-image: linear-gradient(to bottom, @invertedScrollhintStartColor, @invertedScrollhintEndColor) 1 100%;
         }
 
@@ -785,11 +803,15 @@ select.ui.dropdown {
     opacity: @clearableIconOpacity;
     z-index: @selectionIconZIndex;
   }
-  .ui.selection.dropdown > .remove.icon {
-    right: @clearableIconSelectionPosition;
+  & when (@variationDropdownSelection) {
+    .ui.selection.dropdown > .remove.icon {
+      right: @clearableIconSelectionPosition;
+    }
   }
-  .ui.inline.dropdown > .remove.icon {
-    right: @clearableIconInlinePosition;
+  & when (@variationDropdownInline) {
+    .ui.inline.dropdown > .remove.icon {
+      right: @clearableIconInlinePosition;
+    }
   }
 
   .ui.clearable.dropdown .text,
@@ -993,7 +1015,7 @@ select.ui.dropdown {
   .ui.loading.selection.dropdown > i.icon {
     padding: @relative21px @relative18px !important;
   }
-  .ui.loading.dropdown > i.icon:before {
+  .ui.loading.dropdown > i.icon::before {
     position: absolute;
     content: '';
     top: 50%;
@@ -1006,7 +1028,7 @@ select.ui.dropdown {
     border-radius: @circularRadius;
     border: @loaderLineWidth solid @loaderFillColor;
   }
-  .ui.loading.dropdown > i.icon:after {
+  .ui.loading.dropdown > i.icon::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -1024,8 +1046,8 @@ select.ui.dropdown {
   }
 
   /* Coupling */
-  .ui.loading.dropdown.button > i.icon:before,
-  .ui.loading.dropdown.button > i.icon:after {
+  .ui.loading.dropdown.button > i.icon::before,
+  .ui.loading.dropdown.button > i.icon::after {
     display: none;
   }
 
@@ -1073,12 +1095,12 @@ select.ui.dropdown {
   display: none !important;
 }
 
-& when (@variationDropdownStates) {
+& when not (@variationDropdownStates = false) {
   /*--------------------
           States
   ----------------------*/
-  each(@formStates, {
-    @state: replace(@key, '@', '');
+  each(@variationDropdownStates, {
+    @state: @value;
     @c: @formStates[@@state][dropdownLabelColor];
     @bdc: @formStates[@@state][borderColor];
 
@@ -1198,24 +1220,24 @@ select.ui.dropdown {
     margin: @leftSubMenuMargin !important;
     border-radius: @leftSubMenuBorderRadius !important;
   }
-}
 
-.ui.dropdown .item .left.dropdown.icon,
-.ui.dropdown .left.menu .item .dropdown.icon {
-  width: auto;
-  float: @leftMenuDropdownIconFloat;
-  margin: @leftMenuDropdownIconMargin;
-}
-.ui.dropdown .item .left.dropdown.icon,
-.ui.dropdown .left.menu .item .dropdown.icon {
-  width: auto;
-  float: @leftMenuDropdownIconFloat;
-  margin: @leftMenuDropdownIconMargin;
-}
-.ui.dropdown .item .left.dropdown.icon + .text,
-.ui.dropdown .left.menu .item .dropdown.icon + .text {
-  margin-left: @itemDropdownIconDistance;
-  margin-right: 0;
+  .ui.dropdown .item .left.dropdown.icon,
+  .ui.dropdown .left.menu .item .dropdown.icon {
+    width: auto;
+    float: @leftMenuDropdownIconFloat;
+    margin: @leftMenuDropdownIconMargin;
+  }
+  .ui.dropdown .item .left.dropdown.icon,
+  .ui.dropdown .left.menu .item .dropdown.icon {
+    width: auto;
+    float: @leftMenuDropdownIconFloat;
+    margin: @leftMenuDropdownIconMargin;
+  }
+  .ui.dropdown .item .left.dropdown.icon + .text,
+  .ui.dropdown .left.menu .item .dropdown.icon + .text {
+    margin-left: @itemDropdownIconDistance;
+    margin-right: 0;
+  }
 }
 
 & when (@variationDropdownUpward) {
@@ -1228,7 +1250,6 @@ select.ui.dropdown {
     top: auto;
     bottom: 100%;
     box-shadow: @upwardMenuBoxShadow;
-    border-radius: @upwardMenuBorderRadius;
   }
 
   /* Upward Sub Menu */
@@ -1237,42 +1258,54 @@ select.ui.dropdown {
     bottom: 0 !important;
   }
 
-  /* Active Upward */
-  .ui.simple.upward.active.dropdown,
-  .ui.simple.upward.dropdown:hover {
-    border-radius: @borderRadius @borderRadius 0 0 !important;
-  }
-  .ui.upward.dropdown.button:not(.pointing):not(.floating).active {
-    border-radius: @borderRadius @borderRadius 0 0;
+  & when (@variationDropdownSimple) {
+    /* Active Upward */
+    .ui.simple.upward.active.dropdown,
+    .ui.simple.upward.dropdown:hover {
+      border-radius: 0 0 @borderRadius @borderRadius;
+    }
   }
 
-  /* Selection */
-  .ui.upward.selection.dropdown .menu {
-    border-top-width: @menuBorderWidth !important;
-    border-bottom-width: 0 !important;
-    box-shadow: @upwardSelectionMenuBoxShadow;
-  }
-  .ui.upward.selection.dropdown:hover {
-    box-shadow: @upwardSelectionHoverBoxShadow;
+  & when (@variationDropdownButton) {
+    /* Button */
+    .ui.upward.dropdown.button:not(.pointing):not(.floating).active {
+      border-radius: 0 0 @borderRadius @borderRadius;
+    }
+    .ui.upward.dropdown.button:not(.pointing):not(.floating) > .menu {
+      border-radius: @borderRadius @borderRadius 0 0;
+    }
   }
 
-  /* Active Upward */
-  .ui.active.upward.selection.dropdown {
-    border-radius: @upwardSelectionVisibleBorderRadius !important;
-  }
+  & when (@variationDropdownSelection) {
+    /* Selection */
+    .ui.ui.upward.selection.dropdown .menu {
+      border-top-width: @menuBorderWidth !important;
+      border-bottom-width: 0 !important;
+      box-shadow: @upwardSelectionMenuBoxShadow;
+      border-radius: @upwardSelectionMenuBorderRadius;
+    }
+    .ui.upward.selection.dropdown:hover {
+      box-shadow: @upwardSelectionHoverBoxShadow;
+    }
 
-  /* Visible Upward */
-  .ui.upward.selection.dropdown.visible {
-    box-shadow: @upwardSelectionVisibleBoxShadow;
-    border-radius: @upwardSelectionVisibleBorderRadius !important;
-  }
+    /* Active Upward */
+    .ui.active.upward.selection.dropdown {
+      border-radius: @upwardSelectionVisibleBorderRadius !important;
+    }
 
-  /* Visible Hover Upward */
-  .ui.upward.active.selection.dropdown:hover {
-    box-shadow: @upwardSelectionActiveHoverBoxShadow;
-  }
-  .ui.upward.active.selection.dropdown:hover .menu {
-    box-shadow: @upwardSelectionActiveHoverMenuBoxShadow;
+    /* Visible Upward */
+    .ui.upward.selection.dropdown.visible {
+      box-shadow: @upwardSelectionVisibleBoxShadow;
+      border-radius: @upwardSelectionVisibleBorderRadius !important;
+    }
+
+    /* Visible Hover Upward */
+    .ui.upward.active.selection.dropdown:hover {
+      box-shadow: @upwardSelectionActiveHoverBoxShadow;
+    }
+    .ui.upward.active.selection.dropdown:hover .menu {
+      box-shadow: @upwardSelectionActiveHoverMenuBoxShadow;
+    }
   }
 }
 
@@ -1320,12 +1353,13 @@ select.ui.dropdown {
   .ui.dropdown > .visible.menu .scrolling.menu {
     display: block;
   }
-
-  /* Scrollbar in IE */
-  @media all and (-ms-high-contrast:none) {
-    .ui.scrolling.dropdown .menu,
-    .ui.dropdown .scrolling.menu {
-      min-width: e(%("calc(100%% - %d)", @scrollbarWidth));
+  & when (@supportIE) {
+    /* Scrollbar in IE */
+    @media all and (-ms-high-contrast: none) {
+      .ui.scrolling.dropdown .menu,
+      .ui.dropdown .scrolling.menu {
+        min-width: e(%("calc(100%% - %d)", @scrollbarWidth));
+      }
     }
   }
   @media only screen and (max-width : @largestMobileScreen) {
@@ -1378,23 +1412,25 @@ select.ui.dropdown {
   }
 }
 
-/*--------------
-     Columnar
----------------*/
-.ui.column.dropdown > .menu {
-  flex-wrap:wrap;
-}
-.ui.dropdown[class*="two column"] > .menu > .item {
-  width: 50%;
-}
-.ui.dropdown[class*="three column"] > .menu > .item {
-  width: 33%;
-}
-.ui.dropdown[class*="four column"] > .menu > .item {
-  width: 25%;
-}
-.ui.dropdown[class*="five column"] > .menu > .item {
-  width: 20%;
+& when (@variationDropdownColumnar) {
+  /*--------------
+       Columnar
+  ---------------*/
+  .ui.column.dropdown > .menu {
+    flex-wrap: wrap;
+  }
+  .ui.dropdown[class*="two column"] > .menu > .item {
+    width: 50%;
+  }
+  .ui.dropdown[class*="three column"] > .menu > .item {
+    width: 33%;
+  }
+  .ui.dropdown[class*="four column"] > .menu > .item {
+    width: 25%;
+  }
+  .ui.dropdown[class*="five column"] > .menu > .item {
+    width: 20%;
+  }
 }
 
 & when (@variationDropdownSimple) {
@@ -1404,14 +1440,16 @@ select.ui.dropdown {
 
   /* Displays without javascript */
 
-  .ui.simple.dropdown .menu:before,
-  .ui.simple.dropdown .menu:after {
+  .ui.simple.dropdown .menu::before,
+  .ui.simple.dropdown .menu::after {
     display: none;
   }
   .ui.simple.dropdown .menu {
     position: absolute;
-    /* IE hack to make dropdown icons appear inline */
-    display: -ms-inline-flexbox !important;
+    & when (@supportIE) {
+      /* IE hack to make dropdown icons appear inline */
+      display: -ms-inline-flexbox !important;
+    }
     display: block;
     overflow: hidden;
     top: -9999px;
@@ -1421,16 +1459,27 @@ select.ui.dropdown {
     transition: @simpleTransition;
     margin-top: 0 !important;
   }
+  & when (@variationDropdownUpward) {
+    .ui.simple.dropdown .upward.menu {
+      margin-bottom: @simpleUpwardMenuMargin;
+    }
+    .ui.simple.selection.dropdown .upward.menu {
+      margin-bottom: @simpleUpwardSelectionMenuMargin;
+    }
+    .ui.menu:not(.vertical) .ui.simple.dropdown.item .upward.menu {
+      margin-bottom: @simpleUpwardItemMenuMargin;
+    }
+  }
 
   .ui.simple.active.dropdown,
   .ui.simple.dropdown:hover {
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
   .ui.simple.active.dropdown > .menu,
   .ui.simple.dropdown:hover > .menu {
-    overflow: visible;
+    overflow: auto;
     width: auto;
     height: auto;
     top: 100%;
@@ -1438,7 +1487,7 @@ select.ui.dropdown {
   }
   .ui.simple.dropdown > .menu > .item:active > .menu,
   .ui.simple.dropdown .menu .item:hover > .menu {
-    overflow: visible;
+    overflow: auto;
     width: auto;
     height: auto;
     top: 0 !important;
@@ -1446,8 +1495,8 @@ select.ui.dropdown {
     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), 
+  .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%;
@@ -1495,7 +1544,7 @@ select.ui.dropdown {
       Floating
   ---------------*/
 
-  .ui.floating.dropdown .menu {
+  .ui.floating.dropdown > .menu {
     left: 0;
     right: auto;
     box-shadow: @floatingMenuBoxShadow !important;
@@ -1523,7 +1572,7 @@ select.ui.dropdown {
     border-radius: @pointingMenuBorderRadius;
   }
 
-  .ui.pointing.dropdown > .menu:not(.hidden):after {
+  .ui.pointing.dropdown > .menu:not(.hidden)::after {
     display: block;
     position: absolute;
     pointer-events: none;
@@ -1538,7 +1587,7 @@ select.ui.dropdown {
     z-index: @pointingArrowZIndex;
   }
 
-  .ui.pointing.dropdown > .menu:not(.hidden):after {
+  .ui.pointing.dropdown > .menu:not(.hidden)::after {
     top: @pointingArrowOffset;
     left: 50%;
     margin: 0 0 0 @pointingArrowOffset;
@@ -1559,7 +1608,7 @@ select.ui.dropdown {
     right: auto;
     margin: @pointingArrowDistanceFromEdge 0 0;
   }
-  .ui.top.left.pointing.dropdown > .menu:after {
+  .ui.top.left.pointing.dropdown > .menu::after {
     top: @pointingArrowOffset;
     left: @pointingArrowDistanceFromEdge;
     right: auto;
@@ -1574,8 +1623,8 @@ select.ui.dropdown {
     left: auto;
     margin: @pointingArrowDistanceFromEdge 0 0;
   }
-  .ui.top.pointing.dropdown > .left.menu:after,
-  .ui.top.right.pointing.dropdown > .menu:after {
+  .ui.top.pointing.dropdown > .left.menu::after,
+  .ui.top.right.pointing.dropdown > .menu::after {
     top: @pointingArrowOffset;
     left: auto !important;
     right: @pointingArrowDistanceFromEdge !important;
@@ -1590,7 +1639,7 @@ select.ui.dropdown {
     right: auto;
     margin: 0 0 0 @pointingArrowDistanceFromEdge;
   }
-  .ui.left.pointing.dropdown > .menu:after {
+  .ui.left.pointing.dropdown > .menu::after {
     top: 1em;
     left: @pointingArrowOffset;
     margin: 0 0 0 0;
@@ -1601,7 +1650,7 @@ select.ui.dropdown {
     right: 100% !important;
     margin: 0 @pointingArrowDistanceFromEdge 0 0;
   }
-  .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after {
+  .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu::after {
     top: 1em;
     left: auto;
     right: @pointingArrowOffset;
@@ -1617,7 +1666,7 @@ select.ui.dropdown {
     right: 100%;
     margin: 0 @pointingArrowDistanceFromEdge 0 0;
   }
-  .ui.right.pointing.dropdown > .menu:after {
+  .ui.right.pointing.dropdown > .menu::after {
     top: 1em;
     left: auto;
     right: @pointingArrowOffset;
@@ -1633,7 +1682,7 @@ select.ui.dropdown {
     right: auto;
     margin: 0 0 @pointingArrowDistanceFromEdge ;
   }
-  .ui.bottom.pointing.dropdown > .menu:after {
+  .ui.bottom.pointing.dropdown > .menu::after {
     top: auto;
     bottom: @pointingArrowOffset;
     right: auto;
@@ -1651,7 +1700,7 @@ select.ui.dropdown {
     left: 0;
     right: auto;
   }
-  .ui.bottom.left.pointing.dropdown > .menu:after {
+  .ui.bottom.left.pointing.dropdown > .menu::after {
     left: @pointingArrowDistanceFromEdge;
     right: auto;
   }
@@ -1661,7 +1710,7 @@ select.ui.dropdown {
     right: 0;
     left: auto;
   }
-  .ui.bottom.right.pointing.dropdown > .menu:after {
+  .ui.bottom.right.pointing.dropdown > .menu::after {
     left: auto;
     right: @pointingArrowDistanceFromEdge;
   }
@@ -1674,8 +1723,8 @@ select.ui.dropdown {
     margin: 0 0 @pointingMenuDistance;
     border-radius: @pointingUpwardMenuBorderRadius;
   }
-  .ui.pointing.upward.dropdown .menu:after,
-  .ui.top.pointing.upward.dropdown .menu:after {
+  .ui.pointing.upward.dropdown .menu::after,
+  .ui.top.pointing.upward.dropdown .menu::after {
     top: 100% !important;
     bottom: auto !important;
     box-shadow: @pointingUpwardArrowBoxShadow;
@@ -1688,7 +1737,7 @@ select.ui.dropdown {
     bottom: 0 !important;
     margin: 0 @pointingArrowDistanceFromEdge 0 0;
   }
-  .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
+  .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu::after {
     top: auto !important;
     bottom: 0 !important;
     margin: 0 0 @pointingArrowDistanceFromEdge 0;
@@ -1702,7 +1751,7 @@ select.ui.dropdown {
     bottom: 0 !important;
     margin: 0 0 0 @pointingArrowDistanceFromEdge;
   }
-  .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
+  .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu::after {
     top: auto !important;
     bottom: 0 !important;
     margin: 0 0 @pointingArrowDistanceFromEdge 0;
@@ -1809,6 +1858,8 @@ select.ui.dropdown {
       color: @invertedSelectionVisibleTextColor;
     }
 
+    .ui.selection.simple.dropdown:hover .inverted.menu,
+    .ui.inverted.selection.simple.dropdown:hover .menu,
     .ui.selection.active.dropdown .inverted.menu,
     .ui.inverted.selection.active.dropdown .menu,
     .ui.inverted.selection.active.dropdown:hover {
@@ -1895,25 +1946,39 @@ select.ui.dropdown {
   }
 
   /* Scrollbars */
-  .ui.dropdown .inverted.menu::-webkit-scrollbar-track,
-  .ui.inverted.dropdown .menu::-webkit-scrollbar-track {
-    background: @trackInvertedBackground;
-  }
-  .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb,
-  .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb {
-    background: @thumbInvertedBackground;
-  }
-  .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:window-inactive,
-  .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:window-inactive {
-    background: @thumbInvertedInactiveBackground;
-  }
-  .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:hover,
-  .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:hover {
-    background: @thumbInvertedHoverBackground;
+  & when (@useCustomScrollbars) {
+    .ui.dropdown .inverted.menu::-webkit-scrollbar-track,
+    .ui.inverted.dropdown .menu::-webkit-scrollbar-track {
+      background: @trackInvertedBackground;
+    }
+    .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb,
+    .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb {
+      background: @thumbInvertedBackground;
+    }
+    .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:window-inactive,
+    .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:window-inactive {
+      background: @thumbInvertedInactiveBackground;
+    }
+    .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:hover,
+    .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:hover {
+      background: @thumbInvertedHoverBackground;
+    }
+    .ui.dropdown .inverted.menu,
+    .ui.inverted.dropdown .menu {
+      & when (@supportIE) {
+        /* IE11 */
+        scrollbar-face-color: @thumbInvertedBackgroundHex;
+        scrollbar-shadow-color: @thumbInvertedBackgroundHex;
+        scrollbar-track-color: @trackInvertedBackgroundHex;
+        scrollbar-arrow-color: @trackInvertedBackgroundHex;
+      }
+      /* firefox : first color thumb, second track */
+      scrollbar-color:  @thumbInvertedBackground @trackInvertedBackground;
+    }
   }
   & when (@variationDropdownPointing) {
-    .ui.pointing.dropdown > .inverted.menu:after,
-    .ui.inverted.pointing.dropdown > .menu:after {
+    .ui.pointing.dropdown > .inverted.menu::after,
+    .ui.inverted.pointing.dropdown > .menu::after {
       background: @invertedPointingArrowBackground;
       box-shadow: @invertedPointingArrowBoxShadow;
     }

package/src/definitions/modules/embed.js

@@ -671,26 +671,32 @@ $.fn.embed.settings = {
   },
 
   templates: {
+    deQuote: function(string, encode) {
+      return String(string).replace(/"/g,encode ? """ : "");
+    },
     iframe : function(url, parameters) {
-      var src = url;
+      var src = url,
+          deQuote = $.fn.embed.settings.templates.deQuote
+      ;
       if (parameters) {
           src += '?' + parameters;
       }
       return ''
-        + '<iframe src="' + src + '"'
+        + '<iframe src="' + deQuote(src) + '"'
         + ' width="100%" height="100%"'
         + ' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
       ;
     },
     placeholder : function(image, icon) {
       var
-        html = ''
+        html = '',
+        deQuote = $.fn.embed.settings.templates.deQuote
       ;
       if(icon) {
-        html += '<i class="' + icon + ' icon"></i>';
+        html += '<i class="' + deQuote(icon) + ' icon"></i>';
       }
       if(image) {
-        html += '<img class="placeholder" src="' + image + '">';
+        html += '<img class="placeholder" src="' + deQuote(image) + '">';
       }
       return html;
     }