Commit 32336d58 authored by webchick's avatar webchick

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

parent 9cd14f7b
......@@ -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);
}
......
......@@ -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."));
}
}
......@@ -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']);
......
......@@ -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;
}
/**
* 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;
}
/* 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;
}
/**
* 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;
}
/**
* 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;
}
/**
* Branding.
*/
#branding {
overflow: hidden;
background-color: #e0e0d8;
padding: 24px 0 0;
}
[dir="rtl"] #branding {
padding: 20px 20px 0 20px;
}
/**
* Breadcrumbs.
*/
.breadcrumb {
font-size: 0.846em;
line-height: 1em;
padding: 20px 0 10px 0;
}
div.submitted {
color: #898989;
}
/**
* Console.
*/
#console {
margin: 9px 0 10px;
}
......@@ -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;
......
/**
* 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. */
}
/* 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;
}
/**
* 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;
}
input.form-number {
width: auto;
}
.form-actions input,
.form-wrapper input[type="submit"] {
float: none;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
padding-bottom: 6px;
width: 100%;
}
.form-actions input:first-child,
.form-wrapper input[type="submit"]:first-child {
margin-top: 0;
}
.exposed-filters .filters,
.exposed-filters .form-item label,
.exposed-filters .form-select {
float: none;
margin-bottom: 2px;
width: 100%;
}
details summary {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.password-strength {
width: 100%;
}
div.form-item div.password-suggestions {
float: none;
}
#dblog-filter-form .form-actions {
float: none;
padding: 0;
}
#edit-cancel {
display: block;
margin: 10px 0 0 0;
}
}
/* Exceptions */
#diff-inline-form select,
div.filter-options select {
padding: 0;
}
/**
* Help.
*/
#help {
font-size: 0.923em;
}
#help p {
margin: 0 0 10px;
}
#help div.more-help-link {
text-align: right; /* LTR */
}
[dir="rtl"] #help div.more-help-link {
text-align: left;
}
......@@ -65,26 +65,26 @@
height: 16px;
overflow: hidden;
background-repeat: no-repeat;
background-image: url(../images/ui-icons-222222-256x240.png);
background-image: url(../../images/ui-icons-222222-256x240.png);
}
.ui-widget-content .ui-icon,
.ui-widget-header .ui-icon {
background-image: url(../images/ui-icons-222222-256x240.png);
background-image: url(../../images/ui-icons-222222-256x240.png);
}
.ui-state-default .ui-icon {
background-image: url(../images/ui-icons-888888-256x240.png);
background-image: url(../../images/ui-icons-888888-256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-state-active .ui-icon {
background-image: url(../images/ui-icons-454545-256x240.png);
background-image: url(../../images/ui-icons-454545-256x240.png);
}
.ui-state-highlight .ui-icon {
background-image: url(../images/ui-icons-800000-256x240.png);
background-image: url(../../images/ui-icons-800000-256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url(../images/ui-icons-ffffff-256x240.png);
background-image: url(../../images/ui-icons-ffffff-256x240.png);
}
.ui-widget p .ui-icon {
margin: 2px 3px 0 0;
......@@ -364,7 +364,7 @@
height: 1.4em;
}
.ui-progressbar .ui-progressbar-value {
background: #0072b9 url(../../../misc/progress.gif);
background: #0072b9 url(../../../../misc/progress.gif);
height: 1.5em;
}