diff --git a/core/modules/simpletest/tests/menu.test b/core/modules/simpletest/tests/menu.test index 41379ad..97e329d 100644 --- a/core/modules/simpletest/tests/menu.test +++ b/core/modules/simpletest/tests/menu.test @@ -282,7 +282,7 @@ class MenuRouterTestCase extends DrupalWebTestCase { theme_enable(array('stark')); $this->drupalGet('menu-test/theme-callback/use-stark-theme'); $this->assertText('Custom theme: stark. Actual theme: stark.', t('The theme callback system uses an optional theme once it has been enabled.')); - $this->assertRaw('stark/layout.css', t("The optional theme's CSS appears on the page.")); + $this->assertRaw('stark/css/layout.css', t("The optional theme's CSS appears on the page.")); } /** @@ -316,7 +316,7 @@ class MenuRouterTestCase extends DrupalWebTestCase { // should be honored. $this->drupalGet('menu-test/no-theme-callback'); $this->assertText('Custom theme: stark. Actual theme: stark.', t('The result of hook_custom_theme() is used as the theme for the current page.')); - $this->assertRaw('stark/layout.css', t("The Stark theme's CSS appears on the page.")); + $this->assertRaw('stark/css/layout.css', t("The Stark theme's CSS appears on the page.")); } /** diff --git a/core/modules/simpletest/tests/theme.test b/core/modules/simpletest/tests/theme.test index 1550a80..978887c 100644 --- a/core/modules/simpletest/tests/theme.test +++ b/core/modules/simpletest/tests/theme.test @@ -499,7 +499,7 @@ class ThemeHookInitUnitTest extends DrupalWebTestCase { $this->assertRaw('Themed output generated in hook_init()'); // Verify that the default theme's CSS still appears when the theme system // is initialized in hook_init(). - $this->assertRaw('stark/layout.css'); + $this->assertRaw('stark/css/layout.css'); } } diff --git a/core/themes/stark/css/ie-rtl.css b/core/themes/stark/css/ie-rtl.css new file mode 100644 index 0000000..1c72de3 --- /dev/null +++ b/core/themes/stark/css/ie-rtl.css @@ -0,0 +1,31 @@ + +/** + * @file + * Right-to-left overrides for IE + */ + +#content { + float: right; +} +body.sidebar-first #content { + left: 0; + right: 20%; +} +body.two-sidebars #content { + left: 0; + right: 20%; +} + +#sidebar-first { + float: right; + left: 0; + right: -80%; +} +body.two-sidebars #sidebar-first { + left: 0; + right: -60%; +} + +#sidebar-second { + float: left; +} \ No newline at end of file diff --git a/core/themes/stark/css/ie.css b/core/themes/stark/css/ie.css new file mode 100644 index 0000000..ca288d1 --- /dev/null +++ b/core/themes/stark/css/ie.css @@ -0,0 +1,35 @@ + +/** + * @file + * Force IE 8 and lower to render in desktop layout. + */ + +#content { + width: 100%; + float: left; /* LTR */ +} +body.sidebar-first #content { + width: 80%; + left: 20%; /* LTR */ +} +body.sidebar-second #content { + width: 80%; +} +body.two-sidebars #content { + width: 60%; + left: 20%; /* LTR */ +} + +#sidebar-first { + width: 20%; + float: left; /* LTR */ + left: -80%; /* LTR */ +} +body.two-sidebars #sidebar-first { + left: -60%; /* LTR */ +} + +#sidebar-second { + float: right; /* LTR */ + width: 20%; +} \ No newline at end of file diff --git a/core/themes/stark/css/layout-rtl.css b/core/themes/stark/css/layout-rtl.css new file mode 100644 index 0000000..d5e9c6d --- /dev/null +++ b/core/themes/stark/css/layout-rtl.css @@ -0,0 +1,52 @@ +@media all and (min-width: 480px) and (max-width: 959px) { + body.sidebar-first #content, + body.two-sidebars #content { + float: left; + } + body.sidebar-second #content { + float: right; + } + + #sidebar-first { + float: right; + } + + #sidebar-second { + float: left; + } + body.two-sidebars #sidebar-second { + float: right; + clear: right; + } + body.two-sidebars #sidebar-second .block { + float: right; + } +} + +@media all and (min-width: 960px) { + #content { + float: right; + } + body.sidebar-first #content { + left: 0; + right: 20%; + } + body.two-sidebars #content { + left: 0; + right: 20%; + } + + #sidebar-first { + float: right; + left: 0; + right: -80%; + } + body.two-sidebars #sidebar-first { + left: 0; + right: -60%; + } + + #sidebar-second { + float: left; + } +} diff --git a/core/themes/stark/css/layout.css b/core/themes/stark/css/layout.css new file mode 100644 index 0000000..cb8e561 --- /dev/null +++ b/core/themes/stark/css/layout.css @@ -0,0 +1,90 @@ + +/** + * @file + * Stark layout method + * + * To avoid obscuring CSS added to the page by Drupal or a contrib module, the + * Stark theme itself has no styling, except just enough CSS to arrange the page + * in a traditional "Header, sidebars, content, and footer" layout. + * + * This layout method works reasonably well, but shouldn't be used on a + * production site because it can break. For example, if an over-large image + * (one that is wider than 20% of the viewport) is in the left sidebar, the + * image will overlap with the #content to the right. + */ + +#content, +#sidebar-first, +#sidebar-second { + display: inline; + position: relative; +} + +@media all and (min-width: 480px) and (max-width: 959px) { + #content { + width: 100%; + } + body.sidebar-first #content, + body.two-sidebars #content { + width: 67%; + float: right; /* LTR */ + } + body.sidebar-second #content { + width: 67%; + float: left; /* LTR */ + } + + #sidebar-first { + width: 33%; + float: left; /* LTR */ + } + + #sidebar-second { + width: 33%; + float: right; /* LTR */ + } + body.two-sidebars #sidebar-second { + clear: both; + width: 100%; + } + + body.two-sidebars #sidebar-second .block { + float: left; /* LTR */ + width: 33%; + } + body.two-sidebars #sidebar-second .block:nth-child(3n+1) { + clear: both; + } +} + +@media all and (min-width: 960px) { + #content { + width: 100%; + float: left; /* LTR */ + } + body.sidebar-first #content { + width: 80%; + left: 20%; /* LTR */ + } + body.sidebar-second #content { + width: 80%; + } + body.two-sidebars #content { + width: 60%; + left: 20%; /* LTR */ + } + + #sidebar-first { + width: 20%; + float: left; /* LTR */ + left: -80%; /* LTR */ + } + body.two-sidebars #sidebar-first { + left: -60%; /* LTR */ + } + + #sidebar-second { + float: right; /* LTR */ + width: 20%; + } +} diff --git a/core/themes/stark/layout.css b/core/themes/stark/layout.css deleted file mode 100644 index 93c31ae..0000000 --- a/core/themes/stark/layout.css +++ /dev/null @@ -1,51 +0,0 @@ - -/** - * @file - * Stark layout method - * - * To avoid obscuring CSS added to the page by Drupal or a contrib module, the - * Stark theme itself has no styling, except just enough CSS to arrange the page - * in a traditional "Header, sidebars, content, and footer" layout. - * - * This layout method works reasonably well, but shouldn't be used on a - * production site because it can break. For example, if an over-large image - * (one that is wider than 20% of the viewport) is in the left sidebar, the - * image will overlap with the #content to the right. - */ - -#content, -#sidebar-first, -#sidebar-second { - float: left; - display: inline; - position: relative; -} - -#content { - width: 100%; -} -body.sidebar-first #content { - width: 80%; - left: 20%; /* LTR */ -} -body.sidebar-second #content { - width: 80%; -} -body.two-sidebars #content { - width: 60%; - left: 20%; -} - -#sidebar-first { - width: 20%; - left: -80%; /* LTR */ -} - -body.two-sidebars #sidebar-first { - left: -60%; /* LTR */ -} - -#sidebar-second { - float: right; /* LTR */ - width: 20%; -} diff --git a/core/themes/stark/stark.info b/core/themes/stark/stark.info index 5773c5e..fbab2a0 100644 --- a/core/themes/stark/stark.info +++ b/core/themes/stark/stark.info @@ -3,4 +3,4 @@ description = This theme demonstrates Drupal's default HTML markup and CSS style package = Core version = VERSION core = 8.x -stylesheets[all][] = layout.css +stylesheets[all][] = css/layout.css diff --git a/core/themes/stark/template.php b/core/themes/stark/template.php new file mode 100644 index 0000000..0a40d57 --- /dev/null +++ b/core/themes/stark/template.php @@ -0,0 +1,12 @@ + CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'weight' => 999, 'preprocess' => FALSE)); +}