first commit
This commit is contained in:
@@ -0,0 +1,217 @@
|
||||
# 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: classy
|
||||
description: 'A clean, accessible, and powerful Drupal administration theme.'
|
||||
alt text: 'Screenshot of Claro, Drupal administration theme.'
|
||||
package: Core
|
||||
version: VERSION
|
||||
experimental: true
|
||||
core: 8.x
|
||||
libraries:
|
||||
- claro/global-styling
|
||||
libraries-override:
|
||||
system/base:
|
||||
css:
|
||||
component:
|
||||
/core/themes/stable/css/system/components/ajax-progress.module.css: css/components/ajax-progress.module.css
|
||||
/core/themes/stable/css/system/components/autocomplete-loading.module.css: css/components/autocomplete-loading.module.css
|
||||
/core/themes/stable/css/system/components/system-status-counter.css: css/components/system-status-counter.css
|
||||
/core/themes/stable/css/system/components/system-status-report-counters.css: css/components/system-status-report-counters.css
|
||||
/core/themes/stable/css/system/components/system-status-report-general-info.css: css/components/system-status-report-general-info.css
|
||||
/core/themes/stable/css/system/components/tabledrag.module.css: css/components/tabledrag.css
|
||||
|
||||
system/admin:
|
||||
css:
|
||||
theme:
|
||||
/core/themes/stable/css/system/system.admin.css: false
|
||||
|
||||
core/drupal.dropbutton:
|
||||
css:
|
||||
component:
|
||||
/core/themes/stable/css/core/dropbutton/dropbutton.css: css/components/dropbutton.css
|
||||
|
||||
core/drupal.tabledrag:
|
||||
js:
|
||||
misc/tabledrag.js: js/tabledrag.js
|
||||
|
||||
core/drupal.vertical-tabs:
|
||||
css:
|
||||
component:
|
||||
/core/themes/stable/css/core/vertical-tabs.css: false
|
||||
js:
|
||||
misc/vertical-tabs.js: js/vertical-tabs.js
|
||||
|
||||
core/jquery.ui:
|
||||
css:
|
||||
theme:
|
||||
assets/vendor/jquery.ui/themes/base/theme.css: false
|
||||
|
||||
core/jquery.ui.dialog:
|
||||
css:
|
||||
component:
|
||||
assets/vendor/jquery.ui/themes/base/dialog.css: false
|
||||
|
||||
classy/dialog: claro/claro.drupal.dialog
|
||||
|
||||
classy/base:
|
||||
css:
|
||||
component:
|
||||
css/components/action-links.css: false
|
||||
css/components/breadcrumb.css: false
|
||||
css/components/button.css: false
|
||||
css/components/collapse-processed.css: false
|
||||
css/components/container-inline.css: css/classy/components/container-inline.css
|
||||
css/components/details.css: false
|
||||
css/components/dropbutton.css: false
|
||||
css/components/exposed-filters.css: css/classy/components/exposed-filters.css
|
||||
css/components/field.css: css/classy/components/field.css
|
||||
css/components/form.css: false
|
||||
css/components/icons.css: css/classy/components/icons.css
|
||||
css/components/inline-form.css: css/classy/components/inline-form.css
|
||||
css/components/item-list.css: css/classy/components/item-list.css
|
||||
css/components/link.css: css/classy/components/link.css
|
||||
css/components/links.css: css/classy/components/links.css
|
||||
css/components/menu.css: css/classy/components/menu.css
|
||||
css/components/more-link.css: css/classy/components/more-link.css
|
||||
css/components/pager.css: false
|
||||
css/components/tabledrag.css: false
|
||||
css/components/tableselect.css: css/components/tableselect.css
|
||||
css/components/tablesort.css: css/classy/components/tablesort.css
|
||||
css/components/tabs.css: false
|
||||
css/components/textarea.css: css/classy/components/textarea.css
|
||||
css/components/ui-dialog.css: css/classy/components/ui-dialog.css
|
||||
|
||||
classy/book-navigation: claro/classy.book-navigation
|
||||
|
||||
classy/dropbutton:
|
||||
css:
|
||||
component:
|
||||
css/components/dropbutton.css: false
|
||||
|
||||
classy/file: claro/classy.file
|
||||
|
||||
classy/forum: claro/classy.forum
|
||||
|
||||
classy/image-widget: claro/image-widget
|
||||
|
||||
classy/indented: claro/classy.indented
|
||||
|
||||
classy/media_embed_ckeditor_theme: claro/classy.media_embed_ckeditor_theme
|
||||
|
||||
classy/media_embed_error: claro/classy.media_embed_error
|
||||
|
||||
classy/messages:
|
||||
css:
|
||||
component:
|
||||
css/components/messages.css: false
|
||||
|
||||
classy/node: claro/classy.node
|
||||
|
||||
classy/progress: claro/progress
|
||||
|
||||
classy/search-results: claro/classy.search-results
|
||||
|
||||
classy/user: false
|
||||
|
||||
user/drupal.user: claro/form.password-confirm
|
||||
|
||||
field_ui/drupal.field_ui:
|
||||
css:
|
||||
theme:
|
||||
/core/themes/stable/css/field_ui/field_ui.admin.css: css/theme/field-ui.admin.css
|
||||
|
||||
filter/drupal.filter.admin:
|
||||
css:
|
||||
theme:
|
||||
/core/themes/stable/css/filter/filter.admin.css: css/theme/filter.theme.css
|
||||
|
||||
filter/drupal.filter:
|
||||
css:
|
||||
theme:
|
||||
/core/themes/stable/css/filter/filter.admin.css: css/theme/filter.theme.css
|
||||
|
||||
views_ui/admin.styling:
|
||||
css:
|
||||
theme:
|
||||
/core/themes/stable/css/views_ui/views_ui.admin.theme.css: css/theme/views_ui.admin.theme.css
|
||||
|
||||
# Drupal throws an IncompleteLibraryDefinitionException if a base theme
|
||||
# defined library is set to false in a subtheme's libraries-override. We use
|
||||
# 'claro/empty' for working around this behavior.
|
||||
# @see https://www.drupal.org/node/3098375
|
||||
classy/media_library: claro/empty
|
||||
|
||||
libraries-extend:
|
||||
ckeditor/drupal.ckeditor:
|
||||
- claro/ckeditor-editor
|
||||
core/ckeditor:
|
||||
- claro/ckeditor-dialog
|
||||
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.vertical-tabs:
|
||||
- claro/vertical-tabs
|
||||
core/jquery.ui:
|
||||
- claro/claro.jquery.ui
|
||||
file/drupal.file:
|
||||
- claro/file
|
||||
system/admin:
|
||||
- claro/system.admin
|
||||
core/drupal.autocomplete:
|
||||
- claro/autocomplete
|
||||
tour/tour-styling:
|
||||
- claro/tour-styling
|
||||
shortcut/drupal.shortcut:
|
||||
- claro/drupal.shortcut
|
||||
core/drupal.ajax:
|
||||
- claro/ajax
|
||||
views/views.module:
|
||||
- claro/views
|
||||
media/media_embed_ckeditor_theme:
|
||||
- claro/classy.media_embed_ckeditor_theme
|
||||
media_library/view:
|
||||
- claro/media_library.theme
|
||||
media_library/widget:
|
||||
- claro/media_library.theme
|
||||
|
||||
quickedit_stylesheets:
|
||||
- css/components/quickedit.css
|
||||
ckeditor_stylesheets:
|
||||
- css/base/elements.css
|
||||
- css/base/typography.css
|
||||
- css/theme/ckeditor-frame.css
|
||||
- css/classy/components/media-embed-error.css
|
||||
|
||||
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
|
||||
@@ -0,0 +1,316 @@
|
||||
global-styling:
|
||||
version: VERSION
|
||||
css:
|
||||
base:
|
||||
css/base/elements.css: {}
|
||||
css/base/typography.css: {}
|
||||
css/base/print.css: {}
|
||||
component:
|
||||
css/components/accordion.css: {}
|
||||
css/components/action-link.css: {}
|
||||
css/components/content-header.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--checkbox-radio--ie.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/tablesort-indicator.css: {}
|
||||
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: {}
|
||||
css/components/tabs.css: {}
|
||||
css/components/views-ui.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).
|
||||
# Modernizr is used for recognizing whether user is using a touch device or
|
||||
# not. This allows conditionally rendering small variation of the control
|
||||
# elements on non-touch devices. In some cases, such as when rendering
|
||||
# links, it is hard recognize when Modernizr should be attached, therefore
|
||||
# it has to be always attached.
|
||||
- core/modernizr
|
||||
|
||||
# Drupal throws an IncompleteLibraryDefinitionException if a base theme defined
|
||||
# library is set to false in a subtheme's libraries-override. This empty
|
||||
# library is used as a workaround.
|
||||
# @see https://www.drupal.org/node/3098375
|
||||
empty:
|
||||
version: VERSION
|
||||
css: {}
|
||||
|
||||
node-form:
|
||||
version: VERSION
|
||||
css:
|
||||
layout:
|
||||
css/layout/node-add.css: {}
|
||||
dependencies:
|
||||
- node/form
|
||||
|
||||
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/matchmedia
|
||||
- core/jquery
|
||||
- core/drupal
|
||||
- core/jquery.once
|
||||
- core/drupal.debounce
|
||||
- core/collapse
|
||||
|
||||
drupal.responsive-detail:
|
||||
version: VERSION
|
||||
js:
|
||||
js/responsive-details.js: {}
|
||||
dependencies:
|
||||
- core/matchmedia
|
||||
- core/matchmedia.addListener
|
||||
- core/jquery
|
||||
- core/jquery.once
|
||||
- core/collapse
|
||||
|
||||
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: {}
|
||||
|
||||
ckeditor-dialog:
|
||||
version: VERSION
|
||||
css:
|
||||
theme:
|
||||
css/theme/ckeditor-dialog.css: {}
|
||||
|
||||
ckeditor-editor:
|
||||
version: VERSION
|
||||
css:
|
||||
theme:
|
||||
css/theme/ckeditor-editor.css: {}
|
||||
|
||||
tour-styling:
|
||||
version: VERSION
|
||||
css:
|
||||
theme:
|
||||
css/components/tour.theme.css: {}
|
||||
|
||||
media-form:
|
||||
version: VERSION
|
||||
css:
|
||||
layout:
|
||||
css/components/media.css: {}
|
||||
dependencies:
|
||||
- media/form
|
||||
|
||||
image-widget:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/layout/image-widget.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 }
|
||||
css/components/system-admin--status-report.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
|
||||
|
||||
dropbutton:
|
||||
version: VERSION
|
||||
js:
|
||||
js/dropbutton.js: {}
|
||||
dependencies:
|
||||
- core/drupal
|
||||
|
||||
autocomplete:
|
||||
version: VERSION
|
||||
js:
|
||||
js/autocomplete.js: {}
|
||||
|
||||
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.js: {}
|
||||
dependencies:
|
||||
- core/jquery
|
||||
- core/drupal
|
||||
- core/jquery.once
|
||||
- claro/global-styling
|
||||
|
||||
views:
|
||||
css:
|
||||
component:
|
||||
css/components/views-exposed-form.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: {}
|
||||
dependencies:
|
||||
- claro/global-styling
|
||||
|
||||
file:
|
||||
css:
|
||||
component:
|
||||
css/components/file.css: {}
|
||||
|
||||
media_library.theme:
|
||||
version: VERSION
|
||||
css:
|
||||
theme:
|
||||
css/theme/media-library.css: {}
|
||||
|
||||
progress:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/components/progress.css: {}
|
||||
|
||||
classy.book-navigation:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/classy/components/book-navigation.css: {}
|
||||
|
||||
classy.file:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/classy/components/file.css: { weight: -10 }
|
||||
|
||||
classy.forum:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/classy/components/forum.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: {}
|
||||
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
|
||||
provider: system
|
||||
label_display: '0'
|
||||
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'
|
||||
provider: system
|
||||
label_display: '0'
|
||||
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
|
||||
provider: help
|
||||
label_display: '0'
|
||||
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'
|
||||
provider: core
|
||||
label_display: '0'
|
||||
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'
|
||||
provider: system
|
||||
label_display: '0'
|
||||
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'
|
||||
provider: core
|
||||
label_display: '0'
|
||||
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'
|
||||
provider: core
|
||||
label_display: '0'
|
||||
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'
|
||||
provider: core
|
||||
label_display: '0'
|
||||
primary: false
|
||||
secondary: true
|
||||
visibility: { }
|
||||
@@ -0,0 +1,5 @@
|
||||
# Schema for the configuration files of the Claro theme.
|
||||
|
||||
claro.settings:
|
||||
type: theme_settings
|
||||
label: 'Claro settings'
|
||||
@@ -0,0 +1,327 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* Generic elements.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: BlinkMacSystemFont
|
||||
,
|
||||
-apple-system
|
||||
,
|
||||
"Segoe UI"
|
||||
,
|
||||
Roboto
|
||||
,
|
||||
Oxygen-Sans
|
||||
,
|
||||
Ubuntu
|
||||
,
|
||||
Cantarell
|
||||
,
|
||||
"Helvetica Neue"
|
||||
,
|
||||
sans-serif;
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #222330;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
a,
|
||||
.link {
|
||||
color: #003cc5;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
.link:hover,
|
||||
.link:focus {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
.link:hover {
|
||||
color: #0036b1;
|
||||
}
|
||||
|
||||
a:active,
|
||||
.link:active {
|
||||
color: #00339a;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
margin: 1rem 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: rgba(142, 146, 156, 0.5);
|
||||
}
|
||||
|
||||
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: 1rem 0 0.75rem;
|
||||
font-size: 2.027rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h2,
|
||||
.heading-b {
|
||||
margin: 1rem 0 0.75rem;
|
||||
font-size: 1.802rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h3,
|
||||
.heading-c {
|
||||
margin: 1rem 0 0.75rem;
|
||||
font-size: 1.602rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h4,
|
||||
.heading-d {
|
||||
margin: 1rem 0 0.75rem;
|
||||
font-size: 1.424rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h5,
|
||||
.heading-e {
|
||||
margin: 1rem 0 0.75rem;
|
||||
font-size: 1.266rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h6,
|
||||
.heading-f {
|
||||
margin: 1rem 0 0.75rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
dl dd,
|
||||
dl dl {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 20px; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] dl dd,
|
||||
[dir="rtl"] dl dl {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
u,
|
||||
ins {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
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: 0.25em 0 0.25em 1.5em; /* LTR */
|
||||
padding-left: 0;
|
||||
list-style-type: disc;
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] ul {
|
||||
margin-right: 1.5em;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/* This is required to win over specificity of [dir="rtl"] ul */
|
||||
|
||||
[dir="rtl"] .messages__list {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin: 0.25em 0 0.25em 2em; /* LTR */
|
||||
padding: 0;
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
[dir="rtl"] ol {
|
||||
margin-right: 2em;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix duplicate border caused by normalize.css adding border-bottom without
|
||||
* removing the text-decoration.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0.5em 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
details {
|
||||
line-height: 1.295em;
|
||||
}
|
||||
|
||||
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.
|
||||
*
|
||||
* @todo https://www.drupal.org/project/claro/issues/3048785 :focus selector is
|
||||
* active for non-interactive elements in Internet Explorer 11.
|
||||
*/
|
||||
|
||||
.page-wrapper *:focus,
|
||||
.ui-dialog *:focus {
|
||||
outline: 2px
|
||||
dotted
|
||||
transparent;
|
||||
box-shadow: 0
|
||||
0
|
||||
0
|
||||
2px
|
||||
#fff
|
||||
,
|
||||
0
|
||||
0
|
||||
0
|
||||
5px
|
||||
#26a769;
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
/**
|
||||
* Generic elements.
|
||||
*/
|
||||
|
||||
@import "./variables.pcss.css";
|
||||
|
||||
html {
|
||||
font-family: var(--font-family);
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
body {
|
||||
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-bottom: 10px;
|
||||
margin-left: 20px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] dl dd,
|
||||
[dir="rtl"] dl dl {
|
||||
margin-right: 20px;
|
||||
}
|
||||
blockquote {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
address {
|
||||
font-style: italic;
|
||||
}
|
||||
u,
|
||||
ins {
|
||||
text-decoration: none;
|
||||
}
|
||||
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: 0.25em 0 0.25em 1.5em; /* LTR */
|
||||
padding-left: 0;
|
||||
list-style-type: disc;
|
||||
list-style-image: none;
|
||||
}
|
||||
[dir="rtl"] ul {
|
||||
margin-right: 1.5em;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
/* This is required to win over specificity of [dir="rtl"] ul */
|
||||
[dir="rtl"] .messages__list {
|
||||
margin-right: 0;
|
||||
}
|
||||
ol {
|
||||
margin: 0.25em 0 0.25em 2em; /* LTR */
|
||||
padding: 0;
|
||||
list-style-type: decimal;
|
||||
}
|
||||
[dir="rtl"] ol {
|
||||
margin-right: 2em;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix duplicate border caused by normalize.css adding border-bottom without
|
||||
* removing the text-decoration.
|
||||
*/
|
||||
abbr[title] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
pre {
|
||||
margin: 0.5em 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
details {
|
||||
line-height: 1.295em;
|
||||
}
|
||||
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.
|
||||
*
|
||||
* @todo https://www.drupal.org/project/claro/issues/3048785 :focus selector is
|
||||
* active for non-interactive elements in Internet Explorer 11.
|
||||
*/
|
||||
.page-wrapper *:focus,
|
||||
.ui-dialog *:focus {
|
||||
outline: var(--focus-outline);
|
||||
box-shadow: var(--focus-box-shadow);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
@media print {
|
||||
* {
|
||||
color: #000 !important; /* Black prints faster: h5bp.com/s */
|
||||
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; /* h5bp.com/t */
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
@media print {
|
||||
* {
|
||||
color: #000 !important; /* Black prints faster: h5bp.com/s */
|
||||
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; /* h5bp.com/t */
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
/**
|
||||
* Reusable utility classes that apply vertical spacing consistency and inline
|
||||
* with the base line height of Claro.
|
||||
*/
|
||||
.leader {
|
||||
margin-top: 20px;
|
||||
margin-top: 1.538rem;
|
||||
}
|
||||
.leader-double {
|
||||
margin-top: 40px;
|
||||
margin-top: 3.076rem;
|
||||
}
|
||||
.leader-triple {
|
||||
margin-top: 60px;
|
||||
margin-top: 4.614rem;
|
||||
}
|
||||
.leader-quadruple {
|
||||
margin-top: 80px;
|
||||
margin-top: 6.152rem;
|
||||
}
|
||||
.trailer {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.538rem;
|
||||
}
|
||||
.trailer-double {
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 3.076rem;
|
||||
}
|
||||
.trailer-triple {
|
||||
margin-bottom: 60px;
|
||||
margin-bottom: 4.614rem;
|
||||
}
|
||||
.trailer-quadruple {
|
||||
margin-bottom: 80px;
|
||||
margin-bottom: 6.152rem;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* Reusable utility classes that apply vertical spacing consistency and inline
|
||||
* with the base line height of Claro.
|
||||
*/
|
||||
.leader {
|
||||
margin-top: 20px;
|
||||
margin-top: 1.538rem;
|
||||
}
|
||||
.leader-double {
|
||||
margin-top: 40px;
|
||||
margin-top: 3.076rem;
|
||||
}
|
||||
.leader-triple {
|
||||
margin-top: 60px;
|
||||
margin-top: 4.614rem;
|
||||
}
|
||||
.leader-quadruple {
|
||||
margin-top: 80px;
|
||||
margin-top: 6.152rem;
|
||||
}
|
||||
.trailer {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.538rem;
|
||||
}
|
||||
.trailer-double {
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 3.076rem;
|
||||
}
|
||||
.trailer-triple {
|
||||
margin-bottom: 60px;
|
||||
margin-bottom: 4.614rem;
|
||||
}
|
||||
.trailer-quadruple {
|
||||
margin-bottom: 80px;
|
||||
margin-bottom: 6.152rem;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
--color-absolutezero: #003cc5;
|
||||
--color-white: #fff;
|
||||
--color-text: #222330;
|
||||
--color-text-light: var(--color-grayblue);
|
||||
--color-whitesmoke: #f3f4f9;
|
||||
--color-whitesmoke-light: #fafbfd;
|
||||
--color-whitesmoke-o-40: rgba(243, 244, 249, 0.4);
|
||||
/* Secondary. */
|
||||
--color-lightgray: #d4d4d8;
|
||||
--color-lightgray-o-80: rgba(212, 212, 218, 0.8);
|
||||
--color-grayblue: #8e929c;
|
||||
--color-oldsilver: #82828c;
|
||||
--color-davysgrey: #545560;
|
||||
--color-maximumred: #d72222;
|
||||
--color-sunglow: #ffd23f;
|
||||
--color-sunglow-shaded: #977405;
|
||||
--color-lightninggreen: #26a769;
|
||||
--color-focus: var(--color-lightninggreen);
|
||||
/* Variations. */
|
||||
--color-lightgray-hover: #c2c3ca; /* 5% darker than base. */
|
||||
--color-lightgray-active: #adaeb3; /* 10% darker than base. */
|
||||
--color-absolutezero-hover: #0036b1; /* 10% darker than base. */
|
||||
--color-absolutezero-active: #00339a; /* 20% darker than base. */
|
||||
--color-maximumred-hover: #c11f1f; /* 5% darker than base. */
|
||||
--color-maximumred-active: #ab1b1b; /* 10% darker than base. */
|
||||
--color-bgblue-hover: #f0f5fd; /* 5% darker than base. */
|
||||
--color-bgblue-active: #e6ecf8; /* 10% darker than base. */
|
||||
--color-bgred-hover: #fdf5f5; /* 5% darker than base. */
|
||||
--color-bgred-active: #fceded; /* 10% darker than base. */
|
||||
/*
|
||||
* 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: rgba(142, 146, 156, 0.5);
|
||||
/*
|
||||
* Typography.
|
||||
*/
|
||||
--font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
--line-height: 1.5;
|
||||
--line-height-heading: 1.3;
|
||||
--font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
|
||||
--font-size-h1: 2.027rem; /* ~32px */
|
||||
--font-size-h2: 1.802rem; /* ~29px */
|
||||
--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);
|
||||
/*
|
||||
* Inputs.
|
||||
*/
|
||||
--input-fg-color: var(--color-fg);
|
||||
--input-bg-color: var(--color-bg);
|
||||
--input-fg-color--description: var(--color-davysgrey);
|
||||
--input-fg-color--placeholder: var(--color-grayblue);
|
||||
--input-border-color: var(--color-grayblue);
|
||||
--input--hover-border-color: var(--color-text);
|
||||
--input--focus-border-color: var(--color-absolutezero);
|
||||
--input--focus-shadow-color: rgba(0, 74, 220, 0.3); /* Absolute zero with opacity. */
|
||||
--input--error-color: var(--color-maximumred);
|
||||
--input--error-border-color: var(--color-maximumred);
|
||||
--input--disabled-color: rgba(84, 85, 96, 0.6); /* Davy's grey with 0.6 opacity. */
|
||||
--input--disabled-fg-color: var(--color-oldsilver);
|
||||
--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--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-bg-color: rgba(243, 244, 249, 0.4);
|
||||
--details-border-color: rgba(216, 217, 224, 0.8);
|
||||
--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 rgba(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;
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
--button--focus-border-color: #5a8bed;
|
||||
--button-border-radius-size: var(--base-border-radius);
|
||||
--button-fg-color: var(--color-text);
|
||||
--button-bg-color: var(--color-lightgray);
|
||||
--button--hover-bg-color: var(--color-lightgray-hover);
|
||||
--button--active-bg-color: var(--color-lightgray-active);
|
||||
--button--disabled-bg-color: #ebebed;
|
||||
--button--disabled-fg-color: var(--color-grayblue);
|
||||
--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-lightgray);
|
||||
--button--disabled-fg-color--primary: var(--color-oldsilver);
|
||||
--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);
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/
|
||||
--jui-dropdown-fg-color: var(--color-davysgrey);
|
||||
--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: rgba(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */
|
||||
--jui-dropdown-shadow-color: rgba(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* 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-davysgrey);
|
||||
--progress-bar-description-font-size: var(--font-size-xs);
|
||||
--progress-track-border-color: var(--color-grayblue);
|
||||
--progress-track-bg-color: var(--color-lightgray);
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/
|
||||
--tabledrag-handle-icon-size: calc(17rem / 16); /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
--ajax-progress-margin-horizontal: var(--space-s);
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
--breadcrumb-height: 1.25rem;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
WHAT IS THIS DIRECTORY FOR?
|
||||
--------------------------------
|
||||
This directory is for CSS files previously inherited from the Classy theme.
|
||||
|
||||
WHY ARE CLASSY CSS FILES BEING COPIED HERE?
|
||||
-------------------------------------------
|
||||
Classy will be deprecated during the Drupal 9 lifecycle. To prepare for Classy's
|
||||
removal, CSS files that would otherwise be inherited from Classy are copied
|
||||
here.
|
||||
|
||||
CSS files that differ from the Classy versions should not be placed in this
|
||||
directory or any subdirectory.
|
||||
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* @file
|
||||
* Styling for the Book module.
|
||||
*/
|
||||
|
||||
.book-navigation .menu {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.book-navigation .book-pager {
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.book-pager__item {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
.book-pager__item--previous {
|
||||
width: 45%;
|
||||
text-align: left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .book-pager__item--previous {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
.book-pager__item--center {
|
||||
width: 8%;
|
||||
text-align: center;
|
||||
}
|
||||
.book-pager__item--next {
|
||||
float: right; /* LTR */
|
||||
width: 45%;
|
||||
text-align: right; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .book-pager__item--next {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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: ":";
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* @file
|
||||
* Styling for the Forum module.
|
||||
*/
|
||||
|
||||
.forum__description {
|
||||
margin: 0.5em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.forum__icon {
|
||||
float: left; /* LTR */
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 9px 0 0; /* LTR */
|
||||
background-image: url(../../../images/classy/icons/forum-icons.png);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
[dir="rtl"] .forum__icon {
|
||||
float: right;
|
||||
margin: 0 0 0 9px;
|
||||
}
|
||||
.forum__title {
|
||||
overflow: hidden;
|
||||
}
|
||||
.forum .indented {
|
||||
margin-left: 20px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .forum .indented {
|
||||
margin-right: 20px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.forum__topic-status--new {
|
||||
background-position: -24px 0;
|
||||
}
|
||||
.forum__topic-status--hot {
|
||||
background-position: -48px 0;
|
||||
}
|
||||
.forum__topic-status--hot-new {
|
||||
background-position: -72px 0;
|
||||
}
|
||||
.forum__topic-status--sticky {
|
||||
background-position: -96px 0;
|
||||
}
|
||||
.forum__topic-status--closed {
|
||||
background-position: -120px 0;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Basic styling for comment module.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Indent threaded comments.
|
||||
*/
|
||||
.indented {
|
||||
margin-left: 25px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .indented {
|
||||
margin-right: 25px;
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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,11 @@
|
||||
/**
|
||||
* @file
|
||||
* Table sort indicator.
|
||||
*/
|
||||
|
||||
th.is-active img {
|
||||
display: inline;
|
||||
}
|
||||
td.is-active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for Classy's modal windows.
|
||||
*/
|
||||
|
||||
.ui-dialog--narrow {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.ui-dialog--narrow {
|
||||
min-width: 95%;
|
||||
max-width: 95%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Accordion styles.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
.accordion {
|
||||
color: #222330;
|
||||
border: 1px solid rgba(216, 217, 224, 0.8);
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0
|
||||
2px
|
||||
4px
|
||||
rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.accordion__item {
|
||||
margin: 0 -1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.accordion__item:first-child {
|
||||
margin-top: -1px;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
.accordion__item + .accordion__item {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.accordion__item:last-child {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide JS summary from the details polyfill to make it consistent with native
|
||||
* details elements.
|
||||
*
|
||||
* @todo Consider removing this after https://www.drupal.org/node/2493957 has
|
||||
* been solved.
|
||||
*/
|
||||
|
||||
.accordion__item .claro-details__summary .summary {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* @file
|
||||
* Accordion styles.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.accordion {
|
||||
color: var(--color-text);
|
||||
border: var(--details-border-size) solid var(--details-border-color);
|
||||
border-radius: var(--details-accordion-border-size-radius);
|
||||
background-color: var(--color-white);
|
||||
box-shadow: var(--details-box-shadow);
|
||||
}
|
||||
|
||||
.accordion__item {
|
||||
margin: 0 -1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.accordion__item:first-child {
|
||||
margin-top: -1px;
|
||||
border-top-left-radius: var(--details-accordion-border-size-radius);
|
||||
border-top-right-radius: var(--details-accordion-border-size-radius);
|
||||
}
|
||||
|
||||
.accordion__item + .accordion__item {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.accordion__item:last-child {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: var(--details-accordion-border-size-radius);
|
||||
border-bottom-left-radius: var(--details-accordion-border-size-radius);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide JS summary from the details polyfill to make it consistent with native
|
||||
* details elements.
|
||||
*
|
||||
* @todo Consider removing this after https://www.drupal.org/node/2493957 has
|
||||
* been solved.
|
||||
*/
|
||||
.accordion__item .claro-details__summary .summary {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,498 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styles for action links.
|
||||
*
|
||||
* Contains Action link component and the action-links layout styles.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
* Action links layout.
|
||||
*/
|
||||
|
||||
.action-links,
|
||||
[dir="rtl"] .action-links {
|
||||
margin: 1.5rem 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.action-links__item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.action-links__item + .action-links__item > .action-link {
|
||||
margin-left: 0.75rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .action-links__item + .action-links__item > .action-link {
|
||||
margin-right: 0.75rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.action-links__item + .action-links__item > .action-link--small {
|
||||
margin-left: 0.5rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .action-links__item + .action-links__item > .action-link--small {
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* The action link component.
|
||||
*/
|
||||
|
||||
.action-link {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: #545560;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.5rem; /* Bigger line-height needed to prevent the icon from increasing the height */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Small variant. */
|
||||
|
||||
.no-touchevents .action-link--small {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.889rem;
|
||||
}
|
||||
|
||||
/* Extra small variant. */
|
||||
|
||||
.no-touchevents .action-link--extrasmall {
|
||||
padding: 0 0.5rem;
|
||||
font-size: 0.889rem;
|
||||
}
|
||||
|
||||
.action-link + .action-link {
|
||||
margin-left: 0.75rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .action-link + .action-link {
|
||||
margin-right: 0.75rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.no-touchevents .action-link--small + .action-link--small,
|
||||
.no-touchevents .action-link--extrasmall + .action-link--extrasmall {
|
||||
margin-left: 0.5rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .no-touchevents .action-link--small + .action-link--small,
|
||||
[dir="rtl"] .no-touchevents .action-link--extrasmall + .action-link--extrasmall {
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Action links inside form-actions.
|
||||
*
|
||||
* Add the same margin for action-link inside form-actions as button has.
|
||||
*/
|
||||
|
||||
.form-actions .action-link {
|
||||
margin-right: 0.75rem; /* LTR */
|
||||
margin-left: 0; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-actions .action-link {
|
||||
margin-right: 0;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
/* Action link states */
|
||||
|
||||
.action-link:hover {
|
||||
text-decoration: none;
|
||||
color: #0036b1;
|
||||
background-color: #f0f5fd;
|
||||
}
|
||||
|
||||
.action-link:focus {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.action-link:active {
|
||||
color: #00339a;
|
||||
background-color: #e6ecf8;
|
||||
}
|
||||
|
||||
/**
|
||||
* Action link variants.
|
||||
*/
|
||||
|
||||
/* Danger. */
|
||||
|
||||
.action-link--danger {
|
||||
color: #d72222;
|
||||
}
|
||||
|
||||
.action-link--danger:hover {
|
||||
color: #c11f1f;
|
||||
background-color: #fdf5f5;
|
||||
}
|
||||
|
||||
.action-link--danger:active {
|
||||
color: #ab1b1b;
|
||||
background-color: #fceded;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
top: 0.125rem; /* Set the proper vertical alignment */
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 0.5em; /* LTR */
|
||||
margin-left: -0.25rem; /* LTR */
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
[dir="rtl"] .action-link::before {
|
||||
margin-right: -0.25rem;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.no-touchevents .action-link--small::before,
|
||||
.no-touchevents .action-link--extrasmall::before {
|
||||
top: 0.0625rem; /* Set the proper vertical alignment */
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.no-touchevents .action-link--extrasmall::before {
|
||||
margin-right: 0.4em; /* LTR */
|
||||
margin-left: -0.125rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"].no-touchevents .action-link--extrasmall::before {
|
||||
margin-right: -0.125rem;
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide action link icons for IE11.
|
||||
*
|
||||
* IE 11 does not display inline svg backgrounds
|
||||
*/
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
.action-link::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Plus */
|
||||
|
||||
.action-link--icon-plus::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23545560'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-plus:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%230036b1'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-plus:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%2300309e'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Plus — danger */
|
||||
|
||||
.action-link--icon-plus.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23d72222'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-plus.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23c11f1f'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-plus.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23ab1b1b'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.action-link--icon-plus.action-link--icon-plus.action-link--icon-plus::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='windowText'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
/* Trash */
|
||||
|
||||
.action-link--icon-trash::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23545560'%3E%3Cpath d='m14.89965 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.2h-4.6c-.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.8h-10.8c-.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 xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230036b1'%3E%3Cpath d='m14.89965 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.2h-4.6c-.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.8h-10.8c-.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 xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2300309e'%3E%3Cpath d='m14.89965 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.2h-4.6c-.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.8h-10.8c-.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 xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23d72222'%3E%3Cpath d='m14.89965 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.2h-4.6c-.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.8h-10.8c-.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 xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23c11f1f'%3E%3Cpath d='m14.89965 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.2h-4.6c-.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.8h-10.8c-.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 xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23ab1b1b'%3E%3Cpath d='m14.89965 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.2h-4.6c-.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.8h-10.8c-.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 screen and (-ms-high-contrast: active) {
|
||||
.action-link--icon-trash.action-link--icon-trash.action-link--icon-trash::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='windowText'%3E%3Cpath d='m14.89965 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.2h-4.6c-.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.8h-10.8c-.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") !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ex */
|
||||
|
||||
.action-link--icon-ex::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23545560' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-ex:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%230036b1' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-ex:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%2300309e' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Ex — danger */
|
||||
|
||||
.action-link--icon-ex.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23d72222' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-ex.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23c11f1f' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-ex.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23ab1b1b' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.action-link--icon-ex.action-link--icon-ex.action-link--icon-ex::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='windowText' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E") !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Checkmark */
|
||||
|
||||
.action-link--icon-checkmark::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23545560' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-checkmark:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%230036b1' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-checkmark:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%2300309e' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Checkmark — danger */
|
||||
|
||||
.action-link--icon-checkmark.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23d72222' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-checkmark.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23c11f1f' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-checkmark.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23ab1b1b' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.action-link--icon-checkmark.action-link--icon-checkmark.action-link--icon-checkmark::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='windowText' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E") !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cog */
|
||||
|
||||
.action-link--icon-cog::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23545560'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.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.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-cog:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230036b1'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.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.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-cog:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2300309e'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.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.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Cog — danger */
|
||||
|
||||
.action-link--icon-cog.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23d72222'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.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.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-cog.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23c11f1f'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.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.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-cog.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23ab1b1b'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.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.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.action-link--icon-cog.action-link--icon-cog.action-link--icon-cog::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='windowText'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.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.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E") !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show */
|
||||
|
||||
.action-link--icon-show::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23545560' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-show:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230036b1' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-show:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2300309e' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Show - danger */
|
||||
|
||||
.action-link--icon-show.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23d72222' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-show.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23c11f1f' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-show.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23ab1b1b' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.action-link--icon-show.action-link--icon-show.action-link--icon-show::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='windowText' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E") !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide */
|
||||
|
||||
.action-link--icon-hide::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23545560' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-hide:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230036b1' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-hide:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2300309e' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Hide - danger */
|
||||
|
||||
.action-link--icon-hide.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23d72222' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-hide.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23c11f1f' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-hide.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23ab1b1b' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.action-link--icon-hide.action-link--icon-hide.action-link--icon-hide::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='windowText' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,386 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for action links.
|
||||
*
|
||||
* Contains Action link component and the action-links layout styles.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
/**
|
||||
* Action links layout.
|
||||
*/
|
||||
.action-links,
|
||||
[dir="rtl"] .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-left: var(--space-s); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .action-links__item + .action-links__item > .action-link {
|
||||
margin-right: var(--space-s);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.action-links__item + .action-links__item > .action-link--small {
|
||||
margin-left: var(--space-xs); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .action-links__item + .action-links__item > .action-link--small {
|
||||
margin-right: var(--space-xs);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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-davysgrey);
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
.action-link + .action-link {
|
||||
margin-left: var(--space-s); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .action-link + .action-link {
|
||||
margin-right: var(--space-s);
|
||||
margin-left: 0;
|
||||
}
|
||||
.no-touchevents .action-link--small + .action-link--small,
|
||||
.no-touchevents .action-link--extrasmall + .action-link--extrasmall {
|
||||
margin-left: var(--space-xs); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .no-touchevents .action-link--small + .action-link--small,
|
||||
[dir="rtl"] .no-touchevents .action-link--extrasmall + .action-link--extrasmall {
|
||||
margin-right: var(--space-xs);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Action links inside form-actions.
|
||||
*
|
||||
* Add the same margin for action-link inside form-actions as button has.
|
||||
*/
|
||||
.form-actions .action-link {
|
||||
margin-right: var(--space-s); /* LTR */
|
||||
margin-left: 0; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .form-actions .action-link {
|
||||
margin-right: 0;
|
||||
margin-left: var(--space-s);
|
||||
}
|
||||
|
||||
/* Action link states */
|
||||
.action-link:hover {
|
||||
text-decoration: none;
|
||||
color: var(--color-absolutezero-hover);
|
||||
background-color: var(--color-bgblue-hover);
|
||||
}
|
||||
.action-link:focus {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
.action-link:active {
|
||||
color: var(--color-absolutezero-active);
|
||||
background-color: var(--color-bgblue-active);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
top: 0.125rem; /* Set the proper vertical alignment */
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 0.5em; /* LTR */
|
||||
margin-left: calc(var(--space-s) - var(--space-m)); /* LTR */
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
[dir="rtl"] .action-link::before {
|
||||
margin-right: calc(var(--space-s) - var(--space-m));
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.no-touchevents .action-link--small::before,
|
||||
.no-touchevents .action-link--extrasmall::before {
|
||||
top: 0.0625rem; /* Set the proper vertical alignment */
|
||||
width: var(--space-s);
|
||||
height: var(--space-s);
|
||||
}
|
||||
|
||||
.no-touchevents .action-link--extrasmall::before {
|
||||
margin-right: 0.4em; /* LTR */
|
||||
margin-left: -0.125rem; /* LTR */
|
||||
}
|
||||
[dir="rtl"].no-touchevents .action-link--extrasmall::before {
|
||||
margin-right: -0.125rem;
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide action link icons for IE11.
|
||||
*
|
||||
* IE 11 does not display inline svg backgrounds
|
||||
*/
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
.action-link::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Plus */
|
||||
.action-link--icon-plus::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23545560'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.action-link--icon-plus:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%230036b1'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-plus:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%2300309e'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Plus — danger */
|
||||
.action-link--icon-plus.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23d72222'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-plus.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23c11f1f'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-plus.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23ab1b1b'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.action-link--icon-plus.action-link--icon-plus.action-link--icon-plus::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='windowText'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
/* Trash */
|
||||
.action-link--icon-trash::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23545560'%3E%3Cpath d='m14.89965 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.2h-4.6c-.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.8h-10.8c-.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 xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230036b1'%3E%3Cpath d='m14.89965 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.2h-4.6c-.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.8h-10.8c-.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 xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2300309e'%3E%3Cpath d='m14.89965 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.2h-4.6c-.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.8h-10.8c-.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 xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23d72222'%3E%3Cpath d='m14.89965 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.2h-4.6c-.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.8h-10.8c-.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 xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23c11f1f'%3E%3Cpath d='m14.89965 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.2h-4.6c-.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.8h-10.8c-.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 xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23ab1b1b'%3E%3Cpath d='m14.89965 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.2h-4.6c-.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.8h-10.8c-.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 screen and (-ms-high-contrast: active) {
|
||||
.action-link--icon-trash.action-link--icon-trash.action-link--icon-trash::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='windowText'%3E%3Cpath d='m14.89965 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.2h-4.6c-.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.8h-10.8c-.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") !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ex */
|
||||
.action-link--icon-ex::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23545560' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-ex:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%230036b1' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-ex:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%2300309e' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Ex — danger */
|
||||
.action-link--icon-ex.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23d72222' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-ex.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23c11f1f' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-ex.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23ab1b1b' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.action-link--icon-ex.action-link--icon-ex.action-link--icon-ex::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='windowText' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E") !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Checkmark */
|
||||
.action-link--icon-checkmark::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23545560' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-checkmark:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%230036b1' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-checkmark:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%2300309e' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Checkmark — danger */
|
||||
.action-link--icon-checkmark.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23d72222' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-checkmark.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23c11f1f' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-checkmark.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23ab1b1b' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.action-link--icon-checkmark.action-link--icon-checkmark.action-link--icon-checkmark::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='windowText' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E") !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cog */
|
||||
.action-link--icon-cog::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23545560'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.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.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-cog:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230036b1'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.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.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-cog:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2300309e'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.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.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Cog — danger */
|
||||
.action-link--icon-cog.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23d72222'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.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.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-cog.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23c11f1f'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.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.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-cog.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23ab1b1b'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.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.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.action-link--icon-cog.action-link--icon-cog.action-link--icon-cog::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='windowText'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.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.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E") !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show */
|
||||
.action-link--icon-show::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23545560' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-show:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230036b1' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-show:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2300309e' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Show - danger */
|
||||
.action-link--icon-show.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23d72222' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-show.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23c11f1f' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-show.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23ab1b1b' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.action-link--icon-show.action-link--icon-show.action-link--icon-show::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='windowText' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E") !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide */
|
||||
.action-link--icon-hide::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23545560' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-hide:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230036b1' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-hide:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2300309e' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Hide - danger */
|
||||
.action-link--icon-hide.action-link--danger::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23d72222' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-hide.action-link--danger:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23c11f1f' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.action-link--icon-hide.action-link--danger:active::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23ab1b1b' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.action-link--icon-hide.action-link--icon-hide.action-link--icon-hide::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='windowText' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Throbber.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
.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 0.75rem 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 .button:not(.js-hide) + .ajax-progress--throbber {
|
||||
margin-left: 0; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"].js .button:not(.js-hide) + .ajax-progress--throbber {
|
||||
margin-right: 0;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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-left: 0.75rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"].js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
|
||||
[dir="rtl"].js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
|
||||
margin-right: 0.75rem;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.ajax-progress__throbber {
|
||||
box-sizing: border-box;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
animation: claro-throbber 0.75s linear infinite;
|
||||
border: 2px solid #003cc5;
|
||||
border-right: 2px dotted transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ajax-progress__message {
|
||||
display: inline-block;
|
||||
padding-left: 0.75rem;
|
||||
font-size: 0.889rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .ajax-progress__message {
|
||||
padding-right: 0.75rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Full screen throbber.
|
||||
*/
|
||||
|
||||
.ajax-progress--fullscreen {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
box-sizing: border-box;
|
||||
width: 3.5rem; /* 56px */
|
||||
height: 3.5rem;
|
||||
margin: -1.75rem;
|
||||
border: 1px solid rgba(216, 217, 224, 0.8);
|
||||
border-radius: 3.5rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
|
||||
}
|
||||
|
||||
.ajax-progress__throbber--fullscreen {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 1.75rem; /* 28px */
|
||||
height: 1.75rem; /* 28px */
|
||||
margin: -0.875rem;
|
||||
content: "";
|
||||
border: 3px solid #003cc5;
|
||||
border-right: 3px dotted transparent;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
/**
|
||||
* Throbber animation is shaky on Edge RTL on high contrast for border width
|
||||
* less than 4px.
|
||||
*/
|
||||
@supports (-ms-ime-align:auto) {
|
||||
[dir="rtl"] .ajax-progress__throbber {
|
||||
border-width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes claro-throbber {
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
/**
|
||||
* @file
|
||||
* Throbber.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.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 .button:not(.js-hide) + .ajax-progress--throbber {
|
||||
margin-left: 0; /* LTR */
|
||||
}
|
||||
[dir="rtl"].js .button:not(.js-hide) + .ajax-progress--throbber {
|
||||
margin-right: 0;
|
||||
margin-left: var(--ajax-progress-margin-horizontal);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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-left: var(--ajax-progress-margin-horizontal); /* LTR */
|
||||
}
|
||||
[dir="rtl"].js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
|
||||
[dir="rtl"].js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
|
||||
margin-right: var(--ajax-progress-margin-horizontal);
|
||||
margin-left: var(--ajax-progress-margin-horizontal);
|
||||
}
|
||||
|
||||
.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-left: var(--ajax-progress-margin-horizontal);
|
||||
font-size: var(--font-size-label);
|
||||
}
|
||||
[dir="rtl"] .ajax-progress__message {
|
||||
padding-right: var(--ajax-progress-margin-horizontal);
|
||||
padding-left: 0;
|
||||
}
|
||||
/**
|
||||
* Full screen throbber.
|
||||
*/
|
||||
.ajax-progress--fullscreen {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 50%;
|
||||
left: 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 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 1.75rem; /* 28px */
|
||||
height: 1.75rem; /* 28px */
|
||||
margin: -0.875rem;
|
||||
content: "";
|
||||
border: 3px solid var(--color-absolutezero);
|
||||
border-right: 3px dotted transparent;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
/**
|
||||
* Throbber animation is shaky on Edge RTL on high contrast for border width
|
||||
* less than 4px.
|
||||
*/
|
||||
@supports (-ms-ime-align:auto) {
|
||||
[dir="rtl"] .ajax-progress__throbber {
|
||||
border-width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes claro-throbber {
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for animated throbber.
|
||||
*
|
||||
* @see autocomplete.js
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 autocompleting (active) 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 autocompleting 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 {
|
||||
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,0.999781c-4.5394538,-0.1723607 -8.18800628,4.7870352 -6.6873554,9.068641 1.1767997,4.383903 6.9938335,6.416563 10.6372244,3.700244 0.325764,-0.391006 0.56541,0.275384 0.84585,0.440896 1.246479,1.246479 2.492958,2.492959 3.739437,3.739438 0.471354,-0.471354 0.942709,-0.942709 1.414063,-1.414063 -1.44987,-1.44987 -2.89974,-2.899739 -4.34961,-4.349609C16.410345,8.7174615 14.748115,2.9379071 10.536504,1.4755074 9.7302231,1.1615612 8.8650587,0.99941873 8,0.999781Z m0,2c3.242467,-0.1231148 5.848576,3.4193109 4.776682,6.477601 -0.841211,3.131959 -4.9939918,4.58038 -7.5998944,2.649077C2.4322236,10.397214 2.2765833,6.0022025 4.8919502,4.0831465 5.7667487,3.38528 6.8811016,2.996997 8,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
.js .form-autocomplete::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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,0.999781c4.539454,-0.1723607 8.188006,4.7870352 6.687355,9.068641 -1.176799,4.383903 -6.993833,6.416563 -10.637224,3.700244C7.724367,13.37766 7.484721,14.04405 7.204281,14.209562 5.957802,15.456041 4.711323,16.702521 3.464844,17.949 2.99349,17.477646 2.522135,17.006291 2.050781,16.534937 3.500651,15.085067 4.950521,13.635198 6.400391,12.185328 3.589655,8.7174615 5.251885,2.9379071 9.463496,1.4755074 10.269777,1.1615612 11.134941,0.99941873 12,0.999781Z m0,2C8.757533,2.8766662 6.151424,6.4190919 7.223318,9.477382c0.841211,3.131959 4.993992,4.58038 7.599894,2.649077C17.567776,10.397214 17.723417,6.0022025 15.10805,4.0831465 14.233251,3.38528 13.118898,2.996997 12,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
|
||||
background-position: 0 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 type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.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 type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(-430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(-720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* IE11 does not animate inline SVG. */
|
||||
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
|
||||
_:-ms-fullscreen,
|
||||
.js .form-autocomplete.is-autocompleting {
|
||||
background-image: url("../../images/spinner-ltr.gif");
|
||||
background-size: 2.5rem 1.25rem;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
|
||||
_:-ms-fullscreen,
|
||||
.js[dir="rtl"] .form-autocomplete.is-autocompleting {
|
||||
background-image: url("../../images/spinner-rtl.gif");
|
||||
}
|
||||
|
||||
/**
|
||||
* Autocomplete wrapper for autocompleting message.
|
||||
*/
|
||||
|
||||
.claro-autocomplete {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.claro-autocomplete__message {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 0.15rem;
|
||||
color: #003cc5;
|
||||
font-size: 0.702rem; /* ~11px */
|
||||
font-weight: bold;
|
||||
line-height: 1.125rem; /* 18px */
|
||||
}
|
||||
|
||||
[dir="rtl"] .claro-autocomplete__message {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.js .is-autocompleting + .claro-autocomplete__message {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for animated throbber.
|
||||
*
|
||||
* @see autocomplete.js
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
/**
|
||||
* 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 autocompleting (active) 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 autocompleting 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 {
|
||||
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,0.999781c-4.5394538,-0.1723607 -8.18800628,4.7870352 -6.6873554,9.068641 1.1767997,4.383903 6.9938335,6.416563 10.6372244,3.700244 0.325764,-0.391006 0.56541,0.275384 0.84585,0.440896 1.246479,1.246479 2.492958,2.492959 3.739437,3.739438 0.471354,-0.471354 0.942709,-0.942709 1.414063,-1.414063 -1.44987,-1.44987 -2.89974,-2.899739 -4.34961,-4.349609C16.410345,8.7174615 14.748115,2.9379071 10.536504,1.4755074 9.7302231,1.1615612 8.8650587,0.99941873 8,0.999781Z m0,2c3.242467,-0.1231148 5.848576,3.4193109 4.776682,6.477601 -0.841211,3.131959 -4.9939918,4.58038 -7.5998944,2.649077C2.4322236,10.397214 2.2765833,6.0022025 4.8919502,4.0831465 5.7667487,3.38528 6.8811016,2.996997 8,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
.js .form-autocomplete::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
.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,0.999781c4.539454,-0.1723607 8.188006,4.7870352 6.687355,9.068641 -1.176799,4.383903 -6.993833,6.416563 -10.637224,3.700244C7.724367,13.37766 7.484721,14.04405 7.204281,14.209562 5.957802,15.456041 4.711323,16.702521 3.464844,17.949 2.99349,17.477646 2.522135,17.006291 2.050781,16.534937 3.500651,15.085067 4.950521,13.635198 6.400391,12.185328 3.589655,8.7174615 5.251885,2.9379071 9.463496,1.4755074 10.269777,1.1615612 11.134941,0.99941873 12,0.999781Z m0,2C8.757533,2.8766662 6.151424,6.4190919 7.223318,9.477382c0.841211,3.131959 4.993992,4.58038 7.599894,2.649077C17.567776,10.397214 17.723417,6.0022025 15.10805,4.0831465 14.233251,3.38528 13.118898,2.996997 12,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
|
||||
background-position: 0 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 type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.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 type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(-430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(-720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
/* IE11 does not animate inline SVG. */
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
.js .form-autocomplete.is-autocompleting {
|
||||
background-image: url("../../images/spinner-ltr.gif");
|
||||
background-size: 2.5rem 1.25rem;
|
||||
}
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
.js[dir="rtl"] .form-autocomplete.is-autocompleting {
|
||||
background-image: url("../../images/spinner-rtl.gif");
|
||||
}
|
||||
|
||||
/**
|
||||
* Autocomplete wrapper for autocompleting message.
|
||||
*/
|
||||
.claro-autocomplete {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
.claro-autocomplete__message {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 0.15rem;
|
||||
color: var(--color-link);
|
||||
font-size: var(--font-size-xxs); /* ~11px */
|
||||
font-weight: bold;
|
||||
line-height: calc(18rem / 16); /* 18px */
|
||||
}
|
||||
[dir="rtl"] .claro-autocomplete__message {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
.js .is-autocompleting + .claro-autocomplete__message {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Breadcrumbs.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
padding: 0;
|
||||
color: #222330;
|
||||
font-size: 0.79rem;
|
||||
}
|
||||
|
||||
.breadcrumb__list,
|
||||
[dir="rtl"] .breadcrumb__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.breadcrumb__item,
|
||||
.breadcrumb__link {
|
||||
display: inline;
|
||||
text-decoration: none;
|
||||
color: #222330;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.breadcrumb__item + .breadcrumb__item::before {
|
||||
padding: 0 0.75rem;
|
||||
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8' height='8' width='5'%3E%3Cpath d='M1.2070312,0.64696878 0.5,1.354 3.1464844,4.0004844 0.5,6.6469688 1.2070312,7.354 4.5605468,4.0004844Z' fill='%23545560'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__item + .breadcrumb__item::before {
|
||||
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath d='M3.7929688,0.64696878 4.5,1.354 1.8535156,4.0004844 4.5,6.6469688 3.7929688,7.354 0.4394532,4.0004844Z' fill='%23545560'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.breadcrumb__link:hover,
|
||||
.breadcrumb__link:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* @file
|
||||
* Breadcrumbs.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.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;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.breadcrumb__item + .breadcrumb__item::before {
|
||||
padding: 0 0.75rem;
|
||||
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8' height='8' width='5'%3E%3Cpath d='M1.2070312,0.64696878 0.5,1.354 3.1464844,4.0004844 0.5,6.6469688 1.2070312,7.354 4.5605468,4.0004844Z' fill='%23545560'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__item + .breadcrumb__item::before {
|
||||
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath d='M3.7929688,0.64696878 4.5,1.354 1.8535156,4.0004844 4.5,6.6469688 3.7929688,7.354 0.4394532,4.0004844Z' fill='%23545560'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.breadcrumb__link:hover,
|
||||
.breadcrumb__link:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -0,0 +1,255 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Structural styles for Claro's UI buttons
|
||||
*
|
||||
* Apply these classes to button elements (<button>, <input type="button" />).
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
* Buttons.
|
||||
*
|
||||
* 1. Padding widths detracted by width of the transparent borders to make
|
||||
* button size match with design system.
|
||||
* 2. Transparent border is needed for high contrast mode. This has to be set to
|
||||
* !important to render Firefox borders with consistent width in high
|
||||
* contrast mode.
|
||||
* 3. 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: 1rem 0.75rem 1rem 0; /* LTR */
|
||||
padding: calc(1rem - 1px) calc(1.5rem - 1px); /* 1 */
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #222330;
|
||||
border: 1px solid transparent !important; /* 2 */
|
||||
border-radius: 2px;
|
||||
background-color: #d4d4d8;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
line-height: 1rem;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased; /* 3 */
|
||||
}
|
||||
|
||||
[dir="rtl"] .button {
|
||||
margin: 1rem 0 1rem 0.75rem;
|
||||
}
|
||||
|
||||
.button:not(:focus) {
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
background-color: #c2c3ca;
|
||||
}
|
||||
|
||||
.button:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background-color: #adaeb3;
|
||||
}
|
||||
|
||||
/* Common styles for small buttons */
|
||||
|
||||
.no-touchevents .button--small {
|
||||
margin: 0.75rem 0.5rem 0.75rem 0; /* LTR */
|
||||
padding: calc(0.5rem - 1px) calc(1rem - 1px); /* 1 */
|
||||
font-size: 0.79rem;
|
||||
}
|
||||
|
||||
/* Common styles for extra small buttons */
|
||||
|
||||
.no-touchevents .button--extrasmall {
|
||||
margin: 0.5rem 0.5rem 0.5rem 0; /* LTR */
|
||||
padding: calc(0.25rem - 1px) calc(0.75rem - 1px); /* 1 */
|
||||
font-size: 0.79rem;
|
||||
}
|
||||
|
||||
[dir="rtl"].no-touchevents .button--small,
|
||||
[dir="rtl"].no-touchevents .button--extrasmall {
|
||||
margin-right: 0;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* Styles for action link buttons */
|
||||
|
||||
.button--action {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button--action::before {
|
||||
margin-left: -0.25em; /* LTR */
|
||||
padding-right: 0.25em; /* LTR */
|
||||
content: "+";
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
[dir="rtl"] .button--action::before {
|
||||
margin-right: -0.25em;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
|
||||
a.button:hover,
|
||||
a.button:active {
|
||||
color: #222330;
|
||||
}
|
||||
|
||||
/* Primary button styles */
|
||||
|
||||
.button--primary {
|
||||
color: #fff;
|
||||
background-color: #003cc5;
|
||||
}
|
||||
|
||||
.button--primary:hover {
|
||||
color: #fff;
|
||||
background-color: #0036b1;
|
||||
}
|
||||
|
||||
.button--primary:active {
|
||||
background-color: #00339a;
|
||||
}
|
||||
|
||||
a.button--primary:hover,
|
||||
a.button--primary:active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Danger button styles */
|
||||
|
||||
.button--danger {
|
||||
color: #fff;
|
||||
background-color: #d72222;
|
||||
}
|
||||
|
||||
.button--danger:hover {
|
||||
color: #fff;
|
||||
background-color: #c11f1f;
|
||||
}
|
||||
|
||||
.button--danger:active {
|
||||
background-color: #ab1b1b;
|
||||
}
|
||||
|
||||
a.button--danger:hover,
|
||||
a.button--danger:active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/**
|
||||
* Disabled state styles as last.
|
||||
*
|
||||
* Overrides every definitions before, including variants.
|
||||
*/
|
||||
|
||||
.button:disabled,
|
||||
.button.is-disabled {
|
||||
color: #8e929c;
|
||||
background-color: #ebebed;
|
||||
}
|
||||
|
||||
.button--primary:disabled,
|
||||
.button--primary.is-disabled {
|
||||
color: #82828c;
|
||||
background-color: #d4d4d8;
|
||||
}
|
||||
|
||||
/* Make disabled <link> behave like a [disabled] <input> or <button> */
|
||||
|
||||
.button.is-disabled {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-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;
|
||||
text-decoration: underline;
|
||||
border: 0;
|
||||
background: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
/**
|
||||
* @file
|
||||
* Structural styles for Claro's UI buttons
|
||||
*
|
||||
* Apply these classes to button elements (<button>, <input type="button" />).
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
/**
|
||||
* Buttons.
|
||||
*
|
||||
* 1. Padding widths detracted by width of the transparent borders to make
|
||||
* button size match with design system.
|
||||
* 2. Transparent border is needed for high contrast mode. This has to be set to
|
||||
* !important to render Firefox borders with consistent width in high
|
||||
* contrast mode.
|
||||
* 3. 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: var(--space-m) var(--space-s) var(--space-m) 0; /* LTR */
|
||||
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 !important; /* 2 */
|
||||
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; /* 3 */
|
||||
}
|
||||
[dir="rtl"] .button {
|
||||
margin: var(--space-m) 0 var(--space-m) var(--space-s);
|
||||
}
|
||||
|
||||
.button:not(:focus) {
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
background-color: var(--button--hover-bg-color);
|
||||
}
|
||||
|
||||
.button:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background-color: var(--button--active-bg-color);
|
||||
}
|
||||
|
||||
/* Common styles for small buttons */
|
||||
.no-touchevents .button--small {
|
||||
margin: var(--space-s) var(--space-xs) var(--space-s) 0; /* LTR */
|
||||
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: var(--space-xs) var(--space-xs) var(--space-xs) 0; /* LTR */
|
||||
padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
[dir="rtl"].no-touchevents .button--small,
|
||||
[dir="rtl"].no-touchevents .button--extrasmall {
|
||||
margin-right: 0;
|
||||
margin-left: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Styles for action link buttons */
|
||||
.button--action {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button--action::before {
|
||||
margin-left: -0.25em; /* LTR */
|
||||
padding-right: 0.25em; /* LTR */
|
||||
content: "+";
|
||||
font-weight: 900;
|
||||
}
|
||||
[dir="rtl"] .button--action::before {
|
||||
margin-right: -0.25em;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
|
||||
a.button:hover,
|
||||
a.button:active {
|
||||
color: var(--button-fg-color);
|
||||
}
|
||||
|
||||
/* Primary button styles */
|
||||
.button--primary {
|
||||
color: var(--button-fg-color--primary);
|
||||
background-color: var(--button-bg-color--primary);
|
||||
}
|
||||
|
||||
.button--primary:hover {
|
||||
color: var(--button-fg-color--primary);
|
||||
background-color: var(--button--hover-bg-color--primary);
|
||||
}
|
||||
|
||||
.button--primary:active {
|
||||
background-color: var(--button--active-bg-color--primary);
|
||||
}
|
||||
|
||||
a.button--primary:hover,
|
||||
a.button--primary:active {
|
||||
color: var(--button-fg-color--primary);
|
||||
}
|
||||
|
||||
/* Danger button styles */
|
||||
.button--danger {
|
||||
color: var(--button-fg-color--danger);
|
||||
background-color: var(--button-bg-color--danger);
|
||||
}
|
||||
.button--danger:hover {
|
||||
color: var(--button-fg-color--danger);
|
||||
background-color: var(--button--hover-bg-color--danger);
|
||||
}
|
||||
.button--danger:active {
|
||||
background-color: var(--button--active-bg-color--danger);
|
||||
}
|
||||
|
||||
a.button--danger:hover,
|
||||
a.button--danger:active {
|
||||
color: var(--button-fg-color--danger);
|
||||
}
|
||||
|
||||
/**
|
||||
* Disabled state styles as last.
|
||||
*
|
||||
* Overrides every definitions before, including variants.
|
||||
*/
|
||||
.button:disabled,
|
||||
.button.is-disabled {
|
||||
color: var(--button--disabled-fg-color);
|
||||
background-color: var(--button--disabled-bg-color);
|
||||
}
|
||||
|
||||
.button--primary:disabled,
|
||||
.button--primary.is-disabled {
|
||||
color: var(--button--disabled-fg-color--primary);
|
||||
background-color: var(--button--disabled-bg-color--primary);
|
||||
}
|
||||
|
||||
/* Make disabled <link> behave like a [disabled] <input> or <button> */
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Card.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-items: flex-start;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(212, 212, 218, 0.8);
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0
|
||||
4px
|
||||
10px
|
||||
rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 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: 1px 1px 0 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36.75rem) {
|
||||
.card--horizontal .card__image {
|
||||
flex-basis: 35%;
|
||||
border-radius: 1px 0 0 1px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .card--horizontal .card__image {
|
||||
border-radius: 0 1px 1px 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: 1.5rem;
|
||||
}
|
||||
|
||||
@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-left: 1rem;
|
||||
}
|
||||
[dir="rtl"] .card--horizontal .card__image ~ .card__content-wrapper {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@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-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card__content-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Card footer.
|
||||
*/
|
||||
|
||||
.card__footer {
|
||||
/**
|
||||
* Without specifying flex-shrink, IE11 will increase footer height if an
|
||||
* interactive element inside is hovered or focused.
|
||||
*/
|
||||
flex-shrink: 0;
|
||||
order: 100;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.card__footer .action-links,
|
||||
[dir="rtl"] .card__footer .action-links {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
text-align: right; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .card__footer .action-links {
|
||||
text-align: left;
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
/**
|
||||
* @file
|
||||
* Card.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
--card-bg-color: var(--color-white);
|
||||
--card-border-size: 1px;
|
||||
--card-border-color: var(--color-lightgray-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 rgba(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-radius: var(--card-image-border-radius-size) 0 0 var(--card-image-border-radius-size); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .card--horizontal .card__image {
|
||||
border-radius: 0 var(--card-image-border-radius-size) var(--card-image-border-radius-size) 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-left: var(--space-m);
|
||||
}
|
||||
[dir="rtl"] .card--horizontal .card__image ~ .card__content-wrapper {
|
||||
padding-right: var(--space-m);
|
||||
padding-left: var(--space-l);
|
||||
}
|
||||
}
|
||||
|
||||
@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-top: 0;
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
.card__content-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Card footer.
|
||||
*/
|
||||
.card__footer {
|
||||
/**
|
||||
* Without specifying flex-shrink, IE11 will increase footer height if an
|
||||
* interactive element inside is hovered or focused.
|
||||
*/
|
||||
flex-shrink: 0;
|
||||
order: 100;
|
||||
margin-top: var(--space-l);
|
||||
}
|
||||
|
||||
.card__footer .action-links,
|
||||
[dir="rtl"] .card__footer .action-links {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
text-align: right; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .card__footer .action-links {
|
||||
text-align: left;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Inline items.
|
||||
*/
|
||||
|
||||
.container-inline .form-radios label:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.container-inline .form-radios .form-type-radio {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] .container-inline .form-radios .form-type-radio {
|
||||
margin-right: 0;
|
||||
margin-left: 1em;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Inline items.
|
||||
*/
|
||||
|
||||
.container-inline div,
|
||||
.container-inline label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-items-inline {
|
||||
margin-top: -0.125em; /* 2px */
|
||||
margin-bottom: -0.125em;
|
||||
}
|
||||
|
||||
.form-items-inline > .form-item {
|
||||
display: inline-block;
|
||||
margin-top: 0.125em;
|
||||
margin-bottom: 0.125em;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* @file
|
||||
* Inline items.
|
||||
*/
|
||||
|
||||
.container-inline div,
|
||||
.container-inline label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-items-inline {
|
||||
margin-top: -0.125em; /* 2px */
|
||||
margin-bottom: -0.125em;
|
||||
}
|
||||
|
||||
.form-items-inline > .form-item {
|
||||
display: inline-block;
|
||||
margin-top: 0.125em;
|
||||
margin-bottom: 0.125em;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* @file
|
||||
* Inline items.
|
||||
*/
|
||||
|
||||
.container-inline .form-radios label:after {
|
||||
content: "";
|
||||
}
|
||||
.container-inline .form-radios .form-type-radio {
|
||||
margin-right: 1em;
|
||||
}
|
||||
[dir="rtl"] .container-inline .form-radios .form-type-radio {
|
||||
margin-right: 0;
|
||||
margin-left: 1em;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* Content header.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
.content-header {
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 1.5rem 0 0;
|
||||
background-color: #f3f4f9;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* Content header.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.content-header {
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-s);
|
||||
padding: var(--space-l) 0 0;
|
||||
background-color: var(--color-whitesmoke);
|
||||
}
|
||||
@@ -0,0 +1,640 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Collapsible details.
|
||||
*
|
||||
* @see collapse.js
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.claro-details {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #222330;
|
||||
border: 1px solid rgba(216, 217, 224, 0.8);
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0
|
||||
2px
|
||||
4px
|
||||
rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.claro-details--accordion-item,
|
||||
.claro-details--vertical-tabs-item {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.claro-details--accordion-item:first-of-type {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
.claro-details--accordion-item:last-of-type {
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Details summary styles.
|
||||
*/
|
||||
|
||||
.claro-details__summary {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem 1rem 1rem 2.25rem; /* LTR */
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease-in-out;
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
color: #545560;
|
||||
border-radius: 1px;
|
||||
background-color: transparent;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .claro-details__summary {
|
||||
padding-right: 2.25rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
/* Modifiers */
|
||||
|
||||
.claro-details__summary--accordion,
|
||||
.claro-details__summary--accordion-item,
|
||||
.claro-details__summary--vertical-tabs-item {
|
||||
padding: 1.25rem 1.5rem 1.25rem 2.25rem; /* LTR */
|
||||
background: #fff;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .claro-details__summary--accordion,
|
||||
[dir="rtl"] .claro-details__summary--accordion-item,
|
||||
[dir="rtl"] .claro-details__summary--vertical-tabs-item {
|
||||
padding-right: 2.25rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
.claro-details--accordion-item:last-child .claro-details__summary--accordion-item {
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Details marker styles.
|
||||
*/
|
||||
|
||||
/* Remove the marker on Chrome */
|
||||
|
||||
.claro-details__summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.claro-details__summary::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0.75rem; /* LTR */
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: -0.5rem;
|
||||
content: "";
|
||||
transition: transform 0.12s ease-in 0s;
|
||||
transform: rotate(0); /* LTR */
|
||||
text-align: center;
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%23545560'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
[dir="rtl"] .claro-details__summary::before {
|
||||
right: 0.75rem;
|
||||
left: auto;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.claro-details__summary::before {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.claro-details__summary::before {
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
margin-top: -0.28125rem;
|
||||
transition: transform 0.12s ease-in 0s, margin 0.12s ease-in 0s;
|
||||
transform: rotate(45deg); /* LTR */
|
||||
border: 0.125rem solid;
|
||||
border-width: 0.125rem 0.125rem 0 0;
|
||||
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-whitelist */
|
||||
|
||||
@media not all and (min-resolution: 0.001dpcm) {
|
||||
@media {
|
||||
.claro-details__summary::before {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Details summary focus.
|
||||
*/
|
||||
|
||||
.claro-details__summary::after {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
content: "";
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 0 3px #26a769;
|
||||
}
|
||||
|
||||
.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: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
.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: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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: #003cc5;
|
||||
}
|
||||
|
||||
.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' viewBox='0 0 16 16'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%230036B1'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary {
|
||||
border-radius: 1px 1px 0 0;
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary::before {
|
||||
transform: rotate(90deg); /* for LTR and RTL */
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.claro-details__summary:hover::before,
|
||||
.claro-details__summary:hover:focus::before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary::before,
|
||||
[dir="rtl"] .claro-details[open] > .claro-details__summary::before {
|
||||
margin-top: -0.40625rem;
|
||||
margin-right: 0.125rem;
|
||||
transform: rotate(135deg); /* 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: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.claro-details__summary:hover {
|
||||
color: #003cc5;
|
||||
background-color: #f0f5fd;
|
||||
}
|
||||
|
||||
/**
|
||||
* Focus styles.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Active has to be here for Firefox.
|
||||
* Merges standard collapse-processed selectors.
|
||||
*/
|
||||
|
||||
[open] > .claro-details__summary--accordion:not(:focus):not(:active)::after,
|
||||
[open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after,
|
||||
.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
|
||||
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
|
||||
[open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
|
||||
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
|
||||
opacity: 1;
|
||||
border: 3px solid #003cc5;
|
||||
border-width: 0 0 0 3px; /* LTR */
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] [open] > .claro-details__summary--accordion:not(:focus)::after,
|
||||
[dir="rtl"] [open] > .claro-details__summary--accordion-item:not(:focus)::after,
|
||||
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
|
||||
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
|
||||
[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after,
|
||||
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
|
||||
border-width: 0 3px 0 0;
|
||||
}
|
||||
|
||||
.claro-details__summary:focus::after,
|
||||
.claro-details__summary:active::after,
|
||||
.collapse-processed > .claro-details__summary .details-title:focus::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Safari workaround.
|
||||
*/
|
||||
|
||||
/* stylelint-disable-next-line unit-whitelist */
|
||||
|
||||
@media not all and (min-resolution: 0.001dpcm) {
|
||||
@media {
|
||||
.claro-details__summary::after {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary:focus {
|
||||
color: #003cc5;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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: 1rem;
|
||||
}
|
||||
|
||||
.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: 1px solid rgba(216, 217, 224, 0.8);
|
||||
background-color: rgba(243, 244, 249, 0.4);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.claro-details__wrapper {
|
||||
margin: 1.5rem 2.25rem;
|
||||
}
|
||||
|
||||
.claro-details__wrapper--accordion,
|
||||
.claro-details__wrapper--accordion-item,
|
||||
.claro-details__wrapper--vertical-tabs-item {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 85em) {
|
||||
.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: 1rem 1rem 1.5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 85em) {
|
||||
.vertical-tabs .claro-details__content--vertical-tabs-item {
|
||||
margin: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Description. */
|
||||
|
||||
.claro-details__description {
|
||||
margin-bottom: 1rem;
|
||||
color: #545560;
|
||||
font-size: 0.79rem; /* ~13px */
|
||||
line-height: 1.0625rem; /* 17px */
|
||||
}
|
||||
|
||||
.claro-details__description.is-disabled {
|
||||
color: #82828c;
|
||||
}
|
||||
|
||||
/**
|
||||
* Collapse processed for non-supporting browsers like IE or Edge.
|
||||
*/
|
||||
|
||||
.collapse-processed > .claro-details__summary {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.collapse-processed > .claro-details__summary::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.collapse-processed > .claro-details__summary .details-title {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 1rem 1rem 1rem 2.25rem; /* LTR */
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .collapse-processed > .claro-details__summary .details-title {
|
||||
padding-right: 2.25rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.collapse-processed > .claro-details__summary--accordion .details-title,
|
||||
.collapse-processed > .claro-details__summary--accordion-item .details-title,
|
||||
.collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
|
||||
padding: 1.25rem 1.5rem 1.25rem 2.25rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .collapse-processed > .claro-details__summary--accordion .details-title,
|
||||
[dir="rtl"] .collapse-processed > .claro-details__summary--accordion-item .details-title,
|
||||
[dir="rtl"] .collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
|
||||
padding-right: 2.25rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
/* Focus and hover states. */
|
||||
|
||||
.collapse-processed > .claro-details__summary .details-title:focus,
|
||||
.collapse-processed > .claro-details__summary .details-title:hover {
|
||||
z-index: 1;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.collapse-processed > .claro-details__summary .details-title::after {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
content: "";
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
border: 3px solid #26a769;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.collapse-processed > .claro-details__summary .details-title:focus::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Accordion item modifiers for the focus box. */
|
||||
|
||||
.collapse-processed > .claro-details__summary--accordion-item .details-title::after,
|
||||
.vertical-tabs__item > .claro-details__summary--vertical-tabs-item .details-title::after {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.collapse-processed:first-child > .claro-details__summary--accordion-item .details-title::after,
|
||||
.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item .details-title::after {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
.collapse-processed:last-child > .claro-details__summary--accordion-item .details-title::after,
|
||||
.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item .details-title::after {
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
|
||||
.collapse-processed[open] > .claro-details__summary--accordion .details-title::after,
|
||||
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title::after,
|
||||
.vertical-tabs__item[open] > .claro-details__summary--vertical-tabs-item .details-title::after {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide JS summary from the details polyfill to make it consistent with native
|
||||
* details elements.
|
||||
*
|
||||
* @todo Consider removing this after https://www.drupal.org/node/2493957 has
|
||||
* been solved.
|
||||
*/
|
||||
|
||||
.claro-details__summary--accordion .summary,
|
||||
.claro-details__summary--accordion-item .summary,
|
||||
.claro-details__summary--vertical-tabs-item .summary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
|
||||
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
|
||||
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
}
|
||||
.collapse-processed > .claro-details__summary .details-title::after {
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
left: -5px;
|
||||
border: 2px dotted;
|
||||
}
|
||||
}
|
||||
|
||||
.required-mark::after {
|
||||
display: inline-block;
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
margin-right: 0.3em;
|
||||
margin-left: 0.3em;
|
||||
content: "";
|
||||
vertical-align: super;
|
||||
background-image: url(../../images/core/ee0000/required.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0.4375rem 0.4375rem;
|
||||
}
|
||||
@@ -0,0 +1,568 @@
|
||||
/**
|
||||
* @file
|
||||
* Collapsible details.
|
||||
*
|
||||
* @see collapse.js
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
/**
|
||||
* 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-top: var(--space-m);
|
||||
margin-bottom: 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);
|
||||
}
|
||||
|
||||
.claro-details--accordion-item,
|
||||
.claro-details--vertical-tabs-item {
|
||||
margin-top: 0;
|
||||
margin-bottom: 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: var(--space-m) var(--space-m) var(--space-m) var(--details-desktop-wrapper-padding-start); /* LTR */
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
color: var(--color-davysgrey);
|
||||
border-radius: var(--size-summary-border-radius);
|
||||
background-color: transparent;
|
||||
line-height: var(--space-m);
|
||||
}
|
||||
[dir="rtl"] .claro-details__summary {
|
||||
padding-right: var(--details-desktop-wrapper-padding-start);
|
||||
padding-left: var(--space-m);
|
||||
}
|
||||
|
||||
/* Modifiers */
|
||||
.claro-details__summary--accordion,
|
||||
.claro-details__summary--accordion-item,
|
||||
.claro-details__summary--vertical-tabs-item {
|
||||
padding: var(--summary-accordion-padding-vertical) var(--space-l) var(--summary-accordion-padding-vertical) var(--details-desktop-wrapper-padding-start); /* LTR */
|
||||
background: var(--color-white);
|
||||
line-height: var(--summary-accordion-line-height);
|
||||
}
|
||||
[dir="rtl"] .claro-details__summary--accordion,
|
||||
[dir="rtl"] .claro-details__summary--accordion-item,
|
||||
[dir="rtl"] .claro-details__summary--vertical-tabs-item {
|
||||
padding-right: var(--details-desktop-wrapper-padding-start);
|
||||
padding-left: var(--space-l);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
top: 50%;
|
||||
left: var(--space-s); /* LTR */
|
||||
display: inline-block;
|
||||
width: var(--space-m);
|
||||
height: var(--space-m);
|
||||
margin-top: calc(var(--space-m) / -2);
|
||||
content: "";
|
||||
transition: transform var(--details-transform-transition-duration) ease-in 0s;
|
||||
transform: rotate(0); /* LTR */
|
||||
text-align: center;
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%23545560'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
||||
background-size: contain;
|
||||
}
|
||||
[dir="rtl"] .claro-details__summary::before {
|
||||
right: var(--space-s);
|
||||
left: auto;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.claro-details__summary::before {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.claro-details__summary::before {
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
margin-top: calc(0.5625rem / -2);
|
||||
transition: transform var(--details-transform-transition-duration) ease-in 0s, margin var(--details-transform-transition-duration) ease-in 0s;
|
||||
transform: rotate(45deg); /* LTR */
|
||||
border: 0.125rem solid;
|
||||
border-width: 0.125rem 0.125rem 0 0;
|
||||
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-whitelist */
|
||||
@media not all and (min-resolution: 0.001dpcm) {
|
||||
@media {
|
||||
.claro-details__summary::before {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Details summary focus.
|
||||
*/
|
||||
.claro-details__summary::after {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -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' viewBox='0 0 16 16'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' 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 screen and (-ms-high-contrast: active) {
|
||||
.claro-details__summary:hover::before,
|
||||
.claro-details__summary:hover:focus::before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.claro-details[open] > .claro-details__summary::before,
|
||||
[dir="rtl"] .claro-details[open] > .claro-details__summary::before {
|
||||
margin-top: calc((0.5625rem / -2) - 0.125rem);
|
||||
margin-right: 0.125rem;
|
||||
transform: rotate(135deg); /* 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: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.claro-details__summary:hover {
|
||||
color: var(--color-absolutezero);
|
||||
background-color: var(--color-bgblue-hover);
|
||||
}
|
||||
|
||||
/**
|
||||
* Focus styles.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Active has to be here for Firefox.
|
||||
* Merges standard collapse-processed selectors.
|
||||
*/
|
||||
[open] > .claro-details__summary--accordion:not(:focus):not(:active)::after,
|
||||
[open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after,
|
||||
.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
|
||||
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
|
||||
[open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
|
||||
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::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"] [open] > .claro-details__summary--accordion:not(:focus)::after,
|
||||
[dir="rtl"] [open] > .claro-details__summary--accordion-item:not(:focus)::after,
|
||||
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
|
||||
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
|
||||
[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after,
|
||||
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
|
||||
border-width: 0 var(--details-summary-focus-border-size) 0 0;
|
||||
}
|
||||
|
||||
.claro-details__summary:focus::after,
|
||||
.claro-details__summary:active::after,
|
||||
.collapse-processed > .claro-details__summary .details-title:focus::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Safari workaround.
|
||||
*/
|
||||
/* stylelint-disable-next-line unit-whitelist */
|
||||
@media not all and (min-resolution: 0.001dpcm) {
|
||||
@media {
|
||||
.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-whitesmoke-o-40);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 85em) {
|
||||
.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-bottom: 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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Collapse processed for non-supporting browsers like IE or Edge.
|
||||
*/
|
||||
.collapse-processed > .claro-details__summary {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.collapse-processed > .claro-details__summary::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.collapse-processed > .claro-details__summary .details-title {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: var(--space-m) var(--space-m) var(--space-m) var(--details-desktop-wrapper-padding-start); /* LTR */
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border-radius: var(--size-summary-border-radius);
|
||||
}
|
||||
[dir="rtl"] .collapse-processed > .claro-details__summary .details-title {
|
||||
padding-right: var(--details-desktop-wrapper-padding-start);
|
||||
padding-left: var(--space-m);
|
||||
}
|
||||
|
||||
.collapse-processed > .claro-details__summary--accordion .details-title,
|
||||
.collapse-processed > .claro-details__summary--accordion-item .details-title,
|
||||
.collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
|
||||
padding: var(--summary-accordion-padding-vertical) var(--space-l) var(--summary-accordion-padding-vertical) var(--details-desktop-wrapper-padding-start); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .collapse-processed > .claro-details__summary--accordion .details-title,
|
||||
[dir="rtl"] .collapse-processed > .claro-details__summary--accordion-item .details-title,
|
||||
[dir="rtl"] .collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
|
||||
padding-right: var(--details-desktop-wrapper-padding-start);
|
||||
padding-left: var(--space-l);
|
||||
}
|
||||
|
||||
/* Focus and hover states. */
|
||||
.collapse-processed > .claro-details__summary .details-title:focus,
|
||||
.collapse-processed > .claro-details__summary .details-title:hover {
|
||||
z-index: 1;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.collapse-processed > .claro-details__summary .details-title::after {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
content: "";
|
||||
transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
border: var(--details-summary-focus-border-size) solid var(--color-focus);
|
||||
border-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
.collapse-processed > .claro-details__summary .details-title:focus::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Accordion item modifiers for the focus box. */
|
||||
|
||||
.collapse-processed > .claro-details__summary--accordion-item .details-title::after,
|
||||
.vertical-tabs__item > .claro-details__summary--vertical-tabs-item .details-title::after {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.collapse-processed:first-child > .claro-details__summary--accordion-item .details-title::after,
|
||||
.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item .details-title::after {
|
||||
border-top-left-radius: var(--details-border-size-radius);
|
||||
border-top-right-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
.collapse-processed:last-child > .claro-details__summary--accordion-item .details-title::after,
|
||||
.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item .details-title::after {
|
||||
border-bottom-right-radius: var(--details-border-size-radius);
|
||||
border-bottom-left-radius: var(--details-border-size-radius);
|
||||
}
|
||||
|
||||
.collapse-processed[open] > .claro-details__summary--accordion .details-title::after,
|
||||
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title::after,
|
||||
.vertical-tabs__item[open] > .claro-details__summary--vertical-tabs-item .details-title::after {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide JS summary from the details polyfill to make it consistent with native
|
||||
* details elements.
|
||||
*
|
||||
* @todo Consider removing this after https://www.drupal.org/node/2493957 has
|
||||
* been solved.
|
||||
*/
|
||||
.claro-details__summary--accordion .summary,
|
||||
.claro-details__summary--accordion-item .summary,
|
||||
.claro-details__summary--vertical-tabs-item .summary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
|
||||
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
|
||||
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
}
|
||||
.collapse-processed > .claro-details__summary .details-title::after {
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
left: -5px;
|
||||
border: 2px dotted;
|
||||
}
|
||||
}
|
||||
|
||||
.required-mark::after {
|
||||
display: inline-block;
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
margin-right: 0.3em;
|
||||
margin-left: 0.3em;
|
||||
content: "";
|
||||
vertical-align: super;
|
||||
background-image: url(../../images/core/ee0000/required.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0.4375rem 0.4375rem;
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* Presentational styles for Drupal dialogs.
|
||||
*/
|
||||
|
||||
.ui-dialog {
|
||||
position: absolute;
|
||||
z-index: 1260;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@media all and (max-width: 48em) { /* 768px */
|
||||
.ui-dialog {
|
||||
min-width: 92%;
|
||||
max-width: 92%;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar {
|
||||
padding: 15px 49px 15px 15px; /* LTR */
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
background: #6b6b6b;
|
||||
}
|
||||
|
||||
[dir="rtl"] .ui-dialog .ui-dialog-titlebar {
|
||||
padding-right: 15px;
|
||||
padding-left: 49px;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 1.231em;
|
||||
font-weight: 600;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 12px; /* LTR */
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
transition: all 0.1s;
|
||||
border: 3px solid #6b6b6b;
|
||||
border-radius: 5px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar-close:hover,
|
||||
.ui-dialog .ui-dialog-titlebar-close:focus {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
|
||||
right: auto;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-icon.ui-icon-closethick {
|
||||
margin-top: -8px;
|
||||
background: url(../../images/core/ffffff/ex.svg) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-widget-content.ui-dialog-content {
|
||||
overflow: auto;
|
||||
padding: 1em;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.views-ui-dialog .ui-widget-content.ui-dialog-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-widget-content.ui-dialog-buttonpane {
|
||||
/* border-top: 1px solid #bfbfbf; */
|
||||
margin: 0;
|
||||
padding: 15px 20px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
background: #f5f5f2;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
|
||||
float: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-content {
|
||||
position: static;
|
||||
}
|
||||
|
||||
/* Form action buttons are moved in dialogs. Remove empty space. */
|
||||
|
||||
.ui-dialog .ui-dialog-content .form-actions {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-dialog .ajax-progress-throbber {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 48.5%;
|
||||
/* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
|
||||
left: 49%; /* LTR */
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 4px;
|
||||
opacity: 0.9;
|
||||
border-radius: 7px;
|
||||
background-color: #232323;
|
||||
background-image: url(../../images/loading-small.gif);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
[dir="rtl"] .ui-dialog .ajax-progress-throbber {
|
||||
right: 49%;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.ui-dialog .ajax-progress-throbber .throbber,
|
||||
.ui-dialog .ajax-progress-throbber .message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
|
||||
background: none;
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
/**
|
||||
* Presentational styles for Drupal dialogs.
|
||||
*/
|
||||
|
||||
.ui-dialog {
|
||||
position: absolute;
|
||||
z-index: 1260;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@media all and (max-width: 48em) { /* 768px */
|
||||
.ui-dialog {
|
||||
min-width: 92%;
|
||||
max-width: 92%;
|
||||
}
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar {
|
||||
padding: 15px 49px 15px 15px; /* LTR */
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
background: #6b6b6b;
|
||||
}
|
||||
[dir="rtl"] .ui-dialog .ui-dialog-titlebar {
|
||||
padding-right: 15px;
|
||||
padding-left: 49px;
|
||||
}
|
||||
.ui-dialog .ui-dialog-title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 1.231em;
|
||||
font-weight: 600;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 12px; /* LTR */
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-transition: all 0.1s;
|
||||
transition: all 0.1s;
|
||||
border: 3px solid #6b6b6b;
|
||||
border-radius: 5px;
|
||||
background: none;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar-close:hover,
|
||||
.ui-dialog .ui-dialog-titlebar-close:focus {
|
||||
border-color: #fff;
|
||||
}
|
||||
[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
|
||||
right: auto;
|
||||
left: 20px;
|
||||
}
|
||||
.ui-dialog .ui-icon.ui-icon-closethick {
|
||||
margin-top: -8px;
|
||||
background: url(../../images/core/ffffff/ex.svg) 0 0 no-repeat;
|
||||
}
|
||||
.ui-dialog .ui-widget-content.ui-dialog-content {
|
||||
overflow: auto;
|
||||
padding: 1em;
|
||||
background: #fff;
|
||||
}
|
||||
.views-ui-dialog .ui-widget-content.ui-dialog-content {
|
||||
padding: 0;
|
||||
}
|
||||
.ui-dialog .ui-widget-content.ui-dialog-buttonpane {
|
||||
/* border-top: 1px solid #bfbfbf; */
|
||||
margin: 0;
|
||||
padding: 15px 20px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
background: #f5f5f2;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
|
||||
float: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
|
||||
padding: 0;
|
||||
}
|
||||
.ui-dialog .ui-dialog-content {
|
||||
position: static;
|
||||
}
|
||||
|
||||
/* Form action buttons are moved in dialogs. Remove empty space. */
|
||||
.ui-dialog .ui-dialog-content .form-actions {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ui-dialog .ajax-progress-throbber {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 48.5%;
|
||||
/* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
|
||||
left: 49%; /* LTR */
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 4px;
|
||||
opacity: 0.9;
|
||||
border-radius: 7px;
|
||||
background-color: #232323;
|
||||
background-image: url(../../images/loading-small.gif);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
[dir="rtl"] .ui-dialog .ajax-progress-throbber {
|
||||
right: 49%;
|
||||
left: auto;
|
||||
}
|
||||
.ui-dialog .ajax-progress-throbber .throbber,
|
||||
.ui-dialog .ajax-progress-throbber .message {
|
||||
display: none;
|
||||
}
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
|
||||
position: relative;
|
||||
}
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
|
||||
top: 10px;
|
||||
}
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
|
||||
background: none;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* Divider.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: rgba(142, 146, 156, 0.5);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* Divider.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: var(--color-divider);
|
||||
}
|
||||
@@ -0,0 +1,468 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @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 {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
:root {
|
||||
/**
|
||||
* Dropbutton
|
||||
*/
|
||||
/* Variant variables: small. */
|
||||
/* Variant variables: extra small. */
|
||||
}
|
||||
|
||||
.dropbutton-wrapper {
|
||||
display: inline-flex;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.form-actions .dropbutton-wrapper {
|
||||
margin: 0.5rem 1rem 0.5rem 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-actions .dropbutton-wrapper {
|
||||
margin-right: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.dropbutton-widget {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.js .dropbutton-wrapper.open .dropbutton-widget {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropbutton list.
|
||||
*/
|
||||
|
||||
.dropbutton {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.js .dropbutton {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
/* Variants. */
|
||||
|
||||
.js.no-touchevents .dropbutton--small {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.js.no-touchevents .dropbutton--extrasmall {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* First dropbutton list item.
|
||||
*/
|
||||
|
||||
.js .dropbutton--multiple .dropbutton__item:first-of-type {
|
||||
margin-right: calc(3rem + 1px); /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type {
|
||||
margin-right: 0;
|
||||
margin-left: calc(3rem + 1px);
|
||||
}
|
||||
|
||||
/* First dropbutton list item variants */
|
||||
|
||||
.js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
|
||||
margin-right: calc(2rem + 1px); /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
|
||||
margin-right: 0;
|
||||
margin-left: calc(2rem + 1px);
|
||||
}
|
||||
|
||||
.js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
|
||||
margin-right: calc(1.5rem + 1px); /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
|
||||
margin-right: 0;
|
||||
margin-left: calc(1.5rem + 1px);
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropbutton toggler.
|
||||
*/
|
||||
|
||||
.dropbutton__toggle {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
right: 0; /* LTR */
|
||||
bottom: 0;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 1px solid transparent !important; /* 1 */
|
||||
border-radius: 0 2px 2px 0; /* LTR */
|
||||
background: #d4d4d8;
|
||||
font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton__toggle {
|
||||
right: auto;
|
||||
left: 0;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
.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' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.2384999,1.9384769 1.646703,0.5166019 7.0002189,5.8193359 12.353735,0.5166019 13.761938,1.9384769 7.0002189,8.635742Z' fill='%23222330'/%3E%3C/svg%3E") no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
/* Toggler states. */
|
||||
|
||||
.dropbutton__toggle:hover {
|
||||
color: #222330;
|
||||
background-color: #c2c3ca;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.dropbutton__toggle:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dropbutton__toggle:active {
|
||||
color: #222330;
|
||||
background-color: #adaeb3;
|
||||
}
|
||||
|
||||
.dropbutton-wrapper.open .dropbutton__toggle::before {
|
||||
transform: translate(50%, -50%) rotate(180deg);
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {
|
||||
transform: translate(50%, -50%) rotate(-180deg);
|
||||
}
|
||||
|
||||
/* Toggler variants */
|
||||
|
||||
.no-touchevents .dropbutton--small .dropbutton__toggle {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.no-touchevents .dropbutton--small .dropbutton__toggle::before,
|
||||
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
|
||||
width: 0.75rem; /* 12px */
|
||||
}
|
||||
|
||||
/* High contrast. */
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
/* Default. */
|
||||
.dropbutton__toggle::before {
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
margin-top: -0.19886rem;
|
||||
transform: translate(50%, -50%) rotate(135deg); /* LTR */
|
||||
border: 0.125rem solid;
|
||||
border-width: 0.125rem 0.125rem 0 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.dropbutton-wrapper.open .dropbutton__toggle::before {
|
||||
margin-top: 0.19886rem;
|
||||
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: -0.15467rem;
|
||||
}
|
||||
|
||||
.dropbutton-wrapper.open .dropbutton__toggle::before {
|
||||
margin-top: 0.15467rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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(1rem - 1px) calc(1.5rem - 1px);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #222330;
|
||||
border: 1px solid transparent !important; /* 1 */
|
||||
border-radius: 2px;
|
||||
background-color: #d4d4d8;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
line-height: 1rem;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.dropbutton--multiple .dropbutton__item:first-of-type > * {
|
||||
padding-right: calc(1rem - 1px);
|
||||
padding-left: calc(1rem - 1px);
|
||||
}
|
||||
|
||||
/* Variants */
|
||||
|
||||
.no-touchevents .dropbutton__item--small:first-of-type > * {
|
||||
padding-top: calc(0.625rem - 1px);
|
||||
padding-bottom: calc(0.625rem - 1px);
|
||||
font-size: 0.79rem;
|
||||
line-height: 0.75rem;
|
||||
}
|
||||
|
||||
.no-touchevents .dropbutton__item--extrasmall:first-of-type > * {
|
||||
padding-top: calc(0.375rem - 1px);
|
||||
padding-bottom: calc(0.375rem - 1px);
|
||||
font-size: 0.79rem;
|
||||
line-height: 0.75rem;
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type > *:hover,
|
||||
.dropbutton__item:first-of-type > .button:hover {
|
||||
text-decoration: none;
|
||||
color: #222330;
|
||||
background-color: #c2c3ca;
|
||||
box-shadow: 0 2px 4px rgba(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 #fff, 0 0 0 5px #26a769;
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type > *:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type > *:active {
|
||||
color: #222330;
|
||||
background-color: #adaeb3;
|
||||
}
|
||||
|
||||
.dropbutton--multiple .dropbutton__item:first-of-type > * {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.dropbutton--multiple .dropbutton__item:first-of-type > *:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.js .dropbutton--multiple .dropbutton__item:first-of-type > * {
|
||||
border-radius: 2px 0 0 2px; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type > * {
|
||||
border-radius: 0 2px 2px 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;
|
||||
}
|
||||
|
||||
.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Non-first dropbutton list elements.
|
||||
*/
|
||||
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item {
|
||||
border: 1px solid #d4d4d8;
|
||||
border-bottom: 0;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item ~ .dropbutton__item {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.dropbutton__item ~ .dropbutton__item:last-child {
|
||||
border-bottom: 1px solid #d4d4d8;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropbutton items of non-first dropbutton list elements.
|
||||
*/
|
||||
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > a,
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > .button {
|
||||
position: relative;
|
||||
padding: calc(1rem - 1px);
|
||||
text-decoration: none;
|
||||
color: #545560;
|
||||
border: 1px solid transparent !important; /* 1 */
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
box-shadow: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
line-height: 1rem;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the inherited button border color to transparent for high contrast mode.
|
||||
*/
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > a,
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > .button {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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__item:first-of-type ~ .dropbutton__item--small > a,
|
||||
.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--small > .button {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
font-size: 0.79rem;
|
||||
line-height: 0.75rem;
|
||||
}
|
||||
|
||||
.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > a,
|
||||
.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > .button {
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
font-size: 0.79rem;
|
||||
line-height: 0.75rem;
|
||||
}
|
||||
|
||||
/* States. */
|
||||
|
||||
.dropbutton__item > *:focus {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > *:hover {
|
||||
color: #222330;
|
||||
background: #f3f4f9;
|
||||
}
|
||||
|
||||
.dropbutton__item > .button:not(:focus) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > *:focus {
|
||||
border-color: #26a769 !important; /* 1 */
|
||||
box-shadow: inset 0 0 0 1px #26a769, 0 0 0 1px #26a769;
|
||||
}
|
||||
@@ -0,0 +1,405 @@
|
||||
/**
|
||||
* @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.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
: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;
|
||||
/* 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 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.form-actions .dropbutton-wrapper {
|
||||
margin: var(--space-xs) var(--space-m) var(--space-xs) 0;
|
||||
}
|
||||
[dir="rtl"] .form-actions .dropbutton-wrapper {
|
||||
margin-right: 0;
|
||||
margin-left: var(--space-m);
|
||||
}
|
||||
|
||||
.dropbutton-widget {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.js .dropbutton-wrapper.open .dropbutton-widget {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropbutton list.
|
||||
*/
|
||||
.dropbutton {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
[dir="rtl"] .dropbutton {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.js .dropbutton {
|
||||
height: var(--dropbutton-toggle-size);
|
||||
}
|
||||
|
||||
/* Variants. */
|
||||
.js.no-touchevents .dropbutton--small {
|
||||
height: var(--dropbutton-small-toggle-size);
|
||||
}
|
||||
|
||||
.js.no-touchevents .dropbutton--extrasmall {
|
||||
height: var(--dropbutton-extrasmall-toggle-size);
|
||||
}
|
||||
|
||||
/**
|
||||
* First dropbutton list item.
|
||||
*/
|
||||
.js .dropbutton--multiple .dropbutton__item:first-of-type {
|
||||
margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
|
||||
}
|
||||
[dir="rtl"].js .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 */
|
||||
.js.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 */
|
||||
}
|
||||
[dir="rtl"].js.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));
|
||||
}
|
||||
|
||||
.js.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 */
|
||||
}
|
||||
[dir="rtl"].js.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-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' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.2384999,1.9384769 1.646703,0.5166019 7.0002189,5.8193359 12.353735,0.5166019 13.761938,1.9384769 7.0002189,8.635742Z' fill='%23222330'/%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 rgba(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"] .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 screen and (-ms-high-contrast: 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: 0.125rem solid;
|
||||
border-width: 0.125rem 0.125rem 0 0;
|
||||
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;
|
||||
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-right: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
|
||||
padding-left: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
|
||||
}
|
||||
|
||||
/* Variants */
|
||||
.no-touchevents .dropbutton__item--small:first-of-type > * {
|
||||
padding-top: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
|
||||
padding-bottom: 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__item--extrasmall: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 {
|
||||
text-decoration: none;
|
||||
color: var(--button-fg-color);
|
||||
background-color: var(--button--hover-bg-color);
|
||||
box-shadow: 0 2px 4px rgba(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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.js .dropbutton--multiple .dropbutton__item:first-of-type > * {
|
||||
border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */
|
||||
}
|
||||
[dir="rtl"].js .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;
|
||||
}
|
||||
|
||||
.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Non-first dropbutton list elements.
|
||||
*/
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item {
|
||||
border: var(--dropbutton-border-size) solid var(--color-lightgray);
|
||||
border-bottom: 0;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.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-lightgray);
|
||||
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 > a,
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > .button {
|
||||
position: relative;
|
||||
padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
|
||||
text-decoration: none;
|
||||
color: var(--color-davysgrey);
|
||||
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
|
||||
border-radius: var(--dropbutton-border-radius-size);
|
||||
background: var(--color-white);
|
||||
box-shadow: 0;
|
||||
font-size: var(--dropbutton-font-size);
|
||||
font-weight: normal;
|
||||
line-height: var(--dropbutton-line-height);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the inherited button border color to transparent for high contrast mode.
|
||||
*/
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > a,
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > .button {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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__item:first-of-type ~ .dropbutton__item--small > a,
|
||||
.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--small > .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__item:first-of-type ~ .dropbutton__item--extrasmall > a,
|
||||
.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > .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-whitesmoke);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Entity meta.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
.entity-meta__header {
|
||||
padding: 0.5rem 1rem 1rem;
|
||||
color: #222330;
|
||||
border: 1px solid rgba(216, 217, 224, 0.8);
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.entity-meta__header {
|
||||
padding: 1rem 1.5rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-meta__header .form-item {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.entity-meta__title {
|
||||
margin: 0.25em 0;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
font-size: 1.231em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.entity-meta__revision {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.entity-meta__header .form-type--item .form-item__label {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.entity-meta__header .form-type--item .form-item__label::after {
|
||||
content: ":";
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* @file
|
||||
* Entity meta.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
--size-entity-meta-spacing: var(--space-xs);
|
||||
}
|
||||
|
||||
.entity-meta__header {
|
||||
padding: calc(var(--space-m) - var(--size-entity-meta-spacing)) var(--space-m) calc(var(--space-l) - var(--size-entity-meta-spacing));
|
||||
color: var(--color-fg);
|
||||
border: var(--details-border-size) solid var(--details-border-color);
|
||||
border-radius: var(--details-accordion-border-size-radius);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.entity-meta__header {
|
||||
padding: calc(var(--space-l) - var(--size-entity-meta-spacing)) var(--space-l) var(--space-l);
|
||||
}
|
||||
}
|
||||
|
||||
.entity-meta__header .form-item {
|
||||
margin-top: var(--size-entity-meta-spacing);
|
||||
margin-bottom: var(--size-entity-meta-spacing);
|
||||
}
|
||||
|
||||
.entity-meta__title {
|
||||
margin: 0.25em 0;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
font-size: 1.231em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.entity-meta__revision {
|
||||
margin-top: var(--space-l);
|
||||
}
|
||||
|
||||
.entity-meta__header .form-type--item .form-item__label {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.entity-meta__header .form-type--item .form-item__label::after {
|
||||
content: ":";
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Fieldset styles.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
.fieldset {
|
||||
min-width: 0;
|
||||
margin: 1rem 0;
|
||||
padding: 0;
|
||||
color: #222330;
|
||||
border: 1px solid rgba(216, 217, 224, 0.8);
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0
|
||||
2px
|
||||
4px
|
||||
rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.fieldset--group {
|
||||
color: inherit;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* IE workaround. */
|
||||
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
|
||||
_:-ms-fullscreen,
|
||||
.fieldset {
|
||||
display: table;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fieldset legend.
|
||||
*/
|
||||
|
||||
.fieldset__legend {
|
||||
display: contents; /* For Firefox. */
|
||||
float: left; /* iOS Safari, Android Chrome, Edge. */
|
||||
width: 100%; /* iOS Safari, Android Chrome, Edge. */
|
||||
margin-bottom: 1rem;
|
||||
color: #545560;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.fieldset__legend {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fieldset__legend--composite {
|
||||
float: none;
|
||||
width: auto;
|
||||
margin-top: 0; /* IE11 and Edge do not collapse this margin. Ideally this would be 4px */
|
||||
margin-bottom: 0.25rem; /* 4px */
|
||||
color: inherit;
|
||||
font-size: 0.889rem; /* 14px */
|
||||
line-height: 1.125rem; /* 18px */
|
||||
}
|
||||
|
||||
/* This is used only on install configure form. */
|
||||
|
||||
.fieldset__legend--group {
|
||||
text-transform: uppercase;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.fieldset__label {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.fieldset__label {
|
||||
padding-right: 1.5rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fieldset__label--group {
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.fieldset__label.is-disabled {
|
||||
color: #82828c;
|
||||
}
|
||||
|
||||
.fieldset__label.has-error {
|
||||
color: #d72222;
|
||||
}
|
||||
|
||||
.fieldset__description {
|
||||
margin-top: 0.375rem; /* 6px */
|
||||
margin-bottom: 0.375rem; /* 6px */
|
||||
color: #545560;
|
||||
font-size: 0.79rem; /* ~13px */
|
||||
line-height: 1.0625rem; /* 17px */
|
||||
}
|
||||
|
||||
.fieldset__description.is-disabled {
|
||||
color: #82828c;
|
||||
}
|
||||
|
||||
/* Error message (Inline form errors). */
|
||||
|
||||
.fieldset__error-message {
|
||||
margin-top: 0.375rem; /* 6px */
|
||||
margin-bottom: 0.375rem; /* 6px */
|
||||
color: #d72222;
|
||||
font-size: 0.79rem; /* ~13px */
|
||||
font-weight: normal;
|
||||
line-height: 1.0625rem; /* 17px */
|
||||
}
|
||||
|
||||
.fieldset__wrapper {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.fieldset__wrapper {
|
||||
margin: 1.5rem 1.5rem 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fieldset__legend--visible ~ .fieldset__wrapper {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.fieldset__wrapper--group {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the unnecessary extra padding of container-inline wrapper if it's used
|
||||
* inside a fieldset.
|
||||
*/
|
||||
|
||||
.fieldset__wrapper > .container-inline {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* @file
|
||||
* Fieldset styles.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* IE workaround. */
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
.fieldset {
|
||||
display: table;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fieldset legend.
|
||||
*/
|
||||
.fieldset__legend {
|
||||
display: contents; /* For Firefox. */
|
||||
float: left; /* iOS Safari, Android Chrome, Edge. */
|
||||
width: 100%; /* iOS Safari, Android Chrome, Edge. */
|
||||
margin-bottom: var(--space-m);
|
||||
color: var(--color-davysgrey);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.fieldset__legend {
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
}
|
||||
|
||||
.fieldset__legend--composite {
|
||||
float: none;
|
||||
width: auto;
|
||||
margin-top: 0; /* IE11 and Edge do not collapse this margin. Ideally this would be 4px */
|
||||
margin-bottom: calc(var(--space-xs) / 2); /* 4px */
|
||||
color: inherit;
|
||||
font-size: var(--font-size-s); /* 14px */
|
||||
line-height: calc(18rem / 16); /* 18px */
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.fieldset__label {
|
||||
padding-right: var(--space-l);
|
||||
padding-left: var(--space-l);
|
||||
}
|
||||
}
|
||||
|
||||
.fieldset__label--group {
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.fieldset__label.is-disabled {
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
|
||||
.fieldset__label.has-error {
|
||||
color: var(--input--error-color);
|
||||
}
|
||||
|
||||
.fieldset__description {
|
||||
margin-top: calc(6rem / 16); /* 6px */
|
||||
margin-bottom: 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-top: calc(6rem / 16); /* 6px */
|
||||
margin-bottom: 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);
|
||||
}
|
||||
|
||||
@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-top: 0;
|
||||
}
|
||||
|
||||
.fieldset__wrapper--group {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the unnecessary extra padding of container-inline wrapper if it's used
|
||||
* inside a fieldset.
|
||||
*/
|
||||
.fieldset__wrapper > .container-inline {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Extends styles of the file link.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
.file {
|
||||
min-height: 1.0625rem;
|
||||
padding-left: 1.5rem; /* LTR */
|
||||
background-position: left 0.0625rem;
|
||||
background-size: 1rem 1rem;
|
||||
font-size: 0.889rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .file {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.file__size {
|
||||
color: #545560;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* @file
|
||||
* Extends styles of the file link.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.file {
|
||||
min-height: calc(var(--space-m) + 0.0625rem);
|
||||
padding-left: var(--space-l); /* LTR */
|
||||
background-position: left 0.0625rem;
|
||||
background-size: var(--space-m) var(--space-m);
|
||||
font-size: var(--font-size-s);
|
||||
line-height: calc(18rem / 16);
|
||||
}
|
||||
[dir="rtl"] .file {
|
||||
padding-right: var(--space-l);
|
||||
}
|
||||
|
||||
.file__size {
|
||||
color: var(--color-davysgrey);
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Checkbox and radio input elements styles for IE11 and below.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
.form-boolean::-ms-check {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: text-bottom;
|
||||
color: transparent; /* IE */
|
||||
border: 1px solid #8e929c;
|
||||
border-radius: 2px;
|
||||
background: #fff no-repeat 50% 50%;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
|
||||
background-size: 100% 100%;
|
||||
box-shadow: 0 0 0 4px transparent;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio::-ms-check {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
border-radius: 19px;
|
||||
}
|
||||
|
||||
.form-boolean:focus::-ms-check {
|
||||
color: transparent; /* IE */
|
||||
}
|
||||
|
||||
.form-boolean:active::-ms-check,
|
||||
.form-boolean:hover::-ms-check {
|
||||
border-color: #222330;
|
||||
box-shadow: inset 0 0 0 1px #222330;
|
||||
}
|
||||
|
||||
.form-boolean:focus:active::-ms-check,
|
||||
.form-boolean:focus:hover::-ms-check {
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
|
||||
}
|
||||
|
||||
.form-boolean--type-checkbox:checked::-ms-check {
|
||||
color: transparent; /* IE */
|
||||
border-color: #003cc5;
|
||||
background-color: #003cc5;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.form-boolean--type-checkbox:checked:active::-ms-check,
|
||||
.form-boolean--type-checkbox:checked:hover::-ms-check {
|
||||
border-color: #222330;
|
||||
background-color: #222330;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked::-ms-check {
|
||||
color: transparent; /* IE */
|
||||
border-color: #003cc5;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
|
||||
box-shadow: inset 0 0 0 1px #003cc5;
|
||||
}
|
||||
|
||||
.form-boolean--type-checkbox:checked:active::-ms-check,
|
||||
.form-boolean--type-checkbox:checked:hover::-ms-check {
|
||||
border-color: #222330;
|
||||
background-color: #222330;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked::-ms-check {
|
||||
border-color: #003cc5;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
|
||||
box-shadow: inset 0 0 0 1px #003cc5;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked:focus::-ms-check {
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked:active::-ms-check,
|
||||
.form-boolean--type-radio:checked:hover::-ms-check {
|
||||
border-color: #222330;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
|
||||
box-shadow: inset 0 0 0 1px #222330;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked:focus:active::-ms-check,
|
||||
.form-boolean--type-radio:checked:focus:hover::-ms-check {
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
|
||||
}
|
||||
|
||||
/**
|
||||
* Error states.
|
||||
*/
|
||||
|
||||
.form-boolean.error::-ms-check {
|
||||
border-color: #d72222;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 0 0 1px #d72222;
|
||||
}
|
||||
|
||||
.form-boolean.error:active::-ms-check,
|
||||
.form-boolean.error:hover::-ms-check {
|
||||
box-shadow: inset 0 0 0 1px #d72222;
|
||||
}
|
||||
|
||||
.form-boolean.error:focus::-ms-check,
|
||||
.form-boolean.error:focus:active::-ms-check,
|
||||
.form-boolean.error:focus:hover::-ms-check {
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
|
||||
}
|
||||
|
||||
.form-boolean.error:checked:active::-ms-check,
|
||||
.form-boolean.error:checked:hover::-ms-check {
|
||||
border-color: #d72222;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.form-boolean--type-checkbox.error:checked::-ms-check,
|
||||
.form-boolean--type-checkbox.error:checked:active::-ms-check,
|
||||
.form-boolean--type-checkbox.error:checked:hover::-ms-check {
|
||||
background-color: #d72222;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio.error:checked::-ms-check,
|
||||
.form-boolean--type-radio.error:checked:active::-ms-check,
|
||||
.form-boolean--type-radio.error:checked:hover::-ms-check {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.form-boolean--type-radio.error:checked:focus::-ms-check {
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
|
||||
}
|
||||
|
||||
/**
|
||||
* Disabled states.
|
||||
*/
|
||||
|
||||
.form-boolean[disabled]::-ms-check,
|
||||
.form-boolean[disabled]:hover::-ms-check,
|
||||
.form-boolean[disabled].error::-ms-check,
|
||||
.form-boolean[disabled].error:hover::-ms-check,
|
||||
.form-boolean--type-radio[disabled]:focus:active::-ms-check,
|
||||
.form-boolean--type-radio[disabled]:active:hover::-ms-check,
|
||||
.form-boolean--type-radio[disabled].error:active:hover::-ms-check {
|
||||
border-color: #bababf;
|
||||
background-color: #f2f2f3;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-boolean--type-checkbox[disabled]:checked::-ms-check {
|
||||
color: transparent; /* IE */
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.form-boolean--type-radio[disabled]:checked::-ms-check,
|
||||
.form-boolean--type-radio[disabled].error:checked::-ms-check {
|
||||
color: transparent; /* IE */
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
/**
|
||||
* @file
|
||||
* Checkbox and radio input elements styles for IE11 and below.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.form-boolean::-ms-check {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: text-bottom;
|
||||
color: transparent; /* IE */
|
||||
border: 1px solid var(--input-border-color);
|
||||
border-radius: 2px;
|
||||
background: var(--input-bg-color) no-repeat 50% 50%;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
|
||||
background-size: 100% 100%;
|
||||
box-shadow: 0 0 0 4px transparent;
|
||||
}
|
||||
.form-boolean--type-radio::-ms-check {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
border-radius: 19px;
|
||||
}
|
||||
.form-boolean:focus::-ms-check {
|
||||
color: transparent; /* IE */
|
||||
}
|
||||
.form-boolean:active::-ms-check,
|
||||
.form-boolean:hover::-ms-check {
|
||||
border-color: var(--input-fg-color);
|
||||
box-shadow: inset 0 0 0 1px var(--input-fg-color);
|
||||
}
|
||||
.form-boolean:focus:active::-ms-check,
|
||||
.form-boolean:focus:hover::-ms-check {
|
||||
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-checkbox:checked::-ms-check {
|
||||
color: transparent; /* IE */
|
||||
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' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E");
|
||||
}
|
||||
.form-boolean--type-checkbox:checked:active::-ms-check,
|
||||
.form-boolean--type-checkbox:checked:hover::-ms-check {
|
||||
border-color: var(--input-fg-color);
|
||||
background-color: var(--input-fg-color);
|
||||
}
|
||||
.form-boolean--type-radio:checked::-ms-check {
|
||||
color: transparent; /* IE */
|
||||
border-color: var(--input--focus-border-color);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
|
||||
box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
|
||||
}
|
||||
.form-boolean--type-checkbox:checked:active::-ms-check,
|
||||
.form-boolean--type-checkbox:checked:hover::-ms-check {
|
||||
border-color: var(--input-fg-color);
|
||||
background-color: var(--input-fg-color);
|
||||
}
|
||||
.form-boolean--type-radio:checked::-ms-check {
|
||||
border-color: var(--input--focus-border-color);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
|
||||
box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
|
||||
}
|
||||
.form-boolean--type-radio:checked:focus::-ms-check {
|
||||
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:active::-ms-check,
|
||||
.form-boolean--type-radio:checked:hover::-ms-check {
|
||||
border-color: var(--input-fg-color);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
|
||||
box-shadow: inset 0 0 0 1px var(--input-fg-color);
|
||||
}
|
||||
.form-boolean--type-radio:checked:focus:active::-ms-check,
|
||||
.form-boolean--type-radio:checked:focus:hover::-ms-check {
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Error states.
|
||||
*/
|
||||
.form-boolean.error::-ms-check {
|
||||
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::-ms-check,
|
||||
.form-boolean.error:hover::-ms-check {
|
||||
box-shadow: inset 0 0 0 1px var(--input--error-border-color);
|
||||
}
|
||||
.form-boolean.error:focus::-ms-check,
|
||||
.form-boolean.error:focus:active::-ms-check,
|
||||
.form-boolean.error:focus:hover::-ms-check {
|
||||
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::-ms-check,
|
||||
.form-boolean.error:checked:hover::-ms-check {
|
||||
border-color: var(--input--error-border-color);
|
||||
background-color: var(--input-bg-color);
|
||||
}
|
||||
.form-boolean--type-checkbox.error:checked::-ms-check,
|
||||
.form-boolean--type-checkbox.error:checked:active::-ms-check,
|
||||
.form-boolean--type-checkbox.error:checked:hover::-ms-check {
|
||||
background-color: var(--input--error-border-color);
|
||||
}
|
||||
.form-boolean--type-radio.error:checked::-ms-check,
|
||||
.form-boolean--type-radio.error:checked:active::-ms-check,
|
||||
.form-boolean--type-radio.error:checked:hover::-ms-check {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
|
||||
}
|
||||
.form-boolean--type-radio.error:checked:focus::-ms-check {
|
||||
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]::-ms-check,
|
||||
.form-boolean[disabled]:hover::-ms-check,
|
||||
.form-boolean[disabled].error::-ms-check,
|
||||
.form-boolean[disabled].error:hover::-ms-check,
|
||||
.form-boolean--type-radio[disabled]:focus:active::-ms-check,
|
||||
.form-boolean--type-radio[disabled]:active:hover::-ms-check,
|
||||
.form-boolean--type-radio[disabled].error:active:hover::-ms-check {
|
||||
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::-ms-check {
|
||||
color: transparent; /* IE */
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
|
||||
}
|
||||
.form-boolean--type-radio[disabled]:checked::-ms-check,
|
||||
.form-boolean--type-radio[disabled].error:checked::-ms-check {
|
||||
color: transparent; /* IE */
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
|
||||
}
|
||||
@@ -0,0 +1,255 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Checkbox and radio input elements.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
* Form item modifiers.
|
||||
*/
|
||||
|
||||
.form-type--boolean {
|
||||
margin-left: 1.6875rem; /* LTR */
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-type--boolean {
|
||||
margin-right: 1.6875rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Radio and checkbox items that are the child of a form item.
|
||||
*/
|
||||
|
||||
.form-type--boolean .form-boolean {
|
||||
position: relative;
|
||||
top: 0.75rem;
|
||||
float: left; /* LTR */
|
||||
margin-left: -1.6875rem; /* LTR */
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-type--boolean .form-boolean {
|
||||
float: right;
|
||||
margin-right: -1.6875rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.form-type--boolean.form-item--no-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-type--boolean.form-item--no-label {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.form-type--boolean.form-item--no-label .form-boolean,
|
||||
[dir="rtl"] .form-type--boolean.form-item--no-label .form-boolean {
|
||||
position: static;
|
||||
float: none;
|
||||
margin-right: 0;
|
||||
margin-left: 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-top: 0.4em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Input appearance.
|
||||
*/
|
||||
|
||||
.form-boolean {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: text-bottom;
|
||||
border: 1px solid #8e929c;
|
||||
border-radius: 2px;
|
||||
background: #fff no-repeat 50% 50%;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
|
||||
background-size: 100% 100%;
|
||||
box-shadow: 0 0 0 4px transparent;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
border-radius: 19px;
|
||||
}
|
||||
|
||||
.form-boolean:active,
|
||||
.form-boolean:hover {
|
||||
border-color: #222330;
|
||||
box-shadow: inset 0 0 0 1px #222330;
|
||||
}
|
||||
|
||||
.form-boolean:focus:active,
|
||||
.form-boolean:focus:hover {
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
|
||||
}
|
||||
|
||||
.form-boolean--type-checkbox:checked {
|
||||
border-color: #003cc5;
|
||||
background-color: #003cc5;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.form-boolean--type-checkbox:checked:active,
|
||||
.form-boolean--type-checkbox:checked:hover {
|
||||
border-color: #222330;
|
||||
background-color: #222330;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked {
|
||||
border-color: #003cc5;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
|
||||
box-shadow: inset 0 0 0 1px #003cc5;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked:focus {
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked:active,
|
||||
.form-boolean--type-radio:checked:hover {
|
||||
border-color: #222330;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
|
||||
box-shadow: inset 0 0 0 1px #222330;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked:focus:active,
|
||||
.form-boolean--type-radio:checked:focus:hover {
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
|
||||
}
|
||||
|
||||
/**
|
||||
* Error states.
|
||||
*/
|
||||
|
||||
.form-boolean.error {
|
||||
border-color: #d72222;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 0 0 1px #d72222;
|
||||
}
|
||||
|
||||
.form-boolean.error:active,
|
||||
.form-boolean.error:hover {
|
||||
box-shadow: inset 0 0 0 1px #d72222;
|
||||
}
|
||||
|
||||
.form-boolean.error:focus,
|
||||
.form-boolean.error:focus:active,
|
||||
.form-boolean.error:focus:hover {
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
|
||||
}
|
||||
|
||||
.form-boolean.error:checked:active,
|
||||
.form-boolean.error:checked:hover {
|
||||
border-color: #d72222;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.form-boolean--type-checkbox.error:checked,
|
||||
.form-boolean--type-checkbox.error:checked:active,
|
||||
.form-boolean--type-checkbox.error:checked:hover {
|
||||
background-color: #d72222;
|
||||
}
|
||||
|
||||
.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' viewBox='0 0 17 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 #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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: #bababf;
|
||||
background-color: #f2f2f3;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-boolean--type-checkbox[disabled]:checked {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' 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' viewBox='0 0 17 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,177 @@
|
||||
/**
|
||||
* @file
|
||||
* Checkbox and radio input elements.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
/**
|
||||
* Form item modifiers.
|
||||
*/
|
||||
.form-type--boolean {
|
||||
margin-left: var(--input--label-spacing); /* LTR */
|
||||
line-height: var(--space-l);
|
||||
}
|
||||
[dir="rtl"] .form-type--boolean {
|
||||
margin-right: var(--input--label-spacing);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Radio and checkbox items that are the child of a form item.
|
||||
*/
|
||||
.form-type--boolean .form-boolean {
|
||||
position: relative;
|
||||
top: calc(var(--space-l) / 2);
|
||||
float: left; /* LTR */
|
||||
margin-left: calc(var(--input--label-spacing) * -1); /* LTR */
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
[dir="rtl"] .form-type--boolean .form-boolean {
|
||||
float: right;
|
||||
margin-right: calc(var(--input--label-spacing) * -1);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.form-type--boolean.form-item--no-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
[dir="rtl"] .form-type--boolean.form-item--no-label {
|
||||
margin-right: 0;
|
||||
}
|
||||
.form-type--boolean.form-item--no-label .form-boolean,
|
||||
[dir="rtl"] .form-type--boolean.form-item--no-label .form-boolean {
|
||||
position: static;
|
||||
float: none;
|
||||
margin-right: 0;
|
||||
margin-left: 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-top: 0.4em;
|
||||
margin-bottom: 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-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
|
||||
background-size: 100% 100%;
|
||||
box-shadow: 0 0 0 4px transparent;
|
||||
appearance: none;
|
||||
}
|
||||
.form-boolean--type-radio {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
border-radius: 19px;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%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);
|
||||
}
|
||||
.form-boolean--type-radio:checked {
|
||||
border-color: var(--input--focus-border-color);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%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: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' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
|
||||
box-shadow: inset 0 0 0 1px var(--input-fg-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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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' viewBox='0 0 17 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' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' 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' viewBox='0 0 17 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,65 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styles for multiple field tables.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
.field-multiple-table {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-item--multiple .field-add-more-submit {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for multiple field tables.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.field-multiple-table {
|
||||
margin-top: var(--space-m);
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
|
||||
.form-item--multiple .field-add-more-submit {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -0,0 +1,319 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styles for the managed file widget.
|
||||
*
|
||||
* This includes the styles for the file widgets and the image widgets.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Inside (draggable) tables, this should be flex-displayed. This keeps even
|
||||
* long file names in the same visual line where the drag handle is.
|
||||
*/
|
||||
|
||||
.draggable .form-managed-file.has-value .form-managed-file__main {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 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-bottom: 1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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-top: 1rem; /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.draggable .form-managed-file.has-value .form-managed-file__meta {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Internet Explorer 11 does not shrinks our meta elements if one of its parent
|
||||
* element is a table. Without this fix, the file widgets table cell would have
|
||||
* the same width that is needed for displaying the file name in a single line.
|
||||
*
|
||||
* @see https://github.com/philipwalton/flexbugs/issues/179
|
||||
*/
|
||||
|
||||
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
*::-ms-backdrop,
|
||||
td .form-managed-file__meta {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Add some 'end' margin if there are other meta inputs. */
|
||||
|
||||
.form-managed-file.has-meta .form-managed-file__image-preview {
|
||||
margin-right: 1rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-managed-file.has-meta .form-managed-file__image-preview {
|
||||
margin-right: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 16rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Internet Explorer 11 does not increase the width of those flex items that are
|
||||
* allowed to be wrapped. We just simply change the basis to the max-width.
|
||||
*/
|
||||
|
||||
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
*::-ms-backdrop,
|
||||
.form-managed-file__meta-items {
|
||||
flex-basis: 32rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Meta items wrapper.
|
||||
* This markup element is needed only for working around the same IE 11 bug that
|
||||
* is described above, at the 'meta' element.
|
||||
*
|
||||
* @see https://github.com/philipwalton/flexbugs/issues/179
|
||||
*/
|
||||
|
||||
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
*::-ms-backdrop,
|
||||
td .form-managed-file__meta-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Modify component defaults for file/image widgets.
|
||||
*/
|
||||
|
||||
/**
|
||||
* File component style overrides for managed file widgets.
|
||||
*/
|
||||
|
||||
.form-managed-file .file {
|
||||
word-break: break-all;
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.form-managed-file .file__size {
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.form-managed-file__main .file {
|
||||
flex: 1 1 auto;
|
||||
margin: 0.5rem 1rem 0.5rem 0; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-managed-file__main .file {
|
||||
margin-right: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix and override the table-related bug of Internet Explorer 11 (described at
|
||||
* the 'meta' element).
|
||||
*
|
||||
* @see https://github.com/philipwalton/flexbugs/issues/179
|
||||
*/
|
||||
|
||||
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
*::-ms-backdrop,
|
||||
td .form-managed-file__main .file {
|
||||
flex: 0 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The file upload input.
|
||||
*/
|
||||
|
||||
.form-managed-file__main .form-element--api-file {
|
||||
flex: 1 1 auto;
|
||||
min-width: 1px; /* This makes the element to be shrinked on IE11 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Limiting the width of form items inside the meta element.
|
||||
*/
|
||||
|
||||
.form-managed-file__meta .form-item {
|
||||
max-width: 32rem;
|
||||
margin-top: 0; /* Top margin is added by the parent element */
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reduce the bottom margin of the last 'meta' form-item for field multiple
|
||||
* tables.
|
||||
*/
|
||||
|
||||
.form-managed-file__meta .form-item:last-child {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-managed-file__meta .form-element {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add side margins if a table precedes the managed file form element.
|
||||
*/
|
||||
|
||||
.file-widget-multiple.has-table .form-type--managed-file {
|
||||
margin-right: 1rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for the managed file widget.
|
||||
*
|
||||
* This includes the styles for the file widgets and the image widgets.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
: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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Inside (draggable) tables, this should be flex-displayed. This keeps even
|
||||
* long file names in the same visual line where the drag handle is.
|
||||
*/
|
||||
.draggable .form-managed-file.has-value .form-managed-file__main {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 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-bottom: var(--space-m);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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-top: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.draggable .form-managed-file.has-value .form-managed-file__meta {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Internet Explorer 11 does not shrinks our meta elements if one of its parent
|
||||
* element is a table. Without this fix, the file widgets table cell would have
|
||||
* the same width that is needed for displaying the file name in a single line.
|
||||
*
|
||||
* @see https://github.com/philipwalton/flexbugs/issues/179
|
||||
*/
|
||||
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
*::-ms-backdrop,
|
||||
td .form-managed-file__meta {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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-bottom: var(--space-m);
|
||||
}
|
||||
|
||||
/* Add some 'end' margin if there are other meta inputs. */
|
||||
.form-managed-file.has-meta .form-managed-file__image-preview {
|
||||
margin-right: var(--space-m); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .form-managed-file.has-meta .form-managed-file__image-preview {
|
||||
margin-right: 0;
|
||||
margin-left: 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-bottom: 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%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Internet Explorer 11 does not increase the width of those flex items that are
|
||||
* allowed to be wrapped. We just simply change the basis to the max-width.
|
||||
*/
|
||||
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
*::-ms-backdrop,
|
||||
.form-managed-file__meta-items {
|
||||
flex-basis: var(--file-widget-form-item-max-width);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Meta items wrapper.
|
||||
* This markup element is needed only for working around the same IE 11 bug that
|
||||
* is described above, at the 'meta' element.
|
||||
*
|
||||
* @see https://github.com/philipwalton/flexbugs/issues/179
|
||||
*/
|
||||
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
*::-ms-backdrop,
|
||||
td .form-managed-file__meta-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Modify component defaults for file/image widgets.
|
||||
*/
|
||||
|
||||
/**
|
||||
* File component style overrides for managed file widgets.
|
||||
*/
|
||||
.form-managed-file .file {
|
||||
word-break: break-all;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.form-managed-file .file__size {
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.form-managed-file__main .file {
|
||||
flex: 1 1 auto;
|
||||
margin: var(--space-xs) var(--space-m) var(--space-xs) 0; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .form-managed-file__main .file {
|
||||
margin-right: 0;
|
||||
margin-left: var(--space-m);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix and override the table-related bug of Internet Explorer 11 (described at
|
||||
* the 'meta' element).
|
||||
*
|
||||
* @see https://github.com/philipwalton/flexbugs/issues/179
|
||||
*/
|
||||
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
*::-ms-backdrop,
|
||||
td .form-managed-file__main .file {
|
||||
flex: 0 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The file upload input.
|
||||
*/
|
||||
.form-managed-file__main .form-element--api-file {
|
||||
flex: 1 1 auto;
|
||||
min-width: 1px; /* This makes the element to be shrinked on IE11 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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-top: 0; /* Top margin is added by the parent element */
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reduce the bottom margin of the last 'meta' form-item for field multiple
|
||||
* tables.
|
||||
*/
|
||||
.form-managed-file__meta .form-item:last-child {
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.form-managed-file__meta .form-element {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add side margins if a table precedes the managed file form element.
|
||||
*/
|
||||
.file-widget-multiple.has-table .form-type--managed-file {
|
||||
margin-right: var(--space-m);
|
||||
margin-left: var(--space-m);
|
||||
}
|
||||
@@ -0,0 +1,250 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for the Password widgets.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Weak */
|
||||
/* Fair */
|
||||
/* Good */
|
||||
/* Strong */
|
||||
}
|
||||
|
||||
/**
|
||||
* Password confirm widget styles.
|
||||
*/
|
||||
|
||||
.password-confirm {
|
||||
max-width: 25rem;
|
||||
}
|
||||
|
||||
.password-confirm__password {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.password-confirm__confirm {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.js .password-confirm__confirm {
|
||||
max-height: 10rem;
|
||||
transition: max-height 0.2s ease-in-out, margin 0.2s 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-top: 0;
|
||||
}
|
||||
|
||||
.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
|
||||
display: none;
|
||||
max-height: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Password strength
|
||||
*
|
||||
* Description and strength indicator for the main input.
|
||||
*/
|
||||
|
||||
.password-strength {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.password-strength__track {
|
||||
height: calc(0.5rem - 2px);
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border: 1px solid #8e929c;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #d4d4d8;
|
||||
}
|
||||
|
||||
.password-strength__track::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.password-strength__bar {
|
||||
min-width: calc(0.5rem - 2px);
|
||||
height: calc(0.5rem - 2px);
|
||||
margin: -1px;
|
||||
transition: width
|
||||
0.5s
|
||||
ease-out;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.5rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.password-strength__bar {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.password-strength__bar {
|
||||
background-color: windowText;
|
||||
}
|
||||
|
||||
.is-initial .password-strength__bar {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.password-strength__title {
|
||||
overflow: hidden;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #545560;
|
||||
font-size: 0.79rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.password-strength__text {
|
||||
color: #222330;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Password strength states */
|
||||
|
||||
.password-strength__bar.is-weak {
|
||||
border-color: #d72222;
|
||||
background-color: #d72222;
|
||||
}
|
||||
|
||||
.password-strength__bar.is-fair {
|
||||
border-color: #977405;
|
||||
background-color: #ffd23f;
|
||||
}
|
||||
|
||||
.password-strength__bar.is-good {
|
||||
border-color: #26a769;
|
||||
background-color: #26a769;
|
||||
}
|
||||
|
||||
.password-strength__bar.is-strong {
|
||||
border-color: #26a769;
|
||||
background-color: #26a769;
|
||||
}
|
||||
|
||||
.is-initial.is-password-empty .password-strength__title {
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Password match message.
|
||||
*
|
||||
* This is the description-like message on the bottom of the password confirm
|
||||
* input.
|
||||
*/
|
||||
|
||||
.password-match-message {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #545560;
|
||||
font-size: 0.79rem;
|
||||
}
|
||||
|
||||
.password-match-message__text {
|
||||
color: #222330;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.is-confirm-empty .password-match-message {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Password suggestions.
|
||||
*
|
||||
* Tips for improving the password.
|
||||
*/
|
||||
|
||||
.password-suggestions {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 1rem;
|
||||
color: #545560;
|
||||
border: 1px solid #d4d4d8;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0
|
||||
2px
|
||||
4px
|
||||
rgba(0, 0, 0, 0.1);
|
||||
font-size: 0.79rem;
|
||||
}
|
||||
|
||||
.password-suggestions__tips {
|
||||
margin: 0.5rem 0 0 1.5rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .password-suggestions__tips {
|
||||
margin-right: 1.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for the Password widgets.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Password confirm widget styles.
|
||||
*/
|
||||
.password-confirm {
|
||||
max-width: 25rem;
|
||||
}
|
||||
|
||||
.password-confirm__password {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.password-confirm__confirm {
|
||||
margin-bottom: 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-top: 0;
|
||||
}
|
||||
|
||||
.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
|
||||
display: none;
|
||||
max-height: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Password strength
|
||||
*
|
||||
* Description and strength indicator for the main input.
|
||||
*/
|
||||
.password-strength {
|
||||
margin-top: var(--progress-bar-spacing-size);
|
||||
margin-bottom: var(--progress-bar-spacing-size);
|
||||
}
|
||||
|
||||
.password-strength__track {
|
||||
height: var(--progress-bar-small-size);
|
||||
margin-top: var(--progress-bar-spacing-size);
|
||||
margin-bottom: 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__bar {
|
||||
min-width: 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;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.password-strength__bar {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.password-strength__bar {
|
||||
background-color: windowText;
|
||||
}
|
||||
|
||||
.is-initial .password-strength__bar {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.password-strength__title {
|
||||
overflow: hidden;
|
||||
margin-top: var(--progress-bar-spacing-size);
|
||||
margin-bottom: var(--progress-bar-spacing-size);
|
||||
color: var(--progress-bar-description-color);
|
||||
font-size: var(--progress-bar-description-font-size);
|
||||
line-height: var(--space-m);
|
||||
}
|
||||
|
||||
.password-strength__text {
|
||||
color: var(--progress-bar-label-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Password strength states */
|
||||
.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);
|
||||
}
|
||||
|
||||
.is-initial.is-password-empty .password-strength__title {
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Password match message.
|
||||
*
|
||||
* This is the description-like message on the bottom of the password confirm
|
||||
* input.
|
||||
*/
|
||||
.password-match-message {
|
||||
margin-top: var(--progress-bar-spacing-size);
|
||||
margin-bottom: var(--progress-bar-spacing-size);
|
||||
color: var(--progress-bar-description-color);
|
||||
font-size: var(--progress-bar-description-font-size);
|
||||
}
|
||||
|
||||
.password-match-message__text {
|
||||
color: var(--progress-bar-label-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.is-confirm-empty .password-match-message {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Password suggestions.
|
||||
*
|
||||
* Tips for improving the password.
|
||||
*/
|
||||
.password-suggestions {
|
||||
margin-top: var(--progress-bar-spacing-size);
|
||||
margin-bottom: var(--space-xs);
|
||||
padding: var(--space-m);
|
||||
color: var(--progress-bar-description-color);
|
||||
border: 1px solid var(--color-lightgray);
|
||||
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: var(--space-xs) 0 0 var(--space-l); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .password-suggestions__tips {
|
||||
margin-right: var(--space-l);
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Select input elements.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
.form-element--type-select {
|
||||
padding-right: calc(2rem - 1px);
|
||||
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 1L7 7L13 1' stroke='%23545560'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-element--type-select {
|
||||
padding-right: calc(1rem - 1px);
|
||||
padding-left: calc(2rem - 1px);
|
||||
background-position: 0 50%;
|
||||
}
|
||||
|
||||
.no-touchevents .form-element--type-select.form-element--extrasmall,
|
||||
.no-touchevents .form-element--type-select[name$="][_weight]"] {
|
||||
padding-right: calc(1.5rem - 1px);
|
||||
background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
|
||||
}
|
||||
|
||||
[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,
|
||||
[dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {
|
||||
padding-right: calc(0.5rem - 1px);
|
||||
padding-left: calc(1.5rem - 1px);
|
||||
}
|
||||
|
||||
.form-element--type-select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 1L7 7L13 1' stroke='%23004adc'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.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 1L7 7L13 1' stroke='%238e929c'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* @file
|
||||
* Select input elements.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.form-element--type-select {
|
||||
padding-right: 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 1L7 7L13 1' stroke='%23545560'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
|
||||
}
|
||||
[dir="rtl"] .form-element--type-select {
|
||||
padding-right: calc(1rem - var(--input-border-size));
|
||||
padding-left: calc(2rem - var(--input-border-size));
|
||||
background-position: 0 50%;
|
||||
}
|
||||
|
||||
.no-touchevents .form-element--type-select.form-element--extrasmall,
|
||||
.no-touchevents .form-element--type-select[name$="][_weight]"] {
|
||||
padding-right: calc(1.5rem - var(--input-border-size));
|
||||
background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
|
||||
}
|
||||
[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,
|
||||
[dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {
|
||||
padding-right: calc(0.5rem - var(--input-border-size));
|
||||
padding-left: calc(1.5rem - var(--input-border-size));
|
||||
}
|
||||
|
||||
.form-element--type-select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 1L7 7L13 1' stroke='%23004adc'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
.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 1L7 7L13 1' stroke='%238e929c'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Text and textarea input elements.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
.form-element {
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
min-height: 3rem; /* iOS. */
|
||||
padding: calc(0.75rem - 1px) calc(1rem - 1px);
|
||||
color: #222330;
|
||||
border: 1px solid #8e929c;
|
||||
border-radius: 0.125rem;
|
||||
background: #fff;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; /* Being able to control inner box shadow on iOS. */
|
||||
}
|
||||
|
||||
.no-touchevents .form-element--extrasmall,
|
||||
.no-touchevents .form-element[name$="][_weight]"] {
|
||||
min-height: 1.5rem; /* iOS. */
|
||||
padding: calc(0.15rem - 1px) calc(0.5rem - 1px);
|
||||
font-size: 0.889rem;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Override normalize.css's search appearance.
|
||||
*/
|
||||
|
||||
.form-element--type-search[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix minor things for specific types.
|
||||
*/
|
||||
|
||||
.form-element--type-date,
|
||||
.form-element--type-time {
|
||||
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 - 1px); /* Text-input fallback for non-supporting browsers like Safari */
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset value border and background of the file input on IE11 and Edge.
|
||||
*/
|
||||
|
||||
.form-element--type-file::-ms-value {
|
||||
border: 0;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Better upload button alignment for Chrome.
|
||||
*/
|
||||
|
||||
.form-element--type-file::-webkit-file-upload-button {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/**
|
||||
* Target IE 11 and Edge.
|
||||
*
|
||||
* Reduce the vertical padding of the file input element to make the browse
|
||||
* button fit into the needed input height.
|
||||
*/
|
||||
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
|
||||
_:-ms-fullscreen,
|
||||
:root .form-element--type-file {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* States.
|
||||
*/
|
||||
|
||||
.form-element:active {
|
||||
border-color: #003cc5;
|
||||
}
|
||||
|
||||
.form-element:hover {
|
||||
border-color: #222330;
|
||||
box-shadow: inset 0 0 0 1px #222330;
|
||||
}
|
||||
|
||||
.form-element:focus {
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
|
||||
}
|
||||
|
||||
.form-element:hover:focus {
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
|
||||
}
|
||||
|
||||
.form-element.error {
|
||||
border-width: 2px;
|
||||
border-color: #d72222;
|
||||
}
|
||||
|
||||
.form-element.error:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-element.error:hover:focus {
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
|
||||
}
|
||||
|
||||
.form-element--type-textarea.error + .cke {
|
||||
border-color: #d72222;
|
||||
}
|
||||
|
||||
.form-element[disabled] {
|
||||
color: #82828c;
|
||||
border-color: #bababf;
|
||||
background-color: #f2f2f3;
|
||||
box-shadow: none;
|
||||
/* https://stackoverflow.com/q/262158#answer-23511280 */
|
||||
-webkit-text-fill-color: #82828c;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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-top: 0.75rem;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.form-element:first-child,
|
||||
.form-item__label + .form-element {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
/**
|
||||
* @file
|
||||
* Text and textarea input elements.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.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 {
|
||||
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 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset value border and background of the file input on IE11 and Edge.
|
||||
*/
|
||||
.form-element--type-file::-ms-value {
|
||||
border: 0;
|
||||
background: inherit;
|
||||
}
|
||||
/**
|
||||
* Better upload button alignment for Chrome.
|
||||
*/
|
||||
.form-element--type-file::-webkit-file-upload-button {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/**
|
||||
* Target IE 11 and Edge.
|
||||
*
|
||||
* Reduce the vertical padding of the file input element to make the browse
|
||||
* button fit into the needed input height.
|
||||
*/
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
:root .form-element--type-file {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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-top: 0.75rem;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.form-element:first-child,
|
||||
.form-item__label + .form-element {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,278 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Main form and form item styles.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #8e929c;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: #8e929c;
|
||||
}
|
||||
|
||||
/* IE 10 and 11 needs this set as important. */
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #8e929c !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* General form item.
|
||||
*/
|
||||
|
||||
.form-item {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 Classy.
|
||||
*/
|
||||
|
||||
tr .form-item,
|
||||
.container-inline .form-item {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Form element label.
|
||||
*/
|
||||
|
||||
.form-item__label {
|
||||
display: table;
|
||||
margin-top: 0.25rem; /* 4px */
|
||||
margin-bottom: 0.25rem; /* 4px */
|
||||
font-size: 0.889rem; /* ~14px */
|
||||
font-weight: bold;
|
||||
line-height: 1.125rem; /* 18px */
|
||||
}
|
||||
|
||||
.form-item__label--multiple-value-form {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.form-item__label[for] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-item__label.option {
|
||||
display: inline;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Label states. */
|
||||
|
||||
.form-item__label.has-error {
|
||||
color: #d72222;
|
||||
}
|
||||
|
||||
.form-item__label.option.has-error {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.form-item__label.is-disabled {
|
||||
cursor: default; /* @todo ...or auto? */
|
||||
color: #82828c;
|
||||
}
|
||||
|
||||
.form-item__label.form-required::after,
|
||||
.fieldset__label.form-required::after {
|
||||
display: inline-block;
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
margin-right: 0.3em;
|
||||
margin-left: 0.3em;
|
||||
content: "";
|
||||
vertical-align: super;
|
||||
/* Use a background image to prevent screen readers from announcing the text. */
|
||||
background-image: url(../../images/core/ee0000/required.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0.4375rem 0.4375rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Form item description.
|
||||
*/
|
||||
|
||||
.form-item__description {
|
||||
margin-top: 0.375rem; /* 6px */
|
||||
margin-bottom: 0.375rem; /* 6px */
|
||||
color: #545560;
|
||||
font-size: 0.79rem; /* ~13px */
|
||||
line-height: 1.0625rem; /* 17px */
|
||||
}
|
||||
|
||||
/* Description states. */
|
||||
|
||||
.form-item__description.is-disabled {
|
||||
color: #82828c;
|
||||
}
|
||||
|
||||
/**
|
||||
* Error message (Inline form errors).
|
||||
*/
|
||||
|
||||
.form-item__error-message {
|
||||
margin-top: 0.375rem; /* 6px */
|
||||
margin-bottom: 0.375rem; /* 6px */
|
||||
color: #d72222;
|
||||
font-size: 0.79rem; /* ~13px */
|
||||
font-weight: normal;
|
||||
line-height: 1.0625rem; /* 17px */
|
||||
}
|
||||
|
||||
.form-item__prefix.is-disabled,
|
||||
.form-item__suffix.is-disabled {
|
||||
color: #82828c;
|
||||
}
|
||||
|
||||
/**
|
||||
* Form actions.
|
||||
*/
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-actions .button,
|
||||
.form-actions .action-link {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-actions .ajax-progress--throbber {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 {
|
||||
margin-right: 0.5rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-item--editor-format .form-item__label,
|
||||
[dir="rtl"] .form-item--editor-format .form-item__prefix,
|
||||
[dir="rtl"] .form-item--editor-format .form-item__suffix {
|
||||
margin-right: 0;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.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: 600px) {
|
||||
.password-strength {
|
||||
width: 100%;
|
||||
}
|
||||
div.form-item div.password-suggestions {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
/**
|
||||
* @file
|
||||
* Main form and form item styles.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
::placeholder {
|
||||
color: var(--input-fg-color--placeholder);
|
||||
}
|
||||
/* IE 10 and 11 needs this set as important. */
|
||||
:-ms-input-placeholder {
|
||||
color: var(--input-fg-color--placeholder) !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* General form item.
|
||||
*/
|
||||
.form-item {
|
||||
margin-top: var(--space-l);
|
||||
margin-bottom: 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 Classy.
|
||||
*/
|
||||
tr .form-item,
|
||||
.container-inline .form-item {
|
||||
margin-top: var(--space-s);
|
||||
margin-bottom: var(--space-s);
|
||||
}
|
||||
|
||||
/**
|
||||
* Form element label.
|
||||
*/
|
||||
.form-item__label {
|
||||
display: table;
|
||||
margin-top: calc(var(--space-xs) / 2); /* 4px */
|
||||
margin-bottom: calc(var(--space-xs) / 2); /* 4px */
|
||||
font-size: var(--font-size-s); /* ~14px */
|
||||
font-weight: bold;
|
||||
line-height: calc(18rem / 16); /* 18px */
|
||||
}
|
||||
.form-item__label--multiple-value-form {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
.form-item__label[for] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-item__label.option {
|
||||
display: inline;
|
||||
font-weight: normal;
|
||||
}
|
||||
/* Label states. */
|
||||
.form-item__label.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);
|
||||
}
|
||||
.form-item__label.form-required::after,
|
||||
.fieldset__label.form-required::after {
|
||||
display: inline-block;
|
||||
width: var(--input--required-mark-size);
|
||||
height: var(--input--required-mark-size);
|
||||
margin-right: 0.3em;
|
||||
margin-left: 0.3em;
|
||||
content: "";
|
||||
vertical-align: super;
|
||||
/* Use a background image to prevent screen readers from announcing the text. */
|
||||
background-image: url(../../images/core/ee0000/required.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: var(--input--required-mark-size) var(--input--required-mark-size);
|
||||
}
|
||||
|
||||
/**
|
||||
* Form item description.
|
||||
*/
|
||||
.form-item__description {
|
||||
margin-top: calc(6rem / 16); /* 6px */
|
||||
margin-bottom: calc(6rem / 16); /* 6px */
|
||||
color: var(--input-fg-color--description);
|
||||
font-size: var(--font-size-xs); /* ~13px */
|
||||
line-height: calc(17rem / 16); /* 17px */
|
||||
}
|
||||
/* Description states. */
|
||||
.form-item__description.is-disabled {
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
|
||||
/**
|
||||
* Error message (Inline form errors).
|
||||
*/
|
||||
.form-item__error-message {
|
||||
margin-top: calc(6rem / 16); /* 6px */
|
||||
margin-bottom: 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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Form actions.
|
||||
*/
|
||||
.form-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
margin-top: var(--space-m);
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
.form-actions .button,
|
||||
.form-actions .action-link {
|
||||
margin-top: var(--space-m);
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
.form-actions .ajax-progress--throbber {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 {
|
||||
margin-right: var(--space-xs); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .form-item--editor-format .form-item__label,
|
||||
[dir="rtl"] .form-item--editor-format .form-item__prefix,
|
||||
[dir="rtl"] .form-item--editor-format .form-item__suffix {
|
||||
margin-right: 0;
|
||||
margin-left: 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: 600px) {
|
||||
.password-strength {
|
||||
width: 100%;
|
||||
}
|
||||
div.form-item div.password-suggestions {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Claro styles for the help component.
|
||||
*/
|
||||
|
||||
.help p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* @file
|
||||
* Claro styles for the help component.
|
||||
*/
|
||||
|
||||
.help p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Image preview component.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
* Image preview.
|
||||
*/
|
||||
|
||||
.image-preview {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.image-preview__img-wrapper {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 0 0.4375rem #d4d4d8;
|
||||
}
|
||||
|
||||
.image-preview img {
|
||||
background-image:
|
||||
linear-gradient(-45deg, #d4d4d8 25%, transparent 26%),
|
||||
linear-gradient(-45deg, #d4d4d8 25%, transparent 26%),
|
||||
linear-gradient(135deg, #d4d4d8 25%, transparent 26%),
|
||||
linear-gradient(135deg, #d4d4d8 25%, transparent 26%);
|
||||
background-position:
|
||||
0 0,
|
||||
0.4375rem 0.4375rem,
|
||||
0.4375rem 0.4375rem,
|
||||
0 0;
|
||||
background-size: 0.875rem 0.875rem;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.image-preview img {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't display file icon in image widgets.
|
||||
*/
|
||||
|
||||
.image-widget .file.file {
|
||||
padding: 0; /* LTR and RTL */
|
||||
background: none;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* @file
|
||||
* Image preview component.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
--color-pattern: var(--color-lightgray);
|
||||
--size-pattern-square: calc(7rem / 16);
|
||||
}
|
||||
|
||||
/**
|
||||
* Image preview.
|
||||
*/
|
||||
.image-preview {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.image-preview img {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't display file icon in image widgets.
|
||||
*/
|
||||
.image-widget .file.file {
|
||||
padding: 0; /* LTR and RTL */
|
||||
background: none;
|
||||
}
|
||||
@@ -0,0 +1,745 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Claro styles for jQuery UI.
|
||||
* Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
/* Secondary. */
|
||||
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
/*
|
||||
* Inputs.
|
||||
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
/**
|
||||
* Tabledrag icon size.
|
||||
*/ /* 17px */
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
* Component containers
|
||||
*/
|
||||
|
||||
.ui-widget {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui-widget-content {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
filter: alpha(Opacity=35);
|
||||
}
|
||||
|
||||
.ui-priority-secondary,
|
||||
.ui-widget-content .ui-priority-secondary {
|
||||
opacity: 0.7;
|
||||
filter: alpha(Opacity=70);
|
||||
}
|
||||
|
||||
/**
|
||||
* Icons
|
||||
*/
|
||||
|
||||
/* states and images */
|
||||
|
||||
.ui-icon {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-indent: -99999px;
|
||||
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 3px 0 0; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .ui-widget p .ui-icon {
|
||||
margin: 2px 0 0 3px;
|
||||
}
|
||||
|
||||
/* 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: 10px 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: 5px 10px 4px;
|
||||
border-bottom: solid 1px #ccc;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.ui-tabs .ui-tabs-nav li {
|
||||
margin: 0;
|
||||
padding: 0 1em 0 10px; /* LTR */
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] .ui-tabs .ui-tabs-nav li {
|
||||
padding: 0 10px 0 1em;
|
||||
}
|
||||
|
||||
.ui-tabs .ui-tabs-nav li a {
|
||||
float: none;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
|
||||
color: #fff;
|
||||
background: #666;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Overlays
|
||||
*/
|
||||
|
||||
.ui-widget-overlay {
|
||||
opacity: 0.7;
|
||||
filter: alpha(Opacity=70);
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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: 4px;
|
||||
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: #0072b9 url(../../../../misc/progress.gif);
|
||||
}
|
||||
|
||||
/**
|
||||
* Date Picker
|
||||
*/
|
||||
|
||||
.ui-datepicker {
|
||||
/* Override datepicker.css */
|
||||
padding: 0;
|
||||
border: 1px solid #a6a6a6;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Override tables.css */
|
||||
|
||||
.ui-datepicker-calendar thead tr {
|
||||
border-top: 1px solid #a6a6a6;
|
||||
border-bottom: 1px solid #a6a6a6;
|
||||
}
|
||||
|
||||
.ui-datepicker-calendar tr:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Override datepicker.css */
|
||||
|
||||
.ui-datepicker td {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-datepicker td span,
|
||||
.ui-datepicker td a {
|
||||
/* Override datepicker.css */
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ui-datepicker .ui-datepicker-header .ui-datepicker-next-hover {
|
||||
top: 2px;
|
||||
/* Override datepicker.css - keep icons still on hover */
|
||||
right: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev-hover {
|
||||
top: 2px;
|
||||
/* Override datepicker.css - keep icons still on hover */
|
||||
left: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-datepicker td a.ui-state-hover {
|
||||
background-color: #f7fcff;
|
||||
}
|
||||
|
||||
.ui-datepicker .ui-state-active {
|
||||
border: none;
|
||||
background: #ebeae4;
|
||||
}
|
||||
|
||||
.ui-datepicker .ui-state-highlight {
|
||||
/* Override datepicker.css */
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Autocomplete
|
||||
*/
|
||||
|
||||
.ui-autocomplete {
|
||||
overflow: hidden;
|
||||
color: #545560;
|
||||
border: 1px solid rgba(216, 217, 224, 0.8);
|
||||
border-top: 0;
|
||||
border-radius: 0 0 0.125rem 0.125rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(34, 35, 48, 0.1);
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
background: #003cc5;
|
||||
}
|
||||
|
||||
.ui-autocomplete .ui-menu-item.ui-state-focus,
|
||||
.autocomplete .ui-menu-item.ui-state-hover {
|
||||
margin: 0;
|
||||
background: #0072b9;
|
||||
}
|
||||
|
||||
.ui-autocomplete .ui-state-focus a,
|
||||
.autocomplete .ui-state-hover a {
|
||||
color: #fff;
|
||||
}
|
||||
@@ -0,0 +1,470 @@
|
||||
/**
|
||||
* @file
|
||||
* Claro styles for jQuery UI.
|
||||
* Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.
|
||||
*/
|
||||
|
||||
@import "../../base/variables.pcss.css";
|
||||
|
||||
/**
|
||||
* Component containers
|
||||
*/
|
||||
.ui-widget {
|
||||
background: none;
|
||||
}
|
||||
.ui-widget-content {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
filter: alpha(Opacity=35);
|
||||
}
|
||||
.ui-priority-secondary,
|
||||
.ui-widget-content .ui-priority-secondary {
|
||||
opacity: 0.7;
|
||||
filter: alpha(Opacity=70);
|
||||
}
|
||||
|
||||
/**
|
||||
* Icons
|
||||
*/
|
||||
/* states and images */
|
||||
.ui-icon {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-indent: -99999px;
|
||||
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 3px 0 0; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .ui-widget p .ui-icon {
|
||||
margin: 2px 0 0 3px;
|
||||
}
|
||||
/* 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: 10px 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: 5px 10px 4px;
|
||||
border-bottom: solid 1px #ccc;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li {
|
||||
margin: 0;
|
||||
padding: 0 1em 0 10px; /* LTR */
|
||||
list-style: none;
|
||||
}
|
||||
[dir="rtl"] .ui-tabs .ui-tabs-nav li {
|
||||
padding: 0 10px 0 1em;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li a {
|
||||
float: none;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
|
||||
color: #fff;
|
||||
background: #666;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Overlays
|
||||
*/
|
||||
.ui-widget-overlay {
|
||||
opacity: 0.7;
|
||||
filter: alpha(Opacity=70);
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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: 4px;
|
||||
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: #0072b9 url(../../../../misc/progress.gif);
|
||||
}
|
||||
|
||||
/**
|
||||
* Date Picker
|
||||
*/
|
||||
.ui-datepicker {
|
||||
/* Override datepicker.css */
|
||||
padding: 0;
|
||||
border: 1px solid #a6a6a6;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Override tables.css */
|
||||
.ui-datepicker-calendar thead tr {
|
||||
border-top: 1px solid #a6a6a6;
|
||||
border-bottom: 1px solid #a6a6a6;
|
||||
}
|
||||
.ui-datepicker-calendar tr:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Override datepicker.css */
|
||||
.ui-datepicker td {
|
||||
padding: 0;
|
||||
}
|
||||
.ui-datepicker td span,
|
||||
.ui-datepicker td a {
|
||||
/* Override datepicker.css */
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-header .ui-datepicker-next-hover {
|
||||
top: 2px;
|
||||
/* Override datepicker.css - keep icons still on hover */
|
||||
right: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev-hover {
|
||||
top: 2px;
|
||||
/* Override datepicker.css - keep icons still on hover */
|
||||
left: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-datepicker td a.ui-state-hover {
|
||||
background-color: #f7fcff;
|
||||
}
|
||||
.ui-datepicker .ui-state-active {
|
||||
border: none;
|
||||
background: #ebeae4;
|
||||
}
|
||||
.ui-datepicker .ui-state-highlight {
|
||||
/* Override datepicker.css */
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Autocomplete
|
||||
*/
|
||||
.ui-autocomplete {
|
||||
overflow: hidden;
|
||||
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 {
|
||||
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: #0072b9;
|
||||
}
|
||||
.ui-autocomplete .ui-state-focus a,
|
||||
.autocomplete .ui-state-hover a {
|
||||
color: #fff;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
.media-form .field--name-status {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.media-form .field--name-status {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
/**
|
||||
* Menus and lists.
|
||||
*/
|
||||
.item-list ul {
|
||||
margin: 0.25em 0 0.25em 1.5em; /* LTR */
|
||||
list-style-type: disc;
|
||||
list-style-image: none;
|
||||
}
|
||||
[dir="rtl"] .item-list ul {
|
||||
margin: 0.25em 1.5em 0.25em 0;
|
||||
}
|
||||
.item-list ul li,
|
||||
.menu-item {
|
||||
list-style-type: disc;
|
||||
list-style-image: none;
|
||||
}
|
||||
.menu-item {
|
||||
margin: 0;
|
||||
}
|
||||
.item-list ul li.collapsed,
|
||||
.menu-item--collapsed {
|
||||
list-style-type: disc;
|
||||
list-style-image: url(../../images/menu-collapsed.png);
|
||||
}
|
||||
.item-list ul li.expanded,
|
||||
.menu-item--expanded {
|
||||
list-style-type: circle;
|
||||
list-style-image: url(../../images/menu-expanded.png);
|
||||
}
|
||||
ul.links li,
|
||||
ul.inline li {
|
||||
padding-right: 1em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] ul.links li,
|
||||
[dir="rtl"] ul.inline li {
|
||||
padding-right: 0;
|
||||
padding-left: 1em;
|
||||
}
|
||||
ul.inline li {
|
||||
display: inline;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user