Commit 7f4cbc43 authored by webchick's avatar webchick
Browse files

Issue #2781577 by tim.plunkett, tkoleary, Bojhan, rickvug, Wim Leers: Properly...

Issue #2781577 by tim.plunkett, tkoleary, Bojhan, rickvug, Wim Leers: Properly style outside-in off canvas tray
parent b714d00d
/**
* @file
* Visual styling for summary and details in the Outside-In module off canvas tray.
*/
.ui-dialog-offcanvas details,
.ui-dialog-offcanvas summary,
.ui-dialog-offcanvas .ui-dialog-content {
background: #474747;
color: #ddd;
}
.ui-dialog-offcanvas summary a {
color: #ddd;
padding: 0 inherit;
}
.ui-dialog-offcanvas summary a:hover,
.ui-dialog-offcanvas summary a:focus {
color: #fff;
}
.ui-dialog-offcanvas details,
.ui-dialog-offcanvas summary,
.ui-dialog-offcanvas .details-wrapper {
border-width: 0;
/* Cancel out the padding of the parent. */
margin: 0 -20px;
padding: 0 20px;
}
.ui-dialog-offcanvas summary {
text-shadow: none;
outline: none;
padding: 10px 20px;
font-size: 14px;
transition: all .5s ease;
}
.ui-dialog-offcanvas summary:hover,
.ui-dialog-offcanvas summary:focus {
background-color: #222;
outline: none;
}
.ui-dialog-offcanvas details[open] {
background-color: #333;
padding-bottom: 10px;
}
.ui-dialog-offcanvas details[open] > summary {
background-color: #333;
color: #eee;
}
.ui-dialog-offcanvas details[open] > summary:hover {
background-color: #222;
color: #fff;
}
/**
* @file
* Visual styling for forms in the Outside-In module off canvas tray.
*/
.ui-dialog-offcanvas label {
line-height: normal;
font-size: 12px;
font-weight: normal;
color: #ddd;
}
.ui-dialog-offcanvas .description,
.ui-dialog-offcanvas .form-item .description,
.ui-dialog-offcanvas .details-description {
color: #ddd;
margin-top: 5px;
font-size: 12px;
font-style: normal;
}
.ui-dialog-offcanvas .details-wrapper .description {
color: #bbb;
}
.ui-dialog-offcanvas .form-item {
margin-bottom: 10px;
margin-top: 10px;
}
/* Set size and position for all inputs. */
.ui-dialog-offcanvas .form-select,
.ui-dialog-offcanvas .form-text,
.ui-dialog-offcanvas .form-tel,
.ui-dialog-offcanvas .form-email,
.ui-dialog-offcanvas .form-url,
.ui-dialog-offcanvas .form-search,
.ui-dialog-offcanvas .form-number,
.ui-dialog-offcanvas .form-color,
.ui-dialog-offcanvas .form-file,
.ui-dialog-offcanvas .form-textarea,
.ui-dialog-offcanvas .form-date,
.ui-dialog-offcanvas .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-offcanvas .form-text,
.ui-dialog-offcanvas .form-tel,
.ui-dialog-offcanvas .form-email,
.ui-dialog-offcanvas .form-url,
.ui-dialog-offcanvas .form-search,
.ui-dialog-offcanvas .form-number,
.ui-dialog-offcanvas .form-color,
.ui-dialog-offcanvas .form-file,
.ui-dialog-offcanvas .form-textarea,
.ui-dialog-offcanvas .form-date,
.ui-dialog-offcanvas .form-time {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
background-color: #eee;
border-color: #333;
color: #595959;
}
.ui-dialog-offcanvas .form-text:focus,
.ui-dialog-offcanvas .form-tel:focus,
.ui-dialog-offcanvas .form-email:focus,
.ui-dialog-offcanvas .form-url:focus,
.ui-dialog-offcanvas .form-search:focus,
.ui-dialog-offcanvas .form-number:focus,
.ui-dialog-offcanvas .form-color:focus,
.ui-dialog-offcanvas .form-file:focus,
.ui-dialog-offcanvas .form-textarea:focus,
.ui-dialog-offcanvas .form-date:focus,
.ui-dialog-offcanvas .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-offcanvas input[type="checkbox"],
.ui-dialog-offcanvas .checkbox,
.ui-dialog-offcanvas input[type="radio"],
.ui-dialog-offcanvas .radio {
position: static;
margin: 0;
}
.ui-dialog-offcanvas td .checkbox {
display: table-cell;
line-height: normal;
vertical-align: middle;
}
.ui-dialog-offcanvas .form-checkbox,
.ui-dialog-offcanvas .form-radio {
/* Add contrast for dark background. */
box-shadow: 0 0 2px 1px #000;
}
.ui-dialog-offcanvas input[type="radio"] {
/* Add full circular radius. */
border-radius: 50%;
}
.ui-dialog-offcanvas .form-actions {
text-align: center;
}
......@@ -4,11 +4,10 @@
*/
/* Position the offcanvas tray container outside the right of the viewport. */
.ui-dialog.ui-dialog-offcanvas {
.ui-dialog-offcanvas {
box-sizing: border-box;
height: 100%;
overflow: hidden;
z-index: 501;
overflow: visible;
}
/* Shift the main canvas to the right for right-to-left languages. */
......@@ -16,30 +15,17 @@
right: 0;
}
/* Create a place to name the tray. */
.ui-dialog.ui-dialog-offcanvas h1 {
padding: 15px 25% 15px 15px; /* LTR */
margin-top: 0;
margin-bottom: 0;
font-size: 120%;
}
[dir="rtl"] .ui-dialog.ui-dialog-offcanvas h1 {
text-align: right;
padding-right: 0;
padding-left: 25%;
}
/* Wrap the form that's inside the offcanvas tray. */
.ui-dialog.ui-dialog-offcanvas > .ui-dialog-content {
padding: 0 15px;
.ui-dialog-offcanvas .ui-dialog-content {
padding: 0 20px;
/* Prevent horizontal scrollbar. */
overflow-x: hidden;
overflow-y: auto;
}
[dir="rtl"] .ui-dialog.ui-dialog-offcanvas .ui-dialog-content {
[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content {
text-align: right;
}
.ui-dialog.ui-dialog-offcanvas > .form-item,
.ui-dialog.ui-dialog-offcanvas > .form-item .form-item {
width: 100%;
}
/*
* Position the edit toolbar tab.
......@@ -49,39 +35,12 @@
.toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
float: left;
}
/*
* Form layout changes, mostly specific to Bartik theme and menu.
* @todo Remove when more general form styling is done:
* https://www.drupal.org/node/2784437.
*/
.ui-dialog.ui-dialog-offcanvas td {
width: auto;
}
.ui-dialog.ui-dialog-offcanvas .menu-enabled {
width: auto;
}
.ui-dialog.ui-dialog-offcanvas table#menu-overview th {
display: none;
}
.ui-dialog.ui-dialog-offcanvas table#menu-overview tr td:first-child {
min-width: 110px;
}
.ui-dialog.ui-dialog-offcanvas details > .details-wrapper {
padding: 5px;
overflow: scroll;
}
.ui-dialog.ui-dialog-offcanvas .tabledrag-toggle-weight {
font-size: 80%;
}
.ui-dialog.ui-dialog-offcanvas input:focus,
.ui-dialog.ui-dialog-offcanvas summary:focus {
outline: none;
box-shadow: 2px 2px #ddd;
[dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
float: right;
}
.offcanvas-lining {
background: #fff;
background: #333;
position: absolute;
top: 0;
height: 100%;
......
/**
* @file
* Visual styling for tables in the Outside-In module off canvas tray.
*/
.ui-dialog-offcanvas 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-offcanvas 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-offcanvas tr th {
text-align: right;
}
.ui-dialog-offcanvas tr,
.ui-dialog-offcanvas tr td {
padding: 2px 4px;
height: 35px;
vertical-align: middle;
font-size: 13px;
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-offcanvas tr th,
[dir="rtl"] .ui-dialog-offcanvas tr td {
text-align: right;
}
.ui-dialog-offcanvas td a {
display: block;
max-width: 120px;
overflow: hidden;
}
.ui-dialog.ui-dialog-offcanvas tr td:first-child,
.ui-dialog.ui-dialog-offcanvas tr th:first-child {
min-width: 120px;
padding-left: 20px; /* LTR */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
[dir="rtl"] .ui-dialog.ui-dialog-offcanvas tr td:first-child,
[dir="rtl"] .ui-dialog.ui-dialog-offcanvas tr th:first-child {
padding-right: 20px;
}
.ui-dialog-offcanvas tr.odd,
.ui-dialog-offcanvas tr.even {
background-image: none;
background-color: transparent;
}
td.checkbox,
th.checkbox {
text-align: center;
width: 20px;
}
/**
* @file
* Table drag behavior for outside-in module.
*
* @see tabledrag.js
*/
/* Because base font sizes will vary widely across themes, to maintain consistency outside-in uses only pixels. */
.ui-dialog-offcanvas body.drag {
cursor: move;
}
.ui-dialog-offcanvas tr.region-title {
font-weight: normal;
}
.ui-dialog-offcanvas tr.region-message {
color: #fff;
}
.ui-dialog-offcanvas tr.region-populated {
display: none;
}
.ui-dialog-offcanvas tr.add-new .tabledrag-changed {
display: none;
}
.ui-dialog-offcanvas .draggable a.tabledrag-handle {
background-image: none;
margin: 0;
margin-left: 0; /* LTR */
margin-right: 5px; /* LTR */
height: auto;
min-width: 20px;
padding: 0px;
overflow: hidden;
float: left; /* LTR */
text-decoration: none;
cursor: move;
}
[dir="rtl"] .ui-dialog-offcanvas .draggable a.tabledrag-handle {
float: right;
margin-right: 0;
margin-left: 5px;
}
.ui-dialog-offcanvas 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-offcanvas .draggable a.tabledrag-handle:hover .handle,
.ui-dialog-offcanvas .draggable a.tabledrag-handle:focus .handle {
background-image: url(../../../misc/icons/787878/move.svg);
text-decoration: none;
}
.ui-dialog-offcanvas .touchevents .draggable td {
padding: 0 10px;
}
.ui-dialog-offcanvas .touchevents .draggable .menu-item__link {
display: inline-block;
padding: 10px 0;
}
.ui-dialog-offcanvas .touchevents a.tabledrag-handle {
height: 44px;
width: 40px;
}
.ui-dialog-offcanvas .touchevents a.tabledrag-handle .handle {
background-position: 40% 19px; /* LTR */
height: 21px;
}
[dir="rtl"] .ui-dialog-offcanvas .touch a.tabledrag-handle .handle {
background-position: right 40% top 19px;
}
.ui-dialog-offcanvas .touchevents .draggable.drag a.tabledrag-handle .handle {
background-position: 50% -32px;
}
.ui-dialog-offcanvas .tabledrag-toggle-weight-wrapper {
text-align: right; /* LTR */
}
[dir="rtl"] .ui-dialog-offcanvas .tabledrag-toggle-weight-wrapper {
text-align: left;
}
.ui-dialog-offcanvas .indentation {
float: left; /* LTR */
height: auto;
margin: 0 3px 0 -10px; /* LTR */
padding: 0 0 0 10px; /* LTR */
width: auto;
}
[dir="rtl"] .ui-dialog-offcanvas .indentation {
float: right;
margin: 0 -10px 0 3px;
padding: 0 10px 0 0;
}
.ui-dialog-offcanvas tr.drag {
background-color: #555;
}
.ui-dialog-offcanvas tr.drag-previous {
background-color: #000;
}
......@@ -3,107 +3,326 @@
* Visual styling for Outside-In module.
*/
/**
* Style the contextual links toggle tab in the toolbar.
*
* @todo Move this into toolbar when module is not experimental:
/* @todo Move this into toolbar when this module is no longer experimental:
* https://www.drupal.org/node/2784593.
*/
/* Style both the edit and editing states. */
button.toolbar-icon.toolbar-icon-edit.toolbar-item {
background: #0e69be;
background-image: -webkit-linear-gradient(top, #0094f0, #0e69be);
background-image: linear-gradient(to bottom, #0094f0, #0e69be);
/* Style the edit mode toolbar and tabs. */
#toolbar-bar.js-outside-in-edit-mode {
background-color: #fff;
}
button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
button.toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
background-image: -webkit-linear-gradient(top, #0094f0, #0e69be);
background-image: linear-gradient(to bottom, #0094f0, #0e69be);
color: #fff;
.js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
color: #999;
}
button.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);
.js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
color: #333;
}
button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
button.toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
background-image: -webkit-linear-gradient(top, #0094f0, #0e69be);
background-image: linear-gradient(to bottom, #0094f0, #0e69be);
/* 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;
}
button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
background-image: url(../../../misc/icons/ffffff/pencil.svg);
/* 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;
}
#toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
background-image: url(../../../misc/icons/ffffff/pencil.svg);
/* 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;
}
/* Style the toolbar when in edit mode. */
#toolbar-bar.js-outside-in-edit-mode {
background-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);
}
/* Change text color for white background. */
#toolbar-bar.js-outside-in-edit-mode .toolbar-item {
color: #999;
/* 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-bar.js-outside-in-edit-mode .toolbar-item .is-active {
color: #333;
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover:before {
background-image: url(../../../misc/icons/ffffff/pencil.svg);
}
/* Set color back to white for 'editing' button only. */
#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
color: #fff;
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .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:hover {
background-image: -webkit-linear-gradient(top, #0094f0, #0e69be);
background-image: linear-gradient(to bottom, #0094f0, #0e69be);
.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.
*/
/* Highlight editable regions in edit mode. */
/* Style the editables while in edit mode. */
#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);
}
#main-canvas.js-outside-in-edit-mode .outside-in-editable:hover {
outline: 1px dashed rgba(0,0,0,0.5);
box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
background-color: rgba(0,0,0,0.2);
}
/* Turn off the outlines on editables when the tray is open. */
#main-canvas-wrapper.js-tray-open .outside-in-editable {
outline: transparent;
outline-color: transparent;
box-shadow: none;
/* Style the offcanvas container. */
.ui-dialog-offcanvas {
background: #444;
border: 0px 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-offcanvas p,
.ui-dialog-offcanvas h1,
.ui-dialog-offcanvas h2,
.ui-dialog-offcanvas h3,
.ui-dialog-offcanvas h4,
.ui-dialog-offcanvas h5,
.ui-dialog-offcanvas h6,
.ui-dialog-offcanvas pre,
.ui-dialog-offcanvas legend,
.ui-dialog-offcanvas cite,
.ui-dialog-offcanvas span,
.ui-dialog-offcanvas summary,
.ui-dialog-offcanvas details,
.ui-dialog-offcanvas .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-offcanvas a,
.ui-dialog-offcanvas .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-offcanvas a:focus,