Revert "Issue #3238501 by kostyashupenko, Spokje, mherchel, nod_, longwave, lauriii, bnjmnm: Remove Internet Explorer 11 polyfills"

This reverts commit 145d7286a7.
merge-requests/1776/merge
catch 2022-06-24 23:25:17 +01:00
parent 145d7286a7
commit 1c63a97d66
96 changed files with 1118 additions and 347 deletions

View File

@ -6,6 +6,9 @@ node_modules/**/*
!modules/ckeditor5/js/ckeditor5_plugins/**/*.js
modules/locale/tests/locale_test.es6.js
!tests/Drupal/Nightwatch/**/*.js
misc/polyfills/array.find.es6.js
misc/polyfills/element.closest.es6.js
misc/polyfills/object.assign.es6.js
# Ignore deliberately malformed YAML files.
modules/system/tests/fixtures/HtaccessTest/access_test.yml

View File

@ -0,0 +1,106 @@
/*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */
;(function(root, factory) {
// https://github.com/umdjs/umd/blob/master/returnExports.js
if (typeof exports == 'object') {
// For Node.js.
module.exports = factory(root);
} else if (typeof define == 'function' && define.amd) {
// For AMD. Register as an anonymous module.
define([], factory.bind(root, root));
} else {
// For browser globals (not exposing the function separately).
factory(root);
}
}(typeof global != 'undefined' ? global : this, function(root) {
if (root.CSS && root.CSS.escape) {
return root.CSS.escape;
}
// https://drafts.csswg.org/cssom/#serialize-an-identifier
var cssEscape = function(value) {
if (arguments.length == 0) {
throw new TypeError('`CSS.escape` requires an argument.');
}
var string = String(value);
var length = string.length;
var index = -1;
var codeUnit;
var result = '';
var firstCodeUnit = string.charCodeAt(0);
while (++index < length) {
codeUnit = string.charCodeAt(index);
// Note: theres no need to special-case astral symbols, surrogate
// pairs, or lone surrogates.
// If the character is NULL (U+0000), then the REPLACEMENT CHARACTER
// (U+FFFD).
if (codeUnit == 0x0000) {
result += '\uFFFD';
continue;
}
if (
// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
// U+007F, […]
(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
// If the character is the first character and is in the range [0-9]
// (U+0030 to U+0039), […]
(index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
// If the character is the second character and is in the range [0-9]
// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
(
index == 1 &&
codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
firstCodeUnit == 0x002D
)
) {
// https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
result += '\\' + codeUnit.toString(16) + ' ';
continue;
}
if (
// If the character is the first character and is a `-` (U+002D), and
// there is no second character, […]
index == 0 &&
length == 1 &&
codeUnit == 0x002D
) {
result += '\\' + string.charAt(index);
continue;
}
// If the character is not handled by one of the above rules and is
// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
// U+005A), or [a-z] (U+0061 to U+007A), […]
if (
codeUnit >= 0x0080 ||
codeUnit == 0x002D ||
codeUnit == 0x005F ||
codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
codeUnit >= 0x0041 && codeUnit <= 0x005A ||
codeUnit >= 0x0061 && codeUnit <= 0x007A
) {
// the character itself
result += string.charAt(index);
continue;
}
// Otherwise, the escaped character.
// https://drafts.csswg.org/cssom/#escape-a-character
result += '\\' + string.charAt(index);
}
return result;
};
if (!root.CSS) {
root.CSS = {};
}
root.CSS.escape = cssEscape;
return cssEscape;
}));

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -311,6 +311,16 @@ ckeditor5.translations:
# are not allowed.
assets/vendor/ckeditor5/translation.js: {}
css.escape:
remote: https://github.com/mathiasbynens/CSS.escape
version: "1.5.1"
license:
name: MIT
url: https://raw.githubusercontent.com/mathiasbynens/CSS.escape/v1.5.1/LICENSE-MIT.txt
gpl-compatible: true
js:
assets/vendor/css-escape/css.escape.js: { weight: -20 }
drupal:
version: VERSION
js:
@ -362,6 +372,7 @@ drupal.ajax:
- core/jquery
- core/drupal
- core/drupalSettings
- core/drupal.nodelist.foreach
- core/drupal.progress
- core/once
- core/tabbable
@ -426,6 +437,17 @@ drupal.autocomplete:
- core/tabbable.jquery.shim
- core/drupal.jquery.position
drupal.array.find:
version: VERSION
js:
misc/polyfills/array.find.js: { weight: -20 }
drupal.array.includes:
version: VERSION
js:
misc/polyfills/array.includes.js: { weight: -20 }
drupal.batch:
version: VERSION
js:
@ -458,6 +480,11 @@ drupal.collapse:
- core/drupal.form
- core/once
drupal.customevent:
version: VERSION
js:
misc/polyfills/customevent.js: { weight: -20 }
drupal.debounce:
version: VERSION
js:
@ -554,6 +581,18 @@ drupal.dropbutton:
- core/drupalSettings
- core/once
drupal.element.closest:
version: VERSION
js:
misc/polyfills/element.closest.js: { weight: -20 }
dependencies:
- core/drupal.element.matches
drupal.element.matches:
version: VERSION
js:
misc/polyfills/element.matches.js: { weight: -20 }
drupal.entity-form:
version: VERSION
js:
@ -590,6 +629,16 @@ drupal.message:
- core/drupal
- core/drupal.announce
drupal.nodelist.foreach:
version: VERSION
js:
misc/polyfills/nodelist.foreach.js: { weight: -20 }
drupal.object.assign:
version: VERSION
js:
misc/polyfills/object.assign.js: { weight: -20 }
drupal.progress:
version: VERSION
js:
@ -609,6 +658,11 @@ drupal.states:
- core/drupalSettings
- core/once
drupal.string.includes:
version: VERSION
js:
misc/polyfills/string.includes.js: { weight: -20 }
drupal.tabbingmanager:
version: VERSION
js:
@ -664,6 +718,7 @@ drupal.timezone:
js:
misc/timezone.js: {}
dependencies:
- core/drupal.nodelist.foreach
- core/jquery
- core/once
- core/drupal
@ -691,6 +746,15 @@ drupal.vertical-tabs:
- core/drupalSettings
- core/drupal.form
es6-promise:
version: "4.2.8"
license:
name: MIT
url: https://raw.githubusercontent.com/stefanpenner/es6-promise/v4.2.8/LICENSE
gpl-compatible: true
js:
assets/vendor/es6-promise/es6-promise.auto.min.js: { weight: -20, minified: true }
jquery:
remote: https://github.com/jquery/jquery
version: "3.6.0"
@ -785,6 +849,18 @@ once:
gpl-compatible: true
js:
assets/vendor/once/once.min.js: { weight: -19, minified: true }
dependencies:
- core/drupal.element.matches
picturefill:
remote: https://github.com/scottjehl/picturefill
version: "3.0.3"
license:
name: MIT
url: https://raw.githubusercontent.com/scottjehl/picturefill/3.0.3/LICENSE
gpl-compatible: true
js:
assets/vendor/picturefill/picturefill.min.js: { weight: -10, minified: true }
popperjs:
version: "2.11.5"
@ -794,6 +870,10 @@ popperjs:
gpl-compatible: true
js:
assets/vendor/popperjs/popper.min.js: { minified: true }
dependencies:
- core/drupal.array.find
- core/es6-promise
- core/drupal.object.assign
sortable:
remote: https://github.com/SortableJS/Sortable
@ -814,6 +894,8 @@ tabbable:
gpl-compatible: true
js:
assets/vendor/tabbable/index.umd.min.js: { weight: -1, minified: true }
dependencies:
- core/css.escape
tabbable.jquery.shim:
version: VERSION

View File

@ -270,6 +270,7 @@ ctund
cucurbitaceae
curle
curlopt
customevent
customly
customrequest
cweagans
@ -291,7 +292,6 @@ dblog
dbtng
dburl
ddev
dealerdirect
deckard
deconstructor
deduplicated
@ -486,6 +486,7 @@ fixnull
flickr
flipfit
floatingspace
fmod
foaf
foat
focusring
@ -560,6 +561,7 @@ hasher
hashmarks
hateoas
hbox
heartz
heke
heroless
herpderp
@ -582,7 +584,6 @@ hostnames
hreflang
hreflangs
hrefs
htdocs
htkey
htmlcorrector
htmlto
@ -769,7 +770,7 @@ metapackage
metapackages
metatag
metatags
meΦΩ
meφω
mglaman
miaus
middlewares
@ -965,7 +966,6 @@ permissionless
persistable
phpass
phpcbf
phpcodesniffer
phpcs
phpdocumentor
phpfile
@ -976,6 +976,7 @@ phpunit
phpunit's
pianura
pickable
picturefill
pingback
pioggia
pjpeg
@ -1197,7 +1198,6 @@ skiptags
skos
skynet
slatkin
slevomat
sloopal
smacss
smalldatetime
@ -1414,6 +1414,8 @@ toplevel
topop
torder
totalcount
totranslate
touchevent
touchevents
tparams
trackback
@ -1646,8 +1648,7 @@ zwei
zwjhek
zxvf
zzgroup
Èxample
Über
åwesome
èxample
über
Ȅchȏ
ȅchȏ

View File

@ -0,0 +1,60 @@
/**
* @file
* Provides a polyfill for Array.find().
*
* This is needed for Internet Explorer 11 and Opera Mini.
*
* This has been copied from MDN Web Docs code samples. Code samples in the MDN
* Web Docs are licensed under CC0.
*
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#Polyfill
* @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
*/
if (!Array.prototype.find) {
Object.defineProperty(Array.prototype, 'find', {
value: function (predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError
// exception.
if (typeof predicate !== 'function') {
throw TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be
// undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue,
// k, O »)).
// d. If testResult is true, return kValue.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return kValue;
}
// e. Increase k by 1.
k++;
}
// 7. Return undefined.
return undefined;
},
configurable: true,
writable: true,
});
}

View File

@ -0,0 +1,40 @@
/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
if (!Array.prototype.find) {
Object.defineProperty(Array.prototype, 'find', {
value: function (predicate) {
if (this == null) {
throw TypeError('"this" is null or not defined');
}
var o = Object(this);
var len = o.length >>> 0;
if (typeof predicate !== 'function') {
throw TypeError('predicate must be a function');
}
var thisArg = arguments[1];
var k = 0;
while (k < len) {
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return kValue;
}
k++;
}
return undefined;
},
configurable: true,
writable: true
});
}

View File

@ -0,0 +1,53 @@
/**
* @file
* Provides a polyfill for Array.includes().
*
* This is needed for Internet Explorer 11 and Opera Mini.
*
* This has based on MDN Web Docs code samples. Code samples in the MDN Web Docs
* are licensed under CC0.
*
* @see https://web.archive.org/web/20161012020930/https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
* @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
*/
if (!Array.prototype.includes) {
// eslint-disable-next-line no-extend-native
Array.prototype.includes = function (searchElement) {
if (this == null) {
throw new TypeError(
'Array.prototype.includes called on null or undefined',
);
}
const O = Object(this);
const len = parseInt(O.length, 10) || 0;
if (len === 0) {
return false;
}
// eslint-disable-next-line prefer-rest-params
const n = parseInt(arguments[1], 10) || 0;
let k;
if (n >= 0) {
k = n;
} else {
k = len + n;
if (k < 0) {
k = 0;
}
}
let currentElement;
while (k < len) {
currentElement = O[k];
if (
searchElement === currentElement ||
// eslint-disable-next-line no-self-compare
(searchElement !== searchElement && currentElement !== currentElement)
) {
// NaN !== NaN
return true;
}
k += 1;
}
return false;
};
}

View File

@ -0,0 +1,48 @@
/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
if (!Array.prototype.includes) {
Array.prototype.includes = function (searchElement) {
if (this == null) {
throw new TypeError('Array.prototype.includes called on null or undefined');
}
const O = Object(this);
const len = parseInt(O.length, 10) || 0;
if (len === 0) {
return false;
}
const n = parseInt(arguments[1], 10) || 0;
let k;
if (n >= 0) {
k = n;
} else {
k = len + n;
if (k < 0) {
k = 0;
}
}
let currentElement;
while (k < len) {
currentElement = O[k];
if (searchElement === currentElement || searchElement !== searchElement && currentElement !== currentElement) {
return true;
}
k += 1;
}
return false;
};
}

View File

@ -0,0 +1,30 @@
/**
* @file
* Provides a polyfill for CustomEvent.
*
* This is needed for Internet Explorer 11.
*
* This has been copied from MDN Web Docs code samples. Code samples in the MDN
* Web Docs are licensed under CC0.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
* @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
*/
// eslint-disable-next-line func-names
(function () {
if (typeof window.CustomEvent === 'function') return false;
function CustomEvent(event, params) {
params = params || { bubbles: false, cancelable: false, detail: null };
const evt = document.createEvent('CustomEvent');
evt.initCustomEvent(
event,
params.bubbles,
params.cancelable,
params.detail,
);
return evt;
}
window.CustomEvent = CustomEvent;
})();

View File

