diff --git a/core/core.libraries.yml b/core/core.libraries.yml index ccc5761181..c355cebd77 100644 --- a/core/core.libraries.yml +++ b/core/core.libraries.yml @@ -903,3 +903,29 @@ underscore: gpl-compatible: true js: assets/vendor/underscore/underscore-min.js: { weight: -20, minified: true } + +drupal.dialog.off_canvas: + version: VERSION + js: + misc/dialog/off-canvas.js: {} + css: + base: + misc/dialog/off-canvas.reset.css: {} + misc/dialog/off-canvas.base.css: {} + misc/dialog/off-canvas.css: {} + misc/dialog/off-canvas.theme.css: { group: 200 } + 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: {} + dependencies: + - core/jquery + - core/drupal + - core/drupal.ajax + - core/drupal.announce + - core/drupal.dialog + - core/drupal.dialog.ajax diff --git a/core/core.services.yml b/core/core.services.yml index 76088786cd..98996a6101 100644 --- a/core/core.services.yml +++ b/core/core.services.yml @@ -1065,6 +1065,11 @@ services: arguments: ['@title_resolver'] tags: - { name: render.main_content_renderer, format: drupal_dialog } + main_content_renderer.off_canvas: + class: Drupal\Core\Render\MainContent\OffCanvasRenderer + arguments: ['@title_resolver', '@renderer'] + tags: + - { name: render.main_content_renderer, format: drupal_dialog.off_canvas } main_content_renderer.modal: class: Drupal\Core\Render\MainContent\ModalRenderer arguments: ['@title_resolver'] diff --git a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php b/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php similarity index 97% rename from core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php rename to core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php index c5e2b2a5d1..24663e726e 100644 --- a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php +++ b/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php @@ -1,8 +1,6 @@ renderer->renderRoot($main_content); // Attach the library necessary for using the OpenOffCanvasDialogCommand and // set the attachments for this Ajax response. - $main_content['#attached']['library'][] = 'outside_in/drupal.off_canvas'; + $main_content['#attached']['library'][] = 'core/drupal.dialog.off_canvas'; $response->setAttachments($main_content['#attached']); // If the main content doesn't provide a title, use the title resolver. diff --git a/core/modules/outside_in/css/off-canvas.base.css b/core/misc/dialog/off-canvas.base.css similarity index 100% rename from core/modules/outside_in/css/off-canvas.base.css rename to core/misc/dialog/off-canvas.base.css diff --git a/core/modules/outside_in/css/off-canvas.button.css b/core/misc/dialog/off-canvas.button.css similarity index 100% rename from core/modules/outside_in/css/off-canvas.button.css rename to core/misc/dialog/off-canvas.button.css diff --git a/core/modules/outside_in/css/off-canvas.css b/core/misc/dialog/off-canvas.css similarity index 100% rename from core/modules/outside_in/css/off-canvas.css rename to core/misc/dialog/off-canvas.css diff --git a/core/modules/outside_in/css/off-canvas.details.css b/core/misc/dialog/off-canvas.details.css similarity index 100% rename from core/modules/outside_in/css/off-canvas.details.css rename to core/misc/dialog/off-canvas.details.css diff --git a/core/modules/outside_in/css/off-canvas.dropbutton.css b/core/misc/dialog/off-canvas.dropbutton.css similarity index 100% rename from core/modules/outside_in/css/off-canvas.dropbutton.css rename to core/misc/dialog/off-canvas.dropbutton.css diff --git a/core/modules/outside_in/js/off-canvas.es6.js b/core/misc/dialog/off-canvas.es6.js similarity index 98% rename from core/modules/outside_in/js/off-canvas.es6.js rename to core/misc/dialog/off-canvas.es6.js index 480561a7c6..86502adf29 100644 --- a/core/modules/outside_in/js/off-canvas.es6.js +++ b/core/misc/dialog/off-canvas.es6.js @@ -143,7 +143,6 @@ at: `${edge} top`, of: window, }; - settings.dialogClass += ' ui-dialog-off-canvas'; // Applies initial height to dialog based on window height. // See http://api.jqueryui.com/dialog for all dialog options. settings.height = $(window).height(); diff --git a/core/modules/outside_in/css/off-canvas.form.css b/core/misc/dialog/off-canvas.form.css similarity index 100% rename from core/modules/outside_in/css/off-canvas.form.css rename to core/misc/dialog/off-canvas.form.css diff --git a/core/modules/outside_in/js/off-canvas.js b/core/misc/dialog/off-canvas.js similarity index 97% rename from core/modules/outside_in/js/off-canvas.js rename to core/misc/dialog/off-canvas.js index 85a9e53675..ceac21b58b 100644 --- a/core/modules/outside_in/js/off-canvas.js +++ b/core/misc/dialog/off-canvas.js @@ -94,7 +94,6 @@ at: edge + ' top', of: window }; - settings.dialogClass += ' ui-dialog-off-canvas'; settings.height = $(window).height(); } diff --git a/core/modules/outside_in/css/off-canvas.motion.css b/core/misc/dialog/off-canvas.motion.css similarity index 100% rename from core/modules/outside_in/css/off-canvas.motion.css rename to core/misc/dialog/off-canvas.motion.css diff --git a/core/modules/outside_in/css/off-canvas.reset.css b/core/misc/dialog/off-canvas.reset.css similarity index 100% rename from core/modules/outside_in/css/off-canvas.reset.css rename to core/misc/dialog/off-canvas.reset.css diff --git a/core/modules/outside_in/css/off-canvas.table.css b/core/misc/dialog/off-canvas.table.css similarity index 100% rename from core/modules/outside_in/css/off-canvas.table.css rename to core/misc/dialog/off-canvas.table.css diff --git a/core/modules/outside_in/css/off-canvas.tabledrag.css b/core/misc/dialog/off-canvas.tabledrag.css similarity index 100% rename from core/modules/outside_in/css/off-canvas.tabledrag.css rename to core/misc/dialog/off-canvas.tabledrag.css diff --git a/core/modules/outside_in/css/off-canvas.theme.css b/core/misc/dialog/off-canvas.theme.css similarity index 100% rename from core/modules/outside_in/css/off-canvas.theme.css rename to core/misc/dialog/off-canvas.theme.css diff --git a/core/modules/outside_in/outside_in.libraries.yml b/core/modules/outside_in/outside_in.libraries.yml index 06e24a8291..64e1eddd19 100644 --- a/core/modules/outside_in/outside_in.libraries.yml +++ b/core/modules/outside_in/outside_in.libraries.yml @@ -17,29 +17,3 @@ drupal.outside_in: - core/drupal - core/jquery.once - core/drupal.ajax -drupal.off_canvas: - version: VERSION - js: - js/off-canvas.js: {} - css: - base: - css/off-canvas.reset.css: {} - css/off-canvas.base.css: {} - css/off-canvas.css: {} - css/off-canvas.theme.css: { group: 200 } - component: - css/off-canvas.motion.css: {} - css/off-canvas.button.css: {} - css/off-canvas.form.css: {} - css/off-canvas.table.css: {} - css/off-canvas.details.css: {} - css/off-canvas.tabledrag.css: {} - css/off-canvas.dropbutton.css: {} - - dependencies: - - core/jquery - - core/drupal - - core/drupal.ajax - - core/drupal.announce - - core/drupal.dialog - - core/drupal.dialog.ajax diff --git a/core/modules/outside_in/outside_in.libraries.yml.orig b/core/modules/outside_in/outside_in.libraries.yml.orig new file mode 100644 index 0000000000..06e24a8291 --- /dev/null +++ b/core/modules/outside_in/outside_in.libraries.yml.orig @@ -0,0 +1,45 @@ +drupal.outside_in: + version: VERSION + js: + js/outside_in.js: {} + css: + component: + css/outside_in.module.css: {} + css/outside_in.motion.css: {} + css/outside_in.toolbar.css: {} + theme: + # @todo Set the group higher than CSS_AGGREGATE_THEME so that it overrides + # both jQuery UI and Classy's dialog.css, remove in + # https://www.drupal.org/node/1945262. + css/outside_in.theme.css: { group: 200 } + dependencies: + - core/jquery + - core/drupal + - core/jquery.once + - core/drupal.ajax +drupal.off_canvas: + version: VERSION + js: + js/off-canvas.js: {} + css: + base: + css/off-canvas.reset.css: {} + css/off-canvas.base.css: {} + css/off-canvas.css: {} + css/off-canvas.theme.css: { group: 200 } + component: + css/off-canvas.motion.css: {} + css/off-canvas.button.css: {} + css/off-canvas.form.css: {} + css/off-canvas.table.css: {} + css/off-canvas.details.css: {} + css/off-canvas.tabledrag.css: {} + css/off-canvas.dropbutton.css: {} + + dependencies: + - core/jquery + - core/drupal + - core/drupal.ajax + - core/drupal.announce + - core/drupal.dialog + - core/drupal.dialog.ajax diff --git a/core/modules/outside_in/outside_in.libraries.yml.rej b/core/modules/outside_in/outside_in.libraries.yml.rej new file mode 100644 index 0000000000..1d071b93c7 --- /dev/null +++ b/core/modules/outside_in/outside_in.libraries.yml.rej @@ -0,0 +1,20 @@ +*************** +*** 20,33 **** + - core/drupal + - core/jquery.once + - core/drupal.ajax +- drupal.off_canvas: +- version: VERSION +- js: +- js/off-canvas.js: {} +- dependencies: +- - core/jquery +- - core/drupal +- - core/drupal.ajax +- - core/drupal.announce +- - core/drupal.dialog +- - core/drupal.dialog.ajax +--- 20,22 ---- + - core/drupal + - core/jquery.once + - core/drupal.ajax diff --git a/core/modules/outside_in/outside_in.module b/core/modules/outside_in/outside_in.module index 69517b9919..b465208ba7 100644 --- a/core/modules/outside_in/outside_in.module +++ b/core/modules/outside_in/outside_in.module @@ -50,7 +50,7 @@ function outside_in_contextual_links_view_alter(&$element, $items) { $element['#links']['outside-inblock-configure']['title'] = t('Quick edit settings'); } - $element['#attached']['library'][] = 'outside_in/drupal.off_canvas'; + $element['#attached']['library'][] = 'core/drupal.dialog.off_canvas'; } } @@ -67,26 +67,6 @@ function outside_in_block_view_alter(array &$build) { } /** - * Implements hook_element_info_alter(). - */ -function outside_in_element_info_alter(&$type) { - if (isset($type['page'])) { - $type['page']['#theme_wrappers']['outside_in_page_wrapper'] = ['#weight' => -1000]; - } -} - -/** - * Implements hook_theme(). - */ -function outside_in_theme() { - return [ - 'outside_in_page_wrapper' => [ - 'variables' => ['children' => NULL], - ], - ]; -} - -/** * Implements hook_entity_type_build(). */ function outside_in_entity_type_build(array &$entity_types) { diff --git a/core/modules/outside_in/outside_in.services.yml b/core/modules/outside_in/outside_in.services.yml deleted file mode 100644 index ce8214697a..0000000000 --- a/core/modules/outside_in/outside_in.services.yml +++ /dev/null @@ -1,6 +0,0 @@ -services: - main_content_renderer.off_canvas: - class: Drupal\outside_in\Render\MainContent\OffCanvasRenderer - arguments: ['@title_resolver', '@renderer'] - tags: - - { name: render.main_content_renderer, format: drupal_dialog.off_canvas } diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php index 4e519f6f8b..b48b8b767a 100644 --- a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php +++ b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php @@ -5,6 +5,7 @@ use Drupal\block\Entity\Block; use Drupal\block_content\Entity\BlockContent; use Drupal\block_content\Entity\BlockContentType; +use Drupal\Tests\system\FunctionalJavascript\OffCanvasTestBase; use Drupal\user\Entity\Role; /** @@ -12,7 +13,7 @@ * * @group outside_in */ -class OutsideInBlockFormTest extends OutsideInJavascriptTestBase { +class OutsideInBlockFormTest extends OffCanvasTestBase { const TOOLBAR_EDIT_LINK_SELECTOR = '#toolbar-bar div.contextual-toolbar-tab button'; diff --git a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php b/core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php similarity index 85% rename from core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php rename to core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php index ce3356f112..6d7ddbb9d4 100644 --- a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php +++ b/core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php @@ -1,30 +1,22 @@ drupalLogin($this->drupalCreateUser(['administer contact forms'])); // Ensure the elements render without notices or exceptions. $this->drupalGet('ajax-test/dialog'); diff --git a/core/modules/system/system.module b/core/modules/system/system.module index d327d4e74b..3e75bcb5fd 100644 --- a/core/modules/system/system.module +++ b/core/modules/system/system.module @@ -268,6 +268,9 @@ function system_theme() { ], 'template' => 'entity-add-list', ], + 'off_canvas_page_wrapper' => [ + 'variables' => ['children' => NULL], + ], ]); } @@ -1515,3 +1518,13 @@ function system_query_entity_reference_alter(AlterableInterface $query) { $handler = $query->getMetadata('entity_reference_selection_handler'); $handler->entityQueryAlter($query); } + + +/** + * Implements hook_element_info_alter(). + */ +function system_element_info_alter(&$type) { + if (isset($type['page'])) { + $type['page']['#theme_wrappers']['off_canvas_page_wrapper'] = ['#weight' => -1000]; + } +} diff --git a/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig b/core/modules/system/templates/off-canvas-page-wrapper.html.twig similarity index 100% rename from core/modules/outside_in/templates/outside-in-page-wrapper.html.twig rename to core/modules/system/templates/off-canvas-page-wrapper.html.twig diff --git a/core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.info.yml b/core/modules/system/tests/modules/off_canvas_test/off_canvas_test.info.yml similarity index 76% rename from core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.info.yml rename to core/modules/system/tests/modules/off_canvas_test/off_canvas_test.info.yml index 8c6cc80242..9680b1842d 100644 --- a/core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.info.yml +++ b/core/modules/system/tests/modules/off_canvas_test/off_canvas_test.info.yml @@ -4,6 +4,3 @@ description: 'Provides off-canvas test links.' package: Testing version: VERSION core: 8.x -dependencies: - - block - - outside_in diff --git a/core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.routing.yml b/core/modules/system/tests/modules/off_canvas_test/off_canvas_test.routing.yml similarity index 100% rename from core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.routing.yml rename to core/modules/system/tests/modules/off_canvas_test/off_canvas_test.routing.yml diff --git a/core/modules/outside_in/tests/modules/off_canvas_test/src/Controller/TestController.php b/core/modules/system/tests/modules/off_canvas_test/src/Controller/TestController.php similarity index 88% rename from core/modules/outside_in/tests/modules/off_canvas_test/src/Controller/TestController.php rename to core/modules/system/tests/modules/off_canvas_test/src/Controller/TestController.php index 6164b06fc2..ea310fa0bd 100644 --- a/core/modules/outside_in/tests/modules/off_canvas_test/src/Controller/TestController.php +++ b/core/modules/system/tests/modules/off_canvas_test/src/Controller/TestController.php @@ -53,11 +53,6 @@ public function linksDisplay() { 'data-dialog-type' => 'dialog', 'data-dialog-renderer' => 'off_canvas', ], - '#attached' => [ - 'library' => [ - 'outside_in/drupal.outside_in', - ], - ], ], 'off_canvas_link_2' => [ '#title' => 'Click Me 2!', @@ -71,11 +66,6 @@ public function linksDisplay() { 'width' => 555, ]), ], - '#attached' => [ - 'library' => [ - 'outside_in/drupal.outside_in', - ], - ], ], 'other_dialog_links' => [ '#title' => 'Display more links!', @@ -86,10 +76,10 @@ public function linksDisplay() { 'data-dialog-type' => 'dialog', 'data-dialog-renderer' => 'off_canvas', ], - '#attached' => [ - 'library' => [ - 'outside_in/drupal.outside_in', - ], + ], + '#attached' => [ + 'library' => [ + 'core/drupal.dialog.ajax', ], ], ]; @@ -129,11 +119,6 @@ public function otherDialogLinks() { ], ], ], - '#attached' => [ - 'library' => [ - 'outside_in/drupal.outside_in', - ], - ], ]; } diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php b/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php similarity index 96% rename from core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php rename to core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php index 2f64d9fe2c..a307841317 100644 --- a/core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php +++ b/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php @@ -1,22 +1,18 @@ assertSession(); + // Wait just slightly longer than the tray CSS animation. + // @see core/misc/dialog/off-canvas.motion.css + $this->getSession()->wait(800); $web_assert->assertWaitOnAjaxRequest(); $this->assertElementVisibleAfterWait('css', '#drupal-off-canvas'); } diff --git a/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php b/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php similarity index 81% rename from core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php rename to core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php index 314fd1c2f3..e2d933a657 100644 --- a/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php +++ b/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php @@ -1,13 +1,13 @@ legend { + font-weight: bold; +} +#drupal-off-canvas h1, +#drupal-off-canvas .heading-a { + display: block; + font-weight: bold; + font-size: 1.625em; + line-height: 1.875em; +} +#drupal-off-canvas h2, +#drupal-off-canvas .heading-b { + display: block; + font-weight: bold; + margin: 10px 0; + font-size: 1.385em; +} +#drupal-off-canvas h3, +#drupal-off-canvas .heading-c { + display: block; + font-weight: bold; + margin: 10px 0; + font-size: 1.231em; +} +#drupal-off-canvas h4, +#drupal-off-canvas .heading-d { + display: block; + font-weight: bold; + margin: 10px 0; + font-size: 1.154em; +} +#drupal-off-canvas h5, +#drupal-off-canvas .heading-e { + display: block; + font-weight: bold; + margin: 10px 0; + font-size: 1.077em; +} +#drupal-off-canvas h6, +#drupal-off-canvas .heading-f { + display: block; + font-weight: bold; + margin: 10px 0; + font-size: 1.077em; +} +#drupal-off-canvas p { + margin: 1em 0; +} +#drupal-off-canvas dl { + margin: 0 0 20px; +} +#drupal-off-canvas dl dd, +#drupal-off-canvas dl dl { + margin-left: 20px; /* LTR */ + margin-bottom: 10px; +} +[dir="rtl"] #drupal-off-canvas dl dd, +[dir="rtl"] #drupal-off-canvas dl dl { + margin-right: 20px; +} +#drupal-off-canvas blockquote { + margin: 1em 40px; +} +#drupal-off-canvas address { + font-style: italic; +} +#drupal-off-canvas u, +#drupal-off-canvas ins { + text-decoration: underline; +} +#drupal-off-canvas s, +#drupal-off-canvas strike, +#drupal-off-canvas del { + text-decoration: line-through; +} +#drupal-off-canvas big { + font-size: larger; +} +#drupal-off-canvas small { + font-size: smaller; +} +#drupal-off-canvas sub { + vertical-align: sub; + font-size: smaller; + line-height: normal; +} +#drupal-off-canvas sup { + vertical-align: super; + font-size: smaller; + line-height: normal; +} +#drupal-off-canvas nobr { + white-space: nowrap; +} +#drupal-off-canvas abbr, +#drupal-off-canvas acronym { + border-bottom: dotted 1px; + background: transparent; +} + +#drupal-off-canvas ul { + list-style-type: disc; + list-style-image: none; +} +[dir="rtl"] #drupal-off-canvas .messages__list { + margin-right: 0; +} +#drupal-off-canvas ol { + list-style-type: decimal; +} +#drupal-off-canvas ul li, +#drupal-off-canvas ol li { + display: block; +} +#drupal-off-canvas quote, +#drupal-off-canvas code { + margin: 20px 0; +} +#drupal-off-canvas pre { + margin: 20px 0; + white-space: pre-wrap; +} + +/* Classes for hidden and visually hidden elements. See hidden.module.css. */ +#drupal-off-canvas .hidden { + display: none; +} +#drupal-off-canvas .visually-hidden { + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + overflow: hidden; + height: 1px; + width: 1px; + word-wrap: normal; +} +#drupal-off-canvas .visually-hidden.focusable:active, +#drupal-off-canvas .visually-hidden.focusable:focus { + position: static !important; + clip: auto; + overflow: visible; + height: auto; + width: auto; +} +#drupal-off-canvas .invisible { + visibility: hidden; +} + +/* Some system classes. See system.admin.css. */ +#drupal-off-canvas .panel { + padding: 5px 5px 15px; +} +#drupal-off-canvas .panel__description { + margin: 0 0 3px; + padding: 2px 0 3px 0; +} +#drupal-off-canvas .compact-link { + margin: 0 0 10px 0; +} +#drupal-off-canvas small .admin-link:before { + content: ' ['; +} +#drupal-off-canvas small .admin-link:after { + content: ']'; +} + +/* Override jquery UI */ +#drupal-off-canvas .ui-widget-content a { + color: #85bef4 !important; +} + +/* Message styles */ +#drupal-off-canvas .messages { + background: no-repeat 10px 17px; +} +[dir="rtl"] #drupal-off-canvas .messages { + background-position: right 10px top 17px; +} +#drupal-off-canvas .messages abbr { + color: #444; +} +#drupal-off-canvas .messages--status { + background-color: #f3faef; + background-image: url(../../../misc/icons/73b355/check.svg); + color: #325e1c; +} +#drupal-off-canvas .messages--warning { + background-color: #fdf8ed; + background-image: url(../../../misc/icons/e29700/warning.svg); + color: #734c00; +} + +#drupal-off-canvas .messages--error { + background-color: #fcf4f2; + background-image: url(../../../misc/icons/e32700/error.svg); + color: #a51b00; +} + +#drupal-off-canvas .messages--error div[role="alert"] { + background: transparent; + color: inherit; +} diff --git a/core/themes/stable/css/core/dialog/off-canvas.button.css b/core/themes/stable/css/core/dialog/off-canvas.button.css new file mode 100644 index 0000000000..4f7987aa7c --- /dev/null +++ b/core/themes/stable/css/core/dialog/off-canvas.button.css @@ -0,0 +1,117 @@ +/** + * Visual styling for buttons in the off canvas tray. + * + * See seven/css/components/buttons.css + */ + +#drupal-off-canvas button, +#drupal-off-canvas .button { + -webkit-appearance: none; + -moz-appearance: none; + margin: 0 0 10px; + padding: 0; + border: 0; + box-shadow: none; + font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif; + line-height: normal; + text-transform: none; + text-decoration: none; + cursor: pointer; +} +#drupal-off-canvas button.link { + display: inline; + background: transparent; + font-size: 14px; + color: #85bef4; + transition: color .5s ease; +} +#drupal-off-canvas button.link:hover, +#drupal-off-canvas button.link:focus { + color: #46a0f5; + text-decoration: none; +} +#drupal-off-canvas input[type="submit"].button { + display: inline-block; + position: relative; + width: 100%; + height: auto; + padding: 4px 20px; + border: 0; + border-radius: 20em; + background: #777; + font-weight: 600; + font-size: 14px; + color: #f5f5f5; + text-align: center; + cursor: pointer; + transition: background .5s ease; +} +#drupal-off-canvas input[type="submit"].button:hover, +#drupal-off-canvas input[type="submit"].button:focus, +#drupal-off-canvas input[type="submit"].button:active { + border: 0; + color: #fff; + text-decoration: none; + outline: none; + z-index: 10; +} +#drupal-off-canvas input[type="submit"].button:focus, +#drupal-off-canvas input[type="submit"].button:active { + box-shadow: 0 3px 3px 2px rgba(0,0,0,0.1); +} +#drupal-off-canvas input[type="submit"].button--primary { + border: 0; + background: #277abd; + color: #fff; + margin-top: 15px; +} +#drupal-off-canvas input[type="submit"].button--primary:hover, +#drupal-off-canvas input[type="submit"].button--primary:focus, +#drupal-off-canvas input[type="submit"].button--primary:active { + background: #2b8bd8; + outline: none; +} +#drupal-off-canvas .button-action:before { + margin-left: -0.2em; /* LTR */ + padding-right: 0.2em; /* LTR */ + font-size: 14px; + line-height: 16px; +} +[dir="rtl"] #drupal-off-canvas .button-action:before { + margin-right: -0.2em; + margin-left: 0; + padding-right: 0; + padding-left: 0.2em; +} +#drupal-off-canvas .no-touchevents .button--small { + font-size: 13px; + padding: 2px 1em; /* 1 */ +} +#drupal-off-canvas .button:disabled, +#drupal-off-canvas .button:disabled:active, +#drupal-off-canvas .button.is-disabled, +#drupal-off-canvas .button.is-disabled:active { + border: 0; + background: #555; + color: #5c5c5c; + font-weight: normal; + cursor: default; +} +#drupal-off-canvas .button--danger { + border-radius: 0; + color: #c72100; + font-weight: 400; + text-decoration: none; +} +#drupal-off-canvas .button--danger:hover, +#drupal-off-canvas .button--danger:focus, +#drupal-off-canvas .button--danger:active { + color: #ff2a00; + text-decoration: none; + text-shadow: none; +} +#drupal-off-canvas .button--danger:disabled, +#drupal-off-canvas .button--danger.is-disabled { + color: #737373; + cursor: default; +} diff --git a/core/themes/stable/css/core/dialog/off-canvas.css b/core/themes/stable/css/core/dialog/off-canvas.css new file mode 100644 index 0000000000..d7f3258b26 --- /dev/null +++ b/core/themes/stable/css/core/dialog/off-canvas.css @@ -0,0 +1,57 @@ +/** + * @file + * CSS for off-canvas dialog. + * + * @todo Move CSS into core dialog library https://www.drupal.org/node/2784443. + */ + +/* Position the off-canvas dialog container outside the right of the viewport. */ +.ui-dialog-off-canvas { + box-sizing: border-box; + height: 100%; + overflow: visible; +} + +/* Wrap the form that's inside the off-canvas dialog. */ +.ui-dialog-off-canvas .ui-dialog-content { + padding: 0 20px; + /* Prevent horizontal scrollbar. */ + overflow-x: hidden; + overflow-y: auto; +} +[dir="rtl"] .ui-dialog-off-canvas .ui-dialog-content { + text-align: right; +} + +/* Position the dialog-off-canvas tray container outside the right of the viewport. */ +.ui-dialog-off-canvas { + box-sizing: border-box; + height: 100%; + overflow: visible; +} + +/* Wrap the form that's inside the dialog-off-canvas tray. */ +.ui-dialog-off-canvas #drupal-off-canvas { + padding: 0 20px; + /* Prevent horizontal scrollbar. */ + overflow-x: hidden; + overflow-y: auto; +} +[dir="rtl"] .ui-dialog-off-canvas #drupal-off-canvas { + text-align: right; +} + +/* + * Force the tray to be 100% width at the same breakpoint the dialog system uses + * to expand dialog widths. + */ +@media all and (max-width: 48em) { /* 768px */ + .ui-dialog.ui-dialog-off-canvas { + width: 100% !important; + } + /* When tray is at 100% width stop the body from scrolling */ + .js-tray-open { + height: 100%; + overflow-y: hidden; + } +} diff --git a/core/themes/stable/css/core/dialog/off-canvas.details.css b/core/themes/stable/css/core/dialog/off-canvas.details.css new file mode 100644 index 0000000000..dcac6a5b04 --- /dev/null +++ b/core/themes/stable/css/core/dialog/off-canvas.details.css @@ -0,0 +1,61 @@ +/** + * @file + * Visual styling for summary and details in the Settings Tray module's off canvas tray. + */ + +#drupal-off-canvas details, +#drupal-off-canvas summary { + display: block; + font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif; +} +#drupal-off-canvas details, +#drupal-off-canvas summary, +#drupal-off-canvas .ui-dialog-content { + background: #474747; + color: #ddd; +} +#drupal-off-canvas summary a { + color: #ddd; + padding-top: 0; + padding-bottom: 0; +} +#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 { + border-width: 0; + /* Cancel out the padding of the parent. */ + margin: 0 -20px; + padding: 0 20px; +} +#drupal-off-canvas summary { + text-shadow: none; + padding: 10px 20px; + font-size: 14px; + transition: all .5s ease; +} +#drupal-off-canvas summary:hover, +#drupal-off-canvas summary:focus { + background-color: #222; + outline: none; +} +#drupal-off-canvas details[open] { + padding-bottom: 10px; +} +#drupal-off-canvas details[open] > summary { + background-color: #333; + color: #eee; +} +#drupal-off-canvas details[open] > summary:hover { + background-color: #222; + color: #fff; +} +#drupal-off-canvas details .placeholder { + font: inherit; + color: inherit; + font-style: italic; + background: transparent; +} diff --git a/core/themes/stable/css/core/dialog/off-canvas.dropbutton.css b/core/themes/stable/css/core/dialog/off-canvas.dropbutton.css new file mode 100644 index 0000000000..e467a4f341 --- /dev/null +++ b/core/themes/stable/css/core/dialog/off-canvas.dropbutton.css @@ -0,0 +1,291 @@ +/** + * @file + * Styles for dropbuttons in the off-canvas tray. + */ + +#drupal-off-canvas .dropbutton-wrapper, +#drupal-off-canvas .dropbutton-widget { + -webkit-appearance: none; + -moz-appearance: none; + display: block; + position: static; + transition: none; +} +#drupal-off-canvas .dropbutton-widget { + margin: 0; + padding: 0; + border: 0; + background: #277abd; + border-radius: 1em; + font-weight: 600; + color: #fff; + text-transform: none; + text-decoration: none; + text-align: center; + line-height: normal; + cursor: pointer; + transition: background .5s ease; +} +#drupal-off-canvas .dropbutton-widget:hover { + background: #2b8bd8; +} + +/* + * Style dropbutton single. + */ + +#drupal-off-canvas .dropbutton-single .dropbutton-action a { + padding: 0; + /* Overlap icon for trigger. */ + margin-top: -2em; + height: 2.2em; + cursor: pointer; +} +#drupal-off-canvas .dropbutton-single .dropbutton-action:hover, +#drupal-off-canvas .dropbutton-single .dropbutton-action:focus, +#drupal-off-canvas .dropbutton-single .dropbutton-action a:hover, +#drupal-off-canvas .dropbutton-single .dropbutton-action a:focus { + text-decoration: none; + outline: none; +} +#drupal-off-canvas .dropbutton-widget .dropbutton { + margin: 0; + overflow: hidden; + padding: 0; +} +#drupal-off-canvas .dropbutton li, +#drupal-off-canvas .dropbutton a { + display: block; + width: auto; + padding: 4px 0; + text-align: left; + color: #555; + outline: none; +} +#drupal-off-canvas .dropbutton li:hover, +#drupal-off-canvas .dropbutton li:focus, +#drupal-off-canvas .dropbutton a:hover, +#drupal-off-canvas .dropbutton a:focus { + background: transparent; + color: #333; + outline: none; +} + +/* + * Style dropbutton multiple. + */ + +#drupal-off-canvas .dropbutton-multiple .dropbutton-widget { + width: 2em; + height: 2em; +} +#drupal-off-canvas .dropbutton-multiple .dropbutton-widget:hover { + background-color: #2b8bd8; +} + +/* Hide the other actions until the dropbutton is triggered. */ +#drupal-off-canvas .dropbutton-multiple .dropbutton .secondary-action { + display: none; +} + +/* The toggle to expand the button. */ +#drupal-off-canvas .dropbutton-toggle { + position: absolute; + top: 0; + right: 0; /* LTR */ + bottom: 0; + display: block; + width: 2em; + color: #fff; + text-indent: 110%; + white-space: nowrap; +} +#drupal-off-canvas .dropbutton-toggle button { + display: block; + height: 100%; + width: 100%; + margin: 0; + padding: 0; + border: 0 solid transparent; + border-bottom-right-radius: 1em; /* LTR */ + border-top-right-radius: 1em; /* LTR */ + cursor: pointer; +} +#drupal-off-canvas .dropbutton-toggle button:hover, +#drupal-off-canvas .dropbutton-toggle button:focus { + outline: none; +} + +/* The toggle arrow. */ +#drupal-off-canvas .dropbutton-arrow { + position: absolute; + display: block; + height: 0; + width: 0; + margin-top: 0; + border-bottom-color: transparent; + border-left-color: transparent; + border-right-color: transparent; + border-style: solid; + border-width: 0.3333em 0.3333em 0; + color: #fff; + line-height: 0; + overflow: hidden; +} +#drupal-off-canvas span.dropbutton-arrow { + top: 7px; + right: 7px; /* LTR */ + background: transparent; +} +#drupal-off-canvas span.dropbutton-arrow:hover { + background: transparent; +} + +#drupal-off-canvas .dropbutton-action > .js-form-submit.form-submit, +#drupal-off-canvas .dropbutton-toggle button { + position: relative; + text-shadow: none; +} + +/* + * Dropbuttons when in a table cell. + */ + +/* Make sure table cell doesn't collapse around absolute positioned dropbutton. */ +#drupal-off-canvas td .dropbutton-single { + min-width: 2em; +} +#drupal-off-canvas td .dropbutton-multiple { + min-width: 2em; + padding-right: 0; + padding-left: 0; + margin-right: 0; + margin-left: 0; + border: 0; +} +#drupal-off-canvas td .dropbutton-multiple .dropbutton-action a, +#drupal-off-canvas td .dropbutton-multiple .dropbutton-action input, +#drupal-off-canvas td .dropbutton-multiple .dropbutton-action button { + width: auto; + padding: 0; + font-size: inherit; +} +#drupal-off-canvas td .dropbutton-wrapper { + margin-bottom: 0; +} + +/* Push the widget to the right so text expands left. */ +#drupal-off-canvas td .dropbutton-widget { + position: absolute; + right: 12px; /* LTR */ + padding: 0; + background: #277abd none; +} + +/* Push the wrapper to the right edge of the td. */ +#drupal-off-canvas td .dropbutton-single, +#drupal-off-canvas td .dropbutton-multiple { + float: right; /* LTR */ + padding-right: 0; + margin-right: 0; + max-width: initial; + min-width: initial; + position: relative; +} +#drupal-off-canvas td .dropbutton-widget .dropbutton { + margin: 0; + width: 2em; + height: 2em; + overflow: hidden; + background: transparent; +} + +/* Push text out of the way. */ +#drupal-off-canvas td .dropbutton-multiple li, +#drupal-off-canvas td .dropbutton-multiple a { + margin-left: -9999px; + background: transparent; +} +#drupal-off-canvas td .dropbutton-multiple.open .dropbutton li, +#drupal-off-canvas td .dropbutton-multiple.open .dropbutton a { + margin-left: 0; + width: auto; + color: #fff; +} + +/* Collapse the button to a circle. */ +#drupal-off-canvas td .dropbutton-toggle { + width: 2em; + height: 2em; + border-radius: 1em; +} +#drupal-off-canvas td .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button { + border: 0; + background: transparent; +} + +/* Prevent list item from expanding it's container. */ +#drupal-off-canvas td ul.dropbutton li.edit { + width: 2em; + height: 2em; +} + +/* Make li text transparent above icon so it's clickable. */ +#drupal-off-canvas td .dropbutton-single li.edit.dropbutton-action > a { + color: transparent; + z-index: 1; +} + +/* Put pencil icon in place of hidden 'edit' text on single buttons. */ +#drupal-off-canvas td .dropbutton-single .edit:before { + content: '.'; + display: block; + 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; + width: auto; + height: auto; + max-width: none; + min-width: 0; + padding: 0; + overflow: visible; +} + +/* 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-left: 1em; + padding-right: inherit; +} +#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 { + border-bottom: 0.3333em solid; + border-top-color: transparent; + top: 2px; +} diff --git a/core/themes/stable/css/core/dialog/off-canvas.form.css b/core/themes/stable/css/core/dialog/off-canvas.form.css new file mode 100644 index 0000000000..8e95b78c6d --- /dev/null +++ b/core/themes/stable/css/core/dialog/off-canvas.form.css @@ -0,0 +1,137 @@ +/** + * @file + * Visual styling for forms in the Settings Tray module's off canvas tray. + */ + +#drupal-off-canvas form { + font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif; + color: #ddd; +} +#drupal-off-canvas input[type="checkbox"] { + -webkit-appearance: checkbox; +} +#drupal-off-canvas input[type="radio"] { + -webkit-appearance: radio; +} +#drupal-off-canvas select { + -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 { + line-height: normal; + font-family: inherit; + font-size: 12px; + font-weight: bold; + color: #ddd; +} +#drupal-off-canvas .visually-hidden { + opacity: 0; + height: 0; + width: 0; + letter-spacing: -2em; +} +#drupal-off-canvas .description, +#drupal-off-canvas .form-item .description, +#drupal-off-canvas .details-description { + color: #ddd; + margin-top: 5px; + font-family: inherit; + font-size: 12px; + font-style: normal; +} +#drupal-off-canvas .details-wrapper .description { + color: #bbb; +} +#drupal-off-canvas .form-item { + margin-bottom: 10px; + margin-top: 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 { + box-sizing: border-box; + max-width: 100%; + padding: 6px; + margin: 5px 0 0 0; + border-width: 1px; + border-radius: 2px; + display: block; + font-family: inherit; + font-size: 14px; + color: #333; + line-height: 16px; + cursor: pointer; +} +/* 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 { + box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125); + background-color: #eee; + border-color: #333; + color: #595959; +} +#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; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125), 0 0 8px #40b6ff; + background-color: #fff; +} +#drupal-off-canvas td .form-item, +#drupal-off-canvas td .form-select { + margin: 0; +} +#drupal-off-canvas .form-file { + margin-bottom: 5px; + width: 100%; +} +#drupal-off-canvas .form-actions { + text-align: center; + margin: 10px 0; +} +#drupal-off-canvas .ui-autocomplete { + background-color: white; + position: absolute; + top: 0; + left: 0; + cursor: default; +} +#drupal-off-canvas .ui-autocomplete li { + display: block; +} +#drupal-off-canvas .ui-autocomplete li a { + color: #595959 !important; + cursor: pointer; + padding: 5px; +} diff --git a/core/themes/stable/css/core/dialog/off-canvas.motion.css b/core/themes/stable/css/core/dialog/off-canvas.motion.css new file mode 100644 index 0000000000..e8df8dbbd2 --- /dev/null +++ b/core/themes/stable/css/core/dialog/off-canvas.motion.css @@ -0,0 +1,17 @@ +/** + * @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. + * + * @todo Move motion effects file into a core Off-Canvas library and add a + * configuration option for browser rendering performance to disable this + * file: https://www.drupal.org/node/2784443. + */ + +.dialog-off-canvas__main-canvas { + -webkit-transition: all .7s ease; + -moz-transition: all .7s ease; + transition: all .7s ease; +} diff --git a/core/themes/stable/css/core/dialog/off-canvas.reset.css b/core/themes/stable/css/core/dialog/off-canvas.reset.css new file mode 100644 index 0000000000..cd87eda9c9 --- /dev/null +++ b/core/themes/stable/css/core/dialog/off-canvas.reset.css @@ -0,0 +1,386 @@ +/** + * @file + * Reset most HTML elements styles for the off-canvas dialog. + * + * This is a generic reset. Drupal-specific classes are reset in components. + */ + +/** + * Do not include div in then initial overrides because including div will + * cause the need for many more overrides in this file. + */ +#drupal-off-canvas *:not(div), +#drupal-off-canvas *:after, +#drupal-off-canvas *: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 { + border: 0; + margin: 0; + padding: 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; + line-height: normal; + border-radius: 0; +} + +/* + * 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 { + color: transparent; + font-size: 0; + vertical-align: middle; +} + +#drupal-off-canvas ul, +#drupal-off-canvas ol { + list-style: none; +} + +/* reset table styling. */ +#drupal-off-canvas table { + border-collapse: collapse; + border-spacing: 0; +} +#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: none; + background-color: transparent; +} +#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 { + line-height: 0; + position: relative; + vertical-align: baseline; +} +#drupal-off-canvas sub { + bottom: -0.25em; +} +#drupal-off-canvas sup { + top: -0.5em; +} + +/* + * For IE9. Without, occasionally draws shapes + * outside the boundaries of 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 { + box-shadow: none; + z-index: 1; +} +#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"] { + -webkit-appearance: none; + -moz-appearance: none; + display: inline-block; + background-image: none; + border: 0; + outline: 0; + overflow: visible; + text-shadow: none; + text-decoration: none; + vertical-align: middle; + cursor: pointer; +} +#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 { + background-image: none; + text-decoration: 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 { + background-image: none; + box-shadow: none; + border-color: grey; +} +#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 { + border: 0; + padding: 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: grey; +} +#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] { + box-shadow: none; + user-select: none; + cursor: default; +} +#drupal-off-canvas input:placeholder, +#drupal-off-canvas textarea:placeholder { + color: grey; +} +#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 { + min-height: 40px; + overflow: auto; + resize: vertical; + width: 100%; +} +#drupal-off-canvas optgroup { + color: black; + font-style: normal; + font-weight: normal; +} +#drupal-off-canvas optgroup::-moz-focus-inner { + border: 0; + padding: 0; +} +#drupal-off-canvas * button { + background: none; + border: 1px solid; + border-color: grey; + color: black; + padding: 0; + text-decoration: none; + overflow: visible; + vertical-align: middle; + width: auto; +} +#drupal-off-canvas * textarea, +#drupal-off-canvas * select, +#drupal-off-canvas *:not(div) textarea, +#drupal-off-canvas *:not(div) select { + background: white; + border: 1px solid; + border-color: grey; + color: black; + padding: 0; + vertical-align: top; +} + +/* Bootstrap and other frameworks add color to selection. */ +#drupal-off-canvas ::selection { + background-color: rgba(175,175,175,0.5); + color: inherit; +} diff --git a/core/themes/stable/css/core/dialog/off-canvas.table.css b/core/themes/stable/css/core/dialog/off-canvas.table.css new file mode 100644 index 0000000000..3a6e749757 --- /dev/null +++ b/core/themes/stable/css/core/dialog/off-canvas.table.css @@ -0,0 +1,90 @@ +/** + * @file + * Visual styling for tables in the Settings Tray module's off canvas tray. + */ + +#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; + border: 0; + border-collapse: collapse; + font-size: 12px; + color: #ddd; +} +#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; + height: auto; + width: 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; + color: #bbb; +} +#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 { + text-align: right; + padding-right: 20px; +} +#drupal-off-canvas td { + padding: 6px 8px; + color: #ddd; +} +/* Hide overflow with elipsis for links. */ +#drupal-off-canvas td a { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + 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; +} diff --git a/core/themes/stable/css/core/dialog/off-canvas.tabledrag.css b/core/themes/stable/css/core/dialog/off-canvas.tabledrag.css new file mode 100644 index 0000000000..4f6f9bee5e --- /dev/null +++ b/core/themes/stable/css/core/dialog/off-canvas.tabledrag.css @@ -0,0 +1,122 @@ +/** + * @file + * Table drag behavior for Settings Tray module. + * + * @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 { + background-image: none; + margin: 0 5px 0 0; + height: auto; + min-width: 20px; + padding: 0; + overflow: hidden; + float: left; /* LTR */ + text-decoration: none; + cursor: move; +} +[dir="rtl"] #drupal-off-canvas .draggable a.tabledrag-handle { + float: right; + margin-right: 0; + margin-left: 5px; +} +#drupal-off-canvas a.tabledrag-handle .handle { + /* Use lighter drag icon against dark background. */ + background-image: url(../../../misc/icons/bebebe/move.svg); + background-repeat: no-repeat; + background-position: center; + height: auto; + margin: 0; + padding: 0; + width: auto; + background-color: transparent; +} +#drupal-off-canvas .draggable a.tabledrag-handle:hover .handle, +#drupal-off-canvas .draggable a.tabledrag-handle:focus .handle { + background-image: url(../../../misc/icons/787878/move.svg); + text-decoration: none; +} +#drupal-off-canvas tr td { + transition: background .3s ease; +} + +#drupal-off-canvas tr td abbr { + margin-left: 5px; /* LTR */ +} + +[dir="rtl"] #drupal-off-canvas tr td abbr { + margin-left: 0; + margin-right: 5px; +} +#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 { + height: 44px; + width: 40px; +} +#drupal-off-canvas .touchevents a.tabledrag-handle .handle { + background-position: 40% 19px; /* LTR */ + height: 21px; +} +[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 */ + height: auto; + margin: 0 3px 0 -10px; /* LTR */ + padding: 0 0 0 10px; /* LTR */ + width: auto; +} +[dir="rtl"] #drupal-off-canvas .indentation { + float: right; + margin: 0 -10px 0 3px; + padding: 0 10px 0 0; +} diff --git a/core/themes/stable/css/core/dialog/off-canvas.theme.css b/core/themes/stable/css/core/dialog/off-canvas.theme.css new file mode 100644 index 0000000000..47bdcfbbcf --- /dev/null +++ b/core/themes/stable/css/core/dialog/off-canvas.theme.css @@ -0,0 +1,89 @@ +/* Style the dialog-off-canvas container. */ +.ui-dialog.ui-dialog-off-canvas { + background: #444; + border: 0 solid transparent; + border-radius: 0; + box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333); + padding: 0; + color: #ddd; + /* Layer the dialog just under the toolbar. */ + z-index: 501; +} + +/* Style the tray header. */ +.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar { + padding: 1em; + background: #2d2d2d; + border: 0; + border-bottom: 1px solid #000; + border-radius: 0; + font-weight: normal; + color: #fff; +} +/* 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 { + background-image: url(../../../misc/icons/bebebe/ex.svg); + background-position: center center; + background-repeat: no-repeat; + background-color: transparent; + border: 0; + position: absolute; + right: 1em; + -moz-transition: all .5s ease; + transition: background .5s ease; +} +.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover { + background-image: url(../../../misc/icons/ffffff/ex.svg); +} +[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close { + left: 1em; + right: auto; +} +.ui-dialog.ui-dialog-off-canvas .ui-dialog-title { + margin: 0; + /* Push the text away from the icon. */ + padding-left: 30px; /* LTR */ + padding-right: 0; /* LTR */ + /* Ensure that long titles do not overlap the close button. */ + max-width: 210px; + font-size: 16px; + font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif; + text-align: left; /* LTR */ +} +[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title { + float: right; + text-align: right; + padding-left: 0; + padding-right: 30px; +} +.ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before { + background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat scroll center center; + background-size: 100% auto; + content: ''; + display: block; + height: 100%; + position: absolute; + left: 1em; /* LTR */ + top: 0; + width: 20px; +} +[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before { + left: auto; + right: 1em; +} + +/* 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 { + border: 0; + font-weight: normal; + font-size: 14px; + color: #333; +} +#drupal-off-canvas .ui-widget-content a { + color: #85bef4/*{fcContent}*/; +} diff --git a/core/themes/stable/stable.info.yml b/core/themes/stable/stable.info.yml index 251ecbd534..3735ae19a9 100644 --- a/core/themes/stable/stable.info.yml +++ b/core/themes/stable/stable.info.yml @@ -57,6 +57,22 @@ libraries-override: component: css/contextual.toolbar.css: css/contextual/contextual.toolbar.css + core/drupal.dialog.off_canvas: + css: + base: + misc/dialog/css/off-canvas.reset.css: css/core/dialog/off-canvas.reset.css + misc/dialog/css/off-canvas.base.css: css/core/dialog/off-canvas.base.css + misc/dialog/css/off-canvas.css: css/core/dialog/off-canvas.css + misc/dialog/css/off-canvas.theme.css: css/core/dialog/off-canvas.theme.css + component: + misc/dialog/css/off-canvas.motion.css: css/core/dialog/off-canvas.motion.css + misc/dialog/css/off-canvas.button.css: css/core/dialog/off-canvas.button.css + misc/dialog/css/off-canvas.form.css: css/core/dialog/off-canvas.form.css + misc/dialog/css/off-canvas.table.css: css/core/dialog/off-canvas.table.css + misc/dialog/css/off-canvas.details.css: css/core/dialog/off-canvas.details.css + misc/dialog/css/off-canvas.tabledrag.css: css/core/dialog/off-canvas.tabledrag.css + misc/dialog/css/off-canvas.dropbutton.css: css/core/dialog/off-canvas.dropbutton.css + core/drupal.dropbutton: css: component: diff --git a/core/themes/stable/templates/content/off-canvas-page-wrapper.html.twig b/core/themes/stable/templates/content/off-canvas-page-wrapper.html.twig new file mode 100644 index 0000000000..cccd26fe99 --- /dev/null +++ b/core/themes/stable/templates/content/off-canvas-page-wrapper.html.twig @@ -0,0 +1,26 @@ +{# +/** + * @file + * Theme override for page wrapper. + * + * For consistent wrapping to {{ page }} render in all themes. The + * "data-off-canvas-main-canvas" attribute is required by the off-canvas dialog. + * This is used by the outside_in/drupal.off_canvas library to select the + * "main canvas" page element as opposed to the "off canvas" which is the tray + * itself. The "main canvas" element must be resized according to the width of + * the "off canvas" tray so that no portion of the "main canvas" is obstructed + * by the tray. The tray can vary in width when opened and can be resized by the + * user. The "data-off-canvas-main-canvas" attribute cannot be removed without + * breaking the off-canvas dialog functionality. + * + * Available variables: + * - children: Contains the child elements of the page. + * + * @ingroup themeable + */ +#} +{% if children %} +
+ {{ children }} +
+{% endif %}