Version 1
[yaffs-website] / web / core / modules / toolbar / css / toolbar.icons.theme.css
diff --git a/web/core/modules/toolbar/css/toolbar.icons.theme.css b/web/core/modules/toolbar/css/toolbar.icons.theme.css
new file mode 100644 (file)
index 0000000..c52f868
--- /dev/null
@@ -0,0 +1,300 @@
+/**
+ * @file
+ * Styling for toolbar module icons.
+ */
+
+.toolbar .toolbar-icon {
+  padding-left: 2.75em; /* LTR */
+  position: relative;
+}
+[dir="rtl"] .toolbar .toolbar-icon {
+  padding-left: 1.3333em;
+  padding-right: 2.75em;
+}
+.toolbar .toolbar-icon:before {
+  background-attachment: scroll;
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  content: '';
+  display: block;
+  height: 100%;
+  left: 0.6667em; /* LTR */
+  position: absolute;
+  top: 0;
+  width: 20px;
+}
+[dir="rtl"] .toolbar .toolbar-icon:before {
+  left: auto;
+  right: 0.6667em;
+}
+.toolbar button.toolbar-icon {
+  background-color: transparent;
+  border: 0;
+  font-size: 1em;
+}
+.toolbar .toolbar-menu ul .toolbar-icon {
+  padding-left: 1.3333em; /* LTR */
+}
+[dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon {
+  padding-left: 0;
+  padding-right: 1.3333em;
+}
+.toolbar .toolbar-menu ul a.toolbar-icon:before {
+  display: none;
+}
+.toolbar .toolbar-tray-vertical .toolbar-menu ul a {
+  padding-left: 2.75em; /* LTR */
+}
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
+  padding-left: 0;
+  padding-right: 2.75em;
+}
+.toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
+  padding-left: 3.75em; /* LTR */
+}
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
+  padding-left: 0;
+  padding-right: 3.75em;
+}
+
+.toolbar .toolbar-tray-vertical .toolbar-menu a {
+  padding-left: 2.75em; /* LTR */
+  padding-right: 4em; /* LTR */
+}
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {
+  padding-left: 4em;
+  padding-right: 2.75em;
+}
+
+/**
+ * Top level icons.
+ */
+.toolbar-bar .toolbar-icon-menu:before {
+  background-image: url(../../../misc/icons/bebebe/hamburger.svg);
+}
+.toolbar-bar .toolbar-icon-menu:active:before,
+.toolbar-bar .toolbar-icon-menu.is-active:before {
+  background-image: url(../../../misc/icons/ffffff/hamburger.svg);
+}
+.toolbar-bar .toolbar-icon-help:before {
+  background-image: url(../../../misc/icons/bebebe/questionmark-disc.svg);
+}
+.toolbar-bar .toolbar-icon-help:active:before,
+.toolbar-bar .toolbar-icon-help.is-active:before {
+  background-image: url(../../../misc/icons/ffffff/questionmark-disc.svg);
+}
+
+/**
+ * Main menu icons.
+ */
+.toolbar-icon-system-admin-content:before {
+  background-image: url(../../../misc/icons/787878/file.svg);
+}
+.toolbar-icon-system-admin-content:active:before,
+.toolbar-icon-system-admin-content.is-active:before {
+  background-image: url(../../../misc/icons/000000/file.svg);
+}
+.toolbar-icon-system-admin-structure:before {
+  background-image: url(../../../misc/icons/787878/orgchart.svg);
+}
+.toolbar-icon-system-admin-structure:active:before,
+.toolbar-icon-system-admin-structure.is-active:before {
+  background-image: url(../../../misc/icons/000000/orgchart.svg);
+}
+.toolbar-icon-system-themes-page:before {
+  background-image: url(../../../misc/icons/787878/paintbrush.svg);
+}
+.toolbar-icon-system-themes-page:active:before,
+.toolbar-icon-system-themes-page.is-active:before {
+  background-image: url(../../../misc/icons/000000/paintbrush.svg);
+}
+.toolbar-icon-entity-user-collection:before {
+  background-image: url(../../../misc/icons/787878/people.svg);
+}
+.toolbar-icon-entity-user-collection:active:before,
+.toolbar-icon-entity-user-collection.is-active:before {
+  background-image: url(../../../misc/icons/000000/people.svg);
+}
+.toolbar-icon-system-modules-list:before {
+  background-image: url(../../../misc/icons/787878/puzzlepiece.svg);
+}
+.toolbar-icon-system-modules-list:active:before,
+.toolbar-icon-system-modules-list.is-active:before {
+  background-image: url(../../../misc/icons/000000/puzzlepiece.svg);
+}
+.toolbar-icon-system-admin-config:before {
+  background-image: url(../../../misc/icons/787878/wrench.svg);
+}
+.toolbar-icon-system-admin-config:active:before,
+.toolbar-icon-system-admin-config.is-active:before {
+  background-image: url(../../../misc/icons/000000/wrench.svg);
+}
+.toolbar-icon-system-admin-reports:before {
+  background-image: url(../../../misc/icons/787878/barchart.svg);
+}
+.toolbar-icon-system-admin-reports:active:before,
+.toolbar-icon-system-admin-reports.is-active:before {
+  background-image: url(../../../misc/icons/000000/barchart.svg);
+}
+.toolbar-icon-help-main:before {
+  background-image: url(../../../misc/icons/787878/questionmark-disc.svg);
+}
+.toolbar-icon-help-main:active:before,
+.toolbar-icon-help-main.is-active:before {
+  background-image: url(../../../misc/icons/000000/questionmark-disc.svg);
+}
+
+@media only screen and (min-width: 16.5em) {
+  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: 0;
+    padding-right: 0;
+    text-indent: -9999px;
+    width: 4em;
+  }
+  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+    background-size: 42% auto;
+    left: 0; /* LTR */
+    width: 100%;
+  }
+  .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+    background-size: auto auto;
+  }
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+    left: auto;
+    right: 0;
+  }
+}
+
+@media only screen and (min-width: 36em) {
+  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+    background-position: left center; /* LTR */
+    padding-left: 2.75em; /* LTR */
+    padding-right: 1.3333em; /* LTR */
+    text-indent: 0;
+    width: auto;
+  }
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+    background-position: right center;
+    padding-left: 1.3333em;
+    padding-right: 2.75em;
+  }
+  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+    background-size: 100% auto;
+    left: 0.6667em; /* LTR */
+    width: 20px;
+  }
+  .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+    background-size: auto auto;
+  }
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+    left: 0;
+    right: 0.6667em;
+  }
+}
+
+/**
+ *  Accessibility/focus
+ */
+.toolbar-tab a:focus {
+  outline: none;
+  text-decoration: underline;
+}
+.toolbar-lining button:focus {
+  outline: none;
+}
+.toolbar-tray-horizontal a:focus,
+.toolbar-box a:focus {
+  outline: none;
+  background-color: #f5f5f5;
+}
+.toolbar-box a:hover:focus {
+  text-decoration: underline;
+}
+.toolbar .toolbar-icon.toolbar-handle:focus {
+  outline: none;
+  background-color: #f5f5f5;
+}
+
+
+/**
+ * Handle.
+ */
+.toolbar .toolbar-icon.toolbar-handle {
+  width: 4em;
+  text-indent: -9999px;
+}
+.toolbar .toolbar-icon.toolbar-handle:before {
+  left: 1.6667em; /* LTR */
+}
+[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle:before {
+  left: auto;
+  right: 1.6667em;
+}
+.toolbar .toolbar-icon.toolbar-handle:before {
+  background-image: url(../../../misc/icons/5181c6/chevron-disc-down.svg);
+}
+.toolbar .toolbar-icon.toolbar-handle.open:before {
+  background-image: url(../../../misc/icons/787878/chevron-disc-up.svg);
+}
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:before {
+  background-image: url(../../../misc/icons/5181c6/twistie-down.svg);
+  background-size: 75%;
+}
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:before {
+  background-image: url(../../../misc/icons/787878/twistie-up.svg);
+  background-size: 75%;
+}
+.toolbar .toolbar-icon-escape-admin:before {
+  background-image: url(../../../misc/icons/bebebe/chevron-disc-left.svg);
+}
+[dir="rtl"] .toolbar .toolbar-icon-escape-admin:before {
+  background-image: url(../../../misc/icons/bebebe/chevron-disc-right.svg);
+}
+/**
+ * Orientation toggle.
+ */
+.toolbar .toolbar-toggle-orientation button {
+  height: 39px;
+  padding: 0;
+  text-indent: -999em;
+  width: 39px;
+}
+.toolbar .toolbar-toggle-orientation button:before {
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+[dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon {
+  padding: 0;
+}
+/**
+ * In order to support a hover effect on the SVG images, while also supporting
+ * RTL text direction and no SVG support, this little icon requires some very
+ * specific targeting, setting and unsetting.
+ */
+.toolbar .toolbar-toggle-orientation [value="vertical"]:before {
+  background-image: url(../../../misc/icons/bebebe/push-left.svg); /* LTR */
+}
+.toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
+.toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before
+ {
+  background-image: url(../../../misc/icons/787878/push-left.svg); /* LTR */
+}
+[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:before {
+  background-image: url(../../../misc/icons/bebebe/push-right.svg);
+}
+[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
+[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {
+  background-image: url(../../../misc/icons/787878/push-right.svg);
+}
+.toolbar .toolbar-toggle-orientation [value="horizontal"]:before {
+  background-image: url(../../../misc/icons/bebebe/push-up.svg);
+}
+.toolbar .toolbar-toggle-orientation [value="horizontal"]:hover:before,
+.toolbar .toolbar-toggle-orientation [value="horizontal"]:focus:before {
+  background-image: url(../../../misc/icons/787878/push-up.svg);
+}