@ -0,0 +1,23 @@
/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
(function () {
if (typeof window.CustomEvent === 'function') return false;
function CustomEvent(event, params) {
params = params || {
bubbles: false,
cancelable: false,
detail: null
};
const evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
window.CustomEvent = CustomEvent;
})();

View File

@ -0,0 +1,23 @@
/**
* @file
* Provides a polyfill for Element.prototype.closest().
*
* This is needed for Internet Explorer 11 and Opera Mini.
*
* This has been copied from MDN Web Docs code samples. Code samples in the MDN
* Web Docs are licensed under CC0.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#polyfill
* @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
*/
if (!Element.prototype.closest) {
Element.prototype.closest = function (s) {
var el = this;
do {
if (Element.prototype.matches.call(el, s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}

View File

@ -0,0 +1,19 @@
/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
if (!Element.prototype.closest) {
Element.prototype.closest = function (s) {
var el = this;
do {
if (Element.prototype.matches.call(el, s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}

View File

@ -0,0 +1,17 @@
/**
* @file
* Provides a polyfill for Element.prototype.matches().
*
* This is needed for Internet Explorer 9+
*
* This has been copied from MDN Web Docs code samples. Code samples in the MDN
* Web Docs are licensed under CC0.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
* @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
*/
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}

View File

@ -0,0 +1,10 @@
/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
}

View File

@ -0,0 +1,15 @@
/**
* @file
* Provides a polyfill for NodeList.forEach().
*
* This is needed for Internet Explorer 11 and Opera Mini.
*
* This has been copied from MDN Web Docs code samples. Code samples in the MDN
* Web Docs are licensed under CC0.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill
* @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
*/
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}

View File

@ -0,0 +1,10 @@
/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}

View File

@ -0,0 +1,42 @@
/**
* @file
* Provides a polyfill for Object.assign().
*
* This is needed for Internet Explorer 11 and Opera Mini.
*
* This has been copied from MDN Web Docs code samples. Code samples in the MDN
* Web Docs are licensed under CC0.
*
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill
* @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
*/
if (typeof Object.assign !== 'function') {
// Must be writable: true, enumerable: false, configurable: true
Object.defineProperty(Object, 'assign', {
value: function assign(target, varArgs) {
// .length of function is 2
'use strict';
if (target === null || target === undefined) {
throw new TypeError('Cannot convert undefined or null to object');
}
var to = Object(target);
for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index];
if (nextSource !== null && nextSource !== undefined) {
for (var nextKey in nextSource) {
// Avoid bugs when hasOwnProperty is shadowed
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to;
},
writable: true,
configurable: true,
});
}

View File

@ -0,0 +1,36 @@
/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
if (typeof Object.assign !== 'function') {
Object.defineProperty(Object, 'assign', {
value: function assign(target, varArgs) {
'use strict';
if (target === null || target === undefined) {
throw new TypeError('Cannot convert undefined or null to object');
}
var to = Object(target);
for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index];
if (nextSource !== null && nextSource !== undefined) {
for (var nextKey in nextSource) {
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to;
},
writable: true,
configurable: true
});
}

View File

@ -0,0 +1,26 @@
/**
* @file
* Provides a polyfill for String.includes().
*
* This is needed for Internet Explorer 11 and Opera Mini.
*
* This has been copied from MDN Web Docs code samples. Code samples in the MDN
* Web Docs are licensed under CC0.
*
* @see https://web.archive.org/web/20210916035058/https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes
* @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
*/
/* eslint-disable strict, lines-around-directive, no-extend-native */
if (!String.prototype.includes) {
String.prototype.includes = function (search, start) {
'use strict';
if (search instanceof RegExp) {
throw TypeError('first argument must not be a RegExp');
}
if (start === undefined) {
start = 0;
}
return this.indexOf(search, start) !== -1;
};
}

View File

@ -0,0 +1,22 @@
/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
if (!String.prototype.includes) {
String.prototype.includes = function (search, start) {
'use strict';
if (search instanceof RegExp) {
throw TypeError('first argument must not be a RegExp');
}
if (start === undefined) {
start = 0;
}
return this.indexOf(search, start) !== -1;
};
}

View File

@ -20,4 +20,5 @@ drupal.block.admin:
- core/drupal.announce
- core/drupal.debounce
- core/drupal.dialog.ajax
- core/drupal.string.includes
- core/once

View File

@ -23,6 +23,7 @@ widget:
- core/drupal.dialog.ajax
- core/once
- core/sortable
- core/drupal.nodelist.foreach
ui:
version: VERSION

View File

@ -0,0 +1,12 @@
(function (Drupal) {
/**
* Call picturefill so newly added responsive images are processed.
*/
Drupal.behaviors.responsiveImageAJAX = {
attach() {
if (window.picturefill) {
window.picturefill();
}
},
};
})(Drupal);

View File

@ -0,0 +1,17 @@
/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
(function (Drupal) {
Drupal.behaviors.responsiveImageAJAX = {
attach() {
if (window.picturefill) {
window.picturefill();
}
}
};
})(Drupal);

View File

@ -0,0 +1,4 @@
ajax:
version: VERSION
js:
js/responsive_image.ajax.js: {}

View File

@ -29,7 +29,7 @@ function responsive_image_help($route_name, RouteMatchInterface $route_match) {
$output .= '<dd>' . t('By creating responsive image styles you define which options the browser has in selecting which image file to display. In most cases this means providing different image sizes based on the viewport size. On the <a href=":responsive_image_style">Responsive image styles</a> page, click <em>Add responsive image style</em> to create a new style. First choose a label, a fallback image style and a breakpoint group and click Save.', [':responsive_image_style' => Url::fromRoute('entity.responsive_image_style.collection')->toString()]) . '</dd>';
$output .= '<dl>';
$output .= '<dt>' . t('Fallback image style') . '</dt>';
$output .= '<dd>' . t('The fallback image style is typically the smallest size image you expect to appear in this space. The fallback image should only appear on a site if an error occurs.') . '</dd>';
$output .= '<dd>' . t('The fallback image style is typically the smallest size image you expect to appear in this space. Because the responsive images module uses the Picturefill library so that responsive images can work in older browsers, the fallback image should only appear on a site if an error occurs.') . '</dd>';
$output .= '<dt>' . t('Breakpoint groups: viewport sizing vs art direction') . '</dt>';
$output .= '<dd>' . t('The breakpoint group typically only needs a single breakpoint with an empty media query in order to do <em>viewport sizing.</em> Multiple breakpoints are used for changing the crop or aspect ratio of images at different viewport sizes, which is often referred to as <em>art direction.</em> Once you select a breakpoint group, you can choose which breakpoints to use for the responsive image style. By default, the option <em>do not use this breakpoint</em> is selected for each breakpoint. See the <a href=":breakpoint_help">help page of the Breakpoint module</a> for more information.', [':breakpoint_help' => Url::fromRoute('help.page', ['name' => 'breakpoint'])->toString()]) . '</dd>';
$output .= '<dt>' . t('Breakpoint settings: sizes vs image styles') . '</dt>';
@ -191,7 +191,9 @@ function template_preprocess_responsive_image(&$variables) {
else {
$variables['output_image_tag'] = FALSE;
// Prepare the fallback image. We use the src attribute, which might cause
// double downloads in browsers that don't support the picture tag.
// double downloads in browsers that don't support the picture tag (might,
// because when picturefill kicks in, it cancels the download and triggers
// the download for the correct image).
$variables['img_element'] = [
'#theme' => 'image',
'#uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $variables['uri']),

View File

@ -17,6 +17,9 @@ class ResponsiveImage extends RenderElement {
public function getInfo() {
return [
'#theme' => 'responsive_image',
'#attached' => [
'library' => ['core/picturefill'],
],
];
}

View File

@ -24,6 +24,7 @@ views_ui.listing:
dependencies:
- core/jquery
- core/drupal
- core/drupal.string.includes
- core/once
- views_ui/admin.styling

View File

@ -70,7 +70,9 @@
"ckeditor5": "34.1.x",
"cross-env": "^7.0.2",
"cspell": "^5.0.0",
"css.escape": "1.5.x",
"dotenv-safe": "^8.2.0",
"es6-promise": "4.2.x",
"eslint": "^8.9.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.4.0",
@ -90,7 +92,9 @@
"mkdirp": "^1.0.4",
"nightwatch": "^2.1.3",
"normalize.css": "8.0.x",
"picturefill": "3.0.x",
"postcss": "^7.0.18",
"postcss-calc": "^7.0.1",
"postcss-header": "^2.0.0",
"postcss-import": "^12.0.1",
"postcss-preset-env": "^6.7.0",

View File

@ -9,6 +9,7 @@ module.exports = ctx => ({
'./themes/claro/css/src/base/variables.css'
]
}),
require("postcss-calc"),
require('autoprefixer')({
cascade: false
}),

View File

@ -2,6 +2,7 @@ const chalk = require('chalk');
const log = require('./log');
const fs = require('fs');
const postcss = require('postcss');
const postcssCalc = require("postcss-calc");
const postcssImport = require('postcss-import');
const postcssHeader = require('postcss-header');
const postcssUrl = require('postcss-url');
@ -47,6 +48,7 @@ module.exports = (filePath, callback) => {
'prefers-color-scheme-query': false,
}
}),
postcssCalc,
postcssPixelsToRem({
propList: [
'*',

View File

@ -79,6 +79,22 @@ const assetsFolder = `${coreFolder}/assets/vendor`;
library: 'internal.backbone',
files: ['backbone.js', 'backbone-min.js', 'backbone-min.map'],
},
{
pack: 'css.escape',
folder: 'css-escape',
library: 'css.escape',
files: ['css.escape.js'],
},
{
pack: 'es6-promise',
files: [
{ from: 'dist/es6-promise.auto.min.js', to: 'es6-promise.auto.min.js' },
{
from: 'dist/es6-promise.auto.min.map',
to: 'es6-promise.auto.min.map',
},
],
},
{
pack: 'farbtastic',
library: 'jquery.farbtastic',
@ -126,6 +142,10 @@ const assetsFolder = `${coreFolder}/assets/vendor`;
{ from: 'dist/once.min.js.map', to: 'once.min.js.map' },
],
},
{
pack: 'picturefill',
files: [{ from: 'dist/picturefill.min.js', to: 'picturefill.min.js' }],
},
{
pack: '@popperjs/core',
folder: 'popperjs',

View File

@ -242,6 +242,7 @@ form.password-confirm:
js:
js/user.theme.js: {}
dependencies:
- core/drupal.object.assign
- core/drupal
- claro/global-styling

View File

@ -88,7 +88,7 @@
--font-family-serif: "Times New Roman", times, serif;
--line-height: 1.5;
--line-height-heading: 1.3;
--line-height-form-label: calc(18rem / 16); /* 18px */
--line-height-form-label: 1.125rem; /* 18px */
--font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
--font-size-h1: 2.027rem; /* ~32px */
--font-size-h2: 1.802rem; /* ~29px */
@ -148,7 +148,7 @@
--input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
--input-font-size: var(--font-size-base);
--input-line-height: var(--space-l);
--input-padding-vertical--small: calc(var(--space-xs) - (var(--input-border-size) * 2));
--input-padding-vertical--small: calc(var(--space-xs) - var(--input-border-size)*2);
--input-padding-horizontal--small: calc(var(--space-m) - var(--input-border-size));
--input-font-size--small: var(--font-size-xs);
--input-line-height--small: 1.3125rem;
@ -226,7 +226,7 @@
* Progress bar.
*/
--progress-bar-border-size: 1px;
--progress-bar-small-size: calc(var(--space-xs) - (2 * var(--progress-bar-border-size)));
--progress-bar-small-size: calc(var(--space-xs) - var(--progress-bar-border-size)*2);
--progress-bar-small-size-radius: var(--space-xs);
--progress-bar-spacing-size: var(--space-xs);
--progress-bar-transition: width 0.5s ease-out;
@ -238,7 +238,7 @@
/**
* Tabledrag icon size.
*/
--tabledrag-handle-icon-size: calc(17rem / 16); /* 17px */
--tabledrag-handle-icon-size: 1.0625rem; /* 17px */
/**
* Ajax progress.
*/

View File

@ -50,7 +50,7 @@
.action-link {
display: inline-block;
padding: calc(var(--space-m) - ((var(--space-l) - var(--space-m)) / 2)) var(--space-m);
padding: calc(var(--space-m) - var(--space-l)/2 + var(--space-m)/2) var(--space-m);
cursor: pointer;
text-decoration: none;
color: var(--color-gray-800);
@ -65,7 +65,7 @@
/* Small variant. */
.no-touchevents .action-link--small {
padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s);
padding: calc(var(--space-s) - var(--space-l)/2 + var(--space-s)/2) var(--space-s);
font-size: var(--font-size-s);
}

View File

@ -90,7 +90,7 @@ _:-ms-fullscreen,
color: var(--color-link);
font-size: var(--font-size-xxs); /* ~11px */
font-weight: bold;
line-height: calc(18rem / 16); /* 18px */
line-height: 1.125rem; /* 18px */
}
[dir="rtl"] .claro-autocomplete__message {

View File

@ -87,7 +87,7 @@
.no-touchevents .button--extrasmall {
margin: var(--space-xs) var(--space-xs) var(--space-xs) 0; /* LTR */
padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
padding: calc(var(--space-xs)/2 - 1px) calc(var(--space-s) - 1px); /* 1 */
font-size: var(--font-size-xs);
}

View File

@ -37,7 +37,7 @@
:root {
--size-summary-border-radius: calc(var(--details-border-size-radius) - var(--details-border-size));
--summary-accordion-padding-vertical: calc(var(--space-l) + ((var(--space-m) - var(--space-l)) / 2));
--summary-accordion-padding-vertical: calc(var(--space-l) + var(--space-m)/2 - var(--space-l)/2);
--summary-accordion-line-height: var(--space-l);
}
@ -298,7 +298,7 @@
.claro-details[open] > .claro-details__summary::before,
[dir="rtl"] .claro-details[open] > .claro-details__summary::before {
margin-top: calc(0.125rem / -2);
margin-top: -0.0625rem;
margin-right: 0.125rem;
transform: rotate(-45deg); /* for LTR and RTL */
background: none;
@ -451,7 +451,7 @@
margin-bottom: var(--space-m);
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
line-height: 1.0625rem; /* 17px */
}
.claro-details__description.is-disabled {

View File

@ -30,12 +30,12 @@
--dropbutton-small-spacing-size: 0.625rem;
--dropbutton-small-font-size: var(--font-size-xs);
--dropbutton-small-line-height: 0.75rem;
--dropbutton-small-toggle-size: calc((2 * var(--dropbutton-small-spacing-size)) + var(--dropbutton-small-line-height));
--dropbutton-small-toggle-size: calc(var(--dropbutton-small-spacing-size)*2 + var(--dropbutton-small-line-height));
/* Variant variables: extra small. */
--dropbutton-extrasmall-spacing-size: 0.375rem;
--dropbutton-extrasmall-font-size: var(--font-size-xs);
--dropbutton-extrasmall-line-height: 0.75rem;
--dropbutton-extrasmall-toggle-size: calc((2 * var(--dropbutton-extrasmall-spacing-size)) + var(--dropbutton-extrasmall-line-height));
--dropbutton-extrasmall-toggle-size: calc(var(--dropbutton-extrasmall-spacing-size)*2 + var(--dropbutton-extrasmall-line-height));
}
.dropbutton-wrapper {
@ -212,7 +212,7 @@
.dropbutton__toggle::before {
width: 0.5625rem;
height: 0.5625rem;
margin-top: calc(0.5625rem / (2 * -1.41429));
margin-top: -0.19886rem;
transform: translate(50%, -50%) rotate(135deg); /* LTR */
border: 0.125rem solid;
border-width: 0.125rem 0.125rem 0 0;
@ -220,7 +220,7 @@
}
.dropbutton-wrapper.open .dropbutton__toggle::before {
margin-top: calc(0.5625rem / (2 * 1.41429));
margin-top: 0.19886rem;
transform: translate(50%, -50%) rotate(315deg);
}
[dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {
@ -233,11 +233,11 @@
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
width: 0.4375rem;
height: 0.4375rem;
margin-top: calc(0.4375rem / (2 * -1.41429));
margin-top: -0.15467rem;
}
.dropbutton-wrapper.open .dropbutton__toggle::before {
margin-top: calc(0.4375rem / (2 * 1.41429));
margin-top: 0.15467rem;
}
}

View File

@ -66,7 +66,7 @@ _:-ms-fullscreen,
margin-bottom: calc(var(--space-xs)/2); /* 4px */
color: inherit;
font-size: var(--font-size-s); /* 14px */
line-height: calc(18rem / 16); /* 18px */
line-height: 1.125rem; /* 18px */
}
/* This is used only on install configure form. */
@ -103,11 +103,11 @@ _:-ms-fullscreen,
}
.fieldset__description {
margin-top: calc(6rem / 16); /* 6px */
margin-bottom: calc(6rem / 16); /* 6px */
margin-top: 0.375rem; /* 6px */
margin-bottom: 0.375rem; /* 6px */
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
line-height: 1.0625rem; /* 17px */
}
.fieldset__description.is-disabled {
@ -117,12 +117,12 @@ _:-ms-fullscreen,
/* Error message (Inline form errors). */
.fieldset__error-message {
margin-top: calc(6rem / 16); /* 6px */
margin-bottom: calc(6rem / 16); /* 6px */
margin-top: 0.375rem; /* 6px */
margin-bottom: 0.375rem; /* 6px */
color: var(--input--error-color);
font-size: var(--font-size-xs); /* ~13px */
font-weight: normal;
line-height: calc(17rem / 16); /* 17px */
line-height: 1.0625rem; /* 17px */
}
.fieldset__wrapper {

View File

@ -16,7 +16,7 @@
background-position: left 0.0625rem;
background-size: var(--space-m) var(--space-m);
font-size: var(--font-size-s);
line-height: calc(18rem / 16);
line-height: 1.125rem;
}
[dir="rtl"] .file {

View File

@ -13,7 +13,7 @@
.form-element {
box-sizing: border-box;
max-width: 100%;
min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */
min-height: calc(var(--input-padding-vertical)*2 + var(--input-border-size)*2 + var(--input-line-height)); /* iOS. */
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
color: var(--input-fg-color);
border: var(--input-border-size) solid var(--input-border-color);
@ -27,7 +27,7 @@
.no-touchevents .form-element--extrasmall,
.no-touchevents .form-element[name$="][_weight]"] {
min-height: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */
min-height: calc(var(--input--extrasmall-padding-vertical)*2 + var(--input-border-size)*2 + var(--input--extrasmall-line-height)); /* iOS. */
padding: var(--input--extrasmall-padding-vertical) var(--input--extrasmall-padding-horizontal);
font-size: var(--input--extrasmall-font-size);
line-height: var(--input--extrasmall-line-height);

View File

@ -102,11 +102,11 @@ tr .form-item,
*/
.form-item__description {
margin-top: calc(6rem / 16); /* 6px */
margin-bottom: calc(6rem / 16); /* 6px */
margin-top: 0.375rem; /* 6px */
margin-bottom: 0.375rem; /* 6px */
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
line-height: 1.0625rem; /* 17px */
}
/* Description states. */
@ -120,12 +120,12 @@ tr .form-item,
*/
.form-item__error-message {
margin-top: calc(6rem / 16); /* 6px */
margin-bottom: calc(6rem / 16); /* 6px */
margin-top: 0.375rem; /* 6px */
margin-bottom: 0.375rem; /* 6px */
color: var(--input--error-color);
font-size: var(--font-size-xs); /* ~13px */
font-weight: normal;
line-height: calc(17rem / 16); /* 17px */
line-height: 1.0625rem; /* 17px */
}
.form-item__prefix.is-disabled,

View File

@ -12,7 +12,7 @@
:root {
--color-pattern: var(--color-gray-200);
--size-pattern-square: calc(7rem / 16);
--size-pattern-square: 0.4375rem;
}
/**

View File

@ -17,7 +17,7 @@
--progress-bar-border-color: var(--color-absolutezero);
--progress-bar-label-font-size: var(--font-size-base);
--progress-bar-small-label-font-size: var(--font-size-label);
--progress-bar-default-size: calc(var(--space-m) - (2 * var(--progress-bar-border-size)));
--progress-bar-default-size: calc(var(--space-m) - var(--progress-bar-border-size)*2);
--progress-bar-default-size-radius: var(--space-m);
}

View File

@ -16,7 +16,7 @@
*/
--shortcut-bg-color: var(--color-gray-800);
--shortcut-border-radius-size: var(--base-border-radius);
--shortcut-padding-size: calc(0.5 * var(--space-xs)) var(--space-m);
--shortcut-padding-size: calc(var(--space-xs)*0.5) var(--space-m);
--shortcut-icon-size: var(--space-l);
}
@ -38,7 +38,7 @@
margin-left: var(--space-s); /* LTR */
padding: var(--shortcut-padding-size);
transition: var(--transition);
transform: translateY(calc(-1 * var(--space-xs)));
transform: translateY(calc(var(--space-xs)*-1));
vertical-align: top;
opacity: 0;
color: var(--color-white);
@ -74,14 +74,14 @@
.shortcut-action--add:hover .shortcut-action__icon,
.shortcut-action--add:focus .shortcut-action__icon {
background-position: calc(-1 * var(--shortcut-icon-size)) top;
background-position: calc(var(--shortcut-icon-size)*-1) top;
}
.shortcut-action--remove .shortcut-action__icon {
background-position: calc(-2 * var(--shortcut-icon-size)) top;
background-position: calc(var(--shortcut-icon-size)*-2) top;
}
.shortcut-action--remove:focus .shortcut-action__icon,
.shortcut-action--remove:hover .shortcut-action__icon {
background-position: calc(-3 * var(--shortcut-icon-size)) top;
background-position: calc(var(--shortcut-icon-size)*-3) top;
}

View File

@ -38,7 +38,7 @@
}
.admin-item:not(:last-child) {
border-bottom: calc(1em / 16) solid var(--color-gray-200);
border-bottom: 0.0625em solid var(--color-gray-200);
}
.admin-item__title {

View File

@ -12,7 +12,7 @@
:root {
--module-table-cell-padding-vertical: var(--space-m);
--module-table-cell-padding-horizontal: calc(var(--space-m) - (var(--input-border-size) * 2));
--module-table-cell-padding-horizontal: calc(var(--space-m) - var(--input-border-size)*2);
}
.modules-table-filter {
@ -147,7 +147,7 @@ td.module-list__description {
.module-details__links {
position: relative;
/* Negative margin matches the value of action link's top padding. */
margin-top: calc((var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) * -1);
margin-top: calc(var(--space-s)*-1 - var(--space-l)/2*-1 + var(--space-s)/2*-1);
margin-bottom: var(--space-m);
}

View File

@ -14,15 +14,15 @@
margin-top: 1em;
margin-bottom: 3em;
padding: 0;
border-bottom: calc(1em / 16) solid var(--color-gray-200);
border-bottom: 0.0625em solid var(--color-gray-200);
}
.panel__title {
margin: 0;
padding: calc(12em / 18) calc(24em / 18);
padding: 0.66667em 1.33333em;
background: var(--color-gray-050);
font-size: calc(18em / 16);
line-height: calc(24em / 18);
font-size: 1.125em;
line-height: 1.33333em;
}
.panel__content,

View File

@ -38,7 +38,7 @@
.table-file-multiple-widget .tabledrag-changed {
float: left; /* LTR */
line-height: calc(var(--tabledrag-handle-icon-size) + calc(var(--space-xs) * 2));
line-height: calc(var(--tabledrag-handle-icon-size) + var(--space-xs)*2);
}
[dir="rtl"] .table-file-multiple-widget .tabledrag-changed {

View File

@ -174,9 +174,9 @@ body.drag {
.tabledrag-handle:focus::before {
display: block;
width: calc(var(--space-m) + (var(--space-xs) * 2)); /* Same as height. */
height: calc(var(--space-m) + (var(--space-xs) * 2)); /* Hande svg height + its vertical padding */
margin: 0 calc(var(--space-xs) * -1) calc((var(--space-m) + (var(--space-xs) * 2)) * -1); /* Bottom: handle height as negative value. */
width: calc(var(--space-m) + var(--space-xs)*2); /* Same as height. */
height: calc(var(--space-m) + var(--space-xs)*2); /* Hande svg height + its vertical padding */
margin: 0 calc(var(--space-xs)*-1) calc(var(--space-m)*-1 + var(--space-xs)*2*-1); /* Bottom: handle height as negative value. */
content: "";
border-radius: var(--base-border-radius);
outline: var(--outline-size) dotted transparent;
@ -319,8 +319,8 @@ body.drag {
position: relative;
left: calc(var(--space-xs)*-0.5); /* LTR */
float: left; /* LTR */
width: calc(25rem / 16); /* 25px */
height: calc(25rem / 16); /* 25px */
width: 1.5625rem; /* 25px */
height: 1.5625rem; /* 25px */
background: none !important;
line-height: 0;
}
@ -340,8 +340,8 @@ body.drag {
*/
.tree {
width: calc(25rem / 16); /* 25px */
height: calc(25rem / 16); /* 25px */
width: 1.5625rem; /* 25px */
height: 1.5625rem; /* 25px */
}
.tree__item {

View File

@ -302,7 +302,7 @@ td.priority-medium {
.tabledrag-toggle-weight-wrapper {
margin-top: var(--space-l);
line-height: calc(28rem / 16);
line-height: 1.75rem;
}
.tabledrag-toggle-weight-wrapper + table,

View File

@ -219,7 +219,7 @@
.is-horizontal .tabs--secondary {
overflow: hidden;
margin: calc(calc(var(--tabs--focus-height) + 0.1875rem) * -1) calc(calc(var(--tabs--focus-height) + 0.1875rem) * -1) 0;
margin: calc(var(--tabs--focus-height)*-1 + -0.1875rem) calc(var(--tabs--focus-height)*-1 + -0.1875rem) 0;
padding: calc(var(--tabs--focus-height) + 0.1875rem) calc(var(--tabs--focus-height) + 0.1875rem) 0;
border-radius: 0;
}

View File

@ -99,14 +99,14 @@ details.fieldset-no-legend {
}
.views-ui-dialog .form-element {
min-height: calc(((var(--input-padding-vertical--small) + var(--input-border-size)) * 2) + var(--input-line-height--small)); /* iOS. */
min-height: calc(var(--input-padding-vertical--small)*2 + var(--input-border-size)*2 + var(--input-line-height--small)); /* iOS. */
padding: var(--input-padding-vertical--small) var(--input-padding-horizontal--small);
font-size: var(--input-font-size--small);
line-height: var(--input-line-height--small);
}
.views-ui-dialog .form-element--type-select {
padding-right: calc((var(--space-m) * 2) + var(--input-border-size) * 2);
padding-right: calc(var(--space-m)*2 + var(--input-border-size)*2);
background-position: 100% 56%;
}
@ -320,7 +320,7 @@ details.fieldset-no-legend {
.views-tabs .add a::before {
display: inline-block;
width: 1em;
height: calc(1em - (var(--input-border-size) * 2));
height: calc(1em - var(--input-border-size)*2);
content: "";
/* Copy of icon from .action-link--icon-plus */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23545560'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");

View File

@ -13,9 +13,9 @@
:root {
--card-list-spacing: var(--space-m);
/* Using 100% as base causes issues in IE11. */
--cards-two-cols-width: calc(((99.9% + var(--card-list-spacing)) / 2) - var(--card-list-spacing));
--cards-three-cols-width: calc(((99.9% + var(--card-list-spacing)) / 3) - var(--card-list-spacing));
--cards-four-cols-width: calc(((99.9% + var(--card-list-spacing)) / 4) - var(--card-list-spacing));
--cards-two-cols-width: calc(49.95% + var(--card-list-spacing)/2 - var(--card-list-spacing));
--cards-three-cols-width: calc(33.3% + var(--card-list-spacing)/3 - var(--card-list-spacing));
--cards-four-cols-width: calc(24.975% + var(--card-list-spacing)/4 - var(--card-list-spacing));
}
.card-list {

View File

@ -217,7 +217,7 @@
.media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
margin: var(--space-xs) 0; /* LTR */
/* Left padding is double the background size of the button icon. */
padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px) calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) * 2);
padding: calc(var(--space-xs)/2 - 1px) calc(var(--space-s) - 1px) calc(var(--space-xs)/2 - 1px) calc(var(--space-s)*2);
}
/* This is needed to override the default extrasmall button left margin. */
@ -259,10 +259,10 @@
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ui-dialog > .ui-dialog-content {
padding-right: calc(var(--space-s) - calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px));
padding-right: calc(var(--space-s) - var(--focus-border-size) - var(--focus-border-offset-size) - 2px);
}
[dir="rtl"] .ui-dialog > .ui-dialog-content {
padding-left: calc(var(--space-s) - calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px));
padding-left: calc(var(--space-s) - var(--focus-border-size) - var(--focus-border-offset-size) - 2px);
}
}

View File

@ -71,7 +71,7 @@
--grid-gap: var(--sp);
--grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */
--grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */
--grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); /* Width of a grid column. */
--grid-col-width: calc((var(--grid-full-width) - var(--grid-gap-count)*var(--grid-gap))/var(--grid-col-count)); /* Width of a grid column. */
}
@media (min-width: 43.75rem) {
@ -106,23 +106,23 @@
:root {
/* Layout helpers */
--sp0-25: calc(0.25 * var(--sp));
--sp0-5: calc(0.5 * var(--sp));
--sp0-75: calc(0.75 * var(--sp));
--sp1: calc(1 * var(--sp));
--sp1-5: calc(1.5 * var(--sp));
--sp2: calc(2 * var(--sp));
--sp2-5: calc(2.5 * var(--sp));
--sp3: calc(3 * var(--sp));
--sp4: calc(4 * var(--sp));
--sp5: calc(5 * var(--sp));
--sp6: calc(6 * var(--sp));
--sp7: calc(7 * var(--sp));
--sp8: calc(8 * var(--sp));
--sp9: calc(9 * var(--sp));
--sp10: calc(10 * var(--sp));
--sp11: calc(11 * var(--sp));
--sp12: calc(12 * var(--sp));
--sp0-25: calc(var(--sp)*0.25);
--sp0-5: calc(var(--sp)*0.5);
--sp0-75: calc(var(--sp)*0.75);
--sp1: calc(var(--sp)*1);
--sp1-5: calc(var(--sp)*1.5);
--sp2: calc(var(--sp)*2);
--sp2-5: calc(var(--sp)*2.5);
--sp3: calc(var(--sp)*3);
--sp4: calc(var(--sp)*4);
--sp5: calc(var(--sp)*5);
--sp6: calc(var(--sp)*6);
--sp7: calc(var(--sp)*7);
--sp8: calc(var(--sp)*8);
--sp9: calc(var(--sp)*9);
--sp10: calc(var(--sp)*10);
--sp11: calc(var(--sp)*11);
--sp12: calc(var(--sp)*12);
/**
* Gray colors.
@ -150,10 +150,10 @@
--color--primary-hue: 202;
--color--primary-saturation: 79%;
--color--primary-lightness: 50;
--color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness)))));
--color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */
--color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*(var(--color--primary-lightness) - var(--color--primary-lightness)*0.36)));
--color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*(var(--color--primary-lightness) - var(--color--primary-lightness)*0.24))); /* Blue dark */
--color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*var(--color--primary-lightness))); /* Blue medium */
--color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */
--color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*(var(--color--primary-lightness) + 24 - var(--color--primary-lightness)*0.24))); /* Blue bright */
/**
* Named Colors.
@ -165,7 +165,7 @@
--color--green: #3fa21c; /* Green */
/* Header */
--header-height-wide-when-fixed: calc(6 * var(--sp));
--header-height-wide-when-fixed: calc(var(--sp)*6);
/* Width of slide out navigation */
--mobile-nav-width: 31.25rem;

View File

@ -44,8 +44,8 @@
height: var(--sp3);
margin-top: var(--sp1);
margin-bottom: var(--sp1);
padding-top: calc((var(--sp3) - var(--line-height-s)) / 2);
padding-bottom: calc((var(--sp3) - var(--line-height-s)) / 2);
padding-top: calc(var(--sp3)/2 - var(--line-height-s)/2);
padding-bottom: calc(var(--sp3)/2 - var(--line-height-s)/2);
padding-left: var(--sp1-5);
padding-right: var(--sp1-5);
cursor: pointer;
@ -137,8 +137,8 @@
.button--small {
height: var(--sp2-5);
padding-top: calc((var(--sp2-5) - var(--line-height-s)) / 2);
padding-bottom: calc((var(--sp2-5) - var(--line-height-s)) / 2);
padding-top: calc(var(--sp2-5)/2 - var(--line-height-s)/2);
padding-bottom: calc(var(--sp2-5)/2 - var(--line-height-s)/2);
padding-left: var(--sp);
padding-right: var(--sp);
font-size: var(--font-size-base);

View File

@ -241,12 +241,12 @@
[dir="ltr"] .add-comment__picture,[dir="ltr"]
.comment__picture {
left: calc(-1 * var(--sp5));
left: calc(var(--sp5)*-1);
}
[dir="rtl"] .add-comment__picture,[dir="rtl"]
.comment__picture {
right: calc(-1 * var(--sp5));
right: calc(var(--sp5)*-1);
}
.add-comment__picture,
@ -259,11 +259,11 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .indented .comment__picture {
left: calc(-1 * var(--sp4));
left: calc(var(--sp4)*-1);
}
[dir="rtl"] .indented .comment__picture {
right: calc(-1 * var(--sp4));
right: calc(var(--sp4)*-1);
}
.indented .comment__picture {
@ -312,11 +312,11 @@
}
[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
left: calc(-1 * var(--comment-indentation) - var(--sp));
left: calc(var(--comment-indentation)*-1 - var(--sp));
}
[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
right: calc(-1 * var(--comment-indentation) - var(--sp));
right: calc(var(--comment-indentation)*-1 - var(--sp));
}
[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
@ -338,11 +338,11 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
left: calc(-1 * var(--comment-indentation--md) + var(--sp));
left: calc(var(--comment-indentation--md)*-1 + var(--sp));
}
[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
right: calc(-1 * var(--comment-indentation--md) + var(--sp));
right: calc(var(--comment-indentation--md)*-1 + var(--sp));
}
}

View File

@ -110,11 +110,11 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
margin-left: calc(-2 * (var(--grid-col-width) + var(--grid-gap)))
margin-left: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2)
}
[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
margin-right: calc(-2 * (var(--grid-col-width) + var(--grid-gap)))
margin-right: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2)
}
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
@ -127,15 +127,15 @@
@media (min-width: 62.5rem) {
[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
margin-left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap))
width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
}
}
@ -150,6 +150,6 @@
}
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap))
width: calc(var(--grid-col-width)*10 + var(--grid-gap)*11)
}
}

