Update Composer, update everything
This commit is contained in:
Oliver Davies
parent
ea3e94409f
commit
dda5c284b6
19527 changed files with 1135420 additions and 351004 deletions
258
web/core/misc/dialog/dialog.ajax.es6.js
Normal file
258
web/core/misc/dialog/dialog.ajax.es6.js
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
/**
|
||||
* @file
|
||||
* Extends the Drupal AJAX functionality to integrate the dialog API.
|
||||
*/
|
||||
|
||||
(function($, Drupal) {
|
||||
/**
|
||||
* Initialize dialogs for Ajax purposes.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches the behaviors for dialog ajax functionality.
|
||||
*/
|
||||
Drupal.behaviors.dialog = {
|
||||
attach(context, settings) {
|
||||
const $context = $(context);
|
||||
|
||||
// Provide a known 'drupal-modal' DOM element for Drupal-based modal
|
||||
// dialogs. Non-modal dialogs are responsible for creating their own
|
||||
// elements, since there can be multiple non-modal dialogs at a time.
|
||||
if (!$('#drupal-modal').length) {
|
||||
// Add 'ui-front' jQuery UI class so jQuery UI widgets like autocomplete
|
||||
// sit on top of dialogs. For more information see
|
||||
// http://api.jqueryui.com/theming/stacking-elements/.
|
||||
$('<div id="drupal-modal" class="ui-front"/>')
|
||||
.hide()
|
||||
.appendTo('body');
|
||||
}
|
||||
|
||||
// Special behaviors specific when attaching content within a dialog.
|
||||
// These behaviors usually fire after a validation error inside a dialog.
|
||||
const $dialog = $context.closest('.ui-dialog-content');
|
||||
if ($dialog.length) {
|
||||
// Remove and replace the dialog buttons with those from the new form.
|
||||
if ($dialog.dialog('option', 'drupalAutoButtons')) {
|
||||
// Trigger an event to detect/sync changes to buttons.
|
||||
$dialog.trigger('dialogButtonsChange');
|
||||
}
|
||||
|
||||
// Force focus on the modal when the behavior is run.
|
||||
$dialog.dialog('widget').trigger('focus');
|
||||
}
|
||||
|
||||
const originalClose = settings.dialog.close;
|
||||
// Overwrite the close method to remove the dialog on closing.
|
||||
settings.dialog.close = function(event, ...args) {
|
||||
originalClose.apply(settings.dialog, [event, ...args]);
|
||||
$(event.target).remove();
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Scan a dialog for any primary buttons and move them to the button area.
|
||||
*
|
||||
* @param {jQuery} $dialog
|
||||
* An jQuery object containing the element that is the dialog target.
|
||||
*
|
||||
* @return {Array}
|
||||
* An array of buttons that need to be added to the button area.
|
||||
*/
|
||||
prepareDialogButtons($dialog) {
|
||||
const buttons = [];
|
||||
const $buttons = $dialog.find(
|
||||
'.form-actions input[type=submit], .form-actions a.button',
|
||||
);
|
||||
$buttons.each(function() {
|
||||
// Hidden form buttons need special attention. For browser consistency,
|
||||
// the button needs to be "visible" in order to have the enter key fire
|
||||
// the form submit event. So instead of a simple "hide" or
|
||||
// "display: none", we set its dimensions to zero.
|
||||
// See http://mattsnider.com/how-forms-submit-when-pressing-enter/
|
||||
const $originalButton = $(this).css({
|
||||
display: 'block',
|
||||
width: 0,
|
||||
height: 0,
|
||||
padding: 0,
|
||||
border: 0,
|
||||
overflow: 'hidden',
|
||||
});
|
||||
buttons.push({
|
||||
text: $originalButton.html() || $originalButton.attr('value'),
|
||||
class: $originalButton.attr('class'),
|
||||
click(e) {
|
||||
// If the original button is an anchor tag, triggering the "click"
|
||||
// event will not simulate a click. Use the click method instead.
|
||||
if ($originalButton.is('a')) {
|
||||
$originalButton[0].click();
|
||||
} else {
|
||||
$originalButton
|
||||
.trigger('mousedown')
|
||||
.trigger('mouseup')
|
||||
.trigger('click');
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
return buttons;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Command to open a dialog.
|
||||
*
|
||||
* @param {Drupal.Ajax} ajax
|
||||
* The Drupal Ajax object.
|
||||
* @param {object} response
|
||||
* Object holding the server response.
|
||||
* @param {number} [status]
|
||||
* The HTTP status code.
|
||||
*
|
||||
* @return {bool|undefined}
|
||||
* Returns false if there was no selector property in the response object.
|
||||
*/
|
||||
Drupal.AjaxCommands.prototype.openDialog = function(ajax, response, status) {
|
||||
if (!response.selector) {
|
||||
return false;
|
||||
}
|
||||
let $dialog = $(response.selector);
|
||||
if (!$dialog.length) {
|
||||
// Create the element if needed.
|
||||
$dialog = $(
|
||||
`<div id="${response.selector.replace(/^#/, '')}" class="ui-front"/>`,
|
||||
).appendTo('body');
|
||||
}
|
||||
// Set up the wrapper, if there isn't one.
|
||||
if (!ajax.wrapper) {
|
||||
ajax.wrapper = $dialog.attr('id');
|
||||
}
|
||||
|
||||
// Use the ajax.js insert command to populate the dialog contents.
|
||||
response.command = 'insert';
|
||||
response.method = 'html';
|
||||
ajax.commands.insert(ajax, response, status);
|
||||
|
||||
// Move the buttons to the jQuery UI dialog buttons area.
|
||||
if (!response.dialogOptions.buttons) {
|
||||
response.dialogOptions.drupalAutoButtons = true;
|
||||
response.dialogOptions.buttons = Drupal.behaviors.dialog.prepareDialogButtons(
|
||||
$dialog,
|
||||
);
|
||||
}
|
||||
|
||||
// Bind dialogButtonsChange.
|
||||
$dialog.on('dialogButtonsChange', () => {
|
||||
const buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
|
||||
$dialog.dialog('option', 'buttons', buttons);
|
||||
});
|
||||
|
||||
// Open the dialog itself.
|
||||
response.dialogOptions = response.dialogOptions || {};
|
||||
const dialog = Drupal.dialog($dialog.get(0), response.dialogOptions);
|
||||
if (response.dialogOptions.modal) {
|
||||
dialog.showModal();
|
||||
} else {
|
||||
dialog.show();
|
||||
}
|
||||
|
||||
// Add the standard Drupal class for buttons for style consistency.
|
||||
$dialog
|
||||
.parent()
|
||||
.find('.ui-dialog-buttonset')
|
||||
.addClass('form-actions');
|
||||
};
|
||||
|
||||
/**
|
||||
* Command to close a dialog.
|
||||
*
|
||||
* If no selector is given, it defaults to trying to close the modal.
|
||||
*
|
||||
* @param {Drupal.Ajax} [ajax]
|
||||
* The ajax object.
|
||||
* @param {object} response
|
||||
* Object holding the server response.
|
||||
* @param {string} response.selector
|
||||
* The selector of the dialog.
|
||||
* @param {bool} response.persist
|
||||
* Whether to persist the dialog element or not.
|
||||
* @param {number} [status]
|
||||
* The HTTP status code.
|
||||
*/
|
||||
Drupal.AjaxCommands.prototype.closeDialog = function(ajax, response, status) {
|
||||
const $dialog = $(response.selector);
|
||||
if ($dialog.length) {
|
||||
Drupal.dialog($dialog.get(0)).close();
|
||||
if (!response.persist) {
|
||||
$dialog.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Unbind dialogButtonsChange.
|
||||
$dialog.off('dialogButtonsChange');
|
||||
};
|
||||
|
||||
/**
|
||||
* Command to set a dialog property.
|
||||
*
|
||||
* JQuery UI specific way of setting dialog options.
|
||||
*
|
||||
* @param {Drupal.Ajax} [ajax]
|
||||
* The Drupal Ajax object.
|
||||
* @param {object} response
|
||||
* Object holding the server response.
|
||||
* @param {string} response.selector
|
||||
* Selector for the dialog element.
|
||||
* @param {string} response.optionsName
|
||||
* Name of a key to set.
|
||||
* @param {string} response.optionValue
|
||||
* Value to set.
|
||||
* @param {number} [status]
|
||||
* The HTTP status code.
|
||||
*/
|
||||
Drupal.AjaxCommands.prototype.setDialogOption = function(
|
||||
ajax,
|
||||
response,
|
||||
status,
|
||||
) {
|
||||
const $dialog = $(response.selector);
|
||||
if ($dialog.length) {
|
||||
$dialog.dialog('option', response.optionName, response.optionValue);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Binds a listener on dialog creation to handle the cancel link.
|
||||
*
|
||||
* @param {jQuery.Event} e
|
||||
* The event triggered.
|
||||
* @param {Drupal.dialog~dialogDefinition} dialog
|
||||
* The dialog instance.
|
||||
* @param {jQuery} $element
|
||||
* The jQuery collection of the dialog element.
|
||||
* @param {object} [settings]
|
||||
* Dialog settings.
|
||||
*/
|
||||
$(window).on('dialog:aftercreate', (e, dialog, $element, settings) => {
|
||||
$element.on('click.dialog', '.dialog-cancel', e => {
|
||||
dialog.close('cancel');
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Removes all 'dialog' listeners.
|
||||
*
|
||||
* @param {jQuery.Event} e
|
||||
* The event triggered.
|
||||
* @param {Drupal.dialog~dialogDefinition} dialog
|
||||
* The dialog instance.
|
||||
* @param {jQuery} $element
|
||||
* jQuery collection of the dialog element.
|
||||
*/
|
||||
$(window).on('dialog:beforeclose', (e, dialog, $element) => {
|
||||
$element.off('.dialog');
|
||||
});
|
||||
})(jQuery, Drupal);
|
||||
|
|
@ -1,74 +1,43 @@
|
|||
/**
|
||||
* @file
|
||||
* Extends the Drupal AJAX functionality to integrate the dialog API.
|
||||
*/
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
(function ($, Drupal) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Initialize dialogs for Ajax purposes.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches the behaviors for dialog ajax functionality.
|
||||
*/
|
||||
Drupal.behaviors.dialog = {
|
||||
attach: function (context, settings) {
|
||||
attach: function attach(context, settings) {
|
||||
var $context = $(context);
|
||||
|
||||
// Provide a known 'drupal-modal' DOM element for Drupal-based modal
|
||||
// dialogs. Non-modal dialogs are responsible for creating their own
|
||||
// elements, since there can be multiple non-modal dialogs at a time.
|
||||
if (!$('#drupal-modal').length) {
|
||||
// Add 'ui-front' jQuery UI class so jQuery UI widgets like autocomplete
|
||||
// sit on top of dialogs. For more information see
|
||||
// http://api.jqueryui.com/theming/stacking-elements/.
|
||||
$('<div id="drupal-modal" class="ui-front"/>').hide().appendTo('body');
|
||||
}
|
||||
|
||||
// Special behaviors specific when attaching content within a dialog.
|
||||
// These behaviors usually fire after a validation error inside a dialog.
|
||||
var $dialog = $context.closest('.ui-dialog-content');
|
||||
if ($dialog.length) {
|
||||
// Remove and replace the dialog buttons with those from the new form.
|
||||
if ($dialog.dialog('option', 'drupalAutoButtons')) {
|
||||
// Trigger an event to detect/sync changes to buttons.
|
||||
$dialog.trigger('dialogButtonsChange');
|
||||
}
|
||||
|
||||
// Force focus on the modal when the behavior is run.
|
||||
$dialog.dialog('widget').trigger('focus');
|
||||
}
|
||||
|
||||
var originalClose = settings.dialog.close;
|
||||
// Overwrite the close method to remove the dialog on closing.
|
||||
|
||||
settings.dialog.close = function (event) {
|
||||
originalClose.apply(settings.dialog, arguments);
|
||||
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||||
args[_key - 1] = arguments[_key];
|
||||
}
|
||||
|
||||
originalClose.apply(settings.dialog, [event].concat(args));
|
||||
$(event.target).remove();
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Scan a dialog for any primary buttons and move them to the button area.
|
||||
*
|
||||
* @param {jQuery} $dialog
|
||||
* An jQuery object containing the element that is the dialog target.
|
||||
*
|
||||
* @return {Array}
|
||||
* An array of buttons that need to be added to the button area.
|
||||
*/
|
||||
prepareDialogButtons: function ($dialog) {
|
||||
prepareDialogButtons: function prepareDialogButtons($dialog) {
|
||||
var buttons = [];
|
||||
var $buttons = $dialog.find('.form-actions input[type=submit], .form-actions a.button');
|
||||
$buttons.each(function () {
|
||||
// Hidden form buttons need special attention. For browser consistency,
|
||||
// the button needs to be "visible" in order to have the enter key fire
|
||||
// the form submit event. So instead of a simple "hide" or
|
||||
// "display: none", we set its dimensions to zero.
|
||||
// See http://mattsnider.com/how-forms-submit-when-pressing-enter/
|
||||
var $originalButton = $(this).css({
|
||||
display: 'block',
|
||||
width: 0,
|
||||
|
|
@ -80,13 +49,10 @@
|
|||
buttons.push({
|
||||
text: $originalButton.html() || $originalButton.attr('value'),
|
||||
class: $originalButton.attr('class'),
|
||||
click: function (e) {
|
||||
// If the original button is an anchor tag, triggering the "click"
|
||||
// event will not simulate a click. Use the click method instead.
|
||||
click: function click(e) {
|
||||
if ($originalButton.is('a')) {
|
||||
$originalButton[0].click();
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
$originalButton.trigger('mousedown').trigger('mouseup').trigger('click');
|
||||
e.preventDefault();
|
||||
}
|
||||
|
|
@ -97,80 +63,44 @@
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Command to open a dialog.
|
||||
*
|
||||
* @param {Drupal.Ajax} ajax
|
||||
* The Drupal Ajax object.
|
||||
* @param {object} response
|
||||
* Object holding the server response.
|
||||
* @param {number} [status]
|
||||
* The HTTP status code.
|
||||
*
|
||||
* @return {bool|undefined}
|
||||
* Returns false if there was no selector property in the response object.
|
||||
*/
|
||||
Drupal.AjaxCommands.prototype.openDialog = function (ajax, response, status) {
|
||||
if (!response.selector) {
|
||||
return false;
|
||||
}
|
||||
var $dialog = $(response.selector);
|
||||
if (!$dialog.length) {
|
||||
// Create the element if needed.
|
||||
$dialog = $('<div id="' + response.selector.replace(/^#/, '') + '" class="ui-front"/>').appendTo('body');
|
||||
}
|
||||
// Set up the wrapper, if there isn't one.
|
||||
|
||||
if (!ajax.wrapper) {
|
||||
ajax.wrapper = $dialog.attr('id');
|
||||
}
|
||||
|
||||
// Use the ajax.js insert command to populate the dialog contents.
|
||||
response.command = 'insert';
|
||||
response.method = 'html';
|
||||
ajax.commands.insert(ajax, response, status);
|
||||
|
||||
// Move the buttons to the jQuery UI dialog buttons area.
|
||||
if (!response.dialogOptions.buttons) {
|
||||
response.dialogOptions.drupalAutoButtons = true;
|
||||
response.dialogOptions.buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
|
||||
}
|
||||
|
||||
// Bind dialogButtonsChange.
|
||||
$dialog.on('dialogButtonsChange', function () {
|
||||
var buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
|
||||
$dialog.dialog('option', 'buttons', buttons);
|
||||
});
|
||||
|
||||
// Open the dialog itself.
|
||||
response.dialogOptions = response.dialogOptions || {};
|
||||
var dialog = Drupal.dialog($dialog.get(0), response.dialogOptions);
|
||||
if (response.dialogOptions.modal) {
|
||||
dialog.showModal();
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
dialog.show();
|
||||
}
|
||||
|
||||
// Add the standard Drupal class for buttons for style consistency.
|
||||
$dialog.parent().find('.ui-dialog-buttonset').addClass('form-actions');
|
||||
};
|
||||
|
||||
/**
|
||||
* Command to close a dialog.
|
||||
*
|
||||
* If no selector is given, it defaults to trying to close the modal.
|
||||
*
|
||||
* @param {Drupal.Ajax} [ajax]
|
||||
* The ajax object.
|
||||
* @param {object} response
|
||||
* Object holding the server response.
|
||||
* @param {string} response.selector
|
||||
* The selector of the dialog.
|
||||
* @param {bool} response.persist
|
||||
* Whether to persist the dialog element or not.
|
||||
* @param {number} [status]
|
||||
* The HTTP status code.
|
||||
*/
|
||||
Drupal.AjaxCommands.prototype.closeDialog = function (ajax, response, status) {
|
||||
var $dialog = $(response.selector);
|
||||
if ($dialog.length) {
|
||||
|
|
@ -180,28 +110,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Unbind dialogButtonsChange.
|
||||
$dialog.off('dialogButtonsChange');
|
||||
};
|
||||
|
||||
/**
|
||||
* Command to set a dialog property.
|
||||
*
|
||||
* JQuery UI specific way of setting dialog options.
|
||||
*
|
||||
* @param {Drupal.Ajax} [ajax]
|
||||
* The Drupal Ajax object.
|
||||
* @param {object} response
|
||||
* Object holding the server response.
|
||||
* @param {string} response.selector
|
||||
* Selector for the dialog element.
|
||||
* @param {string} response.optionsName
|
||||
* Name of a key to set.
|
||||
* @param {string} response.optionValue
|
||||
* Value to set.
|
||||
* @param {number} [status]
|
||||
* The HTTP status code.
|
||||
*/
|
||||
Drupal.AjaxCommands.prototype.setDialogOption = function (ajax, response, status) {
|
||||
var $dialog = $(response.selector);
|
||||
if ($dialog.length) {
|
||||
|
|
@ -209,18 +120,6 @@
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Binds a listener on dialog creation to handle the cancel link.
|
||||
*
|
||||
* @param {jQuery.Event} e
|
||||
* The event triggered.
|
||||
* @param {Drupal.dialog~dialogDefinition} dialog
|
||||
* The dialog instance.
|
||||
* @param {jQuery} $element
|
||||
* The jQuery collection of the dialog element.
|
||||
* @param {object} [settings]
|
||||
* Dialog settings.
|
||||
*/
|
||||
$(window).on('dialog:aftercreate', function (e, dialog, $element, settings) {
|
||||
$element.on('click.dialog', '.dialog-cancel', function (e) {
|
||||
dialog.close('cancel');
|
||||
|
|
@ -229,18 +128,7 @@
|
|||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Removes all 'dialog' listeners.
|
||||
*
|
||||
* @param {jQuery.Event} e
|
||||
* The event triggered.
|
||||
* @param {Drupal.dialog~dialogDefinition} dialog
|
||||
* The dialog instance.
|
||||
* @param {jQuery} $element
|
||||
* jQuery collection of the dialog element.
|
||||
*/
|
||||
$(window).on('dialog:beforeclose', function (e, dialog, $element) {
|
||||
$element.off('.dialog');
|
||||
});
|
||||
|
||||
})(jQuery, Drupal);
|
||||
})(jQuery, Drupal);
|
||||
97
web/core/misc/dialog/dialog.es6.js
Normal file
97
web/core/misc/dialog/dialog.es6.js
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
/**
|
||||
* @file
|
||||
* Dialog API inspired by HTML5 dialog element.
|
||||
*
|
||||
* @see http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
|
||||
*/
|
||||
|
||||
(function($, Drupal, drupalSettings) {
|
||||
/**
|
||||
* Default dialog options.
|
||||
*
|
||||
* @type {object}
|
||||
*
|
||||
* @prop {bool} [autoOpen=true]
|
||||
* @prop {string} [dialogClass='']
|
||||
* @prop {string} [buttonClass='button']
|
||||
* @prop {string} [buttonPrimaryClass='button--primary']
|
||||
* @prop {function} close
|
||||
*/
|
||||
drupalSettings.dialog = {
|
||||
autoOpen: true,
|
||||
dialogClass: '',
|
||||
// Drupal-specific extensions: see dialog.jquery-ui.js.
|
||||
buttonClass: 'button',
|
||||
buttonPrimaryClass: 'button--primary',
|
||||
// When using this API directly (when generating dialogs on the client
|
||||
// side), you may want to override this method and do
|
||||
// `jQuery(event.target).remove()` as well, to remove the dialog on
|
||||
// closing.
|
||||
close(event) {
|
||||
Drupal.dialog(event.target).close();
|
||||
Drupal.detachBehaviors(event.target, null, 'unload');
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* @typedef {object} Drupal.dialog~dialogDefinition
|
||||
*
|
||||
* @prop {boolean} open
|
||||
* Is the dialog open or not.
|
||||
* @prop {*} returnValue
|
||||
* Return value of the dialog.
|
||||
* @prop {function} show
|
||||
* Method to display the dialog on the page.
|
||||
* @prop {function} showModal
|
||||
* Method to display the dialog as a modal on the page.
|
||||
* @prop {function} close
|
||||
* Method to hide the dialog from the page.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Polyfill HTML5 dialog element with jQueryUI.
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
* The element that holds the dialog.
|
||||
* @param {object} options
|
||||
* jQuery UI options to be passed to the dialog.
|
||||
*
|
||||
* @return {Drupal.dialog~dialogDefinition}
|
||||
* The dialog instance.
|
||||
*/
|
||||
Drupal.dialog = function(element, options) {
|
||||
let undef;
|
||||
const $element = $(element);
|
||||
const dialog = {
|
||||
open: false,
|
||||
returnValue: undef,
|
||||
};
|
||||
|
||||
function openDialog(settings) {
|
||||
settings = $.extend({}, drupalSettings.dialog, options, settings);
|
||||
// Trigger a global event to allow scripts to bind events to the dialog.
|
||||
$(window).trigger('dialog:beforecreate', [dialog, $element, settings]);
|
||||
$element.dialog(settings);
|
||||
dialog.open = true;
|
||||
$(window).trigger('dialog:aftercreate', [dialog, $element, settings]);
|
||||
}
|
||||
|
||||
function closeDialog(value) {
|
||||
$(window).trigger('dialog:beforeclose', [dialog, $element]);
|
||||
$element.dialog('close');
|
||||
dialog.returnValue = value;
|
||||
dialog.open = false;
|
||||
$(window).trigger('dialog:afterclose', [dialog, $element]);
|
||||
}
|
||||
|
||||
dialog.show = () => {
|
||||
openDialog({ modal: false });
|
||||
};
|
||||
dialog.showModal = () => {
|
||||
openDialog({ modal: true });
|
||||
};
|
||||
dialog.close = closeDialog;
|
||||
|
||||
return dialog;
|
||||
};
|
||||
})(jQuery, Drupal, drupalSettings);
|
||||
34
web/core/misc/dialog/dialog.jquery-ui.es6.js
Normal file
34
web/core/misc/dialog/dialog.jquery-ui.es6.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
/**
|
||||
* @file
|
||||
* Adds default classes to buttons for styling purposes.
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
$.widget('ui.dialog', $.ui.dialog, {
|
||||
options: {
|
||||
buttonClass: 'button',
|
||||
buttonPrimaryClass: 'button--primary',
|
||||
},
|
||||
_createButtons() {
|
||||
const opts = this.options;
|
||||
let primaryIndex;
|
||||
let index;
|
||||
const il = opts.buttons.length;
|
||||
for (index = 0; index < il; index++) {
|
||||
if (
|
||||
opts.buttons[index].primary &&
|
||||
opts.buttons[index].primary === true
|
||||
) {
|
||||
primaryIndex = index;
|
||||
delete opts.buttons[index].primary;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this._super();
|
||||
const $buttons = this.uiButtonSet.children().addClass(opts.buttonClass);
|
||||
if (typeof primaryIndex !== 'undefined') {
|
||||
$buttons.eq(index).addClass(opts.buttonPrimaryClass);
|
||||
}
|
||||
},
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -1,22 +1,20 @@
|
|||
/**
|
||||
* @file
|
||||
* Adds default classes to buttons for styling purposes.
|
||||
*/
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
(function ($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
$.widget('ui.dialog', $.ui.dialog, {
|
||||
options: {
|
||||
buttonClass: 'button',
|
||||
buttonPrimaryClass: 'button--primary'
|
||||
},
|
||||
_createButtons: function () {
|
||||
_createButtons: function _createButtons() {
|
||||
var opts = this.options;
|
||||
var primaryIndex;
|
||||
var $buttons;
|
||||
var index;
|
||||
var primaryIndex = void 0;
|
||||
var index = void 0;
|
||||
var il = opts.buttons.length;
|
||||
for (index = 0; index < il; index++) {
|
||||
if (opts.buttons[index].primary && opts.buttons[index].primary === true) {
|
||||
|
|
@ -26,11 +24,10 @@
|
|||
}
|
||||
}
|
||||
this._super();
|
||||
$buttons = this.uiButtonSet.children().addClass(opts.buttonClass);
|
||||
var $buttons = this.uiButtonSet.children().addClass(opts.buttonClass);
|
||||
if (typeof primaryIndex !== 'undefined') {
|
||||
$buttons.eq(index).addClass(opts.buttonPrimaryClass);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
})(jQuery);
|
||||
|
|
@ -1,85 +1,34 @@
|
|||
/**
|
||||
* @file
|
||||
* Dialog API inspired by HTML5 dialog element.
|
||||
*
|
||||
* @see http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
|
||||
*/
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
(function ($, Drupal, drupalSettings) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Default dialog options.
|
||||
*
|
||||
* @type {object}
|
||||
*
|
||||
* @prop {bool} [autoOpen=true]
|
||||
* @prop {string} [dialogClass='']
|
||||
* @prop {string} [buttonClass='button']
|
||||
* @prop {string} [buttonPrimaryClass='button--primary']
|
||||
* @prop {function} close
|
||||
*/
|
||||
drupalSettings.dialog = {
|
||||
autoOpen: true,
|
||||
dialogClass: '',
|
||||
// Drupal-specific extensions: see dialog.jquery-ui.js.
|
||||
|
||||
buttonClass: 'button',
|
||||
buttonPrimaryClass: 'button--primary',
|
||||
// When using this API directly (when generating dialogs on the client
|
||||
// side), you may want to override this method and do
|
||||
// `jQuery(event.target).remove()` as well, to remove the dialog on
|
||||
// closing.
|
||||
close: function (event) {
|
||||
close: function close(event) {
|
||||
Drupal.dialog(event.target).close();
|
||||
Drupal.detachBehaviors(event.target, null, 'unload');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @typedef {object} Drupal.dialog~dialogDefinition
|
||||
*
|
||||
* @prop {boolean} open
|
||||
* Is the dialog open or not.
|
||||
* @prop {*} returnValue
|
||||
* Return value of the dialog.
|
||||
* @prop {function} show
|
||||
* Method to display the dialog on the page.
|
||||
* @prop {function} showModal
|
||||
* Method to display the dialog as a modal on the page.
|
||||
* @prop {function} close
|
||||
* Method to hide the dialog from the page.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Polyfill HTML5 dialog element with jQueryUI.
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
* The element that holds the dialog.
|
||||
* @param {object} options
|
||||
* jQuery UI options to be passed to the dialog.
|
||||
*
|
||||
* @return {Drupal.dialog~dialogDefinition}
|
||||
* The dialog instance.
|
||||
*/
|
||||
Drupal.dialog = function (element, options) {
|
||||
var undef;
|
||||
var undef = void 0;
|
||||
var $element = $(element);
|
||||
var dialog = {
|
||||
open: false,
|
||||
returnValue: undef,
|
||||
show: function () {
|
||||
openDialog({modal: false});
|
||||
},
|
||||
showModal: function () {
|
||||
openDialog({modal: true});
|
||||
},
|
||||
close: closeDialog
|
||||
returnValue: undef
|
||||
};
|
||||
|
||||
function openDialog(settings) {
|
||||
settings = $.extend({}, drupalSettings.dialog, options, settings);
|
||||
// Trigger a global event to allow scripts to bind events to the dialog.
|
||||
|
||||
$(window).trigger('dialog:beforecreate', [dialog, $element, settings]);
|
||||
$element.dialog(settings);
|
||||
dialog.open = true;
|
||||
|
|
@ -94,7 +43,14 @@
|
|||
$(window).trigger('dialog:afterclose', [dialog, $element]);
|
||||
}
|
||||
|
||||
dialog.show = function () {
|
||||
openDialog({ modal: false });
|
||||
};
|
||||
dialog.showModal = function () {
|
||||
openDialog({ modal: true });
|
||||
};
|
||||
dialog.close = closeDialog;
|
||||
|
||||
return dialog;
|
||||
};
|
||||
|
||||
})(jQuery, Drupal, drupalSettings);
|
||||
})(jQuery, Drupal, drupalSettings);
|
||||
138
web/core/misc/dialog/dialog.position.es6.js
Normal file
138
web/core/misc/dialog/dialog.position.es6.js
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
/**
|
||||
* @file
|
||||
* Positioning extensions for dialogs.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Triggers when content inside a dialog changes.
|
||||
*
|
||||
* @event dialogContentResize
|
||||
*/
|
||||
|
||||
(function($, Drupal, drupalSettings, debounce, displace) {
|
||||
// autoResize option will turn off resizable and draggable.
|
||||
drupalSettings.dialog = $.extend(
|
||||
{ autoResize: true, maxHeight: '95%' },
|
||||
drupalSettings.dialog,
|
||||
);
|
||||
|
||||
/**
|
||||
* Position the dialog's center at the center of displace.offsets boundaries.
|
||||
*
|
||||
* @function Drupal.dialog~resetPosition
|
||||
*
|
||||
* @param {object} options
|
||||
* Options object.
|
||||
*
|
||||
* @return {object}
|
||||
* Altered options object.
|
||||
*/
|
||||
function resetPosition(options) {
|
||||
const offsets = displace.offsets;
|
||||
const left = offsets.left - offsets.right;
|
||||
const top = offsets.top - offsets.bottom;
|
||||
|
||||
const leftString = `${(left > 0 ? '+' : '-') +
|
||||
Math.abs(Math.round(left / 2))}px`;
|
||||
const topString = `${(top > 0 ? '+' : '-') +
|
||||
Math.abs(Math.round(top / 2))}px`;
|
||||
options.position = {
|
||||
my: `center${left !== 0 ? leftString : ''} center${
|
||||
top !== 0 ? topString : ''
|
||||
}`,
|
||||
of: window,
|
||||
};
|
||||
return options;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets the current options for positioning.
|
||||
*
|
||||
* This is used as a window resize and scroll callback to reposition the
|
||||
* jQuery UI dialog. Although not a built-in jQuery UI option, this can
|
||||
* be disabled by setting autoResize: false in the options array when creating
|
||||
* a new {@link Drupal.dialog}.
|
||||
*
|
||||
* @function Drupal.dialog~resetSize
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
*
|
||||
* @fires event:dialogContentResize
|
||||
*/
|
||||
function resetSize(event) {
|
||||
const positionOptions = [
|
||||
'width',
|
||||
'height',
|
||||
'minWidth',
|
||||
'minHeight',
|
||||
'maxHeight',
|
||||
'maxWidth',
|
||||
'position',
|
||||
];
|
||||
let adjustedOptions = {};
|
||||
let windowHeight = $(window).height();
|
||||
let option;
|
||||
let optionValue;
|
||||
let adjustedValue;
|
||||
for (let n = 0; n < positionOptions.length; n++) {
|
||||
option = positionOptions[n];
|
||||
optionValue = event.data.settings[option];
|
||||
if (optionValue) {
|
||||
// jQuery UI does not support percentages on heights, convert to pixels.
|
||||
if (
|
||||
typeof optionValue === 'string' &&
|
||||
/%$/.test(optionValue) &&
|
||||
/height/i.test(option)
|
||||
) {
|
||||
// Take offsets in account.
|
||||
windowHeight -= displace.offsets.top + displace.offsets.bottom;
|
||||
adjustedValue = parseInt(
|
||||
0.01 * parseInt(optionValue, 10) * windowHeight,
|
||||
10,
|
||||
);
|
||||
// Don't force the dialog to be bigger vertically than needed.
|
||||
if (
|
||||
option === 'height' &&
|
||||
event.data.$element.parent().outerHeight() < adjustedValue
|
||||
) {
|
||||
adjustedValue = 'auto';
|
||||
}
|
||||
adjustedOptions[option] = adjustedValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Offset the dialog center to be at the center of Drupal.displace.offsets.
|
||||
if (!event.data.settings.modal) {
|
||||
adjustedOptions = resetPosition(adjustedOptions);
|
||||
}
|
||||
event.data.$element
|
||||
.dialog('option', adjustedOptions)
|
||||
.trigger('dialogContentResize');
|
||||
}
|
||||
|
||||
$(window).on({
|
||||
'dialog:aftercreate': function(event, dialog, $element, settings) {
|
||||
const autoResize = debounce(resetSize, 20);
|
||||
const eventData = { settings, $element };
|
||||
if (settings.autoResize === true || settings.autoResize === 'true') {
|
||||
$element
|
||||
.dialog('option', { resizable: false, draggable: false })
|
||||
.dialog('widget')
|
||||
.css('position', 'fixed');
|
||||
$(window)
|
||||
.on('resize.dialogResize scroll.dialogResize', eventData, autoResize)
|
||||
.trigger('resize.dialogResize');
|
||||
$(document).on(
|
||||
'drupalViewportOffsetChange.dialogResize',
|
||||
eventData,
|
||||
autoResize,
|
||||
);
|
||||
}
|
||||
},
|
||||
'dialog:beforeclose': function(event, dialog, $element) {
|
||||
$(window).off('.dialogResize');
|
||||
$(document).off('.dialogResize');
|
||||
},
|
||||
});
|
||||
})(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace);
|
||||
|
|
@ -1,80 +1,13 @@
|
|||
/**
|
||||
* @file
|
||||
* Positioning extensions for dialogs.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Triggers when content inside a dialog changes.
|
||||
*
|
||||
* @event dialogContentResize
|
||||
*/
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
(function ($, Drupal, drupalSettings, debounce, displace) {
|
||||
drupalSettings.dialog = $.extend({ autoResize: true, maxHeight: '95%' }, drupalSettings.dialog);
|
||||
|
||||
'use strict';
|
||||
|
||||
// autoResize option will turn off resizable and draggable.
|
||||
drupalSettings.dialog = $.extend({autoResize: true, maxHeight: '95%'}, drupalSettings.dialog);
|
||||
|
||||
/**
|
||||
* Resets the current options for positioning.
|
||||
*
|
||||
* This is used as a window resize and scroll callback to reposition the
|
||||
* jQuery UI dialog. Although not a built-in jQuery UI option, this can
|
||||
* be disabled by setting autoResize: false in the options array when creating
|
||||
* a new {@link Drupal.dialog}.
|
||||
*
|
||||
* @function Drupal.dialog~resetSize
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
*
|
||||
* @fires event:dialogContentResize
|
||||
*/
|
||||
function resetSize(event) {
|
||||
var positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position'];
|
||||
var adjustedOptions = {};
|
||||
var windowHeight = $(window).height();
|
||||
var option;
|
||||
var optionValue;
|
||||
var adjustedValue;
|
||||
for (var n = 0; n < positionOptions.length; n++) {
|
||||
option = positionOptions[n];
|
||||
optionValue = event.data.settings[option];
|
||||
if (optionValue) {
|
||||
// jQuery UI does not support percentages on heights, convert to pixels.
|
||||
if (typeof optionValue === 'string' && /%$/.test(optionValue) && /height/i.test(option)) {
|
||||
// Take offsets in account.
|
||||
windowHeight -= displace.offsets.top + displace.offsets.bottom;
|
||||
adjustedValue = parseInt(0.01 * parseInt(optionValue, 10) * windowHeight, 10);
|
||||
// Don't force the dialog to be bigger vertically than needed.
|
||||
if (option === 'height' && event.data.$element.parent().outerHeight() < adjustedValue) {
|
||||
adjustedValue = 'auto';
|
||||
}
|
||||
adjustedOptions[option] = adjustedValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Offset the dialog center to be at the center of Drupal.displace.offsets.
|
||||
if (!event.data.settings.modal) {
|
||||
adjustedOptions = resetPosition(adjustedOptions);
|
||||
}
|
||||
event.data.$element
|
||||
.dialog('option', adjustedOptions)
|
||||
.trigger('dialogContentResize');
|
||||
}
|
||||
|
||||
/**
|
||||
* Position the dialog's center at the center of displace.offsets boundaries.
|
||||
*
|
||||
* @function Drupal.dialog~resetPosition
|
||||
*
|
||||
* @param {object} options
|
||||
* Options object.
|
||||
*
|
||||
* @return {object}
|
||||
* Altered options object.
|
||||
*/
|
||||
function resetPosition(options) {
|
||||
var offsets = displace.offsets;
|
||||
var left = offsets.left - offsets.right;
|
||||
|
|
@ -89,24 +22,48 @@
|
|||
return options;
|
||||
}
|
||||
|
||||
function resetSize(event) {
|
||||
var positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position'];
|
||||
var adjustedOptions = {};
|
||||
var windowHeight = $(window).height();
|
||||
var option = void 0;
|
||||
var optionValue = void 0;
|
||||
var adjustedValue = void 0;
|
||||
for (var n = 0; n < positionOptions.length; n++) {
|
||||
option = positionOptions[n];
|
||||
optionValue = event.data.settings[option];
|
||||
if (optionValue) {
|
||||
if (typeof optionValue === 'string' && /%$/.test(optionValue) && /height/i.test(option)) {
|
||||
windowHeight -= displace.offsets.top + displace.offsets.bottom;
|
||||
adjustedValue = parseInt(0.01 * parseInt(optionValue, 10) * windowHeight, 10);
|
||||
|
||||
if (option === 'height' && event.data.$element.parent().outerHeight() < adjustedValue) {
|
||||
adjustedValue = 'auto';
|
||||
}
|
||||
adjustedOptions[option] = adjustedValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!event.data.settings.modal) {
|
||||
adjustedOptions = resetPosition(adjustedOptions);
|
||||
}
|
||||
event.data.$element.dialog('option', adjustedOptions).trigger('dialogContentResize');
|
||||
}
|
||||
|
||||
$(window).on({
|
||||
'dialog:aftercreate': function (event, dialog, $element, settings) {
|
||||
'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
|
||||
var autoResize = debounce(resetSize, 20);
|
||||
var eventData = {settings: settings, $element: $element};
|
||||
var eventData = { settings: settings, $element: $element };
|
||||
if (settings.autoResize === true || settings.autoResize === 'true') {
|
||||
$element
|
||||
.dialog('option', {resizable: false, draggable: false})
|
||||
.dialog('widget').css('position', 'fixed');
|
||||
$(window)
|
||||
.on('resize.dialogResize scroll.dialogResize', eventData, autoResize)
|
||||
.trigger('resize.dialogResize');
|
||||
$element.dialog('option', { resizable: false, draggable: false }).dialog('widget').css('position', 'fixed');
|
||||
$(window).on('resize.dialogResize scroll.dialogResize', eventData, autoResize).trigger('resize.dialogResize');
|
||||
$(document).on('drupalViewportOffsetChange.dialogResize', eventData, autoResize);
|
||||
}
|
||||
},
|
||||
'dialog:beforeclose': function (event, dialog, $element) {
|
||||
'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
|
||||
$(window).off('.dialogResize');
|
||||
$(document).off('.dialogResize');
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace);
|
||||
})(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace);
|
||||
234
web/core/misc/dialog/off-canvas.base.css
Normal file
234
web/core/misc/dialog/off-canvas.base.css
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
/**
|
||||
* @file
|
||||
* Set base styles for the off-canvas dialog.
|
||||
*/
|
||||
|
||||
/* Set some global attributes. */
|
||||
#drupal-off-canvas *,
|
||||
#drupal-off-canvas *:not(div) {
|
||||
background: #444;
|
||||
font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
/* Generic elements. */
|
||||
#drupal-off-canvas a,
|
||||
#drupal-off-canvas .link {
|
||||
border-bottom: none;
|
||||
font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
color: #85bef4;
|
||||
text-decoration: none;
|
||||
transition: color 0.5s ease;
|
||||
}
|
||||
|
||||
#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-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 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 blockquote,
|
||||
#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(../icons/73b355/check.svg);
|
||||
color: #325e1c;
|
||||
}
|
||||
#drupal-off-canvas .messages--warning {
|
||||
background-color: #fdf8ed;
|
||||
background-image: url(../icons/e29700/warning.svg);
|
||||
color: #734c00;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--error {
|
||||
background-color: #fcf4f2;
|
||||
background-image: url(../icons/e32700/error.svg);
|
||||
color: #a51b00;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .messages--error div[role="alert"] {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
118
web/core/misc/dialog/off-canvas.button.css
Normal file
118
web/core/misc/dialog/off-canvas.button.css
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for buttons in the off-canvas dialog.
|
||||
*
|
||||
* @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 0.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 0.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: #236aaf;
|
||||
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;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
55
web/core/misc/dialog/off-canvas.css
Normal file
55
web/core/misc/dialog/off-canvas.css
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
/**
|
||||
* @file
|
||||
* CSS for off-canvas dialog.
|
||||
*/
|
||||
|
||||
/* 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 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 #drupal-off-canvas {
|
||||
padding: 0 20px 20px;
|
||||
/* Prevent horizontal scrollbar. */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
[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 {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
60
web/core/misc/dialog/off-canvas.details.css
Normal file
60
web/core/misc/dialog/off-canvas.details.css
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for summary and details in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#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 0.5s ease;
|
||||
}
|
||||
#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 {
|
||||
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;
|
||||
}
|
||||
291
web/core/misc/dialog/off-canvas.dropbutton.css
Normal file
291
web/core/misc/dialog/off-canvas.dropbutton.css
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
/**
|
||||
* @file
|
||||
* Styles for dropbuttons in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#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 0.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 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 {
|
||||
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(../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;
|
||||
}
|
||||
359
web/core/misc/dialog/off-canvas.es6.js
Normal file
359
web/core/misc/dialog/off-canvas.es6.js
Normal file
|
|
@ -0,0 +1,359 @@
|
|||
/**
|
||||
* @file
|
||||
* Drupal's off-canvas library.
|
||||
*/
|
||||
|
||||
(($, Drupal, debounce, displace) => {
|
||||
/**
|
||||
* Off-canvas dialog implementation using jQuery Dialog.
|
||||
*
|
||||
* Transforms the regular dialogs created using Drupal.dialog when the dialog
|
||||
* element equals '#drupal-off-canvas' into an side-loading dialog.
|
||||
*
|
||||
* @namespace
|
||||
*/
|
||||
Drupal.offCanvas = {
|
||||
/**
|
||||
* Storage for position information about the tray.
|
||||
*
|
||||
* @type {?String}
|
||||
*/
|
||||
position: null,
|
||||
|
||||
/**
|
||||
* The minimum height of the tray when opened at the top of the page.
|
||||
*
|
||||
* @type {Number}
|
||||
*/
|
||||
minimumHeight: 30,
|
||||
|
||||
/**
|
||||
* The minimum width to use body displace needs to match the width at which
|
||||
* the tray will be 100% width. @see core/misc/dialog/off-canvas.css
|
||||
*
|
||||
* @type {Number}
|
||||
*/
|
||||
minDisplaceWidth: 768,
|
||||
|
||||
/**
|
||||
* Wrapper used to position off-canvas dialog.
|
||||
*
|
||||
* @type {jQuery}
|
||||
*/
|
||||
$mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
|
||||
|
||||
/**
|
||||
* Determines if an element is an off-canvas dialog.
|
||||
*
|
||||
* @param {jQuery} $element
|
||||
* The dialog element.
|
||||
*
|
||||
* @return {bool}
|
||||
* True this is currently an off-canvas dialog.
|
||||
*/
|
||||
isOffCanvas($element) {
|
||||
return $element.is('#drupal-off-canvas');
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove off-canvas dialog events.
|
||||
*
|
||||
* @param {jQuery} $element
|
||||
* The target element.
|
||||
*/
|
||||
removeOffCanvasEvents($element) {
|
||||
$element.off('.off-canvas');
|
||||
$(document).off('.off-canvas');
|
||||
$(window).off('.off-canvas');
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler fired before an off-canvas dialog has been opened.
|
||||
*
|
||||
* @param {Object} settings
|
||||
* Settings related to the composition of the dialog.
|
||||
*
|
||||
* @return {undefined}
|
||||
*/
|
||||
beforeCreate({ settings, $element }) {
|
||||
// Clean up previous dialog event handlers.
|
||||
Drupal.offCanvas.removeOffCanvasEvents($element);
|
||||
|
||||
$('body').addClass('js-off-canvas-dialog-open');
|
||||
// @see http://api.jqueryui.com/position/
|
||||
settings.position = {
|
||||
my: 'left top',
|
||||
at: `${Drupal.offCanvas.getEdge()} top`,
|
||||
of: window,
|
||||
};
|
||||
|
||||
/**
|
||||
* Applies initial height and with to dialog based depending on position.
|
||||
* @see http://api.jqueryui.com/dialog for all dialog options.
|
||||
*/
|
||||
const position = settings.drupalOffCanvasPosition;
|
||||
const height = position === 'side' ? $(window).height() : settings.height;
|
||||
const width = position === 'side' ? settings.width : '100%';
|
||||
settings.height = height;
|
||||
settings.width = width;
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler fired after an off-canvas dialog has been closed.
|
||||
*
|
||||
* @return {undefined}
|
||||
*/
|
||||
beforeClose({ $element }) {
|
||||
$('body').removeClass('js-off-canvas-dialog-open');
|
||||
// Remove all *.off-canvas events
|
||||
Drupal.offCanvas.removeOffCanvasEvents($element);
|
||||
Drupal.offCanvas.resetPadding();
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler fired when an off-canvas dialog has been opened.
|
||||
*
|
||||
* @param {jQuery} $element
|
||||
* The off-canvas dialog element.
|
||||
* @param {Object} settings
|
||||
* Settings related to the composition of the dialog.
|
||||
*
|
||||
* @return {undefined}
|
||||
*/
|
||||
afterCreate({ $element, settings }) {
|
||||
const eventData = { settings, $element, offCanvasDialog: this };
|
||||
|
||||
$element
|
||||
.on(
|
||||
'dialogContentResize.off-canvas',
|
||||
eventData,
|
||||
Drupal.offCanvas.handleDialogResize,
|
||||
)
|
||||
.on(
|
||||
'dialogContentResize.off-canvas',
|
||||
eventData,
|
||||
Drupal.offCanvas.bodyPadding,
|
||||
);
|
||||
|
||||
Drupal.offCanvas
|
||||
.getContainer($element)
|
||||
.attr(`data-offset-${Drupal.offCanvas.getEdge()}`, '');
|
||||
|
||||
$(window)
|
||||
.on(
|
||||
'resize.off-canvas',
|
||||
eventData,
|
||||
debounce(Drupal.offCanvas.resetSize, 100),
|
||||
)
|
||||
.trigger('resize.off-canvas');
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle classes based on title existence.
|
||||
* Called with Drupal.offCanvas.afterCreate.
|
||||
*
|
||||
* @param {Object} settings
|
||||
* Settings related to the composition of the dialog.
|
||||
*
|
||||
* @return {undefined}
|
||||
*/
|
||||
render({ settings }) {
|
||||
$(
|
||||
'.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar',
|
||||
).toggleClass('ui-dialog-empty-title', !settings.title);
|
||||
},
|
||||
|
||||
/**
|
||||
* Adjusts the dialog on resize.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
* @param {object} event.data
|
||||
* Data attached to the event.
|
||||
*/
|
||||
handleDialogResize(event) {
|
||||
const $element = event.data.$element;
|
||||
const $container = Drupal.offCanvas.getContainer($element);
|
||||
|
||||
const $offsets = $container.find(
|
||||
'> :not(#drupal-off-canvas, .ui-resizable-handle)',
|
||||
);
|
||||
let offset = 0;
|
||||
|
||||
// Let scroll element take all the height available.
|
||||
$element.css({ height: 'auto' });
|
||||
const modalHeight = $container.height();
|
||||
|
||||
$offsets.each((i, e) => {
|
||||
offset += $(e).outerHeight();
|
||||
});
|
||||
|
||||
// Take internal padding into account.
|
||||
const scrollOffset = $element.outerHeight() - $element.height();
|
||||
$element.height(modalHeight - offset - scrollOffset);
|
||||
},
|
||||
|
||||
/**
|
||||
* Resets the size of the dialog.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
* @param {object} event.data
|
||||
* Data attached to the event.
|
||||
*/
|
||||
resetSize(event) {
|
||||
const $element = event.data.$element;
|
||||
const container = Drupal.offCanvas.getContainer($element);
|
||||
const position = event.data.settings.drupalOffCanvasPosition;
|
||||
|
||||
// Only remove the `data-offset-*` attribute if the value previously
|
||||
// exists and the orientation is changing.
|
||||
if (Drupal.offCanvas.position && Drupal.offCanvas.position !== position) {
|
||||
container.removeAttr(`data-offset-${Drupal.offCanvas.position}`);
|
||||
}
|
||||
// Set a minimum height on $element
|
||||
if (position === 'top') {
|
||||
$element.css('min-height', `${Drupal.offCanvas.minimumHeight}px`);
|
||||
}
|
||||
|
||||
displace();
|
||||
|
||||
const offsets = displace.offsets;
|
||||
|
||||
const topPosition =
|
||||
position === 'side' && offsets.top !== 0 ? `+${offsets.top}` : '';
|
||||
const adjustedOptions = {
|
||||
// @see http://api.jqueryui.com/position/
|
||||
position: {
|
||||
my: `${Drupal.offCanvas.getEdge()} top`,
|
||||
at: `${Drupal.offCanvas.getEdge()} top${topPosition}`,
|
||||
of: window,
|
||||
},
|
||||
};
|
||||
|
||||
const height =
|
||||
position === 'side'
|
||||
? `${$(window).height() - (offsets.top + offsets.bottom)}px`
|
||||
: event.data.settings.height;
|
||||
container.css({
|
||||
position: 'fixed',
|
||||
height,
|
||||
});
|
||||
|
||||
$element
|
||||
.dialog('option', adjustedOptions)
|
||||
.trigger('dialogContentResize.off-canvas');
|
||||
|
||||
Drupal.offCanvas.position = position;
|
||||
},
|
||||
|
||||
/**
|
||||
* Adjusts the body padding when the dialog is resized.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
* @param {object} event.data
|
||||
* Data attached to the event.
|
||||
*/
|
||||
bodyPadding(event) {
|
||||
const position = event.data.settings.drupalOffCanvasPosition;
|
||||
if (
|
||||
position === 'side' &&
|
||||
$('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth
|
||||
) {
|
||||
return;
|
||||
}
|
||||
Drupal.offCanvas.resetPadding();
|
||||
const $element = event.data.$element;
|
||||
const $container = Drupal.offCanvas.getContainer($element);
|
||||
const $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
|
||||
|
||||
const width = $container.outerWidth();
|
||||
const mainCanvasPadding = $mainCanvasWrapper.css(
|
||||
`padding-${Drupal.offCanvas.getEdge()}`,
|
||||
);
|
||||
if (position === 'side' && width !== mainCanvasPadding) {
|
||||
$mainCanvasWrapper.css(
|
||||
`padding-${Drupal.offCanvas.getEdge()}`,
|
||||
`${width}px`,
|
||||
);
|
||||
$container.attr(`data-offset-${Drupal.offCanvas.getEdge()}`, width);
|
||||
displace();
|
||||
}
|
||||
|
||||
const height = $container.outerHeight();
|
||||
if (position === 'top') {
|
||||
$mainCanvasWrapper.css('padding-top', `${height}px`);
|
||||
$container.attr('data-offset-top', height);
|
||||
displace();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* The HTML element that surrounds the dialog.
|
||||
* @param {HTMLElement} $element
|
||||
* The dialog element.
|
||||
*
|
||||
* @return {HTMLElement}
|
||||
* The containing element.
|
||||
*/
|
||||
getContainer($element) {
|
||||
return $element.dialog('widget');
|
||||
},
|
||||
|
||||
/**
|
||||
* The edge of the screen that the dialog should appear on.
|
||||
*
|
||||
* @return {string}
|
||||
* The edge the tray will be shown on, left or right.
|
||||
*/
|
||||
getEdge() {
|
||||
return document.documentElement.dir === 'rtl' ? 'left' : 'right';
|
||||
},
|
||||
|
||||
/**
|
||||
* Resets main canvas wrapper and toolbar padding / margin.
|
||||
*/
|
||||
resetPadding() {
|
||||
Drupal.offCanvas.$mainCanvasWrapper.css(
|
||||
`padding-${Drupal.offCanvas.getEdge()}`,
|
||||
0,
|
||||
);
|
||||
Drupal.offCanvas.$mainCanvasWrapper.css('padding-top', 0);
|
||||
displace();
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Attaches off-canvas dialog behaviors.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches event listeners for off-canvas dialogs.
|
||||
*/
|
||||
Drupal.behaviors.offCanvasEvents = {
|
||||
attach: () => {
|
||||
$(window)
|
||||
.once('off-canvas')
|
||||
.on({
|
||||
'dialog:beforecreate': (event, dialog, $element, settings) => {
|
||||
if (Drupal.offCanvas.isOffCanvas($element)) {
|
||||
Drupal.offCanvas.beforeCreate({ dialog, $element, settings });
|
||||
}
|
||||
},
|
||||
'dialog:aftercreate': (event, dialog, $element, settings) => {
|
||||
if (Drupal.offCanvas.isOffCanvas($element)) {
|
||||
Drupal.offCanvas.render({ dialog, $element, settings });
|
||||
Drupal.offCanvas.afterCreate({ $element, settings });
|
||||
}
|
||||
},
|
||||
'dialog:beforeclose': (event, dialog, $element) => {
|
||||
if (Drupal.offCanvas.isOffCanvas($element)) {
|
||||
Drupal.offCanvas.beforeClose({ dialog, $element });
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
})(jQuery, Drupal, Drupal.debounce, Drupal.displace);
|
||||
133
web/core/misc/dialog/off-canvas.form.css
Normal file
133
web/core/misc/dialog/off-canvas.form.css
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for forms in the off-canvas dialog.
|
||||
*/
|
||||
|
||||
#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 .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;
|
||||
}
|
||||
/* 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, 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, 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;
|
||||
}
|
||||
184
web/core/misc/dialog/off-canvas.js
Normal file
184
web/core/misc/dialog/off-canvas.js
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
/**
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
(function ($, Drupal, debounce, displace) {
|
||||
Drupal.offCanvas = {
|
||||
position: null,
|
||||
|
||||
minimumHeight: 30,
|
||||
|
||||
minDisplaceWidth: 768,
|
||||
|
||||
$mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
|
||||
|
||||
isOffCanvas: function isOffCanvas($element) {
|
||||
return $element.is('#drupal-off-canvas');
|
||||
},
|
||||
removeOffCanvasEvents: function removeOffCanvasEvents($element) {
|
||||
$element.off('.off-canvas');
|
||||
$(document).off('.off-canvas');
|
||||
$(window).off('.off-canvas');
|
||||
},
|
||||
beforeCreate: function beforeCreate(_ref) {
|
||||
var settings = _ref.settings,
|
||||
$element = _ref.$element;
|
||||
|
||||
Drupal.offCanvas.removeOffCanvasEvents($element);
|
||||
|
||||
$('body').addClass('js-off-canvas-dialog-open');
|
||||
|
||||
settings.position = {
|
||||
my: 'left top',
|
||||
at: Drupal.offCanvas.getEdge() + ' top',
|
||||
of: window
|
||||
};
|
||||
|
||||
var position = settings.drupalOffCanvasPosition;
|
||||
var height = position === 'side' ? $(window).height() : settings.height;
|
||||
var width = position === 'side' ? settings.width : '100%';
|
||||
settings.height = height;
|
||||
settings.width = width;
|
||||
},
|
||||
beforeClose: function beforeClose(_ref2) {
|
||||
var $element = _ref2.$element;
|
||||
|
||||
$('body').removeClass('js-off-canvas-dialog-open');
|
||||
|
||||
Drupal.offCanvas.removeOffCanvasEvents($element);
|
||||
Drupal.offCanvas.resetPadding();
|
||||
},
|
||||
afterCreate: function afterCreate(_ref3) {
|
||||
var $element = _ref3.$element,
|
||||
settings = _ref3.settings;
|
||||
|
||||
var eventData = { settings: settings, $element: $element, offCanvasDialog: this };
|
||||
|
||||
$element.on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.handleDialogResize).on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.bodyPadding);
|
||||
|
||||
Drupal.offCanvas.getContainer($element).attr('data-offset-' + Drupal.offCanvas.getEdge(), '');
|
||||
|
||||
$(window).on('resize.off-canvas', eventData, debounce(Drupal.offCanvas.resetSize, 100)).trigger('resize.off-canvas');
|
||||
},
|
||||
render: function render(_ref4) {
|
||||
var settings = _ref4.settings;
|
||||
|
||||
$('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
|
||||
},
|
||||
handleDialogResize: function handleDialogResize(event) {
|
||||
var $element = event.data.$element;
|
||||
var $container = Drupal.offCanvas.getContainer($element);
|
||||
|
||||
var $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
|
||||
var offset = 0;
|
||||
|
||||
$element.css({ height: 'auto' });
|
||||
var modalHeight = $container.height();
|
||||
|
||||
$offsets.each(function (i, e) {
|
||||
offset += $(e).outerHeight();
|
||||
});
|
||||
|
||||
var scrollOffset = $element.outerHeight() - $element.height();
|
||||
$element.height(modalHeight - offset - scrollOffset);
|
||||
},
|
||||
resetSize: function resetSize(event) {
|
||||
var $element = event.data.$element;
|
||||
var container = Drupal.offCanvas.getContainer($element);
|
||||
var position = event.data.settings.drupalOffCanvasPosition;
|
||||
|
||||
if (Drupal.offCanvas.position && Drupal.offCanvas.position !== position) {
|
||||
container.removeAttr('data-offset-' + Drupal.offCanvas.position);
|
||||
}
|
||||
|
||||
if (position === 'top') {
|
||||
$element.css('min-height', Drupal.offCanvas.minimumHeight + 'px');
|
||||
}
|
||||
|
||||
displace();
|
||||
|
||||
var offsets = displace.offsets;
|
||||
|
||||
var topPosition = position === 'side' && offsets.top !== 0 ? '+' + offsets.top : '';
|
||||
var adjustedOptions = {
|
||||
position: {
|
||||
my: Drupal.offCanvas.getEdge() + ' top',
|
||||
at: Drupal.offCanvas.getEdge() + ' top' + topPosition,
|
||||
of: window
|
||||
}
|
||||
};
|
||||
|
||||
var height = position === 'side' ? $(window).height() - (offsets.top + offsets.bottom) + 'px' : event.data.settings.height;
|
||||
container.css({
|
||||
position: 'fixed',
|
||||
height: height
|
||||
});
|
||||
|
||||
$element.dialog('option', adjustedOptions).trigger('dialogContentResize.off-canvas');
|
||||
|
||||
Drupal.offCanvas.position = position;
|
||||
},
|
||||
bodyPadding: function bodyPadding(event) {
|
||||
var position = event.data.settings.drupalOffCanvasPosition;
|
||||
if (position === 'side' && $('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
|
||||
return;
|
||||
}
|
||||
Drupal.offCanvas.resetPadding();
|
||||
var $element = event.data.$element;
|
||||
var $container = Drupal.offCanvas.getContainer($element);
|
||||
var $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
|
||||
|
||||
var width = $container.outerWidth();
|
||||
var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge());
|
||||
if (position === 'side' && width !== mainCanvasPadding) {
|
||||
$mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), width + 'px');
|
||||
$container.attr('data-offset-' + Drupal.offCanvas.getEdge(), width);
|
||||
displace();
|
||||
}
|
||||
|
||||
var height = $container.outerHeight();
|
||||
if (position === 'top') {
|
||||
$mainCanvasWrapper.css('padding-top', height + 'px');
|
||||
$container.attr('data-offset-top', height);
|
||||
displace();
|
||||
}
|
||||
},
|
||||
getContainer: function getContainer($element) {
|
||||
return $element.dialog('widget');
|
||||
},
|
||||
getEdge: function getEdge() {
|
||||
return document.documentElement.dir === 'rtl' ? 'left' : 'right';
|
||||
},
|
||||
resetPadding: function resetPadding() {
|
||||
Drupal.offCanvas.$mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), 0);
|
||||
Drupal.offCanvas.$mainCanvasWrapper.css('padding-top', 0);
|
||||
displace();
|
||||
}
|
||||
};
|
||||
|
||||
Drupal.behaviors.offCanvasEvents = {
|
||||
attach: function attach() {
|
||||
$(window).once('off-canvas').on({
|
||||
'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
|
||||
if (Drupal.offCanvas.isOffCanvas($element)) {
|
||||
Drupal.offCanvas.beforeCreate({ dialog: dialog, $element: $element, settings: settings });
|
||||
}
|
||||
},
|
||||
'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
|
||||
if (Drupal.offCanvas.isOffCanvas($element)) {
|
||||
Drupal.offCanvas.render({ dialog: dialog, $element: $element, settings: settings });
|
||||
Drupal.offCanvas.afterCreate({ $element: $element, settings: settings });
|
||||
}
|
||||
},
|
||||
'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
|
||||
if (Drupal.offCanvas.isOffCanvas($element)) {
|
||||
Drupal.offCanvas.beforeClose({ dialog: dialog, $element: $element });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
})(jQuery, Drupal, Drupal.debounce, Drupal.displace);
|
||||
11
web/core/misc/dialog/off-canvas.layout.css
Normal file
11
web/core/misc/dialog/off-canvas.layout.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styling for layouts in the off-canvas dialog.
|
||||
*
|
||||
* See seven/css/layout/layout.css
|
||||
*/
|
||||
|
||||
.layout-icon__region {
|
||||
fill: #f5f5f2;
|
||||
stroke: #666;
|
||||
}
|
||||
11
web/core/misc/dialog/off-canvas.motion.css
Normal file
11
web/core/misc/dialog/off-canvas.motion.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/**
|
||||
* @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;
|
||||
}
|
||||
388
web/core/misc/dialog/off-canvas.reset.css
Normal file
388
web/core/misc/dialog/off-canvas.reset.css
Normal file
|
|
@ -0,0 +1,388 @@
|
|||
/**
|
||||
* @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 *:not(svg *),
|
||||
#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: 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 {
|
||||
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 <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 {
|
||||
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;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: 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 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 grey;
|
||||
color: black;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* To standardize off-canvas selection color. */
|
||||
#drupal-off-canvas ::-moz-selection,
|
||||
#drupal-off-canvas ::selection {
|
||||
background-color: rgba(175, 175, 175, 0.5);
|
||||
color: inherit;
|
||||
}
|
||||
89
web/core/misc/dialog/off-canvas.table.css
Normal file
89
web/core/misc/dialog/off-canvas.table.css
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
/**
|
||||
* @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;
|
||||
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;
|
||||
}
|
||||
#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 ellipsis 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;
|
||||
}
|
||||
122
web/core/misc/dialog/off-canvas.tabledrag.css
Normal file
122
web/core/misc/dialog/off-canvas.tabledrag.css
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
/**
|
||||
* @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 {
|
||||
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-color: transparent;
|
||||
background-image: url(../icons/bebebe/move.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
}
|
||||
#drupal-off-canvas .draggable a.tabledrag-handle:hover .handle,
|
||||
#drupal-off-canvas .draggable a.tabledrag-handle:focus .handle {
|
||||
background-image: url(../icons/787878/move.svg);
|
||||
text-decoration: none;
|
||||
}
|
||||
#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-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;
|
||||
}
|
||||
100
web/core/misc/dialog/off-canvas.theme.css
Normal file
100
web/core/misc/dialog/off-canvas.theme.css
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
/**
|
||||
* @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 {
|
||||
background: #444;
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
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(../icons/bebebe/ex.svg);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
border: 3px solid transparent;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
position: absolute;
|
||||
top: calc(50% - 6px);
|
||||
right: 1em;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover,
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:focus {
|
||||
background-image: url(../icons/ffffff/ex.svg);
|
||||
border: 3px solid #fff;
|
||||
}
|
||||
[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(../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;
|
||||
}
|
||||
Reference in a new issue