fomantic-ui 2.9.0-beta.99 → 2.9.0

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;
 }
 
@@ -461,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;
   }
 
@@ -562,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;
   }
@@ -572,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;
@@ -579,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;
@@ -640,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;
@@ -655,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%;
         }
 
@@ -791,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,
@@ -999,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%;
@@ -1012,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%;
@@ -1030,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;
   }
 
@@ -1204,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) {
@@ -1246,7 +1262,7 @@ select.ui.dropdown {
     /* Active Upward */
     .ui.simple.upward.active.dropdown,
     .ui.simple.upward.dropdown:hover {
-      border-radius: @borderRadius @borderRadius 0 0 !important;
+      border-radius: 0 0 @borderRadius @borderRadius;
     }
   }
 
@@ -1262,7 +1278,7 @@ select.ui.dropdown {
 
   & when (@variationDropdownSelection) {
     /* Selection */
-    .ui.upward.selection.dropdown .menu {
+    .ui.ui.upward.selection.dropdown .menu {
       border-top-width: @menuBorderWidth !important;
       border-bottom-width: 0 !important;
       box-shadow: @upwardSelectionMenuBoxShadow;
@@ -1337,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) {
@@ -1423,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;
@@ -1440,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%;
@@ -1457,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;
@@ -1465,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%;
@@ -1514,7 +1544,7 @@ select.ui.dropdown {
       Floating
   ---------------*/
 
-  .ui.floating.dropdown .menu {
+  .ui.floating.dropdown > .menu {
     left: 0;
     right: auto;
     box-shadow: @floatingMenuBoxShadow !important;
@@ -1542,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;
@@ -1557,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;
@@ -1578,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;
@@ -1593,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;
@@ -1609,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;
@@ -1620,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;
@@ -1636,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;
@@ -1652,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;
@@ -1670,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;
   }
@@ -1680,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;
   }
@@ -1693,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;
@@ -1707,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;
@@ -1721,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;
@@ -1828,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 {
@@ -1933,19 +1965,20 @@ select.ui.dropdown {
     }
     .ui.dropdown .inverted.menu,
     .ui.inverted.dropdown .menu {
-      /* IE11 */
-      scrollbar-face-color: @thumbInvertedBackgroundHex;
-      scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-      scrollbar-track-color: @trackInvertedBackgroundHex;
-      scrollbar-arrow-color: @trackInvertedBackgroundHex;
-
+      & 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

@@ -128,9 +128,7 @@ $.fn.embed = function(parameters) {
 
         createPlaceholder: function(placeholder) {
           var
-            icon  = module.get.icon(),
-            url   = module.get.url(),
-            embed = module.generate.embed(url)
+            icon  = module.get.icon()
           ;
           placeholder = placeholder || module.get.placeholder();
           $module.html( templates.placeholder(placeholder, icon) );
@@ -509,7 +507,7 @@ $.fn.embed = function(parameters) {
             response
           ;
           passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
+          context         = context         || element;
           if(typeof query == 'string' && object !== undefined) {
             query    = query.split(/[\. ]/);
             maxDepth = query.length - 1;
@@ -671,26 +669,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;
     }

package/src/definitions/modules/embed.less

@@ -85,7 +85,7 @@
   height: 100%;
   z-index: 2;
 }
-.ui.embed > i.icon:after {
+.ui.embed > i.icon::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -97,7 +97,7 @@
   opacity: @placeholderBackgroundOpacity;
   transition: @placeholderBackgroundTransition;
 }
-.ui.embed > i.icon:before {
+.ui.embed > i.icon::before {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -118,11 +118,11 @@
      Hover
 ---------------*/
 
-.ui.embed i.icon:hover:after {
+.ui.embed i.icon:hover::after {
   background: @hoverPlaceholderBackground;
   opacity: @hoverPlaceholderBackgroundOpacity;
 }
-.ui.embed i.icon:hover:before {
+.ui.embed i.icon:hover::before {
   color: @hoverIconColor;
 }