View File

@ -145,12 +145,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
.layout--pass--content-narrow > * .align-right {
margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
}
[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
.layout--pass--content-narrow > * .align-right {
margin-left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
}
}
@ -158,12 +158,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
.layout--pass--content-narrow > * .align-right {
margin-right: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
margin-right: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2);
}
[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
.layout--pass--content-narrow > * .align-right {
margin-left: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
margin-left: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2);
}
}
@ -171,12 +171,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
.layout--pass--content-narrow > * .align-right {
margin-right: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
margin-right: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
}
[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
.layout--pass--content-narrow > * .align-right {
margin-left: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
margin-left: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
}
}
@ -184,12 +184,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
.layout--pass--content-narrow > * .align-right {
margin-right: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
margin-right: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
}
[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
.layout--pass--content-narrow > * .align-right {
margin-left: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
margin-left: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
}
}
@ -255,12 +255,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"]
.layout--pass--content-narrow > * .align-left {
margin-left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
}
[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"]
.layout--pass--content-narrow > * .align-left {
margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
}
}

View File

@ -246,7 +246,7 @@ body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .he
body.is-always-mobile-nav .header-nav {
overflow: auto;
max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
max-width: calc(var(--grid-col-width)*7 + var(--grid-gap)*7);
transition: transform 0.2s, visibility 0.2s;
border-top-width: var(--sp11)
}
@ -255,15 +255,15 @@ body.is-always-mobile-nav .header-nav {
@media (min-width: 90rem) {
[dir="ltr"] body.is-always-mobile-nav .header-nav {
padding-right: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)))
padding-right: calc(100vw - var(--max-width) - var(--content-left) + var(--sp))
}
[dir="rtl"] body.is-always-mobile-nav .header-nav {
padding-left: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)))
padding-left: calc(100vw - var(--max-width) - var(--content-left) + var(--sp))
}
body.is-always-mobile-nav .header-nav {
max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap)))))
max-width: calc(100vw - var(--max-width) - var(--content-left) + var(--grid-col-width)*7 + var(--grid-gap)*7)
}
}

