Compare commits
2 Commits
46e16a410e
...
42ef05d744
| Author | SHA1 | Date |
|---|---|---|
 rdrew
|
42ef05d744 | 3 days ago |
|
rdrew
|
39438fa918 | 3 days ago |
129 changed files with 633 additions and 15795 deletions
Binary file not shown.
@ -1,4 +1,5 @@ |
|||||||
node_modules/ |
node_modules/ |
||||||
*.swp |
*.swp |
||||||
|
.DS_Store |
||||||
/vendor/ |
/vendor/ |
||||||
|
CLAUDE.md |
||||||
|
|||||||
@ -0,0 +1,28 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
declare(strict_types=1); |
||||||
|
|
||||||
|
use PhpCsFixer\Config; |
||||||
|
use PhpCsFixer\Finder; |
||||||
|
|
||||||
|
return (new Config()) |
||||||
|
->setRiskyAllowed(false) |
||||||
|
->setRules([ |
||||||
|
'@auto' => true |
||||||
|
]) |
||||||
|
// 💡 by default, Fixer looks for `*.php` files excluding `./vendor/` - here, you can groom this config |
||||||
|
->setFinder( |
||||||
|
(new Finder()) |
||||||
|
// 💡 root folder to check |
||||||
|
->in(__DIR__) |
||||||
|
// 💡 additional files, eg bin entry file |
||||||
|
// ->append([__DIR__.'/bin-entry-file']) |
||||||
|
// 💡 folders to exclude, if any |
||||||
|
// ->exclude([/* ... */]) |
||||||
|
// 💡 path patterns to exclude, if any |
||||||
|
// ->notPath([/* ... */]) |
||||||
|
// 💡 extra configs |
||||||
|
// ->ignoreDotFiles(false) // true by default in v3, false in v4 or future mode |
||||||
|
// ->ignoreVCS(true) // true by default |
||||||
|
) |
||||||
|
; |
||||||
@ -1,12 +0,0 @@ |
|||||||
{ |
|
||||||
"name": "rdrew/oliveskln", |
|
||||||
"description": "drupal theme for SDU", |
|
||||||
"type": "drupal-custom-theme", |
|
||||||
"authors": [ |
|
||||||
{ |
|
||||||
"name": "rdrew", |
|
||||||
"email": "rdrew@upei.ca" |
|
||||||
} |
|
||||||
], |
|
||||||
"require": {} |
|
||||||
} |
|
||||||
File diff suppressed because one or more lines are too long
@ -1,10 +0,0 @@ |
|||||||
main.js is the recompiled mirador library. It goes in web/libraries/mirador/dist/main.js |
|
||||||
|
|
||||||
To replicate this or modify the viewr library: |
|
||||||
- clone https://github.com/roblib/mirador-integration-islandora/tree/main |
|
||||||
- run 'npm install' |
|
||||||
- 'settings.js' goes in 'mirador-integration-islandora/node_modules/mirador/dist/es/src/config' |
|
||||||
- run 'npm run webpack' |
|
||||||
- The output folder webpack/dist should now contain a file main.js which you can place in your drupal installation under [webroot]/libraries/mirador/dist. |
|
||||||
- You can then go to /admin/config/media/mirador and set it to use the local version after clearing your site's cache. |
|
||||||
- |
|
||||||
@ -1,475 +0,0 @@ |
|||||||
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } |
|
||||||
|
|
||||||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } |
|
||||||
|
|
||||||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } |
|
||||||
|
|
||||||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } |
|
||||||
|
|
||||||
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } |
|
||||||
|
|
||||||
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } |
|
||||||
|
|
||||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } |
|
||||||
|
|
||||||
import { v4 as uuid } from 'uuid'; |
|
||||||
export default { |
|
||||||
state: {// slice: 'mirador' // Configure the top-level slice of state for mirador selectors
|
|
||||||
}, |
|
||||||
canvasNavigation: { |
|
||||||
// Set the height and width of canvas thumbnails in the CanvasNavigation companion window
|
|
||||||
height: 50, |
|
||||||
width: 50 |
|
||||||
}, |
|
||||||
selectedTheme: 'light', |
|
||||||
// dark also available
|
|
||||||
themes: { |
|
||||||
dark: { |
|
||||||
palette: { |
|
||||||
type: 'dark', |
|
||||||
primary: { |
|
||||||
main: '#4db6ac' |
|
||||||
}, |
|
||||||
secondary: { |
|
||||||
main: '#4db6ac' |
|
||||||
}, |
|
||||||
shades: { |
|
||||||
dark: '#000000', |
|
||||||
main: '#424242', |
|
||||||
light: '#616161' |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
light: { |
|
||||||
palette: { |
|
||||||
type: 'light' |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
theme: { |
|
||||||
// Sets up a MaterialUI theme. See https://material-ui.com/customization/default-theme/
|
|
||||||
palette: { |
|
||||||
type: 'light', |
|
||||||
primary: { |
|
||||||
main: '#1967d2' // Controls the color of the Add button and current window indicator
|
|
||||||
|
|
||||||
}, |
|
||||||
secondary: { |
|
||||||
main: '#1967d2' // Controls the color of Selects and FormControls
|
|
||||||
|
|
||||||
}, |
|
||||||
shades: { |
|
||||||
// Shades that can be used to offset color areas of the Workspace / Window
|
|
||||||
dark: '#eeeeee', |
|
||||||
main: '#ffffff', |
|
||||||
light: '#f5f5f5' |
|
||||||
}, |
|
||||||
error: { |
|
||||||
main: '#b00020' |
|
||||||
}, |
|
||||||
notification: { |
|
||||||
// Color used in MUI Badge dots
|
|
||||||
main: '#ffa224' |
|
||||||
}, |
|
||||||
hitCounter: { |
|
||||||
"default": '#bdbdbd' |
|
||||||
}, |
|
||||||
highlights: { |
|
||||||
primary: '#ffff00', |
|
||||||
secondary: '#00BFFF' |
|
||||||
}, |
|
||||||
section_divider: 'rgba(0, 0, 0, 0.25)', |
|
||||||
annotations: { |
|
||||||
hidden: { |
|
||||||
globalAlpha: 0 |
|
||||||
}, |
|
||||||
"default": { |
|
||||||
strokeStyle: '#00BFFF', |
|
||||||
globalAlpha: 1 |
|
||||||
}, |
|
||||||
hovered: { |
|
||||||
strokeStyle: '#BF00FF', |
|
||||||
globalAlpha: 1 |
|
||||||
}, |
|
||||||
selected: { |
|
||||||
strokeStyle: '#ffff00', |
|
||||||
globalAlpha: 1 |
|
||||||
} |
|
||||||
}, |
|
||||||
search: { |
|
||||||
"default": { |
|
||||||
fillStyle: '#00BFFF', |
|
||||||
globalAlpha: 0.3 |
|
||||||
}, |
|
||||||
hovered: { |
|
||||||
fillStyle: '#00FFFF', |
|
||||||
globalAlpha: 0.3 |
|
||||||
}, |
|
||||||
selected: { |
|
||||||
fillStyle: '#ffff00', |
|
||||||
globalAlpha: 0.3 |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
typography: { |
|
||||||
body1: { |
|
||||||
fontSize: "1rem", |
|
||||||
letterSpacing: "0em", |
|
||||||
lineHeight: "1.6em" |
|
||||||
}, |
|
||||||
body2: { |
|
||||||
fontSize: "0.878rem", |
|
||||||
letterSpacing: "0.015em", |
|
||||||
lineHeight: "1.6em" |
|
||||||
}, |
|
||||||
button: { |
|
||||||
fontSize: "0.878rem", |
|
||||||
letterSpacing: "0.09em", |
|
||||||
lineHeight: "2.25rem", |
|
||||||
textTransform: "uppercase" |
|
||||||
}, |
|
||||||
caption: { |
|
||||||
fontSize: "0.772rem", |
|
||||||
letterSpacing: "0.033em", |
|
||||||
lineHeight: "1.6rem" |
|
||||||
}, |
|
||||||
body1Next: { |
|
||||||
fontSize: "1rem", |
|
||||||
letterSpacing: "0em", |
|
||||||
lineHeight: "1.6em" |
|
||||||
}, |
|
||||||
body2Next: { |
|
||||||
fontSize: "0.878rem", |
|
||||||
letterSpacing: "0.015em", |
|
||||||
lineHeight: "1.6em" |
|
||||||
}, |
|
||||||
buttonNext: { |
|
||||||
fontSize: "0.878rem", |
|
||||||
letterSpacing: "0.09em", |
|
||||||
lineHeight: "2.25rem" |
|
||||||
}, |
|
||||||
captionNext: { |
|
||||||
fontSize: "0.772rem", |
|
||||||
letterSpacing: "0.33em", |
|
||||||
lineHeight: "1.6rem" |
|
||||||
}, |
|
||||||
overline: { |
|
||||||
fontSize: "0.678rem", |
|
||||||
fontWeight: 500, |
|
||||||
letterSpacing: "0.166em", |
|
||||||
lineHeight: "2em", |
|
||||||
textTransform: "uppercase" |
|
||||||
}, |
|
||||||
h1: { |
|
||||||
fontSize: "2.822rem", |
|
||||||
letterSpacing: "-0.015em", |
|
||||||
lineHeight: "1.2em" |
|
||||||
}, |
|
||||||
h2: { |
|
||||||
fontSize: "1.575rem", |
|
||||||
letterSpacing: "0em", |
|
||||||
lineHeight: "1.33em" |
|
||||||
}, |
|
||||||
h3: { |
|
||||||
fontSize: "1.383rem", |
|
||||||
fontWeight: 300, |
|
||||||
letterSpacing: "0em", |
|
||||||
lineHeight: "1.33em" |
|
||||||
}, |
|
||||||
h4: { |
|
||||||
fontSize: "1.215rem", |
|
||||||
letterSpacing: "0.007em", |
|
||||||
lineHeight: "1.45em" |
|
||||||
}, |
|
||||||
h5: { |
|
||||||
fontSize: "1.138rem", |
|
||||||
letterSpacing: "0.005em", |
|
||||||
lineHeight: "1.55em" |
|
||||||
}, |
|
||||||
h6: { |
|
||||||
fontSize: "1.067rem", |
|
||||||
fontWeight: 400, |
|
||||||
letterSpacing: "0.01em", |
|
||||||
lineHeight: "1.6em" |
|
||||||
}, |
|
||||||
subtitle1: { |
|
||||||
fontSize: "0.937rem", |
|
||||||
letterSpacing: "0.015em", |
|
||||||
lineHeight: "1.6em", |
|
||||||
fontWeight: 300 |
|
||||||
}, |
|
||||||
subtitle2: { |
|
||||||
fontSize: "0.878rem", |
|
||||||
fontWeight: 500, |
|
||||||
letterSpacing: "0.02em", |
|
||||||
lineHeight: "1.75em" |
|
||||||
}, |
|
||||||
useNextVariants: true // set so that console deprecation warning is removed
|
|
||||||
|
|
||||||
}, |
|
||||||
overrides: { |
|
||||||
MuiListSubheader: { |
|
||||||
root: { |
|
||||||
'&[role="presentation"]:focus': { |
|
||||||
outline: 0 |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
MuiTooltip: { |
|
||||||
// Overridden from https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js#L40-L70
|
|
||||||
tooltipPlacementLeft: _defineProperty({}, '@media (min-width:600px)', { |
|
||||||
margin: 0 |
|
||||||
}), |
|
||||||
tooltipPlacementRight: _defineProperty({}, '@media (min-width:600px)', { |
|
||||||
margin: 0 |
|
||||||
}), |
|
||||||
tooltipPlacementTop: _defineProperty({}, '@media (min-width:600px)', { |
|
||||||
margin: 0 |
|
||||||
}), |
|
||||||
tooltipPlacementBottom: _defineProperty({}, '@media (min-width:600px)', { |
|
||||||
margin: 0 |
|
||||||
}) |
|
||||||
}, |
|
||||||
MuiTouchRipple: { |
|
||||||
childPulsate: { |
|
||||||
animation: 'none' |
|
||||||
}, |
|
||||||
rippleVisible: { |
|
||||||
animation: 'none' |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
props: { |
|
||||||
MuiButtonBase: { |
|
||||||
disableTouchRipple: true |
|
||||||
}, |
|
||||||
MuiLink: { |
|
||||||
underline: 'always' |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
language: 'en', |
|
||||||
// The default language set in the application
|
|
||||||
availableLanguages: { |
|
||||||
// All the languages available in the language switcher
|
|
||||||
ar: 'العربية', |
|
||||||
de: 'Deutsch', |
|
||||||
en: 'English', |
|
||||||
fr: 'Français', |
|
||||||
ja: '日本語', |
|
||||||
kr: '한국어', |
|
||||||
lt: 'Lietuvių', |
|
||||||
nl: 'Nederlands', |
|
||||||
'nb-NO': 'Norwegian Bokmål', |
|
||||||
pl: 'Polski', |
|
||||||
'pt-BR': 'Português do Brasil', |
|
||||||
vi: 'Tiếng Việt', |
|
||||||
'zh-CN': '中文(简体)', |
|
||||||
'zh-TW': '中文(繁體)', |
|
||||||
it: "Italiano", |
|
||||||
sr: 'Српски', |
|
||||||
sv: 'Svenska' |
|
||||||
}, |
|
||||||
annotations: { |
|
||||||
htmlSanitizationRuleSet: 'iiif', |
|
||||||
// See src/lib/htmlRules.js for acceptable values
|
|
||||||
filteredMotivations: ['oa:commenting', 'oa:tagging', 'sc:painting', 'commenting', 'tagging'] |
|
||||||
}, |
|
||||||
createGenerateClassNameOptions: { |
|
||||||
// Options passed directly to createGenerateClassName in Material-UI https://material-ui.com/styles/api/#creategenerateclassname-options-class-name-generator
|
|
||||||
productionPrefix: 'mirador' |
|
||||||
}, |
|
||||||
requests: { |
|
||||||
preprocessors: [// Functions that receive HTTP requests and manipulate them (e.g. to add headers)
|
|
||||||
// (url, options) => (url.match('info.json') && { ...options, myCustomThing: 'blah' })
|
|
||||||
], |
|
||||||
postprocessors: [// Functions that receive HTTP responses and manipulates them before adding to store
|
|
||||||
// An example of manipulating the response for an annotation request
|
|
||||||
// (url, action) => {
|
|
||||||
// if (action.annotationId) {
|
|
||||||
// action.annotationJson = {};
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
] |
|
||||||
}, |
|
||||||
translations: {// Translations can be added to inject new languages or override existing labels
|
|
||||||
}, |
|
||||||
window: { |
|
||||||
//global window defaults
|
|
||||||
allowClose: false, |
|
||||||
// Configure if windows can be closed or not
|
|
||||||
allowFullscreen: false, |
|
||||||
// Configure to show a "fullscreen" button in the WindowTopBar
|
|
||||||
allowMaximize: false, |
|
||||||
// Configure if windows can be maximized or not
|
|
||||||
allowTopMenuButton: false, |
|
||||||
// Configure if window view and thumbnail display menu are visible or not
|
|
||||||
allowWindowSideBar: true, |
|
||||||
// Configure if side bar menu is visible or not
|
|
||||||
authNewWindowCenter: 'parent', |
|
||||||
// Configure how to center a new window created by the authentication flow. Options: parent, screen
|
|
||||||
sideBarPanel: 'search', |
|
||||||
// Configure which sidebar is selected by default. Options: info, attribution, canvas, annotations, search
|
|
||||||
defaultSidebarPanelHeight: 201, |
|
||||||
// Configure default sidebar height in pixels
|
|
||||||
defaultSidebarPanelWidth: 235, |
|
||||||
// Configure default sidebar width in pixels
|
|
||||||
defaultView: 'single', |
|
||||||
// Configure which viewing mode (e.g. single, book, gallery) for windows to be opened in
|
|
||||||
forceDrawAnnotations: false, |
|
||||||
hideWindowTitle: true, |
|
||||||
// Configure if the window title is shown in the window title bar or not
|
|
||||||
highlightAllAnnotations: false, |
|
||||||
// Configure whether to display annotations on the canvas by default
|
|
||||||
showLocalePicker: false, |
|
||||||
// Configure locale picker for multi-lingual metadata
|
|
||||||
sideBarOpen: true, |
|
||||||
// Configure if the sidebar (and its content panel) is open by default
|
|
||||||
switchCanvasOnSearch: true, |
|
||||||
// Configure if Mirador should automatically switch to the canvas of the first search result
|
|
||||||
panels: { |
|
||||||
// Configure which panels are visible in WindowSideBarButtons
|
|
||||||
info: false, |
|
||||||
attribution: false, |
|
||||||
canvas: false, |
|
||||||
annotations: false, |
|
||||||
search: true, |
|
||||||
layers: false |
|
||||||
}, |
|
||||||
views: [{ |
|
||||||
key: 'single', |
|
||||||
behaviors: ['individuals'] |
|
||||||
}, { |
|
||||||
key: 'book', |
|
||||||
behaviors: ['paged'] |
|
||||||
}, { |
|
||||||
key: 'scroll', |
|
||||||
behaviors: ['continuous'] |
|
||||||
}, { |
|
||||||
key: 'gallery' |
|
||||||
}], |
|
||||||
elastic: { |
|
||||||
height: 400, |
|
||||||
width: 480 |
|
||||||
} |
|
||||||
}, |
|
||||||
windows: [// Array of windows to be open when mirador initializes (each object should at least provide a manifestId key with the value of the IIIF presentation manifest to load)
|
|
||||||
|
|
||||||
/** |
|
||||||
Example Window: |
|
||||||
{ |
|
||||||
manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843', |
|
||||||
canvasId: 'https://iiif.harvardartmuseums.org/manifests/object/299843/page_2', |
|
||||||
thumbnailNavigationPosition: 'far-bottom', |
|
||||||
} |
|
||||||
// ../state/actions/window.js `defaultOptions`
|
|
||||||
// ../lib/MiradorViewer.js `windowAction`
|
|
||||||
*/ |
|
||||||
], |
|
||||||
thumbnails: { |
|
||||||
preferredFormats: ['jpg', 'png', 'webp', 'tif'] |
|
||||||
}, |
|
||||||
thumbnailNavigation: { |
|
||||||
defaultPosition: 'off', |
|
||||||
// Which position for the thumbnail navigation to be be displayed. Other possible values are "far-bottom" or "far-right"
|
|
||||||
displaySettings: true, |
|
||||||
// Display the settings for this in WindowTopMenu
|
|
||||||
height: 130, |
|
||||||
// height of entire ThumbnailNavigation area when position is "far-bottom"
|
|
||||||
width: 100 // width of one canvas (doubled for book view) in ThumbnailNavigation area when position is "far-right"
|
|
||||||
|
|
||||||
}, |
|
||||||
workspace: { |
|
||||||
draggingEnabled: true, |
|
||||||
allowNewWindows: true, |
|
||||||
id: uuid(), |
|
||||||
isWorkspaceAddVisible: false, |
|
||||||
// Catalog/Workspace add window feature visible by default
|
|
||||||
exposeModeOn: false, |
|
||||||
// unused?
|
|
||||||
height: 5000, |
|
||||||
// height of the elastic mode's virtual canvas
|
|
||||||
showZoomControls: false, |
|
||||||
// Configure if zoom controls should be displayed by default
|
|
||||||
type: 'mosaic', |
|
||||||
// Which workspace type to load by default. Other possible values are "elastic". If "mosaic" or "elastic" are not selected no worksapce type will be used.
|
|
||||||
viewportPosition: { |
|
||||||
// center coordinates for the elastic mode workspace
|
|
||||||
x: 0, |
|
||||||
y: 0 |
|
||||||
}, |
|
||||||
width: 5000 // width of the elastic mode's virtual canvas
|
|
||||||
|
|
||||||
}, |
|
||||||
workspaceControlPanel: { |
|
||||||
enabled: false // Configure if the control panel should be rendered. Useful if you want to lock the viewer down to only the configured manifests
|
|
||||||
|
|
||||||
}, |
|
||||||
galleryView: { |
|
||||||
height: 120, |
|
||||||
// height of gallery view thumbnails
|
|
||||||
width: null // width of gallery view thumbnails (or null, to auto-calculate an aspect-ratio appropriate size)
|
|
||||||
|
|
||||||
}, |
|
||||||
osdConfig: { |
|
||||||
// Default config used for OpenSeadragon
|
|
||||||
alwaysBlend: false, |
|
||||||
blendTime: 0.1, |
|
||||||
preserveImageSizeOnResize: true, |
|
||||||
preserveViewport: true, |
|
||||||
showNavigationControl: false |
|
||||||
}, |
|
||||||
"export": { |
|
||||||
catalog: true, |
|
||||||
companionWindows: true, |
|
||||||
config: true, |
|
||||||
elasticLayout: true, |
|
||||||
layers: true, |
|
||||||
// filter out anything re-retrievable:
|
|
||||||
manifests: { |
|
||||||
filter: function filter(_ref) { |
|
||||||
var _ref2 = _slicedToArray(_ref, 2), |
|
||||||
id = _ref2[0], |
|
||||||
value = _ref2[1]; |
|
||||||
|
|
||||||
return !id.startsWith('http'); |
|
||||||
} |
|
||||||
}, |
|
||||||
viewers: true, |
|
||||||
windows: true, |
|
||||||
workspace: true |
|
||||||
}, |
|
||||||
audioOptions: { |
|
||||||
// Additional props passed to <audio> element
|
|
||||||
controls: true, |
|
||||||
crossOrigin: 'anonymous' |
|
||||||
}, |
|
||||||
videoOptions: { |
|
||||||
// Additional props passed to <audio> element
|
|
||||||
controls: true, |
|
||||||
crossOrigin: 'anonymous' |
|
||||||
}, |
|
||||||
auth: { |
|
||||||
serviceProfiles: [{ |
|
||||||
profile: 'http://iiif.io/api/auth/1/external', |
|
||||||
external: true |
|
||||||
}, { |
|
||||||
profile: 'http://iiif.io/api/auth/1/kiosk', |
|
||||||
kiosk: true |
|
||||||
}, { |
|
||||||
profile: 'http://iiif.io/api/auth/1/clickthrough' |
|
||||||
}, { |
|
||||||
profile: 'http://iiif.io/api/auth/1/login' |
|
||||||
}, { |
|
||||||
profile: 'http://iiif.io/api/auth/0/external', |
|
||||||
external: true |
|
||||||
}, { |
|
||||||
profile: 'http://iiif.io/api/auth/0/kiosk', |
|
||||||
kiosk: true |
|
||||||
}, { |
|
||||||
profile: 'http://iiif.io/api/auth/0/clickthrough' |
|
||||||
}, { |
|
||||||
profile: 'http://iiif.io/api/auth/0/login' |
|
||||||
}] |
|
||||||
} |
|
||||||
}; |
|
||||||
@ -1,140 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Generic base elements. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "media-queries.pcss.css"; |
|
||||||
|
|
||||||
*, |
|
||||||
*::before, |
|
||||||
*::after { |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
html { |
|
||||||
font-family: var(--font-sans); |
|
||||||
font-size: 100%; |
|
||||||
font-weight: normal; |
|
||||||
font-style: normal; |
|
||||||
line-height: var(--line-height-base); |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
margin: 0; |
|
||||||
color: var(--color-text-neutral-medium); |
|
||||||
background-color: var(--color--gray-100); |
|
||||||
background-image: url("../../images/background.svg"); |
|
||||||
background-position: top left; /* LTR */ |
|
||||||
|
|
||||||
&.is-fixed { |
|
||||||
position: fixed; |
|
||||||
overflow: hidden; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] body { |
|
||||||
background-position: top right; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
color: var(--color-text-primary-medium); |
|
||||||
|
|
||||||
&:hover { |
|
||||||
color: var(--color--primary-50); |
|
||||||
} |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline: solid 2px currentColor; |
|
||||||
outline-offset: 2px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
button { |
|
||||||
font-family: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
img, |
|
||||||
video { |
|
||||||
display: block; |
|
||||||
max-width: 100%; |
|
||||||
height: auto; |
|
||||||
} |
|
||||||
|
|
||||||
audio { |
|
||||||
display: block; |
|
||||||
max-width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
h1 { |
|
||||||
letter-spacing: -0.01em; |
|
||||||
font-size: 28px; |
|
||||||
line-height: var(--sp2); |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
font-size: 60px; |
|
||||||
line-height: var(--sp4); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
h2 { |
|
||||||
letter-spacing: -0.01em; |
|
||||||
font-size: 24px; |
|
||||||
line-height: var(--sp2); |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
font-size: 36px; |
|
||||||
line-height: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
h3 { |
|
||||||
font-size: 20px; |
|
||||||
line-height: var(--sp1-5); |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
font-size: 24px; |
|
||||||
line-height: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
h4 { |
|
||||||
font-size: 18px; |
|
||||||
line-height: var(--sp1-5); |
|
||||||
} |
|
||||||
|
|
||||||
h5 { |
|
||||||
font-size: 16px; |
|
||||||
line-height: var(--sp1-5); |
|
||||||
} |
|
||||||
|
|
||||||
h6 { |
|
||||||
font-size: 14px; |
|
||||||
line-height: var(--sp); |
|
||||||
} |
|
||||||
|
|
||||||
h1, |
|
||||||
h2, |
|
||||||
h3, |
|
||||||
h4, |
|
||||||
h5, |
|
||||||
h6 { |
|
||||||
margin-block: var(--sp); |
|
||||||
color: var(--color-text-neutral-loud); |
|
||||||
font-family: var(--font-sans); |
|
||||||
font-weight: bold; |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
margin-block: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
ul { |
|
||||||
margin-block-start: 0.25em; |
|
||||||
margin-block-end: 0.25em; |
|
||||||
margin-inline-start: 1.5em; |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
list-style-type: disc; |
|
||||||
list-style-image: none; |
|
||||||
} |
|
||||||
@ -1,64 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Base Fonts. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "media-queries.pcss.css"; |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: metropolis; |
|
||||||
src: url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2"); |
|
||||||
font-weight: normal; |
|
||||||
font-style: normal; |
|
||||||
font-display: swap; |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: metropolis; |
|
||||||
src: url("../../fonts/metropolis/Metropolis-Bold.woff2") format("woff2"); |
|
||||||
font-weight: 700; |
|
||||||
font-style: normal; |
|
||||||
font-display: swap; |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: metropolis; |
|
||||||
src: url("../../fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2"); |
|
||||||
font-weight: 600; |
|
||||||
font-style: normal; |
|
||||||
font-display: swap; |
|
||||||
} |
|
||||||
|
|
||||||
/* lora-regular - latin */ |
|
||||||
@font-face { |
|
||||||
font-family: Lora; |
|
||||||
src: |
|
||||||
local("Lora Regular"), |
|
||||||
local("Lora-Regular"), |
|
||||||
url("../../fonts/lora/lora-v14-latin-regular.woff2") format("woff2"); |
|
||||||
font-weight: 400; |
|
||||||
font-style: normal; |
|
||||||
font-display: swap; |
|
||||||
} |
|
||||||
/* lora-italic - latin */ |
|
||||||
@font-face { |
|
||||||
font-family: Lora; |
|
||||||
src: |
|
||||||
local("Lora Italic"), |
|
||||||
local("Lora-Italic"), |
|
||||||
url("../../fonts/lora/lora-v14-latin-italic.woff2") format("woff2"); |
|
||||||
font-weight: 400; |
|
||||||
font-style: italic; |
|
||||||
font-display: swap; |
|
||||||
} |
|
||||||
/* lora-700 - latin */ |
|
||||||
@font-face { |
|
||||||
font-family: Lora; |
|
||||||
src: |
|
||||||
local("Lora Bold"), |
|
||||||
local("Lora-Bold"), |
|
||||||
url("../../fonts/lora/lora-v14-latin-700.woff2") format("woff2"); |
|
||||||
font-weight: 700; |
|
||||||
font-style: normal; |
|
||||||
font-display: swap; |
|
||||||
} |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
/* |
|
||||||
* Media query breakpoints. |
|
||||||
* Processed by postcss/postcss-custom-media. |
|
||||||
*/ |
|
||||||
|
|
||||||
@custom-media --sm (min-width: 500px); |
|
||||||
@custom-media --md (min-width: 700px); |
|
||||||
@custom-media --lg (min-width: 1000px); |
|
||||||
@custom-media --xl (min-width: 1300px); |
|
||||||
|
|
||||||
/* Navigation related breakpoints */ |
|
||||||
@custom-media --nav-md (min-width: 500px); |
|
||||||
@custom-media --nav (min-width: 1200px); |
|
||||||
@custom-media --max-nav (max-width: 1200px); |
|
||||||
|
|
||||||
/* Grid related breakpoints */ |
|
||||||
@custom-media --grid-md (min-width: 700px); /* Grid shifts from 6 to 14 columns. */ |
|
||||||
@custom-media --grid-max (min-width: 1440px); /* Width of the entire grid maxes out. */ |
|
||||||
@ -1,142 +0,0 @@ |
|||||||
/* |
|
||||||
Global CSS custom properties. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "./media-queries.pcss.css"; |
|
||||||
|
|
||||||
/* stylelint-disable */ |
|
||||||
|
|
||||||
:root { |
|
||||||
--font-sans: "metropolis", sans-serif; |
|
||||||
--font-serif: "Lora", "georgia", serif; |
|
||||||
|
|
||||||
/* Typography helpers. */ |
|
||||||
--font-size-base: 16px; |
|
||||||
--font-size-l: 18px; |
|
||||||
--font-size-s: 14px; |
|
||||||
--font-size-xs: 13px; |
|
||||||
--font-size-xxs: 12px; |
|
||||||
--line-height-base: 27px; |
|
||||||
--line-height-s: 18px; |
|
||||||
|
|
||||||
/* Layout helpers. */ |
|
||||||
--max-width: 1350px; |
|
||||||
--max-bg-color: 1570px; /* Width to which the background color extends to. */ |
|
||||||
--sp: 18px; |
|
||||||
--content-left: 90px; |
|
||||||
--site-header-height-wide: var(--sp10); |
|
||||||
--container-padding: var(--sp); /* Inline padding on .container elements. */ |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
--container-padding: var(--sp2); |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Grid helpers. |
|
||||||
* |
|
||||||
* These variables help authors apply widths and negative margins to break items out of |
|
||||||
* the grid, while still conforming to the larger grid system. |
|
||||||
*/ |
|
||||||
--scrollbar-width: 0px; /* Unit must be specified here for calc() to work properly.*/ |
|
||||||
--grid-col-count: 6; |
|
||||||
--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. */ |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
--grid-col-count: 14; |
|
||||||
--grid-gap: var(--sp2); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
--scrollbar-width: 15px; /* Approximate width of a scrollbar. Doesn't have to be perfect. */ |
|
||||||
} |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
--grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4)); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--grid-max) { |
|
||||||
--grid-full-width: calc(var(--max-width) - var(--sp4)); |
|
||||||
} |
|
||||||
|
|
||||||
/* 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)); |
|
||||||
|
|
||||||
/** |
|
||||||
* Gray colors. |
|
||||||
* |
|
||||||
* Color number roughly corresponds to its luminosity. |
|
||||||
*/ |
|
||||||
--color--gray-hue: 201; |
|
||||||
--color--gray-saturation: 15%; |
|
||||||
--color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */ |
|
||||||
--color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%); |
|
||||||
--color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */ |
|
||||||
--color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */ |
|
||||||
--color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */ |
|
||||||
--color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */ |
|
||||||
--color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */ |
|
||||||
--color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */ |
|
||||||
--color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */ |
|
||||||
--color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%); /* Gray light 2 */ |
|
||||||
|
|
||||||
/** |
|
||||||
* Primary colors. |
|
||||||
* |
|
||||||
* Color number roughly corresponds to its luminosity. |
|
||||||
*/ |
|
||||||
--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-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-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness)))))); /* Blue very bright */ |
|
||||||
|
|
||||||
/** |
|
||||||
* Variables specific to text. |
|
||||||
*/ |
|
||||||
--color-text-neutral-soft: var(--color--gray-45); |
|
||||||
--color-text-neutral-medium: var(--color--gray-20); |
|
||||||
--color-text-neutral-loud: var(--color--gray-5); |
|
||||||
|
|
||||||
--color-text-primary-medium: var(--color--primary-40); |
|
||||||
--color-text-primary-loud: var(--color--primary-30); |
|
||||||
|
|
||||||
/** |
|
||||||
* Named Colors. |
|
||||||
*/ |
|
||||||
--color--black: #000; /* Black */ |
|
||||||
--color--white: #fff; /* White */ |
|
||||||
--color--red: #e33f1e; /* Red */ |
|
||||||
--color--gold: #fdca40; /* Gold */ |
|
||||||
--color--green: #3fa21c; /* Green */ |
|
||||||
|
|
||||||
/* Header */ |
|
||||||
--header-height-wide-when-fixed: calc(6 * var(--sp)); |
|
||||||
|
|
||||||
/* Width of slide out navigation */ |
|
||||||
--mobile-nav-width: 500px; |
|
||||||
|
|
||||||
/* Border radius */ |
|
||||||
--border-radius: 3px; |
|
||||||
} |
|
||||||
@ -1,57 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Styles for menu placed in sidebar region. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.menu--sidebar { |
|
||||||
list-style: none; |
|
||||||
|
|
||||||
& .menu { |
|
||||||
list-style: none; |
|
||||||
} |
|
||||||
|
|
||||||
& .menu--level-1 { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
& .menu__link { |
|
||||||
position: relative; |
|
||||||
display: block; |
|
||||||
padding-block: var(--sp0-75); |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
font-family: var(--font-serif); |
|
||||||
font-size: 18px; |
|
||||||
|
|
||||||
/* Bottom divider line. */ |
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
inset-block-end: 0; |
|
||||||
inset-inline-start: 0; |
|
||||||
width: var(--sp4); |
|
||||||
height: 0; |
|
||||||
content: ""; |
|
||||||
border-block-start: solid 2px var(--color--gray-95); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .menu__link--link { |
|
||||||
text-decoration: none; |
|
||||||
color: var(--color-text-neutral-loud); |
|
||||||
font-weight: 600; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
color: var(--color--primary-50); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* No bottom divider line for last menu item. */ |
|
||||||
& .menu__item--level-1:last-child > .menu__link:last-child, |
|
||||||
& .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child { |
|
||||||
&::after { |
|
||||||
content: none; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,102 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Nav Button Mobile. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.mobile-nav-button { |
|
||||||
position: relative; |
|
||||||
z-index: 505; /* Appear above mobile nav. */ |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
align-self: center; |
|
||||||
width: var(--sp2); |
|
||||||
height: var(--sp2); |
|
||||||
margin-inline-start: auto; |
|
||||||
margin-inline-end: -6px; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 6px; |
|
||||||
padding-inline-end: 6px; |
|
||||||
cursor: pointer; |
|
||||||
border: none; |
|
||||||
background: transparent; |
|
||||||
appearance: none; |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline: solid 2px var(--color--primary-40); |
|
||||||
} |
|
||||||
|
|
||||||
&:active { |
|
||||||
color: inherit; /* Override Safari's default UA styles. */ |
|
||||||
} |
|
||||||
|
|
||||||
@media (--sm) { |
|
||||||
display: inline-flex; |
|
||||||
width: auto; |
|
||||||
padding-inline-start: var(--sp); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Text that says "menu". */ |
|
||||||
.mobile-nav-button__label { |
|
||||||
position: absolute; |
|
||||||
display: block; |
|
||||||
overflow: hidden; |
|
||||||
clip: rect(1px, 1px, 1px, 1px); |
|
||||||
width: 1px; |
|
||||||
height: 1px; |
|
||||||
word-wrap: normal; |
|
||||||
|
|
||||||
@media (--sm) { |
|
||||||
position: static; |
|
||||||
overflow: visible; |
|
||||||
clip: auto; |
|
||||||
width: auto; |
|
||||||
height: auto; |
|
||||||
margin-inline-end: 12px; |
|
||||||
letter-spacing: 0.05em; |
|
||||||
font-size: 14px; |
|
||||||
font-weight: 600; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.mobile-nav-button__icon { |
|
||||||
position: relative; |
|
||||||
display: block; |
|
||||||
width: var(--sp2); |
|
||||||
height: 0; |
|
||||||
border-top: solid 3px var(--color--primary-50); |
|
||||||
|
|
||||||
&::before, |
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
inset-block-start: 0; |
|
||||||
inset-inline-start: 0; |
|
||||||
width: 100%; |
|
||||||
height: 0; |
|
||||||
content: ""; |
|
||||||
transition: transform 0.2s; |
|
||||||
border-top: solid 3px var(--color--primary-50); |
|
||||||
} |
|
||||||
|
|
||||||
&::before { |
|
||||||
transform: translateY(-11px); |
|
||||||
} |
|
||||||
|
|
||||||
&::after { |
|
||||||
transform: translateY(5px); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon { |
|
||||||
border-top-color: transparent; |
|
||||||
|
|
||||||
&::before { |
|
||||||
transform: translateY(-3px) rotate(-45deg); |
|
||||||
} |
|
||||||
|
|
||||||
&::after { |
|
||||||
transform: translateY(-3px) rotate(45deg); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,131 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Button that expands second level nav when clicked. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.primary-nav__button-toggle { |
|
||||||
position: relative; |
|
||||||
overflow: hidden; |
|
||||||
width: var(--sp2); |
|
||||||
height: var(--sp2); |
|
||||||
margin-block-start: var(--sp0-5); /* Visually align button with menu link text. */ |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
cursor: pointer; |
|
||||||
text-indent: -999px; |
|
||||||
border: 0; |
|
||||||
background: transparent; |
|
||||||
-webkit-appearance: none; |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline: auto 2px var(--color--primary-50); |
|
||||||
outline-offset: 2px; |
|
||||||
} |
|
||||||
|
|
||||||
& .icon--menu-toggle { |
|
||||||
position: absolute; |
|
||||||
/* stylelint-disable csstools/use-logical */ |
|
||||||
top: 50%; |
|
||||||
left: 50%; |
|
||||||
/* stylelint-enable csstools/use-logical */ |
|
||||||
width: 16px; |
|
||||||
height: 16px; |
|
||||||
transition: background-color 0.2s; |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
border-radius: 2px; |
|
||||||
|
|
||||||
&::before, |
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
/* stylelint-disable csstools/use-logical */ |
|
||||||
top: 50%; |
|
||||||
left: 50%; |
|
||||||
/* stylelint-enable csstools/use-logical */ |
|
||||||
width: var(--sp); |
|
||||||
height: 0; |
|
||||||
content: ""; |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
/* Intentionally not using CSS logical properties. */ |
|
||||||
border-top: solid 3px var(--color--primary-50); |
|
||||||
} |
|
||||||
|
|
||||||
&::after { |
|
||||||
transition: opacity 0.2s; |
|
||||||
transform: translate(-50%, -50%) rotate(90deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&[aria-expanded="true"] .icon--menu-toggle::after { |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/* aria-hidden attribute is removed by JS. Button is non-functional |
|
||||||
until JS is enabled. |
|
||||||
*/ |
|
||||||
&[aria-hidden="true"] { |
|
||||||
pointer-events: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
body:not(.is-always-mobile-nav) { |
|
||||||
@media (--nav) { |
|
||||||
& .primary-nav__button-toggle { |
|
||||||
flex-shrink: 0; |
|
||||||
align-self: stretch; |
|
||||||
width: calc(var(--sp2) + 8px); |
|
||||||
height: auto; |
|
||||||
margin-block-start: 0; |
|
||||||
margin-inline-end: calc(-1 * var(--sp2)); |
|
||||||
|
|
||||||
&:focus { |
|
||||||
border: 0; |
|
||||||
outline: 0; |
|
||||||
|
|
||||||
& .icon--menu-toggle { |
|
||||||
border: solid 2px var(--color--primary-40); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&:active { |
|
||||||
/* Necessary for Safari. */ |
|
||||||
color: currentColor; |
|
||||||
} |
|
||||||
|
|
||||||
&[aria-expanded="true"] .icon--menu-toggle::after { |
|
||||||
opacity: 0.8; |
|
||||||
} |
|
||||||
|
|
||||||
& .icon--menu-toggle { |
|
||||||
inset-inline-start: 3px; |
|
||||||
width: 18px; |
|
||||||
transform: translateY(-50%); |
|
||||||
border-radius: 4px; |
|
||||||
background-color: var(--color--white); |
|
||||||
|
|
||||||
&::before { |
|
||||||
content: none; |
|
||||||
} |
|
||||||
|
|
||||||
&::after { |
|
||||||
/* stylelint-disable csstools/use-logical */ |
|
||||||
top: calc(50% - 2px); |
|
||||||
left: 3px; |
|
||||||
/* stylelint-enable csstools/use-logical */ |
|
||||||
width: 8px; |
|
||||||
height: 8px; |
|
||||||
content: ""; |
|
||||||
transform: translateY(-50%) rotate(45deg); |
|
||||||
opacity: 0.8; |
|
||||||
/* Intentionally not using CSS logical properties. */ |
|
||||||
border-top: none; |
|
||||||
border-right: solid 2px currentColor; |
|
||||||
border-bottom: solid 2px currentColor; |
|
||||||
background: transparent; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,150 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Styles for primary navigation when JavaScript is disabled. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
:root { |
|
||||||
--no-js-nav-column-width: 300px; |
|
||||||
--no-js-nav-column-gap: var(--sp2); |
|
||||||
} |
|
||||||
|
|
||||||
html:not(.js) { |
|
||||||
/** |
|
||||||
* Mobile styles for primary navigation when JS is disabled. |
|
||||||
*/ |
|
||||||
@media (--max-nav) { |
|
||||||
& .primary-nav__menu--level-1 { |
|
||||||
column-width: var(--no-js-nav-column-width); |
|
||||||
column-gap: var(--no-js-nav-column-gap); |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__menu-item { |
|
||||||
break-inside: avoid; |
|
||||||
} |
|
||||||
|
|
||||||
& .site-header__inner__container { |
|
||||||
flex-wrap: wrap; |
|
||||||
} |
|
||||||
|
|
||||||
& .mobile-buttons { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
& .header-nav { |
|
||||||
position: static; |
|
||||||
visibility: visible; |
|
||||||
flex-basis: 100%; |
|
||||||
width: 100%; |
|
||||||
max-width: none; |
|
||||||
margin-block: var(--sp2) 0; |
|
||||||
margin-inline-start: var(--sp2); |
|
||||||
margin-inline-end: var(--sp2); |
|
||||||
padding-block: var(--sp2) 0; |
|
||||||
padding-inline-start: var(--sp2); |
|
||||||
padding-inline-end: var(--sp2); |
|
||||||
transform: none; |
|
||||||
border: solid 1px var(--color--gray-95) !important; |
|
||||||
box-shadow: 0 0 36px var(--color--gray-90); |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__menu--level-2 { |
|
||||||
border-inline-start: 0; |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__button-toggle { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__menu-link--button.primary-nav__menu-link--has-children { |
|
||||||
&::before, |
|
||||||
&::after { |
|
||||||
content: none; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
/** |
|
||||||
* Styles for 'always on mobile navigation' when JS is disabled. |
|
||||||
*/ |
|
||||||
& body.is-always-mobile-nav { |
|
||||||
& .primary-nav__menu--level-1 { |
|
||||||
column-width: var(--no-js-nav-column-width); |
|
||||||
column-gap: var(--no-js-nav-column-gap); |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__menu-item { |
|
||||||
break-inside: avoid; |
|
||||||
} |
|
||||||
|
|
||||||
& .site-header__inner__container { |
|
||||||
flex-wrap: wrap; |
|
||||||
} |
|
||||||
|
|
||||||
& .mobile-buttons { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
& .header-nav { |
|
||||||
position: static; |
|
||||||
visibility: visible; |
|
||||||
flex-basis: 100%; |
|
||||||
width: 100%; |
|
||||||
max-width: none; |
|
||||||
margin-block: var(--sp2) 0; |
|
||||||
margin-inline-start: var(--sp2); |
|
||||||
margin-inline-end: var(--sp2); |
|
||||||
padding-block: var(--sp2) 0; |
|
||||||
padding-inline-start: var(--sp2); |
|
||||||
padding-inline-end: var(--sp2); |
|
||||||
transform: none; |
|
||||||
border: solid 1px var(--color--gray-95) !important; |
|
||||||
box-shadow: 0 0 36px var(--color--gray-90); |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__menu--level-2 { |
|
||||||
border-inline-start: 0; |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__button-toggle { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__menu-link--button.primary-nav__menu-link--has-children { |
|
||||||
&::before, |
|
||||||
&::after { |
|
||||||
content: none; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Styles for traditional dropdown primary navigation when JS is disabled. |
|
||||||
*/ |
|
||||||
& body:not(.is-always-mobile-nav) { |
|
||||||
& .primary-nav__menu-item--level-1:hover { |
|
||||||
& .primary-nav__menu--level-2, |
|
||||||
& .primary-nav__menu-🥕 { |
|
||||||
visibility: visible; |
|
||||||
transform: translate(-50%, 0); |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
* Cannot combine the focus-within pseudo selector with other selectors, |
|
||||||
* because it will break IE11 and earlier versions of MS Edge. |
|
||||||
*/ |
|
||||||
& .primary-nav__menu-item--level-1:focus-within { |
|
||||||
& .primary-nav__menu--level-2, |
|
||||||
& .primary-nav__menu-🥕 { |
|
||||||
visibility: visible; |
|
||||||
transform: translate(-50%, 0); |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,225 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Nav Primary (wide widths). |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
body:not(.is-always-mobile-nav) { |
|
||||||
@media (--nav) { |
|
||||||
& .primary-nav__menu-item { |
|
||||||
flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */ |
|
||||||
|
|
||||||
&.primary-nav__menu-item--has-children { |
|
||||||
& .primary-nav__menu-link--link, |
|
||||||
& .primary-nav__menu-link--nolink { |
|
||||||
flex-basis: auto; |
|
||||||
} |
|
||||||
|
|
||||||
/* Remove hover state if submenu exists. */ |
|
||||||
& .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner::after { |
|
||||||
content: none; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__menu-link { |
|
||||||
letter-spacing: 0.02em; |
|
||||||
font-size: 16px; |
|
||||||
line-height: var(--sp1-5); |
|
||||||
|
|
||||||
&:focus { |
|
||||||
position: relative; |
|
||||||
outline: 0; |
|
||||||
|
|
||||||
&::before { |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
left: 50%; |
|
||||||
width: calc(100% + var(--sp)); |
|
||||||
height: var(--sp3); |
|
||||||
content: ""; |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
border: solid 2px var(--color--primary-50); |
|
||||||
border-radius: 4px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__menu-link--button { |
|
||||||
&.primary-nav__menu-link--has-children { |
|
||||||
overflow: visible; /* Necessary to view icon in IE11 */ |
|
||||||
padding-inline-end: 9px; |
|
||||||
|
|
||||||
&:focus::before { |
|
||||||
width: calc(100% + var(--sp1-5)); |
|
||||||
content: ""; |
|
||||||
} |
|
||||||
|
|
||||||
&::before { |
|
||||||
content: none; |
|
||||||
} |
|
||||||
|
|
||||||
/* Chevron icon for desktop navigation. */ |
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
inset-block-start: 50%; |
|
||||||
inset-inline-start: calc(100% - 3px); |
|
||||||
width: 8px; |
|
||||||
height: 8px; |
|
||||||
margin-block-start: -2px; |
|
||||||
transform: translateY(-50%) rotate(45deg); |
|
||||||
/* Intentionally not using CSS logical properties. */ |
|
||||||
border-top: 0; |
|
||||||
border-right: solid 2px currentColor; |
|
||||||
border-bottom: solid 2px currentColor; |
|
||||||
} |
|
||||||
|
|
||||||
&[aria-expanded="true"]::after { |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__menu-link-inner { |
|
||||||
padding-block: var(--sp2); |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
|
|
||||||
&::after { |
|
||||||
transform-origin: center; |
|
||||||
border-top-width: var(--sp0-5); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__menu--level-1 { |
|
||||||
display: flex; |
|
||||||
align-items: stretch; |
|
||||||
margin-inline-end: var(--sp); |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__menu-item--level-1 { |
|
||||||
position: relative; /* Anchor secondary menu */ |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
width: max-content; |
|
||||||
max-width: 200px; |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
|
|
||||||
&:not(:last-child) { |
|
||||||
margin-inline-end: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__menu--level-2 { |
|
||||||
position: absolute; |
|
||||||
z-index: 105; /* Appear above search container. */ |
|
||||||
top: calc(100% - (0.5 * var(--sp))); |
|
||||||
left: 50%; |
|
||||||
visibility: hidden; |
|
||||||
overflow: auto; |
|
||||||
width: 250px; |
|
||||||
/* Ensure that long level-2 menus will never overflow viewport (focused |
|
||||||
* elements should always be in viewport per accessibility guidelines). */ |
|
||||||
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp)); |
|
||||||
margin-block-start: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
padding-block: calc(3 * var(--sp)); |
|
||||||
padding-inline-start: var(--sp2); |
|
||||||
padding-inline-end: var(--sp2); |
|
||||||
transition: none; |
|
||||||
transform: translate(-50%, -20px); |
|
||||||
opacity: 0; |
|
||||||
/* Intentionally not using CSS logical properties. */ |
|
||||||
border-top: solid var(--color--primary-50) var(--sp0-5); |
|
||||||
border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */ |
|
||||||
border-bottom: solid 1px transparent; |
|
||||||
border-left: solid 1px transparent; |
|
||||||
border-radius: 0 0 2px 2px; |
|
||||||
background: var(--color--white); |
|
||||||
box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08); |
|
||||||
|
|
||||||
&.is-active-menu-parent { |
|
||||||
visibility: visible; |
|
||||||
margin-block-start: 0; |
|
||||||
transform: translate(-50%, 0); |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__menu-link--level-2 { |
|
||||||
display: block; |
|
||||||
|
|
||||||
&:focus::before { |
|
||||||
top: 0; |
|
||||||
left: calc(var(--sp0-5) * -1); |
|
||||||
height: 100%; |
|
||||||
transform: none; |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-nav__menu-link-inner { |
|
||||||
padding-block: var(--sp0-5); |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
|
|
||||||
&::after { |
|
||||||
transform-origin: left; /* LTR */ |
|
||||||
border-top-width: 3px; |
|
||||||
|
|
||||||
&:dir(rtl) { |
|
||||||
transform-origin: right; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Arrow is placed outside of submenu because the submenu has the |
|
||||||
* `overflow: hidden` CSS rule applied. |
|
||||||
*/ |
|
||||||
& .primary-nav__menu-🥕 { |
|
||||||
position: absolute; |
|
||||||
z-index: 105; /* Match level 2 menus. */ |
|
||||||
top: calc(100% - var(--sp)); |
|
||||||
left: 50%; |
|
||||||
visibility: hidden; |
|
||||||
width: 0; |
|
||||||
height: 0; |
|
||||||
transform: translate(-50%, -20px); |
|
||||||
opacity: 0; |
|
||||||
/* Intentionally not using CSS logical properties. */ |
|
||||||
border-right: solid 10px transparent; |
|
||||||
border-bottom: solid 10px var(--color--primary-50); |
|
||||||
border-left: solid 10px transparent; |
|
||||||
|
|
||||||
&.is-active-menu-parent { |
|
||||||
visibility: visible; |
|
||||||
transform: translate(-50%, 0); |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* When ensuring that long menus don't overflow viewport, we can give a |
|
||||||
* little extra room when the toolbar is fixed (and is shorter). |
|
||||||
*/ |
|
||||||
& .is-fixed .primary-nav__menu--level-2 { |
|
||||||
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp) + var(--sp4)); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
* Only apply transition styles to menu when JS is loaded. This |
|
||||||
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189 |
|
||||||
*/ |
|
||||||
html.js body:not(.is-always-mobile-nav) { |
|
||||||
@media (--nav) { |
|
||||||
& .primary-nav__menu--level-2, |
|
||||||
& .primary-nav__menu-🥕 { |
|
||||||
transition: visibility 0.2s, transform 0.2s, opacity 0.2s; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,201 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Nav Primary. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.primary-nav__menu { |
|
||||||
flex-wrap: wrap; |
|
||||||
list-style: none; |
|
||||||
} |
|
||||||
|
|
||||||
.primary-nav__menu-item { |
|
||||||
margin-block-end: var(--sp0-5); |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
margin-block-end: 0; |
|
||||||
} |
|
||||||
|
|
||||||
&.primary-nav__menu-item--has-children { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
justify-content: space-between; |
|
||||||
|
|
||||||
& .primary-nav__menu-link--link, |
|
||||||
& .primary-nav__menu-link--nolink { |
|
||||||
/* Ensure that long text doesn't make the mobile expand button wrap. */ |
|
||||||
flex-basis: calc(100% - var(--sp3)); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.primary-nav__menu-link { |
|
||||||
flex-grow: 1; |
|
||||||
text-decoration: none; |
|
||||||
color: var(--color-text-neutral-loud); |
|
||||||
font-size: 28px; |
|
||||||
font-weight: bold; |
|
||||||
line-height: var(--sp2); |
|
||||||
|
|
||||||
&:hover { |
|
||||||
color: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline: auto 2px var(--color--primary-50); |
|
||||||
outline-offset: 2px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.primary-nav__menu-link--nolink { |
|
||||||
padding-block: var(--sp0-5); |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
color: var(--color-text-neutral-soft); |
|
||||||
font-weight: normal; |
|
||||||
} |
|
||||||
|
|
||||||
.primary-nav__menu-link--button { |
|
||||||
position: relative; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
cursor: pointer; |
|
||||||
text-align: start; |
|
||||||
border: 0; |
|
||||||
background: transparent; |
|
||||||
|
|
||||||
/* Plus icon for mobile navigation. */ |
|
||||||
&.primary-nav__menu-link--has-children { |
|
||||||
padding-inline-end: var(--sp3); /* Ensure text does not overlap icon. */ |
|
||||||
|
|
||||||
&::before, |
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
inset-inline-end: 9px; |
|
||||||
inset-block-start: calc(var(--sp0-5) + 17px); /* Visually align button with menu link text. */ |
|
||||||
width: 18px; |
|
||||||
height: 0; |
|
||||||
content: ""; |
|
||||||
/* Intentionally not using CSS logical properties. */ |
|
||||||
border-top: solid 3px var(--color--primary-50); |
|
||||||
} |
|
||||||
|
|
||||||
&::after { |
|
||||||
transition: opacity 0.2s; |
|
||||||
transform: rotate(90deg); |
|
||||||
} |
|
||||||
|
|
||||||
&[aria-expanded="true"]::after { |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.primary-nav__menu-link-inner { |
|
||||||
position: relative; |
|
||||||
display: inline-flex; |
|
||||||
align-items: center; |
|
||||||
padding-block: var(--sp0-5); |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
|
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
inset-block-end: 0; |
|
||||||
inset-inline-start: 0; |
|
||||||
width: 100%; |
|
||||||
height: 0; |
|
||||||
content: ""; |
|
||||||
transition: transform 0.2s; |
|
||||||
transform: scaleX(0); |
|
||||||
transform-origin: left; |
|
||||||
/* Intentionally not using CSS logical properties. */ |
|
||||||
border-top: solid 5px var(--color--primary-50); |
|
||||||
} |
|
||||||
|
|
||||||
&::after { |
|
||||||
@nest .primary-nav__menu-link:hover & { |
|
||||||
transform: scaleX(1); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Top level specific styles. |
|
||||||
*/ |
|
||||||
.primary-nav__menu--level-1 { |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.primary-nav__menu-link--level-1 { |
|
||||||
position: relative; |
|
||||||
display: flex; |
|
||||||
letter-spacing: -1px; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Secondary menu specific styles. |
|
||||||
*/ |
|
||||||
.primary-nav__menu--level-2 { |
|
||||||
visibility: hidden; |
|
||||||
overflow: hidden; |
|
||||||
flex-basis: 100%; |
|
||||||
max-height: 0; |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: calc(-1 * var(--sp)); |
|
||||||
padding-inline-start: var(--sp2-5); |
|
||||||
transition: opacity 0.2s, visibility 0.2s, max-height 0.2s; |
|
||||||
opacity: 0; |
|
||||||
border-inline-start: solid var(--sp) var(--color--primary-50); |
|
||||||
|
|
||||||
&.is-active-menu-parent { |
|
||||||
visibility: visible; |
|
||||||
max-height: none; |
|
||||||
margin-block-start: var(--sp1-5); |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
margin-inline-start: calc(-1 * var(--sp3)); |
|
||||||
padding-inline-start: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
* Oliveskln doesn't officially support nested tertiary submenus, but this |
|
||||||
* ensures that it doesn't break all the way. |
|
||||||
* |
|
||||||
* @see https://www.drupal.org/project/drupal/issues/3221399 |
|
||||||
*/ |
|
||||||
.primary-nav__menu--level-2 .primary-nav__menu-item--has-children { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
.primary-nav__menu-link--level-2 { |
|
||||||
font-size: 16px; |
|
||||||
font-weight: normal; |
|
||||||
line-height: var(--sp); |
|
||||||
} |
|
||||||
|
|
||||||
html:not(.js) { |
|
||||||
& .primary-nav__menu--level-2 { |
|
||||||
visibility: visible; |
|
||||||
max-height: none; |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] { |
|
||||||
& .primary-nav__menu-link-inner { |
|
||||||
&::after { |
|
||||||
transform-origin: right; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,114 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Secondary navigation styling. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.secondary-nav { |
|
||||||
letter-spacing: 0.02em; |
|
||||||
font-size: var(--font-size-s); |
|
||||||
font-weight: 600; |
|
||||||
} |
|
||||||
|
|
||||||
.secondary-nav__menu { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
list-style: none; |
|
||||||
} |
|
||||||
|
|
||||||
.secondary-nav__menu-item { |
|
||||||
/* Parent element is set to flex-basis: 0. We |
|
||||||
* don't want text to wrap unless it goes over a |
|
||||||
* certain arbitrary width. |
|
||||||
*/ |
|
||||||
|
|
||||||
/* @todo should this be scoped to desktop nav? */ |
|
||||||
width: max-content; |
|
||||||
max-width: 200px; |
|
||||||
|
|
||||||
&:not(:last-child) { |
|
||||||
margin-inline-end: var(--sp1-5); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.secondary-nav__menu-link { |
|
||||||
position: relative; |
|
||||||
display: inline-flex; |
|
||||||
align-items: center; |
|
||||||
height: var(--sp2); |
|
||||||
text-decoration: none; |
|
||||||
color: inherit; |
|
||||||
|
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
bottom: 0; |
|
||||||
left: 0; |
|
||||||
width: 100%; |
|
||||||
height: 0; |
|
||||||
content: ""; |
|
||||||
transition: opacity 0.2s, transform 0.2s; |
|
||||||
transform: translateY(5px); |
|
||||||
opacity: 0; |
|
||||||
/* Intentionally not using CSS logical properties. */ |
|
||||||
border-top: solid 2px currentColor; |
|
||||||
} |
|
||||||
|
|
||||||
&:hover { |
|
||||||
&::after { |
|
||||||
transform: translateY(0); |
|
||||||
opacity: 0.8; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
body:not(.is-always-mobile-nav) { |
|
||||||
@media (--nav) { |
|
||||||
& .secondary-nav { |
|
||||||
position: relative; |
|
||||||
display: flex; |
|
||||||
margin-inline-start: var(--sp); |
|
||||||
padding-inline-start: var(--sp2); |
|
||||||
|
|
||||||
&::before { |
|
||||||
position: absolute; |
|
||||||
inset-block-start: 50%; |
|
||||||
inset-inline-start: 0; |
|
||||||
width: 2px; |
|
||||||
height: var(--sp2); |
|
||||||
content: ""; |
|
||||||
transform: translateY(-50%); |
|
||||||
background-color: var(--color--gray-90); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .secondary-nav__menu-item:not(:last-child) { |
|
||||||
margin-inline-end: var(--sp2); |
|
||||||
} |
|
||||||
|
|
||||||
& .secondary-nav__menu-link { |
|
||||||
&:focus { |
|
||||||
position: relative; |
|
||||||
outline: 0; |
|
||||||
|
|
||||||
&::before { |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
left: 50%; |
|
||||||
width: calc(100% + var(--sp)); |
|
||||||
height: var(--sp3); |
|
||||||
content: ""; |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
border: solid 2px var(--color--primary-50); |
|
||||||
border-radius: 4px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,109 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Button which expands the navigation at wide viewport widths. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.wide-nav-expand { |
|
||||||
display: none; |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
display: flex; |
|
||||||
visibility: hidden; |
|
||||||
flex-shrink: 0; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
width: var(--content-left); |
|
||||||
height: var(--sp6); |
|
||||||
cursor: pointer; |
|
||||||
pointer-events: auto; |
|
||||||
color: var(--color--white); |
|
||||||
border: 0; |
|
||||||
background-color: var(--color--primary-50); |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline: solid 2px currentColor; |
|
||||||
outline-offset: -4px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
body:not(.is-always-mobile-nav) .is-fixed .wide-nav-expand { |
|
||||||
@media (--nav) { |
|
||||||
visibility: visible; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
body.is-always-mobile-nav .wide-nav-expand { |
|
||||||
@media (--nav) { |
|
||||||
visibility: hidden; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.wide-nav-expand__icon { |
|
||||||
position: relative; |
|
||||||
width: var(--sp2); |
|
||||||
height: 21px; |
|
||||||
transition: opacity 0.2s; |
|
||||||
pointer-events: none; |
|
||||||
opacity: 0; |
|
||||||
transform-style: preserve-3d; |
|
||||||
|
|
||||||
& > span { |
|
||||||
display: block; |
|
||||||
height: 0; |
|
||||||
/* Intentionally not using CSS logical properties. */ |
|
||||||
border-top: solid 3px currentColor; |
|
||||||
|
|
||||||
&:nth-child(1) { |
|
||||||
position: absolute; |
|
||||||
inset-block-start: 0; |
|
||||||
inset-inline-start: 0; |
|
||||||
width: 100%; |
|
||||||
height: 0; |
|
||||||
transition: transform 0.2s; |
|
||||||
background-color: currentColor; |
|
||||||
} |
|
||||||
|
|
||||||
&:nth-child(2) { |
|
||||||
position: absolute; |
|
||||||
inset-block-start: 9px; |
|
||||||
inset-inline-start: 0; |
|
||||||
width: 100%; |
|
||||||
height: 0; |
|
||||||
transition: opacity 0.2s; |
|
||||||
background-color: currentColor; |
|
||||||
} |
|
||||||
|
|
||||||
&:nth-child(3) { |
|
||||||
position: absolute; |
|
||||||
inset-block: auto 0; |
|
||||||
inset-inline-start: 0; |
|
||||||
width: 100%; |
|
||||||
height: 0; |
|
||||||
transition: transform 0.2s; |
|
||||||
background-color: currentColor; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.is-fixed .wide-nav-expand__icon { |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
|
|
||||||
[aria-expanded="true"] .wide-nav-expand__icon { |
|
||||||
& > span:nth-child(1) { |
|
||||||
inset-block-start: 9px; |
|
||||||
transform: rotate(-45deg); |
|
||||||
} |
|
||||||
|
|
||||||
& > span:nth-child(2) { |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
|
|
||||||
& > span:nth-child(3) { |
|
||||||
inset-block-start: 9px; |
|
||||||
transform: rotate(45deg); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,27 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Styles for action links. |
|
||||||
*/ |
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.action-links { |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
list-style: none; |
|
||||||
|
|
||||||
& li { |
|
||||||
display: inline-block; |
|
||||||
|
|
||||||
& a { |
|
||||||
color: var(--color-text-primary-medium); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.action-links-item { |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
@ -1,102 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Visual styles for ajax-progress throbber. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.ajax-progress { |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Throbber. |
|
||||||
*/ |
|
||||||
.ajax-progress-throbber { |
|
||||||
position: relative; |
|
||||||
display: inline-flex; |
|
||||||
align-content: center; |
|
||||||
height: 1.125rem; |
|
||||||
margin-block-start: -3px; |
|
||||||
margin-block-end: 0; |
|
||||||
margin-inline-start: var(--sp0-5); |
|
||||||
margin-inline-end: var(--sp0-5); |
|
||||||
vertical-align: middle; |
|
||||||
white-space: nowrap; |
|
||||||
line-height: 1.125rem; |
|
||||||
} |
|
||||||
|
|
||||||
.ajax-progress-throbber .throbber { |
|
||||||
width: 1.125rem; |
|
||||||
height: 1.125rem; |
|
||||||
border-width: 2px; |
|
||||||
border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50); |
|
||||||
} |
|
||||||
|
|
||||||
.ajax-progress-throbber .message { |
|
||||||
display: inline-block; |
|
||||||
padding-inline-start: var(--sp0-5); |
|
||||||
font-size: var(--font-size-s); |
|
||||||
font-weight: 400; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Full screen throbber. |
|
||||||
*/ |
|
||||||
.ajax-progress-fullscreen { |
|
||||||
position: fixed; |
|
||||||
z-index: 1000; |
|
||||||
inset-block-start: 50%; |
|
||||||
inset-inline-start: 50%; |
|
||||||
width: 3.5rem; |
|
||||||
height: 3.5rem; |
|
||||||
margin: -1.75rem; |
|
||||||
border: 1px solid var(--color--gray-70); |
|
||||||
border-radius: 3.5rem; |
|
||||||
background-color: var(--color--white); |
|
||||||
box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */ |
|
||||||
|
|
||||||
&::before { |
|
||||||
position: absolute; |
|
||||||
inset-block-start: 50%; |
|
||||||
inset-inline-start: 50%; |
|
||||||
width: 1.75rem; |
|
||||||
height: 1.75rem; |
|
||||||
margin: -0.875rem; |
|
||||||
content: ""; |
|
||||||
border-width: 3px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .ajax-progress-fullscreen { |
|
||||||
box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1); |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Common styles for all kinds of throbbers. |
|
||||||
*/ |
|
||||||
.ajax-progress-throbber .throbber, |
|
||||||
.ajax-progress-fullscreen::before { |
|
||||||
animation: oliveskln-throbber 0.75s linear infinite; |
|
||||||
border-style: solid dotted solid solid; |
|
||||||
border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50); |
|
||||||
border-radius: 50%; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Remove margin from ajax throbbers following buttons because buttons already |
|
||||||
* have a large margin set. |
|
||||||
*/ |
|
||||||
html.js .button:not(.js-hide) + .ajax-progress-throbber { |
|
||||||
margin-inline-start: 0; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes oliveskln-throbber { |
|
||||||
0% { |
|
||||||
transform: rotateZ(0); |
|
||||||
} |
|
||||||
|
|
||||||
100% { |
|
||||||
transform: rotateZ(360deg); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,26 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Visual styles for autocomplete input field. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
[type].form-autocomplete { |
|
||||||
padding-inline-end: var(--sp3); |
|
||||||
background-color: var(--color--white); |
|
||||||
background-image: url("../../images/magnifying-glass.svg"); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: right var(--sp1) center; /* LTR */ |
|
||||||
|
|
||||||
&:disabled { |
|
||||||
background-color: var(--color--gray-100); |
|
||||||
} |
|
||||||
|
|
||||||
&.ui-autocomplete-loading { |
|
||||||
background-image: url("../../images/throbber.svg"); |
|
||||||
} |
|
||||||
|
|
||||||
&:dir(rtl) { |
|
||||||
background-position: left var(--sp1) center; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Block styling. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.block__title { |
|
||||||
margin-block: 0 var(--sp); |
|
||||||
letter-spacing: 0.02em; |
|
||||||
color: var(--color-text-neutral-soft); |
|
||||||
font-size: var(--font-size-s); |
|
||||||
line-height: var(--sp); |
|
||||||
} |
|
||||||
|
|
||||||
.site-footer .block__title { |
|
||||||
color: var(--color--gray-65); |
|
||||||
} |
|
||||||
@ -1,104 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Book module styling. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.book-pager { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
margin-block-start: 0 var(--sp); |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-block: 0 var(--sp); |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
list-style: none; |
|
||||||
border-block-end: solid 1px var(--color--primary-40); |
|
||||||
} |
|
||||||
|
|
||||||
.book-pager__item { |
|
||||||
display: inline-block; |
|
||||||
|
|
||||||
@media (--sm) { |
|
||||||
flex: 0 0 33.33%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.book-pager__item--center { |
|
||||||
@media (--sm) { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.book-pager__item--next { |
|
||||||
@media (--sm) { |
|
||||||
margin-inline-start: auto; |
|
||||||
text-align: end; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.book-pager__link { |
|
||||||
display: inline-flex; |
|
||||||
align-items: center; |
|
||||||
text-decoration: none; |
|
||||||
color: var(--color-text-primary-medium); |
|
||||||
font-family: var(--font-serif); |
|
||||||
font-size: 18px; |
|
||||||
font-weight: 600; |
|
||||||
} |
|
||||||
|
|
||||||
.book-pager__link--previous { |
|
||||||
&::before { |
|
||||||
display: block; |
|
||||||
width: var(--sp0-5); |
|
||||||
height: var(--sp0-5); |
|
||||||
margin-inline-end: 0.25em; |
|
||||||
content: ""; |
|
||||||
transform: rotate(-45deg); |
|
||||||
border-block-start: solid 3px currentColor; |
|
||||||
border-inline-start: solid 3px currentColor; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.book-pager__link--next { |
|
||||||
&::after { |
|
||||||
display: block; |
|
||||||
width: var(--sp0-5); |
|
||||||
height: var(--sp0-5); |
|
||||||
margin-inline-start: 0.25em; |
|
||||||
content: ""; |
|
||||||
transform: rotate(135deg); |
|
||||||
border-block-start: solid 3px currentColor; |
|
||||||
border-inline-start: solid 3px currentColor; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.book-navigation__menu { |
|
||||||
margin-block: var(--sp2); |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
list-style: none; |
|
||||||
} |
|
||||||
|
|
||||||
.book-navigation__item { |
|
||||||
margin-block: 0; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
list-style: none; |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] { |
|
||||||
& .book-pager__link--previous::before { |
|
||||||
transform: rotate(45deg); |
|
||||||
} |
|
||||||
|
|
||||||
& .book-pager__link--next::after { |
|
||||||
transform: rotate(-135deg); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,111 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Breadcrumb region. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.breadcrumb { |
|
||||||
position: relative; |
|
||||||
font-size: 14px; |
|
||||||
font-weight: bold; |
|
||||||
line-height: var(--sp1); |
|
||||||
|
|
||||||
/* Shadow on the right side of breadcrumbs for narrow screens. */ |
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
inset-block-start: 0; |
|
||||||
inset-inline-end: calc(var(--sp1) * -1); |
|
||||||
width: var(--sp3); |
|
||||||
height: var(--sp2); |
|
||||||
content: ""; |
|
||||||
background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); /* LTR */ |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
content: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
position: static; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .breadcrumb::after { |
|
||||||
background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); |
|
||||||
} |
|
||||||
|
|
||||||
.breadcrumb__content { |
|
||||||
overflow: auto; |
|
||||||
margin-block-start: calc(var(--sp0-5) * -1); |
|
||||||
margin-block-end: calc(var(--sp0-5) * -1); |
|
||||||
margin-inline-start: calc(var(--sp0-5) * -1); |
|
||||||
margin-inline-end: calc(var(--sp1) * -1); |
|
||||||
padding-block-start: var(--sp0-5); |
|
||||||
padding-block-end: var(--sp0-5); |
|
||||||
padding-inline-start: var(--sp0-5); |
|
||||||
-webkit-overflow-scrolling: touch; |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
margin-inline-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.breadcrumb__list { |
|
||||||
overflow-x: auto; |
|
||||||
width: max-content; |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: calc(var(--sp1) * -1); |
|
||||||
margin-inline-end: calc(var(--sp1) * -1); |
|
||||||
padding-block: 0 var(--sp1); |
|
||||||
padding-inline-start: var(--sp1); |
|
||||||
padding-inline-end: 0; |
|
||||||
list-style: none; |
|
||||||
white-space: nowrap; |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
overflow: visible; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-block-end: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
white-space: normal; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.breadcrumb__item { |
|
||||||
display: inline-block; |
|
||||||
|
|
||||||
&:nth-child(n+2)::before { |
|
||||||
display: inline-block; |
|
||||||
width: 8px; |
|
||||||
height: 8px; |
|
||||||
margin-inline: 16px 20px; |
|
||||||
content: ""; |
|
||||||
transform: rotate(45deg); /* LTR */ |
|
||||||
border-block-start: 2px solid var(--color--gray-45); |
|
||||||
border-inline-end: 2px solid var(--color--gray-45); |
|
||||||
} |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
margin-inline-end: var(--sp3); |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
margin-inline-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .breadcrumb__item:nth-child(n+2)::before { |
|
||||||
transform: rotate(-45deg); |
|
||||||
} |
|
||||||
|
|
||||||
.breadcrumb__link { |
|
||||||
text-decoration: none; |
|
||||||
color: var(--color-text-primary-medium); |
|
||||||
|
|
||||||
&:hover, |
|
||||||
&:focus { |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,131 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Buttons. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.button { |
|
||||||
display: inline-block; |
|
||||||
height: var(--sp3); |
|
||||||
margin-block: var(--sp1); |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: var(--sp1); |
|
||||||
padding-block: calc((var(--sp3) - var(--line-height-s)) / 2); |
|
||||||
padding-inline: var(--sp1-5); |
|
||||||
cursor: pointer; |
|
||||||
text-align: center; |
|
||||||
text-decoration: none; |
|
||||||
color: var(--color-text-primary-medium); |
|
||||||
border: solid 2px currentColor; |
|
||||||
border-radius: var(--border-radius); |
|
||||||
background-color: var(--color--white); |
|
||||||
font-family: var(--font-sans); |
|
||||||
font-size: var(--font-size-l); |
|
||||||
font-weight: 700; |
|
||||||
appearance: none; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
|
|
||||||
&:hover, |
|
||||||
&:focus { |
|
||||||
text-decoration: none; |
|
||||||
color: var(--color-text-primary-loud); |
|
||||||
border: solid 2px currentColor; |
|
||||||
background: none; |
|
||||||
font-weight: 700; |
|
||||||
} |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline: 2px solid var(--color--primary-60); |
|
||||||
outline-offset: 2px; |
|
||||||
} |
|
||||||
|
|
||||||
&:active { |
|
||||||
color: var(--color-text-primary-medium); |
|
||||||
border-color: currentColor; |
|
||||||
} |
|
||||||
|
|
||||||
&:disabled, |
|
||||||
&.is-disabled { |
|
||||||
cursor: default; |
|
||||||
color: var(--color--gray-90); |
|
||||||
border-color: var(--color--gray-90); |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
IE11 doesn't work properly on button elements so we only do |
|
||||||
inline-flex on modern browsers. |
|
||||||
*/ |
|
||||||
@supports (display: inline-flex) { |
|
||||||
display: inline-flex; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
/* Top padding accounts for font not being vertically centered within line-height. */ |
|
||||||
padding-block: 1px 0; |
|
||||||
padding-inline: var(--sp1-5); |
|
||||||
line-height: var(--line-height-s); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* No margin if is part of a menu. */ |
|
||||||
.menu .button { |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.button--small { |
|
||||||
height: var(--sp2-5); |
|
||||||
padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2); |
|
||||||
padding-inline: var(--sp); |
|
||||||
font-size: var(--font-size-base); |
|
||||||
line-height: normal; |
|
||||||
} |
|
||||||
|
|
||||||
.button--primary { |
|
||||||
color: var(--color--white); |
|
||||||
border-color: var(--color--primary-40); |
|
||||||
background-color: var(--color--primary-40); |
|
||||||
|
|
||||||
&:hover, |
|
||||||
&:focus { |
|
||||||
color: var(--color--white); |
|
||||||
border-color: var(--color--primary-30); |
|
||||||
background-color: var(--color--primary-30); |
|
||||||
} |
|
||||||
|
|
||||||
&:active { |
|
||||||
color: var(--color--white); |
|
||||||
background-color: var(--color--primary-40); |
|
||||||
} |
|
||||||
|
|
||||||
&:disabled, |
|
||||||
&.is-disabled { |
|
||||||
color: var(--color--white); |
|
||||||
background-color: var(--color--gray-90); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.button--icon-back { |
|
||||||
display: inline-flex; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
&::before { |
|
||||||
display: block; |
|
||||||
width: 0.5em; |
|
||||||
height: 0.5em; |
|
||||||
margin-inline-end: 0.5em; |
|
||||||
content: ""; |
|
||||||
transform: rotate(45deg); /* LTR */ |
|
||||||
border-block-end: solid 2px currentColor; |
|
||||||
border-inline-start: solid 2px currentColor; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .button--icon-back::before { |
|
||||||
transform: rotate(-45deg); |
|
||||||
} |
|
||||||
|
|
||||||
.shepherd-cancel-icon { |
|
||||||
font-size: 1.5em; |
|
||||||
} |
|
||||||
@ -1,8 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* CKE Dialogs. |
|
||||||
*/ |
|
||||||
|
|
||||||
select.cke_dialog_ui_input_select { |
|
||||||
appearance: menulist; |
|
||||||
} |
|
||||||
@ -1,11 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Color picker styles. These appear within theme settings when selecting a custom color. |
|
||||||
*/ |
|
||||||
|
|
||||||
[data-drupal-selector="oliveskln-color-picker"] { |
|
||||||
& input[type="color"] { |
|
||||||
margin-left: 13px; |
|
||||||
vertical-align: bottom; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,233 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Comment section and individual comments. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
:root { |
|
||||||
--comment-indentation: var(--sp2); |
|
||||||
--comment-indentation--md: var(--sp4); |
|
||||||
} |
|
||||||
|
|
||||||
.comment--level-1 { |
|
||||||
border-block-start: 2px solid var(--color--gray-95); |
|
||||||
|
|
||||||
& ~ .comment--level-1 { |
|
||||||
margin-block-start: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.comments__title { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
margin-block-start: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.comments__count { |
|
||||||
position: relative; |
|
||||||
display: inline-block; |
|
||||||
min-width: 34px; |
|
||||||
margin-block-start: 0; |
|
||||||
margin-block-end: var(--sp0-5); |
|
||||||
margin-inline-start: var(--sp); |
|
||||||
margin-inline-end: var(--sp); |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 5px; |
|
||||||
padding-inline-end: 5px; |
|
||||||
text-align: center; |
|
||||||
color: var(--color--white); |
|
||||||
border-radius: 2px; |
|
||||||
background-color: var(--color--primary-40); |
|
||||||
font-size: 11px; |
|
||||||
line-height: 21px; |
|
||||||
|
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
inset-block-end: -7px; |
|
||||||
inset-inline-start: 8px; |
|
||||||
width: 0; |
|
||||||
height: 0; |
|
||||||
content: ""; |
|
||||||
border-block-start: 7px solid var(--color--primary-40); |
|
||||||
border-inline-end: 8px solid transparent; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.comment-form { |
|
||||||
padding-block-end: var(--sp2); |
|
||||||
} |
|
||||||
|
|
||||||
.add-comment__form { |
|
||||||
padding-inline-start: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.comment { |
|
||||||
position: relative; |
|
||||||
padding-block-start: var(--sp2); |
|
||||||
padding-inline-start: var(--sp3); |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
padding-inline-start: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.comment__text-content { |
|
||||||
font-size: 16px; |
|
||||||
|
|
||||||
& blockquote { |
|
||||||
font-size: 21px; |
|
||||||
line-height: var(--sp2); |
|
||||||
} |
|
||||||
|
|
||||||
/* Override for .field:not(:last-child) */ |
|
||||||
&:not(:last-child) { |
|
||||||
margin-block-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.comment__links { |
|
||||||
margin-block: var(--sp) 0; |
|
||||||
} |
|
||||||
|
|
||||||
.comment__links-link { |
|
||||||
text-decoration: none; |
|
||||||
font-size: 14px; |
|
||||||
font-weight: bold; |
|
||||||
line-height: var(--sp); |
|
||||||
|
|
||||||
&:hover { |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.add-comment__picture-wrapper { |
|
||||||
inset-block-start: calc(var(--line-height-base) + var(--sp0-5)); |
|
||||||
} |
|
||||||
|
|
||||||
.add-comment__picture, |
|
||||||
.comment__picture { |
|
||||||
position: absolute; |
|
||||||
inset-inline-start: 0; |
|
||||||
overflow: hidden; |
|
||||||
width: var(--sp2); |
|
||||||
height: var(--sp2); |
|
||||||
border-radius: 50%; |
|
||||||
background-color: var(--color--gray-95); |
|
||||||
|
|
||||||
& *:not(img) { |
|
||||||
display: inherit; |
|
||||||
width: inherit; |
|
||||||
height: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
& img { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
object-fit: cover; |
|
||||||
|
|
||||||
/* @TODO: create image-style for profile's avatar to have image squared by default. */ |
|
||||||
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) { |
|
||||||
position: absolute; |
|
||||||
/* stylelint-disable csstools/use-logical */ |
|
||||||
top: 50%; |
|
||||||
left: 50%; |
|
||||||
/* stylelint-enable csstools/use-logical */ |
|
||||||
width: 100%; |
|
||||||
height: auto; |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
inset-inline-start: calc(-1 * var(--sp5)); |
|
||||||
width: var(--sp3); |
|
||||||
height: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.indented .comment__picture { |
|
||||||
@media (--grid-md) { |
|
||||||
inset-inline-start: calc(-1 * var(--sp4)); |
|
||||||
width: var(--sp2); |
|
||||||
height: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.comment__meta { |
|
||||||
& * { |
|
||||||
display: inline; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.comment__author { |
|
||||||
margin-inline-end: var(--sp); |
|
||||||
font-family: var(--font-sans); |
|
||||||
font-size: 16px; |
|
||||||
font-weight: 700; |
|
||||||
line-height: var(--sp); |
|
||||||
|
|
||||||
& a { |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.comment__time { |
|
||||||
margin: 0; |
|
||||||
color: var(--color-text-neutral-soft); |
|
||||||
font-family: var(--font-sans); |
|
||||||
font-size: 14px; |
|
||||||
line-height: var(--sp); |
|
||||||
} |
|
||||||
|
|
||||||
.indented { |
|
||||||
margin-inline-start: var(--comment-indentation); |
|
||||||
|
|
||||||
& > .comment:not(:last-of-type, .has-children)::before { |
|
||||||
position: absolute; |
|
||||||
inset-block-start: var(--sp2); |
|
||||||
inset-inline-start: calc(-1 * var(--comment-indentation) - var(--sp)); /* Comment's padding-top */ |
|
||||||
width: 0; |
|
||||||
height: 100%; |
|
||||||
content: ""; |
|
||||||
border-inline-start: solid 1px var(--color--gray-95); |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp)); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
margin-inline-start: var(--comment-indentation--md); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.show-hide-btn { |
|
||||||
margin-block-start: var(--sp2); |
|
||||||
margin-block-end: 0; |
|
||||||
margin-inline-start: var(--sp3); |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
cursor: pointer; |
|
||||||
color: var(--color-text-neutral-medium); |
|
||||||
border: 0; |
|
||||||
background: none; |
|
||||||
font-size: 14px; |
|
||||||
font-weight: 600; |
|
||||||
line-height: 18px; |
|
||||||
appearance: none; |
|
||||||
|
|
||||||
&[aria-expanded="true"]::after { |
|
||||||
content: "\0020 -"; |
|
||||||
} |
|
||||||
|
|
||||||
&[aria-expanded="false"]::after { |
|
||||||
content: "\0020 +"; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
margin-inline-start: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Inline items. |
|
||||||
*/ |
|
||||||
|
|
||||||
.container-inline div, |
|
||||||
.container-inline label { |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
.form-items-inline { |
|
||||||
margin-block: -0.125em; /* 2px */ |
|
||||||
} |
|
||||||
|
|
||||||
.form-items-inline > .form-item { |
|
||||||
display: inline-block; |
|
||||||
margin-block: 0.125em; |
|
||||||
} |
|
||||||
@ -1,67 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Styles for content moderation toolbar. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.entity-moderation-form { |
|
||||||
flex-direction: column; |
|
||||||
padding-inline-start: var(--sp); |
|
||||||
padding-inline-end: var(--sp); |
|
||||||
border: 1px solid var(--color--gray-95); |
|
||||||
background-color: var(--color--gray-100); |
|
||||||
|
|
||||||
& select, |
|
||||||
& input:not([type="submit"]) { |
|
||||||
background-color: var(--color--white); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
flex-direction: row; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.entity-moderation-form__item { |
|
||||||
flex-basis: 0; |
|
||||||
margin-inline-end: var(--sp); |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
align-self: flex-start; |
|
||||||
margin-inline-end: 0; |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
align-self: flex-end; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.layout--content-narrow, |
|
||||||
.layout--pass--content-narrow > *, |
|
||||||
.layout--content-medium, |
|
||||||
.layout--pass--content-medium > * { |
|
||||||
& .entity-moderation-form { |
|
||||||
width: 100%; |
|
||||||
margin-inline-start: 0; |
|
||||||
|
|
||||||
@supports (width: max-content) { |
|
||||||
width: max-content; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap)); |
|
||||||
margin-block: var(--sp2) var(--sp4); |
|
||||||
margin-inline-start: calc(-2 * (var(--grid-col-width) + var(--grid-gap))); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap)); |
|
||||||
margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap))); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--grid-max) { |
|
||||||
width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap)); |
|
||||||
margin-inline-start: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,115 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Collapsible details. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
:root { |
|
||||||
--details-border-width: 1px; |
|
||||||
--details-summary-transition: background-color 0.12s ease-in-out; |
|
||||||
} |
|
||||||
|
|
||||||
.oliveskln-details { |
|
||||||
display: block; |
|
||||||
margin-block: var(--sp1); |
|
||||||
color: inherit; |
|
||||||
border: var(--details-border-width) solid var(--color--gray-95); |
|
||||||
border-radius: var(--border-radius); |
|
||||||
box-shadow: 0 1px 4px var(--color--gray-90); |
|
||||||
} |
|
||||||
|
|
||||||
/* Details summary styles */ |
|
||||||
.oliveskln-details__summary { |
|
||||||
position: relative; |
|
||||||
padding-block: var(--sp1); |
|
||||||
padding-inline-start: var(--sp2); |
|
||||||
padding-inline-end: var(--sp1); |
|
||||||
list-style: none; |
|
||||||
cursor: pointer; |
|
||||||
transition: var(--details-summary-transition); |
|
||||||
word-wrap: break-word; |
|
||||||
hyphens: auto; |
|
||||||
color: inherit; |
|
||||||
background-color: var(--color--gray-100); |
|
||||||
font-size: var(--line-height-s); |
|
||||||
font-weight: 700; |
|
||||||
line-height: var(--sp1); |
|
||||||
} |
|
||||||
|
|
||||||
/* Arrow icon */ |
|
||||||
.oliveskln-details__summary::before { |
|
||||||
position: absolute; |
|
||||||
inset-block-start: 50%; |
|
||||||
inset-inline-start: var(--sp0-75); |
|
||||||
display: block; |
|
||||||
width: 10px; |
|
||||||
height: 10px; |
|
||||||
content: ""; |
|
||||||
transform: translateY(-50%) rotate(45deg); /* LTR */ |
|
||||||
border-top: solid 2px currentColor; |
|
||||||
border-right: solid 2px currentColor; |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .oliveskln-details__summary::before { |
|
||||||
transform: translateY(-50%) rotate(-135deg); |
|
||||||
} |
|
||||||
|
|
||||||
/* Pseudo-selector to manage focus styles */ |
|
||||||
.oliveskln-details__summary::after { |
|
||||||
position: absolute; |
|
||||||
inset: calc(var(--details-border-width) * -1); |
|
||||||
content: ""; |
|
||||||
pointer-events: none; |
|
||||||
opacity: 0; |
|
||||||
border-radius: var(--border-radius); |
|
||||||
box-shadow: inset 0 0 0 2px var(--color--primary-60); |
|
||||||
} |
|
||||||
|
|
||||||
/* Hide the marker */ |
|
||||||
.oliveskln-details__summary::-webkit-details-marker { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
/* Disable default outline for summary, since we have own implementation */ |
|
||||||
.oliveskln-details__summary:focus { |
|
||||||
outline: solid 2px transparent; |
|
||||||
outline-offset: -4px; |
|
||||||
} |
|
||||||
|
|
||||||
/* Details summary, hover state */ |
|
||||||
.oliveskln-details__summary:hover { |
|
||||||
background-color: var(--color--gray-95); |
|
||||||
} |
|
||||||
|
|
||||||
/* Details summary, focus and active states */ |
|
||||||
.oliveskln-details__summary:focus::after, |
|
||||||
.oliveskln-details__summary:active::after { |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
|
|
||||||
/* Rotate arrow icon of the details summary, when details expanded */ |
|
||||||
.oliveskln-details[open] > .oliveskln-details__summary::before { |
|
||||||
margin-block-start: -2px; |
|
||||||
transform: translateY(-50%) rotate(135deg); |
|
||||||
} |
|
||||||
|
|
||||||
/* Details content wrapper */ |
|
||||||
.oliveskln-details__wrapper { |
|
||||||
margin: var(--sp1); |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
margin-block-start: var(--sp1-5); |
|
||||||
margin-block-end: var(--sp1-5); |
|
||||||
margin-inline-start: var(--sp2); |
|
||||||
margin-inline-end: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Description */ |
|
||||||
.oliveskln-details__description { |
|
||||||
margin-block-end: var(--sp1); |
|
||||||
color: var(--color-text-neutral-medium); |
|
||||||
font-size: var(--font-size-xs); |
|
||||||
line-height: var(--line-height-s); |
|
||||||
} |
|
||||||
@ -1,157 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Dropbutton styles. |
|
||||||
*/ |
|
||||||
|
|
||||||
.dropbutton-wrapper { |
|
||||||
--dropbutton--height: var(--sp1-5); |
|
||||||
--dropbutton--secondary-bg-color: var(--color--white); |
|
||||||
--dropbutton--active-bg-color: var(--color--gray-90); |
|
||||||
--dropbutton--outline-color: var(--color--primary-40); /* Minimum 3:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ |
|
||||||
--dropbutton--border-radius: var(--border-radius); |
|
||||||
--dropbutton--font-size: var(--font-size-s); |
|
||||||
--dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ |
|
||||||
--dropbutton--text-hover-color: var(--color-text-primary-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ |
|
||||||
|
|
||||||
&.open { |
|
||||||
position: relative; |
|
||||||
z-index: 100; /* Ensure this appears above all other dropbuttons. */ |
|
||||||
filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color)); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.dropbutton-widget { |
|
||||||
position: relative; |
|
||||||
width: max-content; |
|
||||||
height: var(--dropbutton--height); |
|
||||||
padding-inline-end: var(--dropbutton--height); |
|
||||||
border-radius: var(--dropbutton--border-radius); |
|
||||||
|
|
||||||
@nest .dropbutton-single & { |
|
||||||
padding-inline-end: 0; |
|
||||||
} |
|
||||||
|
|
||||||
@nest .dropbutton-wrapper.open & { |
|
||||||
border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.dropbutton { |
|
||||||
height: var(--dropbutton--height); |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
list-style: none; |
|
||||||
font-size: var(--dropbutton--font-size); |
|
||||||
} |
|
||||||
|
|
||||||
/* This is the button that expands/collapses the secondary options. */ |
|
||||||
.dropbutton-toggle button { |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
inset-inline-end: 0; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
width: var(--dropbutton--height); |
|
||||||
height: var(--dropbutton--height); |
|
||||||
padding: 0; |
|
||||||
cursor: pointer; |
|
||||||
border-color: transparent; |
|
||||||
border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */ |
|
||||||
background: var(--dropbutton--active-bg-color); |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline: solid 2px var(--dropbutton--outline-color); |
|
||||||
outline-offset: -2px; |
|
||||||
} |
|
||||||
|
|
||||||
&::before { |
|
||||||
display: block; |
|
||||||
width: var(--sp0-5); |
|
||||||
height: var(--sp0-5); |
|
||||||
content: ""; |
|
||||||
transform: translateY(-25%) rotate(45deg); |
|
||||||
border-right: solid 2px var(--dropbutton--outline-color); |
|
||||||
border-bottom: solid 2px var(--dropbutton--outline-color); |
|
||||||
|
|
||||||
@nest .dropbutton-wrapper.open & { |
|
||||||
transform: translateY(25%) rotate(225deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&:dir(rtl) { |
|
||||||
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* This is the first <li> element in the list of actions. */ |
|
||||||
.dropbutton-action { |
|
||||||
&:first-child { |
|
||||||
margin-inline-end: 2px; |
|
||||||
border: solid 1px transparent; |
|
||||||
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */ |
|
||||||
background: var(--dropbutton--active-bg-color); |
|
||||||
|
|
||||||
&:dir(rtl) { |
|
||||||
border: solid 1px transparent; |
|
||||||
border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& a { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
margin-bottom: -2px; /* Account for borders. */ |
|
||||||
padding: 0 9px; |
|
||||||
text-decoration: none; |
|
||||||
color: var(--dropbutton--text-color); |
|
||||||
font-weight: 600; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
color: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline: solid 2px var(--dropbutton--outline-color); |
|
||||||
outline-offset: -1px; /* Overlap parent container by 1px. */ |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Special rules if there is only one action. */ |
|
||||||
@nest .dropbutton-single & { |
|
||||||
&:first-child { |
|
||||||
border-right: solid 1px transparent; /* LTR */ |
|
||||||
border-radius: var(--dropbutton--border-radius); |
|
||||||
|
|
||||||
&:dir(rtl) { |
|
||||||
border: solid 1px transparent; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& a { |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* These are the <li> elements other than the first. */ |
|
||||||
.secondary-action { |
|
||||||
visibility: hidden; |
|
||||||
width: calc(100% + var(--dropbutton--height)); |
|
||||||
border-right: 1px solid var(--dropbutton--active-bg-color); |
|
||||||
border-left: 1px solid var(--dropbutton--active-bg-color); |
|
||||||
background: var(--dropbutton--secondary-bg-color); |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
border-bottom: 1px solid var(--dropbutton--active-bg-color); |
|
||||||
} |
|
||||||
|
|
||||||
& a:hover { |
|
||||||
color: var(--dropbutton--text-hover-color); |
|
||||||
} |
|
||||||
|
|
||||||
@nest .dropbutton-wrapper.open & { |
|
||||||
visibility: visible; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,127 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Embedded Media. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
figure { |
|
||||||
background: var(--color--gray-100); |
|
||||||
} |
|
||||||
|
|
||||||
figcaption { |
|
||||||
padding-block: var(--sp0-5); |
|
||||||
padding-inline-start: var(--sp0-5); |
|
||||||
padding-inline-end: var(--sp0-5); |
|
||||||
color: var(--color-text-neutral-medium); |
|
||||||
background: var(--color--gray-100); |
|
||||||
font-family: var(--font-serif); |
|
||||||
font-size: 14px; |
|
||||||
font-style: italic; |
|
||||||
line-height: var(--sp); |
|
||||||
|
|
||||||
@media (--sm) { |
|
||||||
padding-block: var(--sp); |
|
||||||
padding-inline-start: var(--sp); |
|
||||||
padding-inline-end: var(--sp); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.align-right { |
|
||||||
float: none; /* Override core's align.module.css. */ |
|
||||||
max-width: 100%; |
|
||||||
margin-block: var(--sp3); |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
float: right; /* LTR */ |
|
||||||
max-width: 50%; |
|
||||||
margin-block-start: var(--sp); |
|
||||||
margin-block-end: var(--sp); |
|
||||||
margin-inline-start: var(--sp); |
|
||||||
margin-inline-end: 0; |
|
||||||
|
|
||||||
/** |
|
||||||
* Chromium and Webkit do not yet support flow relative logical properties, |
|
||||||
* such as float: inline-end. However, PostCSS Logical does not compile this |
|
||||||
* value, so we accommodate by not using these. |
|
||||||
* |
|
||||||
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values |
|
||||||
* @see https://github.com/csstools/postcss-plugins/issues/632 |
|
||||||
*/ |
|
||||||
&:dir(rtl) { |
|
||||||
float: left; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Pull out of grid if nested in content narrow layout. */ |
|
||||||
.layout--content-narrow .align-right, |
|
||||||
.layout--pass--content-narrow > * .align-right { |
|
||||||
/* @todo this can be simplified. */ |
|
||||||
@media (--grid-md) { |
|
||||||
margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap)))); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap)))); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--grid-max) { |
|
||||||
margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap)))); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.align-left { |
|
||||||
float: none; /* Override core's align.module.css. */ |
|
||||||
max-width: 100%; |
|
||||||
margin-block-start: var(--sp3); |
|
||||||
margin-block-end: var(--sp3); |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
float: left; /* LTR */ |
|
||||||
max-width: 50%; |
|
||||||
margin-block-start: var(--sp); |
|
||||||
margin-block-end: var(--sp); |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: var(--sp2); /* Extra right margins in case of aligning next to lists. */ |
|
||||||
|
|
||||||
/** |
|
||||||
* Chromium and Webkit do not yet support flow relative logical properties, |
|
||||||
* such as float: inline-end. However, PostCSS Logical does not compile this |
|
||||||
* value, so we accommodate by not using these. |
|
||||||
* |
|
||||||
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values |
|
||||||
* @see https://github.com/csstools/postcss-plugins/issues/632 |
|
||||||
*/ |
|
||||||
&:dir(rtl) { |
|
||||||
float: right; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Pull out of grid if nested in content narrow layout. */ |
|
||||||
.layout--content-narrow .align-left, |
|
||||||
.layout--pass--content-narrow > * .align-left { |
|
||||||
@media (--grid-md) { |
|
||||||
margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.align-center img, |
|
||||||
.align-center video, |
|
||||||
.align-center audio { |
|
||||||
margin-inline: auto; |
|
||||||
} |
|
||||||
|
|
||||||
.media-oembed-content { |
|
||||||
display: block; |
|
||||||
max-width: 100%; |
|
||||||
} |
|
||||||
@ -1,41 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* RSS feed. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.feed-icon { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
text-decoration: none; |
|
||||||
color: var(--color-text-neutral-soft); |
|
||||||
|
|
||||||
&:hover { |
|
||||||
color: var(--color--primary-50); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.feed-icon__label { |
|
||||||
flex-shrink: 0; |
|
||||||
letter-spacing: 0.08em; |
|
||||||
font-size: var(--font-size-xxs); |
|
||||||
font-weight: 600; |
|
||||||
} |
|
||||||
|
|
||||||
.feed-icon__icon { |
|
||||||
display: flex; |
|
||||||
flex-shrink: 0; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
width: var(--sp1-5); |
|
||||||
height: var(--sp1-5); |
|
||||||
margin-inline-start: var(--sp0-5); |
|
||||||
color: var(--color--white); |
|
||||||
background-color: var(--color--primary-50); |
|
||||||
|
|
||||||
& svg { |
|
||||||
vertical-align: top; |
|
||||||
fill: currentColor; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,53 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Visual styles for fields. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.field:not(:last-child) { |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
} |
|
||||||
|
|
||||||
.node--view-mode-teaser .field { |
|
||||||
margin-block-end: var(--sp); |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
margin-block-end: 0; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.field__label { |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
|
|
||||||
.field--label-inline .field__label, |
|
||||||
.field--label-inline .field__items { |
|
||||||
float: left; /* LTR */ |
|
||||||
|
|
||||||
/** |
|
||||||
* Chromium and Webkit do not yet support flow relative logical properties, |
|
||||||
* such as float: inline-end. However, PostCSS Logical does not compile this |
|
||||||
* value, so we accommodate by not using these. |
|
||||||
* |
|
||||||
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values |
|
||||||
* @see https://github.com/csstools/postcss-plugins/issues/632 |
|
||||||
*/ |
|
||||||
&:dir(rtl) { |
|
||||||
float: right; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.field--label-inline .field__label, |
|
||||||
.field--label-inline > .field__item, |
|
||||||
.field--label-inline .field__items { |
|
||||||
padding-inline-end: 0.5em; |
|
||||||
} |
|
||||||
|
|
||||||
.field--label-inline .field__label::after { |
|
||||||
content: ":"; |
|
||||||
} |
|
||||||
@ -1,133 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Fieldset. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.fieldset { |
|
||||||
min-width: 0; |
|
||||||
margin-block: var(--sp1); |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
color: inherit; |
|
||||||
border: solid 2px var(--color--gray-45); |
|
||||||
border-radius: var(--border-radius); |
|
||||||
background-color: var(--color--white); |
|
||||||
} |
|
||||||
|
|
||||||
.fieldset--group { |
|
||||||
width: 100%; |
|
||||||
color: inherit; |
|
||||||
border: 0; |
|
||||||
border-radius: 0; |
|
||||||
background: none; |
|
||||||
box-shadow: none; |
|
||||||
} |
|
||||||
|
|
||||||
.fieldset__legend { |
|
||||||
float: left; /* Prevent sticking out of top of fieldset. */ |
|
||||||
width: 100%; |
|
||||||
color: inherit; |
|
||||||
border-top-left-radius: var(--border-radius); |
|
||||||
border-top-right-radius: var(--border-radius); |
|
||||||
background-color: var(--color--gray-45); |
|
||||||
font-size: var(--font-size-l); |
|
||||||
font-weight: 700; |
|
||||||
line-height: var(--line-height-base); |
|
||||||
|
|
||||||
& + * { |
|
||||||
clear: left; |
|
||||||
} |
|
||||||
|
|
||||||
& .fieldset__label { |
|
||||||
&.form-required { |
|
||||||
&::after { |
|
||||||
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A"); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.fieldset__legend--composite { |
|
||||||
margin-block-start: 2px; |
|
||||||
color: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
.fieldset__legend--invisible { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.fieldset__legend--group { |
|
||||||
color: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
.fieldset__label { |
|
||||||
display: block; |
|
||||||
padding-block: var(--sp0-5); |
|
||||||
padding-inline-start: var(--sp1); |
|
||||||
padding-inline-end: var(--sp1); |
|
||||||
color: var(--color--white); |
|
||||||
line-height: var(--line-height-s); |
|
||||||
} |
|
||||||
|
|
||||||
.fieldset__label.is-disabled { |
|
||||||
color: var(--color-text-neutral-soft); |
|
||||||
} |
|
||||||
|
|
||||||
.fieldset__description { |
|
||||||
margin-block: var(--sp0-5); |
|
||||||
font-size: var(--font-size-xs); |
|
||||||
line-height: var(--line-height-s); |
|
||||||
} |
|
||||||
|
|
||||||
.fieldset__description.is-disabled { |
|
||||||
color: var(--input--disabled-fg-color); |
|
||||||
} |
|
||||||
|
|
||||||
.fieldset__error-message { |
|
||||||
margin-block: var(--sp0-5); |
|
||||||
padding-inline-start: var(--sp1-5); |
|
||||||
color: var(--color--red); |
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: left top; /* LTR */ |
|
||||||
background-size: var(--sp1) var(--sp1); |
|
||||||
font-size: var(--font-size-s); |
|
||||||
line-height: var(--line-height-s); |
|
||||||
|
|
||||||
@media screen and (-ms-high-contrast: active) { |
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .fieldset__error-message { |
|
||||||
background-position: left top; |
|
||||||
} |
|
||||||
|
|
||||||
.fieldset__wrapper { |
|
||||||
margin-block-start: 0; |
|
||||||
padding-block: var(--sp); |
|
||||||
padding-inline-start: var(--sp); |
|
||||||
} |
|
||||||
|
|
||||||
.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper { |
|
||||||
border: solid 2px var(--color--gray-45); |
|
||||||
border-bottom-right-radius: var(--border-radius); |
|
||||||
border-bottom-left-radius: var(--border-radius); |
|
||||||
} |
|
||||||
|
|
||||||
.fieldset__wrapper--group { |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.fieldset__wrapper > .container-inline { |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
} |
|
||||||
@ -1,39 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Footer regions. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.site-footer { |
|
||||||
position: relative; /* stack above left social bar */ |
|
||||||
color: var(--color--gray-65); |
|
||||||
background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%); |
|
||||||
|
|
||||||
& .menu { |
|
||||||
margin-inline-start: 0; |
|
||||||
list-style: none; |
|
||||||
|
|
||||||
& ul { |
|
||||||
margin-inline-start: var(--sp); |
|
||||||
} |
|
||||||
|
|
||||||
& li { |
|
||||||
margin-block-end: var(--sp0-5); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& a { |
|
||||||
color: inherit; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
body:not(.is-always-mobile-nav) .site-footer { |
|
||||||
border-inline-start: solid var(--content-left) var(--color--black); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,99 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Checkbox and radio input elements. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
input[type="checkbox"], |
|
||||||
input[type="radio"] { |
|
||||||
display: inline-block; |
|
||||||
width: var(--sp1-5); |
|
||||||
height: var(--sp1-5); |
|
||||||
margin: 0; |
|
||||||
vertical-align: middle; |
|
||||||
border: 1px solid var(--color--gray-60); |
|
||||||
border-radius: 3px; |
|
||||||
background-color: var(--color--white); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: 50% 50%; |
|
||||||
background-size: var(--sp1) var(--sp1); |
|
||||||
appearance: none; |
|
||||||
|
|
||||||
&:focus { |
|
||||||
border: solid 2px var(--color--primary-50); |
|
||||||
outline: solid 2px var(--color--primary-50); |
|
||||||
|
|
||||||
@supports (outline-style: double) { |
|
||||||
border-width: 1px; |
|
||||||
outline-width: 6px; |
|
||||||
outline-style: double; |
|
||||||
outline-offset: -1px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&:hover { |
|
||||||
border-color: var(--color--primary-60); |
|
||||||
} |
|
||||||
|
|
||||||
&[disabled] { |
|
||||||
background-color: var(--color--gray-100); |
|
||||||
|
|
||||||
&:hover { |
|
||||||
border-color: var(--color--gray-60); |
|
||||||
} |
|
||||||
|
|
||||||
&:checked { |
|
||||||
border-width: 1px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&:checked { |
|
||||||
border-width: 2px; |
|
||||||
} |
|
||||||
|
|
||||||
&.error { |
|
||||||
border: solid 2px var(--color--red); |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline-color: var(--color--red); |
|
||||||
outline-offset: -2px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& + label { |
|
||||||
display: inline-block; |
|
||||||
padding-inline-start: var(--sp0-5); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
input[type="checkbox"] { |
|
||||||
&:checked { |
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E"); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
input[type="radio"] { |
|
||||||
border-radius: 50%; |
|
||||||
|
|
||||||
&:checked { |
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A"); |
|
||||||
background-size: 17px; |
|
||||||
} |
|
||||||
|
|
||||||
&:focus { |
|
||||||
border-width: 2px; |
|
||||||
border-color: var(--color--primary-50); |
|
||||||
outline-color: transparent; |
|
||||||
box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--primary-50); |
|
||||||
} |
|
||||||
|
|
||||||
&.error:focus { |
|
||||||
outline-color: transparent; |
|
||||||
box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.form-type-boolean { |
|
||||||
margin-block: var(--sp1); |
|
||||||
} |
|
||||||
@ -1,84 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Select input elements. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
:root { |
|
||||||
--form-element-select-icon: url("../../images/chevron-down.svg"); |
|
||||||
} |
|
||||||
|
|
||||||
select { |
|
||||||
max-width: 100%; |
|
||||||
height: var(--sp3); |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: var(--sp); |
|
||||||
padding-inline-end: var(--sp3); |
|
||||||
color: var(--color-text-neutral-loud); |
|
||||||
border: 1px solid var(--color--gray-60); |
|
||||||
border-radius: var(--border-radius); |
|
||||||
background-color: var(--color--white); |
|
||||||
background-image: var(--form-element-select-icon); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: right var(--sp) center; /* LTR */ |
|
||||||
font-family: inherit; |
|
||||||
font-size: inherit; |
|
||||||
appearance: none; |
|
||||||
|
|
||||||
&:focus { |
|
||||||
border: solid 2px var(--color--primary-50); |
|
||||||
outline: solid 2px var(--color--primary-50); |
|
||||||
|
|
||||||
@supports (outline-style: double) { |
|
||||||
border-width: 1px; |
|
||||||
outline-width: 6px; |
|
||||||
outline-style: double; |
|
||||||
outline-offset: -1px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&[disabled] { |
|
||||||
color: var(--color--gray-60); |
|
||||||
background-color: var(--color--gray-100); |
|
||||||
} |
|
||||||
|
|
||||||
&.error { |
|
||||||
border: solid 2px var(--color--red); |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline-color: var(--color--red); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&[multiple] { |
|
||||||
height: auto; |
|
||||||
padding: var(--sp0-5); |
|
||||||
background-image: none; |
|
||||||
line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */ |
|
||||||
|
|
||||||
& option { |
|
||||||
padding: var(--sp0-5); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.form-element--small { |
|
||||||
height: var(--sp2-5); |
|
||||||
} |
|
||||||
|
|
||||||
/* Necessary to show chevron in forced colors mode in modern browsers. */ |
|
||||||
@media (forced-colors: active) { |
|
||||||
padding-inline-end: var(--sp); |
|
||||||
background-image: none; |
|
||||||
appearance: listbox; /* Default <select> appearance value for modern browsers. */ |
|
||||||
|
|
||||||
/* Lets browser set <select> appearance to whatever the browser's default is. */ |
|
||||||
@supports (appearance: revert) { |
|
||||||
appearance: revert; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] select { |
|
||||||
background-position: left var(--sp) center; |
|
||||||
} |
|
||||||
@ -1,90 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Text input elements. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
[type="color"], |
|
||||||
[type="date"], |
|
||||||
[type="datetime-local"], |
|
||||||
[type="email"], |
|
||||||
[type="file"], |
|
||||||
[type="month"], |
|
||||||
[type="number"], |
|
||||||
[type="password"], |
|
||||||
[type="search"], |
|
||||||
[type="tel"], |
|
||||||
[type="text"], |
|
||||||
[type="time"], |
|
||||||
[type="url"], |
|
||||||
[type="week"], |
|
||||||
textarea { |
|
||||||
width: 100%; |
|
||||||
max-width: 100%; |
|
||||||
min-height: var(--sp3); |
|
||||||
padding: 0 var(--sp); |
|
||||||
color: var(--color-text-neutral-loud); |
|
||||||
border: 1px solid var(--color--gray-60); |
|
||||||
border-radius: var(--border-radius); |
|
||||||
background-color: var(--color--white); |
|
||||||
font-family: inherit; |
|
||||||
font-size: inherit; |
|
||||||
appearance: none; |
|
||||||
|
|
||||||
&:focus { |
|
||||||
border: solid 2px var(--color--primary-50); |
|
||||||
outline: solid 2px var(--color--primary-50); |
|
||||||
|
|
||||||
@supports (outline-style: double) { |
|
||||||
border-width: 1px; |
|
||||||
outline-width: 6px; |
|
||||||
outline-style: double; |
|
||||||
outline-offset: -1px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&[disabled] { |
|
||||||
color: var(--color--gray-60); |
|
||||||
background-color: var(--color--gray-100); |
|
||||||
} |
|
||||||
|
|
||||||
&.error { |
|
||||||
border: solid 2px var(--color--red); |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline-color: var(--color--red); |
|
||||||
outline-offset: -2px; |
|
||||||
} |
|
||||||
& + .ck-editor > .ck-editor__main { |
|
||||||
border: solid 2px var(--color--red); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.form-element--small { |
|
||||||
min-height: var(--sp2-5); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--sm) { |
|
||||||
width: auto; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[type="date"] { |
|
||||||
/* Ensure that date field isn't larger than other fields. */ |
|
||||||
&::-webkit-datetime-edit-fields-wrapper { |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[type="file"] { |
|
||||||
height: auto; |
|
||||||
padding-block: var(--sp0-75); |
|
||||||
} |
|
||||||
|
|
||||||
[type="color"] { |
|
||||||
width: var(--sp3); |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Textarea. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
textarea { |
|
||||||
display: block; |
|
||||||
width: 100%; |
|
||||||
min-height: var(--sp8); |
|
||||||
padding: var(--sp); |
|
||||||
} |
|
||||||
@ -1,193 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Main form and form item styles. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
::placeholder { |
|
||||||
color: var(--color--gray-60); |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* General form item. |
|
||||||
*/ |
|
||||||
.form-item { |
|
||||||
margin-block: var(--sp1); |
|
||||||
} |
|
||||||
|
|
||||||
.form-item__label--multiple-value-form { |
|
||||||
margin-block: 0; |
|
||||||
font-size: inherit; |
|
||||||
font-weight: inherit; |
|
||||||
line-height: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* When a table row or a container-inline has a single form item, prevent it |
|
||||||
* from adding unnecessary extra spacing. |
|
||||||
* If it has multiple form items, allow spacing between them, overriding core. |
|
||||||
*/ |
|
||||||
tr .form-item, |
|
||||||
.container-inline .form-item { |
|
||||||
margin-block: var(--sp0-5); |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Form element label. |
|
||||||
*/ |
|
||||||
.form-item__label { |
|
||||||
display: block; |
|
||||||
margin-block: var(--sp0-5); |
|
||||||
} |
|
||||||
|
|
||||||
.container-inline .form-item__label { |
|
||||||
margin-inline-end: 1em; |
|
||||||
} |
|
||||||
|
|
||||||
.form-item__label--multiple-value-form { |
|
||||||
margin-block: 0; |
|
||||||
font-size: inherit; |
|
||||||
font-weight: inherit; |
|
||||||
line-height: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
.form-item__label[for] { |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.form-item__label.option { |
|
||||||
display: inline; |
|
||||||
font-weight: normal; |
|
||||||
} |
|
||||||
|
|
||||||
/* Label states. */ |
|
||||||
.form-item__label.is-disabled { |
|
||||||
cursor: default; |
|
||||||
color: var(--color--gray-70); |
|
||||||
} |
|
||||||
|
|
||||||
/* Form required star icon */ |
|
||||||
.form-item__label.form-required::after, |
|
||||||
.fieldset__label.form-required::after, |
|
||||||
.required-mark::after { |
|
||||||
display: inline-block; |
|
||||||
width: 0.5rem; |
|
||||||
height: 0.5rem; |
|
||||||
margin-inline: 0.3em; |
|
||||||
content: ""; |
|
||||||
vertical-align: text-top; |
|
||||||
/* Use a background image to prevent screen readers from announcing the text. */ |
|
||||||
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A"); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-size: 0.5rem 0.5rem; |
|
||||||
|
|
||||||
@media screen and (-ms-high-contrast: active) { |
|
||||||
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A"); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Form item description. |
|
||||||
*/ |
|
||||||
.form-item__description { |
|
||||||
margin-block: var(--sp0-5); |
|
||||||
max-width: 60ch; |
|
||||||
font-size: var(--font-size-s); |
|
||||||
line-height: var(--line-height-s); |
|
||||||
} |
|
||||||
|
|
||||||
.field-multiple-table + .form-item__description { |
|
||||||
margin-block-start: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Error message (Inline form errors). |
|
||||||
*/ |
|
||||||
.form-item--error-message { |
|
||||||
margin-block: var(--sp0-5); |
|
||||||
padding-inline-start: var(--sp1-5); |
|
||||||
color: var(--color--red); |
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: left top; /* LTR */ |
|
||||||
background-size: var(--sp1) var(--sp1); |
|
||||||
font-size: var(--font-size-s); |
|
||||||
line-height: var(--line-height-s); |
|
||||||
|
|
||||||
@media screen and (-ms-high-contrast: active) { |
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .form-item--error-message { |
|
||||||
background-position: right top; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Form actions. |
|
||||||
*/ |
|
||||||
.form-actions { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
align-items: flex-start; |
|
||||||
margin-block: var(--sp0-5); |
|
||||||
} |
|
||||||
|
|
||||||
.form-actions .button, |
|
||||||
.form-actions .action-link { |
|
||||||
margin-block: var(--sp0-5); |
|
||||||
} |
|
||||||
|
|
||||||
.form-actions .ajax-progress--throbber { |
|
||||||
align-self: center; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Custom label placement for editor filter format select. |
|
||||||
*/ |
|
||||||
.form-item--editor-format { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
align-items: center; |
|
||||||
max-width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.form-item--editor-format .form-item__label, |
|
||||||
.form-item--editor-format .form-item__prefix, |
|
||||||
.form-item--editor-format .form-item__suffix, |
|
||||||
.form-item--editor-format .form-element--editor-format { |
|
||||||
min-width: 1px; |
|
||||||
} |
|
||||||
|
|
||||||
.form-item--editor-format .form-item__label, |
|
||||||
.form-item--editor-format .form-item__prefix, |
|
||||||
.form-item--editor-format .form-item__suffix { |
|
||||||
margin-inline-end: var(--sp0-5); |
|
||||||
} |
|
||||||
|
|
||||||
.form-item--editor-format .form-item__description, |
|
||||||
.form-item--editor-format .form-item--error-message { |
|
||||||
flex: 0 1 100%; |
|
||||||
min-width: 1px; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Inline forms. |
|
||||||
*/ |
|
||||||
.form--inline { |
|
||||||
& > * { |
|
||||||
display: inline-block; |
|
||||||
margin-top: var(--sp0-5); |
|
||||||
margin-bottom: 0; |
|
||||||
vertical-align: top; /* Ensure proper alignment if description is present. */ |
|
||||||
} |
|
||||||
|
|
||||||
& .form-item__label { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
& .form-actions { |
|
||||||
margin-top: var(--sp1-5); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,19 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Forum specific styles. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.forum { |
|
||||||
& table { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.forum__name--link, |
|
||||||
.forum__last-reply a, |
|
||||||
.forum__title a { |
|
||||||
color: var(--color-text-primary-medium); |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
@ -1,29 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Header Mobile Buttons. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.mobile-buttons { |
|
||||||
margin-block-start: var(--sp0-5); |
|
||||||
margin-inline-start: auto; |
|
||||||
|
|
||||||
@media (--sm) { |
|
||||||
margin-block-start: var(--sp2); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
margin-block-start: var(--sp4); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
margin-block-start: var(--sp6); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
body:not(.is-always-mobile-nav) .mobile-buttons { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,128 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Navigation in header. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.header-nav { |
|
||||||
position: fixed; |
|
||||||
z-index: 501; /* Appear above overlay and contextual links in header. */ |
|
||||||
inset-block-start: 0; |
|
||||||
inset-inline-start: 100%; |
|
||||||
visibility: hidden; |
|
||||||
overflow: auto; |
|
||||||
/* Ensure that header nav not use additional space and force system branding |
|
||||||
* block text to unnecessarily wrap. */ |
|
||||||
flex-basis: max-content; |
|
||||||
width: 100%; |
|
||||||
max-width: var(--mobile-nav-width); |
|
||||||
height: 100%; |
|
||||||
padding-block: 0 var(--sp); |
|
||||||
padding-inline-start: var(--sp); |
|
||||||
padding-inline-end: var(--sp); |
|
||||||
/* Create room for the "close" button. We cannot use margin because the |
|
||||||
* mobile navigation needs to slide beneath the button, but we also cannot |
|
||||||
* use padding because that would enable the button to scroll out of the |
|
||||||
* viewport on short screens. */ |
|
||||||
border-block-start: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px)); |
|
||||||
background-color: var(--color--white); |
|
||||||
box-shadow: 0 0 72px rgba(0, 0, 0, 0.1); |
|
||||||
|
|
||||||
&.is-active { |
|
||||||
visibility: visible; |
|
||||||
transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px))); /* LTR */ |
|
||||||
|
|
||||||
&:dir(rtl) { |
|
||||||
transform: translateX(calc(100% + var(--drupal-displace-offset-left, 0px))); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--sm) { |
|
||||||
border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px)); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
padding-block-end: var(--sp3); |
|
||||||
padding-inline-start: var(--sp3); |
|
||||||
border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px)); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
grid-column: 5 / 14; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
* Ensure top border has the same color as the background when in forced colors. |
|
||||||
*/ |
|
||||||
@media (forced-colors: active) { |
|
||||||
border-top-color: canvas; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
* Only apply transition styles when JS is loaded. This |
|
||||||
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189 |
|
||||||
*/ |
|
||||||
html.js .header-nav { |
|
||||||
transition: visibility 0.2s, transform 0.2s; |
|
||||||
} |
|
||||||
|
|
||||||
body:not(.is-always-mobile-nav) .header-nav { |
|
||||||
@media (--nav) { |
|
||||||
position: static; |
|
||||||
display: flex; |
|
||||||
visibility: visible; |
|
||||||
overflow: visible; |
|
||||||
grid-column: 5 / 15; |
|
||||||
align-items: center; |
|
||||||
justify-content: flex-end; |
|
||||||
max-width: none; |
|
||||||
height: var(--header-height-wide-when-fixed); |
|
||||||
margin-block-start: auto; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
transition: transform 0.2s; |
|
||||||
transform: none; |
|
||||||
border-block-start: 0; |
|
||||||
box-shadow: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
body.is-always-mobile-nav { |
|
||||||
& .header-nav { |
|
||||||
@media (--nav) { |
|
||||||
overflow: auto; |
|
||||||
max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap)))); |
|
||||||
padding-inline-end: var(--sp); |
|
||||||
transition: transform 0.2s, visibility 0.2s; |
|
||||||
border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11)); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--grid-max) { |
|
||||||
max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap))))); |
|
||||||
padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp))); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.header-nav-overlay { |
|
||||||
position: fixed; |
|
||||||
z-index: 101; |
|
||||||
inset-block-start: 0; |
|
||||||
inset-inline-start: 0; |
|
||||||
display: none; |
|
||||||
width: 100%; |
|
||||||
height: 100vh; |
|
||||||
opacity: 0.2; |
|
||||||
background: var(--color--gray-5); |
|
||||||
|
|
||||||
@media (forced-colors: active) { |
|
||||||
background: canvastext; |
|
||||||
} |
|
||||||
|
|
||||||
@nest .is-overlay-active & { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,173 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Header Search Narrow Block. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.block-search-narrow { |
|
||||||
margin-inline: calc(-1 * var(--sp)); |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
background: var(--color--black); |
|
||||||
|
|
||||||
& .search-block-form { |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
|
|
||||||
& .form-item { |
|
||||||
flex-grow: 1; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
& .form-actions { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
& input[type="search"] { |
|
||||||
width: calc(100% + var(--sp2)); |
|
||||||
height: calc(3 * var(--sp)); |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: var(--sp); |
|
||||||
padding-inline-end: var(--sp); |
|
||||||
transition: background-size 0.4s; |
|
||||||
color: var(--color--white); |
|
||||||
border: solid 1px transparent; |
|
||||||
background-color: transparent; |
|
||||||
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: bottom left; /* LTR */ |
|
||||||
background-size: 0% 5px; |
|
||||||
box-shadow: none; |
|
||||||
font-family: var(--font-serif); |
|
||||||
font-size: 16px; |
|
||||||
-webkit-appearance: none; |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline: solid 4px transparent; |
|
||||||
outline-offset: -4px; |
|
||||||
background-size: 100% 5px; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
height: calc(4 * var(--sp)); |
|
||||||
padding-inline-start: var(--sp2); |
|
||||||
padding-inline-end: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .search-form__submit { |
|
||||||
position: relative; |
|
||||||
overflow: hidden; |
|
||||||
align-self: stretch; |
|
||||||
width: var(--sp3); |
|
||||||
height: auto; |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
cursor: pointer; |
|
||||||
border-color: transparent; |
|
||||||
background-color: transparent; |
|
||||||
|
|
||||||
/* |
|
||||||
When in Windows high contrast mode, FF will not output either background |
|
||||||
images or SVGs that are nested directly within a <button> element, so we add a <span>. |
|
||||||
*/ |
|
||||||
& .icon--search { |
|
||||||
position: absolute; |
|
||||||
inset-block-start: 0; |
|
||||||
inset-inline-start: 0; |
|
||||||
display: block; |
|
||||||
width: 100%; /* Width of the SVG background image. */ |
|
||||||
height: 100%; |
|
||||||
pointer-events: none; |
|
||||||
background-image: url("../../images/search--white.svg"); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: center; |
|
||||||
background-size: auto; |
|
||||||
|
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
inset-block-end: 0; |
|
||||||
inset-inline-start: 0; |
|
||||||
width: 100%; |
|
||||||
height: 0; |
|
||||||
content: ""; |
|
||||||
transition: transform 0.2s; |
|
||||||
transform: scaleX(0); |
|
||||||
transform-origin: left; /* LTR */ |
|
||||||
border-block-start: solid 5px var(--color--primary-50); |
|
||||||
} |
|
||||||
|
|
||||||
@media (forced-colors: active) { |
|
||||||
background: buttontext; |
|
||||||
mask-image: url("../../images/search--white.svg"); |
|
||||||
mask-repeat: no-repeat; |
|
||||||
mask-position: center; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline: solid 4px transparent; |
|
||||||
outline-offset: -4px; |
|
||||||
box-shadow: none; |
|
||||||
|
|
||||||
& span::after { |
|
||||||
transform: scaleX(1); |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (-ms-high-contrast: active) { |
|
||||||
border-bottom-width: var(--sp0-5); |
|
||||||
|
|
||||||
& span::after { |
|
||||||
content: none; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
width: 80px; |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (-ms-high-contrast: active) { |
|
||||||
/* IE11's high contrast show will not show the background image, so we show the text. */ |
|
||||||
& .visually-hidden { |
|
||||||
position: static; |
|
||||||
overflow: visible; |
|
||||||
clip: auto; |
|
||||||
width: auto; |
|
||||||
height: auto; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
/* Edge's high contrast does show the background image, so we hide it. */ |
|
||||||
& .icon--search { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* 500px is the width of the primary nav at mobile. */ |
|
||||||
@media (min-width: 500px) { |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
body:not(.is-always-mobile-nav) .block-search-narrow { |
|
||||||
@media (--nav) { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .block-search-narrow { |
|
||||||
& input[type="search"] { |
|
||||||
background-position: bottom right; |
|
||||||
} |
|
||||||
|
|
||||||
& .search-form__submit .icon--search::after { |
|
||||||
transform-origin: right; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,282 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Header Search Wide Block. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
/* Override contextual links so we can position against .site-header. */ |
|
||||||
.block-search-wide.contextual-region { |
|
||||||
position: static; |
|
||||||
} |
|
||||||
|
|
||||||
.block-search-wide__wrapper { |
|
||||||
position: absolute; |
|
||||||
z-index: 1; /* Ensure left border shows above social region in IE11. */ |
|
||||||
inset-block-start: 100%; |
|
||||||
inset-inline-start: calc(-1 * var(--content-left)); |
|
||||||
display: none; |
|
||||||
visibility: hidden; |
|
||||||
overflow: hidden; |
|
||||||
width: calc(100% + var(--content-left)); |
|
||||||
max-width: var(--max-bg-color); |
|
||||||
height: var(--sp8); |
|
||||||
max-height: 0; |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
transition: all 0.2s; |
|
||||||
border-inline-start: solid var(--content-left) var(--color--gray-20); |
|
||||||
background: var(--color--black); |
|
||||||
|
|
||||||
&.is-active { |
|
||||||
visibility: visible; |
|
||||||
max-height: var(--sp8); |
|
||||||
} |
|
||||||
|
|
||||||
& form { |
|
||||||
display: flex; |
|
||||||
grid-column: 1 / 14; |
|
||||||
} |
|
||||||
|
|
||||||
& input[type="search"] { |
|
||||||
width: calc(100% + var(--sp2)); |
|
||||||
height: var(--sp8); |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: var(--sp12); |
|
||||||
padding-inline-end: 0; |
|
||||||
transition: background-size 0.4s; |
|
||||||
color: var(--color--white); |
|
||||||
border: solid 1px transparent; |
|
||||||
box-shadow: none; |
|
||||||
font-family: var(--font-serif); |
|
||||||
font-size: 32px; |
|
||||||
-webkit-appearance: none; |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline: solid 4px transparent; |
|
||||||
outline-offset: -4px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .form-item-keys { |
|
||||||
flex-grow: 1; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
& .form-actions { |
|
||||||
display: flex; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
& .search-form__submit { |
|
||||||
position: relative; |
|
||||||
overflow: hidden; |
|
||||||
align-self: stretch; |
|
||||||
width: 100px; |
|
||||||
height: auto; |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
cursor: pointer; |
|
||||||
border-color: transparent; |
|
||||||
background-color: transparent; |
|
||||||
|
|
||||||
/* |
|
||||||
When in Windows high contrast mode, FF will not output either background |
|
||||||
images or SVGs that are nested directly within a <button> element, so we add a <span>. |
|
||||||
*/ |
|
||||||
& .icon--search { |
|
||||||
position: absolute; |
|
||||||
inset-block-start: 0; |
|
||||||
inset-inline-end: 0; |
|
||||||
display: block; |
|
||||||
width: 24px; /* Width of the SVG background image. */ |
|
||||||
height: 100%; |
|
||||||
pointer-events: none; |
|
||||||
background-image: url("../../images/search--white.svg"); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: center; |
|
||||||
background-size: contain; |
|
||||||
|
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
inset-block-end: 0; |
|
||||||
inset-inline-start: 0; |
|
||||||
width: 100%; |
|
||||||
height: 0; |
|
||||||
content: ""; |
|
||||||
transition: transform 0.2s; |
|
||||||
transform: scaleX(0); |
|
||||||
transform-origin: left; |
|
||||||
border-block-start: solid var(--sp0-5) var(--color--primary-50); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline: solid 4px transparent; |
|
||||||
outline-offset: -4px; |
|
||||||
box-shadow: none; |
|
||||||
|
|
||||||
& span::after { |
|
||||||
transform: scaleX(1); |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (-ms-high-contrast: active) { |
|
||||||
border-bottom-width: var(--sp0-5); |
|
||||||
|
|
||||||
& span::after { |
|
||||||
content: none; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (-ms-high-contrast: active) { |
|
||||||
/* Edge's high contrast does show the background image, so we hide it. */ |
|
||||||
& .icon--search { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.block-search-wide__container { |
|
||||||
max-width: var(--max-width); |
|
||||||
padding-inline-end: var(--sp2); |
|
||||||
} |
|
||||||
|
|
||||||
.block-search-wide__grid { |
|
||||||
display: grid; |
|
||||||
grid-template-columns: repeat(var(--grid-col-count), 1fr); |
|
||||||
grid-column-gap: var(--grid-gap); |
|
||||||
} |
|
||||||
|
|
||||||
/* Override specificity from container-inline.module.css */ |
|
||||||
.container-inline { |
|
||||||
& .block-search-wide__container { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
& .block-search-wide__grid { |
|
||||||
display: grid; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.block-search-wide__button { |
|
||||||
position: relative; |
|
||||||
display: none; |
|
||||||
width: var(--sp3); |
|
||||||
height: var(--sp6); |
|
||||||
cursor: pointer; |
|
||||||
color: var(--color-text-neutral-loud); /* Affects SVG search icon. */ |
|
||||||
border: 0; |
|
||||||
background: transparent; |
|
||||||
-webkit-appearance: none; |
|
||||||
|
|
||||||
&:focus { |
|
||||||
position: relative; |
|
||||||
outline: 0; |
|
||||||
|
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
left: 50%; |
|
||||||
width: 80%; |
|
||||||
height: var(--sp3); |
|
||||||
content: ""; |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
border: solid 2px var(--color--primary-50); |
|
||||||
border-radius: 4px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&[aria-expanded="true"] { |
|
||||||
background: var(--color--black); |
|
||||||
|
|
||||||
&:focus::after { |
|
||||||
border-color: var(--color--white); |
|
||||||
} |
|
||||||
|
|
||||||
& .block-search-wide__button-close { |
|
||||||
&::before, |
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
left: 50%; |
|
||||||
width: var(--sp1-5); |
|
||||||
height: 0; |
|
||||||
content: ""; |
|
||||||
border-block-start: solid 2px var(--color--white); |
|
||||||
} |
|
||||||
|
|
||||||
&::before { |
|
||||||
transform: translate(-50%, -50%) rotate(-45deg); |
|
||||||
} |
|
||||||
|
|
||||||
&::after { |
|
||||||
transform: translate(-50%, -50%) rotate(45deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& svg { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& svg { |
|
||||||
margin-inline-start: auto; |
|
||||||
margin-inline-end: auto; |
|
||||||
} |
|
||||||
|
|
||||||
@media (forced-colors: active) { |
|
||||||
background: ButtonFace; |
|
||||||
|
|
||||||
& path { |
|
||||||
fill: ButtonText; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Provide rudimentary access to site search if JS is disabled. */ |
|
||||||
html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper { |
|
||||||
visibility: visible; |
|
||||||
max-height: var(--sp8); |
|
||||||
} |
|
||||||
|
|
||||||
/* Necessary to override specificity of transpiled PostCSS properties from default input focus styling. */ |
|
||||||
[dir] .block-search-wide__wrapper input[type="search"] { |
|
||||||
background-color: transparent; |
|
||||||
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: bottom left; /* LTR */ |
|
||||||
background-size: 0% 10px; |
|
||||||
|
|
||||||
&:focus { |
|
||||||
background-size: 100% var(--sp0-5); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .block-search-wide__wrapper { |
|
||||||
& input[type="search"] { |
|
||||||
background-position: bottom right; |
|
||||||
} |
|
||||||
|
|
||||||
& .search-form__submit .icon--search::after { |
|
||||||
transform-origin: right; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
body:not(.is-always-mobile-nav) { |
|
||||||
& .block-search-wide__wrapper, |
|
||||||
& .block-search-wide__button { |
|
||||||
@media (--nav) { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,120 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Site branding in header. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.site-branding { |
|
||||||
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-height: var(--sp3); |
|
||||||
margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */ |
|
||||||
padding-block: 0 var(--sp0-5); |
|
||||||
padding-inline-start: var(--container-padding); |
|
||||||
padding-inline-end: var(--container-padding); |
|
||||||
background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%); |
|
||||||
|
|
||||||
@media (--sm) { |
|
||||||
min-height: var(--sp4); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */ |
|
||||||
min-height: var(--sp6); |
|
||||||
padding-block-end: var(--sp); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */ |
|
||||||
} |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
min-height: var(--site-header-height-wide); |
|
||||||
margin-inline-start: calc(-1 * var(--container-padding)); |
|
||||||
padding-block: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .site-branding { |
|
||||||
background-image: linear-gradient(-160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%); |
|
||||||
} |
|
||||||
|
|
||||||
.site-branding--bg-gray { |
|
||||||
background: var(--color--gray-100); |
|
||||||
} |
|
||||||
|
|
||||||
.site-branding--bg-white { |
|
||||||
background: var(--color--white); |
|
||||||
} |
|
||||||
|
|
||||||
.site-branding__inner { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
& a { |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
height: var(--header-height-wide-when-fixed); |
|
||||||
padding-block: var(--sp0-5); |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.site-branding__logo { |
|
||||||
flex-shrink: 0; |
|
||||||
max-width: 100%; |
|
||||||
|
|
||||||
& img { |
|
||||||
width: auto; |
|
||||||
max-width: 100%; |
|
||||||
max-height: var(--sp2); |
|
||||||
|
|
||||||
@media (--sm) { |
|
||||||
max-height: var(--sp3); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
max-height: var(--sp4); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
max-height: calc(var(--header-height-wide-when-fixed) - var(--sp)); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.site-branding__text { |
|
||||||
color: var(--color--white); |
|
||||||
font-size: 18px; |
|
||||||
font-weight: bold; |
|
||||||
|
|
||||||
& a { |
|
||||||
color: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
font-size: 28px; |
|
||||||
line-height: 28px; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
letter-spacing: 0.02em; |
|
||||||
font-size: 32px; |
|
||||||
line-height: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.site-branding--bg-gray .site-branding__text, |
|
||||||
.site-branding--bg-white .site-branding__text { |
|
||||||
color: var(--color--primary-50); |
|
||||||
} |
|
||||||
|
|
||||||
.site-branding__logo + .site-branding__text { |
|
||||||
margin-inline-start: 12px; |
|
||||||
} |
|
||||||
@ -1,91 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Sticky Header Toggle Button. |
|
||||||
* |
|
||||||
* This button shows on the left hand side of the header (in LTR layouts), and |
|
||||||
* toggles fixing the header to the top of the viewport. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.sticky-header-toggle { |
|
||||||
display: none; |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
display: flex; |
|
||||||
flex-shrink: 0; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
width: var(--content-left); |
|
||||||
height: var(--sp6); |
|
||||||
pointer-events: none; |
|
||||||
opacity: 0; |
|
||||||
border: 0; |
|
||||||
outline: 0; |
|
||||||
background-color: var(--color--primary-50); |
|
||||||
|
|
||||||
&:focus { |
|
||||||
cursor: pointer; |
|
||||||
pointer-events: auto; |
|
||||||
opacity: 1; |
|
||||||
outline: solid 2px var(--color--white); |
|
||||||
outline-offset: -4px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle { |
|
||||||
@media (--nav) { |
|
||||||
visibility: visible; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
body.is-always-mobile-nav .sticky-header-toggle { |
|
||||||
@media (--nav) { |
|
||||||
visibility: hidden; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.sticky-header-toggle__icon { |
|
||||||
--icon-bar-height: 3px; |
|
||||||
--icon-bar-space: 7px; |
|
||||||
|
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: space-between; |
|
||||||
width: var(--sp2); |
|
||||||
height: calc((var(--icon-bar-height) * 3) + (var(--icon-bar-space) * 2)); |
|
||||||
/* Height = 3 bars + 2 spaces */ |
|
||||||
transition: opacity 0.2s; |
|
||||||
pointer-events: none; |
|
||||||
transform-style: preserve-3d; |
|
||||||
|
|
||||||
& > span { |
|
||||||
display: block; |
|
||||||
width: 100%; |
|
||||||
height: var(--icon-bar-height); |
|
||||||
transition: transform 0.2s; |
|
||||||
transform-origin: center; |
|
||||||
background-color: var(--color--white); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.is-fixed .sticky-header-toggle { |
|
||||||
cursor: pointer; |
|
||||||
pointer-events: auto; |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
|
|
||||||
[aria-checked="true"] .sticky-header-toggle__icon { |
|
||||||
& > span:nth-child(1) { |
|
||||||
transform: translateY(calc(var(--icon-bar-height) + var(--icon-bar-space))) rotate(-45deg); |
|
||||||
} |
|
||||||
|
|
||||||
& > span:nth-child(2) { |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
|
|
||||||
& > span:nth-child(3) { |
|
||||||
transform: translateY(calc(0px - var(--icon-bar-height) - var(--icon-bar-space))) rotate(45deg); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,43 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Main Hero. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.hero__content { |
|
||||||
grid-column: 1 / 7; |
|
||||||
|
|
||||||
@media (--grid-md) { /* 700px */ |
|
||||||
grid-column: 3 / 13; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
grid-column: 3 / 11; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.hero__img { |
|
||||||
grid-column: 1 / 7; |
|
||||||
margin-block-start: var(--sp2); |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
|
|
||||||
& img { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--sm) { |
|
||||||
margin-block-start: var(--sp3); |
|
||||||
margin-block-end: var(--sp3); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
grid-column: 1 / 15; |
|
||||||
margin-block-start: var(--sp4); |
|
||||||
margin-block-end: var(--sp4); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
grid-column: 2 / 14; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,28 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Links component. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.links.inline { |
|
||||||
margin-inline-start: 0; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
list-style: none; |
|
||||||
|
|
||||||
& > * { |
|
||||||
display: inline; |
|
||||||
|
|
||||||
&:not(:last-child) { |
|
||||||
padding-inline-end: 1em; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.node--type-book .links.inline { |
|
||||||
@media (--md) { |
|
||||||
text-align: end; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,27 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Maintenance page. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.maintenance-page { |
|
||||||
& .site-header__initial { |
|
||||||
@media (--nav) { |
|
||||||
flex-shrink: 0; |
|
||||||
width: var(--content-left); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .main-content { |
|
||||||
min-height: 80vh; |
|
||||||
} |
|
||||||
} |
|
||||||
.maintenance-page-icon { |
|
||||||
display: block; |
|
||||||
margin-block: var(--sp3); |
|
||||||
|
|
||||||
& path { |
|
||||||
fill: var(--color--primary-50); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,159 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Messages. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
:root { |
|
||||||
--messages-icon-size: 32px; |
|
||||||
} |
|
||||||
|
|
||||||
.messages-list { |
|
||||||
margin-block: var(--sp1); |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
list-style: none; |
|
||||||
} |
|
||||||
|
|
||||||
.messages { |
|
||||||
min-height: calc(var(--messages-icon-size) + 2 * var(--sp1)); |
|
||||||
padding-block: var(--sp1); |
|
||||||
padding-inline-start: var(--sp1-5); |
|
||||||
padding-inline-end: var(--sp1-5); |
|
||||||
color: var(--color--white); |
|
||||||
outline: solid 1px transparent; |
|
||||||
background-color: var(--color--gray-5); |
|
||||||
|
|
||||||
& * { |
|
||||||
color: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
/* Additional specificity to override contrib modules. */ |
|
||||||
&.messages-list__item { |
|
||||||
background-image: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.messages__list { |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
list-style: none; |
|
||||||
} |
|
||||||
|
|
||||||
.messages:not(.hidden) ~ .messages { |
|
||||||
margin-block-start: var(--sp1); |
|
||||||
} |
|
||||||
|
|
||||||
.messages__item + .messages__item { |
|
||||||
margin-block-start: var(--sp0-5); |
|
||||||
} |
|
||||||
|
|
||||||
.messages__container { |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
|
|
||||||
.messages__header { |
|
||||||
flex-shrink: 0; |
|
||||||
margin-inline-end: var(--sp1); |
|
||||||
|
|
||||||
&.no-icon { |
|
||||||
margin-inline-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.messages__content { |
|
||||||
overflow: auto; /* Ensure large code blocks can be scrolled to. */ |
|
||||||
flex: 1; |
|
||||||
padding-block-start: 3px; |
|
||||||
} |
|
||||||
|
|
||||||
.messages__button { |
|
||||||
flex-shrink: 0; |
|
||||||
margin-inline-start: var(--sp1); |
|
||||||
padding-block-start: 3px; |
|
||||||
} |
|
||||||
|
|
||||||
.messages__close { |
|
||||||
position: relative; |
|
||||||
width: 25px; |
|
||||||
height: 25px; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
cursor: pointer; |
|
||||||
vertical-align: top; |
|
||||||
border: 0; |
|
||||||
background: none; |
|
||||||
appearance: none; |
|
||||||
|
|
||||||
&::before, |
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
left: 50%; |
|
||||||
display: block; |
|
||||||
width: 33px; |
|
||||||
height: 0; |
|
||||||
content: ""; |
|
||||||
border-top: solid 2px var(--color--gray-60); |
|
||||||
} |
|
||||||
|
|
||||||
&::before { |
|
||||||
transform: translate(-50%, -50%) rotate(45deg); |
|
||||||
} |
|
||||||
|
|
||||||
&::after { |
|
||||||
transform: translate(-50%, -50%) rotate(-45deg); |
|
||||||
} |
|
||||||
|
|
||||||
&:hover { |
|
||||||
&::before, |
|
||||||
&::after { |
|
||||||
border-color: var(--color--white); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&:focus { |
|
||||||
outline: 2px solid var(--color--primary-60); |
|
||||||
outline-offset: 2px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.messages__icon svg { |
|
||||||
vertical-align: top; |
|
||||||
} |
|
||||||
|
|
||||||
.messages--error .messages__icon svg { |
|
||||||
fill: var(--color--red); |
|
||||||
} |
|
||||||
|
|
||||||
.messages--warning .messages__icon svg { |
|
||||||
fill: var(--color--gold); |
|
||||||
} |
|
||||||
|
|
||||||
.messages--status .messages__icon svg { |
|
||||||
fill: var(--color--green); |
|
||||||
} |
|
||||||
|
|
||||||
.messages--info .messages__icon svg { |
|
||||||
fill: var(--color--primary-60); |
|
||||||
} |
|
||||||
|
|
||||||
.messages a { |
|
||||||
color: var(--color--white); |
|
||||||
} |
|
||||||
|
|
||||||
.messages pre { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.js-form-managed-file .messages { |
|
||||||
margin-block-end: var(--sp1); |
|
||||||
border-inline-start: solid 6px var(--color--red); |
|
||||||
} |
|
||||||
@ -1,34 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Node preview container styling. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.node-preview-container { |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: var(--sp0-5); |
|
||||||
padding-inline-end: var(--sp0-5); |
|
||||||
background: var(--color--white); |
|
||||||
box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */ |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .node-preview-container { |
|
||||||
box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08); |
|
||||||
} |
|
||||||
|
|
||||||
.toolbar-vertical.toolbar-tray-open .node-preview-container { |
|
||||||
max-width: calc(100vw - var(--toolbar-tray-vertical-width) - var(--scrollbar-width)); |
|
||||||
} |
|
||||||
|
|
||||||
.node-preview-form-select { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.node-preview-backlink { |
|
||||||
margin-block: var(--sp0-5); |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: auto; |
|
||||||
} |
|
||||||
@ -1,116 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Node Teaser specific styles. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.node--view-mode-teaser { |
|
||||||
position: relative; /* Anchor after pseudo-element. */ |
|
||||||
margin-block-end: var(--sp1-5); |
|
||||||
|
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
inset-block-end: 0; |
|
||||||
width: var(--sp3); |
|
||||||
height: 0; |
|
||||||
content: ""; |
|
||||||
/* Intentionally not using CSS logical properties. */ |
|
||||||
border-top: solid 2px var(--color--gray-95); |
|
||||||
} |
|
||||||
|
|
||||||
& .node__meta { |
|
||||||
margin-block-end: var(--sp); |
|
||||||
|
|
||||||
& a { |
|
||||||
color: var(--color-text-primary-medium); |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .node__top-wrapper { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
align-items: center; |
|
||||||
margin: 0; |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
position: relative; /* Anchor the image */ |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .primary-image { |
|
||||||
flex-shrink: 0; |
|
||||||
margin: 0; |
|
||||||
margin-block-end: var(--sp1); |
|
||||||
margin-inline-end: var(--sp1); |
|
||||||
|
|
||||||
/* Ensure title does not wrap under image until necessary. */ |
|
||||||
& + .node__title { |
|
||||||
flex-basis: calc(100% - calc(4.5 * var(--sp))); |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
flex-basis: auto; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& a { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
& img { |
|
||||||
width: calc(3.5 * var(--sp)); |
|
||||||
height: calc(3.5 * var(--sp)); |
|
||||||
object-fit: cover; |
|
||||||
border-radius: 50%; |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
width: var(--grid-col-width); |
|
||||||
height: var(--grid-col-width); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
position: absolute; |
|
||||||
inset-block-start: 0; |
|
||||||
inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .node__title { |
|
||||||
margin: 0; |
|
||||||
margin-block-end: var(--sp1); |
|
||||||
color: var(--color-text-neutral-loud); |
|
||||||
font-size: 24px; |
|
||||||
line-height: var(--line-height-base); |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
font-size: var(--sp2); |
|
||||||
line-height: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .field--tag-ref { |
|
||||||
margin-block-start: var(--sp1); |
|
||||||
margin-block-end: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
background-color: transparent; |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
margin-block-start: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
margin-block-end: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.views-row:last-child .node--view-mode-teaser { |
|
||||||
margin-block-end: 0; |
|
||||||
} |
|
||||||
@ -1,67 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Node specific styles. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.node__meta { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
margin-block-end: var(--sp1); |
|
||||||
color: var(--color-text-neutral-soft); |
|
||||||
font-size: 14px; |
|
||||||
line-height: var(--sp); |
|
||||||
|
|
||||||
& a { |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--sm) { |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.node__author-image img { |
|
||||||
width: var(--sp2-5); |
|
||||||
height: var(--sp2-5); |
|
||||||
margin-inline-end: var(--sp0-5); |
|
||||||
object-fit: cover; |
|
||||||
border-radius: 50%; |
|
||||||
} |
|
||||||
|
|
||||||
.node__title { |
|
||||||
& a { |
|
||||||
padding-block-end: 3px; |
|
||||||
transition: background-size 0.2s, color 0.2s; |
|
||||||
text-decoration: none; |
|
||||||
color: var(--color-text-neutral-loud); |
|
||||||
background-color: transparent; |
|
||||||
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: bottom left; /* LTR */ |
|
||||||
background-size: 0 3px; |
|
||||||
|
|
||||||
&:hover, |
|
||||||
&:focus { |
|
||||||
color: var(--color-text-primary-medium); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .node__title { |
|
||||||
background-position: bottom right; |
|
||||||
} |
|
||||||
|
|
||||||
.node__content { |
|
||||||
padding-block-end: var(--sp1-5); |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
padding-block-end: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.node--unpublished { |
|
||||||
/* There is no variable for the color - #fff4f4. */ |
|
||||||
background-color: #fff4f4; |
|
||||||
} |
|
||||||
@ -1,14 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Page title. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.page-title { |
|
||||||
/* |
|
||||||
Necessary to properly display the star icon from core's shortcut |
|
||||||
module. |
|
||||||
*/ |
|
||||||
display: inline; |
|
||||||
} |
|
||||||
@ -1,82 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Styles for pagination. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.pager__items { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
align-items: flex-end; |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
list-style: none; |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
|
|
||||||
.pager__item { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
width: var(--sp2-5); |
|
||||||
height: var(--sp2-5); |
|
||||||
cursor: default; |
|
||||||
color: var(--color-text-neutral-soft); |
|
||||||
background-color: var(--color--white); |
|
||||||
|
|
||||||
@media (--sm) { |
|
||||||
width: var(--sp3); |
|
||||||
height: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .pager__item--control { |
|
||||||
transform: scaleX(-1); |
|
||||||
} |
|
||||||
|
|
||||||
.pager__item--active { |
|
||||||
color: var(--color--white); |
|
||||||
background-color: var(--color--primary-40); |
|
||||||
} |
|
||||||
|
|
||||||
.pager__item--control { |
|
||||||
@media (forced-colors: active) { |
|
||||||
& path { |
|
||||||
fill: linktext; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.pager__link { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
text-decoration: none; |
|
||||||
color: var(--color-text-neutral-soft); |
|
||||||
} |
|
||||||
|
|
||||||
.pager__link:hover { |
|
||||||
background-color: var(--color--gray-95); |
|
||||||
} |
|
||||||
|
|
||||||
.pager__link:focus { |
|
||||||
color: var(--color-text-primary-medium); |
|
||||||
outline: solid 2px currentColor; |
|
||||||
outline-offset: -2px; |
|
||||||
} |
|
||||||
|
|
||||||
.pager__item svg { |
|
||||||
display: block; |
|
||||||
fill: currentColor; |
|
||||||
} |
|
||||||
|
|
||||||
.pager__item--next svg, |
|
||||||
.pager__item--last svg { |
|
||||||
transform: rotate(180deg); |
|
||||||
} |
|
||||||
@ -1,44 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Powered by block specific styles. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.block-system-powered-by-block { |
|
||||||
letter-spacing: 0.02em; |
|
||||||
font-size: 14px; |
|
||||||
line-height: var(--sp); |
|
||||||
|
|
||||||
& a { |
|
||||||
text-decoration: underline; |
|
||||||
|
|
||||||
&:hover, |
|
||||||
&:focus { |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .drupal-logo { |
|
||||||
display: inline-block; |
|
||||||
margin-block-start: calc(-1 * var(--sp) / 4); |
|
||||||
margin-inline-start: calc(var(--sp) / 4); |
|
||||||
} |
|
||||||
|
|
||||||
& svg { |
|
||||||
width: 0.875rem; /* 14 */ |
|
||||||
height: 1.1875rem; /* 19 */ |
|
||||||
vertical-align: top; |
|
||||||
fill: currentColor; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.site-footer .block-system-powered-by-block { |
|
||||||
& a { |
|
||||||
color: var(--color--white); |
|
||||||
} |
|
||||||
|
|
||||||
& svg path { |
|
||||||
fill: var(--color--white); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Progress bar specific styles. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.progress__track { |
|
||||||
overflow: hidden; |
|
||||||
height: var(--sp); |
|
||||||
border: 1px solid var(--color--primary-40); |
|
||||||
border-radius: var(--border-radius); |
|
||||||
} |
|
||||||
|
|
||||||
.progress__bar { |
|
||||||
height: var(--sp); |
|
||||||
background-color: var(--color--primary-40); |
|
||||||
} |
|
||||||
|
|
||||||
.progress__percentage { |
|
||||||
margin-inline-start: 1rem; |
|
||||||
} |
|
||||||
@ -1,97 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Search results specific styles. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.search-results { |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
list-style: none; |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
margin-block-end: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.search-result__title { |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
color: var(--color-text-neutral-loud); |
|
||||||
font-size: 20px; |
|
||||||
line-height: var(--line-height-base); |
|
||||||
|
|
||||||
& a { |
|
||||||
padding-block-end: 3px; |
|
||||||
transition: background-size 0.2s, color 0.2s; |
|
||||||
text-decoration: none; |
|
||||||
background-color: transparent; |
|
||||||
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: bottom left; /* LTR */ |
|
||||||
background-size: 0 3px; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
color: var(--color-text-primary-medium); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
margin-block-end: var(--sp1); |
|
||||||
font-size: 30px; |
|
||||||
line-height: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .search-result__title a { |
|
||||||
background-position: bottom right; |
|
||||||
} |
|
||||||
|
|
||||||
.search-result__snippet { |
|
||||||
padding-block-end: calc(var(--sp1-5) - 2px); |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
padding-block-end: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.search-result__meta { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
margin-block-end: var(--sp1); |
|
||||||
color: var(--color-text-neutral-soft); |
|
||||||
font-size: 14px; |
|
||||||
line-height: var(--sp); |
|
||||||
|
|
||||||
& a { |
|
||||||
color: var(--color-text-primary-medium); |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.search-results__item { |
|
||||||
position: relative; /* Anchor after pseudo-element. */ |
|
||||||
margin-block-end: var(--sp1-5); |
|
||||||
|
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
inset-block-end: 0; |
|
||||||
width: var(--sp3); |
|
||||||
height: 0; |
|
||||||
content: ""; |
|
||||||
/* Intentionally not using CSS logical properties. */ |
|
||||||
border-top: solid 2px var(--color--gray-95); |
|
||||||
} |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
margin-block-end: 0; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
margin-block-end: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,104 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Site header. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.site-header { |
|
||||||
position: relative; |
|
||||||
/** |
|
||||||
* Ensure mobile site header is always above other elements including |
|
||||||
* contextual links, and Tour. |
|
||||||
*/ |
|
||||||
z-index: 101; |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
/* Necessary to keep the content from jumping up when header transitions to fixed. */ |
|
||||||
min-height: var(--site-header-height-wide); |
|
||||||
border-block-end: solid 1px transparent; /* Will show in Windows high contrast mode. */ |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.site-header__initial { |
|
||||||
position: relative; |
|
||||||
z-index: 102; |
|
||||||
display: flex; |
|
||||||
align-items: flex-end; |
|
||||||
align-self: stretch; |
|
||||||
background-color: var(--color--primary-50); |
|
||||||
} |
|
||||||
|
|
||||||
.site-header__fixable { |
|
||||||
display: flex; |
|
||||||
align-items: flex-end; |
|
||||||
transition: all 0.5s; |
|
||||||
|
|
||||||
&.is-fixed { |
|
||||||
@media (--nav) { |
|
||||||
&:not(.is-expanded) { |
|
||||||
pointer-events: none; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
body:not(.is-always-mobile-nav) { |
|
||||||
& .site-header__fixable.is-fixed { |
|
||||||
position: fixed; |
|
||||||
z-index: 102; /* Appear above body content that is position: relative */ |
|
||||||
inset-block-start: calc(var(--drupal-displace-offset-top, 0px) - var(--sp4)); |
|
||||||
max-width: var(--max-bg-color); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.site-header__inner { |
|
||||||
position: relative; |
|
||||||
z-index: 1; /* Appear in front of Drupal's tabs. */ |
|
||||||
flex-grow: 1; |
|
||||||
width: calc(100vw - var(--content-left) - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px)); |
|
||||||
background: var(--color--white); |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
* Only apply transition styles when JS is loaded. This |
|
||||||
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189 |
|
||||||
*/ |
|
||||||
html.js body:not(.is-always-mobile-nav) .site-header__inner { |
|
||||||
@media (--nav) { |
|
||||||
transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.site-header__fixable.is-expanded .site-header__inner { |
|
||||||
@media (--nav) { |
|
||||||
box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */ |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] .site-header__fixable.is-expanded .site-header__inner { |
|
||||||
@media (--nav) { |
|
||||||
box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Hide the desktop nav when it's fixed and not active. */ |
|
||||||
body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner { |
|
||||||
@media (--nav) { |
|
||||||
transform: translateX(-101%); /* LTR */ |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner { |
|
||||||
@media (--nav) { |
|
||||||
transform: translateX(101%); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.site-header__inner__container { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
@ -1,38 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Skip link |
|
||||||
* |
|
||||||
* Allows keyboard users to quickly skip to the main content of the page. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.skip-link { |
|
||||||
display: block; |
|
||||||
width: 100%; |
|
||||||
max-width: var(--max-bg-color); |
|
||||||
padding-block: var(--sp0-5); |
|
||||||
padding-inline-start: var(--sp); |
|
||||||
padding-inline-end: var(--sp); |
|
||||||
text-decoration: none; |
|
||||||
color: var(--color--white); |
|
||||||
outline: 0; |
|
||||||
background-color: var(--color--gray-5); |
|
||||||
|
|
||||||
&:hover { |
|
||||||
text-decoration: underline; |
|
||||||
color: var(--color--white); |
|
||||||
} |
|
||||||
|
|
||||||
&::after { |
|
||||||
content: "\0020 ➔"; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.skip-link.focusable:focus { |
|
||||||
position: absolute !important; /* Override position from module file. */ |
|
||||||
z-index: 503; |
|
||||||
width: 100%; |
|
||||||
height: 40px; |
|
||||||
outline: none; |
|
||||||
} |
|
||||||
@ -1,93 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* User generated tables. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.forum table, |
|
||||||
.text-content table, |
|
||||||
.views-table, |
|
||||||
.draggable-table { |
|
||||||
margin-block-start: var(--sp2); |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
border-spacing: 0; |
|
||||||
color: var(--color-text-neutral-medium); |
|
||||||
border: 0; |
|
||||||
border-collapse: collapse; |
|
||||||
font-family: var(--font-sans); |
|
||||||
font-size: 16px; |
|
||||||
line-height: var(--sp1-5); |
|
||||||
|
|
||||||
& caption { |
|
||||||
margin-block-end: var(--sp1); |
|
||||||
text-align: start; |
|
||||||
color: var(--color-text-neutral-medium); |
|
||||||
font-family: var(--font-serif); |
|
||||||
font-size: 14px; |
|
||||||
font-style: italic; |
|
||||||
line-height: var(--sp); |
|
||||||
} |
|
||||||
|
|
||||||
& tr { |
|
||||||
&:last-child { |
|
||||||
& td { |
|
||||||
border-block-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& td, |
|
||||||
& th { |
|
||||||
padding-block: var(--sp1); |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: var(--sp1); |
|
||||||
vertical-align: top; |
|
||||||
} |
|
||||||
|
|
||||||
& th { |
|
||||||
margin-block: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
text-align: start; |
|
||||||
letter-spacing: 0.02em; |
|
||||||
color: var(--color-text-neutral-loud); |
|
||||||
border-block-end: 2px solid var(--color--primary-50); |
|
||||||
font-family: var(--font-sans); |
|
||||||
font-size: 14px; |
|
||||||
line-height: var(--sp); |
|
||||||
} |
|
||||||
|
|
||||||
& td { |
|
||||||
white-space: normal; |
|
||||||
border-block-end: 2px solid var(--color--gray-65); |
|
||||||
} |
|
||||||
|
|
||||||
& th.checkbox, |
|
||||||
& td.checkbox { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.draggable-table { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.draggable-table .form-item { |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.tablesort { |
|
||||||
vertical-align: middle; |
|
||||||
} |
|
||||||
|
|
||||||
.sticky-header { |
|
||||||
z-index: 0; |
|
||||||
margin: 0; |
|
||||||
border-block-end: 4px solid var(--color--primary-50); |
|
||||||
} |
|
||||||
|
|
||||||
/* Properly align VBO checkboxes. */ |
|
||||||
.views-field-node-bulk-form .form-item { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
@ -1,54 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Styles for tabledrag. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.draggable:hover { |
|
||||||
background-color: var(--color--gray-100); |
|
||||||
} |
|
||||||
|
|
||||||
.draggable.drag { |
|
||||||
background-color: var(--color--gray-100); |
|
||||||
} |
|
||||||
|
|
||||||
.draggable.drag-previous { |
|
||||||
background-color: var(--color--gray-95); |
|
||||||
} |
|
||||||
|
|
||||||
.drag-previous a { |
|
||||||
color: var(--color-text-neutral-medium); /* Ensure proper contrast. */ |
|
||||||
} |
|
||||||
|
|
||||||
a.tabledrag-handle, |
|
||||||
.touchevents a.tabledrag-handle { |
|
||||||
width: 36px; |
|
||||||
height: 36px; |
|
||||||
} |
|
||||||
|
|
||||||
.draggable a.tabledrag-handle { |
|
||||||
margin-inline-start: 0; |
|
||||||
} |
|
||||||
|
|
||||||
a.tabledrag-handle .handle { |
|
||||||
width: var(--sp2); |
|
||||||
height: var(--sp2); |
|
||||||
margin: 0; |
|
||||||
background-position: 50% 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.touchevents a.tabledrag-handle .handle { |
|
||||||
height: var(--sp2); |
|
||||||
background-position: 50% 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.touchevents .draggable td { |
|
||||||
padding-block: var(--sp0-5); |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: var(--sp0-5); |
|
||||||
} |
|
||||||
|
|
||||||
.touchevents .draggable .menu-item__link { |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
@ -1,205 +0,0 @@ |
|||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
/* Breakpoint where tabs switch between vertical and horizontal layouts. */ |
|
||||||
@custom-media --tabs-layout-switch (--md); |
|
||||||
|
|
||||||
.tabs { |
|
||||||
--tabs-height: var(--sp3); |
|
||||||
--tabs-padding-inline: var(--sp1-5); |
|
||||||
--tabs-active-border-size: 6px; |
|
||||||
--tabs-highlight-color: var(--color--primary-50); /* Minimum 3:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ |
|
||||||
--tabs-text-color: var(--color-text-neutral-soft); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ |
|
||||||
--tabs-text-color-active: var(--color--gray-5); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ |
|
||||||
--tabs-letter-spacing: 1px; |
|
||||||
--tabs-font-size: var(--font-size-s); |
|
||||||
--tabs-background-color: var(--color--gray-100); |
|
||||||
--tabs-background-color-hover: var(--color--gray-95); |
|
||||||
--tabs-border-width: 1px; |
|
||||||
--tabs-border-color: var(--color--gray-95); |
|
||||||
--tabs-transition-duration: 0.2s; |
|
||||||
|
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
width: 100%; |
|
||||||
margin: 0; |
|
||||||
margin-inline-start: 0; /* Override [dir] attribute in base <ul> in compiled CSS. */ |
|
||||||
padding: 0; |
|
||||||
list-style: none; |
|
||||||
|
|
||||||
@media (--tabs-layout-switch) { |
|
||||||
flex-direction: row; |
|
||||||
flex-wrap: wrap; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.tabs__tab { |
|
||||||
display: none; |
|
||||||
margin: 0; |
|
||||||
margin-block-end: calc(-1 * var(--tabs-border-width)); |
|
||||||
|
|
||||||
&.is-active { |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--tabs-layout-switch) { |
|
||||||
display: flex; |
|
||||||
margin-block-end: 0; |
|
||||||
margin-inline-start: calc(-1 * var(--tabs-border-width)); |
|
||||||
} |
|
||||||
|
|
||||||
/* Show tabs when JavaScript disabled. */ |
|
||||||
@nest html:not(.js) & { |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
|
|
||||||
/* Show tabs when tabs-expanded class is present. */ |
|
||||||
@nest .tabs.is-expanded & { |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
|
|
||||||
/* Secondary tabs will always be expanded. */ |
|
||||||
@nest .tabs--secondary & { |
|
||||||
display: block; |
|
||||||
|
|
||||||
@media (--tabs-layout-switch) { |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.tabs__link { |
|
||||||
display: flex; |
|
||||||
flex-grow: 1; |
|
||||||
align-items: center; |
|
||||||
height: var(--tabs-height); |
|
||||||
padding-block: 0; |
|
||||||
padding-inline: var(--tabs-padding-inline); |
|
||||||
transition: background-color var(--tabs-transition-duration); |
|
||||||
text-decoration: none; |
|
||||||
letter-spacing: var(--tabs-letter-spacing); |
|
||||||
color: var(--tabs-text-color); |
|
||||||
border: var(--tabs-border-width) solid var(--tabs-border-color); |
|
||||||
background-color: var(--tabs-background-color); |
|
||||||
font-size: var(--tabs-font-size); |
|
||||||
|
|
||||||
&:hover { |
|
||||||
color: var(--tabs-text-color-active); |
|
||||||
background-color: var(--tabs-background-color-hover); |
|
||||||
} |
|
||||||
|
|
||||||
&:focus { |
|
||||||
position: relative; |
|
||||||
outline: solid 3px var(--tabs-highlight-color); |
|
||||||
outline-offset: -3px; |
|
||||||
} |
|
||||||
|
|
||||||
&.is-active { |
|
||||||
position: relative; /* Anchor ::after pseudo-element. */ |
|
||||||
color: var(--tabs-text-color-active); |
|
||||||
font-weight: 600; |
|
||||||
|
|
||||||
/* |
|
||||||
* We use ::after pseudo-element in place of border so edges do not appear |
|
||||||
* diagonally cut off due to other edges with transparent borders. |
|
||||||
*/ |
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
inset-block-start: calc(-1 * var(--tabs-border-width)); |
|
||||||
inset-inline-start: calc(-1 * var(--tabs-border-width)); |
|
||||||
height: calc(100% + var(--tabs-border-width) * 2); |
|
||||||
content: ""; |
|
||||||
border-inline-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color); |
|
||||||
|
|
||||||
@media (--tabs-layout-switch) { |
|
||||||
inset-block: auto calc(-1 * var(--tabs-border-width)); |
|
||||||
width: calc(100% + 2 * var(--tabs-border-width)); |
|
||||||
height: 0; |
|
||||||
border-block-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color); |
|
||||||
border-inline-start: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* No regular borders or background color for secondary tab links. */ |
|
||||||
@nest .tabs--secondary & { |
|
||||||
@media (--tabs-layout-switch) { |
|
||||||
border-color: transparent; |
|
||||||
background-color: transparent; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Button that opens and closes primary tabs at narrow viewports. */ |
|
||||||
.tabs__trigger { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
width: var(--tabs-height); |
|
||||||
margin-block: 0; |
|
||||||
margin-inline: calc(-1 * var(--tabs-border-width)) 0; |
|
||||||
cursor: pointer; |
|
||||||
border: solid var(--tabs-border-width) var(--tabs-border-color); |
|
||||||
background-color: var(--tabs-background-color); |
|
||||||
|
|
||||||
&:hover { |
|
||||||
background-color: var(--tabs-background-color-hover); |
|
||||||
} |
|
||||||
|
|
||||||
&:focus { |
|
||||||
position: relative; |
|
||||||
border-color: var(--tabs-highlight-color); |
|
||||||
outline: none; |
|
||||||
} |
|
||||||
|
|
||||||
/* Button will not work when JavaScript is disabled, so we hide it. */ |
|
||||||
@nest html:not(.js) & { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--tabs-layout-switch) { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.tabs__trigger-icon { |
|
||||||
position: relative; |
|
||||||
display: block; |
|
||||||
width: var(--sp); |
|
||||||
height: 10px; |
|
||||||
margin-block-start: calc(-2 * var(--tabs-border-width)); |
|
||||||
|
|
||||||
& > span { |
|
||||||
position: absolute; |
|
||||||
inset-inline-start: 0; |
|
||||||
display: block; |
|
||||||
width: 100%; |
|
||||||
transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration); |
|
||||||
border-block-start: solid 2px var(--tabs-highlight-color); |
|
||||||
|
|
||||||
&:nth-child(1) { |
|
||||||
inset-block-start: 0; |
|
||||||
|
|
||||||
@nest .tabs__trigger[aria-expanded="true"] & { |
|
||||||
inset-block-start: calc(50% + 1px); |
|
||||||
transform: rotate(45deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&:nth-child(2) { |
|
||||||
inset-block-start: calc(50% + 1px); |
|
||||||
|
|
||||||
@nest .tabs__trigger[aria-expanded="true"] & { |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&:nth-child(3) { |
|
||||||
inset-block-start: calc(100% + 2px); |
|
||||||
|
|
||||||
@nest .tabs__trigger[aria-expanded="true"] & { |
|
||||||
inset-block-start: calc(50% + 1px); |
|
||||||
transform: rotate(-45deg); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,83 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Tags field styling. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.field--tags { |
|
||||||
display: flex; |
|
||||||
font-family: var(--font-sans); |
|
||||||
} |
|
||||||
|
|
||||||
.field--tags__label { |
|
||||||
margin: 0; |
|
||||||
margin-inline-end: calc(var(--sp1-5) - (var(--sp0-5) / 2)); |
|
||||||
letter-spacing: 0.02em; |
|
||||||
color: var(--color-text-neutral-soft); |
|
||||||
font-size: var(--font-size-s); |
|
||||||
font-weight: 600; |
|
||||||
line-height: 1.6; |
|
||||||
|
|
||||||
&::after { |
|
||||||
content: ":"; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
line-height: 2; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.field--label-inline .field--tags__label { |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.field--tags__items { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
margin-block: calc((var(--sp0-5) / 2) * -1); |
|
||||||
margin-inline-start: calc((var(--sp0-5) / 2) * -1); |
|
||||||
margin-inline-end: calc((var(--sp0-5) / 2) * -1); |
|
||||||
padding-block: 0; |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
list-style: none; |
|
||||||
} |
|
||||||
|
|
||||||
.field--tags__item { |
|
||||||
display: flex; |
|
||||||
margin-block: calc(var(--sp0-5) / 2); |
|
||||||
margin-inline-start: calc(var(--sp0-5) / 2); |
|
||||||
margin-inline-end: calc(var(--sp0-5) / 2); |
|
||||||
} |
|
||||||
|
|
||||||
.field--tags__item:nth-last-child(n+2)::after { |
|
||||||
content: ","; |
|
||||||
font-size: var(--font-size-base); |
|
||||||
line-height: 1.5; |
|
||||||
} |
|
||||||
|
|
||||||
.field--tags__item a { |
|
||||||
position: relative; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
text-decoration: none; |
|
||||||
letter-spacing: 0.02em; |
|
||||||
color: var(--color-text-primary-medium); |
|
||||||
font-size: var(--font-size-base); |
|
||||||
font-weight: 700; |
|
||||||
line-height: 1.5; |
|
||||||
} |
|
||||||
|
|
||||||
.node--view-mode-full { |
|
||||||
& .field--tags { |
|
||||||
margin-block-start: var(--sp4); |
|
||||||
margin-block-end: var(--sp4); |
|
||||||
padding-block: var(--sp1-5); |
|
||||||
padding-inline-start: var(--sp2); |
|
||||||
padding-inline-end: var(--sp2); |
|
||||||
background-color: var(--color--gray-100); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,153 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Text Content. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.text-content, |
|
||||||
.cke_editable { |
|
||||||
color: var(--color-text-neutral-medium); |
|
||||||
font-family: var(--font-serif); |
|
||||||
line-height: var(--sp1-5); |
|
||||||
|
|
||||||
/* |
|
||||||
@todo |
|
||||||
|
|
||||||
text-decoration-thickness is supported by FF & Safari |
|
||||||
text-underline-offset is supported by Safari |
|
||||||
|
|
||||||
text-decoration-color supported by Chrome, FF, & Safari |
|
||||||
*/ |
|
||||||
|
|
||||||
& a:where(:not(.button)) { |
|
||||||
color: var(--color-text-primary-medium); |
|
||||||
text-decoration-color: currentColor; |
|
||||||
text-decoration-thickness: 2px; |
|
||||||
overflow-wrap: break-word; |
|
||||||
|
|
||||||
@supports (box-shadow: none) { |
|
||||||
transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99); |
|
||||||
text-decoration: none; |
|
||||||
box-shadow: inset 0 -2px 0 0 var(--color--primary-50); |
|
||||||
|
|
||||||
&:hover { |
|
||||||
text-decoration: underline; |
|
||||||
color: var(--color--black); |
|
||||||
box-shadow: inset 0 -2em 0 0 var(--color--primary-80); |
|
||||||
text-decoration-color: var(--color--primary-80); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& p { |
|
||||||
margin-block-start: var(--sp); |
|
||||||
margin-block-end: var(--sp); |
|
||||||
|
|
||||||
&:first-child { |
|
||||||
margin-block-start: 0; |
|
||||||
} |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
margin-block-end: 0; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
margin-block-start: var(--sp2); |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& code { |
|
||||||
background-color: var(--color--gray-100); |
|
||||||
} |
|
||||||
|
|
||||||
& pre code { |
|
||||||
display: block; |
|
||||||
overflow: auto; |
|
||||||
padding-block: var(--sp); |
|
||||||
padding-inline-start: var(--sp); |
|
||||||
padding-inline-end: var(--sp); |
|
||||||
color: var(--color-text-neutral-soft); |
|
||||||
} |
|
||||||
|
|
||||||
& blockquote { |
|
||||||
position: relative; |
|
||||||
margin-block: var(--sp2); |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
padding-inline-start: var(--sp2); |
|
||||||
letter-spacing: -0.01em; |
|
||||||
font-family: var(--font-serif); |
|
||||||
font-size: 21px; |
|
||||||
line-height: var(--sp2); |
|
||||||
|
|
||||||
&::before { |
|
||||||
position: absolute; |
|
||||||
inset-block-start: 0; |
|
||||||
inset-inline-start: 0; |
|
||||||
content: "\201C"; |
|
||||||
color: var(--color--primary-60); |
|
||||||
font-size: 54px; |
|
||||||
} |
|
||||||
|
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
inset-block-end: 0; |
|
||||||
inset-inline-start: 0; |
|
||||||
width: var(--sp0-5); |
|
||||||
height: calc(100% - 30px); |
|
||||||
margin-inline-start: 4px; |
|
||||||
content: ""; |
|
||||||
background: var(--color--gray-100); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
font-size: 32px; |
|
||||||
line-height: var(--sp3); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
font-size: 40px; |
|
||||||
line-height: calc(3.5 * var(--sp)); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
font-size: 18px; |
|
||||||
line-height: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Special colors for footer that has a dark background. |
|
||||||
*/ |
|
||||||
.site-footer .text-content { |
|
||||||
color: inherit; |
|
||||||
|
|
||||||
& * { |
|
||||||
color: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
& a { |
|
||||||
text-decoration: underline; |
|
||||||
color: var(--color--white); |
|
||||||
box-shadow: none; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
text-decoration: none; |
|
||||||
color: var(--color--white); |
|
||||||
box-shadow: none; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Decrease font-size for blockquote placed in sidebar region. |
|
||||||
*/ |
|
||||||
.region--sidebar .text-content blockquote { |
|
||||||
@media (--lg) { |
|
||||||
font-size: 24px; |
|
||||||
line-height: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,30 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Styles for jQuery UI dialog. |
|
||||||
*/ |
|
||||||
|
|
||||||
.ui-dialog { |
|
||||||
& .ui-dialog-buttonpane { |
|
||||||
padding-inline-start: 0.2em; |
|
||||||
padding-inline-end: 0.2em; |
|
||||||
|
|
||||||
& .ui-dialog-buttonset { |
|
||||||
display: flex; |
|
||||||
float: none; |
|
||||||
flex-wrap: wrap; |
|
||||||
gap: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
& button { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.ui-widget-overlay { |
|
||||||
z-index: 1259; |
|
||||||
} |
|
||||||
|
|
||||||
.ui-dialog { |
|
||||||
z-index: 1260; |
|
||||||
} |
|
||||||
@ -1,98 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Vertical Tabs. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
:root { |
|
||||||
--vertical-tabs-menu-width: 15rem; |
|
||||||
--vertical-tabs-menu-border-width: 1px; |
|
||||||
} |
|
||||||
|
|
||||||
.vertical-tabs { |
|
||||||
@media (--lg) { |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.vertical-tabs__menu { |
|
||||||
position: relative; |
|
||||||
align-self: flex-start; |
|
||||||
margin: 0; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
list-style: none; |
|
||||||
border-width: var(--vertical-tabs-menu-border-width); |
|
||||||
border-style: solid; |
|
||||||
border-color: var(--color--gray-95); |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
width: var(--vertical-tabs-menu-width); |
|
||||||
border-width: var(--vertical-tabs-menu-border-width) 0 var(--vertical-tabs-menu-border-width) var(--vertical-tabs-menu-border-width); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.vertical-tabs__panes { |
|
||||||
margin-block-start: calc(var(--vertical-tabs-menu-border-width) * -1); |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
width: calc(100% - var(--vertical-tabs-menu-width)); |
|
||||||
margin-block-start: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.vertical-tabs__pane { |
|
||||||
@media (--lg) { |
|
||||||
min-height: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.vertical-tabs__pane.oliveskln-details { |
|
||||||
margin: 0; |
|
||||||
border-radius: 0; |
|
||||||
box-shadow: none; |
|
||||||
} |
|
||||||
|
|
||||||
.vertical-tabs__pane > summary { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.vertical-tabs__menu-item:nth-child(n+2) { |
|
||||||
border-block-start: var(--vertical-tabs-menu-border-width) solid var(--color--gray-95); |
|
||||||
} |
|
||||||
|
|
||||||
.vertical-tabs__menu-item a { |
|
||||||
display: block; |
|
||||||
padding-block: var(--sp0-5); |
|
||||||
padding-inline-start: var(--sp0-75); |
|
||||||
padding-inline-end: var(--sp0-75); |
|
||||||
text-decoration: none; |
|
||||||
color: var(--color-text-primary-loud); |
|
||||||
background-color: var(--color--gray-95); |
|
||||||
|
|
||||||
&:focus, |
|
||||||
&:hover, |
|
||||||
&:active { |
|
||||||
background-color: var(--color--gray-100); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.vertical-tabs__menu-item.is-selected { |
|
||||||
background-color: var(--color--white); |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
margin-inline-end: calc(var(--vertical-tabs-menu-border-width) * -1); |
|
||||||
padding-inline-end: var(--vertical-tabs-menu-border-width); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.vertical-tabs__menu-item.is-selected a { |
|
||||||
background-color: transparent; |
|
||||||
} |
|
||||||
|
|
||||||
.vertical-tabs__menu-item-summary { |
|
||||||
display: block; |
|
||||||
font-size: var(--font-size-s); |
|
||||||
line-height: var(--line-height-s); |
|
||||||
} |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Wide image component. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.wide-image { |
|
||||||
margin-block-start: var(--sp0-5); |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap)); |
|
||||||
margin-block: var(--sp2) var(--sp4); |
|
||||||
margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap)); |
|
||||||
margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap))); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Ensure that image doesn't overlap sidebar. */ |
|
||||||
.sidebar-grid .wide-image { |
|
||||||
@media (--lg) { |
|
||||||
width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap)); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--xl) { |
|
||||||
width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap)); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Ensure that image doesn't overlap layout builder sections when editing layouts. */ |
|
||||||
.layout-builder .wide-image { |
|
||||||
max-width: 100%; |
|
||||||
margin-inline-start: 0; |
|
||||||
margin-inline-end: 0; |
|
||||||
} |
|
||||||
@ -1,50 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Grid system. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.grid-full { |
|
||||||
display: grid; |
|
||||||
grid-template-rows: 1fr; |
|
||||||
grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr)); |
|
||||||
grid-column-gap: var(--grid-gap); |
|
||||||
|
|
||||||
/* .grid-full classes nested 3 or more deep go full width. */ |
|
||||||
& .grid-full .grid-full { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
If the .grid-full is nested within the following, apply the appropriate number of columns. |
|
||||||
- .layout--content-narrow class. |
|
||||||
- Element that's inheriting the layout--content-narrow styles from its parent region. |
|
||||||
*/ |
|
||||||
.layout--content-narrow .grid-full, |
|
||||||
.layout--pass--content-narrow > * .grid-full { |
|
||||||
@media (--grid-md) { |
|
||||||
grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr)); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr)); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
If the .grid-full is nested within the following, apply the appropriate number of columns. |
|
||||||
- .layout--content-medium class. |
|
||||||
- Element that's inheriting the layout--content-medium styles from its parent region. |
|
||||||
*/ |
|
||||||
.layout--content-medium .grid-full, |
|
||||||
.layout--pass--content-medium > * .grid-full { |
|
||||||
@media (--grid-md) { |
|
||||||
grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr)); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr)); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,66 +0,0 @@ |
|||||||
/* |
|
||||||
* @file |
|
||||||
* Provides the layout styles for four-column layout section. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.layout--fourcol-section { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
|
|
||||||
& > .layout__region { |
|
||||||
flex: 1 0 100%; |
|
||||||
margin-block-end: var(--grid-gap); |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
flex-basis: calc(50% - (var(--grid-gap) * 0.5)); |
|
||||||
flex-grow: 0; |
|
||||||
flex-shrink: 0; |
|
||||||
margin-block-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Two column layout. */ |
|
||||||
@media (--md) { |
|
||||||
& > .layout__region--first, |
|
||||||
& > .layout__region--second { |
|
||||||
margin-block-end: var(--grid-gap); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--first, |
|
||||||
& > .layout__region--third { |
|
||||||
margin-inline-end: calc(var(--grid-gap) * 0.5); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--second, |
|
||||||
& > .layout__region--fourth { |
|
||||||
margin-inline-start: calc(var(--grid-gap) * 0.5); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Four column layout. */ |
|
||||||
@media (--lg) { |
|
||||||
& > .layout__region { |
|
||||||
flex-basis: calc(25% - (var(--grid-gap) * 0.75)); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--first, |
|
||||||
& > .layout__region--second { |
|
||||||
margin-block-end: 0; |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--first { |
|
||||||
margin-inline-end: calc(var(--grid-gap) * 0.5); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--second, |
|
||||||
& > .layout__region--third { |
|
||||||
margin-inline: calc(var(--grid-gap) * 0.5); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--fourth { |
|
||||||
margin-inline-start: calc(var(--grid-gap) * 0.5); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,79 +0,0 @@ |
|||||||
/* |
|
||||||
* @file |
|
||||||
* Provides the layout styles for three-column layout section. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.layout--threecol-section { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
|
|
||||||
& > .layout__region { |
|
||||||
flex: 1 0 100%; |
|
||||||
margin-block-end: var(--grid-gap); |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
flex-grow: 0; |
|
||||||
flex-shrink: 0; |
|
||||||
margin-block-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
.layout--threecol-section { |
|
||||||
& > .layout__region--first { |
|
||||||
margin-inline-end: calc(var(--grid-gap) * 0.5); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--second { |
|
||||||
margin-inline: calc(var(--grid-gap) * 0.5); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--third { |
|
||||||
margin-inline-start: calc(var(--grid-gap) * 0.5); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.layout--threecol-section--25-50-25 { |
|
||||||
& > .layout__region--first, |
|
||||||
& > .layout__region--third { |
|
||||||
flex-basis: calc(25% - (var(--grid-gap) * 0.5)); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--second { |
|
||||||
flex-basis: calc(50% - var(--grid-gap)); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.layout--threecol-section--25-25-50 { |
|
||||||
& > .layout__region--first, |
|
||||||
& > .layout__region--second { |
|
||||||
flex-basis: calc(25% - (var(--grid-gap) * 0.5)); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--third { |
|
||||||
flex-basis: calc(50% - var(--grid-gap)); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.layout--threecol-section--50-25-25 { |
|
||||||
& > .layout__region--first { |
|
||||||
flex-basis: calc(50% - var(--grid-gap)); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--second, |
|
||||||
& > .layout__region--third { |
|
||||||
flex-basis: calc(25% - (var(--grid-gap) * 0.5)); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.layout--threecol-section--33-34-33 { |
|
||||||
& > .layout__region--first, |
|
||||||
& > .layout__region--second, |
|
||||||
& > .layout__region--third { |
|
||||||
flex-basis: calc(33.33% - (var(--grid-gap) * 0.667)); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,84 +0,0 @@ |
|||||||
/* |
|
||||||
* @file |
|
||||||
* Provides the layout styles for two-column layout section. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.layout--twocol-section { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
|
|
||||||
& > .layout__region { |
|
||||||
flex: 1 0 100%; |
|
||||||
margin-block-end: var(--grid-gap); |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
flex-grow: 0; |
|
||||||
flex-shrink: 0; |
|
||||||
margin-block-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
.layout--twocol-section--50-50 { |
|
||||||
& > .layout__region--first { |
|
||||||
flex-basis: calc(50% - (var(--grid-gap) * 0.5)); |
|
||||||
margin-inline-end: calc(var(--grid-gap) * 0.5); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--second { |
|
||||||
flex-basis: calc(50% - (var(--grid-gap) * 0.5)); |
|
||||||
margin-inline-start: calc(var(--grid-gap) * 0.5); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.layout--twocol-section--33-67 { |
|
||||||
& > .layout__region--first { |
|
||||||
flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333)); |
|
||||||
margin-inline-end: calc(var(--grid-gap) * 0.3333); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--second { |
|
||||||
flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666)); |
|
||||||
margin-inline-start: calc(var(--grid-gap) * 0.6666); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.layout--twocol-section--67-33 { |
|
||||||
& > .layout__region--first { |
|
||||||
flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666)); |
|
||||||
margin-inline-end: calc(var(--grid-gap) * 0.6666); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--second { |
|
||||||
flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333)); |
|
||||||
margin-inline-start: calc(var(--grid-gap) * 0.3333); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.layout--twocol-section--25-75 { |
|
||||||
& > .layout__region--first { |
|
||||||
flex-basis: calc(25% - (var(--grid-gap) * 0.25)); |
|
||||||
margin-inline-end: calc(var(--grid-gap) * 0.25); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--second { |
|
||||||
flex-basis: calc(75% - (var(--grid-gap) * 0.75)); |
|
||||||
margin-inline-start: calc(var(--grid-gap) * 0.75); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.layout--twocol-section--75-25 { |
|
||||||
& > .layout__region--first { |
|
||||||
flex-basis: calc(75% - (var(--grid-gap) * 0.75)); |
|
||||||
margin-inline-end: calc(var(--grid-gap) * 0.75); |
|
||||||
} |
|
||||||
|
|
||||||
& > .layout__region--second { |
|
||||||
flex-basis: calc(25% - (var(--grid-gap) * 0.25)); |
|
||||||
margin-inline-start: calc(var(--grid-gap) * 0.25); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,39 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Grid system definition for the content wide layout. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.layout--content-medium, |
|
||||||
.layout--pass--content-medium > * { |
|
||||||
grid-column: 1 / 7; |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
grid-column: 2 / 14; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
grid-column: 3 / 13; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
If .layout--content-medium is nested within itself, or an element that's inheriting the |
|
||||||
layout--content-medium styles from its parent region, go full width within its |
|
||||||
parent .grid-full. |
|
||||||
*/ |
|
||||||
.layout--pass--content-medium > *, |
|
||||||
.layout--content-medium { |
|
||||||
& .layout--content-medium, |
|
||||||
& .layout--pass--content-medium > * { |
|
||||||
@media (--grid-md) { |
|
||||||
grid-column: 1 / 13; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
grid-column: 1 / 11; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,105 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Grid system definition for the content narrow layout. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.layout--content-narrow, |
|
||||||
.layout--pass--content-narrow > * { |
|
||||||
grid-column: 1 / 7; |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
grid-column: 2 / 14; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
grid-column: 3 / 11; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
If .layout--content-narrow is nested within any of the following, allocate the appropriate |
|
||||||
amount of columns within its parent .grid-full. |
|
||||||
- .layout--content-narrow class. |
|
||||||
- Element that's inheriting the layout--content-narrow styles from its parent region. |
|
||||||
- .layout--content-medium class. |
|
||||||
- Element that's inheriting the layout--content-medium styles from its parent region. |
|
||||||
*/ |
|
||||||
.layout--content-narrow, |
|
||||||
.layout--pass--content-narrow > *, |
|
||||||
.layout--content-medium, |
|
||||||
.layout--pass--content-medium > * { |
|
||||||
& .layout--content-narrow, |
|
||||||
& .layout--pass--content-narrow > * { |
|
||||||
@media (--grid-md) { |
|
||||||
grid-column: 1 / 13; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
grid-column: 1 / 9; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Special grid-breaking treatment for text-content elements that |
|
||||||
reside in a content-narrow layout. |
|
||||||
*/ |
|
||||||
.layout--content-narrow, |
|
||||||
.layout--pass--content-narrow > * { |
|
||||||
&.text-content, |
|
||||||
& .text-content { |
|
||||||
& blockquote { |
|
||||||
&::before { |
|
||||||
@media (--grid-md) { |
|
||||||
inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap))); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&::after { |
|
||||||
@media (--grid-md) { |
|
||||||
inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap))); |
|
||||||
width: var(--sp); |
|
||||||
height: calc(100% - 45px); |
|
||||||
margin-inline-start: 2px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap)); |
|
||||||
margin-block: var(--sp3); |
|
||||||
padding-inline-start: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& pre { |
|
||||||
@media (--grid-md) { |
|
||||||
margin-block: var(--sp3); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap)); |
|
||||||
margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap))); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* <pre> and <blockquote> elements should not break containers and overflow |
|
||||||
* into sidebar region when present. |
|
||||||
*/ |
|
||||||
.sidebar-grid { |
|
||||||
& .layout--content-narrow, |
|
||||||
& .layout--pass--content-narrow > * { |
|
||||||
&.text-content, |
|
||||||
& .text-content { |
|
||||||
& blockquote, |
|
||||||
& pre { |
|
||||||
width: auto; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
/* |
|
||||||
* @file |
|
||||||
* Provides default layout styles for all layout sections. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.layout { |
|
||||||
margin-block-end: var(--sp); |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
margin-block-end: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,44 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Grid system definition for the footer top and footer bottom layouts. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
/** |
|
||||||
* Creates stacking context ensuring that child elements can never appear in |
|
||||||
* front of mobile navigation. |
|
||||||
*/ |
|
||||||
.site-footer { |
|
||||||
position: relative; |
|
||||||
z-index: 1; |
|
||||||
} |
|
||||||
|
|
||||||
.site-footer__inner { |
|
||||||
padding-block: var(--sp2); |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
padding-block: var(--sp4) calc(13 * var(--sp)); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.region--footer_top__inner, |
|
||||||
.region--footer_bottom__inner { |
|
||||||
& > * { |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
flex: 1; |
|
||||||
margin-block-end: 0; |
|
||||||
|
|
||||||
&:not(:last-child) { |
|
||||||
margin-inline-end: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,48 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Special grid system for sidebar. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.sidebar-grid { |
|
||||||
& > .site-main { |
|
||||||
grid-column: 1 / 7; |
|
||||||
align-self: flex-start; |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
grid-column: 1 / 15; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
display: grid; |
|
||||||
grid-template-columns: repeat(8, minmax(0, 1fr)); |
|
||||||
grid-column: 3 / 11; |
|
||||||
|
|
||||||
& > .region--content-above, |
|
||||||
& > .region--content { |
|
||||||
grid-template-columns: repeat(8, minmax(0, 1fr)); |
|
||||||
grid-column: 1 / 9; |
|
||||||
} |
|
||||||
|
|
||||||
& .layout--content-narrow, |
|
||||||
& .layout--pass--content-narrow > *, |
|
||||||
& .layout--content-medium, |
|
||||||
& .layout--pass--content-medium > * { |
|
||||||
grid-column: 1 / 9; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .region--sidebar { |
|
||||||
grid-column: 1 / 7; |
|
||||||
|
|
||||||
@media (--grid-md) { |
|
||||||
grid-column: 3 / 13; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
grid-column: 12 / 15; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,43 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Responsive styles for views grid horizontal layout. |
|
||||||
* |
|
||||||
* This creates the correct count of columns and automatically resizes the |
|
||||||
* grid-items to fit into it. The grid-items will flow onto the next row when |
|
||||||
* they reach the --views-grid-item--min-width value. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.views-view-grid { |
|
||||||
--views-grid--layout-gap: var(--sp); |
|
||||||
--views-grid--column-count: 4; /* Will be overridden by an inline style. */ |
|
||||||
--views-grid-item--min-width: 100px; |
|
||||||
} |
|
||||||
|
|
||||||
.views-view-grid--horizontal { |
|
||||||
/** |
|
||||||
* Calculated values. |
|
||||||
*/ |
|
||||||
--views-grid--gap-count: calc(var(--views-grid--column-count) - 1); |
|
||||||
--views-grid--total-gap-width: calc(var(--views-grid--gap-count) * var(--views-grid--layout-gap)); |
|
||||||
--views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width)) / var(--views-grid--column-count)); |
|
||||||
|
|
||||||
display: grid; |
|
||||||
grid-template-columns: repeat(auto-fill, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr)); |
|
||||||
grid-gap: var(--views-grid--layout-gap); |
|
||||||
} |
|
||||||
|
|
||||||
.views-view-grid--vertical { |
|
||||||
margin-block-end: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */ |
|
||||||
column-width: var(--views-grid-item--min-width); |
|
||||||
column-count: var(--views-grid--column-count); |
|
||||||
column-gap: var(--views-grid--layout-gap); |
|
||||||
|
|
||||||
& .views-view-grid__item { |
|
||||||
& > * { |
|
||||||
padding-block-end: var(--views-grid--layout-gap); |
|
||||||
break-inside: avoid; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,57 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Base Layout. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.container { |
|
||||||
width: 100%; |
|
||||||
max-width: var(--max-width); |
|
||||||
padding-inline: var(--container-padding); |
|
||||||
|
|
||||||
/* This fixes an issue where if the toolbar is open in vertical mode, and |
|
||||||
* the mobile navigation is open, the "close" button gets pushed outside of |
|
||||||
* the viewport. */ |
|
||||||
@nest body.is-fixed & { |
|
||||||
width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px)); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.page-wrapper { |
|
||||||
max-width: var(--max-bg-color); |
|
||||||
background: var(--color--white); |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Creates stacking context ensuring that child elements can never appear in |
|
||||||
* front of mobile navigation. |
|
||||||
*/ |
|
||||||
.layout-main-wrapper { |
|
||||||
position: relative; |
|
||||||
z-index: 2; /* Ensure dropdown is not cut off by footer. */ |
|
||||||
} |
|
||||||
|
|
||||||
/* Contains the social sidebar, and the primary content area. */ |
|
||||||
.layout-main { |
|
||||||
@media (--nav) { |
|
||||||
display: flex; |
|
||||||
flex-direction: row-reverse; |
|
||||||
flex-wrap: wrap; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.main-content { |
|
||||||
@media (--nav) { |
|
||||||
width: calc(100% - var(--content-left)); |
|
||||||
margin-inline-end: auto; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.main-content__container { |
|
||||||
padding-block-start: var(--sp3); |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
padding-block-start: var(--sp5); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,41 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Content below region layout. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.region--content-below { |
|
||||||
@media (--md) { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
|
|
||||||
& > * { |
|
||||||
flex-basis: calc(50% - (var(--grid-gap) / 2)); |
|
||||||
flex-grow: 1; |
|
||||||
flex-shrink: 0; |
|
||||||
margin-inline-end: var(--grid-gap); |
|
||||||
|
|
||||||
&:nth-child(2n), |
|
||||||
&:last-child { |
|
||||||
margin-inline-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
& > * { |
|
||||||
flex-basis: calc(33.33% - (var(--grid-gap) * 0.667)); |
|
||||||
|
|
||||||
&:nth-child(2n), |
|
||||||
&:last-child { |
|
||||||
margin-inline-end: var(--grid-gap); |
|
||||||
} |
|
||||||
|
|
||||||
&:nth-child(3n), |
|
||||||
&:last-child { |
|
||||||
margin-inline-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Content region layout. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.region--content { |
|
||||||
margin-block-end: var(--sp); |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
margin-block-end: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,12 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Region default layout. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.region--hero { |
|
||||||
& > *:last-child { |
|
||||||
margin-block-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,30 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Secondary menu region layout styling. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.region--secondary-menu { |
|
||||||
display: flex; |
|
||||||
margin-block-start: var(--sp2); |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
|
|
||||||
& > * { |
|
||||||
margin-block-end: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
body:not(.is-always-mobile-nav) { |
|
||||||
@media (--nav) { |
|
||||||
& .region--secondary-menu { |
|
||||||
justify-content: flex-end; |
|
||||||
margin: 0; |
|
||||||
|
|
||||||
/* If the secondary nav is the first item within the header, it does not need left separator. */ |
|
||||||
&:first-child .secondary-nav::before { |
|
||||||
content: none; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Region default layout. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.region > * { |
|
||||||
margin-block-end: var(--sp); |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
} |
|
||||||
|
|
||||||
@media (--lg) { |
|
||||||
margin-block-end: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,105 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Social Bar Region |
|
||||||
. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.social-bar { |
|
||||||
@media (--nav) { |
|
||||||
flex-shrink: 0; |
|
||||||
width: var(--content-left); |
|
||||||
background-color: var(--color--gray-100); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.social-bar__inner { |
|
||||||
position: relative; |
|
||||||
padding-block: var(--sp0-5); |
|
||||||
padding-inline-start: var(--sp); |
|
||||||
padding-inline-end: var(--sp); |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
position: relative; |
|
||||||
width: var(--content-left); |
|
||||||
padding-block: calc(5 * var(--sp)); |
|
||||||
padding-inline-start: 0; |
|
||||||
padding-inline-end: 0; |
|
||||||
|
|
||||||
&.is-fixed { |
|
||||||
position: fixed; |
|
||||||
inset-block-start: var(--sp6); |
|
||||||
inset-inline-start: 0; |
|
||||||
height: calc(100vh - 6 * var(--sp)); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.rotate { |
|
||||||
& > * { |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
margin-block-end: 0; |
|
||||||
|
|
||||||
&:not(:first-child) { |
|
||||||
margin-inline-end: var(--sp2); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .contextual { |
|
||||||
@media (--nav) { |
|
||||||
inset-inline: 100% auto; |
|
||||||
transform: rotate(90deg); /* LTR */ |
|
||||||
transform-origin: top left; /* LTR */ |
|
||||||
|
|
||||||
& .trigger { |
|
||||||
float: left; /* LTR */ |
|
||||||
|
|
||||||
/** |
|
||||||
* Chromium and Webkit do not yet support flow relative logical properties, |
|
||||||
* such as float: inline-end. However, PostCSS Logical does not compile this |
|
||||||
* value, so we accommodate by not using these. |
|
||||||
* |
|
||||||
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values |
|
||||||
* @see https://github.com/csstools/postcss-plugins/issues/632 |
|
||||||
*/ |
|
||||||
&:dir(rtl) { |
|
||||||
float: right; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (--nav) { |
|
||||||
position: absolute; |
|
||||||
inset-inline-start: 50%; |
|
||||||
display: flex; |
|
||||||
flex-direction: row-reverse; |
|
||||||
width: 100vh; |
|
||||||
transform: rotate(-90deg) translateX(-100%); /* LTR */ |
|
||||||
transform-origin: left; /* LTR */ |
|
||||||
|
|
||||||
@supports (width: max-content) { |
|
||||||
width: max-content; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[dir="rtl"] { |
|
||||||
@media (--nav) { |
|
||||||
& .rotate { |
|
||||||
transform: rotate(90deg) translateX(100%); |
|
||||||
transform-origin: right; |
|
||||||
|
|
||||||
& .contextual { |
|
||||||
transform: rotate(-90deg); |
|
||||||
transform-origin: top right; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,20 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Styles for views. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
.view { |
|
||||||
& > * { |
|
||||||
margin-block-end: var(--sp2); |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
margin-block-end: 0; |
|
||||||
} |
|
||||||
|
|
||||||
@media (--md) { |
|
||||||
margin-block-end: var(--sp3); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,80 +0,0 @@ |
|||||||
/** |
|
||||||
* @file |
|
||||||
* Styling for the Filter module. |
|
||||||
*/ |
|
||||||
|
|
||||||
@import "../base/media-queries.pcss.css"; |
|
||||||
|
|
||||||
/** |
|
||||||
* Filter information under field. |
|
||||||
*/ |
|
||||||
.text-full > .form-item { |
|
||||||
margin-block-end: 0; |
|
||||||
} |
|
||||||
.form-element--editor-format { |
|
||||||
vertical-align: top; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-wrapper { |
|
||||||
margin-block: var(--sp1) var(--sp0-5); |
|
||||||
} |
|
||||||
|
|
||||||
.filter-wrapper .form-item { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-help { |
|
||||||
float: right; /* LTR */ |
|
||||||
padding-block: var(--sp0-5); |
|
||||||
font-size: var(--font-size-xxs); |
|
||||||
|
|
||||||
/** |
|
||||||
* Chromium and Webkit do not yet support flow relative logical properties, |
|
||||||
* such as float: inline-end. However, PostCSS Logical does not compile this |
|
||||||
* value, so we accommodate by not using these. |
|
||||||
* |
|
||||||
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values |
|
||||||
* @see https://github.com/csstools/postcss-plugins/issues/632 |
|
||||||
*/ |
|
||||||
&:dir(rtl) { |
|
||||||
float: left; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Compose tips. |
|
||||||
* |
|
||||||
* Wraps filter tips on page '/filter/tips[/name]'. |
|
||||||
*/ |
|
||||||
.compose-tips__item { |
|
||||||
margin-block: var(--sp1-5); |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Filter guidelines. |
|
||||||
*/ |
|
||||||
.filter-guidelines__item { |
|
||||||
margin-block-start: var(--sp1); |
|
||||||
font-size: var(--font-size-s); |
|
||||||
line-height: var(--line-height-s); |
|
||||||
} |
|
||||||
.filter-guidelines p { |
|
||||||
margin-block: var(--sp0-25) 0; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Filter tips. |
|
||||||
* |
|
||||||
* Long is used on '/filter/tips[/name]', short is used for the filter tips |
|
||||||
* below a text format input. |
|
||||||
*/ |
|
||||||
.filter-tips--long { |
|
||||||
margin-block-end: var(--sp1-5); |
|
||||||
} |
|
||||||
.filter-tips__item, |
|
||||||
.filter-tips--long p { |
|
||||||
margin-block: var(--sp0-75); |
|
||||||
} |
|
||||||
.filter-tips__item--short { |
|
||||||
margin-block: var(--sp0-25) 0; |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue