Commit e6afbff4 authored by webchick's avatar webchick

Issue #2375673 by DickJohnson, LewisNyman, lauriii, emma.maria, sqndr, Wim...

Issue #2375673 by DickJohnson, LewisNyman, lauriii, emma.maria, sqndr, Wim Leers, stephr: Split Bartik's CSS into SMACSS style components
parent 2ab81dbf
......@@ -102,20 +102,20 @@ function testImport() {
// Verify that both appear as ready to import.
$this->drupalGet('admin/config/development/configuration');
$this->assertText($name);
$this->assertText($dynamic_name);
$this->assertText('core.extension');
$this->assertText('system.theme');
$this->assertText('action.settings');
$this->assertRaw('<td>' . $name);
$this->assertRaw('<td>' . $dynamic_name);
$this->assertRaw('<td>core.extension');
$this->assertRaw('<td>system.theme');
$this->assertRaw('<td>action.settings');
$this->assertFieldById('edit-submit', t('Import all'));
// Import and verify that both do not appear anymore.
$this->drupalPostForm(NULL, array(), t('Import all'));
$this->assertNoText($name);
$this->assertNoText($dynamic_name);
$this->assertNoText('core.extension');
$this->assertNoText('system.theme');
$this->assertNoText('action.settings');
$this->assertNoRaw('<td>' . $name);
$this->assertNoRaw('<td>' . $dynamic_name);
$this->assertNoRaw('<td>core.extension');
$this->assertNoRaw('<td>system.theme');
$this->assertNoRaw('<td>action.settings');
$this->assertNoFieldById('edit-submit', t('Import all'));
......@@ -177,15 +177,15 @@ function testImport() {
// Verify that both appear as ready to import.
$this->drupalGet('admin/config/development/configuration');
$this->assertText('core.extension');
$this->assertText('system.theme');
$this->assertText('action.settings');
$this->assertRaw('<td>core.extension');
$this->assertRaw('<td>system.theme');
$this->assertRaw('<td>action.settings');
// Import and verify that both do not appear anymore.
$this->drupalPostForm(NULL, array(), t('Import all'));
$this->assertNoText('core.extension');
$this->assertNoText('system.theme');
$this->assertNoText('action.settings');
$this->assertNoRaw('<td>core.extension');
$this->assertNoRaw('<td>system.theme');
$this->assertNoRaw('<td>action.settings');
$this->rebuildContainer();
$this->assertFalse(\Drupal::moduleHandler()->moduleExists('ban'), 'Ban module uninstalled during import.');
......
......@@ -277,7 +277,7 @@ protected function doTestThemeCallbackMaintenanceMode() {
// For a regular user, the fact that the site is in maintenance mode means
// we expect the theme callback system to be bypassed entirely.
$this->drupalGet('menu-test/theme-callback/use-admin-theme');
$this->assertRaw('bartik/css/style.css', "The maintenance theme's CSS appears on the page.");
$this->assertRaw('bartik/css/base/elements.css', "The maintenance theme's CSS appears on the page.");
// An administrator, however, should continue to see the requested theme.
$admin_user = $this->drupalCreateUser(array('access site in maintenance mode'));
......@@ -296,7 +296,7 @@ protected function doTestThemeCallbackOptionalTheme() {
// Request a theme that is not installed.
$this->drupalGet('menu-test/theme-callback/use-stark-theme');
$this->assertText('Active theme: bartik. Actual theme: bartik.', 'The theme negotiation system falls back on the default theme when a theme that is not installed is requested.');
$this->assertRaw('bartik/css/style.css', "The default theme's CSS appears on the page.");
$this->assertRaw('bartik/css/base/elements.css', "The default theme's CSS appears on the page.");
// Now install the theme and request it again.
$theme_handler = $this->container->get('theme_handler');
......@@ -315,7 +315,7 @@ protected function doTestThemeCallbackOptionalTheme() {
protected function doTestThemeCallbackFakeTheme() {
$this->drupalGet('menu-test/theme-callback/use-fake-theme');
$this->assertText('Active theme: bartik. Actual theme: bartik.', 'The theme negotiation system falls back on the default theme when a theme that does not exist is requested.');
$this->assertRaw('bartik/css/style.css', "The default theme's CSS appears on the page.");
$this->assertRaw('bartik/css/base/elements.css', "The default theme's CSS appears on the page.");
}
/**
......@@ -324,7 +324,7 @@ protected function doTestThemeCallbackFakeTheme() {
protected function doTestThemeCallbackNoThemeRequested() {
$this->drupalGet('menu-test/theme-callback/no-theme-requested');
$this->assertText('Active theme: bartik. Actual theme: bartik.', 'The theme negotiation system falls back on the default theme when no theme is requested.');
$this->assertRaw('bartik/css/style.css', "The default theme's CSS appears on the page.");
$this->assertRaw('bartik/css/base/elements.css', "The default theme's CSS appears on the page.");
}
}
......@@ -44,7 +44,7 @@ function testTaxonomyTermThemes() {
// Viewing a taxonomy term should use the default theme.
$term = $this->createTerm($vocabulary);
$this->drupalGet('taxonomy/term/' . $term->id());
$this->assertRaw('bartik/css/style.css', t("The default theme's CSS appears on the page for viewing a taxonomy term."));
$this->assertRaw('bartik/css/base/elements.css', t("The default theme's CSS appears on the page for viewing a taxonomy term."));
// Editing a taxonomy term should use the same theme as adding one.
$this->drupalGet('taxonomy/term/' . $term->id() . '/edit');
......
......@@ -91,16 +91,16 @@ function testGrouper() {
'browsers' => array('IE' => TRUE, '!IE' => TRUE),
'basename' => 'external.css',
),
'style.css' => array(
'elements.css' => array(
'group' => 100,
'every_page' => TRUE,
'media' => 'all',
'type' => 'file',
'weight' => 0.001,
'preprocess' => TRUE,
'data' => 'core/themes/bartik/css/style.css',
'data' => 'core/themes/bartik/css/base/elements.css',
'browsers' => array('IE' => TRUE, '!IE' => TRUE),
'basename' => 'style.css',
'basename' => 'elements.css',
),
'print.css' => array(
'group' => 100,
......@@ -163,7 +163,7 @@ function testGrouper() {
$this->assertSame($groups[4]['media'], 'all');
$this->assertSame($groups[4]['preprocess'], TRUE);
$this->assertSame(count($groups[4]['items']), 1);
$this->assertContains($css_assets['style.css'], $groups[4]['items']);
$this->assertContains($css_assets['elements.css'], $groups[4]['items']);
// Check group 6.
$this->assertSame($groups[5]['group'], 100);
......
......@@ -2,8 +2,46 @@ global-styling:
version: VERSION
css:
theme:
css/base/elements.css: {}
css/base/typography.css: {}
css/layout.css: {}
css/style.css: {}
css/components/admin.css: {}
css/components/book.css: {}
css/components/breadcrumb.css: {}
css/components/captions.css: {}
css/components/comments.css: {}
css/components/content.css: {}
css/components/contextual.css: {}
# @see https://www.drupal.org/node/2389735
css/components/dropbutton.component.css: {}
css/components/featured.css: {}
css/components/footer.css: {}
css/components/form.css: {}
css/components/forum.css: {}
css/components/header.css: {}
css/components/help.css: {}
css/components/highlighted.css: {}
css/components/list.css: {}
css/components/messages.css: {}
css/components/node-preview.css: {}
css/components/pager.css: {}
css/components/primary-menu.css: {}
css/components/search.css: {}
css/components/search-results.css: {}
css/components/secondary-menu.css: {}
css/components/shortcut.css: {}
css/components/skip-link.css: {}
css/components/sidebar.css: {}
css/components/table.css: {}
css/components/tabs.css: {}
css/components/tips.css: {}
css/components/triptych.css: {}
css/components/user.css: {}
# @see https://www.drupal.org/node/2389735
css/components/vertical-tabs.component.css: {}
css/components/views.css: {}
css/components/buttons.css: {}
css/components/media.css: {}
css/colors.css: {}
css/print.css: { media: print }
......@@ -21,7 +59,7 @@ maintenance_page:
version: VERSION
css:
theme:
css/maintenance-page.css: {}
css/theme/maintenance-page.css: {}
dependencies:
- system/maintenance
- bartik/global-styling
/* ---------- Overall Specifications ---------- */
body {
line-height: 1.5;
font-size: 87.5%;
word-wrap: break-word;
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
border-bottom: 1px dotted;
}
a:hover,
a:active,
a:focus,
.link:hover,
.link:active,
.link:focus {
text-decoration: none;
border-bottom-style: solid;
}
.field-type-image a,
h1 a,
h2 a,
[role*=banner] a,
.feed-icon,
.contextual-links a,
.toolbar a {
border-bottom: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 1.0em 0 0.5em;
font-weight: inherit;
}
h1 {
font-size: 1.357em;
color: #000;
}
h2 {
font-size: 1.143em;
}
h3 {
font-size: 1.092em;
}
h4 {
font-size: 1.05em;
}
h5 {
font-size: 0.889em;
text-transform: uppercase;
letter-spacing: 0.1em;
}
h6 {
font-size: 0.67em;
text-transform: uppercase;
letter-spacing: 0.1em;
}
p {
margin: 0 0 1.2em;
}
del {
text-decoration: line-through;
}
/* ------------------ Reset Styles ------------------ */
blockquote {
background: #f7f7f7;
border-left: 1px solid #bbb;
font-style: italic;
margin: 1.5em 10px;
padding: 0.5em 10px;
}
[dir="rtl"] blockquote {
border-left: none;
border-right: 4px solid #afafaf;
}
blockquote:before {
color: #bbb;
content: "\201C";
font-size: 3em;
line-height: 0.1em;
margin-right: 0.2em;
vertical-align: -.4em;
}
[dir="rtl"] blockquote:before {
content: "\201D";
}
blockquote:after {
color: #bbb;
content: "\201D";
font-size: 3em;
line-height: 0.1em;
vertical-align: -.45em;
}
[dir="rtl"] blockquote:after {
content: "\201C";
}
blockquote > p:first-child {
display: inline;
}
a.feed-icon {
display: inline-block;
padding: 15px 0 0 0;
}
img {
max-width: 100%;
height: auto;
border: 0;
}
/* ------------------ Fonts ------------------ */
body,
#site-slogan,
.site-slogan,
#page .ui-widget,
.comment-form label,
.node-form label,
.node-form .description {
font-family: Georgia, "Times New Roman", Times, serif;
}
#header,
#footer-wrapper,
.skip-link,
ul.contextual-links,
ul.links,
ul.primary,
.pager__items,
div.field-type-taxonomy-term-reference,
div.messages,
.node__meta,
p.comment-time,
table,
.breadcrumb,
.link {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
input,
textarea,
select,
.form-button,
a.button,
button {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
}
......@@ -56,3 +56,18 @@ a:active,
.region-secondary-menu .menu li a {
color: #fffeff;
}
/* ---------- Color Form ----------- */
[dir="rtl"] .color-form #palette {
margin-left: 0;
margin-right: 20px;
}
[dir="rtl"] .color-form .form-item label {
float: right;
}
[dir="rtl"] .color-form #palette .lock {
right: -20px;
left: 0;
}
/* ---------- Admin-specific Theming ---------- */
.path-admin #content img {
margin-right: 15px; /* LTR */
}
.path-admin #content .simpletest-image img {
margin: 0;
}
.path-admin #admin-dblog img {
margin: 0 5px;
}
/* Block demo mode */
.demo-block {
background: #ffff66;
border: 1px dotted #9f9e00;
color: #000;
font: 90% "Lucida Grande", "Lucida Sans Unicode", sans-serif;
margin: 5px;
padding: 5px;
text-align: center;
text-shadow: none;
}
#featured .demo-block {
font-size: 0.55em;
}
#header .demo-block {
width: 500px;
}
/* Configuration. */
div.admin-panel {
background: #fbfbfb;
border: 1px solid #ccc;
margin: 10px 0;
padding: 0 5px 5px;
}
div.admin-panel h3 {
margin: 16px 7px;
}
div.admin-panel dt {
border-top: 1px solid #ccc;
padding: 7px 0 0;
}
div.admin-panel dd {
margin: 0 0 10px;
}
div.admin-panel .description {
margin: 0 0 14px 7px;
}
.book-navigation .menu {
border-top: 1px solid #d6d6d6;
}
.book-navigation .book-pager {
border-bottom: 1px solid #d6d6d6;
border-top: 1px solid #d6d6d6;
margin: 0;
}
/* -------------- Breadcrumbs -------------- */
.breadcrumb {
font-size: 0.929em;
}
/* ---------------- Buttons ---------------- */
.button {
background-color: #fff;
background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8);
background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8);
border: 1px solid #e4e4e4;
border-bottom-color: #b4b4b4;
border-left-color: #d2d2d2;
border-right-color: #d2d2d2;
color: #3a3a3a;
cursor: pointer;
font-size: 0.929em;
font-weight: normal;
text-align: center;
padding: 0.250em 1.063em;
border-radius: 1em;
}
.button:hover,
.button:active,
.button:focus {
text-decoration: none;
color: #5a5a5a;
background: #dedede;
}
/* -------------- Captions -------------- */
.caption {
margin-bottom: 1.2em;
}
.caption > * {
background: #F3F3F3;
padding: 0.5ex;
border: 1px solid #CCC;
}
.caption > figcaption {
border: 1px solid #CCC;
border-top: none;
padding-top: 0.5ex;
font-size: small;
text-align: center;
}
/* Override Bartik's default blockquote and pre styles when captioned. */
.caption-pre > pre,
.caption-blockquote > blockquote {
margin: 0;
}
.caption-blockquote > figcaption::before {
content: "— ";
}
.caption-blockquote > figcaption {
text-align: left;
}
[dir="rtl"] .caption-blockquote > figcaption {
text-align: right;
}
/* ----------------- Comments ----------------- */
.comment h2.title {
margin-bottom: 1em;
}
.comment .field-name-field-user-picture img {
margin-left: 0; /* LTR */
}
[dir="rtl"] .comment .field-name-field-user-picture img {
margin-right: 0;
}
.comment {
margin-bottom: 20px;
display: table;
vertical-align: top;
}
.comment .attribution {
display: table-cell;
padding: 0 30px 0 0; /* LTR */
vertical-align: top;
overflow: hidden;
}
[dir="rtl"] .comment .attribution {
float: right;
padding: 0 0 0 30px;
}
.comment .attribution img {
margin: 0;
border: 1px solid #d3d7d9;
}
.comment .attribution .username {
white-space: nowrap;
}
.comment .submitted p {
margin: 4px 0;
font-size: 1.071em;
line-height: 1.2;
}
.comment .submitted .comment-time {
font-size: 0.786em;
color: #68696b;
}
.comment .submitted .comment-permalink {
font-size: 0.786em;
}
.comment .content {
font-size: 0.929em;
line-height: 1.6;
}
.comment .comment-arrow {
background: url(../images/comment-arrow.gif) no-repeat 0 center transparent; /* LTR */
border-left: 1px solid;
border-right: 1px solid;
height: 40px;
margin-left: -47px; /* LTR */
margin-top: 10px;
position: absolute;
width: 20px;
}
[dir="rtl"] .comment .comment-arrow {
background-image: url(../images/comment-arrow-rtl.gif);
margin-left: 0;
margin-right: -47px;
}
.comment .comment-text {
padding: 10px 25px;
border: 1px solid #d3d7d9;
display: table-cell;
vertical-align: top;
position: relative;
width: 100%;
}
.comment .indented {
margin-left: 40px; /* LTR */
}
[dir="rtl"] .comment .indented {
margin-right: 40px;
margin-left: 0;
}
.comment ul.links {
padding: 0 0 0.25em 0;
}
.comment ul.links li {
padding: 0 0.5em 0 0; /* LTR */
}
[dir="rtl"] .comment ul.links li {
padding: 0 0 0.5em;
}
.comment.unpublished {
margin-right: 5px; /* LTR */
padding: 5px 2px 5px 5px; /* LTR */
}
[dir="rtl"] .comment.unpublished {
margin-left: 5px;
margin-right: 0;
padding: 5px 5px 5px 2px;
}
.comment.unpublished .comment-text .comment-arrow {
border-left: 1px solid #fff4f4;
border-right: 1px solid #fff4f4;
}
.comment-footer {
display: table-row;
}
/* ----------------- Content ------------------ */
.content,
.node__content {
margin-top: 10px;
}
h1#page-title {
font-size: 2em;
line-height: 1;
}
#content h2 {
margin-bottom: 2px;
font-size: 1.429em;
line-height: 1.4;
}
.node__content {
font-size: 1.071em;
}
.node--view-mode-teaser .node__content {
font-size: 1em;
}
.node--view-mode-teaser h2 {
margin-top: 0;
padding-top: 0.5em;
}
.node--view-mode-teaser h2 a {
color: #181818;
}
.node--view-mode-teaser {
border-bottom: 1px solid #d3d7d9;
margin-bottom: 30px;
padding-bottom: 15px;
}
.node--view-mode-teaser.node--sticky {
background: #f9f9f9;
background: rgba(0, 0, 0, 0.024);
border: 1px solid #d3d7d9;
padding: 0 15px 15px;
}
.node--view-mode-teaser .node__content {
clear: none;
line-height: 1.6;
}
.node__meta {
font-size: 0.857em;
color: #68696b;
margin-bottom: -5px;
}
.node__meta .field-name-field-user-picture img {
float: left; /* LTR */
margin: 1px 20px 0 0; /* LTR */
}
[dir="rtl"] .node__meta .field-name-field-user-picture img {
float: right;
margin-left: 20px;
margin-right: 0;
}
.field-type-taxonomy-term-reference {
margin: 0 0 1.2em;
}
.field-type-taxonomy-term-reference .field-label {
font-weight: normal;
margin: 0;
padding-right: 5px; /* LTR */
}
[dir="rtl"] .field-type-taxonomy-term-reference .field-label {
padding-left: 5px;
padding-right: 0;
}
.field-type-taxonomy-term-reference .field-label,
.field-type-taxonomy-term-reference ul.links {
font-size: 0.8em;
}
.node--view-mode-teaser .field-type-taxonomy-term-reference .field-label,
.node--view-mode-teaser .field-type-taxonomy-term-reference ul.links {
font-size: 0.821em;
}
.field-type-taxonomy-term-reference ul.links {
padding: 0;
margin: 0;
list-style: none;
}
.field-type-taxonomy-term-reference ul.links li {
float: left; /* LTR */
padding: 0 1em 0 0; /* LTR */
white-space: nowrap;
}
[dir="rtl"] .field-type-taxonomy-term-reference ul.links li {
padding: 0 0 0 1em;
float: right;
}
.node__links {
text-align: right;
}
[dir="rtl"] .node__links {
text-align: left;
margin-right: 236px;
margin-left: 0;
}
.field-type-image img,
.field-name-field-user-picture img {
margin: 0 0 1em;
}
ul.links {
color: #68696b;
font-size: 0.821em;
}
.node--unpublished,
.unpublished {
padding: 20px 15px 0;
}
.node--unpublished .comment-text .comment-arrow,
.unpublished .comment-text .comment-arrow {
border-left: 1px solid #fff4f4;
border-right: 1px solid #fff4f4;
}