View File

@ -24,8 +24,8 @@
/* Width of the entire grid maxes out. */
.block-search-narrow {
margin-left: calc(-1 * var(--sp));
margin-right: calc(-1 * var(--sp));
margin-left: calc(var(--sp)*-1);
margin-right: calc(var(--sp)*-1);
margin-bottom: var(--sp2);
background: var(--color--black)
}
@ -61,7 +61,7 @@
.block-search-narrow input[type="search"] {
width: calc(100% + var(--sp2));
height: calc(3 * var(--sp));
height: calc(var(--sp)*3);
padding-top: 0;
padding-bottom: 0;
transition: background-size 0.4s;
@ -120,7 +120,7 @@
}
.block-search-narrow input[type="search"] {
height: calc(4 * var(--sp))
height: calc(var(--sp)*4)
}
}

View File

@ -24,12 +24,12 @@
/* Width of the entire grid maxes out. */
[dir="ltr"] .site-branding {
margin-left: calc(-1 * var(--container-padding));
margin-left: calc(var(--container-padding)*-1);
margin-right: var(--sp)
}
[dir="rtl"] .site-branding {
margin-right: calc(-1 * var(--container-padding));
margin-right: calc(var(--container-padding)*-1);
margin-left: var(--sp)
}
@ -53,7 +53,7 @@
display: flex;
flex-shrink: 1;
align-items: flex-end;
min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding)); /* Span minimum of 2 column widths. */
min-height: var(--sp3); /* Negative margin to break out of .container element. */
padding-top: 0;
padding-bottom: var(--sp0-5);
@ -70,7 +70,7 @@
@media (min-width: 43.75rem) {
.site-branding {
min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
min-width: calc(var(--grid-col-width)*4 + var(--grid-gap)*4 + var(--container-padding)); /* Span minimum of 4 column widths. */
min-height: var(--sp6);
padding-bottom: var(--sp)
}
@ -79,18 +79,18 @@
@media (min-width: 62.5rem) {
.site-branding {
min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)) /* Span minimum of 2 column widths. */
min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding)) /* Span minimum of 2 column widths. */
}
}
@media (min-width: 75rem) {
[dir="ltr"] .site-branding {
margin-left: calc(-1 * var(--container-padding))
margin-left: calc(var(--container-padding)*-1)
}
[dir="rtl"] .site-branding {
margin-right: calc(-1 * var(--container-padding))
margin-right: calc(var(--container-padding)*-1)
}
.site-branding {

View File

@ -68,7 +68,7 @@
}
.messages {
min-height: calc(var(--messages-icon-size) + 2 * var(--sp1));
min-height: calc(var(--messages-icon-size) + var(--sp1)*2);
padding-top: var(--sp1);
padding-bottom: var(--sp1);
color: var(--color--white);

View File

@ -109,10 +109,10 @@
@media (min-width: 75rem) {
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
margin-right: calc(-1 * var(--sp2))
margin-right: calc(var(--sp2)*-1)
}
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
margin-left: calc(-1 * var(--sp2))
margin-left: calc(var(--sp2)*-1)
}
body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
flex-shrink: 0;

View File

@ -207,7 +207,7 @@
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
position: absolute;
z-index: 105; /* Appear above search container. */
top: calc(100% - (0.5 * var(--sp)));
top: calc(100% - var(--sp)*0.5);
left: 50%;
visibility: hidden;
overflow: auto;
@ -218,8 +218,8 @@
*/
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp));
margin-top: 0;
padding-top: calc(3 * var(--sp));
padding-bottom: calc(3 * var(--sp));
padding-top: calc(var(--sp)*3);
padding-bottom: calc(var(--sp)*3);
transition: none;
transform: translate(-50%, -1.25rem);
opacity: 0;

