--- /dev/null
+/**
+ * @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-off-canvas__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-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable:hover,
+.dialog-off-canvas__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-off-canvas 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;
+}
projects / yaffs-website / blobdiff