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 0000000000..e42435d482
--- /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 0000000000..122e1c0999
--- /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 0000000000..e2ff9a93dd
--- /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 0000000000..b16a8ce89d
--- /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 0000000000..3d05412f02
--- /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 d7f5970a8d..143b1158a5 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 05672e9624..d9e556ea77 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 018f32880d..c7bd081a91 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 0000000000..bd51fde6fd
--- /dev/null
+++ b/core/modules/shortcut/images/favstar.png
@@ -0,0 +1,8 @@
+‰PNG
+
+   IHDR   P      Øº×  ýIDATXGíXkPSGÞ{ó€@X§"tF?•‡RG…à³­Ö'Qe†¶´cSZ€z[!ZÚ:þ(ã@m%¼ÄGÕñl©ƒ"vF¢£h¬A^{»{á21$÷&ÈOw&™›Ý³ßžûížóÞ´×b ãš¼(Â×&«‘ÏÜ©<~ñN×¶ñÑÆ#”Á¾`lZ³ßÚ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’±ÊÜfGÔG-6k{ Wòw$xP<Z¾NßØõÖ¸qô	<–_fyôÈä(PIL¤çÀ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Þ Ÿˆ@$<AIRù'Š«/sÚ¯Kš=Ç±T`³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¹ødY×¿wï=¶ö¶Ír%(´pàbý„À€ŽÏ¿úlŽ#Þ©ò«ÀP×üýÅmíÿu†ÒãB ‡ß(ôaŠIqªÂŠ5qPœ	ÅÐîØ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ÊÔÍÿ4tÚ’qhì{Á”:°¯²©±IïˆçŒ@U?´Þí]÷ûÇøÉ1œšoë·ÑW7TëQ$v™ÿ²Ckñ÷åc@îÎIM¼2gÖÉäI‘Çýåk½µß"mI_Ýx8®ž9“Î÷zúäÐi‹Ûrn¢Â×e#Ò¦é×®—I&O)Ö–Üniy‹»z JOªK’¯žþÐø°åäï:3q¸Aj6Œ@”ð)Š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 0000000000..9c8ef1da5c
--- /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 2924557bfa..0000000000
--- a/core/modules/shortcut/images/shortcut-add.png
+++ /dev/null
@@ -1,5 +0,0 @@
-‰PNG
-
-   IHDR      $   ¤
-   gAMA  ±Ž|ûQ“   “PLTE   ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿùùùÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ¥¥£ÙÚØááà×ØÖ÷ø÷ÛÛÚÙÙØ¥¥¢~~~‡‡‡NNNlllHHH½½½EEExxx´´´ÉÉÉ¥¥¥££ pql···---±±±ûûûããâcd_KKK_`[ÿÿÿ   |À®   tRNS ÒloÀùÃÏÆùó6e£…  -IDAT(Ï]’YŽƒ0DÛØB&Ù÷…vÈýO7vg,—§>Ðƒ–ZÕO‘ÑdIAäs8~œ/Í±‡>‹`ÿálL²Ð0ú‘KfN.)~ÛA3sÚ˜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%©[•Ðúd7ÅÌ¹)]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 a988cf47a5..dd7298fa11 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 dddac44b3a..fdf5ac2d7a 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 f205034aa1..9a0153dcef 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 065d2805a0..1657f9f28f 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 0a4aa707e4..e6f0614b37 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 0000000000..d48711aed8
--- /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 9db50d1fcf..409632be26 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>&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.
  */
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index 0d594cb07e..aa699e081b 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 9fb55223f9..b962317b27 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 5a5043172c..77dde87d70 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