View File

@ -268,11 +268,11 @@
*/
[dir="ltr"] .primary-nav__menu--level-2 {
margin-left: calc(-1 * var(--sp));
margin-left: calc(var(--sp)*-1);
}
[dir="rtl"] .primary-nav__menu--level-2 {
margin-right: calc(-1 * var(--sp));
margin-right: calc(var(--sp)*-1);
}
[dir="ltr"] .primary-nav__menu--level-2 {
@ -312,11 +312,11 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .primary-nav__menu--level-2 {
margin-left: calc(-1 * var(--sp3));
margin-left: calc(var(--sp3)*-1);
}
[dir="rtl"] .primary-nav__menu--level-2 {
margin-right: calc(-1 * var(--sp3));
margin-right: calc(var(--sp3)*-1);
}
[dir="ltr"] .primary-nav__menu--level-2 {

View File

@ -78,7 +78,7 @@
}
.node--view-mode-teaser .primary-image + .node__title {
flex-basis: calc(100% - calc(4.5 * var(--sp)))
flex-basis: calc(100% - var(--sp)*4.5)
}
@media (min-width: 62.5rem) {
@ -93,8 +93,8 @@
}
.node--view-mode-teaser .primary-image img {
width: calc(3.5 * var(--sp));
height: calc(3.5 * var(--sp));
width: calc(var(--sp)*3.5);
height: calc(var(--sp)*3.5);
object-fit: cover;
border-radius: 50%
}
@ -110,11 +110,11 @@
@media (min-width: 62.5rem) {
[dir="ltr"] .node--view-mode-teaser .primary-image {
left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))))
left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="rtl"] .node--view-mode-teaser .primary-image {
right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))))
right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
.node--view-mode-teaser .primary-image {

View File

@ -48,7 +48,7 @@
.block-system-powered-by-block .drupal-logo {
display: inline-block;
margin-top: calc(-1 * var(--sp) / 4);
margin-top: calc(var(--sp)*-1/4);
}
.block-system-powered-by-block svg {

View File

@ -62,7 +62,7 @@
.tabs__tab {
display: none;
margin: 0;
margin-bottom: calc(-1 * var(--tabs-border-width))
margin-bottom: calc(var(--tabs-border-width)*-1)
}
.tabs__tab.is-active {
@ -72,11 +72,11 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .tabs__tab {
margin-left: calc(-1 * var(--tabs-border-width))
margin-left: calc(var(--tabs-border-width)*-1)
}
[dir="rtl"] .tabs__tab {
margin-right: calc(-1 * var(--tabs-border-width))
margin-right: calc(var(--tabs-border-width)*-1)
}
.tabs__tab {
@ -160,11 +160,11 @@ html:not(.js) .tabs__tab {
}
[dir="ltr"] .tabs__link.is-active:after {
left: calc(-1 * var(--tabs-border-width))
left: calc(var(--tabs-border-width)*-1)
}
[dir="rtl"] .tabs__link.is-active:after {
right: calc(-1 * var(--tabs-border-width))
right: calc(var(--tabs-border-width)*-1)
}
[dir="ltr"] .tabs__link.is-active:after {
@ -177,7 +177,7 @@ html:not(.js) .tabs__tab {
.tabs__link.is-active:after {
position: absolute;
top: calc(-1 * var(--tabs-border-width));
top: calc(var(--tabs-border-width)*-1);
height: calc(100% + var(--tabs-border-width)*2);
content: ""
}
@ -194,8 +194,8 @@ html:not(.js) .tabs__tab {
.tabs__link.is-active:after {
top: auto;
bottom: calc(-1 * var(--tabs-border-width));
width: calc(100% + 2 * var(--tabs-border-width));
bottom: calc(var(--tabs-border-width)*-1);
width: calc(100% + var(--tabs-border-width)*2);
height: 0;
border-top: var(--tabs-active-border-size) solid var(--tabs-highlight-color)
}
@ -217,12 +217,12 @@ html:not(.js) .tabs__tab {
/* Button that opens and closes primary tabs at narrow viewports. */
[dir="ltr"] .tabs__trigger {
margin-left: calc(-1 * var(--tabs-border-width));
margin-left: calc(var(--tabs-border-width)*-1);
margin-right: 0
}
[dir="rtl"] .tabs__trigger {
margin-right: calc(-1 * var(--tabs-border-width));
margin-right: calc(var(--tabs-border-width)*-1);
margin-left: 0
}
@ -269,7 +269,7 @@ html:not(.js) .tabs__trigger {
display: block;
width: var(--sp);
height: 0.625rem;
margin-top: calc(-2 * var(--tabs-border-width))
margin-top: calc(var(--tabs-border-width)*-2)
}
[dir="ltr"] .tabs__trigger-icon > span {

View File

@ -29,11 +29,11 @@
}
[dir="ltr"] .field--tags__label {
margin-right: calc(var(--sp1-5) - (var(--sp0-5) / 2));
margin-right: calc(var(--sp1-5) - var(--sp0-5)/2);
}
[dir="rtl"] .field--tags__label {
margin-left: calc(var(--sp1-5) - (var(--sp0-5) / 2));
margin-left: calc(var(--sp1-5) - var(--sp0-5)/2);
}
.field--tags__label {
@ -78,19 +78,19 @@
}
[dir="ltr"] .field--tags__items {
margin-left: calc((var(--sp0-5) / 2) * -1);
margin-left: calc(var(--sp0-5)/2*-1);
}
[dir="rtl"] .field--tags__items {
margin-right: calc((var(--sp0-5) / 2) * -1);
margin-right: calc(var(--sp0-5)/2*-1);
}
[dir="ltr"] .field--tags__items {
margin-right: calc((var(--sp0-5) / 2) * -1);
margin-right: calc(var(--sp0-5)/2*-1);
}
[dir="rtl"] .field--tags__items {
margin-left: calc((var(--sp0-5) / 2) * -1);
margin-left: calc(var(--sp0-5)/2*-1);
}
[dir="ltr"] .field--tags__items {
@ -112,8 +112,8 @@
.field--tags__items {
display: flex;
flex-wrap: wrap;
margin-top: calc((var(--sp0-5) / 2) * -1);
margin-bottom: calc((var(--sp0-5) / 2) * -1);
margin-top: calc(var(--sp0-5)/2*-1);
margin-bottom: calc(var(--sp0-5)/2*-1);
padding-top: 0;
padding-bottom: 0;
list-style: none;

View File

@ -202,7 +202,7 @@
.text-content blockquote, .cke_editable blockquote {
font-size: 2.5rem;
line-height: calc(3.5 * var(--sp))
line-height: calc(var(--sp)*3.5)
}
}

View File

@ -47,11 +47,11 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .wide-image {
margin-left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))))
margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="rtl"] .wide-image {
margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))))
margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
.wide-image {
@ -64,15 +64,15 @@
@media (min-width: 62.5rem) {
[dir="ltr"] .wide-image {
margin-left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="rtl"] .wide-image {
margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
.wide-image {
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap))
width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
}
}
@ -81,14 +81,14 @@
@media (min-width: 62.5rem) {
.sidebar-grid .wide-image {
width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap))
width: calc(var(--grid-col-width)*9 + var(--grid-gap)*8)
}
}
@media (min-width: 81.25rem) {
.sidebar-grid .wide-image {
width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap))
width: calc(var(--grid-col-width)*10 + var(--grid-gap)*9)
}
}

