Fix inverted popup headers, working through bugs with multiple popups

server/documents/index.html.eco

@@ -16,19 +16,28 @@ type   : 'Semantic'
     <div class="column">
       <div class="introduction">
         <h1 class="ui inverted header">Semantic UI
-          <a class="ui black label" href="https://github.com/semantic-org/Semantic-UI/blob/master/RELEASE%20NOTES.md">
+          <a class="ui black label" href="https://github.com/semantic-org/Semantic-UI/blob/css/RELEASE%20NOTES.md">
             1.0.0 ALPHA
           </a>
         </h1>
         <h2 class="ui inverted header">UI is the vocabulary of the web.</h2>
         <div class="ui huge inverted buttons">
-          <a class="ui basic teal inverted view-ui button">UI Library</a>
-          <a class="ui disabled basic red inverted button"> Themes</a>
-          <a class="ui disabled basic green inverted button">Layouts</a>
-          <a class="ui basic inverted blue button" href="build/semantic.zip"><i class="awesome download cloud icon"></i> Download</a>
+          <a class="ui basic teal inverted view-ui button"><i class="list layout icon"></i>UI Library</a>
+          <a class="ui basic red inverted button" data-title="Coming Soon 1">
+            <i class="tint icon"></i>
+            Themes
+          </a>
+          <a class="ui basic green inverted button" data-title="Coming Soon 2">
+            <i class="browser icon"></i>
+            Layouts
+          </a>
         </div>
+        <div class="ui hidden divider"></div>
+        <a class="ui huge basic inverted teal button" href="build/semantic.zip">
+          <i class="awesome download cloud icon"></i> Customize &amp; Download
+        </a>
       </div>
-      <div class="inverted advertisement">
+      <!--div class="inverted advertisement">
         <% unless 'development' in @getEnvironments(): %>
         <div id="carbonads-container">
           <div class="carbonad">
@@ -37,7 +46,7 @@ type   : 'Semantic'
           </div>
         </div>
         <% end %>
-      </div>
+      </div !-->
     </div>
   </div>
 </div>

server/files/javascript/semantic.js

@@ -721,6 +721,9 @@ semantic.ready = function() {
     .visibility('bottom passed', function(){
       $('.main.menu').addClass('filled');
     })
+    .find('.button')
+      .popup({
+      })
   ;
 
   $(window)

src/definitions/elements/button.less

@@ -1159,11 +1159,13 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
+
+/* Inverted */
 .ui.inverted.black.buttons .button,
 .ui.inverted.black.button {
   background-color: transparent;
   box-shadow: 0px 0px 0px 2px @lightBlack inset !important;
-  color: @lightBlack;
+  color: #FFFFFF;
 }
 .ui.inverted.black.buttons .button:hover,
 .ui.inverted.black.button:hover {
@@ -1225,7 +1227,7 @@
 .ui.inverted.blue.button {
   background-color: transparent;
   box-shadow: 0px 0px 0px 2px @lightBlue inset !important;
-  color: @lightBlue;
+  color: @white;
 }
 .ui.inverted.blue.buttons .button:hover,
 .ui.inverted.blue.button:hover {
@@ -1284,7 +1286,7 @@
 .ui.inverted.green.button {
   background-color: transparent;
   box-shadow: 0px 0px 0px 2px @lightGreen inset !important;
-  color: @lightGreen;
+  color: @white;
 }
 .ui.inverted.green.buttons .button:hover,
 .ui.inverted.green.button:hover {
@@ -1342,7 +1344,7 @@
 .ui.inverted.orange.button {
   background-color: transparent;
   box-shadow: 0px 0px 0px 2px @lightOrange inset !important;
-  color: @lightOrange;
+  color: @white;
 }
 .ui.inverted.orange.buttons .button:hover,
 .ui.inverted.orange.button:hover {
@@ -1400,7 +1402,7 @@
 .ui.inverted.pink.button {
   background-color: transparent;
   box-shadow: 0px 0px 0px 2px @lightPink inset !important;
-  color: @lightPink;
+  color: @white;
 }
 .ui.inverted.pink.buttons .button:hover,
 .ui.inverted.pink.button:hover {
@@ -1458,7 +1460,7 @@
 .ui.inverted.purple.button {
   background-color: transparent;
   box-shadow: 0px 0px 0px 2px @lightPurple inset !important;
-  color: @lightPurple;
+  color: @white;
 }
 .ui.inverted.purple.buttons .button:hover,
 .ui.inverted.purple.button:hover {
@@ -1516,7 +1518,7 @@
 .ui.inverted.red.button {
   background-color: transparent;
   box-shadow: 0px 0px 0px 2px @lightRed inset !important;
-  color: @lightRed;
+  color: @white;
 }
 .ui.inverted.red.buttons .button:hover,
 .ui.inverted.red.button:hover {
@@ -1575,7 +1577,7 @@
 .ui.inverted.teal.button {
   background-color: transparent;
   box-shadow: 0px 0px 0px 2px @lightTeal inset !important;
-  color: @lightTeal;
+  color: @white;
 }
 .ui.inverted.teal.buttons .button:hover,
 .ui.inverted.teal.button:hover {
@@ -1634,7 +1636,7 @@
 .ui.inverted.yellow.button {
   background-color: transparent;
   box-shadow: 0px 0px 0px 2px @lightYellow inset !important;
-  color: @lightYellow;
+  color: @white;
 }
 .ui.inverted.yellow.buttons .button:hover,
 .ui.inverted.yellow.button:hover {

src/definitions/modules/popup.js

@@ -50,18 +50,19 @@ $.fn.popup = function(parameters) {
           : $module,
 
         $window         = $(window),
+        $body           = $('body'),
 
         $popup          = (settings.popup)
           ? $(settings.popup)
           : (settings.inline)
             ? $target.next(settings.selector.popup)
-            : $window.children(settings.selector.popup).last(),
+            : $context.find(settings.selector.popup).last(),
 
         $offsetParent   = (settings.popup)
           ? $popup.offsetParent()
           : (settings.inline)
             ? $target.offsetParent()
-            : $window,
+            : $body,
 
         searchDepth     = 0,
 
@@ -119,7 +120,7 @@ $.fn.popup = function(parameters) {
             $offsetParent = $target.offsetParent();
           }
           else {
-            $popup = $window.children(selector.popup).last();
+            $popup = $context.find(selector.popup).last();
           }
         },
 
@@ -282,7 +283,7 @@ $.fn.popup = function(parameters) {
             return ( $popup.size() !== 0 );
           }
           else {
-            return ( $popup.parent($context).size() );
+            return ( $popup.closest($context).size() );
           }
         },
 
@@ -308,8 +309,8 @@ $.fn.popup = function(parameters) {
           conditions: function() {
             if(module.cache && module.cache.title) {
               $module.attr('title', module.cache.title);
+              module.verbose('Restoring original attributes', module.cache.title);
             }
-            module.verbose('Restoring original attributes', module.cache.title);
             return true;
           }
         },
@@ -839,10 +840,11 @@ $.fn.popup.settings = {
   namespace      : 'popup',
 
   onCreate       : function(){},
+  onRemove       : function(){},
   onShow         : function(){},
   onHide         : function(){},
 
-  variation      : false,
+  variation      : 'inverted',
   content        : false,
   html           : false,
   title          : false,
@@ -914,4 +916,12 @@ $.fn.popup.settings = {
 
 };
 
+// Adds easing
+$.extend( $.easing, {
+  easeOutQuad: function (x, t, b, c, d) {
+    return -c *(t/=d)*(t-2) + b;
+  }
+});
+
+
 })( jQuery, window , document );

src/definitions/modules/popup.less

@@ -42,13 +42,16 @@
   box-shadow: @boxShadow;
 }
 .ui.popup .header {
-  padding: 0em 0em @headerDistance;
+  padding: 0em;
 
   font-family: @headerFont;
   font-size: @headerFontSize;
   line-height: @headerLineHeight;
   font-weight: bold;
 }
+.ui.popup .header + .content {
+  padding-top: @headerDistance;
+}
 
 .ui.popup:before {
   position: absolute;

src/themes/packages/default/modules/popup.variables

@@ -73,7 +73,7 @@
 @invertedBorder: none;
 @invertedBoxShadow: none;
 
-@invertedHeaderBackground: rgba(0, 0, 0, 0.2);
+@invertedHeaderBackground: none;
 @invertedHeaderColor: @white;
 @invertedArrowColor: @black;