Move into nested docroot

web/core/modules/outside_in/css/offcanvas.css

@@ -0,0 +1,23 @@
+/**
+ * @file
+ * CSS for Offcanvas tray.
+ *
+ * @todo Move CSS into core dialog library https://www.drupal.org/node/2784443.
+ */
+/* Position the dialog-offcanvas tray container outside the right of the viewport. */
+.ui-dialog-offcanvas {
+    box-sizing: border-box;
+    height: 100%;
+    overflow: visible;
+}
+
+/* Wrap the form that's inside the dialog-offcanvas tray. */
+.ui-dialog-offcanvas .ui-dialog-content {
+    padding: 0 20px;
+    /* Prevent horizontal scrollbar. */
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content {
+    text-align: right;
+}

web/core/modules/outside_in/css/offcanvas.motion.css

@@ -0,0 +1,32 @@
+/**
+ * @file
+ * Motion effects for off-canvas tray dialog.
+ *
+ * Motion effects are in a separate file so that they can be easily turned off
+ * to improve performance if desired.
+ *
+ * @todo Move motion effects file into a core Off-Canvas library and add a
+ *   configuration option for browser rendering performance to disable this
+ *   file: https://www.drupal.org/node/2784443.
+ */
+
+/* Transition the dialog-offcanvas tray container, with 2s delay to match main canvas speed. */
+.ui-dialog-offcanvas .ui-dialog-content {
+    -webkit-transition: all .7s ease 2s;
+    -moz-transition: all .7s ease 2s;
+    transition: all .7s ease 2s;
+}
+
+@media (max-width: 700px) {
+    .ui-dialog-offcanvas .ui-dialog-content {
+        -webkit-transition: all .7s ease;
+        -moz-transition: all .7s ease;
+        transition: all .7s ease;
+    }
+}
+
+.dialog-offcanvas__main-canvas {
+  -webkit-transition: all .7s ease;
+  -moz-transition: all .7s ease;
+  transition: all .7s ease;
+}

web/core/modules/outside_in/css/outside_in.details.css

@@ -0,0 +1,52 @@
+/**
+ * @file
+ * Visual styling for summary and details in the Settings Tray module's off canvas tray.
+ */
+
+.ui-dialog-outside-in details,
+.ui-dialog-outside-in summary,
+.ui-dialog-outside-in .ui-dialog-content {
+  background: #474747;
+  color: #ddd;
+}
+.ui-dialog-outside-in summary a {
+  color: #ddd;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.ui-dialog-outside-in summary a:hover,
+.ui-dialog-outside-in summary a:focus {
+  color: #fff;
+}
+.ui-dialog-outside-in details,
+.ui-dialog-outside-in summary,
+.ui-dialog-outside-in .details-wrapper {
+  border-width: 0;
+  /* Cancel out the padding of the parent. */
+  margin: 0 -20px;
+  padding: 0 20px;
+}
+.ui-dialog-outside-in summary {
+  text-shadow: none;
+  outline: none;
+  padding: 10px 20px;
+  font-size: 14px;
+  transition: all .5s ease;
+}
+.ui-dialog-outside-in summary:hover,
+.ui-dialog-outside-in summary:focus {
+  background-color: #222;
+  outline: none;
+}
+.ui-dialog-outside-in details[open] {
+  background-color: #333;
+  padding-bottom: 10px;
+}
+.ui-dialog-outside-in details[open] > summary {
+  background-color: #333;
+  color: #eee;
+}
+.ui-dialog-outside-in details[open] > summary:hover {
+  background-color: #222;
+  color: #fff;
+}

web/core/modules/outside_in/css/outside_in.form.css

@@ -0,0 +1,110 @@
+/**
+ * @file
+ * Visual styling for forms in the Settings Tray module's off canvas tray.
+ */
+
+.ui-dialog-outside-in label {
+  line-height: normal;
+  font-size: 12px;
+  font-weight: normal;
+  color: #ddd;
+}
+.ui-dialog-outside-in .description,
+.ui-dialog-outside-in .form-item .description,
+.ui-dialog-outside-in .details-description {
+  color: #ddd;
+  margin-top: 5px;
+  font-size: 12px;
+  font-style: normal;
+}
+.ui-dialog-outside-in .details-wrapper .description {
+  color: #bbb;
+}
+.ui-dialog-outside-in .form-item {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+/* Set size and position for all inputs. */
+.ui-dialog-outside-in .form-select,
+.ui-dialog-outside-in .form-text,
+.ui-dialog-outside-in .form-tel,
+.ui-dialog-outside-in .form-email,
+.ui-dialog-outside-in .form-url,
+.ui-dialog-outside-in .form-search,
+.ui-dialog-outside-in .form-number,
+.ui-dialog-outside-in .form-color,
+.ui-dialog-outside-in .form-file,
+.ui-dialog-outside-in .form-textarea,
+.ui-dialog-outside-in .form-date,
+.ui-dialog-outside-in .form-time {
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 6px;
+  margin-top: 5px;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  border-width: 1px;
+  border-radius: 2px;
+  outline: 0;
+  display: block;
+  font-size: 14px;
+  line-height: 16px;
+  cursor: pointer;
+}
+/* Reduce contrast for fields against dark backround. */
+.ui-dialog-outside-in .form-text,
+.ui-dialog-outside-in .form-tel,
+.ui-dialog-outside-in .form-email,
+.ui-dialog-outside-in .form-url,
+.ui-dialog-outside-in .form-search,
+.ui-dialog-outside-in .form-number,
+.ui-dialog-outside-in .form-color,
+.ui-dialog-outside-in .form-file,
+.ui-dialog-outside-in .form-textarea,
+.ui-dialog-outside-in .form-date,
+.ui-dialog-outside-in .form-time {
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
+  background-color: #eee;
+  border-color: #333;
+  color: #595959;
+}
+.ui-dialog-outside-in .form-text:focus,
+.ui-dialog-outside-in .form-tel:focus,
+.ui-dialog-outside-in .form-email:focus,
+.ui-dialog-outside-in .form-url:focus,
+.ui-dialog-outside-in .form-search:focus,
+.ui-dialog-outside-in .form-number:focus,
+.ui-dialog-outside-in .form-color:focus,
+.ui-dialog-outside-in .form-file:focus,
+.ui-dialog-outside-in .form-textarea:focus,
+.ui-dialog-outside-in .form-date:focus,
+.ui-dialog-outside-in .form-time:focus {
+  border-color: #40b6ff;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125), 0 0 8px #40b6ff;
+  background-color: #fff;
+}
+.ui-dialog-outside-in input[type="checkbox"],
+.ui-dialog-outside-in .checkbox,
+.ui-dialog-outside-in input[type="radio"],
+.ui-dialog-outside-in .radio {
+  position: static;
+  margin: 0;
+}
+.ui-dialog-outside-in td .checkbox {
+  display: table-cell;
+  line-height: normal;
+  vertical-align: middle;
+}
+.ui-dialog-outside-in .form-checkbox,
+.ui-dialog-outside-in .form-radio {
+  /* Add contrast for dark background. */
+  box-shadow: 0 0 2px 1px #000;
+}
+.ui-dialog-outside-in input[type="radio"] {
+  /* Add full circular radius. */
+  border-radius: 50%;
+}
+.ui-dialog-outside-in .form-actions {
+  text-align: center;
+}

web/core/modules/outside_in/css/outside_in.module.css

@@ -0,0 +1,38 @@
+/**
+ * @file
+ * Styling for Settings Tray module.
+ */
+/*
+ * Position the edit toolbar tab.
+ * @todo Move changes into contextual module when Settings Tray is not
+ *   experimental: https://www.drupal.org/node/2784591.
+ */
+.toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
+  float: left;
+}
+[dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
+  float: right;
+}
+
+#main-canvas.js-outside-in-edit-mode a,
+#main-canvas.js-outside-in-edit-mode input {
+  pointer-events: none;
+}
+#main-canvas.js-outside-in-edit-mode .contextual-links a {
+  pointer-events: inherit;
+}
+
+/*
+ * Force the tray to be 100% width at the same breakpoint the dialog system uses
+ * to expand dialog widths.
+ */
+@media all and (max-width: 48em) { /* 768px */
+  .ui-dialog.ui-dialog-offcanvas {
+    width: 100% !important;
+  }
+  /* When tray is at 100% width stop the body from scrolling */
+  .js-tray-open {
+    height: 100%;
+    overflow-y: hidden;
+  }
+}

web/core/modules/outside_in/css/outside_in.motion.css

@@ -0,0 +1,44 @@
+/**
+ * @file
+ * Motion effects for Settings Tray module.
+ *
+ * Motion effects are in a separate file so that they can be easily turned off
+ * to improve performance if desired.
+ *
+ * @todo Move motion effects file into a core Off-Canvas library and add a
+ *   configuration option for browser rendering performance to disable this
+ *   file: https://www.drupal.org/node/2784443.
+ */
+
+
+/* Transition the edit icon in the toolbar. */
+#toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
+  -webkit-transition: all .7s ease;
+  -moz-transition: all .7s ease;
+  transition: all .7s ease;
+}
+
+/* Transition the editables on the page, their contextual links and their hover states. */
+.dialog-offcanvas__main-canvas .contextual,
+.dialog-offcanvas__main-canvas .js-outside-in-edit-mode .outside-in-editable,
+.dialog-offcanvas__main-canvas.js-tray-open .js-outside-in-edit-mode .outside-in-editable {
+  -webkit-transition: all .7s ease;
+  -moz-transition: all .7s ease;
+  transition: all .7s ease;
+}
+
+/* Transition the position of the toolbar. */
+.toolbar-fixed,
+.toolbar-tray-open {
+  -webkit-transition: all .5s ease;
+  -moz-transition: all .5s ease;
+  transition: all .5s ease;
+}
+
+/* Transition the administration tray.
+#toolbar-administration,
+#toolbar-administration * {
+  -webkit-transition: all .7s ease;
+  -moz-transition: all .7s ease;
+  transition: all .7s ease;
+}*/

