Issue #2321505 by LewisNyman: Split Seven's style.css into SMACSS categories.

core/modules/system/src/Tests/Menu/MenuRouterTest.php

@@ -266,7 +266,7 @@ public function testThemeIntegration() {
   protected function doTestThemeCallbackAdministrative() {
     $this->drupalGet('menu-test/theme-callback/use-admin-theme');
     $this->assertText('Active theme: seven. Actual theme: seven.', 'The administrative theme can be correctly set in a theme negotiation.');
-    $this->assertRaw('seven/css/style.css', "The administrative theme's CSS appears on the page.");
+    $this->assertRaw('seven/css/base/elements.css', "The administrative theme's CSS appears on the page.");
   }
 
   /**
@@ -285,7 +285,7 @@ protected function doTestThemeCallbackMaintenanceMode() {
     $this->drupalLogin($admin_user);
     $this->drupalGet('menu-test/theme-callback/use-admin-theme');
     $this->assertText('Active theme: seven. Actual theme: seven.', 'The theme negotiation system is correctly triggered for an administrator when the site is in maintenance mode.');
-    $this->assertRaw('seven/css/style.css', "The administrative theme's CSS appears on the page.");
+    $this->assertRaw('seven/css/base/elements.css', "The administrative theme's CSS appears on the page.");
 
     $this->container->get('state')->set('system.maintenance_mode', FALSE);
   }

core/modules/taxonomy/src/Tests/ThemeTest.php

@@ -39,7 +39,7 @@ function testTaxonomyTermThemes() {
     // should use the administrative theme.
     $vocabulary = $this->createVocabulary();
     $this->drupalGet('admin/structure/taxonomy/manage/' . $vocabulary->id() . '/add');
-    $this->assertRaw('seven/css/style.css', t("The administrative theme's CSS appears on the page for adding a taxonomy term."));
+    $this->assertRaw('seven/css/base/elements.css', t("The administrative theme's CSS appears on the page for adding a taxonomy term."));
 
     // Viewing a taxonomy term should use the default theme.
     $term = $this->createTerm($vocabulary);
@@ -48,6 +48,6 @@ function testTaxonomyTermThemes() {
 
     // Editing a taxonomy term should use the same theme as adding one.
     $this->drupalGet('taxonomy/term/' . $term->id() . '/edit');
-    $this->assertRaw('seven/css/style.css', t("The administrative theme's CSS appears on the page for editing a taxonomy term."));
+    $this->assertRaw('seven/css/base/elements.css', t("The administrative theme's CSS appears on the page for editing a taxonomy term."));
   }
 }

core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php

@@ -167,13 +167,36 @@ public function testRebuildThemeData() {
     // Ensure that the css paths are set with the proper prefix.
     $this->assertEquals(array(
       'screen' => array(
-        'css/seven.base.css' => DRUPAL_ROOT . '/core/themes/seven/css/seven.base.css',
-        'css/style.css' => DRUPAL_ROOT . '/core/themes/seven/css/style.css',
-        'css/layout.css' => DRUPAL_ROOT . '/core/themes/seven/css/layout.css',
+        'css/base/elements.css' => DRUPAL_ROOT . '/core/themes/seven/css/base/elements.css',
+        'css/components/admin-list.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/admin-list.css',
+        'css/components/admin-options.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/admin-options.css',
+        'css/components/admin-panel.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/admin-panel.css',
+        'css/components/block-recent-content.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/block-recent-content.css',
+        'css/components/branding.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/branding.css',
+        'css/components/breadcrumb.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/breadcrumb.css',
         'css/components/buttons.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.css',
         'css/components/buttons.theme.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.theme.css',
+        'css/components/comments.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/comments.css',
+        'css/components/console.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/console.css',
         'css/components/dropbutton.component.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/dropbutton.component.css',
+        'css/components/entity-meta.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/entity-meta.css',
+        'css/components/field-ui.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/field-ui.css',
+        'css/components/form.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/form.css',
+        'css/components/help.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/help.css',
+        'css/components/menus-and-lists.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/menus-and-lists.css',
+        'css/components/modules-page.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/modules-page.css',
+        'css/components/node.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/node.css',
+        'css/components/page-title.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/page-title.css',
+        'css/components/pager.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/pager.css',
+        'css/components/skip-link.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/skip-link.css',
+        'css/components/tables.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/tables.css',
+        'css/components/tabs.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/tabs.css',
         'css/components/tour.theme.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/tour.theme.css',
+        'css/components/update-status.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/update-status.css',
+        'css/components/views-ui.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/views-ui.css',
+        'css/layout/layout.css' => DRUPAL_ROOT . '/core/themes/seven/css/layout/layout.css',
+        'css/layout/node-add.css' => DRUPAL_ROOT . '/core/themes/seven/css/layout/node-add.css',
+        'css/theme/appearance-page.css' => DRUPAL_ROOT . '/core/themes/seven/css/theme/appearance-page.css',
       ),
     ), $info->info['stylesheets']);
     $this->assertEquals(DRUPAL_ROOT . '/core/themes/seven/screenshot.png', $info->info['screenshot']);

core/themes/seven/css/seven.base.css → core/themes/seven/css/base/elements.css

@@ -134,3 +134,10 @@ pre {
   margin: 0.5em 0;
   white-space: pre-wrap;
 }
+details {
+  line-height: 1.295em;
+}
+details summary {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+}

core/themes/seven/css/components/admin-list.css

+/**
+ * Admin lists.
+ */
+ul.admin-list {
+  margin: 0;
+  padding: 0;
+}
+.admin-list li {
+  position: relative;
+  border-top: 1px solid #bfbfbf;
+  margin: 0;
+  list-style-type: none;
+  list-style-image: none;
+  padding: 0;
+}
+.admin-list.compact li {
+  border: none;
+}
+.admin-list li a {
+  background: url(../../../../misc/icons/bebebe/chevron-disc-right.svg) no-repeat 1px 16px; /* LTR */
+  display: block;
+  padding: 14px 15px 14px 25px; /* LTR */
+  min-height: 0;
+}
+[dir="rtl"] .admin-list li a {
+  background: url(../../../../misc/icons/bebebe/chevron-disc-left.svg) no-repeat right 16px;
+  padding-right: 25px;
+  padding-left: 15px;
+}
+.admin-list.compact li a {
+  background-image:  none;
+  padding: 2px 0;
+}
+.admin-list li a:hover,
+.admin-list li a:focus,
+.admin-list li a:active {
+  text-decoration: none;
+}
+.admin-list li a .label {
+  font-size: 1.0769em;
+}
+.admin-list li a:hover .label,
+.admin-list li a:focus .label,
+.admin-list li a:active .label {
+  text-decoration: underline;
+}

core/themes/seven/css/components/admin-options.css

+/* Update options. */
+div.admin-options {
+  background: #f8f8f8;
+  line-height: 30px;
+  height: 30px;
+  padding: 9px;
+  border: 1px solid #ccc;
+  margin: 0 0 10px;
+}
+div.admin-options label {
+  text-transform: uppercase;
+  font: 0.846em/1.875em "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "Lucida Sans", sans-serif;
+}
+div.admin-options label,
+div.admin-options div.form-item {
+  margin-right: 10px; /* LTR */
+  float: left; /* LTR */
+}
+[dir="rtl"] div.admin-options label,
+[dir="rtl"] div.admin-options div.form-item {
+  margin-left: 10px;
+  margin-right: 0;
+  float: right;
+}
+div.admin-options div.form-item {
+  padding: 0;
+  border: 0;
+}

core/themes/seven/css/components/admin-panel.css

+/**
+ * Admin panel.
+ */
+@media screen and (min-width: 40em) {
+  div.admin .right,
+  div.admin .left {
+    width: 49%;
+    margin: 0;
+  }
+}
+div.admin-panel,
+div.admin-panel .body {
+  padding: 0;
+  clear: left;
+}
+div.admin-panel {
+  margin: 0 0 20px;
+  padding: 9px;
+  background: #f8f8f8;
+  border: 1px solid #ccc;
+}
+div.admin-panel h3 {
+  font-size: 0.923em;
+  text-transform: uppercase;
+  margin: 0;
+  padding-bottom: 9px;
+}

core/themes/seven/css/components/block-recent-content.css

+/**
+ * Recent content block.
+ */
+#block-node-recent table,
+#block-node-recent tr {
+  border: none;
+}
+#block-node-recent .more-link {
+  padding: 0 5px 5px 0; /* LTR */
+}
+[dir="rtl"] #block-node-recent .more-link {
+  padding: 0 0 5px 5px;
+}

