From 5631dc585fa030b88da953ffca7390736c054b46 Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 13 Aug 2014 20:18:02 -0400 Subject: [PATCH] Fix inverted popup headers, working through bugs with multiple popups --- server/documents/index.html.eco | 23 +++++++++++++------ server/files/javascript/semantic.js | 3 +++ src/definitions/elements/button.less | 20 ++++++++-------- src/definitions/modules/popup.js | 22 +++++++++++++----- src/definitions/modules/popup.less | 5 +++- .../packages/default/modules/popup.variables | 2 +- 6 files changed, 51 insertions(+), 24 deletions(-) diff --git a/server/documents/index.html.eco b/server/documents/index.html.eco index 7225092e0..50f87f8db 100755 --- a/server/documents/index.html.eco +++ b/server/documents/index.html.eco @@ -16,19 +16,28 @@ type : 'Semantic'

Semantic UI - + 1.0.0 ALPHA

UI is the vocabulary of the web.

- UI Library - Themes - Layouts - Download + UI Library + + + Themes + + + + Layouts +
+ + + Customize & Download +
-
diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js index 50abf1756..a8855a91b 100755 --- a/server/files/javascript/semantic.js +++ b/server/files/javascript/semantic.js @@ -721,6 +721,9 @@ semantic.ready = function() { .visibility('bottom passed', function(){ $('.main.menu').addClass('filled'); }) + .find('.button') + .popup({ + }) ; $(window) diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index 44878414b..f805c4ce3 100755 --- a/src/definitions/elements/button.less +++ b/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 { diff --git a/src/definitions/modules/popup.js b/src/definitions/modules/popup.js index 81143bcb7..095af202f 100755 --- a/src/definitions/modules/popup.js +++ b/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 ); diff --git a/src/definitions/modules/popup.less b/src/definitions/modules/popup.less index 13b8aa4ad..9e1b8022b 100755 --- a/src/definitions/modules/popup.less +++ b/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; diff --git a/src/themes/packages/default/modules/popup.variables b/src/themes/packages/default/modules/popup.variables index 4629facd5..7a6c5cea4 100644 --- a/src/themes/packages/default/modules/popup.variables +++ b/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;