View File

@ -36,7 +36,7 @@
@media (min-width: 43.75rem) {
.layout--fourcol-section > .layout__region {
flex-basis: calc(50% - (var(--grid-gap) * 0.5));
flex-basis: calc(50% - var(--grid-gap)*0.5);
flex-grow: 0;
flex-shrink: 0;
margin-bottom: 0
@ -82,7 +82,7 @@
@media (min-width: 62.5rem) {
.layout--fourcol-section > .layout__region {
flex-basis: calc(25% - (var(--grid-gap) * 0.75));
flex-basis: calc(25% - var(--grid-gap)*0.75);
}
.layout--fourcol-section > .layout__region--first,

View File

@ -64,7 +64,7 @@
}
.layout--threecol-section--25-50-25 > .layout__region--first,
.layout--threecol-section--25-50-25 > .layout__region--third {
flex-basis: calc(25% - (var(--grid-gap) * 0.5));
flex-basis: calc(25% - var(--grid-gap)*0.5);
}
.layout--threecol-section--25-50-25 > .layout__region--second {
@ -72,7 +72,7 @@
}
.layout--threecol-section--25-25-50 > .layout__region--first,
.layout--threecol-section--25-25-50 > .layout__region--second {
flex-basis: calc(25% - (var(--grid-gap) * 0.5));
flex-basis: calc(25% - var(--grid-gap)*0.5);
}
.layout--threecol-section--25-25-50 > .layout__region--third {
@ -84,11 +84,11 @@
.layout--threecol-section--50-25-25 > .layout__region--second,
.layout--threecol-section--50-25-25 > .layout__region--third {
flex-basis: calc(25% - (var(--grid-gap) * 0.5));
flex-basis: calc(25% - var(--grid-gap)*0.5);
}
.layout--threecol-section--33-34-33 > .layout__region--first,
.layout--threecol-section--33-34-33 > .layout__region--second,
.layout--threecol-section--33-34-33 > .layout__region--third {
flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
flex-basis: calc(33.33% - var(--grid-gap)*0.667);
}
}

View File

@ -50,7 +50,7 @@
margin-left: calc(var(--grid-gap)*0.5)
}
.layout--twocol-section--50-50 > .layout__region--first {
flex-basis: calc(50% - (var(--grid-gap) * 0.5));
flex-basis: calc(50% - var(--grid-gap)*0.5);
}
[dir="ltr"] .layout--twocol-section--50-50 > .layout__region--second {
@ -62,7 +62,7 @@
}
.layout--twocol-section--50-50 > .layout__region--second {
flex-basis: calc(50% - (var(--grid-gap) * 0.5));
flex-basis: calc(50% - var(--grid-gap)*0.5);
}
[dir="ltr"] .layout--twocol-section--33-67 > .layout__region--first {
margin-right: calc(var(--grid-gap)*0.3333)
@ -71,7 +71,7 @@
margin-left: calc(var(--grid-gap)*0.3333)
}
.layout--twocol-section--33-67 > .layout__region--first {
flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
flex-basis: calc(33.33% - var(--grid-gap)*0.3333);
}
[dir="ltr"] .layout--twocol-section--33-67 > .layout__region--second {
@ -83,7 +83,7 @@
}
.layout--twocol-section--33-67 > .layout__region--second {
flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
flex-basis: calc(66.66% - var(--grid-gap)*0.6666);
}
[dir="ltr"] .layout--twocol-section--67-33 > .layout__region--first {
margin-right: calc(var(--grid-gap)*0.6666)
@ -92,7 +92,7 @@
margin-left: calc(var(--grid-gap)*0.6666)
}
.layout--twocol-section--67-33 > .layout__region--first {
flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
flex-basis: calc(66.66% - var(--grid-gap)*0.6666);
}
[dir="ltr"] .layout--twocol-section--67-33 > .layout__region--second {
@ -104,7 +104,7 @@
}
.layout--twocol-section--67-33 > .layout__region--second {
flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
flex-basis: calc(33.33% - var(--grid-gap)*0.3333);
}
[dir="ltr"] .layout--twocol-section--25-75 > .layout__region--first {
margin-right: calc(var(--grid-gap)*0.25)
@ -113,7 +113,7 @@
margin-left: calc(var(--grid-gap)*0.25)
}
.layout--twocol-section--25-75 > .layout__region--first {
flex-basis: calc(25% - (var(--grid-gap) * 0.25));
flex-basis: calc(25% - var(--grid-gap)*0.25);
}
[dir="ltr"] .layout--twocol-section--25-75 > .layout__region--second {
@ -125,7 +125,7 @@
}
.layout--twocol-section--25-75 > .layout__region--second {
flex-basis: calc(75% - (var(--grid-gap) * 0.75));
flex-basis: calc(75% - var(--grid-gap)*0.75);
}
[dir="ltr"] .layout--twocol-section--75-25 > .layout__region--first {
margin-right: calc(var(--grid-gap)*0.75)
@ -134,7 +134,7 @@
margin-left: calc(var(--grid-gap)*0.75)
}
.layout--twocol-section--75-25 > .layout__region--first {
flex-basis: calc(75% - (var(--grid-gap) * 0.75));
flex-basis: calc(75% - var(--grid-gap)*0.75);
}
[dir="ltr"] .layout--twocol-section--75-25 > .layout__region--second {
@ -146,6 +146,6 @@
}
.layout--twocol-section--75-25 > .layout__region--second {
flex-basis: calc(25% - (var(--grid-gap) * 0.25));
flex-basis: calc(25% - var(--grid-gap)*0.25);
}
}

