diff --git a/core/includes/menu.inc b/core/includes/menu.inc index 626b634..d250af6 100644 --- a/core/includes/menu.inc +++ b/core/includes/menu.inc @@ -2324,6 +2324,28 @@ function menu_local_tabs() { } /** + * Returns a renderable element for the primary tabs. + */ +function menu_local_primary_tabs() { + $build = array( + '#theme' => 'menu_local_tasks', + '#primary' => menu_primary_local_tasks(), + ); + return !empty($build['#primary']) || !empty($build['#secondary']) ? $build : array(); +} + +/** + * Returns a renderable element for the secondary tabs. + */ +function menu_local_secondary_tabs() { + $build = array( + '#theme' => 'menu_local_tasks', + '#secondary' => menu_secondary_local_tasks(), + ); + return !empty($build['#primary']) || !empty($build['#secondary']) ? $build : array(); +} + +/** * Returns HTML for primary and secondary local tasks. * * @param $variables diff --git a/core/misc/jquery.collapse.js b/core/misc/jquery.collapse.js new file mode 100644 index 0000000..5a21a66 --- /dev/null +++ b/core/misc/jquery.collapse.js @@ -0,0 +1,98 @@ +/** + * @file + */ + +;( function( $, window, document, undefined ) { + 'use strict'; + + var pluginName = 'collapse'; + var defaults = { + target: false, + trigger: false, + initState: 'closed' + }; + + function Collapse( element, options ) { + this.options = $.extend( {}, defaults, options ); + this.element = element; + this.$element = $(element); + this.$target = null; + this.$trigger = null; + + this._defaults = defaults; + this._name = pluginName; + + this.init(); + } + + Collapse.prototype.init = function() { + var self = this; + var opts = self.options; + + if (opts.target) { + if ( opts.target.jquery ) { + this.$target = opts.target; + } else { + this.$target = this.$element.withinOrUnique(opts.target); + } + } + + if (opts.trigger) { + if ( opts.trigger.jquery ) { + this.$trigger = opts.trigger; + } else { + this.$trigger = this.$element.withinOrUnique(opts.trigger); + } + } else { + this.$trigger = this.$element; + } + + this.refresh(); + + if (this.options.initState !== 'closed') { + this.$target.addClass('is-open'); + } + + this.$trigger.on('click', function(event) { + self.toggle(event); + }); + + this.$element.on('transitionend webkitTransitionEnd', function() { + if ( self.$target.hasClass('is-closing') ) { + self.$target.removeClass('is-closing is-open'); + self.$target[0].style.removeProperty('max-height'); + } + }); + }; + + Collapse.prototype.refresh = function() { + this.$target.data( 'intrinsicHeight', this.$target.intrinsic('height') + 'px' ); + }; + + Collapse.prototype.toggle = function(event) { + event.preventDefault(); + + if ( this.$target.hasClass('is-open') ) { + if ( Modernizr.csstransitions ) { + this.$target.css('max-height', '0').addClass('is-closing'); + } + else { + this.$target.removeClass('is-open'); + } + } else { + if ( Modernizr.csstransitions ) { + this.$target.css( 'max-height', this.$target.data('intrinsicHeight') ); + } + this.$target.addClass('is-open'); + } + }; + + $.fn[pluginName] = function( options ) { + return this.each( function() { + if ( ! $.data(this, 'plugin_' + pluginName) ) { + $.data( this, 'plugin_' + pluginName, new Collapse(this, options) ); + } + }); + }; + +})( jQuery, window, document ); diff --git a/core/misc/jquery.dom-utils.js b/core/misc/jquery.dom-utils.js new file mode 100644 index 0000000..641006b --- /dev/null +++ b/core/misc/jquery.dom-utils.js @@ -0,0 +1,59 @@ +/** + * @file + * Lowish-level DOM utilities for UI components + */ +;( function( $, w, undefined ) { + 'use strict'; + + // Find a given selector only within the current scope, except ids, which + // are found anywhere. + $.fn.withinOrUnique = function(selector) { + if ( selector.charAt(0) === '#' ) { + return $(selector); + } else { + return this.find(selector); + } + }; + + $.extend({ + kebabCase: function(string) { + return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); + }, + + safeTrim: function(object) { + if (typeof object === 'string') { + return $.trim(object); + } + return object; + } + }); + + // Parse options passed via data-attribute component initialization and + // turn them into an object. + $.fn.dataOptions = function(pluginName, namespace) { + var options = {}; + var optPair; + var key; + var value; + var dataPrefix = 'data-' + ( typeof namespace === 'string' ? namespace + '-' : '' ); + var optionsArray = ($(this).attr(dataPrefix + $.kebabCase(pluginName)) || ':').split(';'); + + // parse options + for (var i = optionsArray.length - 1; i >= 0; i--) { + optPair = optionsArray[i].split(':'); + key = optPair[0]; + value = optPair[1]; + + if (/true/i.test(value)) { value = true; } + if (/false/i.test(value)) { value = false; } + if ($.isNumeric(value)) { value = parseFloat(value); } + + if (optPair.length === 2 && key.length > 0) { + options[$.safeTrim(key)] = $.safeTrim(value); + } + } + + return options; + }; + +})( jQuery, window ); diff --git a/core/misc/jquery.intrinsic.js b/core/misc/jquery.intrinsic.js new file mode 100644 index 0000000..d803652 --- /dev/null +++ b/core/misc/jquery.intrinsic.js @@ -0,0 +1,51 @@ +/** + * @file + * Measure an element’s intrinsic width or height when neither constrained by + * a container nor forced full width as in 'display: block'. + */ +;( function( $, document, undefined ) { + 'use strict'; + + // Style block applied momentarily in order to measure the element. + // + // 1. Shrink-wrap the element. Block display would give us the width of the + // container, not the element’s intrinsic width. + // 2. Preventative measure. The styles should be reverted before the browser’s + // UI thread updates. + // + // We avoid 'position: absolute' because this causes the element to wrap if + // it’s wider than the viewport, regardless of the width of and . + // + var tempElementCSS = { + display: 'table', /* 1 */ + visibility: 'hidden', /* 2 */ + width: 'auto', + height: 'auto', + maxWidth: 'none', + maxHeight: 'none' + }; + + // Style block applied momentarily to the body in order to ensure the + // element’s layout area isn’t constrained. + // + var tempBodyCSS = { + width: '999em', + height: '999em' + }; + + $.fn.intrinsic = function(dimension) { + // The measured element may be a plain object or jQuery. + var element = this instanceof jQuery ? this[0] : this; + var measurement; + + // Use jQuery’s internal swap() method to temporarily apply the styles, then + // measure the element’s width() or height(). + $.swap( document.body, tempBodyCSS, function() { + $.swap( element, tempElementCSS, function() { + measurement = $(element)[dimension](); + }); + }); + + return measurement; + }; +})( jQuery, document ); diff --git a/core/misc/jquery.nav-tabs.js b/core/misc/jquery.nav-tabs.js new file mode 100644 index 0000000..9d0f21d --- /dev/null +++ b/core/misc/jquery.nav-tabs.js @@ -0,0 +1,70 @@ +/** + * @file + */ + +;( function( $, window, document, undefined ) { + 'use strict'; + + var pluginName = 'navTabs'; + var defaults = { + target: '.js-nav-tabs__target', + trigger: '.js-nav-tabs__trigger', + collapsible: false + }; + + function NavTabs( element, dataOptions, options ) { + this.options = $.extend( {}, defaults, dataOptions, options ); + this.element = element; + this.$element = $(element); + + this._defaults = defaults; + this._name = pluginName; + + this.init(); + } + + NavTabs.prototype.init = function() { + + if (this.options.collapsible) { + this.$element.collapse({ + target: this.options.target, + trigger: this.options.trigger + }); + this.$element.addClass('is-collapse-enabled'); + } + + $(window).on('resize.navTabs', $.proxy(this, 'refresh')); + + this.$element.addClass('position-container is-horizontal-enabled'); + this.refreshAll(); + }; + + NavTabs.prototype.refreshAll = function() { + this.intrinsicWidth = this.$element.addClass('is-horizontal').intrinsic('width'); + this.$element.removeClass('is-horizontal'); + this.refresh(); + }; + + NavTabs.prototype.refresh = function() { + if ( this.$element.parent().width() > this.intrinsicWidth ) { + this.$element.addClass('is-horizontal'); + } else { + this.$element.removeClass('is-horizontal'); + } + }; + + NavTabs.prototype.destroy = function() { + window.off('resize.navTabs'); + this.removeData('plugin_' + pluginName); + }; + + $.fn[pluginName] = function( options ) { + return this.each( function() { + if ( ! $.data(this, 'plugin_' + pluginName) ) { + var dataOptions = $(this).dataOptions(pluginName, 'drupal'); + $.data( this, 'plugin_' + pluginName, new NavTabs(this, dataOptions, options) ); + } + }); + }; + +})( jQuery, window, document ); diff --git a/core/modules/overlay/css/overlay-child.css b/core/modules/overlay/css/overlay-child.css index 4331ae8..3ab7e3b 100644 --- a/core/modules/overlay/css/overlay-child.css +++ b/core/modules/overlay/css/overlay-child.css @@ -19,6 +19,8 @@ html[dir="rtl"] { } #overlay { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; box-sizing: border-box; display: block; margin: 0 auto; @@ -30,7 +32,9 @@ html[dir="rtl"] { width: 100%; } #overlay-titlebar { - padding: 0 20px; + background: hsla(0, 0%, 42%, 0.65); + border-top-left-radius: 5px; + border-top-right-radius: 5px; position: relative; white-space: nowrap; z-index: 100; @@ -39,12 +43,17 @@ html[dir="rtl"] { background: #fff; clear: both; color: #000; - padding: .5em 1em; position: relative; + overflow: hidden; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} +#overlay #page { + background: transparent; } - #overlay-title-wrapper { overflow: hidden; + padding: 15px; } #overlay-title { color: #fff; @@ -67,7 +76,8 @@ html[dir="rtl"] { #overlay-close-wrapper { position: absolute; - right: 0; /* LTR */ + right: 31px; /* LTR */ + top: 23px; } [dir="rtl"] #overlay-close-wrapper { left: 0; @@ -75,86 +85,16 @@ html[dir="rtl"] { } #overlay-close, #overlay-close:hover { - background: #ffffff url(../images/close.png) no-repeat; - border-radius: 0 12px 12px 0; /* LTR */ + background: transparent url(../images/close.png) no-repeat; display: block; - height: 26px; + height: 16px; margin: 0; padding: 0; - /* Replace with position:fixed to get a scrolling close button. */ - position: absolute; - width: 26px; -} -[dir="rtl"] #overlay-close, -[dir="rtl"] #overlay-close:hover { - border-radius: 12px 0 0 12px; -} - -/** - * Tabs on the overlay. - */ -#overlay-tabs { - line-height: 26px; - margin: -28px 0 0 0; position: absolute; - right: 20px; /* LTR */ - text-transform: uppercase; -} -[dir="rtl"] #overlay-tabs { - left: 20px; - right: auto; -} -#overlay-tabs li { - display: inline-block; - list-style: none; - margin: 0; - padding: 0; -} -#overlay-tabs li a, -#overlay-tabs li a:active, -#overlay-tabs li a:visited, -#overlay-tabs li a:hover { - background-color: #a6a7a2; - border-radius: 8px 8px 0 0; - color: #000; - display: inline-block; - font-size: 11px; - font-weight: bold; - margin: 0 1px; - outline: 0; - padding: 0 14px; - text-decoration: none; -} -#overlay-tabs li.active a, -#overlay-tabs li.active a.active, -#overlay-tabs li.active a:active, -#overlay-tabs li.active a:visited { - background-color: #fff; - margin-bottom: 0; - padding-bottom: 2px; -} -#overlay-tabs li a:focus, -#overlay-tabs li a:hover { - color: #fff; -} -#overlay-tabs li.active a:focus, -#overlay-tabs li.active a:hover { - color: #000; + width: 16px; } /** - * Add to shortcuts link - */ -#overlay-titlebar .add-or-remove-shortcuts { - padding-top: 0.6em; -} -#overlay-titlebar .add-or-remove-shortcuts .icon { - margin-top: 4px; -} -#overlay-titlebar .add-or-remove-shortcuts .text { - padding-top: 0; -} -/** * Disable message. */ #overlay-disable-message { diff --git a/core/modules/overlay/images/close.png b/core/modules/overlay/images/close.png index 44d2b6b..d39edae 100644 --- a/core/modules/overlay/images/close.png +++ b/core/modules/overlay/images/close.png @@ -1,14 +1,27 @@ PNG  - IHDRJL pHYs   -OiCCPPhotoshop ICC profilexڝSgTS=BKKoR RB&*! J!QEEȠQ, -!{kּ> H3Q5 B.@ -$pd!s#~<<+"x M0B\t8K@zB@F&S`cbP-`'{[! eDh;VEX0fK9-0IWfH  0Q){`##xFW<+*x<$9E[-qWW.(I+6aa@.y24x6_-"bbϫp@t~,/;m%h^ uf@Wp~<5j>{-]cK'Xto(hw?G%fIq^D$.Tʳ?D*A, `6B$BB -dr`)B(Ͱ*`/@4Qhp.U=pa( Aa!ڈbX#!H$ ɈQ"K5H1RT UH=r9\F;2G1Q= C7F dt1r=6Ыhڏ>C03l0.B8, c˱" VcϱwE 6wB aAHXLXNH $4 7 Q'"K&b21XH,#/{C7$C2'ITFnR#,4H#dk9, +ȅ3![ -b@qS(RjJ4e2AURݨT5ZBRQ4u9̓IKhhitݕNWGw Ljg(gwLӋT071oUX**| -J&*/Tު UUT^S}FU3S ԖUPSSg;goT?~YYLOCQ_ cx,!k u5&|v*=9C3J3WRf?qtN (~))4L1e\kXHQG6EYAJ'\'GgSSݧ -M=:.kDwn^Loy}/TmG X $ <5qo</QC]@Caaᄑ.ȽJtq]zۯ6iܟ4)Y3sCQ? 0k߬~OCOg#/c/Wװwa>>r><72Y_7ȷOo_C#dz%gA[z|!?:eAAA!h쐭!ΑiP~aa~ 'W?pX15wCsDDDޛg1O9-J5*>.j<74?.fYXXIlK9.*6nl {/]py.,:@LN8A*%w% -yg"/6шC\*NH*Mz쑼5y$3,幄'L Lݛ:v m2=:1qB!Mggfvˬen/kY- -BTZ(*geWf͉9+̳ې7ᒶKW-X潬j9(xoʿܔĹdff-[n ڴ VE/(ۻCɾUUMfeI?m]Nmq#׹=TR+Gw- 6 U#pDy  :v{vg/jBFS[b[O>zG499?rCd&ˮ/~јѡ򗓿m|x31^VwwO| (hSЧc3- cHRMz%u0`:o_FIDATx 0 D5FN;H8\bbIZL(806q:"4B03Df,3|3HU"4ݛBVbf6,.)^6fyafhV~&y]u?а qzG`~A=gU݌ UM3y&JhۻgIENDB` \ No newline at end of file + IHDRa pHYs  iTXtXML:com.adobe.xmp + + + Pixelmator 1.6.7 + + + 1 + 72 + 1 + 5 + 72 + + + 16 + 65535 + 16 + + + +6IDAT8M +@ "nzx.%x&ﲮЇCM9~3 19cSn^fWTJo&22||`'>npD| +ϩ^Zx30&k<1&]INV?/;xʀSO~ެ*fIENDB` \ No newline at end of file diff --git a/core/modules/overlay/overlay.module b/core/modules/overlay/overlay.module index 3e6f989..2205f8e 100644 --- a/core/modules/overlay/overlay.module +++ b/core/modules/overlay/overlay.module @@ -371,7 +371,8 @@ function overlay_preprocess_maintenance_page(&$variables) { * @see overlay.tpl.php */ function template_preprocess_overlay(&$variables) { - $variables['tabs'] = menu_primary_local_tasks(); + $variables['primary_tabs'] = menu_local_primary_tabs(); + $variables['secondary_tabs'] = menu_local_secondary_tabs(); $variables['title'] = drupal_get_title(); $variables['disable_overlay'] = overlay_disable_message(); @@ -394,7 +395,7 @@ function template_preprocess_overlay(&$variables) { */ function overlay_preprocess_page(&$variables) { if (overlay_get_mode() == 'child') { - unset($variables['tabs']['#primary']); + unset($variables['tabs']); } } diff --git a/core/modules/overlay/templates/overlay.html.twig b/core/modules/overlay/templates/overlay.html.twig index 732bc33..9bdcea5 100644 --- a/core/modules/overlay/templates/overlay.html.twig +++ b/core/modules/overlay/templates/overlay.html.twig @@ -21,17 +21,16 @@ {{ disable_overlay }}
-
- {{ title }} -
- {% if tabs %} -
    {{ tabs }}
- {% endif %} +
+ {{ title }} +
+ {% if primary_tabs %}{{ primary_tabs }}{% endif %}
+ {% if secondary_tabs %}{{ secondary_tabs }}{% endif %} {{ page }} diff --git a/core/modules/shortcut/css/shortcut.module.css b/core/modules/shortcut/css/shortcut.module.css index 05672e9..9ec5829 100644 --- a/core/modules/shortcut/css/shortcut.module.css +++ b/core/modules/shortcut/css/shortcut.module.css @@ -7,13 +7,11 @@ * Add/remove links. */ .add-or-remove-shortcuts .icon { - display: block; - float: left; /* LTR */ + display: inline-block; margin-top: 5px; } .add-or-remove-shortcuts .text { display: none; - float: left; /* LTR */ padding-top: 2px; } [dir="rtl"] .add-or-remove-shortcuts .icon, diff --git a/core/modules/shortcut/css/shortcut.theme.css b/core/modules/shortcut/css/shortcut.theme.css index f45a375..ddb5e6a 100644 --- a/core/modules/shortcut/css/shortcut.theme.css +++ b/core/modules/shortcut/css/shortcut.theme.css @@ -39,40 +39,31 @@ /** * Add/remove links. */ -.add-or-remove-shortcuts .icon { - background: transparent url(../images/shortcut-add.png) no-repeat; - height: 12px; - margin-left: 8px; /* LTR */ - overflow: hidden; - text-indent: 12px; - width: 12px; -} -[dir="rtl"] .add-or-remove-shortcuts .icon { - margin-left: 0; - margin-right: 8px; +.add-or-remove-shortcuts { + display: inline-block; + margin-left: 0.3em; } -[dir="rtl"] .add-or-remove-shortcuts .text { - padding: 0 10px 0 6px; -} -[dir="rtl"] .add-or-remove-shortcuts a:focus .text, -[dir="rtl"] .add-or-remove-shortcuts a:hover .text { - border-radius: 5px 0 0 5px; +.add-or-remove-shortcuts .icon { + background: transparent url('../images/favstar.svg') no-repeat left top; + width: 20px; + height: 20px; + vertical-align: text-bottom; + text-indent: -999em; } -.add-shortcut a:focus .icon, -.add-shortcut a:hover .icon { - background-position: 0 -12px; /* LTR */ +.add-shortcut a:hover .icon, +.add-shortcut a:focus .icon { + background-position: -20px top; } [dir="rtl"] .add-shortcut a:focus .icon, [dir="rtl"] .add-shortcut a:hover .icon { background-position: 0 -24px; } .remove-shortcut .icon { - margin-top: 4px; - background-position: -12px 0; + background-position: -40px top; } .remove-shortcut a:focus .icon, .remove-shortcut a:hover .icon { - background-position: -12px -12px; /* LTR */ + background-position: -60px top; /* LTR */ } [dir="rtl"] .remove-shortcut a:focus .icon, [dir="rtl"] .remove-shortcut a:hover .icon { diff --git a/core/modules/shortcut/images/favstar.svg b/core/modules/shortcut/images/favstar.svg new file mode 100644 index 0000000..cb50c24 --- /dev/null +++ b/core/modules/shortcut/images/favstar.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/core/modules/shortcut/images/shortcut-add.png b/core/modules/shortcut/images/shortcut-add.png index 2924557..67bc0cb 100644 --- a/core/modules/shortcut/images/shortcut-add.png +++ b/core/modules/shortcut/images/shortcut-add.png @@ -1,5 +1,46 @@ PNG  - IHDR$ -gAMA|QPLTEإ~~~NNNlllHHHEEExxxɥpql---cd_KKK_`[| tRNSlo6e-IDAT(]Y0DB&vO7vg,>ЃZOdIAs8~/ͱ>`lL0 KfN.)~A3sژFli&8AĭJ*!ub朔{e춦c}T>U4 )EV{T52UfjJJd,U -RtWkpe:v~*s q٢,_B5/2[ddr[̜BҬwyT6VC7B% SV%[d7̹)]w1_M];<<=6a8mڴ[IENDB` \ No newline at end of file + IHDR w}Y +AiCCPICC ProfileH wTSϽ7" %z ;HQIP&vDF)VdTG"cE b PQDE݌k 5ޚYg}׺PtX4X\XffGD=HƳ.d,P&s"7C$ +E6<~&S2)212 "įl+ɘ&Y4Pޚ%ᣌ\%g|eTI(L0_&l2E9r9hxgIbטifSb1+MxL 0oE%YmhYh~S=zU&ϞAYl/$ZUm@O ޜl^ ' lsk.+7oʿ9V;?#I3eE妧KD d9i,UQ h +A1vjpԁzN6p\W p G@ +K0ށiABZyCAP8C@&*CP=#t] 4}a ٰ;GDxJ>,_“@FXDBX$!k"EHqaYbVabJ0՘cVL6f3bձX'?v 6-V``[a;p~\2n5׌ &x*sb|! +ߏƿ' Zk! $l$T4QOt"y\b)AI&NI$R$)TIj"]&=&!:dGrY@^O$ _%?P(&OJEBN9J@y@yCR nXZOD}J}/G3ɭk{%Oחw_.'_!JQ@SVF=IEbbbb5Q%O@%!BӥyҸM:e0G7ӓ e%e[(R0`3R46i^)*n*|"fLUo՝mO0j&jajj.ϧwϝ_4갺zj=U45nɚ4ǴhZ ZZ^0Tf%9->ݫ=cXgN].[7A\SwBOK/X/_Q>QG[ `Aaac#*Z;8cq>[&IIMST`ϴ kh&45ǢYYF֠9<|y+ =X_,,S-,Y)YXmĚk]c}džjcΦ浭-v};]N"&1=xtv(}'{'IߝY) Σ -rqr.d._xpUەZM׍vm=+KGǔ ^WWbj>:>>>v}/avO8 +FV> 2 u/_$\BCv< 5 ]s.,4&yUx~xw-bEDCĻHGKwFGEGME{EEKX,YFZ ={$vrK +.3\rϮ_Yq*©L_wד+]eD]cIIIOAu_䩔)3ѩiB%a+]3='/40CiU@ёL(sYfLH$%Y jgGeQn~5f5wugv5k֮\۹Nw]m mHFˍenQQ`hBBQ-[lllfjۗ"^bO%ܒY}WwvwXbY^Ю]WVa[q`id2JjGէ{׿m>PkAma꺿g_DHGGu;776ƱqoC{P38!9 ҝˁ^r۽Ug9];}}_~imp㭎}]/}.{^=}^?z8hc' +O*?f`ϳgC/Oϩ+FFGGόzˌㅿ)ѫ~wgbk?Jި9mdwi獵ޫ?cǑOO?w| x&mf2:Y~ pHYs  iTXtXML:com.adobe.xmp + + + 1 + 5 + 72 + 1 + 72 + + + 32 + 1 + 16 + + + + + + + + Pixelmator 1.6.7 + + + +sQlIDATH UmLSg~mo{[2EXP1"K.!l~l1KaBHi[l `&S\R~wZIJys>眷c ҥKL&SvmmL>+ and so on. + */ +.reset-appearance { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0 none; + background: transparent; + padding: 0; + margin: 0; + line-height: inherit; +} + +/* + * Remove browser styles, especially for and so on. + */ +.reset-appearance { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0 none; + background: transparent; + padding: 0; + margin: 0; + line-height: inherit; +} + +/* + * Contain positioned elements. + */ +.position-container { + position: relative; +} + +/** + * Block-level HTML5 display definition. + * + * Provides display values for browsers that don't recognize the new elements + * and therefore display them inline by default. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css index dfb496b..85390b8 100644 --- a/core/modules/system/css/system.theme.css +++ b/core/modules/system/css/system.theme.css @@ -361,15 +361,12 @@ ul.inline li { /** * Markup generated by theme_menu_local_tasks(). */ -div.tabs { - margin: 1em 0; -} -ul.tabs { +.tabs { list-style: none; margin: 0 0 0.5em; padding: 0; } -.tabs > li { +.tabs__tab { display: inline-block; margin-right: 0.3em; /* LTR */ } diff --git a/core/modules/system/system.module b/core/modules/system/system.module index ac42ea3..6f544ba 100644 --- a/core/modules/system/system.module +++ b/core/modules/system/system.module @@ -1399,6 +1399,42 @@ function system_library_info() { ), ); + // jQuery DOM Utitlities. + $libraries['jquery.dom-utils'] = array( + 'title' => 'jQuery DOM Utitlities', + 'version' => '1.0', + 'js' => array( + 'core/misc/jquery.dom-utils.js' => array(), + ), + 'dependencies' => array( + array('system', 'jquery') + ), + ); + + // jQuery Collapse. + $libraries['jquery.collapse'] = array( + 'title' => 'jQuery Collapse', + 'version' => '1.0', + 'js' => array( + 'core/misc/jquery.collapse.js' => array(), + ), + 'dependencies' => array( + array('system', 'jquery') + ), + ); + + // jQuery Intrinsic Measurements. + $libraries['jquery.intrinsic'] = array( + 'title' => 'Instric Measurements', + 'version' => '1.0', + 'js' => array( + 'core/misc/jquery.intrinsic.js' => array(), + ), + 'dependencies' => array( + array('system', 'jquery') + ), + ); + // jQuery Form Plugin. $libraries['jquery.form'] = array( 'title' => 'jQuery Form Plugin', @@ -1446,6 +1482,22 @@ function system_library_info() { ), ); + // Navigation Tabs. + $libraries['jquery.nav-tabs'] = array( + 'title' => 'Navigation Tabs', + 'version' => '1.0', + 'js' => array( + 'core/misc/jquery.nav-tabs.js' => array(), + ), + 'dependencies' => array( + array('system', 'jquery'), + array('system', 'drupal'), + array('system', 'jquery.intrinsic'), + array('system', 'jquery.collapse'), + array('system', 'jquery.dom-utils'), + ), + ); + // Vertical Tabs. $libraries['drupal.vertical-tabs'] = array( 'title' => 'Vertical Tabs', diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css index e88d2fa..99c350c 100644 --- a/core/modules/views_ui/css/views_ui.admin.theme.css +++ b/core/modules/views_ui/css/views_ui.admin.theme.css @@ -467,20 +467,30 @@ td.group-title { * The tabs that switch between sections */ -ul#views-display-menu-tabs { +.views-displays .tabs.secondary { margin-right: 200px; + border: 0; } -ul#views-display-menu-tabs li { +.views-displays .tabs.secondary li { + background: transparent; margin-bottom: 5px; + border: 0; + padding: 0; + width: auto; } -ul#views-display-menu-tabs li.add ul.action-list li{ +.views-displays .tabs.secondary li.add ul.action-list li{ margin: 0; } -.views-displays .secondary a { +.views-displays .tabs.secondary li { + margin: 0 5px 0 6px; +} + +.views-displays .tabs.secondary a { border: 1px solid #cbcbcb; + border-radius: 7px; display: inline-block; font-size: small; line-height: 1.3333; @@ -490,65 +500,66 @@ ul#views-display-menu-tabs li.add ul.action-list li{ /** * Display a red border if the display doesn't validate. */ -.views-displays ul.secondary li.active a.active.error, -.views-displays .secondary a.error { +.views-displays .tabs.secondary li.active a.active.error, +.views-displays .tabs.secondary a.error { border: 2px solid #ed541d; padding: 1px 6px; } -.views-displays .secondary a:focus { +.views-displays .tabs.secondary a:focus { outline: none; } -.views-displays ul.secondary li a { +.views-displays .tabs.secondary li a { background-color: #fff; } -.views-displays ul.secondary li a:hover, -.views-displays ul.secondary li.active a, -.views-displays ul.secondary li.active a.active { +.views-displays .tabs.secondary li a:hover, +.views-displays .tabs.secondary li.active a, +.views-displays .tabs.secondary li.active a.active { background-color: #555; color: #fff; } -.views-displays .secondary .open > a { +.views-displays .tabs.secondary .open > a { background-color: #f1f1f1; border-bottom: 1px solid transparent; position: relative; } -.views-displays .secondary .open > a:hover { +.views-displays .tabs.secondary .open > a:hover { background-color: #f1f1f1; } -.views-displays .secondary .action-list li { +.views-displays .tabs.secondary .action-list li { background-color: #f1f1f1; border-color: #cbcbcb; border-style: solid; border-width: 0 1px; padding: 2px 9px; + } -.views-displays .secondary .action-list li:first-child { +.views-displays .tabs.secondary .action-list li:first-child { border-width: 1px 1px 0; } -.views-displays .secondary .action-list li.last { +.views-displays .tabs.secondary .action-list li.last { border-width: 0 1px 1px; } -.views-displays .secondary .action-list li:last-child { +.views-displays .tabs.secondary .action-list li:last-child { border-width: 0 1px 1px; } -.views-displays .secondary .action-list input.form-submit { +.views-displays .tabs.secondary .action-list input.form-submit { background: none repeat scroll 0 0 transparent; border: medium none; margin: 0; padding: 0; } -.views-displays .secondary .action-list li:hover { +.views-displays .tabs.secondary .action-list li:hover { background-color: #ddd; } diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css index 672995f..5c97c6a 100644 --- a/core/themes/bartik/css/style.css +++ b/core/themes/bartik/css/style.css @@ -1747,6 +1747,11 @@ div.admin-panel .description { .overlay #messages { width: auto; } +.overlay-open #page { + filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ + filter: gray; /* IE6-9 */ + -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ +} /* ---------- book ----------- */ .book-navigation .menu { diff --git a/core/themes/seven/js/nav-tabs.js b/core/themes/seven/js/nav-tabs.js new file mode 100644 index 0000000..f396e12 --- /dev/null +++ b/core/themes/seven/js/nav-tabs.js @@ -0,0 +1,17 @@ +(function ($, Drupal) { + +"use strict"; + +/** + * Initialise the tabs JS. + */ +Drupal.behaviors.navTabs = { + attach: function (context, settings) { + var tabs = $(context).find('[data-drupal-nav-tabs]'); + if ( tabs.length ) { + $(tabs).navTabs(); + } + } +}; + +})(jQuery, Drupal); diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme index a3caa09..977ee8a 100644 --- a/core/themes/seven/seven.theme +++ b/core/themes/seven/seven.theme @@ -30,12 +30,81 @@ function seven_preprocess_html(&$variables) { * Implements hook_preprocess_HOOK() for page.tpl.php. */ function seven_preprocess_page(&$variables) { - $variables['primary_local_tasks'] = $variables['tabs']; - unset($variables['primary_local_tasks']['#secondary']); - $variables['secondary_local_tasks'] = array( - '#theme' => 'menu_local_tasks', - '#secondary' => isset($variables['tabs']['#secondary']) ? $variables['tabs']['#secondary'] : '', + if (isset($variables['tabs'])) { + $variables['primary_local_tasks'] = $variables['tabs']; + unset($variables['primary_local_tasks']['#secondary']); + $variables['secondary_local_tasks'] = array( + '#theme' => 'menu_local_tasks', + '#secondary' => isset($variables['tabs']['#secondary']) ? $variables['tabs']['#secondary'] : '', + ); + } +} + +/** + * Overrides theme_menu_local_tasks(). + * + * Returns HTML for primary and secondary local tasks. + * + **/ +function seven_menu_local_tasks(&$variables) { + $output = ''; + + if (!empty($variables['primary'])) { + drupal_add_library('system', 'jquery.nav-tabs', FALSE); + drupal_add_js(drupal_get_path('theme', 'seven') . '/js/nav-tabs.js'); + $variables['primary']['#prefix'] = ''; + $variables['primary']['#prefix'] .= ''; + $output .= drupal_render($variables['primary']); + } + if (!empty($variables['secondary'])) { + drupal_add_library('system', 'jquery.nav-tabs', FALSE); + drupal_add_js(drupal_get_path('theme', 'seven') . '/js/nav-tabs.js'); + $variables['secondary']['#prefix'] = ''; + $variables['secondary']['#prefix'] .= ''; + $output .= drupal_render($variables['secondary']); + } + + return $output; +} + +/** + * Overrides theme_menu_local_task(). + * + * Returns HTML for a local task. + * + **/ +function seven_menu_local_task($variables) { + $link = $variables['element']['#link']; + $link += array( + 'localized_options' => array(), ); + $link_text = $link['title']; + + if (!empty($variables['element']['#active'])) { + // Add text to indicate active tab for non-visual users. + $active = ''; + + // If the link does not contain HTML already, check_plain() it now. + // After we set 'html'=TRUE the link will not be sanitized by l(). + if (empty($link['localized_options']['html'])) { + $link['title'] = check_plain($link['title']); + } + $link['localized_options']['html'] = TRUE; + $link_text = t('!local-task-title!active', array('!local-task-title' => $link['title'], '!active' => $active)); + } + $class = 'tabs__tab'; + if(!empty($variables['element']['#active'])) { + $class .= ' active'; + } + + return '
  • ' . l($link_text, $link['href'], $link['localized_options']) . '
    • '; } /** diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css index 3e66ac7..2055ec9 100644 --- a/core/themes/seven/style.css +++ b/core/themes/seven/style.css @@ -200,9 +200,21 @@ pre { */ #branding { overflow: hidden; - padding: 20px 20px 0 20px; /* LTR */ - position: relative; background-color: #e0e0d8; + padding: 24px 0 0; +} +/* This layout styling is a copy of #page. + * @TODO: Replace with reuseable layout classes. + **/ +.branding__inner { + margin-left: 1.25em; + margin-right: 1.25em; +} +@media screen and (min-width:45em) { /* 720px */ + .branding__inner { + margin-left: 2.5em; + margin-right: 2.5em; + } } [dir="rtl"] #branding { padding: 20px 20px 0 20px; @@ -233,16 +245,16 @@ pre { * Page title. */ #page-title { - background: #333; padding-top: 20px; } -#branding h1.page-title { - color: #000; - margin: 0; - padding-bottom: 10px; - font-size: 1.385em; - font-weight: normal; - float: left; /* LTR */ +#branding .page-title { + color: #333; + display: inline-block; + margin: 0 0 12px; + font-size: 1.625em; + line-height: 1.875em; + font-weight: 600; + -webkit-font-smoothing: antialiased; } [dir="rtl"] #branding h1.page-title { float: right; @@ -258,151 +270,246 @@ pre { /** * Tabs. */ -ul.primary { - float: right; /* LTR */ - border-bottom: none; - text-transform: uppercase; - font-size: 0.923em; +.is-collapse-enabled .tabs, +.is-horizontal .tabs { + position: relative; +} +.is-collapse-enabled .tabs:before, +.is-horizontal .tabs:before { + content: ''; + display: block; + border-bottom: 1px solid #A6A6A6; + position: absolute; + bottom: 0; + left: 0; + z-index: 10; + right: 0; +} + +/* Span the full width of the viewport */ +.branding__inner .is-horizontal .tabs:before, +.branding__inner .is-collapse-enabled .tabs:before { + left: -2.5em; + right: -2.5em; +} + +/** + * Tab + * + * 1. Required by some elements such as