diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index ef443cfa1..b100c9f73 100755 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -1,5 +1,22 @@ ## RELEASE NOTES +### Version 2.3.0 - Feb 19, 2018 + +**Major Enhancements** +- **Search** - Category search can now work with local search by adding a `category` property to any result and specifying `type: 'category'` +- **Search** - Category results now has `exact` matching +- **Modal** - Modal has been rewritten to use `flexbox`. No need to call `refresh()` to recalculate vertical centering. +- **Modal** - Modals now have a setting `centered` which can be used to disable vertical centering. This can be useful for modals with content that changes dynamically to prevent content from jumping in position. + +**Enhancements** +- **Search** - Category results will now responsively adjust `title` row if titles are long instead of forcing a title width +- **Dimmer** - Dimmers now have centered content with a single wrapping `content` element. +- **Popup** - Popup will now align the center of the arrow (not the edge of the popup) when it would be reasonable (up to 2x arrow's offset from edge). [See this explanation](http://oi66.tinypic.com/2zr2ckk.jpg) +- **Popup** - Popup can now position elements correctly even when they have a different offset context than their activating element. Like in [this example](https://jsfiddle.net/g853mc03/) + +**Bugs** +- **Modal** - Modal `autofocus` setting now checks to see if currently focused element is in modal, avoiding issues where focus could be set in `onVisible` or `onShow` + ### Version 2.2.14 - Jan 29, 2018 **Critical Bugs** diff --git a/src/definitions/modules/dimmer.js b/src/definitions/modules/dimmer.js index 2feb915ec..900566711 100755 --- a/src/definitions/modules/dimmer.js +++ b/src/definitions/modules/dimmer.js @@ -238,6 +238,7 @@ $.fn.dimmer = function(parameters) { } $dimmer .transition({ + displayType : 'flex', animation : settings.transition + ' in', queue : false, duration : module.get.duration(), @@ -282,6 +283,7 @@ $.fn.dimmer = function(parameters) { module.verbose('Hiding dimmer with css'); $dimmer .transition({ + displayType : 'flex', animation : settings.transition + ' out', queue : false, duration : module.get.duration(), diff --git a/src/definitions/modules/dimmer.less b/src/definitions/modules/dimmer.less index f281e214b..300e3da67 100755 --- a/src/definitions/modules/dimmer.less +++ b/src/definitions/modules/dimmer.less @@ -36,6 +36,7 @@ text-align: @textAlign; vertical-align: @verticalAlign; + padding: @padding; background-color: @backgroundColor; opacity: @hiddenOpacity; @@ -45,6 +46,10 @@ animation-duration: @duration; transition: @transition; + flex-direction: column; + align-items: center; + justify-content: center; + user-select: none; will-change: opacity; z-index: @zIndex; @@ -52,14 +57,7 @@ /* Dimmer Content */ .ui.dimmer > .content { - width: 100%; - height: 100%; - display: @contentDisplay; user-select: text; -} -.ui.dimmer > .content > * { - display: @contentChildDisplay; - vertical-align: @verticalAlign; color: @textColor; } @@ -90,27 +88,42 @@ States *******************************/ +/* Animating */ .animating.dimmable:not(body), .dimmed.dimmable:not(body) { overflow: @overflow; } +/* Animating / Active / Visible */ .dimmed.dimmable > .ui.animating.dimmer, .dimmed.dimmable > .ui.visible.dimmer, .ui.active.dimmer { - display: block; + display: flex; opacity: @visibleOpacity; } +/* Disabled */ .ui.disabled.dimmer { width: 0 !important; height: 0 !important; } + /******************************* Variations *******************************/ +/*-------------- + Alignment +---------------*/ + +.ui[class*="top aligned"].dimmer { + justify-content: flex-start; +} +.ui[class*="bottom aligned"].dimmer { + justify-content: flex-end; +} + /*-------------- Page ---------------*/ diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js index 647ade706..55de770bc 100755 --- a/src/definitions/modules/modal.js +++ b/src/definitions/modules/modal.js @@ -108,6 +108,10 @@ $.fn.modal = function(parameters) { var defaultSettings = { debug : settings.debug, + variation : settings.centered + ? '' + : 'top aligned' + , dimmerName : 'modals' }, dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings) @@ -165,7 +169,6 @@ $.fn.modal = function(parameters) { module.cacheSizes(); module.set.screenHeight(); module.set.type(); - module.set.position(); }, refreshModals: function() { @@ -320,7 +323,6 @@ $.fn.modal = function(parameters) { module.showDimmer(); module.cacheSizes(); - module.set.position(); module.set.screenHeight(); module.set.type(); module.set.clickaway(); @@ -487,7 +489,13 @@ $.fn.modal = function(parameters) { save: { focus: function() { - $focusedElement = $(document.activeElement).blur(); + var + $activeElement = $(document.activeElement), + inCurrentModal = $activeElement.closest($module).length > 0 + ; + if(!inCurrentModal) { + $focusedElement = $(document.activeElement).blur(); + } } }, @@ -623,6 +631,10 @@ $.fn.modal = function(parameters) { dimmerName : 'modals', variation : false, closable : 'auto', + variation : settings.centered + ? '' + : 'top aligned' + , duration : { show : settings.duration, hide : settings.duration @@ -678,25 +690,6 @@ $.fn.modal = function(parameters) { module.set.scrolling(); } }, - position: function() { - module.verbose('Centering modal on page', module.cache); - if(module.can.fit()) { - $module - .css({ - top: '', - marginTop: module.cache.topOffset - }) - ; - } - else { - $module - .css({ - marginTop : '', - top : $document.scrollTop() - }) - ; - } - }, undetached: function() { $dimmable.addClass(className.undetached); } @@ -905,6 +898,8 @@ $.fn.modal.settings = { inverted : false, blurring : false, + centered : true, + dimmerSettings : { closable : false, useCSS : true diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less index 19a535e08..8d19cf0b5 100755 --- a/src/definitions/modules/modal.less +++ b/src/definitions/modules/modal.less @@ -24,11 +24,7 @@ .ui.modal { display: none; - position: fixed; z-index: @zIndex; - - top: 50%; - left: 50%; text-align: left; background: @background; @@ -337,14 +333,26 @@ Variations *******************************/ +/*-------------- + Top Aligned +---------------*/ + +/* Top Aligned Modal */ +.modals.dimmer[class*="top aligned"] .modal { + margin: @topAlignedMargin auto; +} + /*-------------- Scrolling ---------------*/ -/* A modal that cannot fit on the page */ +/* Scrolling Dimmer */ .scrolling.dimmable.dimmed { overflow: hidden; } +.scrolling.dimmable > .dimmer { + justify-content: flex-start; +} .scrolling.dimmable.dimmed > .dimmer { overflow: auto; -webkit-overflow-scrolling: touch; @@ -353,13 +361,10 @@ position: fixed; } .modals.dimmer .ui.scrolling.modal { - position: relative !important; - left: auto !important; - top: auto !important; margin: @scrollingMargin auto !important; } -/* undetached scrolling */ +/* Undetached Scrolling */ .scrolling.undetached.dimmable.dimmed { overflow: auto; -webkit-overflow-scrolling: touch; @@ -373,26 +378,12 @@ margin-top: @scrollingMargin !important; } -/* Coupling with Sidebar */ -.undetached.dimmable.dimmed > .pusher { - z-index: auto; -} - -@media only screen and (max-width : @largestTabletScreen) { - .modals.dimmer .ui.scrolling.modal { - margin-top: @mobileScrollingMargin !important; - margin-bottom: @mobileScrollingMargin !important; - } -} - /* Scrolling Content */ - .ui.modal .scrolling.content { max-height: @scrollingContentMaxHeight; overflow: auto; } - /*-------------- Full Screen ---------------*/ diff --git a/src/definitions/modules/popup.js b/src/definitions/modules/popup.js index f97fa1514..57f58755c 100644 --- a/src/definitions/modules/popup.js +++ b/src/definitions/modules/popup.js @@ -502,9 +502,10 @@ $.fn.popup = function(parameters) { }, calculations: function() { var - targetElement = $target[0], - isWindow = ($boundary[0] == window), - targetPosition = (settings.inline || (settings.popup && settings.movePopup)) + $popupOffsetParent = module.get.offsetParent($popup), + targetElement = $target[0], + isWindow = ($boundary[0] == window), + targetPosition = (settings.inline || (settings.popup && settings.movePopup)) ? $target.position() : $target.offset(), screenPosition = (isWindow) @@ -549,6 +550,17 @@ $.fn.popup = function(parameters) { } }; + // if popup offset context is not same as target, then adjust calculations + if($popupOffsetParent.get(0) !== $offsetParent.get(0)) { + var + popupOffset = $popupOffsetParent.offset() + ; + calculations.target.top -= popupOffset.top; + calculations.target.left -= popupOffset.left; + calculations.parent.width = $popupOffsetParent.outerWidth(); + calculations.parent.height = $popupOffsetParent.outerHeight(); + } + // add in container calcs if fluid if( settings.setFluidWidth && module.is.fluid() ) { calculations.container = { @@ -637,14 +649,14 @@ $.fn.popup = function(parameters) { var is2D = ($node.css('transform') === 'none'), isStatic = ($node.css('position') === 'static'), - isHTML = $node.is('html') + isBody = $node.is('body') ; - while(parentNode && !isHTML && isStatic && is2D) { + while(parentNode && !isBody && isStatic && is2D) { parentNode = parentNode.parentNode; $node = $(parentNode); is2D = ($node.css('transform') === 'none'); isStatic = ($node.css('position') === 'static'); - isHTML = $node.is('html'); + isBody = $node.is('body'); } } return ($node && $node.length > 0) @@ -753,6 +765,18 @@ $.fn.popup = function(parameters) { popup = calculations.popup; parent = calculations.parent; + if(module.should.centerArrow(calculations)) { + module.verbose('Adjusting offset to center arrow on small target element'); + if(position == 'top left' || position == 'bottom left') { + offset += (target.width / 2) + offset -= settings.arrowPixelsFromEdge; + } + if(position == 'top right' || position == 'bottom right') { + offset -= (target.width / 2) + offset += settings.arrowPixelsFromEdge; + } + } + if(target.width === 0 && target.height === 0 && !module.is.svg(target.element)) { module.debug('Popup target is hidden, no action taken'); return false; @@ -1046,6 +1070,12 @@ $.fn.popup = function(parameters) { } }, + should: { + centerArrow: function(calculations) { + return !module.is.basic() && calculations.target.width <= (settings.arrowPixelsFromEdge * 2); + } + }, + is: { offstage: function(distanceFromBoundary, position) { var @@ -1068,6 +1098,9 @@ $.fn.popup = function(parameters) { svg: function(element) { return module.supports.svg() && (element instanceof SVGGraphicsElement); }, + basic: function() { + return $module.hasClass(className.basic); + }, active: function() { return $module.hasClass(className.active); }, @@ -1380,8 +1413,11 @@ $.fn.popup.settings = { // specify position to appear even if it doesn't fit lastResort : false, + // number of pixels from edge of popup to pointing arrow center (used from centering) + arrowPixelsFromEdge: 20, + // delay used to prevent accidental refiring of animations due to user error - delay : { + delay : { show : 50, hide : 70 }, @@ -1425,6 +1461,7 @@ $.fn.popup.settings = { className : { active : 'active', + basic : 'basic', animating : 'animating', dropdown : 'dropdown', fluid : 'fluid', diff --git a/src/definitions/modules/search.js b/src/definitions/modules/search.js index 88a71929d..c06ab1b49 100644 --- a/src/definitions/modules/search.js +++ b/src/definitions/modules/search.js @@ -70,6 +70,7 @@ $.fn.search = function(parameters) { initialize: function() { module.verbose('Initializing module'); + module.get.settings(); module.determine.searchFields(); module.bind.events(); module.set.type(); @@ -402,6 +403,12 @@ $.fn.search = function(parameters) { }, get: { + settings: function() { + if($.isPlainObject(parameters) && parameters.searchFullText) { + settings.fullTextSearch = parameters.searchFullText; + module.error(settings.error.oldSearchSyntax, element); + } + }, inputEvent: function() { var prompt = $prompt[0], @@ -545,8 +552,14 @@ $.fn.search = function(parameters) { ; module.set.loading(); module.save.results(results); - module.debug('Returned local search results', results); - + module.debug('Returned full local search results', results); + if(settings.maxResults > 0) { + module.debug('Using specified max results', results); + results = results.slice(0, settings.maxResults); + } + if(settings.type == 'category') { + results = module.create.categoryResults(results); + } searchHTML = module.generateResults({ results: results }); @@ -574,6 +587,7 @@ $.fn.search = function(parameters) { object: function(searchTerm, source, searchFields) { var results = [], + exactResults = [], fuzzyResults = [], searchExp = searchTerm.toString().replace(regExp.escape, '\\$&'), matchRegExp = new RegExp(regExp.beginsWith + searchExp, 'i'), @@ -605,7 +619,6 @@ $.fn.search = function(parameters) { module.error(error.source); return []; } - // iterate through search fields looking for matches $.each(searchFields, function(index, field) { $.each(source, function(label, content) { @@ -617,17 +630,30 @@ $.fn.search = function(parameters) { // content starts with value (first in results) addResult(results, content); } - else if(settings.searchFullText && module.fuzzySearch(searchTerm, content[field]) ) { + else if(settings.fullTextSearch === 'exact' && module.exactSearch(searchTerm, content[field]) ) { + // content fuzzy matches (last in results) + addResult(exactResults, content); + } + else if(settings.fullTextSearch == true && module.fuzzySearch(searchTerm, content[field]) ) { // content fuzzy matches (last in results) addResult(fuzzyResults, content); } } }); }); - return $.merge(results, fuzzyResults); + $.merge(exactResults, fuzzyResults) + $.merge(results, exactResults); + return results; } }, - + exactSearch: function (query, term) { + query = query.toLowerCase(); + term = term.toLowerCase(); + if(term.indexOf(query) > -1) { + return true; + } + return false; + }, fuzzySearch: function(query, term) { var termLength = term.length, @@ -739,6 +765,27 @@ $.fn.search = function(parameters) { }, create: { + categoryResults: function(results) { + var + categoryResults = {} + ; + $.each(results, function(index, result) { + if(!result.category) { + return; + } + if(categoryResults[result.category] === undefined) { + module.verbose('Creating new category of results', result.category); + categoryResults[result.category] = { + name : result.category, + results : [result] + } + } + else { + categoryResults[result.category].results.push(result); + } + }); + return categoryResults; + }, id: function(resultIndex, categoryIndex) { var resultID = (resultIndex + 1), // not zero indexed @@ -776,7 +823,10 @@ $.fn.search = function(parameters) { $selectedResult = (categoryIndex !== undefined) ? $results .children().eq(categoryIndex) - .children(selector.result).eq(resultIndex) + .children(selector.results) + .first() + .children(selector.result) + .eq(resultIndex) : $results .children(selector.result).eq(resultIndex) ; @@ -1197,8 +1247,8 @@ $.fn.search.settings = { // field to display in standard results template displayField : '', - // whether to include fuzzy results in local search - searchFullText : true, + // search anywhere in value (set to 'exact' to require exact matches + fullTextSearch : 'exact', // whether to add events to prompt automatically automatic : true, @@ -1209,7 +1259,7 @@ $.fn.search.settings = { // delay before searching searchDelay : 200, - // maximum results returned from local + // maximum results returned from search maxResults : 7, // whether to store lookups in local cache @@ -1245,14 +1295,15 @@ $.fn.search.settings = { }, error : { - source : 'Cannot search. No source used, and Semantic API module was not included', - noResults : 'Your search returned no results', - logging : 'Error in debug logging, exiting.', - noEndpoint : 'No search endpoint was specified', - noTemplate : 'A valid template name was not specified.', - serverError : 'There was an issue querying the server.', - maxResults : 'Results must be an array to use maxResults setting', - method : 'The method you called is not defined.' + source : 'Cannot search. No source used, and Semantic API module was not included', + noResults : 'Your search returned no results', + logging : 'Error in debug logging, exiting.', + noEndpoint : 'No search endpoint was specified', + noTemplate : 'A valid template name was not specified.', + oldSearchSyntax : 'searchFullText setting has been renamed fullTextSearch for consistency, please adjust your settings.', + serverError : 'There was an issue querying the server.', + maxResults : 'Results must be an array to use maxResults setting', + method : 'The method you called is not defined.' }, metadata: { @@ -1354,6 +1405,7 @@ $.fn.search.settings = { } // each item inside category + html += '
'; $.each(category.results, function(index, result) { if(result[fields.url]) { html += ''; @@ -1383,6 +1435,7 @@ $.fn.search.settings = { ; html += ''; }); + html += '
'; html += '' + '' ; diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less index 4d28567d9..5a41e87bb 100755 --- a/src/definitions/modules/search.less +++ b/src/definitions/modules/search.less @@ -315,11 +315,16 @@ width: @categoryResultsWidth; } +.ui.category.search .results.animating, +.ui.category.search .results.visible { + display: table; +} + /* Category */ .ui.category.search > .results .category { + display: table-row; background: @categoryBackground; box-shadow: @categoryBoxShadow; - border-bottom: @categoryDivider; transition: @categoryTransition; } @@ -336,30 +341,32 @@ border-radius: 0em 0em @resultsBorderRadius 0em; } -/* Category Result */ -.ui.category.search > .results .category .result { - background: @categoryResultBackground; - margin-left: @categoryNameWidth; - border-left: @categoryResultLeftBorder; - border-bottom: @categoryResultDivider; - transition: @categoryResultTransition; - padding: @categoryResultPadding; -} -.ui.category.search > .results .category:last-child .result:last-child { - border-bottom: @categoryResultLastDivider; -} - /* Category Result Name */ .ui.category.search > .results .category > .name { + display: table-cell; + text-overflow: ellipsis; width: @categoryNameWidth; + white-space: @categoryNameWhitespace; background: @categoryNameBackground; font-family: @categoryNameFont; font-size: @categoryNameFontSize; - float: @categoryNameFontSize; - float: @categoryNameFloat; padding: @categoryNamePadding; font-weight: @categoryNameFontWeight; color: @categoryNameColor; + border-bottom: @categoryDivider; +} + +/* Category Result */ +.ui.category.search > .results .category .results { + display: table-cell; + background: @categoryResultBackground; + border-left: @categoryResultLeftBorder; + border-bottom: @categoryDivider; +} +.ui.category.search > .results .category .result { + border-bottom: @categoryResultDivider; + transition: @categoryResultTransition; + padding: @categoryResultPadding; } /******************************* diff --git a/src/themes/default/modules/dimmer.variables b/src/themes/default/modules/dimmer.variables index a4772ba10..81f6e861c 100644 --- a/src/themes/default/modules/dimmer.variables +++ b/src/themes/default/modules/dimmer.variables @@ -8,6 +8,7 @@ @backgroundColor: rgba(0, 0, 0 , 0.85); @lineHeight: 1; @perspective: 2000px; +@padding: 1em; @duration: 0.5s; @transition: @@ -29,10 +30,6 @@ /* Hidden (Default) */ @hiddenOpacity: 0; -/* Content */ -@contentDisplay: table; -@contentChildDisplay: table-cell; - /* Visible */ @visibleOpacity: 1; @@ -58,4 +55,4 @@ @simpleStartBackgroundColor: rgba(0, 0, 0, 0); @simpleEndBackgroundColor: @backgroundColor; @simpleInvertedStartBackgroundColor: rgba(255, 255, 255, 0); -@simpleInvertedEndBackgroundColor: @invertedBackgroundColor; \ No newline at end of file +@simpleInvertedEndBackgroundColor: @invertedBackgroundColor; diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables index 6825b0fde..88c2aebb6 100755 --- a/src/themes/default/modules/modal.variables +++ b/src/themes/default/modules/modal.variables @@ -84,14 +84,14 @@ @largeMonitorWidth: 900px; @widescreenMonitorWidth: 950px; -@mobileMargin: 0em 0em 0em -(@mobileWidth / 2); -@tabletMargin: 0em 0em 0em -(@tabletWidth / 2); -@computerMargin: 0em 0em 0em -(@computerWidth / 2); -@largeMonitorMargin: 0em 0em 0em -(@largeMonitorWidth / 2); -@widescreenMonitorMargin: 0em 0em 0em -(@widescreenMonitorWidth / 2); +@mobileMargin: 0em 0em 0em 0em; +@tabletMargin: 0em 0em 0em 0em; +@computerMargin: 0em 0em 0em 0em; +@largeMonitorMargin: 0em 0em 0em 0em; +@widescreenMonitorMargin: 0em 0em 0em 0em; @fullScreenWidth: 95%; -@fullScreenOffset: (100% - @fullScreenWidth) / 2; +@fullScreenOffset: 0em; @fullScreenMargin: 1em auto; /* Coupling */ @@ -117,9 +117,13 @@ @basicInvertedModalColor: @textColor; @basicInvertedModalHeaderColor: @darkTextColor; +/* Top Aligned */ +@topAlignedMargin: 5vh; +@mobileTopAlignedMargin: 1rem; + /* Scrolling Margin */ -@scrollingMargin: 3.5rem; -@mobileScrollingMargin: 1rem; +@scrollingMargin: @topAlignedMargin; +@mobileScrollingMargin: @mobileTopAlignedMargin; /* Scrolling Content */ @scrollingContentMaxHeight: calc(80vh - 10em); @@ -142,11 +146,11 @@ @miniLargeMonitorWidth: (@largeMonitorWidth * @miniRatio); @miniWidescreenMonitorWidth: (@widescreenMonitorWidth * @miniRatio); -@miniMobileMargin: 0em 0em 0em -(@miniMobileWidth / 2); -@miniTabletMargin: 0em 0em 0em -(@miniTabletWidth / 2); -@miniComputerMargin: 0em 0em 0em -(@miniComputerWidth / 2); -@miniLargeMonitorMargin: 0em 0em 0em -(@miniLargeMonitorWidth / 2); -@miniWidescreenMonitorMargin: 0em 0em 0em -(@miniWidescreenMonitorWidth / 2); +@miniMobileMargin: 0em 0em 0em 0em; +@miniTabletMargin: 0em 0em 0em 0em; +@miniComputerMargin: 0em 0em 0em 0em; +@miniLargeMonitorMargin: 0em 0em 0em 0em; +@miniWidescreenMonitorMargin: 0em 0em 0em 0em; @tinyHeaderSize: 1.3em; @tinyMobileWidth: @mobileWidth; @@ -155,11 +159,11 @@ @tinyLargeMonitorWidth: (@largeMonitorWidth * @tinyRatio); @tinyWidescreenMonitorWidth: (@widescreenMonitorWidth * @tinyRatio); -@tinyMobileMargin: 0em 0em 0em -(@tinyMobileWidth / 2); -@tinyTabletMargin: 0em 0em 0em -(@tinyTabletWidth / 2); -@tinyComputerMargin: 0em 0em 0em -(@tinyComputerWidth / 2); -@tinyLargeMonitorMargin: 0em 0em 0em -(@tinyLargeMonitorWidth / 2); -@tinyWidescreenMonitorMargin: 0em 0em 0em -(@tinyWidescreenMonitorWidth / 2); +@tinyMobileMargin: 0em 0em 0em 0em; +@tinyTabletMargin: 0em 0em 0em 0em; +@tinyComputerMargin: 0em 0em 0em 0em; +@tinyLargeMonitorMargin: 0em 0em 0em 0em; +@tinyWidescreenMonitorMargin: 0em 0em 0em 0em; @smallHeaderSize: 1.3em; @smallMobileWidth: @mobileWidth; @@ -168,11 +172,11 @@ @smallLargeMonitorWidth: (@largeMonitorWidth * @smallRatio); @smallWidescreenMonitorWidth: (@widescreenMonitorWidth * @smallRatio); -@smallMobileMargin: 0em 0em 0em -(@smallMobileWidth / 2); -@smallTabletMargin: 0em 0em 0em -(@smallTabletWidth / 2); -@smallComputerMargin: 0em 0em 0em -(@smallComputerWidth / 2); -@smallLargeMonitorMargin: 0em 0em 0em -(@smallLargeMonitorWidth / 2); -@smallWidescreenMonitorMargin: 0em 0em 0em -(@smallWidescreenMonitorWidth / 2); +@smallMobileMargin: 0em 0em 0em 0em; +@smallTabletMargin: 0em 0em 0em 0em; +@smallComputerMargin: 0em 0em 0em 0em; +@smallLargeMonitorMargin: 0em 0em 0em 0em; +@smallWidescreenMonitorMargin: 0em 0em 0em 0em; @largeHeaderSize: 1.6em; @largeMobileWidth: @mobileWidth; @@ -181,8 +185,8 @@ @largeLargeMonitorWidth: (@largeMonitorWidth * @largeRatio); @largeWidescreenMonitorWidth: (@widescreenMonitorWidth * @largeRatio); -@largeMobileMargin: 0em 0em 0em -(@largeMobileWidth / 2); -@largeTabletMargin: 0em 0em 0em -(@largeTabletWidth / 2); -@largeComputerMargin: 0em 0em 0em -(@largeComputerWidth / 2); -@largeLargeMonitorMargin: 0em 0em 0em -(@largeLargeMonitorWidth / 2); -@largeWidescreenMonitorMargin: 0em 0em 0em -(@largeWidescreenMonitorWidth / 2); +@largeMobileMargin: 0em 0em 0em 0em; +@largeTabletMargin: 0em 0em 0em 0em; +@largeComputerMargin: 0em 0em 0em 0em; +@largeLargeMonitorMargin: 0em 0em 0em 0em; +@largeWidescreenMonitorMargin: 0em 0em 0em 0em; diff --git a/src/themes/default/modules/search.variables b/src/themes/default/modules/search.variables index c84249fb3..890cb11bf 100644 --- a/src/themes/default/modules/search.variables +++ b/src/themes/default/modules/search.variables @@ -152,7 +152,7 @@ @categoryNameBackground: transparent; @categoryNameFont: @pageFont; @categoryNameFontSize: 1em; -@categoryNameFloat: left; +@categoryNameWhitespace: nowrap; @categoryNamePadding: 0.4em 1em; @categoryNameFontWeight: bold; @categoryNameColor: @lightTextColor;