Commit f33ae666 authored by webchick's avatar webchick

Issue #2815831 by tedbow, drpal, droplet: Move Off-canvas related CSS from...

Issue #2815831 by tedbow, drpal, droplet: Move Off-canvas related CSS from drupal.outside_in library to drupal.off_canvas
parent e4b56479
/**
* @file
* CSS for Offcanvas tray.
*
* @todo Move CSS into core dialog library https://www.drupal.org/node/2784443.
*/
/* Position the dialog-offcanvas tray container outside the right of the viewport. */
.ui-dialog-offcanvas {
box-sizing: border-box;
height: 100%;
overflow: visible;
}
/* Wrap the form that's inside the dialog-offcanvas tray. */
.ui-dialog-offcanvas .ui-dialog-content {
padding: 0 20px;
/* Prevent horizontal scrollbar. */
overflow-x: hidden;
overflow-y: auto;
}
[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content {
text-align: right;
}
/**
* @file
* Motion effects for off-canvas tray dialog.
*
* Motion effects are in a separate file so that they can be easily turned off
* to improve performance if desired.
*
* @todo Move motion effects file into a core Off-Canvas library and add a
* configuration option for browser rendering performance to disable this
* file: https://www.drupal.org/node/2784443.
*/
/* Transition the dialog-offcanvas tray container, with 2s delay to match main canvas speed. */
.ui-dialog-offcanvas .ui-dialog-content {
-webkit-transition: all .7s ease 2s;
-moz-transition: all .7s ease 2s;
transition: all .7s ease 2s;
}
@media (max-width: 700px) {
.ui-dialog-offcanvas .ui-dialog-content {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
transition: all .7s ease;
}
}
.dialog-offcanvas__main-canvas {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
transition: all .7s ease;
}
...@@ -3,49 +3,50 @@ ...@@ -3,49 +3,50 @@
* Visual styling for summary and details in the Settings Tray module's off canvas tray. * Visual styling for summary and details in the Settings Tray module's off canvas tray.
*/ */
.ui-dialog-offcanvas details, .ui-dialog-outside-in details,
.ui-dialog-offcanvas summary, .ui-dialog-outside-in summary,
.ui-dialog-offcanvas .ui-dialog-content { .ui-dialog-outside-in .ui-dialog-content {
background: #474747; background: #474747;
color: #ddd; color: #ddd;
} }
.ui-dialog-offcanvas summary a { .ui-dialog-outside-in summary a {
color: #ddd; color: #ddd;
padding: 0 inherit; padding-top: 0;
padding-bottom: 0;
} }
.ui-dialog-offcanvas summary a:hover, .ui-dialog-outside-in summary a:hover,
.ui-dialog-offcanvas summary a:focus { .ui-dialog-outside-in summary a:focus {
color: #fff; color: #fff;
} }
.ui-dialog-offcanvas details, .ui-dialog-outside-in details,
.ui-dialog-offcanvas summary, .ui-dialog-outside-in summary,
.ui-dialog-offcanvas .details-wrapper { .ui-dialog-outside-in .details-wrapper {
border-width: 0; border-width: 0;
/* Cancel out the padding of the parent. */ /* Cancel out the padding of the parent. */
margin: 0 -20px; margin: 0 -20px;
padding: 0 20px; padding: 0 20px;
} }
.ui-dialog-offcanvas summary { .ui-dialog-outside-in summary {
text-shadow: none; text-shadow: none;
outline: none; outline: none;
padding: 10px 20px; padding: 10px 20px;
font-size: 14px; font-size: 14px;
transition: all .5s ease; transition: all .5s ease;
} }
.ui-dialog-offcanvas summary:hover, .ui-dialog-outside-in summary:hover,
.ui-dialog-offcanvas summary:focus { .ui-dialog-outside-in summary:focus {
background-color: #222; background-color: #222;
outline: none; outline: none;
} }
.ui-dialog-offcanvas details[open] { .ui-dialog-outside-in details[open] {
background-color: #333; background-color: #333;
padding-bottom: 10px; padding-bottom: 10px;
} }
.ui-dialog-offcanvas details[open] > summary { .ui-dialog-outside-in details[open] > summary {
background-color: #333; background-color: #333;
color: #eee; color: #eee;
} }
.ui-dialog-offcanvas details[open] > summary:hover { .ui-dialog-outside-in details[open] > summary:hover {
background-color: #222; background-color: #222;
color: #fff; color: #fff;
} }
...@@ -3,40 +3,40 @@ ...@@ -3,40 +3,40 @@
* Visual styling for forms in the Settings Tray module's off canvas tray. * Visual styling for forms in the Settings Tray module's off canvas tray.
*/ */
.ui-dialog-offcanvas label { .ui-dialog-outside-in label {
line-height: normal; line-height: normal;
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
color: #ddd; color: #ddd;
} }
.ui-dialog-offcanvas .description, .ui-dialog-outside-in .description,
.ui-dialog-offcanvas .form-item .description, .ui-dialog-outside-in .form-item .description,
.ui-dialog-offcanvas .details-description { .ui-dialog-outside-in .details-description {
color: #ddd; color: #ddd;
margin-top: 5px; margin-top: 5px;
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
} }
.ui-dialog-offcanvas .details-wrapper .description { .ui-dialog-outside-in .details-wrapper .description {
color: #bbb; color: #bbb;
} }
.ui-dialog-offcanvas .form-item { .ui-dialog-outside-in .form-item {
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 10px; margin-top: 10px;
} }
/* Set size and position for all inputs. */ /* Set size and position for all inputs. */
.ui-dialog-offcanvas .form-select, .ui-dialog-outside-in .form-select,
.ui-dialog-offcanvas .form-text, .ui-dialog-outside-in .form-text,
.ui-dialog-offcanvas .form-tel, .ui-dialog-outside-in .form-tel,
.ui-dialog-offcanvas .form-email, .ui-dialog-outside-in .form-email,
.ui-dialog-offcanvas .form-url, .ui-dialog-outside-in .form-url,
.ui-dialog-offcanvas .form-search, .ui-dialog-outside-in .form-search,
.ui-dialog-offcanvas .form-number, .ui-dialog-outside-in .form-number,
.ui-dialog-offcanvas .form-color, .ui-dialog-outside-in .form-color,
.ui-dialog-offcanvas .form-file, .ui-dialog-outside-in .form-file,
.ui-dialog-offcanvas .form-textarea, .ui-dialog-outside-in .form-textarea,
.ui-dialog-offcanvas .form-date, .ui-dialog-outside-in .form-date,
.ui-dialog-offcanvas .form-time { .ui-dialog-outside-in .form-time {
box-sizing: border-box; box-sizing: border-box;
max-width: 100%; max-width: 100%;
padding: 6px; padding: 6px;
...@@ -53,58 +53,58 @@ ...@@ -53,58 +53,58 @@
cursor: pointer; cursor: pointer;
} }
/* Reduce contrast for fields against dark backround. */ /* Reduce contrast for fields against dark backround. */
.ui-dialog-offcanvas .form-text, .ui-dialog-outside-in .form-text,
.ui-dialog-offcanvas .form-tel, .ui-dialog-outside-in .form-tel,
.ui-dialog-offcanvas .form-email, .ui-dialog-outside-in .form-email,
.ui-dialog-offcanvas .form-url, .ui-dialog-outside-in .form-url,
.ui-dialog-offcanvas .form-search, .ui-dialog-outside-in .form-search,
.ui-dialog-offcanvas .form-number, .ui-dialog-outside-in .form-number,
.ui-dialog-offcanvas .form-color, .ui-dialog-outside-in .form-color,
.ui-dialog-offcanvas .form-file, .ui-dialog-outside-in .form-file,
.ui-dialog-offcanvas .form-textarea, .ui-dialog-outside-in .form-textarea,
.ui-dialog-offcanvas .form-date, .ui-dialog-outside-in .form-date,
.ui-dialog-offcanvas .form-time { .ui-dialog-outside-in .form-time {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
background-color: #eee; background-color: #eee;
border-color: #333; border-color: #333;
color: #595959; color: #595959;
} }
.ui-dialog-offcanvas .form-text:focus, .ui-dialog-outside-in .form-text:focus,
.ui-dialog-offcanvas .form-tel:focus, .ui-dialog-outside-in .form-tel:focus,
.ui-dialog-offcanvas .form-email:focus, .ui-dialog-outside-in .form-email:focus,
.ui-dialog-offcanvas .form-url:focus, .ui-dialog-outside-in .form-url:focus,
.ui-dialog-offcanvas .form-search:focus, .ui-dialog-outside-in .form-search:focus,
.ui-dialog-offcanvas .form-number:focus, .ui-dialog-outside-in .form-number:focus,
.ui-dialog-offcanvas .form-color:focus, .ui-dialog-outside-in .form-color:focus,
.ui-dialog-offcanvas .form-file:focus, .ui-dialog-outside-in .form-file:focus,
.ui-dialog-offcanvas .form-textarea:focus, .ui-dialog-outside-in .form-textarea:focus,
.ui-dialog-offcanvas .form-date:focus, .ui-dialog-outside-in .form-date:focus,
.ui-dialog-offcanvas .form-time:focus { .ui-dialog-outside-in .form-time:focus {
border-color: #40b6ff; border-color: #40b6ff;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125), 0 0 8px #40b6ff; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125), 0 0 8px #40b6ff;
background-color: #fff; background-color: #fff;
} }
.ui-dialog-offcanvas input[type="checkbox"], .ui-dialog-outside-in input[type="checkbox"],
.ui-dialog-offcanvas .checkbox, .ui-dialog-outside-in .checkbox,
.ui-dialog-offcanvas input[type="radio"], .ui-dialog-outside-in input[type="radio"],
.ui-dialog-offcanvas .radio { .ui-dialog-outside-in .radio {
position: static; position: static;
margin: 0; margin: 0;
} }
.ui-dialog-offcanvas td .checkbox { .ui-dialog-outside-in td .checkbox {
display: table-cell; display: table-cell;
line-height: normal; line-height: normal;
vertical-align: middle; vertical-align: middle;
} }
.ui-dialog-offcanvas .form-checkbox, .ui-dialog-outside-in .form-checkbox,
.ui-dialog-offcanvas .form-radio { .ui-dialog-outside-in .form-radio {
/* Add contrast for dark background. */ /* Add contrast for dark background. */
box-shadow: 0 0 2px 1px #000; box-shadow: 0 0 2px 1px #000;
} }
.ui-dialog-offcanvas input[type="radio"] { .ui-dialog-outside-in input[type="radio"] {
/* Add full circular radius. */ /* Add full circular radius. */
border-radius: 50%; border-radius: 50%;
} }
.ui-dialog-offcanvas .form-actions { .ui-dialog-outside-in .form-actions {
text-align: center; text-align: center;
} }
...@@ -2,31 +2,6 @@ ...@@ -2,31 +2,6 @@
* @file * @file
* Styling for Settings Tray module. * Styling for Settings Tray module.
*/ */
/* Position the offcanvas tray container outside the right of the viewport. */
.ui-dialog-offcanvas {
box-sizing: border-box;
height: 100%;
overflow: visible;
}
/* Shift the main canvas to the right for right-to-left languages. */
[dir="rtl"] #main-canvas-wrapper.js-tray-open #main-canvas {
right: 0;
}
/* Wrap the form that's inside the offcanvas tray. */
.ui-dialog-offcanvas .ui-dialog-content {
padding: 0 20px;
/* Prevent horizontal scrollbar. */
overflow-x: hidden;
overflow-y: auto;
}
[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content {
text-align: right;
}
/* /*
* Position the edit toolbar tab. * Position the edit toolbar tab.
* @todo Move changes into contextual module when Settings Tray is not * @todo Move changes into contextual module when Settings Tray is not
......
...@@ -10,18 +10,6 @@ ...@@ -10,18 +10,6 @@
* file: https://www.drupal.org/node/2784443. * file: https://www.drupal.org/node/2784443.
*/ */
/* Transition the offcanvas tray container, with 2s delay to match main canvas speed. */
#offcanvas {
-webkit-transition: all .7s ease 2s;
-moz-transition: all .7s ease 2s;
transition: all .7s ease 2s;
}
#main-canvas-wrapper #main-canvas,
#main-canvas-wrapper.js-tray-open #main-canvas {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
transition: all .7s ease;
}
/* Transition the edit icon in the toolbar. */ /* Transition the edit icon in the toolbar. */
#toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before { #toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
...@@ -31,9 +19,9 @@ ...@@ -31,9 +19,9 @@
} }
/* Transition the editables on the page, their contextual links and their hover states. */ /* Transition the editables on the page, their contextual links and their hover states. */
#main-canvas-wrapper .contextual, .dialog-offcanvas__main-canvas .contextual,
#main-canvas-wrapper .js-outside-in-edit-mode .outside-in-editable, .dialog-offcanvas__main-canvas .js-outside-in-edit-mode .outside-in-editable,
#main-canvas-wrapper.js-tray-open .js-outside-in-edit-mode .outside-in-editable { .dialog-offcanvas__main-canvas.js-tray-open .js-outside-in-edit-mode .outside-in-editable {
-webkit-transition: all .7s ease; -webkit-transition: all .7s ease;
-moz-transition: all .7s ease; -moz-transition: all .7s ease;
transition: all .7s ease; transition: all .7s ease;
...@@ -47,19 +35,6 @@ ...@@ -47,19 +35,6 @@
transition: all .5s ease; transition: all .5s ease;
} }
@media (max-width: 700px) {
#offcanvas {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
transition: all .7s ease;
}
#main-canvas-wrapper.js-tray-open #offcanvas {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
transition: all .7s ease;
}
}
/* Transition the administration tray. /* Transition the administration tray.
#toolbar-administration, #toolbar-administration,
#toolbar-administration * { #toolbar-administration * {
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* Visual styling for tables in the Settings Tray module's off canvas tray. * Visual styling for tables in the Settings Tray module's off canvas tray.
*/ */
.ui-dialog-offcanvas table { .ui-dialog-outside-in table {
border: 0; border: 0;
border-collapse: collapse; border-collapse: collapse;
min-width: 300px; min-width: 300px;
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
margin-left: -20px; margin-left: -20px;
margin-bottom: -10px; margin-bottom: -10px;
} }
.ui-dialog-offcanvas tr th { .ui-dialog-outside-in tr th {
padding: 2px 4px; padding: 2px 4px;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
...@@ -22,15 +22,14 @@ ...@@ -22,15 +22,14 @@
color: #bbb; color: #bbb;
text-align: left; /* LTR */ text-align: left; /* LTR */
} }
[dir="rtl"] .ui-dialog-offcanvas tr th { [dir="rtl"] .ui-dialog-outside-in tr th {
text-align: right; text-align: right;
} }
.ui-dialog-offcanvas tr, .ui-dialog-outside-in tr,
.ui-dialog-offcanvas tr td { .ui-dialog-outside-in tr td {
padding: 2px 4px; padding: 2px 4px;
height: 35px; height: 35px;
vertical-align: middle; vertical-align: middle;
font-size: 13px;
text-align: left; /* LTR */ text-align: left; /* LTR */
border: 0px; border: 0px;
border-style: solid; border-style: solid;
...@@ -40,29 +39,29 @@ ...@@ -40,29 +39,29 @@
background-color: transparent; background-color: transparent;
font-size: 12px; font-size: 12px;
} }
[dir="rtl"] .ui-dialog-offcanvas tr th, [dir="rtl"] .ui-dialog-outside-in tr th,
[dir="rtl"] .ui-dialog-offcanvas tr td { [dir="rtl"] .ui-dialog-outside-in tr td {
text-align: right; text-align: right;
} }
.ui-dialog-offcanvas td a { .ui-dialog-outside-in td a {
display: block; display: block;
max-width: 120px; max-width: 120px;
overflow: hidden; overflow: hidden;
} }
.ui-dialog.ui-dialog-offcanvas tr td:first-child, .ui-dialog.ui-dialog-outside-in tr td:first-child,
.ui-dialog.ui-dialog-offcanvas tr th:first-child { .ui-dialog.ui-dialog-outside-in tr th:first-child {
min-width: 120px; min-width: 120px;
padding-left: 20px; /* LTR */ padding-left: 20px; /* LTR */
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
[dir="rtl"] .ui-dialog.ui-dialog-offcanvas tr td:first-child, [dir="rtl"] .ui-dialog.ui-dialog-outside-in tr td:first-child,
[dir="rtl"] .ui-dialog.ui-dialog-offcanvas tr th:first-child { [dir="rtl"] .ui-dialog.ui-dialog-outside-in tr th:first-child {
padding-right: 20px; padding-right: 20px;
} }
.ui-dialog-offcanvas tr.odd, .ui-dialog-outside-in tr.odd,
.ui-dialog-offcanvas tr.even { .ui-dialog-outside-in tr.even {
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
} }
......
...@@ -8,40 +8,40 @@ ...@@ -8,40 +8,40 @@
/* Because base font sizes will vary widely across themes, to maintain consistency outside-in uses only pixels. */ /* Because base font sizes will vary widely across themes, to maintain consistency outside-in uses only pixels. */
.ui-dialog-offcanvas body.drag { .ui-dialog-outside-in body.drag {
cursor: move; cursor: move;
} }
.ui-dialog-offcanvas tr.region-title { .ui-dialog-outside-in tr.region-title {
font-weight: normal; font-weight: normal;
} }
.ui-dialog-offcanvas tr.region-message { .ui-dialog-outside-in tr.region-message {
color: #fff; color: #fff;
} }
.ui-dialog-offcanvas tr.region-populated { .ui-dialog-outside-in tr.region-populated {
display: none; display: none;
} }
.ui-dialog-offcanvas tr.add-new .tabledrag-changed { .ui-dialog-outside-in tr.add-new .tabledrag-changed {
display: none; display: none;
} }
.ui-dialog-offcanvas .draggable a.tabledrag-handle { .ui-dialog-outside-in .draggable a.tabledrag-handle {
background-image: none; background-image: none;
margin: 0; margin: 0;
margin-left: 0; /* LTR */ margin-left: 0; /* LTR */
margin-right: 5px; /* LTR */ margin-right: 5px; /* LTR */
height: auto; height: auto;
min-width: 20px; min-width: 20px;
padding: 0px; padding: 0;
overflow: hidden; overflow: hidden;
float: left; /* LTR */ float: left; /* LTR */
text-decoration: none; text-decoration: none;
cursor: move; cursor: move;
} }
[dir="rtl"] .ui-dialog-offcanvas .draggable a.tabledrag-handle { [dir="rtl"] .ui-dialog-outside-in .draggable a.tabledrag-handle {
float: right; float: right;
margin-right: 0; margin-right: 0;
margin-left: 5px; margin-left: 5px;
} }
.ui-dialog-offcanvas a.tabledrag-handle .handle { .ui-dialog-outside-in a.tabledrag-handle .handle {
/* Use lighter drag icon against dark background. */ /* Use lighter drag icon against dark background. */
background-image: url(../../../misc/icons/bebebe/move.svg); background-image: url(../../../misc/icons/bebebe/move.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -51,54 +51,54 @@ ...@@ -51,54 +51,54 @@
padding: 0; padding: 0;
width: auto; width: auto;
} }
.ui-dialog-offcanvas .draggable a.tabledrag-handle:hover .handle, .ui-dialog-outside-in .draggable a.tabledrag-handle:hover .handle,
.ui-dialog-offcanvas .draggable a.tabledrag-handle:focus .handle { .ui-dialog-outside-in .draggable a.tabledrag-handle:focus .handle {
background-image: url(../../../misc/icons/787878/move.svg); background-image: url(../../../misc/icons/787878/move.svg);
text-decoration: none; text-decoration: none;
} }
.ui-dialog-offcanvas .touchevents .draggable td { .ui-dialog-outside-in .touchevents .draggable td {
padding: 0 10px; padding: 0 10px;
} }
.ui-dialog-offcanvas .touchevents .draggable .menu-item__link { .ui-dialog-outside-in .touchevents .draggable .menu-item__link {
display: inline-block; display: inline-block;
padding: 10px 0; padding: 10px 0;
} }
.ui-dialog-offcanvas .touchevents a.tabledrag-handle { .ui-dialog-outside-in .touchevents a.tabledrag-handle {
height: 44px; height: 44px;
width: 40px; width: 40px;
} }
.ui-dialog-offcanvas .touchevents a.tabledrag-handle .handle { .ui-dialog-outside-in .touchevents a.tabledrag-handle .handle {
background-position: 40% 19px; /* LTR */ background-position: 40% 19px; /* LTR */
height: 21px; height: 21px;
} }
[dir="rtl"] .ui-dialog-offcanvas .touch a.tabledrag-handle .handle { [dir="rtl"] .ui-dialog-outside-in .touch a.tabledrag-handle .handle {
background-position: right 40% top 19px; background-position: right 40% top 19px;
} }
.ui-dialog-offcanvas .touchevents .draggable.drag a.tabledrag-handle .handle { .ui-dialog-outside-in .touchevents .draggable.drag a.tabledrag-handle .handle {
background-position: 50% -32px; background-position: 50% -32px;
} }
.ui-dialog-offcanvas .tabledrag-toggle-weight-wrapper { .ui-dialog-outside-in .tabledrag-toggle-weight-wrapper {
text-align: right; /* LTR */ text-align: right; /* LTR */
} }
[dir="rtl"] .ui-dialog-offcanvas .tabledrag-toggle-weight-wrapper { [dir="rtl"] .ui-dialog-outside-in .tabledrag-toggle-weight-wrapper {
text-align: left; text-align: left;
} }
.ui-dialog-offcanvas .indentation { .ui-dialog-outside-in .indentation {
float: left; /* LTR */ float: left; /* LTR */
height: auto; height: auto;
margin: 0 3px 0 -10px; /* LTR */ margin: 0 3px 0 -10px; /* LTR */
padding: 0 0 0 10px; /* LTR */ padding: 0 0 0 10px; /* LTR */
width: auto; width: auto;
} }
[dir="rtl"] .ui-dialog-offcanvas .indentation { [dir="rtl"] .ui-dialog-outside-in .indentation {
float: right; float: right;
margin: 0 -10px 0 3px; margin: 0 -10px 0 3px;
padding: 0 10px 0 0; padding: 0 10px 0 0;
} }
.ui-dialog-offcanvas tr.drag { .ui-dialog-outside-in tr.drag {
background-color: #555; background-color: #555;
} }
.ui-dialog-offcanvas tr.drag-previous { .ui-dialog-outside-in tr.drag-previous {
background-color: #000; background-color: #000;
} }
...@@ -60,19 +60,19 @@ ...@@ -60,19 +60,19 @@
} }
/* Style the editables while in edit mode. */ /* Style the editables while in edit mode. */
#main-canvas.js-outside-in-edit-mode .outside-in-editable { .dialog-offcanvas__main-canvas.js-outside-in-edit-mode .outside-in-editable {
outline: 1px dashed rgba(0,0,0,0.5); outline: 1px dashed rgba(0,0,0,0.5);
box-shadow: 0 0 0 1px rgba(255,255,255,0.7); box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
} }