core/themes/seven/css/components/branding.css

+/**
+ * Branding.
+ */
+#branding {
+  overflow: hidden;
+  background-color: #e0e0d8;
+  padding: 24px 0 0;
+}
+[dir="rtl"] #branding {
+  padding: 20px 20px 0 20px;
+}

core/themes/seven/css/components/breadcrumb.css

+/**
+ * Breadcrumbs.
+ */
+.breadcrumb {
+  font-size: 0.846em;
+  line-height: 1em;
+  padding: 20px 0 10px 0;
+}

core/themes/seven/css/components/comments.css

+div.submitted {
+  color: #898989;
+}

core/themes/seven/css/components/console.css

+/**
+ * Console.
+ */
+#console {
+  margin: 9px 0 10px;
+}

core/themes/seven/css/dialog.theme.css → core/themes/seven/css/components/dialog.theme.css

@@ -34,7 +34,7 @@
   position: absolute;
 }
 .ui-dialog .ui-icon.ui-icon-closethick {
-  background: url(../../../misc/icons/ffffff/ex.svg) 0 0 no-repeat;
+  background: url(../../../../misc/icons/ffffff/ex.svg) 0 0 no-repeat;
   margin-top: -12px;
 }
 .ui-dialog .ui-widget-content.ui-dialog-content {
@@ -77,7 +77,7 @@
   top: 48.5%;
   z-index: 1000;
   background-color: #232323;
-  background-image: url(../../../misc/loading-small.gif);
+  background-image: url(../../../../misc/loading-small.gif);
   background-position: center center;
   background-repeat: no-repeat;
   border-radius: 7px;

core/themes/seven/css/components/entity-meta.css

+/**
+ * Entity meta settings.
+ */
+.entity-meta {
+  background-color: #ececec;
+  border-bottom: 0;
+  border-left: 1px solid #bfbfbf;
+  border-right: 1px solid #bfbfbf;
+  border-top: 0;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
+  margin-top: 0;
+  padding-top: 0;
+}
+.entity-meta-header,
+.entity-meta details {
+  background-color: #f7f7f7;
+  border-top: 1px solid #bfbfbf;
+  border-bottom: 1px solid #bfbfbf;
+}
+.entity-meta-header {
+  padding: 1em 1.5em;
+}
+.entity-meta-header .form-item {
+  margin: .25em 0;
+}
+.entity-meta-header .published {
+  font-size: 1.231em;
+  font-weight: bold;
+  text-shadow: 0 1px 0 #fff;
+}
+.entity-meta-header .changed {
+  font-style: italic; /* As-designed, but really: why is this italic? */
+}
+.entity-meta details {
+  border-left: 0;
+  border-right: 0;
+  border-top: 1px solid #ffffff;
+  margin: 0;
+}
+.entity-meta details[open] {
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
+  background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
+  background-image:      -o-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
+  background-image:         linear-gradient(to bottom, rgba(0, 0, 0, .125), transparent 4px);
+  border-top-width: 0;
+  padding-top: 1px;
+}
+.entity-meta details[open] + [open] {
+  background-image: none;
+  border-top-width: 1px;
+  padding-top: 0;
+}
+.entity-meta details > .details-wrapper {
+  padding-top: 0;
+}
+.entity-meta details > summary {
+  padding: 0.85em 1.25em;
+  text-shadow: 0 1px 0 white;
+}
+.entity-meta details .summary {
+ display: none; /* Hide JS summaries. @todo Rethink summaries. */
+}

core/themes/seven/css/components/field-ui.css

+/* Field UI */
+#field-display-overview input.field-plugin-settings-edit {
+  margin: 0;
+  padding: 1px 8px;
+}
+#field-display-overview tr.field-plugin-settings-changed {
+  background: #ffffbb;
+}
+#field-display-overview tr.drag {
+  background: #ffee77;
+}
+#field-display-overview tr.field-plugin-settings-editing {
+  background: #d5e9f2;
+}
+#field-display-overview .field-plugin-settings-edit-form .form-item {
+  margin: 10px 0;
+}
+#field-display-overview .field-plugin-settings-edit-form .form-submit {
+  margin-bottom: 0;
+}

core/themes/seven/css/components/form.css

+/**
+ * Form elements.
+ */
+form {
+  margin: 0;
+  padding: 0;
+}
+fieldset {
+  margin: 1em 0;
+}
+.fieldgroup {
+  min-width: 0;
+}
+@-moz-document url-prefix() {
+  .fieldgroup {
+    display: table-cell;
+  }
+}
+.form-item {
+  margin: 0.75em 0;
+}
+.form-type-checkbox {
+  padding: 0;
+}
+label {
+  display: table;
+  margin: 0 0 0 0.2em; /* LTR */
+  padding: 0;
+  font-weight: bold;
+}
+[dir="rtl"] label {
+  margin: 0 0.2em 0 0;
+}
+label.error {
+  color: #a51b00;
+}
+label[for] {
+  cursor: pointer;
+}
+.form-item label.option {
+  text-transform: none;
+}
+.form-item label.option input {
+  vertical-align: middle;
+}
+.form-disabled label {
+  color: #737373;
+}
+
+.form-disabled input.form-text,
+.form-disabled input.form-tel,
+.form-disabled input.form-email,
+.form-disabled input.form-url,
+.form-disabled input.form-search,
+.form-disabled input.form-number,
+.form-disabled input.form-color,
+.form-disabled input.form-file,
+.form-disabled textarea.form-textarea,
+.form-disabled select.form-select {
+  border-color: #d4d4d4;
+  background-color: hsla(0, 0%, 0%, .08);
+  box-shadow: none;
+}
+
+.form-item input.error,
+.form-item textarea.error,
+.form-item select.error {
+  border-width: 2px;
+  border-color: #e62600;
+  background-color: hsla(15, 75%, 97%, 1);
+  box-shadow: inset 0 5px 5px -5px #b8b8b8;
+  color: #a51b00;
+}
+.form-item input.error:focus,
+.form-item textarea.error:focus,
+.form-item select.error:focus {
+  border-color: #e62600;
+  outline: 0;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px 1px #e62600;
+  background-color: #fcf4f2;
+}
+.form-required:after {
+  font-weight: bold;
+  color: #e62600;
+  font-size: 1.1em;
+  padding-left: 2px;
+}
+
+
+/* Filter */
+.filter-wrapper {
+  font-size: 0.923em;
+}
+ul.tips,
+div.description,
+.form-item .description {
+  margin: 0.2em 0 0 0;
+  color: #595959;
+  font-size: 0.9em;
+}
+.form-item .description.error {
+  color: #a51b00;
+}
+
+ul.tips li {
+  margin: 0.25em 0 0.25em 1.5em; /* LTR */
+}
+[dir="rtl"] ul.tips li {
+  margin: 0.25em 1.5em 0.25em 0;
+}
+.form-type-radio .description,
+.form-type-checkbox .description {
+  margin-left: 1.5em; /* LTR */
+}
+[dir="rtl"] .form-type-radio .description,
+[dir="rtl"] .form-type-checkbox .description {
+  margin-left: 0;
+  margin-right: 1.5em;
+}
+.form-text,
+.form-textarea {
+  border-radius: 2px;
+  font-size: 1em;
+  line-height: normal;
+}
+
+input.form-autocomplete,
+input.form-text,
+input.form-tel,
+input.form-email,
+input.form-url,
+input.form-search,
+input.form-number,
+input.form-color,
+input.form-file,
+input.form-date,
+input.form-time,
+textarea.form-textarea {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing:    border-box;
+  box-sizing:         border-box;
+  padding: .3em .4em .3em .5em;
+  max-width: 100%;
+  border: 1px solid #b8b8b8;
+  border-top-color: #999;
+  background: #fff;
+  color: #333;
+  border-radius: 2px;
+  background: #fcfcfa;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
+  font-size: 1em;
+  color: #595959;
+  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+  transition: border linear 0.2s, box-shadow linear 0.2s;
+}
+.form-text:focus,
+.form-tel:focus,
+.form-email:focus,
+.form-url:focus,
+.form-search:focus,
+.form-number:focus,
+.form-color:focus,
+.form-file:focus,
+.form-textarea:focus,
+.form-date:focus,
+.form-time:focus {
+  border-color: #40b6ff;
+  outline: 0;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px #40b6ff;
+  background-color: #fff;
+}
+
+.confirm-parent,
+.password-parent {
+  overflow: visible;
+  width: auto;
+}
+
+.form-item .password-suggestions {
+  float: left; /* LTR */
+  clear: left;
+  width: 100%;
+}
+[dir="rtl"] .form-item .password-suggestions {
+  float: right;
+}
+.form-item-pass .description {
+  clear: both;
+}
+
+
+/**
+ * Select elements - Webkit only
+ */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  select {
+    cursor: pointer;
+    -webkit-appearance: none;
+    padding: 1px 1.571em 1px 0.5em; /* LTR */
+    border: 1px solid #a6a6a6;
+    border-radius: 0.143em;
+    background:
+      url(../../../../misc/icons/333333/caret-down.svg) no-repeat 99% 63%,
+      -webkit-linear-gradient(top, #f6f6f3, #e7e7df); /* LTR */
+    text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+    font-size: 0.875rem;
+    transition: all 0.1s;
+    -webkit-font-smoothing: antialiased;
+  }
+  [dir="rtl"] select {
+    padding: 1px 0.714em 1px 1.571em;
+    background-position: 1% 63%, 0 0;
+  }
+  select:focus,
+  select:hover {
+    background-image: url(../../../../misc/icons/333333/caret-down.svg"),
+    -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
+    color: #1a1a1a;
+  }
+  select:hover {
+    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
+  }
+}
+
+/**
+ * Improve spacing of cancel link.
+ */
+#edit-cancel {
+  margin-left: 10px; /* LTR */
+}
+[dir="rtl"] #edit-cancel {
+  margin-left: 0;
+  margin-right: 10px;
+}
+
+/**
+ * Improve form element usability on narrow devices.
+ */
+@media screen and (max-width: 600px) {
+  input.form-autocomplete,
+  input.form-text,
+  input.form-tel,
+  input.form-email,
+  input.form-url,
+  input.form-search,
+  input.form-number,
+  input.form-color,
+  input.form-file,
+  textarea.form-textarea {
+    width: 100%;
+    font-size: 1.2em;
+    line-height: 1.2em;
+  }