Skip to content

GitLab

D
drupal
Commit 784f08f5 authored by webchick's avatar webchick
Browse files
Options

Issue #1490402 by LewisNyman, nod_, mcjim, mdrummond, rteijeiro, jessebeach,... 

Issue #1490402 by LewisNyman, nod_, mcjim, mdrummond, rteijeiro, jessebeach, Bojhan, ry5n: Redesign tabs and the content header.
parent 878777a8
Hide whitespace changes
Inline Side-by-side
Showing with 634 additions and 234 deletions
core/misc/icons/0074bd/chevron-left.svg 0 → 100644
View file @ 784f08f5
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#0074bd" d="M7.951 7.645c-.193.196-.193.516 0 .71l3.258 3.29c.193.193.191.519-.002.709l-1.371 1.371c-.193.192-.512.191-.707 0l-5.335-5.371c-.194-.194-.194-.514 0-.708l5.335-5.369c.195-.195.514-.195.707-.001l1.371 1.371c.193.194.195.513.002.709l-3.258 3.289z"/></svg>
core/misc/icons/0074bd/chevron-right.svg 0 → 100644
View file @ 784f08f5
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#0074bd" d="M8.053 8.355c.193-.195.193-.517 0-.711l-3.26-3.289c-.193-.195-.192-.514.002-.709l1.371-1.371c.194-.194.512-.193.706.001l5.335 5.369c.195.195.195.515 0 .708l-5.335 5.37c-.194.192-.512.193-.706.002l-1.371-1.371c-.194-.195-.195-.514-.002-.709l3.26-3.29z"/></svg>
core/misc/jquery.intrinsic.js 0 → 100644
View file @ 784f08f5
/**
* @file
* Measure an element’s intrinsic width or height when neither constrained by
* a container nor forced full width as in 'display: block'.
*/
(function ($) {
'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 <body> and <html>.
//
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);
core/modules/shortcut/css/shortcut.icons.css
View file @ 784f08f5
......@@ -25,44 +25,21 @@
* 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;
background: transparent url('../images/favstar.svg') no-repeat left top;
width: 20px;
height: 20px;
}
.no-svg .add-or-remove-shortcuts .icon {
background: transparent url("../images/shortcut-add.png") no-repeat;
background-image: url('../images/favstar.png');
}
[dir="rtl"] .add-or-remove-shortcuts .icon {
margin-left: 0;
margin-right: 8px;
}
[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-shortcut a:focus .icon,
.add-shortcut a:hover .icon {
background-position: 0 -12px; /* LTR */
}
[dir="rtl"] .add-shortcut a:focus .icon,
[dir="rtl"] .add-shortcut a:hover .icon {
background-position: 0 -24px;
.add-shortcut a:hover .icon,
.add-shortcut a:focus .icon {
background-position: -20px top;
}
.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 */
}
[dir="rtl"] .remove-shortcut a:focus .icon,
[dir="rtl"] .remove-shortcut a:hover .icon {
background-position: -12px -24px;
background-position: -60px top; /* LTR */
}
core/modules/shortcut/css/shortcut.module.css
View file @ 784f08f5
......@@ -7,20 +7,6 @@
* Add/remove links.
*/
.add-or-remove-shortcuts .icon {
display: block;
float: left; /* LTR */
margin-top: 5px;
}
.add-or-remove-shortcuts .text {
display: none;
float: left; /* LTR */
padding-top: 2px;
}
[dir="rtl"] .add-or-remove-shortcuts .icon,
[dir="rtl"] .add-or-remove-shortcuts .text {
float: right;
}
.add-or-remove-shortcuts a:focus .text,
.add-or-remove-shortcuts a:hover .text {
display: block;
display: inline-block;
vertical-align: -2px;
}
core/modules/shortcut/css/shortcut.theme.css
View file @ 784f08f5
......@@ -19,3 +19,41 @@
[dir="rtl"] .toolbar .toolbar-tray-horizontal .edit-shortcuts {
float: right;
}
/**
* Add/remove links.
*/
.add-or-remove-shortcuts {
display: inline-block;
margin-left: 0.3em;
}
.add-or-remove-shortcuts .text {
background: #000000;
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
padding: 0 5px;
color: #ffffff;
display: inline-block;
margin-left: 0.3em;
opacity: 0;
-ms-transform: translateY(-12px);
-moz-transform: translateY(-12px);
-webkit-transform: translateY(-12px);
transform: translateY(-12px);
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
transition: all 200ms ease-out;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.add-or-remove-shortcuts a:hover .text,
.add-or-remove-shortcuts a:focus .text {
opacity: 1;
-o-transform: translateY(-2px);
-ms-transform: translateY(-2px);
-moz-transform: translateY(-2px);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
core/modules/shortcut/images/favstar.svg 0 → 100644
View file @ 784f08f5
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="20" viewBox="0 0 80 20"><g><path fill="#FEF6A8" d="M69.729 2.259c.149-.385.394-.385.543 0l1.959 5.049c.149.385.609.699 1.021.699l1.75.169c.412 0 .493.219.18.487l-1.31.981c-.313.268-.497.816-.407 1.22l1.472 6.562c.09.403-.118.547-.463.319l-3.848-2.539c-.345-.228-.907-.228-1.252 0l-3.848 2.539c-.345.228-.553.084-.463-.319l1.047-4.707c.09-.403-.094-.952-.407-1.22l-3.518-3.006c-.313-.268-.232-.487.18-.487h4.381c.412 0 .872-.314 1.021-.699l1.962-5.048z"/><polygon fill="#807640" points="77.548,5 75.002,7.547 72.456,5 71.041,6.415 73.587,8.961 71.044,11.505 72.457,12.919 75.001,10.375 77.546,12.919 78.96,11.505 76.415,8.96 78.962,6.414"/><path fill="#80722D" d="M75.172 13.897s-.133-.516-.651-.349c-.516.166-.302.674-.302.674l.719 3.204c.061.273-.016.428-.178.428-.078 0-.174-.035-.285-.107l-3.848-2.539c-.174-.115-.4-.172-.627-.172s-.453.057-.625.172l-3.848 2.539c-.111.072-.209.107-.285.107-.164 0-.24-.154-.178-.428l1.047-4.707c.09-.402-.094-.951-.408-1.219l-3.518-3.007c-.314-.269-.232-.487.18-.487h4.383c.412 0 .871-.314 1.021-.699l1.959-5.049c.075-.192.174-.287.272-.287s.197.096.271.288l.461 1.158s.255.409.635.219c.44-.221.227-.66.227-.66l-.389-1.078c-.336-.861-1.008-.927-1.205-.927s-.869.066-1.203.926l-1.961 5.049-.109.062-4.361-.001c-.934 0-1.23.609-1.301.796-.068.187-.238.844.471 1.451l3.52 3.007c.037.041.086.186.078.25l-1.045 4.699c-.133.596.051.984.229 1.205.225.279.561.439.926.439.279 0 .561-.092.836-.273l3.848-2.539v.002l.074-.008.088.014 3.836 2.531c.273.182.557.273.836.273.363 0 .701-.16.924-.439.178-.221.361-.609.23-1.205l-.744-3.313z"/></g><g><path fill="#FEF6A8" d="M54.759 18.355c-.18 0-.369-.064-.561-.191l-3.848-2.539c-.083-.055-.215-.088-.351-.088s-.268.033-.351.088l-3.848 2.539c-.191.127-.381.191-.561.191-.212 0-.407-.092-.535-.252-.109-.136-.22-.383-.131-.784l1.047-4.708c.05-.222-.071-.584-.243-.731l-3.517-3.006c-.451-.386-.378-.756-.326-.897.053-.141.237-.47.831-.47h4.381c.206 0 .48-.188.556-.38l1.961-5.049c.213-.549.587-.608.737-.608s.524.059.737.607l1.959 5.049c.075.191.35.38.556.38h4.383c.594 0 .778.329.831.47.052.142.125.512-.326.897l-3.518 3.006c-.173.147-.294.51-.244.731l1.047 4.708c.089.401-.021.647-.131.784-.128.162-.323.253-.535.253z"/><path fill="#80722D" d="M50 1.97c.099 0 .196.096.271.289l1.959 5.049c.149.385.609.699 1.021.699h4.383c.412 0 .493.219.18.487l-3.517 3.006c-.313.268-.497.816-.407 1.22l1.047 4.708c.061.273-.015.428-.178.428-.077 0-.174-.035-.285-.108l-3.848-2.539c-.173-.113-.399-.171-.626-.171s-.453.058-.626.171l-3.848 2.539c-.111.073-.208.108-.285.108-.163 0-.238-.154-.178-.428l1.047-4.708c.09-.403-.094-.952-.407-1.22l-3.518-3.006c-.313-.268-.232-.487.18-.487h4.381c.412 0 .872-.314 1.021-.699l1.961-5.049c.076-.193.173-.289.272-.289m0-1c-.198 0-.87.067-1.204.927l-1.961 5.049-.109.062-4.36-.001c-.934 0-1.231.61-1.3.797-.069.187-.239.844.471 1.451l3.518 3.005c.039.043.086.186.079.25l-1.046 4.701c-.132.595.052.983.229 1.205.224.279.561.439.925.439.28 0 .562-.093.836-.273l3.848-2.539.001.001.074-.007.089.014 3.834 2.531c.274.181.557.273.836.273.364 0 .701-.16.925-.439.178-.222.361-.61.229-1.206l-1.046-4.707c-.006-.058.041-.2.086-.248l3.512-3c.71-.607.54-1.264.471-1.451-.068-.187-.366-.797-1.3-.797h-4.383l-.098-.08-1.95-5.03c-.336-.86-1.008-.927-1.206-.927z"/></g><g><path opacity=".7" fill="#5A563B" d="M35.414 14.96s-.133-.516-.651-.349c-.516.166-.302.674-.302.674l.477 2.142c.061.273-.016.428-.178.428-.078 0-.174-.035-.285-.107l-3.848-2.539c-.174-.115-.4-.172-.627-.172s-.453.057-.625.172l-3.848 2.539c-.111.072-.209.107-.285.107-.164 0-.24-.154-.178-.428l1.047-4.707c.09-.402-.094-.951-.408-1.219l-3.518-3.007c-.314-.269-.232-.487.18-.487h4.383c.412 0 .871-.314 1.021-.699l1.959-5.049c.075-.193.174-.288.272-.288s.197.096.271.288l1.377 3.538s.255.409.635.219c.44-.221.227-.66.227-.66l-.607-1.658-.697-1.801c-.337-.86-1.009-.926-1.206-.926s-.869.066-1.203.926l-1.961 5.049-.109.062-4.361-.001c-.934 0-1.23.609-1.301.796-.068.187-.238.844.471 1.451l3.52 3.007c.037.041.086.186.078.25l-1.045 4.699c-.133.596.051.984.229 1.205.225.279.561.439.926.439.279 0 .561-.092.836-.273l3.848-2.539v.002l.074-.008.088.014 3.836 2.531c.273.182.557.273.836.273.363 0 .701-.16.924-.439.178-.221.361-.609.23-1.205l-.502-2.25z"/><polygon fill="#807640" points="39,7.96 36,7.96 36,4.96 34,4.96 34,7.96 31,7.96 31,9.959 34,9.959 34,12.96 36,12.96 36,9.959 39,9.959"/></g><path opacity=".7" fill="#5A563B" d="M10 1.97c.098 0 .197.096.271.289l1.959 5.049c.149.385.609.699 1.021.699h4.383c.412 0 .493.219.18.487l-3.517 3.006c-.313.268-.497.816-.407 1.22l1.047 4.707c.061.273-.015.428-.178.428-.077 0-.174-.035-.285-.108l-3.848-2.539c-.172-.114-.399-.171-.626-.171s-.454.057-.626.171l-3.848 2.539c-.111.073-.208.108-.285.108-.163 0-.239-.154-.178-.428l1.047-4.707c.09-.403-.094-.951-.407-1.22l-3.518-3.006c-.313-.268-.233-.487.18-.487h4.382c.413 0 .872-.314 1.021-.699l1.96-5.049c.075-.193.173-.289.272-.289m0-1c-.198 0-.87.067-1.204.927l-1.96 5.049-.109.062-4.362-.001c-.934 0-1.231.61-1.3.796-.069.187-.239.844.47 1.451l3.519 3.007c.038.041.086.185.079.249l-1.046 4.7c-.133.595.051.983.229 1.205.224.279.561.439.925.439.28 0 .562-.093.836-.274l3.848-2.538v.001l.075-.007.088.014 3.834 2.531c.274.181.557.273.836.273.364 0 .701-.16.925-.439.178-.222.361-.61.229-1.206l-1.047-4.706c-.006-.058.041-.2.086-.248l3.512-3c.71-.607.54-1.264.471-1.451-.068-.187-.366-.797-1.3-.797h-4.383l-.098-.08-1.95-5.03c-.333-.86-1.005-.927-1.203-.927z"/></svg>
\ No newline at end of file
core/modules/shortcut/shortcut.module
View file @ 784f08f5
......@@ -433,7 +433,7 @@ function shortcut_preprocess_page(&$variables) {
),
'#prefix' => '<div class="add-or-remove-shortcuts ' . $link_mode . '-shortcut">',
'#type' => 'link',
'#title' => '<span class="icon">'. t('Add or remove shortcut') .'</span><span class="text">' . $link_text . '</span>',
'#title' => '<span class="icon"></span><span class="text">'. $link_text .'</span>',
'#route_name' => $route_name,
'#route_parameters' => $route_parameters,
'#options' => array('query' => $query, 'html' => TRUE),
......
core/modules/system/css/system.module.css
View file @ 784f08f5
......@@ -365,3 +365,24 @@ tr .ajax-progress-throbber .throbber {
margin-left: auto;
margin-right: auto;
}
/*
* Remove browser styles, especially for <buttons> 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;
}
core/modules/system/css/system.theme.css
View file @ 784f08f5
......@@ -441,15 +441,12 @@ ul.links a.active {
/**
* 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 */
}
......
core/modules/system/system.module
View file @ 784f08f5
......@@ -1390,6 +1390,18 @@ function system_library_info() {
),
);
// 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',
......
core/modules/views_ui/css/views_ui.admin.theme.css
View file @ 784f08f5
......@@ -448,20 +448,31 @@ 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,
.views-displays .tabs.secondary li.active {
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;
......@@ -471,38 +482,38 @@ 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;
......@@ -510,7 +521,7 @@ ul#views-display-menu-tabs li.add ul.action-list li{
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;
}
......@@ -518,18 +529,18 @@ ul#views-display-menu-tabs li.add ul.action-list li{
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;
}
......
core/themes/seven/js/nav-tabs.js 0 → 100644
View file @ 784f08f5
/**
* @file
* Responsive navigation tabs.
* Utilizes jquery.intrinsic.js to calculate if the tabs are larger than their
* container and toggles the 'is-horizontal' class.
*
* This also supports collapsible navigable is the 'is-collasible' class is
* added to the main element, and a target element is included.
*/
(function ($, Drupal) {
"use strict";
function init (i, tab) {
var $tab = $(tab);
var $target = $tab.find('[data-drupal-nav-tabs-target]');
var isCollapsible = $tab.hasClass('is-collapsible');
function openMenu (e) {
$target.toggleClass('is-open');
}
function handleResize (e) {
$tab.addClass('is-horizontal');
var isHorizontal = $tab.parent().width() > $tab.intrinsic('width');
$tab.toggleClass('is-horizontal', isHorizontal);
if(isCollapsible) {
$tab.toggleClass('is-collapse-enabled', !isHorizontal);
}
if (isHorizontal) {
$target.removeClass('is-open');
}
}
$tab.addClass('position-container is-horizontal-enabled');
$tab.on('click.tabs', '[data-drupal-nav-tabs-trigger]', openMenu);
$(window).on('resize.tabs', Drupal.debounce(handleResize)).trigger('resize.tabs');
}
/**
* Initialise the tabs JS.
*/
Drupal.behaviors.navTabs = {
attach: function (context, settings) {
var $tabs = $(context).find('[data-drupal-nav-tabs]');
if ($tabs.length) {
var notSmartPhone = window.matchMedia('(min-width: 300px)');
if (notSmartPhone.matches) {
$tabs.once('nav-tabs').each(init);
}
}
}
};
})(jQuery, Drupal);
core/themes/seven/seven.theme
View file @ 784f08f5
......@@ -6,6 +6,7 @@
*/
use Drupal\Core\Template\RenderWrapper;
use Drupal\Component\Utility\String;
/**
* Implements hook_library_info().
......@@ -27,6 +28,20 @@ function seven_library_info() {
),
);
$libraries['drupal.nav-tabs'] = array(
'version' => \Drupal::VERSION,
'js' => array(
drupal_get_path('theme', 'seven') . '/js/nav-tabs.js' => array('group' => JS_THEME),
),
'dependencies' => array(
array('system', 'matchmedia'),
array('system', 'jquery'),
array('system', 'drupal'),
array('system', 'jquery.once'),
array('system', 'jquery.intrinsic'),
),
);
return $libraries;
}
......@@ -57,6 +72,82 @@ function seven_preprocess_page(&$variables) {
);
}
/**
* Overrides theme_menu_local_tasks().
*
* Returns HTML for primary and secondary local tasks.
*
**/
function seven_menu_local_tasks(&$variables) {
$output = '';
if (!empty($variables['primary'])) {
$variables['primary']['#attached'] = array(
'library' => array(
array('seven', 'drupal.nav-tabs'),
),
);
$variables['primary']['#prefix'] = '<h2 id="primary-tabs-title" class="visually-hidden">' . t('Primary tabs') . '</h2>';
$variables['primary']['#prefix'] .= '<nav role="navigation" class="is-horizontal is-collapsible" aria-labelledby="primary-tabs-title" data-drupal-nav-tabs>';
$variables['primary']['#prefix'] .= '<button class="reset-appearance tabs__tab tabs__trigger" aria-label="Primary tabs display toggle" data-drupal-nav-tabs-trigger>&bull;&bull;&bull;</button>';
$variables['primary']['#prefix'] .= '<ul class="tabs primary clearfix" data-drupal-nav-tabs-target>';
$variables['primary']['#suffix'] = '</ul>';
$variables['primary']['#suffix'] .= '</nav>';
$output .= drupal_render($variables['primary']);
}
if (!empty($variables['secondary'])) {
$variables['secondary']['#attached'] = array(
'library' => array(
array('seven', 'drupal.nav-tabs'),
),
);
$variables['secondary']['#prefix'] = '<h2 id="secondary-tabs-title" class="visually-hidden">' . t('Secondary tabs') . '</h2>';
$variables['secondary']['#prefix'] .= '<nav role="navigation" class="is-horizontal" aria-labelledby="secondary-tabs-title" data-drupal-nav-tabs>';
$variables['secondary']['#prefix'] .= '<ul class="tabs secondary clearfix">';
$variables['secondary']['#suffix'] = '</ul>';
$variables['secondary']['#suffix'] .= '</nav>';
$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 = '<span class="visually-hidden">' . t('(active tab)') . '</span>';
// If the link does not contain HTML already, String::checkPlain() it now.
// After we set 'html'=TRUE the link will not be sanitized by l().
if (empty($link['localized_options']['html'])) {
$link['title'] = String::checkPlain($link['title']);
}
$link['localized_options']['html'] = TRUE;
$link_text = t('!local-task-title!active', array('!local-task-title' => $link['title'], '!active' => $active));
}
if (!empty($link['href'])) {
// @todo - remove this once all pages are converted to routes.
$a_tag = l($link_text, $link['href'], $link['localized_options']);
}
else {
$a_tag = \Drupal::l($link_text, $link['route_name'], $link['route_parameters'], $link['localized_options']);
}
return '<li' . (!empty($variables['element']['#active']) ? ' class="tabs__tab active"' : ' class="tabs__tab"') . '>' . $a_tag . '</li>';
}
/**
* Displays the list of available node types for node creation.
*/
......
core/themes/seven/style.css
View file @ 784f08f5
......@@ -70,9 +70,21 @@ ul.menu li.expanded {
*/
#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;
......@@ -80,7 +92,7 @@ ul.menu li.expanded {
.breadcrumb {
font-size: 0.846em;
line-height: 1em;
padding: 0 0 10px 0;
padding: 20px 0 10px 0;
}
/**
......@@ -103,16 +115,16 @@ ul.menu li.expanded {
* Page title.
*/
#page-title {
background: #333;
padding-top: 20px;
}
#branding h1.page-title {
color: #000;
#branding .page-title {
color: #333;
display: inline-block;
margin: 0;
padding-bottom: 10px;
font-size: 1.385em;
font-weight: normal;
float: left; /* LTR */
font-size: 1.625em;
line-height: 1.875em;
font-weight: 600;
-webkit-font-smoothing: antialiased;
}
[dir="rtl"