View File

@ -90,22 +90,22 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"] .layout--content-narrow .text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before {
left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"] .layout--content-narrow .text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before {
right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
}
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"] .layout--content-narrow .text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
@ -133,7 +133,7 @@
}
.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
width: calc(var(--grid-col-width)*10 + var(--grid-gap)*9);
margin-top: var(--sp3);
margin-bottom: var(--sp3)
}
@ -150,15 +150,15 @@
@media (min-width: 62.5rem) {
[dir="ltr"] .layout--content-narrow.text-content pre,[dir="ltr"] .layout--content-narrow .text-content pre,[dir="ltr"] .layout--pass--content-narrow > *.text-content pre,[dir="ltr"] .layout--pass--content-narrow > * .text-content pre {
margin-left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content pre,[dir="rtl"] .layout--content-narrow .text-content pre,[dir="rtl"] .layout--pass--content-narrow > *.text-content pre,[dir="rtl"] .layout--pass--content-narrow > * .text-content pre {
margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap))
width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
}
}

View File

@ -42,7 +42,7 @@
.site-footer__inner {
padding-top: var(--sp4);
padding-bottom: calc(13 * var(--sp))
padding-bottom: calc(var(--sp)*13)
}
}

View File

@ -47,7 +47,7 @@
}
.views-view-grid--vertical {
margin-bottom: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */
margin-bottom: calc(var(--views-grid--layout-gap)*-1); /* Offset the bottom row's padding. */
column-width: var(--views-grid-item--min-width);
column-count: var(--views-grid--column-count);
grid-column-gap: var(--views-grid--layout-gap)

View File

@ -39,7 +39,7 @@
}
.region--content-below > * {
flex-basis: calc(50% - (var(--grid-gap) / 2));
flex-basis: calc(50% - var(--grid-gap)/2);
flex-grow: 1;
flex-shrink: 0
}
@ -57,7 +57,7 @@
@media (min-width: 43.75rem) {
.region--content-below > * {
flex-basis: calc(33.33% - (var(--grid-gap) * 0.667))
flex-basis: calc(33.33% - var(--grid-gap)*0.667)
}
[dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"]

View File

@ -76,8 +76,8 @@
.social-bar__inner {
position: relative;
width: var(--content-left);
padding-top: calc(5 * var(--sp));
padding-bottom: calc(5 * var(--sp))
padding-top: calc(var(--sp)*5);
padding-bottom: calc(var(--sp)*5)
}
[dir="ltr"] .social-bar__inner.is-fixed {
@ -91,7 +91,7 @@
.social-bar__inner.is-fixed {
position: fixed;
top: var(--sp6);
height: calc(100vh - 6 * var(--sp));
height: calc(100vh - var(--sp)*6);
}
}

View File

@ -56,6 +56,9 @@ global-styling:
js/navigation-utils.js: {}
dependencies:
- core/drupal.element.closest
- core/drupal.element.matches
- core/drupal.nodelist.foreach
- core/drupal
- core/once
- core/tabbable
@ -217,6 +220,8 @@ messages:
version: VERSION
js:
js/messages.js: {}
dependencies:
- core/drupal.array.includes
navigation-primary:
version: VERSION

View File

@ -2714,6 +2714,11 @@ css-what@^6.0.1:
resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
css.escape@1.5.x:
version "1.5.1"
resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
cssdb@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
@ -3125,6 +3130,11 @@ es-to-primitive@^1.2.1:
is-date-object "^1.0.1"
is-symbol "^1.0.2"
es6-promise@4.2.x:
version "4.2.8"
resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
escalade@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@ -5211,6 +5221,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
picturefill@3.0.x:
version "3.0.3"
resolved "https://registry.yarnpkg.com/picturefill/-/picturefill-3.0.3.tgz#a5c38eeb02d74def38e1790ff61e166166b4f224"
integrity sha512-JDdx+3i4fs2pkqwWZJgGEM2vFWsq+01YsQFT9CKPGuv2Q0xSdrQZoxi9XwyNARTgxiOdgoAwWQRluLRe/JQX2g==
pify@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@ -5253,6 +5268,15 @@ postcss-attribute-case-insensitive@^4.0.1:
postcss "^7.0.2"
postcss-selector-parser "^6.0.2"
postcss-calc@^7.0.1:
version "7.0.5"
resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.5.tgz#f8a6e99f12e619c2ebc23cf6c486fdc15860933e"
integrity sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==
dependencies:
postcss "^7.0.27"
postcss-selector-parser "^6.0.2"
postcss-value-parser "^4.0.2"
postcss-calc@^8.2.3:
version "8.2.4"
resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.2.4.tgz#77b9c29bfcbe8a07ff6693dc87050828889739a5"
@ -5834,7 +5858,7 @@ postcss-value-parser@^3.2.3:
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==