|
Chris@0
|
1 /**
|
|
Chris@0
|
2 * @file
|
|
Chris@0
|
3 * Visual styling for Settings Tray module.
|
|
Chris@0
|
4 */
|
|
Chris@0
|
5
|
|
Chris@0
|
6 /* @todo remove the @imports when we find a better way to load these styles last.
|
|
Chris@0
|
7 * https://www.drupal.org/node/1945262.
|
|
Chris@0
|
8 */
|
|
Chris@0
|
9
|
|
Chris@0
|
10 /* Style the edit mode toolbar and tabs. */
|
|
Chris@0
|
11 #toolbar-bar.js-settings-tray-edit-mode {
|
|
Chris@0
|
12 background-image: linear-gradient(to bottom,#0c97ed,#1f86c7);
|
|
Chris@0
|
13 }
|
|
Chris@0
|
14 .js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
|
|
Chris@0
|
15 color: #999;
|
|
Chris@0
|
16 }
|
|
Chris@0
|
17 .js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
|
|
Chris@0
|
18 color: #333;
|
|
Chris@0
|
19 }
|
|
Chris@0
|
20
|
|
Chris@0
|
21 /* Style both the edit and editing states of the contextual links toggle tab. */
|
|
Chris@0
|
22 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item,
|
|
Chris@0
|
23 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
|
|
Chris@0
|
24 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
|
|
Chris@0
|
25 background-color: #50a0e9;
|
|
Chris@0
|
26 background-image: linear-gradient(to bottom, #007bc6, #0071b8);
|
|
Chris@0
|
27 color: #ddd;
|
|
Chris@0
|
28 text-shadow: none;
|
|
Chris@0
|
29 font-weight: bold;
|
|
Chris@0
|
30 outline: none;
|
|
Chris@0
|
31 }
|
|
Chris@0
|
32 /* Make the hover of the inactive state the same as the active state. */
|
|
Chris@0
|
33 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
|
|
Chris@0
|
34 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
|
|
Chris@0
|
35 background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
|
|
Chris@0
|
36 color: #fff;
|
|
Chris@0
|
37 }
|
|
Chris@0
|
38 /* Make the hover of the active state the same as the inactive state. */
|
|
Chris@0
|
39 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
|
|
Chris@0
|
40 background-color: #2369a6;
|
|
Chris@0
|
41 background-image: linear-gradient(to bottom, #007bc6, #0071b8);
|
|
Chris@0
|
42 color: #fff;
|
|
Chris@0
|
43 }
|
|
Chris@0
|
44 /* Make the inactive icon grey. */
|
|
Chris@0
|
45 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:before {
|
|
Chris@0
|
46 background-image: url(../../../misc/icons/bebebe/pencil.svg);
|
|
Chris@0
|
47 }
|
|
Chris@0
|
48 /* Make the active icon white. */
|
|
Chris@0
|
49 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:before {
|
|
Chris@0
|
50 background-image: url(../../../misc/icons/ffffff/pencil.svg);
|
|
Chris@0
|
51 }
|
|
Chris@0
|
52 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover:before {
|
|
Chris@0
|
53 background-image: url(../../../misc/icons/ffffff/pencil.svg);
|
|
Chris@0
|
54 }
|
|
Chris@0
|
55 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
|
|
Chris@0
|
56 background-image: url(../../../misc/icons/ffffff/pencil.svg);
|
|
Chris@0
|
57 }
|
|
Chris@0
|
58 .toolbar-tab > .button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
|
|
Chris@0
|
59 background-image: url(../../../misc/icons/ffffff/pencil.svg);
|
|
Chris@0
|
60 }
|
|
Chris@0
|
61
|
|
Chris@0
|
62 /* Style the editables while in edit mode. */
|
|
Chris@0
|
63 .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable {
|
|
Chris@0
|
64 outline: 1px dashed rgba(0,0,0,0.5);
|
|
Chris@0
|
65 box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
|
|
Chris@0
|
66 }
|
|
Chris@0
|
67 .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable:hover,
|
|
Chris@0
|
68 .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable.settings-tray-active-editable {
|
|
Chris@0
|
69 background-color: rgba(0,0,0,0.2);
|
|
Chris@0
|
70 }
|
