Issue #2548805 by emma.maria, LewisNyman: Add sensible base layout styles for lists in Bartik

core/themes/bartik/bartik.libraries.yml

@@ -24,6 +24,7 @@ global-styling:
       css/components/list-group.css: {}
       css/components/list.css: {}
       css/components/main-content.css: {}
+      css/components/menu.css: {}
       css/components/messages.css: {}
       css/components/node.css: {}
       css/components/node-preview.css: {}

core/themes/bartik/css/base/elements.css

@@ -132,3 +132,20 @@ img {
   max-width: 100%;
   height: auto;
 }
+ul, ol {
+  margin: 0;
+  padding: 0 0 0.25em 1em; /* LTR */
+}
+[dir="rtl"] ul,
+[dir="rtl"] ol {
+  padding: 0 1em 0.25em 0;
+}
+ol ol,
+ul ul {
+  margin: 0;
+  padding: 0 0 0.25em 1em; /* LTR */
+}
+[dir="rtl"] ol ol,
+[dir="rtl"] ul ul {
+  padding: 0 1em 0.25em 0;
+}

core/themes/bartik/css/components/block.css

@@ -7,16 +7,3 @@
 .block .content {
   margin-top: 10px;
 }
-
-/* List in block. */
-.block ol,
-.block ul {
-  margin: 0;
-  padding: 0 0 0.25em 1em; /* LTR */
-}
-[dir="rtl"] .block ol,
-[dir="rtl"] .block ul {
-  padding: 0 1em 0.25em 0;
-  /* This is required to win over specifity of [dir="rtl"] ul.menu */
-  margin-right: 0;
-}

core/themes/bartik/css/components/breadcrumb.css

@@ -7,3 +7,6 @@
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 0.929em;
 }
+.region-breadcrumb {
+  padding: 0 15px 0.25em;
+}

core/themes/bartik/css/components/field.css

@@ -82,7 +82,6 @@
 .field--name-field-tags ul.links {
   padding: 0;
   margin: 0;
-  list-style: none;
 }
 .field--name-field-tags ul.links li {
   float: left; /* LTR */

core/themes/bartik/css/components/header.css

@@ -51,7 +51,6 @@
   padding: 0;
 }
 .region-header .block ul {
-  margin: 0;
   padding: 0;
 }
 .region-header .block li {

core/themes/bartik/css/components/item-list.css

@@ -3,11 +3,22 @@
  * Visual styles for Bartik's item list.
  */
 
+.item-list ul {
+  list-style: none;
+  margin: 0 0 0.25em 0;
+  padding: 0; /* LTR */
+}
+[dir="rtl"] .item-list ul {
+  padding: 0;
+}
 .item-list ul li {
+  /* This is needed to reset styles in item-list.theme.css */
   margin: 0;
   padding: 0.2em 0.5em 0 0; /* LTR */
 }
 [dir="rtl"] .item-list ul li {
+  /* This is needed to reset [dir="rtl"] styles in item-list.theme.css */
+  margin: 0;
   padding: 0.2em 0 0 0.5em;
 }
 .item-list .item-list__comma-list,

core/themes/bartik/css/components/list.css

@@ -7,4 +7,7 @@ ul.links {
   color: #68696b;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 0.821em;
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }

core/themes/bartik/css/components/menu.css

@@ -0,0 +1,15 @@
+/**
+ * @file
+ * Styles for menus in Bartik.
+ */
+
+/* This is needed to override ul.menu styles in menu.theme.css */
+ul.menu {
+  margin: 0;
+  padding: 0 0 0.25em 0;
+}
+
+/* This is needed to override [dir="rtl"] ul.menu styles in menu.theme.css */
+[dir="rtl"] ul.menu {
+  margin: 0;
+}

core/themes/bartik/css/components/search-results.css

@@ -3,13 +3,10 @@
  * Visual styles for Bartik's search results.
  */
 
-ol.search-results {
-  padding-left: 0; /* LTR */
+.search-results {
+  padding: 0;
   list-style-position: inside;
 }
-[dir="rtl"] ol.search-results {
-  padding-right: 0;
-}
 .search-results li {
   border-bottom: 1px solid #d3d7d9;
   padding-bottom: 0.4285em;

core/themes/bartik/css/components/tabs.css

@@ -18,7 +18,6 @@ div.tabs {
   display: block;
   font-size: 0.929em;
   padding: 0 10px 3px;
-  margin: 0;
   text-shadow: 0 1px 0 #fff;
 }
 .tabs ul.primary li.is-active a {