3 * Visual styling for Settings Tray module.
6 /* @todo Move this into toolbar when this module is no longer experimental:
7 * https://www.drupal.org/node/2784593.
10 /* Style the edit mode toolbar and tabs. */
11 #toolbar-bar.js-outside-in-edit-mode {
12 background-image: linear-gradient(to bottom,#0c97ed,#1f86c7);
14 .js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
17 .js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
21 /* Style both the edit and editing states of the contextual links toggle tab. */
22 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item,
23 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
24 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
25 background-color: #50a0e9;
26 background-image: linear-gradient(to bottom, #007bc6, #0071b8);
32 /* Make the hover of the inactive state the same as the active state. */
33 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
34 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
35 background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
38 /* Make the hover of the active state the same as the inactive state. */
39 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
40 background-color: #2369a6;
41 background-image: linear-gradient(to bottom, #007bc6, #0071b8);
44 /* Make the inactive icon grey. */
45 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:before {
46 background-image: url(../../../misc/icons/bebebe/pencil.svg);
48 /* Make the active icon white. */
49 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:before {
50 background-image: url(../../../misc/icons/ffffff/pencil.svg);
52 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover:before {
53 background-image: url(../../../misc/icons/ffffff/pencil.svg);
55 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
56 background-image: url(../../../misc/icons/ffffff/pencil.svg);
58 .toolbar-tab > .button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
59 background-image: url(../../../misc/icons/ffffff/pencil.svg);
62 /* Style the editables while in edit mode. */
63 .dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable {
64 outline: 1px dashed rgba(0,0,0,0.5);
65 box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
67 .dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable:hover,
68 .dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable.outside-in-active-editable {
69 background-color: rgba(0,0,0,0.2);
72 /* Style the dialog-off-canvas container. */
73 .ui-dialog-outside-in {
75 border: 0 solid transparent;
77 box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
80 /* Layer the dialog just under the toolbar. */
84 /* Style content in the tray. */
85 .ui-dialog-outside-in p,
86 .ui-dialog-outside-in h1,
87 .ui-dialog-outside-in h2,
88 .ui-dialog-outside-in h3,
89 .ui-dialog-outside-in h4,
90 .ui-dialog-outside-in h5,
91 .ui-dialog-outside-in h6,
92 .ui-dialog-outside-in pre,
93 .ui-dialog-outside-in legend,
94 .ui-dialog-outside-in cite,
95 .ui-dialog-outside-in span,
96 .ui-dialog-outside-in summary,
97 .ui-dialog-outside-in details,
98 .ui-dialog-outside-in .form-item {
100 font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
103 background-color: transparent;
106 .ui-dialog-outside-in a,
107 .ui-dialog-outside-in .link {
109 font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
113 text-decoration: none;
114 transition: color .5s ease;
116 .ui-dialog-outside-in a:focus,
117 .ui-dialog-outside-in .link:focus,
118 .ui-dialog-outside-in a:hover,
119 .ui-dialog-outside-in .link:hover {
124 /* Style the tray header. */
125 .ui-dialog-outside-in .ui-dialog-titlebar {
129 border-bottom: 1px solid #000;
134 .ui-dialog-outside-in .ui-dialog-titlebar-close {
135 background-image: url(../../../misc/icons/bebebe/ex.svg);
136 background-position: center center;
137 background-repeat: no-repeat;
138 background-color: transparent;
142 -moz-transition: all .5s ease;
143 transition: background .5s ease;
145 .ui-dialog-outside-in .ui-dialog-titlebar-close:hover {
146 background-image: url(../../../misc/icons/ffffff/ex.svg);
148 [dir="rtl"] .ui-dialog-outside-in .ui-dialog-titlebar-close {
152 .ui-dialog-outside-in .ui-dialog-title {
155 /* Push the text away from the icon. */
156 padding-left: 30px; /* LTR */
157 padding-right: 0px; /* LTR */
158 /* Ensure that long titles do not overlap the close button. */
160 text-align: left; /* LTR */
162 [dir="rtl"] .ui-dialog-outside-in .ui-dialog-title {
167 .ui-dialog-outside-in .ui-dialog-title:before {
168 background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat scroll center center;
169 background-size: 100% auto;
174 left: 20px; /* LTR */
178 [dir="rtl"] .ui-dialog-outside-in .ui-dialog-title:before {
183 /* Override default styling from jquery UI. */
185 .ui-widget-content .ui-state-default,
186 .ui-widget-header .ui-state-default {
192 /* Hide the defauld Jquery UI dialog close button. */
193 .ui-dialog-outside-in .ui-icon-closethick {
197 /* Groups below here with todos to move to new component need to load last. */
200 * Visual styling for buttons in the Settings Tray module's off canvas tray.
201 * @todo Move to its own component:
202 * https://www.drupal.org/node/1945262.
205 .ui-dialog-outside-in button.link {
206 background: transparent;
212 .ui-dialog-outside-in .button {
221 transition: all .5s ease;
223 .ui-dialog-outside-in .button:hover,
224 .ui-dialog-outside-in .button:focus {
227 .ui-dialog-outside-in .button--primary {
228 background: #277abd none;
231 transition: all .5s ease;
233 .ui-dialog-outside-in .button--primary:hover,
234 .ui-dialog-outside-in .button--primary:focus {
240 * Visual styling for dropbutton in the Settings Tray module's off canvas tray.
241 * @todo Move to its own component:
242 * https://www.drupal.org/node/1945262.
245 .ui-dialog-outside-in .dropbutton-widget {
246 background: #7b7b7b none;
250 transition: background .5s ease;
252 .ui-dialog-outside-in .dropbutton-widget:hover {
253 box-shadow: 0 2px 2px 1px rgba(0,0,0,0.5);
255 .ui-dialog-outside-in .dropbutton-toggle button {
256 background: #7b7b7b none;
257 border-bottom-right-radius: 1em; /* LTR */
258 border-top-right-radius: 1em; /* LTR */
261 border-left-width: 1px; /* LTR */
262 transition: background .5s ease;
264 [dir="rtl"] .ui-dialog-outside-in .dropbutton-toggle button {
266 border-bottom-left-radius: 1em;
267 border-top-left-radius: 1em;
269 border-right-width: 1px;
271 .ui-dialog-outside-in .dropbutton .dropbutton-action:hover,
272 .ui-dialog-outside-in .dropbutton a:hover {
273 background: #6b6b6b none;
274 border-bottom-left-radius: 1em; /* LTR */
275 border-top-left-radius: 1em; /* LTR */
277 [dir="rtl"] .ui-dialog-outside-in .dropbutton .dropbutton-action:hover,
278 [dir="rtl"] .ui-dialog-outside-in .dropbutton a:hover {
280 border-bottom-right-radius: 1em;
281 border-top-right-radius: 1em;
283 .ui-dialog-outside-in .dropbutton a {
284 padding: 0.1em 0.8em;
288 transition: all .5s ease;
290 .ui-dialog-outside-in .dropbutton:hover a {
293 /* Make an arrow out of borders with some fancy CSS. */
294 .ui-dialog-outside-in span.dropbutton-arrow {
295 border-bottom-color: transparent;
296 border-left-color: transparent;
297 border-right-color: transparent;
299 border-width: 0.3333em 0.3333em 0;
306 margin-top: -0.1666em;
311 .js .ui-dialog-outside-in .dropbutton-toggle .dropbutton-arrow:hover {
312 background: transparent;
314 .ui-dialog-outside-in td .dropbutton-multiple {
317 [dir="rtl"].ui-dialog-outside-in td .dropbutton-multiple {
320 .ui-dialog-outside-in td .dropbutton-multiple .dropbutton {
324 .ui-dialog-outside-in td .dropbutton .secondary-action {
325 border-top-color: #000;