fomantic-ui 2.9.0-beta.3 → 2.9.0-beta.301

package/dist/components/popup.css

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI 2.9.0-beta.3 - Popup
+ * # Fomantic-UI 2.9.0-beta.301+42e68bc - Popup
  * http://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -38,7 +38,7 @@
 }
 .ui.popup > .header {
   padding: 0;
-  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1.14285714em;
   line-height: 1.2;
   font-weight: bold;
@@ -46,7 +46,7 @@
 .ui.popup > .header + .content {
   padding-top: 0.5em;
 }
-.ui.popup:before {
+.ui.popup::before {
   position: absolute;
   content: '';
   width: 0.71428571em;
@@ -76,7 +76,7 @@
 }
 
 /* Arrow */
-[data-tooltip]:before {
+[data-tooltip]::before {
   pointer-events: none;
   position: absolute;
   content: '';
@@ -92,7 +92,7 @@
 }
 
 /* Popup */
-[data-tooltip]:after {
+[data-tooltip]::after {
   pointer-events: none;
   content: attr(data-tooltip);
   position: absolute;
@@ -116,7 +116,7 @@
 }
 
 /* Default Position (Top Center) */
-[data-tooltip]:not([data-position]):before {
+[data-tooltip]:not([data-position])::before {
   top: auto;
   right: auto;
   bottom: 100%;
@@ -125,7 +125,7 @@
   margin-left: -0.07142857rem;
   margin-bottom: 0.14285714rem;
 }
-[data-tooltip]:not([data-position]):after {
+[data-tooltip]:not([data-position])::after {
   left: 50%;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
@@ -134,8 +134,8 @@
 }
 
 /* Animation */
-[data-tooltip]:before,
-[data-tooltip]:after {
+[data-tooltip]::before,
+[data-tooltip]::after {
   pointer-events: none;
   visibility: hidden;
   opacity: 0;
@@ -144,76 +144,76 @@
   transition: transform 0.1s ease, opacity 0.1s ease;
   transition: transform 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease;
 }
-[data-tooltip]:before {
+[data-tooltip]::before {
   -webkit-transform: rotate(45deg) scale(0) !important;
           transform: rotate(45deg) scale(0) !important;
   -webkit-transform-origin: center top;
           transform-origin: center top;
 }
-[data-tooltip]:after {
+[data-tooltip]::after {
   -webkit-transform-origin: center bottom;
           transform-origin: center bottom;
 }
-[data-tooltip]:hover:before,
-[data-tooltip]:hover:after {
+[data-tooltip]:hover::before,
+[data-tooltip]:hover::after {
   visibility: visible;
   pointer-events: auto;
   opacity: 1;
 }
-[data-tooltip]:hover:before {
+[data-tooltip]:hover::before {
   -webkit-transform: rotate(45deg) scale(1) !important;
           transform: rotate(45deg) scale(1) !important;
 }
 
 /* Animation Position */
-[data-tooltip]:after,
-[data-tooltip][data-position="top center"]:after,
-[data-tooltip][data-position="bottom center"]:after {
+[data-tooltip]::after,
+[data-tooltip][data-position="top center"]::after,
+[data-tooltip][data-position="bottom center"]::after {
   -webkit-transform: translateX(-50%) scale(0) !important;
           transform: translateX(-50%) scale(0) !important;
 }
-[data-tooltip]:hover:after,
-[data-tooltip][data-position="bottom center"]:hover:after {
+[data-tooltip]:hover::after,
+[data-tooltip][data-position="bottom center"]:hover::after {
   -webkit-transform: translateX(-50%) scale(1) !important;
           transform: translateX(-50%) scale(1) !important;
 }
-[data-tooltip][data-position="left center"]:after,
-[data-tooltip][data-position="right center"]:after {
+[data-tooltip][data-position="left center"]::after,
+[data-tooltip][data-position="right center"]::after {
   -webkit-transform: translateY(-50%) scale(0) !important;
           transform: translateY(-50%) scale(0) !important;
 }
-[data-tooltip][data-position="left center"]:hover:after,
-[data-tooltip][data-position="right center"]:hover:after {
+[data-tooltip][data-position="left center"]:hover::after,
+[data-tooltip][data-position="right center"]:hover::after {
   -webkit-transform: translateY(-50%) scale(1) !important;
           transform: translateY(-50%) scale(1) !important;
   -moz-transform: translateY(-50%) scale(1.0001) !important;
 }
-[data-tooltip][data-position="top left"]:after,
-[data-tooltip][data-position="top right"]:after,
-[data-tooltip][data-position="bottom left"]:after,
-[data-tooltip][data-position="bottom right"]:after {
+[data-tooltip][data-position="top left"]::after,
+[data-tooltip][data-position="top right"]::after,
+[data-tooltip][data-position="bottom left"]::after,
+[data-tooltip][data-position="bottom right"]::after {
   -webkit-transform: scale(0) !important;
           transform: scale(0) !important;
 }
-[data-tooltip][data-position="top left"]:hover:after,
-[data-tooltip][data-position="top right"]:hover:after,
-[data-tooltip][data-position="bottom left"]:hover:after,
-[data-tooltip][data-position="bottom right"]:hover:after {
+[data-tooltip][data-position="top left"]:hover::after,
+[data-tooltip][data-position="top right"]:hover::after,
+[data-tooltip][data-position="bottom left"]:hover::after,
+[data-tooltip][data-position="bottom right"]:hover::after {
   -webkit-transform: scale(1) !important;
           transform: scale(1) !important;
 }
-[data-tooltip][data-variation~="fixed"]:after {
+[data-tooltip][data-variation~="fixed"]::after {
   white-space: normal;
   width: 250px;
 }
-[data-tooltip][data-variation*="wide fixed"]:after {
+[data-tooltip][data-variation*="wide fixed"]::after {
   width: 350px;
 }
-[data-tooltip][data-variation*="very wide fixed"]:after {
+[data-tooltip][data-variation*="very wide fixed"]::after {
   width: 550px;
 }
 @media only screen and (max-width: 767.98px) {
-  [data-tooltip][data-variation~="fixed"]:after {
+  [data-tooltip][data-variation~="fixed"]::after {
     width: 250px;
   }
 }
@@ -224,39 +224,35 @@
 
 
 /* Arrow */
-[data-tooltip][data-inverted]:before {
+[data-tooltip][data-inverted]::before {
   -webkit-box-shadow: none !important;
           box-shadow: none !important;
 }
 
 /* Arrow Position */
-[data-tooltip][data-inverted]:before {
+[data-tooltip][data-inverted]::before {
   background: #1B1C1D;
 }
 
 /* Popup  */
-[data-tooltip][data-inverted]:after {
+[data-tooltip][data-inverted]::after {
   background: #1B1C1D;
   color: #FFFFFF;
   border: none;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-[data-tooltip][data-inverted]:after .header {
-  background: none;
-  color: #FFFFFF;
-}
 
 /*--------------
         Position
     ---------------*/
 
-[data-position~="top"][data-tooltip]:before {
+[data-position~="top"][data-tooltip]::before {
   background: #FFFFFF;
 }
 
 /* Top Center */
-[data-position="top center"][data-tooltip]:after {
+[data-position="top center"][data-tooltip]::after {
   top: auto;
   right: auto;
   left: 50%;
@@ -265,7 +261,7 @@
           transform: translateX(-50%);
   margin-bottom: 0.5em;
 }
-[data-position="top center"][data-tooltip]:before {
+[data-position="top center"][data-tooltip]::before {
   top: auto;
   right: auto;
   bottom: 100%;
@@ -276,14 +272,14 @@
 }
 
 /* Top Left */
-[data-position="top left"][data-tooltip]:after {
+[data-position="top left"][data-tooltip]::after {
   top: auto;
   right: auto;
   left: 0;
   bottom: 100%;
   margin-bottom: 0.5em;
 }
-[data-position="top left"][data-tooltip]:before {
+[data-position="top left"][data-tooltip]::before {
   top: auto;
   right: auto;
   bottom: 100%;
@@ -293,14 +289,14 @@
 }
 
 /* Top Right */
-[data-position="top right"][data-tooltip]:after {
+[data-position="top right"][data-tooltip]::after {
   top: auto;
   left: auto;
   right: 0;
   bottom: 100%;
   margin-bottom: 0.5em;
 }
-[data-position="top right"][data-tooltip]:before {
+[data-position="top right"][data-tooltip]::before {
   top: auto;
   left: auto;
   bottom: 100%;
@@ -308,14 +304,14 @@
   margin-left: -0.07142857rem;
   margin-bottom: 0.14285714rem;
 }
-[data-position~="bottom"][data-tooltip]:before {
+[data-position~="bottom"][data-tooltip]::before {
   background: #FFFFFF;
   -webkit-box-shadow: -1px -1px 0 0 #bababc;
           box-shadow: -1px -1px 0 0 #bababc;
 }
 
 /* Bottom Center */
-[data-position="bottom center"][data-tooltip]:after {
+[data-position="bottom center"][data-tooltip]::after {
   bottom: auto;
   right: auto;
   left: 50%;
@@ -324,24 +320,22 @@
           transform: translateX(-50%);
   margin-top: 0.5em;
 }
-[data-position="bottom center"][data-tooltip]:before {
+[data-position="bottom center"][data-tooltip]::before {
   bottom: auto;
   right: auto;
   top: 100%;
   left: 50%;
   margin-left: -0.07142857rem;
   margin-top: 0.30714286em;
-  -webkit-transform-origin: center top;
-          transform-origin: center top;
 }
 
 /* Bottom Left */
-[data-position="bottom left"][data-tooltip]:after {
+[data-position="bottom left"][data-tooltip]::after {
   left: 0;
   top: 100%;
   margin-top: 0.5em;
 }
-[data-position="bottom left"][data-tooltip]:before {
+[data-position="bottom left"][data-tooltip]::before {
   bottom: auto;
   right: auto;
   top: 100%;
@@ -351,12 +345,12 @@
 }
 
 /* Bottom Right */
-[data-position="bottom right"][data-tooltip]:after {
+[data-position="bottom right"][data-tooltip]::after {
   right: 0;
   top: 100%;
   margin-top: 0.5em;
 }
-[data-position="bottom right"][data-tooltip]:before {
+[data-position="bottom right"][data-tooltip]::before {
   bottom: auto;
   left: auto;
   top: 100%;
@@ -366,14 +360,14 @@
 }
 
 /* Left Center */
-[data-position="left center"][data-tooltip]:after {
+[data-position="left center"][data-tooltip]::after {
   right: 100%;
   top: 50%;
   margin-right: 0.5em;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
-[data-position="left center"][data-tooltip]:before {
+[data-position="left center"][data-tooltip]::before {
   right: 100%;
   top: 50%;
   margin-top: -0.14285714rem;
@@ -384,14 +378,14 @@
 }
 
 /* Right Center */
-[data-position="right center"][data-tooltip]:after {
+[data-position="right center"][data-tooltip]::after {
   left: 100%;
   top: 50%;
   margin-left: 0.5em;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
-[data-position="right center"][data-tooltip]:before {
+[data-position="right center"][data-tooltip]::before {
   left: 100%;
   top: 50%;
   margin-top: -0.07142857rem;
@@ -402,45 +396,49 @@
 }
 
 /* Inverted Arrow Color */
-[data-inverted][data-position~="bottom"][data-tooltip]:before {
+[data-inverted][data-position~="bottom"][data-tooltip]::before {
   background: #1B1C1D;
   -webkit-box-shadow: -1px -1px 0 0 #bababc;
           box-shadow: -1px -1px 0 0 #bababc;
 }
-[data-inverted][data-position="left center"][data-tooltip]:before {
+[data-inverted][data-position="left center"][data-tooltip]::before {
   background: #1B1C1D;
   -webkit-box-shadow: 1px -1px 0 0 #bababc;
           box-shadow: 1px -1px 0 0 #bababc;
 }
-[data-inverted][data-position="right center"][data-tooltip]:before {
+[data-inverted][data-position="right center"][data-tooltip]::before {
   background: #1B1C1D;
   -webkit-box-shadow: -1px 1px 0 0 #bababc;
           box-shadow: -1px 1px 0 0 #bababc;
 }
-[data-inverted][data-position~="top"][data-tooltip]:before {
+[data-inverted][data-position~="top"][data-tooltip]::before {
   background: #1B1C1D;
 }
-[data-position~="bottom"][data-tooltip]:before {
+[data-position~="bottom"][data-tooltip]::before {
   -webkit-transform-origin: center bottom;
           transform-origin: center bottom;
 }
-[data-position~="bottom"][data-tooltip]:after {
+[data-position~="bottom"][data-tooltip]::after {
+  -webkit-transform-origin: center top;
+          transform-origin: center top;
+}
+[data-position="bottom center"][data-tooltip]::before {
   -webkit-transform-origin: center top;
           transform-origin: center top;
 }
-[data-position="left center"][data-tooltip]:before {
+[data-position="left center"][data-tooltip]::before {
   -webkit-transform-origin: top center;
           transform-origin: top center;
 }
-[data-position="left center"][data-tooltip]:after {
+[data-position="left center"][data-tooltip]::after {
   -webkit-transform-origin: right center;
           transform-origin: right center;
 }
-[data-position="right center"][data-tooltip]:before {
+[data-position="right center"][data-tooltip]::before {
   -webkit-transform-origin: right center;
           transform-origin: right center;
 }
-[data-position="right center"][data-tooltip]:after {
+[data-position="right center"][data-tooltip]::after {
   -webkit-transform-origin: left center;
           transform-origin: left center;
 }
@@ -449,7 +447,7 @@
         Basic
     ---------------*/
 
-[data-tooltip][data-variation~="basic"]:before {
+[data-tooltip][data-variation~="basic"]::before {
   display: none;
 }
 
@@ -514,7 +512,7 @@
 
 /*--- Below ---*/
 
-.ui.bottom.center.popup:before {
+.ui.bottom.center.popup::before {
   margin-left: -0.30714286em;
   top: -0.30714286em;
   left: 50%;
@@ -527,7 +525,7 @@
   margin-left: 0;
 }
 /*rtl:rename*/
-.ui.bottom.left.popup:before {
+.ui.bottom.left.popup::before {
   top: -0.30714286em;
   left: 1em;
   right: auto;
@@ -540,7 +538,7 @@
   margin-right: 0;
 }
 /*rtl:rename*/
-.ui.bottom.right.popup:before {
+.ui.bottom.right.popup::before {
   top: -0.30714286em;
   right: 1em;
   bottom: auto;
@@ -552,7 +550,7 @@
 
 /*--- Above ---*/
 
-.ui.top.center.popup:before {
+.ui.top.center.popup::before {
   top: auto;
   right: auto;
   bottom: -0.30714286em;
@@ -563,7 +561,7 @@
   margin-left: 0;
 }
 /*rtl:rename*/
-.ui.top.left.popup:before {
+.ui.top.left.popup::before {
   bottom: -0.30714286em;
   left: 1em;
   top: auto;
@@ -574,7 +572,7 @@
   margin-right: 0;
 }
 /*rtl:rename*/
-.ui.top.right.popup:before {
+.ui.top.right.popup::before {
   bottom: -0.30714286em;
   right: 1em;
   top: auto;
@@ -585,7 +583,7 @@
 /*--- Left Center ---*/
 
 /*rtl:rename*/
-.ui.left.center.popup:before {
+.ui.left.center.popup::before {
   top: 50%;
   right: -0.30714286em;
   bottom: auto;
@@ -598,7 +596,7 @@
 /*--- Right Center  ---*/
 
 /*rtl:rename*/
-.ui.right.center.popup:before {
+.ui.right.center.popup::before {
   top: 50%;
   left: -0.30714286em;
   bottom: auto;
@@ -607,28 +605,28 @@
   -webkit-box-shadow: -1px 1px 0 0 #bababc;
           box-shadow: -1px 1px 0 0 #bababc;
 }
-.ui.right.center.popup:before,
-.ui.left.center.popup:before {
+.ui.right.center.popup::before,
+.ui.left.center.popup::before {
   background: #FFFFFF;
 }
 
 /* Arrow Color By Location */
-.ui.bottom.popup:before {
+.ui.bottom.popup::before {
   background: #FFFFFF;
 }
-.ui.top.popup:before {
+.ui.top.popup::before {
   background: #FFFFFF;
 }
 
 /* Inverted Arrow Color */
-.ui.inverted.bottom.popup:before {
+.ui.inverted.bottom.popup::before {
   background: #1B1C1D;
 }
-.ui.inverted.right.center.popup:before,
-.ui.inverted.left.center.popup:before {
+.ui.inverted.right.center.popup::before,
+.ui.inverted.left.center.popup::before {
   background: #1B1C1D;
 }
-.ui.inverted.top.popup:before {
+.ui.inverted.top.popup::before {
   background: #1B1C1D;
 }
 
@@ -675,7 +673,7 @@
        Basic
   ---------------*/
 
-.ui.basic.popup:before {
+.ui.basic.popup::before {
   display: none;
 }
 .ui.fixed.popup {
@@ -735,7 +733,7 @@
   background-color: none;
   color: #FFFFFF;
 }
-.ui.inverted.popup:before {
+.ui.inverted.popup::before {
   background-color: #1B1C1D;
   -webkit-box-shadow: none !important;
           box-shadow: none !important;
@@ -759,50 +757,50 @@
 .ui.mini.popup {
   font-size: 0.78571429rem;
 }
-[data-tooltip][data-variation~="mini"]:before,
-[data-tooltip][data-variation~="mini"]:after {
+[data-tooltip][data-variation~="mini"]::before,
+[data-tooltip][data-variation~="mini"]::after {
   font-size: 0.78571429rem;
 }
 .ui.tiny.popup {
   font-size: 0.85714286rem;
 }
-[data-tooltip][data-variation~="tiny"]:before,
-[data-tooltip][data-variation~="tiny"]:after {
+[data-tooltip][data-variation~="tiny"]::before,
+[data-tooltip][data-variation~="tiny"]::after {
   font-size: 0.85714286rem;
 }
 .ui.small.popup {
   font-size: 0.92857143rem;
 }
-[data-tooltip][data-variation~="small"]:before,
-[data-tooltip][data-variation~="small"]:after {
+[data-tooltip][data-variation~="small"]::before,
+[data-tooltip][data-variation~="small"]::after {
   font-size: 0.92857143rem;
 }
 .ui.large.popup {
   font-size: 1.14285714rem;
 }
-[data-tooltip][data-variation~="large"]:before,
-[data-tooltip][data-variation~="large"]:after {
+[data-tooltip][data-variation~="large"]::before,
+[data-tooltip][data-variation~="large"]::after {
   font-size: 1.14285714rem;
 }
 .ui.big.popup {
   font-size: 1.28571429rem;
 }
-[data-tooltip][data-variation~="big"]:before,
-[data-tooltip][data-variation~="big"]:after {
+[data-tooltip][data-variation~="big"]::before,
+[data-tooltip][data-variation~="big"]::after {
   font-size: 1.28571429rem;
 }
 .ui.huge.popup {
   font-size: 1.42857143rem;
 }
-[data-tooltip][data-variation~="huge"]:before,
-[data-tooltip][data-variation~="huge"]:after {
+[data-tooltip][data-variation~="huge"]::before,
+[data-tooltip][data-variation~="huge"]::after {
   font-size: 1.42857143rem;
 }
 .ui.massive.popup {
   font-size: 1.71428571rem;
 }
-[data-tooltip][data-variation~="massive"]:before,
-[data-tooltip][data-variation~="massive"]:after {
+[data-tooltip][data-variation~="massive"]::before,
+[data-tooltip][data-variation~="massive"]::after {
   font-size: 1.71428571rem;
 }
 

package/dist/components/popup.js

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI 2.9.0-beta.3 - Popup
+ * # Fomantic-UI 2.9.0-beta.301+42e68bc - Popup
  * http://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -62,11 +62,11 @@ $.fn.popup = function(parameters) {
         moduleNamespace    = 'module-' + namespace,
 
         $module            = $(this),
-        $context           = $(settings.context),
-        $scrollContext     = $(settings.scrollContext),
-        $boundary          = $(settings.boundary),
+        $context           = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
+        $scrollContext     = [window,document].indexOf(settings.scrollContext) < 0 ? $(document).find(settings.scrollContext) : $(settings.scrollContext),
+        $boundary          = [window,document].indexOf(settings.boundary) < 0 ? $(document).find(settings.boundary) : $(settings.boundary),
         $target            = (settings.target)
-          ? $(settings.target)
+          ? ([window,document].indexOf(settings.target) < 0 ? $(document).find(settings.target) : $(settings.target))
           : $module,
 
         $popup,
@@ -121,8 +121,8 @@ $.fn.popup = function(parameters) {
         },
 
         refresh: function() {
-          if(settings.popup) {
-            $popup = $(settings.popup).eq(0);
+          if(settings.popup && typeof settings.popup === 'string') {
+            $popup = $(document).find(settings.popup).eq(0);
           }
           else {
             if(settings.inline) {
@@ -286,8 +286,8 @@ $.fn.popup = function(parameters) {
             }
             settings.onCreate.call($popup, element);
           }
-          else if(settings.popup) {
-            $(settings.popup).data(metadata.activator, $module);
+          else if(settings.popup && typeof settings.popup === 'string') {
+            $(document).find(settings.popup).data(metadata.activator, $module);
             module.verbose('Used popup specified in settings');
             module.refresh();
             if(settings.hoverable) {
@@ -309,7 +309,7 @@ $.fn.popup = function(parameters) {
         },
 
         createID: function() {
-          id = (Math.random().toString(16) + '000000000').substr(2, 8);
+          id = (Math.random().toString(16) + '000000000').slice(2, 10);
           elementNamespace = '.' + id;
           module.verbose('Creating unique id for element', id);
         },
@@ -368,7 +368,7 @@ $.fn.popup = function(parameters) {
         },
 
         hideAll: function() {
-          $(selector.popup)
+          $(document).find(selector.popup)
             .filter('.' + className.popupVisible)
             .each(function() {
               $(this)