From 784f08f519c76d1a2e75f07fcd06ad3fd4638b09 Mon Sep 17 00:00:00 2001
From: webchick <webchick@24967.no-reply.drupal.org>
Date: Sat, 8 Feb 2014 12:57:42 -0800
Subject: [PATCH] Issue #1490402 by LewisNyman, nod_, mcjim, mdrummond,
rteijeiro, jessebeach, Bojhan, ry5n: Redesign tabs and the content header.
---
core/misc/icons/0074bd/chevron-left.png | 3 +
core/misc/icons/0074bd/chevron-left.svg | 1 +
core/misc/icons/0074bd/chevron-right.png | 3 +
core/misc/icons/0074bd/chevron-right.svg | 1 +
core/misc/jquery.intrinsic.js | 51 ++
core/modules/shortcut/css/shortcut.icons.css | 41 +-
core/modules/shortcut/css/shortcut.module.css | 18 +-
core/modules/shortcut/css/shortcut.theme.css | 38 ++
core/modules/shortcut/images/favstar.png | 8 +
core/modules/shortcut/images/favstar.svg | 1 +
core/modules/shortcut/images/shortcut-add.png | 5 -
core/modules/shortcut/shortcut.module | 2 +-
core/modules/system/css/system.module.css | 21 +
core/modules/system/css/system.theme.css | 7 +-
core/modules/system/system.module | 12 +
.../views_ui/css/views_ui.admin.theme.css | 47 +-
core/themes/seven/js/nav-tabs.js | 56 +++
core/themes/seven/seven.theme | 91 ++++
core/themes/seven/style.css | 437 ++++++++++++------
.../templates/maintenance-page.html.twig | 4 +-
core/themes/seven/templates/page.html.twig | 21 +-
21 files changed, 634 insertions(+), 234 deletions(-)
create mode 100644 core/misc/icons/0074bd/chevron-left.png
create mode 100644 core/misc/icons/0074bd/chevron-left.svg
create mode 100644 core/misc/icons/0074bd/chevron-right.png
create mode 100644 core/misc/icons/0074bd/chevron-right.svg
create mode 100644 core/misc/jquery.intrinsic.js
create mode 100755 core/modules/shortcut/images/favstar.png
create mode 100644 core/modules/shortcut/images/favstar.svg
delete mode 100644 core/modules/shortcut/images/shortcut-add.png
create mode 100644 core/themes/seven/js/nav-tabs.js
diff --git a/core/misc/icons/0074bd/chevron-left.png b/core/misc/icons/0074bd/chevron-left.png
new file mode 100644
index 000000000000..e42435d48258
--- /dev/null
+++ b/core/misc/icons/0074bd/chevron-left.png
@@ -0,0 +1,3 @@
+�PNG
+
+���
IHDR��������� ��a���EIDATx�ݓ� � ɑ2��8�d�� |5p��#�鑔�'��A,�ɂ�,p��nr������/��? ��zG� ����IEND�B`�
\ No newline at end of file
diff --git a/core/misc/icons/0074bd/chevron-left.svg b/core/misc/icons/0074bd/chevron-left.svg
new file mode 100644
index 000000000000..122e1c09991a
--- /dev/null
+++ b/core/misc/icons/0074bd/chevron-left.svg
@@ -0,0 +1 @@
+<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>
diff --git a/core/misc/icons/0074bd/chevron-right.png b/core/misc/icons/0074bd/chevron-right.png
new file mode 100644
index 000000000000..e2ff9a93dd9a
--- /dev/null
+++ b/core/misc/icons/0074bd/chevron-right.png
@@ -0,0 +1,3 @@
+�PNG
+
+���
IHDR��������� ��a���FIDATx�ݓ� � C;�#e�q�h~P<�H�� �#�V>N�i��1�v�t�GB-�#)�@� �`�;��^�� zG�������IEND�B`�
\ No newline at end of file
diff --git a/core/misc/icons/0074bd/chevron-right.svg b/core/misc/icons/0074bd/chevron-right.svg
new file mode 100644
index 000000000000..b16a8ce89d58
--- /dev/null
+++ b/core/misc/icons/0074bd/chevron-right.svg
@@ -0,0 +1 @@
+<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>
diff --git a/core/misc/jquery.intrinsic.js b/core/misc/jquery.intrinsic.js
new file mode 100644
index 000000000000..3d05412f023c
--- /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 ($) {
+ '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);
diff --git a/core/modules/shortcut/css/shortcut.icons.css b/core/modules/shortcut/css/shortcut.icons.css
index d7f5970a8d4c..143b1158a55e 100644
--- a/core/modules/shortcut/css/shortcut.icons.css
+++ b/core/modules/shortcut/css/shortcut.icons.css
@@ -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 */
}
diff --git a/core/modules/shortcut/css/shortcut.module.css b/core/modules/shortcut/css/shortcut.module.css
index 05672e9624b0..d9e556ea77ee 100644
--- a/core/modules/shortcut/css/shortcut.module.css
+++ b/core/modules/shortcut/css/shortcut.module.css
@@ -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;
}
diff --git a/core/modules/shortcut/css/shortcut.theme.css b/core/modules/shortcut/css/shortcut.theme.css
index 018f32880d1c..c7bd081a916f 100644
--- a/core/modules/shortcut/css/shortcut.theme.css
+++ b/core/modules/shortcut/css/shortcut.theme.css
@@ -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);
+}
diff --git a/core/modules/shortcut/images/favstar.png b/core/modules/shortcut/images/favstar.png
new file mode 100755
index 000000000000..bd51fde6fd52
--- /dev/null
+++ b/core/modules/shortcut/images/favstar.png
@@ -0,0 +1,8 @@
+�PNG
+
+���
IHDR���P������غ����IDATXG�XkPSG�{�@�X�"tF�?��RG�೭�'Qe���c SZ �z[!Z �:�(�@m%��G��l���"vF��h�A^��{�{�21$�&�Ow&��ݳߞ���
�b�㚝�(��&�� �ܩ<~�N� ����#���`lZ���F��������6�AuL���$p�,n��G���z��88�xD�T��i��Ɔ��Dn#��#m/ �7�L�\x�*dq�V@�!@��j��6��94o��r�M&O^�6�.���j�� i#ҧ�*df���Z���[_���J�b��P� 34�����O�)�y$�6 ����'�ڲ#M��9��pOwGg,�n�����d��x��0*ɍ#'P6{�}�2��U�'�Ӧp��a����ZKl�R�د�
+f���5�I�1���U5��E�6k�m����k���3#�Ï>�G��5?ԜМ V��P���J(� �e�1�8��s�,J��D� n��eU���䕱�m��$�S1q�g���8 ��/�E����fG�G-6k{ W�w$xP<Z�N���ָq� <�_fy���
(PIL���U��(�W ���e���
l�]���E�þO����`�� ��)�����a#P�-�b��o��s���������>�{������K(��c߭ŨwZx9���6aS߭��W'0���^p�gmkW�%�&5D ����T�*��j������ٵvլ ��IST%��!��L8��ٽ>E!
+���3��M͠D[ڳ�����浊$��)�#��������c:D����@$<AIR�'��/s�ڏ�K�= DZT`�f2��.������X"���{��� p��l���H\ �q}�����Ĺql�4�6���� g&'�@��1�&
+`������xI�3��e�sTfO�r zio ﲈ�����. ���=w�|_�����m�"�2������?�0��8��_ O��O��n��X�=���}K#V��ϥ�HQ���^vf�O��C
+��kl
�U�+�� �6��dYw�=����r%(�p�b�����Ͽ�l�#ީ��P� ���m��u���B���(� a�Iq�5qP� ����0��غC �s�+;�5H����v�$r��N�� U`႘z�����A�1B��"� {O��� �� �;医x� ��S&������l}���rf�>ؕ�5�͇�ܟ6�?|�o�!E���2X�d����V��d��Қlv�⡜���5q���AA���~�/ۺ�G�u��>I&��!<��7�m�fVE>�s��c��x���ХS��d���
ꃥΏL��h����ƃwU"a^�n���4��J��-�y՚�L�Sy�������@�65L����4tڒqh�{��:�����I��@U?���]�����1��o��W7T�Q$v���Ck��
�c@��I M� 2g���I����k���"mI_�x8���9�Ώ�z���i�
�rn���e#Ҧ��I&O )֖�niy��z�JO�K����������:3q�Aj6�@��)�R�J]NQ��o�T3a��Y��X ǂ��^���h⡄�|�Rp�n��Wo���3y �3�"�� �`�<�S�g8��I���u���6��Ũ�{<
+�+��Xt|�\��ʵ9���*�������N�;^� �z0�G
ooF�>���^k_�����@�ppi��v;WÓ&�5��
���L�f[���p�y��B?
������IEND�B`�
\ No newline at end of file
diff --git a/core/modules/shortcut/images/favstar.svg b/core/modules/shortcut/images/favstar.svg
new file mode 100644
index 000000000000..9c8ef1da5c0a
--- /dev/null
+++ b/core/modules/shortcut/images/favstar.svg
@@ -0,0 +1 @@
+<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
diff --git a/core/modules/shortcut/images/shortcut-add.png b/core/modules/shortcut/images/shortcut-add.png
deleted file mode 100644
index 2924557bfaab..000000000000
--- a/core/modules/shortcut/images/shortcut-add.png
+++ /dev/null
@@ -1,5 +0,0 @@
-�PNG
-
-���
IHDR������$����
- ���gAMA����|�Q�����PLTE�����������������������������������������������������������إ��~~~���NNNlllHHH���EEExxx�����ɥ�����pql���---���������cd_KKK_`[������|�����
tRNS��lo�������6e����-IDAT(�]�Y��0D��B&���v��O7vg,��>Ѓ�Z�O���dIA�s8~�/ͱ�>�`��l�L��0 ��KfN.)~�A3sژF��l�i&�8�A�ĭJ�*!u���b朔�{e춦�c}T����� �>�U4 ����)�EV�������{��T52���U��f�j�JJd ,��U
-�Rt�Wkpe�:v~*s �����q��٢,�_B��5/������2���[d d�r[��̜BҬ��w��y�T6VC7B�%� S�V%�[���d7�̹)]w�1_M]����;<�<=6��a����8�m�ڴ[�����IEND�B`�
\ No newline at end of file
diff --git a/core/modules/shortcut/shortcut.module b/core/modules/shortcut/shortcut.module
index a988cf47a57d..dd7298fa1191 100644
--- a/core/modules/shortcut/shortcut.module
+++ b/core/modules/shortcut/shortcut.module
@@ -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),
diff --git a/core/modules/system/css/system.module.css b/core/modules/system/css/system.module.css
index dddac44b3a1d..fdf5ac2d7ad9 100644
--- a/core/modules/system/css/system.module.css
+++ b/core/modules/system/css/system.module.css
@@ -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;
+}
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index f205034aa166..9a0153dcef49 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -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 */
}
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index 065d2805a017..1657f9f28f26 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -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',
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 0a4aa707e4b6..e6f0614b3762 100644
--- a/core/modules/views_ui/css/views_ui.admin.theme.css
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -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;
}
diff --git a/core/themes/seven/js/nav-tabs.js b/core/themes/seven/js/nav-tabs.js
new file mode 100644
index 000000000000..d48711aed811
--- /dev/null
+++ b/core/themes/seven/js/nav-tabs.js
@@ -0,0 +1,56 @@
+/**
+ * @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);
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index 9db50d1fcffe..409632be2602 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -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>•••</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.
*/
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index 0d594cb07e3c..aa699e081b9d 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -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"] #branding h1.page-title {
float: right;
@@ -128,152 +140,292 @@ ul.menu li.expanded {
/**
* Tabs.
*/
-ul.primary {
- float: right; /* LTR */
- border-bottom: none;
- text-transform: uppercase;
- font-size: 0.923em;
- margin: 0;
- padding-top: 0;
-}
-[dir="rtl"] ul.primary {
- float: left;
-}
-ul.primary li {
- float: left; /* LTR */
- list-style: none;
- height: 2.60em;
- margin: 0 2px;
-}
-[dir="rtl"] ul.primary li {
- float: right;
+.is-collapse-enabled .tabs,
+.is-horizontal .tabs {
+ position: relative;
}
-ul.primary li a:link,
-ul.primary li a.active,
-ul.primary li a:active,
-ul.primary li a:visited,
-ul.primary li a:hover,
-ul.primary li.active a {
+.is-collapse-enabled .tabs:before,
+.is-horizontal .tabs:before {
+ content: '';
display: block;
- float: left; /* LTR */
- padding: 0.615em 18px;
- background-color: #a6a7a2;
- color: #000;
- font-weight: bold;
- border-width: 1px 1px 0 1px;
- border-style: solid;
- border-color: #a6a7a2;
- border-radius: 8px 8px 0 0;
-}
-[dir="rtl"] ul.primary li a:link,
-[dir="rtl"] ul.primary li a.active,
-[dir="rtl"] ul.primary li a:active,
-[dir="rtl"] ul.primary li a:visited,
-[dir="rtl"] ul.primary li a:hover,
-[dir="rtl"] ul.primary li.active a {
- float: right;
-}
-ul.primary li.active a,
-ul.primary li.active a.active,
-ul.primary li.active a:active,
-ul.primary li.active a:visited {
- background-color: #fff;
- border-color: #c9cac4;
+ background-color: #A6A6A6;
+ height: 1px;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ z-index: 10;
+ right: 0;
}
-ul.primary li a:hover {
- color: #fff;
+
+/* 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;
}
-ul.primary li.active a:hover {
- color: #000;
+
+/**
+ * Tab
+ *
+ * 1. Required by some elements such as <button>
+ * 2. Fixed height needed to ensure alignment with absolutely-positioned
+ * active tab.
+ */
+.tabs__tab {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ margin: -1px 0 0;
+ padding: 9px 2em 7px 1em;
+ width: 100%; /* 1 */
+ border: 1px solid #bfbfbf;
+ background-color: rgba(242, 242, 240, 0.7);
+ color: #0074bd;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
-.tabs-secondary {
- clear: both;
+.tabs__tab:hover {
+ color: #008ee6;
+ background-color: #fafaf7;
}
-ul.secondary {
- float: right; /* LTR */
- font-size: 0.923em;
- padding: 0 3px 5px;
- line-height: 1.385em;
- overflow: hidden;
- background-color: #fff;
+li.tabs__tab {
+ padding: 0;
}
-[dir="rtl"] ul.secondary {
- float: left;
+li.tabs__tab a {
+ padding: 9px 2em 7px 1em;
}
-ul.secondary li {
- margin: 0 5px;
- float: none; /* LTR */
+.tabs a:hover,
+.tabs a:focus {
+ text-decoration: none;
}
-[dir="rtl"] ul.secondary li {
- float: none;
+
+/* Primary tabs */
+.tabs.primary {
+ clear: both;
+ margin: 16px 0 0;
+ margin: 1rem 0 0;
}
-ul.secondary li a {
- background-color: #ddd;
- color: #000;
- display: inline-block;
+.tabs.primary .tabs__tab.active {
+ z-index: 15;
+ border-color: #a6a6a6;
+ border-radius: 4px 0 0 0;
+ background-color: #ffffff;
+ color: #004f80;
}
-ul.secondary li a,
-ul.secondary li a:hover,
-ul.secondary li.active a,
-ul.secondary li.active a.active {
- padding: 2px 10px;
- border-radius: 7px;
+.tabs.primary a {
+ background: none;
}
-ul.secondary li a:hover,
-ul.secondary li.active a,
-ul.secondary li.active a.active {
- color: #fff;
- background: #666;
+.tabs.primary a:focus {
+ color: #008ee6;
+ background-color: #fafaf7;
+ text-decoration: underline;
}
-#content {
- clear: left;
+.tabs.primary .active a:focus {
+ background: none;
+ text-decoration: underline;
}
-@media screen and (max-width:56.538em) { /* 735px */
- .touch #branding {
- padding-right: 0;
- position: relative;
+
+/* Only add the arrow if there's space */
+@media screen and (min-width:18.75em) { /* 300px */
+ .tabs.primary a {
+ background: url(../../misc/icons/0074bd/chevron-right.svg) 99% center no-repeat;
}
- .touch ul.primary {
- clear: both;
- float: none;
- margin-bottom: -3px;
- overflow-x: scroll;
- -webkit-overflow-scrolling: touch;
- white-space: nowrap;
- padding-right: 40px;
+ .no-svg .tabs.primary a {
+ background-image: url(../../misc/icons/0074bd/chevron-right.png);
}
- .touch #branding:after {
- background-image: -moz-linear-gradient(360deg, rgba(224, 224, 216, 0), #E0E0D8 80%);
- background-image: -o-linear-gradient(360deg, rgba(224, 224, 216, 0), #E0E0D8 80%);
- background-image: -webkit-linear-gradient(360deg, rgba(224, 224, 216, 0), #E0E0D8 80%);
- background-image: linear-gradient(360deg, rgba(224, 224, 216, 0), #E0E0D8 80%);
- content: ' ';
- display: block;
- float: right;
- height: 40px;
- width: 80px;
- position: relative;
- right: 0;
- top: -40px;
- margin-bottom: -40px;
+ [dir="rtl"] .tabs.primary a {
+ background: url(../../misc/icons/0074bd/chevron-left.svg) 1% center no-repeat;
}
- .touch ul.primary li {
- float: none;
- white-space: nowrap;
+ [dir="rtl"] .no-svg .tabs.primary a {
+ background-image: url(../../misc/icons/0074bd/chevron-left.png);
}
- .touch ul.primary li a:link,
- .touch ul.primary li a.active,
- .touch ul.primary li a:active,
- .touch ul.primary li a:visited,
- .touch ul.primary li a:hover,
- .touch ul.primary li.active a {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- text-align: center;
- width: 100%;
+ .tabs.primary .tabs__tab.active a {
+ background-image: none;
}
}
+.tabs__trigger {
+ display: none;
+}
+
+/* JS dependent styling */
+ .is-collapse-enabled .tabs__trigger {
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ display: block;
+ position: absolute;
+ z-index: 10;
+ right: 0;
+ top: 2px;
+ left: auto;
+ width: 25%;
+ padding-right: 4px;
+ padding-left: 4px;
+ border-left: 0;
+ border-radius: 0 4px 0 0;
+ font-family: Arial, sans-serif;
+ font-size: 1.25em;
+ letter-spacing: 0.1em;
+ text-align: center;
+ outline: 0;
+}
+[dir="rtl"] .is-collapse-enabled .tabs__trigger {
+ border-right: 0;
+ border-left: 1px solid #bfbfbf;
+ border-radius: 4px 0 0 0;
+ right: auto;
+ left: 0;
+ top: 11px;
+}
+.is-collapse-enabled .tabs {
+ padding-top: 38px;
+ max-height: 0;
+}
+.tabs.is-open {
+ max-height: 999em;
+ padding-bottom:16px;
+ padding-bottom: 1rem;
+}
+.is-collapse-enabled .tabs__tab.active {
+ position: absolute;
+ top: 2px;
+ left: 0;
+ width: 75%;
+ border-bottom: 0;
+}
+[dir="rtl"] .is-collapse-enabled .tabs__tab.active {
+ left: auto;
+ right: 0;
+}
+.is-collapse-enabled .tabs.primary a.active:before {
+ content: none;
+}
+.is-open .tabs__tab.active {
+ border-color: #a6a6a6;
+ background-color: #ffffff;
+ color: #004f80;
+ border-bottom: 1px solid #a6a6a6;
+}
+
+/* Styles for the horizontal state always take priority */
+.is-horizontal .tabs {
+ max-height: none !important;
+ padding-top: 0 !important;
+ overflow: visible;
+}
+.is-horizontal .tabs__tab {
+ float: left;
+ height: auto;
+ width: auto;
+ margin: 0 0 -1px;
+ text-align: center;
+ border-bottom-color: #a6a6a6;
+}
+[dir="rtl"] .is-horizontal .tabs__tab {
+ float: right;
+}
+.is-horizontal .tabs__tab + .tabs__tab {
+ margin-left: -1px;
+}
+.is-horizontal .tabs.primary .tabs__tab:first-child {
+ border-radius: 4px 0 0 0;
+}
+[dir="rtl"] .is-horizontal .tabs.primary .tabs__tab:first-child {
+ border-radius: 0 4px 0 0;
+}
+.is-horizontal .tabs.primary .tabs__tab:last-child {
+ border-radius: 0 4px 0 0;
+}
+[dir="rtl"] .is-horizontal .tabs.primary .tabs__tab:last-child {
+ border-radius: 4px 0 0 0;
+}
+
+/* Override the states above */
+.is-horizontal .tabs__tab.active,
+.is-horizontal .tabs.primary .tabs__tab.active,
+[dir="rtl"] .is-horizontal .tabs.primary .tabs__tab.active {
+ border-radius: 4px 4px 0 0;
+ position: relative;
+ width: auto;
+ top: 0;
+ border-bottom: 0;
+ margin: 0 -4px;
+}
+[dir="rtl"] .is-horizontal .tabs__tab.active {
+ margin: 0 -6px;
+}
+.is-horizontal .tabs.primary a {
+ background-image: none;
+ padding: 7px 2em 7px 2em;
+}
+.is-horizontal .tabs__trigger {
+ display: none;
+}
+
+/* Secondary tabs */
+.tabs.secondary {
+ display: block;
+ margin-top: 16px;
+ margin-top: 1rem;
+}
+.tabs.secondary .tabs__tab {
+ display: block;
+ padding: 5px 15px 5px 16px;
+ margin-left: -1px;
+ color: #0074bd;
+ -webkit-transition: border-color 0.2s, background-color 0.2s;
+ -moz-transition: border-color 0.2s, background-color 0.2s;
+ transition: border-color 0.2s, background-color 0.2s;
+}
+.tabs.secondary .tabs__tab + .tabs__tab {
+ border-top: 1px solid #d9d8d4;
+}
+.tabs.secondary .tabs__tab.active {
+ color: #004f80;
+ border-left: 2px solid #004f80;
+ padding-left: 15px;
+}
+.tabs.secondary .tabs__tab:hover {
+ color: #008ee6;
+ border-left: 2px solid #008ee6;
+ padding-left: 15px;
+}
+.tabs.secondary a {
+ background-color: transparent;
+ padding: 7px 13px 5px;
+ text-decoration: none;
+}
+.tabs.secondary .active a {
+ color: #004f80;
+}
+.tabs.secondary a:focus {
+ text-decoration: underline;
+}
+
+/* Styles for the horizontal state */
+.is-horizontal .tabs.secondary .tabs__tab {
+ background: none;
+ float: left;
+ position: relative;
+ top: 0;
+ z-index: 15;
+ margin-left: 1em;
+ margin-right: 1em;
+ border-bottom: 2px solid transparent;
+ border-left: 1px solid transparent;
+ border-right-color: transparent;
+ border-top: 0;
+ padding: 0;
+}
+.is-horizontal .tabs.secondary .tabs__tab.active {
+ border-bottom-color: #004f80;
+}
+.is-horizontal .tabs.secondary .tabs__tab:hover {
+ border-bottom-color: #008ee6;
+}
/**
* Page layout.
@@ -283,7 +435,7 @@ ul.secondary li.active a.active {
color: #333;
margin-left: 0.8125em;
margin-right: 0.8125em;
- padding: 20px 0 40px 0;
+ padding: 0 0 40px 0;
position: relative;
}
@media screen and (min-width:28.125em) { /* 450px */
@@ -873,7 +1025,7 @@ body.in-maintenance #page {
padding-top: 2em;
width: 90%;
}
-body.in-maintenance #branding h1 {
+body.in-maintenance .branding__inner {
max-width: 770px;
margin: 0 auto;
float: none;
@@ -931,15 +1083,6 @@ body.in-maintenance #logo {
color: green;
}
-/* Shortcut theming */
-.add-or-remove-shortcuts a:focus span.text,
-.add-or-remove-shortcuts a:hover span.text {
- color: #fff;
- background-color: #5f605b;
- padding: 0 6px;
- border-radius: 5px;
-}
-
/* Field UI */
#field-display-overview input.field-plugin-settings-edit {
diff --git a/core/themes/seven/templates/maintenance-page.html.twig b/core/themes/seven/templates/maintenance-page.html.twig
index 9fb55223f963..b962317b277e 100644
--- a/core/themes/seven/templates/maintenance-page.html.twig
+++ b/core/themes/seven/templates/maintenance-page.html.twig
@@ -24,7 +24,9 @@
{{ page_top }}
<header id="branding">
- {% if title %}<h1 class="page-title">{{ title }}</h1>{% endif %}
+ <div class="branding__inner">
+ {% if title %}<h1 class="page-title">{{ title }}</h1>{% endif %}
+ </div>
</header>
<div id="page">
diff --git a/core/themes/seven/templates/page.html.twig b/core/themes/seven/templates/page.html.twig
index 5a5043172c4d..77dde87d7059 100644
--- a/core/themes/seven/templates/page.html.twig
+++ b/core/themes/seven/templates/page.html.twig
@@ -66,15 +66,16 @@
*/
#}
<header id="branding" class="clearfix">
- {{ breadcrumb }}
- {{ title_prefix }}
- {% if title %}
- <h1 class="page-title">{{ title }}</h1>
- {% endif %}
- {{ title_suffix }}
- {% if primary_local_tasks %}
- {{ primary_local_tasks }}
- {% endif %}
+ <div class="branding__inner">
+ {{ title_prefix }}
+ {% if title %}
+ <h1 class="page-title">{{ title }}</h1>
+ {% endif %}
+ {{ title_suffix }}
+ {% if primary_local_tasks %}
+ {{ primary_local_tasks }}
+ {% endif %}
+ </div>
</header>
<div id="page">
@@ -82,6 +83,8 @@
<div class="tabs-secondary clearfix" role="navigation">{{ secondary_local_tasks }}</div>
{% endif %}
+ {{ breadcrumb }}
+
<main id="content" class="clearfix" role="main">
<div class="visually-hidden"><a id="main-content"></a></div>
{% if messages %}
--
GitLab