X-Git-Url: http://aleph1.co.uk/gitweb/?a=blobdiff_plain;ds=sidebyside;f=web%2Fcore%2Fmodules%2Fworkspaces%2Fcss%2Fworkspaces.toolbar.css;fp=web%2Fcore%2Fmodules%2Fworkspaces%2Fcss%2Fworkspaces.toolbar.css;h=37982fc72845be8522efeed4278127a22c203919;hb=0bf8d09d2542548982e81a441b1f16e75873a04f;hp=0000000000000000000000000000000000000000;hpb=74df008bdbb3a11eeea356744f39b802369bda3c;p=yaffs-website

diff --git a/web/core/modules/workspaces/css/workspaces.toolbar.css b/web/core/modules/workspaces/css/workspaces.toolbar.css
new file mode 100644
index 000000000..37982fc72
--- /dev/null
+++ b/web/core/modules/workspaces/css/workspaces.toolbar.css
@@ -0,0 +1,265 @@
+/**
+ * @file
+ * Styling for Workspaces module's toolbar tab.
+ */
+
+/**
+ * @todo Remove this after https://www.drupal.org/project/drupal/issues/2986056
+ *  has been solved.
+ */
+.workspaces-dialog #drupal-off-canvas * {
+  background: initial;
+}
+.workspaces-dialog #drupal-off-canvas {
+  background: #444;
+}
+
+/* Tab appearance. */
+.toolbar .toolbar-bar .workspaces-toolbar-tab {
+  float: right; /* LTR */
+  background-color: #e09600;
+}
+[dir="rtl"] .toolbar .toolbar-bar .workspaces-toolbar-tab {
+  float: left;
+}
+.toolbar .toolbar-bar .workspaces-toolbar-tab--is-default {
+  background-color: #81c071;
+}
+
+.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
+  color: #000;
+  margin: 0;
+}
+
+.toolbar .toolbar-icon-workspace:before {
+  background-image: url("../icons/000000/workspaces.svg");
+}
+
+/* Off canvas dialog */
+.workspaces-dialog.ui-dialog-off-canvas a:focus {
+  outline: none;
+}
+
+.workspaces-dialog.ui-dialog-off-canvas #drupal-off-canvas,
+.workspaces-dialog.ui-dialog-off-canvas {
+  background: #333;
+  padding: 0;
+}
+
+.workspaces-dialog.ui-widget.ui-widget-content {
+  height: 100% !important;
+}
+
+.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
+  visibility: hidden;
+  position: relative;
+}
+
+.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar .ui-button {
+  visibility: visible;
+  z-index: 101;
+}
+
+#drupal-off-canvas .active-workspace {
+  background-color: #444;
+  width: 100%;
+  padding: 20px 40px 0 20px;
+  height: 140px;
+  position: relative;
+  top: 16px;
+}
+
+@media all and (min-width: 767px) {
+  #drupal-off-canvas .active-workspace {
+    padding: 20px 40px 0 40px;
+  }
+}
+
+#drupal-off-canvas .active-workspace__title {
+  font-size: 0.8125rem;
+  font-weight: bold;
+}
+
+#drupal-off-canvas .active-workspace__label {
+  color: #fff;
+  font-size: 1.285em;
+  margin-top: 0.5em;
+  margin-left: 3.2rem;
+}
+
+#drupal-off-canvas .active-workspace__manage {
+  font-size: 0.9286em;
+  margin-left: 3.2rem;
+  white-space: nowrap;
+  outline-color: currentColor;
+}
+
+#drupal-off-canvas .active-workspace__actions {
+  position: relative;
+  top: 1em;
+}
+
+#drupal-off-canvas .active-workspace__button {
+  border-radius: 20px;
+  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+  border: solid 1px #1e5c90;
+  padding: 5px 22px;
+  color: #fff;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
+  font-weight: bold;
+}
+
+#drupal-off-canvas .active-workspace__button:hover {
+  text-decoration: none;
+}
+
+#drupal-off-canvas .all-workspaces {
+  position: fixed;
+  bottom: 1em;
+  left: 20px;
+  color: #fff;
+  outline-color: currentColor;
+}
+
+#drupal-off-canvas .workspaces ul {
+  display: block;
+}
+
+#drupal-off-canvas .workspaces li {
+  flex: 1;
+  margin-bottom: 1px;
+}
+
+#drupal-off-canvas .workspaces a {
+  background-color: #555;
+  box-sizing: border-box;
+  padding: 20px 0 0 50px;
+  margin-right: 1px;
+  color: #fff;
+  font-size: 0.929em;
+  font-weight: bold;
+  text-decoration: none;
+  position: relative;
+  display: block;
+  height: 73px;
+}
+
+#drupal-off-canvas .active-workspace__label:before,
+#drupal-off-canvas .workspaces__item:before {
+  background: url("../icons/f0a100/ws_icon.svg") center center no-repeat;
+  background-size: 100% auto;
+  content: '';
+  display: block;
+  height: 20px;
+  width: 20px;
+  left: 20px;
+  position: absolute;
+}
+
+#drupal-off-canvas .active-workspace--default .active-workspace__label:before,
+#drupal-off-canvas .workspaces__item--default:before {
+  background-image: url("../icons/81c071/ws_icon.svg");
+}
+
+#drupal-off-canvas .active-workspace__label:before {
+  height: 40px;
+  width: 40px;
+  left: 20px;
+}
+
+@media all and (min-width: 767px) {
+  #drupal-off-canvas .active-workspace__label:before {
+    left: 40px;
+  }
+}
+
+.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
+  padding: 0;
+  top: 39px;
+}
+
+.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
+  right: 0.5em;
+  top: 1em;
+}
+
+@media all and (max-width: 766px) {
+  .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
+    padding-left: 2.75em;
+    padding-right: 1.3333em;
+    text-indent: 0;
+    width: auto;
+    max-width: 8em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
+    background-size: 100% auto;
+    left: 0.6667em;
+    width: 20px;
+  }
+}
+
+@media all and (min-width: 767px) {
+  #drupal-off-canvas .active-workspace {
+    right: 0;
+    top: 0;
+    position: fixed;
+    width: calc(30% - 80px);
+    padding: 20px 40px 0;
+    height: 140px;
+  }
+
+  #drupal-off-canvas .all-workspaces {
+    padding-left: 20px;
+    position: relative;
+    margin-top: 31px;
+    left: 0;
+    top: 27px;
+  }
+
+  .workspaces-dialog.ui-widget.ui-widget-content {
+    height: 161px !important;
+  }
+
+  #drupal-off-canvas .workspaces {
+    width: 70%;
+    bottom: 0;
+    position: absolute;
+  }
+
+  #drupal-off-canvas .workspaces ul {
+    display: flex;
+    flex-direction: row;
+  }
+
+  #drupal-off-canvas .workspaces li {
+    margin-bottom: 0;
+  }
+
+  #drupal-off-canvas .active-workspace__actions {
+    position: absolute;
+    bottom: 1em;
+    top: unset;
+  }
+
+  .workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
+    top: 0;
+  }
+
+  .workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close,
+  .workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover,
+  .workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:focus {
+    top: 1.5em;
+  }
+}
+
+/* Make dialog width 100% for workspace mobile viewports. */
+@media all and (max-width: 48em) {
+  .ui-dialog.workspaces-dialog {
+    min-width: 100%;
+    max-width: 100%;
+  }
+}