Commit 36ee6b39 authored by lauriii's avatar lauriii

Issue #2826722 by tkoleary, tedbow, DyanneNova, starshaped, drpal, jian he,...

Issue #2826722 by tkoleary, tedbow, DyanneNova, starshaped, drpal, jian he, pk188, xjm, yoroy, EclipseGc, rikki_iki, Wim Leers, droplet: Add a 'fence' around settings tray with aggressive CSS reset

(cherry picked from commit 7a271014)
parent 2174766c
/*
* @file
* Set base styles for the settings tray.
*/
/* Set some global attributes. */
#drupal-off-canvas *,
#drupal-off-canvas *:not(div) {
background: #444;
font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
color: #ddd;
}
/* Generic elements. */
#drupal-off-canvas a,
#drupal-off-canvas .link {
border-bottom: none;
font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
font-size: inherit;
font-weight: normal;
color: #85bef4;
text-decoration: none;
transition: color .5s ease;
}
#drupal-off-canvas a:focus,
#drupal-off-canvas .link:focus,
#drupal-off-canvas a:hover,
#drupal-off-canvas .link:hover {
outline: none;
color: #46a0f5;
}
#drupal-off-canvas hr {
height: 1px;
background: #cccccc;
}
#drupal-off-canvas summary,
#drupal-off-canvas .fieldgroup:not(.form-composite) > legend {
font-weight: bold;
}
#drupal-off-canvas h1,
#drupal-off-canvas .heading-a {
display: block;
font-weight: bold;
font-size: 1.625em;
line-height: 1.875em;
}
#drupal-off-canvas h2,
#drupal-off-canvas .heading-b {
display: block;
font-weight: bold;
margin: 10px 0;
font-size: 1.385em;
}
#drupal-off-canvas h3,
#drupal-off-canvas .heading-c {
display: block;
font-weight: bold;
margin: 10px 0;
font-size: 1.231em;
}
#drupal-off-canvas h4,
#drupal-off-canvas .heading-d {
display: block;
font-weight: bold;
margin: 10px 0;
font-size: 1.154em;
}
#drupal-off-canvas h5,
#drupal-off-canvas .heading-e {
display: block;
font-weight: bold;
margin: 10px 0;
font-size: 1.077em;
}
#drupal-off-canvas h6,
#drupal-off-canvas .heading-f {
display: block;
font-weight: bold;
margin: 10px 0;
font-size: 1.077em;
}
#drupal-off-canvas p {
margin: 1em 0;
}
#drupal-off-canvas dl {
margin: 0 0 20px;
}
#drupal-off-canvas dl dd,
#drupal-off-canvas dl dl {
margin-left: 20px; /* LTR */
margin-bottom: 10px;
}
[dir="rtl"] #drupal-off-canvas dl dd,
[dir="rtl"] #drupal-off-canvas dl dl {
margin-right: 20px;
}
#drupal-off-canvas blockquote {
margin: 1em 40px;
}
#drupal-off-canvas address {
font-style: italic;
}
#drupal-off-canvas u,
#drupal-off-canvas ins {
text-decoration: underline;
}
#drupal-off-canvas s,
#drupal-off-canvas strike,
#drupal-off-canvas del {
text-decoration: line-through;
}
#drupal-off-canvas big {
font-size: larger;
}
#drupal-off-canvas small {
font-size: smaller;
}
#drupal-off-canvas sub {
vertical-align: sub;
font-size: smaller;
line-height: normal;
}
#drupal-off-canvas sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
#drupal-off-canvas nobr {
white-space: nowrap;
}
#drupal-off-canvas abbr,
#drupal-off-canvas acronym {
border-bottom: dotted 1px;
background: transparent;
}
#drupal-off-canvas ul {
list-style-type: disc;
list-style-image: none;
}
[dir="rtl"] #drupal-off-canvas .messages__list {
margin-right: 0;
}
#drupal-off-canvas ol {
list-style-type: decimal;
}
#drupal-off-canvas ul li,
#drupal-off-canvas ol li {
display: block;
}
#drupal-off-canvas quote,
#drupal-off-canvas code {
margin: 20px 0;
}
#drupal-off-canvas pre {
margin: 20px 0;
white-space: pre-wrap;
}
/* Classes for hidden and visually hidden elements. See hidden.module.css. */
#drupal-off-canvas .hidden {
display: none;
}
#drupal-off-canvas .visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;
}
#drupal-off-canvas .visually-hidden.focusable:active,
#drupal-off-canvas .visually-hidden.focusable:focus {
position: static !important;
clip: auto;
overflow: visible;
height: auto;
width: auto;
}
#drupal-off-canvas .invisible {
visibility: hidden;
}
/* Some system classes. See system.admin.css. */
#drupal-off-canvas .panel {
padding: 5px 5px 15px;
}
#drupal-off-canvas .panel__description {
margin: 0 0 3px;
padding: 2px 0 3px 0;
}
#drupal-off-canvas .compact-link {
margin: 0 0 10px 0;
}
#drupal-off-canvas small .admin-link:before {
content: ' [';
}
#drupal-off-canvas small .admin-link:after {
content: ']';
}
/* Override jquery UI */
#drupal-off-canvas .ui-widget-content a {
color: #85bef4 !important;
}
/* Message styles */
#drupal-off-canvas .messages {
background: no-repeat 10px 17px;
}
[dir="rtl"] #drupal-off-canvas .messages {
background-position: right 10px top 17px;
}
#drupal-off-canvas .messages abbr {
color: #444;
}
#drupal-off-canvas .messages--status {
background-color: #f3faef;
background-image: url(../../../misc/icons/73b355/check.svg);
color: #325e1c;
}
#drupal-off-canvas .messages--warning {
background-color: #fdf8ed;
background-image: url(../../../misc/icons/e29700/warning.svg);
color: #734c00;
}
#drupal-off-canvas .messages--error {
background-color: #fcf4f2;
background-image: url(../../../misc/icons/e32700/error.svg);
color: #a51b00;
}
#drupal-off-canvas .messages--error div[role="alert"] {
background: transparent;
color: inherit;
}
/**
* Visual styling for buttons in the off canvas tray.
*
* See seven/css/components/buttons.css
*/
#drupal-off-canvas button,
#drupal-off-canvas .button {
-webkit-appearance: none;
-moz-appearance: none;
margin: 0 0 10px;
padding: 0;
border: 0;
box-shadow: none;
font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
line-height: normal;
text-transform: none;
text-decoration: none;
cursor: pointer;
}
#drupal-off-canvas button.link {
display: inline;
background: transparent;
font-size: 14px;
color: #85bef4;
transition: color .5s ease;
}
#drupal-off-canvas button.link:hover,
#drupal-off-canvas button.link:focus {
color: #46a0f5;
text-decoration: none;
}
#drupal-off-canvas input[type="submit"].button {
display: inline-block;
position: relative;
width: 100%;
height: auto;
padding: 4px 20px;
border: 0;
border-radius: 20em;
background: #777;
font-weight: 600;
font-size: 14px;
color: #f5f5f5;
text-align: center;
cursor: pointer;
transition: background .5s ease;
}
#drupal-off-canvas input[type="submit"].button:hover,
#drupal-off-canvas input[type="submit"].button:focus,
#drupal-off-canvas input[type="submit"].button:active {
border: 0;
color: #fff;
text-decoration: none;
outline: none;
z-index: 10;
}
#drupal-off-canvas input[type="submit"].button:focus,
#drupal-off-canvas input[type="submit"].button:active {
box-shadow: 0 3px 3px 2px rgba(0,0,0,0.1);
}
#drupal-off-canvas input[type="submit"].button--primary {
border: 0;
background: #277abd;
color: #fff;
margin-top: 15px;
}
#drupal-off-canvas input[type="submit"].button--primary:hover,
#drupal-off-canvas input[type="submit"].button--primary:focus,
#drupal-off-canvas input[type="submit"].button--primary:active {
background: #2b8bd8;
outline: none;
}
#drupal-off-canvas .button-action:before {
margin-left: -0.2em; /* LTR */
padding-right: 0.2em; /* LTR */
font-size: 14px;
line-height: 16px;
}
[dir="rtl"] #drupal-off-canvas .button-action:before {
margin-right: -0.2em;
margin-left: 0;
padding-right: 0;
padding-left: 0.2em;
}
#drupal-off-canvas .no-touchevents .button--small {
font-size: 13px;
padding: 2px 1em; /* 1 */
}
#drupal-off-canvas .button:disabled,
#drupal-off-canvas .button:disabled:active,
#drupal-off-canvas .button.is-disabled,
#drupal-off-canvas .button.is-disabled:active {
border: 0;
background: #555;
color: #5c5c5c;
font-weight: normal;
cursor: default;
}
#drupal-off-canvas .button--danger {
border-radius: 0;
color: #c72100;
font-weight: 400;
text-decoration: none;
}
#drupal-off-canvas .button--danger:hover,
#drupal-off-canvas .button--danger:focus,
#drupal-off-canvas .button--danger:active {
color: #ff2a00;
text-decoration: none;
text-shadow: none;
}
#drupal-off-canvas .button--danger:disabled,
#drupal-off-canvas .button--danger.is-disabled {
color: #737373;
cursor: default;
}
......@@ -4,6 +4,7 @@
*
* @todo Move CSS into core dialog library https://www.drupal.org/node/2784443.
*/
/* Position the off-canvas dialog container outside the right of the viewport. */
.ui-dialog-off-canvas {
box-sizing: border-box;
......@@ -21,3 +22,36 @@
[dir="rtl"] .ui-dialog-off-canvas .ui-dialog-content {
text-align: right;
}
/* Position the dialog-off-canvas tray container outside the right of the viewport. */
.ui-dialog-off-canvas {
box-sizing: border-box;
height: 100%;
overflow: visible;
}
/* Wrap the form that's inside the dialog-off-canvas tray. */
.ui-dialog-off-canvas #drupal-off-canvas {
padding: 0 20px;
/* Prevent horizontal scrollbar. */
overflow-x: hidden;
overflow-y: auto;
}
[dir="rtl"] .ui-dialog-off-canvas #drupal-off-canvas {
text-align: right;
}
/*
* Force the tray to be 100% width at the same breakpoint the dialog system uses
* to expand dialog widths.
*/
@media all and (max-width: 48em) { /* 768px */
.ui-dialog.ui-dialog-off-canvas {
width: 100% !important;
}
/* When tray is at 100% width stop the body from scrolling */
.js-tray-open {
height: 100%;
overflow-y: hidden;
}
}
......@@ -3,50 +3,59 @@
* Visual styling for summary and details in the Settings Tray module's off canvas tray.
*/
.ui-dialog-outside-in details,
.ui-dialog-outside-in summary,
.ui-dialog-outside-in .ui-dialog-content {
#drupal-off-canvas details,
#drupal-off-canvas summary {
display: block;
font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
}
#drupal-off-canvas details,
#drupal-off-canvas summary,
#drupal-off-canvas .ui-dialog-content {
background: #474747;
color: #ddd;
}
.ui-dialog-outside-in summary a {
#drupal-off-canvas summary a {
color: #ddd;
padding-top: 0;
padding-bottom: 0;
}
.ui-dialog-outside-in summary a:hover,
.ui-dialog-outside-in summary a:focus {
#drupal-off-canvas summary a:hover,
#drupal-off-canvas summary a:focus {
color: #fff;
}
.ui-dialog-outside-in details,
.ui-dialog-outside-in summary,
.ui-dialog-outside-in .details-wrapper {
#drupal-off-canvas details,
#drupal-off-canvas summary,
#drupal-off-canvas .details-wrapper {
border-width: 0;
/* Cancel out the padding of the parent. */
margin: 0 -20px;
padding: 0 20px;
}
.ui-dialog-outside-in summary {
#drupal-off-canvas summary {
text-shadow: none;
outline: none;
padding: 10px 20px;
font-size: 14px;
transition: all .5s ease;
}
.ui-dialog-outside-in summary:hover,
.ui-dialog-outside-in summary:focus {
#drupal-off-canvas summary:hover,
#drupal-off-canvas summary:focus {
background-color: #222;
outline: none;
}
.ui-dialog-outside-in details[open] {
background-color: #333;
#drupal-off-canvas details[open] {
padding-bottom: 10px;
}
.ui-dialog-outside-in details[open] > summary {
#drupal-off-canvas details[open] > summary {
background-color: #333;
color: #eee;
}
.ui-dialog-outside-in details[open] > summary:hover {
#drupal-off-canvas details[open] > summary:hover {
background-color: #222;
color: #fff;
}
#drupal-off-canvas details .placeholder {
font: inherit;
color: inherit;
font-style: italic;
background: transparent;
}
/**
* @file
* Styles for dropbuttons in the off-canvas tray.
*/
#drupal-off-canvas .dropbutton-wrapper,
#drupal-off-canvas .dropbutton-widget {
-webkit-appearance: none;
-moz-appearance: none;
display: block;
position: static;
transition: none;
}
#drupal-off-canvas .dropbutton-widget {
margin: 0;
padding: 0;
border: 0;
background: #277abd;
border-radius: 1em;
font-weight: 600;
color: #fff;
text-transform: none;
text-decoration: none;
text-align: center;
line-height: normal;
cursor: pointer;
transition: background .5s ease;
}
#drupal-off-canvas .dropbutton-widget:hover {
background: #2b8bd8;
}
/*
* Style dropbutton single.
*/
#drupal-off-canvas .dropbutton-single .dropbutton-action a {
padding: 0;
/* Overlap icon for trigger. */
margin-top: -2em;
height: 2.2em;
cursor: pointer;
}
#drupal-off-canvas .dropbutton-single .dropbutton-action:hover,
#drupal-off-canvas .dropbutton-single .dropbutton-action:focus,
#drupal-off-canvas .dropbutton-single .dropbutton-action a:hover,
#drupal-off-canvas .dropbutton-single .dropbutton-action a:focus {
text-decoration: none;
outline: none;
}
#drupal-off-canvas .dropbutton-widget .dropbutton {
margin: 0;
overflow: hidden;
padding: 0;
}
#drupal-off-canvas .dropbutton li,
#drupal-off-canvas .dropbutton a {
display: block;
width: auto;
padding: 4px 0;
text-align: left;
color: #555;
outline: none;
}
#drupal-off-canvas .dropbutton li:hover,
#drupal-off-canvas .dropbutton li:focus,
#drupal-off-canvas .dropbutton a:hover,
#drupal-off-canvas .dropbutton a:focus {
background: transparent;
color: #333;
outline: none;
}
/*
* Style dropbutton multiple.
*/
#drupal-off-canvas .dropbutton-multiple .dropbutton-widget {
width: 2em;
height: 2em;
}
#drupal-off-canvas .dropbutton-multiple .dropbutton-widget:hover {
background-color: #2b8bd8;
}
/* Hide the other actions until the dropbutton is triggered. */
#drupal-off-canvas .dropbutton-multiple .dropbutton .secondary-action {
display: none;
}
/* The toggle to expand the button. */
#drupal-off-canvas .dropbutton-toggle {
position: absolute;
top: 0;
right: 0; /* LTR */
bottom: 0;
display: block;
width: 2em;
color: #fff;
text-indent: 110%;
white-space: nowrap;
}
#drupal-off-canvas .dropbutton-toggle button {
display: block;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border: 0 solid transparent;
border-bottom-right-radius: 1em; /* LTR */
border-top-right-radius: 1em; /* LTR */
cursor: pointer;
}
#drupal-off-canvas .dropbutton-toggle button:hover,
#drupal-off-canvas .dropbutton-toggle button:focus {
outline: none;
}
/* The toggle arrow. */
#drupal-off-canvas .dropbutton-arrow {
position: absolute;
display: block;
height: 0;
width: 0;
margin-top: 0;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-style: solid;
border-width: 0.3333em 0.3333em 0;
color: #fff;
line-height: 0;
overflow: hidden;
}
#drupal-off-canvas span.dropbutton-arrow {
top: 7px;
right: 7px; /* LTR */
background: transparent;
}
#drupal-off-canvas span.dropbutton-arrow:hover {
background: transparent;
}
#drupal-off-canvas .dropbutton-action > .js-form-submit.form-submit,
#drupal-off-canvas .dropbutton-toggle button {
position: relative;
text-shadow: none;
}
/*
* Dropbuttons when in a table cell.
*/
/* Make sure table cell doesn't collapse around absolute positioned dropbutton. */
#drupal-off-canvas td .dropbutton-single {
min-width: 2em;
}
#drupal-off-canvas td .dropbutton-multiple {
min-width: 2em;
padding-right: 0;
padding-left: 0;
margin-right: 0;
margin-left: 0;
border: 0;
}
#drupal-off-canvas td .dropbutton-multiple .dropbutton-action a,
#drupal-off-canvas td .dropbutton-multiple .dropbutton-action input,
#drupal-off-canvas td .dropbutton-multiple .dropbutton-action button {
width: auto;
padding: 0;
font-size: inherit;
}
#drupal-off-canvas td .dropbutton-wrapper {
margin-bottom: 0;
}
/* Push the widget to the right so text expands left. */
#drupal-off-canvas td .dropbutton-widget {
position: absolute;
right: 12px; /* LTR */
padding: 0;
background: #277abd none;
}
/* Push the wrapper to the right edge of the td. */
#drupal-off-canvas td .dropbutton-single,
#drupal-off-canvas td .dropbutton-multiple {
float: right; /* LTR */
padding-right: 0;
margin-right: 0;
max-width: initial;
min-width: initial;
position: relative;
}
#drupal-off-canvas td .dropbutton-widget .dropbutton {
margin: 0;
width: 2em;
height: 2em;
overflow: hidden;
background: transparent;
}
/* Push text out of the way. */
#drupal-off-canvas td .dropbutton-multiple li,
#drupal-off-canvas td .dropbutton-multiple a {
margin-left: -9999px;
background: transparent;
}
#drupal-off-canvas td .dropbutton-multiple.open .dropbutton li,
#drupal-off-canvas td .dropbutton-multiple.open .dropbutton a {
margin-left: 0;
width: auto;
color: #fff;
}
/* Collapse the button to a circle. */
#drupal-off-canvas td .dropbutton-toggle {
width: 2em;
height: 2em;
border-radius: 1em;
}
#drupal-off-canvas td .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
border: 0;
background: transparent;
}
/* Prevent list item from expanding it's container. */
#drupal-off-canvas td ul.dropbutton li.edit {
width: 2em;
height: 2em;
}