Issue #3291797 by mherchel, andy-blum, lauriii, xjm, catch: Refactor Drupal 10 settings tray / off-canvas to use modern CSS
Lauri Eskola
parent
0ac2cb5073
commit
c2af57548d
|
|
@ -2,8 +2,12 @@ themes/claro/**/*.css
|
|||
!themes/claro/**/*.pcss.css
|
||||
themes/olivero/**/*.css
|
||||
!themes/olivero/**/*.pcss.css
|
||||
misc/dialog/off-canvas.reset.css
|
||||
misc/dialog/off-canvas.base.css
|
||||
misc/dialog/off-canvas/css/**/*.css
|
||||
!misc/dialog/off-canvas/css/**/*.pcss.css
|
||||
modules/layout_builder/css/**/*.css
|
||||
!modules/layout_builder/css/**/*.pcss.css
|
||||
modules/workspaces/css/**/*.css
|
||||
!modules/workspaces/css/**/*.pcss.css
|
||||
themes/stable/css/core/dialog/off-canvas.reset.css
|
||||
themes/stable/css/core/dialog/off-canvas.base.css
|
||||
themes/stable9/css/core/dialog/off-canvas.reset.css
|
||||
|
|
|
|||
|
|
@ -913,24 +913,24 @@ internal.underscore:
|
|||
drupal.dialog.off_canvas:
|
||||
version: VERSION
|
||||
js:
|
||||
misc/dialog/off-canvas.js: {}
|
||||
misc/dialog/off-canvas/js/off-canvas.js: {}
|
||||
css:
|
||||
base:
|
||||
misc/dialog/off-canvas.reset.css: {}
|
||||
misc/dialog/off-canvas.base.css: {}
|
||||
misc/dialog/off-canvas.css: {}
|
||||
# Add group setting to make sure this CSS load before any jQuery UI Dialog
|
||||
# CSS.
|
||||
misc/dialog/off-canvas.theme.css: { group: 200 }
|
||||
misc/dialog/off-canvas/css/reset.css: {}
|
||||
misc/dialog/off-canvas/css/base.css: {}
|
||||
misc/dialog/off-canvas/css/utility.css: {}
|
||||
component:
|
||||
misc/dialog/off-canvas.motion.css: {}
|
||||
misc/dialog/off-canvas.button.css: {}
|
||||
misc/dialog/off-canvas.form.css: {}
|
||||
misc/dialog/off-canvas.table.css: {}
|
||||
misc/dialog/off-canvas.details.css: {}
|
||||
misc/dialog/off-canvas.tabledrag.css: {}
|
||||
misc/dialog/off-canvas.dropbutton.css: {}
|
||||
misc/dialog/off-canvas.layout.css: {}
|
||||
misc/dialog/off-canvas/css/button.css: {}
|
||||
misc/dialog/off-canvas/css/drupal.css: {}
|
||||
misc/dialog/off-canvas/css/form.css: {}
|
||||
misc/dialog/off-canvas/css/table.css: {}
|
||||
misc/dialog/off-canvas/css/details.css: {}
|
||||
misc/dialog/off-canvas/css/messages.css: {}
|
||||
misc/dialog/off-canvas/css/tabledrag.css: {}
|
||||
misc/dialog/off-canvas/css/throbber.css: {}
|
||||
misc/dialog/off-canvas/css/dropbutton.css: {}
|
||||
misc/dialog/off-canvas/css/titlebar.css: {}
|
||||
misc/dialog/off-canvas/css/wrapper.css: {}
|
||||
dependencies:
|
||||
- core/jquery
|
||||
- core/once
|
||||
|
|
|
|||
|
|
@ -51,6 +51,10 @@ class OpenOffCanvasDialogCommand extends OpenDialogCommand {
|
|||
if (empty($dialog_options['dialogClass'])) {
|
||||
$this->dialogOptions['dialogClass'] = "ui-dialog-off-canvas ui-dialog-position-$position";
|
||||
}
|
||||
// Add CSS class to #drupal-off-canvas element. This enables developers to
|
||||
// select previous versions of off-canvas styles by using custom selector:
|
||||
// #drupal-off-canvas:not(.drupal-off-canvas-reset).
|
||||
$this->dialogOptions['classes']['ui-dialog-content'] = 'drupal-off-canvas-reset';
|
||||
// If no width option is provided then use the default width to avoid the
|
||||
// dialog staying at the width of the previous instance when opened
|
||||
// more than once, with different widths, on a single page.
|
||||
|
|
|
|||
|
|
@ -1,399 +0,0 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Set base styles for the off-canvas dialog.
|
||||
*/
|
||||
|
||||
/* Set some global attributes. */
|
||||
|
||||
#drupal-off-canvas {
|
||||
color: #ddd;
|
||||
background: #444;
|
||||
}
|
||||
|
||||
/**
|
||||
* All HTML elements that could be used in off-canvas except div, bdo, bdi,
|
||||
* data, svg, map and math.
|
||||
*
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
|
||||
*/
|
||||
|
||||
#drupal-off-canvas span,
|
||||
#drupal-off-canvas applet,
|
||||
#drupal-off-canvas object,
|
||||
#drupal-off-canvas iframe,
|
||||
#drupal-off-canvas h1,
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas p,
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas pre,
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas abbr,
|
||||
#drupal-off-canvas acronym,
|
||||
#drupal-off-canvas address,
|
||||
#drupal-off-canvas big,
|
||||
#drupal-off-canvas button,
|
||||
#drupal-off-canvas cite,
|
||||
#drupal-off-canvas code,
|
||||
#drupal-off-canvas del,
|
||||
#drupal-off-canvas dfn,
|
||||
#drupal-off-canvas em,
|
||||
#drupal-off-canvas img,
|
||||
#drupal-off-canvas ins,
|
||||
#drupal-off-canvas kbd,
|
||||
#drupal-off-canvas q,
|
||||
#drupal-off-canvas s,
|
||||
#drupal-off-canvas samp,
|
||||
#drupal-off-canvas small,
|
||||
#drupal-off-canvas strike,
|
||||
#drupal-off-canvas strong,
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup,
|
||||
#drupal-off-canvas tt,
|
||||
#drupal-off-canvas var,
|
||||
#drupal-off-canvas b,
|
||||
#drupal-off-canvas u,
|
||||
#drupal-off-canvas i,
|
||||
#drupal-off-canvas center,
|
||||
#drupal-off-canvas dl,
|
||||
#drupal-off-canvas dt,
|
||||
#drupal-off-canvas dd,
|
||||
#drupal-off-canvas ol,
|
||||
#drupal-off-canvas ul,
|
||||
#drupal-off-canvas li,
|
||||
#drupal-off-canvas fieldset,
|
||||
#drupal-off-canvas form,
|
||||
#drupal-off-canvas label,
|
||||
#drupal-off-canvas legend,
|
||||
#drupal-off-canvas table,
|
||||
#drupal-off-canvas caption,
|
||||
#drupal-off-canvas tbody,
|
||||
#drupal-off-canvas tfoot,
|
||||
#drupal-off-canvas thead,
|
||||
#drupal-off-canvas tr,
|
||||
#drupal-off-canvas th,
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas article,
|
||||
#drupal-off-canvas aside,
|
||||
#drupal-off-canvas canvas,
|
||||
#drupal-off-canvas details,
|
||||
#drupal-off-canvas embed,
|
||||
#drupal-off-canvas figure,
|
||||
#drupal-off-canvas figcaption,
|
||||
#drupal-off-canvas footer,
|
||||
#drupal-off-canvas header,
|
||||
#drupal-off-canvas hgroup,
|
||||
#drupal-off-canvas main,
|
||||
#drupal-off-canvas menu,
|
||||
#drupal-off-canvas meter,
|
||||
#drupal-off-canvas nav,
|
||||
#drupal-off-canvas output,
|
||||
#drupal-off-canvas progress,
|
||||
#drupal-off-canvas ruby,
|
||||
#drupal-off-canvas section,
|
||||
#drupal-off-canvas summary,
|
||||
#drupal-off-canvas time,
|
||||
#drupal-off-canvas mark,
|
||||
#drupal-off-canvas audio,
|
||||
#drupal-off-canvas video,
|
||||
#drupal-off-canvas input,
|
||||
#drupal-off-canvas select,
|
||||
#drupal-off-canvas textarea {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
}
|
||||
|
||||
/* Generic elements. */
|
||||
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas .link {
|
||||
cursor: pointer;
|
||||
transition: color 0.5s ease;
|
||||
text-decoration: none;
|
||||
color: #85bef4;
|
||||
border-bottom: none;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas a:focus,
|
||||
#drupal-off-canvas .link:focus,
|
||||
#drupal-off-canvas a:hover,
|
||||
#drupal-off-canvas .link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#drupal-off-canvas hr {
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#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-size: 1.625em;
|
||||
font-weight: bold;
|
||||
line-height: 1.875em;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas .heading-b {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.385em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas .heading-c {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.231em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas .heading-d {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.154em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas .heading-e {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.077em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas .heading-f {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.077em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas dl {
|
||||
margin: 0 0 1.25rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas dl dd,
|
||||
#drupal-off-canvas dl dl {
|
||||
margin-bottom: 0.625rem;
|
||||
margin-left: 1.25rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas dl dd,
|
||||
[dir="rtl"] #drupal-off-canvas dl dl {
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas blockquote {
|
||||
margin: 1em 2.5rem;
|
||||
}
|
||||
|
||||
#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 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;
|
||||
padding: 0.3125rem 0;
|
||||
border-bottom: 1px solid #333
|
||||
}
|
||||
|
||||
#drupal-off-canvas ul li:last-child, #drupal-off-canvas ol li:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas code {
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas pre {
|
||||
margin: 1.25rem 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#drupal-off-canvas details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#drupal-off-canvas summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
#drupal-off-canvas select::-ms-expand {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .visually-hidden.focusable:active,
|
||||
#drupal-off-canvas .visually-hidden.focusable:focus {
|
||||
position: static !important;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Some system classes. See system.admin.css. */
|
||||
|
||||
#drupal-off-canvas .panel {
|
||||
padding: 0.3125rem 0.3125rem 0.9375rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .panel__description {
|
||||
margin: 0 0 0.1875rem;
|
||||
padding: 2px 0 0.1875rem 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .compact-link {
|
||||
margin: 0 0 0.625rem 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 0.625rem 1.0625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas .messages {
|
||||
background-position: right 10px top 17px;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages abbr {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--status {
|
||||
color: #325e1c;
|
||||
background-color: #f3faef;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707l-8.741 8.736z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--warning {
|
||||
color: #734c00;
|
||||
background-color: #fdf8ed;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e29700'%3e%3cpath d='M14.66 12.316l-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002v-5zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.239z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--error {
|
||||
color: #a51b00;
|
||||
background-color: #fcf4f2;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e32700'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--error div[role="alert"] {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -1,346 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Set base styles for the off-canvas dialog.
|
||||
*/
|
||||
|
||||
/* Set some global attributes. */
|
||||
#drupal-off-canvas {
|
||||
color: #ddd;
|
||||
background: #444;
|
||||
}
|
||||
/**
|
||||
* All HTML elements that could be used in off-canvas except div, bdo, bdi,
|
||||
* data, svg, map and math.
|
||||
*
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
|
||||
*/
|
||||
#drupal-off-canvas {
|
||||
& span,
|
||||
& applet,
|
||||
& object,
|
||||
& iframe,
|
||||
& h1,
|
||||
& h2,
|
||||
& h3,
|
||||
& h4,
|
||||
& h5,
|
||||
& h6,
|
||||
& p,
|
||||
& blockquote,
|
||||
& pre,
|
||||
& a,
|
||||
& abbr,
|
||||
& acronym,
|
||||
& address,
|
||||
& big,
|
||||
& button,
|
||||
& cite,
|
||||
& code,
|
||||
& del,
|
||||
& dfn,
|
||||
& em,
|
||||
& img,
|
||||
& ins,
|
||||
& kbd,
|
||||
& q,
|
||||
& s,
|
||||
& samp,
|
||||
& small,
|
||||
& strike,
|
||||
& strong,
|
||||
& sub,
|
||||
& sup,
|
||||
& tt,
|
||||
& var,
|
||||
& b,
|
||||
& u,
|
||||
& i,
|
||||
& center,
|
||||
& dl,
|
||||
& dt,
|
||||
& dd,
|
||||
& ol,
|
||||
& ul,
|
||||
& li,
|
||||
& fieldset,
|
||||
& form,
|
||||
& label,
|
||||
& legend,
|
||||
& table,
|
||||
& caption,
|
||||
& tbody,
|
||||
& tfoot,
|
||||
& thead,
|
||||
& tr,
|
||||
& th,
|
||||
& td,
|
||||
& article,
|
||||
& aside,
|
||||
& canvas,
|
||||
& details,
|
||||
& embed,
|
||||
& figure,
|
||||
& figcaption,
|
||||
& footer,
|
||||
& header,
|
||||
& hgroup,
|
||||
& main,
|
||||
& menu,
|
||||
& meter,
|
||||
& nav,
|
||||
& output,
|
||||
& progress,
|
||||
& ruby,
|
||||
& section,
|
||||
& summary,
|
||||
& time,
|
||||
& mark,
|
||||
& audio,
|
||||
& video,
|
||||
& input,
|
||||
& select,
|
||||
& textarea {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
/* Generic elements. */
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas .link {
|
||||
cursor: pointer;
|
||||
transition: color 0.5s ease;
|
||||
text-decoration: none;
|
||||
color: #85bef4;
|
||||
border-bottom: none;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas a:focus,
|
||||
#drupal-off-canvas .link:focus,
|
||||
#drupal-off-canvas a:hover,
|
||||
#drupal-off-canvas .link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#drupal-off-canvas hr {
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
}
|
||||
#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-size: 1.625em;
|
||||
font-weight: bold;
|
||||
line-height: 1.875em;
|
||||
}
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas .heading-b {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.385em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas .heading-c {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.231em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas .heading-d {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.154em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas .heading-e {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.077em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas .heading-f {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.077em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#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-bottom: 10px;
|
||||
margin-left: 20px; /* LTR */
|
||||
}
|
||||
[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 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;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #333;
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas code {
|
||||
margin: 20px 0;
|
||||
}
|
||||
#drupal-off-canvas pre {
|
||||
margin: 20px 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
#drupal-off-canvas details {
|
||||
display: block;
|
||||
}
|
||||
#drupal-off-canvas summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
#drupal-off-canvas select::-ms-expand {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
word-wrap: normal;
|
||||
}
|
||||
#drupal-off-canvas .visually-hidden.focusable:active,
|
||||
#drupal-off-canvas .visually-hidden.focusable:focus {
|
||||
position: static !important;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
width: auto;
|
||||
height: 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 {
|
||||
color: #325e1c;
|
||||
background-color: #f3faef;
|
||||
background-image: url(../icons/73b355/check.svg);
|
||||
}
|
||||
#drupal-off-canvas .messages--warning {
|
||||
color: #734c00;
|
||||
background-color: #fdf8ed;
|
||||
background-image: url(../icons/e29700/warning.svg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--error {
|
||||
color: #a51b00;
|
||||
background-color: #fcf4f2;
|
||||
background-image: url(../icons/e32700/error.svg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--error div[role="alert"] {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for buttons in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas button,
|
||||
#drupal-off-canvas .button {
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
line-height: normal;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
#drupal-off-canvas button.link {
|
||||
display: inline;
|
||||
transition: color 0.5s ease;
|
||||
color: #85bef4;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
}
|
||||
#drupal-off-canvas button.link:hover,
|
||||
#drupal-off-canvas button.link:focus {
|
||||
text-decoration: none;
|
||||
color: #46a0f5;
|
||||
}
|
||||
#drupal-off-canvas input[type="submit"].button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 4px 20px;
|
||||
cursor: pointer;
|
||||
transition: background 0.5s ease;
|
||||
text-align: center;
|
||||
color: #f5f5f5;
|
||||
border: 0;
|
||||
border-radius: 20em;
|
||||
background: #777;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
#drupal-off-canvas input[type="submit"].button:hover,
|
||||
#drupal-off-canvas input[type="submit"].button:focus,
|
||||
#drupal-off-canvas input[type="submit"].button:active {
|
||||
z-index: 10;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
#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 {
|
||||
margin-top: 15px;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
background: #277abd;
|
||||
}
|
||||
#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 {
|
||||
outline: none;
|
||||
background: #236aaf;
|
||||
}
|
||||
#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 {
|
||||
padding: 2px 1em;
|
||||
font-size: 13px;
|
||||
}
|
||||
#drupal-off-canvas .button:disabled,
|
||||
#drupal-off-canvas .button:disabled:active,
|
||||
#drupal-off-canvas .button.is-disabled,
|
||||
#drupal-off-canvas .button.is-disabled:active {
|
||||
cursor: default;
|
||||
color: #5c5c5c;
|
||||
border: 0;
|
||||
background: #555;
|
||||
font-weight: normal;
|
||||
}
|
||||
#drupal-off-canvas .button--danger {
|
||||
text-decoration: none;
|
||||
color: #c72100;
|
||||
border-radius: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
#drupal-off-canvas .button--danger:hover,
|
||||
#drupal-off-canvas .button--danger:focus,
|
||||
#drupal-off-canvas .button--danger:active {
|
||||
text-decoration: none;
|
||||
color: #ff2a00;
|
||||
text-shadow: none;
|
||||
}
|
||||
#drupal-off-canvas .button--danger:disabled,
|
||||
#drupal-off-canvas .button--danger.is-disabled {
|
||||
cursor: default;
|
||||
color: #737373;
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* CSS for off-canvas dialog.
|
||||
*/
|
||||
|
||||
/* Position the off-canvas dialog container outside the right of the viewport. */
|
||||
.ui-dialog-off-canvas {
|
||||
overflow: visible;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Wrap the form that's inside the off-canvas dialog. */
|
||||
.ui-dialog-off-canvas .ui-dialog-content {
|
||||
/* Prevent horizontal scrollbar. */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
[dir="rtl"] .ui-dialog-off-canvas .ui-dialog-content {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Position the off-canvas dialog container outside the right of the viewport. */
|
||||
.ui-dialog-off-canvas {
|
||||
overflow: visible;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Wrap the form that's inside the off-canvas dialog. */
|
||||
.ui-dialog-off-canvas #drupal-off-canvas {
|
||||
/* Prevent horizontal scrollbar. */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
[dir="rtl"] .ui-dialog-off-canvas #drupal-off-canvas {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/*
|
||||
* Force the off-canvas dialog 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 off-canvas dialog is at 100% width stop the body from scrolling */
|
||||
.js-off-canvas-dialog-open {
|
||||
overflow-y: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for summary and details in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas details {
|
||||
display: block;
|
||||
}
|
||||
#drupal-off-canvas details,
|
||||
#drupal-off-canvas summary {
|
||||
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 {
|
||||
color: #ddd;
|
||||
background: #474747;
|
||||
}
|
||||
#drupal-off-canvas summary a {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
color: #ddd;
|
||||
}
|
||||
#drupal-off-canvas summary a:hover,
|
||||
#drupal-off-canvas summary a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
#drupal-off-canvas details,
|
||||
#drupal-off-canvas summary,
|
||||
#drupal-off-canvas .details-wrapper {
|
||||
/* Cancel out the padding of the parent. */
|
||||
margin: 0 -20px;
|
||||
padding: 0 20px;
|
||||
border-width: 0;
|
||||
}
|
||||
#drupal-off-canvas summary {
|
||||
padding: 10px 20px;
|
||||
transition: all 0.5s ease;
|
||||
text-shadow: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
#drupal-off-canvas summary:hover,
|
||||
#drupal-off-canvas summary:focus {
|
||||
background-color: #222;
|
||||
}
|
||||
#drupal-off-canvas details[open] {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#drupal-off-canvas details[open] > summary {
|
||||
color: #eee;
|
||||
background-color: #333;
|
||||
}
|
||||
#drupal-off-canvas details[open] > summary:hover {
|
||||
color: #fff;
|
||||
background-color: #222;
|
||||
}
|
||||
#drupal-off-canvas details .placeholder {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -1,291 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Styles for dropbuttons in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas .dropbutton-wrapper,
|
||||
#drupal-off-canvas .dropbutton-widget {
|
||||
position: static;
|
||||
display: block;
|
||||
transition: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
#drupal-off-canvas .dropbutton-widget {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: background 0.5s ease;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-radius: 1em;
|
||||
background: #277abd;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
#drupal-off-canvas .dropbutton-widget:hover {
|
||||
background: #2b8bd8;
|
||||
}
|
||||
|
||||
/*
|
||||
* Style dropbutton single.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas .dropbutton-single .dropbutton-action a {
|
||||
height: 2.2em;
|
||||
/* Overlap icon for trigger. */
|
||||
margin-top: -2em;
|
||||
padding: 0;
|
||||
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 {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
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 {
|
||||
color: #333;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
* 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;
|
||||
white-space: nowrap;
|
||||
text-indent: 110%;
|
||||
color: #fff;
|
||||
}
|
||||
#drupal-off-canvas .dropbutton-toggle button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border: 0 solid transparent;
|
||||
border-top-right-radius: 1em; /* LTR */
|
||||
border-bottom-right-radius: 1em; /* LTR */
|
||||
}
|
||||
#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;
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 0;
|
||||
color: #fff;
|
||||
border-width: 0.3333em 0.3333em 0;
|
||||
border-style: solid;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
line-height: 0;
|
||||
}
|
||||
#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;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-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 {
|
||||
position: relative;
|
||||
float: right; /* LTR */
|
||||
min-width: initial;
|
||||
max-width: initial;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
#drupal-off-canvas td .dropbutton-widget .dropbutton {
|
||||
overflow: hidden;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin: 0;
|
||||
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 {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
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 its container. */
|
||||
#drupal-off-canvas td ul.dropbutton li.edit {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
/* Make li text transparent above icon so it's clickable. */
|
||||
#drupal-off-canvas td .dropbutton-single li.edit.dropbutton-action > a {
|
||||
z-index: 1;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* Put pencil icon in place of hidden 'edit' text on single buttons. */
|
||||
#drupal-off-canvas td .dropbutton-single .edit:before {
|
||||
display: block;
|
||||
content: ".";
|
||||
color: transparent;
|
||||
background: transparent url(../icons/ffffff/pencil.svg) no-repeat center;
|
||||
background-size: 14px;
|
||||
}
|
||||
|
||||
/* Dropbutton when triggered expands to show secondary items. */
|
||||
#drupal-off-canvas .dropbutton-multiple.open {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* Create visual separation if there is an adjacent button. */
|
||||
#drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
|
||||
box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Triggered dropbutton expands to show secondary items. */
|
||||
#drupal-off-canvas .dropbutton-multiple.open,
|
||||
#drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Triggered dropbutton in td expands to show secondary items. */
|
||||
#drupal-off-canvas td .dropbutton-multiple.open .dropbutton,
|
||||
#drupal-off-canvas .dropbutton-multiple.open .dropbutton .secondary-action {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding-right: 1em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas td .dropbutton-multiple.open .dropbutton {
|
||||
padding-right: inherit;
|
||||
padding-left: 1em;
|
||||
}
|
||||
#drupal-off-canvas .dropbutton-multiple.open .dropbutton li a {
|
||||
padding: 2px 1em;
|
||||
}
|
||||
|
||||
/* When open, the toggle arrow points upward. */
|
||||
#drupal-off-canvas .dropbutton-multiple.open span.dropbutton-arrow {
|
||||
top: 2px;
|
||||
border-top-color: transparent;
|
||||
border-bottom: 0.3333em solid;
|
||||
}
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for forms in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas form {
|
||||
color: #ddd;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
}
|
||||
#drupal-off-canvas input[type="checkbox"] {
|
||||
-webkit-appearance: checkbox;
|
||||
}
|
||||
#drupal-off-canvas input[type="radio"] {
|
||||
-webkit-appearance: radio;
|
||||
}
|
||||
#drupal-off-canvas select:not([multiple]) {
|
||||
-webkit-appearance: menulist;
|
||||
-moz-appearance: menulist;
|
||||
}
|
||||
#drupal-off-canvas option {
|
||||
display: block;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
}
|
||||
#drupal-off-canvas label {
|
||||
color: #ddd;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
}
|
||||
#drupal-off-canvas .visually-hidden {
|
||||
width: 0;
|
||||
height: 0;
|
||||
letter-spacing: -2em;
|
||||
opacity: 0;
|
||||
}
|
||||
#drupal-off-canvas .description,
|
||||
#drupal-off-canvas .form-item .description,
|
||||
#drupal-off-canvas .details-description {
|
||||
margin-top: 5px;
|
||||
color: #ddd;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
}
|
||||
#drupal-off-canvas .form-item {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/* Set size and position for all inputs. */
|
||||
#drupal-off-canvas .form-select,
|
||||
#drupal-off-canvas .form-text,
|
||||
#drupal-off-canvas .form-tel,
|
||||
#drupal-off-canvas .form-email,
|
||||
#drupal-off-canvas .form-url,
|
||||
#drupal-off-canvas .form-search,
|
||||
#drupal-off-canvas .form-number,
|
||||
#drupal-off-canvas .form-color,
|
||||
#drupal-off-canvas .form-file,
|
||||
#drupal-off-canvas .form-textarea,
|
||||
#drupal-off-canvas .form-date,
|
||||
#drupal-off-canvas .form-time {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
margin: 5px 0 0 0;
|
||||
padding: 6px;
|
||||
color: #333;
|
||||
border-width: 1px;
|
||||
border-radius: 2px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
/* Reduce contrast for fields against dark background. */
|
||||
#drupal-off-canvas .form-text,
|
||||
#drupal-off-canvas .form-tel,
|
||||
#drupal-off-canvas .form-email,
|
||||
#drupal-off-canvas .form-url,
|
||||
#drupal-off-canvas .form-search,
|
||||
#drupal-off-canvas .form-number,
|
||||
#drupal-off-canvas .form-color,
|
||||
#drupal-off-canvas .form-file,
|
||||
#drupal-off-canvas .form-textarea,
|
||||
#drupal-off-canvas .form-date,
|
||||
#drupal-off-canvas .form-time {
|
||||
color: #595959;
|
||||
border-color: #333;
|
||||
background-color: #eee;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
#drupal-off-canvas .form-text:focus,
|
||||
#drupal-off-canvas .form-tel:focus,
|
||||
#drupal-off-canvas .form-email:focus,
|
||||
#drupal-off-canvas .form-url:focus,
|
||||
#drupal-off-canvas .form-search:focus,
|
||||
#drupal-off-canvas .form-number:focus,
|
||||
#drupal-off-canvas .form-color:focus,
|
||||
#drupal-off-canvas .form-file:focus,
|
||||
#drupal-off-canvas .form-textarea:focus,
|
||||
#drupal-off-canvas .form-date:focus,
|
||||
#drupal-off-canvas .form-time:focus {
|
||||
border-color: #40b6ff;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.125), 0 0 8px #40b6ff;
|
||||
}
|
||||
#drupal-off-canvas td .form-item,
|
||||
#drupal-off-canvas td .form-select {
|
||||
margin: 0;
|
||||
}
|
||||
#drupal-off-canvas .form-file {
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#drupal-off-canvas .form-actions {
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
#drupal-off-canvas .ui-autocomplete {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: default;
|
||||
background-color: white;
|
||||
}
|
||||
#drupal-off-canvas .ui-autocomplete li {
|
||||
display: block;
|
||||
}
|
||||
#drupal-off-canvas .ui-autocomplete li a {
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
color: #595959 !important;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for layouts in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
.layout-icon__region {
|
||||
fill: #f5f5f2;
|
||||
stroke: #666;
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Motion effects for off-canvas dialog.
|
||||
*
|
||||
* Motion effects are in a separate file so that they can be easily turned off
|
||||
* to improve performance if desired.
|
||||
*/
|
||||
|
||||
.dialog-off-canvas-main-canvas {
|
||||
transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease;
|
||||
}
|
||||
|
|
@ -1,685 +0,0 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Reset most HTML elements styles for the off-canvas dialog.
|
||||
*
|
||||
* This is a generic reset. Drupal-specific classes are reset in components.
|
||||
*/
|
||||
|
||||
/**
|
||||
* All HTML elements that could be used in off-canvas except div, bdo, bdi,
|
||||
* data, svg, map and math.
|
||||
*
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
|
||||
*/
|
||||
|
||||
#drupal-off-canvas span,
|
||||
#drupal-off-canvas applet,
|
||||
#drupal-off-canvas object,
|
||||
#drupal-off-canvas iframe,
|
||||
#drupal-off-canvas h1,
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas p,
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas pre,
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas abbr,
|
||||
#drupal-off-canvas acronym,
|
||||
#drupal-off-canvas address,
|
||||
#drupal-off-canvas big,
|
||||
#drupal-off-canvas button,
|
||||
#drupal-off-canvas cite,
|
||||
#drupal-off-canvas code,
|
||||
#drupal-off-canvas del,
|
||||
#drupal-off-canvas dfn,
|
||||
#drupal-off-canvas em,
|
||||
#drupal-off-canvas img,
|
||||
#drupal-off-canvas ins,
|
||||
#drupal-off-canvas kbd,
|
||||
#drupal-off-canvas q,
|
||||
#drupal-off-canvas s,
|
||||
#drupal-off-canvas samp,
|
||||
#drupal-off-canvas small,
|
||||
#drupal-off-canvas strike,
|
||||
#drupal-off-canvas strong,
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup,
|
||||
#drupal-off-canvas tt,
|
||||
#drupal-off-canvas var,
|
||||
#drupal-off-canvas b,
|
||||
#drupal-off-canvas u,
|
||||
#drupal-off-canvas i,
|
||||
#drupal-off-canvas center,
|
||||
#drupal-off-canvas dl,
|
||||
#drupal-off-canvas dt,
|
||||
#drupal-off-canvas dd,
|
||||
#drupal-off-canvas ol,
|
||||
#drupal-off-canvas ul,
|
||||
#drupal-off-canvas li,
|
||||
#drupal-off-canvas fieldset,
|
||||
#drupal-off-canvas form,
|
||||
#drupal-off-canvas label,
|
||||
#drupal-off-canvas legend,
|
||||
#drupal-off-canvas table,
|
||||
#drupal-off-canvas caption,
|
||||
#drupal-off-canvas tbody,
|
||||
#drupal-off-canvas tfoot,
|
||||
#drupal-off-canvas thead,
|
||||
#drupal-off-canvas tr,
|
||||
#drupal-off-canvas th,
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas article,
|
||||
#drupal-off-canvas aside,
|
||||
#drupal-off-canvas canvas,
|
||||
#drupal-off-canvas details,
|
||||
#drupal-off-canvas embed,
|
||||
#drupal-off-canvas figure,
|
||||
#drupal-off-canvas figcaption,
|
||||
#drupal-off-canvas footer,
|
||||
#drupal-off-canvas header,
|
||||
#drupal-off-canvas hgroup,
|
||||
#drupal-off-canvas main,
|
||||
#drupal-off-canvas menu,
|
||||
#drupal-off-canvas meter,
|
||||
#drupal-off-canvas nav,
|
||||
#drupal-off-canvas output,
|
||||
#drupal-off-canvas progress,
|
||||
#drupal-off-canvas ruby,
|
||||
#drupal-off-canvas section,
|
||||
#drupal-off-canvas summary,
|
||||
#drupal-off-canvas time,
|
||||
#drupal-off-canvas mark,
|
||||
#drupal-off-canvas audio,
|
||||
#drupal-off-canvas video,
|
||||
#drupal-off-canvas input,
|
||||
#drupal-off-canvas select,
|
||||
#drupal-off-canvas textarea {
|
||||
all: initial;
|
||||
box-sizing: border-box;
|
||||
text-shadow: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tap-highlight-color: initial
|
||||
}
|
||||
|
||||
#drupal-off-canvas span:after,
|
||||
#drupal-off-canvas span:before,
|
||||
#drupal-off-canvas applet:after,
|
||||
#drupal-off-canvas applet:before,
|
||||
#drupal-off-canvas object:after,
|
||||
#drupal-off-canvas object:before,
|
||||
#drupal-off-canvas iframe:after,
|
||||
#drupal-off-canvas iframe:before,
|
||||
#drupal-off-canvas h1:after,
|
||||
#drupal-off-canvas h1:before,
|
||||
#drupal-off-canvas h2:after,
|
||||
#drupal-off-canvas h2:before,
|
||||
#drupal-off-canvas h3:after,
|
||||
#drupal-off-canvas h3:before,
|
||||
#drupal-off-canvas h4:after,
|
||||
#drupal-off-canvas h4:before,
|
||||
#drupal-off-canvas h5:after,
|
||||
#drupal-off-canvas h5:before,
|
||||
#drupal-off-canvas h6:after,
|
||||
#drupal-off-canvas h6:before,
|
||||
#drupal-off-canvas p:after,
|
||||
#drupal-off-canvas p:before,
|
||||
#drupal-off-canvas blockquote:after,
|
||||
#drupal-off-canvas blockquote:before,
|
||||
#drupal-off-canvas pre:after,
|
||||
#drupal-off-canvas pre:before,
|
||||
#drupal-off-canvas a:after,
|
||||
#drupal-off-canvas a:before,
|
||||
#drupal-off-canvas abbr:after,
|
||||
#drupal-off-canvas abbr:before,
|
||||
#drupal-off-canvas acronym:after,
|
||||
#drupal-off-canvas acronym:before,
|
||||
#drupal-off-canvas address:after,
|
||||
#drupal-off-canvas address:before,
|
||||
#drupal-off-canvas big:after,
|
||||
#drupal-off-canvas big:before,
|
||||
#drupal-off-canvas button:after,
|
||||
#drupal-off-canvas button:before,
|
||||
#drupal-off-canvas cite:after,
|
||||
#drupal-off-canvas cite:before,
|
||||
#drupal-off-canvas code:after,
|
||||
#drupal-off-canvas code:before,
|
||||
#drupal-off-canvas del:after,
|
||||
#drupal-off-canvas del:before,
|
||||
#drupal-off-canvas dfn:after,
|
||||
#drupal-off-canvas dfn:before,
|
||||
#drupal-off-canvas em:after,
|
||||
#drupal-off-canvas em:before,
|
||||
#drupal-off-canvas img:after,
|
||||
#drupal-off-canvas img:before,
|
||||
#drupal-off-canvas ins:after,
|
||||
#drupal-off-canvas ins:before,
|
||||
#drupal-off-canvas kbd:after,
|
||||
#drupal-off-canvas kbd:before,
|
||||
#drupal-off-canvas q:after,
|
||||
#drupal-off-canvas q:before,
|
||||
#drupal-off-canvas s:after,
|
||||
#drupal-off-canvas s:before,
|
||||
#drupal-off-canvas samp:after,
|
||||
#drupal-off-canvas samp:before,
|
||||
#drupal-off-canvas small:after,
|
||||
#drupal-off-canvas small:before,
|
||||
#drupal-off-canvas strike:after,
|
||||
#drupal-off-canvas strike:before,
|
||||
#drupal-off-canvas strong:after,
|
||||
#drupal-off-canvas strong:before,
|
||||
#drupal-off-canvas sub:after,
|
||||
#drupal-off-canvas sub:before,
|
||||
#drupal-off-canvas sup:after,
|
||||
#drupal-off-canvas sup:before,
|
||||
#drupal-off-canvas tt:after,
|
||||
#drupal-off-canvas tt:before,
|
||||
#drupal-off-canvas var:after,
|
||||
#drupal-off-canvas var:before,
|
||||
#drupal-off-canvas b:after,
|
||||
#drupal-off-canvas b:before,
|
||||
#drupal-off-canvas u:after,
|
||||
#drupal-off-canvas u:before,
|
||||
#drupal-off-canvas i:after,
|
||||
#drupal-off-canvas i:before,
|
||||
#drupal-off-canvas center:after,
|
||||
#drupal-off-canvas center:before,
|
||||
#drupal-off-canvas dl:after,
|
||||
#drupal-off-canvas dl:before,
|
||||
#drupal-off-canvas dt:after,
|
||||
#drupal-off-canvas dt:before,
|
||||
#drupal-off-canvas dd:after,
|
||||
#drupal-off-canvas dd:before,
|
||||
#drupal-off-canvas ol:after,
|
||||
#drupal-off-canvas ol:before,
|
||||
#drupal-off-canvas ul:after,
|
||||
#drupal-off-canvas ul:before,
|
||||
#drupal-off-canvas li:after,
|
||||
#drupal-off-canvas li:before,
|
||||
#drupal-off-canvas fieldset:after,
|
||||
#drupal-off-canvas fieldset:before,
|
||||
#drupal-off-canvas form:after,
|
||||
#drupal-off-canvas form:before,
|
||||
#drupal-off-canvas label:after,
|
||||
#drupal-off-canvas label:before,
|
||||
#drupal-off-canvas legend:after,
|
||||
#drupal-off-canvas legend:before,
|
||||
#drupal-off-canvas table:after,
|
||||
#drupal-off-canvas table:before,
|
||||
#drupal-off-canvas caption:after,
|
||||
#drupal-off-canvas caption:before,
|
||||
#drupal-off-canvas tbody:after,
|
||||
#drupal-off-canvas tbody:before,
|
||||
#drupal-off-canvas tfoot:after,
|
||||
#drupal-off-canvas tfoot:before,
|
||||
#drupal-off-canvas thead:after,
|
||||
#drupal-off-canvas thead:before,
|
||||
#drupal-off-canvas tr:after,
|
||||
#drupal-off-canvas tr:before,
|
||||
#drupal-off-canvas th:after,
|
||||
#drupal-off-canvas th:before,
|
||||
#drupal-off-canvas td:after,
|
||||
#drupal-off-canvas td:before,
|
||||
#drupal-off-canvas article:after,
|
||||
#drupal-off-canvas article:before,
|
||||
#drupal-off-canvas aside:after,
|
||||
#drupal-off-canvas aside:before,
|
||||
#drupal-off-canvas canvas:after,
|
||||
#drupal-off-canvas canvas:before,
|
||||
#drupal-off-canvas details:after,
|
||||
#drupal-off-canvas details:before,
|
||||
#drupal-off-canvas embed:after,
|
||||
#drupal-off-canvas embed:before,
|
||||
#drupal-off-canvas figure:after,
|
||||
#drupal-off-canvas figure:before,
|
||||
#drupal-off-canvas figcaption:after,
|
||||
#drupal-off-canvas figcaption:before,
|
||||
#drupal-off-canvas footer:after,
|
||||
#drupal-off-canvas footer:before,
|
||||
#drupal-off-canvas header:after,
|
||||
#drupal-off-canvas header:before,
|
||||
#drupal-off-canvas hgroup:after,
|
||||
#drupal-off-canvas hgroup:before,
|
||||
#drupal-off-canvas main:after,
|
||||
#drupal-off-canvas main:before,
|
||||
#drupal-off-canvas menu:after,
|
||||
#drupal-off-canvas menu:before,
|
||||
#drupal-off-canvas meter:after,
|
||||
#drupal-off-canvas meter:before,
|
||||
#drupal-off-canvas nav:after,
|
||||
#drupal-off-canvas nav:before,
|
||||
#drupal-off-canvas output:after,
|
||||
#drupal-off-canvas output:before,
|
||||
#drupal-off-canvas progress:after,
|
||||
#drupal-off-canvas progress:before,
|
||||
#drupal-off-canvas ruby:after,
|
||||
#drupal-off-canvas ruby:before,
|
||||
#drupal-off-canvas section:after,
|
||||
#drupal-off-canvas section:before,
|
||||
#drupal-off-canvas summary:after,
|
||||
#drupal-off-canvas summary:before,
|
||||
#drupal-off-canvas time:after,
|
||||
#drupal-off-canvas time:before,
|
||||
#drupal-off-canvas mark:after,
|
||||
#drupal-off-canvas mark:before,
|
||||
#drupal-off-canvas audio:after,
|
||||
#drupal-off-canvas audio:before,
|
||||
#drupal-off-canvas video:after,
|
||||
#drupal-off-canvas video:before,
|
||||
#drupal-off-canvas input:after,
|
||||
#drupal-off-canvas input:before,
|
||||
#drupal-off-canvas select:after,
|
||||
#drupal-off-canvas select:before,
|
||||
#drupal-off-canvas textarea:after,
|
||||
#drupal-off-canvas textarea:before {
|
||||
all: initial;
|
||||
box-sizing: border-box;
|
||||
text-shadow: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tap-highlight-color: initial;
|
||||
}
|
||||
|
||||
/* Reset size and position on elements. */
|
||||
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas abbr,
|
||||
#drupal-off-canvas acronym,
|
||||
#drupal-off-canvas address,
|
||||
#drupal-off-canvas applet,
|
||||
#drupal-off-canvas article,
|
||||
#drupal-off-canvas aside,
|
||||
#drupal-off-canvas audio,
|
||||
#drupal-off-canvas b,
|
||||
#drupal-off-canvas big,
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas body,
|
||||
#drupal-off-canvas canvas,
|
||||
#drupal-off-canvas caption,
|
||||
#drupal-off-canvas cite,
|
||||
#drupal-off-canvas code,
|
||||
#drupal-off-canvas dd,
|
||||
#drupal-off-canvas del,
|
||||
#drupal-off-canvas dfn,
|
||||
#drupal-off-canvas dialog,
|
||||
#drupal-off-canvas dl,
|
||||
#drupal-off-canvas dt,
|
||||
#drupal-off-canvas em,
|
||||
#drupal-off-canvas embed,
|
||||
#drupal-off-canvas fieldset,
|
||||
#drupal-off-canvas figcaption,
|
||||
#drupal-off-canvas figure,
|
||||
#drupal-off-canvas footer,
|
||||
#drupal-off-canvas form,
|
||||
#drupal-off-canvas h1,
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas header,
|
||||
#drupal-off-canvas hgroup,
|
||||
#drupal-off-canvas hr,
|
||||
#drupal-off-canvas html,
|
||||
#drupal-off-canvas i,
|
||||
#drupal-off-canvas iframe,
|
||||
#drupal-off-canvas img,
|
||||
#drupal-off-canvas ins,
|
||||
#drupal-off-canvas kbd,
|
||||
#drupal-off-canvas label,
|
||||
#drupal-off-canvas legend,
|
||||
#drupal-off-canvas li,
|
||||
#drupal-off-canvas main,
|
||||
#drupal-off-canvas mark,
|
||||
#drupal-off-canvas menu,
|
||||
#drupal-off-canvas meter,
|
||||
#drupal-off-canvas nav,
|
||||
#drupal-off-canvas object,
|
||||
#drupal-off-canvas ol,
|
||||
#drupal-off-canvas output,
|
||||
#drupal-off-canvas p,
|
||||
#drupal-off-canvas pre,
|
||||
#drupal-off-canvas progress,
|
||||
#drupal-off-canvas q,
|
||||
#drupal-off-canvas rp,
|
||||
#drupal-off-canvas rt,
|
||||
#drupal-off-canvas s,
|
||||
#drupal-off-canvas samp,
|
||||
#drupal-off-canvas section,
|
||||
#drupal-off-canvas small,
|
||||
#drupal-off-canvas span,
|
||||
#drupal-off-canvas strike,
|
||||
#drupal-off-canvas strong,
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup,
|
||||
#drupal-off-canvas table,
|
||||
#drupal-off-canvas tbody,
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas tfoot,
|
||||
#drupal-off-canvas th,
|
||||
#drupal-off-canvas thead,
|
||||
#drupal-off-canvas time,
|
||||
#drupal-off-canvas tr,
|
||||
#drupal-off-canvas tt,
|
||||
#drupal-off-canvas u,
|
||||
#drupal-off-canvas ul,
|
||||
#drupal-off-canvas var,
|
||||
#drupal-off-canvas video,
|
||||
#drupal-off-canvas xmp {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Override the default (display: inline) for browsers that do not recognize HTML5 tags.
|
||||
* IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
|
||||
*/
|
||||
|
||||
#drupal-off-canvas article,
|
||||
#drupal-off-canvas aside,
|
||||
#drupal-off-canvas figcaption,
|
||||
#drupal-off-canvas figure,
|
||||
#drupal-off-canvas footer,
|
||||
#drupal-off-canvas header,
|
||||
#drupal-off-canvas hgroup,
|
||||
#drupal-off-canvas main,
|
||||
#drupal-off-canvas menu,
|
||||
#drupal-off-canvas nav,
|
||||
#drupal-off-canvas section {
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* Makes browsers agree.
|
||||
* IE + Opera = font-weight: bold.
|
||||
* Gecko + WebKit = font-weight: bolder.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas b,
|
||||
#drupal-off-canvas strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas em,
|
||||
#drupal-off-canvas i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#drupal-off-canvas img {
|
||||
vertical-align: middle;
|
||||
color: transparent;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas ul,
|
||||
#drupal-off-canvas ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* reset table styling. */
|
||||
|
||||
#drupal-off-canvas table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#drupal-off-canvas table thead,
|
||||
#drupal-off-canvas table tbody,
|
||||
#drupal-off-canvas table tbody tr:nth-child(even),
|
||||
#drupal-off-canvas table tbody tr:nth-child(odd),
|
||||
#drupal-off-canvas table tfoot {
|
||||
border: 0;
|
||||
background: transparent none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas th,
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas caption {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas q:before,
|
||||
#drupal-off-canvas q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup,
|
||||
#drupal-off-canvas small {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup {
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
#drupal-off-canvas sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
* For IE9. Without, occasionally draws shapes
|
||||
* outside the boundaries of <svg> rectangle.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas svg {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Specific resets for inputs. */
|
||||
|
||||
#drupal-off-canvas input[type="search"]::-webkit-search-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas input[type="checkbox"],
|
||||
#drupal-off-canvas input[type="radio"] {
|
||||
position: static;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas input:invalid,
|
||||
#drupal-off-canvas button:invalid,
|
||||
#drupal-off-canvas select:invalid,
|
||||
#drupal-off-canvas textarea:invalid,
|
||||
#drupal-off-canvas input:focus,
|
||||
#drupal-off-canvas button:focus,
|
||||
#drupal-off-canvas select:focus,
|
||||
#drupal-off-canvas textarea:focus,
|
||||
#drupal-off-canvas input[type="file"]:focus,
|
||||
#drupal-off-canvas input[type="file"]:active,
|
||||
#drupal-off-canvas input[type="radio"]:focus,
|
||||
#drupal-off-canvas input[type="radio"]:active,
|
||||
#drupal-off-canvas input[type="checkbox"]:focus,
|
||||
#drupal-off-canvas input[type="checkbox"]:active {
|
||||
z-index: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas input[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#drupal-off-canvas button,
|
||||
#drupal-off-canvas input[type="reset"],
|
||||
#drupal-off-canvas input[type="submit"],
|
||||
#drupal-off-canvas input[type="button"] {
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas button:hover,
|
||||
#drupal-off-canvas input[type="reset"]:hover,
|
||||
#drupal-off-canvas input[type="submit"]:hover,
|
||||
#drupal-off-canvas input[type="button"]:hover {
|
||||
text-decoration: none;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas button:active,
|
||||
#drupal-off-canvas input[type="reset"]:active,
|
||||
#drupal-off-canvas input[type="submit"]:active,
|
||||
#drupal-off-canvas input[type="button"]:active {
|
||||
border-color: gray;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas button::-moz-focus-inner,
|
||||
#drupal-off-canvas input[type="reset"]::-moz-focus-inner,
|
||||
#drupal-off-canvas input[type="submit"]::-moz-focus-inner,
|
||||
#drupal-off-canvas input[type="button"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas textarea,
|
||||
#drupal-off-canvas select,
|
||||
#drupal-off-canvas input[type="date"],
|
||||
#drupal-off-canvas input[type="datetime"],
|
||||
#drupal-off-canvas input[type="datetime-local"],
|
||||
#drupal-off-canvas input[type="email"],
|
||||
#drupal-off-canvas input[type="month"],
|
||||
#drupal-off-canvas input[type="number"],
|
||||
#drupal-off-canvas input[type="password"],
|
||||
#drupal-off-canvas input[type="search"],
|
||||
#drupal-off-canvas input[type="tel"],
|
||||
#drupal-off-canvas input[type="text"],
|
||||
#drupal-off-canvas input[type="time"],
|
||||
#drupal-off-canvas input[type="url"],
|
||||
#drupal-off-canvas input[type="week"] {
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas textarea[disabled],
|
||||
#drupal-off-canvas select[disabled],
|
||||
#drupal-off-canvas input[type="date"][disabled],
|
||||
#drupal-off-canvas input[type="datetime"][disabled],
|
||||
#drupal-off-canvas input[type="datetime-local"][disabled],
|
||||
#drupal-off-canvas input[type="email"][disabled],
|
||||
#drupal-off-canvas input[type="month"][disabled],
|
||||
#drupal-off-canvas input[type="number"][disabled],
|
||||
#drupal-off-canvas input[type="password"][disabled],
|
||||
#drupal-off-canvas input[type="search"][disabled],
|
||||
#drupal-off-canvas input[type="tel"][disabled],
|
||||
#drupal-off-canvas input[type="text"][disabled],
|
||||
#drupal-off-canvas input[type="time"][disabled],
|
||||
#drupal-off-canvas input[type="url"][disabled],
|
||||
#drupal-off-canvas input[type="week"][disabled] {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
#drupal-off-canvas input[type="hidden"] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#drupal-off-canvas button[disabled],
|
||||
#drupal-off-canvas input[disabled],
|
||||
#drupal-off-canvas select[disabled],
|
||||
#drupal-off-canvas select[disabled] option,
|
||||
#drupal-off-canvas select[disabled] optgroup,
|
||||
#drupal-off-canvas textarea[disabled] {
|
||||
cursor: default;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas input:placeholder,
|
||||
#drupal-off-canvas textarea:placeholder {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#drupal-off-canvas textarea,
|
||||
#drupal-off-canvas select[size],
|
||||
#drupal-off-canvas select[multiple] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#drupal-off-canvas select[size="0"],
|
||||
#drupal-off-canvas select[size="1"] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#drupal-off-canvas textarea {
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
min-height: 2.5rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
#drupal-off-canvas select[multiple] {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#drupal-off-canvas optgroup {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas optgroup::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas * button {
|
||||
overflow: visible;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
border: 1px solid gray;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas * textarea,
|
||||
#drupal-off-canvas * select,
|
||||
#drupal-off-canvas *:not(div) textarea,
|
||||
#drupal-off-canvas *:not(div) select {
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
color: black;
|
||||
border: 1px solid gray;
|
||||
background: white;
|
||||
}
|
||||
|
|
@ -1,478 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Reset most HTML elements styles for the off-canvas dialog.
|
||||
*
|
||||
* This is a generic reset. Drupal-specific classes are reset in components.
|
||||
*/
|
||||
|
||||
/**
|
||||
* All HTML elements that could be used in off-canvas except div, bdo, bdi,
|
||||
* data, svg, map and math.
|
||||
*
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
|
||||
*/
|
||||
#drupal-off-canvas {
|
||||
& span,
|
||||
& applet,
|
||||
& object,
|
||||
& iframe,
|
||||
& h1,
|
||||
& h2,
|
||||
& h3,
|
||||
& h4,
|
||||
& h5,
|
||||
& h6,
|
||||
& p,
|
||||
& blockquote,
|
||||
& pre,
|
||||
& a,
|
||||
& abbr,
|
||||
& acronym,
|
||||
& address,
|
||||
& big,
|
||||
& button,
|
||||
& cite,
|
||||
& code,
|
||||
& del,
|
||||
& dfn,
|
||||
& em,
|
||||
& img,
|
||||
& ins,
|
||||
& kbd,
|
||||
& q,
|
||||
& s,
|
||||
& samp,
|
||||
& small,
|
||||
& strike,
|
||||
& strong,
|
||||
& sub,
|
||||
& sup,
|
||||
& tt,
|
||||
& var,
|
||||
& b,
|
||||
& u,
|
||||
& i,
|
||||
& center,
|
||||
& dl,
|
||||
& dt,
|
||||
& dd,
|
||||
& ol,
|
||||
& ul,
|
||||
& li,
|
||||
& fieldset,
|
||||
& form,
|
||||
& label,
|
||||
& legend,
|
||||
& table,
|
||||
& caption,
|
||||
& tbody,
|
||||
& tfoot,
|
||||
& thead,
|
||||
& tr,
|
||||
& th,
|
||||
& td,
|
||||
& article,
|
||||
& aside,
|
||||
& canvas,
|
||||
& details,
|
||||
& embed,
|
||||
& figure,
|
||||
& figcaption,
|
||||
& footer,
|
||||
& header,
|
||||
& hgroup,
|
||||
& main,
|
||||
& menu,
|
||||
& meter,
|
||||
& nav,
|
||||
& output,
|
||||
& progress,
|
||||
& ruby,
|
||||
& section,
|
||||
& summary,
|
||||
& time,
|
||||
& mark,
|
||||
& audio,
|
||||
& video,
|
||||
& input,
|
||||
& select,
|
||||
& textarea {
|
||||
all: initial;
|
||||
box-sizing: border-box;
|
||||
text-shadow: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tap-highlight-color: initial;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
all: initial;
|
||||
box-sizing: border-box;
|
||||
text-shadow: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tap-highlight-color: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Reset size and position on elements. */
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas abbr,
|
||||
#drupal-off-canvas acronym,
|
||||
#drupal-off-canvas address,
|
||||
#drupal-off-canvas applet,
|
||||
#drupal-off-canvas article,
|
||||
#drupal-off-canvas aside,
|
||||
#drupal-off-canvas audio,
|
||||
#drupal-off-canvas b,
|
||||
#drupal-off-canvas big,
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas body,
|
||||
#drupal-off-canvas canvas,
|
||||
#drupal-off-canvas caption,
|
||||
#drupal-off-canvas cite,
|
||||
#drupal-off-canvas code,
|
||||
#drupal-off-canvas dd,
|
||||
#drupal-off-canvas del,
|
||||
#drupal-off-canvas dfn,
|
||||
#drupal-off-canvas dialog,
|
||||
#drupal-off-canvas dl,
|
||||
#drupal-off-canvas dt,
|
||||
#drupal-off-canvas em,
|
||||
#drupal-off-canvas embed,
|
||||
#drupal-off-canvas fieldset,
|
||||
#drupal-off-canvas figcaption,
|
||||
#drupal-off-canvas figure,
|
||||
#drupal-off-canvas footer,
|
||||
#drupal-off-canvas form,
|
||||
#drupal-off-canvas h1,
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas header,
|
||||
#drupal-off-canvas hgroup,
|
||||
#drupal-off-canvas hr,
|
||||
#drupal-off-canvas html,
|
||||
#drupal-off-canvas i,
|
||||
#drupal-off-canvas iframe,
|
||||
#drupal-off-canvas img,
|
||||
#drupal-off-canvas ins,
|
||||
#drupal-off-canvas kbd,
|
||||
#drupal-off-canvas label,
|
||||
#drupal-off-canvas legend,
|
||||
#drupal-off-canvas li,
|
||||
#drupal-off-canvas main,
|
||||
#drupal-off-canvas mark,
|
||||
#drupal-off-canvas menu,
|
||||
#drupal-off-canvas meter,
|
||||
#drupal-off-canvas nav,
|
||||
#drupal-off-canvas object,
|
||||
#drupal-off-canvas ol,
|
||||
#drupal-off-canvas output,
|
||||
#drupal-off-canvas p,
|
||||
#drupal-off-canvas pre,
|
||||
#drupal-off-canvas progress,
|
||||
#drupal-off-canvas q,
|
||||
#drupal-off-canvas rp,
|
||||
#drupal-off-canvas rt,
|
||||
#drupal-off-canvas s,
|
||||
#drupal-off-canvas samp,
|
||||
#drupal-off-canvas section,
|
||||
#drupal-off-canvas small,
|
||||
#drupal-off-canvas span,
|
||||
#drupal-off-canvas strike,
|
||||
#drupal-off-canvas strong,
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup,
|
||||
#drupal-off-canvas table,
|
||||
#drupal-off-canvas tbody,
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas tfoot,
|
||||
#drupal-off-canvas th,
|
||||
#drupal-off-canvas thead,
|
||||
#drupal-off-canvas time,
|
||||
#drupal-off-canvas tr,
|
||||
#drupal-off-canvas tt,
|
||||
#drupal-off-canvas u,
|
||||
#drupal-off-canvas ul,
|
||||
#drupal-off-canvas var,
|
||||
#drupal-off-canvas video,
|
||||
#drupal-off-canvas xmp {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Override the default (display: inline) for browsers that do not recognize HTML5 tags.
|
||||
* IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
|
||||
*/
|
||||
#drupal-off-canvas article,
|
||||
#drupal-off-canvas aside,
|
||||
#drupal-off-canvas figcaption,
|
||||
#drupal-off-canvas figure,
|
||||
#drupal-off-canvas footer,
|
||||
#drupal-off-canvas header,
|
||||
#drupal-off-canvas hgroup,
|
||||
#drupal-off-canvas main,
|
||||
#drupal-off-canvas menu,
|
||||
#drupal-off-canvas nav,
|
||||
#drupal-off-canvas section {
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* Makes browsers agree.
|
||||
* IE + Opera = font-weight: bold.
|
||||
* Gecko + WebKit = font-weight: bolder.
|
||||
*/
|
||||
#drupal-off-canvas b,
|
||||
#drupal-off-canvas strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas em,
|
||||
#drupal-off-canvas i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#drupal-off-canvas img {
|
||||
vertical-align: middle;
|
||||
color: transparent;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas ul,
|
||||
#drupal-off-canvas ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* reset table styling. */
|
||||
#drupal-off-canvas table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
#drupal-off-canvas table thead,
|
||||
#drupal-off-canvas table tbody,
|
||||
#drupal-off-canvas table tbody tr:nth-child(even),
|
||||
#drupal-off-canvas table tbody tr:nth-child(odd),
|
||||
#drupal-off-canvas table tfoot {
|
||||
border: 0;
|
||||
background: transparent none;
|
||||
}
|
||||
#drupal-off-canvas th,
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas caption {
|
||||
font-weight: normal;
|
||||
}
|
||||
#drupal-off-canvas q {
|
||||
quotes: none;
|
||||
}
|
||||
#drupal-off-canvas q:before,
|
||||
#drupal-off-canvas q:after {
|
||||
content: none;
|
||||
}
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup,
|
||||
#drupal-off-canvas small {
|
||||
font-size: 75%;
|
||||
}
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup {
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
line-height: 0;
|
||||
}
|
||||
#drupal-off-canvas sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
#drupal-off-canvas sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
* For IE9. Without, occasionally draws shapes
|
||||
* outside the boundaries of <svg> rectangle.
|
||||
*/
|
||||
#drupal-off-canvas svg {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Specific resets for inputs. */
|
||||
#drupal-off-canvas input[type="search"]::-webkit-search-decoration {
|
||||
display: none;
|
||||
}
|
||||
#drupal-off-canvas input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#drupal-off-canvas input[type="checkbox"],
|
||||
#drupal-off-canvas input[type="radio"] {
|
||||
position: static;
|
||||
margin: 0;
|
||||
}
|
||||
#drupal-off-canvas input:invalid,
|
||||
#drupal-off-canvas button:invalid,
|
||||
#drupal-off-canvas select:invalid,
|
||||
#drupal-off-canvas textarea:invalid,
|
||||
#drupal-off-canvas input:focus,
|
||||
#drupal-off-canvas button:focus,
|
||||
#drupal-off-canvas select:focus,
|
||||
#drupal-off-canvas textarea:focus,
|
||||
#drupal-off-canvas input[type="file"]:focus,
|
||||
#drupal-off-canvas input[type="file"]:active,
|
||||
#drupal-off-canvas input[type="radio"]:focus,
|
||||
#drupal-off-canvas input[type="radio"]:active,
|
||||
#drupal-off-canvas input[type="checkbox"]:focus,
|
||||
#drupal-off-canvas input[type="checkbox"]:active {
|
||||
z-index: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
#drupal-off-canvas input[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
#drupal-off-canvas button,
|
||||
#drupal-off-canvas input[type="reset"],
|
||||
#drupal-off-canvas input[type="submit"],
|
||||
#drupal-off-canvas input[type="button"] {
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
#drupal-off-canvas button:hover,
|
||||
#drupal-off-canvas input[type="reset"]:hover,
|
||||
#drupal-off-canvas input[type="submit"]:hover,
|
||||
#drupal-off-canvas input[type="button"]:hover {
|
||||
text-decoration: none;
|
||||
background-image: none;
|
||||
}
|
||||
#drupal-off-canvas button:active,
|
||||
#drupal-off-canvas input[type="reset"]:active,
|
||||
#drupal-off-canvas input[type="submit"]:active,
|
||||
#drupal-off-canvas input[type="button"]:active {
|
||||
border-color: gray;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
#drupal-off-canvas button::-moz-focus-inner,
|
||||
#drupal-off-canvas input[type="reset"]::-moz-focus-inner,
|
||||
#drupal-off-canvas input[type="submit"]::-moz-focus-inner,
|
||||
#drupal-off-canvas input[type="button"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
#drupal-off-canvas textarea,
|
||||
#drupal-off-canvas select,
|
||||
#drupal-off-canvas input[type="date"],
|
||||
#drupal-off-canvas input[type="datetime"],
|
||||
#drupal-off-canvas input[type="datetime-local"],
|
||||
#drupal-off-canvas input[type="email"],
|
||||
#drupal-off-canvas input[type="month"],
|
||||
#drupal-off-canvas input[type="number"],
|
||||
#drupal-off-canvas input[type="password"],
|
||||
#drupal-off-canvas input[type="search"],
|
||||
#drupal-off-canvas input[type="tel"],
|
||||
#drupal-off-canvas input[type="text"],
|
||||
#drupal-off-canvas input[type="time"],
|
||||
#drupal-off-canvas input[type="url"],
|
||||
#drupal-off-canvas input[type="week"] {
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
border-radius: 0;
|
||||
}
|
||||
#drupal-off-canvas textarea[disabled],
|
||||
#drupal-off-canvas select[disabled],
|
||||
#drupal-off-canvas input[type="date"][disabled],
|
||||
#drupal-off-canvas input[type="datetime"][disabled],
|
||||
#drupal-off-canvas input[type="datetime-local"][disabled],
|
||||
#drupal-off-canvas input[type="email"][disabled],
|
||||
#drupal-off-canvas input[type="month"][disabled],
|
||||
#drupal-off-canvas input[type="number"][disabled],
|
||||
#drupal-off-canvas input[type="password"][disabled],
|
||||
#drupal-off-canvas input[type="search"][disabled],
|
||||
#drupal-off-canvas input[type="tel"][disabled],
|
||||
#drupal-off-canvas input[type="text"][disabled],
|
||||
#drupal-off-canvas input[type="time"][disabled],
|
||||
#drupal-off-canvas input[type="url"][disabled],
|
||||
#drupal-off-canvas input[type="week"][disabled] {
|
||||
background-color: gray;
|
||||
}
|
||||
#drupal-off-canvas input[type="hidden"] {
|
||||
visibility: hidden;
|
||||
}
|
||||
#drupal-off-canvas button[disabled],
|
||||
#drupal-off-canvas input[disabled],
|
||||
#drupal-off-canvas select[disabled],
|
||||
#drupal-off-canvas select[disabled] option,
|
||||
#drupal-off-canvas select[disabled] optgroup,
|
||||
#drupal-off-canvas textarea[disabled] {
|
||||
cursor: default;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
#drupal-off-canvas input:placeholder,
|
||||
#drupal-off-canvas textarea:placeholder {
|
||||
color: gray;
|
||||
}
|
||||
#drupal-off-canvas textarea,
|
||||
#drupal-off-canvas select[size],
|
||||
#drupal-off-canvas select[multiple] {
|
||||
height: auto;
|
||||
}
|
||||
#drupal-off-canvas select[size="0"],
|
||||
#drupal-off-canvas select[size="1"] {
|
||||
height: auto;
|
||||
}
|
||||
#drupal-off-canvas textarea {
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
resize: vertical;
|
||||
}
|
||||
#drupal-off-canvas select[multiple] {
|
||||
overflow: auto;
|
||||
}
|
||||
#drupal-off-canvas optgroup {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
#drupal-off-canvas optgroup::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
#drupal-off-canvas * button {
|
||||
overflow: visible;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
border: 1px solid gray;
|
||||
background: none;
|
||||
}
|
||||
#drupal-off-canvas * textarea,
|
||||
#drupal-off-canvas * select,
|
||||
#drupal-off-canvas *:not(div) textarea,
|
||||
#drupal-off-canvas *:not(div) select {
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
color: black;
|
||||
border: 1px solid gray;
|
||||
background: white;
|
||||
}
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for tables in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas table * {
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
}
|
||||
#drupal-off-canvas table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
min-width: calc(100% + 40px);
|
||||
/* Cancel out the padding of the parent to make the table full width. */
|
||||
margin: 0 -20px -10px -20px;
|
||||
color: #ddd;
|
||||
border: 0;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
#drupal-off-canvas table thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
#drupal-off-canvas table tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
#drupal-off-canvas tr {
|
||||
display: table-row;
|
||||
}
|
||||
#drupal-off-canvas tr:hover td {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas th {
|
||||
display: table-cell;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 2px 8px;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #777;
|
||||
background-color: transparent;
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas th,
|
||||
[dir="rtl"] #drupal-off-canvas td {
|
||||
text-align: right;
|
||||
}
|
||||
#drupal-off-canvas th {
|
||||
font-weight: bold;
|
||||
}
|
||||
#drupal-off-canvas th.checkbox,
|
||||
#drupal-off-canvas td.checkbox {
|
||||
width: 20px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
#drupal-off-canvas div.checkbox.menu-enabled {
|
||||
position: static;
|
||||
display: inline;
|
||||
width: auto;
|
||||
}
|
||||
#drupal-off-canvas th:first-child,
|
||||
#drupal-off-canvas td:first-child {
|
||||
width: 150px;
|
||||
}
|
||||
/* For lack of a better class, using this to grab the operations th. */
|
||||
#drupal-off-canvas .tabledrag-has-colspan {
|
||||
padding-right: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
#drupal-off-canvas td {
|
||||
padding: 6px 8px;
|
||||
color: #ddd;
|
||||
}
|
||||
/* Hide overflow with ellipsis for links. */
|
||||
#drupal-off-canvas td a {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background: transparent;
|
||||
}
|
||||
#drupal-off-canvas tr td:first-child,
|
||||
#drupal-off-canvas tr th:first-child {
|
||||
padding-left: 20px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas tr td:first-child,
|
||||
[dir="rtl"] #drupal-off-canvas tr th:first-child {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Table drag behavior for off-canvas dialog.
|
||||
*
|
||||
* @see tabledrag.js
|
||||
*/
|
||||
|
||||
#drupal-off-canvas .drag {
|
||||
cursor: move;
|
||||
}
|
||||
#drupal-off-canvas tr.region-title {
|
||||
font-weight: normal;
|
||||
}
|
||||
#drupal-off-canvas table .region-message {
|
||||
color: #fff;
|
||||
}
|
||||
#drupal-off-canvas table .region-populated {
|
||||
display: none;
|
||||
}
|
||||
#drupal-off-canvas .add-new .tabledrag-changed {
|
||||
display: none;
|
||||
}
|
||||
#drupal-off-canvas .draggable a.tabledrag-handle {
|
||||
float: left; /* LTR */
|
||||
overflow: hidden;
|
||||
min-width: 20px;
|
||||
height: auto;
|
||||
margin: 0 5px 0 0;
|
||||
padding: 0;
|
||||
cursor: move;
|
||||
text-decoration: none;
|
||||
background-image: none;
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas .draggable a.tabledrag-handle {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
#drupal-off-canvas a.tabledrag-handle .handle {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
/* Use lighter drag icon against dark background. */
|
||||
background-image: url(../icons/bebebe/move.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
#drupal-off-canvas .draggable a.tabledrag-handle:hover .handle,
|
||||
#drupal-off-canvas .draggable a.tabledrag-handle:focus .handle {
|
||||
text-decoration: none;
|
||||
background-image: url(../icons/787878/move.svg);
|
||||
}
|
||||
#drupal-off-canvas tr td {
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
#drupal-off-canvas tr td abbr {
|
||||
margin-left: 5px; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas tr td abbr {
|
||||
margin-right: 5px;
|
||||
margin-left: 0;
|
||||
}
|
||||
#drupal-off-canvas tr:hover td {
|
||||
background: #222;
|
||||
}
|
||||
#drupal-off-canvas tr.drag td {
|
||||
background: #111;
|
||||
}
|
||||
#drupal-off-canvas tr.drag-previous td {
|
||||
background: #000;
|
||||
}
|
||||
#drupal-off-canvas tr.drag-previous:hover td {
|
||||
background: #222;
|
||||
}
|
||||
body div.tabledrag-changed-warning {
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 14px;
|
||||
}
|
||||
#drupal-off-canvas .touchevents .draggable td {
|
||||
padding: 0 10px;
|
||||
}
|
||||
#drupal-off-canvas .touchevents .draggable .menu-item__link {
|
||||
display: inline-block;
|
||||
padding: 10px 0;
|
||||
}
|
||||
#drupal-off-canvas .touchevents a.tabledrag-handle {
|
||||
width: 40px;
|
||||
height: 44px;
|
||||
}
|
||||
#drupal-off-canvas .touchevents a.tabledrag-handle .handle {
|
||||
height: 21px;
|
||||
background-position: 40% 19px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas .touch a.tabledrag-handle .handle {
|
||||
background-position: right 40% top 19px;
|
||||
}
|
||||
#drupal-off-canvas .touchevents .draggable.drag a.tabledrag-handle .handle {
|
||||
background-position: 50% -32px;
|
||||
}
|
||||
#drupal-off-canvas .tabledrag-toggle-weight-wrapper {
|
||||
padding-top: 10px;
|
||||
text-align: right; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas .tabledrag-toggle-weight-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
#drupal-off-canvas .indentation {
|
||||
float: left; /* LTR */
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0 3px 0 -10px; /* LTR */
|
||||
padding: 0 0 0 10px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas .indentation {
|
||||
float: right;
|
||||
margin: 0 -10px 0 3px;
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Styling for the off-canvas ui dialog. Including overrides for jQuery UI.
|
||||
*/
|
||||
|
||||
/* Style the dialog-off-canvas container. */
|
||||
.ui-dialog.ui-dialog-off-canvas {
|
||||
/* Layer the dialog just under the toolbar. */
|
||||
z-index: 501;
|
||||
padding: 0;
|
||||
color: #ddd;
|
||||
border-radius: 0;
|
||||
background: #444;
|
||||
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
|
||||
}
|
||||
.ui-widget.ui-dialog.ui-dialog-off-canvas {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* Style the off-canvas dialog header. */
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
|
||||
padding: 1em;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #000;
|
||||
border-radius: 0;
|
||||
background: #2d2d2d;
|
||||
font-weight: normal;
|
||||
}
|
||||
/* Hide the default jQuery UI dialog close button. */
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close .ui-icon {
|
||||
visibility: hidden;
|
||||
}
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
|
||||
position: absolute;
|
||||
top: calc(50% - 6px);
|
||||
right: 1em;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: all 0.5s ease;
|
||||
border: 3px solid transparent;
|
||||
background-color: transparent;
|
||||
background-image: url(../icons/bebebe/ex.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover,
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:focus {
|
||||
border: 3px solid #fff;
|
||||
background-image: url(../icons/ffffff/ex.svg);
|
||||
}
|
||||
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
|
||||
right: auto;
|
||||
left: 1em;
|
||||
}
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
|
||||
/* Ensure that long titles do not overlap the close button. */
|
||||
max-width: 210px;
|
||||
margin: 0;
|
||||
padding-right: 0; /* LTR */
|
||||
/* Push the text away from the icon. */
|
||||
padding-left: 30px; /* LTR */
|
||||
text-align: left; /* LTR */
|
||||
/* Ensure that long titles are not truncated. */
|
||||
white-space: normal;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
|
||||
float: right;
|
||||
padding-right: 30px;
|
||||
padding-left: 0;
|
||||
text-align: right;
|
||||
}
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 1em; /* LTR */
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background: transparent url(../icons/ffffff/pencil.svg) no-repeat scroll center center;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
|
||||
right: 1em;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
/* Override default styling from jQuery UI. */
|
||||
#drupal-off-canvas .ui-state-default,
|
||||
#drupal-off-canvas .ui-widget-content .ui-state-default,
|
||||
#drupal-off-canvas .ui-widget-header .ui-state-default {
|
||||
color: #333;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
#drupal-off-canvas .ui-widget-content a {
|
||||
color: #85bef4;
|
||||
}
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Set base styles for the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-background-color-light: #666;
|
||||
--off-canvas-background-color-medium: #444;
|
||||
--off-canvas-background-color-dark: #333;
|
||||
--off-canvas-background-color: var(--off-canvas-background-color-medium);
|
||||
--off-canvas-padding: 1.25rem;
|
||||
--off-canvas-text-color: #e5e5e5;
|
||||
--off-canvas-link-color: #85bef4;
|
||||
--off-canvas-border-color: #666;
|
||||
--off-canvas-font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
--off-canvas-vertical-spacing-unit: 0.5rem;
|
||||
--off-canvas-focus-outline-width: 2px;
|
||||
--off-canvas-focus-outline-color: #fff;
|
||||
|
||||
padding: 0 var(--off-canvas-padding) var(--off-canvas-padding);
|
||||
color: var(--off-canvas-text-color);
|
||||
background-color: var(--off-canvas-background-color);
|
||||
font-family: var(--off-canvas-font-family)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper *:focus {
|
||||
outline: solid var(--off-canvas-focus-outline-width) var(--off-canvas-focus-outline-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper a,
|
||||
#drupal-off-canvas-wrapper .link {
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-link-color);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper hr {
|
||||
height: 1px;
|
||||
background: var(--off-canvas-border-color);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper h1,
|
||||
#drupal-off-canvas-wrapper .heading-a {
|
||||
font-size: 1.4375rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper h2,
|
||||
#drupal-off-canvas-wrapper .heading-b {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 1.1875rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper h3,
|
||||
#drupal-off-canvas-wrapper .heading-c {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper h4,
|
||||
#drupal-off-canvas-wrapper .heading-d {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper h5,
|
||||
#drupal-off-canvas-wrapper .heading-e,
|
||||
#drupal-off-canvas-wrapper h6,
|
||||
#drupal-off-canvas-wrapper .heading-f {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper p {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .links {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .links li {
|
||||
margin: calc(var(--off-canvas-vertical-spacing-unit) /2) 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
/**
|
||||
* @file
|
||||
* Set base styles for the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-background-color-light: #666;
|
||||
--off-canvas-background-color-medium: #444;
|
||||
--off-canvas-background-color-dark: #333;
|
||||
--off-canvas-background-color: var(--off-canvas-background-color-medium);
|
||||
--off-canvas-padding: 20px;
|
||||
--off-canvas-text-color: #e5e5e5;
|
||||
--off-canvas-link-color: #85bef4;
|
||||
--off-canvas-border-color: #666;
|
||||
--off-canvas-font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
--off-canvas-vertical-spacing-unit: 8px;
|
||||
--off-canvas-focus-outline-width: 2px;
|
||||
--off-canvas-focus-outline-color: #fff;
|
||||
|
||||
padding: 0 var(--off-canvas-padding) var(--off-canvas-padding);
|
||||
color: var(--off-canvas-text-color);
|
||||
background-color: var(--off-canvas-background-color);
|
||||
font-family: var(--off-canvas-font-family);
|
||||
|
||||
& *:focus {
|
||||
outline: solid var(--off-canvas-focus-outline-width) var(--off-canvas-focus-outline-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
& a,
|
||||
& .link {
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-link-color);
|
||||
}
|
||||
|
||||
& hr {
|
||||
height: 1px;
|
||||
background: var(--off-canvas-border-color);
|
||||
}
|
||||
|
||||
& h1,
|
||||
& .heading-a {
|
||||
font-size: 23px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
& h2,
|
||||
& .heading-b {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
& h3,
|
||||
& .heading-c {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
& h4,
|
||||
& .heading-d {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
& h5,
|
||||
& .heading-e,
|
||||
& h6,
|
||||
& .heading-f {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
}
|
||||
|
||||
& img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
& .links {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
& li {
|
||||
margin: calc(var(--off-canvas-vertical-spacing-unit) /2) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/**
|
||||
* @file
|
||||
* Visual styling for buttons in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-button-background-color: #777;
|
||||
--off-canvas-button-background-color-hover: #999;
|
||||
--off-canvas-button-text-color: #f5f5f5;
|
||||
--off-canvas-button-text-color-hover: #fff;
|
||||
--off-canvas-button-font-size: 0.875rem;
|
||||
--off-canvas-button-padding: calc(var(--off-canvas-vertical-spacing-unit) / 2) 1.25rem;
|
||||
--off-canvas-button-border-color: transparent;
|
||||
--off-canvas-button-border-radius: 20em;
|
||||
--off-canvas-button-font-weight: 600;
|
||||
--off-canvas-primary-button-background-color: #277abd;
|
||||
--off-canvas-primary-button-background-color-hover: #236aaf;
|
||||
--off-canvas-primary-button-text-color: #fff;
|
||||
--off-canvas-primary-button-text-color-hover: #fff
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 0 0.625rem;
|
||||
padding: var(--off-canvas-button-padding);
|
||||
cursor: pointer;
|
||||
transition: background 0.5s ease;
|
||||
text-align: center;
|
||||
color: var(--off-canvas-button-text-color);
|
||||
border: solid 1px var(--off-canvas-button-border-color);
|
||||
border-radius: var(--off-canvas-button-border-radius);
|
||||
background: var(--off-canvas-button-background-color);
|
||||
font-family: inherit;
|
||||
font-size: var(--off-canvas-button-font-size);
|
||||
font-weight: var(--off-canvas-button-font-weight);
|
||||
line-height: normal;
|
||||
-webkit-appearance: none;
|
||||
appearance: none
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button:hover,
|
||||
#drupal-off-canvas-wrapper .button:active {
|
||||
z-index: 10;
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-button-text-color-hover);
|
||||
background-color: var(--off-canvas-button-background-color-hover);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button:disabled,
|
||||
#drupal-off-canvas-wrapper .button:disabled:active,
|
||||
#drupal-off-canvas-wrapper .button.is-disabled,
|
||||
#drupal-off-canvas-wrapper .button.is-disabled:active {
|
||||
cursor: default;
|
||||
color: #5c5c5c;
|
||||
background: #555;
|
||||
font-weight: normal;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button--primary {
|
||||
margin-top: 0.9375rem;
|
||||
color: var(--off-canvas-primary-button-text-color);
|
||||
background: var(--off-canvas-primary-button-background-color)
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button--primary:hover,
|
||||
#drupal-off-canvas-wrapper .button--primary:active {
|
||||
color: var(--off-canvas-primary-button-text-color-hover);
|
||||
background: var(--off-canvas-primary-button-background-color-hover);
|
||||
}
|
||||
#drupal-off-canvas-wrapper button.link {
|
||||
display: inline;
|
||||
transition: color 0.5s ease;
|
||||
color: var(--off-canvas-link-color);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: var(--off-canvas-button-font-size)
|
||||
}
|
||||
#drupal-off-canvas-wrapper button.link:hover,
|
||||
#drupal-off-canvas-wrapper button.link:focus {
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-link-color);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button--danger {
|
||||
text-decoration: none;
|
||||
color: #c72100;
|
||||
border-radius: 0;
|
||||
font-weight: 400
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button--danger:hover,
|
||||
#drupal-off-canvas-wrapper .button--danger:focus,
|
||||
#drupal-off-canvas-wrapper .button--danger:active {
|
||||
text-decoration: none;
|
||||
color: #ff2a00;
|
||||
text-shadow: none;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button--danger:disabled,
|
||||
#drupal-off-canvas-wrapper .button--danger.is-disabled {
|
||||
cursor: default;
|
||||
color: #737373;
|
||||
}
|
||||
.no-touchevents #drupal-off-canvas-wrapper .button--small {
|
||||
padding: 2px 1em;
|
||||
font-size: 0.8125rem
|
||||
}
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for buttons in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-button-background-color: #777;
|
||||
--off-canvas-button-background-color-hover: #999;
|
||||
--off-canvas-button-text-color: #f5f5f5;
|
||||
--off-canvas-button-text-color-hover: #fff;
|
||||
--off-canvas-button-font-size: 14px;
|
||||
--off-canvas-button-padding: calc(var(--off-canvas-vertical-spacing-unit) / 2) 20px;
|
||||
--off-canvas-button-border-color: transparent;
|
||||
--off-canvas-button-border-radius: 20em;
|
||||
--off-canvas-button-font-weight: 600;
|
||||
--off-canvas-primary-button-background-color: #277abd;
|
||||
--off-canvas-primary-button-background-color-hover: #236aaf;
|
||||
--off-canvas-primary-button-text-color: #fff;
|
||||
--off-canvas-primary-button-text-color-hover: #fff;
|
||||
|
||||
& .button {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 0 10px;
|
||||
padding: var(--off-canvas-button-padding);
|
||||
cursor: pointer;
|
||||
transition: background 0.5s ease;
|
||||
text-align: center;
|
||||
color: var(--off-canvas-button-text-color);
|
||||
border: solid 1px var(--off-canvas-button-border-color);
|
||||
border-radius: var(--off-canvas-button-border-radius);
|
||||
background: var(--off-canvas-button-background-color);
|
||||
font-family: inherit;
|
||||
font-size: var(--off-canvas-button-font-size);
|
||||
font-weight: var(--off-canvas-button-font-weight);
|
||||
line-height: normal;
|
||||
appearance: none;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
z-index: 10;
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-button-text-color-hover);
|
||||
background-color: var(--off-canvas-button-background-color-hover);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&:disabled:active,
|
||||
&.is-disabled,
|
||||
&.is-disabled:active {
|
||||
cursor: default;
|
||||
color: #5c5c5c;
|
||||
background: #555;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
& .button--primary {
|
||||
margin-top: 15px;
|
||||
color: var(--off-canvas-primary-button-text-color);
|
||||
background: var(--off-canvas-primary-button-background-color);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: var(--off-canvas-primary-button-text-color-hover);
|
||||
background: var(--off-canvas-primary-button-background-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
& button.link {
|
||||
display: inline;
|
||||
transition: color 0.5s ease;
|
||||
color: var(--off-canvas-link-color);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: var(--off-canvas-button-font-size);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-link-color);
|
||||
}
|
||||
}
|
||||
|
||||
& .button--danger {
|
||||
text-decoration: none;
|
||||
color: #c72100;
|
||||
border-radius: 0;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
color: #ff2a00;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
cursor: default;
|
||||
color: #737373;
|
||||
}
|
||||
}
|
||||
|
||||
@nest .no-touchevents & .button--small {
|
||||
padding: 2px 1em;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Visual styling for summary and details in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-details-border-width: 0;
|
||||
--off-canvas-details-border-color: none;
|
||||
--off-canvas-details-background-color: #474747;
|
||||
--off-canvas-details-text-color: #ddd;
|
||||
--off-canvas-details-summary-border: none;
|
||||
--off-canvas-details-summary-padding: 0.625rem 1.25rem;
|
||||
--off-canvas-details-summary-font-size: 0.875rem;
|
||||
--off-canvas-details-summary-background-color: #333;
|
||||
--off-canvas-details-summary-background-color-hover: #222;
|
||||
--off-canvas-details-summary-text-color: #eee;
|
||||
--off-canvas-details-summary-text-color-hover: #fff
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper details {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) calc(-1 * var(--off-canvas-padding)); /* Cancel out the padding of the parent. */
|
||||
padding: 0 var(--off-canvas-padding);
|
||||
color: var(--off-canvas-details-text-color);
|
||||
border: solid var(--off-canvas-details-border-color) var(--off-canvas-details-border-width);
|
||||
background: var(--off-canvas-details-background-color)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper details + details {
|
||||
margin-top: calc(-1 * var(--off-canvas-details-border-width));
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper summary {
|
||||
margin: 0 calc(-1 * var(--off-canvas-padding));
|
||||
padding: var(--off-canvas-details-summary-padding);
|
||||
color: var(--off-canvas-details-summary-text-color);
|
||||
border: var(--off-canvas-details-summary-border);
|
||||
background-color: var(--off-canvas-details-summary-background-color);
|
||||
font-size: var(--off-canvas-details-summary-font-size)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper summary:hover {
|
||||
color: var(--off-canvas-details-summary-text-color-hover);
|
||||
background-color: var(--off-canvas-details-summary-background-color-hover);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper summary:focus {
|
||||
outline-offset: -4px; /* Ensure focus doesn't get cut off. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper summary {
|
||||
|
||||
a {
|
||||
color: var(--off-canvas-details-text-color)
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--off-canvas-details-summary-text-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .details-wrapper {
|
||||
padding: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for summary and details in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-details-border-width: 0;
|
||||
--off-canvas-details-border-color: none;
|
||||
--off-canvas-details-background-color: #474747;
|
||||
--off-canvas-details-text-color: #ddd;
|
||||
--off-canvas-details-summary-border: none;
|
||||
--off-canvas-details-summary-padding: 10px 20px;
|
||||
--off-canvas-details-summary-font-size: 14px;
|
||||
--off-canvas-details-summary-background-color: #333;
|
||||
--off-canvas-details-summary-background-color-hover: #222;
|
||||
--off-canvas-details-summary-text-color: #eee;
|
||||
--off-canvas-details-summary-text-color-hover: #fff;
|
||||
|
||||
& details {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) calc(-1 * var(--off-canvas-padding)); /* Cancel out the padding of the parent. */
|
||||
padding: 0 var(--off-canvas-padding);
|
||||
color: var(--off-canvas-details-text-color);
|
||||
border: solid var(--off-canvas-details-border-color) var(--off-canvas-details-border-width);
|
||||
background: var(--off-canvas-details-background-color);
|
||||
|
||||
& + details {
|
||||
margin-top: calc(-1 * var(--off-canvas-details-border-width));
|
||||
}
|
||||
}
|
||||
|
||||
& summary {
|
||||
margin: 0 calc(-1 * var(--off-canvas-padding));
|
||||
padding: var(--off-canvas-details-summary-padding);
|
||||
color: var(--off-canvas-details-summary-text-color);
|
||||
border: var(--off-canvas-details-summary-border);
|
||||
background-color: var(--off-canvas-details-summary-background-color);
|
||||
font-size: var(--off-canvas-details-summary-font-size);
|
||||
|
||||
&:hover {
|
||||
color: var(--off-canvas-details-summary-text-color-hover);
|
||||
background-color: var(--off-canvas-details-summary-background-color-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-offset: -4px; /* Ensure focus doesn't get cut off. */
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--off-canvas-details-text-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--off-canvas-details-summary-text-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .details-wrapper {
|
||||
padding: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/**
|
||||
* @file
|
||||
* Styles for dropbuttons in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-dropbutton-height: 1.5rem;
|
||||
--off-canvas-dropbutton-primary-background-color: var(--off-canvas-button-background-color);
|
||||
--off-canvas-dropbutton-secondary-background-color: var(--off-canvas-button-hover-background-color);
|
||||
--off-canvas-dropbutton-border-color: transparent;
|
||||
--off-canvas-dropbutton-border-width: 1px;
|
||||
--off-canvas-dropbutton-border-radius: 2px;
|
||||
--off-canvas-dropbutton-focus-outline-color: var(--off-canvas-focus-outline-color);
|
||||
--off-canvas-dropbutton-font-size: 0.75rem;
|
||||
--off-canvas-dropbutton-text-color: var(--off-canvas-button-text-color); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */
|
||||
--off-canvas-dropbutton-text-color-hover: var(--off-canvas-button-text-color-hover) /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper {
|
||||
margin-top: var(--off-canvas-vertical-spacing-unit);
|
||||
margin-bottom: var(--off-canvas-vertical-spacing-unit)
|
||||
|
||||
/*
|
||||
* Styles for when the dropbutton is expanded.
|
||||
*/
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper.open {
|
||||
position: relative;
|
||||
z-index: 100
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper.open .secondary-action {
|
||||
visibility: visible;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper.open .dropbutton-widget {
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius) var(--off-canvas-dropbutton-border-radius) 0 0;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper.open .dropbutton-toggle button:before {
|
||||
transform: translateY(25%) rotate(225deg);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper {
|
||||
|
||||
/*
|
||||
* Styles for single link variant of dropbutton.
|
||||
*/
|
||||
}
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-widget {
|
||||
padding-right: 0
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-widget {
|
||||
padding-left: 0
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action:first-child {
|
||||
border-right: solid 1px var(--off-canvas-dropbutton-border-color); /* LTR */
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius)
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action:first-child {
|
||||
border: solid 1px var(--off-canvas-dropbutton-border-color);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action a {
|
||||
justify-content: center;
|
||||
}
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-widget {
|
||||
padding-right: var(--off-canvas-dropbutton-height)
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-widget {
|
||||
padding-left: var(--off-canvas-dropbutton-height)
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-widget {
|
||||
position: relative;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
height: var(--off-canvas-dropbutton-height);
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius);
|
||||
}
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton {
|
||||
margin-left: 0
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton {
|
||||
margin-right: 0
|
||||
}
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton {
|
||||
padding-left: 0
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton {
|
||||
padding-right: 0
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton {
|
||||
height: var(--off-canvas-dropbutton-height);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
font-size: var(--off-canvas-dropbutton-font-size);
|
||||
}
|
||||
#drupal-off-canvas-wrapper {
|
||||
|
||||
/* This is the button that expands/collapses the secondary options. */
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-toggle {
|
||||
padding: 0;
|
||||
border: 0
|
||||
}
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-toggle button {
|
||||
right: 0
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-toggle button {
|
||||
left: 0
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-toggle button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--off-canvas-dropbutton-height);
|
||||
height: var(--off-canvas-dropbutton-height);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-color: var(--off-canvas-dropbutton-border-color);
|
||||
border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
|
||||
background: var(--off-canvas-dropbutton-primary-background-color)
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-toggle button:focus {
|
||||
outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-toggle button:before {
|
||||
display: block;
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
content: "";
|
||||
transform: translateY(-25%) rotate(45deg);
|
||||
border-right: solid 2px var(--off-canvas-dropbutton-text-color);
|
||||
border-bottom: solid 2px var(--off-canvas-dropbutton-text-color);
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-toggle button {
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius);
|
||||
}
|
||||
#drupal-off-canvas-wrapper {
|
||||
|
||||
/* This is the first <li> element in the list of actions. */
|
||||
}
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {
|
||||
margin-right: 2px
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {
|
||||
margin-left: 2px
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-action:first-child {
|
||||
border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius); /* LTR */
|
||||
background: var(--off-canvas-dropbutton-primary-background-color)
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {
|
||||
border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
|
||||
border-radius: 0 var(--off-canvas-dropbutton-border-radius) var(--off-canvas-dropbutton-border-radius) 0;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-action a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: var(--off-canvas-dropbutton-height);
|
||||
margin-bottom: -2px;
|
||||
padding: 0 0.5625rem;
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-dropbutton-text-color);
|
||||
font-weight: 600
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-action a:hover {
|
||||
color: var(--off-canvas-dropbutton-text-color);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-action a:focus {
|
||||
outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
|
||||
outline-offset: -1px; /* Overlap parent container by 1px. */
|
||||
}
|
||||
#drupal-off-canvas-wrapper {
|
||||
|
||||
/* These are the <li> elements other than the first. */
|
||||
}
|
||||
#drupal-off-canvas-wrapper .secondary-action {
|
||||
visibility: hidden;
|
||||
width: calc(100% + var(--off-canvas-dropbutton-height));
|
||||
margin-top: var(--off-canvas-dropbutton-border-width);
|
||||
border-right: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
|
||||
border-left: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
|
||||
background-color: var(--off-canvas-dropbutton-primary-background-color)
|
||||
}
|
||||
#drupal-off-canvas-wrapper .secondary-action:last-child {
|
||||
border-bottom: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .secondary-action a:hover {
|
||||
color: var(--off-canvas-dropbutton-text-color-hover);
|
||||
background-color: var(--off-canvas-dropbutton-secondary-background-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
/**
|
||||
* @file
|
||||
* Styles for dropbuttons in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-dropbutton-height: 24px;
|
||||
--off-canvas-dropbutton-primary-background-color: var(--off-canvas-button-background-color);
|
||||
--off-canvas-dropbutton-secondary-background-color: var(--off-canvas-button-hover-background-color);
|
||||
--off-canvas-dropbutton-border-color: transparent;
|
||||
--off-canvas-dropbutton-border-width: 1px;
|
||||
--off-canvas-dropbutton-border-radius: 2px;
|
||||
--off-canvas-dropbutton-focus-outline-color: var(--off-canvas-focus-outline-color);
|
||||
--off-canvas-dropbutton-font-size: 12px;
|
||||
--off-canvas-dropbutton-text-color: var(--off-canvas-button-text-color); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */
|
||||
--off-canvas-dropbutton-text-color-hover: var(--off-canvas-button-text-color-hover); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */
|
||||
|
||||
& .dropbutton-wrapper {
|
||||
margin-block: var(--off-canvas-vertical-spacing-unit);
|
||||
|
||||
/*
|
||||
* Styles for when the dropbutton is expanded.
|
||||
*/
|
||||
&.open {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
|
||||
& .secondary-action {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
& .dropbutton-widget {
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius) var(--off-canvas-dropbutton-border-radius) 0 0;
|
||||
}
|
||||
|
||||
& .dropbutton-toggle button:before {
|
||||
transform: translateY(25%) rotate(225deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Styles for single link variant of dropbutton.
|
||||
*/
|
||||
&.dropbutton-single {
|
||||
& .dropbutton-widget {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
& .dropbutton-action {
|
||||
&:first-child {
|
||||
border-right: solid 1px var(--off-canvas-dropbutton-border-color); /* LTR */
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius);
|
||||
|
||||
&:dir(rtl) {
|
||||
border: solid 1px var(--off-canvas-dropbutton-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
& a {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .dropbutton-widget {
|
||||
position: relative;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
height: var(--off-canvas-dropbutton-height);
|
||||
padding-inline-end: var(--off-canvas-dropbutton-height);
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius);
|
||||
}
|
||||
|
||||
& .dropbutton {
|
||||
height: var(--off-canvas-dropbutton-height);
|
||||
margin-block: 0;
|
||||
margin-inline-start: 0;
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
font-size: var(--off-canvas-dropbutton-font-size);
|
||||
}
|
||||
|
||||
/* This is the button that expands/collapses the secondary options. */
|
||||
& .dropbutton-toggle {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
& button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--off-canvas-dropbutton-height);
|
||||
height: var(--off-canvas-dropbutton-height);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-color: var(--off-canvas-dropbutton-border-color);
|
||||
border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
|
||||
background: var(--off-canvas-dropbutton-primary-background-color);
|
||||
inset-inline-end: 0;
|
||||
|
||||
&:focus {
|
||||
outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
content: "";
|
||||
transform: translateY(-25%) rotate(45deg);
|
||||
border-right: solid 2px var(--off-canvas-dropbutton-text-color);
|
||||
border-bottom: solid 2px var(--off-canvas-dropbutton-text-color);
|
||||
}
|
||||
|
||||
&:dir(rtl) {
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* This is the first <li> element in the list of actions. */
|
||||
& .dropbutton-action {
|
||||
&:first-child {
|
||||
margin-inline-end: 2px;
|
||||
border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius); /* LTR */
|
||||
background: var(--off-canvas-dropbutton-primary-background-color);
|
||||
|
||||
&:dir(rtl) {
|
||||
border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
|
||||
border-radius: 0 var(--off-canvas-dropbutton-border-radius) var(--off-canvas-dropbutton-border-radius) 0;
|
||||
}
|
||||
}
|
||||
|
||||
& a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: var(--off-canvas-dropbutton-height);
|
||||
margin-bottom: -2px;
|
||||
padding: 0 9px;
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-dropbutton-text-color);
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
color: var(--off-canvas-dropbutton-text-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
|
||||
outline-offset: -1px; /* Overlap parent container by 1px. */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* These are the <li> elements other than the first. */
|
||||
& .secondary-action {
|
||||
visibility: hidden;
|
||||
width: calc(100% + var(--off-canvas-dropbutton-height));
|
||||
margin-top: var(--off-canvas-dropbutton-border-width);
|
||||
border-right: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
|
||||
border-left: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
|
||||
background-color: var(--off-canvas-dropbutton-primary-background-color);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
|
||||
}
|
||||
|
||||
& a:hover {
|
||||
color: var(--off-canvas-dropbutton-text-color-hover);
|
||||
background-color: var(--off-canvas-dropbutton-secondary-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Recreate Drupal admin styling that was removed with reset.
|
||||
* @see system.admin.css
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper .panel {
|
||||
padding: 0.3125rem 0.3125rem 0.9375rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .panel__description {
|
||||
margin: 0 0 0.1875rem;
|
||||
padding: 2px 0 0.1875rem 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .compact-link {
|
||||
margin: 0 0 0.625rem 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper small .admin-link:before {
|
||||
content: " [";
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper small .admin-link:after {
|
||||
content: "]";
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
/**
|
||||
* @file
|
||||
* Recreate Drupal admin styling that was removed with reset.
|
||||
* @see system.admin.css
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
& .panel {
|
||||
padding: 5px 5px 15px;
|
||||
}
|
||||
|
||||
& .panel__description {
|
||||
margin: 0 0 3px;
|
||||
padding: 2px 0 3px 0;
|
||||
}
|
||||
|
||||
& .compact-link {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
& small .admin-link:before {
|
||||
content: " [";
|
||||
}
|
||||
|
||||
& small .admin-link:after {
|
||||
content: "]";
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Visual styling for forms in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--drupal-off-canvas-input-padding: var(--off-canvas-vertical-spacing-unit);
|
||||
--drupal-off-canvas-input-background-color: #fff;
|
||||
--drupal-off-canvas-input-border: solid 1px transparent;
|
||||
--drupal-off-canvas-input-border-radius: 2px;
|
||||
--drupal-off-canvas-input-font-size: 0.875rem;
|
||||
--drupal-off-canvas-input-text-color: #333;
|
||||
--drupal-off-canvas-fieldset-background-color: transparent;
|
||||
--drupal-off-canvas-fieldset-border-width: 1px;
|
||||
--drupal-off-canvas-fieldset-border-color: var(--off-canvas-border-color)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper form {
|
||||
padding-top: var(--off-canvas-padding);
|
||||
padding-bottom: var(--off-canvas-padding)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper form > *:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ck-content {
|
||||
color: var(--drupal-off-canvas-input-text-color);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .form-item:where(:not(fieldset)) {
|
||||
padding: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .form-items-inline > * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .form-type-boolean {
|
||||
padding: calc(0.5 * var(--off-canvas-vertical-spacing-unit)) 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .description,
|
||||
#drupal-off-canvas-wrapper .form-item__description {
|
||||
margin: calc(0.5 * var(--off-canvas-vertical-spacing-unit)) 0;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .form-required:after {
|
||||
content: "*";
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .fieldset,
|
||||
#drupal-off-canvas-wrapper fieldset {
|
||||
margin: calc(2 * var(--off-canvas-vertical-spacing-unit)) 0;
|
||||
padding: var(--off-canvas-vertical-spacing-unit);
|
||||
border: solid var(--drupal-off-canvas-fieldset-border-width) var(--drupal-off-canvas-fieldset-border-color);
|
||||
background-color: var(--drupal-off-canvas-fieldset-background-color);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper legend,
|
||||
#drupal-off-canvas-wrapper .fieldset__legend {
|
||||
display: contents;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
|
||||
/* Bartik uses the .field-multiple-table CSS class on its tabledrag tables. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper :is(.fieldset, fieldset, .draggable-table, .field-multiple-table) input:where(:not([type="submit"], [type="checkbox"], [type="radio"])) {
|
||||
width: 100%; /* Prevent text fields from breaking out of tables and fieldsets at narrow widths. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper input,
|
||||
#drupal-off-canvas-wrapper textarea {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper input:where(:not([type="submit"], [type="checkbox"], [type="radio"], [type="file"])), #drupal-off-canvas-wrapper select, #drupal-off-canvas-wrapper textarea {
|
||||
max-width: 100%;
|
||||
padding: var(--drupal-off-canvas-input-padding);
|
||||
color: var(--drupal-off-canvas-input-text-color);
|
||||
border: var(--drupal-off-canvas-input-border);
|
||||
border-radius: var(--drupal-off-canvas-input-border-radius);
|
||||
background-color: var(--drupal-off-canvas-input-background-color);
|
||||
font-size: var(--drupal-off-canvas-input-font-size);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper input[type="checkbox"] + label, #drupal-off-canvas-wrapper input[type="radio"] + label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper input[type="file"] {
|
||||
margin-bottom: var(--off-canvas-vertical-spacing-unit);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper input[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none; /* Necessary for Safari. */
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper select {
|
||||
padding-right: 1.25rem
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper select {
|
||||
padding-left: 1.25rem
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper select {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: var(--drupal-off-canvas-input-border);
|
||||
border-radius: var(--drupal-off-canvas-input-border-radius);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right 5px; /* LTR */
|
||||
background-size: 0.75rem
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper select {
|
||||
background-position: center left 5px;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper select {
|
||||
padding-right: 0
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper select {
|
||||
padding-left: 0
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper select {
|
||||
-webkit-appearance: revert;
|
||||
appearance: revert;
|
||||
background: revert
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
|
||||
/*
|
||||
* Autocomplete.
|
||||
*/
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .form-autocomplete {
|
||||
padding-right: 2.5rem
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .form-autocomplete {
|
||||
padding-left: 2.5rem
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .form-autocomplete { /* Room for icon. */
|
||||
background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right 1px /* LTR */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .form-autocomplete.ui-autocomplete-loading {
|
||||
background-image: url(../../../icons/spinner.gif);
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .form-autocomplete {
|
||||
background-position: center left 1px;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
|
||||
/* This is the background <ul> for the autocomplete dropdown. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-autocomplete {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border: var(--drupal-off-canvas-input-border);
|
||||
background-color: var(--drupal-off-canvas-input-background-color);
|
||||
box-shadow: 0 1px 1px 0 var(--off-canvas-background-color) /* Ensure edge is visible if appearing over another form element. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-autocomplete a {
|
||||
display: block;
|
||||
padding: var(--drupal-off-canvas-input-padding);
|
||||
cursor: pointer;
|
||||
color: var(--drupal-off-canvas-input-text-color);
|
||||
font-size: var(--drupal-off-canvas-input-font-size)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-autocomplete a:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-autocomplete a:focus,
|
||||
#drupal-off-canvas-wrapper .ui-autocomplete a.ui-state-active {
|
||||
outline: solid 2px currentColor;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
|
||||
/*
|
||||
* Claro injects a "Loading" autocomplete message that affects the positioning
|
||||
* of the ui-autocomplete dropdown. We remove this to normalize the markup.
|
||||
*/
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .claro-autocomplete__message {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for forms in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--drupal-off-canvas-input-padding: var(--off-canvas-vertical-spacing-unit);
|
||||
--drupal-off-canvas-input-background-color: #fff;
|
||||
--drupal-off-canvas-input-border: solid 1px transparent;
|
||||
--drupal-off-canvas-input-border-radius: 2px;
|
||||
--drupal-off-canvas-input-font-size: 14px;
|
||||
--drupal-off-canvas-input-text-color: #333;
|
||||
--drupal-off-canvas-fieldset-background-color: transparent;
|
||||
--drupal-off-canvas-fieldset-border-width: 1px;
|
||||
--drupal-off-canvas-fieldset-border-color: var(--off-canvas-border-color);
|
||||
|
||||
& form {
|
||||
padding-block: var(--off-canvas-padding);
|
||||
|
||||
& > *:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& .ck-content {
|
||||
color: var(--drupal-off-canvas-input-text-color);
|
||||
}
|
||||
|
||||
& .form-item:where(:not(fieldset)) {
|
||||
padding: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
}
|
||||
|
||||
& .form-items-inline > * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
& label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& .form-type-boolean {
|
||||
padding: calc(0.5 * var(--off-canvas-vertical-spacing-unit)) 0;
|
||||
}
|
||||
|
||||
& .description,
|
||||
& .form-item__description {
|
||||
margin: calc(0.5 * var(--off-canvas-vertical-spacing-unit)) 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
& .form-required:after {
|
||||
content: "*";
|
||||
}
|
||||
|
||||
& .fieldset,
|
||||
& fieldset {
|
||||
margin: calc(2 * var(--off-canvas-vertical-spacing-unit)) 0;
|
||||
padding: var(--off-canvas-vertical-spacing-unit);
|
||||
border: solid var(--drupal-off-canvas-fieldset-border-width) var(--drupal-off-canvas-fieldset-border-color);
|
||||
background-color: var(--drupal-off-canvas-fieldset-background-color);
|
||||
}
|
||||
|
||||
& legend, /* Bartik doesn't apply BEM classes, so we use the element. */
|
||||
& .fieldset__legend {
|
||||
display: contents;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Bartik uses the .field-multiple-table CSS class on its tabledrag tables. */
|
||||
& :is(.fieldset, fieldset, .draggable-table, .field-multiple-table) input:where(:not([type="submit"], [type="checkbox"], [type="radio"])) {
|
||||
width: 100%; /* Prevent text fields from breaking out of tables and fieldsets at narrow widths. */
|
||||
}
|
||||
|
||||
& input,
|
||||
& textarea {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
& input:where(:not([type="submit"], [type="checkbox"], [type="radio"], [type="file"])),
|
||||
& select,
|
||||
& textarea {
|
||||
max-width: 100%;
|
||||
padding: var(--drupal-off-canvas-input-padding);
|
||||
color: var(--drupal-off-canvas-input-text-color);
|
||||
border: var(--drupal-off-canvas-input-border);
|
||||
border-radius: var(--drupal-off-canvas-input-border-radius);
|
||||
background-color: var(--drupal-off-canvas-input-background-color);
|
||||
font-size: var(--drupal-off-canvas-input-font-size);
|
||||
}
|
||||
|
||||
& input[type="checkbox"],
|
||||
& input[type="radio"] {
|
||||
& + label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
& input[type="file"] {
|
||||
margin-bottom: var(--off-canvas-vertical-spacing-unit);
|
||||
}
|
||||
|
||||
& input[type="search"] {
|
||||
appearance: none; /* Necessary for Safari. */
|
||||
}
|
||||
|
||||
& select {
|
||||
appearance: none;
|
||||
padding-inline-end: 20px;
|
||||
border: var(--drupal-off-canvas-input-border);
|
||||
border-radius: var(--drupal-off-canvas-input-border-radius);
|
||||
background-image: url(../../../icons/545560/chevron-down.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right 5px; /* LTR */
|
||||
background-size: 12px;
|
||||
|
||||
&:dir(rtl) {
|
||||
background-position: center left 5px;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
appearance: revert;
|
||||
padding-inline-end: 0;
|
||||
background: revert;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Autocomplete.
|
||||
*/
|
||||
& .form-autocomplete {
|
||||
padding-inline-end: 40px; /* Room for icon. */
|
||||
background-image: url(../../../icons/868686/magnifier.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right 1px; /* LTR */
|
||||
|
||||
&.ui-autocomplete-loading {
|
||||
background-image: url(../../../icons/spinner.gif);
|
||||
}
|
||||
|
||||
&:dir(rtl) {
|
||||
background-position: center left 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* This is the background <ul> for the autocomplete dropdown. */
|
||||
& .ui-autocomplete {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border: var(--drupal-off-canvas-input-border);
|
||||
background-color: var(--drupal-off-canvas-input-background-color);
|
||||
box-shadow: 0 1px 1px 0 var(--off-canvas-background-color); /* Ensure edge is visible if appearing over another form element. */
|
||||
|
||||
& a {
|
||||
display: block;
|
||||
padding: var(--drupal-off-canvas-input-padding);
|
||||
cursor: pointer;
|
||||
color: var(--drupal-off-canvas-input-text-color);
|
||||
font-size: var(--drupal-off-canvas-input-font-size);
|
||||
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.ui-state-active {
|
||||
outline: solid 2px currentColor;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Claro injects a "Loading" autocomplete message that affects the positioning
|
||||
* of the ui-autocomplete dropdown. We remove this to normalize the markup.
|
||||
*/
|
||||
& .claro-autocomplete__message {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styling for messages in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-messages-icon-size: 1.25rem;
|
||||
--off-canvas-messages-background-color: #f3faef;
|
||||
--off-canvas-messages-text-color-status: #325e1c;
|
||||
--off-canvas-messages-text-color-warning: #734c00;
|
||||
--off-canvas-messages-text-color-error: #a51b00;
|
||||
--off-canvas-messages-icon-status: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707l-8.741 8.736z'/%3e%3c/svg%3e");
|
||||
--off-canvas-messages-icon-warning: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e29700'%3e%3cpath d='M14.66 12.316l-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002v-5zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.239z'/%3e%3c/svg%3e");
|
||||
--off-canvas-messages-icon-error: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e32700'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e")
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .messages {
|
||||
padding-left: calc(2 * var(--off-canvas-messages-icon-size))
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .messages {
|
||||
padding-right: calc(2 * var(--off-canvas-messages-icon-size))
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages {
|
||||
position: relative; /* Anchor :before pseudo-element. */
|
||||
margin-top: calc(2 * var(--off-canvas-vertical-spacing-unit));
|
||||
padding: calc(2 * var(--off-canvas-vertical-spacing-unit)); /* Room for icon. */
|
||||
border: solid 1px transparent;
|
||||
background-color: var(--off-canvas-messages-background-color)
|
||||
|
||||
/* Icon. */
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .messages:before {
|
||||
left: 0.625rem
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .messages:before {
|
||||
right: 0.625rem
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: block;
|
||||
width: var(--off-canvas-messages-icon-size);
|
||||
height: var(--off-canvas-messages-icon-size);
|
||||
content: "";
|
||||
transform: translateY(-50%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
#drupal-off-canvas-wrapper .messages:before {
|
||||
background: canvastext;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
|
||||
/*
|
||||
* Some themes (Olivero) insert SVG icon. We use a background icon, so we
|
||||
* need to remove this.
|
||||
*/
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages__icon,
|
||||
#drupal-off-canvas-wrapper .messages__close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .messages__list {
|
||||
padding-left: 1.25rem
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .messages__list {
|
||||
padding-right: 1.25rem
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages__list {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages abbr {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--status {
|
||||
color: var(--off-canvas-messages-text-color-status)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--status:before {
|
||||
background-image: var(--off-canvas-messages-icon-status)
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--status:before {
|
||||
background: canvastext;
|
||||
-webkit-mask-image: var(--off-canvas-messages-icon-status);
|
||||
mask-image: var(--off-canvas-messages-icon-status)
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--warning {
|
||||
color: var(--off-canvas-messages-text-color-warning)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--warning:before {
|
||||
background-image: var(--off-canvas-messages-icon-warning)
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--warning:before {
|
||||
background: canvastext;
|
||||
-webkit-mask-image: var(--off-canvas-messages-icon-warning);
|
||||
mask-image: var(--off-canvas-messages-icon-warning)
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--error {
|
||||
color: var(--off-canvas-messages-text-color-error)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--error:before {
|
||||
background-image: var(--off-canvas-messages-icon-error)
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--error:before {
|
||||
background: canvastext;
|
||||
-webkit-mask-image: var(--off-canvas-messages-icon-error);
|
||||
mask-image: var(--off-canvas-messages-icon-error)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
/**
|
||||
* @file
|
||||
* Styling for messages in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-messages-icon-size: 20px;
|
||||
--off-canvas-messages-background-color: #f3faef;
|
||||
--off-canvas-messages-text-color-status: #325e1c;
|
||||
--off-canvas-messages-text-color-warning: #734c00;
|
||||
--off-canvas-messages-text-color-error: #a51b00;
|
||||
--off-canvas-messages-icon-status: url(../../../icons/73b355/check.svg);
|
||||
--off-canvas-messages-icon-warning: url(../../../icons/e29700/warning.svg);
|
||||
--off-canvas-messages-icon-error: url(../../../icons/e32700/error.svg);
|
||||
|
||||
& .messages {
|
||||
position: relative; /* Anchor :before pseudo-element. */
|
||||
margin-top: calc(2 * var(--off-canvas-vertical-spacing-unit));
|
||||
padding: calc(2 * var(--off-canvas-vertical-spacing-unit));
|
||||
padding-inline-start: calc(2 * var(--off-canvas-messages-icon-size)); /* Room for icon. */
|
||||
border: solid 1px transparent;
|
||||
background-color: var(--off-canvas-messages-background-color);
|
||||
|
||||
/* Icon. */
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: block;
|
||||
width: var(--off-canvas-messages-icon-size);
|
||||
height: var(--off-canvas-messages-icon-size);
|
||||
content: "";
|
||||
transform: translateY(-50%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
inset-inline-start: 10px;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: canvastext;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Some themes (Olivero) insert SVG icon. We use a background icon, so we
|
||||
* need to remove this.
|
||||
*/
|
||||
& .messages__icon,
|
||||
& .messages__close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .messages__list {
|
||||
margin: 0;
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
|
||||
& .messages abbr {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& .messages--status {
|
||||
color: var(--off-canvas-messages-text-color-status);
|
||||
|
||||
&:before {
|
||||
background-image: var(--off-canvas-messages-icon-status);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: canvastext;
|
||||
mask-image: var(--off-canvas-messages-icon-status);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .messages--warning {
|
||||
color: var(--off-canvas-messages-text-color-warning);
|
||||
|
||||
&:before {
|
||||
background-image: var(--off-canvas-messages-icon-warning);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: canvastext;
|
||||
mask-image: var(--off-canvas-messages-icon-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .messages--error {
|
||||
color: var(--off-canvas-messages-text-color-error);
|
||||
|
||||
&:before {
|
||||
background-image: var(--off-canvas-messages-icon-error);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: canvastext;
|
||||
mask-image: var(--off-canvas-messages-icon-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Reset HTML elements styles for the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle)) {
|
||||
all: revert;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
line-height: 1.4
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle)):after,
|
||||
#drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle)):before {
|
||||
all: revert;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
/**
|
||||
* @file
|
||||
* Reset HTML elements styles for the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle)) {
|
||||
all: revert;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
line-height: 1.4;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
all: revert;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styling for tables in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-table-cell-padding: 2px;
|
||||
--off-canvas-first-cell-padding-start: calc(var(--off-canvas-padding) / 2)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper table {
|
||||
width: calc(100% + 2 * var(--off-canvas-padding));
|
||||
margin: var(--off-canvas-vertical-spacing-unit) calc(-1 * var(--off-canvas-padding));
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper tr {
|
||||
border-bottom: 1px solid var(--off-canvas-border-color);
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper td,[dir="ltr"]
|
||||
#drupal-off-canvas-wrapper th {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper td,[dir="rtl"]
|
||||
#drupal-off-canvas-wrapper th {
|
||||
text-align: right
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper td,
|
||||
#drupal-off-canvas-wrapper th {
|
||||
padding: var(--off-canvas-table-cell-padding);
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper td:first-child,[dir="ltr"] #drupal-off-canvas-wrapper th:first-child {
|
||||
padding-left: var(--off-canvas-first-cell-padding-start)
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper td:first-child,[dir="rtl"] #drupal-off-canvas-wrapper th:first-child {
|
||||
padding-right: var(--off-canvas-first-cell-padding-start)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper td:not(:last-child) td, #drupal-off-canvas-wrapper th:not(:last-child) td {
|
||||
border-bottom: solid 1px var(--off-canvas-border-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* @file
|
||||
* Styling for tables in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-table-cell-padding: 2px;
|
||||
--off-canvas-first-cell-padding-start: calc(var(--off-canvas-padding) / 2);
|
||||
|
||||
& table {
|
||||
width: calc(100% + 2 * var(--off-canvas-padding));
|
||||
margin: var(--off-canvas-vertical-spacing-unit) calc(-1 * var(--off-canvas-padding));
|
||||
}
|
||||
|
||||
& tr {
|
||||
border-bottom: 1px solid var(--off-canvas-border-color);
|
||||
}
|
||||
|
||||
& td,
|
||||
& th {
|
||||
padding: var(--off-canvas-table-cell-padding);
|
||||
text-align: start;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
padding-inline-start: var(--off-canvas-first-cell-padding-start);
|
||||
}
|
||||
|
||||
&:not(:last-child) td {
|
||||
border-bottom: solid 1px var(--off-canvas-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Table drag styling for off-canvas dialog.
|
||||
*
|
||||
* @see tabledrag.js
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
/* The draggable <tr> element. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .draggable:hover,
|
||||
#drupal-off-canvas-wrapper .draggable:focus-within {
|
||||
background-color: var(--off-canvas-background-color-light);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .draggable {
|
||||
|
||||
/* Appears when the row is being dragged. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .draggable.drag {
|
||||
cursor: move;
|
||||
background-color: var(--off-canvas-background-color-dark);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper td {
|
||||
transition: background-color 0.3s ease
|
||||
|
||||
/* We have to horizontally align all descendent nodes including text nodes
|
||||
* that do not have wrapper elements. Since we use flex to do this, we need
|
||||
* try to keep it vertically centered, so we have to give it a minimum height
|
||||
* to match the rest of the table cells. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper td:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 3.125rem;
|
||||
grid-gap: var(--off-canvas-table-cell-padding);
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper td abbr {
|
||||
margin-left: 0;
|
||||
margin-right: 0.3125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper td abbr {
|
||||
margin-right: 0;
|
||||
margin-left: 0.3125rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper td abbr {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .tabledrag-handle {
|
||||
flex-shrink: 0
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .tabledrag-handle:after {
|
||||
display: block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
content: "";
|
||||
cursor: move;
|
||||
background-color: transparent;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
#drupal-off-canvas-wrapper .tabledrag-handle:after {
|
||||
background: linktext;
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e");
|
||||
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
|
||||
/* Make the "row weight" <select> as small as possible. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .tabledrag-hide select {
|
||||
all: revert;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .tabledrag-changed-warning {
|
||||
margin-bottom: var(--off-canvas-vertical-spacing-unit);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .tabledrag-toggle-weight-wrapper {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .tabledrag-toggle-weight-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .tabledrag-toggle-weight-wrapper {
|
||||
padding-top: 0.625rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .indentation {
|
||||
width: 0.3125rem;
|
||||
}
|
||||
|
||||
.touchevents #drupal-off-canvas-wrapper .draggable td {
|
||||
padding: 0 0.625rem
|
||||
}
|
||||
|
||||
.touchevents #drupal-off-canvas-wrapper .draggable .menu-item__link {
|
||||
display: inline-block;
|
||||
padding: 0.625rem 0
|
||||
}
|
||||
|
||||
.touchevents #drupal-off-canvas-wrapper a.tabledrag-handle {
|
||||
width: 2.5rem;
|
||||
height: 2.75rem
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
/**
|
||||
* @file
|
||||
* Table drag styling for off-canvas dialog.
|
||||
*
|
||||
* @see tabledrag.js
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
/* The draggable <tr> element. */
|
||||
& .draggable {
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
background-color: var(--off-canvas-background-color-light);
|
||||
}
|
||||
|
||||
/* Appears when the row is being dragged. */
|
||||
&.drag {
|
||||
cursor: move;
|
||||
background-color: var(--off-canvas-background-color-dark);
|
||||
}
|
||||
}
|
||||
|
||||
& td {
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
/* We have to horizontally align all descendent nodes including text nodes
|
||||
* that do not have wrapper elements. Since we use flex to do this, we need
|
||||
* try to keep it vertically centered, so we have to give it a minimum height
|
||||
* to match the rest of the table cells. */
|
||||
&:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 50px;
|
||||
gap: var(--off-canvas-table-cell-padding);
|
||||
}
|
||||
|
||||
& abbr {
|
||||
margin-inline: 0 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .tabledrag-handle {
|
||||
flex-shrink: 0;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
content: "";
|
||||
cursor: move;
|
||||
background-color: transparent;
|
||||
background-image: url(../../../icons/bebebe/move.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: linktext;
|
||||
mask-image: url(../../../icons/bebebe/move.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Make the "row weight" <select> as small as possible. */
|
||||
& .tabledrag-hide select {
|
||||
all: revert;
|
||||
}
|
||||
|
||||
& .tabledrag-changed-warning {
|
||||
margin-bottom: var(--off-canvas-vertical-spacing-unit);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
& .tabledrag-toggle-weight-wrapper {
|
||||
padding-top: 10px;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
& .indentation {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
@nest .touchevents & .draggable td {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
@nest .touchevents & .draggable .menu-item__link {
|
||||
display: inline-block;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
@nest .touchevents & a.tabledrag-handle {
|
||||
width: 40px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styling of AJAX actions throbber in off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper .ajax-progress,
|
||||
#drupal-off-canvas-wrapper .ajax-progress-throbber {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: 0.9375rem;
|
||||
height: 0.9375rem;
|
||||
margin: 0 0.625rem;
|
||||
animation: off-canvas-throbber-spin 1s linear infinite;
|
||||
vertical-align: middle;
|
||||
border: 2px solid var(--off-canvas-text-color);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
#drupal-off-canvas-wrapper .ajax-progress,
|
||||
#drupal-off-canvas-wrapper .ajax-progress-throbber {
|
||||
border-top-color: transparent
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .layout-selection .ajax-progress,[dir="ltr"]
|
||||
#drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,[dir="ltr"]
|
||||
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress,[dir="ltr"]
|
||||
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber {
|
||||
right: 0
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .layout-selection .ajax-progress,[dir="rtl"]
|
||||
#drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,[dir="rtl"]
|
||||
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress,[dir="rtl"]
|
||||
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber {
|
||||
left: 0
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .layout-selection .ajax-progress,
|
||||
#drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,
|
||||
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress,
|
||||
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
@keyframes off-canvas-throbber-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
/**
|
||||
* @file
|
||||
* Styling of AJAX actions throbber in off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
& .ajax-progress, /* This is the CSS class used in Claro. */
|
||||
& .ajax-progress-throbber {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: 0 10px;
|
||||
animation: off-canvas-throbber-spin 1s linear infinite;
|
||||
vertical-align: middle;
|
||||
border: 2px solid var(--off-canvas-text-color);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& .layout-selection,
|
||||
& .inline-block-list {
|
||||
& .ajax-progress,
|
||||
& .ajax-progress-throbber {
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 0;
|
||||
margin-block: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes off-canvas-throbber-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styling for the titlebar within the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-title-padding: calc(3 * var(--off-canvas-vertical-spacing-unit));
|
||||
--off-canvas-title-background-color: #2d2d2d;
|
||||
--off-canvas-title-text-color: #fff;
|
||||
--off-canvas-title-font-size: 1rem
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar {
|
||||
position: relative;
|
||||
margin: 0 calc(-1 * var(--off-canvas-padding));
|
||||
padding: var(--off-canvas-title-padding) 3.125rem;
|
||||
color: var(--off-canvas-title-text-color);
|
||||
background-color: var(--off-canvas-title-background-color);
|
||||
font-family: var(--off-canvas-title-font-family);
|
||||
font-size: var(--off-canvas-title-font-size);
|
||||
font-weight: bold
|
||||
|
||||
/* The pencil icon. */
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
|
||||
left: 1em
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
|
||||
right: 1em
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 1.25rem;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: currentColor;
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
|
||||
background-color: canvastext
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
|
||||
/* Close button. */
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
|
||||
left: auto;
|
||||
right: 0.625rem
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
|
||||
right: auto;
|
||||
left: 0.625rem
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
overflow: hidden;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
text-indent: -624.9375rem;
|
||||
color: inherit;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
-webkit-appearance: none;
|
||||
appearance: none
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close:focus {
|
||||
outline: solid 2px currentColor;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
|
||||
|
||||
/* The plus icon. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close:before,
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close:after {
|
||||
position: absolute;
|
||||
top: calc(50% - 1px);
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-top: solid 2px currentColor;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close:before {
|
||||
transform: translate(-50%, 50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close:after {
|
||||
transform: translate(-50%, 50%) rotate(45deg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
|
||||
|
||||
/* Hide the default jQuery UI dialog close button. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close .ui-icon {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
/**
|
||||
* @file
|
||||
* Styling for the titlebar within the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-title-padding: calc(3 * var(--off-canvas-vertical-spacing-unit));
|
||||
--off-canvas-title-background-color: #2d2d2d;
|
||||
--off-canvas-title-text-color: #fff;
|
||||
--off-canvas-title-font-size: 16px;
|
||||
|
||||
& .ui-dialog-titlebar {
|
||||
position: relative;
|
||||
margin: 0 calc(-1 * var(--off-canvas-padding));
|
||||
padding: var(--off-canvas-title-padding) 50px;
|
||||
color: var(--off-canvas-title-text-color);
|
||||
background-color: var(--off-canvas-title-background-color);
|
||||
font-family: var(--off-canvas-title-font-family);
|
||||
font-size: var(--off-canvas-title-font-size);
|
||||
font-weight: bold;
|
||||
|
||||
/* The pencil icon. */
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 1em;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: currentColor;
|
||||
mask-image: url(../../../icons/ffffff/pencil.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background-color: canvastext;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Close button. */
|
||||
& .ui-dialog-titlebar-close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline: auto 10px;
|
||||
overflow: hidden;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
text-indent: -9999px;
|
||||
color: inherit;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
outline: solid 2px currentColor;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* The plus icon. */
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: calc(50% - 1px);
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-top: solid 2px currentColor;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transform: translate(-50%, 50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: translate(-50%, 50%) rotate(45deg);
|
||||
}
|
||||
|
||||
/* Hide the default jQuery UI dialog close button. */
|
||||
& .ui-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Re-create utility styles for off-canvas dialog that are removed in the reset.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper .hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .visually-hidden {
|
||||
position: absolute !important;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
word-wrap: normal
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .visually-hidden.focusable:is(:active, :focus) {
|
||||
position: static !important;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
/**
|
||||
* @file
|
||||
* Re-create utility styles for off-canvas dialog that are removed in the reset.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
& .hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .visually-hidden {
|
||||
position: absolute !important;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
word-wrap: normal;
|
||||
|
||||
&.focusable:is(:active, :focus) {
|
||||
position: static !important;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/**
|
||||
* @file
|
||||
* CSS for off-canvas dialog wrapper.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper {
|
||||
border-left: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color)
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper {
|
||||
border-right: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color)
|
||||
}
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-wrapper-box-shadow: 0 0 0.25rem 2px rgba(0, 0, 0, 0.3);
|
||||
--off-canvas-wrapper-border-color: #2d2d2d;
|
||||
--off-canvas-wrapper-border-width: 1px;
|
||||
|
||||
z-index: 501; /* Layer the dialog just under the toolbar. */
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
box-shadow: var(--off-canvas-wrapper-box-shadow)
|
||||
|
||||
/*
|
||||
* Force the off-canvas dialog to be 100% width at the same breakpoint the
|
||||
* dialog system uses to expand dialog widths.
|
||||
*/
|
||||
}
|
||||
@media (max-width: 48rem) {
|
||||
#drupal-off-canvas-wrapper {
|
||||
width: 100% !important
|
||||
}
|
||||
}
|
||||
/* When off-canvas dialog is at 100% width stop the body from scrolling */
|
||||
@media (max-width: 48rem) {
|
||||
body.js-off-canvas-dialog-open {
|
||||
position: fixed
|
||||
}
|
||||
}
|
||||
/* This is a page level content wrapper that shrinks when off-canvas is open. */
|
||||
.dialog-off-canvas-main-canvas {
|
||||
transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.dialog-off-canvas-main-canvas {
|
||||
transition: none
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* @file
|
||||
* CSS for off-canvas dialog wrapper.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-wrapper-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3);
|
||||
--off-canvas-wrapper-border-color: #2d2d2d;
|
||||
--off-canvas-wrapper-border-width: 1px;
|
||||
|
||||
z-index: 501; /* Layer the dialog just under the toolbar. */
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
border-inline-start: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color);
|
||||
box-shadow: var(--off-canvas-wrapper-box-shadow);
|
||||
|
||||
/*
|
||||
* Force the off-canvas dialog to be 100% width at the same breakpoint the
|
||||
* dialog system uses to expand dialog widths.
|
||||
*/
|
||||
@media (max-width: 768px) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* When off-canvas dialog is at 100% width stop the body from scrolling */
|
||||
body.js-off-canvas-dialog-open {
|
||||
@media (max-width: 768px) {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
/* This is a page level content wrapper that shrinks when off-canvas is open. */
|
||||
.dialog-off-canvas-main-canvas {
|
||||
transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease;
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -161,6 +161,7 @@
|
|||
$(
|
||||
'.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar',
|
||||
).toggleClass('ui-dialog-empty-title', !settings.title);
|
||||
$('.ui-dialog-off-canvas').attr('id', 'drupal-off-canvas-wrapper');
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -70,6 +70,7 @@
|
|||
settings
|
||||
} = _ref4;
|
||||
$('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
|
||||
$('.ui-dialog-off-canvas').attr('id', 'drupal-off-canvas-wrapper');
|
||||
},
|
||||
|
||||
handleDialogResize(event) {
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 9"><path fill="none" stroke-width="1.5" d="M1 1l6 6 6-6" stroke="#545560"/></svg>
|
||||
|
After Width: | Height: | Size: 137 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="40" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z" fill="#868686"/></svg>
|
||||
|
After Width: | Height: | Size: 423 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -321,7 +321,7 @@
|
|||
// rules containing the #drupal-off-canvas selector.
|
||||
[...document.styleSheets].forEach(processRules);
|
||||
|
||||
const prefix = `#drupal-off-canvas [${fenceName}]`;
|
||||
const prefix = `#drupal-off-canvas-wrapper [${fenceName}]`;
|
||||
// Additional styles that need to be explicity added in addition to the
|
||||
// prefixed versions of existing css in `existingCss`.
|
||||
const addedCss = [
|
||||
|
|
@ -331,51 +331,8 @@
|
|||
`${prefix} .ck.ck-content ol li {list-style-type: decimal}`,
|
||||
`${prefix} .ck[contenteditable], ${prefix} .ck[contenteditable] * {-webkit-user-modify: read-write;-moz-user-modify: read-write;}`,
|
||||
];
|
||||
// Styles to ensure block elements are displayed as such inside
|
||||
// off-canvas dialogs. These are all element types that are styled with
|
||||
// ` all: initial;` in the off-canvas reset that should default to being
|
||||
// displayed as blocks within CKEditor.
|
||||
// @see core/misc/dialog/off-canvas.reset.pcss.css
|
||||
const blockSelectors = [
|
||||
'h1',
|
||||
'h2',
|
||||
'h3',
|
||||
'h4',
|
||||
'h5',
|
||||
'h6',
|
||||
'p',
|
||||
'ol',
|
||||
'ul',
|
||||
'address',
|
||||
'article',
|
||||
'aside',
|
||||
'blockquote',
|
||||
'body',
|
||||
'dd',
|
||||
'div',
|
||||
'dl',
|
||||
'dt',
|
||||
'fieldset',
|
||||
'figcaption',
|
||||
'figure',
|
||||
'footer',
|
||||
'form',
|
||||
'header',
|
||||
'hgroup',
|
||||
'hr',
|
||||
'html',
|
||||
'legend',
|
||||
'main',
|
||||
'menu',
|
||||
'pre',
|
||||
'section',
|
||||
'xmp',
|
||||
]
|
||||
.map((blockElement) => `${prefix} .ck.ck-content ${blockElement}`)
|
||||
.join(', \n');
|
||||
const blockCss = `${blockSelectors} { display: block; }`;
|
||||
|
||||
const prefixedCss = [...addedCss, blockCss].join('\n');
|
||||
const prefixedCss = [...addedCss].join('\n');
|
||||
|
||||
// Create a new style tag with the prefixed styles added above.
|
||||
const offCanvasCssStyle = document.createElement('style');
|
||||
|
|
|
|||
|
|
@ -151,11 +151,9 @@
|
|||
|
||||
if (once('ckeditor5-off-canvas-reset', 'body').length) {
|
||||
[...document.styleSheets].forEach(processRules);
|
||||
const prefix = `#drupal-off-canvas [${fenceName}]`;
|
||||
const prefix = `#drupal-off-canvas-wrapper [${fenceName}]`;
|
||||
const addedCss = [`${prefix} .ck.ck-content {display:block;min-height:5rem;}`, `${prefix} .ck.ck-content * {display:initial;background:initial;color:initial;padding:initial;}`, `${prefix} .ck.ck-content li {display:list-item}`, `${prefix} .ck.ck-content ol li {list-style-type: decimal}`, `${prefix} .ck[contenteditable], ${prefix} .ck[contenteditable] * {-webkit-user-modify: read-write;-moz-user-modify: read-write;}`];
|
||||
const blockSelectors = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'ol', 'ul', 'address', 'article', 'aside', 'blockquote', 'body', 'dd', 'div', 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'header', 'hgroup', 'hr', 'html', 'legend', 'main', 'menu', 'pre', 'section', 'xmp'].map(blockElement => `${prefix} .ck.ck-content ${blockElement}`).join(', \n');
|
||||
const blockCss = `${blockSelectors} { display: block; }`;
|
||||
const prefixedCss = [...addedCss, blockCss].join('\n');
|
||||
const prefixedCss = [...addedCss].join('\n');
|
||||
const offCanvasCssStyle = document.createElement('style');
|
||||
offCanvasCssStyle.textContent = prefixedCss;
|
||||
offCanvasCssStyle.setAttribute('id', 'ckeditor5-off-canvas-reset');
|
||||
|
|
|
|||
|
|
@ -33,11 +33,11 @@ class CKEditor5OffCanvasTest extends CKEditor5TestBase {
|
|||
// The "Add Node" link triggers an off-canvas dialog with an add node form
|
||||
// that includes CKEditor.
|
||||
$page->clickLink('Add Node');
|
||||
$assert_session->waitForElementVisible('css', '#drupal-off-canvas');
|
||||
$assert_session->waitForElementVisible('css', '#drupal-off-canvas-wrapper');
|
||||
$assert_session->assertWaitOnAjaxRequest();
|
||||
|
||||
$styles = $assert_session->elementExists('css', 'style#ckeditor5-off-canvas-reset');
|
||||
$this->stringContains('#drupal-off-canvas [data-drupal-ck-style-fence]', $styles->getText());
|
||||
$this->stringContains('#drupal-off-canvas-wrapper [data-drupal-ck-style-fence]', $styles->getText());
|
||||
|
||||
$assert_session->elementExists('css', '.ck');
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,15 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Layout Builder UI styling.
|
||||
*/
|
||||
|
||||
.layout-builder {
|
||||
padding: 1.5em 1.5em 0.5em;
|
||||
border: 3px solid #2f91da;
|
||||
|
|
@ -13,41 +25,45 @@
|
|||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.layout-builder__link--add {
|
||||
padding-left: 1.3em; /* LTR */
|
||||
color: #686868;
|
||||
border-bottom: none;
|
||||
background: url(../../../misc/icons/787878/plus.svg) transparent center left / 1em no-repeat; /* LTR */
|
||||
[dir="ltr"] .layout-builder__link--add {
|
||||
padding-left: 1.3em;
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout-builder__link--add {
|
||||
padding-right: 1.3em;
|
||||
padding-left: 0;
|
||||
background-position-x: right;
|
||||
}
|
||||
|
||||
.layout-builder__link--add {
|
||||
color: #686868;
|
||||
border-bottom: none;
|
||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23787878' d='M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z'/%3e%3c/svg%3e") transparent center left / 1em no-repeat /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout-builder__link--add {
|
||||
background-position-x: right;
|
||||
}
|
||||
|
||||
.layout-builder__link--add:hover,
|
||||
.layout-builder__link--add:active,
|
||||
.layout-builder__link--add:focus {
|
||||
color: #000;
|
||||
border-bottom-style: none;
|
||||
}
|
||||
.layout-builder__link--add:active {
|
||||
color: #000;
|
||||
border-bottom-style: none;
|
||||
}
|
||||
|
||||
.layout-builder__section {
|
||||
margin-bottom: 1.5em;
|
||||
margin-bottom: 1.5em
|
||||
}
|
||||
|
||||
.layout-builder__section .ui-sortable-helper {
|
||||
outline: 2px solid #f7f7f7;
|
||||
background-color: #fff;
|
||||
}
|
||||
outline: 2px solid #f7f7f7;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.layout-builder__section .ui-state-drop {
|
||||
margin: 20px;
|
||||
padding: 30px;
|
||||
outline: 2px dashed #fedb60;
|
||||
background-color: #ffd;
|
||||
}
|
||||
margin: 1.25rem;
|
||||
padding: 1.875rem;
|
||||
outline: 2px dashed #fedb60;
|
||||
background-color: #ffd;
|
||||
}
|
||||
|
||||
.layout-builder__region {
|
||||
outline: 2px dashed #2f91da;
|
||||
|
|
@ -59,53 +75,69 @@
|
|||
background-color: #eff6fc;
|
||||
}
|
||||
|
||||
[dir="ltr"] .layout-builder__link--remove {
|
||||
margin-left: -0.625rem;
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout-builder__link--remove {
|
||||
margin-right: -0.625rem;
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.layout-builder__link--remove {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-right: 6px; /* LTR */
|
||||
margin-left: -10px; /* LTR */
|
||||
width: 1.625rem;
|
||||
height: 1.625rem;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
text-indent: -9999px;
|
||||
text-indent: -624.9375rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 26px;
|
||||
background: url(../../../misc/icons/bebebe/ex.svg) #fff center center / 16px 16px no-repeat;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout-builder__link--remove {
|
||||
margin-right: -10px;
|
||||
margin-left: 6px;
|
||||
border-radius: 1.625rem;
|
||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e") #fff center center / 1rem 1rem no-repeat;
|
||||
font-size: 1rem
|
||||
}
|
||||
|
||||
.layout-builder__link--remove:hover {
|
||||
background-image: url(../../../misc/icons/787878/ex.svg);
|
||||
}
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.layout-builder-block {
|
||||
padding: 1.5em;
|
||||
cursor: move;
|
||||
background-color: #fff;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.layout-builder-block [tabindex="-1"] {
|
||||
pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.layout-builder--content-preview-disabled .layout-builder-block {
|
||||
margin: 0;
|
||||
border-bottom: 2px dashed #979797
|
||||
}
|
||||
|
||||
/*
|
||||
* Layout Builder messages.
|
||||
*/
|
||||
|
||||
.layout-builder__message .messages {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.layout-builder__message--defaults .messages {
|
||||
background-image: url("../../../misc/icons/73b355/globe.svg");
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M8,0.0309333333 C12.4181818,0.0309333333 16,3.5328 16,7.85315556 C16,12.1731556 12.4181818,15.6750222 8,15.6750222 C3.58181818,15.6750222 0,12.1731556 0,7.85315556 C0,3.5328 3.58181818,0.0309333333 8,0.0309333333 Z M12.7236364,4.69653333 C12.5116364,4.95288889 12.1872727,4.50133333 11.9,4.3552 C11.6130909,4.20871111 11.5505455,4.69653333 11.2138182,5.25795556 C10.8767273,5.81937778 10.6770909,5.56302222 10.3774545,5.25795556 C10.0781818,4.95288889 10.2650909,4.68444444 10.5774545,4.56248889 C10.8890909,4.44053333 10.9141818,4.39182222 10.6894545,4.14755556 C10.4650909,3.90364444 10.3650909,4.00106667 10.5898182,3.80586667 C10.8141818,3.61066667 10.9516364,3.6352 11.4385455,3.34222222 C11.9250909,3.04924444 11.3636364,2.7808 11.0389091,2.99484444 C10.7145455,3.20853333 10.3025455,2.56142222 10.2152727,2.01671111 C10.128,1.47164444 10.3901818,1.64622222 10.6894545,1.45066667 C10.7610909,1.40444444 10.7192727,1.29386667 10.6170909,1.15377778 C9.80363636,0.849066667 8.92181818,0.680177778 8,0.680177778 C7.08945455,0.680177778 6.21745455,0.8448 5.41236364,1.14275556 C5.26763636,1.33795556 5.23709091,1.49475556 5.53527273,1.4752 C6.284,1.42648889 6.29672727,1.26791111 6.55890909,1.6096 C6.82072727,1.95128889 6.696,2.65884444 6.22181818,2.46364444 C5.74763636,2.26844444 4.96145455,1.93884444 4.76181818,2.3296 C4.56181818,2.72 4.84909091,2.81742222 5.236,2.5856 C5.62254545,2.35377778 5.93490909,2.46364444 6.00945455,2.84195556 C6.08436364,3.22026667 6.05963636,3.95235556 5.63527273,3.81831111 C5.21090909,3.68391111 5.07345455,3.8912 5.32327273,4.09884444 C5.57272727,4.30613333 5.29818182,4.42844444 4.91127273,4.26951111 C4.52436364,4.11093333 4.53709091,4.59911111 4.01272727,4.57457778 C3.48872727,4.5504 3.45127273,5.11146667 3.28909091,5.31911111 C3.12690909,5.5264 3.10181818,6.19768889 3.06436364,6.35626667 C3.02690909,6.51484444 2.86472727,6.6368 2.77745455,6.13653333 C2.68981818,5.63626667 2.80218182,5.41653333 2.34072727,5.38026667 C1.87890909,5.34328889 1.41709091,6.29191111 1.65418182,6.49493333 C1.89127273,6.69795556 2.21563636,6.30755556 2.19090909,6.60017778 C2.16581818,6.89315556 2.00363636,8.22328889 2.49018182,8.28408889 C2.97709091,8.34524444 3.30145455,8.29653333 3.70072727,8.55288889 C4.1,8.80888889 4.84909091,8.83342222 5.38545455,9.66328889 C5.92218182,10.4928 6.54618182,10.5905778 7.14545455,10.7249778 C7.74436364,10.8590222 7.68181818,11.1886222 7.36981818,11.6277333 C7.05781818,12.0672 7.23272727,12.5184 6.18436364,12.8600889 C5.136,13.2017778 5.06109091,14.0561778 5.09854545,14.2147556 C5.10618182,14.2471111 5.092,14.3239111 5.06545455,14.4248889 C5.96472727,14.8103111 6.95709091,15.0257778 8,15.0257778 C10.0716364,15.0257778 11.944,14.1802667 13.2792727,12.8256 C13.1043636,12.2965333 12.9294545,11.6920889 12.9236364,11.3713778 C12.9109091,10.7249778 13.0981818,10.6759111 12.8610909,10.2488889 C12.624,9.82186667 12.1370909,10.2368 11.1887273,10.1144889 C10.2403636,9.99253333 10.3901818,9.40693333 9.72872727,8.6016 C9.06727273,7.79626667 10.34,7.13706667 10.6894545,6.30755556 C11.0389091,5.47768889 12.5614545,5.79484444 12.8985455,5.856 C13.2352727,5.91715556 13.1105455,5.69742222 13.8221818,5.18471111 C14.5334545,4.67235556 13.4727273,4.66026667 13.1854545,4.46506667 C12.8985455,4.26951111 12.936,4.44053333 12.7236364,4.69653333 Z M3.53854545,12.4088889 C3.47636364,11.8108444 3.02690909,11.4812444 2.50290909,10.3708444 C1.97854545,9.26044444 2.328,9.13848889 2.41527273,9.05315556 C2.50290909,8.96746667 1.82872727,8.61368889 1.85381818,7.75964444 C1.87890909,6.90524444 1.14254545,7.1008 1.27963636,6.19768889 C1.39745455,5.42328889 1.55018182,4.88426667 1.47381818,4.58417778 C0.957818182,5.56515556 0.664363636,6.67591111 0.664363636,7.85315556 C0.664363636,10.4938667 2.13272727,12.8046222 4.31236364,14.0494222 L4.27490909,13.8851556 C4.27490909,13.8851556 3.60109091,13.0065778 3.53854545,12.4088889 Z M8.48072727,1.69493333 C8.28109091,2.31715556 8.26109091,2.13333333 8.03127273,2.26844444 C7.78254545,2.41457778 7.65709091,2.51235556 7.44472727,2.80533333 C7.23272727,3.09831111 6.74581818,3.03715556 7.01381818,2.72 C7.28145455,2.40248889 7.18290909,1.54844444 7.03309091,1.31662222 C7.03309091,1.31662222 6.83345455,1.13351111 7.28254545,1.06026667 C7.732,0.987022222 8.68036364,1.07271111 8.48072727,1.69493333 Z'%3e%3c/path%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.layout-builder__message--overrides .messages {
|
||||
background-image: url("../../../misc/icons/73b355/location.svg");
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M5.4749999,0 C2.43935876,0 0,2.45021982 0,5.50153207 C0,8.5518841 5.4749999,16.0038459 5.4749999,16.0038459 C5.4749999,16.0038459 10.9499998,8.5518841 10.9499998,5.50153207 C10.9499998,2.45021982 8.51064105,0 5.4749999,0 Z M5.89615374,8.00192294 C4.48158136,8.00192294 3.36923071,6.89054251 3.36923071,5.4749999 C3.36923071,4.06042752 4.48061114,2.94807687 5.89615374,2.94807687 C7.31072613,2.94807687 8.42307678,4.0594573 8.42307678,5.4749999 C8.42307678,6.89051825 7.31075039,8.00192294 5.89615374,8.00192294 Z'%3e%3c/path%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Label when "content preview" is disabled. */
|
||||
|
||||
.layout-builder-block__content-preview-placeholder-label {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
|
|
@ -113,62 +145,19 @@
|
|||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.layout-builder--content-preview-disabled .layout-builder-block {
|
||||
margin: 0;
|
||||
border-bottom: 2px dashed #979797;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .layout-selection li {
|
||||
display: block;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .layout-selection li a {
|
||||
display: block;
|
||||
padding-top: 0.55em;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .inline-block-create-button {
|
||||
display: block;
|
||||
padding: 24px;
|
||||
padding-left: 44px;
|
||||
color: #eee;
|
||||
border-bottom: 1px solid #333;
|
||||
background: url(../../../misc/icons/bebebe/plus.svg) transparent 16px no-repeat;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .inline-block-create-button,
|
||||
#drupal-off-canvas .inline-block-list__item {
|
||||
margin: 0 -20px;
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .inline-block-create-button:hover,
|
||||
#drupal-off-canvas .inline-block-list__item:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .inline-block-list {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .inline-block-list__item {
|
||||
display: block;
|
||||
padding: 15px 0 15px 25px;
|
||||
}
|
||||
|
||||
.layout-builder__add-section.is-layout-builder-highlighted {
|
||||
margin-bottom: calc(1.5em - 8px);
|
||||
margin-bottom: calc(1.5em - 0.5rem);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.layout-builder__layout.is-layout-builder-highlighted,
|
||||
.layout-builder-block.is-layout-builder-highlighted,
|
||||
.layout-builder__add-block.is-layout-builder-highlighted {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: -4px -2px;
|
||||
margin: -0.25rem -2px;
|
||||
}
|
||||
|
||||
.layout-builder__add-block.is-layout-builder-highlighted,
|
||||
.layout-builder__add-section.is-layout-builder-highlighted,
|
||||
.layout-builder__layout.is-layout-builder-highlighted:before,
|
||||
|
|
@ -177,22 +166,6 @@
|
|||
border: 4px solid #000;
|
||||
}
|
||||
|
||||
/* Highlight the active block in the Move Block dialog. */
|
||||
#drupal-off-canvas .layout-builder-components-table__block-label--current {
|
||||
padding-left: 17px;
|
||||
border-left: solid 5px;
|
||||
}
|
||||
|
||||
/**
|
||||
* @todo remove in https://www.drupal.org/project/drupal/issues/3042127
|
||||
* This rule ensures the row weight dropdowns in the Move Block dialog
|
||||
* maintain the background color of their container when they are hovered
|
||||
* over or are inside the active row.
|
||||
*/
|
||||
#drupal-off-canvas .layout-builder-components-table__row .form-item {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.layout-builder__region-label,
|
||||
.layout-builder__section-label {
|
||||
display: none;
|
||||
|
|
@ -217,6 +190,7 @@
|
|||
* unsaved changes until "Save layout" is submitted.
|
||||
* @todo create issue for todo.
|
||||
*/
|
||||
|
||||
.layout-builder-components-table .tabledrag-changed-warning {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,168 @@
|
|||
/**
|
||||
* @file
|
||||
* Layout Builder UI styling.
|
||||
*/
|
||||
|
||||
.layout-builder {
|
||||
padding: 1.5em 1.5em 0.5em;
|
||||
border: 3px solid #2f91da;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.layout-builder__add-section {
|
||||
width: 100%;
|
||||
margin-bottom: 1.5em;
|
||||
padding: 1.5em 0;
|
||||
text-align: center;
|
||||
outline: 2px dashed #979797;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.layout-builder__link--add {
|
||||
padding-inline-start: 1.3em;
|
||||
color: #686868;
|
||||
border-bottom: none;
|
||||
background: url(../../../misc/icons/787878/plus.svg) transparent center left / 1em no-repeat; /* LTR */
|
||||
|
||||
&:dir(rtl) {
|
||||
background-position-x: right;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: #000;
|
||||
border-bottom-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-builder__section {
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
& .ui-sortable-helper {
|
||||
outline: 2px solid #f7f7f7;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
& .ui-state-drop {
|
||||
margin: 20px;
|
||||
padding: 30px;
|
||||
outline: 2px dashed #fedb60;
|
||||
background-color: #ffd;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-builder__region {
|
||||
outline: 2px dashed #2f91da;
|
||||
}
|
||||
|
||||
.layout-builder__add-block {
|
||||
padding: 1.5em 0;
|
||||
text-align: center;
|
||||
background-color: #eff6fc;
|
||||
}
|
||||
|
||||
.layout-builder__link--remove {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-inline: -10px 6px;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
text-indent: -9999px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 26px;
|
||||
background: url(../../../misc/icons/bebebe/ex.svg) #fff center center / 16px 16px no-repeat;
|
||||
font-size: 1rem;
|
||||
|
||||
&:hover {
|
||||
background-image: url(../../../misc/icons/787878/ex.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.layout-builder-block {
|
||||
padding: 1.5em;
|
||||
cursor: move;
|
||||
background-color: #fff;
|
||||
|
||||
& [tabindex="-1"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@nest .layout-builder--content-preview-disabled & {
|
||||
margin: 0;
|
||||
border-bottom: 2px dashed #979797;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Layout Builder messages.
|
||||
*/
|
||||
.layout-builder__message .messages {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.layout-builder__message--defaults .messages {
|
||||
background-image: url("../../../misc/icons/73b355/globe.svg");
|
||||
}
|
||||
.layout-builder__message--overrides .messages {
|
||||
background-image: url("../../../misc/icons/73b355/location.svg");
|
||||
}
|
||||
|
||||
/* Label when "content preview" is disabled. */
|
||||
.layout-builder-block__content-preview-placeholder-label {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 1.429em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.layout-builder__add-section.is-layout-builder-highlighted {
|
||||
margin-bottom: calc(1.5em - 8px);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.layout-builder__layout.is-layout-builder-highlighted,
|
||||
.layout-builder-block.is-layout-builder-highlighted,
|
||||
.layout-builder__add-block.is-layout-builder-highlighted {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: -4px -2px;
|
||||
}
|
||||
|
||||
.layout-builder__add-block.is-layout-builder-highlighted,
|
||||
.layout-builder__add-section.is-layout-builder-highlighted,
|
||||
.layout-builder__layout.is-layout-builder-highlighted:before,
|
||||
.layout-builder__layout.is-layout-builder-highlighted,
|
||||
.layout-builder-block.is-layout-builder-highlighted {
|
||||
border: 4px solid #000;
|
||||
}
|
||||
|
||||
.layout-builder__region-label,
|
||||
.layout-builder__section-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-builder--move-blocks-active .layout-builder__region-label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layout-builder--move-blocks-active .layout-builder__section-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.layout__region-info {
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
border-bottom: 2px dashed #979797;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove "You have unsaved changes" warning because Layout Builder always has
|
||||
* unsaved changes until "Save layout" is submitted.
|
||||
* @todo create issue for todo.
|
||||
*/
|
||||
.layout-builder-components-table .tabledrag-changed-warning {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Layout Builder styling for off-canvas UI.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper .layout-selection {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .layout-selection li {
|
||||
position: relative; /* Anchor throbber. */
|
||||
padding: calc(0.25 * var(--off-canvas-vertical-spacing-unit));
|
||||
border-bottom: 1px solid var(--off-canvas-border-color)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .layout-selection li:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .layout-selection {
|
||||
|
||||
/* Horizontally align icon and text. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .layout-selection a {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
grid-gap: 0.625rem;
|
||||
padding: 0.625rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
|
||||
/*
|
||||
* This is the styling of the SVG within the layout selection list.
|
||||
*/
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .layout-icon__region {
|
||||
fill: var(--off-canvas-text-color);
|
||||
stroke: transparent
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
#drupal-off-canvas-wrapper .layout-icon__region {
|
||||
fill: canvastext
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper .inline-block-create-button {
|
||||
padding-left: calc(2 * var(--off-canvas-padding) + var(--icon-size) / 2)
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper .inline-block-create-button {
|
||||
padding-right: calc(2 * var(--off-canvas-padding) + var(--icon-size) / 2)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .inline-block-create-button {
|
||||
--icon-size: 1rem;
|
||||
|
||||
position: relative; /* Anchor pseudo-element. */
|
||||
display: block;
|
||||
padding: 1.5rem; /* Room for icon */
|
||||
border-bottom: 1px solid #333;
|
||||
font-size: 1rem
|
||||
|
||||
/* Plus icon. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .inline-block-create-button:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: var(--off-canvas-padding);
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
content: "";
|
||||
transform: translateY(-50%);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23bebebe' d='M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
#drupal-off-canvas-wrapper .inline-block-create-button:before {
|
||||
background: linktext;
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23bebebe' d='M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z'/%3e%3c/svg%3e");
|
||||
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23bebebe' d='M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z'/%3e%3c/svg%3e");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .inline-block-create-button,
|
||||
#drupal-off-canvas-wrapper .inline-block-list__item {
|
||||
margin: 0 calc(-1 * var(--off-canvas-padding));
|
||||
color: var(--off-canvas-text-color)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .inline-block-create-button:hover, #drupal-off-canvas-wrapper .inline-block-list__item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .inline-block-create-button:focus, #drupal-off-canvas-wrapper .inline-block-list__item:focus {
|
||||
outline-offset: -4px; /* Prevent outline from being cut off. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .inline-block-list {
|
||||
margin: 0 0 calc(2 * var(--off-canvas-vertical-spacing-unit));
|
||||
padding: 0;
|
||||
list-style: none
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .inline-block-list li {
|
||||
position: relative; /* Anchor throbber. */
|
||||
margin: 0;
|
||||
padding: calc(0.25 * var(--off-canvas-vertical-spacing-unit)) 0
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .inline-block-list li:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
|
||||
/* This is the <a> tag. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .inline-block-list__item {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
padding: calc(2 * var(--off-canvas-vertical-spacing-unit)) var(--off-canvas-padding);
|
||||
border-bottom: 1px solid var(--off-canvas-border-color);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
|
||||
/* Highlight the active block in the Move Block dialog. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .layout-builder-components-table__block-label--current {
|
||||
padding-left: 1.0625rem;
|
||||
border-left: solid 5px;
|
||||
}
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
/**
|
||||
* @file
|
||||
* Layout Builder styling for off-canvas UI.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
& .layout-selection {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
& li {
|
||||
position: relative; /* Anchor throbber. */
|
||||
padding: calc(0.25 * var(--off-canvas-vertical-spacing-unit));
|
||||
border-bottom: 1px solid var(--off-canvas-border-color);
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Horizontally align icon and text. */
|
||||
& a {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* This is the styling of the SVG within the layout selection list.
|
||||
*/
|
||||
& .layout-icon__region {
|
||||
fill: var(--off-canvas-text-color);
|
||||
stroke: transparent;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
fill: canvastext;
|
||||
}
|
||||
}
|
||||
|
||||
& .inline-block-create-button {
|
||||
--icon-size: 16px;
|
||||
|
||||
position: relative; /* Anchor pseudo-element. */
|
||||
display: block;
|
||||
padding: 24px;
|
||||
padding-inline-start: calc(2 * var(--off-canvas-padding) + var(--icon-size) / 2); /* Room for icon */
|
||||
border-bottom: 1px solid #333;
|
||||
font-size: 16px;
|
||||
|
||||
/* Plus icon. */
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: var(--off-canvas-padding);
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
content: "";
|
||||
transform: translateY(-50%);
|
||||
background-image: url(../../../misc/icons/bebebe/plus.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: linktext;
|
||||
mask-image: url(../../../misc/icons/bebebe/plus.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .inline-block-create-button,
|
||||
& .inline-block-list__item {
|
||||
margin: 0 calc(-1 * var(--off-canvas-padding));
|
||||
color: var(--off-canvas-text-color);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-offset: -4px; /* Prevent outline from being cut off. */
|
||||
}
|
||||
}
|
||||
|
||||
& .inline-block-list {
|
||||
margin: 0 0 calc(2 * var(--off-canvas-vertical-spacing-unit));
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
& li {
|
||||
position: relative; /* Anchor throbber. */
|
||||
margin: 0;
|
||||
padding: calc(0.25 * var(--off-canvas-vertical-spacing-unit)) 0;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* This is the <a> tag. */
|
||||
& .inline-block-list__item {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
padding: calc(2 * var(--off-canvas-vertical-spacing-unit)) var(--off-canvas-padding);
|
||||
border-bottom: 1px solid var(--off-canvas-border-color);
|
||||
}
|
||||
|
||||
/* Highlight the active block in the Move Block dialog. */
|
||||
& .layout-builder-components-table__block-label--current {
|
||||
padding-left: 17px;
|
||||
border-left: solid 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ drupal.layout_builder:
|
|||
css:
|
||||
theme:
|
||||
css/layout-builder.css: {}
|
||||
css/off-canvas.css: {}
|
||||
js:
|
||||
js/layout-builder.js: {}
|
||||
dependencies:
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@ class OffCanvasDialogTest extends BrowserTestBase {
|
|||
'drupalOffCanvasPosition' => $position ?: 'side',
|
||||
'buttons' => [],
|
||||
'dialogClass' => 'ui-dialog-off-canvas ui-dialog-position-' . ($position ?: 'side'),
|
||||
'classes' => ['ui-dialog-content' => 'drupal-off-canvas-reset'],
|
||||
'width' => 300,
|
||||
],
|
||||
'effect' => 'fade',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,246 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styling for the Workspaces off-canvas user interface.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog {
|
||||
padding-bottom: calc(var(--off-canvas-padding) / 2)
|
||||
}
|
||||
|
||||
@media (min-width: 47.9375rem) {
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-content > div {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog {
|
||||
|
||||
/**
|
||||
* The Workspace UI hides the titlebar, but we need to show and correctly
|
||||
* position the close button that is nested within it.
|
||||
*/
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar {
|
||||
all: revert
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
|
||||
right: 1em
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
|
||||
left: 1em
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
|
||||
top: 1em;
|
||||
z-index: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace {
|
||||
padding: 0 var(--off-canvas-padding)
|
||||
}
|
||||
|
||||
@media (min-width: 47.9375rem) {
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-basis: 12.5rem;
|
||||
flex-grow: 2;
|
||||
align-self: stretch;
|
||||
order: 1;
|
||||
padding: var(--off-canvas-padding) var(--off-canvas-padding) 0
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__title {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label {
|
||||
position: relative; /* Anchor icon pseudo-element. */
|
||||
padding: 1.125rem 3.125rem 0;
|
||||
color: #fff;
|
||||
font-size: 1.125rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.2
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
|
||||
left: 0
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
|
||||
right: 0
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
content: "";
|
||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3e %3cpath fill='%23F0A100' fill-rule='evenodd' d='M38,0 L2.002,0 C0.896716337,-1.37884559e-07 0.000552089742,0.895716475 0,2.001 L0,38.003 C0,39.105 0.899,40.003 2,40.003 L38,40.003 C39.103,40.003 40,39.103 40,38.003 L40,2.001 C40.000531,1.47031248 39.7900198,0.961193334 39.4148607,0.585846626 C39.0397016,0.210499918 38.5306877,-0.000265742306 38,0 Z M34.003,4 C35.105,4 36.003,4.899 36.003,6 C36.003,7.102 35.103,7.998 34.003,7.998 C32.9235903,7.96385326 32.0662376,7.07894966 32.0662376,5.999 C32.0662376,4.91905034 32.9235903,4.03414674 34.003,4 Z M26.003,4 C27.105,4 28.002,4.899 28.002,6 C28.002,7.102 27.102,7.998 26.002,7.998 C24.9225903,7.96385326 24.0652376,7.07894966 24.0652376,5.999 C24.0652376,4.91905034 24.9225903,4.03414674 26.002,4 L26.003,4 Z M18.002,4 C19.104,4 20.002,4.899 20.002,6 C20.002,7.102 19.102,7.998 18.002,7.998 C16.899,7.998 16.002,7.1 16.002,5.999 C16.0025521,4.89482104 16.8978209,3.99999986 18.002,4 Z M36.002,36.002 L4,36.002 L4,12.001 L36.002,12.001 L36.002,36.002 Z M8.805,32.002 L15.196,32.002 C15.4092125,32.0030667 15.6140295,31.9189775 15.764983,31.7683995 C15.9159365,31.6178215 16.0005357,31.4132145 16,31.2 L16,16.805 C16.0005341,16.5919596 15.916072,16.3875055 15.7653354,16.2369566 C15.6145988,16.0864077 15.4100395,16.0022004 15.197,16.003 L8.794,16.003 C8.581215,16.0027342 8.37706868,16.087145 8.22660684,16.2376068 C8.07614501,16.3880687 7.99173418,16.592215 7.992,16.805 L7.992,31.208 C7.99966319,31.6507223 8.36222028,32.0048063 8.805,32.002 Z M20.803,24.002 L31.206,24.002 C31.4190404,24.0025341 31.6234945,23.918072 31.7740434,23.7673354 C31.9245923,23.6165988 32.0087996,23.4120395 32.008,23.199 L32.008,16.797 C32.0085328,16.5841335 31.9242078,16.3798319 31.7736879,16.2293121 C31.6231681,16.0787922 31.4188665,15.9944672 31.206,15.995 L20.803,15.995 C20.5901335,15.9944672 20.3858319,16.0787922 20.2353121,16.2293121 C20.0847922,16.3798319 20.0004672,16.5841335 20.001,16.797 L20.001,23.199 C20.001,23.646 20.356,24.001 20.803,24.001 L20.803,24.002 Z M20.803,32.002 L31.206,32.002 C31.4188665,32.0025328 31.6231681,31.9182078 31.7736879,31.7676879 C31.9242078,31.6171681 32.0085328,31.4128665 32.008,31.2 L32.008,28.797 C32.0085328,28.5841335 31.9242078,28.3798319 31.7736879,28.2293121 C31.6231681,28.0787922 31.4188665,27.9944672 31.206,27.995 L20.803,27.995 C20.5901335,27.9944672 20.3858319,28.0787922 20.2353121,28.2293121 C20.0847922,28.3798319 20.0004672,28.5841335 20.001,28.797 L20.001,31.2 C20.001,31.647 20.356,32.002 20.803,32.002 Z'/%3e%3c/svg%3e") center center no-repeat;
|
||||
background-size: contain
|
||||
}
|
||||
|
||||
@media (min-width: 47.9375rem) {
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog {
|
||||
|
||||
/* This is the "Manage workspace" link that appears when you're on a non-default workspace. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__manage {
|
||||
display: block;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog {
|
||||
|
||||
/* This is the link to "View all workspaces". */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .all-workspaces {
|
||||
display: inline-block;
|
||||
padding: var(--off-canvas-padding);
|
||||
font-size: 0.875rem
|
||||
}
|
||||
|
||||
@media (min-width: 47.9375rem) {
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .all-workspaces {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
justify-self: end;
|
||||
padding: 0
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces > h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-row: 2;
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
grid-gap: 2px
|
||||
}
|
||||
|
||||
@media (min-width: 47.9375rem) {
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces ul {
|
||||
flex-direction: row
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces li {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 47.9375rem) {
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces {
|
||||
display: grid;
|
||||
flex-grow: 8;
|
||||
grid-template-columns: 1fr 1fr
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog {
|
||||
|
||||
/* This is the link to the workspace. */
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item {
|
||||
padding-left: 3.125rem
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item {
|
||||
padding-right: 3.125rem
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-height: 4.6875rem;
|
||||
padding-top: var(--off-canvas-padding);
|
||||
color: var(--off-canvas-text-color);
|
||||
outline-offset: -2px; /* Ensure focus outline doesn't overflow. */
|
||||
background-color: var(--off-canvas-background-color-light);
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:hover,
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:focus {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before {
|
||||
left: var(--off-canvas-padding)
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before {
|
||||
right: var(--off-canvas-padding)
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
content: "";
|
||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3e %3cpath fill='%23F0A100' fill-rule='evenodd' d='M38,0 L2.002,0 C0.896716337,-1.37884559e-07 0.000552089742,0.895716475 0,2.001 L0,38.003 C0,39.105 0.899,40.003 2,40.003 L38,40.003 C39.103,40.003 40,39.103 40,38.003 L40,2.001 C40.000531,1.47031248 39.7900198,0.961193334 39.4148607,0.585846626 C39.0397016,0.210499918 38.5306877,-0.000265742306 38,0 Z M34.003,4 C35.105,4 36.003,4.899 36.003,6 C36.003,7.102 35.103,7.998 34.003,7.998 C32.9235903,7.96385326 32.0662376,7.07894966 32.0662376,5.999 C32.0662376,4.91905034 32.9235903,4.03414674 34.003,4 Z M26.003,4 C27.105,4 28.002,4.899 28.002,6 C28.002,7.102 27.102,7.998 26.002,7.998 C24.9225903,7.96385326 24.0652376,7.07894966 24.0652376,5.999 C24.0652376,4.91905034 24.9225903,4.03414674 26.002,4 L26.003,4 Z M18.002,4 C19.104,4 20.002,4.899 20.002,6 C20.002,7.102 19.102,7.998 18.002,7.998 C16.899,7.998 16.002,7.1 16.002,5.999 C16.0025521,4.89482104 16.8978209,3.99999986 18.002,4 Z M36.002,36.002 L4,36.002 L4,12.001 L36.002,12.001 L36.002,36.002 Z M8.805,32.002 L15.196,32.002 C15.4092125,32.0030667 15.6140295,31.9189775 15.764983,31.7683995 C15.9159365,31.6178215 16.0005357,31.4132145 16,31.2 L16,16.805 C16.0005341,16.5919596 15.916072,16.3875055 15.7653354,16.2369566 C15.6145988,16.0864077 15.4100395,16.0022004 15.197,16.003 L8.794,16.003 C8.581215,16.0027342 8.37706868,16.087145 8.22660684,16.2376068 C8.07614501,16.3880687 7.99173418,16.592215 7.992,16.805 L7.992,31.208 C7.99966319,31.6507223 8.36222028,32.0048063 8.805,32.002 Z M20.803,24.002 L31.206,24.002 C31.4190404,24.0025341 31.6234945,23.918072 31.7740434,23.7673354 C31.9245923,23.6165988 32.0087996,23.4120395 32.008,23.199 L32.008,16.797 C32.0085328,16.5841335 31.9242078,16.3798319 31.7736879,16.2293121 C31.6231681,16.0787922 31.4188665,15.9944672 31.206,15.995 L20.803,15.995 C20.5901335,15.9944672 20.3858319,16.0787922 20.2353121,16.2293121 C20.0847922,16.3798319 20.0004672,16.5841335 20.001,16.797 L20.001,23.199 C20.001,23.646 20.356,24.001 20.803,24.001 L20.803,24.002 Z M20.803,32.002 L31.206,32.002 C31.4188665,32.0025328 31.6231681,31.9182078 31.7736879,31.7676879 C31.9242078,31.6171681 32.0085328,31.4128665 32.008,31.2 L32.008,28.797 C32.0085328,28.5841335 31.9242078,28.3798319 31.7736879,28.2293121 C31.6231681,28.0787922 31.4188665,27.9944672 31.206,27.995 L20.803,27.995 C20.5901335,27.9944672 20.3858319,28.0787922 20.2353121,28.2293121 C20.0847922,28.3798319 20.0004672,28.5841335 20.001,28.797 L20.001,31.2 C20.001,31.647 20.356,32.002 20.803,32.002 Z'/%3e%3c/svg%3e") center center no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace--default .active-workspace__label:before,
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item--default:before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e %3cpath fill='%2381C071' fill-rule='evenodd' d='M19,0 L1,0 C0.449,0 0,0.448 0,1 L0,19 C0,19.552 0.45,20 1,20 L19,20 C19.552,20 20,19.55 20,19 L20,1 C20,0.44771525 19.5522847,3.38176876e-17 19,0 Z M17.001,2 C17.553,2 18.001,2.45 18.001,3 C18.001,3.55 17.551,3.999 17.001,3.999 C16.451,3.999 16.001,3.549 16.001,2.999 C16.001,2.44671525 16.4487153,1.999 17.001,1.999 L17.001,2 Z M13.001,2 C13.552,2 14.001,2.45 14.001,3 C14.001,3.55 13.551,3.999 13.001,3.999 C12.4487153,3.999 12.001,3.55128475 12.001,2.999 C12.001,2.44671525 12.4487153,1.999 13.001,1.999 L13.001,2 Z M9.001,2 C9.552,2 10.001,2.45 10.001,3 C10.001,3.55 9.551,3.999 9.001,3.999 C8.44871525,3.999 8.001,3.55128475 8.001,2.999 C8.001,2.44671525 8.44871525,1.999 9.001,1.999 L9.001,2 Z M18.001,18 L2,18 L2,6 L18.001,6 L18.001,18 Z M4.402,16 L7.598,16 C7.70460623,16.0005334 7.80701477,15.9584887 7.88249152,15.8831997 C7.95796827,15.8079107 8.00026785,15.7056072 8,15.599 L8,8.402 C8.00026565,8.29574025 7.95824022,8.19374159 7.88319685,8.11851062 C7.80815349,8.04327965 7.70626008,8.00099967 7.6,8.001 L4.396,8.001 C4.28956674,8.00073358 4.18741595,8.04289612 4.11215603,8.11815603 C4.03689612,8.19341595 3.99473358,8.29556674 3.995,8.402 L3.995,15.603 C3.999,15.823 4.177,16 4.401,16 L4.402,16 Z M10.402,12 L15.603,12 C15.7094333,12.0002664 15.811584,11.9581039 15.886844,11.882844 C15.9621039,11.807584 16.0042664,11.7054333 16.004,11.599 L16.004,8.398 C16.0042664,8.29156674 15.9621039,8.18941595 15.886844,8.11415603 C15.811584,8.03889612 15.7094333,7.99673358 15.603,7.997 L10.402,7.997 C10.2957402,7.99673435 10.1937416,8.03875978 10.1185106,8.11380315 C10.0432796,8.18884651 10.0009997,8.29073992 10.001,8.397 L10.001,11.6 C10.001,11.824 10.178,12 10.401,12 L10.402,12 Z M10.402,16 L15.603,16 C15.7094333,16.0002664 15.811584,15.9581039 15.886844,15.882844 C15.9621039,15.807584 16.0042664,15.7054333 16.004,15.599 L16.004,14.398 C16.0042664,14.2915667 15.9621039,14.189416 15.886844,14.114156 C15.811584,14.0388961 15.7094333,13.9967336 15.603,13.997 L10.402,13.997 C10.2957402,13.9967343 10.1937416,14.0387598 10.1185106,14.1138031 C10.0432796,14.1888465 10.0009997,14.2907399 10.001,14.397 L10.001,15.6 C10.001,15.824 10.178,16 10.401,16 L10.402,16 Z'/%3e%3c/svg%3e"); /* Green icon. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__actions .button {
|
||||
margin: 0.625rem 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 47.9375rem) {
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog {
|
||||
height: 100% !important
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
/**
|
||||
* @file
|
||||
* Styling for the Workspaces off-canvas user interface.
|
||||
*/
|
||||
|
||||
@custom-media --workspace-layout-small (max-width: 767px);
|
||||
@custom-media --workspace-layout-large (min-width: 767px);
|
||||
|
||||
#drupal-off-canvas-wrapper.workspaces-dialog {
|
||||
padding-bottom: calc(var(--off-canvas-padding) / 2);
|
||||
|
||||
& .ui-dialog-content > div {
|
||||
@media (--workspace-layout-large) {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The Workspace UI hides the titlebar, but we need to show and correctly
|
||||
* position the close button that is nested within it.
|
||||
*/
|
||||
& .ui-dialog-titlebar {
|
||||
all: revert;
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
& .ui-dialog-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .ui-dialog-titlebar-close {
|
||||
inset-block-start: 1em;
|
||||
inset-inline-end: 1em;
|
||||
z-index: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .active-workspace {
|
||||
padding: 0 var(--off-canvas-padding);
|
||||
|
||||
@media (--workspace-layout-large) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-basis: 200px;
|
||||
flex-grow: 2;
|
||||
align-self: stretch;
|
||||
order: 1;
|
||||
padding: var(--off-canvas-padding) var(--off-canvas-padding) 0;
|
||||
}
|
||||
}
|
||||
|
||||
& .active-workspace__title {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& .active-workspace__label {
|
||||
position: relative; /* Anchor icon pseudo-element. */
|
||||
padding: 18px 50px 0;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
content: "";
|
||||
background: url("../icons/f0a100/ws_icon.svg") center center no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
@media (--workspace-layout-large) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* This is the "Manage workspace" link that appears when you're on a non-default workspace. */
|
||||
& .active-workspace__manage {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* This is the link to "View all workspaces". */
|
||||
& .all-workspaces {
|
||||
display: inline-block;
|
||||
padding: var(--off-canvas-padding);
|
||||
font-size: 14px;
|
||||
|
||||
@media (--workspace-layout-large) {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
justify-self: end;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& .workspaces {
|
||||
& > h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-row: 2;
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
gap: 2px;
|
||||
|
||||
@media (--workspace-layout-large) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
& li {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (--workspace-layout-large) {
|
||||
display: grid;
|
||||
flex-grow: 8;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* This is the link to the workspace. */
|
||||
& .workspaces__item {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-height: 75px;
|
||||
padding-block-start: var(--off-canvas-padding);
|
||||
padding-inline-start: 50px;
|
||||
color: var(--off-canvas-text-color);
|
||||
outline-offset: -2px; /* Ensure focus outline doesn't overflow. */
|
||||
background-color: var(--off-canvas-background-color-light);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
inset-inline-start: var(--off-canvas-padding);
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
content: "";
|
||||
background: url("../icons/f0a100/ws_icon.svg") center center no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
}
|
||||
|
||||
& .active-workspace--default .active-workspace__label:before,
|
||||
& .workspaces__item--default:before {
|
||||
background-image: url("../icons/81c071/ws_icon.svg"); /* Green icon. */
|
||||
}
|
||||
|
||||
& .active-workspace__actions .button {
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
@media (--workspace-layout-small) {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,17 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styling for the Workspaces overview table.
|
||||
*/
|
||||
|
||||
/** @todo Move to Claro theme before Workspaces is marked stable. */
|
||||
|
||||
tr.active-workspace {
|
||||
background-color: #ebeae4;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
/**
|
||||
* @file
|
||||
* Styling for the Workspaces overview table.
|
||||
*/
|
||||
|
||||
/** @todo Move to Claro theme before Workspaces is marked stable. */
|
||||
tr.active-workspace {
|
||||
background-color: #ebeae4;
|
||||
}
|
||||
|
|
@ -1,36 +1,36 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styling for Workspaces module's toolbar tab.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @todo Remove this after https://www.drupal.org/project/drupal/issues/2986056
|
||||
* has been solved.
|
||||
*/
|
||||
.workspaces-dialog #drupal-off-canvas * {
|
||||
background: initial;
|
||||
}
|
||||
.workspaces-dialog #drupal-off-canvas {
|
||||
background: #444;
|
||||
}
|
||||
/* Toolbar tab */
|
||||
|
||||
/* Tab appearance. */
|
||||
.toolbar .toolbar-bar .workspaces-toolbar-tab {
|
||||
color: #000;
|
||||
background-color: #e09600;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-bar .workspaces-toolbar-tab--is-default {
|
||||
background-color: #81c071;
|
||||
}
|
||||
.toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {
|
||||
float: right; /* LTR */
|
||||
|
||||
[dir="ltr"] .toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {
|
||||
float: right;
|
||||
}
|
||||
|
||||
[dir="rtl"] .toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {
|
||||
float: left;
|
||||
}
|
||||
|
||||
@media (min-width: 16.5em) {
|
||||
.toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {
|
||||
@media (min-width: 16.5rem) {
|
||||
[dir="ltr"] .toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {
|
||||
float: right;
|
||||
}
|
||||
[dir="rtl"] .toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {
|
||||
|
|
@ -38,259 +38,64 @@
|
|||
}
|
||||
}
|
||||
|
||||
.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
/* Link within the toolbar tab. */
|
||||
|
||||
[dir="ltr"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
[dir="rtl"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
|
||||
text-align: right;
|
||||
}
|
||||
.toolbar-oriented .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
|
||||
width: auto;
|
||||
text-align: initial;
|
||||
|
||||
.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: inherit
|
||||
}
|
||||
|
||||
.toolbar-oriented .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
|
||||
width: auto;
|
||||
text-align: initial
|
||||
}
|
||||
|
||||
.toolbar .toolbar-icon-workspace:before {
|
||||
background-image: url("../icons/000000/workspaces.svg");
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e %3cpath d='M14,12 L16,12 L16,0 L4,0 L4,2 L14,2 L14,12 Z M0,4 L12,4 L12,16 L0,16 L0,4 Z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Off canvas dialog */
|
||||
.workspaces-dialog.ui-dialog-off-canvas a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.workspaces-dialog.ui-dialog-off-canvas #drupal-off-canvas,
|
||||
.workspaces-dialog.ui-dialog-off-canvas {
|
||||
padding: 0;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.workspaces-dialog.ui-widget.ui-widget-content {
|
||||
height: 100% !important;
|
||||
border: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
|
||||
top: 1em;
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar .ui-button {
|
||||
z-index: 101;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .active-workspace {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 70px;
|
||||
padding: 20px;
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .active-workspace__title {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .active-workspace__label {
|
||||
padding: 0.9em 3.2rem 1em;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .active-workspace__label span {
|
||||
color: #fff;
|
||||
font-size: 1.285em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .active-workspace__manage {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
outline-color: currentColor;
|
||||
font-size: 0.9286em;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .active-workspace__button {
|
||||
padding: 5px 22px;
|
||||
color: #fff;
|
||||
border: solid 1px #1e5c90;
|
||||
border-radius: 20px;
|
||||
background-image: linear-gradient(to bottom, #007bc6, #0071b8);
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .active-workspace__button:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .all-workspaces {
|
||||
display: inline-block;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .workspaces__list h3 {
|
||||
padding-left: 20px;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas .workspaces__list h3 {
|
||||
padding: 0 20px 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .workspaces ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .workspaces li {
|
||||
flex: 1;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .workspaces__item {
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
height: 73px;
|
||||
margin-right: 1px;
|
||||
padding: 20px 0 0 50px;
|
||||
color: #fff;
|
||||
background-color: #555;
|
||||
font-size: 0.929em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
[dir=rtl] #drupal-off-canvas .workspaces__item {
|
||||
padding: 20px 50px 0 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .workspaces__item:hover,
|
||||
#drupal-off-canvas .workspaces__item:focus {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .active-workspace__label:before,
|
||||
#drupal-off-canvas .workspaces__item:before {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
content: "";
|
||||
background: url("../icons/f0a100/ws_icon.svg") center center no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .active-workspace--default .active-workspace__label:before,
|
||||
#drupal-off-canvas .workspaces__item--default:before {
|
||||
background-image: url("../icons/81c071/ws_icon.svg");
|
||||
}
|
||||
|
||||
[dir=rtl] #drupal-off-canvas .active-workspace__label:before,
|
||||
[dir=rtl] #drupal-off-canvas .workspaces__item:before {
|
||||
right: 20px;
|
||||
left: initial;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .active-workspace__label:before {
|
||||
left: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 766px) {
|
||||
@media all and (max-width: 47.875rem) {
|
||||
.toolbar-oriented .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
|
||||
width: auto;
|
||||
max-width: 8em;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
|
||||
overflow: hidden;
|
||||
[dir="ltr"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
|
||||
padding-left: 2.75em;
|
||||
padding-right: 1.3333em;
|
||||
padding-left: 2.75em; /* LTR */
|
||||
white-space: nowrap;
|
||||
text-indent: 0;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
[dir=rtl] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
|
||||
|
||||
[dir="rtl"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
|
||||
padding-right: 2.75em;
|
||||
padding-left: 1.3333em;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-indent: 0;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
[dir="ltr"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
|
||||
left: 0.6667em;
|
||||
}
|
||||
|
||||
[dir="rtl"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
|
||||
right: 0.6667em;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
|
||||
left: 0.6667em; /* LTR */
|
||||
width: 20px;
|
||||
width: 1.25rem;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
[dir=rtl] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
|
||||
right: 0.6667em;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 767px) {
|
||||
.workspaces-dialog.ui-widget.ui-widget-content {
|
||||
height: 161px !important;
|
||||
}
|
||||
|
||||
/* The extra div is added by Drupal.theme.ajaxWrapperMultipleRootElements
|
||||
* because we are inserting multiple root elements. */
|
||||
.workspaces-dialog #drupal-off-canvas > div {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .active-workspace {
|
||||
flex-basis: 200px;
|
||||
flex-grow: 2;
|
||||
box-sizing: content-box;
|
||||
min-height: 140px;
|
||||
padding: 20px 40px 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .active-workspace__label:before {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
[dir=rtl] #drupal-off-canvas .active-workspace__label:before {
|
||||
right: 40px;
|
||||
left: initial;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .workspaces {
|
||||
position: relative;
|
||||
flex-grow: 8;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .all-workspaces {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[dir=rtl] #drupal-off-canvas .all-workspaces {
|
||||
right: initial;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .workspaces ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .workspaces li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
/**
|
||||
* @file
|
||||
* Styling for Workspaces module's toolbar tab.
|
||||
*/
|
||||
|
||||
/* Toolbar tab */
|
||||
.toolbar .toolbar-bar .workspaces-toolbar-tab {
|
||||
color: #000;
|
||||
background-color: #e09600;
|
||||
}
|
||||
.toolbar .toolbar-bar .workspaces-toolbar-tab--is-default {
|
||||
background-color: #81c071;
|
||||
}
|
||||
.toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {
|
||||
float: inline-end;
|
||||
}
|
||||
|
||||
@media (min-width: 264px) {
|
||||
.toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {
|
||||
float: inline-end;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link within the toolbar tab. */
|
||||
.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
text-align: start;
|
||||
color: inherit;
|
||||
|
||||
@nest .toolbar-oriented & {
|
||||
width: auto;
|
||||
text-align: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar .toolbar-icon-workspace:before {
|
||||
background-image: url("../icons/000000/workspaces.svg");
|
||||
}
|
||||
|
||||
@media all and (max-width: 766px) {
|
||||
.toolbar-oriented .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
|
||||
width: auto;
|
||||
max-width: 8em;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
|
||||
overflow: hidden;
|
||||
padding-inline: 2.75em 1.3333em;
|
||||
white-space: nowrap;
|
||||
text-indent: 0;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
|
||||
inset-inline-start: 0.6667em;
|
||||
width: 20px;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -308,7 +308,7 @@ class WorkspaceListBuilder extends EntityListBuilder {
|
|||
['query' => ['destination' => $active_workspace->toUrl('collection')->toString()]]
|
||||
),
|
||||
'#attributes' => [
|
||||
'class' => ['button', 'active-workspace__button'],
|
||||
'class' => ['button', 'button--primary', 'active-workspace__button'],
|
||||
],
|
||||
];
|
||||
}
|
||||
|
|
@ -326,7 +326,7 @@ class WorkspaceListBuilder extends EntityListBuilder {
|
|||
]
|
||||
),
|
||||
'#attributes' => [
|
||||
'class' => ['button', 'active-workspace__button'],
|
||||
'class' => ['button', 'button--primary', 'active-workspace__button'],
|
||||
],
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ drupal.workspaces.toolbar:
|
|||
version: VERSION
|
||||
css:
|
||||
theme:
|
||||
css/workspaces.off-canvas.css: {}
|
||||
css/workspaces.toolbar.css: {}
|
||||
drupal.workspaces.overview:
|
||||
version: VERSION
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ class Stable9LibraryOverrideTest extends StableLibraryOverrideTestBase {
|
|||
* @var string[]
|
||||
*/
|
||||
protected $librariesToSkip = [
|
||||
'core/drupal.dialog.off_canvas',
|
||||
'layout_builder/drupal.layout_builder',
|
||||
'views/views.responsive-grid',
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@ class StableLibraryOverrideTest extends StableLibraryOverrideTestBase {
|
|||
* @var string[]
|
||||
*/
|
||||
protected $librariesToSkip = [
|
||||
'core/drupal.dialog.off_canvas',
|
||||
'layout_builder/drupal.layout_builder',
|
||||
'views/views.responsive-grid',
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ class OpenOffCanvasDialogCommandTest extends UnitTestCase {
|
|||
'drupalAutoButtons' => FALSE,
|
||||
'buttons' => [],
|
||||
'dialogClass' => 'ui-dialog-off-canvas ui-dialog-position-' . $position,
|
||||
'classes' => ['ui-dialog-content' => 'drupal-off-canvas-reset'],
|
||||
'width' => 300,
|
||||
'drupalOffCanvasPosition' => $position,
|
||||
],
|
||||
|
|
|
|||
|
|
@ -37,11 +37,6 @@ libraries-override:
|
|||
theme:
|
||||
css/system.admin.css: false
|
||||
|
||||
core/drupal.dialog.off_canvas:
|
||||
css:
|
||||
base:
|
||||
misc/dialog/off-canvas.theme.css: css/base/off-canvas.theme.css
|
||||
|
||||
core/drupal.dropbutton:
|
||||
css:
|
||||
component:
|
||||
|
|
|
|||
|
|
@ -1,87 +0,0 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styling for the off-canvas ui dialog.
|
||||
*
|
||||
* Contains overrides for jQuery UI dialog.
|
||||
*/
|
||||
|
||||
/* Style the dialog-off-canvas container. */
|
||||
|
||||
.ui-dialog.ui-dialog-off-canvas {
|
||||
/* Layer the dialog just under the toolbar. */
|
||||
z-index: var(--jui-dialog-off-canvas-z-index);
|
||||
padding: 0;
|
||||
color: #ddd;
|
||||
border-radius: 0;
|
||||
background: #444;
|
||||
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
|
||||
}
|
||||
|
||||
.ui-widget.ui-dialog.ui-dialog-off-canvas {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* Style the off-canvas dialog header. */
|
||||
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
|
||||
padding: var(--space-s) var(--jui-dialog-off-canvas-close-button-reserved-space) var(--space-s) var(--space-m); /* LTR */
|
||||
border: 0;
|
||||
border-bottom: 1px solid #000;
|
||||
border-radius: 0;
|
||||
background: #2d2d2d;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
|
||||
padding-right: var(--space-m);
|
||||
padding-left: var(--jui-dialog-off-canvas-close-button-reserved-space);
|
||||
}
|
||||
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
|
||||
/* Push the text away from the icon. */
|
||||
padding-left: calc(var(--space-m) + var(--space-s)); /* LTR */
|
||||
/* Ensure that long titles are not truncated. */
|
||||
white-space: normal;
|
||||
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 50%; /* LTR */
|
||||
background-size: 1.25rem 1.25rem;
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
|
||||
padding-right: calc(var(--space-m) + var(--space-s));
|
||||
padding-left: 0;
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
|
||||
margin-right: var(--space-m);
|
||||
margin-left: var(--space-m);
|
||||
}
|
||||
|
||||
/* Override default styling from jQuery UI. */
|
||||
|
||||
#drupal-off-canvas .ui-state-default,
|
||||
#drupal-off-canvas .ui-widget-content .ui-state-default,
|
||||
#drupal-off-canvas .ui-widget-header .ui-state-default {
|
||||
color: #333;
|
||||
border: 0;
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .ui-widget-content a {
|
||||
color: var(--color-blue-200);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .form-actions {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Styling for the off-canvas ui dialog.
|
||||
*
|
||||
* Contains overrides for jQuery UI dialog.
|
||||
*/
|
||||
|
||||
/* Style the dialog-off-canvas container. */
|
||||
.ui-dialog.ui-dialog-off-canvas {
|
||||
/* Layer the dialog just under the toolbar. */
|
||||
z-index: var(--jui-dialog-off-canvas-z-index);
|
||||
padding: 0;
|
||||
color: #ddd;
|
||||
border-radius: 0;
|
||||
background: #444;
|
||||
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
|
||||
}
|
||||
.ui-widget.ui-dialog.ui-dialog-off-canvas {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* Style the off-canvas dialog header. */
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
|
||||
padding: var(--space-s) var(--jui-dialog-off-canvas-close-button-reserved-space) var(--space-s) var(--space-m); /* LTR */
|
||||
border: 0;
|
||||
border-bottom: 1px solid #000;
|
||||
border-radius: 0;
|
||||
background: #2d2d2d;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
|
||||
padding-right: var(--space-m);
|
||||
padding-left: var(--jui-dialog-off-canvas-close-button-reserved-space);
|
||||
}
|
||||
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
|
||||
/* Push the text away from the icon. */
|
||||
padding-left: calc(var(--space-m) + var(--space-s)); /* LTR */
|
||||
/* Ensure that long titles are not truncated. */
|
||||
white-space: normal;
|
||||
background: transparent url(../../../../misc/icons/ffffff/pencil.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 50%; /* LTR */
|
||||
background-size: 1.25rem 1.25rem;
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
|
||||
padding-right: calc(var(--space-m) + var(--space-s));
|
||||
padding-left: 0;
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
|
||||
margin-right: var(--space-m);
|
||||
margin-left: var(--space-m);
|
||||
}
|
||||
|
||||
/* Override default styling from jQuery UI. */
|
||||
#drupal-off-canvas .ui-state-default,
|
||||
#drupal-off-canvas .ui-widget-content .ui-state-default,
|
||||
#drupal-off-canvas .ui-widget-header .ui-state-default {
|
||||
color: #333;
|
||||
border: 0;
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: normal;
|
||||
}
|
||||
#drupal-off-canvas .ui-widget-content a {
|
||||
color: var(--color-blue-200);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .form-actions {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Settings tray specific styles.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Media query breakpoints.
|
||||
* Processed by postcss/postcss-custom-media.
|
||||
*/
|
||||
|
||||
/* Navigation related breakpoints */
|
||||
|
||||
/* Grid related breakpoints */
|
||||
|
||||
/* Grid shifts from 6 to 14 columns. */
|
||||
|
||||
/* Width of the entire grid maxes out. */
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas .form-type-boolean {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas .form-type-boolean {
|
||||
margin-right: 0
|
||||
}
|
||||
|
||||
#drupal-off-canvas .form-type-boolean {
|
||||
line-height: var(--line-height-s)
|
||||
}
|
||||
|
||||
#drupal-off-canvas .form-type-boolean input[type="checkbox"],
|
||||
#drupal-off-canvas .form-type-boolean input[type="radio"] {
|
||||
float: none;
|
||||
width: var(--sp0-75);
|
||||
height: var(--sp0-75);
|
||||
transform: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas .form-type-boolean .form-item__description {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas .form-type-boolean .form-item__description {
|
||||
margin-right: 0
|
||||
}
|
||||
|
||||
#drupal-off-canvas {
|
||||
|
||||
/* Necessary for Safari. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas .olivero-details {
|
||||
border-top: solid 1px rgba(255, 255, 255, 0.25);
|
||||
border-bottom: solid 1px rgba(255, 255, 255, 0.25);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .olivero-details__wrapper {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas {
|
||||
|
||||
/* Necessary for Safari. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas .olivero-details__summary {
|
||||
display: block;
|
||||
list-style: initial
|
||||
}
|
||||
|
||||
#drupal-off-canvas .olivero-details__summary:focus {
|
||||
outline: solid 1px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .olivero-details__summary:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .olivero-details__summary::-webkit-details-marker {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .olivero-details__summary {
|
||||
|
||||
/* Necessary for IE11. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas .olivero-details__summary .details-title:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .olivero-details__summary {
|
||||
|
||||
/* Necessary for Firefox. */
|
||||
}
|
||||
|
||||
@supports (list-style-type: disclosure-closed) {
|
||||
|
||||
#drupal-off-canvas .olivero-details__summary {
|
||||
display: list-item;
|
||||
list-style-position: inside;
|
||||
list-style-type: disclosure-closed
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas {
|
||||
|
||||
/* Necessary for Firefox. */
|
||||
}
|
||||
|
||||
@supports (list-style-type: disclosure-open) {
|
||||
|
||||
#drupal-off-canvas .olivero-details[open] .olivero-details__summary {
|
||||
list-style-type: disclosure-open
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas {
|
||||
|
||||
/* Necessary for Safari. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas div {
|
||||
display: block;
|
||||
color: #ddd;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Settings tray specific styles.
|
||||
*/
|
||||
|
||||
@import "../base/media-queries.pcss.css";
|
||||
|
||||
#drupal-off-canvas {
|
||||
& .form-type-boolean {
|
||||
margin-inline-start: 0;
|
||||
line-height: var(--line-height-s);
|
||||
|
||||
& input[type="checkbox"],
|
||||
& input[type="radio"] {
|
||||
float: none;
|
||||
width: var(--sp0-75);
|
||||
height: var(--sp0-75);
|
||||
transform: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& .form-item__description {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Necessary for Safari. */
|
||||
& .olivero-details {
|
||||
border-top: solid 1px rgba(255, 255, 255, 0.25);
|
||||
border-bottom: solid 1px rgba(255, 255, 255, 0.25);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
& .olivero-details__wrapper {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Necessary for Safari. */
|
||||
& .olivero-details__summary {
|
||||
display: block;
|
||||
list-style: initial;
|
||||
|
||||
&:focus {
|
||||
outline: solid 1px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Necessary for IE11. */
|
||||
& .details-title:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Necessary for Firefox. */
|
||||
@supports (list-style-type: disclosure-closed) {
|
||||
display: list-item;
|
||||
list-style-position: inside;
|
||||
list-style-type: disclosure-closed;
|
||||
}
|
||||
}
|
||||
|
||||
/* Necessary for Firefox. */
|
||||
& .olivero-details[open] .olivero-details__summary {
|
||||
@supports (list-style-type: disclosure-open) {
|
||||
list-style-type: disclosure-open;
|
||||
}
|
||||
}
|
||||
|
||||
/* Necessary for Safari. */
|
||||
& div {
|
||||
display: block;
|
||||
color: #ddd;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
|
@ -63,8 +63,6 @@ libraries-extend:
|
|||
- olivero/details
|
||||
core/drupal.dialog:
|
||||
- olivero/drupal.dialog
|
||||
core/drupal.dialog.off_canvas:
|
||||
- olivero/dialog.off_canvas
|
||||
core/drupal.progress:
|
||||
- olivero/progress
|
||||
layout_discovery/onecol:
|
||||
|
|
|
|||
|
|
@ -110,12 +110,6 @@ details:
|
|||
theme:
|
||||
css/components/details.css: {}
|
||||
|
||||
dialog.off_canvas:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/components/off-canvas.css: {}
|
||||
|
||||
dropbutton:
|
||||
version: VERSION
|
||||
css:
|
||||
|
|
|
|||
|
|
@ -1,399 +0,0 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Set base styles for the off-canvas dialog.
|
||||
*/
|
||||
|
||||
/* Set some global attributes. */
|
||||
|
||||
#drupal-off-canvas {
|
||||
color: #ddd;
|
||||
background: #444;
|
||||
}
|
||||
|
||||
/**
|
||||
* All HTML elements that could be used in off-canvas except div, bdo, bdi,
|
||||
* data, svg, map and math.
|
||||
*
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
|
||||
*/
|
||||
|
||||
#drupal-off-canvas span,
|
||||
#drupal-off-canvas applet,
|
||||
#drupal-off-canvas object,
|
||||
#drupal-off-canvas iframe,
|
||||
#drupal-off-canvas h1,
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas p,
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas pre,
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas abbr,
|
||||
#drupal-off-canvas acronym,
|
||||
#drupal-off-canvas address,
|
||||
#drupal-off-canvas big,
|
||||
#drupal-off-canvas button,
|
||||
#drupal-off-canvas cite,
|
||||
#drupal-off-canvas code,
|
||||
#drupal-off-canvas del,
|
||||
#drupal-off-canvas dfn,
|
||||
#drupal-off-canvas em,
|
||||
#drupal-off-canvas img,
|
||||
#drupal-off-canvas ins,
|
||||
#drupal-off-canvas kbd,
|
||||
#drupal-off-canvas q,
|
||||
#drupal-off-canvas s,
|
||||
#drupal-off-canvas samp,
|
||||
#drupal-off-canvas small,
|
||||
#drupal-off-canvas strike,
|
||||
#drupal-off-canvas strong,
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup,
|
||||
#drupal-off-canvas tt,
|
||||
#drupal-off-canvas var,
|
||||
#drupal-off-canvas b,
|
||||
#drupal-off-canvas u,
|
||||
#drupal-off-canvas i,
|
||||
#drupal-off-canvas center,
|
||||
#drupal-off-canvas dl,
|
||||
#drupal-off-canvas dt,
|
||||
#drupal-off-canvas dd,
|
||||
#drupal-off-canvas ol,
|
||||
#drupal-off-canvas ul,
|
||||
#drupal-off-canvas li,
|
||||
#drupal-off-canvas fieldset,
|
||||
#drupal-off-canvas form,
|
||||
#drupal-off-canvas label,
|
||||
#drupal-off-canvas legend,
|
||||
#drupal-off-canvas table,
|
||||
#drupal-off-canvas caption,
|
||||
#drupal-off-canvas tbody,
|
||||
#drupal-off-canvas tfoot,
|
||||
#drupal-off-canvas thead,
|
||||
#drupal-off-canvas tr,
|
||||
#drupal-off-canvas th,
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas article,
|
||||
#drupal-off-canvas aside,
|
||||
#drupal-off-canvas canvas,
|
||||
#drupal-off-canvas details,
|
||||
#drupal-off-canvas embed,
|
||||
#drupal-off-canvas figure,
|
||||
#drupal-off-canvas figcaption,
|
||||
#drupal-off-canvas footer,
|
||||
#drupal-off-canvas header,
|
||||
#drupal-off-canvas hgroup,
|
||||
#drupal-off-canvas main,
|
||||
#drupal-off-canvas menu,
|
||||
#drupal-off-canvas meter,
|
||||
#drupal-off-canvas nav,
|
||||
#drupal-off-canvas output,
|
||||
#drupal-off-canvas progress,
|
||||
#drupal-off-canvas ruby,
|
||||
#drupal-off-canvas section,
|
||||
#drupal-off-canvas summary,
|
||||
#drupal-off-canvas time,
|
||||
#drupal-off-canvas mark,
|
||||
#drupal-off-canvas audio,
|
||||
#drupal-off-canvas video,
|
||||
#drupal-off-canvas input,
|
||||
#drupal-off-canvas select,
|
||||
#drupal-off-canvas textarea {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
}
|
||||
|
||||
/* Generic elements. */
|
||||
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas .link {
|
||||
cursor: pointer;
|
||||
transition: color 0.5s ease;
|
||||
text-decoration: none;
|
||||
color: #85bef4;
|
||||
border-bottom: none;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas a:focus,
|
||||
#drupal-off-canvas .link:focus,
|
||||
#drupal-off-canvas a:hover,
|
||||
#drupal-off-canvas .link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#drupal-off-canvas hr {
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#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-size: 1.625em;
|
||||
font-weight: bold;
|
||||
line-height: 1.875em;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas .heading-b {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.385em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas .heading-c {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.231em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas .heading-d {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.154em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas .heading-e {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.077em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas .heading-f {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.077em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas dl {
|
||||
margin: 0 0 1.25rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas dl dd,
|
||||
#drupal-off-canvas dl dl {
|
||||
margin-bottom: 0.625rem;
|
||||
margin-left: 1.25rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas dl dd,
|
||||
[dir="rtl"] #drupal-off-canvas dl dl {
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas blockquote {
|
||||
margin: 1em 2.5rem;
|
||||
}
|
||||
|
||||
#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 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;
|
||||
padding: 0.3125rem 0;
|
||||
border-bottom: 1px solid #333
|
||||
}
|
||||
|
||||
#drupal-off-canvas ul li:last-child, #drupal-off-canvas ol li:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas code {
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas pre {
|
||||
margin: 1.25rem 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#drupal-off-canvas details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#drupal-off-canvas summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
#drupal-off-canvas select::-ms-expand {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .visually-hidden.focusable:active,
|
||||
#drupal-off-canvas .visually-hidden.focusable:focus {
|
||||
position: static !important;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Some system classes. See system.admin.css. */
|
||||
|
||||
#drupal-off-canvas .panel {
|
||||
padding: 0.3125rem 0.3125rem 0.9375rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .panel__description {
|
||||
margin: 0 0 0.1875rem;
|
||||
padding: 2px 0 0.1875rem 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .compact-link {
|
||||
margin: 0 0 0.625rem 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 0.625rem 1.0625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas .messages {
|
||||
background-position: right 10px top 17px;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages abbr {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--status {
|
||||
color: #325e1c;
|
||||
background-color: #f3faef;
|
||||
background-image: url(../icons/73b355/check.svg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--warning {
|
||||
color: #734c00;
|
||||
background-color: #fdf8ed;
|
||||
background-image: url(../icons/e29700/warning.svg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--error {
|
||||
color: #a51b00;
|
||||
background-color: #fcf4f2;
|
||||
background-image: url(../icons/e32700/error.svg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--error div[role="alert"] {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -1,346 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Set base styles for the off-canvas dialog.
|
||||
*/
|
||||
|
||||
/* Set some global attributes. */
|
||||
#drupal-off-canvas {
|
||||
color: #ddd;
|
||||
background: #444;
|
||||
}
|
||||
/**
|
||||
* All HTML elements that could be used in off-canvas except div, bdo, bdi,
|
||||
* data, svg, map and math.
|
||||
*
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
|
||||
*/
|
||||
#drupal-off-canvas {
|
||||
& span,
|
||||
& applet,
|
||||
& object,
|
||||
& iframe,
|
||||
& h1,
|
||||
& h2,
|
||||
& h3,
|
||||
& h4,
|
||||
& h5,
|
||||
& h6,
|
||||
& p,
|
||||
& blockquote,
|
||||
& pre,
|
||||
& a,
|
||||
& abbr,
|
||||
& acronym,
|
||||
& address,
|
||||
& big,
|
||||
& button,
|
||||
& cite,
|
||||
& code,
|
||||
& del,
|
||||
& dfn,
|
||||
& em,
|
||||
& img,
|
||||
& ins,
|
||||
& kbd,
|
||||
& q,
|
||||
& s,
|
||||
& samp,
|
||||
& small,
|
||||
& strike,
|
||||
& strong,
|
||||
& sub,
|
||||
& sup,
|
||||
& tt,
|
||||
& var,
|
||||
& b,
|
||||
& u,
|
||||
& i,
|
||||
& center,
|
||||
& dl,
|
||||
& dt,
|
||||
& dd,
|
||||
& ol,
|
||||
& ul,
|
||||
& li,
|
||||
& fieldset,
|
||||
& form,
|
||||
& label,
|
||||
& legend,
|
||||
& table,
|
||||
& caption,
|
||||
& tbody,
|
||||
& tfoot,
|
||||
& thead,
|
||||
& tr,
|
||||
& th,
|
||||
& td,
|
||||
& article,
|
||||
& aside,
|
||||
& canvas,
|
||||
& details,
|
||||
& embed,
|
||||
& figure,
|
||||
& figcaption,
|
||||
& footer,
|
||||
& header,
|
||||
& hgroup,
|
||||
& main,
|
||||
& menu,
|
||||
& meter,
|
||||
& nav,
|
||||
& output,
|
||||
& progress,
|
||||
& ruby,
|
||||
& section,
|
||||
& summary,
|
||||
& time,
|
||||
& mark,
|
||||
& audio,
|
||||
& video,
|
||||
& input,
|
||||
& select,
|
||||
& textarea {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
/* Generic elements. */
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas .link {
|
||||
cursor: pointer;
|
||||
transition: color 0.5s ease;
|
||||
text-decoration: none;
|
||||
color: #85bef4;
|
||||
border-bottom: none;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas a:focus,
|
||||
#drupal-off-canvas .link:focus,
|
||||
#drupal-off-canvas a:hover,
|
||||
#drupal-off-canvas .link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#drupal-off-canvas hr {
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
}
|
||||
#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-size: 1.625em;
|
||||
font-weight: bold;
|
||||
line-height: 1.875em;
|
||||
}
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas .heading-b {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.385em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas .heading-c {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.231em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas .heading-d {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.154em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas .heading-e {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.077em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas .heading-f {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.077em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#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-bottom: 10px;
|
||||
margin-left: 20px; /* LTR */
|
||||
}
|
||||
[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 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;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #333;
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas code {
|
||||
margin: 20px 0;
|
||||
}
|
||||
#drupal-off-canvas pre {
|
||||
margin: 20px 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
#drupal-off-canvas details {
|
||||
display: block;
|
||||
}
|
||||
#drupal-off-canvas summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
#drupal-off-canvas select::-ms-expand {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
word-wrap: normal;
|
||||
}
|
||||
#drupal-off-canvas .visually-hidden.focusable:active,
|
||||
#drupal-off-canvas .visually-hidden.focusable:focus {
|
||||
position: static !important;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
width: auto;
|
||||
height: 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 {
|
||||
color: #325e1c;
|
||||
background-color: #f3faef;
|
||||
background-image: url(../icons/73b355/check.svg);
|
||||
}
|
||||
#drupal-off-canvas .messages--warning {
|
||||
color: #734c00;
|
||||
background-color: #fdf8ed;
|
||||
background-image: url(../icons/e29700/warning.svg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--error {
|
||||
color: #a51b00;
|
||||
background-color: #fcf4f2;
|
||||
background-image: url(../icons/e32700/error.svg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--error div[role="alert"] {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for buttons in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas button,
|
||||
#drupal-off-canvas .button {
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
line-height: normal;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
#drupal-off-canvas button.link {
|
||||
display: inline;
|
||||
transition: color 0.5s ease;
|
||||
color: #85bef4;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
}
|
||||
#drupal-off-canvas button.link:hover,
|
||||
#drupal-off-canvas button.link:focus {
|
||||
text-decoration: none;
|
||||
color: #46a0f5;
|
||||
}
|
||||
#drupal-off-canvas input[type="submit"].button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 4px 20px;
|
||||
cursor: pointer;
|
||||
transition: background 0.5s ease;
|
||||
text-align: center;
|
||||
color: #f5f5f5;
|
||||
border: 0;
|
||||
border-radius: 20em;
|
||||
background: #777;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
#drupal-off-canvas input[type="submit"].button:hover,
|
||||
#drupal-off-canvas input[type="submit"].button:focus,
|
||||
#drupal-off-canvas input[type="submit"].button:active {
|
||||
z-index: 10;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
#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 {
|
||||
margin-top: 15px;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
background: #277abd;
|
||||
}
|
||||
#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 {
|
||||
outline: none;
|
||||
background: #236aaf;
|
||||
}
|
||||
#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 {
|
||||
padding: 2px 1em;
|
||||
font-size: 13px;
|
||||
}
|
||||
#drupal-off-canvas .button:disabled,
|
||||
#drupal-off-canvas .button:disabled:active,
|
||||
#drupal-off-canvas .button.is-disabled,
|
||||
#drupal-off-canvas .button.is-disabled:active {
|
||||
cursor: default;
|
||||
color: #5c5c5c;
|
||||
border: 0;
|
||||
background: #555;
|
||||
font-weight: normal;
|
||||
}
|
||||
#drupal-off-canvas .button--danger {
|
||||
text-decoration: none;
|
||||
color: #c72100;
|
||||
border-radius: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
#drupal-off-canvas .button--danger:hover,
|
||||
#drupal-off-canvas .button--danger:focus,
|
||||
#drupal-off-canvas .button--danger:active {
|
||||
text-decoration: none;
|
||||
color: #ff2a00;
|
||||
text-shadow: none;
|
||||
}
|
||||
#drupal-off-canvas .button--danger:disabled,
|
||||
#drupal-off-canvas .button--danger.is-disabled {
|
||||
cursor: default;
|
||||
color: #737373;
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* CSS for off-canvas dialog.
|
||||
*/
|
||||
|
||||
/* Position the off-canvas dialog container outside the right of the viewport. */
|
||||
.ui-dialog-off-canvas {
|
||||
overflow: visible;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Wrap the form that's inside the off-canvas dialog. */
|
||||
.ui-dialog-off-canvas .ui-dialog-content {
|
||||
/* Prevent horizontal scrollbar. */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
[dir="rtl"] .ui-dialog-off-canvas .ui-dialog-content {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Position the off-canvas dialog container outside the right of the viewport. */
|
||||
.ui-dialog-off-canvas {
|
||||
overflow: visible;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Wrap the form that's inside the off-canvas dialog. */
|
||||
.ui-dialog-off-canvas #drupal-off-canvas {
|
||||
/* Prevent horizontal scrollbar. */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
[dir="rtl"] .ui-dialog-off-canvas #drupal-off-canvas {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/*
|
||||
* Force the off-canvas dialog 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 off-canvas dialog is at 100% width stop the body from scrolling */
|
||||
.js-off-canvas-dialog-open {
|
||||
overflow-y: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for summary and details in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas details {
|
||||
display: block;
|
||||
}
|
||||
#drupal-off-canvas details,
|
||||
#drupal-off-canvas summary {
|
||||
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 {
|
||||
color: #ddd;
|
||||
background: #474747;
|
||||
}
|
||||
#drupal-off-canvas summary a {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
color: #ddd;
|
||||
}
|
||||
#drupal-off-canvas summary a:hover,
|
||||
#drupal-off-canvas summary a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
#drupal-off-canvas details,
|
||||
#drupal-off-canvas summary,
|
||||
#drupal-off-canvas .details-wrapper {
|
||||
/* Cancel out the padding of the parent. */
|
||||
margin: 0 -20px;
|
||||
padding: 0 20px;
|
||||
border-width: 0;
|
||||
}
|
||||
#drupal-off-canvas summary {
|
||||
padding: 10px 20px;
|
||||
transition: all 0.5s ease;
|
||||
text-shadow: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
#drupal-off-canvas summary:hover,
|
||||
#drupal-off-canvas summary:focus {
|
||||
background-color: #222;
|
||||
}
|
||||
#drupal-off-canvas details[open] {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#drupal-off-canvas details[open] > summary {
|
||||
color: #eee;
|
||||
background-color: #333;
|
||||
}
|
||||
#drupal-off-canvas details[open] > summary:hover {
|
||||
color: #fff;
|
||||
background-color: #222;
|
||||
}
|
||||
#drupal-off-canvas details .placeholder {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -1,291 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Styles for dropbuttons in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas .dropbutton-wrapper,
|
||||
#drupal-off-canvas .dropbutton-widget {
|
||||
position: static;
|
||||
display: block;
|
||||
transition: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
#drupal-off-canvas .dropbutton-widget {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: background 0.5s ease;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-radius: 1em;
|
||||
background: #277abd;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
#drupal-off-canvas .dropbutton-widget:hover {
|
||||
background: #2b8bd8;
|
||||
}
|
||||
|
||||
/*
|
||||
* Style dropbutton single.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas .dropbutton-single .dropbutton-action a {
|
||||
height: 2.2em;
|
||||
/* Overlap icon for trigger. */
|
||||
margin-top: -2em;
|
||||
padding: 0;
|
||||
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 {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
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 {
|
||||
color: #333;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
* 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;
|
||||
white-space: nowrap;
|
||||
text-indent: 110%;
|
||||
color: #fff;
|
||||
}
|
||||
#drupal-off-canvas .dropbutton-toggle button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border: 0 solid transparent;
|
||||
border-top-right-radius: 1em; /* LTR */
|
||||
border-bottom-right-radius: 1em; /* LTR */
|
||||
}
|
||||
#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;
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 0;
|
||||
color: #fff;
|
||||
border-width: 0.3333em 0.3333em 0;
|
||||
border-style: solid;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
line-height: 0;
|
||||
}
|
||||
#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;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-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 {
|
||||
position: relative;
|
||||
float: right; /* LTR */
|
||||
min-width: initial;
|
||||
max-width: initial;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
#drupal-off-canvas td .dropbutton-widget .dropbutton {
|
||||
overflow: hidden;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin: 0;
|
||||
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 {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
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 its container. */
|
||||
#drupal-off-canvas td ul.dropbutton li.edit {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
/* Make li text transparent above icon so it's clickable. */
|
||||
#drupal-off-canvas td .dropbutton-single li.edit.dropbutton-action > a {
|
||||
z-index: 1;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* Put pencil icon in place of hidden 'edit' text on single buttons. */
|
||||
#drupal-off-canvas td .dropbutton-single .edit:before {
|
||||
display: block;
|
||||
content: ".";
|
||||
color: transparent;
|
||||
background: transparent url(../../../images/core/icons/ffffff/pencil.svg) no-repeat center;
|
||||
background-size: 14px;
|
||||
}
|
||||
|
||||
/* Dropbutton when triggered expands to show secondary items. */
|
||||
#drupal-off-canvas .dropbutton-multiple.open {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* Create visual separation if there is an adjacent button. */
|
||||
#drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
|
||||
box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Triggered dropbutton expands to show secondary items. */
|
||||
#drupal-off-canvas .dropbutton-multiple.open,
|
||||
#drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Triggered dropbutton in td expands to show secondary items. */
|
||||
#drupal-off-canvas td .dropbutton-multiple.open .dropbutton,
|
||||
#drupal-off-canvas .dropbutton-multiple.open .dropbutton .secondary-action {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding-right: 1em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas td .dropbutton-multiple.open .dropbutton {
|
||||
padding-right: inherit;
|
||||
padding-left: 1em;
|
||||
}
|
||||
#drupal-off-canvas .dropbutton-multiple.open .dropbutton li a {
|
||||
padding: 2px 1em;
|
||||
}
|
||||
|
||||
/* When open, the toggle arrow points upward. */
|
||||
#drupal-off-canvas .dropbutton-multiple.open span.dropbutton-arrow {
|
||||
top: 2px;
|
||||
border-top-color: transparent;
|
||||
border-bottom: 0.3333em solid;
|
||||
}
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for forms in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas form {
|
||||
color: #ddd;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
}
|
||||
#drupal-off-canvas input[type="checkbox"] {
|
||||
-webkit-appearance: checkbox;
|
||||
}
|
||||
#drupal-off-canvas input[type="radio"] {
|
||||
-webkit-appearance: radio;
|
||||
}
|
||||
#drupal-off-canvas select:not([multiple]) {
|
||||
-webkit-appearance: menulist;
|
||||
-moz-appearance: menulist;
|
||||
}
|
||||
#drupal-off-canvas option {
|
||||
display: block;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
}
|
||||
#drupal-off-canvas label {
|
||||
color: #ddd;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
}
|
||||
#drupal-off-canvas .visually-hidden {
|
||||
width: 0;
|
||||
height: 0;
|
||||
letter-spacing: -2em;
|
||||
opacity: 0;
|
||||
}
|
||||
#drupal-off-canvas .description,
|
||||
#drupal-off-canvas .form-item .description,
|
||||
#drupal-off-canvas .details-description {
|
||||
margin-top: 5px;
|
||||
color: #ddd;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
}
|
||||
#drupal-off-canvas .form-item {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/* Set size and position for all inputs. */
|
||||
#drupal-off-canvas .form-select,
|
||||
#drupal-off-canvas .form-text,
|
||||
#drupal-off-canvas .form-tel,
|
||||
#drupal-off-canvas .form-email,
|
||||
#drupal-off-canvas .form-url,
|
||||
#drupal-off-canvas .form-search,
|
||||
#drupal-off-canvas .form-number,
|
||||
#drupal-off-canvas .form-color,
|
||||
#drupal-off-canvas .form-file,
|
||||
#drupal-off-canvas .form-textarea,
|
||||
#drupal-off-canvas .form-date,
|
||||
#drupal-off-canvas .form-time {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
margin: 5px 0 0 0;
|
||||
padding: 6px;
|
||||
color: #333;
|
||||
border-width: 1px;
|
||||
border-radius: 2px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
/* Reduce contrast for fields against dark background. */
|
||||
#drupal-off-canvas .form-text,
|
||||
#drupal-off-canvas .form-tel,
|
||||
#drupal-off-canvas .form-email,
|
||||
#drupal-off-canvas .form-url,
|
||||
#drupal-off-canvas .form-search,
|
||||
#drupal-off-canvas .form-number,
|
||||
#drupal-off-canvas .form-color,
|
||||
#drupal-off-canvas .form-file,
|
||||
#drupal-off-canvas .form-textarea,
|
||||
#drupal-off-canvas .form-date,
|
||||
#drupal-off-canvas .form-time {
|
||||
color: #595959;
|
||||
border-color: #333;
|
||||
background-color: #eee;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
#drupal-off-canvas .form-text:focus,
|
||||
#drupal-off-canvas .form-tel:focus,
|
||||
#drupal-off-canvas .form-email:focus,
|
||||
#drupal-off-canvas .form-url:focus,
|
||||
#drupal-off-canvas .form-search:focus,
|
||||
#drupal-off-canvas .form-number:focus,
|
||||
#drupal-off-canvas .form-color:focus,
|
||||
#drupal-off-canvas .form-file:focus,
|
||||
#drupal-off-canvas .form-textarea:focus,
|
||||
#drupal-off-canvas .form-date:focus,
|
||||
#drupal-off-canvas .form-time:focus {
|
||||
border-color: #40b6ff;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.125), 0 0 8px #40b6ff;
|
||||
}
|
||||
#drupal-off-canvas td .form-item,
|
||||
#drupal-off-canvas td .form-select {
|
||||
margin: 0;
|
||||
}
|
||||
#drupal-off-canvas .form-file {
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#drupal-off-canvas .form-actions {
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
#drupal-off-canvas .ui-autocomplete {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: default;
|
||||
background-color: white;
|
||||
}
|
||||
#drupal-off-canvas .ui-autocomplete li {
|
||||
display: block;
|
||||
}
|
||||
#drupal-off-canvas .ui-autocomplete li a {
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
color: #595959 !important;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for layouts in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
.layout-icon__region {
|
||||
fill: #f5f5f2;
|
||||
stroke: #666;
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Motion effects for off-canvas dialog.
|
||||
*
|
||||
* Motion effects are in a separate file so that they can be easily turned off
|
||||
* to improve performance if desired.
|
||||
*/
|
||||
|
||||
.dialog-off-canvas-main-canvas {
|
||||
transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease;
|
||||
}
|
||||
|
|
@ -1,685 +0,0 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Reset most HTML elements styles for the off-canvas dialog.
|
||||
*
|
||||
* This is a generic reset. Drupal-specific classes are reset in components.
|
||||
*/
|
||||
|
||||
/**
|
||||
* All HTML elements that could be used in off-canvas except div, bdo, bdi,
|
||||
* data, svg, map and math.
|
||||
*
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
|
||||
*/
|
||||
|
||||
#drupal-off-canvas span,
|
||||
#drupal-off-canvas applet,
|
||||
#drupal-off-canvas object,
|
||||
#drupal-off-canvas iframe,
|
||||
#drupal-off-canvas h1,
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas p,
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas pre,
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas abbr,
|
||||
#drupal-off-canvas acronym,
|
||||
#drupal-off-canvas address,
|
||||
#drupal-off-canvas big,
|
||||
#drupal-off-canvas button,
|
||||
#drupal-off-canvas cite,
|
||||
#drupal-off-canvas code,
|
||||
#drupal-off-canvas del,
|
||||
#drupal-off-canvas dfn,
|
||||
#drupal-off-canvas em,
|
||||
#drupal-off-canvas img,
|
||||
#drupal-off-canvas ins,
|
||||
#drupal-off-canvas kbd,
|
||||
#drupal-off-canvas q,
|
||||
#drupal-off-canvas s,
|
||||
#drupal-off-canvas samp,
|
||||
#drupal-off-canvas small,
|
||||
#drupal-off-canvas strike,
|
||||
#drupal-off-canvas strong,
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup,
|
||||
#drupal-off-canvas tt,
|
||||
#drupal-off-canvas var,
|
||||
#drupal-off-canvas b,
|
||||
#drupal-off-canvas u,
|
||||
#drupal-off-canvas i,
|
||||
#drupal-off-canvas center,
|
||||
#drupal-off-canvas dl,
|
||||
#drupal-off-canvas dt,
|
||||
#drupal-off-canvas dd,
|
||||
#drupal-off-canvas ol,
|
||||
#drupal-off-canvas ul,
|
||||
#drupal-off-canvas li,
|
||||
#drupal-off-canvas fieldset,
|
||||
#drupal-off-canvas form,
|
||||
#drupal-off-canvas label,
|
||||
#drupal-off-canvas legend,
|
||||
#drupal-off-canvas table,
|
||||
#drupal-off-canvas caption,
|
||||
#drupal-off-canvas tbody,
|
||||
#drupal-off-canvas tfoot,
|
||||
#drupal-off-canvas thead,
|
||||
#drupal-off-canvas tr,
|
||||
#drupal-off-canvas th,
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas article,
|
||||
#drupal-off-canvas aside,
|
||||
#drupal-off-canvas canvas,
|
||||
#drupal-off-canvas details,
|
||||
#drupal-off-canvas embed,
|
||||
#drupal-off-canvas figure,
|
||||
#drupal-off-canvas figcaption,
|
||||
#drupal-off-canvas footer,
|
||||
#drupal-off-canvas header,
|
||||
#drupal-off-canvas hgroup,
|
||||
#drupal-off-canvas main,
|
||||
#drupal-off-canvas menu,
|
||||
#drupal-off-canvas meter,
|
||||
#drupal-off-canvas nav,
|
||||
#drupal-off-canvas output,
|
||||
#drupal-off-canvas progress,
|
||||
#drupal-off-canvas ruby,
|
||||
#drupal-off-canvas section,
|
||||
#drupal-off-canvas summary,
|
||||
#drupal-off-canvas time,
|
||||
#drupal-off-canvas mark,
|
||||
#drupal-off-canvas audio,
|
||||
#drupal-off-canvas video,
|
||||
#drupal-off-canvas input,
|
||||
#drupal-off-canvas select,
|
||||
#drupal-off-canvas textarea {
|
||||
all: initial;
|
||||
box-sizing: border-box;
|
||||
text-shadow: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tap-highlight-color: initial
|
||||
}
|
||||
|
||||
#drupal-off-canvas span:after,
|
||||
#drupal-off-canvas span:before,
|
||||
#drupal-off-canvas applet:after,
|
||||
#drupal-off-canvas applet:before,
|
||||
#drupal-off-canvas object:after,
|
||||
#drupal-off-canvas object:before,
|
||||
#drupal-off-canvas iframe:after,
|
||||
#drupal-off-canvas iframe:before,
|
||||
#drupal-off-canvas h1:after,
|
||||
#drupal-off-canvas h1:before,
|
||||
#drupal-off-canvas h2:after,
|
||||
#drupal-off-canvas h2:before,
|
||||
#drupal-off-canvas h3:after,
|
||||
#drupal-off-canvas h3:before,
|
||||
#drupal-off-canvas h4:after,
|
||||
#drupal-off-canvas h4:before,
|
||||
#drupal-off-canvas h5:after,
|
||||
#drupal-off-canvas h5:before,
|
||||
#drupal-off-canvas h6:after,
|
||||
#drupal-off-canvas h6:before,
|
||||
#drupal-off-canvas p:after,
|
||||
#drupal-off-canvas p:before,
|
||||
#drupal-off-canvas blockquote:after,
|
||||
#drupal-off-canvas blockquote:before,
|
||||
#drupal-off-canvas pre:after,
|
||||
#drupal-off-canvas pre:before,
|
||||
#drupal-off-canvas a:after,
|
||||
#drupal-off-canvas a:before,
|
||||
#drupal-off-canvas abbr:after,
|
||||
#drupal-off-canvas abbr:before,
|
||||
#drupal-off-canvas acronym:after,
|
||||
#drupal-off-canvas acronym:before,
|
||||
#drupal-off-canvas address:after,
|
||||
#drupal-off-canvas address:before,
|
||||
#drupal-off-canvas big:after,
|
||||
#drupal-off-canvas big:before,
|
||||
#drupal-off-canvas button:after,
|
||||
#drupal-off-canvas button:before,
|
||||
#drupal-off-canvas cite:after,
|
||||
#drupal-off-canvas cite:before,
|
||||
#drupal-off-canvas code:after,
|
||||
#drupal-off-canvas code:before,
|
||||
#drupal-off-canvas del:after,
|
||||
#drupal-off-canvas del:before,
|
||||
#drupal-off-canvas dfn:after,
|
||||
#drupal-off-canvas dfn:before,
|
||||
#drupal-off-canvas em:after,
|
||||
#drupal-off-canvas em:before,
|
||||
#drupal-off-canvas img:after,
|
||||
#drupal-off-canvas img:before,
|
||||
#drupal-off-canvas ins:after,
|
||||
#drupal-off-canvas ins:before,
|
||||
#drupal-off-canvas kbd:after,
|
||||
#drupal-off-canvas kbd:before,
|
||||
#drupal-off-canvas q:after,
|
||||
#drupal-off-canvas q:before,
|
||||
#drupal-off-canvas s:after,
|
||||
#drupal-off-canvas s:before,
|
||||
#drupal-off-canvas samp:after,
|
||||
#drupal-off-canvas samp:before,
|
||||
#drupal-off-canvas small:after,
|
||||
#drupal-off-canvas small:before,
|
||||
#drupal-off-canvas strike:after,
|
||||
#drupal-off-canvas strike:before,
|
||||
#drupal-off-canvas strong:after,
|
||||
#drupal-off-canvas strong:before,
|
||||
#drupal-off-canvas sub:after,
|
||||
#drupal-off-canvas sub:before,
|
||||
#drupal-off-canvas sup:after,
|
||||
#drupal-off-canvas sup:before,
|
||||
#drupal-off-canvas tt:after,
|
||||
#drupal-off-canvas tt:before,
|
||||
#drupal-off-canvas var:after,
|
||||
#drupal-off-canvas var:before,
|
||||
#drupal-off-canvas b:after,
|
||||
#drupal-off-canvas b:before,
|
||||
#drupal-off-canvas u:after,
|
||||
#drupal-off-canvas u:before,
|
||||
#drupal-off-canvas i:after,
|
||||
#drupal-off-canvas i:before,
|
||||
#drupal-off-canvas center:after,
|
||||
#drupal-off-canvas center:before,
|
||||
#drupal-off-canvas dl:after,
|
||||
#drupal-off-canvas dl:before,
|
||||
#drupal-off-canvas dt:after,
|
||||
#drupal-off-canvas dt:before,
|
||||
#drupal-off-canvas dd:after,
|
||||
#drupal-off-canvas dd:before,
|
||||
#drupal-off-canvas ol:after,
|
||||
#drupal-off-canvas ol:before,
|
||||
#drupal-off-canvas ul:after,
|
||||
#drupal-off-canvas ul:before,
|
||||
#drupal-off-canvas li:after,
|
||||
#drupal-off-canvas li:before,
|
||||
#drupal-off-canvas fieldset:after,
|
||||
#drupal-off-canvas fieldset:before,
|
||||
#drupal-off-canvas form:after,
|
||||
#drupal-off-canvas form:before,
|
||||
#drupal-off-canvas label:after,
|
||||
#drupal-off-canvas label:before,
|
||||
#drupal-off-canvas legend:after,
|
||||
#drupal-off-canvas legend:before,
|
||||
#drupal-off-canvas table:after,
|
||||
#drupal-off-canvas table:before,
|
||||
#drupal-off-canvas caption:after,
|
||||
#drupal-off-canvas caption:before,
|
||||
#drupal-off-canvas tbody:after,
|
||||
#drupal-off-canvas tbody:before,
|
||||
#drupal-off-canvas tfoot:after,
|
||||
#drupal-off-canvas tfoot:before,
|
||||
#drupal-off-canvas thead:after,
|
||||
#drupal-off-canvas thead:before,
|
||||
#drupal-off-canvas tr:after,
|
||||
#drupal-off-canvas tr:before,
|
||||
#drupal-off-canvas th:after,
|
||||
#drupal-off-canvas th:before,
|
||||
#drupal-off-canvas td:after,
|
||||
#drupal-off-canvas td:before,
|
||||
#drupal-off-canvas article:after,
|
||||
#drupal-off-canvas article:before,
|
||||
#drupal-off-canvas aside:after,
|
||||
#drupal-off-canvas aside:before,
|
||||
#drupal-off-canvas canvas:after,
|
||||
#drupal-off-canvas canvas:before,
|
||||
#drupal-off-canvas details:after,
|
||||
#drupal-off-canvas details:before,
|
||||
#drupal-off-canvas embed:after,
|
||||
#drupal-off-canvas embed:before,
|
||||
#drupal-off-canvas figure:after,
|
||||
#drupal-off-canvas figure:before,
|
||||
#drupal-off-canvas figcaption:after,
|
||||
#drupal-off-canvas figcaption:before,
|
||||
#drupal-off-canvas footer:after,
|
||||
#drupal-off-canvas footer:before,
|
||||
#drupal-off-canvas header:after,
|
||||
#drupal-off-canvas header:before,
|
||||
#drupal-off-canvas hgroup:after,
|
||||
#drupal-off-canvas hgroup:before,
|
||||
#drupal-off-canvas main:after,
|
||||
#drupal-off-canvas main:before,
|
||||
#drupal-off-canvas menu:after,
|
||||
#drupal-off-canvas menu:before,
|
||||
#drupal-off-canvas meter:after,
|
||||
#drupal-off-canvas meter:before,
|
||||
#drupal-off-canvas nav:after,
|
||||
#drupal-off-canvas nav:before,
|
||||
#drupal-off-canvas output:after,
|
||||
#drupal-off-canvas output:before,
|
||||
#drupal-off-canvas progress:after,
|
||||
#drupal-off-canvas progress:before,
|
||||
#drupal-off-canvas ruby:after,
|
||||
#drupal-off-canvas ruby:before,
|
||||
#drupal-off-canvas section:after,
|
||||
#drupal-off-canvas section:before,
|
||||
#drupal-off-canvas summary:after,
|
||||
#drupal-off-canvas summary:before,
|
||||
#drupal-off-canvas time:after,
|
||||
#drupal-off-canvas time:before,
|
||||
#drupal-off-canvas mark:after,
|
||||
#drupal-off-canvas mark:before,
|
||||
#drupal-off-canvas audio:after,
|
||||
#drupal-off-canvas audio:before,
|
||||
#drupal-off-canvas video:after,
|
||||
#drupal-off-canvas video:before,
|
||||
#drupal-off-canvas input:after,
|
||||
#drupal-off-canvas input:before,
|
||||
#drupal-off-canvas select:after,
|
||||
#drupal-off-canvas select:before,
|
||||
#drupal-off-canvas textarea:after,
|
||||
#drupal-off-canvas textarea:before {
|
||||
all: initial;
|
||||
box-sizing: border-box;
|
||||
text-shadow: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tap-highlight-color: initial;
|
||||
}
|
||||
|
||||
/* Reset size and position on elements. */
|
||||
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas abbr,
|
||||
#drupal-off-canvas acronym,
|
||||
#drupal-off-canvas address,
|
||||
#drupal-off-canvas applet,
|
||||
#drupal-off-canvas article,
|
||||
#drupal-off-canvas aside,
|
||||
#drupal-off-canvas audio,
|
||||
#drupal-off-canvas b,
|
||||
#drupal-off-canvas big,
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas body,
|
||||
#drupal-off-canvas canvas,
|
||||
#drupal-off-canvas caption,
|
||||
#drupal-off-canvas cite,
|
||||
#drupal-off-canvas code,
|
||||
#drupal-off-canvas dd,
|
||||
#drupal-off-canvas del,
|
||||
#drupal-off-canvas dfn,
|
||||
#drupal-off-canvas dialog,
|
||||
#drupal-off-canvas dl,
|
||||
#drupal-off-canvas dt,
|
||||
#drupal-off-canvas em,
|
||||
#drupal-off-canvas embed,
|
||||
#drupal-off-canvas fieldset,
|
||||
#drupal-off-canvas figcaption,
|
||||
#drupal-off-canvas figure,
|
||||
#drupal-off-canvas footer,
|
||||
#drupal-off-canvas form,
|
||||
#drupal-off-canvas h1,
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas header,
|
||||
#drupal-off-canvas hgroup,
|
||||
#drupal-off-canvas hr,
|
||||
#drupal-off-canvas html,
|
||||
#drupal-off-canvas i,
|
||||
#drupal-off-canvas iframe,
|
||||
#drupal-off-canvas img,
|
||||
#drupal-off-canvas ins,
|
||||
#drupal-off-canvas kbd,
|
||||
#drupal-off-canvas label,
|
||||
#drupal-off-canvas legend,
|
||||
#drupal-off-canvas li,
|
||||
#drupal-off-canvas main,
|
||||
#drupal-off-canvas mark,
|
||||
#drupal-off-canvas menu,
|
||||
#drupal-off-canvas meter,
|
||||
#drupal-off-canvas nav,
|
||||
#drupal-off-canvas object,
|
||||
#drupal-off-canvas ol,
|
||||
#drupal-off-canvas output,
|
||||
#drupal-off-canvas p,
|
||||
#drupal-off-canvas pre,
|
||||
#drupal-off-canvas progress,
|
||||
#drupal-off-canvas q,
|
||||
#drupal-off-canvas rp,
|
||||
#drupal-off-canvas rt,
|
||||
#drupal-off-canvas s,
|
||||
#drupal-off-canvas samp,
|
||||
#drupal-off-canvas section,
|
||||
#drupal-off-canvas small,
|
||||
#drupal-off-canvas span,
|
||||
#drupal-off-canvas strike,
|
||||
#drupal-off-canvas strong,
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup,
|
||||
#drupal-off-canvas table,
|
||||
#drupal-off-canvas tbody,
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas tfoot,
|
||||
#drupal-off-canvas th,
|
||||
#drupal-off-canvas thead,
|
||||
#drupal-off-canvas time,
|
||||
#drupal-off-canvas tr,
|
||||
#drupal-off-canvas tt,
|
||||
#drupal-off-canvas u,
|
||||
#drupal-off-canvas ul,
|
||||
#drupal-off-canvas var,
|
||||
#drupal-off-canvas video,
|
||||
#drupal-off-canvas xmp {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Override the default (display: inline) for browsers that do not recognize HTML5 tags.
|
||||
* IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
|
||||
*/
|
||||
|
||||
#drupal-off-canvas article,
|
||||
#drupal-off-canvas aside,
|
||||
#drupal-off-canvas figcaption,
|
||||
#drupal-off-canvas figure,
|
||||
#drupal-off-canvas footer,
|
||||
#drupal-off-canvas header,
|
||||
#drupal-off-canvas hgroup,
|
||||
#drupal-off-canvas main,
|
||||
#drupal-off-canvas menu,
|
||||
#drupal-off-canvas nav,
|
||||
#drupal-off-canvas section {
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* Makes browsers agree.
|
||||
* IE + Opera = font-weight: bold.
|
||||
* Gecko + WebKit = font-weight: bolder.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas b,
|
||||
#drupal-off-canvas strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas em,
|
||||
#drupal-off-canvas i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#drupal-off-canvas img {
|
||||
vertical-align: middle;
|
||||
color: transparent;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas ul,
|
||||
#drupal-off-canvas ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* reset table styling. */
|
||||
|
||||
#drupal-off-canvas table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#drupal-off-canvas table thead,
|
||||
#drupal-off-canvas table tbody,
|
||||
#drupal-off-canvas table tbody tr:nth-child(even),
|
||||
#drupal-off-canvas table tbody tr:nth-child(odd),
|
||||
#drupal-off-canvas table tfoot {
|
||||
border: 0;
|
||||
background: transparent none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas th,
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas caption {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas q:before,
|
||||
#drupal-off-canvas q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup,
|
||||
#drupal-off-canvas small {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup {
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
#drupal-off-canvas sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
* For IE9. Without, occasionally draws shapes
|
||||
* outside the boundaries of <svg> rectangle.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas svg {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Specific resets for inputs. */
|
||||
|
||||
#drupal-off-canvas input[type="search"]::-webkit-search-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas input[type="checkbox"],
|
||||
#drupal-off-canvas input[type="radio"] {
|
||||
position: static;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas input:invalid,
|
||||
#drupal-off-canvas button:invalid,
|
||||
#drupal-off-canvas select:invalid,
|
||||
#drupal-off-canvas textarea:invalid,
|
||||
#drupal-off-canvas input:focus,
|
||||
#drupal-off-canvas button:focus,
|
||||
#drupal-off-canvas select:focus,
|
||||
#drupal-off-canvas textarea:focus,
|
||||
#drupal-off-canvas input[type="file"]:focus,
|
||||
#drupal-off-canvas input[type="file"]:active,
|
||||
#drupal-off-canvas input[type="radio"]:focus,
|
||||
#drupal-off-canvas input[type="radio"]:active,
|
||||
#drupal-off-canvas input[type="checkbox"]:focus,
|
||||
#drupal-off-canvas input[type="checkbox"]:active {
|
||||
z-index: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas input[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#drupal-off-canvas button,
|
||||
#drupal-off-canvas input[type="reset"],
|
||||
#drupal-off-canvas input[type="submit"],
|
||||
#drupal-off-canvas input[type="button"] {
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas button:hover,
|
||||
#drupal-off-canvas input[type="reset"]:hover,
|
||||
#drupal-off-canvas input[type="submit"]:hover,
|
||||
#drupal-off-canvas input[type="button"]:hover {
|
||||
text-decoration: none;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas button:active,
|
||||
#drupal-off-canvas input[type="reset"]:active,
|
||||
#drupal-off-canvas input[type="submit"]:active,
|
||||
#drupal-off-canvas input[type="button"]:active {
|
||||
border-color: gray;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas button::-moz-focus-inner,
|
||||
#drupal-off-canvas input[type="reset"]::-moz-focus-inner,
|
||||
#drupal-off-canvas input[type="submit"]::-moz-focus-inner,
|
||||
#drupal-off-canvas input[type="button"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas textarea,
|
||||
#drupal-off-canvas select,
|
||||
#drupal-off-canvas input[type="date"],
|
||||
#drupal-off-canvas input[type="datetime"],
|
||||
#drupal-off-canvas input[type="datetime-local"],
|
||||
#drupal-off-canvas input[type="email"],
|
||||
#drupal-off-canvas input[type="month"],
|
||||
#drupal-off-canvas input[type="number"],
|
||||
#drupal-off-canvas input[type="password"],
|
||||
#drupal-off-canvas input[type="search"],
|
||||
#drupal-off-canvas input[type="tel"],
|
||||
#drupal-off-canvas input[type="text"],
|
||||
#drupal-off-canvas input[type="time"],
|
||||
#drupal-off-canvas input[type="url"],
|
||||
#drupal-off-canvas input[type="week"] {
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas textarea[disabled],
|
||||
#drupal-off-canvas select[disabled],
|
||||
#drupal-off-canvas input[type="date"][disabled],
|
||||
#drupal-off-canvas input[type="datetime"][disabled],
|
||||
#drupal-off-canvas input[type="datetime-local"][disabled],
|
||||
#drupal-off-canvas input[type="email"][disabled],
|
||||
#drupal-off-canvas input[type="month"][disabled],
|
||||
#drupal-off-canvas input[type="number"][disabled],
|
||||
#drupal-off-canvas input[type="password"][disabled],
|
||||
#drupal-off-canvas input[type="search"][disabled],
|
||||
#drupal-off-canvas input[type="tel"][disabled],
|
||||
#drupal-off-canvas input[type="text"][disabled],
|
||||
#drupal-off-canvas input[type="time"][disabled],
|
||||
#drupal-off-canvas input[type="url"][disabled],
|
||||
#drupal-off-canvas input[type="week"][disabled] {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
#drupal-off-canvas input[type="hidden"] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#drupal-off-canvas button[disabled],
|
||||
#drupal-off-canvas input[disabled],
|
||||
#drupal-off-canvas select[disabled],
|
||||
#drupal-off-canvas select[disabled] option,
|
||||
#drupal-off-canvas select[disabled] optgroup,
|
||||
#drupal-off-canvas textarea[disabled] {
|
||||
cursor: default;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas input::placeholder,
|
||||
#drupal-off-canvas textarea::placeholder {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#drupal-off-canvas textarea,
|
||||
#drupal-off-canvas select[size],
|
||||
#drupal-off-canvas select[multiple] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#drupal-off-canvas select[size="0"],
|
||||
#drupal-off-canvas select[size="1"] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#drupal-off-canvas textarea {
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
min-height: 2.5rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
#drupal-off-canvas select[multiple] {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#drupal-off-canvas optgroup {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas optgroup::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas * button {
|
||||
overflow: visible;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
border: 1px solid gray;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas * textarea,
|
||||
#drupal-off-canvas * select,
|
||||
#drupal-off-canvas *:not(div) textarea,
|
||||
#drupal-off-canvas *:not(div) select {
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
color: black;
|
||||
border: 1px solid gray;
|
||||
background: white;
|
||||
}
|
||||
|
|
@ -1,478 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Reset most HTML elements styles for the off-canvas dialog.
|
||||
*
|
||||
* This is a generic reset. Drupal-specific classes are reset in components.
|
||||
*/
|
||||
|
||||
/**
|
||||
* All HTML elements that could be used in off-canvas except div, bdo, bdi,
|
||||
* data, svg, map and math.
|
||||
*
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
|
||||
*/
|
||||
#drupal-off-canvas {
|
||||
& span,
|
||||
& applet,
|
||||
& object,
|
||||
& iframe,
|
||||
& h1,
|
||||
& h2,
|
||||
& h3,
|
||||
& h4,
|
||||
& h5,
|
||||
& h6,
|
||||
& p,
|
||||
& blockquote,
|
||||
& pre,
|
||||
& a,
|
||||
& abbr,
|
||||
& acronym,
|
||||
& address,
|
||||
& big,
|
||||
& button,
|
||||
& cite,
|
||||
& code,
|
||||
& del,
|
||||
& dfn,
|
||||
& em,
|
||||
& img,
|
||||
& ins,
|
||||
& kbd,
|
||||
& q,
|
||||
& s,
|
||||
& samp,
|
||||
& small,
|
||||
& strike,
|
||||
& strong,
|
||||
& sub,
|
||||
& sup,
|
||||
& tt,
|
||||
& var,
|
||||
& b,
|
||||
& u,
|
||||
& i,
|
||||
& center,
|
||||
& dl,
|
||||
& dt,
|
||||
& dd,
|
||||
& ol,
|
||||
& ul,
|
||||
& li,
|
||||
& fieldset,
|
||||
& form,
|
||||
& label,
|
||||
& legend,
|
||||
& table,
|
||||
& caption,
|
||||
& tbody,
|
||||
& tfoot,
|
||||
& thead,
|
||||
& tr,
|
||||
& th,
|
||||
& td,
|
||||
& article,
|
||||
& aside,
|
||||
& canvas,
|
||||
& details,
|
||||
& embed,
|
||||
& figure,
|
||||
& figcaption,
|
||||
& footer,
|
||||
& header,
|
||||
& hgroup,
|
||||
& main,
|
||||
& menu,
|
||||
& meter,
|
||||
& nav,
|
||||
& output,
|
||||
& progress,
|
||||
& ruby,
|
||||
& section,
|
||||
& summary,
|
||||
& time,
|
||||
& mark,
|
||||
& audio,
|
||||
& video,
|
||||
& input,
|
||||
& select,
|
||||
& textarea {
|
||||
all: initial;
|
||||
box-sizing: border-box;
|
||||
text-shadow: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tap-highlight-color: initial;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
all: initial;
|
||||
box-sizing: border-box;
|
||||
text-shadow: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tap-highlight-color: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Reset size and position on elements. */
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas abbr,
|
||||
#drupal-off-canvas acronym,
|
||||
#drupal-off-canvas address,
|
||||
#drupal-off-canvas applet,
|
||||
#drupal-off-canvas article,
|
||||
#drupal-off-canvas aside,
|
||||
#drupal-off-canvas audio,
|
||||
#drupal-off-canvas b,
|
||||
#drupal-off-canvas big,
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas body,
|
||||
#drupal-off-canvas canvas,
|
||||
#drupal-off-canvas caption,
|
||||
#drupal-off-canvas cite,
|
||||
#drupal-off-canvas code,
|
||||
#drupal-off-canvas dd,
|
||||
#drupal-off-canvas del,
|
||||
#drupal-off-canvas dfn,
|
||||
#drupal-off-canvas dialog,
|
||||
#drupal-off-canvas dl,
|
||||
#drupal-off-canvas dt,
|
||||
#drupal-off-canvas em,
|
||||
#drupal-off-canvas embed,
|
||||
#drupal-off-canvas fieldset,
|
||||
#drupal-off-canvas figcaption,
|
||||
#drupal-off-canvas figure,
|
||||
#drupal-off-canvas footer,
|
||||
#drupal-off-canvas form,
|
||||
#drupal-off-canvas h1,
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas header,
|
||||
#drupal-off-canvas hgroup,
|
||||
#drupal-off-canvas hr,
|
||||
#drupal-off-canvas html,
|
||||
#drupal-off-canvas i,
|
||||
#drupal-off-canvas iframe,
|
||||
#drupal-off-canvas img,
|
||||
#drupal-off-canvas ins,
|
||||
#drupal-off-canvas kbd,
|
||||
#drupal-off-canvas label,
|
||||
#drupal-off-canvas legend,
|
||||
#drupal-off-canvas li,
|
||||
#drupal-off-canvas main,
|
||||
#drupal-off-canvas mark,
|
||||
#drupal-off-canvas menu,
|
||||
#drupal-off-canvas meter,
|
||||
#drupal-off-canvas nav,
|
||||
#drupal-off-canvas object,
|
||||
#drupal-off-canvas ol,
|
||||
#drupal-off-canvas output,
|
||||
#drupal-off-canvas p,
|
||||
#drupal-off-canvas pre,
|
||||
#drupal-off-canvas progress,
|
||||
#drupal-off-canvas q,
|
||||
#drupal-off-canvas rp,
|
||||
#drupal-off-canvas rt,
|
||||
#drupal-off-canvas s,
|
||||
#drupal-off-canvas samp,
|
||||
#drupal-off-canvas section,
|
||||
#drupal-off-canvas small,
|
||||
#drupal-off-canvas span,
|
||||
#drupal-off-canvas strike,
|
||||
#drupal-off-canvas strong,
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup,
|
||||
#drupal-off-canvas table,
|
||||
#drupal-off-canvas tbody,
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas tfoot,
|
||||
#drupal-off-canvas th,
|
||||
#drupal-off-canvas thead,
|
||||
#drupal-off-canvas time,
|
||||
#drupal-off-canvas tr,
|
||||
#drupal-off-canvas tt,
|
||||
#drupal-off-canvas u,
|
||||
#drupal-off-canvas ul,
|
||||
#drupal-off-canvas var,
|
||||
#drupal-off-canvas video,
|
||||
#drupal-off-canvas xmp {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Override the default (display: inline) for browsers that do not recognize HTML5 tags.
|
||||
* IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
|
||||
*/
|
||||
#drupal-off-canvas article,
|
||||
#drupal-off-canvas aside,
|
||||
#drupal-off-canvas figcaption,
|
||||
#drupal-off-canvas figure,
|
||||
#drupal-off-canvas footer,
|
||||
#drupal-off-canvas header,
|
||||
#drupal-off-canvas hgroup,
|
||||
#drupal-off-canvas main,
|
||||
#drupal-off-canvas menu,
|
||||
#drupal-off-canvas nav,
|
||||
#drupal-off-canvas section {
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* Makes browsers agree.
|
||||
* IE + Opera = font-weight: bold.
|
||||
* Gecko + WebKit = font-weight: bolder.
|
||||
*/
|
||||
#drupal-off-canvas b,
|
||||
#drupal-off-canvas strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas em,
|
||||
#drupal-off-canvas i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#drupal-off-canvas img {
|
||||
vertical-align: middle;
|
||||
color: transparent;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas ul,
|
||||
#drupal-off-canvas ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* reset table styling. */
|
||||
#drupal-off-canvas table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
#drupal-off-canvas table thead,
|
||||
#drupal-off-canvas table tbody,
|
||||
#drupal-off-canvas table tbody tr:nth-child(even),
|
||||
#drupal-off-canvas table tbody tr:nth-child(odd),
|
||||
#drupal-off-canvas table tfoot {
|
||||
border: 0;
|
||||
background: transparent none;
|
||||
}
|
||||
#drupal-off-canvas th,
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas caption {
|
||||
font-weight: normal;
|
||||
}
|
||||
#drupal-off-canvas q {
|
||||
quotes: none;
|
||||
}
|
||||
#drupal-off-canvas q:before,
|
||||
#drupal-off-canvas q:after {
|
||||
content: none;
|
||||
}
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup,
|
||||
#drupal-off-canvas small {
|
||||
font-size: 75%;
|
||||
}
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup {
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
line-height: 0;
|
||||
}
|
||||
#drupal-off-canvas sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
#drupal-off-canvas sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
* For IE9. Without, occasionally draws shapes
|
||||
* outside the boundaries of <svg> rectangle.
|
||||
*/
|
||||
#drupal-off-canvas svg {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Specific resets for inputs. */
|
||||
#drupal-off-canvas input[type="search"]::-webkit-search-decoration {
|
||||
display: none;
|
||||
}
|
||||
#drupal-off-canvas input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#drupal-off-canvas input[type="checkbox"],
|
||||
#drupal-off-canvas input[type="radio"] {
|
||||
position: static;
|
||||
margin: 0;
|
||||
}
|
||||
#drupal-off-canvas input:invalid,
|
||||
#drupal-off-canvas button:invalid,
|
||||
#drupal-off-canvas select:invalid,
|
||||
#drupal-off-canvas textarea:invalid,
|
||||
#drupal-off-canvas input:focus,
|
||||
#drupal-off-canvas button:focus,
|
||||
#drupal-off-canvas select:focus,
|
||||
#drupal-off-canvas textarea:focus,
|
||||
#drupal-off-canvas input[type="file"]:focus,
|
||||
#drupal-off-canvas input[type="file"]:active,
|
||||
#drupal-off-canvas input[type="radio"]:focus,
|
||||
#drupal-off-canvas input[type="radio"]:active,
|
||||
#drupal-off-canvas input[type="checkbox"]:focus,
|
||||
#drupal-off-canvas input[type="checkbox"]:active {
|
||||
z-index: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
#drupal-off-canvas input[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
#drupal-off-canvas button,
|
||||
#drupal-off-canvas input[type="reset"],
|
||||
#drupal-off-canvas input[type="submit"],
|
||||
#drupal-off-canvas input[type="button"] {
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
#drupal-off-canvas button:hover,
|
||||
#drupal-off-canvas input[type="reset"]:hover,
|
||||
#drupal-off-canvas input[type="submit"]:hover,
|
||||
#drupal-off-canvas input[type="button"]:hover {
|
||||
text-decoration: none;
|
||||
background-image: none;
|
||||
}
|
||||
#drupal-off-canvas button:active,
|
||||
#drupal-off-canvas input[type="reset"]:active,
|
||||
#drupal-off-canvas input[type="submit"]:active,
|
||||
#drupal-off-canvas input[type="button"]:active {
|
||||
border-color: gray;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
#drupal-off-canvas button::-moz-focus-inner,
|
||||
#drupal-off-canvas input[type="reset"]::-moz-focus-inner,
|
||||
#drupal-off-canvas input[type="submit"]::-moz-focus-inner,
|
||||
#drupal-off-canvas input[type="button"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
#drupal-off-canvas textarea,
|
||||
#drupal-off-canvas select,
|
||||
#drupal-off-canvas input[type="date"],
|
||||
#drupal-off-canvas input[type="datetime"],
|
||||
#drupal-off-canvas input[type="datetime-local"],
|
||||
#drupal-off-canvas input[type="email"],
|
||||
#drupal-off-canvas input[type="month"],
|
||||
#drupal-off-canvas input[type="number"],
|
||||
#drupal-off-canvas input[type="password"],
|
||||
#drupal-off-canvas input[type="search"],
|
||||
#drupal-off-canvas input[type="tel"],
|
||||
#drupal-off-canvas input[type="text"],
|
||||
#drupal-off-canvas input[type="time"],
|
||||
#drupal-off-canvas input[type="url"],
|
||||
#drupal-off-canvas input[type="week"] {
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
border-radius: 0;
|
||||
}
|
||||
#drupal-off-canvas textarea[disabled],
|
||||
#drupal-off-canvas select[disabled],
|
||||
#drupal-off-canvas input[type="date"][disabled],
|
||||
#drupal-off-canvas input[type="datetime"][disabled],
|
||||
#drupal-off-canvas input[type="datetime-local"][disabled],
|
||||
#drupal-off-canvas input[type="email"][disabled],
|
||||
#drupal-off-canvas input[type="month"][disabled],
|
||||
#drupal-off-canvas input[type="number"][disabled],
|
||||
#drupal-off-canvas input[type="password"][disabled],
|
||||
#drupal-off-canvas input[type="search"][disabled],
|
||||
#drupal-off-canvas input[type="tel"][disabled],
|
||||
#drupal-off-canvas input[type="text"][disabled],
|
||||
#drupal-off-canvas input[type="time"][disabled],
|
||||
#drupal-off-canvas input[type="url"][disabled],
|
||||
#drupal-off-canvas input[type="week"][disabled] {
|
||||
background-color: gray;
|
||||
}
|
||||
#drupal-off-canvas input[type="hidden"] {
|
||||
visibility: hidden;
|
||||
}
|
||||
#drupal-off-canvas button[disabled],
|
||||
#drupal-off-canvas input[disabled],
|
||||
#drupal-off-canvas select[disabled],
|
||||
#drupal-off-canvas select[disabled] option,
|
||||
#drupal-off-canvas select[disabled] optgroup,
|
||||
#drupal-off-canvas textarea[disabled] {
|
||||
cursor: default;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
#drupal-off-canvas input::placeholder,
|
||||
#drupal-off-canvas textarea::placeholder {
|
||||
color: gray;
|
||||
}
|
||||
#drupal-off-canvas textarea,
|
||||
#drupal-off-canvas select[size],
|
||||
#drupal-off-canvas select[multiple] {
|
||||
height: auto;
|
||||
}
|
||||
#drupal-off-canvas select[size="0"],
|
||||
#drupal-off-canvas select[size="1"] {
|
||||
height: auto;
|
||||
}
|
||||
#drupal-off-canvas textarea {
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
resize: vertical;
|
||||
}
|
||||
#drupal-off-canvas select[multiple] {
|
||||
overflow: auto;
|
||||
}
|
||||
#drupal-off-canvas optgroup {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
#drupal-off-canvas optgroup::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
#drupal-off-canvas * button {
|
||||
overflow: visible;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
border: 1px solid gray;
|
||||
background: none;
|
||||
}
|
||||
#drupal-off-canvas * textarea,
|
||||
#drupal-off-canvas * select,
|
||||
#drupal-off-canvas *:not(div) textarea,
|
||||
#drupal-off-canvas *:not(div) select {
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
color: black;
|
||||
border: 1px solid gray;
|
||||
background: white;
|
||||
}
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for tables in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas table * {
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
}
|
||||
#drupal-off-canvas table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
min-width: calc(100% + 40px);
|
||||
/* Cancel out the padding of the parent to make the table full width. */
|
||||
margin: 0 -20px -10px -20px;
|
||||
color: #ddd;
|
||||
border: 0;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
#drupal-off-canvas table thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
#drupal-off-canvas table tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
#drupal-off-canvas tr {
|
||||
display: table-row;
|
||||
}
|
||||
#drupal-off-canvas tr:hover td {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas th {
|
||||
display: table-cell;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 2px 8px;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #777;
|
||||
background-color: transparent;
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas th,
|
||||
[dir="rtl"] #drupal-off-canvas td {
|
||||
text-align: right;
|
||||
}
|
||||
#drupal-off-canvas th {
|
||||
font-weight: bold;
|
||||
}
|
||||
#drupal-off-canvas th.checkbox,
|
||||
#drupal-off-canvas td.checkbox {
|
||||
width: 20px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
#drupal-off-canvas div.checkbox.menu-enabled {
|
||||
position: static;
|
||||
display: inline;
|
||||
width: auto;
|
||||
}
|
||||
#drupal-off-canvas th:first-child,
|
||||
#drupal-off-canvas td:first-child {
|
||||
width: 150px;
|
||||
}
|
||||
/* For lack of a better class, using this to grab the operations th. */
|
||||
#drupal-off-canvas .tabledrag-has-colspan {
|
||||
padding-right: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
#drupal-off-canvas td {
|
||||
padding: 6px 8px;
|
||||
color: #ddd;
|
||||
}
|
||||
/* Hide overflow with ellipsis for links. */
|
||||
#drupal-off-canvas td a {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background: transparent;
|
||||
}
|
||||
#drupal-off-canvas tr td:first-child,
|
||||
#drupal-off-canvas tr th:first-child {
|
||||
padding-left: 20px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas tr td:first-child,
|
||||
[dir="rtl"] #drupal-off-canvas tr th:first-child {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Table drag behavior for off-canvas dialog.
|
||||
*
|
||||
* @see tabledrag.js
|
||||
*/
|
||||
|
||||
#drupal-off-canvas .drag {
|
||||
cursor: move;
|
||||
}
|
||||
#drupal-off-canvas tr.region-title {
|
||||
font-weight: normal;
|
||||
}
|
||||
#drupal-off-canvas table .region-message {
|
||||
color: #fff;
|
||||
}
|
||||
#drupal-off-canvas table .region-populated {
|
||||
display: none;
|
||||
}
|
||||
#drupal-off-canvas .add-new .tabledrag-changed {
|
||||
display: none;
|
||||
}
|
||||
#drupal-off-canvas .draggable a.tabledrag-handle {
|
||||
float: left; /* LTR */
|
||||
overflow: hidden;
|
||||
min-width: 20px;
|
||||
height: auto;
|
||||
margin: 0 5px 0 0;
|
||||
padding: 0;
|
||||
cursor: move;
|
||||
text-decoration: none;
|
||||
background-image: none;
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas .draggable a.tabledrag-handle {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
#drupal-off-canvas a.tabledrag-handle .handle {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
/* Use lighter drag icon against dark background. */
|
||||
background-image: url(../../../images/core/icons/bebebe/move.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
#drupal-off-canvas .draggable a.tabledrag-handle:hover .handle,
|
||||
#drupal-off-canvas .draggable a.tabledrag-handle:focus .handle {
|
||||
text-decoration: none;
|
||||
background-image: url(../../../images/core/icons/787878/move.svg);
|
||||
}
|
||||
#drupal-off-canvas tr td {
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
#drupal-off-canvas tr td abbr {
|
||||
margin-left: 5px; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas tr td abbr {
|
||||
margin-right: 5px;
|
||||
margin-left: 0;
|
||||
}
|
||||
#drupal-off-canvas tr:hover td {
|
||||
background: #222;
|
||||
}
|
||||
#drupal-off-canvas tr.drag td {
|
||||
background: #111;
|
||||
}
|
||||
#drupal-off-canvas tr.drag-previous td {
|
||||
background: #000;
|
||||
}
|
||||
#drupal-off-canvas tr.drag-previous:hover td {
|
||||
background: #222;
|
||||
}
|
||||
body div.tabledrag-changed-warning {
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 14px;
|
||||
}
|
||||
#drupal-off-canvas .touchevents .draggable td {
|
||||
padding: 0 10px;
|
||||
}
|
||||
#drupal-off-canvas .touchevents .draggable .menu-item__link {
|
||||
display: inline-block;
|
||||
padding: 10px 0;
|
||||
}
|
||||
#drupal-off-canvas .touchevents a.tabledrag-handle {
|
||||
width: 40px;
|
||||
height: 44px;
|
||||
}
|
||||
#drupal-off-canvas .touchevents a.tabledrag-handle .handle {
|
||||
height: 21px;
|
||||
background-position: 40% 19px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas .touch a.tabledrag-handle .handle {
|
||||
background-position: right 40% top 19px;
|
||||
}
|
||||
#drupal-off-canvas .touchevents .draggable.drag a.tabledrag-handle .handle {
|
||||
background-position: 50% -32px;
|
||||
}
|
||||
#drupal-off-canvas .tabledrag-toggle-weight-wrapper {
|
||||
padding-top: 10px;
|
||||
text-align: right; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas .tabledrag-toggle-weight-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
#drupal-off-canvas .indentation {
|
||||
float: left; /* LTR */
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0 3px 0 -10px; /* LTR */
|
||||
padding: 0 0 0 10px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas .indentation {
|
||||
float: right;
|
||||
margin: 0 -10px 0 3px;
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Styling for the off-canvas ui dialog. Including overrides for jQuery UI.
|
||||
*/
|
||||
|
||||
/* Style the dialog-off-canvas container. */
|
||||
.ui-dialog.ui-dialog-off-canvas {
|
||||
/* Layer the dialog just under the toolbar. */
|
||||
z-index: 501;
|
||||
padding: 0;
|
||||
color: #ddd;
|
||||
border-radius: 0;
|
||||
background: #444;
|
||||
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
|
||||
}
|
||||
.ui-widget.ui-dialog.ui-dialog-off-canvas {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* Style the off-canvas dialog header. */
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
|
||||
padding: 1em;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #000;
|
||||
border-radius: 0;
|
||||
background: #2d2d2d;
|
||||
font-weight: normal;
|
||||
}
|
||||
/* Hide the default jQuery UI dialog close button. */
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close .ui-icon {
|
||||
visibility: hidden;
|
||||
}
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
|
||||
position: absolute;
|
||||
top: calc(50% - 6px);
|
||||
right: 1em;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: all 0.5s ease;
|
||||
border: 3px solid transparent;
|
||||
background-color: transparent;
|
||||
background-image: url(../../../images/core/icons/bebebe/ex.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover,
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:focus {
|
||||
border: 3px solid #fff;
|
||||
background-image: url(../../../images/core/icons/ffffff/ex.svg);
|
||||
}
|
||||
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
|
||||
right: auto;
|
||||
left: 1em;
|
||||
}
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
|
||||
/* Ensure that long titles do not overlap the close button. */
|
||||
max-width: 210px;
|
||||
margin: 0;
|
||||
padding-right: 0; /* LTR */
|
||||
/* Push the text away from the icon. */
|
||||
padding-left: 30px; /* LTR */
|
||||
text-align: left; /* LTR */
|
||||
/* Ensure that long titles are not truncated. */
|
||||
white-space: normal;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
|
||||
float: right;
|
||||
padding-right: 30px;
|
||||
padding-left: 0;
|
||||
text-align: right;
|
||||
}
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 1em; /* LTR */
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background: transparent url(../../../images/core/icons/ffffff/pencil.svg) no-repeat scroll center center;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
|
||||
right: 1em;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
/* Override default styling from jQuery UI. */
|
||||
#drupal-off-canvas .ui-state-default,
|
||||
#drupal-off-canvas .ui-widget-content .ui-state-default,
|
||||
#drupal-off-canvas .ui-widget-header .ui-state-default {
|
||||
color: #333;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
#drupal-off-canvas .ui-widget-content a {
|
||||
color: #85bef4;
|
||||
}
|
||||
|
|
@ -1,399 +0,0 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Set base styles for the off-canvas dialog.
|
||||
*/
|
||||
|
||||
/* Set some global attributes. */
|
||||
|
||||
#drupal-off-canvas {
|
||||
color: #ddd;
|
||||
background: #444;
|
||||
}
|
||||
|
||||
/**
|
||||
* All HTML elements that could be used in off-canvas except div, bdo, bdi,
|
||||
* data, svg, map and math.
|
||||
*
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
|
||||
*/
|
||||
|
||||
#drupal-off-canvas span,
|
||||
#drupal-off-canvas applet,
|
||||
#drupal-off-canvas object,
|
||||
#drupal-off-canvas iframe,
|
||||
#drupal-off-canvas h1,
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas p,
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas pre,
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas abbr,
|
||||
#drupal-off-canvas acronym,
|
||||
#drupal-off-canvas address,
|
||||
#drupal-off-canvas big,
|
||||
#drupal-off-canvas button,
|
||||
#drupal-off-canvas cite,
|
||||
#drupal-off-canvas code,
|
||||
#drupal-off-canvas del,
|
||||
#drupal-off-canvas dfn,
|
||||
#drupal-off-canvas em,
|
||||
#drupal-off-canvas img,
|
||||
#drupal-off-canvas ins,
|
||||
#drupal-off-canvas kbd,
|
||||
#drupal-off-canvas q,
|
||||
#drupal-off-canvas s,
|
||||
#drupal-off-canvas samp,
|
||||
#drupal-off-canvas small,
|
||||
#drupal-off-canvas strike,
|
||||
#drupal-off-canvas strong,
|
||||
#drupal-off-canvas sub,
|
||||
#drupal-off-canvas sup,
|
||||
#drupal-off-canvas tt,
|
||||
#drupal-off-canvas var,
|
||||
#drupal-off-canvas b,
|
||||
#drupal-off-canvas u,
|
||||
#drupal-off-canvas i,
|
||||
#drupal-off-canvas center,
|
||||
#drupal-off-canvas dl,
|
||||
#drupal-off-canvas dt,
|
||||
#drupal-off-canvas dd,
|
||||
#drupal-off-canvas ol,
|
||||
#drupal-off-canvas ul,
|
||||
#drupal-off-canvas li,
|
||||
#drupal-off-canvas fieldset,
|
||||
#drupal-off-canvas form,
|
||||
#drupal-off-canvas label,
|
||||
#drupal-off-canvas legend,
|
||||
#drupal-off-canvas table,
|
||||
#drupal-off-canvas caption,
|
||||
#drupal-off-canvas tbody,
|
||||
#drupal-off-canvas tfoot,
|
||||
#drupal-off-canvas thead,
|
||||
#drupal-off-canvas tr,
|
||||
#drupal-off-canvas th,
|
||||
#drupal-off-canvas td,
|
||||
#drupal-off-canvas article,
|
||||
#drupal-off-canvas aside,
|
||||
#drupal-off-canvas canvas,
|
||||
#drupal-off-canvas details,
|
||||
#drupal-off-canvas embed,
|
||||
#drupal-off-canvas figure,
|
||||
#drupal-off-canvas figcaption,
|
||||
#drupal-off-canvas footer,
|
||||
#drupal-off-canvas header,
|
||||
#drupal-off-canvas hgroup,
|
||||
#drupal-off-canvas main,
|
||||
#drupal-off-canvas menu,
|
||||
#drupal-off-canvas meter,
|
||||
#drupal-off-canvas nav,
|
||||
#drupal-off-canvas output,
|
||||
#drupal-off-canvas progress,
|
||||
#drupal-off-canvas ruby,
|
||||
#drupal-off-canvas section,
|
||||
#drupal-off-canvas summary,
|
||||
#drupal-off-canvas time,
|
||||
#drupal-off-canvas mark,
|
||||
#drupal-off-canvas audio,
|
||||
#drupal-off-canvas video,
|
||||
#drupal-off-canvas input,
|
||||
#drupal-off-canvas select,
|
||||
#drupal-off-canvas textarea {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
}
|
||||
|
||||
/* Generic elements. */
|
||||
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas .link {
|
||||
cursor: pointer;
|
||||
transition: color 0.5s ease;
|
||||
text-decoration: none;
|
||||
color: #85bef4;
|
||||
border-bottom: none;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas a:focus,
|
||||
#drupal-off-canvas .link:focus,
|
||||
#drupal-off-canvas a:hover,
|
||||
#drupal-off-canvas .link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#drupal-off-canvas hr {
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#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-size: 1.625em;
|
||||
font-weight: bold;
|
||||
line-height: 1.875em;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas .heading-b {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.385em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas .heading-c {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.231em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas .heading-d {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.154em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas .heading-e {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.077em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas .heading-f {
|
||||
display: block;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.077em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas dl {
|
||||
margin: 0 0 1.25rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas dl dd,
|
||||
#drupal-off-canvas dl dl {
|
||||
margin-bottom: 0.625rem;
|
||||
margin-left: 1.25rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas dl dd,
|
||||
[dir="rtl"] #drupal-off-canvas dl dl {
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas blockquote {
|
||||
margin: 1em 2.5rem;
|
||||
}
|
||||
|
||||
#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 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;
|
||||
padding: 0.3125rem 0;
|
||||
border-bottom: 1px solid #333
|
||||
}
|
||||
|
||||
#drupal-off-canvas ul li:last-child, #drupal-off-canvas ol li:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas code {
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas pre {
|
||||
margin: 1.25rem 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#drupal-off-canvas details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#drupal-off-canvas summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
#drupal-off-canvas select::-ms-expand {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .visually-hidden.focusable:active,
|
||||
#drupal-off-canvas .visually-hidden.focusable:focus {
|
||||
position: static !important;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Some system classes. See system.admin.css. */
|
||||
|
||||
#drupal-off-canvas .panel {
|
||||
padding: 0.3125rem 0.3125rem 0.9375rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .panel__description {
|
||||
margin: 0 0 0.1875rem;
|
||||
padding: 2px 0 0.1875rem 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .compact-link {
|
||||
margin: 0 0 0.625rem 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 0.625rem 1.0625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas .messages {
|
||||
background-position: right 10px top 17px;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages abbr {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--status {
|
||||
color: #325e1c;
|
||||
background-color: #f3faef;
|
||||
background-image: url(../icons/73b355/check.svg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--warning {
|
||||
color: #734c00;
|
||||
background-color: #fdf8ed;
|
||||
background-image: url(../icons/e29700/warning.svg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--error {
|
||||
color: #a51b00;
|
||||
background-color: #fcf4f2;
|
||||
background-image: url(../icons/e32700/error.svg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--error div[role="alert"] {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -1,346 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Set base styles for the off-canvas dialog.
|
||||
*/
|
||||
|
||||
/* Set some global attributes. */
|
||||
#drupal-off-canvas {
|
||||
color: #ddd;
|
||||
background: #444;
|
||||
}
|
||||
/**
|
||||
* All HTML elements that could be used in off-canvas except div, bdo, bdi,
|
||||
* data, svg, map and math.
|
||||
*
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
|
||||
*/
|
||||
#drupal-off-canvas {
|
||||
& span,
|
||||
& applet,
|
||||
& object,
|
||||
& iframe,
|
||||
& h1,
|
||||
& h2,
|
||||
& h3,
|
||||
& h4,
|
||||
& h5,
|
||||
& h6,
|
||||
& p,
|
||||
& blockquote,
|
||||
& pre,
|
||||
& a,
|
||||
& abbr,
|
||||
& acronym,
|
||||
& address,
|
||||
& big,
|
||||
& button,
|
||||
& cite,
|
||||
& code,
|
||||
& del,
|
||||
& dfn,
|
||||
& em,
|
||||
& img,
|
||||
& ins,
|
||||
& kbd,
|
||||
& q,
|
||||
& s,
|
||||
& samp,
|
||||
& small,
|
||||
& strike,
|
||||
& strong,
|
||||
& sub,
|
||||
& sup,
|
||||
& tt,
|
||||
& var,
|
||||
& b,
|
||||
& u,
|
||||
& i,
|
||||
& center,
|
||||
& dl,
|
||||
& dt,
|
||||
& dd,
|
||||
& ol,
|
||||
& ul,
|
||||
& li,
|
||||
& fieldset,
|
||||
& form,
|
||||
& label,
|
||||
& legend,
|
||||
& table,
|
||||
& caption,
|
||||
& tbody,
|
||||
& tfoot,
|
||||
& thead,
|
||||
& tr,
|
||||
& th,
|
||||
& td,
|
||||
& article,
|
||||
& aside,
|
||||
& canvas,
|
||||
& details,
|
||||
& embed,
|
||||
& figure,
|
||||
& figcaption,
|
||||
& footer,
|
||||
& header,
|
||||
& hgroup,
|
||||
& main,
|
||||
& menu,
|
||||
& meter,
|
||||
& nav,
|
||||
& output,
|
||||
& progress,
|
||||
& ruby,
|
||||
& section,
|
||||
& summary,
|
||||
& time,
|
||||
& mark,
|
||||
& audio,
|
||||
& video,
|
||||
& input,
|
||||
& select,
|
||||
& textarea {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
/* Generic elements. */
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas .link {
|
||||
cursor: pointer;
|
||||
transition: color 0.5s ease;
|
||||
text-decoration: none;
|
||||
color: #85bef4;
|
||||
border-bottom: none;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas a:focus,
|
||||
#drupal-off-canvas .link:focus,
|
||||
#drupal-off-canvas a:hover,
|
||||
#drupal-off-canvas .link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#drupal-off-canvas hr {
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
}
|
||||
#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-size: 1.625em;
|
||||
font-weight: bold;
|
||||
line-height: 1.875em;
|
||||
}
|
||||
#drupal-off-canvas h2,
|
||||
#drupal-off-canvas .heading-b {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.385em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#drupal-off-canvas h3,
|
||||
#drupal-off-canvas .heading-c {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.231em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#drupal-off-canvas h4,
|
||||
#drupal-off-canvas .heading-d {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.154em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#drupal-off-canvas h5,
|
||||
#drupal-off-canvas .heading-e {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.077em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#drupal-off-canvas h6,
|
||||
#drupal-off-canvas .heading-f {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-size: 1.077em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#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-bottom: 10px;
|
||||
margin-left: 20px; /* LTR */
|
||||
}
|
||||
[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 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;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #333;
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
#drupal-off-canvas blockquote,
|
||||
#drupal-off-canvas code {
|
||||
margin: 20px 0;
|
||||
}
|
||||
#drupal-off-canvas pre {
|
||||
margin: 20px 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
#drupal-off-canvas details {
|
||||
display: block;
|
||||
}
|
||||
#drupal-off-canvas summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
#drupal-off-canvas select::-ms-expand {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
word-wrap: normal;
|
||||
}
|
||||
#drupal-off-canvas .visually-hidden.focusable:active,
|
||||
#drupal-off-canvas .visually-hidden.focusable:focus {
|
||||
position: static !important;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
width: auto;
|
||||
height: 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 {
|
||||
color: #325e1c;
|
||||
background-color: #f3faef;
|
||||
background-image: url(../icons/73b355/check.svg);
|
||||
}
|
||||
#drupal-off-canvas .messages--warning {
|
||||
color: #734c00;
|
||||
background-color: #fdf8ed;
|
||||
background-image: url(../icons/e29700/warning.svg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--error {
|
||||
color: #a51b00;
|
||||
background-color: #fcf4f2;
|
||||
background-image: url(../icons/e32700/error.svg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--error div[role="alert"] {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for buttons in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas button,
|
||||
#drupal-off-canvas .button {
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
line-height: normal;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
#drupal-off-canvas button.link {
|
||||
display: inline;
|
||||
transition: color 0.5s ease;
|
||||
color: #85bef4;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
}
|
||||
#drupal-off-canvas button.link:hover,
|
||||
#drupal-off-canvas button.link:focus {
|
||||
text-decoration: none;
|
||||
color: #46a0f5;
|
||||
}
|
||||
#drupal-off-canvas input[type="submit"].button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 4px 20px;
|
||||
cursor: pointer;
|
||||
transition: background 0.5s ease;
|
||||
text-align: center;
|
||||
color: #f5f5f5;
|
||||
border: 0;
|
||||
border-radius: 20em;
|
||||
background: #777;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
#drupal-off-canvas input[type="submit"].button:hover,
|
||||
#drupal-off-canvas input[type="submit"].button:focus,
|
||||
#drupal-off-canvas input[type="submit"].button:active {
|
||||
z-index: 10;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
#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 {
|
||||
margin-top: 15px;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
background: #277abd;
|
||||
}
|
||||
#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 {
|
||||
outline: none;
|
||||
background: #236aaf;
|
||||
}
|
||||
#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 {
|
||||
padding: 2px 1em;
|
||||
font-size: 13px;
|
||||
}
|
||||
#drupal-off-canvas .button:disabled,
|
||||
#drupal-off-canvas .button:disabled:active,
|
||||
#drupal-off-canvas .button.is-disabled,
|
||||
#drupal-off-canvas .button.is-disabled:active {
|
||||
cursor: default;
|
||||
color: #5c5c5c;
|
||||
border: 0;
|
||||
background: #555;
|
||||
font-weight: normal;
|
||||
}
|
||||
#drupal-off-canvas .button--danger {
|
||||
text-decoration: none;
|
||||
color: #c72100;
|
||||
border-radius: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
#drupal-off-canvas .button--danger:hover,
|
||||
#drupal-off-canvas .button--danger:focus,
|
||||
#drupal-off-canvas .button--danger:active {
|
||||
text-decoration: none;
|
||||
color: #ff2a00;
|
||||
text-shadow: none;
|
||||
}
|
||||
#drupal-off-canvas .button--danger:disabled,
|
||||
#drupal-off-canvas .button--danger.is-disabled {
|
||||
cursor: default;
|
||||
color: #737373;
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* CSS for off-canvas dialog.
|
||||
*/
|
||||
|
||||
/* Position the off-canvas dialog container outside the right of the viewport. */
|
||||
.ui-dialog-off-canvas {
|
||||
overflow: visible;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Wrap the form that's inside the off-canvas dialog. */
|
||||
.ui-dialog-off-canvas .ui-dialog-content {
|
||||
/* Prevent horizontal scrollbar. */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
[dir="rtl"] .ui-dialog-off-canvas .ui-dialog-content {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Position the off-canvas dialog container outside the right of the viewport. */
|
||||
.ui-dialog-off-canvas {
|
||||
overflow: visible;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Wrap the form that's inside the off-canvas dialog. */
|
||||
.ui-dialog-off-canvas #drupal-off-canvas {
|
||||
/* Prevent horizontal scrollbar. */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
[dir="rtl"] .ui-dialog-off-canvas #drupal-off-canvas {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/*
|
||||
* Force the off-canvas dialog 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 off-canvas dialog is at 100% width stop the body from scrolling */
|
||||
.js-off-canvas-dialog-open {
|
||||
overflow-y: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for summary and details in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas details {
|
||||
display: block;
|
||||
}
|
||||
#drupal-off-canvas details,
|
||||
#drupal-off-canvas summary {
|
||||
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 {
|
||||
color: #ddd;
|
||||
background: #474747;
|
||||
}
|
||||
#drupal-off-canvas summary a {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
color: #ddd;
|
||||
}
|
||||
#drupal-off-canvas summary a:hover,
|
||||
#drupal-off-canvas summary a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
#drupal-off-canvas details,
|
||||
#drupal-off-canvas summary,
|
||||
#drupal-off-canvas .details-wrapper {
|
||||
/* Cancel out the padding of the parent. */
|
||||
margin: 0 -20px;
|
||||
padding: 0 20px;
|
||||
border-width: 0;
|
||||
}
|
||||
#drupal-off-canvas summary {
|
||||
padding: 10px 20px;
|
||||
transition: all 0.5s ease;
|
||||
text-shadow: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
#drupal-off-canvas summary:hover,
|
||||
#drupal-off-canvas summary:focus {
|
||||
background-color: #222;
|
||||
}
|
||||
#drupal-off-canvas details[open] {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#drupal-off-canvas details[open] > summary {
|
||||
color: #eee;
|
||||
background-color: #333;
|
||||
}
|
||||
#drupal-off-canvas details[open] > summary:hover {
|
||||
color: #fff;
|
||||
background-color: #222;
|
||||
}
|
||||
#drupal-off-canvas details .placeholder {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -1,291 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Styles for dropbuttons in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas .dropbutton-wrapper,
|
||||
#drupal-off-canvas .dropbutton-widget {
|
||||
position: static;
|
||||
display: block;
|
||||
transition: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
#drupal-off-canvas .dropbutton-widget {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: background 0.5s ease;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-radius: 1em;
|
||||
background: #277abd;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
#drupal-off-canvas .dropbutton-widget:hover {
|
||||
background: #2b8bd8;
|
||||
}
|
||||
|
||||
/*
|
||||
* Style dropbutton single.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas .dropbutton-single .dropbutton-action a {
|
||||
height: 2.2em;
|
||||
/* Overlap icon for trigger. */
|
||||
margin-top: -2em;
|
||||
padding: 0;
|
||||
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 {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
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 {
|
||||
color: #333;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
* 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;
|
||||
white-space: nowrap;
|
||||
text-indent: 110%;
|
||||
color: #fff;
|
||||
}
|
||||
#drupal-off-canvas .dropbutton-toggle button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border: 0 solid transparent;
|
||||
border-top-right-radius: 1em; /* LTR */
|
||||
border-bottom-right-radius: 1em; /* LTR */
|
||||
}
|
||||
#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;
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 0;
|
||||
color: #fff;
|
||||
border-width: 0.3333em 0.3333em 0;
|
||||
border-style: solid;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
line-height: 0;
|
||||
}
|
||||
#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;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-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 {
|
||||
position: relative;
|
||||
float: right; /* LTR */
|
||||
min-width: initial;
|
||||
max-width: initial;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
#drupal-off-canvas td .dropbutton-widget .dropbutton {
|
||||
overflow: hidden;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin: 0;
|
||||
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 {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
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 its container. */
|
||||
#drupal-off-canvas td ul.dropbutton li.edit {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
/* Make li text transparent above icon so it's clickable. */
|
||||
#drupal-off-canvas td .dropbutton-single li.edit.dropbutton-action > a {
|
||||
z-index: 1;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* Put pencil icon in place of hidden 'edit' text on single buttons. */
|
||||
#drupal-off-canvas td .dropbutton-single .edit:before {
|
||||
display: block;
|
||||
content: ".";
|
||||
color: transparent;
|
||||
background: transparent url(../../../../../misc/icons/ffffff/pencil.svg) no-repeat center;
|
||||
background-size: 14px;
|
||||
}
|
||||
|
||||
/* Dropbutton when triggered expands to show secondary items. */
|
||||
#drupal-off-canvas .dropbutton-multiple.open {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* Create visual separation if there is an adjacent button. */
|
||||
#drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
|
||||
box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Triggered dropbutton expands to show secondary items. */
|
||||
#drupal-off-canvas .dropbutton-multiple.open,
|
||||
#drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Triggered dropbutton in td expands to show secondary items. */
|
||||
#drupal-off-canvas td .dropbutton-multiple.open .dropbutton,
|
||||
#drupal-off-canvas .dropbutton-multiple.open .dropbutton .secondary-action {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding-right: 1em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #drupal-off-canvas td .dropbutton-multiple.open .dropbutton {
|
||||
padding-right: inherit;
|
||||
padding-left: 1em;
|
||||
}
|
||||
#drupal-off-canvas .dropbutton-multiple.open .dropbutton li a {
|
||||
padding: 2px 1em;
|
||||
}
|
||||
|
||||
/* When open, the toggle arrow points upward. */
|
||||
#drupal-off-canvas .dropbutton-multiple.open span.dropbutton-arrow {
|
||||
top: 2px;
|
||||
border-top-color: transparent;
|
||||
border-bottom: 0.3333em solid;
|
||||
}
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for forms in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas form {
|
||||
color: #ddd;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
}
|
||||
#drupal-off-canvas input[type="checkbox"] {
|
||||
-webkit-appearance: checkbox;
|
||||
}
|
||||
#drupal-off-canvas input[type="radio"] {
|
||||
-webkit-appearance: radio;
|
||||
}
|
||||
#drupal-off-canvas select:not([multiple]) {
|
||||
-webkit-appearance: menulist;
|
||||
-moz-appearance: menulist;
|
||||
}
|
||||
#drupal-off-canvas option {
|
||||
display: block;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
}
|
||||
#drupal-off-canvas label {
|
||||
color: #ddd;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
}
|
||||
#drupal-off-canvas .visually-hidden {
|
||||
width: 0;
|
||||
height: 0;
|
||||
letter-spacing: -2em;
|
||||
opacity: 0;
|
||||
}
|
||||
#drupal-off-canvas .description,
|
||||
#drupal-off-canvas .form-item .description,
|
||||
#drupal-off-canvas .details-description {
|
||||
margin-top: 5px;
|
||||
color: #ddd;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
}
|
||||
#drupal-off-canvas .form-item {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/* Set size and position for all inputs. */
|
||||
#drupal-off-canvas .form-select,
|
||||
#drupal-off-canvas .form-text,
|
||||
#drupal-off-canvas .form-tel,
|
||||
#drupal-off-canvas .form-email,
|
||||
#drupal-off-canvas .form-url,
|
||||
#drupal-off-canvas .form-search,
|
||||
#drupal-off-canvas .form-number,
|
||||
#drupal-off-canvas .form-color,
|
||||
#drupal-off-canvas .form-file,
|
||||
#drupal-off-canvas .form-textarea,
|
||||
#drupal-off-canvas .form-date,
|
||||
#drupal-off-canvas .form-time {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
margin: 5px 0 0 0;
|
||||
padding: 6px;
|
||||
color: #333;
|
||||
border-width: 1px;
|
||||
border-radius: 2px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
/* Reduce contrast for fields against dark background. */
|
||||
#drupal-off-canvas .form-text,
|
||||
#drupal-off-canvas .form-tel,
|
||||
#drupal-off-canvas .form-email,
|
||||
#drupal-off-canvas .form-url,
|
||||
#drupal-off-canvas .form-search,
|
||||
#drupal-off-canvas .form-number,
|
||||
#drupal-off-canvas .form-color,
|
||||
#drupal-off-canvas .form-file,
|
||||
#drupal-off-canvas .form-textarea,
|
||||
#drupal-off-canvas .form-date,
|
||||
#drupal-off-canvas .form-time {
|
||||
color: #595959;
|
||||
border-color: #333;
|
||||
background-color: #eee;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
#drupal-off-canvas .form-text:focus,
|
||||
#drupal-off-canvas .form-tel:focus,
|
||||
#drupal-off-canvas .form-email:focus,
|
||||
#drupal-off-canvas .form-url:focus,
|
||||
#drupal-off-canvas .form-search:focus,
|
||||
#drupal-off-canvas .form-number:focus,
|
||||
#drupal-off-canvas .form-color:focus,
|
||||
#drupal-off-canvas .form-file:focus,
|
||||
#drupal-off-canvas .form-textarea:focus,
|
||||
#drupal-off-canvas .form-date:focus,
|
||||
#drupal-off-canvas .form-time:focus {
|
||||
border-color: #40b6ff;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.125), 0 0 8px #40b6ff;
|
||||
}
|
||||
#drupal-off-canvas td .form-item,
|
||||
#drupal-off-canvas td .form-select {
|
||||
margin: 0;
|
||||
}
|
||||
#drupal-off-canvas .form-file {
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#drupal-off-canvas .form-actions {
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
#drupal-off-canvas .ui-autocomplete {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: default;
|
||||
background-color: white;
|
||||
}
|
||||
#drupal-off-canvas .ui-autocomplete li {
|
||||
display: block;
|
||||
}
|
||||
#drupal-off-canvas .ui-autocomplete li a {
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
color: #595959 !important;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for layouts in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
.layout-icon__region {
|
||||
fill: #f5f5f2;
|
||||
stroke: #666;
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Motion effects for off-canvas dialog.
|
||||
*
|
||||
* Motion effects are in a separate file so that they can be easily turned off
|
||||
* to improve performance if desired.
|
||||
*/
|
||||
|
||||
.dialog-off-canvas-main-canvas {
|
||||
transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue