Initial Drupal 11 with DDEV setup
This commit is contained in:
gluebox
176
web/core/themes/claro/claro.info.yml
Normal file
176
web/core/themes/claro/claro.info.yml
Normal file
@ -0,0 +1,176 @@
|
||||
# This theme is marked as @internal. It is intended to evolve and change over
|
||||
# minor releases.
|
||||
# Change record https://www.drupal.org/node/2582945.
|
||||
# As the UI of Drupal improves between minor versions, the markup and assets
|
||||
# in the Claro theme will change. The Claro theme is not backwards compatible.
|
||||
# If you wish to modify the output or assets of Claro you can:
|
||||
# 1. Copy the whole of Claro and rename it as your own administration theme. You
|
||||
# will need to manually manage your own updates if you want to stay up to
|
||||
# date with Claro's bug fixes and feature support.
|
||||
#
|
||||
# 2. Sub-theme Claro. This is only recommended if you want to make minor tweaks
|
||||
# and understand that Claro could break your modifications as it changes.
|
||||
name: Claro
|
||||
type: theme
|
||||
base theme: false
|
||||
description: A clean, accessible, and powerful Drupal administration theme.
|
||||
alt text: Screenshot of Claro, Drupal administration theme.
|
||||
package: Core
|
||||
version: VERSION
|
||||
libraries:
|
||||
- core/drupal.message
|
||||
- core/normalize
|
||||
- claro/global-styling
|
||||
libraries-override:
|
||||
core/drupal.tabledrag:
|
||||
css:
|
||||
component:
|
||||
misc/components/tabledrag.module.css: css/components/tabledrag.css
|
||||
|
||||
core/drupal.ajax:
|
||||
css:
|
||||
component:
|
||||
misc/components/ajax-progress.module.css: css/components/ajax-progress.module.css
|
||||
|
||||
core/drupal.autocomplete:
|
||||
css:
|
||||
component:
|
||||
misc/components/autocomplete-loading.module.css: css/components/autocomplete-loading.module.css
|
||||
|
||||
system/status.report: claro/status.report
|
||||
|
||||
system/admin:
|
||||
css:
|
||||
theme:
|
||||
css/system.admin.css: false
|
||||
|
||||
core/drupal.dropbutton:
|
||||
css:
|
||||
component:
|
||||
misc/dropbutton/dropbutton.css: css/components/dropbutton.css
|
||||
|
||||
core/drupal.vertical-tabs:
|
||||
css:
|
||||
component:
|
||||
misc/vertical-tabs.css: false
|
||||
|
||||
core/internal.jquery_ui:
|
||||
css:
|
||||
theme:
|
||||
assets/vendor/jquery.ui/themes/base/theme.css: false
|
||||
|
||||
core/drupal.dialog:
|
||||
css:
|
||||
component:
|
||||
assets/vendor/jquery.ui/themes/base/dialog.css: false
|
||||
|
||||
user/drupal.user:
|
||||
css:
|
||||
component:
|
||||
css/user.module.css: false
|
||||
|
||||
field_ui/drupal.field_ui:
|
||||
css:
|
||||
theme:
|
||||
css/field_ui.admin.css: css/theme/field-ui.admin.css
|
||||
|
||||
node/drupal.node:
|
||||
css:
|
||||
layout:
|
||||
css/node.module.css: false
|
||||
|
||||
node/form:
|
||||
css:
|
||||
layout:
|
||||
css/node.module.css: false
|
||||
|
||||
toolbar/toolbar:
|
||||
css:
|
||||
component:
|
||||
css/toolbar.module.css: css/components/toolbar.module.css
|
||||
theme:
|
||||
css/toolbar.theme.css: css/theme/toolbar.theme.css
|
||||
css/toolbar.icons.theme.css: css/theme/toolbar.icons.theme.css
|
||||
|
||||
toolbar/toolbar.menu:
|
||||
css:
|
||||
state:
|
||||
css/toolbar.menu.css: css/state/toolbar.menu.css
|
||||
|
||||
views_ui/admin.styling:
|
||||
css:
|
||||
component:
|
||||
css/views_ui.admin.css: css/components/views_ui.admin.css
|
||||
theme:
|
||||
css/views_ui.admin.theme.css: css/theme/views_ui.admin.theme.css
|
||||
|
||||
libraries-extend:
|
||||
core/drupal.collapse:
|
||||
- claro/details-focus
|
||||
core/drupal.dialog:
|
||||
- claro/claro.drupal.dialog
|
||||
core/drupal.dropbutton:
|
||||
- claro/dropbutton
|
||||
core/drupal.checkbox:
|
||||
- claro/checkbox
|
||||
core/drupal.message:
|
||||
- claro/messages
|
||||
core/drupal.progress:
|
||||
- claro/progress
|
||||
core/drupal.tabbingmanager:
|
||||
- claro/tabbingmanager
|
||||
core/drupal.tabledrag:
|
||||
- claro/claro.tabledrag
|
||||
core/drupal.tableselect:
|
||||
- claro/tableselect
|
||||
core/drupal.tablesort:
|
||||
- claro/drupal.tablesort
|
||||
core/drupal.vertical-tabs:
|
||||
- claro/vertical-tabs
|
||||
file/drupal.file:
|
||||
- claro/file
|
||||
filter/drupal.filter.admin:
|
||||
- claro/filter
|
||||
filter/drupal.filter:
|
||||
- claro/filter
|
||||
system/admin:
|
||||
- claro/system.admin
|
||||
core/drupal.autocomplete:
|
||||
- claro/autocomplete
|
||||
shortcut/drupal.shortcut:
|
||||
- claro/drupal.shortcut
|
||||
core/drupal.ajax:
|
||||
- claro/ajax
|
||||
user/drupal.user:
|
||||
- claro/form.password-confirm
|
||||
node/drupal.node.preview:
|
||||
- claro/drupal.node.preview
|
||||
system/status.report:
|
||||
- claro/status.report
|
||||
views/views.module:
|
||||
- claro/views
|
||||
views_ui/admin.styling:
|
||||
- claro/views_ui
|
||||
media/media_embed_ckeditor_theme:
|
||||
- claro/classy.media_embed_ckeditor_theme
|
||||
media_library/ui:
|
||||
- claro/media_library.ui
|
||||
media_library/view:
|
||||
- claro/media_library.theme
|
||||
media_library/widget:
|
||||
- claro/media_library.theme
|
||||
image/admin:
|
||||
- claro/image.admin
|
||||
|
||||
regions:
|
||||
header: Header
|
||||
pre_content: Pre-content
|
||||
breadcrumb: Breadcrumb
|
||||
highlighted: Highlighted
|
||||
help: Help
|
||||
content: Content
|
||||
page_top: Page top
|
||||
page_bottom: Page bottom
|
||||
sidebar_first: First sidebar
|
||||
regions_hidden:
|
||||
- sidebar_first
|
||||
365
web/core/themes/claro/claro.libraries.yml
Normal file
365
web/core/themes/claro/claro.libraries.yml
Normal file
@ -0,0 +1,365 @@
|
||||
global-styling:
|
||||
version: VERSION
|
||||
css:
|
||||
base:
|
||||
css/base/variables.css: {}
|
||||
css/base/elements.css: {}
|
||||
css/base/typography.css: {}
|
||||
css/base/print.css: {}
|
||||
component:
|
||||
css/classy/components/container-inline.css: {}
|
||||
css/classy/components/exposed-filters.css: {}
|
||||
css/classy/components/field.css: {}
|
||||
css/classy/components/icons.css: {}
|
||||
css/classy/components/inline-form.css: {}
|
||||
css/classy/components/item-list.css: {}
|
||||
css/classy/components/link.css: {}
|
||||
css/classy/components/links.css: {}
|
||||
css/classy/components/menu.css: {}
|
||||
css/classy/components/more-link.css: {}
|
||||
css/classy/components/textarea.css: {}
|
||||
css/classy/components/ui-dialog.css: {}
|
||||
css/components/accordion.css: {}
|
||||
css/components/action-link.css: {}
|
||||
css/components/content-header.css: {}
|
||||
css/components/ckeditor5.css: {}
|
||||
css/components/container-inline.css: {}
|
||||
css/components/container-inline.module.css: {}
|
||||
css/components/breadcrumb.css: {}
|
||||
css/components/button.css: {}
|
||||
css/components/details.css: {}
|
||||
css/components/divider.css: {}
|
||||
css/components/messages.css: {}
|
||||
css/components/entity-meta.css: {}
|
||||
css/components/fieldset.css: {}
|
||||
css/components/form.css: {}
|
||||
css/components/form--checkbox-radio.css: {}
|
||||
css/components/form--field-multiple.css: {}
|
||||
css/components/form--managed-file.css: {}
|
||||
css/components/form--text.css: {}
|
||||
css/components/form--select.css: {}
|
||||
css/components/help.css: {}
|
||||
css/components/image-preview.css: {}
|
||||
css/components/menus-and-lists.css: {}
|
||||
css/components/modules-page.css: {}
|
||||
css/components/node.css: {}
|
||||
css/components/page-title.css: {}
|
||||
css/components/pager.css: {}
|
||||
css/components/skip-link.css: {}
|
||||
css/components/tables.css: {}
|
||||
css/components/table--file-multiple-widget.css: {}
|
||||
css/components/search-admin-settings.css: {}
|
||||
css/components/tableselect.css: {}
|
||||
css/components/tabs.css: {}
|
||||
theme:
|
||||
css/theme/colors.css: {}
|
||||
layout:
|
||||
css/layout/breadcrumb.css: {}
|
||||
css/layout/local-actions.css: {}
|
||||
css/layout/layout.css: {}
|
||||
dependencies:
|
||||
- system/admin
|
||||
- core/jquery
|
||||
- core/drupal
|
||||
# Claro has small and extra small variation for most of the control elements
|
||||
# such as inputs, action links, buttons, dropbuttons. For usability and
|
||||
# accessibility reasons, we keep target sizes big enough on touch screen
|
||||
# devices (by not making these elements smaller than their default size).
|
||||
# This library allows conditionally rendering small variations of the
|
||||
# control elements on non-touch devices. In some cases, such as when
|
||||
# rendering links, it is hard to recognize when this detection should be
|
||||
# attached, therefore it is always attached.
|
||||
- core/drupal.touchevents-test
|
||||
|
||||
form-two-columns:
|
||||
version: VERSION
|
||||
css:
|
||||
layout:
|
||||
css/layout/form-two-columns.css: {}
|
||||
|
||||
maintenance-page:
|
||||
version: VERSION
|
||||
js:
|
||||
js/mobile.install.js: {}
|
||||
css:
|
||||
theme:
|
||||
css/theme/maintenance-page.css: {}
|
||||
dependencies:
|
||||
- system/maintenance
|
||||
- claro/global-styling
|
||||
|
||||
install-page:
|
||||
version: VERSION
|
||||
js:
|
||||
js/mobile.install.js: {}
|
||||
css:
|
||||
theme:
|
||||
css/theme/install-page.css: {}
|
||||
dependencies:
|
||||
- claro/maintenance-page
|
||||
|
||||
drupal.nav-tabs:
|
||||
version: VERSION
|
||||
js:
|
||||
js/nav-tabs.js: {}
|
||||
dependencies:
|
||||
- core/jquery
|
||||
- core/drupal
|
||||
- core/once
|
||||
- core/drupal.debounce
|
||||
|
||||
claro.jquery.ui:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/components/jquery.ui/theme.css: { weight: -1 }
|
||||
|
||||
claro.drupal.dialog:
|
||||
version: VERSION
|
||||
css:
|
||||
theme:
|
||||
css/components/dialog.css: {}
|
||||
dependencies:
|
||||
- claro/claro.jquery.ui
|
||||
|
||||
claro.tabledrag:
|
||||
version: VERSION
|
||||
js:
|
||||
js/tabledrag.js: {}
|
||||
|
||||
drupal.node.preview:
|
||||
version: VERSION
|
||||
css:
|
||||
theme:
|
||||
css/components/node-preview.css: {}
|
||||
|
||||
drupal.tablesort:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/classy/components/tablesort.css: {}
|
||||
css/components/tablesort-indicator.css: {}
|
||||
|
||||
media-form:
|
||||
version: VERSION
|
||||
css:
|
||||
layout:
|
||||
css/components/media.css: {}
|
||||
dependencies:
|
||||
- media/form
|
||||
|
||||
image.admin:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/components/image.admin.css: {}
|
||||
|
||||
system.admin:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/components/system-admin--admin-list.css: { weight: -10 }
|
||||
css/components/system-admin--links.css: { weight: -10 }
|
||||
css/components/system-admin--modules.css: { weight: -10 }
|
||||
css/components/system-admin--panel.css: { weight: -10 }
|
||||
layout:
|
||||
css/layout/system-admin--layout.css: { weight: -10 }
|
||||
dependencies:
|
||||
- claro/card
|
||||
|
||||
checkbox:
|
||||
version: VERSION
|
||||
js:
|
||||
js/checkbox.js: {}
|
||||
dependencies:
|
||||
- core/drupal
|
||||
|
||||
icon-link:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/components/icon-link.css: {}
|
||||
|
||||
dropbutton:
|
||||
version: VERSION
|
||||
js:
|
||||
js/dropbutton.js: {}
|
||||
dependencies:
|
||||
- core/drupal
|
||||
|
||||
autocomplete:
|
||||
version: VERSION
|
||||
js:
|
||||
js/autocomplete.js: {}
|
||||
dependencies:
|
||||
- core/once
|
||||
- claro/claro.jquery.ui
|
||||
|
||||
drupal.shortcut:
|
||||
version: VERSION
|
||||
css:
|
||||
# @todo move this to components after
|
||||
# https://www.drupal.org/project/drupal/issues/3045467 is in.
|
||||
theme:
|
||||
css/components/shortcut.css: {}
|
||||
|
||||
details-focus:
|
||||
js:
|
||||
js/details.js: {}
|
||||
|
||||
ajax:
|
||||
js:
|
||||
js/ajax.js: {}
|
||||
|
||||
form.password-confirm:
|
||||
css:
|
||||
component:
|
||||
css/components/form--password-confirm.css: {}
|
||||
js:
|
||||
js/user.theme.js: {}
|
||||
dependencies:
|
||||
- core/drupal
|
||||
- claro/global-styling
|
||||
|
||||
|
||||
status.report:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/components/system-status-report-general-info.css: {}
|
||||
css/components/system-status-report.css: {}
|
||||
css/components/system-status-report-counters.css: {}
|
||||
css/components/system-status-counter.css: {}
|
||||
moved_files:
|
||||
claro/global-styling:
|
||||
deprecation_version: 11.2.0
|
||||
removed_version: 12.0.0
|
||||
deprecation_link: https://www.drupal.org/node/3432346
|
||||
css:
|
||||
component:
|
||||
css/components/system-status-report.css:
|
||||
base: css/components/system-status-report.css
|
||||
css/components/system-status-counter.css:
|
||||
base: css/components/system-status-counter.css
|
||||
css/components/system-status-report-counters.css:
|
||||
base: css/components/system-status-report-counters.css
|
||||
css/components/system-status-report-general-info.css:
|
||||
base: css/components/system-status-report-general-info.css
|
||||
|
||||
views:
|
||||
css:
|
||||
component:
|
||||
css/components/views-exposed-form.css: {}
|
||||
|
||||
views_ui:
|
||||
css:
|
||||
component:
|
||||
css/components/views-ui.css: {}
|
||||
|
||||
messages:
|
||||
js:
|
||||
js/messages.js: {}
|
||||
|
||||
card:
|
||||
css:
|
||||
component:
|
||||
css/layout/card-list.css: {}
|
||||
css/components/card.css: {}
|
||||
|
||||
vertical-tabs:
|
||||
css:
|
||||
component:
|
||||
css/components/vertical-tabs.css: {}
|
||||
js:
|
||||
js/vertical-tabs.js: {}
|
||||
dependencies:
|
||||
- claro/global-styling
|
||||
|
||||
file:
|
||||
css:
|
||||
component:
|
||||
css/components/file.css: {}
|
||||
|
||||
media_library.theme:
|
||||
version: VERSION
|
||||
css:
|
||||
theme:
|
||||
css/theme/media-library.css: {}
|
||||
dependencies:
|
||||
- claro/icon-link
|
||||
|
||||
media_library.ui:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/components/media-library.ui.css : {}
|
||||
js:
|
||||
js/media-library.ui.js: { weight: -1 }
|
||||
dependencies:
|
||||
- core/drupal
|
||||
- core/jquery
|
||||
- core/once
|
||||
|
||||
progress:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/components/progress.css: {}
|
||||
|
||||
tabbingmanager:
|
||||
version: VERSION
|
||||
dependencies:
|
||||
- claro/claro.jquery.ui
|
||||
|
||||
filter:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/theme/filter.theme.css: {}
|
||||
|
||||
tableselect:
|
||||
version: VERSION
|
||||
js:
|
||||
js/tableselect.js: {}
|
||||
dependencies:
|
||||
- core/jquery
|
||||
- core/drupal
|
||||
- core/drupal.announce
|
||||
- core/drupal.debounce
|
||||
- core/tabbable
|
||||
- core/once
|
||||
|
||||
classy.file:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/classy/components/file.css: { weight: -10 }
|
||||
|
||||
classy.indented:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/classy/components/indented.css: {}
|
||||
|
||||
classy.media_embed_error:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/classy/components/media-embed-error.css: {}
|
||||
|
||||
classy.media_embed_ckeditor_theme:
|
||||
version: VERSION
|
||||
js:
|
||||
js/classy/media_embed_ckeditor.theme.js: {}
|
||||
|
||||
classy.node:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/classy/components/node.css: { weight: -10 }
|
||||
|
||||
classy.search-results:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/classy/components/search-results.css: {}
|
||||
1858
web/core/themes/claro/claro.theme
Normal file
1858
web/core/themes/claro/claro.theme
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,19 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- system
|
||||
theme:
|
||||
- claro
|
||||
id: claro_breadcrumbs
|
||||
theme: claro
|
||||
region: breadcrumb
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: system_breadcrumb_block
|
||||
settings:
|
||||
id: system_breadcrumb_block
|
||||
label: Breadcrumbs
|
||||
label_display: '0'
|
||||
provider: system
|
||||
visibility: { }
|
||||
@ -0,0 +1,19 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- system
|
||||
theme:
|
||||
- claro
|
||||
id: claro_content
|
||||
theme: claro
|
||||
region: content
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: system_main_block
|
||||
settings:
|
||||
id: system_main_block
|
||||
label: 'Main page content'
|
||||
label_display: '0'
|
||||
provider: system
|
||||
visibility: { }
|
||||
@ -0,0 +1,19 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- help
|
||||
theme:
|
||||
- claro
|
||||
id: claro_help
|
||||
theme: claro
|
||||
region: help
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: help_block
|
||||
settings:
|
||||
id: help_block
|
||||
label: Help
|
||||
label_display: '0'
|
||||
provider: help
|
||||
visibility: { }
|
||||
@ -0,0 +1,17 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
theme:
|
||||
- claro
|
||||
id: claro_local_actions
|
||||
theme: claro
|
||||
region: content
|
||||
weight: -10
|
||||
provider: null
|
||||
plugin: local_actions_block
|
||||
settings:
|
||||
id: local_actions_block
|
||||
label: 'Primary admin actions'
|
||||
label_display: '0'
|
||||
provider: core
|
||||
visibility: { }
|
||||
@ -0,0 +1,19 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- system
|
||||
theme:
|
||||
- claro
|
||||
id: claro_messages
|
||||
theme: claro
|
||||
region: highlighted
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: system_messages_block
|
||||
settings:
|
||||
id: system_messages_block
|
||||
label: 'Status messages'
|
||||
label_display: '0'
|
||||
provider: system
|
||||
visibility: { }
|
||||
@ -0,0 +1,17 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
theme:
|
||||
- claro
|
||||
id: claro_page_title
|
||||
theme: claro
|
||||
region: header
|
||||
weight: -30
|
||||
provider: null
|
||||
plugin: page_title_block
|
||||
settings:
|
||||
id: page_title_block
|
||||
label: 'Page title'
|
||||
label_display: '0'
|
||||
provider: core
|
||||
visibility: { }
|
||||
@ -0,0 +1,19 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
theme:
|
||||
- claro
|
||||
id: claro_primary_local_tasks
|
||||
theme: claro
|
||||
region: header
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: local_tasks_block
|
||||
settings:
|
||||
id: local_tasks_block
|
||||
label: 'Primary tabs'
|
||||
label_display: '0'
|
||||
provider: core
|
||||
primary: true
|
||||
secondary: false
|
||||
visibility: { }
|
||||
@ -0,0 +1,19 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
theme:
|
||||
- claro
|
||||
id: claro_secondary_local_tasks
|
||||
theme: claro
|
||||
region: pre_content
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: local_tasks_block
|
||||
settings:
|
||||
id: local_tasks_block
|
||||
label: 'Secondary tabs'
|
||||
label_display: '0'
|
||||
provider: core
|
||||
primary: false
|
||||
secondary: true
|
||||
visibility: { }
|
||||
5
web/core/themes/claro/config/schema/claro.schema.yml
Normal file
5
web/core/themes/claro/config/schema/claro.schema.yml
Normal file
@ -0,0 +1,5 @@
|
||||
# Schema for the configuration files of the Claro theme.
|
||||
|
||||
claro.settings:
|
||||
type: theme_settings
|
||||
label: 'Claro settings'
|
||||
255
web/core/themes/claro/css/base/elements.css
Normal file
255
web/core/themes/claro/css/base/elements.css
Normal file
@ -0,0 +1,255 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* Generic elements.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: var(--font-family);
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
body {
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
color: var(--color-fg);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
a,
|
||||
.link {
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
.link:hover,
|
||||
.link:focus {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
.link:hover {
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
|
||||
a:active,
|
||||
.link:active {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
margin: var(--space-m) 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: var(--color-divider);
|
||||
}
|
||||
|
||||
summary {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reusable heading classes are included to help modules change the styling of
|
||||
* headings on a page without affecting accessibility.
|
||||
*/
|
||||
|
||||
h1,
|
||||
.heading-a {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h1);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
|
||||
h2,
|
||||
.heading-b {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h2);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
|
||||
h3,
|
||||
.heading-c {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h3);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
|
||||
h4,
|
||||
.heading-d {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h4);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
|
||||
h5,
|
||||
.heading-e {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h5);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
|
||||
h6,
|
||||
.heading-f {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h6);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 0 0 1.25rem;
|
||||
}
|
||||
|
||||
dl dd,
|
||||
dl dl {
|
||||
margin-block-end: 0.625rem;
|
||||
margin-inline-start: 1.25rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
position: relative;
|
||||
margin-block: var(--space-l);
|
||||
margin-inline: 2.5rem var(--space-l);
|
||||
font-size: var(--font-size-h6);
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
position: absolute;
|
||||
inset-inline-start: -2.5rem;
|
||||
content: open-quote;
|
||||
color: var(--color-absolutezero);
|
||||
font-family: var(--font-family-serif);
|
||||
font-size: var(--space-xl);
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
blockquote::after {
|
||||
content: no-close-quote;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
u,
|
||||
ins {
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
s,
|
||||
strike,
|
||||
del {
|
||||
-webkit-text-decoration: line-through;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
big {
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
abbr,
|
||||
acronym {
|
||||
border-bottom: dotted 1px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-block: 0.25em;
|
||||
margin-inline: 1.5em 0;
|
||||
padding-inline-start: 0;
|
||||
list-style-type: disc;
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-block: 0.25em;
|
||||
margin-inline: 2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0.5em 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
details {
|
||||
line-height: var(--details-line-height);
|
||||
}
|
||||
|
||||
details summary {
|
||||
padding: 0.95em 1.45em;
|
||||
}
|
||||
|
||||
details summary:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Default focus styles for focused elements.
|
||||
*
|
||||
* This is applied globally to all interactive elements except Toolbar and
|
||||
* Settings Tray since they have their own styles.
|
||||
*/
|
||||
|
||||
.page-wrapper *:focus,
|
||||
.ui-dialog *:focus {
|
||||
outline: var(--focus-outline);
|
||||
box-shadow: var(--focus-box-shadow);
|
||||
}
|
||||
|
||||
/**
|
||||
* These elements should not be displayed until they are processed
|
||||
* by JavaScript, and views-ui-noscript.css exists so browsers
|
||||
* without JavaScript will still display them
|
||||
*/
|
||||
|
||||
.views-tabs,
|
||||
.views-display-top > input.button {
|
||||
display: none;
|
||||
}
|
||||
213
web/core/themes/claro/css/base/elements.pcss.css
Normal file
213
web/core/themes/claro/css/base/elements.pcss.css
Normal file
@ -0,0 +1,213 @@
|
||||
/**
|
||||
* Generic elements.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: var(--font-family);
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
body {
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
color: var(--color-fg);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
a,
|
||||
.link {
|
||||
color: var(--color-link);
|
||||
}
|
||||
a:hover,
|
||||
a:focus,
|
||||
.link:hover,
|
||||
.link:focus {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
a:hover,
|
||||
.link:hover {
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
a:active,
|
||||
.link:active {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
hr {
|
||||
height: 1px;
|
||||
margin: var(--space-m) 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: var(--color-divider);
|
||||
}
|
||||
|
||||
summary {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reusable heading classes are included to help modules change the styling of
|
||||
* headings on a page without affecting accessibility.
|
||||
*/
|
||||
h1,
|
||||
.heading-a {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h1);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
h2,
|
||||
.heading-b {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h2);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
h3,
|
||||
.heading-c {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h3);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
h4,
|
||||
.heading-d {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h4);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
h5,
|
||||
.heading-e {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h5);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
h6,
|
||||
.heading-f {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h6);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
dl {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
dl dd,
|
||||
dl dl {
|
||||
margin-block-end: 10px;
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
blockquote {
|
||||
position: relative;
|
||||
margin-block: var(--space-l);
|
||||
margin-inline: 2.5rem var(--space-l);
|
||||
font-size: var(--font-size-h6);
|
||||
}
|
||||
blockquote::before {
|
||||
position: absolute;
|
||||
inset-inline-start: -2.5rem;
|
||||
content: open-quote;
|
||||
color: var(--color-absolutezero);
|
||||
font-family: var(--font-family-serif);
|
||||
font-size: var(--space-xl);
|
||||
line-height: 1em;
|
||||
}
|
||||
blockquote::after {
|
||||
content: no-close-quote;
|
||||
}
|
||||
address {
|
||||
font-style: italic;
|
||||
}
|
||||
u,
|
||||
ins {
|
||||
text-decoration: underline;
|
||||
}
|
||||
s,
|
||||
strike,
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
big {
|
||||
font-size: larger;
|
||||
}
|
||||
small {
|
||||
font-size: smaller;
|
||||
}
|
||||
sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller;
|
||||
line-height: normal;
|
||||
}
|
||||
sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller;
|
||||
line-height: normal;
|
||||
}
|
||||
abbr,
|
||||
acronym {
|
||||
border-bottom: dotted 1px;
|
||||
}
|
||||
ul {
|
||||
margin-block: 0.25em;
|
||||
margin-inline: 1.5em 0;
|
||||
padding-inline-start: 0;
|
||||
list-style-type: disc;
|
||||
list-style-image: none;
|
||||
}
|
||||
ol {
|
||||
margin-block: 0.25em;
|
||||
margin-inline: 2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
pre {
|
||||
margin: 0.5em 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
details {
|
||||
line-height: var(--details-line-height);
|
||||
|
||||
& summary {
|
||||
padding: 0.95em 1.45em;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Default focus styles for focused elements.
|
||||
*
|
||||
* This is applied globally to all interactive elements except Toolbar and
|
||||
* Settings Tray since they have their own styles.
|
||||
*/
|
||||
.page-wrapper *:focus,
|
||||
.ui-dialog *:focus {
|
||||
outline: var(--focus-outline);
|
||||
box-shadow: var(--focus-box-shadow);
|
||||
}
|
||||
|
||||
/**
|
||||
* These elements should not be displayed until they are processed
|
||||
* by JavaScript, and views-ui-noscript.css exists so browsers
|
||||
* without JavaScript will still display them
|
||||
*/
|
||||
.views-tabs,
|
||||
.views-display-top > input.button {
|
||||
display: none;
|
||||
}
|
||||
90
web/core/themes/claro/css/base/print.css
Normal file
90
web/core/themes/claro/css/base/print.css
Normal file
@ -0,0 +1,90 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
@media print {
|
||||
* {
|
||||
/* Black prints faster */
|
||||
/* https://github.com/h5bp/main.css/blob/main/dist/_print.css#L14 */
|
||||
color: #000 !important;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
body {
|
||||
padding-top: 0;
|
||||
}
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
a,
|
||||
.link {
|
||||
color: #000;
|
||||
}
|
||||
.button,
|
||||
.button--primary {
|
||||
background: none !important;
|
||||
}
|
||||
.messages {
|
||||
border-width: 1px;
|
||||
border-color: #999;
|
||||
}
|
||||
.is-collapse-enabled .tabs {
|
||||
max-height: 999em;
|
||||
}
|
||||
.is-horizontal .tabs__tab {
|
||||
margin: 0 0.25rem !important;
|
||||
border-radius: 0.25rem 0.25rem 0 0 !important;
|
||||
}
|
||||
.dropbutton-multiple .dropbutton .secondary-action {
|
||||
display: block;
|
||||
}
|
||||
.js .dropbutton-widget,
|
||||
.js td .dropbutton-widget /* Splitbuttons */ {
|
||||
position: relative;
|
||||
}
|
||||
.js .dropbutton .dropbutton-toggle {
|
||||
display: none;
|
||||
}
|
||||
.js .dropbutton-multiple .dropbutton-widget {
|
||||
border-radius: 0.25rem;
|
||||
background: none;
|
||||
}
|
||||
input.form-autocomplete,
|
||||
input.form-text,
|
||||
input.form-tel,
|
||||
input.form-email,
|
||||
input.form-url,
|
||||
input.form-search,
|
||||
input.form-number,
|
||||
input.form-color,
|
||||
input.form-file,
|
||||
textarea.form-textarea,
|
||||
select.form-select {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
84
web/core/themes/claro/css/base/print.pcss.css
Normal file
84
web/core/themes/claro/css/base/print.pcss.css
Normal file
@ -0,0 +1,84 @@
|
||||
@media print {
|
||||
* {
|
||||
/* Black prints faster */
|
||||
/* https://github.com/h5bp/main.css/blob/main/dist/_print.css#L14 */
|
||||
color: #000 !important;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
body {
|
||||
padding-top: 0;
|
||||
}
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
a,
|
||||
.link {
|
||||
color: #000;
|
||||
}
|
||||
.button,
|
||||
.button--primary {
|
||||
background: none !important;
|
||||
}
|
||||
.messages {
|
||||
border-width: 1px;
|
||||
border-color: #999;
|
||||
}
|
||||
.is-collapse-enabled .tabs {
|
||||
max-height: 999em;
|
||||
}
|
||||
.is-horizontal .tabs__tab {
|
||||
margin: 0 4px !important;
|
||||
border-radius: 4px 4px 0 0 !important;
|
||||
}
|
||||
.dropbutton-multiple .dropbutton .secondary-action {
|
||||
display: block;
|
||||
}
|
||||
.js .dropbutton-widget,
|
||||
.js td .dropbutton-widget /* Splitbuttons */ {
|
||||
position: relative;
|
||||
}
|
||||
.js .dropbutton .dropbutton-toggle {
|
||||
display: none;
|
||||
}
|
||||
.js .dropbutton-multiple .dropbutton-widget {
|
||||
border-radius: 4px;
|
||||
background: none;
|
||||
}
|
||||
input.form-autocomplete,
|
||||
input.form-text,
|
||||
input.form-tel,
|
||||
input.form-email,
|
||||
input.form-url,
|
||||
input.form-search,
|
||||
input.form-number,
|
||||
input.form-color,
|
||||
input.form-file,
|
||||
textarea.form-textarea,
|
||||
select.form-select {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
34
web/core/themes/claro/css/base/typography.css
Normal file
34
web/core/themes/claro/css/base/typography.css
Normal file
@ -0,0 +1,34 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/**
|
||||
* Reusable utility classes that apply vertical spacing consistency and inline
|
||||
* with the base line height of Claro.
|
||||
*/
|
||||
.leader {
|
||||
margin-top: 1.538rem;
|
||||
}
|
||||
.leader-double {
|
||||
margin-top: 3.076rem;
|
||||
}
|
||||
.leader-triple {
|
||||
margin-top: 4.614rem;
|
||||
}
|
||||
.leader-quadruple {
|
||||
margin-top: 6.152rem;
|
||||
}
|
||||
.trailer {
|
||||
margin-bottom: 1.538rem;
|
||||
}
|
||||
.trailer-double {
|
||||
margin-bottom: 3.076rem;
|
||||
}
|
||||
.trailer-triple {
|
||||
margin-bottom: 4.614rem;
|
||||
}
|
||||
.trailer-quadruple {
|
||||
margin-bottom: 6.152rem;
|
||||
}
|
||||
28
web/core/themes/claro/css/base/typography.pcss.css
Normal file
28
web/core/themes/claro/css/base/typography.pcss.css
Normal file
@ -0,0 +1,28 @@
|
||||
/**
|
||||
* Reusable utility classes that apply vertical spacing consistency and inline
|
||||
* with the base line height of Claro.
|
||||
*/
|
||||
.leader {
|
||||
margin-top: 1.538rem;
|
||||
}
|
||||
.leader-double {
|
||||
margin-top: 3.076rem;
|
||||
}
|
||||
.leader-triple {
|
||||
margin-top: 4.614rem;
|
||||
}
|
||||
.leader-quadruple {
|
||||
margin-top: 6.152rem;
|
||||
}
|
||||
.trailer {
|
||||
margin-bottom: 1.538rem;
|
||||
}
|
||||
.trailer-double {
|
||||
margin-bottom: 3.076rem;
|
||||
}
|
||||
.trailer-triple {
|
||||
margin-bottom: 4.614rem;
|
||||
}
|
||||
.trailer-quadruple {
|
||||
margin-bottom: 6.152rem;
|
||||
}
|
||||
278
web/core/themes/claro/css/base/variables.css
Normal file
278
web/core/themes/claro/css/base/variables.css
Normal file
@ -0,0 +1,278 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
--color-absolutezero: var(--color-blue-600);
|
||||
--color-white: #fff;
|
||||
--color-text: var(--color-gray);
|
||||
--color-text-light: var(--color-gray-500);
|
||||
--color-gray-050-o-40: rgb(243, 244, 249, 0.4);
|
||||
/* Secondary. */
|
||||
--color-gray-200-o-80: rgb(212, 212, 218, 0.8);
|
||||
--color-maximumred: var(--color-red-500);
|
||||
--color-sunglow: #ffd23f;
|
||||
--color-sunglow-shaded: #977405;
|
||||
--color-lightninggreen: #26a769;
|
||||
--color-focus: var(--color-lightninggreen);
|
||||
/* Variations. */
|
||||
--color-absolutezero-hover: var(--color-blue-650); /* 5% darker than base. */
|
||||
--color-absolutezero-active: var(--color-blue-700); /* 10% darker than base. */
|
||||
--color-maximumred-hover: var(--color-red-550); /* 5% darker than base. */
|
||||
--color-maximumred-active: var(--color-red-600); /* 10% darker than base. */
|
||||
--color-bgblue-hover: var(--color-blue-020); /* 2% darker than base. */
|
||||
--color-bgblue-active: var(--color-blue-050); /* 5% darker than base. */
|
||||
--color-bgred-hover: var(--color-red-020); /* 5% darker than base. */
|
||||
--color-bgred-active: var(--color-red-050); /* 10% darker than base. */
|
||||
/* Gray variations. */
|
||||
--color-gray: #232429;
|
||||
--color-gray-900: #393a3f;
|
||||
--color-gray-800: #55565b;
|
||||
--color-gray-700: #75767b;
|
||||
--color-gray-600: #828388;
|
||||
--color-gray-500: #919297;
|
||||
--color-gray-400: #adaeb3;
|
||||
--color-gray-300: #c1c2c7;
|
||||
--color-gray-200: #d3d4d9;
|
||||
--color-gray-100: #dedfe4;
|
||||
--color-gray-050: #f3f4f9;
|
||||
--color-gray-025: #f9faff;
|
||||
/* Blue variations. */
|
||||
--color-blue: var(--color-blue-600);
|
||||
--color-blue-900: #000f33;
|
||||
--color-blue-800: #001f66;
|
||||
--color-blue-700: #002e9a;
|
||||
--color-blue-650: #0036b1;
|
||||
--color-blue-600: #003ecc;
|
||||
--color-blue-500: #004eff;
|
||||
--color-blue-400: #3371ff;
|
||||
--color-blue-300: #6694ff;
|
||||
--color-blue-200: #99b8ff;
|
||||
--color-blue-100: #ccdbff;
|
||||
--color-blue-070: #dbe6ff;
|
||||
--color-blue-050: #e5edff;
|
||||
--color-blue-020: #f5f8ff;
|
||||
/* Red variations. */
|
||||
--color-red: var(--color-red-500);
|
||||
--color-red-900: #2c0707;
|
||||
--color-red-800: #580e0e;
|
||||
--color-red-700: #841515;
|
||||
--color-red-600: #b01c1c;
|
||||
--color-red-550: #c61f1f;
|
||||
--color-red-500: #dc2323;
|
||||
--color-red-400: #e34f4f;
|
||||
--color-red-300: #ea7b7b;
|
||||
--color-red-200: #f1a7a7;
|
||||
--color-red-100: #f8d3d3;
|
||||
--color-red-070: #fae0e0;
|
||||
--color-red-050: #fce9e9;
|
||||
--color-red-020: #fdf5f5;
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
--color-fg: var(--color-text);
|
||||
--color-bg: var(--color-white);
|
||||
--color-link: var(--color-absolutezero);
|
||||
--color-link-hover: var(--color-absolutezero-hover);
|
||||
--color-link-active: var(--color-absolutezero-active);
|
||||
--color-divider: rgb(142, 146, 156, 0.5);
|
||||
/*
|
||||
* Typography.
|
||||
*/
|
||||
--font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
--font-family-serif: "Times New Roman", times, serif;
|
||||
--line-height: 1.5;
|
||||
--line-height-heading: 1.3;
|
||||
--line-height-form-label: calc(18rem / 16); /* 18px */
|
||||
--font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
|
||||
--font-size-xl: 2.25rem; /* ~36px */
|
||||
--font-size-h1: 2.027rem; /* ~32px */
|
||||
--font-size-h2: 1.802rem; /* ~29px */
|
||||
--font-size-h3: 1.602rem; /* ~26px */
|
||||
--font-size-h4: 1.424rem; /* ~23px */
|
||||
--font-size-h5: 1.266rem; /* ~20px */
|
||||
--font-size-h6: 1.125rem; /* 18px */
|
||||
--font-size-s: 0.889rem; /* ~14px */
|
||||
--font-size-xs: 0.79rem; /* ~13px */
|
||||
--font-size-xxs: 0.702rem; /* ~11px */
|
||||
--font-size-label: var(--font-size-s);
|
||||
--font-size-description: var(--font-size-xs);
|
||||
/**
|
||||
* Spaces.
|
||||
*/
|
||||
--space-xl: 3rem; /* 3 * 16px = 48px */
|
||||
--space-l: 1.5rem; /* 1.5 * 16px = 24px */
|
||||
--space-m: 1rem; /* 1 * 16px = 16px */
|
||||
--space-s: 0.75rem; /* 0.75 * 16px = 12px */
|
||||
--space-xs: 0.5rem; /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
--speed-transition: 0.2s;
|
||||
--transition: all var(--speed-transition) ease-out;
|
||||
--base-border-radius: 2px;
|
||||
--focus-border-size: 0.1875rem;
|
||||
--focus-border-offset-size: 2px;
|
||||
--outline-size: 2px;
|
||||
--focus-outline: var(--outline-size) dotted transparent;
|
||||
--focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--color-focus);
|
||||
/**
|
||||
* Shadows.
|
||||
*/
|
||||
--shadow-z3: 0 0.875rem 1.875rem rgb(0, 0, 0, 0.1);
|
||||
/*
|
||||
* Inputs.
|
||||
*/
|
||||
--input-fg-color: var(--color-fg);
|
||||
--input-bg-color: var(--color-bg);
|
||||
--input-fg-color--description: var(--color-gray-800);
|
||||
--input-fg-color--placeholder: var(--color-gray-700);
|
||||
--input-border-color: var(--color-gray-500);
|
||||
--input--hover-border-color: var(--color-text);
|
||||
--input--focus-border-color: var(--color-absolutezero);
|
||||
--input--error-color: var(--color-maximumred);
|
||||
--input--error-border-color: var(--color-maximumred);
|
||||
--input--disabled-color: rgb(84, 85, 96, 0.6); /* Davy's gray with 0.6 opacity. */
|
||||
--input--disabled-fg-color: var(--color-gray-800);
|
||||
--input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */
|
||||
--input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */
|
||||
--input--disabled-border-opacity: 0.5;
|
||||
--input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */
|
||||
--input-border-size: 1px; /* (1/16)em ~ 1px */
|
||||
--input--error-border-size: 2px;
|
||||
--input-padding-vertical: calc(var(--space-s) - var(--input-border-size));
|
||||
--input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
|
||||
--input-font-size: var(--font-size-base);
|
||||
--input-line-height: var(--space-l);
|
||||
--input-padding-vertical--small: calc(var(--space-xs) - (var(--input-border-size) * 2));
|
||||
--input-padding-horizontal--small: calc(var(--space-m) - var(--input-border-size));
|
||||
--input-font-size--small: var(--font-size-xs);
|
||||
--input-line-height--small: 1.3125rem;
|
||||
--input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size));
|
||||
--input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size));
|
||||
--input--extrasmall-font-size: var(--font-size-s);
|
||||
--input--extrasmall-line-height: calc(var(--space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */
|
||||
--input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */
|
||||
--input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
--details-border-color: var(--color-gray-100);
|
||||
--details-summary-shadow-color: var(--color-focus);
|
||||
--details-summary-focus-border-size: var(--focus-border-size);
|
||||
--details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));
|
||||
--details-box-shadow: 0 2px 0.25rem rgb(0, 0, 0, 0.1);
|
||||
--details-border-size: 1px;
|
||||
--details-border-size-radius: 2px;
|
||||
--details-accordion-border-size-radius: var(--base-border-radius);
|
||||
--details-spread-box-shadow-radius: 2px;
|
||||
--details-bg-color-transition-duration: 0.12s;
|
||||
--details-box-shadow-transition-duration: 0.2s;
|
||||
--details-transform-transition-duration: 0.12s;
|
||||
--details-line-height: 1.295rem;
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
--button--focus-border-color: var(--color-blue-300);
|
||||
--button-border-radius-size: var(--base-border-radius);
|
||||
--button-fg-color: var(--color-text);
|
||||
--button-bg-color: var(--color-gray-200);
|
||||
--button--hover-bg-color: var(--color-gray-300);
|
||||
--button--active-bg-color: var(--color-gray-400);
|
||||
--button--disabled-bg-color: #ebebed;
|
||||
--button--disabled-fg-color: var(--color-gray-500);
|
||||
--button-fg-color--primary: var(--color-white);
|
||||
--button-bg-color--primary: var(--color-absolutezero);
|
||||
--button--hover-bg-color--primary: var(--color-absolutezero-hover);
|
||||
--button--active-bg-color--primary: var(--color-absolutezero-active);
|
||||
--button--focus-bg-color--primary: var(--button-bg-color--primary);
|
||||
--button--disabled-bg-color--primary: var(--color-gray-200);
|
||||
--button--disabled-fg-color--primary: var(--color-gray-600);
|
||||
--button-fg-color--danger: var(--color-white);
|
||||
--button-bg-color--danger: var(--color-maximumred);
|
||||
--button--hover-bg-color--danger: var(--color-maximumred-hover);
|
||||
--button--active-bg-color--danger: var(--color-maximumred-active);
|
||||
--dropbutton-widget-z-index: 100;
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/
|
||||
--jui-dropdown-fg-color: var(--color-gray-800);
|
||||
--jui-dropdown-bg-color: var(--color-white);
|
||||
--jui-dropdown--active-fg-color: var(--color-white);
|
||||
--jui-dropdown--active-bg-color: var(--color-absolutezero);
|
||||
--jui-dropdown-border-color: rgb(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */
|
||||
--jui-dropdown-shadow-color: rgb(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* jQuery.UI dialog.
|
||||
*/
|
||||
--jui-dialog-title-color: var(--color-white);
|
||||
--jui-dialog-title-bg-color: var(--color-text);
|
||||
--jui-dialog-title-font-size: var(--font-size-h4);
|
||||
--jui-dialog-close-button-size: calc(var(--space-m) * 2);
|
||||
--jui-dialog-close-button-border-radius: 50%;
|
||||
--jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);
|
||||
--jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);
|
||||
--jui-dialog-border-radius: 0.25rem;
|
||||
--jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4) var(--color-text);
|
||||
--jui-dialog--focus-outline: 2px dotted transparent;
|
||||
--jui-dialog--focus-box-shadow: 0 0 0 0.1875rem var(--color-focus);
|
||||
--jui-dialog-z-index: 1260;
|
||||
--jui-dialog-off-canvas-z-index: 501;
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
--progress-bar-border-size: 1px;
|
||||
--progress-bar-small-size: calc(var(--space-xs) - (2 * var(--progress-bar-border-size)));
|
||||
--progress-bar-small-size-radius: var(--space-xs);
|
||||
--progress-bar-spacing-size: var(--space-xs);
|
||||
--progress-bar-transition: width 0.5s ease-out;
|
||||
--progress-bar-label-color: var(--color-text);
|
||||
--progress-bar-description-color: var(--color-gray-800);
|
||||
--progress-bar-description-font-size: var(--font-size-xs);
|
||||
--progress-track-border-color: var(--color-gray-500);
|
||||
--progress-track-bg-color: var(--color-gray-200);
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
--ajax-progress-margin-horizontal: var(--space-s);
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
--breadcrumb-height: 1.25rem;
|
||||
/**
|
||||
* Layout.
|
||||
*/
|
||||
--layout-region-edit-width: min(60rem, 100%);
|
||||
--layout-region-edit-extended-width: min(68rem, 100%);
|
||||
/**
|
||||
* Vertical Tabs.
|
||||
*
|
||||
* These are shared between the vertical tabs and media library.
|
||||
* @see ../components/vertical-tabs.pcss.css
|
||||
* @see ../theme/media-library.pcss.css
|
||||
*/
|
||||
--vertical-tabs-margin-vertical: var(--space-s);
|
||||
--vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
|
||||
--vertical-tabs-shadow: var(--details-box-shadow);
|
||||
--vertical-tabs-border-color: var(--details-border-color);
|
||||
--vertical-tabs-border-size: 1px;
|
||||
--vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
|
||||
--vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
|
||||
--vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
|
||||
--vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
|
||||
--vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
|
||||
--vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
|
||||
--vertical-tabs-menu-separator-color: var(--color-gray-200);
|
||||
--vertical-tabs-menu-separator-size: 1px;
|
||||
--vertical-tabs-menu-width: 20em;
|
||||
--vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
|
||||
--vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
|
||||
--vertical-tabs-menu-link--active-border-size: 0.25rem;
|
||||
--vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
|
||||
--vertical-tabs-menu--z-index: 0;
|
||||
}
|
||||
272
web/core/themes/claro/css/base/variables.pcss.css
Normal file
272
web/core/themes/claro/css/base/variables.pcss.css
Normal file
@ -0,0 +1,272 @@
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
--color-absolutezero: var(--color-blue-600);
|
||||
--color-white: #fff;
|
||||
--color-text: var(--color-gray);
|
||||
--color-text-light: var(--color-gray-500);
|
||||
--color-gray-050-o-40: rgb(243, 244, 249, 0.4);
|
||||
/* Secondary. */
|
||||
--color-gray-200-o-80: rgb(212, 212, 218, 0.8);
|
||||
--color-maximumred: var(--color-red-500);
|
||||
--color-sunglow: #ffd23f;
|
||||
--color-sunglow-shaded: #977405;
|
||||
--color-lightninggreen: #26a769;
|
||||
--color-focus: var(--color-lightninggreen);
|
||||
/* Variations. */
|
||||
--color-absolutezero-hover: var(--color-blue-650); /* 5% darker than base. */
|
||||
--color-absolutezero-active: var(--color-blue-700); /* 10% darker than base. */
|
||||
--color-maximumred-hover: var(--color-red-550); /* 5% darker than base. */
|
||||
--color-maximumred-active: var(--color-red-600); /* 10% darker than base. */
|
||||
--color-bgblue-hover: var(--color-blue-020); /* 2% darker than base. */
|
||||
--color-bgblue-active: var(--color-blue-050); /* 5% darker than base. */
|
||||
--color-bgred-hover: var(--color-red-020); /* 5% darker than base. */
|
||||
--color-bgred-active: var(--color-red-050); /* 10% darker than base. */
|
||||
/* Gray variations. */
|
||||
--color-gray: #232429;
|
||||
--color-gray-900: #393a3f;
|
||||
--color-gray-800: #55565b;
|
||||
--color-gray-700: #75767b;
|
||||
--color-gray-600: #828388;
|
||||
--color-gray-500: #919297;
|
||||
--color-gray-400: #adaeb3;
|
||||
--color-gray-300: #c1c2c7;
|
||||
--color-gray-200: #d3d4d9;
|
||||
--color-gray-100: #dedfe4;
|
||||
--color-gray-050: #f3f4f9;
|
||||
--color-gray-025: #f9faff;
|
||||
/* Blue variations. */
|
||||
--color-blue: var(--color-blue-600);
|
||||
--color-blue-900: #000f33;
|
||||
--color-blue-800: #001f66;
|
||||
--color-blue-700: #002e9a;
|
||||
--color-blue-650: #0036b1;
|
||||
--color-blue-600: #003ecc;
|
||||
--color-blue-500: #004eff;
|
||||
--color-blue-400: #3371ff;
|
||||
--color-blue-300: #6694ff;
|
||||
--color-blue-200: #99b8ff;
|
||||
--color-blue-100: #ccdbff;
|
||||
--color-blue-070: #dbe6ff;
|
||||
--color-blue-050: #e5edff;
|
||||
--color-blue-020: #f5f8ff;
|
||||
/* Red variations. */
|
||||
--color-red: var(--color-red-500);
|
||||
--color-red-900: #2c0707;
|
||||
--color-red-800: #580e0e;
|
||||
--color-red-700: #841515;
|
||||
--color-red-600: #b01c1c;
|
||||
--color-red-550: #c61f1f;
|
||||
--color-red-500: #dc2323;
|
||||
--color-red-400: #e34f4f;
|
||||
--color-red-300: #ea7b7b;
|
||||
--color-red-200: #f1a7a7;
|
||||
--color-red-100: #f8d3d3;
|
||||
--color-red-070: #fae0e0;
|
||||
--color-red-050: #fce9e9;
|
||||
--color-red-020: #fdf5f5;
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
--color-fg: var(--color-text);
|
||||
--color-bg: var(--color-white);
|
||||
--color-link: var(--color-absolutezero);
|
||||
--color-link-hover: var(--color-absolutezero-hover);
|
||||
--color-link-active: var(--color-absolutezero-active);
|
||||
--color-divider: rgb(142, 146, 156, 0.5);
|
||||
/*
|
||||
* Typography.
|
||||
*/
|
||||
--font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
--font-family-serif: "Times New Roman", times, serif;
|
||||
--line-height: 1.5;
|
||||
--line-height-heading: 1.3;
|
||||
--line-height-form-label: calc(18rem / 16); /* 18px */
|
||||
--font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
|
||||
--font-size-xl: 2.25rem; /* ~36px */
|
||||
--font-size-h1: 2.027rem; /* ~32px */
|
||||
--font-size-h2: 1.802rem; /* ~29px */
|
||||
--font-size-h3: 1.602rem; /* ~26px */
|
||||
--font-size-h4: 1.424rem; /* ~23px */
|
||||
--font-size-h5: 1.266rem; /* ~20px */
|
||||
--font-size-h6: 1.125rem; /* 18px */
|
||||
--font-size-s: 0.889rem; /* ~14px */
|
||||
--font-size-xs: 0.79rem; /* ~13px */
|
||||
--font-size-xxs: 0.702rem; /* ~11px */
|
||||
--font-size-label: var(--font-size-s);
|
||||
--font-size-description: var(--font-size-xs);
|
||||
/**
|
||||
* Spaces.
|
||||
*/
|
||||
--space-xl: 3rem; /* 3 * 16px = 48px */
|
||||
--space-l: 1.5rem; /* 1.5 * 16px = 24px */
|
||||
--space-m: 1rem; /* 1 * 16px = 16px */
|
||||
--space-s: 0.75rem; /* 0.75 * 16px = 12px */
|
||||
--space-xs: 0.5rem; /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
--speed-transition: 0.2s;
|
||||
--transition: all var(--speed-transition) ease-out;
|
||||
--base-border-radius: 2px;
|
||||
--focus-border-size: 3px;
|
||||
--focus-border-offset-size: 2px;
|
||||
--outline-size: 2px;
|
||||
--focus-outline: var(--outline-size) dotted transparent;
|
||||
--focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--color-focus);
|
||||
/**
|
||||
* Shadows.
|
||||
*/
|
||||
--shadow-z3: 0 14px 30px rgb(0, 0, 0, 0.1);
|
||||
/*
|
||||
* Inputs.
|
||||
*/
|
||||
--input-fg-color: var(--color-fg);
|
||||
--input-bg-color: var(--color-bg);
|
||||
--input-fg-color--description: var(--color-gray-800);
|
||||
--input-fg-color--placeholder: var(--color-gray-700);
|
||||
--input-border-color: var(--color-gray-500);
|
||||
--input--hover-border-color: var(--color-text);
|
||||
--input--focus-border-color: var(--color-absolutezero);
|
||||
--input--error-color: var(--color-maximumred);
|
||||
--input--error-border-color: var(--color-maximumred);
|
||||
--input--disabled-color: rgb(84, 85, 96, 0.6); /* Davy's gray with 0.6 opacity. */
|
||||
--input--disabled-fg-color: var(--color-gray-800);
|
||||
--input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */
|
||||
--input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */
|
||||
--input--disabled-border-opacity: 0.5;
|
||||
--input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */
|
||||
--input-border-size: 1px; /* (1/16)em ~ 1px */
|
||||
--input--error-border-size: 2px;
|
||||
--input-padding-vertical: calc(var(--space-s) - var(--input-border-size));
|
||||
--input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
|
||||
--input-font-size: var(--font-size-base);
|
||||
--input-line-height: var(--space-l);
|
||||
--input-padding-vertical--small: calc(var(--space-xs) - (var(--input-border-size) * 2));
|
||||
--input-padding-horizontal--small: calc(var(--space-m) - var(--input-border-size));
|
||||
--input-font-size--small: var(--font-size-xs);
|
||||
--input-line-height--small: 1.3125rem;
|
||||
--input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size));
|
||||
--input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size));
|
||||
--input--extrasmall-font-size: var(--font-size-s);
|
||||
--input--extrasmall-line-height: calc(var(--space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */
|
||||
--input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */
|
||||
--input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
--details-border-color: var(--color-gray-100);
|
||||
--details-summary-shadow-color: var(--color-focus);
|
||||
--details-summary-focus-border-size: var(--focus-border-size);
|
||||
--details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));
|
||||
--details-box-shadow: 0 2px 4px rgb(0, 0, 0, 0.1);
|
||||
--details-border-size: 1px;
|
||||
--details-border-size-radius: 2px;
|
||||
--details-accordion-border-size-radius: var(--base-border-radius);
|
||||
--details-spread-box-shadow-radius: 2px;
|
||||
--details-bg-color-transition-duration: 0.12s;
|
||||
--details-box-shadow-transition-duration: 0.2s;
|
||||
--details-transform-transition-duration: 0.12s;
|
||||
--details-line-height: 1.295rem;
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
--button--focus-border-color: var(--color-blue-300);
|
||||
--button-border-radius-size: var(--base-border-radius);
|
||||
--button-fg-color: var(--color-text);
|
||||
--button-bg-color: var(--color-gray-200);
|
||||
--button--hover-bg-color: var(--color-gray-300);
|
||||
--button--active-bg-color: var(--color-gray-400);
|
||||
--button--disabled-bg-color: #ebebed;
|
||||
--button--disabled-fg-color: var(--color-gray-500);
|
||||
--button-fg-color--primary: var(--color-white);
|
||||
--button-bg-color--primary: var(--color-absolutezero);
|
||||
--button--hover-bg-color--primary: var(--color-absolutezero-hover);
|
||||
--button--active-bg-color--primary: var(--color-absolutezero-active);
|
||||
--button--focus-bg-color--primary: var(--button-bg-color--primary);
|
||||
--button--disabled-bg-color--primary: var(--color-gray-200);
|
||||
--button--disabled-fg-color--primary: var(--color-gray-600);
|
||||
--button-fg-color--danger: var(--color-white);
|
||||
--button-bg-color--danger: var(--color-maximumred);
|
||||
--button--hover-bg-color--danger: var(--color-maximumred-hover);
|
||||
--button--active-bg-color--danger: var(--color-maximumred-active);
|
||||
--dropbutton-widget-z-index: 100;
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/
|
||||
--jui-dropdown-fg-color: var(--color-gray-800);
|
||||
--jui-dropdown-bg-color: var(--color-white);
|
||||
--jui-dropdown--active-fg-color: var(--color-white);
|
||||
--jui-dropdown--active-bg-color: var(--color-absolutezero);
|
||||
--jui-dropdown-border-color: rgb(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */
|
||||
--jui-dropdown-shadow-color: rgb(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* jQuery.UI dialog.
|
||||
*/
|
||||
--jui-dialog-title-color: var(--color-white);
|
||||
--jui-dialog-title-bg-color: var(--color-text);
|
||||
--jui-dialog-title-font-size: var(--font-size-h4);
|
||||
--jui-dialog-close-button-size: calc(var(--space-m) * 2);
|
||||
--jui-dialog-close-button-border-radius: 50%;
|
||||
--jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);
|
||||
--jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);
|
||||
--jui-dialog-border-radius: 4px;
|
||||
--jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4) var(--color-text);
|
||||
--jui-dialog--focus-outline: 2px dotted transparent;
|
||||
--jui-dialog--focus-box-shadow: 0 0 0 3px var(--color-focus);
|
||||
--jui-dialog-z-index: 1260;
|
||||
--jui-dialog-off-canvas-z-index: 501;
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
--progress-bar-border-size: 1px;
|
||||
--progress-bar-small-size: calc(var(--space-xs) - (2 * var(--progress-bar-border-size)));
|
||||
--progress-bar-small-size-radius: var(--space-xs);
|
||||
--progress-bar-spacing-size: var(--space-xs);
|
||||
--progress-bar-transition: width 0.5s ease-out;
|
||||
--progress-bar-label-color: var(--color-text);
|
||||
--progress-bar-description-color: var(--color-gray-800);
|
||||
--progress-bar-description-font-size: var(--font-size-xs);
|
||||
--progress-track-border-color: var(--color-gray-500);
|
||||
--progress-track-bg-color: var(--color-gray-200);
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
--ajax-progress-margin-horizontal: var(--space-s);
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
--breadcrumb-height: 1.25rem;
|
||||
/**
|
||||
* Layout.
|
||||
*/
|
||||
--layout-region-edit-width: min(960px, 100%);
|
||||
--layout-region-edit-extended-width: min(1088px, 100%);
|
||||
/**
|
||||
* Vertical Tabs.
|
||||
*
|
||||
* These are shared between the vertical tabs and media library.
|
||||
* @see ../components/vertical-tabs.pcss.css
|
||||
* @see ../theme/media-library.pcss.css
|
||||
*/
|
||||
--vertical-tabs-margin-vertical: var(--space-s);
|
||||
--vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
|
||||
--vertical-tabs-shadow: var(--details-box-shadow);
|
||||
--vertical-tabs-border-color: var(--details-border-color);
|
||||
--vertical-tabs-border-size: 1px;
|
||||
--vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
|
||||
--vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
|
||||
--vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
|
||||
--vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
|
||||
--vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
|
||||
--vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
|
||||
--vertical-tabs-menu-separator-color: var(--color-gray-200);
|
||||
--vertical-tabs-menu-separator-size: 1px;
|
||||
--vertical-tabs-menu-width: 20em;
|
||||
--vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
|
||||
--vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
|
||||
--vertical-tabs-menu-link--active-border-size: 4px;
|
||||
--vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
|
||||
--vertical-tabs-menu--z-index: 0;
|
||||
}
|
||||
9
web/core/themes/claro/css/classy/README.txt
Normal file
9
web/core/themes/claro/css/classy/README.txt
Normal file
@ -0,0 +1,9 @@
|
||||
WHAT IS THIS DIRECTORY FOR?
|
||||
--------------------------------
|
||||
This directory is for CSS files previously inherited from the Classy theme.
|
||||
|
||||
WHY WERE CLASSY CSS FILES COPIED HERE?
|
||||
-------------------------------------------
|
||||
Classy was removed in Drupal 10. To prepare for Classy's removal, CSS files that
|
||||
would otherwise be inherited from Classy were copied here.
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
/**
|
||||
* @file
|
||||
* Inline items.
|
||||
*/
|
||||
|
||||
.container-inline label::after,
|
||||
.container-inline .label::after {
|
||||
content: ":";
|
||||
}
|
||||
.form-type-radios .container-inline label::after,
|
||||
.form-type-checkboxes .container-inline label::after {
|
||||
content: "";
|
||||
}
|
||||
.form-type-radios .container-inline .form-type-radio,
|
||||
.form-type-checkboxes .container-inline .form-type-checkbox {
|
||||
margin: 0 1em;
|
||||
}
|
||||
.container-inline .form-actions,
|
||||
.container-inline.form-actions {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for exposed filters.
|
||||
*/
|
||||
|
||||
.exposed-filters .filters {
|
||||
float: left; /* LTR */
|
||||
margin-right: 1em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .exposed-filters .filters {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 1em;
|
||||
}
|
||||
.exposed-filters .form-item {
|
||||
margin: 0 0 0.1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
.exposed-filters .form-item label {
|
||||
float: left; /* LTR */
|
||||
width: 10em;
|
||||
font-weight: normal;
|
||||
}
|
||||
[dir="rtl"] .exposed-filters .form-item label {
|
||||
float: right;
|
||||
}
|
||||
.exposed-filters .form-select {
|
||||
width: 14em;
|
||||
}
|
||||
/* Current filters */
|
||||
.exposed-filters .current-filters {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.exposed-filters .current-filters .placeholder {
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
.exposed-filters .additional-filters {
|
||||
float: left; /* LTR */
|
||||
margin-right: 1em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .exposed-filters .additional-filters {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 1em;
|
||||
}
|
||||
25
web/core/themes/claro/css/classy/components/field.css
Normal file
25
web/core/themes/claro/css/classy/components/field.css
Normal file
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for fields.
|
||||
*/
|
||||
|
||||
.field__label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.field--label-inline .field__label,
|
||||
.field--label-inline .field__items {
|
||||
float: left; /* LTR */
|
||||
}
|
||||
.field--label-inline .field__label,
|
||||
.field--label-inline > .field__item,
|
||||
.field--label-inline .field__items {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
[dir="rtl"] .field--label-inline .field__label,
|
||||
[dir="rtl"] .field--label-inline .field__items {
|
||||
padding-right: 0;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.field--label-inline .field__label::after {
|
||||
content: ":";
|
||||
}
|
||||
62
web/core/themes/claro/css/classy/components/file.css
Normal file
62
web/core/themes/claro/css/classy/components/file.css
Normal file
@ -0,0 +1,62 @@
|
||||
/**
|
||||
* @file
|
||||
* Default style for file module.
|
||||
*/
|
||||
|
||||
/* File icons. */
|
||||
|
||||
.file {
|
||||
display: inline-block;
|
||||
min-height: 16px;
|
||||
padding-left: 20px; /* LTR */
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .file {
|
||||
padding-right: 20px;
|
||||
padding-left: inherit;
|
||||
background-position: right center;
|
||||
}
|
||||
.file--general,
|
||||
.file--application-octet-stream {
|
||||
background-image: url(../../../images/classy/icons/application-octet-stream.png);
|
||||
}
|
||||
.file--package-x-generic {
|
||||
background-image: url(../../../images/classy/icons/package-x-generic.png);
|
||||
}
|
||||
.file--x-office-spreadsheet {
|
||||
background-image: url(../../../images/classy/icons/x-office-spreadsheet.png);
|
||||
}
|
||||
.file--x-office-document {
|
||||
background-image: url(../../../images/classy/icons/x-office-document.png);
|
||||
}
|
||||
.file--x-office-presentation {
|
||||
background-image: url(../../../images/classy/icons/x-office-presentation.png);
|
||||
}
|
||||
.file--text-x-script {
|
||||
background-image: url(../../../images/classy/icons/text-x-script.png);
|
||||
}
|
||||
.file--text-html {
|
||||
background-image: url(../../../images/classy/icons/text-html.png);
|
||||
}
|
||||
.file--text-plain {
|
||||
background-image: url(../../../images/classy/icons/text-plain.png);
|
||||
}
|
||||
.file--application-pdf {
|
||||
background-image: url(../../../images/classy/icons/application-pdf.png);
|
||||
}
|
||||
.file--application-x-executable {
|
||||
background-image: url(../../../images/classy/icons/application-x-executable.png);
|
||||
}
|
||||
.file--audio {
|
||||
background-image: url(../../../images/classy/icons/audio-x-generic.png);
|
||||
}
|
||||
.file--video {
|
||||
background-image: url(../../../images/classy/icons/video-x-generic.png);
|
||||
}
|
||||
.file--text {
|
||||
background-image: url(../../../images/classy/icons/text-x-generic.png);
|
||||
}
|
||||
.file--image {
|
||||
background-image: url(../../../images/classy/icons/image-x-generic.png);
|
||||
}
|
||||
21
web/core/themes/claro/css/classy/components/icons.css
Normal file
21
web/core/themes/claro/css/classy/components/icons.css
Normal file
@ -0,0 +1,21 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for icons.
|
||||
*/
|
||||
|
||||
.icon-help {
|
||||
padding: 1px 0 1px 20px; /* LTR */
|
||||
background: url(../../../../../misc/help.png) 0 50% no-repeat; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .icon-help {
|
||||
padding: 1px 20px 1px 0;
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
.feed-icon {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-indent: -9999px;
|
||||
background: url(../../../../../misc/feed.svg) no-repeat;
|
||||
}
|
||||
15
web/core/themes/claro/css/classy/components/indented.css
Normal file
15
web/core/themes/claro/css/classy/components/indented.css
Normal file
@ -0,0 +1,15 @@
|
||||
/**
|
||||
* @file
|
||||
* Basic styling for comment module.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Indent threaded comments.
|
||||
*/
|
||||
.indented {
|
||||
margin-left: 25px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .indented {
|
||||
margin-right: 25px;
|
||||
margin-left: 0;
|
||||
}
|
||||
33
web/core/themes/claro/css/classy/components/inline-form.css
Normal file
33
web/core/themes/claro/css/classy/components/inline-form.css
Normal file
@ -0,0 +1,33 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for inline forms.
|
||||
*/
|
||||
|
||||
.form--inline .form-item {
|
||||
float: left; /* LTR */
|
||||
margin-right: 0.5em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .form--inline .form-item {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
/* This is required to win over specificity of [dir="rtl"] .form--inline .form-item */
|
||||
[dir="rtl"] .views-filterable-options-controls .form-item {
|
||||
margin-right: 2%;
|
||||
}
|
||||
.form--inline .form-item-separator {
|
||||
margin-top: 2.3em;
|
||||
margin-right: 1em; /* LTR */
|
||||
margin-left: 0.5em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .form--inline .form-item-separator {
|
||||
margin-right: 0.5em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
.form--inline .form-actions {
|
||||
clear: left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .form--inline .form-actions {
|
||||
clear: right;
|
||||
}
|
||||
32
web/core/themes/claro/css/classy/components/item-list.css
Normal file
32
web/core/themes/claro/css/classy/components/item-list.css
Normal file
@ -0,0 +1,32 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for item list.
|
||||
*/
|
||||
|
||||
.item-list .title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.item-list ul {
|
||||
margin: 0 0 0.75em 0;
|
||||
padding: 0;
|
||||
}
|
||||
.item-list li {
|
||||
margin: 0 0 0.25em 1.5em; /* LTR */
|
||||
padding: 0;
|
||||
}
|
||||
[dir="rtl"] .item-list li {
|
||||
margin: 0 1.5em 0.25em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Comma separated lists.
|
||||
*/
|
||||
.item-list--comma-list {
|
||||
display: inline;
|
||||
}
|
||||
.item-list--comma-list .item-list__comma-list,
|
||||
.item-list__comma-list li,
|
||||
[dir="rtl"] .item-list--comma-list .item-list__comma-list,
|
||||
[dir="rtl"] .item-list__comma-list li {
|
||||
margin: 0;
|
||||
}
|
||||
16
web/core/themes/claro/css/classy/components/link.css
Normal file
16
web/core/themes/claro/css/classy/components/link.css
Normal file
@ -0,0 +1,16 @@
|
||||
/**
|
||||
* @file
|
||||
* Style another element as a link.
|
||||
*/
|
||||
|
||||
button.link {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: 1em;
|
||||
}
|
||||
label button.link {
|
||||
font-weight: bold;
|
||||
}
|
||||
23
web/core/themes/claro/css/classy/components/links.css
Normal file
23
web/core/themes/claro/css/classy/components/links.css
Normal file
@ -0,0 +1,23 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for links.
|
||||
*/
|
||||
|
||||
ul.inline,
|
||||
ul.links.inline {
|
||||
display: inline;
|
||||
padding-left: 0; /* LTR */
|
||||
}
|
||||
[dir="rtl"] ul.inline,
|
||||
[dir="rtl"] ul.links.inline {
|
||||
padding-right: 0;
|
||||
padding-left: 15px;
|
||||
}
|
||||
ul.inline li {
|
||||
display: inline;
|
||||
padding: 0 0.5em;
|
||||
list-style-type: none;
|
||||
}
|
||||
ul.links a.is-active {
|
||||
color: #000;
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
/**
|
||||
* @file
|
||||
* Media Embed filter: default styling for media embed errors.
|
||||
*/
|
||||
|
||||
/**
|
||||
* The caption filter's styling overrides ours, so add a more specific selector
|
||||
* to account for that.
|
||||
*/
|
||||
.media-embed-error,
|
||||
.caption > .media-embed-error {
|
||||
max-width: 200px;
|
||||
padding: 100px 20px 20px;
|
||||
text-align: center;
|
||||
background-color: #ebebeb;
|
||||
background-image: url(../../../../../modules/media/images/icons/no-thumbnail.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
34
web/core/themes/claro/css/classy/components/menu.css
Normal file
34
web/core/themes/claro/css/classy/components/menu.css
Normal file
@ -0,0 +1,34 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for menu.
|
||||
*/
|
||||
|
||||
ul.menu {
|
||||
margin-left: 1em; /* LTR */
|
||||
padding: 0;
|
||||
list-style: none outside;
|
||||
text-align: left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] ul.menu {
|
||||
margin-right: 1em;
|
||||
margin-left: 0;
|
||||
text-align: right;
|
||||
}
|
||||
.menu-item--expanded {
|
||||
list-style-type: circle;
|
||||
list-style-image: url(../../../../../misc/menu-expanded.png);
|
||||
}
|
||||
.menu-item--collapsed {
|
||||
list-style-type: disc;
|
||||
list-style-image: url(../../../../../misc/menu-collapsed.png); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .menu-item--collapsed {
|
||||
list-style-image: url(../../../../../misc/menu-collapsed-rtl.png);
|
||||
}
|
||||
.menu-item {
|
||||
margin: 0;
|
||||
padding-top: 0.2em;
|
||||
}
|
||||
ul.menu a.is-active {
|
||||
color: #000;
|
||||
}
|
||||
12
web/core/themes/claro/css/classy/components/more-link.css
Normal file
12
web/core/themes/claro/css/classy/components/more-link.css
Normal file
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* @file
|
||||
* Markup generated by #type 'more_link'.
|
||||
*/
|
||||
|
||||
.more-link {
|
||||
display: block;
|
||||
text-align: right; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .more-link {
|
||||
text-align: left;
|
||||
}
|
||||
8
web/core/themes/claro/css/classy/components/node.css
Normal file
8
web/core/themes/claro/css/classy/components/node.css
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for nodes.
|
||||
*/
|
||||
|
||||
.node--unpublished {
|
||||
background-color: #fff4f4;
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* @file
|
||||
* Stylesheet for results generated by the Search module.
|
||||
*/
|
||||
|
||||
.search-results {
|
||||
list-style: none;
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* @file
|
||||
* Table sort indicator.
|
||||
*/
|
||||
|
||||
th.is-active img {
|
||||
display: inline;
|
||||
}
|
||||
11
web/core/themes/claro/css/classy/components/textarea.css
Normal file
11
web/core/themes/claro/css/classy/components/textarea.css
Normal file
@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for a resizable textarea.
|
||||
*/
|
||||
|
||||
.form-textarea-wrapper textarea {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
15
web/core/themes/claro/css/classy/components/ui-dialog.css
Normal file
15
web/core/themes/claro/css/classy/components/ui-dialog.css
Normal file
@ -0,0 +1,15 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for modal windows.
|
||||
*/
|
||||
|
||||
.ui-dialog--narrow {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.ui-dialog--narrow {
|
||||
min-width: 95%;
|
||||
max-width: 95%;
|
||||
}
|
||||
}
|
||||
57
web/core/themes/claro/css/components/accordion.css
Normal file
57
web/core/themes/claro/css/components/accordion.css
Normal file
@ -0,0 +1,57 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Accordion styles.
|
||||
*/
|
||||
|
||||
.accordion {
|
||||
--accordion-color: var(--color-text);
|
||||
--accordion-border-size: var(--details-border-size);
|
||||
--accordion-border-color: var(--details-border-color);
|
||||
--accordion-border-radius: var(--details-accordion-border-size-radius);
|
||||
--accordion-bg-color: var(--color-white);
|
||||
--accordion-box-shadow: var(--details-box-shadow);
|
||||
|
||||
color: var(--accordion-color);
|
||||
border: var(--accordion-border-size) solid var(--accordion-border-color);
|
||||
border-radius: var(--accordion-border-radius);
|
||||
background-color: var(--accordion-bg-color);
|
||||
box-shadow: var(--accordion-box-shadow);
|
||||
}
|
||||
|
||||
.accordion__item {
|
||||
--accordion-item-border-radius: var(--details-accordion-border-size-radius);
|
||||
|
||||
margin: 0 -1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.accordion__item:first-child {
|
||||
margin-top: -1px;
|
||||
border-top-left-radius: var(--accordion-item-border-radius);
|
||||
border-top-right-radius: var(--accordion-item-border-radius);
|
||||
}
|
||||
|
||||
.accordion__item + .accordion__item {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.accordion__item:last-child {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: var(--accordion-item-border-radius);
|
||||
border-bottom-left-radius: var(--accordion-item-border-radius);
|
||||
}
|
||||
|
||||
.accordion__item .claro-details__summary .summary {
|
||||
--accordion-summary-color: var(--color-gray-800);
|
||||
|
||||
display: block;
|
||||
color: var(--accordion-summary-color);
|
||||
font-weight: normal;
|
||||
}
|
||||
50
web/core/themes/claro/css/components/accordion.pcss.css
Normal file
50
web/core/themes/claro/css/components/accordion.pcss.css
Normal file
@ -0,0 +1,50 @@
|
||||
/**
|
||||
* @file
|
||||
* Accordion styles.
|
||||
*/
|
||||
|
||||
.accordion {
|
||||
--accordion-color: var(--color-text);
|
||||
--accordion-border-size: var(--details-border-size);
|
||||
--accordion-border-color: var(--details-border-color);
|
||||
--accordion-border-radius: var(--details-accordion-border-size-radius);
|
||||
--accordion-bg-color: var(--color-white);
|
||||
--accordion-box-shadow: var(--details-box-shadow);
|
||||
|
||||
color: var(--accordion-color);
|
||||
border: var(--accordion-border-size) solid var(--accordion-border-color);
|
||||
border-radius: var(--accordion-border-radius);
|
||||
background-color: var(--accordion-bg-color);
|
||||
box-shadow: var(--accordion-box-shadow);
|
||||
}
|
||||
|
||||
.accordion__item {
|
||||
--accordion-item-border-radius: var(--details-accordion-border-size-radius);
|
||||
|
||||
margin: 0 -1px;
|
||||
border-radius: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: -1px;
|
||||
border-top-left-radius: var(--accordion-item-border-radius);
|
||||
border-top-right-radius: var(--accordion-item-border-radius);
|
||||
}
|
||||
|
||||
& + .accordion__item {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: var(--accordion-item-border-radius);
|
||||
border-bottom-left-radius: var(--accordion-item-border-radius);
|
||||
}
|
||||
|
||||
& .claro-details__summary .summary {
|
||||
--accordion-summary-color: var(--color-gray-800);
|
||||
|
||||
display: block;
|
||||
color: var(--accordion-summary-color);
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
504
web/core/themes/claro/css/components/action-link.css
Normal file
504
web/core/themes/claro/css/components/action-link.css
Normal file
@ -0,0 +1,504 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styles for action links.
|
||||
*
|
||||
* Contains Action link component and the action-links layout styles.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Action links layout.
|
||||
*/
|
||||
|
||||
.action-links {
|
||||
margin: var(--space-l) 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.action-links__item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.action-links__item + .action-links__item > .action-link {
|
||||
margin-inline-start: var(--space-s);
|
||||
}
|
||||
|
||||
.action-links__item + .action-links__item > .action-link--small {
|
||||
margin-inline-start: var(--space-xs);
|
||||
}
|
||||
|
||||
/**
|
||||
* The action link component.
|
||||
*/
|
||||
|
||||
.action-link {
|
||||
display: inline-block;
|
||||
padding: calc(var(--space-m) - ((var(--space-l) - var(--space-m)) / 2)) var(--space-m);
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--color-gray-800);
|
||||
border-radius: var(--button-border-radius-size);
|
||||
background-color: var(--color-bg);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 700;
|
||||
line-height: var(--space-l);
|
||||
/* Bigger line-height needed to prevent the icon from increasing the height */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
/* Action link states */
|
||||
}
|
||||
|
||||
.action-link:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--color-absolutezero-hover);
|
||||
background-color: var(--color-bgblue-hover);
|
||||
}
|
||||
|
||||
.action-link:focus {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.action-link:active {
|
||||
color: var(--color-absolutezero-active);
|
||||
background-color: var(--color-bgblue-active);
|
||||
}
|
||||
|
||||
/**
|
||||
* Action link icons with states.
|
||||
*
|
||||
* We use parent-relative units here to follow the .action-link's font size.
|
||||
*/
|
||||
|
||||
/* Defaults for icons */
|
||||
|
||||
.action-link::before {
|
||||
position: relative;
|
||||
inset-block-start: 0.125rem;
|
||||
/* Set the proper vertical alignment */
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-inline: calc(var(--space-s) - var(--space-m)) 0.5em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.action-link + .action-link {
|
||||
margin-inline-start: var(--space-s);
|
||||
}
|
||||
|
||||
/**
|
||||
* Action links inside form-actions.
|
||||
*
|
||||
* Add the same margin for action-link inside form-actions as button has.
|
||||
*/
|
||||
|
||||
.form-actions .action-link,
|
||||
.field-actions .action-link {
|
||||
margin-inline: 0 var(--space-s);
|
||||
}
|
||||
|
||||
/* Small variant. */
|
||||
|
||||
.no-touchevents .action-link--small {
|
||||
padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s);
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
/* Extra small variant. */
|
||||
|
||||
.no-touchevents .action-link--extrasmall {
|
||||
padding: 0 var(--space-xs);
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
.no-touchevents .action-link--small + .action-link--small,
|
||||
.no-touchevents .action-link--extrasmall + .action-link--extrasmall {
|
||||
margin-inline-start: var(--space-xs);
|
||||
}
|
||||
|
||||
/**
|
||||
* Action link variants.
|
||||
*/
|
||||
|
||||
/* Danger. */
|
||||
|
||||
.action-link--danger {
|
||||
color: var(--color-maximumred);
|
||||
}
|
||||
|
||||
.action-link--danger:hover {
|
||||
color: var(--color-maximumred-hover);
|
||||
background-color: var(--color-bgred-hover);
|
||||
}
|
||||
|
||||
.action-link--danger:active {
|
||||
color: var(--color-maximumred-active);
|
||||
background-color: var(--color-bgred-active);
|
||||
}
|
||||
|
||||
.no-touchevents .action-link--small::before,
|
||||
.no-touchevents .action-link--extrasmall::before {
|
||||
inset-block-start: 0.0625rem;
|
||||
/* Set the proper vertical alignment */
|
||||
width: var(--space-s);
|
||||
height: var(--space-s);
|
||||
margin-inline: -0.125rem 0.4em;
|
||||
}
|
||||
|
||||
/* Plus */
|
||||
|
||||
.action-link--icon-plus::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23545560' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.action-link--icon-plus::before {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-plus:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%230036b1' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-plus:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23002E9A' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Plus — danger */
|
||||
|
||||
.action-link--icon-plus.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-plus.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23c11f1f' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-plus.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23ab1b1b' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Trash */
|
||||
|
||||
.action-link--icon-trash::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23545560' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.action-link--icon-trash::before {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23d72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-trash:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%230036B1' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-trash:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23002E9A' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Trash — danger */
|
||||
|
||||
.action-link--icon-trash.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23d72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-trash.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23C11F1F' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-trash.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23Ab1B1B' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Ex */
|
||||
|
||||
.action-link--icon-ex::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23545560' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.action-link--icon-ex::before {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-ex:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%230035b1' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-ex:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23002E9A' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Ex — danger */
|
||||
|
||||
.action-link--icon-ex.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-ex.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23c11f1f' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-ex.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23ab1b1b' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Checkmark */
|
||||
|
||||
.action-link--icon-checkmark::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23545560' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.action-link--icon-checkmark::before {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-checkmark:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%230036B1' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-checkmark:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23002E9A' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Checkmark — danger */
|
||||
|
||||
.action-link--icon-checkmark.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-checkmark.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23c11f1f' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-checkmark.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23ab1b1b' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Cog */
|
||||
|
||||
.action-link--icon-cog::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23545560' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.action-link--icon-cog::before {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3csvg height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-cog:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%230036b1' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-cog:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Cog — danger */
|
||||
|
||||
.action-link--icon-cog.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-cog.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23C11F1F' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-cog.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23AB1B1B' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Show */
|
||||
|
||||
.action-link--icon-show::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23545560' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.action-link--icon-show::before {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' width='16' fill='%23D72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-show:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%230036B1' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-show:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Show - danger */
|
||||
|
||||
.action-link--icon-show.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' width='16' fill='%23D72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-show.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23d72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-show.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23AB1B1B' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Hide */
|
||||
|
||||
.action-link--icon-hide::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23545560' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.action-link--icon-hide::before {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-hide:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%230036B1' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-hide:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Hide - danger */
|
||||
|
||||
.action-link--icon-hide.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-hide.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23C11F1F' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-hide.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23AB1B1B' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Key */
|
||||
|
||||
.action-link--icon-key::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23545560'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.action-link--icon-key::before {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23d72222'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-key:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%230036B1'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-key:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23002E9A'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Key — danger */
|
||||
|
||||
.action-link--icon-key.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23d72222'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-key.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23c11f1f'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-key.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23ab1b1b'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Question Mark */
|
||||
|
||||
.action-link--icon-questionmark::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23545560'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.action-link--icon-questionmark::before {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23d72222'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-questionmark:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%230036B1'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-questionmark:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23002E9A'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Question Mark - danger */
|
||||
|
||||
.action-link--icon-questionmark.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23d72222'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-questionmark.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23c11f1f'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-questionmark.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23ab1b1b'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.action-link--icon-chevron-left::before {
|
||||
display: block;
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 2L5 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
@media (min-width: 30em) {
|
||||
.action-link--icon-chevron-left::before {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
493
web/core/themes/claro/css/components/action-link.pcss.css
Normal file
493
web/core/themes/claro/css/components/action-link.pcss.css
Normal file
@ -0,0 +1,493 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for action links.
|
||||
*
|
||||
* Contains Action link component and the action-links layout styles.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Action links layout.
|
||||
*/
|
||||
.action-links {
|
||||
margin: var(--space-l) 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.action-links__item {
|
||||
display: inline-block;
|
||||
|
||||
& + .action-links__item {
|
||||
& > .action-link {
|
||||
margin-inline-start: var(--space-s);
|
||||
}
|
||||
|
||||
& > .action-link--small {
|
||||
margin-inline-start: var(--space-xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The action link component.
|
||||
*/
|
||||
.action-link {
|
||||
display: inline-block;
|
||||
padding: calc(var(--space-m) - ((var(--space-l) - var(--space-m)) / 2)) var(--space-m);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: var(--color-gray-800);
|
||||
border-radius: var(--button-border-radius-size);
|
||||
background-color: var(--color-bg);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 700;
|
||||
line-height: var(--space-l);
|
||||
/* Bigger line-height needed to prevent the icon from increasing the height */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
/* Action link states */
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--color-absolutezero-hover);
|
||||
background-color: var(--color-bgblue-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-absolutezero-active);
|
||||
background-color: var(--color-bgblue-active);
|
||||
}
|
||||
|
||||
/**
|
||||
* Action link icons with states.
|
||||
*
|
||||
* We use parent-relative units here to follow the .action-link's font size.
|
||||
*/
|
||||
|
||||
/* Defaults for icons */
|
||||
&::before {
|
||||
position: relative;
|
||||
inset-block-start: 0.125rem;
|
||||
/* Set the proper vertical alignment */
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-inline: calc(var(--space-s) - var(--space-m)) 0.5em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
& + .action-link {
|
||||
margin-inline-start: var(--space-s);
|
||||
}
|
||||
|
||||
/**
|
||||
* Action links inside form-actions.
|
||||
*
|
||||
* Add the same margin for action-link inside form-actions as button has.
|
||||
*/
|
||||
.form-actions &,
|
||||
.field-actions & {
|
||||
margin-inline: 0 var(--space-s);
|
||||
}
|
||||
}
|
||||
|
||||
.no-touchevents {
|
||||
/* Small variant. */
|
||||
& .action-link--small {
|
||||
padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s);
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
/* Extra small variant. */
|
||||
& .action-link--extrasmall {
|
||||
padding: 0 var(--space-xs);
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
& .action-link--small + .action-link--small,
|
||||
& .action-link--extrasmall + .action-link--extrasmall {
|
||||
margin-inline-start: var(--space-xs);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Action link variants.
|
||||
*/
|
||||
/* Danger. */
|
||||
.action-link--danger {
|
||||
color: var(--color-maximumred);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-maximumred-hover);
|
||||
background-color: var(--color-bgred-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-maximumred-active);
|
||||
background-color: var(--color-bgred-active);
|
||||
}
|
||||
}
|
||||
|
||||
.no-touchevents .action-link--small::before,
|
||||
.no-touchevents .action-link--extrasmall::before {
|
||||
inset-block-start: 0.0625rem;
|
||||
/* Set the proper vertical alignment */
|
||||
width: var(--space-s);
|
||||
height: var(--space-s);
|
||||
margin-inline: -0.125rem 0.4em;
|
||||
}
|
||||
|
||||
.action-link--icon-plus {
|
||||
/* Plus */
|
||||
&::before {
|
||||
content: "";
|
||||
background-image: url(../../images/icons/545560/plus.svg);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url(../../images/icons/d72222/plus.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url(../../images/icons/0036b1/plus.svg);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url(../../images/icons/002e9a/plus.svg);
|
||||
}
|
||||
|
||||
&.action-link--danger {
|
||||
/* Plus — danger */
|
||||
&::before {
|
||||
background-image: url(../../images/icons/d72222/plus.svg);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url(../../images/icons/c11f1f/plus.svg);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url(../../images/icons/ab1b1b/plus.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-trash {
|
||||
/* Trash */
|
||||
&::before {
|
||||
content: "";
|
||||
background-image: url(../../images/icons/545560/trash.svg);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url(../../images/icons/d72222/trash.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url(../../images/icons/0036b1/trash.svg);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url(../../images/icons/002e9a/trash.svg);
|
||||
}
|
||||
|
||||
&.action-link--danger {
|
||||
/* Trash — danger */
|
||||
&::before {
|
||||
background-image: url(../../images/icons/d72222/trash.svg);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url(../../images/icons/c11f1f/trash.svg);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url(../../images/icons/ab1b1b/trash.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-ex {
|
||||
/* Ex */
|
||||
&::before {
|
||||
content: "";
|
||||
background-image: url(../../images/icons/545560/ex.svg);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url(../../images/icons/d72222/ex.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url(../../images/icons/0036b1/ex.svg);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url(../../images/icons/002e9a/ex.svg);
|
||||
}
|
||||
|
||||
&.action-link--danger {
|
||||
/* Ex — danger */
|
||||
&::before {
|
||||
background-image: url(../../images/icons/d72222/ex.svg);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url(../../images/icons/c11f1f/ex.svg);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url(../../images/icons/ab1b1b/ex.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-checkmark {
|
||||
/* Checkmark */
|
||||
&::before {
|
||||
content: "";
|
||||
background-image: url(../../images/icons/545560/checkmark.svg);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url(../../images/icons/d72222/checkmark.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url(../../images/icons/0036b1/checkmark.svg);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url(../../images/icons/002e9a/checkmark.svg);
|
||||
}
|
||||
|
||||
&.action-link--danger {
|
||||
/* Checkmark — danger */
|
||||
&::before {
|
||||
background-image: url(../../images/icons/d72222/checkmark.svg);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url(../../images/icons/c11f1f/checkmark.svg);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url(../../images/icons/ab1b1b/checkmark.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-cog {
|
||||
/* Cog */
|
||||
&::before {
|
||||
content: "";
|
||||
background-image: url(../../images/icons/545560/cog.svg);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url(../../images/icons/d72222/cog.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url(../../images/icons/0036b1/cog.svg);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url(../../images/icons/002e9a/cog.svg);
|
||||
}
|
||||
|
||||
&.action-link--danger {
|
||||
/* Cog — danger */
|
||||
&::before {
|
||||
background-image: url(../../images/icons/d72222/cog.svg);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url(../../images/icons/c11f1f/cog.svg);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url(../../images/icons/ab1b1b/cog.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-show {
|
||||
/* Show */
|
||||
&::before {
|
||||
content: "";
|
||||
background-image: url(../../images/icons/545560/show.svg);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url(../../images/icons/d72222/show.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url(../../images/icons/0036b1/show.svg);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url(../../images/icons/002e9a/show.svg);
|
||||
}
|
||||
|
||||
&.action-link--danger {
|
||||
/* Show - danger */
|
||||
&::before {
|
||||
background-image: url(../../images/icons/d72222/show.svg);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url(../../images/icons/c11f1f/show.svg);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url(../../images/icons/ab1b1b/show.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-hide {
|
||||
/* Hide */
|
||||
&::before {
|
||||
content: "";
|
||||
background-image: url(../../images/icons/545560/hide.svg);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url(../../images/icons/d72222/hide.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url(../../images/icons/0036b1/hide.svg);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url(../../images/icons/002e9a/hide.svg);
|
||||
}
|
||||
|
||||
&.action-link--danger {
|
||||
/* Hide - danger */
|
||||
&::before {
|
||||
background-image: url(../../images/icons/d72222/hide.svg);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url(../../images/icons/c11f1f/hide.svg);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url(../../images/icons/ab1b1b/hide.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-key {
|
||||
/* Key */
|
||||
&::before {
|
||||
content: "";
|
||||
background-image: url("../../images/icons/545560/key.svg");
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url(../../images/icons/d72222/key.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url("../../images/icons/0036b1/key.svg");
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url("../../images/icons/002e9a/key.svg");
|
||||
}
|
||||
|
||||
&.action-link--danger {
|
||||
/* Key — danger */
|
||||
&::before {
|
||||
background-image: url("../../images/icons/d72222/key.svg");
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url("../../images/icons/c11f1f/key.svg");
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url("../../images/icons/ab1b1b/key.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-questionmark {
|
||||
/* Question Mark */
|
||||
&::before {
|
||||
content: "";
|
||||
background-image: url("../../images/icons/545560/questionmark.svg");
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: linktext !important;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url(../../images/icons/d72222/questionmark.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url("../../images/icons/0036b1/questionmark.svg");
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url("../../images/icons/002e9a/questionmark.svg");
|
||||
}
|
||||
|
||||
&.action-link--danger {
|
||||
/* Question Mark - danger */
|
||||
&::before {
|
||||
background-image: url("../../images/icons/d72222/questionmark.svg");
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url("../../images/icons/c11f1f/questionmark.svg");
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-image: url("../../images/icons/ab1b1b/questionmark.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-link--icon-chevron-left {
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
background-image: url("../../images/icons/545560/pager-prev.svg");
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 30em) {
|
||||
.action-link--icon-chevron-left {
|
||||
&::before {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
120
web/core/themes/claro/css/components/ajax-progress.module.css
Normal file
120
web/core/themes/claro/css/components/ajax-progress.module.css
Normal file
@ -0,0 +1,120 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Throbber.
|
||||
*/
|
||||
|
||||
.ajax-progress {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
|
||||
.ajax-progress-bar {
|
||||
width: 13em;
|
||||
padding: 0 0.3125rem; /* 0 5px */
|
||||
}
|
||||
|
||||
/**
|
||||
* Throbber.
|
||||
*/
|
||||
|
||||
.ajax-progress--throbber {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-content: center;
|
||||
height: 1.125rem;
|
||||
margin: -0.1875rem var(--ajax-progress-margin-horizontal) 0;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove margin from ajax throbbers following buttons because buttons already
|
||||
* have a large margin set.
|
||||
*/
|
||||
|
||||
.js .action-link:not(.js-hide, .button--action) + .ajax-progress--throbber,
|
||||
.js .button:not(.js-hide, .button--action) + .ajax-progress--throbber {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore start margin for ajax throbbers inside a managed file widget.
|
||||
*/
|
||||
|
||||
.js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
|
||||
.js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
|
||||
margin-inline-start: var(--ajax-progress-margin-horizontal); /* LTR */
|
||||
}
|
||||
|
||||
.ajax-progress__throbber {
|
||||
box-sizing: border-box;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
animation: claro-throbber 0.75s linear infinite;
|
||||
border: 2px solid var(--color-absolutezero);
|
||||
border-right: 2px dotted transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ajax-progress__message {
|
||||
display: inline-block;
|
||||
padding-inline-start: var(--ajax-progress-margin-horizontal);
|
||||
font-size: var(--font-size-label);
|
||||
}
|
||||
|
||||
/**
|
||||
* Full screen throbber.
|
||||
*/
|
||||
|
||||
.ajax-progress--fullscreen,
|
||||
.ui-dialog .ajax-progress--throbber {
|
||||
position: fixed;
|
||||
z-index: 1261;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 50%;
|
||||
box-sizing: border-box;
|
||||
width: 3.5rem; /* 56px */
|
||||
height: 3.5rem;
|
||||
margin: -1.75rem;
|
||||
border: var(--input-border-size) solid var(--jui-dropdown-border-color);
|
||||
border-radius: 3.5rem;
|
||||
background: var(--color-white);
|
||||
box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
|
||||
}
|
||||
|
||||
.ajax-progress__throbber--fullscreen,
|
||||
.ui-dialog .ajax-progress__throbber {
|
||||
position: absolute;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 50%;
|
||||
width: 1.75rem; /* 28px */
|
||||
height: 1.75rem; /* 28px */
|
||||
margin: -0.875rem;
|
||||
content: "";
|
||||
border: 3px solid var(--color-absolutezero);
|
||||
border-right: 3px dotted transparent;
|
||||
}
|
||||
|
||||
.ui-dialog .ajax-progress__message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes claro-throbber {
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,107 @@
|
||||
/**
|
||||
* @file
|
||||
* Throbber.
|
||||
*/
|
||||
|
||||
.ajax-progress {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
|
||||
.ajax-progress-bar {
|
||||
width: 13em;
|
||||
padding: 0 0.3125rem; /* 0 5px */
|
||||
}
|
||||
|
||||
/**
|
||||
* Throbber.
|
||||
*/
|
||||
.ajax-progress--throbber {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-content: center;
|
||||
height: 1.125rem;
|
||||
margin: -3px var(--ajax-progress-margin-horizontal) 0;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove margin from ajax throbbers following buttons because buttons already
|
||||
* have a large margin set.
|
||||
*/
|
||||
.js .action-link:not(.js-hide, .button--action) + .ajax-progress--throbber,
|
||||
.js .button:not(.js-hide, .button--action) + .ajax-progress--throbber {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
/**
|
||||
* Restore start margin for ajax throbbers inside a managed file widget.
|
||||
*/
|
||||
.js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
|
||||
.js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
|
||||
margin-inline-start: var(--ajax-progress-margin-horizontal); /* LTR */
|
||||
}
|
||||
|
||||
.ajax-progress__throbber {
|
||||
box-sizing: border-box;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
animation: claro-throbber 0.75s linear infinite;
|
||||
border: 2px solid var(--color-absolutezero);
|
||||
border-right: 2px dotted transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ajax-progress__message {
|
||||
display: inline-block;
|
||||
padding-inline-start: var(--ajax-progress-margin-horizontal);
|
||||
font-size: var(--font-size-label);
|
||||
}
|
||||
|
||||
/**
|
||||
* Full screen throbber.
|
||||
*/
|
||||
.ajax-progress--fullscreen,
|
||||
.ui-dialog .ajax-progress--throbber {
|
||||
position: fixed;
|
||||
z-index: 1261;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 50%;
|
||||
box-sizing: border-box;
|
||||
width: 3.5rem; /* 56px */
|
||||
height: 3.5rem;
|
||||
margin: -1.75rem;
|
||||
border: var(--input-border-size) solid var(--jui-dropdown-border-color);
|
||||
border-radius: 3.5rem;
|
||||
background: var(--color-white);
|
||||
box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
|
||||
}
|
||||
.ajax-progress__throbber--fullscreen,
|
||||
.ui-dialog .ajax-progress__throbber {
|
||||
position: absolute;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 50%;
|
||||
width: 1.75rem; /* 28px */
|
||||
height: 1.75rem; /* 28px */
|
||||
margin: -0.875rem;
|
||||
content: "";
|
||||
border: 3px solid var(--color-absolutezero);
|
||||
border-right: 3px dotted transparent;
|
||||
}
|
||||
|
||||
.ui-dialog .ajax-progress__message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes claro-throbber {
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for animated throbber.
|
||||
*
|
||||
* @see autocomplete.js
|
||||
*/
|
||||
|
||||
/* cspell:ignore is-autocompleting */
|
||||
|
||||
/**
|
||||
* Since the autocomplete library is attached conditionally and not globally,
|
||||
* we can be 99% sure that the default icon will be used.
|
||||
* With inline SVGs we can prevent a HTTP request and repaint addressing the
|
||||
* autocomplete input's background — until are sure that it will be pushed by
|
||||
* the server with HTTP/2.
|
||||
*
|
||||
* The active autocomplete state's background-image is inlined because non-used
|
||||
* CSS selectors are usually ignored; popular browsers don't download their
|
||||
* 'url' references.
|
||||
* If these selectors become active, the browser needs some time for painting
|
||||
* previously ignored remote asset: it should get it from server, parse it and
|
||||
* repaint the background of autocomplete field. With the inlined background we
|
||||
* can prevent an additional timeout caused by a new request/response pair.
|
||||
* Besides this, the autocomplete event itself may easily finish before the
|
||||
* missing asset gets downloaded/parsed/painted, and the missing instant visual
|
||||
* feedback would be a usability/accessibility issue as well.
|
||||
*/
|
||||
|
||||
.js .form-autocomplete {
|
||||
margin-inline-end: calc(var(--input-border-size) - 1.5 * var(--input-padding-horizontal));
|
||||
padding-inline-end: calc(var(--input-padding-horizontal) * 2.5 - var(--input-border-size));
|
||||
background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
.js .form-autocomplete.is-autocompleting {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e");
|
||||
background-position: center right -10px;
|
||||
}
|
||||
|
||||
.js[dir="rtl"] .form-autocomplete {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 1c4.54-.173 8.188 4.787 6.687 9.068-1.176 4.384-6.993 6.417-10.637 3.7-.326-.39-.565.276-.846.442l-3.74 3.739-1.413-1.414 4.35-4.35C3.59 8.717 5.25 2.938 9.462 1.475A7.003 7.003 0 0112 1zm0 2c-3.242-.123-5.849 3.42-4.777 6.477.842 3.132 4.994 4.58 7.6 2.65 2.745-1.73 2.9-6.125.285-8.044A5.006 5.006 0 0012 3z' fill='%23868686'/%3e%3c/svg%3e");
|
||||
background-position: 0 50%;
|
||||
}
|
||||
|
||||
.js[dir="rtl"] .form-autocomplete.is-autocompleting {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(-430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(-720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e");
|
||||
background-position: center left 10px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Autocomplete wrapper for autocomplete message.
|
||||
*/
|
||||
|
||||
.claro-autocomplete {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.claro-autocomplete__message {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
inset-block-end: 100%;
|
||||
max-width: 100%;
|
||||
margin-block-end: 0.15rem;
|
||||
color: var(--color-link);
|
||||
font-size: var(--font-size-xxs); /* ~11px */
|
||||
font-weight: bold;
|
||||
line-height: calc(18rem / 16); /* 18px */
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for animated throbber.
|
||||
*
|
||||
* @see autocomplete.js
|
||||
*/
|
||||
|
||||
/* cspell:ignore is-autocompleting */
|
||||
|
||||
/**
|
||||
* Since the autocomplete library is attached conditionally and not globally,
|
||||
* we can be 99% sure that the default icon will be used.
|
||||
* With inline SVGs we can prevent a HTTP request and repaint addressing the
|
||||
* autocomplete input's background — until are sure that it will be pushed by
|
||||
* the server with HTTP/2.
|
||||
*
|
||||
* The active autocomplete state's background-image is inlined because non-used
|
||||
* CSS selectors are usually ignored; popular browsers don't download their
|
||||
* 'url' references.
|
||||
* If these selectors become active, the browser needs some time for painting
|
||||
* previously ignored remote asset: it should get it from server, parse it and
|
||||
* repaint the background of autocomplete field. With the inlined background we
|
||||
* can prevent an additional timeout caused by a new request/response pair.
|
||||
* Besides this, the autocomplete event itself may easily finish before the
|
||||
* missing asset gets downloaded/parsed/painted, and the missing instant visual
|
||||
* feedback would be a usability/accessibility issue as well.
|
||||
*/
|
||||
|
||||
.js {
|
||||
& .form-autocomplete {
|
||||
margin-inline-end: calc(var(--input-border-size) - 1.5 * var(--input-padding-horizontal));
|
||||
padding-inline-end: calc(var(--input-padding-horizontal) * 2.5 - var(--input-border-size));
|
||||
background-image: url(../../images/icons/868686/magnifier.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
|
||||
&.is-autocompleting {
|
||||
background-image: url(../../images/icons/003ecc/spinner.svg);
|
||||
background-position: center right -10px;
|
||||
}
|
||||
}
|
||||
|
||||
&[dir="rtl"] {
|
||||
& .form-autocomplete {
|
||||
background-image: url(../../images/icons/868686/magnifier-rtl.svg);
|
||||
background-position: 0 50%;
|
||||
|
||||
&.is-autocompleting {
|
||||
background-image: url(../../images/icons/003ecc/spinner-rtl.svg);
|
||||
background-position: center left 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Autocomplete wrapper for autocomplete message.
|
||||
*/
|
||||
.claro-autocomplete {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.claro-autocomplete__message {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
inset-block-end: 100%;
|
||||
max-width: 100%;
|
||||
margin-block-end: 0.15rem;
|
||||
color: var(--color-link);
|
||||
font-size: var(--font-size-xxs); /* ~11px */
|
||||
font-weight: bold;
|
||||
line-height: calc(18rem / 16); /* 18px */
|
||||
}
|
||||
63
web/core/themes/claro/css/components/breadcrumb.css
Normal file
63
web/core/themes/claro/css/components/breadcrumb.css
Normal file
@ -0,0 +1,63 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Breadcrumbs.
|
||||
*/
|
||||
|
||||
.breadcrumb {
|
||||
padding: 0;
|
||||
color: var(--color-text);
|
||||
font-size: 0.79rem;
|
||||
}
|
||||
|
||||
.breadcrumb__list,
|
||||
[dir="rtl"] .breadcrumb__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.breadcrumb__item,
|
||||
.breadcrumb__link {
|
||||
display: inline-block;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
font-weight: bold;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.breadcrumb__item + .breadcrumb__item::before {
|
||||
display: inline-block;
|
||||
padding: 0 0.75rem;
|
||||
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
[dir="rtl"] :is(.breadcrumb__item + .breadcrumb__item::before) {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.breadcrumb__item + .breadcrumb__item::before {
|
||||
width: 0.3125rem; /* Width and height of the SVG. */
|
||||
height: 0.5rem;
|
||||
content: "";
|
||||
background-color: canvastext;
|
||||
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb__link:hover,
|
||||
.breadcrumb__link:focus {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
52
web/core/themes/claro/css/components/breadcrumb.pcss.css
Normal file
52
web/core/themes/claro/css/components/breadcrumb.pcss.css
Normal file
@ -0,0 +1,52 @@
|
||||
/**
|
||||
* @file
|
||||
* Breadcrumbs.
|
||||
*/
|
||||
|
||||
.breadcrumb {
|
||||
padding: 0;
|
||||
color: var(--color-text);
|
||||
font-size: 0.79rem;
|
||||
}
|
||||
|
||||
.breadcrumb__list,
|
||||
[dir="rtl"] .breadcrumb__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.breadcrumb__item,
|
||||
.breadcrumb__link {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
font-weight: bold;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.breadcrumb__item + .breadcrumb__item::before {
|
||||
display: inline-block;
|
||||
padding: 0 0.75rem;
|
||||
content: url(../../images/icons/currentColor/arrow-breadcrumb.svg);
|
||||
|
||||
[dir="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
width: 5px; /* Width and height of the SVG. */
|
||||
height: 8px;
|
||||
content: "";
|
||||
background-color: canvastext;
|
||||
mask-image: url(../../images/icons/currentColor/arrow-breadcrumb.svg);
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb__link:hover,
|
||||
.breadcrumb__link:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
163
web/core/themes/claro/css/components/button.css
Normal file
163
web/core/themes/claro/css/components/button.css
Normal file
@ -0,0 +1,163 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Structural styles for Claro's UI buttons
|
||||
*
|
||||
* Apply these classes to button elements (<button>, <input type="button" />).
|
||||
*/
|
||||
|
||||
/**
|
||||
* Buttons.
|
||||
*
|
||||
* 1. Padding widths detracted by width of the transparent borders to make
|
||||
* button size match with design system.
|
||||
* 2. Prevent fat text in WebKit.
|
||||
*
|
||||
* @todo Consider moving box-sizing into base.css under a universal selector.
|
||||
* See https://www.drupal.org/node/2124251
|
||||
*/
|
||||
|
||||
/**
|
||||
* Base button styles.
|
||||
*
|
||||
* These styles have been duplicated to dropbutton.css and action-links.css
|
||||
* since those components inherits most of these design elements. Whenever
|
||||
* making changes to this file, remember to check if that needs to be applied to
|
||||
* dropbutton.css or action-links.css as well.
|
||||
*/
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin-block: var(--space-m);
|
||||
margin-inline: 0 var(--space-s);
|
||||
padding: calc(var(--space-m) - 1px) calc(var(--space-l) - 1px); /* 1 */
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--button-fg-color);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--button-border-radius-size);
|
||||
background-color: var(--button-bg-color);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 700;
|
||||
line-height: 1rem;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased; /* 2 */
|
||||
}
|
||||
|
||||
.button:not(:focus) {
|
||||
box-shadow: 0 1px 2px rgb(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--button-fg-color);
|
||||
background-color: var(--button--hover-bg-color);
|
||||
}
|
||||
|
||||
.button:focus {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background-color: var(--button--active-bg-color);
|
||||
}
|
||||
|
||||
/* Common styles for small buttons. */
|
||||
|
||||
.no-touchevents .button--small {
|
||||
margin-block: var(--space-s);
|
||||
margin-inline: 0 var(--space-xs);
|
||||
padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); /* 1 */
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
/* Common styles for extra small buttons. */
|
||||
|
||||
.no-touchevents .button--extrasmall {
|
||||
margin-block: var(--space-xs);
|
||||
margin-inline: 0 var(--space-xs);
|
||||
padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
/* Styles for action link buttons. */
|
||||
|
||||
.button--action {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button--action::before {
|
||||
margin-inline: -0.25em 0;
|
||||
padding-inline: 0 0.25em;
|
||||
content: "+";
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* Primary button style.s */
|
||||
|
||||
.button--primary {
|
||||
color: var(--button-fg-color--primary);
|
||||
background-color: var(--button-bg-color--primary);
|
||||
}
|
||||
|
||||
.button--primary:is(:hover, :active) {
|
||||
color: var(--button-fg-color--primary);
|
||||
background-color: var(--button--hover-bg-color--primary);
|
||||
}
|
||||
|
||||
/* Danger button styles */
|
||||
|
||||
.button--danger {
|
||||
color: var(--button-fg-color--danger);
|
||||
background-color: var(--button-bg-color--danger);
|
||||
}
|
||||
|
||||
.button--danger:is(:hover, :active) {
|
||||
color: var(--button-fg-color--danger);
|
||||
background-color: var(--button--hover-bg-color--danger);
|
||||
}
|
||||
|
||||
/**
|
||||
* Disabled state styles as last.
|
||||
*
|
||||
* Overrides every definitions before, including variants.
|
||||
*/
|
||||
|
||||
.button:is(:disabled, .is-disabled) {
|
||||
color: var(--button--disabled-fg-color);
|
||||
background-color: var(--button--disabled-bg-color);
|
||||
}
|
||||
|
||||
/* Make disabled <link> behave like a [disabled] <input> or <button>. */
|
||||
|
||||
.button.is-disabled {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Style a clickable/tappable element as a link. Duplicates the base style for
|
||||
* the <a> tag, plus a reset for padding, borders and background.
|
||||
*/
|
||||
|
||||
.link {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
border: 0;
|
||||
background: none;
|
||||
appearance: none;
|
||||
}
|
||||
146
web/core/themes/claro/css/components/button.pcss.css
Normal file
146
web/core/themes/claro/css/components/button.pcss.css
Normal file
@ -0,0 +1,146 @@
|
||||
/**
|
||||
* @file
|
||||
* Structural styles for Claro's UI buttons
|
||||
*
|
||||
* Apply these classes to button elements (<button>, <input type="button" />).
|
||||
*/
|
||||
|
||||
/**
|
||||
* Buttons.
|
||||
*
|
||||
* 1. Padding widths detracted by width of the transparent borders to make
|
||||
* button size match with design system.
|
||||
* 2. Prevent fat text in WebKit.
|
||||
*
|
||||
* @todo Consider moving box-sizing into base.css under a universal selector.
|
||||
* See https://www.drupal.org/node/2124251
|
||||
*/
|
||||
|
||||
/**
|
||||
* Base button styles.
|
||||
*
|
||||
* These styles have been duplicated to dropbutton.css and action-links.css
|
||||
* since those components inherits most of these design elements. Whenever
|
||||
* making changes to this file, remember to check if that needs to be applied to
|
||||
* dropbutton.css or action-links.css as well.
|
||||
*/
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin-block: var(--space-m);
|
||||
margin-inline: 0 var(--space-s);
|
||||
padding: calc(var(--space-m) - 1px) calc(var(--space-l) - 1px); /* 1 */
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--button-fg-color);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--button-border-radius-size);
|
||||
background-color: var(--button-bg-color);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 700;
|
||||
line-height: 1rem;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased; /* 2 */
|
||||
|
||||
&:not(:focus) {
|
||||
box-shadow: 0 1px 2px rgb(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--button-fg-color);
|
||||
background-color: var(--button--hover-bg-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--button--active-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Common styles for small buttons. */
|
||||
.no-touchevents {
|
||||
& .button--small {
|
||||
margin-block: var(--space-s);
|
||||
margin-inline: 0 var(--space-xs);
|
||||
padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); /* 1 */
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
/* Common styles for extra small buttons. */
|
||||
& .button--extrasmall {
|
||||
margin-block: var(--space-xs);
|
||||
margin-inline: 0 var(--space-xs);
|
||||
padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for action link buttons. */
|
||||
.button--action {
|
||||
margin: 0;
|
||||
|
||||
&::before {
|
||||
margin-inline: -0.25em 0;
|
||||
padding-inline: 0 0.25em;
|
||||
content: "+";
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
/* Primary button style.s */
|
||||
.button--primary {
|
||||
color: var(--button-fg-color--primary);
|
||||
background-color: var(--button-bg-color--primary);
|
||||
|
||||
&:is(:hover, :active) {
|
||||
color: var(--button-fg-color--primary);
|
||||
background-color: var(--button--hover-bg-color--primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Danger button styles */
|
||||
.button--danger {
|
||||
color: var(--button-fg-color--danger);
|
||||
background-color: var(--button-bg-color--danger);
|
||||
|
||||
&:is(:hover, :active) {
|
||||
color: var(--button-fg-color--danger);
|
||||
background-color: var(--button--hover-bg-color--danger);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Disabled state styles as last.
|
||||
*
|
||||
* Overrides every definitions before, including variants.
|
||||
*/
|
||||
.button {
|
||||
&:is(:disabled, .is-disabled) {
|
||||
color: var(--button--disabled-fg-color);
|
||||
background-color: var(--button--disabled-bg-color);
|
||||
}
|
||||
|
||||
/* Make disabled <link> behave like a [disabled] <input> or <button>. */
|
||||
&.is-disabled {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Style a clickable/tappable element as a link. Duplicates the base style for
|
||||
* the <a> tag, plus a reset for padding, borders and background.
|
||||
*/
|
||||
.link {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
border: 0;
|
||||
background: none;
|
||||
appearance: none;
|
||||
}
|
||||
164
web/core/themes/claro/css/components/card.css
Normal file
164
web/core/themes/claro/css/components/card.css
Normal file
@ -0,0 +1,164 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Card.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--card-bg-color: var(--color-white);
|
||||
--card-border-size: 1px;
|
||||
--card-border-color: var(--color-gray-200-o-80);
|
||||
--card-border-radius-size: var(--base-border-radius);
|
||||
--card-image-border-radius-size: calc(var(--card-border-radius-size) - var(--card-border-size));
|
||||
--card-box-shadow: 0 0.25rem 0.625rem rgb(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-items: flex-start;
|
||||
padding: 0;
|
||||
border: var(--card-border-size) solid var(--card-border-color);
|
||||
border-radius: var(--card-border-radius-size);
|
||||
background-color: var(--card-bg-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
}
|
||||
|
||||
/* 588px theme screenshot width */
|
||||
|
||||
@media screen and (min-width: 36.75rem) {
|
||||
.card--horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
|
||||
|
||||
@media screen and (min-width: 53.75rem) {
|
||||
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Card image.
|
||||
*/
|
||||
|
||||
.card__image {
|
||||
overflow: hidden;
|
||||
border-radius: var(--card-image-border-radius-size) var(--card-image-border-radius-size) 0 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36.75rem) {
|
||||
.card--horizontal .card__image {
|
||||
flex-basis: 35%;
|
||||
border-start-start-radius: var(--card-image-border-radius-size);
|
||||
border-start-end-radius: 0;
|
||||
border-end-start-radius: var(--card-image-border-radius-size);
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
|
||||
|
||||
@media screen and (max-width: 53.75rem) {
|
||||
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal .card__image {
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 85.375rem) {
|
||||
.card--horizontal .card__image {
|
||||
flex-basis: 45%;
|
||||
}
|
||||
|
||||
/* .card--vertical .card__image {
|
||||
flex-basis: auto;
|
||||
} */
|
||||
}
|
||||
|
||||
/**
|
||||
* Card content.
|
||||
*/
|
||||
|
||||
.card__content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
padding: var(--space-l);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36.75rem) {
|
||||
.card--horizontal .card__content-wrapper {
|
||||
flex-basis: 65%;
|
||||
}
|
||||
|
||||
/* Card content with image. */
|
||||
.card--horizontal .card__image ~ .card__content-wrapper {
|
||||
padding-inline-start: var(--space-m);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 53.75rem) {
|
||||
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal .card__content-wrapper {
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 85.375rem) {
|
||||
.card--horizontal .card__content-wrapper {
|
||||
flex-basis: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Card content.
|
||||
*/
|
||||
|
||||
.card__content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Card content items (title, description).
|
||||
*/
|
||||
|
||||
.card__content-item {
|
||||
margin-block: 0 var(--space-m);
|
||||
}
|
||||
|
||||
.card__content-item:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Card footer.
|
||||
*/
|
||||
|
||||
.card__footer {
|
||||
order: 100;
|
||||
margin-block-start: var(--space-l);
|
||||
}
|
||||
|
||||
.card__footer .action-links {
|
||||
margin-block: 0;
|
||||
text-align: right; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] :is(.card__footer .action-links) {
|
||||
text-align: left;
|
||||
}
|
||||
149
web/core/themes/claro/css/components/card.pcss.css
Normal file
149
web/core/themes/claro/css/components/card.pcss.css
Normal file
@ -0,0 +1,149 @@
|
||||
/**
|
||||
* @file
|
||||
* Card.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--card-bg-color: var(--color-white);
|
||||
--card-border-size: 1px;
|
||||
--card-border-color: var(--color-gray-200-o-80);
|
||||
--card-border-radius-size: var(--base-border-radius);
|
||||
--card-image-border-radius-size: calc(var(--card-border-radius-size) - var(--card-border-size));
|
||||
--card-box-shadow: 0 4px 10px rgb(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-items: flex-start;
|
||||
padding: 0;
|
||||
border: var(--card-border-size) solid var(--card-border-color);
|
||||
border-radius: var(--card-border-radius-size);
|
||||
background-color: var(--card-bg-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
}
|
||||
|
||||
/* 588px theme screenshot width */
|
||||
@media screen and (min-width: 36.75rem) {
|
||||
.card--horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
|
||||
@media screen and (min-width: 53.75rem) {
|
||||
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Card image.
|
||||
*/
|
||||
.card__image {
|
||||
overflow: hidden;
|
||||
border-radius: var(--card-image-border-radius-size) var(--card-image-border-radius-size) 0 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36.75rem) {
|
||||
.card--horizontal .card__image {
|
||||
flex-basis: 35%;
|
||||
border-start-start-radius: var(--card-image-border-radius-size);
|
||||
border-start-end-radius: 0;
|
||||
border-end-start-radius: var(--card-image-border-radius-size);
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
|
||||
@media screen and (max-width: 53.75rem) {
|
||||
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal .card__image {
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 85.375rem) {
|
||||
.card--horizontal .card__image {
|
||||
flex-basis: 45%;
|
||||
}
|
||||
|
||||
/* .card--vertical .card__image {
|
||||
flex-basis: auto;
|
||||
} */
|
||||
}
|
||||
|
||||
/**
|
||||
* Card content.
|
||||
*/
|
||||
.card__content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
padding: var(--space-l);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36.75rem) {
|
||||
.card--horizontal .card__content-wrapper {
|
||||
flex-basis: 65%;
|
||||
}
|
||||
|
||||
/* Card content with image. */
|
||||
.card--horizontal .card__image ~ .card__content-wrapper {
|
||||
padding-inline-start: var(--space-m);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 53.75rem) {
|
||||
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal .card__content-wrapper {
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 85.375rem) {
|
||||
.card--horizontal .card__content-wrapper {
|
||||
flex-basis: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Card content.
|
||||
*/
|
||||
.card__content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Card content items (title, description).
|
||||
*/
|
||||
.card__content-item {
|
||||
margin-block: 0 var(--space-m);
|
||||
|
||||
&:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Card footer.
|
||||
*/
|
||||
.card__footer {
|
||||
order: 100;
|
||||
margin-block-start: var(--space-l);
|
||||
}
|
||||
|
||||
.card__footer .action-links {
|
||||
margin-block: 0;
|
||||
text-align: right; /* LTR */
|
||||
|
||||
[dir="rtl"] & {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
9
web/core/themes/claro/css/components/ckeditor5.css
Normal file
9
web/core/themes/claro/css/components/ckeditor5.css
Normal file
@ -0,0 +1,9 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
.ck {
|
||||
--ck-color-base-border: var(--input-border-color);
|
||||
}
|
||||
3
web/core/themes/claro/css/components/ckeditor5.pcss.css
Normal file
3
web/core/themes/claro/css/components/ckeditor5.pcss.css
Normal file
@ -0,0 +1,3 @@
|
||||
.ck {
|
||||
--ck-color-base-border: var(--input-border-color);
|
||||
}
|
||||
19
web/core/themes/claro/css/components/container-inline.css
Normal file
19
web/core/themes/claro/css/components/container-inline.css
Normal file
@ -0,0 +1,19 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Inline items.
|
||||
*/
|
||||
|
||||
.container-inline .form-radios label::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.container-inline .form-radios .form-type-radio {
|
||||
margin-inline-end: 1em;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Inline items.
|
||||
*/
|
||||
|
||||
.container-inline div,
|
||||
.container-inline label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-items-inline {
|
||||
margin-block: -2px;
|
||||
}
|
||||
|
||||
.form-items-inline > .form-item {
|
||||
display: inline-block;
|
||||
margin-block: 2px;
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
/**
|
||||
* @file
|
||||
* Inline items.
|
||||
*/
|
||||
|
||||
.container-inline div,
|
||||
.container-inline label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-items-inline {
|
||||
margin-block: -2px;
|
||||
|
||||
& > .form-item {
|
||||
display: inline-block;
|
||||
margin-block: 2px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
/**
|
||||
* @file
|
||||
* Inline items.
|
||||
*/
|
||||
|
||||
.container-inline .form-radios {
|
||||
& label::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
& .form-type-radio {
|
||||
margin-inline-end: 1em;
|
||||
}
|
||||
}
|
||||
17
web/core/themes/claro/css/components/content-header.css
Normal file
17
web/core/themes/claro/css/components/content-header.css
Normal file
@ -0,0 +1,17 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* Content header.
|
||||
*/
|
||||
|
||||
.content-header {
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-s);
|
||||
padding: var(--space-l) 0 0;
|
||||
background-color: var(--color-gray-050);
|
||||
}
|
||||
10
web/core/themes/claro/css/components/content-header.pcss.css
Normal file
10
web/core/themes/claro/css/components/content-header.pcss.css
Normal file
@ -0,0 +1,10 @@
|
||||
/**
|
||||
* Content header.
|
||||
*/
|
||||
|
||||
.content-header {
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-s);
|
||||
padding: var(--space-l) 0 0;
|
||||
background-color: var(--color-gray-050);
|
||||
}
|
||||
465
web/core/themes/claro/css/components/details.css
Normal file
465
web/core/themes/claro/css/components/details.css
Normal file
@ -0,0 +1,465 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Collapsible details.
|
||||
*
|
||||
* @see collapse.js
|
||||
*/
|
||||
|
||||
/**
|
||||
* Available modifiers are:
|
||||
* - .claro-details--accordion
|
||||
* - .claro-details--accordion-item
|
||||
*
|
||||
* Despite the fact that 'accordion' isn't used anywhere right now, we
|
||||
* implemented it (since the design defines that).
|
||||
* This variant can be used by setting the '#accordion' to TRUE for a
|
||||
* Details render element:
|
||||
* @code
|
||||
* $build['detail_accordion'] = [
|
||||
* '#type' => 'details',
|
||||
* '#accordion' => TRUE,
|
||||
* ];
|
||||
*
|
||||
* 'Accordion item' is used for the details of the node edit sidebar. For
|
||||
* creating accordion item list from a set of details, set the surrounding
|
||||
* Container render element's '#accordion' key to TRUE.
|
||||
*
|
||||
* 'Vertical tabs item' is used for the children of the VerticalTabs render
|
||||
* element.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--size-summary-border-radius: calc(var(--details-border-size-radius) - var(--details-border-size));
|
||||
--summary-accordion-padding-vertical: calc(var(--space-l) + ((var(--space-m) - var(--space-l)) / 2));
|
||||
--summary-accordion-line-height: var(--space-l);
|
||||
}
|
||||
|
||||
.claro-details {
|
||||
display: block;
|
||||
margin-block: var(--space-m);
|
||||
color: var(--color-text);
|
||||
border: var(--details-border-size) solid var(--details-border-color);
|
||||
border-radius: var(--details-border-size-radius);
|
||||
background-color: var(--color-white);
|
||||
box-shadow: var(--details-box-shadow);
|
||||
|
||||
/*
|
||||
* The following width and min-width values ensure that the <details> element
|
||||
* does not shift widths when opening, in the event that a parent table
|
||||
* element constrains the width. This can happen when toggling the
|
||||
* "lazy-load" option within an image field.
|
||||
*/
|
||||
}
|
||||
|
||||
td .claro-details {
|
||||
width: min-content;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.claro-details--accordion-item,
|
||||
.claro-details--vertical-tabs-item {
|
||||
margin-block: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.claro-details--accordion-item:first-of-type {
|
||||
border-top-left-radius: var(--details-border-size-radius);
|
||||
border-top-right-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
.claro-details--accordion-item:last-of-type {
|
||||
border-bottom-right-radius: var(--details-border-size-radius);
|
||||
border-bottom-left-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
/**
|
||||
* Details summary styles.
|
||||
*/
|
||||
|
||||
.claro-details__summary {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding-block: var(--space-m);
|
||||
padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-m);
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
|
||||
color: var(--color-gray-800);
|
||||
border-radius: var(--size-summary-border-radius);
|
||||
background-color: transparent;
|
||||
line-height: var(--space-m);
|
||||
}
|
||||
|
||||
/* Modifiers */
|
||||
|
||||
.claro-details__summary--accordion,
|
||||
.claro-details__summary--accordion-item,
|
||||
.claro-details__summary--vertical-tabs-item {
|
||||
padding-block: var(--summary-accordion-padding-vertical);
|
||||
padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-l);
|
||||
background: var(--color-white);
|
||||
line-height: var(--summary-accordion-line-height);
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion list items must not have border radius except they are the first
|
||||
* or the last ones.
|
||||
*/
|
||||
|
||||
.claro-details__summary--accordion-item {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.claro-details--accordion-item:first-child .claro-details__summary--accordion-item {
|
||||
border-top-left-radius: var(--details-border-size-radius);
|
||||
border-top-right-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
.claro-details--accordion-item:last-child .claro-details__summary--accordion-item {
|
||||
border-bottom-right-radius: var(--details-border-size-radius);
|
||||
border-bottom-left-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
/**
|
||||
* Details marker styles.
|
||||
*/
|
||||
|
||||
/* Remove the marker on Chrome */
|
||||
|
||||
.claro-details__summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.claro-details__summary::before {
|
||||
position: absolute;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: var(--space-s);
|
||||
display: inline-block;
|
||||
width: var(--space-m);
|
||||
height: var(--space-m);
|
||||
margin-block-start: calc(var(--space-m) / -2);
|
||||
content: "";
|
||||
transition: transform var(--details-transform-transition-duration) ease-in 0s;
|
||||
transform: rotate(90deg);
|
||||
text-align: center;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath d='M5.21 1.314L3.79 2.723l5.302 5.353-5.303 5.354 1.422 1.408 6.697-6.762z' fill='%23545560'/%3e%3c/svg%3e");
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
[dir="rtl"] .claro-details__summary::before {
|
||||
transform: rotate(-270deg);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.claro-details__summary::before {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.claro-details__summary::before {
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
transition:
|
||||
transform var(--details-transform-transition-duration) ease-in 0s,
|
||||
margin var(--details-transform-transition-duration) ease-in 0s;
|
||||
transform: rotate(135deg); /* LTR */
|
||||
border-block-start: 0.125rem solid;
|
||||
border-inline-end: 0.125rem solid;
|
||||
background: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] .claro-details__summary::before {
|
||||
transform: rotate(-225deg);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Safari (at least version 12.1) cannot handle our details marker
|
||||
* transition properly.
|
||||
*
|
||||
* Every additional pointer triggered toggle event freezes the transition,
|
||||
* and the transition is continued and finished after the pointer leaves
|
||||
* the Detail elements' summary.
|
||||
*
|
||||
* Even that it is possible to provide a JavaScript workaround for it (by
|
||||
* adding/removing a helper class with JavaScript if the Details is
|
||||
* toggled), that hack will make RTL details worse than without the hack.
|
||||
*
|
||||
* This weird query was found in
|
||||
* https://stackoverflow.com/questions/16348489#25975282 (based on the
|
||||
* answer it works for Safari 10.1+)
|
||||
*/
|
||||
|
||||
/* stylelint-disable-next-line unit-allowed-list */
|
||||
|
||||
@media not all and (min-resolution: 0.001dpcm) {
|
||||
@supports (-webkit-appearance: none) {
|
||||
.claro-details__summary::before {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Details summary focus.
|
||||
*/
|
||||
|
||||
.claro-details__summary::after {
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
content: "";
|
||||
transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
border-radius: var(--details-border-size-radius);
|
||||
box-shadow: inset 0 0 0 var(--details-summary-focus-border-size) var(--details-summary-shadow-color);
|
||||
}
|
||||
|
||||
.claro-details > .claro-details__summary--accordion-item::after,
|
||||
.vertical-tabs__item > .claro-details__summary--vertical-tabs-item::after {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.claro-details:first-child > .claro-details__summary--accordion-item::after,
|
||||
.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item::after {
|
||||
border-top-left-radius: var(--details-border-size-radius);
|
||||
border-top-right-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
.claro-details:last-child > .claro-details__summary--accordion-item::after,
|
||||
.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item::after {
|
||||
border-bottom-right-radius: var(--details-border-size-radius);
|
||||
border-bottom-left-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
/**
|
||||
* Focus box of accordions and accordion items must not have bottom border
|
||||
* radius if their accordion is expanded.
|
||||
*/
|
||||
|
||||
.claro-details[open] > .claro-details__summary--accordion::after,
|
||||
.claro-details[open] > .claro-details__summary--accordion-item::after,
|
||||
.vertical-tabs__item--last[open] > .claro-details__summary--vertical-tabs-item::after {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Details summary states.
|
||||
*/
|
||||
|
||||
.claro-details__summary:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[open] .claro-details__summary--accordion,
|
||||
[open] .claro-details__summary--accordion-item,
|
||||
[open] .claro-details__summary--vertical-tabs-item {
|
||||
color: var(--color-absolutezero);
|
||||
}
|
||||
|
||||
.claro-details__summary:hover::before,
|
||||
.claro-details__summary:hover:focus::before,
|
||||
.claro-details[open] > .claro-details__summary:focus::before,
|
||||
.claro-details[open] > .claro-details__summary--accordion::before,
|
||||
.claro-details[open] > .claro-details__summary--accordion-item::before,
|
||||
.claro-details[open] > .claro-details__summary--vertical-tabs-item::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath d='M5.21 1.314L3.79 2.723l5.302 5.353-5.303 5.354 1.422 1.408 6.697-6.762z' fill='%230036B1'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary {
|
||||
border-radius: var(--size-summary-border-radius) var(--size-summary-border-radius) 0 0;
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary::before {
|
||||
transform: rotate(-90deg); /* for LTR and RTL */
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.claro-details__summary:hover::before,
|
||||
.claro-details__summary:hover:focus::before,
|
||||
.claro-details[open] > .claro-details__summary:focus::before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary::before,
|
||||
[dir="rtl"] .claro-details[open] > .claro-details__summary::before {
|
||||
margin-block-start: -0.125rem;
|
||||
margin-inline-end: 0.125rem;
|
||||
transform: rotate(-45deg); /* for LTR and RTL */
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary--accordion,
|
||||
.claro-details[open] > .claro-details__summary--accordion-item,
|
||||
.claro-details[open] > .claro-details__summary--vertical-tabs-item {
|
||||
box-shadow: var(--details-box-shadow);
|
||||
}
|
||||
|
||||
.claro-details__summary:hover {
|
||||
color: var(--color-absolutezero);
|
||||
background-color: var(--color-bgblue-hover);
|
||||
}
|
||||
|
||||
/**
|
||||
* Focus styles.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Active has to be here for Firefox.
|
||||
*/
|
||||
|
||||
[open] > .claro-details__summary--accordion:not(:focus, :active)::after,
|
||||
[open] > .claro-details__summary--accordion-item:not(:focus, :active)::after,
|
||||
[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after {
|
||||
opacity: 1;
|
||||
border: var(--details-summary-focus-border-size) solid var(--color-absolutezero);
|
||||
border-width: 0 0 0 var(--details-summary-focus-border-size); /* LTR */
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] :is([open] > .claro-details__summary--accordion:not(:focus, :active)::after),
|
||||
[dir="rtl"] :is([open] > .claro-details__summary--accordion-item:not(:focus, :active)::after),
|
||||
[dir="rtl"] :is([open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after) {
|
||||
border-width: 0 var(--details-summary-focus-border-size) 0 0;
|
||||
}
|
||||
|
||||
.claro-details__summary:focus::after,
|
||||
.claro-details__summary:active::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Safari workaround.
|
||||
*/
|
||||
|
||||
/* stylelint-disable-next-line unit-allowed-list */
|
||||
|
||||
@media not all and (min-resolution: 0.001dpcm) {
|
||||
@supports (-webkit-appearance: none) {
|
||||
.claro-details__summary::after {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary:focus {
|
||||
color: var(--color-absolutezero);
|
||||
}
|
||||
|
||||
/**
|
||||
* Details wrapper and content.
|
||||
*
|
||||
* Accordion and accordion-item variants should have an extra background.
|
||||
* In that case, we render an additional wrapper 'claro-details__content' that
|
||||
* creates the visual margins around the content, and use the original
|
||||
* wrapper for setting the background color.
|
||||
*
|
||||
* If there is no border or padding defined, margins of parent-child elements
|
||||
* collapse to the highest value. We want to take benefit of this behavior,
|
||||
* because the elements inside the details content won't cause too big
|
||||
* vertical spacing.
|
||||
*/
|
||||
|
||||
.claro-details__wrapper,
|
||||
.claro-details__content {
|
||||
margin: var(--space-m);
|
||||
}
|
||||
|
||||
.claro-details__wrapper--accordion,
|
||||
.claro-details__wrapper--accordion-item,
|
||||
.claro-details__wrapper--vertical-tabs-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.claro-details__wrapper--accordion::before,
|
||||
.claro-details__wrapper--accordion::after,
|
||||
.claro-details__wrapper--accordion-item::before,
|
||||
.claro-details__wrapper--accordion-item::after,
|
||||
.claro-details__wrapper--vertical-tabs-item::before,
|
||||
.claro-details__wrapper--vertical-tabs-item::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.claro-details__wrapper--accordion,
|
||||
.claro-details__wrapper--accordion-item,
|
||||
.claro-details__wrapper--vertical-tabs-item {
|
||||
border-top: var(--details-border-size) solid var(--details-border-color);
|
||||
background-color: var(--color-gray-050-o-40);
|
||||
}
|
||||
|
||||
/* @see Drupal.behaviors.verticalTabs */
|
||||
|
||||
@media screen and (min-width: 40.0625rem) {
|
||||
.claro-details__wrapper {
|
||||
margin: var(--space-l) var(--details-desktop-wrapper-padding-start);
|
||||
}
|
||||
|
||||
.claro-details__wrapper--accordion,
|
||||
.claro-details__wrapper--accordion-item,
|
||||
.claro-details__wrapper--vertical-tabs-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.js .claro-details__wrapper--vertical-tabs-item {
|
||||
margin: 0;
|
||||
border-top: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.claro-details__content--accordion,
|
||||
.claro-details__content--accordion-item,
|
||||
.claro-details__content--vertical-tabs-item {
|
||||
margin: var(--space-m) var(--space-m) var(--space-l);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 85em) {
|
||||
.vertical-tabs .claro-details__content--vertical-tabs-item {
|
||||
margin: var(--space-l);
|
||||
}
|
||||
}
|
||||
|
||||
/* Description. */
|
||||
|
||||
.claro-details__description {
|
||||
margin-block-end: var(--space-m);
|
||||
color: var(--input-fg-color--description);
|
||||
font-size: var(--font-size-xs); /* ~13px */
|
||||
line-height: calc(17rem / 16); /* 17px */
|
||||
}
|
||||
|
||||
.claro-details__description.is-disabled {
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
|
||||
.claro-details__summary-summary {
|
||||
display: block;
|
||||
color: var(--color-gray-800);
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.required-mark::after {
|
||||
display: inline-block;
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
margin-inline: 0.3em;
|
||||
content: "";
|
||||
vertical-align: super;
|
||||
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='%23e00'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0.4375rem 0.4375rem;
|
||||
}
|
||||
439
web/core/themes/claro/css/components/details.pcss.css
Normal file
439
web/core/themes/claro/css/components/details.pcss.css
Normal file
@ -0,0 +1,439 @@
|
||||
/**
|
||||
* @file
|
||||
* Collapsible details.
|
||||
*
|
||||
* @see collapse.js
|
||||
*/
|
||||
|
||||
/**
|
||||
* Available modifiers are:
|
||||
* - .claro-details--accordion
|
||||
* - .claro-details--accordion-item
|
||||
*
|
||||
* Despite the fact that 'accordion' isn't used anywhere right now, we
|
||||
* implemented it (since the design defines that).
|
||||
* This variant can be used by setting the '#accordion' to TRUE for a
|
||||
* Details render element:
|
||||
* @code
|
||||
* $build['detail_accordion'] = [
|
||||
* '#type' => 'details',
|
||||
* '#accordion' => TRUE,
|
||||
* ];
|
||||
*
|
||||
* 'Accordion item' is used for the details of the node edit sidebar. For
|
||||
* creating accordion item list from a set of details, set the surrounding
|
||||
* Container render element's '#accordion' key to TRUE.
|
||||
*
|
||||
* 'Vertical tabs item' is used for the children of the VerticalTabs render
|
||||
* element.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--size-summary-border-radius: calc(var(--details-border-size-radius) - var(--details-border-size));
|
||||
--summary-accordion-padding-vertical: calc(var(--space-l) + ((var(--space-m) - var(--space-l)) / 2));
|
||||
--summary-accordion-line-height: var(--space-l);
|
||||
}
|
||||
|
||||
.claro-details {
|
||||
display: block;
|
||||
margin-block: var(--space-m);
|
||||
color: var(--color-text);
|
||||
border: var(--details-border-size) solid var(--details-border-color);
|
||||
border-radius: var(--details-border-size-radius);
|
||||
background-color: var(--color-white);
|
||||
box-shadow: var(--details-box-shadow);
|
||||
|
||||
/*
|
||||
* The following width and min-width values ensure that the <details> element
|
||||
* does not shift widths when opening, in the event that a parent table
|
||||
* element constrains the width. This can happen when toggling the
|
||||
* "lazy-load" option within an image field.
|
||||
*/
|
||||
td & {
|
||||
width: min-content;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.claro-details--accordion-item,
|
||||
.claro-details--vertical-tabs-item {
|
||||
margin-block: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.claro-details--accordion-item:first-of-type {
|
||||
border-top-left-radius: var(--details-border-size-radius);
|
||||
border-top-right-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
.claro-details--accordion-item:last-of-type {
|
||||
border-bottom-right-radius: var(--details-border-size-radius);
|
||||
border-bottom-left-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
/**
|
||||
* Details summary styles.
|
||||
*/
|
||||
|
||||
.claro-details__summary {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding-block: var(--space-m);
|
||||
padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-m);
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
|
||||
color: var(--color-gray-800);
|
||||
border-radius: var(--size-summary-border-radius);
|
||||
background-color: transparent;
|
||||
line-height: var(--space-m);
|
||||
}
|
||||
|
||||
/* Modifiers */
|
||||
.claro-details__summary--accordion,
|
||||
.claro-details__summary--accordion-item,
|
||||
.claro-details__summary--vertical-tabs-item {
|
||||
padding-block: var(--summary-accordion-padding-vertical);
|
||||
padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-l);
|
||||
background: var(--color-white);
|
||||
line-height: var(--summary-accordion-line-height);
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion list items must not have border radius except they are the first
|
||||
* or the last ones.
|
||||
*/
|
||||
.claro-details__summary--accordion-item {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.claro-details--accordion-item:first-child .claro-details__summary--accordion-item {
|
||||
border-top-left-radius: var(--details-border-size-radius);
|
||||
border-top-right-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
.claro-details--accordion-item:last-child .claro-details__summary--accordion-item {
|
||||
border-bottom-right-radius: var(--details-border-size-radius);
|
||||
border-bottom-left-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
/**
|
||||
* Details marker styles.
|
||||
*/
|
||||
|
||||
/* Remove the marker on Chrome */
|
||||
.claro-details__summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.claro-details__summary::before {
|
||||
position: absolute;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: var(--space-s);
|
||||
display: inline-block;
|
||||
width: var(--space-m);
|
||||
height: var(--space-m);
|
||||
margin-block-start: calc(var(--space-m) / -2);
|
||||
content: "";
|
||||
transition: transform var(--details-transform-transition-duration) ease-in 0s;
|
||||
transform: rotate(90deg);
|
||||
text-align: center;
|
||||
background-image: url(../../images/icons/545560/chevron-right.svg);
|
||||
background-size: contain;
|
||||
|
||||
[dir="rtl"] & {
|
||||
transform: rotate(-270deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.claro-details__summary::before {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.claro-details__summary::before {
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
transition:
|
||||
transform var(--details-transform-transition-duration) ease-in 0s,
|
||||
margin var(--details-transform-transition-duration) ease-in 0s;
|
||||
transform: rotate(135deg); /* LTR */
|
||||
border-block-start: 0.125rem solid;
|
||||
border-inline-end: 0.125rem solid;
|
||||
background: none;
|
||||
|
||||
[dir="rtl"] & {
|
||||
transform: rotate(-225deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Safari (at least version 12.1) cannot handle our details marker
|
||||
* transition properly.
|
||||
*
|
||||
* Every additional pointer triggered toggle event freezes the transition,
|
||||
* and the transition is continued and finished after the pointer leaves
|
||||
* the Detail elements' summary.
|
||||
*
|
||||
* Even that it is possible to provide a JavaScript workaround for it (by
|
||||
* adding/removing a helper class with JavaScript if the Details is
|
||||
* toggled), that hack will make RTL details worse than without the hack.
|
||||
*
|
||||
* This weird query was found in
|
||||
* https://stackoverflow.com/questions/16348489#25975282 (based on the
|
||||
* answer it works for Safari 10.1+)
|
||||
*/
|
||||
/* stylelint-disable-next-line unit-allowed-list */
|
||||
@media not all and (min-resolution: 0.001dpcm) {
|
||||
@supports (-webkit-appearance: none) {
|
||||
.claro-details__summary::before {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Details summary focus.
|
||||
*/
|
||||
.claro-details__summary::after {
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
content: "";
|
||||
transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
border-radius: var(--details-border-size-radius);
|
||||
box-shadow: inset 0 0 0 var(--details-summary-focus-border-size) var(--details-summary-shadow-color);
|
||||
}
|
||||
|
||||
.claro-details > .claro-details__summary--accordion-item::after,
|
||||
.vertical-tabs__item > .claro-details__summary--vertical-tabs-item::after {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.claro-details:first-child > .claro-details__summary--accordion-item::after,
|
||||
.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item::after {
|
||||
border-top-left-radius: var(--details-border-size-radius);
|
||||
border-top-right-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
.claro-details:last-child > .claro-details__summary--accordion-item::after,
|
||||
.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item::after {
|
||||
border-bottom-right-radius: var(--details-border-size-radius);
|
||||
border-bottom-left-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
/**
|
||||
* Focus box of accordions and accordion items must not have bottom border
|
||||
* radius if their accordion is expanded.
|
||||
*/
|
||||
.claro-details[open] > .claro-details__summary--accordion::after,
|
||||
.claro-details[open] > .claro-details__summary--accordion-item::after,
|
||||
.vertical-tabs__item--last[open] > .claro-details__summary--vertical-tabs-item::after {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Details summary states.
|
||||
*/
|
||||
.claro-details__summary:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[open] .claro-details__summary--accordion,
|
||||
[open] .claro-details__summary--accordion-item,
|
||||
[open] .claro-details__summary--vertical-tabs-item {
|
||||
color: var(--color-absolutezero);
|
||||
}
|
||||
|
||||
.claro-details__summary:hover::before,
|
||||
.claro-details__summary:hover:focus::before,
|
||||
.claro-details[open] > .claro-details__summary:focus::before,
|
||||
.claro-details[open] > .claro-details__summary--accordion::before,
|
||||
.claro-details[open] > .claro-details__summary--accordion-item::before,
|
||||
.claro-details[open] > .claro-details__summary--vertical-tabs-item::before {
|
||||
background-image: url(../../images/icons/0036b1/chevron-right.svg);
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary {
|
||||
border-radius: var(--size-summary-border-radius) var(--size-summary-border-radius) 0 0;
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary::before {
|
||||
transform: rotate(-90deg); /* for LTR and RTL */
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.claro-details__summary:hover::before,
|
||||
.claro-details__summary:hover:focus::before,
|
||||
.claro-details[open] > .claro-details__summary:focus::before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary::before,
|
||||
[dir="rtl"] .claro-details[open] > .claro-details__summary::before {
|
||||
margin-block-start: -0.125rem;
|
||||
margin-inline-end: 0.125rem;
|
||||
transform: rotate(-45deg); /* for LTR and RTL */
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary--accordion,
|
||||
.claro-details[open] > .claro-details__summary--accordion-item,
|
||||
.claro-details[open] > .claro-details__summary--vertical-tabs-item {
|
||||
box-shadow: var(--details-box-shadow);
|
||||
}
|
||||
|
||||
.claro-details__summary:hover {
|
||||
color: var(--color-absolutezero);
|
||||
background-color: var(--color-bgblue-hover);
|
||||
}
|
||||
|
||||
/**
|
||||
* Focus styles.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Active has to be here for Firefox.
|
||||
*/
|
||||
[open] > .claro-details__summary--accordion:not(:focus, :active)::after,
|
||||
[open] > .claro-details__summary--accordion-item:not(:focus, :active)::after,
|
||||
[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after {
|
||||
opacity: 1;
|
||||
border: var(--details-summary-focus-border-size) solid var(--color-absolutezero);
|
||||
border-width: 0 0 0 var(--details-summary-focus-border-size); /* LTR */
|
||||
box-shadow: none;
|
||||
|
||||
[dir="rtl"] & {
|
||||
border-width: 0 var(--details-summary-focus-border-size) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.claro-details__summary:focus::after,
|
||||
.claro-details__summary:active::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Safari workaround.
|
||||
*/
|
||||
/* stylelint-disable-next-line unit-allowed-list */
|
||||
@media not all and (min-resolution: 0.001dpcm) {
|
||||
@supports (-webkit-appearance: none) {
|
||||
.claro-details__summary::after {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary:focus {
|
||||
color: var(--color-absolutezero);
|
||||
}
|
||||
|
||||
/**
|
||||
* Details wrapper and content.
|
||||
*
|
||||
* Accordion and accordion-item variants should have an extra background.
|
||||
* In that case, we render an additional wrapper 'claro-details__content' that
|
||||
* creates the visual margins around the content, and use the original
|
||||
* wrapper for setting the background color.
|
||||
*
|
||||
* If there is no border or padding defined, margins of parent-child elements
|
||||
* collapse to the highest value. We want to take benefit of this behavior,
|
||||
* because the elements inside the details content won't cause too big
|
||||
* vertical spacing.
|
||||
*/
|
||||
.claro-details__wrapper,
|
||||
.claro-details__content {
|
||||
margin: var(--space-m);
|
||||
}
|
||||
|
||||
.claro-details__wrapper--accordion,
|
||||
.claro-details__wrapper--accordion-item,
|
||||
.claro-details__wrapper--vertical-tabs-item {
|
||||
margin: 0;
|
||||
}
|
||||
.claro-details__wrapper--accordion::before,
|
||||
.claro-details__wrapper--accordion::after,
|
||||
.claro-details__wrapper--accordion-item::before,
|
||||
.claro-details__wrapper--accordion-item::after,
|
||||
.claro-details__wrapper--vertical-tabs-item::before,
|
||||
.claro-details__wrapper--vertical-tabs-item::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.claro-details__wrapper--accordion,
|
||||
.claro-details__wrapper--accordion-item,
|
||||
.claro-details__wrapper--vertical-tabs-item {
|
||||
border-top: var(--details-border-size) solid var(--details-border-color);
|
||||
background-color: var(--color-gray-050-o-40);
|
||||
}
|
||||
|
||||
/* @see Drupal.behaviors.verticalTabs */
|
||||
@media screen and (min-width: 641px) {
|
||||
.claro-details__wrapper {
|
||||
margin: var(--space-l) var(--details-desktop-wrapper-padding-start);
|
||||
}
|
||||
|
||||
.claro-details__wrapper--accordion,
|
||||
.claro-details__wrapper--accordion-item,
|
||||
.claro-details__wrapper--vertical-tabs-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.js .claro-details__wrapper--vertical-tabs-item {
|
||||
margin: 0;
|
||||
border-top: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.claro-details__content--accordion,
|
||||
.claro-details__content--accordion-item,
|
||||
.claro-details__content--vertical-tabs-item {
|
||||
margin: var(--space-m) var(--space-m) var(--space-l);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 85em) {
|
||||
.vertical-tabs .claro-details__content--vertical-tabs-item {
|
||||
margin: var(--space-l);
|
||||
}
|
||||
}
|
||||
|
||||
/* Description. */
|
||||
.claro-details__description {
|
||||
margin-block-end: var(--space-m);
|
||||
color: var(--input-fg-color--description);
|
||||
font-size: var(--font-size-xs); /* ~13px */
|
||||
line-height: calc(17rem / 16); /* 17px */
|
||||
}
|
||||
.claro-details__description.is-disabled {
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
|
||||
.claro-details__summary-summary {
|
||||
display: block;
|
||||
color: var(--color-gray-800);
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.required-mark::after {
|
||||
display: inline-block;
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
margin-inline: 0.3em;
|
||||
content: "";
|
||||
vertical-align: super;
|
||||
background-image: url(../../images/core/ee0000/required.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0.4375rem 0.4375rem;
|
||||
}
|
||||
147
web/core/themes/claro/css/components/dialog.css
Normal file
147
web/core/themes/claro/css/components/dialog.css
Normal file
@ -0,0 +1,147 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Presentational styles for Drupal dialogs.
|
||||
*/
|
||||
|
||||
.ui-dialog {
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: var(--jui-dialog-border-radius);
|
||||
background: transparent;
|
||||
box-shadow: var(--jui-dialog-box-shadow);
|
||||
}
|
||||
|
||||
.ui-dialog:focus {
|
||||
outline: var(--jui-dialog--focus-outline);
|
||||
box-shadow: var(--jui-dialog--focus-box-shadow);
|
||||
}
|
||||
|
||||
/* Media queries are moved outside */
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.ui-dialog {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 48em) {
|
||||
.ui-dialog:not(.ui-dialog-off-canvas) {
|
||||
min-width: 92%;
|
||||
max-width: 92%;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding-block: var(--space-m);
|
||||
padding-inline: var(--space-l) var(--jui-dialog-close-button-reserved-space);
|
||||
color: var(--jui-dialog-title-color);
|
||||
border-start-end-radius: var(--jui-dialog-border-radius);
|
||||
border-start-start-radius: var(--jui-dialog-border-radius);
|
||||
background: var(--jui-dialog-title-bg-color);
|
||||
line-height: calc(var(--space-m) * 2);
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
margin: 0;
|
||||
font-size: var(--jui-dialog-title-font-size);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
|
||||
position: absolute;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-end: 0;
|
||||
box-sizing: border-box;
|
||||
inline-size: var(--jui-dialog-close-button-size);
|
||||
block-size: var(--jui-dialog-close-button-size);
|
||||
margin-inline: var(--space-l);
|
||||
padding: 0;
|
||||
transition: all 0.1s;
|
||||
transform: translateY(-50%);
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--jui-dialog-close-button-border-radius);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover {
|
||||
border-color: var(--color-white);
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:focus {
|
||||
border-color: var(--color-focus);
|
||||
outline: var(--jui-dialog--focus-outline);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon.ui-icon-closethick {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
background: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='%23D3D4D9' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat 50%;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon.ui-icon-closethick {
|
||||
background: buttontext;
|
||||
mask: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='%23D3D4D9' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog > .ui-dialog-content {
|
||||
overflow: auto;
|
||||
padding: var(--space-m) var(--space-l);
|
||||
color: var(--color-text);
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
.ui-dialog > .ui-dialog-content .form-actions,
|
||||
.ui-dialog > .ui-dialog-content .field-actions {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-dialog > .ui-dialog-buttonpane {
|
||||
color: var(--color-text);
|
||||
border-bottom-right-radius: var(--jui-dialog-border-radius);
|
||||
border-bottom-left-radius: var(--jui-dialog-border-radius);
|
||||
background: var(--color-gray-050);
|
||||
}
|
||||
|
||||
.ui-dialog > .ui-dialog-buttonpane .ui-dialog-buttonset {
|
||||
display: flex;
|
||||
gap: var(--space-s);
|
||||
justify-content: flex-end;
|
||||
margin-block: var(--space-m);
|
||||
margin-inline-end: var(--space-l);
|
||||
}
|
||||
|
||||
.ui-dialog > .ui-dialog-buttonpane .ui-dialog-buttonset > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui-dialog > .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
|
||||
background: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .form-item .form-item__description {
|
||||
color: var(--color-gray-050);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
144
web/core/themes/claro/css/components/dialog.pcss.css
Normal file
144
web/core/themes/claro/css/components/dialog.pcss.css
Normal file
@ -0,0 +1,144 @@
|
||||
/**
|
||||
* @file
|
||||
* Presentational styles for Drupal dialogs.
|
||||
*/
|
||||
|
||||
.ui-dialog {
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: var(--jui-dialog-border-radius);
|
||||
background: transparent;
|
||||
box-shadow: var(--jui-dialog-box-shadow);
|
||||
|
||||
&:focus {
|
||||
outline: var(--jui-dialog--focus-outline);
|
||||
box-shadow: var(--jui-dialog--focus-box-shadow);
|
||||
}
|
||||
|
||||
/* Media queries are moved outside */
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.ui-dialog {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 48em) {
|
||||
.ui-dialog:not(.ui-dialog-off-canvas) {
|
||||
min-width: 92%;
|
||||
max-width: 92%;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog {
|
||||
.ui-dialog-titlebar {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding-block: var(--space-m);
|
||||
padding-inline: var(--space-l) var(--jui-dialog-close-button-reserved-space);
|
||||
color: var(--jui-dialog-title-color);
|
||||
border-start-end-radius: var(--jui-dialog-border-radius);
|
||||
border-start-start-radius: var(--jui-dialog-border-radius);
|
||||
background: var(--jui-dialog-title-bg-color);
|
||||
line-height: calc(var(--space-m) * 2);
|
||||
|
||||
.ui-dialog-title {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
margin: 0;
|
||||
font-size: var(--jui-dialog-title-font-size);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-dialog-titlebar-close {
|
||||
position: absolute;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-end: 0;
|
||||
box-sizing: border-box;
|
||||
inline-size: var(--jui-dialog-close-button-size);
|
||||
block-size: var(--jui-dialog-close-button-size);
|
||||
margin-inline: var(--space-l);
|
||||
padding: 0;
|
||||
transition: all 0.1s;
|
||||
transform: translateY(-50%);
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--jui-dialog-close-button-border-radius);
|
||||
background: none;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-white);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-focus);
|
||||
outline: var(--jui-dialog--focus-outline);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ui-icon.ui-icon-closethick {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
background: url(../../images/icons/d3d4d9/ex.svg) no-repeat 50%;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: buttontext;
|
||||
mask: url(../../images/icons/d3d4d9/ex.svg) no-repeat 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .ui-dialog-content {
|
||||
overflow: auto;
|
||||
padding: var(--space-m) var(--space-l);
|
||||
color: var(--color-text);
|
||||
background: var(--color-white);
|
||||
|
||||
.form-actions,
|
||||
.field-actions {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .ui-dialog-buttonpane {
|
||||
color: var(--color-text);
|
||||
border-bottom-right-radius: var(--jui-dialog-border-radius);
|
||||
border-bottom-left-radius: var(--jui-dialog-border-radius);
|
||||
background: var(--color-gray-050);
|
||||
|
||||
.ui-dialog-buttonset {
|
||||
display: flex;
|
||||
gap: var(--space-s);
|
||||
justify-content: flex-end;
|
||||
margin-block: var(--space-m);
|
||||
margin-inline-end: var(--space-l);
|
||||
|
||||
& > * {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-button-text-only .ui-button-text {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.ui-dialog-off-canvas {
|
||||
.ui-widget-content.ui-dialog-content {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas {
|
||||
.form-item .form-item__description {
|
||||
color: var(--color-gray-050);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
15
web/core/themes/claro/css/components/divider.css
Normal file
15
web/core/themes/claro/css/components/divider.css
Normal file
@ -0,0 +1,15 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* Divider.
|
||||
*/
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: var(--color-divider);
|
||||
}
|
||||
8
web/core/themes/claro/css/components/divider.pcss.css
Normal file
8
web/core/themes/claro/css/components/divider.pcss.css
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* Divider.
|
||||
*/
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: var(--color-divider);
|
||||
}
|
||||
18
web/core/themes/claro/css/components/dropbutton-noscript.css
Normal file
18
web/core/themes/claro/css/components/dropbutton-noscript.css
Normal file
@ -0,0 +1,18 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/**
|
||||
* @file
|
||||
* Dropbutton styles for when JavaScript is not loaded.
|
||||
*/
|
||||
html .dropbutton--small,
|
||||
html .dropbutton--extrasmall,
|
||||
html .dropbutton {
|
||||
height: auto;
|
||||
}
|
||||
html .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
|
||||
visibility: visible;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
/**
|
||||
* @file
|
||||
* Dropbutton styles for when JavaScript is not loaded.
|
||||
*/
|
||||
html {
|
||||
.dropbutton--small,
|
||||
.dropbutton--extrasmall,
|
||||
.dropbutton {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
440
web/core/themes/claro/css/components/dropbutton.css
Normal file
440
web/core/themes/claro/css/components/dropbutton.css
Normal file
@ -0,0 +1,440 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Dropbutton styles.
|
||||
*
|
||||
* 1. Transparent border is needed for high contrast mode. The border-width has
|
||||
* to be set with !important to render borders with the defined width in high
|
||||
* contrast mode Firefox.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/**
|
||||
* Dropbutton
|
||||
*/
|
||||
--dropbutton-spacing-size: var(--space-m);
|
||||
--dropbutton-font-size: var(--font-size-base);
|
||||
--dropbutton-line-height: var(--space-m);
|
||||
--dropbutton-toggle-size: 3rem;
|
||||
--dropbutton-border-size: 1px;
|
||||
--dropbutton-toggle-size-spacing: var(--dropbutton-border-size);
|
||||
--dropbutton-border-radius-size: 2px;
|
||||
--dropbutton-item-max-width: 12.5rem;
|
||||
/* Variant variables: small. */
|
||||
--dropbutton-small-spacing-size: 0.625rem;
|
||||
--dropbutton-small-font-size: var(--font-size-xs);
|
||||
--dropbutton-small-line-height: 0.75rem;
|
||||
--dropbutton-small-toggle-size: calc((2 * var(--dropbutton-small-spacing-size)) + var(--dropbutton-small-line-height));
|
||||
/* Variant variables: extra small. */
|
||||
--dropbutton-extrasmall-spacing-size: 0.375rem;
|
||||
--dropbutton-extrasmall-font-size: var(--font-size-xs);
|
||||
--dropbutton-extrasmall-line-height: 0.75rem;
|
||||
--dropbutton-extrasmall-toggle-size: calc((2 * var(--dropbutton-extrasmall-spacing-size)) + var(--dropbutton-extrasmall-line-height));
|
||||
}
|
||||
|
||||
.dropbutton-wrapper {
|
||||
display: inline-flex;
|
||||
border-radius: var(--button-border-radius-size);
|
||||
box-shadow: 0 1px 2px rgb(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.form-actions .dropbutton-wrapper,
|
||||
.field-actions .dropbutton-wrapper {
|
||||
margin-block: var(--space-xs);
|
||||
margin-inline: 0 var(--space-m);
|
||||
}
|
||||
|
||||
.dropbutton-widget {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.js .dropbutton-wrapper.open .dropbutton-widget {
|
||||
z-index: var(--dropbutton-widget-z-index);
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropbutton list.
|
||||
*/
|
||||
|
||||
.dropbutton {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */
|
||||
height: var(--dropbutton-toggle-size);
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropbutton-widget {
|
||||
border-radius: var(--button-border-radius-size);
|
||||
background-color: var(--button-bg-color);
|
||||
}
|
||||
|
||||
/* Variants. */
|
||||
|
||||
.dropbutton--small {
|
||||
height: var(--dropbutton-small-toggle-size);
|
||||
}
|
||||
|
||||
.dropbutton--extrasmall {
|
||||
height: var(--dropbutton-extrasmall-toggle-size);
|
||||
}
|
||||
|
||||
/**
|
||||
* First dropbutton list item.
|
||||
*/
|
||||
|
||||
.dropbutton--multiple .dropbutton__item:first-of-type {
|
||||
margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[dir="rtl"] :is(.dropbutton--multiple .dropbutton__item:first-of-type) {
|
||||
margin-right: 0;
|
||||
margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));
|
||||
}
|
||||
|
||||
/* First dropbutton list item variants */
|
||||
|
||||
.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
|
||||
margin-right: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[dir="rtl"] :is(.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type) {
|
||||
margin-right: 0;
|
||||
margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));
|
||||
}
|
||||
|
||||
.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
|
||||
margin-right: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[dir="rtl"] :is(.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type) {
|
||||
margin-right: 0;
|
||||
margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropbutton toggler.
|
||||
*/
|
||||
|
||||
.dropbutton__toggle {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
right: 0; /* LTR */
|
||||
bottom: 0;
|
||||
width: var(--dropbutton-toggle-size);
|
||||
height: var(--dropbutton-toggle-size);
|
||||
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
|
||||
border-inline-start: var(--dropbutton-border-size) solid white !important;
|
||||
border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0; /* LTR */
|
||||
background: var(--button-bg-color);
|
||||
font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton__toggle {
|
||||
right: auto;
|
||||
left: 0;
|
||||
border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size);
|
||||
}
|
||||
|
||||
.dropbutton__toggle::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 50%;
|
||||
width: 0.875rem;
|
||||
height: 0.5625rem;
|
||||
content: "";
|
||||
transform: translate(50%, -50%) rotate(0);
|
||||
background: url("data:image/svg+xml,%3csvg width='14' height='9' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.238 1.938L1.647.517 7 5.819 12.354.517l1.408 1.421L7 8.636z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
/* Toggler states. */
|
||||
|
||||
.dropbutton__toggle:hover {
|
||||
color: var(--button-fg-color);
|
||||
background-color: var(--button--hover-bg-color);
|
||||
box-shadow: 0 2px 4px rgb(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.dropbutton__toggle:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dropbutton__toggle:active {
|
||||
color: var(--button-fg-color);
|
||||
background-color: var(--button--active-bg-color);
|
||||
}
|
||||
|
||||
.dropbutton-wrapper.open .dropbutton__toggle::before {
|
||||
transform: translate(50%, -50%) rotate(180deg);
|
||||
}
|
||||
|
||||
[dir="rtl"] :is(.dropbutton-wrapper.open .dropbutton__toggle::before) {
|
||||
transform: translate(50%, -50%) rotate(-180deg);
|
||||
}
|
||||
|
||||
/* Toggler variants */
|
||||
|
||||
.no-touchevents .dropbutton--small .dropbutton__toggle {
|
||||
width: var(--dropbutton-small-toggle-size);
|
||||
height: var(--dropbutton-small-toggle-size);
|
||||
}
|
||||
|
||||
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle {
|
||||
width: var(--dropbutton-extrasmall-toggle-size);
|
||||
height: var(--dropbutton-extrasmall-toggle-size);
|
||||
}
|
||||
|
||||
.no-touchevents .dropbutton--small .dropbutton__toggle::before,
|
||||
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
|
||||
width: 0.75rem; /* 12px */
|
||||
}
|
||||
|
||||
/* High contrast. */
|
||||
|
||||
@media (forced-colors: active) {
|
||||
/* Default. */
|
||||
.dropbutton__toggle::before {
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
margin-top: calc(0.5625rem / (2 * -1.41429));
|
||||
transform: translate(50%, -50%) rotate(135deg); /* LTR */
|
||||
border-width: 0.125rem 0.125rem 0 0;
|
||||
border-style: solid;
|
||||
background: none;
|
||||
}
|
||||
.dropbutton-wrapper.open .dropbutton__toggle::before {
|
||||
margin-top: calc(0.5625rem / (2 * 1.41429));
|
||||
transform: translate(50%, -50%) rotate(315deg);
|
||||
}
|
||||
[dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {
|
||||
transform: translate(50%, -50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* Variants */
|
||||
|
||||
.no-touchevents .dropbutton--small .dropbutton__toggle::before,
|
||||
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
margin-top: calc(0.4375rem / (2 * -1.41429));
|
||||
}
|
||||
|
||||
.dropbutton-wrapper.open .dropbutton__toggle::before {
|
||||
margin-top: calc(0.4375rem / (2 * 1.41429));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Item in the first dropbutton list item (that looks like a button).
|
||||
*
|
||||
* Duplicates base button styles.
|
||||
*/
|
||||
|
||||
.dropbutton__item:first-of-type > * {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size)) calc(var(--space-l) - var(--dropbutton-border-size));
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--button-fg-color);
|
||||
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
|
||||
border-radius: var(--button-border-radius-size);
|
||||
background-color: var(--button-bg-color);
|
||||
font-size: var(--dropbutton-font-size);
|
||||
font-weight: 700;
|
||||
line-height: var(--dropbutton-line-height);
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.dropbutton--multiple .dropbutton__item:first-of-type > * {
|
||||
padding-inline: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
|
||||
}
|
||||
|
||||
/* Variants */
|
||||
|
||||
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type > * {
|
||||
padding-block: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
|
||||
font-size: var(--dropbutton-small-font-size);
|
||||
line-height: var(--dropbutton-small-line-height);
|
||||
}
|
||||
|
||||
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type > * {
|
||||
padding-top: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
|
||||
padding-bottom: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
|
||||
font-size: var(--dropbutton-extrasmall-font-size);
|
||||
line-height: var(--dropbutton-extrasmall-line-height);
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type > *:hover,
|
||||
.dropbutton__item:first-of-type > .button:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--button-fg-color);
|
||||
background-color: var(--button--hover-bg-color);
|
||||
box-shadow: 0 2px 4px rgb(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type > *:focus:hover,
|
||||
.dropbutton__item:first-of-type > .button:focus:hover {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus);
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type > *:focus {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type > *:active {
|
||||
color: var(--button-fg-color);
|
||||
background-color: var(--button--active-bg-color);
|
||||
}
|
||||
|
||||
.dropbutton--multiple .dropbutton__item:first-of-type > * {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.dropbutton--multiple .dropbutton__item:first-of-type > *:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dropbutton--multiple .dropbutton__item:first-of-type > * {
|
||||
border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type > * {
|
||||
border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;
|
||||
}
|
||||
|
||||
.dropbutton > .dropbutton__item > a,
|
||||
.dropbutton > .dropbutton__item > .button {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
text-align: left; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton > .dropbutton__item > a,
|
||||
[dir="rtl"] .dropbutton > .dropbutton__item > .button {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
|
||||
visibility: hidden;
|
||||
/**
|
||||
* By setting a height of 1px, the dropbutton items are hidden
|
||||
* from view while still occupying minimal space, ensuring the layout remains intact.
|
||||
*/
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Non-first dropbutton list elements.
|
||||
*/
|
||||
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item {
|
||||
border: var(--dropbutton-border-size) solid var(--color-gray-200);
|
||||
border-bottom: 0;
|
||||
box-shadow: 0 2px 10px rgb(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
:is(.dropbutton__item:first-of-type ~ .dropbutton__item) ~ .dropbutton__item {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.dropbutton__item ~ .dropbutton__item:last-child {
|
||||
border-bottom: var(--dropbutton-border-size) solid var(--color-gray-200);
|
||||
border-radius: 0 0 var(--dropbutton-border-radius-size) var(--dropbutton-border-radius-size);
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropbutton items of non-first dropbutton list elements.
|
||||
*/
|
||||
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item {
|
||||
max-width: var(--dropbutton-item-max-width);
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > a,
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > .button {
|
||||
position: relative;
|
||||
padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
|
||||
white-space: normal;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--color-gray-800);
|
||||
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
|
||||
border-radius: var(--dropbutton-border-radius-size);
|
||||
background: var(--color-white);
|
||||
box-shadow: none;
|
||||
font-size: var(--dropbutton-font-size);
|
||||
font-weight: normal;
|
||||
line-height: var(--dropbutton-line-height);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > a:not(:focus),
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > .button:not(:focus) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Variants. */
|
||||
|
||||
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > a,
|
||||
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
|
||||
padding-top: var(--dropbutton-small-spacing-size);
|
||||
padding-bottom: var(--dropbutton-small-spacing-size);
|
||||
font-size: var(--dropbutton-small-font-size);
|
||||
line-height: var(--dropbutton-small-line-height);
|
||||
}
|
||||
|
||||
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > a,
|
||||
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
|
||||
padding-top: var(--dropbutton-extrasmall-spacing-size);
|
||||
padding-bottom: var(--dropbutton-extrasmall-spacing-size);
|
||||
font-size: var(--dropbutton-extrasmall-font-size);
|
||||
line-height: var(--dropbutton-extrasmall-line-height);
|
||||
}
|
||||
|
||||
/* States. */
|
||||
|
||||
.dropbutton__item > *:focus {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > *:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-gray-050);
|
||||
}
|
||||
|
||||
.dropbutton__item > .button:not(:focus) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > *:focus {
|
||||
border-color: var(--color-focus) !important; /* 1 */
|
||||
box-shadow:
|
||||
inset 0 0 0 1px var(--color-focus),
|
||||
0 0 0 1px var(--color-focus);
|
||||
}
|
||||
407
web/core/themes/claro/css/components/dropbutton.pcss.css
Normal file
407
web/core/themes/claro/css/components/dropbutton.pcss.css
Normal file
@ -0,0 +1,407 @@
|
||||
/**
|
||||
* @file
|
||||
* Dropbutton styles.
|
||||
*
|
||||
* 1. Transparent border is needed for high contrast mode. The border-width has
|
||||
* to be set with !important to render borders with the defined width in high
|
||||
* contrast mode Firefox.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/**
|
||||
* Dropbutton
|
||||
*/
|
||||
--dropbutton-spacing-size: var(--space-m);
|
||||
--dropbutton-font-size: var(--font-size-base);
|
||||
--dropbutton-line-height: var(--space-m);
|
||||
--dropbutton-toggle-size: 3rem;
|
||||
--dropbutton-border-size: 1px;
|
||||
--dropbutton-toggle-size-spacing: var(--dropbutton-border-size);
|
||||
--dropbutton-border-radius-size: 2px;
|
||||
--dropbutton-item-max-width: 12.5rem;
|
||||
/* Variant variables: small. */
|
||||
--dropbutton-small-spacing-size: 0.625rem;
|
||||
--dropbutton-small-font-size: var(--font-size-xs);
|
||||
--dropbutton-small-line-height: 0.75rem;
|
||||
--dropbutton-small-toggle-size: calc((2 * var(--dropbutton-small-spacing-size)) + var(--dropbutton-small-line-height));
|
||||
/* Variant variables: extra small. */
|
||||
--dropbutton-extrasmall-spacing-size: 0.375rem;
|
||||
--dropbutton-extrasmall-font-size: var(--font-size-xs);
|
||||
--dropbutton-extrasmall-line-height: 0.75rem;
|
||||
--dropbutton-extrasmall-toggle-size: calc((2 * var(--dropbutton-extrasmall-spacing-size)) + var(--dropbutton-extrasmall-line-height));
|
||||
}
|
||||
|
||||
.dropbutton-wrapper {
|
||||
display: inline-flex;
|
||||
border-radius: var(--button-border-radius-size);
|
||||
box-shadow: 0 1px 2px rgb(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.form-actions .dropbutton-wrapper,
|
||||
.field-actions .dropbutton-wrapper {
|
||||
margin-block: var(--space-xs);
|
||||
margin-inline: 0 var(--space-m);
|
||||
}
|
||||
|
||||
.dropbutton-widget {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
.js .dropbutton-wrapper.open & {
|
||||
z-index: var(--dropbutton-widget-z-index);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropbutton list.
|
||||
*/
|
||||
.dropbutton {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */
|
||||
height: var(--dropbutton-toggle-size);
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropbutton-widget {
|
||||
border-radius: var(--button-border-radius-size);
|
||||
background-color: var(--button-bg-color);
|
||||
}
|
||||
|
||||
/* Variants. */
|
||||
.dropbutton--small {
|
||||
height: var(--dropbutton-small-toggle-size);
|
||||
}
|
||||
|
||||
.dropbutton--extrasmall {
|
||||
height: var(--dropbutton-extrasmall-toggle-size);
|
||||
}
|
||||
|
||||
/**
|
||||
* First dropbutton list item.
|
||||
*/
|
||||
.dropbutton--multiple .dropbutton__item:first-of-type {
|
||||
margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
|
||||
white-space: nowrap;
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));
|
||||
}
|
||||
}
|
||||
|
||||
/* First dropbutton list item variants */
|
||||
.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
|
||||
margin-right: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
|
||||
white-space: nowrap;
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));
|
||||
}
|
||||
}
|
||||
|
||||
.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
|
||||
margin-right: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
|
||||
white-space: nowrap;
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropbutton toggler.
|
||||
*/
|
||||
.dropbutton__toggle {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
right: 0; /* LTR */
|
||||
bottom: 0;
|
||||
width: var(--dropbutton-toggle-size);
|
||||
height: var(--dropbutton-toggle-size);
|
||||
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
|
||||
border-inline-start: var(--dropbutton-border-size) solid white !important;
|
||||
border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0; /* LTR */
|
||||
background: var(--button-bg-color);
|
||||
font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */
|
||||
appearance: none;
|
||||
[dir="rtl"] & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size);
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 50%;
|
||||
width: 0.875rem;
|
||||
height: 0.5625rem;
|
||||
content: "";
|
||||
transform: translate(50%, -50%) rotate(0);
|
||||
background: url(../../images/icons/000f33/chevron-down.svg) no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
/* Toggler states. */
|
||||
&:hover {
|
||||
color: var(--button-fg-color);
|
||||
background-color: var(--button--hover-bg-color);
|
||||
box-shadow: 0 2px 4px rgb(0, 0, 0, 0.25);
|
||||
}
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
&:active {
|
||||
color: var(--button-fg-color);
|
||||
background-color: var(--button--active-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.dropbutton-wrapper.open .dropbutton__toggle::before {
|
||||
transform: translate(50%, -50%) rotate(180deg);
|
||||
[dir="rtl"] & {
|
||||
transform: translate(50%, -50%) rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Toggler variants */
|
||||
.no-touchevents .dropbutton--small .dropbutton__toggle {
|
||||
width: var(--dropbutton-small-toggle-size);
|
||||
height: var(--dropbutton-small-toggle-size);
|
||||
}
|
||||
|
||||
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle {
|
||||
width: var(--dropbutton-extrasmall-toggle-size);
|
||||
height: var(--dropbutton-extrasmall-toggle-size);
|
||||
}
|
||||
|
||||
.no-touchevents .dropbutton--small .dropbutton__toggle::before,
|
||||
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
|
||||
width: 0.75rem; /* 12px */
|
||||
}
|
||||
|
||||
/* High contrast. */
|
||||
@media (forced-colors: active) {
|
||||
/* Default. */
|
||||
.dropbutton__toggle::before {
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
margin-top: calc(0.5625rem / (2 * -1.41429));
|
||||
transform: translate(50%, -50%) rotate(135deg); /* LTR */
|
||||
border-width: 0.125rem 0.125rem 0 0;
|
||||
border-style: solid;
|
||||
background: none;
|
||||
.dropbutton-wrapper.open & {
|
||||
margin-top: calc(0.5625rem / (2 * 1.41429));
|
||||
transform: translate(50%, -50%) rotate(315deg);
|
||||
}
|
||||
[dir="rtl"] .dropbutton-wrapper.open & {
|
||||
transform: translate(50%, -50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Variants */
|
||||
|
||||
.no-touchevents .dropbutton--small .dropbutton__toggle::before,
|
||||
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
margin-top: calc(0.4375rem / (2 * -1.41429));
|
||||
}
|
||||
|
||||
.dropbutton-wrapper.open .dropbutton__toggle::before {
|
||||
margin-top: calc(0.4375rem / (2 * 1.41429));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Item in the first dropbutton list item (that looks like a button).
|
||||
*
|
||||
* Duplicates base button styles.
|
||||
*/
|
||||
.dropbutton__item:first-of-type {
|
||||
& > * {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size)) calc(var(--space-l) - var(--dropbutton-border-size));
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--button-fg-color);
|
||||
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
|
||||
border-radius: var(--button-border-radius-size);
|
||||
background-color: var(--button-bg-color);
|
||||
font-size: var(--dropbutton-font-size);
|
||||
font-weight: 700;
|
||||
line-height: var(--dropbutton-line-height);
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.dropbutton--multiple & > * {
|
||||
padding-inline: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
|
||||
}
|
||||
|
||||
/* Variants */
|
||||
.no-touchevents .dropbutton--small & > * {
|
||||
padding-block: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
|
||||
font-size: var(--dropbutton-small-font-size);
|
||||
line-height: var(--dropbutton-small-line-height);
|
||||
}
|
||||
|
||||
.no-touchevents .dropbutton--extrasmall & > * {
|
||||
padding-top: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
|
||||
padding-bottom: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
|
||||
font-size: var(--dropbutton-extrasmall-font-size);
|
||||
line-height: var(--dropbutton-extrasmall-line-height);
|
||||
}
|
||||
|
||||
& > *:hover,
|
||||
& > .button:hover {
|
||||
text-decoration: none;
|
||||
color: var(--button-fg-color);
|
||||
background-color: var(--button--hover-bg-color);
|
||||
box-shadow: 0 2px 4px rgb(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
& > *:focus:hover,
|
||||
& > .button:focus:hover {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus);
|
||||
}
|
||||
|
||||
& > *:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& > *:active {
|
||||
color: var(--button-fg-color);
|
||||
background-color: var(--button--active-bg-color);
|
||||
}
|
||||
|
||||
.dropbutton--multiple & > * {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.dropbutton--multiple & > *:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dropbutton--multiple & > * {
|
||||
border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .dropbutton--multiple & > * {
|
||||
border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropbutton > .dropbutton__item > a,
|
||||
.dropbutton > .dropbutton__item > .button {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
text-align: left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .dropbutton > .dropbutton__item > a,
|
||||
[dir="rtl"] .dropbutton > .dropbutton__item > .button {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
|
||||
visibility: hidden;
|
||||
/**
|
||||
* By setting a height of 1px, the dropbutton items are hidden
|
||||
* from view while still occupying minimal space, ensuring the layout remains intact.
|
||||
*/
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Non-first dropbutton list elements.
|
||||
*/
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item {
|
||||
border: var(--dropbutton-border-size) solid var(--color-gray-200);
|
||||
border-bottom: 0;
|
||||
box-shadow: 0 2px 10px rgb(0, 0, 0, 0.15);
|
||||
& ~ .dropbutton__item {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropbutton__item ~ .dropbutton__item:last-child {
|
||||
border-bottom: var(--dropbutton-border-size) solid var(--color-gray-200);
|
||||
border-radius: 0 0 var(--dropbutton-border-radius-size) var(--dropbutton-border-radius-size);
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropbutton items of non-first dropbutton list elements.
|
||||
*/
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item {
|
||||
max-width: var(--dropbutton-item-max-width);
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > a,
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > .button {
|
||||
position: relative;
|
||||
padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
|
||||
white-space: normal;
|
||||
text-decoration: none;
|
||||
color: var(--color-gray-800);
|
||||
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
|
||||
border-radius: var(--dropbutton-border-radius-size);
|
||||
background: var(--color-white);
|
||||
box-shadow: none;
|
||||
font-size: var(--dropbutton-font-size);
|
||||
font-weight: normal;
|
||||
line-height: var(--dropbutton-line-height);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > a:not(:focus),
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > .button:not(:focus) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Variants. */
|
||||
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > a,
|
||||
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
|
||||
padding-top: var(--dropbutton-small-spacing-size);
|
||||
padding-bottom: var(--dropbutton-small-spacing-size);
|
||||
font-size: var(--dropbutton-small-font-size);
|
||||
line-height: var(--dropbutton-small-line-height);
|
||||
}
|
||||
|
||||
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > a,
|
||||
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
|
||||
padding-top: var(--dropbutton-extrasmall-spacing-size);
|
||||
padding-bottom: var(--dropbutton-extrasmall-spacing-size);
|
||||
font-size: var(--dropbutton-extrasmall-font-size);
|
||||
line-height: var(--dropbutton-extrasmall-line-height);
|
||||
}
|
||||
|
||||
/* States. */
|
||||
.dropbutton__item {
|
||||
& > *:focus {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&:first-of-type ~ & > *:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-gray-050);
|
||||
}
|
||||
|
||||
& > .button:not(:focus) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:first-of-type ~ & > *:focus {
|
||||
border-color: var(--color-focus) !important; /* 1 */
|
||||
box-shadow:
|
||||
inset 0 0 0 1px var(--color-focus),
|
||||
0 0 0 1px var(--color-focus);
|
||||
}
|
||||
}
|
||||
65
web/core/themes/claro/css/components/entity-meta.css
Normal file
65
web/core/themes/claro/css/components/entity-meta.css
Normal file
@ -0,0 +1,65 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Entity meta.
|
||||
* This file contains the styles for the top right hand sidebar of the node/add form.
|
||||
*
|
||||
*/
|
||||
|
||||
.entity-meta {
|
||||
--entity-meta-spacing-xs: var(--space-xs);
|
||||
--entity-meta-spacing-l: var(--space-l);
|
||||
--entity-meta-spacing-m: var(--space-m);
|
||||
--entity-meta-color-fg: var(--color-fg);
|
||||
--entity-meta-color-bg: var(--color-bg);
|
||||
--entity-meta-color-white: var(--color-white);
|
||||
--entity-meta-border-size: var(--details-border-size);
|
||||
--entity-meta-border-color: var(--details-border-color);
|
||||
--entity-meta-border-size-radius: var(--details-accordion-border-size-radius);
|
||||
--entity-meta-font-size-base: var(--font-size-base);
|
||||
}
|
||||
|
||||
.entity-meta__header {
|
||||
padding: calc(var(--entity-meta-spacing-m) - var(--entity-meta-spacing-xs)) var(--entity-meta-spacing-m) calc(var(--entity-meta-spacing-l) - var(--entity-meta-spacing-xs));
|
||||
color: var(--entity-meta-color-fg);
|
||||
border: var(--entity-meta-border-size) solid var(--entity-meta-border-color);
|
||||
border-radius: var(--entity-meta-border-size-radius);
|
||||
background-color: var(--entity-meta-color-bg);
|
||||
}
|
||||
|
||||
.entity-meta__header .form-item {
|
||||
margin-block: var(--entity-meta-spacing-xs);
|
||||
}
|
||||
|
||||
.entity-meta__header .form-type--item .form-item__label {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
font-size: var(--entity-meta-font-size-base);
|
||||
}
|
||||
|
||||
.entity-meta__header .form-type--item .form-item__label::after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.entity-meta__header {
|
||||
padding: calc(var(--entity-meta-spacing-l) - var(--entity-meta-spacing-xs)) var(--entity-meta-spacing-l) var(--entity-meta-spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
.entity-meta__title {
|
||||
margin: 0.25em 0;
|
||||
text-shadow: 0 1px 0 var(--entity-meta-color-white);
|
||||
font-size: 1.231em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.entity-meta__revision {
|
||||
margin-block-start: var(--entity-meta-spacing-l);
|
||||
}
|
||||
56
web/core/themes/claro/css/components/entity-meta.pcss.css
Normal file
56
web/core/themes/claro/css/components/entity-meta.pcss.css
Normal file
@ -0,0 +1,56 @@
|
||||
/**
|
||||
* @file
|
||||
* Entity meta.
|
||||
* This file contains the styles for the top right hand sidebar of the node/add form.
|
||||
*
|
||||
*/
|
||||
|
||||
.entity-meta {
|
||||
--entity-meta-spacing-xs: var(--space-xs);
|
||||
--entity-meta-spacing-l: var(--space-l);
|
||||
--entity-meta-spacing-m: var(--space-m);
|
||||
--entity-meta-color-fg: var(--color-fg);
|
||||
--entity-meta-color-bg: var(--color-bg);
|
||||
--entity-meta-color-white: var(--color-white);
|
||||
--entity-meta-border-size: var(--details-border-size);
|
||||
--entity-meta-border-color: var(--details-border-color);
|
||||
--entity-meta-border-size-radius: var(--details-accordion-border-size-radius);
|
||||
--entity-meta-font-size-base: var(--font-size-base);
|
||||
}
|
||||
|
||||
.entity-meta__header {
|
||||
padding: calc(var(--entity-meta-spacing-m) - var(--entity-meta-spacing-xs)) var(--entity-meta-spacing-m) calc(var(--entity-meta-spacing-l) - var(--entity-meta-spacing-xs));
|
||||
color: var(--entity-meta-color-fg);
|
||||
border: var(--entity-meta-border-size) solid var(--entity-meta-border-color);
|
||||
border-radius: var(--entity-meta-border-size-radius);
|
||||
background-color: var(--entity-meta-color-bg);
|
||||
|
||||
& .form-item {
|
||||
margin-block: var(--entity-meta-spacing-xs);
|
||||
}
|
||||
|
||||
& .form-type--item .form-item__label {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
font-size: var(--entity-meta-font-size-base);
|
||||
|
||||
&::after {
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
padding: calc(var(--entity-meta-spacing-l) - var(--entity-meta-spacing-xs)) var(--entity-meta-spacing-l) var(--entity-meta-spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
.entity-meta__title {
|
||||
margin: 0.25em 0;
|
||||
text-shadow: 0 1px 0 var(--entity-meta-color-white);
|
||||
font-size: 1.231em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.entity-meta__revision {
|
||||
margin-block-start: var(--entity-meta-spacing-l);
|
||||
}
|
||||
144
web/core/themes/claro/css/components/fieldset.css
Normal file
144
web/core/themes/claro/css/components/fieldset.css
Normal file
@ -0,0 +1,144 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Fieldset styles.
|
||||
*/
|
||||
|
||||
.fieldset {
|
||||
min-width: 0;
|
||||
margin: var(--space-m) 0;
|
||||
padding: 0;
|
||||
color: var(--color-text);
|
||||
border: var(--details-border-size) solid var(--details-border-color);
|
||||
border-radius: var(--base-border-radius);
|
||||
background-color: var(--color-white);
|
||||
box-shadow: var(--details-box-shadow);
|
||||
}
|
||||
|
||||
.fieldset--group {
|
||||
color: inherit;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fieldset legend.
|
||||
*/
|
||||
|
||||
.fieldset__legend {
|
||||
display: contents; /* For Firefox. */
|
||||
float: left; /* iOS Safari, Android Chrome, Edge. */
|
||||
width: 100%; /* iOS Safari, Android Chrome, Edge. */
|
||||
margin-block-end: var(--space-m);
|
||||
color: var(--color-gray-800);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fieldset__legend--composite {
|
||||
float: none;
|
||||
width: auto;
|
||||
margin-block-start: calc(var(--space-xs) / 2); /* 4px */
|
||||
margin-block-end: calc(var(--space-xs) / 2); /* 4px */
|
||||
color: inherit;
|
||||
font-size: var(--font-size-s); /* 14px */
|
||||
line-height: calc(18rem / 16); /* 18px */
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.fieldset__legend {
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
}
|
||||
|
||||
/* This is used only on install configure form. */
|
||||
|
||||
.fieldset__legend--group {
|
||||
text-transform: uppercase;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.fieldset__label {
|
||||
display: block;
|
||||
padding: var(--space-m);
|
||||
line-height: var(--space-m);
|
||||
}
|
||||
|
||||
.fieldset__label.is-disabled {
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
|
||||
.fieldset__label.has-error {
|
||||
color: var(--input--error-color);
|
||||
}
|
||||
|
||||
.fieldset__label--group {
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.fieldset__label {
|
||||
padding-right: var(--space-l);
|
||||
padding-left: var(--space-l);
|
||||
}
|
||||
|
||||
.fieldset__label--group {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fieldset__description {
|
||||
margin-block-start: calc(6rem / 16); /* 6px */
|
||||
margin-block-end: calc(6rem / 16); /* 6px */
|
||||
color: var(--input-fg-color--description);
|
||||
font-size: var(--font-size-xs); /* ~13px */
|
||||
line-height: calc(17rem / 16); /* 17px */
|
||||
}
|
||||
|
||||
.fieldset__description.is-disabled {
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
|
||||
/* Error message (Inline form errors). */
|
||||
|
||||
.fieldset__error-message {
|
||||
margin-block-start: calc(6rem / 16); /* 6px */
|
||||
margin-block-end: calc(6rem / 16); /* 6px */
|
||||
color: var(--input--error-color);
|
||||
font-size: var(--font-size-xs); /* ~13px */
|
||||
font-weight: normal;
|
||||
line-height: calc(17rem / 16); /* 17px */
|
||||
}
|
||||
|
||||
.fieldset__wrapper {
|
||||
margin: var(--space-m);
|
||||
/**
|
||||
* Remove the extra padding of container-inline wrapper if it's used inside a fieldset
|
||||
*/
|
||||
}
|
||||
|
||||
.fieldset__wrapper > .container-inline {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.fieldset__wrapper {
|
||||
margin: var(--space-l) var(--space-l) calc(var(--space-m) + var(--space-s));
|
||||
}
|
||||
}
|
||||
|
||||
.fieldset__legend--visible ~ .fieldset__wrapper {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.fieldset__wrapper--group {
|
||||
margin: 0;
|
||||
}
|
||||
131
web/core/themes/claro/css/components/fieldset.pcss.css
Normal file
131
web/core/themes/claro/css/components/fieldset.pcss.css
Normal file
@ -0,0 +1,131 @@
|
||||
/**
|
||||
* @file
|
||||
* Fieldset styles.
|
||||
*/
|
||||
|
||||
.fieldset {
|
||||
min-width: 0;
|
||||
margin: var(--space-m) 0;
|
||||
padding: 0;
|
||||
color: var(--color-text);
|
||||
border: var(--details-border-size) solid var(--details-border-color);
|
||||
border-radius: var(--base-border-radius);
|
||||
background-color: var(--color-white);
|
||||
box-shadow: var(--details-box-shadow);
|
||||
}
|
||||
|
||||
.fieldset--group {
|
||||
color: inherit;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fieldset legend.
|
||||
*/
|
||||
.fieldset__legend {
|
||||
display: contents; /* For Firefox. */
|
||||
float: left; /* iOS Safari, Android Chrome, Edge. */
|
||||
width: 100%; /* iOS Safari, Android Chrome, Edge. */
|
||||
margin-block-end: var(--space-m);
|
||||
color: var(--color-gray-800);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fieldset__legend--composite {
|
||||
float: none;
|
||||
width: auto;
|
||||
margin-block-start: calc(var(--space-xs) / 2); /* 4px */
|
||||
margin-block-end: calc(var(--space-xs) / 2); /* 4px */
|
||||
color: inherit;
|
||||
font-size: var(--font-size-s); /* 14px */
|
||||
line-height: calc(18rem / 16); /* 18px */
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.fieldset__legend {
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
}
|
||||
|
||||
/* This is used only on install configure form. */
|
||||
.fieldset__legend--group {
|
||||
text-transform: uppercase;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.fieldset__label {
|
||||
display: block;
|
||||
padding: var(--space-m);
|
||||
line-height: var(--space-m);
|
||||
&.is-disabled {
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
|
||||
&.has-error {
|
||||
color: var(--input--error-color);
|
||||
}
|
||||
}
|
||||
|
||||
.fieldset__label--group {
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.fieldset__label {
|
||||
padding-right: var(--space-l);
|
||||
padding-left: var(--space-l);
|
||||
}
|
||||
|
||||
.fieldset__label--group {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fieldset__description {
|
||||
margin-block-start: calc(6rem / 16); /* 6px */
|
||||
margin-block-end: calc(6rem / 16); /* 6px */
|
||||
color: var(--input-fg-color--description);
|
||||
font-size: var(--font-size-xs); /* ~13px */
|
||||
line-height: calc(17rem / 16); /* 17px */
|
||||
&.is-disabled {
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Error message (Inline form errors). */
|
||||
.fieldset__error-message {
|
||||
margin-block-start: calc(6rem / 16); /* 6px */
|
||||
margin-block-end: calc(6rem / 16); /* 6px */
|
||||
color: var(--input--error-color);
|
||||
font-size: var(--font-size-xs); /* ~13px */
|
||||
font-weight: normal;
|
||||
line-height: calc(17rem / 16); /* 17px */
|
||||
}
|
||||
|
||||
.fieldset__wrapper {
|
||||
margin: var(--space-m);
|
||||
/**
|
||||
* Remove the extra padding of container-inline wrapper if it's used inside a fieldset
|
||||
*/
|
||||
& > .container-inline {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.fieldset__wrapper {
|
||||
margin: var(--space-l) var(--space-l) calc(var(--space-m) + var(--space-s));
|
||||
}
|
||||
}
|
||||
|
||||
.fieldset__legend--visible ~ .fieldset__wrapper {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.fieldset__wrapper--group {
|
||||
margin: 0;
|
||||
}
|
||||
28
web/core/themes/claro/css/components/file.css
Normal file
28
web/core/themes/claro/css/components/file.css
Normal file
@ -0,0 +1,28 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Extends styles of the file link.
|
||||
*/
|
||||
|
||||
.file {
|
||||
--file-offset: 0.0625rem;
|
||||
--file-font-size: var(--font-size-s);
|
||||
--file-size-color: var(--color-gray-800);
|
||||
|
||||
min-block-size: calc(var(--space-m) + var(--file-offset));
|
||||
padding-inline-start: var(--space-l);
|
||||
background-position: left var(--file-offset);
|
||||
background-size: var(--space-m) var(--space-m);
|
||||
font-size: var(--file-font-size);
|
||||
line-height: calc(18rem / 16);
|
||||
}
|
||||
|
||||
.file__size {
|
||||
color: var(--file-size-color);
|
||||
}
|
||||
21
web/core/themes/claro/css/components/file.pcss.css
Normal file
21
web/core/themes/claro/css/components/file.pcss.css
Normal file
@ -0,0 +1,21 @@
|
||||
/**
|
||||
* @file
|
||||
* Extends styles of the file link.
|
||||
*/
|
||||
|
||||
.file {
|
||||
--file-offset: 0.0625rem;
|
||||
--file-font-size: var(--font-size-s);
|
||||
--file-size-color: var(--color-gray-800);
|
||||
|
||||
min-block-size: calc(var(--space-m) + var(--file-offset));
|
||||
padding-inline-start: var(--space-l);
|
||||
background-position: left var(--file-offset);
|
||||
background-size: var(--space-m) var(--space-m);
|
||||
font-size: var(--file-font-size);
|
||||
line-height: calc(18rem / 16);
|
||||
}
|
||||
|
||||
.file__size {
|
||||
color: var(--file-size-color);
|
||||
}
|
||||
215
web/core/themes/claro/css/components/form--checkbox-radio.css
Normal file
215
web/core/themes/claro/css/components/form--checkbox-radio.css
Normal file
@ -0,0 +1,215 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Checkbox and radio input elements.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Form item modifiers.
|
||||
*/
|
||||
|
||||
.form-type--boolean {
|
||||
margin-inline-start: var(--input--label-spacing);
|
||||
line-height: var(--space-l);
|
||||
}
|
||||
|
||||
/**
|
||||
* Radio and checkbox items that are the child of a form item.
|
||||
*/
|
||||
|
||||
.form-type--boolean .form-boolean {
|
||||
position: relative;
|
||||
inset-block-start: calc(var(--space-l) / 2);
|
||||
float: left; /* LTR */
|
||||
margin-inline-start: calc(var(--input--label-spacing) * -1);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
[dir="rtl"] :is(.form-type--boolean .form-boolean) {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.form-type--boolean.form-item--no-label {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.form-type--boolean.form-item--no-label .form-boolean {
|
||||
position: static;
|
||||
float: none;
|
||||
margin-inline: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* When form items are nested in radios or checkboxes group, reduce the default
|
||||
* space between them.
|
||||
*/
|
||||
|
||||
.form-boolean-group .form-type--boolean {
|
||||
margin-block: 0.4em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Input appearance.
|
||||
*/
|
||||
|
||||
.form-boolean {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
vertical-align: text-bottom;
|
||||
border: 1px solid var(--input-border-color);
|
||||
border-radius: 2px;
|
||||
background: var(--input-bg-color) no-repeat 50% 50%;
|
||||
background-size: 100% 100%;
|
||||
box-shadow: 0 0 0 4px transparent;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.form-boolean:active,
|
||||
.form-boolean:hover {
|
||||
border-color: var(--input-fg-color);
|
||||
box-shadow: inset 0 0 0 1px var(--input-fg-color);
|
||||
}
|
||||
|
||||
.form-boolean:focus:active,
|
||||
.form-boolean:focus:hover {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus),
|
||||
inset 0 0 0 1px var(--input-fg-color);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.form-boolean {
|
||||
appearance: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.form-boolean--type-radio {
|
||||
width: 1.1875rem;
|
||||
height: 1.1875rem;
|
||||
border-radius: 1.1875rem;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked {
|
||||
border-color: var(--input--focus-border-color);
|
||||
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23003ecc'/%3e%3c/svg%3e");
|
||||
box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked:focus {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus),
|
||||
inset 0 0 0 1px var(--input--focus-border-color);
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked:focus:active,
|
||||
.form-boolean--type-radio:checked:focus:hover {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus),
|
||||
inset 0 0 0 1px var(--input-fg-color);
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked:active,
|
||||
.form-boolean--type-radio:checked:hover {
|
||||
border-color: var(--input-fg-color);
|
||||
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23000f33'/%3e%3c/svg%3e");
|
||||
box-shadow: inset 0 0 0 1px var(--input-fg-color);
|
||||
}
|
||||
|
||||
.form-boolean--type-checkbox:checked {
|
||||
border-color: var(--input--focus-border-color);
|
||||
background-color: var(--input--focus-border-color);
|
||||
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.form-boolean--type-checkbox:checked:active,
|
||||
.form-boolean--type-checkbox:checked:hover {
|
||||
border-color: var(--input-fg-color);
|
||||
background-color: var(--input-fg-color);
|
||||
}
|
||||
|
||||
/**
|
||||
* Error states.
|
||||
*/
|
||||
|
||||
.form-boolean.error {
|
||||
border-color: var(--input--error-border-color);
|
||||
background-color: var(--input-bg-color);
|
||||
box-shadow: inset 0 0 0 1px var(--input--error-border-color);
|
||||
}
|
||||
|
||||
.form-boolean.error:active,
|
||||
.form-boolean.error:hover {
|
||||
box-shadow: inset 0 0 0 1px var(--input--error-border-color);
|
||||
}
|
||||
|
||||
.form-boolean.error:focus,
|
||||
.form-boolean.error:focus:active,
|
||||
.form-boolean.error:focus:hover {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus),
|
||||
inset 0 0 0 1px var(--input--error-border-color);
|
||||
}
|
||||
|
||||
.form-boolean.error:checked:active,
|
||||
.form-boolean.error:checked:hover {
|
||||
border-color: var(--input--error-border-color);
|
||||
background-color: var(--input-bg-color);
|
||||
}
|
||||
|
||||
.form-boolean--type-checkbox.error:checked,
|
||||
.form-boolean--type-checkbox.error:checked:active,
|
||||
.form-boolean--type-checkbox.error:checked:hover {
|
||||
background-color: var(--input--error-border-color);
|
||||
}
|
||||
|
||||
.form-boolean--type-radio.error:checked,
|
||||
.form-boolean--type-radio.error:checked:active,
|
||||
.form-boolean--type-radio.error:checked:hover {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.form-boolean--type-radio.error:checked:focus {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus),
|
||||
inset 0 0 0 1px var(--input--error-border-color);
|
||||
}
|
||||
|
||||
/**
|
||||
* Disabled states.
|
||||
*/
|
||||
|
||||
.form-boolean[disabled],
|
||||
.form-boolean[disabled]:hover,
|
||||
.form-boolean[disabled].error,
|
||||
.form-boolean[disabled].error:hover,
|
||||
.form-boolean--type-radio[disabled]:focus:active,
|
||||
.form-boolean--type-radio[disabled]:active:hover,
|
||||
.form-boolean--type-radio[disabled].error:active:hover {
|
||||
border-color: var(--input--disabled-border-color);
|
||||
background-color: var(--input--disabled-bg-color);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-boolean--type-checkbox[disabled]:checked {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%2382828c'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.form-boolean--type-radio[disabled]:checked,
|
||||
.form-boolean--type-radio[disabled].error:checked {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3e%3c/svg%3e");
|
||||
}
|
||||
@ -0,0 +1,192 @@
|
||||
/**
|
||||
* @file
|
||||
* Checkbox and radio input elements.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Form item modifiers.
|
||||
*/
|
||||
.form-type--boolean {
|
||||
margin-inline-start: var(--input--label-spacing);
|
||||
line-height: var(--space-l);
|
||||
}
|
||||
|
||||
/**
|
||||
* Radio and checkbox items that are the child of a form item.
|
||||
*/
|
||||
.form-type--boolean .form-boolean {
|
||||
position: relative;
|
||||
inset-block-start: calc(var(--space-l) / 2);
|
||||
float: left; /* LTR */
|
||||
margin-inline-start: calc(var(--input--label-spacing) * -1);
|
||||
transform: translateY(-50%);
|
||||
|
||||
[dir="rtl"] & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.form-type--boolean.form-item--no-label {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.form-type--boolean.form-item--no-label .form-boolean {
|
||||
position: static;
|
||||
float: none;
|
||||
margin-inline: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* When form items are nested in radios or checkboxes group, reduce the default
|
||||
* space between them.
|
||||
*/
|
||||
.form-boolean-group .form-type--boolean {
|
||||
margin-block: 0.4em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Input appearance.
|
||||
*/
|
||||
.form-boolean {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: text-bottom;
|
||||
border: 1px solid var(--input-border-color);
|
||||
border-radius: 2px;
|
||||
background: var(--input-bg-color) no-repeat 50% 50%;
|
||||
background-size: 100% 100%;
|
||||
box-shadow: 0 0 0 4px transparent;
|
||||
appearance: none;
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
border-color: var(--input-fg-color);
|
||||
box-shadow: inset 0 0 0 1px var(--input-fg-color);
|
||||
}
|
||||
|
||||
&:focus:active,
|
||||
&:focus:hover {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus),
|
||||
inset 0 0 0 1px var(--input-fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.form-boolean {
|
||||
appearance: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.form-boolean--type-radio {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
border-radius: 19px;
|
||||
|
||||
&:checked {
|
||||
border-color: var(--input--focus-border-color);
|
||||
background-image: url(../../images/icons/003ecc/circle.svg);
|
||||
box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
|
||||
|
||||
&:focus {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus),
|
||||
inset 0 0 0 1px var(--input--focus-border-color);
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus),
|
||||
inset 0 0 0 1px var(--input-fg-color);
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&:hover {
|
||||
border-color: var(--input-fg-color);
|
||||
background-image: url(../../images/icons/000f33/circle.svg);
|
||||
box-shadow: inset 0 0 0 1px var(--input-fg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-boolean--type-checkbox:checked {
|
||||
border-color: var(--input--focus-border-color);
|
||||
background-color: var(--input--focus-border-color);
|
||||
background-image: url(../../images/icons/ffffff/checkmark-sm.svg);
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
border-color: var(--input-fg-color);
|
||||
background-color: var(--input-fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Error states.
|
||||
*/
|
||||
.form-boolean.error {
|
||||
border-color: var(--input--error-border-color);
|
||||
background-color: var(--input-bg-color);
|
||||
box-shadow: inset 0 0 0 1px var(--input--error-border-color);
|
||||
&:active,
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 1px var(--input--error-border-color);
|
||||
}
|
||||
&:focus,
|
||||
&:focus:active,
|
||||
&:focus:hover {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus),
|
||||
inset 0 0 0 1px var(--input--error-border-color);
|
||||
}
|
||||
&:checked:active,
|
||||
&:checked:hover {
|
||||
border-color: var(--input--error-border-color);
|
||||
background-color: var(--input-bg-color);
|
||||
}
|
||||
}
|
||||
.form-boolean--type-checkbox.error:checked,
|
||||
.form-boolean--type-checkbox.error:checked:active,
|
||||
.form-boolean--type-checkbox.error:checked:hover {
|
||||
background-color: var(--input--error-border-color);
|
||||
}
|
||||
.form-boolean--type-radio.error:checked,
|
||||
.form-boolean--type-radio.error:checked:active,
|
||||
.form-boolean--type-radio.error:checked:hover {
|
||||
background-image: url(../../images/icons/d72222/circle.svg);
|
||||
}
|
||||
.form-boolean--type-radio.error:checked:focus {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus),
|
||||
inset 0 0 0 1px var(--input--error-border-color);
|
||||
}
|
||||
|
||||
/**
|
||||
* Disabled states.
|
||||
*/
|
||||
.form-boolean[disabled],
|
||||
.form-boolean[disabled]:hover,
|
||||
.form-boolean[disabled].error,
|
||||
.form-boolean[disabled].error:hover,
|
||||
.form-boolean--type-radio[disabled]:focus:active,
|
||||
.form-boolean--type-radio[disabled]:active:hover,
|
||||
.form-boolean--type-radio[disabled].error:active:hover {
|
||||
border-color: var(--input--disabled-border-color);
|
||||
background-color: var(--input--disabled-bg-color);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.form-boolean--type-checkbox[disabled]:checked {
|
||||
background-image: url(../../images/icons/82828c/checkmark.svg);
|
||||
}
|
||||
.form-boolean--type-radio[disabled]:checked,
|
||||
.form-boolean--type-radio[disabled].error:checked {
|
||||
background-image: url(../../images/icons/82828c/circle.svg);
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styles for multiple field tables.
|
||||
*/
|
||||
|
||||
.field-multiple-table {
|
||||
margin-block: var(--space-m);
|
||||
}
|
||||
|
||||
.form-item--multiple .field-add-more-submit {
|
||||
margin-block: 0;
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for multiple field tables.
|
||||
*/
|
||||
|
||||
.field-multiple-table {
|
||||
margin-block: var(--space-m);
|
||||
}
|
||||
|
||||
.form-item--multiple .field-add-more-submit {
|
||||
margin-block: 0;
|
||||
}
|
||||
204
web/core/themes/claro/css/components/form--managed-file.css
Normal file
204
web/core/themes/claro/css/components/form--managed-file.css
Normal file
@ -0,0 +1,204 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styles for the managed file widget.
|
||||
*
|
||||
* This includes the styles for the file widgets and the image widgets.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--file-widget-form-item-min-width: 16rem;
|
||||
--file-widget-form-item-max-width: 32rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* The root element of the file/image widget.
|
||||
*/
|
||||
|
||||
.form-managed-file.no-upload {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.form-managed-file.has-value.is-multiple {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Modify component defaults for file/image widgets.
|
||||
*/
|
||||
|
||||
/**
|
||||
* File component style overrides for managed file widgets.
|
||||
*/
|
||||
|
||||
.form-managed-file .file {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.form-managed-file .file__size {
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* The 'meta' element of the file/image widget.
|
||||
*
|
||||
* This element is available only if the file widget has a value AND when there
|
||||
* are other input options than the ones rendered in the 'main' element.
|
||||
* These inputs are:
|
||||
* - File description and/or the file display checkbox of file widgets
|
||||
* - Image alt and/or title text as well as the preview image of the image
|
||||
* widgets.
|
||||
*
|
||||
* The trick here is that we will display the alt/title inputs next to the image
|
||||
* preview if there is enough space left. Enough space means the value of the
|
||||
* '--file-widget-form-item-min-width' variable.
|
||||
*/
|
||||
|
||||
.form-managed-file__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
margin-block-start: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
|
||||
}
|
||||
|
||||
.form-managed-file__meta .form-element {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Limiting the width of form items inside the meta element.
|
||||
*/
|
||||
|
||||
.form-managed-file__meta .form-item {
|
||||
max-width: var(--file-widget-form-item-max-width);
|
||||
margin-block: 0 var(--space-m); /* Top margin is added by the parent element */
|
||||
|
||||
/**
|
||||
* Reduce the bottom margin of the last 'meta' form-item for field multiple
|
||||
* tables.
|
||||
*/
|
||||
}
|
||||
|
||||
.form-managed-file__meta .form-item:last-child {
|
||||
margin-block-end: var(--space-xs);
|
||||
}
|
||||
|
||||
.draggable .form-managed-file.has-value .form-managed-file__meta {
|
||||
/**
|
||||
* In tables, this should be inline-flex. This is needed to make this element be
|
||||
* pushed to a new line, to the bottom of the drag handle.
|
||||
*/
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/**
|
||||
* The 'image preview' element.
|
||||
*
|
||||
* This is used and display only by the image widget.
|
||||
*/
|
||||
|
||||
.form-managed-file__image-preview {
|
||||
flex: 0 0 auto;
|
||||
max-width: 100%;
|
||||
margin-block-end: var(--space-m);
|
||||
}
|
||||
|
||||
.form-managed-file.has-meta .form-managed-file__image-preview {
|
||||
/* Add some 'end' margin if there are other meta inputs. */
|
||||
margin-inline-end: var(--space-m);
|
||||
}
|
||||
|
||||
/**
|
||||
* If this is rendered inside a file multiple table and there are no alt or
|
||||
* title, we have to reduce the amount of the bottom margin.
|
||||
*/
|
||||
|
||||
td .form-managed-file.no-meta .form-managed-file__image-preview {
|
||||
margin-block-end: var(--space-xs);
|
||||
}
|
||||
|
||||
/**
|
||||
* The children of the 'meta items' element are the inputs that were described
|
||||
* at the 'meta' element '.form-managed-file__meta', except of the image
|
||||
* preview.
|
||||
*
|
||||
* The flex-basis is set to the minimal width where we can display these inputs
|
||||
* next tho the preview image.
|
||||
*
|
||||
* We limit the max width directly on the '.form-item' elements.
|
||||
*/
|
||||
|
||||
.form-managed-file__meta-items {
|
||||
flex: 1 1 var(--file-widget-form-item-min-width);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* The main element of the file/image widget.
|
||||
*
|
||||
* This contains the upload input and the upload of the empty file/image
|
||||
* widgets, or the file name (with icon and size) and the remove button of
|
||||
* filled widgets.
|
||||
*
|
||||
* The inline-flex display shrinks the width to the minimal needed amount. This
|
||||
* helps to keep the remove as close to the other elements as possible.
|
||||
*/
|
||||
|
||||
.form-managed-file__main {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.form-managed-file__main .file {
|
||||
flex: 1 1 auto;
|
||||
margin-block: var(--space-xs);
|
||||
margin-inline: 0 var(--space-m);
|
||||
}
|
||||
|
||||
/* The file upload input. */
|
||||
|
||||
.form-managed-file__main .form-element--api-file {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default button margins and prevent shrinking or growing buttons.
|
||||
* This applies both on the 'no-js' upload button and the remove button. The
|
||||
* weight of this ruleset has been increase for this to take effect on RTL.
|
||||
*/
|
||||
|
||||
.form-managed-file__main .button.button {
|
||||
flex: 0 0 auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Add some bottom margin for single widgets if no meta is present. */
|
||||
|
||||
.form-managed-file.is-single.has-value .form-managed-file__main:last-child {
|
||||
margin-block-end: var(--space-m);
|
||||
}
|
||||
|
||||
.draggable .form-managed-file.has-value .form-managed-file__main {
|
||||
/**
|
||||
* Inside (draggable) tables, this should be flex-displayed. This keeps even
|
||||
* long file names in the same visual line where the drag handle is.
|
||||
*/
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add side margins if a table precedes the managed file form element.
|
||||
*/
|
||||
|
||||
.file-widget-multiple.has-table .form-type--managed-file {
|
||||
margin-inline: var(--space-m);
|
||||
}
|
||||
185
web/core/themes/claro/css/components/form--managed-file.pcss.css
Normal file
185
web/core/themes/claro/css/components/form--managed-file.pcss.css
Normal file
@ -0,0 +1,185 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for the managed file widget.
|
||||
*
|
||||
* This includes the styles for the file widgets and the image widgets.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--file-widget-form-item-min-width: 16rem;
|
||||
--file-widget-form-item-max-width: 32rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* The root element of the file/image widget.
|
||||
*/
|
||||
.form-managed-file {
|
||||
&.no-upload {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&.has-value.is-multiple {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Modify component defaults for file/image widgets.
|
||||
*/
|
||||
|
||||
/**
|
||||
* File component style overrides for managed file widgets.
|
||||
*/
|
||||
& .file {
|
||||
word-break: break-all;
|
||||
}
|
||||
& .file__size {
|
||||
word-break: normal;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The 'meta' element of the file/image widget.
|
||||
*
|
||||
* This element is available only if the file widget has a value AND when there
|
||||
* are other input options than the ones rendered in the 'main' element.
|
||||
* These inputs are:
|
||||
* - File description and/or the file display checkbox of file widgets
|
||||
* - Image alt and/or title text as well as the preview image of the image
|
||||
* widgets.
|
||||
*
|
||||
* The trick here is that we will display the alt/title inputs next to the image
|
||||
* preview if there is enough space left. Enough space means the value of the
|
||||
* '--file-widget-form-item-min-width' variable.
|
||||
*/
|
||||
.form-managed-file__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
margin-block-start: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
|
||||
|
||||
& .form-element {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Limiting the width of form items inside the meta element.
|
||||
*/
|
||||
& .form-item {
|
||||
max-width: var(--file-widget-form-item-max-width);
|
||||
margin-block: 0 var(--space-m); /* Top margin is added by the parent element */
|
||||
|
||||
/**
|
||||
* Reduce the bottom margin of the last 'meta' form-item for field multiple
|
||||
* tables.
|
||||
*/
|
||||
&:last-child {
|
||||
margin-block-end: var(--space-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.draggable .form-managed-file.has-value & {
|
||||
/**
|
||||
* In tables, this should be inline-flex. This is needed to make this element be
|
||||
* pushed to a new line, to the bottom of the drag handle.
|
||||
*/
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The 'image preview' element.
|
||||
*
|
||||
* This is used and display only by the image widget.
|
||||
*/
|
||||
.form-managed-file__image-preview {
|
||||
flex: 0 0 auto;
|
||||
max-width: 100%;
|
||||
margin-block-end: var(--space-m);
|
||||
|
||||
.form-managed-file.has-meta & {
|
||||
/* Add some 'end' margin if there are other meta inputs. */
|
||||
margin-inline-end: var(--space-m);
|
||||
}
|
||||
|
||||
/**
|
||||
* If this is rendered inside a file multiple table and there are no alt or
|
||||
* title, we have to reduce the amount of the bottom margin.
|
||||
*/
|
||||
td .form-managed-file.no-meta & {
|
||||
margin-block-end: var(--space-xs);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The children of the 'meta items' element are the inputs that were described
|
||||
* at the 'meta' element '.form-managed-file__meta', except of the image
|
||||
* preview.
|
||||
*
|
||||
* The flex-basis is set to the minimal width where we can display these inputs
|
||||
* next tho the preview image.
|
||||
*
|
||||
* We limit the max width directly on the '.form-item' elements.
|
||||
*/
|
||||
.form-managed-file__meta-items {
|
||||
flex: 1 1 var(--file-widget-form-item-min-width);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* The main element of the file/image widget.
|
||||
*
|
||||
* This contains the upload input and the upload of the empty file/image
|
||||
* widgets, or the file name (with icon and size) and the remove button of
|
||||
* filled widgets.
|
||||
*
|
||||
* The inline-flex display shrinks the width to the minimal needed amount. This
|
||||
* helps to keep the remove as close to the other elements as possible.
|
||||
*/
|
||||
.form-managed-file__main {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
|
||||
& .file {
|
||||
flex: 1 1 auto;
|
||||
margin-block: var(--space-xs);
|
||||
margin-inline: 0 var(--space-m);
|
||||
}
|
||||
|
||||
/* The file upload input. */
|
||||
& .form-element--api-file {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default button margins and prevent shrinking or growing buttons.
|
||||
* This applies both on the 'no-js' upload button and the remove button. The
|
||||
* weight of this ruleset has been increase for this to take effect on RTL.
|
||||
*/
|
||||
& .button.button {
|
||||
flex: 0 0 auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Add some bottom margin for single widgets if no meta is present. */
|
||||
.form-managed-file.is-single.has-value &:last-child {
|
||||
margin-block-end: var(--space-m);
|
||||
}
|
||||
|
||||
.draggable .form-managed-file.has-value & {
|
||||
/**
|
||||
* Inside (draggable) tables, this should be flex-displayed. This keeps even
|
||||
* long file names in the same visual line where the drag handle is.
|
||||
*/
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add side margins if a table precedes the managed file form element.
|
||||
*/
|
||||
.file-widget-multiple.has-table .form-type--managed-file {
|
||||
margin-inline: var(--space-m);
|
||||
}
|
||||
207
web/core/themes/claro/css/components/form--password-confirm.css
Normal file
207
web/core/themes/claro/css/components/form--password-confirm.css
Normal file
@ -0,0 +1,207 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for the Password widgets.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Password confirm widget styles.
|
||||
*/
|
||||
|
||||
.password-confirm {
|
||||
max-inline-size: 25rem;
|
||||
}
|
||||
|
||||
.password-confirm input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.password-confirm__password {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.password-confirm__confirm {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.js .password-confirm__confirm {
|
||||
max-height: 10rem;
|
||||
transition:
|
||||
max-height var(--speed-transition) ease-in-out,
|
||||
margin var(--speed-transition) ease-in-out;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.js .password-confirm__confirm {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Password confirm widget states. */
|
||||
|
||||
.js .is-initial:not(.form-item--error) .form-item__description {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
|
||||
display: none;
|
||||
max-block-size: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Password strength
|
||||
*
|
||||
* Description and strength indicator for the main input.
|
||||
*/
|
||||
|
||||
.password-strength {
|
||||
/* Weak */
|
||||
--password-strength-bar-weak-bg-color: var(--color-maximumred);
|
||||
--password-strength-bar-weak-border-color: var(--color-maximumred);
|
||||
/* Fair */
|
||||
--password-strength-bar-fair-bg-color: var(--color-sunglow);
|
||||
--password-strength-bar-fair-border-color: #977405;
|
||||
/* Good */
|
||||
--password-strength-bar-good-bg-color: var(--color-lightninggreen);
|
||||
--password-strength-bar-good-border-color: var(--color-lightninggreen);
|
||||
/* Strong */
|
||||
--password-strength-bar-strong-bg-color: var(--color-lightninggreen);
|
||||
--password-strength-bar-strong-border-color: var(--color-lightninggreen);
|
||||
|
||||
margin-block: var(--progress-bar-spacing-size);
|
||||
}
|
||||
|
||||
.password-strength__track {
|
||||
height: var(--progress-bar-small-size);
|
||||
margin-block: var(--progress-bar-spacing-size);
|
||||
border: var(--progress-bar-border-size) solid var(--progress-track-border-color);
|
||||
border-radius: var(--progress-bar-small-size-radius);
|
||||
background-color: var(--progress-track-bg-color);
|
||||
}
|
||||
|
||||
.password-strength__track::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Password strength states */
|
||||
|
||||
.password-strength__bar {
|
||||
min-inline-size: var(--progress-bar-small-size);
|
||||
height: var(--progress-bar-small-size);
|
||||
margin: calc(var(--progress-bar-border-size) * -1);
|
||||
transition: var(--progress-bar-transition);
|
||||
border: var(--progress-bar-border-size) solid transparent;
|
||||
border-radius: var(--progress-bar-small-size-radius);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.password-strength__bar.is-weak {
|
||||
border-color: var(--password-strength-bar-weak-border-color);
|
||||
background-color: var(--password-strength-bar-weak-bg-color);
|
||||
}
|
||||
|
||||
.password-strength__bar.is-fair {
|
||||
border-color: var(--password-strength-bar-fair-border-color);
|
||||
background-color: var(--password-strength-bar-fair-bg-color);
|
||||
}
|
||||
|
||||
.password-strength__bar.is-good {
|
||||
border-color: var(--password-strength-bar-good-border-color);
|
||||
background-color: var(--password-strength-bar-good-bg-color);
|
||||
}
|
||||
|
||||
.password-strength__bar.is-strong {
|
||||
border-color: var(--password-strength-bar-strong-border-color);
|
||||
background-color: var(--password-strength-bar-strong-bg-color);
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.password-strength__bar {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.password-strength__title {
|
||||
overflow: hidden;
|
||||
margin-block: var(--progress-bar-spacing-size);
|
||||
color: var(--progress-bar-description-color);
|
||||
font-size: var(--progress-bar-description-font-size);
|
||||
line-height: var(--space-m);
|
||||
}
|
||||
|
||||
.is-initial.is-password-empty .password-strength__title {
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.password-strength__text {
|
||||
color: var(--progress-bar-label-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.password-strength__bar.is-weak,
|
||||
.password-strength__bar.is-fair,
|
||||
.password-strength__bar.is-good,
|
||||
.password-strength__bar.is-strong {
|
||||
background-color: canvastext;
|
||||
}
|
||||
|
||||
.is-initial .password-strength__bar {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Password match message.
|
||||
*
|
||||
* This is the description-like message on the bottom of the password confirm
|
||||
* input.
|
||||
*/
|
||||
|
||||
.password-match-message {
|
||||
margin-block: var(--progress-bar-spacing-size);
|
||||
color: var(--progress-bar-description-color);
|
||||
font-size: var(--progress-bar-description-font-size);
|
||||
}
|
||||
|
||||
.is-confirm-empty .password-match-message {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.password-match-message__text {
|
||||
color: var(--progress-bar-label-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Password suggestions.
|
||||
*
|
||||
* Tips for improving the password.
|
||||
*/
|
||||
|
||||
.password-suggestions {
|
||||
margin-block: var(--progress-bar-spacing-size) var(--space-xs);
|
||||
padding: var(--space-m);
|
||||
color: var(--progress-bar-description-color);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--base-border-radius);
|
||||
background-color: var(--color-white);
|
||||
box-shadow: var(--details-box-shadow);
|
||||
font-size: var(--progress-bar-description-font-size);
|
||||
}
|
||||
|
||||
.password-suggestions__tips {
|
||||
margin-block-start: var(--space-xs);
|
||||
margin-inline-start: var(--space-l);
|
||||
}
|
||||
@ -0,0 +1,195 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for the Password widgets.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Password confirm widget styles.
|
||||
*/
|
||||
.password-confirm {
|
||||
max-inline-size: 25rem;
|
||||
|
||||
& input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.password-confirm__password {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.password-confirm__confirm {
|
||||
margin-block-end: 0;
|
||||
|
||||
.js & {
|
||||
max-height: 10rem;
|
||||
transition:
|
||||
max-height var(--speed-transition) ease-in-out,
|
||||
margin var(--speed-transition) ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.js .password-confirm__confirm {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Password confirm widget states. */
|
||||
.js .is-initial:not(.form-item--error) .form-item__description {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
|
||||
display: none;
|
||||
max-block-size: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Password strength
|
||||
*
|
||||
* Description and strength indicator for the main input.
|
||||
*/
|
||||
.password-strength {
|
||||
/* Weak */
|
||||
--password-strength-bar-weak-bg-color: var(--color-maximumred);
|
||||
--password-strength-bar-weak-border-color: var(--color-maximumred);
|
||||
/* Fair */
|
||||
--password-strength-bar-fair-bg-color: var(--color-sunglow);
|
||||
--password-strength-bar-fair-border-color: #977405;
|
||||
/* Good */
|
||||
--password-strength-bar-good-bg-color: var(--color-lightninggreen);
|
||||
--password-strength-bar-good-border-color: var(--color-lightninggreen);
|
||||
/* Strong */
|
||||
--password-strength-bar-strong-bg-color: var(--color-lightninggreen);
|
||||
--password-strength-bar-strong-border-color: var(--color-lightninggreen);
|
||||
|
||||
margin-block: var(--progress-bar-spacing-size);
|
||||
}
|
||||
|
||||
.password-strength__track {
|
||||
height: var(--progress-bar-small-size);
|
||||
margin-block: var(--progress-bar-spacing-size);
|
||||
border: var(--progress-bar-border-size) solid var(--progress-track-border-color);
|
||||
border-radius: var(--progress-bar-small-size-radius);
|
||||
background-color: var(--progress-track-bg-color);
|
||||
}
|
||||
|
||||
.password-strength__track::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Password strength states */
|
||||
.password-strength__bar {
|
||||
min-inline-size: var(--progress-bar-small-size);
|
||||
height: var(--progress-bar-small-size);
|
||||
margin: calc(var(--progress-bar-border-size) * -1);
|
||||
transition: var(--progress-bar-transition);
|
||||
border: var(--progress-bar-border-size) solid transparent;
|
||||
border-radius: var(--progress-bar-small-size-radius);
|
||||
background-color: transparent;
|
||||
|
||||
&.is-weak {
|
||||
border-color: var(--password-strength-bar-weak-border-color);
|
||||
background-color: var(--password-strength-bar-weak-bg-color);
|
||||
}
|
||||
|
||||
&.is-fair {
|
||||
border-color: var(--password-strength-bar-fair-border-color);
|
||||
background-color: var(--password-strength-bar-fair-bg-color);
|
||||
}
|
||||
|
||||
&.is-good {
|
||||
border-color: var(--password-strength-bar-good-border-color);
|
||||
background-color: var(--password-strength-bar-good-bg-color);
|
||||
}
|
||||
|
||||
&.is-strong {
|
||||
border-color: var(--password-strength-bar-strong-border-color);
|
||||
background-color: var(--password-strength-bar-strong-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.password-strength__bar {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.password-strength__title {
|
||||
overflow: hidden;
|
||||
margin-block: var(--progress-bar-spacing-size);
|
||||
color: var(--progress-bar-description-color);
|
||||
font-size: var(--progress-bar-description-font-size);
|
||||
line-height: var(--space-m);
|
||||
|
||||
.is-initial.is-password-empty & {
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.password-strength__text {
|
||||
color: var(--progress-bar-label-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.password-strength__bar {
|
||||
&.is-weak,
|
||||
&.is-fair,
|
||||
&.is-good,
|
||||
&.is-strong {
|
||||
background-color: canvastext;
|
||||
}
|
||||
}
|
||||
|
||||
.is-initial .password-strength__bar {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Password match message.
|
||||
*
|
||||
* This is the description-like message on the bottom of the password confirm
|
||||
* input.
|
||||
*/
|
||||
.password-match-message {
|
||||
margin-block: var(--progress-bar-spacing-size);
|
||||
color: var(--progress-bar-description-color);
|
||||
font-size: var(--progress-bar-description-font-size);
|
||||
|
||||
.is-confirm-empty & {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.password-match-message__text {
|
||||
color: var(--progress-bar-label-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Password suggestions.
|
||||
*
|
||||
* Tips for improving the password.
|
||||
*/
|
||||
.password-suggestions {
|
||||
margin-block: var(--progress-bar-spacing-size) var(--space-xs);
|
||||
padding: var(--space-m);
|
||||
color: var(--progress-bar-description-color);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--base-border-radius);
|
||||
background-color: var(--color-white);
|
||||
box-shadow: var(--details-box-shadow);
|
||||
font-size: var(--progress-bar-description-font-size);
|
||||
}
|
||||
|
||||
.password-suggestions__tips {
|
||||
margin-block-start: var(--space-xs);
|
||||
margin-inline-start: var(--space-l);
|
||||
}
|
||||
51
web/core/themes/claro/css/components/form--select.css
Normal file
51
web/core/themes/claro/css/components/form--select.css
Normal file
@ -0,0 +1,51 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Select input elements.
|
||||
*/
|
||||
|
||||
.form-element--type-select {
|
||||
padding-inline-end: calc(2rem - var(--input-border-size));
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
|
||||
|
||||
/**
|
||||
* Select states.
|
||||
*/
|
||||
}
|
||||
|
||||
.form-element--type-select:focus {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23003ecc'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.form-element--type-select[disabled] {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%238e929c'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-element--type-select {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
|
||||
.no-touchevents .form-element--type-select.form-element--extrasmall,
|
||||
.no-touchevents .form-element--type-select[name$="][_weight]"] {
|
||||
padding-inline-end: calc(1.5rem - var(--input-border-size));
|
||||
background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.form-element--type-select,
|
||||
.form-element--type-select:focus,
|
||||
.form-element--type-select[disabled] {
|
||||
padding-inline-end: var(--input-padding-horizontal);
|
||||
background-image: none;
|
||||
appearance: revert; /* Revert <select> appearance value for modern browsers. */
|
||||
}
|
||||
}
|
||||
44
web/core/themes/claro/css/components/form--select.pcss.css
Normal file
44
web/core/themes/claro/css/components/form--select.pcss.css
Normal file
@ -0,0 +1,44 @@
|
||||
/**
|
||||
* @file
|
||||
* Select input elements.
|
||||
*/
|
||||
|
||||
.form-element--type-select {
|
||||
padding-inline-end: calc(2rem - var(--input-border-size));
|
||||
background-image: url(../../images/icons/545560/chevron-down.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
|
||||
|
||||
/**
|
||||
* Select states.
|
||||
*/
|
||||
&:focus {
|
||||
background-image: url(../../images/icons/003ecc/chevron-down.svg);
|
||||
}
|
||||
&[disabled] {
|
||||
background-image: url(../../images/icons/8e929c/chevron-down.svg);
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
|
||||
.no-touchevents & {
|
||||
&.form-element--extrasmall,
|
||||
&[name$="][_weight]"] {
|
||||
padding-inline-end: calc(1.5rem - var(--input-border-size));
|
||||
background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.form-element--type-select,
|
||||
.form-element--type-select:focus,
|
||||
.form-element--type-select[disabled] {
|
||||
padding-inline-end: var(--input-padding-horizontal);
|
||||
background-image: none;
|
||||
appearance: revert; /* Revert <select> appearance value for modern browsers. */
|
||||
}
|
||||
}
|
||||
150
web/core/themes/claro/css/components/form--text.css
Normal file
150
web/core/themes/claro/css/components/form--text.css
Normal file
@ -0,0 +1,150 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Text and textarea input elements.
|
||||
*/
|
||||
|
||||
.form-element {
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */
|
||||
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
|
||||
color: var(--input-fg-color);
|
||||
border: var(--input-border-size) solid var(--input-border-color);
|
||||
border-radius: var(--input-border-radius-size);
|
||||
background: var(--input-bg-color);
|
||||
font-size: var(--input-font-size);
|
||||
line-height: var(--input-line-height);
|
||||
appearance: none; /* Being able to control inner box shadow on iOS. */
|
||||
}
|
||||
|
||||
.no-touchevents .form-element--extrasmall,
|
||||
.no-touchevents .form-element[name$="][_weight]"] {
|
||||
min-height: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */
|
||||
padding: var(--input--extrasmall-padding-vertical) var(--input--extrasmall-padding-horizontal);
|
||||
font-size: var(--input--extrasmall-font-size);
|
||||
line-height: var(--input--extrasmall-line-height);
|
||||
}
|
||||
|
||||
/**
|
||||
* Override normalize.css's search appearance.
|
||||
*/
|
||||
|
||||
.form-element--type-search[type="search"] {
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix minor things for specific types.
|
||||
*/
|
||||
|
||||
.form-element--type-date,
|
||||
.form-element--type-time {
|
||||
/* stylelint-disable-next-line declaration-property-value-no-unknown */
|
||||
vertical-align: -webkit-baseline-middle; /* Prevent iOS input jump while filling. */
|
||||
}
|
||||
|
||||
.form-element--type-date {
|
||||
min-width: 9.5rem; /* Prevent input width change while filling. */
|
||||
}
|
||||
|
||||
.form-element--type-time {
|
||||
min-width: 7.5rem; /* Prevent input width change while filling. */
|
||||
}
|
||||
|
||||
.form-element--type-color {
|
||||
min-width: 3rem; /* Bigger input for webkit */
|
||||
padding: 0; /* Bigger pickable area */
|
||||
text-indent: calc(0.75rem - var(--input-border-size)); /* Text-input fallback for non-supporting browsers like Safari */
|
||||
}
|
||||
|
||||
/**
|
||||
* Better upload button alignment for Chrome.
|
||||
*/
|
||||
|
||||
.form-element--type-file::-webkit-file-upload-button {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/**
|
||||
* States.
|
||||
*/
|
||||
|
||||
.form-element:active {
|
||||
border-color: var(--input--focus-border-color);
|
||||
}
|
||||
|
||||
.form-element:hover {
|
||||
border-color: var(--input--hover-border-color);
|
||||
box-shadow: inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
|
||||
}
|
||||
|
||||
.form-element:focus {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus);
|
||||
}
|
||||
|
||||
.form-element:hover:focus {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus),
|
||||
inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
|
||||
}
|
||||
|
||||
.form-element.error {
|
||||
border-width: var(--input--error-border-size);
|
||||
border-color: var(--input--error-border-color);
|
||||
}
|
||||
|
||||
.form-element.error:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-element.error:hover:focus {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus);
|
||||
}
|
||||
|
||||
.form-element--type-textarea.error + .cke {
|
||||
border-color: var(--input--error-border-color);
|
||||
}
|
||||
|
||||
.form-element[disabled] {
|
||||
color: var(--input--disabled-fg-color);
|
||||
border-color: var(--input--disabled-border-color);
|
||||
background-color: var(--input--disabled-bg-color);
|
||||
box-shadow: none;
|
||||
/* https://stackoverflow.com/q/262158#answer-23511280 */
|
||||
-webkit-text-fill-color: var(--input--disabled-fg-color);
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve form element usability on narrow devices.
|
||||
*/
|
||||
|
||||
@media screen and (max-width: 37.5rem) {
|
||||
/* Number, date and time are skipped here */
|
||||
.form-element {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-block-start: 0.75rem;
|
||||
margin-inline: 0;
|
||||
}
|
||||
.form-element:first-child,
|
||||
.form-item__label + .form-element {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-element--type-textarea.error + .ck-editor > .ck-editor__main {
|
||||
border: var(--input--error-border-size) solid var(--input--error-border-color);
|
||||
}
|
||||
130
web/core/themes/claro/css/components/form--text.pcss.css
Normal file
130
web/core/themes/claro/css/components/form--text.pcss.css
Normal file
@ -0,0 +1,130 @@
|
||||
/**
|
||||
* @file
|
||||
* Text and textarea input elements.
|
||||
*/
|
||||
|
||||
.form-element {
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */
|
||||
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
|
||||
color: var(--input-fg-color);
|
||||
border: var(--input-border-size) solid var(--input-border-color);
|
||||
border-radius: var(--input-border-radius-size);
|
||||
background: var(--input-bg-color);
|
||||
font-size: var(--input-font-size);
|
||||
line-height: var(--input-line-height);
|
||||
appearance: none; /* Being able to control inner box shadow on iOS. */
|
||||
}
|
||||
|
||||
.no-touchevents .form-element--extrasmall,
|
||||
.no-touchevents .form-element[name$="][_weight]"] {
|
||||
min-height: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */
|
||||
padding: var(--input--extrasmall-padding-vertical) var(--input--extrasmall-padding-horizontal);
|
||||
font-size: var(--input--extrasmall-font-size);
|
||||
line-height: var(--input--extrasmall-line-height);
|
||||
}
|
||||
|
||||
/**
|
||||
* Override normalize.css's search appearance.
|
||||
*/
|
||||
.form-element--type-search[type="search"] {
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix minor things for specific types.
|
||||
*/
|
||||
.form-element--type-date,
|
||||
.form-element--type-time {
|
||||
/* stylelint-disable-next-line declaration-property-value-no-unknown */
|
||||
vertical-align: -webkit-baseline-middle; /* Prevent iOS input jump while filling. */
|
||||
}
|
||||
.form-element--type-date {
|
||||
min-width: 9.5rem; /* Prevent input width change while filling. */
|
||||
}
|
||||
.form-element--type-time {
|
||||
min-width: 7.5rem; /* Prevent input width change while filling. */
|
||||
}
|
||||
|
||||
.form-element--type-color {
|
||||
min-width: 3rem; /* Bigger input for webkit */
|
||||
padding: 0; /* Bigger pickable area */
|
||||
text-indent: calc(0.75rem - var(--input-border-size)); /* Text-input fallback for non-supporting browsers like Safari */
|
||||
}
|
||||
|
||||
/**
|
||||
* Better upload button alignment for Chrome.
|
||||
*/
|
||||
.form-element--type-file::-webkit-file-upload-button {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/**
|
||||
* States.
|
||||
*/
|
||||
.form-element:active {
|
||||
border-color: var(--input--focus-border-color);
|
||||
}
|
||||
.form-element:hover {
|
||||
border-color: var(--input--hover-border-color);
|
||||
box-shadow: inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
|
||||
}
|
||||
.form-element:focus {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus);
|
||||
}
|
||||
.form-element:hover:focus {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus),
|
||||
inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
|
||||
}
|
||||
|
||||
.form-element.error {
|
||||
border-width: var(--input--error-border-size);
|
||||
border-color: var(--input--error-border-color);
|
||||
}
|
||||
.form-element.error:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
.form-element.error:hover:focus {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-white),
|
||||
0 0 0 5px var(--color-focus);
|
||||
}
|
||||
.form-element--type-textarea.error + .cke {
|
||||
border-color: var(--input--error-border-color);
|
||||
}
|
||||
|
||||
.form-element[disabled] {
|
||||
color: var(--input--disabled-fg-color);
|
||||
border-color: var(--input--disabled-border-color);
|
||||
background-color: var(--input--disabled-bg-color);
|
||||
box-shadow: none;
|
||||
/* https://stackoverflow.com/q/262158#answer-23511280 */
|
||||
-webkit-text-fill-color: var(--input--disabled-fg-color);
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve form element usability on narrow devices.
|
||||
*/
|
||||
@media screen and (max-width: 600px) {
|
||||
/* Number, date and time are skipped here */
|
||||
.form-element {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-block-start: 0.75rem;
|
||||
margin-inline: 0;
|
||||
}
|
||||
.form-element:first-child,
|
||||
.form-item__label + .form-element {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-element--type-textarea.error + .ck-editor > .ck-editor__main {
|
||||
border: var(--input--error-border-size) solid var(--input--error-border-color);
|
||||
}
|
||||
259
web/core/themes/claro/css/components/form.css
Normal file
259
web/core/themes/claro/css/components/form.css
Normal file
@ -0,0 +1,259 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Main form and form item styles.
|
||||
*/
|
||||
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
color: var(--input-fg-color--placeholder);
|
||||
}
|
||||
|
||||
/**
|
||||
* General form item.
|
||||
*/
|
||||
|
||||
.form-item {
|
||||
margin-block: var(--space-l);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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(--space-s);
|
||||
}
|
||||
|
||||
/**
|
||||
* Form element label.
|
||||
*/
|
||||
|
||||
.form-item__label {
|
||||
display: table;
|
||||
margin-block: calc(var(--space-xs) / 2); /* 4px */
|
||||
font-size: var(--font-size-s); /* ~14px */
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-form-label);
|
||||
}
|
||||
|
||||
.form-item__label[for] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-item__label.option {
|
||||
display: inline;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.form-item__label.has-error {
|
||||
color: var(--input--error-color);
|
||||
}
|
||||
|
||||
.form-item__label.option.has-error {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.form-item__label.is-disabled {
|
||||
cursor: default; /* @todo ...or auto? */
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
|
||||
/* Multiple selectors used to ensure styling even if modules override markup. */
|
||||
|
||||
.form-item__label--multiple-value-form,
|
||||
.field-multiple-table .field-label h4.label {
|
||||
display: inline-block;
|
||||
margin-block: 0;
|
||||
align-self: center;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.form-item__label.form-required::after,
|
||||
.fieldset__label.form-required::after {
|
||||
display: inline-block;
|
||||
margin-inline: 0.15em;
|
||||
content: "*";
|
||||
color: var(--color-maximumred);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Form item description.
|
||||
*/
|
||||
|
||||
.form-item__description {
|
||||
margin-block: calc(6rem / 16); /* 6px */
|
||||
color: var(--input-fg-color--description);
|
||||
font-size: var(--font-size-xs); /* ~13px */
|
||||
line-height: calc(17rem / 16); /* 17px */
|
||||
}
|
||||
|
||||
.form-item__description.is-disabled {
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
|
||||
/**
|
||||
* Error message (Inline form errors).
|
||||
*/
|
||||
|
||||
.form-item__error-message {
|
||||
margin-block: calc(6rem / 16); /* 6px */
|
||||
color: var(--input--error-color);
|
||||
font-size: var(--font-size-xs); /* ~13px */
|
||||
font-weight: normal;
|
||||
line-height: calc(17rem / 16); /* 17px */
|
||||
}
|
||||
|
||||
.form-item__prefix.is-disabled,
|
||||
.form-item__suffix.is-disabled {
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
|
||||
/* Add some spacing so that the focus ring and suffix don't overlap. */
|
||||
|
||||
@media screen and (min-width: 37.5625rem) {
|
||||
.form-item__suffix {
|
||||
margin-inline-start: var(--space-xs);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Form actions.
|
||||
*/
|
||||
|
||||
.form-actions,
|
||||
.field-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
margin-block: var(--space-xs);
|
||||
}
|
||||
|
||||
.form-actions .form-wrapper,
|
||||
.field-actions .form-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-xs) 0;
|
||||
}
|
||||
|
||||
.form-actions .button,
|
||||
.field-actions .button,
|
||||
.form-actions .action-link,
|
||||
.field-actions .action-link {
|
||||
margin-block: var(--space-xs);
|
||||
}
|
||||
|
||||
.form-actions .ajax-progress--throbber,
|
||||
.field-actions .ajax-progress--throbber {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.form-actions > .form-wrapper {
|
||||
margin-inline: 0 var(--space-s);
|
||||
}
|
||||
|
||||
/**
|
||||
* Password module.
|
||||
*
|
||||
* @legacy
|
||||
* @todo These should be in a standalone component file.
|
||||
*/
|
||||
|
||||
.confirm-parent,
|
||||
.password-parent {
|
||||
overflow: visible;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-item-options-group-info-identifier,
|
||||
.form-item-pass .description {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,
|
||||
.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(--space-xs);
|
||||
}
|
||||
|
||||
.form-item--editor-format .form-item__description,
|
||||
.form-item--editor-format .form-item__error-message {
|
||||
flex: 0 1 100%;
|
||||
min-width: 1px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve form element usability on narrow devices.
|
||||
*
|
||||
* @legacy
|
||||
*/
|
||||
|
||||
@media screen and (max-width: 37.5rem) {
|
||||
.password-strength {
|
||||
width: 100%;
|
||||
}
|
||||
div.form-item div.password-suggestions {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent regression due to explicit line-heights applied to these elements in
|
||||
* normalize.css 7.0.0.
|
||||
*/
|
||||
|
||||
button {
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
input,
|
||||
optgroup {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent regression due to -webkit-appearance being set to button in
|
||||
* normalize.css 4.1.0.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: push-button;
|
||||
}
|
||||
232
web/core/themes/claro/css/components/form.pcss.css
Normal file
232
web/core/themes/claro/css/components/form.pcss.css
Normal file
@ -0,0 +1,232 @@
|
||||
/**
|
||||
* @file
|
||||
* Main form and form item styles.
|
||||
*/
|
||||
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
color: var(--input-fg-color--placeholder);
|
||||
}
|
||||
|
||||
/**
|
||||
* General form item.
|
||||
*/
|
||||
.form-item {
|
||||
margin-block: var(--space-l);
|
||||
}
|
||||
/**
|
||||
* 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(--space-s);
|
||||
}
|
||||
|
||||
/**
|
||||
* Form element label.
|
||||
*/
|
||||
.form-item__label {
|
||||
display: table;
|
||||
margin-block: calc(var(--space-xs) / 2); /* 4px */
|
||||
font-size: var(--font-size-s); /* ~14px */
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-form-label);
|
||||
|
||||
&[for] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.option {
|
||||
display: inline;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&.has-error {
|
||||
color: var(--input--error-color);
|
||||
}
|
||||
|
||||
&.option.has-error {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
cursor: default; /* @todo ...or auto? */
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
}
|
||||
/* Multiple selectors used to ensure styling even if modules override markup. */
|
||||
.form-item__label--multiple-value-form,
|
||||
.field-multiple-table .field-label h4.label {
|
||||
display: inline-block;
|
||||
margin-block: 0;
|
||||
align-self: center;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.form-item__label.form-required::after,
|
||||
.fieldset__label.form-required::after {
|
||||
display: inline-block;
|
||||
margin-inline: 0.15em;
|
||||
content: "*";
|
||||
color: var(--color-maximumred);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Form item description.
|
||||
*/
|
||||
.form-item__description {
|
||||
margin-block: calc(6rem / 16); /* 6px */
|
||||
color: var(--input-fg-color--description);
|
||||
font-size: var(--font-size-xs); /* ~13px */
|
||||
line-height: calc(17rem / 16); /* 17px */
|
||||
|
||||
&.is-disabled {
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Error message (Inline form errors).
|
||||
*/
|
||||
.form-item__error-message {
|
||||
margin-block: calc(6rem / 16); /* 6px */
|
||||
color: var(--input--error-color);
|
||||
font-size: var(--font-size-xs); /* ~13px */
|
||||
font-weight: normal;
|
||||
line-height: calc(17rem / 16); /* 17px */
|
||||
}
|
||||
|
||||
.form-item__prefix.is-disabled,
|
||||
.form-item__suffix.is-disabled {
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
|
||||
/* Add some spacing so that the focus ring and suffix don't overlap. */
|
||||
@media screen and (min-width: 601px) {
|
||||
.form-item__suffix {
|
||||
margin-inline-start: var(--space-xs);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Form actions.
|
||||
*/
|
||||
.form-actions,
|
||||
.field-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
margin-block: var(--space-xs);
|
||||
|
||||
& .form-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-xs) 0;
|
||||
}
|
||||
|
||||
& .button,
|
||||
& .action-link {
|
||||
margin-block: var(--space-xs);
|
||||
}
|
||||
|
||||
& .ajax-progress--throbber {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions > .form-wrapper {
|
||||
margin-inline: 0 var(--space-s);
|
||||
}
|
||||
|
||||
/**
|
||||
* Password module.
|
||||
*
|
||||
* @legacy
|
||||
* @todo These should be in a standalone component file.
|
||||
*/
|
||||
.confirm-parent,
|
||||
.password-parent {
|
||||
overflow: visible;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-item-options-group-info-identifier,
|
||||
.form-item-pass .description {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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__label,
|
||||
& .form-item__prefix,
|
||||
& .form-item__suffix,
|
||||
& .form-element--editor-format {
|
||||
min-width: 1px;
|
||||
}
|
||||
|
||||
& .form-item__label,
|
||||
& .form-item__prefix,
|
||||
& .form-item__suffix,
|
||||
& .form-element--editor-format {
|
||||
min-width: 1px;
|
||||
}
|
||||
|
||||
& .form-item__label,
|
||||
& .form-item__prefix,
|
||||
& .form-item__suffix {
|
||||
margin-inline-end: var(--space-xs);
|
||||
}
|
||||
|
||||
& .form-item__description,
|
||||
& .form-item__error-message {
|
||||
flex: 0 1 100%;
|
||||
min-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve form element usability on narrow devices.
|
||||
*
|
||||
* @legacy
|
||||
*/
|
||||
@media screen and (max-width: 600px) {
|
||||
.password-strength {
|
||||
width: 100%;
|
||||
}
|
||||
div.form-item div.password-suggestions {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent regression due to explicit line-heights applied to these elements in
|
||||
* normalize.css 7.0.0.
|
||||
*/
|
||||
button {
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
input,
|
||||
optgroup {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent regression due to -webkit-appearance being set to button in
|
||||
* normalize.css 4.1.0.
|
||||
*/
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: push-button;
|
||||
}
|
||||
15
web/core/themes/claro/css/components/help.css
Normal file
15
web/core/themes/claro/css/components/help.css
Normal file
@ -0,0 +1,15 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Claro styles for the help component.
|
||||
*/
|
||||
|
||||
.help p {
|
||||
margin: 0 0 0.625rem;
|
||||
}
|
||||
8
web/core/themes/claro/css/components/help.pcss.css
Normal file
8
web/core/themes/claro/css/components/help.pcss.css
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* @file
|
||||
* Claro styles for the help component.
|
||||
*/
|
||||
|
||||
.help p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
54
web/core/themes/claro/css/components/icon-link.css
Normal file
54
web/core/themes/claro/css/components/icon-link.css
Normal file
@ -0,0 +1,54 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Icon link component.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* default */
|
||||
--icon-link-bg-color: var(--color-white);
|
||||
--icon-link-border-color: var(--color-gray-200);
|
||||
/* active */
|
||||
--icon-link--active-bg-color: var(--color-absolutezero);
|
||||
--icon-link--active-border-color: var(--color-absolutezero);
|
||||
/* hover */
|
||||
--icon-link--hover-bg-color: var(--color-bgblue-hover);
|
||||
--icon-link--hover-border-color: var(--color-gray-200-o-80);
|
||||
}
|
||||
|
||||
.icon-link {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
border: 1px solid var(--icon-link-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--icon-link-bg-color);
|
||||
}
|
||||
|
||||
.icon-link:hover {
|
||||
border-color: var(--icon-link--hover-border-color);
|
||||
background-color: var(--icon-link--hover-bg-color);
|
||||
}
|
||||
|
||||
.icon-link:focus {
|
||||
box-shadow:
|
||||
0 0 0 1.5px var(--color-white),
|
||||
0 0 0 3.5px var(--color-focus);
|
||||
}
|
||||
|
||||
.icon-link:active,
|
||||
.open > .icon-link {
|
||||
border-color: var(--icon-link--active-border-color);
|
||||
background-color: var(--icon-link--active-bg-color);
|
||||
}
|
||||
|
||||
.icon-link--small:focus {
|
||||
box-shadow:
|
||||
0 0 0 1px var(--color-white),
|
||||
0 0 0 3px var(--color-focus);
|
||||
}
|
||||
49
web/core/themes/claro/css/components/icon-link.pcss.css
Normal file
49
web/core/themes/claro/css/components/icon-link.pcss.css
Normal file
@ -0,0 +1,49 @@
|
||||
/**
|
||||
* @file
|
||||
* Icon link component.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* default */
|
||||
--icon-link-bg-color: var(--color-white);
|
||||
--icon-link-border-color: var(--color-gray-200);
|
||||
/* active */
|
||||
--icon-link--active-bg-color: var(--color-absolutezero);
|
||||
--icon-link--active-border-color: var(--color-absolutezero);
|
||||
/* hover */
|
||||
--icon-link--hover-bg-color: var(--color-bgblue-hover);
|
||||
--icon-link--hover-border-color: var(--color-gray-200-o-80);
|
||||
}
|
||||
|
||||
.icon-link {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
border: 1px solid var(--icon-link-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--icon-link-bg-color);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--icon-link--hover-border-color);
|
||||
background-color: var(--icon-link--hover-bg-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow:
|
||||
0 0 0 1.5px var(--color-white),
|
||||
0 0 0 3.5px var(--color-focus);
|
||||
}
|
||||
|
||||
&:active,
|
||||
.open > & {
|
||||
border-color: var(--icon-link--active-border-color);
|
||||
background-color: var(--icon-link--active-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-link--small {
|
||||
&:focus {
|
||||
box-shadow:
|
||||
0 0 0 1px var(--color-white),
|
||||
0 0 0 3px var(--color-focus);
|
||||
}
|
||||
}
|
||||
50
web/core/themes/claro/css/components/image-preview.css
Normal file
50
web/core/themes/claro/css/components/image-preview.css
Normal file
@ -0,0 +1,50 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Image preview component.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--color-pattern: var(--color-gray-200);
|
||||
--size-pattern-square: calc(7rem / 16);
|
||||
}
|
||||
|
||||
/**
|
||||
* Image preview.
|
||||
*/
|
||||
|
||||
.image-preview {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.image-preview img {
|
||||
background-image: linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);
|
||||
background-position:
|
||||
0 0,
|
||||
var(--size-pattern-square) var(--size-pattern-square),
|
||||
var(--size-pattern-square) var(--size-pattern-square),
|
||||
0 0;
|
||||
background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);
|
||||
}
|
||||
|
||||
.image-preview__img-wrapper {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
background-color: var(--color-white);
|
||||
box-shadow: inset 0 0 var(--size-pattern-square) var(--color-pattern);
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't display file icon in image widgets.
|
||||
*/
|
||||
|
||||
.image-widget .file.file {
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
41
web/core/themes/claro/css/components/image-preview.pcss.css
Normal file
41
web/core/themes/claro/css/components/image-preview.pcss.css
Normal file
@ -0,0 +1,41 @@
|
||||
/**
|
||||
* @file
|
||||
* Image preview component.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--color-pattern: var(--color-gray-200);
|
||||
--size-pattern-square: calc(7rem / 16);
|
||||
}
|
||||
|
||||
/**
|
||||
* Image preview.
|
||||
*/
|
||||
.image-preview {
|
||||
line-height: 0;
|
||||
|
||||
& img {
|
||||
background-image: linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);
|
||||
background-position:
|
||||
0 0,
|
||||
var(--size-pattern-square) var(--size-pattern-square),
|
||||
var(--size-pattern-square) var(--size-pattern-square),
|
||||
0 0;
|
||||
background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
.image-preview__img-wrapper {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
background-color: var(--color-white);
|
||||
box-shadow: inset 0 0 var(--size-pattern-square) var(--color-pattern);
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't display file icon in image widgets.
|
||||
*/
|
||||
.image-widget .file.file {
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
19
web/core/themes/claro/css/components/image.admin.css
Normal file
19
web/core/themes/claro/css/components/image.admin.css
Normal file
@ -0,0 +1,19 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styles for image style admin UI.
|
||||
*/
|
||||
|
||||
.image-anchor td:not(:hover) {
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
|
||||
.image-anchor td:hover > div {
|
||||
background-color: transparent;
|
||||
}
|
||||
12
web/core/themes/claro/css/components/image.admin.pcss.css
Normal file
12
web/core/themes/claro/css/components/image.admin.pcss.css
Normal file
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for image style admin UI.
|
||||
*/
|
||||
|
||||
.image-anchor td:not(:hover) {
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
|
||||
.image-anchor td:hover > div {
|
||||
background-color: transparent;
|
||||
}
|
||||
985
web/core/themes/claro/css/components/jquery.ui/theme.css
Normal file
985
web/core/themes/claro/css/components/jquery.ui/theme.css
Normal file
@ -0,0 +1,985 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Claro styles for jQuery UI.
|
||||
* Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Component containers
|
||||
*/
|
||||
|
||||
.ui-widget {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui-widget-content {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ui-dialog {
|
||||
z-index: var(--jui-dialog-z-index);
|
||||
}
|
||||
|
||||
/**
|
||||
* Interaction states
|
||||
*/
|
||||
|
||||
.ui-state-default,
|
||||
.ui-state-hover,
|
||||
.ui-state-focus,
|
||||
.ui-state-active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.ui-state-highlight {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interaction cues
|
||||
*/
|
||||
|
||||
.ui-state-active,
|
||||
.ui-widget-content .ui-state-active {
|
||||
color: #840;
|
||||
}
|
||||
|
||||
.ui-state-error,
|
||||
.ui-widget-content .ui-state-error {
|
||||
color: #fff;
|
||||
border-color: #d52;
|
||||
background: #e63;
|
||||
}
|
||||
|
||||
.ui-state-disabled,
|
||||
.ui-widget-content .ui-state-disabled {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.ui-priority-secondary,
|
||||
.ui-widget-content .ui-priority-secondary {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/**
|
||||
* Icons
|
||||
*/
|
||||
|
||||
/* states and images */
|
||||
|
||||
.ui-icon {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
text-indent: -6249.9375rem;
|
||||
background-image: url(../../../images/ui-icons-222222-256x240.png);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ui-widget-content .ui-icon,
|
||||
.ui-widget-header .ui-icon {
|
||||
background-image: url(../../../images/ui-icons-222222-256x240.png);
|
||||
}
|
||||
|
||||
.ui-state-default .ui-icon {
|
||||
background-image: url(../../../images/ui-icons-888888-256x240.png);
|
||||
}
|
||||
|
||||
.ui-state-hover .ui-icon,
|
||||
.ui-state-focus .ui-icon,
|
||||
.ui-state-highlight .ui-icon {
|
||||
background-image: url(../../../images/ui-icons-454545-256x240.png);
|
||||
}
|
||||
|
||||
.ui-state-active .ui-icon {
|
||||
background-image: url(../../../images/ui-icons-800000-256x240.png);
|
||||
}
|
||||
|
||||
.ui-state-error .ui-icon,
|
||||
.ui-state-error-text .ui-icon {
|
||||
background-image: url(../../../images/ui-icons-ffffff-256x240.png);
|
||||
}
|
||||
|
||||
.ui-widget p .ui-icon {
|
||||
margin: 2px 0.1875rem 0 0; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .ui-widget p .ui-icon {
|
||||
margin: 2px 0 0 0.1875rem;
|
||||
}
|
||||
|
||||
/* positioning */
|
||||
|
||||
.ui-icon-carat-1-ne {
|
||||
background-position: -16px 0;
|
||||
}
|
||||
|
||||
.ui-icon-carat-1-e {
|
||||
background-position: -32px 0;
|
||||
}
|
||||
|
||||
.ui-icon-carat-1-se {
|
||||
background-position: -48px 0;
|
||||
}
|
||||
|
||||
.ui-icon-carat-1-s {
|
||||
background-position: -64px 0;
|
||||
}
|
||||
|
||||
.ui-icon-carat-1-sw {
|
||||
background-position: -80px 0;
|
||||
}
|
||||
|
||||
.ui-icon-carat-1-w {
|
||||
background-position: -96px 0;
|
||||
}
|
||||
|
||||
.ui-icon-carat-1-nw {
|
||||
background-position: -112px 0;
|
||||
}
|
||||
|
||||
.ui-icon-carat-2-n-s {
|
||||
background-position: -128px 0;
|
||||
}
|
||||
|
||||
.ui-icon-carat-2-e-w {
|
||||
background-position: -144px 0;
|
||||
}
|
||||
|
||||
.ui-icon-triangle-1-n {
|
||||
background-position: 0 -16px;
|
||||
}
|
||||
|
||||
.ui-icon-triangle-1-ne {
|
||||
background-position: -16px -16px;
|
||||
}
|
||||
|
||||
.ui-icon-triangle-1-e {
|
||||
background-position: -32px -16px;
|
||||
}
|
||||
|
||||
.ui-icon-triangle-1-se {
|
||||
background-position: -48px -16px;
|
||||
}
|
||||
|
||||
.ui-icon-triangle-1-s {
|
||||
background-position: -64px -16px;
|
||||
}
|
||||
|
||||
.ui-icon-triangle-1-sw {
|
||||
background-position: -80px -16px;
|
||||
}
|
||||
|
||||
.ui-icon-triangle-1-w {
|
||||
background-position: -96px -16px;
|
||||
}
|
||||
|
||||
.ui-icon-triangle-1-nw {
|
||||
background-position: -112px -16px;
|
||||
}
|
||||
|
||||
.ui-icon-triangle-2-n-s {
|
||||
background-position: -128px -16px;
|
||||
}
|
||||
|
||||
.ui-icon-triangle-2-e-w {
|
||||
background-position: -144px -16px;
|
||||
}
|
||||
|
||||
.ui-icon-arrow-1-n {
|
||||
background-position: 0 -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrow-1-ne {
|
||||
background-position: -16px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrow-1-e {
|
||||
background-position: -32px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrow-1-se {
|
||||
background-position: -48px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrow-1-s {
|
||||
background-position: -64px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrow-1-sw {
|
||||
background-position: -80px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrow-1-w {
|
||||
background-position: -96px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrow-1-nw {
|
||||
background-position: -112px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrow-2-n-s {
|
||||
background-position: -128px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrow-2-ne-sw {
|
||||
background-position: -144px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrow-2-e-w {
|
||||
background-position: -160px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrow-2-se-nw {
|
||||
background-position: -176px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowstop-1-n {
|
||||
background-position: -192px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowstop-1-e {
|
||||
background-position: -208px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowstop-1-s {
|
||||
background-position: -224px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowstop-1-w {
|
||||
background-position: -240px -32px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthick-1-n {
|
||||
background-position: 0 -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthick-1-ne {
|
||||
background-position: -16px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthick-1-e {
|
||||
background-position: -32px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthick-1-se {
|
||||
background-position: -48px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthick-1-s {
|
||||
background-position: -64px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthick-1-sw {
|
||||
background-position: -80px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthick-1-w {
|
||||
background-position: -96px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthick-1-nw {
|
||||
background-position: -112px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthick-2-n-s {
|
||||
background-position: -128px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthick-2-ne-sw {
|
||||
background-position: -144px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthick-2-e-w {
|
||||
background-position: -160px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthick-2-se-nw {
|
||||
background-position: -176px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthickstop-1-n {
|
||||
background-position: -192px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthickstop-1-e {
|
||||
background-position: -208px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthickstop-1-s {
|
||||
background-position: -224px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowthickstop-1-w {
|
||||
background-position: -240px -48px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowreturnthick-1-w {
|
||||
background-position: 0 -64px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowreturnthick-1-n {
|
||||
background-position: -16px -64px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowreturnthick-1-e {
|
||||
background-position: -32px -64px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowreturnthick-1-s {
|
||||
background-position: -48px -64px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowreturn-1-w {
|
||||
background-position: -64px -64px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowreturn-1-n {
|
||||
background-position: -80px -64px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowreturn-1-e {
|
||||
background-position: -96px -64px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowreturn-1-s {
|
||||
background-position: -112px -64px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowrefresh-1-w {
|
||||
background-position: -128px -64px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowrefresh-1-n {
|
||||
background-position: -144px -64px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowrefresh-1-e {
|
||||
background-position: -160px -64px;
|
||||
}
|
||||
|
||||
.ui-icon-arrowrefresh-1-s {
|
||||
background-position: -176px -64px;
|
||||
}
|
||||
|
||||
.ui-icon-arrow-4 {
|
||||
background-position: 0 -80px;
|
||||
}
|
||||
|
||||
.ui-icon-arrow-4-diag {
|
||||
background-position: -16px -80px;
|
||||
}
|
||||
|
||||
.ui-icon-extlink {
|
||||
background-position: -32px -80px;
|
||||
}
|
||||
|
||||
.ui-icon-newwin {
|
||||
background-position: -48px -80px;
|
||||
}
|
||||
|
||||
.ui-icon-refresh {
|
||||
background-position: -64px -80px;
|
||||
}
|
||||
|
||||
.ui-icon-shuffle {
|
||||
background-position: -80px -80px;
|
||||
}
|
||||
|
||||
.ui-icon-transfer-e-w {
|
||||
background-position: -96px -80px;
|
||||
}
|
||||
|
||||
.ui-icon-transferthick-e-w {
|
||||
background-position: -112px -80px;
|
||||
}
|
||||
|
||||
.ui-icon-folder-collapsed {
|
||||
background-position: 0 -96px;
|
||||
}
|
||||
|
||||
.ui-icon-folder-open {
|
||||
background-position: -16px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-document {
|
||||
background-position: -32px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-document-b {
|
||||
background-position: -48px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-note {
|
||||
background-position: -64px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-mail-closed {
|
||||
background-position: -80px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-mail-open {
|
||||
background-position: -96px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-suitcase {
|
||||
background-position: -112px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-comment {
|
||||
background-position: -128px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-person {
|
||||
background-position: -144px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-print {
|
||||
background-position: -160px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-trash {
|
||||
background-position: -176px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-locked {
|
||||
background-position: -192px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-unlocked {
|
||||
background-position: -208px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-bookmark {
|
||||
background-position: -224px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-tag {
|
||||
background-position: -240px -96px;
|
||||
}
|
||||
|
||||
.ui-icon-home {
|
||||
background-position: 0 -112px;
|
||||
}
|
||||
|
||||
.ui-icon-flag {
|
||||
background-position: -16px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-calendar {
|
||||
background-position: -32px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-cart {
|
||||
background-position: -48px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-pencil {
|
||||
background-position: -64px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-clock {
|
||||
background-position: -80px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-disk {
|
||||
background-position: -96px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-calculator {
|
||||
background-position: -112px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-zoomin {
|
||||
background-position: -128px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-zoomout {
|
||||
background-position: -144px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-search {
|
||||
background-position: -160px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-wrench {
|
||||
background-position: -176px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-gear {
|
||||
background-position: -192px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-heart {
|
||||
background-position: -208px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-star {
|
||||
background-position: -224px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-link {
|
||||
background-position: -240px -112px;
|
||||
}
|
||||
|
||||
.ui-icon-cancel {
|
||||
background-position: 0 -128px;
|
||||
}
|
||||
|
||||
.ui-icon-plus {
|
||||
background-position: -16px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-plusthick {
|
||||
background-position: -32px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-minus {
|
||||
background-position: -48px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-minusthick {
|
||||
background-position: -64px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-close {
|
||||
background-position: -80px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-closethick {
|
||||
background-position: -96px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-key {
|
||||
background-position: -112px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-lightbulb {
|
||||
background-position: -128px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-scissors {
|
||||
background-position: -144px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-clipboard {
|
||||
background-position: -160px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-copy {
|
||||
background-position: -176px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-contact {
|
||||
background-position: -192px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-image {
|
||||
background-position: -208px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-video {
|
||||
background-position: -224px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-script {
|
||||
background-position: -240px -128px;
|
||||
}
|
||||
|
||||
.ui-icon-alert {
|
||||
background-position: 0 -144px;
|
||||
}
|
||||
|
||||
.ui-icon-info {
|
||||
background-position: -16px -144px;
|
||||
}
|
||||
|
||||
.ui-icon-notice {
|
||||
background-position: -32px -144px;
|
||||
}
|
||||
|
||||
.ui-icon-help {
|
||||
background-position: -48px -144px;
|
||||
}
|
||||
|
||||
.ui-icon-check {
|
||||
background-position: -64px -144px;
|
||||
}
|
||||
|
||||
.ui-icon-bullet {
|
||||
background-position: -80px -144px;
|
||||
}
|
||||
|
||||
.ui-icon-radio-off {
|
||||
background-position: -96px -144px;
|
||||
}
|
||||
|
||||
.ui-icon-radio-on {
|
||||
background-position: -112px -144px;
|
||||
}
|
||||
|
||||
.ui-icon-pin-w {
|
||||
background-position: -128px -144px;
|
||||
}
|
||||
|
||||
.ui-icon-pin-s {
|
||||
background-position: -144px -144px;
|
||||
}
|
||||
|
||||
.ui-icon-play {
|
||||
background-position: 0 -160px;
|
||||
}
|
||||
|
||||
.ui-icon-pause {
|
||||
background-position: -16px -160px;
|
||||
}
|
||||
|
||||
.ui-icon-seek-next {
|
||||
background-position: -32px -160px;
|
||||
}
|
||||
|
||||
.ui-icon-seek-prev {
|
||||
background-position: -48px -160px;
|
||||
}
|
||||
|
||||
.ui-icon-seek-end {
|
||||
background-position: -64px -160px;
|
||||
}
|
||||
|
||||
.ui-icon-seek-first {
|
||||
background-position: -80px -160px;
|
||||
}
|
||||
|
||||
.ui-icon-stop {
|
||||
background-position: -96px -160px;
|
||||
}
|
||||
|
||||
.ui-icon-eject {
|
||||
background-position: -112px -160px;
|
||||
}
|
||||
|
||||
.ui-icon-volume-off {
|
||||
background-position: -128px -160px;
|
||||
}
|
||||
|
||||
.ui-icon-volume-on {
|
||||
background-position: -144px -160px;
|
||||
}
|
||||
|
||||
.ui-icon-power {
|
||||
background-position: 0 -176px;
|
||||
}
|
||||
|
||||
.ui-icon-signal-diag {
|
||||
background-position: -16px -176px;
|
||||
}
|
||||
|
||||
.ui-icon-signal {
|
||||
background-position: -32px -176px;
|
||||
}
|
||||
|
||||
.ui-icon-battery-0 {
|
||||
background-position: -48px -176px;
|
||||
}
|
||||
|
||||
.ui-icon-battery-1 {
|
||||
background-position: -64px -176px;
|
||||
}
|
||||
|
||||
.ui-icon-battery-2 {
|
||||
background-position: -80px -176px;
|
||||
}
|
||||
|
||||
.ui-icon-battery-3 {
|
||||
background-position: -96px -176px;
|
||||
}
|
||||
|
||||
.ui-icon-circle-plus {
|
||||
background-position: 0 -192px;
|
||||
}
|
||||
|
||||
.ui-icon-circle-minus {
|
||||
background-position: -16px -192px;
|
||||
}
|
||||
|
||||
.ui-icon-circle-close {
|
||||
background-position: -32px -192px;
|
||||
}
|
||||
|
||||
.ui-icon-circle-triangle-e {
|
||||
background-position: -48px -192px;
|
||||
}
|
||||
|
||||
.ui-icon-circle-triangle-s {
|
||||
background-position: -64px -192px;
|
||||
}
|
||||
|
||||
.ui-icon-circle-triangle-w {
|
||||
background-position: -80px -192px;
|
||||
}
|
||||
|
||||
.ui-icon-circle-triangle-n {
|
||||
background-position: -96px -192px;
|
||||
}
|
||||
|
||||
.ui-icon-circle-arrow-e {
|
||||
background-position: -112px -192px;
|
||||
}
|
||||
|
||||
.ui-icon-circle-arrow-s {
|
||||
background-position: -128px -192px;
|
||||
}
|
||||
|
||||
.ui-icon-circle-arrow-w {
|
||||
background-position: -144px -192px;
|
||||
}
|
||||
|
||||
.ui-icon-circle-arrow-n {
|
||||
background-position: -160px -192px;
|
||||
}
|
||||
|
||||
.ui-icon-circle-zoomin {
|
||||
background-position: -176px -192px;
|
||||
}
|
||||
|
||||
.ui-icon-circle-zoomout {
|
||||
background-position: -192px -192px;
|
||||
}
|
||||
|
||||
.ui-icon-circle-check {
|
||||
background-position: -208px -192px;
|
||||
}
|
||||
|
||||
.ui-icon-circlesmall-plus {
|
||||
background-position: 0 -208px;
|
||||
}
|
||||
|
||||
.ui-icon-circlesmall-minus {
|
||||
background-position: -16px -208px;
|
||||
}
|
||||
|
||||
.ui-icon-circlesmall-close {
|
||||
background-position: -32px -208px;
|
||||
}
|
||||
|
||||
.ui-icon-squaresmall-plus {
|
||||
background-position: -48px -208px;
|
||||
}
|
||||
|
||||
.ui-icon-squaresmall-minus {
|
||||
background-position: -64px -208px;
|
||||
}
|
||||
|
||||
.ui-icon-squaresmall-close {
|
||||
background-position: -80px -208px;
|
||||
}
|
||||
|
||||
.ui-icon-grip-dotted-vertical {
|
||||
background-position: 0 -224px;
|
||||
}
|
||||
|
||||
.ui-icon-grip-dotted-horizontal {
|
||||
background-position: -16px -224px;
|
||||
}
|
||||
|
||||
.ui-icon-grip-solid-vertical {
|
||||
background-position: -32px -224px;
|
||||
}
|
||||
|
||||
.ui-icon-grip-solid-horizontal {
|
||||
background-position: -48px -224px;
|
||||
}
|
||||
|
||||
.ui-icon-gripsmall-diagonal-se {
|
||||
background-position: -64px -224px;
|
||||
}
|
||||
|
||||
.ui-icon-grip-diagonal-se {
|
||||
background-position: -80px -224px;
|
||||
}
|
||||
|
||||
.ui-icon-carat-1-n {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion
|
||||
*/
|
||||
|
||||
.ui-accordion {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ui-accordion .ui-accordion-header {
|
||||
text-transform: uppercase;
|
||||
border: solid 1px #ccc;
|
||||
}
|
||||
|
||||
.ui-accordion h3.ui-accordion-header,
|
||||
#block-system-main h3.ui-accordion-header {
|
||||
margin: 0.625rem 0;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
#block-system-main .ui-accordion h3.ui-state-active,
|
||||
.ui-accordion h3.ui-state-active {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui-accordion .ui-accordion-header a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui-accordion .ui-accordion-content {
|
||||
padding: 1em 2.2em;
|
||||
border: solid 1px #ccc;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tabs
|
||||
*/
|
||||
|
||||
.ui-tabs {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-tabs .ui-tabs-nav {
|
||||
margin: 0;
|
||||
padding: 0.3125rem 0.625rem 0.25rem;
|
||||
border-bottom: solid 1px #ccc;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.ui-tabs .ui-tabs-nav li {
|
||||
margin: 0;
|
||||
padding: 0 1em 0 0.625rem; /* LTR */
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] .ui-tabs .ui-tabs-nav li {
|
||||
padding: 0 0.625rem 0 1em;
|
||||
}
|
||||
|
||||
.ui-tabs .ui-tabs-nav li a {
|
||||
float: none;
|
||||
padding: 0 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
|
||||
color: #fff;
|
||||
background: #666;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Overlays
|
||||
*/
|
||||
|
||||
.ui-widget-overlay {
|
||||
z-index: calc(var(--jui-dialog-z-index) - 1);
|
||||
opacity: 0.7;
|
||||
background: var(--color-text);
|
||||
}
|
||||
|
||||
/**
|
||||
* Slider
|
||||
*/
|
||||
|
||||
.ui-slider {
|
||||
border: solid 1px #ccc;
|
||||
}
|
||||
|
||||
.ui-slider .ui-slider-range {
|
||||
background: #e4e4e4;
|
||||
}
|
||||
|
||||
.ui-slider .ui-slider-handle {
|
||||
border: 1px solid #e4e4e4;
|
||||
border-right-color: #d2d2d2;
|
||||
border-bottom: 1px solid #b4b4b4;
|
||||
border-left-color: #d2d2d2;
|
||||
border-radius: 0.25rem;
|
||||
background-color: #e4e4e4;
|
||||
}
|
||||
|
||||
.ui-slider a.ui-state-active,
|
||||
.ui-slider .ui-slider-handle:active {
|
||||
color: #fff;
|
||||
border: solid 1px #555;
|
||||
background: #666;
|
||||
}
|
||||
|
||||
/**
|
||||
* Progress Bar
|
||||
*/
|
||||
|
||||
.ui-progressbar {
|
||||
height: 1.4em;
|
||||
background: #e4e4e4;
|
||||
}
|
||||
|
||||
.ui-progressbar .ui-progressbar-value {
|
||||
height: 1.5em;
|
||||
background: var(--color-blue-600) url(../../../../misc/progress.gif);
|
||||
}
|
||||
|
||||
/**
|
||||
* Autocomplete
|
||||
*/
|
||||
|
||||
.ui-autocomplete {
|
||||
color: var(--jui-dropdown-fg-color);
|
||||
border: var(--input-border-size) solid var(--jui-dropdown-border-color);
|
||||
border-top: 0;
|
||||
border-radius: 0 0 var(--input-border-radius-size) var(--input-border-radius-size);
|
||||
background: var(--jui-dropdown-bg-color);
|
||||
box-shadow: 0 0.125rem 0.25rem var(--jui-dropdown-shadow-color);
|
||||
}
|
||||
|
||||
/* Suggestion list */
|
||||
|
||||
.ui-autocomplete .ui-menu-item {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.ui-autocomplete .ui-menu-item-wrapper {
|
||||
display: block;
|
||||
padding: 0.75rem 0.9375rem;
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.ui-autocomplete .ui-menu-item-wrapper:focus,
|
||||
.ui-autocomplete .ui-menu-item-wrapper:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
|
||||
margin: 0;
|
||||
color: var(--jui-dropdown--active-fg-color);
|
||||
background: var(--jui-dropdown--active-bg-color);
|
||||
}
|
||||
|
||||
.ui-autocomplete .ui-menu-item.ui-state-focus,
|
||||
.autocomplete .ui-menu-item.ui-state-hover {
|
||||
margin: 0;
|
||||
background: var(--color-blue-600);
|
||||
}
|
||||
|
||||
.ui-autocomplete .ui-state-focus a,
|
||||
.autocomplete .ui-state-hover a {
|
||||
color: #fff;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user