Issue #7: First pass at toolbar styling.

Fixes #7. Uses Google Material icons.
backdrop-contrib · Jun 19, 2023 · 6f2b492 · 6f2b492
1 parent 285cd56
commit 6f2b492
Show file tree

Hide file tree

Showing 37 changed files with 1,159 additions and 3,963 deletions.
diff --git a/dist/css/base/tonic.css b/dist/css/base/tonic.css
@@ -4232,8 +4232,6 @@ tr.color-error:focus,
 .upgrade-status-summary tr.not-scanned > td.status-info:before {
   background-image: none;
   background-color: var(--tonic-color-text);
-  -webkit-mask-image: url("../../media/sprite.svg#info-view");
-          mask-image: url("../../media/sprite.svg#info-view");
   -webkit-mask-repeat: no-repeat;
           mask-repeat: no-repeat;
   -webkit-mask-position: center center;
@@ -4647,3 +4645,348 @@ blockquote::before {
   }
 }
 
+/* Toolbar */
+
+.admin-bar body {
+  border-top: none !important;
+  padding-top: 3.75rem;
+}
+
+html.admin-bar #admin-bar {
+  background: var(--tonic-bg-layer);
+  color: #ddd;
+  font-size: small;
+  box-shadow: 0 0 4px rgba(0, 0, 0, .1), 0 2px 6px 2px rgba(0, 0, 0, .03);
+}
+
+html.admin-bar #admin-bar > div > ul > li {
+  color: #ddd;
+}
+
+html.admin-bar #admin-bar > div > ul > li > ul.dropdown {
+  background-color: var(--tonic-bg-layer);
+}
+
+html.admin-bar #admin-bar > div > ul > li > ul.dropdown a {
+  border-top: none;
+  background-image: none;
+  background-color: var(--tonic-bg-layer);
+}
+
+@media (min-width: 61em) {
+  html.admin-bar #admin-bar > div > ul > li > ul.dropdown ul {
+    padding: 0;
+  }
+
+  html.admin-bar #admin-bar > div > ul > li > ul.dropdown ul a::before {
+    display: none;
+  }
+
+  html[dir="ltr"].admin-bar #admin-bar > div > ul > li > ul.dropdown ul a,
+  html[dir="ltr"].admin-bar #admin-bar > div > ul > li > ul.dropdown ul span {
+    padding: 20px 2.75em 20px 1.25em;
+  }
+
+  html[dir="rtl"].admin-bar #admin-bar > div > ul > li > ul.dropdown ul a,
+  html[dir="rtl"].admin-bar #admin-bar > div > ul > li > ul.dropdown ul span {
+    padding: 20px 1.25em 20px 2.75em;
+  }
+}
+
+html[dir="ltr"].admin-bar #admin-bar > div > ul > li ul.dropdown li,
+html[dir="ltr"].admin-bar #admin-bar > div > ul > li ul.dropdown li.expandable {
+  float: left;
+}
+
+html[dir="rtl"].admin-bar #admin-bar > div > ul > li ul.dropdown li,
+html[dir="rtl"].admin-bar #admin-bar > div > ul > li ul.dropdown li.expandable {
+  float: right;
+}
+
+html.admin-bar #admin-bar > div > ul > li ul.dropdown li.expandable li.expandable > a::after {
+  background: var(--tonic-icon-color);
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-position: center center;
+          mask-position: center center;
+  -webkit-mask-size: var(--tonic-icon-size-toolbar) var(--tonic-icon-size-toolbar);
+          mask-size: var(--tonic-icon-size-toolbar) var(--tonic-icon-size-toolbar);
+  -webkit-mask-image: url("../../media/sprite.svg#open-right-view");
+          mask-image: url("../../media/sprite.svg#open-right-view");
+  position: absolute;
+  top: 0;
+  display: block;
+  width: 1.25rem;
+  height: 100%;
+  content: "";
+}
+
+html[dir="ltr"].admin-bar #admin-bar > div > ul > li ul.dropdown li.expandable li.expandable > a::after {
+  right: .6667em;
+}
+
+html[dir="rtl"].admin-bar #admin-bar > div > ul > li ul.dropdown li.expandable li.expandable > a::after {
+  left: .6667em;
+}
+
+html.admin-bar #admin-bar > div > ul > li ul.dropdown li.expandable a:hover,
+html.admin-bar #admin-bar > div > ul > li ul.dropdown li.expandable a.expanded-trail {
+  color: var(--tonic-color-primary-hover);
+  background: var(--tonic-bg-item-hover);
+}
+
+html.admin-bar #admin-bar > div > ul > li ul.dropdown li.expandable a.active:hover,
+html.admin-bar #admin-bar > div > ul > li ul.dropdown li.expandable a.active-trail:hover {
+  background: var(--tonic-bg-item-hover);
+}
+
+html.admin-bar #admin-bar > div > ul > li ul.dropdown li.expandable ul ul {
+  width: var(--tonic-toolbar-width);
+  background-color: var(--tonic-toolbar-bg-level2);
+}
+
+html[dir="ltr"].admin-bar #admin-bar > div > ul > li ul.dropdown li.expandable ul ul {
+  margin: -32px 0 0 var(--tonic-toolbar-width);
+}
+
+html[dir="rtl"].admin-bar #admin-bar > div > ul > li ul.dropdown li.expandable ul ul {
+  margin: -32px var(--tonic-toolbar-width) 0 0;
+}
+
+html.admin-bar #admin-bar > div > ul > li ul.dropdown.expanded {
+  box-shadow: 0 8px 14px rgba(0, 0, 0, .15);
+}
+
+html.admin-bar #admin-bar > div > ul > li li ul,
+html.admin-bar #admin-bar > div > ul > li li li {
+  width: var(--tonic-toolbar-width);
+}
+
+html.admin-bar #admin-bar > div > ul > li a,
+html.admin-bar #admin-bar > div > ul > li span {
+  color: var(--tonic-color-text);
+  font-weight: var(--tonic-font-weight-normal);
+  text-decoration: none;
+  position: relative;
+}
+
+html[dir="ltr"].admin-bar #admin-bar > div > ul > li a,
+html[dir="ltr"].admin-bar #admin-bar > div > ul > li span {
+  padding: 20px 1.25em 20px 2.75em;
+}
+
+html[dir="rtl"].admin-bar #admin-bar > div > ul > li a,
+html[dir="rtl"].admin-bar #admin-bar > div > ul > li span {
+  padding: 20px 2.75em 20px 1.25em;
+}
+
+html.admin-bar #admin-bar > div > ul > li a.active,
+html.admin-bar #admin-bar > div > ul > li a.active-trail,
+html.admin-bar #admin-bar > div > ul > li a.expanded-trail,
+html.admin-bar #admin-bar > div > ul > li a.active:hover,
+html.admin-bar #admin-bar > div > ul > li a.active-trail:hover {
+  color: var(--tonic-color-primary);
+  text-decoration: none;
+  text-shadow: none;
+  background: transparent;
+}
+
+html.admin-bar #admin-bar > div > ul > li a.active::before {
+  background: var(--tonic-color-primary);
+}
+
+html.admin-bar #admin-bar > div > ul > li a:hover {
+  color: var(--tonic-color-primary-hover);
+  background: var(--tonic-bg-item-hover);
+}
+
+html.admin-bar #admin-bar > div > ul > li a.active:hover,
+html.admin-bar #admin-bar > div > ul > li a.active-trail:hover {
+  background: var(--tonic-bg-item-hover);
+}
+
+html.admin-bar #admin-bar > div > ul > li a::before,
+html.admin-bar #admin-bar > div > ul > li span::before {
+  background: var(--tonic-icon-color);
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-position: center center;
+          mask-position: center center;
+  -webkit-mask-size: var(--tonic-icon-size-toolbar) var(--tonic-icon-size-toolbar);
+          mask-size: var(--tonic-icon-size-toolbar) var(--tonic-icon-size-toolbar);
+  -webkit-mask-image: url("../../media/sprite.svg#drop-view");
+          mask-image: url("../../media/sprite.svg#drop-view");
+  position: absolute;
+  top: 0;
+  display: block;
+  width: 1.25rem;
+  height: 100%;
+  content: "";
+}
+
+html[dir="ltr"].admin-bar #admin-bar > div > ul > li a::before,
+html[dir="ltr"].admin-bar #admin-bar > div > ul > li span::before {
+  left: .6667em;
+}
+
+html[dir="rtl"].admin-bar #admin-bar > div > ul > li a::before,
+html[dir="rtl"].admin-bar #admin-bar > div > ul > li span::before {
+  right: .6667em;
+}
+
+html.admin-bar #admin-bar > div > ul > li a:hover::before {
+  background: var(--tonic-color-primary-hover);
+}
+
+html.admin-bar #admin-bar > div > ul > li a.admin-content:before {
+  -webkit-mask-image: url("../../media/sprite.svg#content-view");
+          mask-image: url("../../media/sprite.svg#content-view");
+}
+
+html.admin-bar #admin-bar > div > ul > li a.admin-structure:before {
+  -webkit-mask-image: url("../../media/sprite.svg#structure-view");
+          mask-image: url("../../media/sprite.svg#structure-view");
+}
+
+html.admin-bar #admin-bar > div > ul > li a.admin-appearance:before {
+  -webkit-mask-image: url("../../media/sprite.svg#appearance-view");
+          mask-image: url("../../media/sprite.svg#appearance-view");
+}
+
+html.admin-bar #admin-bar > div > ul > li a.admin-modules:before {
+  -webkit-mask-image: url("../../media/sprite.svg#functionality-view");
+          mask-image: url("../../media/sprite.svg#functionality-view");
+}
+
+html.admin-bar #admin-bar > div > ul > li a.admin-config:before {
+  -webkit-mask-image: url("../../media/sprite.svg#config-view");
+          mask-image: url("../../media/sprite.svg#config-view");
+}
+
+html.admin-bar #admin-bar > div > ul > li a.admin-people:before {
+  -webkit-mask-image: url("../../media/sprite.svg#useraccount-view");
+          mask-image: url("../../media/sprite.svg#useraccount-view");
+}
+
+html.admin-bar #admin-bar > div > ul > li a.admin-reports:before {
+  -webkit-mask-image: url("../../media/sprite.svg#reports-view");
+          mask-image: url("../../media/sprite.svg#reports-view");
+}
+
+html.admin-bar #admin-bar > div > ul > li a.admin-dashboard:before {
+  -webkit-mask-image: url("../../media/sprite.svg#dashboard-view");
+          mask-image: url("../../media/sprite.svg#dashboard-view");
+}
+
+html.admin-bar #admin-bar > div > ul > li a.user-counter:before {
+  -webkit-mask-image: url("../../media/sprite.svg#people-view");
+          mask-image: url("../../media/sprite.svg#people-view");
+}
+
+html.admin-bar #admin-bar > div > ul > li a.account:before {
+  -webkit-mask-image: url("../../media/sprite.svg#person-view");
+          mask-image: url("../../media/sprite.svg#person-view");
+}
+
+html.admin-bar #admin-bar > div > ul > li a.logout:before {
+  -webkit-mask-image: url("../../media/sprite.svg#logout-view");
+          mask-image: url("../../media/sprite.svg#logout-view");
+}
+
+html.admin-bar #admin-bar > div > ul > li a.icon.escape:before {
+  -webkit-mask-image: url("../../media/sprite.svg#backtosite-view");
+          mask-image: url("../../media/sprite.svg#backtosite-view");
+}
+
+html.admin-bar #admin-bar > div > ul > li span.page:before {
+  -webkit-mask-image: url("../../media/sprite.svg#info-view");
+          mask-image: url("../../media/sprite.svg#info-view");
+}
+
+html.admin-bar #admin-bar > div #admin-bar-icon.dropdown ul.dropdown,
+html.admin-bar #admin-bar > div #admin-bar-extra.dropdown ul.dropdown {
+  width: var(--tonic-toolbar-width);
+}
+
+html.admin-bar #admin-bar > div #admin-bar-icon.dropdown ul.dropdown li,
+html.admin-bar #admin-bar > div #admin-bar-extra.dropdown ul.dropdown li {
+  width: var(--tonic-toolbar-width);
+}
+
+html[dir="ltr"].admin-bar #admin-bar > div #admin-bar-icon.dropdown ul.dropdown li ul,
+html[dir="ltr"].admin-bar #admin-bar > div #admin-bar-extra.dropdown ul.dropdown li ul {
+  margin: -32px 0 0 var(--tonic-toolbar-width);
+}
+
+html[dir="rtl"].admin-bar #admin-bar > div #admin-bar-icon.dropdown ul.dropdown li ul,
+html[dir="rtl"].admin-bar #admin-bar > div #admin-bar-extra.dropdown ul.dropdown li ul {
+  margin: -32px var(--tonic-toolbar-width) 0 0;
+}
+
+html.admin-bar #admin-bar > div #admin-bar-icon.dropdown ul.dropdown a::before,
+html.admin-bar #admin-bar > div #admin-bar-extra.dropdown ul.dropdown a::before {
+  display: none;
+}
+
+html.admin-bar #admin-bar > div .admin-bar-search .form-type-search {
+  padding: .75em 0;
+  position: relative;
+}
+
+html.admin-bar #admin-bar > div .admin-bar-search .form-type-search::before {
+  content: "";
+  opacity: .75;
+  display: block;
+  width: var(--tonic-icon-size-toolbar-secondary);
+  height: var(--tonic-icon-size-toolbar-secondary);
+  position: absolute;
+  top: calc(50% - var(--tonic-icon-size-toolbar-secondary) / 2);
+  background-color: var(--tonic-icon-color);
+  -webkit-mask-image: url("../../media/sprite.svg#search-view");
+          mask-image: url("../../media/sprite.svg#search-view");
+  -webkit-mask-size: 100% 100%;
+          mask-size: 100% 100%;
+  -webkit-mask-position: center center;
+          mask-position: center center;
+}
+
+html[dir="ltr"].admin-bar #admin-bar > div .admin-bar-search .form-type-search::before {
+  left: var(--tonic-spacing-m);
+}
+
+html[dir="rtl"].admin-bar #admin-bar > div .admin-bar-search .form-type-search::before {
+  right: var(--tonic-spacing-m);
+}
+
+html.admin-bar #admin-bar > div .admin-bar-search #admin-bar-search-items {
+  background-image: none;
+  color: var(--tonic-color-text);
+  width: 245px;
+  background-color: #fff;
+  border: 1px solid var(--tonic-border-color);
+  border-radius: 25px;
+  box-sizing: border-box;
+  min-height: auto;
+}
+
+html[dir="ltr"].admin-bar #admin-bar > div .admin-bar-search #admin-bar-search-items {
+  padding-left: calc(var(--tonic-spacing-xl) + var(--tonic-spacing-xs));
+}
+
+html[dir="rtl"].admin-bar #admin-bar > div .admin-bar-search #admin-bar-search-items {
+  padding-right: calc(var(--tonic-spacing-xl) + var(--tonic-spacing-xs));
+}
+
+html.admin-bar #admin-bar > div .admin-bar-search #admin-bar-search-items:not(:hover):not(:focus) {
+  box-shadow: none;
+}
+
+.tonic--dark-mode html.admin-bar #admin-bar > div .admin-bar-search #admin-bar-search-items {
+  background-color: rgba(255, 255, 255, .075);
+  border: 1px solid transparent;
+}
+
+.tonic--dark-mode html.admin-bar #admin-bar > div .admin-bar-search #admin-bar-search-items:hover {
+  border-color: var(--tonic-border-color-form-element);
+}
+
diff --git a/dist/css/components/breadcrumb.css b/dist/css/components/breadcrumb.css
@@ -1,6 +1,6 @@
 .tonic-breadcrumb {
   color: var(--tonic-color-text);
-  padding: 0;
+  padding: var(--tonic-spacing-m) 0;
 }
 
 .tonic-breadcrumb-wrapper {

diff --git a/dist/css/components/settings_tray.css b/dist/css/components/settings_tray.css
@@ -1,23 +1,15 @@
-#gin-toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
+#admin-bar-wrapper ul li a.active-trail {
   color: var(--tonic-bg-app);
 }
 
-#gin-toolbar-bar.js-settings-tray-edit-mode {
+#admin-bar-wrapper ul li a {
   background: var(--tonic-color-primary);
 }
 
-#gin-toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
+#admin-bar-wrapper ul li a.active-trail:hover {
   background: var(--tonic-color-primary-hover);
 }
 
-#gin-toolbar-bar {
-  position: fixed;
-}
-
-#gin-toolbar-bar .contextual-toolbar-tab {
-  order: 100;
-}
-
 #toolbar-bar.toolbar-bar.js-settings-tray-edit-mode {
   background-color: transparent;
   border-radius: var(--tonic-border-s);