Issue #3079738 by lauriii, saschaeggi, webchick, xjm, andrewmacpherson, shimpy, effulgentsia, Wim Leers, DyanneNova, svettes, rainbreaw, fhaeberle, ckrina, AaronMcHale, justafish, catch, charlieweb82, AntoineH, lot007, pzajacz, kostyashupenko, jasonbarrie, antonellasevero, finnsky, worldlinemine, bnjmnm, RobLoach, Dennis Cohn, huzooka, Archita Arora, joachim, jrockowitz, benjifisher, shaal, Gábor Hojtsy, quiron, L2G2, ccasals, hampercm, if-jds, abhisekmazumdar, Kami Amiga, pivica, zrpnr, BrightBold, imalabya, jhedstrom, Neslee Canil Pinto, maliknaik, junaidmasoodi, Maithri Shetty, pranav73, mandclu, modulist, nod_, philosurfer, phenaproxima, mherchel, mlncn, rafuel92, leymannx, kiboman, Swapnil_Kotwal, anevins, evankay, rfmarcelino, thamas, brianperry, idebr, joelpittet, boulaffasae, alexpott, volkerk, DuneBL, Eli-T, Mahenkvyas22: Add Claro administration theme to core
(cherry picked from commit 1786bc19c8)
merge-requests/64/head
effulgentsia
parent
3a9d5fadb4
commit
0fe72eb470
|
|
@ -0,0 +1,2 @@
|
|||
themes/claro/**/*.css
|
||||
!themes/claro/**/*.pcss.css
|
||||
|
|
@ -65,6 +65,7 @@
|
|||
"drupal/book": "self.version",
|
||||
"drupal/breakpoint": "self.version",
|
||||
"drupal/ckeditor": "self.version",
|
||||
"drupal/claro": "self.version",
|
||||
"drupal/classy": "self.version",
|
||||
"drupal/color": "self.version",
|
||||
"drupal/comment": "self.version",
|
||||
|
|
|
|||
|
|
@ -52,8 +52,13 @@ function shortcut_schema() {
|
|||
function shortcut_install() {
|
||||
// Theme settings are not configuration entities and cannot depend on modules
|
||||
// so to set a module-specific setting, we need to set it with logic.
|
||||
if (\Drupal::service('theme_handler')->themeExists('seven')) {
|
||||
\Drupal::configFactory()->getEditable('seven.settings')->set('third_party_settings.shortcut.module_link', TRUE)->save(TRUE);
|
||||
foreach (['seven', 'claro'] as $theme) {
|
||||
if (\Drupal::service('theme_handler')->themeExists($theme)) {
|
||||
\Drupal::configFactory()
|
||||
->getEditable("$theme.settings")
|
||||
->set('third_party_settings.shortcut.module_link', TRUE)
|
||||
->save(TRUE);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -63,7 +68,12 @@ function shortcut_install() {
|
|||
function shortcut_uninstall() {
|
||||
// Theme settings are not configuration entities and cannot depend on modules
|
||||
// so to unset a module-specific setting, we need to unset it with logic.
|
||||
if (\Drupal::service('theme_handler')->themeExists('seven')) {
|
||||
\Drupal::configFactory()->getEditable('seven.settings')->clear('third_party_settings.shortcut')->save(TRUE);
|
||||
foreach (['seven', 'claro'] as $theme) {
|
||||
if (\Drupal::service('theme_handler')->themeExists($theme)) {
|
||||
\Drupal::configFactory()
|
||||
->getEditable("$theme.settings")
|
||||
->clear('third_party_settings.shortcut')
|
||||
->save(TRUE);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -435,11 +435,13 @@ function shortcut_toolbar() {
|
|||
* Implements hook_themes_installed().
|
||||
*/
|
||||
function shortcut_themes_installed($theme_list) {
|
||||
if (in_array('seven', $theme_list)) {
|
||||
// Theme settings are not configuration entities and cannot depend on modules
|
||||
// so to set a module-specific setting, we need to set it with logic.
|
||||
if (\Drupal::moduleHandler()->moduleExists('shortcut')) {
|
||||
\Drupal::configFactory()->getEditable('seven.settings')->set('third_party_settings.shortcut.module_link', TRUE)->save(TRUE);
|
||||
// Theme settings are not configuration entities and cannot depend on modules
|
||||
// so to set a module-specific setting, we need to set it with logic.
|
||||
foreach (['seven', 'claro'] as $theme) {
|
||||
if (in_array($theme, $theme_list, TRUE)) {
|
||||
\Drupal::configFactory()->getEditable("$theme.settings")
|
||||
->set('third_party_settings.shortcut.module_link', TRUE)
|
||||
->save(TRUE);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<?php
|
||||
|
||||
namespace Drupal\FunctionalJavascriptTests\Theme;
|
||||
|
||||
use Drupal\Tests\block\FunctionalJavascript\BlockFilterTest;
|
||||
|
||||
/**
|
||||
* Runs BlockFilterTest in Claro.
|
||||
*
|
||||
* @group block
|
||||
*
|
||||
* @see \Drupal\Tests\block\FunctionalJavascript\BlockFilterTest.
|
||||
*/
|
||||
class ClaroBlockFilterTest extends BlockFilterTest {
|
||||
|
||||
/**
|
||||
* Modules to enable.
|
||||
*
|
||||
* Install the shortcut module so that claro.settings has its schema checked.
|
||||
* There's currently no way for Claro to provide a default and have valid
|
||||
* configuration as themes cannot react to a module install.
|
||||
*
|
||||
* @var string[]
|
||||
*/
|
||||
public static $modules = ['shortcut'];
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected function setUp() {
|
||||
parent::setUp();
|
||||
$this->container->get('theme_installer')->install(['claro']);
|
||||
$this->config('system.theme')->set('default', 'claro')->save();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<?php
|
||||
|
||||
namespace Drupal\FunctionalJavascriptTests\Theme;
|
||||
|
||||
use Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest;
|
||||
|
||||
/**
|
||||
* Runs EntityDisplayTest in Claro.
|
||||
*
|
||||
* @group claro
|
||||
*
|
||||
* @see \Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest.
|
||||
*/
|
||||
class ClaroEntityDisplayTest extends EntityDisplayTest {
|
||||
|
||||
/**
|
||||
* Modules to enable.
|
||||
*
|
||||
* Install the shortcut module so that claro.settings has its schema checked.
|
||||
* There's currently no way for Claro to provide a default and have valid
|
||||
* configuration as themes cannot react to a module install.
|
||||
*
|
||||
* @var string[]
|
||||
*/
|
||||
public static $modules = ['shortcut'];
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected function setUp() {
|
||||
parent::setUp();
|
||||
$this->container->get('theme_installer')->install(['claro']);
|
||||
$this->config('system.theme')->set('default', 'claro')->save();
|
||||
}
|
||||
|
||||
/**
|
||||
* Copied from parent.
|
||||
*
|
||||
* This is Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest::testEntityForm()
|
||||
* with a line changed to reflect row weight toggle being a link instead
|
||||
* of a button.
|
||||
*/
|
||||
public function testEntityForm() {
|
||||
$this->drupalGet('entity_test/manage/1/edit');
|
||||
$this->assertSession()->fieldExists('field_test_text[0][value]');
|
||||
|
||||
$this->drupalGet('entity_test/structure/entity_test/form-display');
|
||||
$this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'content')->isSelected());
|
||||
$this->getSession()->getPage()->clickLink('Show row weights');
|
||||
$this->assertSession()->waitForElementVisible('css', '[name="fields[field_test_text][region]"]');
|
||||
$this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'hidden');
|
||||
$this->assertSession()->assertWaitOnAjaxRequest();
|
||||
$this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
|
||||
|
||||
$this->submitForm([], 'Save');
|
||||
$this->assertSession()->pageTextContains('Your settings have been saved.');
|
||||
$this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
|
||||
|
||||
$this->drupalGet('entity_test/manage/1/edit');
|
||||
$this->assertSession()->fieldNotExists('field_test_text[0][value]');
|
||||
}
|
||||
|
||||
/**
|
||||
* Copied from parent.
|
||||
*
|
||||
* This is Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest::testEntityView()
|
||||
* with a line changed to reflect row weight toggle being a link instead
|
||||
* of a button.
|
||||
*/
|
||||
public function testEntityView() {
|
||||
$this->drupalGet('entity_test/1');
|
||||
$this->assertSession()->elementNotExists('css', '.field--name-field-test-text');
|
||||
|
||||
$this->drupalGet('entity_test/structure/entity_test/display');
|
||||
$this->assertSession()->elementExists('css', '.region-content-message.region-empty');
|
||||
$this->getSession()->getPage()->clickLink('Show row weights');
|
||||
$this->assertSession()->waitForElementVisible('css', '[name="fields[field_test_text][region]"]');
|
||||
$this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
|
||||
|
||||
$this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'content');
|
||||
$this->assertSession()->assertWaitOnAjaxRequest();
|
||||
$this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'content')->isSelected());
|
||||
|
||||
$this->submitForm([], 'Save');
|
||||
$this->assertSession()->pageTextContains('Your settings have been saved.');
|
||||
$this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'content')->isSelected());
|
||||
|
||||
$this->drupalGet('entity_test/1');
|
||||
$this->assertSession()->elementExists('css', '.field--name-field-test-text');
|
||||
}
|
||||
|
||||
/**
|
||||
* Copied from parent.
|
||||
*
|
||||
* This is Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest::testExtraFields()
|
||||
* with a line changed to reflect Claro's tabledrag selector.
|
||||
*/
|
||||
public function testExtraFields() {
|
||||
entity_test_create_bundle('bundle_with_extra_fields');
|
||||
$this->drupalGet('entity_test/structure/bundle_with_extra_fields/display');
|
||||
$this->assertSession()->waitForElement('css', '.tabledrag-handle');
|
||||
$id = $this->getSession()->getPage()->find('css', '[name="form_build_id"]')->getValue();
|
||||
|
||||
$extra_field_row = $this->getSession()->getPage()->find('css', '#display-extra-field');
|
||||
$disabled_region_row = $this->getSession()->getPage()->find('css', '.region-hidden-title');
|
||||
|
||||
$extra_field_row->find('css', '.js-tabledrag-handle')->dragTo($disabled_region_row);
|
||||
$this->assertSession()->assertWaitOnAjaxRequest();
|
||||
$this->assertSession()
|
||||
->waitForElement('css', "[name='form_build_id']:not([value='$id'])");
|
||||
|
||||
$this->submitForm([], 'Save');
|
||||
$this->assertSession()->pageTextContains('Your settings have been saved.');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<?php
|
||||
|
||||
namespace Drupal\FunctionalJavascriptTests\Theme;
|
||||
|
||||
use Drupal\Tests\menu_ui\FunctionalJavascript\MenuUiJavascriptTest;
|
||||
|
||||
/**
|
||||
* Runs MenuUiJavascriptTest in Claro.
|
||||
*
|
||||
* @group claro
|
||||
*
|
||||
* @see \Drupal\Tests\menu_ui\FunctionalJavascript\MenuUiJavascriptTest;
|
||||
*/
|
||||
class ClaroMenuUiJavascriptTest extends MenuUiJavascriptTest {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected static $modules = [
|
||||
'shortcut',
|
||||
];
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected function setUp() {
|
||||
parent::setUp();
|
||||
$this->container->get('theme_installer')->install(['claro']);
|
||||
$this->config('system.theme')->set('default', 'claro')->save();
|
||||
}
|
||||
|
||||
/**
|
||||
* Intentionally empty method.
|
||||
*
|
||||
* Contextual links do not work in admin themes, so this is empty to prevent
|
||||
* this test running in the parent class.
|
||||
*/
|
||||
public function testBlockContextualLinks() {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<?php
|
||||
|
||||
namespace Drupal\FunctionalTests\Theme;
|
||||
|
||||
use Drupal\Tests\BrowserTestBase;
|
||||
|
||||
/**
|
||||
* Tests the Claro theme.
|
||||
*
|
||||
* @group claro
|
||||
*/
|
||||
class ClaroTest extends BrowserTestBase {
|
||||
|
||||
/**
|
||||
* Modules to enable.
|
||||
*
|
||||
* Install the shortcut module so that claro.settings has its schema checked.
|
||||
* There's currently no way for Claro to provide a default and have valid
|
||||
* configuration as themes cannot react to a module install.
|
||||
*
|
||||
* @var string[]
|
||||
*/
|
||||
public static $modules = ['shortcut'];
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function setUp() {
|
||||
parent::setUp();
|
||||
|
||||
$this->assertTrue(\Drupal::service('theme_installer')->install(['claro']));
|
||||
$this->container->get('config.factory')
|
||||
->getEditable('system.theme')
|
||||
->set('default', 'claro')
|
||||
->save();
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests that the Claro theme always adds its elements.css.
|
||||
*
|
||||
* @see claro.info.yml
|
||||
*/
|
||||
public function testRegressionMissingElementsCss() {
|
||||
$this->drupalGet('');
|
||||
$this->assertSession()->statusCodeEquals(200);
|
||||
$this->assertSession()->responseContains('claro/css/src/base/elements.css');
|
||||
|
||||
$this->drupalLogin($this->rootUser);
|
||||
$this->drupalGet('admin/modules');
|
||||
$this->assertSession()->elementNotExists('css', '#block-claro-help');
|
||||
|
||||
// Install the block module to ensure Claro's configuration is valid
|
||||
// according to schema.
|
||||
\Drupal::service('module_installer')->install(['block', 'help']);
|
||||
$this->rebuildAll();
|
||||
|
||||
$this->drupalGet('admin/modules');
|
||||
$this->assertSession()->elementExists('css', '#block-claro-help');
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests that the Claro theme can be uninstalled, despite being experimental.
|
||||
*
|
||||
* @todo Remove in https://www.drupal.org/project/drupal/issues/3066007
|
||||
*/
|
||||
public function testIsUninstallable() {
|
||||
$this->drupalLogin($this->drupalCreateUser(['access administration pages', 'administer themes']));
|
||||
|
||||
$this->drupalGet('admin/appearance');
|
||||
$this->cssSelect('a[title="Install Seven as default theme"]')[0]->click();
|
||||
$this->cssSelect('a[title="Uninstall Claro theme"]')[0]->click();
|
||||
$this->assertText('The Claro theme has been uninstalled.');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
# 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/src/components/ajax-progress.module.css
|
||||
/core/themes/stable/css/system/components/autocomplete-loading.module.css: css/src/components/autocomplete-loading.module.css
|
||||
/core/themes/stable/css/system/components/system-status-counter.css: css/src/components/system-status-counter.css
|
||||
/core/themes/stable/css/system/components/system-status-report-counters.css: css/src/components/system-status-report-counters.css
|
||||
/core/themes/stable/css/system/components/system-status-report-general-info.css: css/src/components/system-status-report-general-info.css
|
||||
/core/themes/stable/css/system/components/tabledrag.module.css: css/src/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/src/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/details.css: false
|
||||
css/components/dropbutton.css: false
|
||||
css/components/form.css: false
|
||||
css/components/tabs.css: false
|
||||
css/components/pager.css: false
|
||||
css/components/tableselect.css: css/src/components/tableselect.css
|
||||
css/components/tabledrag.css: false
|
||||
css/components/collapse-processed.css: false
|
||||
|
||||
classy/dropbutton:
|
||||
css:
|
||||
component:
|
||||
css/components/dropbutton.css: false
|
||||
|
||||
classy/messages:
|
||||
css:
|
||||
component:
|
||||
css/components/messages.css: false
|
||||
|
||||
classy/progress:
|
||||
css:
|
||||
component:
|
||||
css/components/progress.css: css/src/components/progress.css
|
||||
# @todo Refactor when https://www.drupal.org/node/2642122 is fixed.
|
||||
|
||||
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/src/theme/field-ui.admin.css
|
||||
|
||||
filter/drupal.filter.admin:
|
||||
css:
|
||||
theme:
|
||||
/core/themes/stable/css/filter/filter.admin.css: css/src/theme/filter.theme.css
|
||||
|
||||
filter/drupal.filter:
|
||||
css:
|
||||
theme:
|
||||
/core/themes/stable/css/filter/filter.admin.css: css/src/theme/filter.theme.css
|
||||
|
||||
views_ui/admin.styling:
|
||||
css:
|
||||
theme:
|
||||
/core/themes/stable/css/views_ui/views_ui.admin.theme.css: css/src/theme/views_ui.admin.theme.css
|
||||
|
||||
libraries-extend:
|
||||
ckeditor/drupal.ckeditor:
|
||||
- claro/ckeditor-editor
|
||||
classy/image-widget:
|
||||
- claro/image-widget
|
||||
core/ckeditor:
|
||||
- claro/ckeditor-dialog
|
||||
core/drupal.collapse:
|
||||
- claro/details-focus
|
||||
core/drupal.dropbutton:
|
||||
- claro/dropbutton
|
||||
core/drupal.checkbox:
|
||||
- claro/checkbox
|
||||
core/drupal.message:
|
||||
- claro/messages
|
||||
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
|
||||
|
||||
quickedit_stylesheets:
|
||||
- css/src/components/quickedit.css
|
||||
ckeditor_stylesheets:
|
||||
- css/src/base/elements.css
|
||||
- css/src/base/typography.css
|
||||
- css/src/theme/ckeditor-frame.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,249 @@
|
|||
global-styling:
|
||||
version: VERSION
|
||||
css:
|
||||
base:
|
||||
css/src/base/elements.css: {}
|
||||
css/src/base/typography.css: {}
|
||||
css/src/base/print.css: {}
|
||||
component:
|
||||
css/src/components/accordion.css: {}
|
||||
css/src/components/action-link.css: {}
|
||||
css/src/components/content-header.css: {}
|
||||
css/src/components/container-inline.css: {}
|
||||
css/src/components/container-inline.module.css: {}
|
||||
css/src/components/breadcrumb.css: {}
|
||||
css/src/components/button.css: {}
|
||||
css/src/components/details.css: {}
|
||||
css/src/components/divider.css: {}
|
||||
css/src/components/messages.css: {}
|
||||
css/src/components/entity-meta.css: {}
|
||||
css/src/components/fieldset.css: {}
|
||||
css/src/components/form.css: {}
|
||||
css/src/components/form--checkbox-radio.css: {}
|
||||
css/src/components/form--checkbox-radio--ie.css: {}
|
||||
css/src/components/form--field-multiple.css: {}
|
||||
css/src/components/form--managed-file.css: {}
|
||||
css/src/components/form--text.css: {}
|
||||
css/src/components/form--select.css: {}
|
||||
css/src/components/help.css: {}
|
||||
css/src/components/image-preview.css: {}
|
||||
css/src/components/menus-and-lists.css: {}
|
||||
css/src/components/modules-page.css: {}
|
||||
css/src/components/node.css: {}
|
||||
css/src/components/page-title.css: {}
|
||||
css/src/components/pager.css: {}
|
||||
css/src/components/skip-link.css: {}
|
||||
css/src/components/tables.css: {}
|
||||
css/src/components/table--file-multiple-widget.css: {}
|
||||
css/src/components/search-admin-settings.css: {}
|
||||
css/src/components/tablesort-indicator.css: {}
|
||||
css/src/components/system-status-report-general-info.css: {}
|
||||
css/src/components/system-status-report.css: {}
|
||||
css/src/components/system-status-report-counters.css: {}
|
||||
css/src/components/system-status-counter.css: {}
|
||||
css/src/components/tabs.css: {}
|
||||
css/src/components/views-ui.css: {}
|
||||
theme:
|
||||
css/src/theme/colors.css: {}
|
||||
layout:
|
||||
css/src/layout/breadcrumb.css: {}
|
||||
css/src/layout/local-actions.css: {}
|
||||
css/src/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 recognising 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
|
||||
|
||||
node-form:
|
||||
version: VERSION
|
||||
css:
|
||||
layout:
|
||||
css/src/layout/node-add.css: {}
|
||||
dependencies:
|
||||
- node/form
|
||||
|
||||
maintenance-page:
|
||||
version: VERSION
|
||||
js:
|
||||
js/mobile.install.js: {}
|
||||
css:
|
||||
theme:
|
||||
css/src/theme/maintenance-page.css: {}
|
||||
dependencies:
|
||||
- system/maintenance
|
||||
- claro/global-styling
|
||||
|
||||
install-page:
|
||||
version: VERSION
|
||||
js:
|
||||
js/mobile.install.js: {}
|
||||
css:
|
||||
theme:
|
||||
css/src/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/src/components/jquery.ui/theme.css: { weight: -1 }
|
||||
|
||||
claro.drupal.dialog:
|
||||
version: VERSION
|
||||
css:
|
||||
theme:
|
||||
css/src/components/dialog.css: {}
|
||||
|
||||
ckeditor-dialog:
|
||||
version: VERSION
|
||||
css:
|
||||
theme:
|
||||
css/src/theme/ckeditor-dialog.css: {}
|
||||
|
||||
ckeditor-editor:
|
||||
version: VERSION
|
||||
css:
|
||||
theme:
|
||||
css/src/theme/ckeditor-editor.css: {}
|
||||
|
||||
tour-styling:
|
||||
version: VERSION
|
||||
css:
|
||||
theme:
|
||||
css/src/components/tour.theme.css: {}
|
||||
|
||||
media-form:
|
||||
version: VERSION
|
||||
css:
|
||||
layout:
|
||||
css/src/components/media.css: {}
|
||||
dependencies:
|
||||
- media/form
|
||||
|
||||
image-widget:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/src/layout/image-widget.css: {}
|
||||
|
||||
system.admin:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/src/components/system-admin--admin-list.css: { weight: -10 }
|
||||
css/src/components/system-admin--links.css: { weight: -10 }
|
||||
css/src/components/system-admin--modules.css: { weight: -10 }
|
||||
css/src/components/system-admin--panel.css: { weight: -10 }
|
||||
css/src/components/system-admin--status-report.css: { weight: -10 }
|
||||
layout:
|
||||
css/src/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/src/components/shortcut.css: {}
|
||||
|
||||
details-focus:
|
||||
js:
|
||||
js/details.js: {}
|
||||
|
||||
ajax:
|
||||
js:
|
||||
js/ajax.js: {}
|
||||
|
||||
form.password-confirm:
|
||||
css:
|
||||
component:
|
||||
css/src/components/form--password-confirm.css: {}
|
||||
js:
|
||||
js/user.js: {}
|
||||
dependencies:
|
||||
- core/jquery
|
||||
- core/drupal
|
||||
- core/jquery.once
|
||||
- claro/global-styling
|
||||
|
||||
views:
|
||||
css:
|
||||
component:
|
||||
css/src/components/views-exposed-form.css: {}
|
||||
|
||||
messages:
|
||||
js:
|
||||
js/messages.js: {}
|
||||
|
||||
card:
|
||||
css:
|
||||
component:
|
||||
css/src/layout/card-list.css: {}
|
||||
css/src/components/card.css: {}
|
||||
|
||||
vertical-tabs:
|
||||
css:
|
||||
component:
|
||||
css/src/components/vertical-tabs.css: {}
|
||||
dependencies:
|
||||
- claro/global-styling
|
||||
|
||||
file:
|
||||
css:
|
||||
component:
|
||||
css/src/components/file.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,316 @@
|
|||
/*
|
||||
* 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;
|
||||
-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
|
||||
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: 2px dotted transparent;
|
||||
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
/*
|
||||
* 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;
|
||||
-webkit-box-shadow: none !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,180 @@
|
|||
: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;
|
||||
--outline-size: 2px;
|
||||
/*
|
||||
* 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,103 @@
|
|||
/*
|
||||
* 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;
|
||||
-webkit-box-shadow: 0
|
||||
2px
|
||||
4px
|
||||
rgba(0, 0, 0, 0.1);
|
||||
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,238 @@
|
|||
/*
|
||||
* 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: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -moz-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
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 {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
-webkit-animation: claro-throbber 0.75s linear infinite;
|
||||
-moz-animation: claro-throbber 0.75s linear infinite;
|
||||
-o-animation: claro-throbber 0.75s linear infinite;
|
||||
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%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
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;
|
||||
-webkit-box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes claro-throbber {
|
||||
0% {
|
||||
-webkit-transform: rotateZ(0);
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotateZ(360deg);
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes claro-throbber {
|
||||
0% {
|
||||
-moz-transform: rotateZ(0);
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotateZ(360deg);
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes claro-throbber {
|
||||
0% {
|
||||
-o-transform: rotateZ(0);
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
100% {
|
||||
-o-transform: rotateZ(360deg);
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes claro-throbber {
|
||||
0% {
|
||||
-webkit-transform: rotateZ(0);
|
||||
-moz-transform: rotateZ(0);
|
||||
-o-transform: rotateZ(0);
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotateZ(360deg);
|
||||
-moz-transform: rotateZ(360deg);
|
||||
-o-transform: rotateZ(360deg);
|
||||
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,247 @@
|
|||
/*
|
||||
* 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: -webkit-calc(1rem - 1px) -webkit-calc(1.5rem - 1px);
|
||||
padding: -moz-calc(1rem - 1px) -moz-calc(1.5rem - 1px);
|
||||
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) {
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
|
||||
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: -webkit-calc(0.5rem - 1px) -webkit-calc(1rem - 1px);
|
||||
padding: -moz-calc(0.5rem - 1px) -moz-calc(1rem - 1px);
|
||||
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: -webkit-calc(0.25rem - 1px) -webkit-calc(0.75rem - 1px);
|
||||
padding: -moz-calc(0.25rem - 1px) -moz-calc(0.75rem - 1px);
|
||||
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;
|
||||
}
|
||||
|
||||
/* Primary button styles */
|
||||
|
||||
.button--primary {
|
||||
color: #fff;
|
||||
background-color: #003cc5;
|
||||
}
|
||||
|
||||
.button--primary:hover {
|
||||
color: #fff;
|
||||
background-color: #0036b1;
|
||||
}
|
||||
|
||||
.button--primary:active {
|
||||
background-color: #00339a;
|
||||
}
|
||||
|
||||
/* Danger button styles */
|
||||
|
||||
.button--danger {
|
||||
color: #fff;
|
||||
background-color: #d72222;
|
||||
}
|
||||
|
||||
.button--danger:hover {
|
||||
color: #fff;
|
||||
background-color: #c11f1f;
|
||||
}
|
||||
|
||||
.button--danger:active {
|
||||
background-color: #ab1b1b;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,170 @@
|
|||
/**
|
||||
* @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;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,290 @@
|
|||
/*
|
||||
* 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: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: stretch;
|
||||
-webkit-align-items: stretch;
|
||||
-moz-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
justify-items: flex-start;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(212, 212, 218, 0.8);
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
-webkit-box-shadow: 0
|
||||
4px
|
||||
10px
|
||||
rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0
|
||||
4px
|
||||
10px
|
||||
rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 588px theme screenshot width */
|
||||
|
||||
@media screen and (min-width: 36.75rem) {
|
||||
.card--horizontal {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
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 {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
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 {
|
||||
-webkit-flex-basis: 35%;
|
||||
-ms-flex-preferred-size: 35%;
|
||||
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 {
|
||||
-webkit-flex-basis: auto;
|
||||
-ms-flex-preferred-size: auto;
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 85.375rem) {
|
||||
.card--horizontal .card__image {
|
||||
-webkit-flex-basis: 45%;
|
||||
-ms-flex-preferred-size: 45%;
|
||||
flex-basis: 45%;
|
||||
}
|
||||
|
||||
/* .card--vertical .card__image {
|
||||
flex-basis: auto;
|
||||
} */
|
||||
}
|
||||
|
||||
/**
|
||||
* Card content.
|
||||
*/
|
||||
|
||||
.card__content-wrapper {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-moz-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36.75rem) {
|
||||
.card--horizontal .card__content-wrapper {
|
||||
-webkit-flex-basis: 65%;
|
||||
-ms-flex-preferred-size: 65%;
|
||||
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 {
|
||||
-webkit-flex-basis: auto;
|
||||
-ms-flex-preferred-size: auto;
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 85.375rem) {
|
||||
.card--horizontal .card__content-wrapper {
|
||||
-webkit-flex-basis: 55%;
|
||||
-ms-flex-preferred-size: 55%;
|
||||
flex-basis: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Card content.
|
||||
*/
|
||||
|
||||
.card__content {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-moz-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
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.
|
||||
*/
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
-webkit-box-ordinal-group: 101;
|
||||
-webkit-order: 100;
|
||||
-moz-box-ordinal-group: 101;
|
||||
-ms-flex-order: 100;
|
||||
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: 2rem;
|
||||
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: 2rem;
|
||||
padding: 1.5rem 0 0;
|
||||
background-color: var(--color-whitesmoke);
|
||||
}
|
||||
|
|
@ -0,0 +1,705 @@
|
|||
/*
|
||||
* 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;
|
||||
-webkit-box-shadow: 0
|
||||
2px
|
||||
4px
|
||||
rgba(0, 0, 0, 0.1);
|
||||
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;
|
||||
-webkit-box-shadow: none;
|
||||
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;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem 1rem 1rem 2.25rem; /* LTR */
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
-webkit-transition: background-color 0.12s ease-in-out;
|
||||
-o-transition: background-color 0.12s ease-in-out;
|
||||
-moz-transition: background-color 0.12s ease-in-out;
|
||||
transition: background-color 0.12s ease-in-out;
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-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: "";
|
||||
-webkit-transition: -webkit-transform 0.12s ease-in 0s;
|
||||
transition: -webkit-transform 0.12s ease-in 0s;
|
||||
-o-transition: -o-transform 0.12s ease-in 0s;
|
||||
-moz-transition: transform 0.12s ease-in 0s, -moz-transform 0.12s ease-in 0s;
|
||||
transition: transform 0.12s ease-in 0s;
|
||||
transition: transform 0.12s ease-in 0s, -webkit-transform 0.12s ease-in 0s, -moz-transform 0.12s ease-in 0s, -o-transform 0.12s ease-in 0s;
|
||||
-webkit-transform: rotate(0);
|
||||
-moz-transform: rotate(0);
|
||||
-ms-transform: rotate(0);
|
||||
-o-transform: rotate(0);
|
||||
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;
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.claro-details__summary::before {
|
||||
-webkit-transition: none;
|
||||
-o-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.claro-details__summary::before {
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
margin-top: -0.28125rem;
|
||||
-webkit-transition: margin 0.12s ease-in 0s, -webkit-transform 0.12s ease-in 0s;
|
||||
transition: margin 0.12s ease-in 0s, -webkit-transform 0.12s ease-in 0s;
|
||||
-o-transition: margin 0.12s ease-in 0s, -o-transform 0.12s ease-in 0s;
|
||||
-moz-transition: transform 0.12s ease-in 0s, margin 0.12s ease-in 0s, -moz-transform 0.12s ease-in 0s;
|
||||
transition: transform 0.12s ease-in 0s, margin 0.12s ease-in 0s;
|
||||
transition: transform 0.12s ease-in 0s, margin 0.12s ease-in 0s, -webkit-transform 0.12s ease-in 0s, -moz-transform 0.12s ease-in 0s, -o-transform 0.12s ease-in 0s;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg); /* LTR */
|
||||
border: 0.125rem solid;
|
||||
border-width: 0.125rem 0.125rem 0 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] .claro-details__summary::before {
|
||||
-webkit-transform: rotate(225deg);
|
||||
-moz-transform: rotate(225deg);
|
||||
-ms-transform: rotate(225deg);
|
||||
-o-transform: rotate(225deg);
|
||||
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 {
|
||||
-webkit-transition: none;
|
||||
-o-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Details summary focus.
|
||||
*/
|
||||
|
||||
.claro-details__summary::after {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
content: "";
|
||||
-webkit-transition: opacity 0.2s ease-in-out;
|
||||
-o-transition: opacity 0.2s ease-in-out;
|
||||
-moz-transition: opacity 0.2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
border-radius: 2px;
|
||||
-webkit-box-shadow: inset 0 0 0 3px #26a769;
|
||||
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 {
|
||||
-webkit-box-shadow: none;
|
||||
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 {
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
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;
|
||||
-webkit-transform: rotate(135deg);
|
||||
-moz-transform: rotate(135deg);
|
||||
-ms-transform: rotate(135deg);
|
||||
-o-transform: rotate(135deg);
|
||||
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 {
|
||||
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
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 */
|
||||
-webkit-box-shadow: none;
|
||||
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 {
|
||||
-webkit-transition: none;
|
||||
-o-transition: none;
|
||||
-moz-transition: none;
|
||||
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;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.collapse-processed > .claro-details__summary .details-title::after {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
content: "";
|
||||
-webkit-transition: opacity 0.2s ease-in-out;
|
||||
-o-transition: opacity 0.2s ease-in-out;
|
||||
-moz-transition: opacity 0.2s ease-in-out;
|
||||
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,156 @@
|
|||
/*
|
||||
* 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;
|
||||
-webkit-transition: all 0.1s;
|
||||
-o-transition: all 0.1s;
|
||||
-moz-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,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,539 @@
|
|||
/*
|
||||
* 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: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -moz-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
border-radius: 2px;
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
|
||||
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;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-moz-box-flex: 1;
|
||||
-ms-flex: 1 1 auto;
|
||||
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: -webkit-calc(3rem + 1px);
|
||||
margin-right: -moz-calc(3rem + 1px);
|
||||
margin-right: calc(3rem + 1px); /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type {
|
||||
margin-right: 0;
|
||||
margin-left: -webkit-calc(3rem + 1px);
|
||||
margin-left: -moz-calc(3rem + 1px);
|
||||
margin-left: calc(3rem + 1px);
|
||||
}
|
||||
|
||||
/* First dropbutton list item variants */
|
||||
|
||||
.js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
|
||||
margin-right: -webkit-calc(2rem + 1px);
|
||||
margin-right: -moz-calc(2rem + 1px);
|
||||
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: -webkit-calc(2rem + 1px);
|
||||
margin-left: -moz-calc(2rem + 1px);
|
||||
margin-left: calc(2rem + 1px);
|
||||
}
|
||||
|
||||
.js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
|
||||
margin-right: -webkit-calc(1.5rem + 1px);
|
||||
margin-right: -moz-calc(1.5rem + 1px);
|
||||
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: -webkit-calc(1.5rem + 1px);
|
||||
margin-left: -moz-calc(1.5rem + 1px);
|
||||
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: "";
|
||||
-webkit-transform: translate(50%, -50%) rotate(0);
|
||||
-moz-transform: translate(50%, -50%) rotate(0);
|
||||
-ms-transform: translate(50%, -50%) rotate(0);
|
||||
-o-transform: translate(50%, -50%) rotate(0);
|
||||
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;
|
||||
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
||||
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 {
|
||||
-webkit-transform: translate(50%, -50%) rotate(180deg);
|
||||
-moz-transform: translate(50%, -50%) rotate(180deg);
|
||||
-ms-transform: translate(50%, -50%) rotate(180deg);
|
||||
-o-transform: translate(50%, -50%) rotate(180deg);
|
||||
transform: translate(50%, -50%) rotate(180deg);
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {
|
||||
-webkit-transform: translate(50%, -50%) rotate(-180deg);
|
||||
-moz-transform: translate(50%, -50%) rotate(-180deg);
|
||||
-ms-transform: translate(50%, -50%) rotate(-180deg);
|
||||
-o-transform: translate(50%, -50%) rotate(-180deg);
|
||||
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;
|
||||
-webkit-transform: translate(50%, -50%) rotate(135deg);
|
||||
-moz-transform: translate(50%, -50%) rotate(135deg);
|
||||
-ms-transform: translate(50%, -50%) rotate(135deg);
|
||||
-o-transform: translate(50%, -50%) rotate(135deg);
|
||||
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;
|
||||
-webkit-transform: translate(50%, -50%) rotate(315deg);
|
||||
-moz-transform: translate(50%, -50%) rotate(315deg);
|
||||
-ms-transform: translate(50%, -50%) rotate(315deg);
|
||||
-o-transform: translate(50%, -50%) rotate(315deg);
|
||||
transform: translate(50%, -50%) rotate(315deg);
|
||||
}
|
||||
[dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {
|
||||
-webkit-transform: translate(50%, -50%) rotate(-45deg);
|
||||
-moz-transform: translate(50%, -50%) rotate(-45deg);
|
||||
-ms-transform: translate(50%, -50%) rotate(-45deg);
|
||||
-o-transform: translate(50%, -50%) rotate(-45deg);
|
||||
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: -webkit-calc(1rem - 1px) -webkit-calc(1.5rem - 1px);
|
||||
padding: -moz-calc(1rem - 1px) -moz-calc(1.5rem - 1px);
|
||||
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: -webkit-calc(1rem - 1px);
|
||||
padding-right: -moz-calc(1rem - 1px);
|
||||
padding-right: calc(1rem - 1px);
|
||||
padding-left: -webkit-calc(1rem - 1px);
|
||||
padding-left: -moz-calc(1rem - 1px);
|
||||
padding-left: calc(1rem - 1px);
|
||||
}
|
||||
|
||||
/* Variants */
|
||||
|
||||
.no-touchevents .dropbutton__item--small:first-of-type > * {
|
||||
padding-top: -webkit-calc(0.625rem - 1px);
|
||||
padding-top: -moz-calc(0.625rem - 1px);
|
||||
padding-top: calc(0.625rem - 1px);
|
||||
padding-bottom: -webkit-calc(0.625rem - 1px);
|
||||
padding-bottom: -moz-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: -webkit-calc(0.375rem - 1px);
|
||||
padding-top: -moz-calc(0.375rem - 1px);
|
||||
padding-top: calc(0.375rem - 1px);
|
||||
padding-bottom: -webkit-calc(0.375rem - 1px);
|
||||
padding-bottom: -moz-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;
|
||||
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
||||
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 {
|
||||
-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
|
||||
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;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
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;
|
||||
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
|
||||
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: -webkit-calc(1rem - 1px);
|
||||
padding: -moz-calc(1rem - 1px);
|
||||
padding: calc(1rem - 1px);
|
||||
text-decoration: none;
|
||||
color: #545560;
|
||||
border: 1px solid transparent !important; /* 1 */
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
-webkit-box-shadow: 0;
|
||||
box-shadow: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
line-height: 1rem;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the 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) {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dropbutton__item:first-of-type ~ .dropbutton__item > *:focus {
|
||||
border-color: #26a769 !important; /* 1 */
|
||||
-webkit-box-shadow: inset 0 0 0 1px #26a769, 0 0 0 1px #26a769;
|
||||
box-shadow: inset 0 0 0 1px #26a769, 0 0 0 1px #26a769;
|
||||
}
|
||||
|
|
@ -0,0 +1,406 @@
|
|||
/**
|
||||
* @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 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,205 @@
|
|||
/*
|
||||
* 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;
|
||||
-webkit-box-shadow: 0
|
||||
2px
|
||||
4px
|
||||
rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0
|
||||
2px
|
||||
4px
|
||||
rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.fieldset--group {
|
||||
color: inherit;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
-webkit-box-shadow: 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,277 @@
|
|||
/*
|
||||
* 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 */
|
||||
-webkit-transform: translateY(-50%);
|
||||
-moz-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
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;
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
-ms-transform: none;
|
||||
-o-transform: none;
|
||||
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;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
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%;
|
||||
-webkit-box-shadow: 0 0 0 4px transparent;
|
||||
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;
|
||||
-webkit-box-shadow: inset 0 0 0 1px #222330;
|
||||
box-shadow: inset 0 0 0 1px #222330;
|
||||
}
|
||||
|
||||
.form-boolean:focus:active,
|
||||
.form-boolean:focus:hover {
|
||||
-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
|
||||
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");
|
||||
-webkit-box-shadow: inset 0 0 0 1px #003cc5;
|
||||
box-shadow: inset 0 0 0 1px #003cc5;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked:focus {
|
||||
-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
|
||||
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");
|
||||
-webkit-box-shadow: inset 0 0 0 1px #222330;
|
||||
box-shadow: inset 0 0 0 1px #222330;
|
||||
}
|
||||
|
||||
.form-boolean--type-radio:checked:focus:active,
|
||||
.form-boolean--type-radio:checked:focus:hover {
|
||||
-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
|
||||
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;
|
||||
-webkit-box-shadow: inset 0 0 0 1px #d72222;
|
||||
box-shadow: inset 0 0 0 1px #d72222;
|
||||
}
|
||||
|
||||
.form-boolean.error:active,
|
||||
.form-boolean.error:hover {
|
||||
-webkit-box-shadow: inset 0 0 0 1px #d72222;
|
||||
box-shadow: inset 0 0 0 1px #d72222;
|
||||
}
|
||||
|
||||
.form-boolean.error:focus,
|
||||
.form-boolean.error:focus:active,
|
||||
.form-boolean.error:focus:hover {
|
||||
-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
|
||||
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 {
|
||||
-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
|
||||
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;
|
||||
-webkit-box-shadow: 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,387 @@
|
|||
/*
|
||||
* 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: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -moz-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
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: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -moz-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
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: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
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: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
-moz-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
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: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -moz-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
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 {
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The 'image preview' element.
|
||||
*
|
||||
* This is used and display only by the image widget.
|
||||
*/
|
||||
|
||||
.form-managed-file__image-preview {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-moz-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
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 {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 1 16rem;
|
||||
-moz-box-flex: 1;
|
||||
-ms-flex: 1 1 16rem;
|
||||
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 {
|
||||
-ms-flex-preferred-size: 32rem;
|
||||
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: -ms-flexbox;
|
||||
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;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.form-managed-file .file__size {
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.form-managed-file__main .file {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-moz-box-flex: 1;
|
||||
-ms-flex: 1 1 auto;
|
||||
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 {
|
||||
-ms-flex: 0 1 100%;
|
||||
flex: 0 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default margins of buttons.
|
||||
* The '.button' selector is doubled for RTL layouts.
|
||||
*/
|
||||
|
||||
.form-managed-file .button.button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* The file upload input.
|
||||
*/
|
||||
|
||||
.form-managed-file__main .form-element--api-file {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-moz-box-flex: 1;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
min-width: 1px; /* This makes the element to be shrinked on IE11 */
|
||||
}
|
||||
|
||||
/**
|
||||
* This applies both on the 'no-js' upload button and the remove button.
|
||||
* We don't want to let these to be shrinked.
|
||||
*/
|
||||
|
||||
.form-managed-file__main .button {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-moz-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,257 @@
|
|||
/**
|
||||
* @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%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default margins of buttons.
|
||||
* The '.button' selector is doubled for RTL layouts.
|
||||
*/
|
||||
.form-managed-file .button.button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 */
|
||||
}
|
||||
|
||||
/**
|
||||
* This applies both on the 'no-js' upload button and the remove button.
|
||||
* We don't want to let these to be shrinked.
|
||||
*/
|
||||
.form-managed-file__main .button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,279 @@
|
|||
/*
|
||||
* 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 {
|
||||
overflow: hidden;
|
||||
max-height: 10rem;
|
||||
-webkit-transition: max-height 0.2s ease-in-out, margin 0.2s ease-in-out;
|
||||
-o-transition: max-height 0.2s ease-in-out, margin 0.2s ease-in-out;
|
||||
-moz-transition: max-height 0.2s ease-in-out, margin 0.2s ease-in-out;
|
||||
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 {
|
||||
-webkit-transition: none;
|
||||
-o-transition: none;
|
||||
-moz-transition: none;
|
||||
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: -webkit-calc(0.5rem - 2px);
|
||||
height: -moz-calc(0.5rem - 2px);
|
||||
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: -webkit-calc(0.5rem - 2px);
|
||||
min-width: -moz-calc(0.5rem - 2px);
|
||||
min-width: calc(0.5rem - 2px);
|
||||
height: -webkit-calc(0.5rem - 2px);
|
||||
height: -moz-calc(0.5rem - 2px);
|
||||
height: calc(0.5rem - 2px);
|
||||
margin: -1px;
|
||||
-webkit-transition: width
|
||||
0.5s
|
||||
ease-out;
|
||||
-o-transition: width
|
||||
0.5s
|
||||
ease-out;
|
||||
-moz-transition: width
|
||||
0.5s
|
||||
ease-out;
|
||||
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 {
|
||||
-webkit-transition: none;
|
||||
-o-transition: none;
|
||||
-moz-transition: none;
|
||||
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;
|
||||
-webkit-box-shadow: 0
|
||||
2px
|
||||
4px
|
||||
rgba(0, 0, 0, 0.1);
|
||||
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,198 @@
|
|||
/**
|
||||
* @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 {
|
||||
overflow: hidden;
|
||||
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,109 @@
|
|||
/*
|
||||
* 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: -webkit-calc(2rem - 1px);
|
||||
padding-right: -moz-calc(2rem - 1px);
|
||||
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: -webkit-calc(1rem - 1px);
|
||||
padding-right: -moz-calc(1rem - 1px);
|
||||
padding-right: calc(1rem - 1px);
|
||||
padding-left: -webkit-calc(2rem - 1px);
|
||||
padding-left: -moz-calc(2rem - 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: -webkit-calc(1.5rem - 1px);
|
||||
padding-right: -moz-calc(1.5rem - 1px);
|
||||
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: -webkit-calc(0.5rem - 1px);
|
||||
padding-right: -moz-calc(0.5rem - 1px);
|
||||
padding-right: calc(0.5rem - 1px);
|
||||
padding-left: -webkit-calc(1.5rem - 1px);
|
||||
padding-left: -moz-calc(1.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,228 @@
|
|||
/*
|
||||
* 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 {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
min-height: 3rem; /* iOS. */
|
||||
padding: -webkit-calc(0.75rem - 1px) -webkit-calc(1rem - 1px);
|
||||
padding: -moz-calc(0.75rem - 1px) -moz-calc(1rem - 1px);
|
||||
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: -webkit-calc(0.15rem - 1px) -webkit-calc(0.5rem - 1px);
|
||||
padding: -moz-calc(0.15rem - 1px) -moz-calc(0.5rem - 1px);
|
||||
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;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
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: -webkit-calc(0.75rem - 1px);
|
||||
text-indent: -moz-calc(0.75rem - 1px);
|
||||
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;
|
||||
-webkit-box-shadow: inset 0 0 0 1px #222330;
|
||||
box-shadow: inset 0 0 0 1px #222330;
|
||||
}
|
||||
|
||||
.form-element:focus {
|
||||
-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
|
||||
}
|
||||
|
||||
.form-element:hover:focus {
|
||||
-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
|
||||
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 {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-element.error:hover:focus {
|
||||
-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
|
||||
}
|
||||
|
||||
.form-element--type-textarea.error + .cke {
|
||||
border-color: #d72222;
|
||||
}
|
||||
|
||||
.form-element[disabled] {
|
||||
-webkit-opacity: 1;
|
||||
color: #82828c;
|
||||
border-color: #bababf;
|
||||
background-color: #f2f2f3;
|
||||
-webkit-box-shadow: none;
|
||||
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,142 @@
|
|||
/**
|
||||
* @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] {
|
||||
-webkit-opacity: 1;
|
||||
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,269 @@
|
|||
/*
|
||||
* 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.
|
||||
*/
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #8e929c;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: #8e929c;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: #8e929c;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #8e929c;
|
||||
}
|
||||
|
||||
::-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: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
-moz-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
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 {
|
||||
-webkit-align-self: center;
|
||||
-ms-flex-item-align: center;
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,165 @@
|
|||
/**
|
||||
* @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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,110 @@
|
|||
/*
|
||||
* 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;
|
||||
-webkit-box-shadow: inset 0 0 0.4375rem #d4d4d8;
|
||||
box-shadow: inset 0 0 0.4375rem #d4d4d8;
|
||||
}
|
||||
|
||||
.image-preview img {
|
||||
background-image:
|
||||
-moz-linear-gradient(135deg, #d4d4d8 25%, transparent 26%),
|
||||
-moz-linear-gradient(135deg, #d4d4d8 25%, transparent 26%),
|
||||
-moz-linear-gradient(315deg, #d4d4d8 25%, transparent 26%),
|
||||
-moz-linear-gradient(315deg, #d4d4d8 25%, transparent 26%);
|
||||
background-image:
|
||||
-o-linear-gradient(135deg, #d4d4d8 25%, transparent 26%),
|
||||
-o-linear-gradient(135deg, #d4d4d8 25%, transparent 26%),
|
||||
-o-linear-gradient(315deg, #d4d4d8 25%, transparent 26%),
|
||||
-o-linear-gradient(315deg, #d4d4d8 25%, transparent 26%);
|
||||
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,746 @@
|
|||
/*
|
||||
* 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;
|
||||
-webkit-box-shadow: 0 0.125rem 0.25rem rgba(34, 35, 48, 0.1);
|
||||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
/**
|
||||
* 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;
|
||||
}
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* Messages.
|
||||
*
|
||||
* @todo revisit this after https://www.drupal.org/project/drupal/issues/3078400
|
||||
* has been resolved.
|
||||
*/
|
||||
|
||||
: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.
|
||||
*/
|
||||
}
|
||||
|
||||
.messages-list {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.field .messages-list,
|
||||
.form-wrapper .messages-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.messages {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1.5rem 1.5rem 2rem -webkit-calc(1.5rem - 5px);
|
||||
padding: 1.5rem 1.5rem 2rem -moz-calc(1.5rem - 5px);
|
||||
padding: 1.5rem 1.5rem 2rem calc(1.5rem - 5px); /* LTR */
|
||||
color: #fff;
|
||||
border-width: 0 0 0 5px; /* LTR */
|
||||
border-style: solid;
|
||||
border-color: #353641;
|
||||
border-radius: 2px;
|
||||
background-color: #353641;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages {
|
||||
padding-right: -webkit-calc(1.5rem - 5px);
|
||||
padding-right: -moz-calc(1.5rem - 5px);
|
||||
padding-right: calc(1.5rem - 5px);
|
||||
padding-left: 1.5rem;
|
||||
border-right-width: 5px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.messages--error {
|
||||
border-color: #e34f4f;
|
||||
}
|
||||
|
||||
.messages--status {
|
||||
border-color: #42a877;
|
||||
}
|
||||
|
||||
.messages--warning {
|
||||
border-color: #e0ac00;
|
||||
}
|
||||
|
||||
.messages__title {
|
||||
margin: 0 0 0 2.5rem; /* LTR */
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages__title {
|
||||
margin-right: 2.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.messages--error .messages__header {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3E%3Cpath d='M3 11.1931L11.4501 2.99995' stroke='%23e34f4f' stroke-width='2'/%3E%3Ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat center left; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages--error .messages__header {
|
||||
background-position: center right;
|
||||
}
|
||||
|
||||
.messages--status .messages__header {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 13'%3E%3Cpath d='M2 6.57143L5.6 10L14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3E%3C/svg%3E%0A") no-repeat center left; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages--status .messages__header {
|
||||
background-position: center right;
|
||||
}
|
||||
|
||||
.messages--warning .messages__header {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 4 14' fill='%23e0ac00'%3E%3Crect x='0.5' width='3' height='9'/%3E%3Ccircle cx='2' cy='12.5' r='1.5'/%3E%3C/svg%3E%0A") no-repeat center left; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages--warning .messages__header {
|
||||
background-position: center right;
|
||||
}
|
||||
|
||||
.messages__header {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
.messages__content {
|
||||
margin-left: 2.5rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages__content {
|
||||
margin-right: 2.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.messages a {
|
||||
text-decoration: underline;
|
||||
color: #ffd23f;
|
||||
}
|
||||
|
||||
.messages a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.messages pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.messages__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.messages__item + .messages__item {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.messages {
|
||||
border-width: 1px 1px 1px 5px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .messages {
|
||||
border-right-width: 5px;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
.messages__header {
|
||||
-webkit-filter: grayscale(1) brightness(1.5) contrast(10);
|
||||
filter: grayscale(1) brightness(1.5) contrast(10);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
/**
|
||||
* Messages.
|
||||
*
|
||||
* @todo revisit this after https://www.drupal.org/project/drupal/issues/3078400
|
||||
* has been resolved.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
--messages-bg-color: #353641;
|
||||
--messages-fg-color: var(--color-white);
|
||||
--messages-border-radius: 2px;
|
||||
--messages-border-width: 5px;
|
||||
--messages--status-color: #42a877;
|
||||
--messages--warning-color: #e0ac00;
|
||||
--messages--error-color: #e34f4f;
|
||||
--messages__link-color: var(--color-sunglow);
|
||||
--messages__link--hover-color: var(--color-white);
|
||||
--messages__icon-size: 1rem;
|
||||
--messages__text-margin: calc(var(--messages__icon-size) + var(--space-l));
|
||||
}
|
||||
|
||||
.messages-list {
|
||||
margin-top: calc(var(--space-m) + var(--space-l));
|
||||
margin-bottom: calc(var(--space-m) + var(--space-l));
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.field .messages-list,
|
||||
.form-wrapper .messages-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.messages {
|
||||
box-sizing: border-box;
|
||||
margin-top: var(--space-m);
|
||||
margin-bottom: var(--space-m);
|
||||
padding: var(--space-l) var(--space-l) 2rem calc(var(--space-l) - 5px); /* LTR */
|
||||
color: var(--messages-fg-color);
|
||||
border-width: 0 0 0 var(--messages-border-width); /* LTR */
|
||||
border-style: solid;
|
||||
border-color: var(--messages-bg-color);
|
||||
border-radius: var(--messages-border-radius);
|
||||
background-color: var(--messages-bg-color);
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages {
|
||||
padding-right: calc(var(--space-l) - 5px);
|
||||
padding-left: var(--space-l);
|
||||
border-right-width: var(--messages-border-width);
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.messages--error {
|
||||
border-color: var(--messages--error-color);
|
||||
}
|
||||
|
||||
.messages--status {
|
||||
border-color: var(--messages--status-color);
|
||||
}
|
||||
|
||||
.messages--warning {
|
||||
border-color: var(--messages--warning-color);
|
||||
}
|
||||
|
||||
.messages__title {
|
||||
margin: 0 0 0 var(--messages__text-margin); /* LTR */
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
[dir="rtl"] .messages__title {
|
||||
margin-right: var(--messages__text-margin);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.messages--error .messages__header {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3E%3Cpath d='M3 11.1931L11.4501 2.99995' stroke='%23e34f4f' stroke-width='2'/%3E%3Ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat center left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .messages--error .messages__header {
|
||||
background-position: center right;
|
||||
}
|
||||
|
||||
.messages--status .messages__header {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 13'%3E%3Cpath d='M2 6.57143L5.6 10L14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3E%3C/svg%3E%0A") no-repeat center left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .messages--status .messages__header {
|
||||
background-position: center right;
|
||||
}
|
||||
|
||||
.messages--warning .messages__header {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 4 14' fill='%23e0ac00'%3E%3Crect x='0.5' width='3' height='9'/%3E%3Ccircle cx='2' cy='12.5' r='1.5'/%3E%3C/svg%3E%0A") no-repeat center left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .messages--warning .messages__header {
|
||||
background-position: center right;
|
||||
}
|
||||
|
||||
.messages__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
.messages__content {
|
||||
margin-left: var(--messages__text-margin); /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages__content {
|
||||
margin-right: var(--messages__text-margin);
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.messages a {
|
||||
text-decoration: underline;
|
||||
color: var(--messages__link-color);
|
||||
}
|
||||
|
||||
.messages a:hover {
|
||||
color: var(--messages__link--hover-color);
|
||||
}
|
||||
|
||||
.messages pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.messages__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.messages__item + .messages__item {
|
||||
margin-top: var(--space-s);
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.messages {
|
||||
border-width: 1px 1px 1px var(--messages-border-width); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .messages {
|
||||
border-right-width: var(--messages-border-width);
|
||||
border-left-width: 1px;
|
||||
}
|
||||
.messages__header {
|
||||
filter: grayscale(1) brightness(1.5) contrast(10);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
/* Modules page */
|
||||
.system-modules fieldset {
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.system-modules .fieldset-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
.system-modules table,
|
||||
.locale-translation-status-form table {
|
||||
border: 0;
|
||||
}
|
||||
.system-modules tr.even,
|
||||
.system-modules tr.odd,
|
||||
.locale-translation-status-form tr.even,
|
||||
.locale-translation-status-form tr.odd {
|
||||
border: 0;
|
||||
border-bottom: 10px solid #fff;
|
||||
background: #f3f4ee;
|
||||
}
|
||||
.system-modules tr td:last-child,
|
||||
.locale-translation-status-form tr td:last-child {
|
||||
border: 0;
|
||||
}
|
||||
.system-modules table th,
|
||||
.locale-translation-status-form table th {
|
||||
border: 0;
|
||||
border-bottom: 10px solid #fff;
|
||||
}
|
||||
.system-modules .sticky-header th,
|
||||
.locale-translation-status-form .sticky-header th {
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
/* Modules page */
|
||||
.system-modules fieldset {
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.system-modules .fieldset-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
.system-modules table,
|
||||
.locale-translation-status-form table {
|
||||
border: 0;
|
||||
}
|
||||
.system-modules tr.even,
|
||||
.system-modules tr.odd,
|
||||
.locale-translation-status-form tr.even,
|
||||
.locale-translation-status-form tr.odd {
|
||||
border: 0;
|
||||
border-bottom: 10px solid #fff;
|
||||
background: #f3f4ee;
|
||||
}
|
||||
.system-modules tr td:last-child,
|
||||
.locale-translation-status-form tr td:last-child {
|
||||
border: 0;
|
||||
}
|
||||
.system-modules table th,
|
||||
.locale-translation-status-form table th {
|
||||
border: 0;
|
||||
border-bottom: 10px solid #fff;
|
||||
}
|
||||
.system-modules .sticky-header th,
|
||||
.locale-translation-status-form .sticky-header th {
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
.node__submitted {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.node__submitted {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Page title.
|
||||
*/
|
||||
|
||||
: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.
|
||||
*/
|
||||
}
|
||||
|
||||
.block-page-title-block {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.block-page-title-block:last-child {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* There are use cases where page title is not rendered as a block ¯\_(ツ)_/¯.
|
||||
*
|
||||
* @see Drupal\system\Controller\BatchController::batchPage()
|
||||
*/
|
||||
|
||||
.region-header > .page-title {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
font-size: 2.027rem;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
/**
|
||||
* @file
|
||||
* Page title.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.block-page-title-block {
|
||||
margin-bottom: var(--space-s);
|
||||
}
|
||||
|
||||
.block-page-title-block:last-child {
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
||||
/**
|
||||
* There are use cases where page title is not rendered as a block ¯\_(ツ)_/¯.
|
||||
*
|
||||
* @see Drupal\system\Controller\BatchController::batchPage()
|
||||
*/
|
||||
.region-header > .page-title {
|
||||
margin-top: var(--breadcrumb-height);
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
font-size: var(--font-size-h1);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styles for Claro's Pagination.
|
||||
*/
|
||||
|
||||
: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 {
|
||||
/**
|
||||
* Pager.
|
||||
*/ /* --space-m × 2 */ /* 2px */
|
||||
}
|
||||
|
||||
.pager {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pager__items {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
-moz-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
margin: 1rem 0; /* LTR */
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
[dir="rtl"] .pager__items {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.pager__item {
|
||||
display: inline-block;
|
||||
margin-right: 0.25rem;
|
||||
margin-left: 0.25rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.pager__link,
|
||||
.pager__item--current {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
min-width: 2rem;
|
||||
height: 2rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
text-decoration: none;
|
||||
color: #545560;
|
||||
border-radius: 1rem; /* Pager size ÷ 2 */
|
||||
background: #fff; /* Make sure that the text is visible on dark background. */
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.pager__link:hover,
|
||||
.pager__link:focus,
|
||||
.pager__link:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pager__link:hover,
|
||||
.pager__link.is-active:hover {
|
||||
color: #545560;
|
||||
background: #e6ecf8;
|
||||
}
|
||||
|
||||
.pager__link--action-link {
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
/* Active number link. */
|
||||
|
||||
.pager__link.is-active,
|
||||
.pager__item--current {
|
||||
color: #fff;
|
||||
background: #003cc5;
|
||||
}
|
||||
|
||||
.pager__item--first .pager__link::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2V14' stroke='%23545560' stroke-width='2'/%3E%3Cpath d='M14 2L8 8L14 14' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.pager__item--previous .pager__link::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2L5 8L11 14' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.pager__item--next .pager__link::after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 14L11 8L5 2' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.pager__item--last .pager__link::after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 14L14 2.00001' stroke='%23545560' stroke-width='2'/%3E%3Cpath d='M2 14L8 8.00001L2 2.00001' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.pager__item--first .pager__link::before,
|
||||
.pager__item--previous .pager__link::before,
|
||||
.pager__item--next .pager__link::after,
|
||||
.pager__item--last .pager__link::after {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
content: "";
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
[dir="rtl"] .pager__item--first .pager__link::before,
|
||||
[dir="rtl"] .pager__item--previous .pager__link::before,
|
||||
[dir="rtl"] .pager__item--next .pager__link::after,
|
||||
[dir="rtl"] .pager__item--last .pager__link::after {
|
||||
-webkit-transform: scaleX(-1);
|
||||
-moz-transform: scaleX(-1);
|
||||
-ms-transform: scaleX(-1);
|
||||
-o-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.pager__item--mini {
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.pager__link--mini {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/**
|
||||
* On the mini pager, remove margins for the previous and next icons.
|
||||
* Margins are not needed here as there is no accompanying text.
|
||||
*/
|
||||
|
||||
.pager__link--mini::before {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pager__item-title--backwards {
|
||||
margin-left: 0.5rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .pager__item-title--backwards {
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pager__item-title--forward {
|
||||
margin-right: 0.5rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .pager__item-title--forward {
|
||||
margin-right: 0;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast: active) {
|
||||
.pager__item a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.pager__link.is-active {
|
||||
border: 0.125rem solid #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
/**
|
||||
* @file
|
||||
* Styles for Claro's Pagination.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
/**
|
||||
* Pager.
|
||||
*/
|
||||
--pager-size: 2rem; /* --space-m × 2 */
|
||||
--pager-border-width: 0.125rem; /* 2px */
|
||||
--pager-fg-color: var(--color-davysgrey);
|
||||
--pager-bg-color: var(--color-white);
|
||||
--pager--hover-bg-color: var(--color-bgblue-active);
|
||||
--pager--focus-bg-color: var(--color-focus);
|
||||
--pager--active-fg-color: var(--color-white);
|
||||
--pager--active-bg-color: var(--color-absolutezero);
|
||||
--pager-border-radius--action: var(--pager-border-width);
|
||||
}
|
||||
|
||||
.pager {
|
||||
margin-top: var(--space-m);
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
|
||||
.pager__items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
margin: var(--space-m) 0; /* LTR */
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
[dir="rtl"] .pager__items {
|
||||
margin: var(--space-m) 0;
|
||||
}
|
||||
|
||||
.pager__item {
|
||||
display: inline-block;
|
||||
margin-right: calc(var(--space-xs) / 2);
|
||||
margin-left: calc(var(--space-xs) / 2);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.pager__link,
|
||||
.pager__item--current {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
min-width: var(--pager-size);
|
||||
height: var(--pager-size);
|
||||
padding-right: var(--space-xs);
|
||||
padding-left: var(--space-xs);
|
||||
text-decoration: none;
|
||||
color: var(--pager-fg-color);
|
||||
border-radius: var(--space-m); /* Pager size ÷ 2 */
|
||||
background: var(--pager-bg-color); /* Make sure that the text is visible on dark background. */
|
||||
line-height: 1;
|
||||
}
|
||||
.pager__link:hover,
|
||||
.pager__link:focus,
|
||||
.pager__link:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
.pager__link:hover,
|
||||
.pager__link.is-active:hover {
|
||||
color: var(--pager-fg-color);
|
||||
background: var(--pager--hover-bg-color);
|
||||
}
|
||||
.pager__link--action-link {
|
||||
border-radius: var(--pager-border-radius--action);
|
||||
}
|
||||
/* Active number link. */
|
||||
.pager__link.is-active,
|
||||
.pager__item--current {
|
||||
color: var(--pager--active-fg-color);
|
||||
background: var(--pager--active-bg-color);
|
||||
}
|
||||
.pager__item--first .pager__link::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2V14' stroke='%23545560' stroke-width='2'/%3E%3Cpath d='M14 2L8 8L14 14' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
.pager__item--previous .pager__link::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2L5 8L11 14' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
.pager__item--next .pager__link::after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 14L11 8L5 2' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
.pager__item--last .pager__link::after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 14L14 2.00001' stroke='%23545560' stroke-width='2'/%3E%3Cpath d='M2 14L8 8.00001L2 2.00001' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
.pager__item--first .pager__link::before,
|
||||
.pager__item--previous .pager__link::before,
|
||||
.pager__item--next .pager__link::after,
|
||||
.pager__item--last .pager__link::after {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
content: "";
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
[dir="rtl"] .pager__item--first .pager__link::before,
|
||||
[dir="rtl"] .pager__item--previous .pager__link::before,
|
||||
[dir="rtl"] .pager__item--next .pager__link::after,
|
||||
[dir="rtl"] .pager__item--last .pager__link::after {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.pager__item--mini {
|
||||
margin-right: calc(var(--space-m) / 2);
|
||||
margin-left: calc(var(--space-m) / 2);
|
||||
}
|
||||
.pager__link--mini {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/**
|
||||
* On the mini pager, remove margins for the previous and next icons.
|
||||
* Margins are not needed here as there is no accompanying text.
|
||||
*/
|
||||
.pager__link--mini::before {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pager__item-title--backwards {
|
||||
margin-left: 0.5rem; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .pager__item-title--backwards {
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pager__item-title--forward {
|
||||
margin-right: 0.5rem; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .pager__item-title--forward {
|
||||
margin-right: 0;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast: active) {
|
||||
.pager__item a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.pager__link.is-active {
|
||||
border: var(--pager-border-width) solid var(--color-white);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for progress bar.
|
||||
*
|
||||
* @see progress.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.
|
||||
*/
|
||||
}
|
||||
|
||||
.progress::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.progress--small .progress__track {
|
||||
height: -webkit-calc(0.5rem - 2px);
|
||||
height: -moz-calc(0.5rem - 2px);
|
||||
height: calc(0.5rem - 2px);
|
||||
}
|
||||
|
||||
.progress--small .progress__bar {
|
||||
width: -webkit-calc(0.5rem - 2px);
|
||||
width: -moz-calc(0.5rem - 2px);
|
||||
width: calc(0.5rem - 2px);
|
||||
min-width: -webkit-calc(0.5rem - 2px);
|
||||
min-width: -moz-calc(0.5rem - 2px);
|
||||
min-width: calc(0.5rem - 2px);
|
||||
height: -webkit-calc(0.5rem - 2px);
|
||||
height: -moz-calc(0.5rem - 2px);
|
||||
height: calc(0.5rem - 2px);
|
||||
}
|
||||
|
||||
.progress--small .progress__label {
|
||||
font-size: 0.889rem;
|
||||
}
|
||||
|
||||
.progress__track {
|
||||
height: -webkit-calc(1rem - 2px);
|
||||
height: -moz-calc(1rem - 2px);
|
||||
height: calc(1rem - 2px);
|
||||
margin-top: 0;
|
||||
border: 1px #8e929c solid;
|
||||
border-radius: 1rem;
|
||||
background-color: #d4d4d8;
|
||||
}
|
||||
|
||||
.progress__bar {
|
||||
width: -webkit-calc(1rem - 2px);
|
||||
width: -moz-calc(1rem - 2px);
|
||||
width: calc(1rem - 2px);
|
||||
min-width: -webkit-calc(1rem - 2px);
|
||||
min-width: -moz-calc(1rem - 2px);
|
||||
min-width: calc(1rem - 2px);
|
||||
height: -webkit-calc(1rem - 2px);
|
||||
height: -moz-calc(1rem - 2px);
|
||||
height: calc(1rem - 2px);
|
||||
margin-top: -1px;
|
||||
margin-left: -1px; /* LTR */
|
||||
-webkit-transition: width
|
||||
0.5s
|
||||
ease-out;
|
||||
-o-transition: width
|
||||
0.5s
|
||||
ease-out;
|
||||
-moz-transition: width
|
||||
0.5s
|
||||
ease-out;
|
||||
transition: width
|
||||
0.5s
|
||||
ease-out;
|
||||
border: 1px #003cc5 solid;
|
||||
border-radius: 1rem;
|
||||
background-color: #003cc5;
|
||||
}
|
||||
|
||||
[dir="rtl"] .progress__bar {
|
||||
margin-right: -1px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.progress__bar {
|
||||
background-color: windowText;
|
||||
}
|
||||
}
|
||||
|
||||
.progress__label {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.progress__description,
|
||||
.progress__percentage {
|
||||
overflow: hidden;
|
||||
margin-top: 0.5rem;
|
||||
color: #545560;
|
||||
font-size: 0.79rem;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.progress__bar {
|
||||
-webkit-transition: none;
|
||||
-o-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
/**
|
||||
* @file
|
||||
* Visual styles for progress bar.
|
||||
*
|
||||
* @see progress.js
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
--progress-bar-bg-color: var(--color-absolutezero);
|
||||
--progress-bar-border-color: var(--color-absolutezero);
|
||||
--progress-bar-label-font-size: var(--font-size-base);
|
||||
--progress-bar-small-label-font-size: var(--font-size-label);
|
||||
--progress-bar-default-size: calc(var(--space-m) - (2 * var(--progress-bar-border-size)));
|
||||
--progress-bar-default-size-radius: var(--space-m);
|
||||
}
|
||||
|
||||
.progress::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.progress--small .progress__track {
|
||||
height: var(--progress-bar-small-size);
|
||||
}
|
||||
.progress--small .progress__bar {
|
||||
width: var(--progress-bar-small-size);
|
||||
min-width: var(--progress-bar-small-size);
|
||||
height: var(--progress-bar-small-size);
|
||||
}
|
||||
|
||||
.progress--small .progress__label {
|
||||
font-size: var(--progress-bar-small-label-font-size);
|
||||
}
|
||||
|
||||
.progress__track {
|
||||
height: var(--progress-bar-default-size);
|
||||
margin-top: 0;
|
||||
border: var(--progress-bar-border-size) var(--progress-track-border-color) solid;
|
||||
border-radius: var(--progress-bar-default-size-radius);
|
||||
background-color: var(--progress-track-bg-color);
|
||||
}
|
||||
|
||||
.progress__bar {
|
||||
width: var(--progress-bar-default-size);
|
||||
min-width: var(--progress-bar-default-size);
|
||||
height: var(--progress-bar-default-size);
|
||||
margin-top: calc(var(--progress-bar-border-size) * -1);
|
||||
margin-left: calc(var(--progress-bar-border-size) * -1); /* LTR */
|
||||
transition: var(--progress-bar-transition);
|
||||
border: var(--progress-bar-border-size) var(--progress-bar-border-color) solid;
|
||||
border-radius: var(--progress-bar-default-size-radius);
|
||||
background-color: var(--progress-bar-bg-color);
|
||||
}
|
||||
[dir="rtl"] .progress__bar {
|
||||
margin-right: calc(var(--progress-bar-border-size) * -1);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.progress__bar {
|
||||
background-color: windowText;
|
||||
}
|
||||
}
|
||||
|
||||
.progress__label {
|
||||
margin-bottom: var(--progress-bar-spacing-size);
|
||||
font-size: var(--progress-bar-label-font-size);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.progress__description,
|
||||
.progress__percentage {
|
||||
overflow: hidden;
|
||||
margin-top: var(--progress-bar-spacing-size);
|
||||
color: var(--progress-bar-description-color);
|
||||
font-size: var(--progress-bar-description-font-size);
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.progress__bar {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue