Chris@0: /**
Chris@0:  * @file
Chris@0:  * Visual styling for Settings Tray module.
Chris@0:  */
Chris@0: 
Chris@0: /* @todo remove the @imports when we find a better way to load these styles last.
Chris@0:  * https://www.drupal.org/node/1945262.
Chris@0:  */
Chris@0: 
Chris@0: /* Style the edit mode toolbar and tabs. */
Chris@0: #toolbar-bar.js-settings-tray-edit-mode {
Chris@0:   background-image: linear-gradient(to bottom,#0c97ed,#1f86c7);
Chris@0: }
Chris@0: .js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
Chris@0:   color: #999;
Chris@0: }
Chris@0: .js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
Chris@0:   color: #333;
Chris@0: }
Chris@0: 
Chris@0: /* Style both the edit and editing states of the contextual links toggle tab. */
Chris@0: .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item,
Chris@0: .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
Chris@0: .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
Chris@0:   background-color: #50a0e9;
Chris@0:   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
Chris@0:   color: #ddd;
Chris@0:   text-shadow: none;
Chris@0:   font-weight: bold;
Chris@0:   outline: none;
Chris@0: }
Chris@0: /* Make the hover of the inactive state the same as the active state. */
Chris@0: .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
Chris@0: .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
Chris@0:   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
Chris@0:   color: #fff;
Chris@0: }
Chris@0: /* Make the hover of the active state the same as the inactive state. */
Chris@0: .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
Chris@0:   background-color: #2369a6;
Chris@0:   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
Chris@0:   color: #fff;
Chris@0: }
Chris@0: /* Make the inactive icon grey. */
Chris@0: .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:before {
Chris@0:   background-image: url(../../../misc/icons/bebebe/pencil.svg);
Chris@0: }
Chris@0: /* Make the active icon white. */
Chris@0: .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:before {
Chris@0:   background-image: url(../../../misc/icons/ffffff/pencil.svg);
Chris@0: }
Chris@0: .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover:before {
Chris@0:   background-image: url(../../../misc/icons/ffffff/pencil.svg);
Chris@0: }
Chris@0: .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
Chris@0:   background-image: url(../../../misc/icons/ffffff/pencil.svg);
Chris@0: }
Chris@0: .toolbar-tab > .button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
Chris@0:   background-image: url(../../../misc/icons/ffffff/pencil.svg);
Chris@0: }
Chris@0: 
Chris@0: /* Style the editables while in edit mode. */
Chris@0: .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable {
Chris@0:   outline: 1px dashed rgba(0,0,0,0.5);
Chris@0:   box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
Chris@0: }
Chris@0: .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable:hover,
Chris@0: .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable.settings-tray-active-editable {
Chris@0:   background-color: rgba(0,0,0,0.2);
Chris@0: }