web/core/modules/outside_in/css/outside_in.table.css

@@ -0,0 +1,72 @@
+/**
+ * @file
+ * Visual styling for tables in the Settings Tray module's off canvas tray.
+ */
+
+.ui-dialog-outside-in table {
+  border: 0;
+  border-collapse: collapse;
+  min-width: 300px;
+  margin-top: 0;
+  /* Cancel out the padding of the parent to make the table full width and flush to the bottom. */
+  margin-right: -20px;
+  margin-left: -20px;
+  margin-bottom: -10px;
+}
+.ui-dialog-outside-in tr th {
+  padding: 2px 4px;
+  background-color: transparent;
+  border: 0;
+  border-collapse: collapse;
+  font-size: 12px;
+  color: #bbb;
+  text-align: left; /* LTR */
+}
+[dir="rtl"] .ui-dialog-outside-in tr th {
+  text-align: right;
+}
+.ui-dialog-outside-in tr,
+.ui-dialog-outside-in tr td {
+  padding: 2px 4px;
+  height: 35px;
+  vertical-align: middle;
+  text-align: left; /* LTR */
+  border: 0px;
+  border-style: solid;
+  border-color: #777;
+  border-bottom-width: 1px;
+  background: none;
+  background-color: transparent;
+  font-size: 12px;
+}
+[dir="rtl"] .ui-dialog-outside-in tr th,
+[dir="rtl"] .ui-dialog-outside-in tr td {
+  text-align: right;
+}
+.ui-dialog-outside-in td a {
+  display: block;
+  max-width: 120px;
+  overflow: hidden;
+}
+.ui-dialog.ui-dialog-outside-in tr td:first-child,
+.ui-dialog.ui-dialog-outside-in tr th:first-child {
+  padding-left: 20px; /* LTR */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+[dir="rtl"] .ui-dialog.ui-dialog-outside-in tr td:first-child,
+[dir="rtl"] .ui-dialog.ui-dialog-outside-in tr th:first-child {
+  padding-right: 20px;
+}
+.ui-dialog-outside-in tr.odd,
+.ui-dialog-outside-in tr.even {
+  background-image: none;
+  background-color: transparent;
+}
+td.checkbox,
+th.checkbox {
+  text-align: center;
+  width: 20px;
+}
+

web/core/modules/outside_in/css/outside_in.tabledrag.css

@@ -0,0 +1,104 @@
+/**
+ * @file
+ * Table drag behavior for Settings Tray module.
+ *
+ * @see tabledrag.js
+ */
+
+
+/* Because base font sizes will vary widely across themes, to maintain consistency outside-in uses only pixels. */
+
+.ui-dialog-outside-in body.drag {
+  cursor: move;
+}
+.ui-dialog-outside-in tr.region-title {
+  font-weight: normal;
+}
+.ui-dialog-outside-in tr.region-message {
+  color: #fff;
+}
+.ui-dialog-outside-in tr.region-populated {
+  display: none;
+}
+.ui-dialog-outside-in tr.add-new .tabledrag-changed {
+  display: none;
+}
+.ui-dialog-outside-in .draggable a.tabledrag-handle {
+  background-image: none;
+  margin: 0;
+  margin-left: 0; /* LTR */
+  margin-right: 5px; /* LTR */
+  height: auto;
+  min-width: 20px;
+  padding: 0;
+  overflow: hidden;
+  float: left; /* LTR */
+  text-decoration: none;
+  cursor: move;
+}
+[dir="rtl"] .ui-dialog-outside-in .draggable a.tabledrag-handle {
+  float: right;
+  margin-right: 0;
+  margin-left: 5px;
+}
+.ui-dialog-outside-in a.tabledrag-handle .handle {
+  /* Use lighter drag icon against dark background. */
+  background-image: url(../../../misc/icons/bebebe/move.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  width: auto;
+}
+.ui-dialog-outside-in .draggable a.tabledrag-handle:hover .handle,
+.ui-dialog-outside-in .draggable a.tabledrag-handle:focus .handle {
+  background-image: url(../../../misc/icons/787878/move.svg);
+  text-decoration: none;
+}
+
+.ui-dialog-outside-in .touchevents .draggable td {
+  padding: 0 10px;
+}
+.ui-dialog-outside-in .touchevents .draggable .menu-item__link {
+  display: inline-block;
+  padding: 10px 0;
+}
+.ui-dialog-outside-in .touchevents a.tabledrag-handle {
+  height: 44px;
+  width: 40px;
+}
+.ui-dialog-outside-in .touchevents a.tabledrag-handle .handle {
+  background-position: 40% 19px; /* LTR */
+  height: 21px;
+}
+[dir="rtl"] .ui-dialog-outside-in .touch a.tabledrag-handle .handle {
+  background-position: right 40% top 19px;
+}
+.ui-dialog-outside-in .touchevents .draggable.drag a.tabledrag-handle .handle {
+  background-position: 50% -32px;
+}
+.ui-dialog-outside-in .tabledrag-toggle-weight-wrapper {
+  text-align: right; /* LTR */
+}
+[dir="rtl"] .ui-dialog-outside-in .tabledrag-toggle-weight-wrapper {
+  text-align: left;
+}
+.ui-dialog-outside-in .indentation {
+  float: left; /* LTR */
+  height: auto;
+  margin: 0 3px 0 -10px; /* LTR */
+  padding: 0 0 0 10px; /* LTR */
+  width: auto;
+}
+[dir="rtl"] .ui-dialog-outside-in .indentation {
+  float: right;
+  margin: 0 -10px 0 3px;
+  padding: 0 10px 0 0;
+}
+.ui-dialog-outside-in tr.drag {
+  background-color: #555;
+}
+.ui-dialog-outside-in tr.drag-previous {
+  background-color: #000;
+}

web/core/modules/outside_in/css/outside_in.theme.css

@@ -0,0 +1,326 @@
+/**
+ * @file
+ * Visual styling for Settings Tray module.
+ */
+
+/* @todo Move this into toolbar when this module is no longer experimental:
+ *   https://www.drupal.org/node/2784593.
+ */
+
+/* Style the edit mode toolbar and tabs. */
+#toolbar-bar.js-outside-in-edit-mode {
+  background-color: #fff;
+}
+.js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
+  color: #999;
+}
+.js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
+  color: #333;
+}
+
+/* Style both the edit and editing states of the contextual links toggle tab. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item,
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
+  background-color: #50a0e9;
+  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+  color: #ddd;
+  text-shadow: none;
+  font-weight: bold;
+  outline: none;
+}
+/* Make the hover of the inactive state the same as the active state. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
+  background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
+  color: #fff;
+}
+/* Make the hover of the active state the same as the inactive state. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
+  background-color: #2369a6;
+  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+  color: #fff;
+}
+/* Make the inactive icon grey. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:before {
+  background-image: url(../../../misc/icons/bebebe/pencil.svg);
+}
+/* Make the active icon white. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+.toolbar-tab > .button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+
+/* Style the editables while in edit mode. */
+.dialog-offcanvas__main-canvas.js-outside-in-edit-mode .outside-in-editable {
+  outline: 1px dashed rgba(0,0,0,0.5);
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
+}
+.dialog-offcanvas__main-canvas.js-outside-in-edit-mode .outside-in-editable:hover,
+.dialog-offcanvas__main-canvas.js-outside-in-edit-mode .outside-in-editable.outside-in-active-editable {
+  background-color: rgba(0,0,0,0.2);
+}
+
+/* Style the dialog-offcanvas container. */
+.ui-dialog-outside-in {
+  background: #444;
+  border: 0 solid transparent;
+  border-radius: 0;
+  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
+  padding: 0;
+  color: #ddd;
+  /* Layer the dialog just under the toolbar. */
+  z-index: 501;
+}
+
+/* Style content in the tray. */
+.ui-dialog-outside-in p,
+.ui-dialog-outside-in h1,
+.ui-dialog-outside-in h2,
+.ui-dialog-outside-in h3,
+.ui-dialog-outside-in h4,
+.ui-dialog-outside-in h5,
+.ui-dialog-outside-in h6,
+.ui-dialog-outside-in pre,
+.ui-dialog-outside-in legend,
+.ui-dialog-outside-in cite,
+.ui-dialog-outside-in span,
+.ui-dialog-outside-in summary,
+.ui-dialog-outside-in details,
+.ui-dialog-outside-in .form-item {
+  color: #ddd;
+  font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  background-color: transparent;
+  text-shadow: none;
+}
+.ui-dialog-outside-in a,
+.ui-dialog-outside-in .link {
+  border-bottom: none;
+  font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  color: #85bef4;
+  text-decoration: none;
+  transition: color .5s ease;
+}
+.ui-dialog-outside-in a:focus,
+.ui-dialog-outside-in .link:focus,
+.ui-dialog-outside-in a:hover,
+.ui-dialog-outside-in .link:hover {
+  outline: none;
+  color: #46a0f5;
+}
+
+/* Style the tray header. */
+.ui-dialog-outside-in .ui-dialog-titlebar {
+  padding: 20px;
+  background: #2d2d2d;
+  border: 0;
+  border-bottom: 1px solid #000;
+  border-radius: 0;
+  font-weight: normal;
+  color: #fff;
+}
+.ui-dialog-outside-in .ui-dialog-titlebar-close {
+  background-image: url(../../../misc/icons/bebebe/ex.svg);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  border: 0;
+  position: absolute;
+  right: 20px;
+  -moz-transition: all .5s ease;
+  transition: background .5s ease;
+}
+.ui-dialog-outside-in .ui-dialog-titlebar-close:hover {
+  background-image: url(../../../misc/icons/ffffff/ex.svg);
+}
+[dir="rtl"] .ui-dialog-outside-in .ui-dialog-titlebar-close {
+  left: 20px;
+  right: auto;
+}
+.ui-dialog-outside-in .ui-dialog-title {
+  font-size: 16px;
+  margin: 0;
+  /* Push the text away from the icon. */
+  padding-left: 30px; /* LTR */
+  padding-right: 0px; /* LTR */
+  /* Ensure that long titles do not overlap the close button. */
+  max-width: 210px;
+  text-align: left; /* LTR */
+}
+[dir="rtl"] .ui-dialog-outside-in .ui-dialog-title {
+  text-align: right;
+  padding-left: 0px;
+  padding-right: 0px;
+}
+.ui-dialog-outside-in .ui-dialog-title:before {
+  background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat scroll center center;
+  background-size: 100% auto;
+  content: '';
+  display: block;
+  height: 100%;
+  position: absolute;
+  left: 20px; /* LTR */
+  top: 0;
+  width: 20px;
+}
+[dir="rtl"] .ui-dialog-outside-in .ui-dialog-title:before {
+  left: auto;
+  right: 20px;
+}
+
+/* Override default styling from jquery UI. */
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+  border: 0;
+  font-weight: normal;
+  font-size: 14px;
+  color: #333;
+}
+/* Hide the defauld Jquery UI dialog close button. */
+.ui-dialog-outside-in .ui-icon-closethick {
+  visibility: hidden;
+}
+
+/* Groups below here with todos to move to new component need to load last. */
+
+/**
+ * Visual styling for buttons in the Settings Tray module's off canvas tray.
+ * @todo Move to its own component:
+ *   https://www.drupal.org/node/1945262.
+ */
+
+.ui-dialog-outside-in button.link {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+}
+.ui-dialog-outside-in .button {
+  width: 100%;
+  height: auto;
+  margin: 1em auto;
+  padding: 6px 1em;
+  background: #7b7b7b;
+  border-radius: 1em;
+  font-size: 14px;
+  color: #fff;
+  transition: all .5s ease;
+}
+.ui-dialog-outside-in .button:hover,
+.ui-dialog-outside-in .button:focus {
+  background: #888;
+}
+.ui-dialog-outside-in .button--primary {
+  background: #277abd none;
+  border: none;
+  color: #fff;
+  transition: all .5s ease;
+}
+.ui-dialog-outside-in .button--primary:hover,
+.ui-dialog-outside-in .button--primary:focus {
+  background: #2b8bd8;
+}
+
+
+/*
+ * Visual styling for dropbutton in the Settings Tray module's off canvas tray.
+ * @todo Move to its own component:
+ *   https://www.drupal.org/node/1945262.
+ */
+
+.ui-dialog-outside-in .dropbutton-widget {
+  background: #7b7b7b none;
+  border: 0;
+  border-radius: 1em;
+  color: #eee;
+  transition: background .5s ease;
+}
+.ui-dialog-outside-in .dropbutton-widget:hover {
+  box-shadow: 0 2px 2px 1px rgba(0,0,0,0.5);
+}
+.ui-dialog-outside-in .dropbutton-toggle button {
+  background: #7b7b7b none;
+  border-bottom-right-radius: 1em; /* LTR */
+  border-top-right-radius: 1em; /* LTR */
+  border-style: solid;
+  border-color: #333;
+  border-left-width: 1px; /* LTR */
+  transition: background .5s ease;
+}
+[dir="rtl"] .ui-dialog-outside-in .dropbutton-toggle button {
+  border-radius: 0;
+  border-bottom-left-radius: 1em;
+  border-top-left-radius: 1em;
+  border-width: 0;
+  border-right-width: 1px;
+}
+.ui-dialog-outside-in .dropbutton .dropbutton-action:hover,
+.ui-dialog-outside-in .dropbutton a:hover {
+  background: #6b6b6b none;
+  border-bottom-left-radius: 1em; /* LTR */
+  border-top-left-radius: 1em; /* LTR */
+}
+[dir="rtl"] .ui-dialog-outside-in .dropbutton .dropbutton-action:hover,
+[dir="rtl"] .ui-dialog-outside-in .dropbutton a:hover {
+  border-radius: 0;
+  border-bottom-right-radius: 1em;
+  border-top-right-radius: 1em;
+}
+.ui-dialog-outside-in .dropbutton a {
+  padding: 0.1em 0.8em;
+  color: #eee;
+  font-size: 90%;
+  line-height: 1.8;
+  transition: all .5s ease;
+}
+.ui-dialog-outside-in .dropbutton:hover a {
+  color: #fff;
+}
+/* Make an arrow out of borders with some fancy CSS. */
+.ui-dialog-outside-in span.dropbutton-arrow {
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-style: solid;
+  border-width: 0.3333em 0.3333em 0;
+  display: block;
+  height: 0;
+  line-height: 0;
+  position: absolute;
+  right: 40%;
+  top: 50%;
+  margin-top: -0.1666em;
+  width: 0;
+  overflow: hidden;
+  color: #fff;
+}
+.js .ui-dialog-outside-in .dropbutton-toggle .dropbutton-arrow:hover {
+  background: transparent;
+}
+.ui-dialog-outside-in td .dropbutton-multiple {
+  padding-right: 0;
+}
+[dir="rtl"].ui-dialog-outside-in td .dropbutton-multiple {
+  padding-left: 0;
+}
+.ui-dialog-outside-in td .dropbutton-multiple .dropbutton {
+  border-right: 0;
+  border-left: 0;
+}
+.ui-dialog-outside-in td .dropbutton .secondary-action {
+  border-top-color: #000;
+}

web/core/modules/outside_in/css/outside_in.toolbar.css

@@ -0,0 +1,70 @@
+/**
+ * @file
+ * Visual styling for the toolbar when Settings Tray module is enabled.
+ */
+
+/* @todo Move this into toolbar when module is not experimental:
+ *   https://www.drupal.org/node/2784593.
+ */
+
+/* Style the edit mode toolbar and tabs. */
+#toolbar-bar.js-outside-in-edit-mode {
+  background-color: #fff;
+}
+#toolbar-bar.js-outside-in-edit-mode .toolbar-item {
+  color: #999;
+}
+#toolbar-bar.js-outside-in-edit-mode .toolbar-item .is-active {
+  color: #333;
+}
+
+/* Style both the edit and editing states of the contextual links toggle tab. */
+.toolbar-icon-edit.toolbar-item {
+  background-color: #50a0e9;
+  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
+  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+  color: #eee;
+  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+  font-weight: 700;
+  -webkit-font-smoothing: antialiased;
+}
+.toolbar-icon-edit.toolbar-item.is-active {
+  background-color: #50a0e9;
+  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
+  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+  color: #eee;
+  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+  font-weight: 700;
+  -webkit-font-smoothing: antialiased;
+}
+.toolbar-tab:hover > .toolbar-icon-edit,
+.toolbar-icon-edit:focus .toolbar-item {
+  background-color: #2369a6;
+  background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
+  background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
+  border-color: #1e5c90;
+  color: #fff;
+  outline: none;
+}
+.toolbar-icon.toolbar-icon-edit.toolbar-item:before,
+button.toolbar-icon.toolbar-icon-edit.toolbar-item:before {
+  background-image: url(../../../misc/icons/bebebe/pencil.svg);
+}
+.toolbar-icon.toolbar-icon-edit.toolbar-item:before:hover,
+button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+#toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+
+#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
+ background-image: none;
+ color: #fff;
+}
+#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
+ background-image: linear-gradient(to bottom, #0094f0, #0e69be);
+}