644 lines
18 KiB
CSS
644 lines
18 KiB
CSS
/*
|
|
* DO NOT EDIT THIS FILE.
|
|
* See the following change record for more information,
|
|
* https://www.drupal.org/node/3084859
|
|
* @preserve
|
|
*/
|
|
|
|
/**
|
|
* @file
|
|
* Collapsible details.
|
|
*
|
|
* @see collapse.js
|
|
*/
|
|
|
|
: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 gray 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. */
|
|
/**
|
|
* jQuery.UI dialog.
|
|
*/
|
|
/**
|
|
* Progress bar.
|
|
*/
|
|
/**
|
|
* Tabledrag icon size.
|
|
*/ /* 17px */
|
|
/**
|
|
* Ajax progress.
|
|
*/
|
|
/**
|
|
* Breadcrumb.
|
|
*/
|
|
}
|
|
|
|
/**
|
|
* Available modifiers are:
|
|
* - .claro-details--accordion
|
|
* - .claro-details--accordion-item
|
|
*
|
|
* Despite the fact that 'accordion' isn't used anywhere right now, we
|
|
* implemented it (since the design defines that).
|
|
* This variant can be used by setting the '#accordion' to TRUE for a
|
|
* Details render element:
|
|
* @code
|
|
* $build['detail_accordion'] = [
|
|
* '#type' => 'details',
|
|
* '#accordion' => TRUE,
|
|
* ];
|
|
*
|
|
* 'Accordion item' is used for the details of the node edit sidebar. For
|
|
* creating accordion item list from a set of details, set the surrounding
|
|
* Container render element's '#accordion' key to TRUE.
|
|
*
|
|
* 'Vertical tabs item' is used for the children of the VerticalTabs render
|
|
* element.
|
|
*/
|
|
|
|
.claro-details {
|
|
display: block;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
color: #222330;
|
|
border: 1px solid rgba(216, 217, 224, 0.8);
|
|
border-radius: 2px;
|
|
background-color: #fff;
|
|
box-shadow: 0
|
|
2px
|
|
4px
|
|
rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.claro-details--accordion-item,
|
|
.claro-details--vertical-tabs-item {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.claro-details--accordion-item:first-of-type {
|
|
border-top-left-radius: 2px;
|
|
border-top-right-radius: 2px;
|
|
}
|
|
|
|
.claro-details--accordion-item:last-of-type {
|
|
border-bottom-right-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
|
|
/**
|
|
* Details summary styles.
|
|
*/
|
|
|
|
.claro-details__summary {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 1rem 1rem 1rem 2.25rem; /* LTR */
|
|
list-style: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.12s ease-in-out;
|
|
word-wrap: break-word;
|
|
-webkit-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
hyphens: auto;
|
|
color: #545560;
|
|
border-radius: 1px;
|
|
background-color: transparent;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
[dir="rtl"] .claro-details__summary {
|
|
padding-right: 2.25rem;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
/* Modifiers */
|
|
|
|
.claro-details__summary--accordion,
|
|
.claro-details__summary--accordion-item,
|
|
.claro-details__summary--vertical-tabs-item {
|
|
padding: 1.25rem 1.5rem 1.25rem 2.25rem; /* LTR */
|
|
background: #fff;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
[dir="rtl"] .claro-details__summary--accordion,
|
|
[dir="rtl"] .claro-details__summary--accordion-item,
|
|
[dir="rtl"] .claro-details__summary--vertical-tabs-item {
|
|
padding-right: 2.25rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
/**
|
|
* Accordion list items must not have border radius except they are the first
|
|
* or the last ones.
|
|
*/
|
|
|
|
.claro-details__summary--accordion-item {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.claro-details--accordion-item:first-child .claro-details__summary--accordion-item {
|
|
border-top-left-radius: 2px;
|
|
border-top-right-radius: 2px;
|
|
}
|
|
|
|
.claro-details--accordion-item:last-child .claro-details__summary--accordion-item {
|
|
border-bottom-right-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
|
|
/**
|
|
* Details marker styles.
|
|
*/
|
|
|
|
/* Remove the marker on Chrome */
|
|
|
|
.claro-details__summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.claro-details__summary::before {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0.75rem; /* LTR */
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-top: -0.5rem;
|
|
content: "";
|
|
transition: transform 0.12s ease-in 0s;
|
|
transform: rotate(0); /* LTR */
|
|
text-align: center;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%23545560'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
|
background-size: contain;
|
|
}
|
|
|
|
[dir="rtl"] .claro-details__summary::before {
|
|
right: 0.75rem;
|
|
left: auto;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.claro-details__summary::before {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (-ms-high-contrast: active) {
|
|
.claro-details__summary::before {
|
|
width: 0.5625rem;
|
|
height: 0.5625rem;
|
|
margin-top: -0.28125rem;
|
|
transition: transform 0.12s ease-in 0s, margin 0.12s ease-in 0s;
|
|
transform: rotate(45deg); /* LTR */
|
|
border: 0.125rem solid;
|
|
border-width: 0.125rem 0.125rem 0 0;
|
|
background: none;
|
|
}
|
|
|
|
[dir="rtl"] .claro-details__summary::before {
|
|
transform: rotate(225deg);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Safari (at least version 12.1) cannot handle our details marker
|
|
* transition properly.
|
|
*
|
|
* Every additional pointer triggered toggle event freezes the transition,
|
|
* and the transition is continued and finished after the pointer leaves
|
|
* the Detail elements' summary.
|
|
*
|
|
* Even that it is possible to provide a JavaScript workaround for it (by
|
|
* adding/removing a helper class with JavaScript if the Details is
|
|
* toggled), that hack will make RTL details worse than without the hack.
|
|
*
|
|
* This weird query was found in
|
|
* https://stackoverflow.com/questions/16348489#25975282 (based on the
|
|
* answer it works for Safari 10.1+)
|
|
*/
|
|
|
|
/* stylelint-disable-next-line unit-whitelist */
|
|
|
|
@media not all and (min-resolution: 0.001dpcm) {
|
|
@media {
|
|
.claro-details__summary::before {
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Details summary focus.
|
|
*/
|
|
|
|
.claro-details__summary::after {
|
|
position: absolute;
|
|
top: -1px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
left: -1px;
|
|
content: "";
|
|
transition: opacity 0.2s ease-in-out;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
border-radius: 2px;
|
|
box-shadow: inset 0 0 0 3px #26a769;
|
|
}
|
|
|
|
.claro-details > .claro-details__summary--accordion-item::after,
|
|
.vertical-tabs__item > .claro-details__summary--vertical-tabs-item::after {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.claro-details:first-child > .claro-details__summary--accordion-item::after,
|
|
.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item::after {
|
|
border-top-left-radius: 2px;
|
|
border-top-right-radius: 2px;
|
|
}
|
|
|
|
.claro-details:last-child > .claro-details__summary--accordion-item::after,
|
|
.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item::after {
|
|
border-bottom-right-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
|
|
/**
|
|
* Focus box of accordions and accordion items must not have bottom border
|
|
* radius if their accordion is expanded.
|
|
*/
|
|
|
|
.claro-details[open] > .claro-details__summary--accordion::after,
|
|
.claro-details[open] > .claro-details__summary--accordion-item::after,
|
|
.vertical-tabs__item--last[open] > .claro-details__summary--vertical-tabs-item::after {
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
/**
|
|
* Details summary states.
|
|
*/
|
|
|
|
.claro-details__summary:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
[open] .claro-details__summary--accordion,
|
|
[open] .claro-details__summary--accordion-item,
|
|
[open] .claro-details__summary--vertical-tabs-item {
|
|
color: #003cc5;
|
|
}
|
|
|
|
.claro-details__summary:hover::before,
|
|
.claro-details__summary:hover:focus::before,
|
|
.claro-details[open] > .claro-details__summary:focus::before,
|
|
.claro-details[open] > .claro-details__summary--accordion::before,
|
|
.claro-details[open] > .claro-details__summary--accordion-item::before,
|
|
.claro-details[open] > .claro-details__summary--vertical-tabs-item::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%230036B1'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.claro-details[open] > .claro-details__summary {
|
|
border-radius: 1px 1px 0 0;
|
|
}
|
|
|
|
.claro-details[open] > .claro-details__summary::before {
|
|
transform: rotate(90deg); /* for LTR and RTL */
|
|
}
|
|
|
|
@media screen and (-ms-high-contrast: active) {
|
|
.claro-details__summary:hover::before,
|
|
.claro-details__summary:hover:focus::before {
|
|
background: none;
|
|
}
|
|
|
|
.claro-details[open] > .claro-details__summary::before,
|
|
[dir="rtl"] .claro-details[open] > .claro-details__summary::before {
|
|
margin-top: -0.40625rem;
|
|
margin-right: 0.125rem;
|
|
transform: rotate(135deg); /* for LTR and RTL */
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
.claro-details[open] > .claro-details__summary--accordion,
|
|
.claro-details[open] > .claro-details__summary--accordion-item,
|
|
.claro-details[open] > .claro-details__summary--vertical-tabs-item {
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.claro-details__summary:hover {
|
|
color: #003cc5;
|
|
background-color: #f0f5fd;
|
|
}
|
|
|
|
/**
|
|
* Focus styles.
|
|
*/
|
|
|
|
/**
|
|
* Active has to be here for Firefox.
|
|
* Merges standard collapse-processed selectors.
|
|
*/
|
|
|
|
[open] > .claro-details__summary--accordion:not(:focus):not(:active)::after,
|
|
[open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after,
|
|
.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
|
|
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
|
|
[open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
|
|
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
|
|
opacity: 1;
|
|
border: 3px solid #003cc5;
|
|
border-width: 0 0 0 3px; /* LTR */
|
|
box-shadow: none;
|
|
}
|
|
|
|
[dir="rtl"] [open] > .claro-details__summary--accordion:not(:focus)::after,
|
|
[dir="rtl"] [open] > .claro-details__summary--accordion-item:not(:focus)::after,
|
|
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
|
|
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
|
|
[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after,
|
|
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
|
|
border-width: 0 3px 0 0;
|
|
}
|
|
|
|
.claro-details__summary:focus::after,
|
|
.claro-details__summary:active::after,
|
|
.collapse-processed > .claro-details__summary .details-title:focus::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
/**
|
|
* Safari workaround.
|
|
*/
|
|
|
|
/* stylelint-disable-next-line unit-whitelist */
|
|
|
|
@media not all and (min-resolution: 0.001dpcm) {
|
|
@media {
|
|
.claro-details__summary::after {
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claro-details[open] > .claro-details__summary:focus {
|
|
color: #003cc5;
|
|
}
|
|
|
|
/**
|
|
* Details wrapper and content.
|
|
*
|
|
* Accordion and accordion-item variants should have an extra background.
|
|
* In that case, we render an additional wrapper 'claro-details__content' that
|
|
* creates the visual margins around the content, and use the original
|
|
* wrapper for setting the background color.
|
|
*
|
|
* If there is no border or padding defined, margins of parent-child elements
|
|
* collapse to the highest value. We want to take benefit of this behavior,
|
|
* because the elements inside the details content won't cause too big
|
|
* vertical spacing.
|
|
*/
|
|
|
|
.claro-details__wrapper,
|
|
.claro-details__content {
|
|
margin: 1rem;
|
|
}
|
|
|
|
.claro-details__wrapper--accordion,
|
|
.claro-details__wrapper--accordion-item,
|
|
.claro-details__wrapper--vertical-tabs-item {
|
|
margin: 0;
|
|
}
|
|
|
|
.claro-details__wrapper--accordion::before,
|
|
.claro-details__wrapper--accordion::after,
|
|
.claro-details__wrapper--accordion-item::before,
|
|
.claro-details__wrapper--accordion-item::after,
|
|
.claro-details__wrapper--vertical-tabs-item::before,
|
|
.claro-details__wrapper--vertical-tabs-item::after {
|
|
display: table;
|
|
clear: both;
|
|
content: "";
|
|
}
|
|
|
|
.claro-details__wrapper--accordion,
|
|
.claro-details__wrapper--accordion-item,
|
|
.claro-details__wrapper--vertical-tabs-item {
|
|
border-top: 1px solid rgba(216, 217, 224, 0.8);
|
|
background-color: rgba(243, 244, 249, 0.4);
|
|
}
|
|
|
|
@media screen and (min-width: 48em) {
|
|
.claro-details__wrapper {
|
|
margin: 1.5rem 2.25rem;
|
|
}
|
|
|
|
.claro-details__wrapper--accordion,
|
|
.claro-details__wrapper--accordion-item,
|
|
.claro-details__wrapper--vertical-tabs-item {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 85em) {
|
|
.js .claro-details__wrapper--vertical-tabs-item {
|
|
margin: 0;
|
|
border-top: 0;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.claro-details__content--accordion,
|
|
.claro-details__content--accordion-item,
|
|
.claro-details__content--vertical-tabs-item {
|
|
margin: 1rem 1rem 1.5rem;
|
|
}
|
|
|
|
@media screen and (min-width: 85em) {
|
|
.vertical-tabs .claro-details__content--vertical-tabs-item {
|
|
margin: 1.5rem;
|
|
}
|
|
}
|
|
|
|
/* Description. */
|
|
|
|
.claro-details__description {
|
|
margin-bottom: 1rem;
|
|
color: #545560;
|
|
font-size: 0.79rem; /* ~13px */
|
|
line-height: 1.0625rem; /* 17px */
|
|
}
|
|
|
|
.claro-details__description.is-disabled {
|
|
color: #82828c;
|
|
}
|
|
|
|
/**
|
|
* Collapse processed for non-supporting browsers like IE or Edge.
|
|
*/
|
|
|
|
.collapse-processed > .claro-details__summary {
|
|
padding: 0;
|
|
}
|
|
|
|
.collapse-processed > .claro-details__summary::after {
|
|
content: none;
|
|
}
|
|
|
|
.collapse-processed > .claro-details__summary .details-title {
|
|
position: relative;
|
|
display: block;
|
|
padding: 1rem 1rem 1rem 2.25rem; /* LTR */
|
|
text-decoration: none;
|
|
color: inherit;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
[dir="rtl"] .collapse-processed > .claro-details__summary .details-title {
|
|
padding-right: 2.25rem;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.collapse-processed > .claro-details__summary--accordion .details-title,
|
|
.collapse-processed > .claro-details__summary--accordion-item .details-title,
|
|
.collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
|
|
padding: 1.25rem 1.5rem 1.25rem 2.25rem; /* LTR */
|
|
}
|
|
|
|
[dir="rtl"] .collapse-processed > .claro-details__summary--accordion .details-title,
|
|
[dir="rtl"] .collapse-processed > .claro-details__summary--accordion-item .details-title,
|
|
[dir="rtl"] .collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
|
|
padding-right: 2.25rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
/* Focus and hover states. */
|
|
|
|
.collapse-processed > .claro-details__summary .details-title:focus,
|
|
.collapse-processed > .claro-details__summary .details-title:hover {
|
|
z-index: 1;
|
|
text-decoration: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.collapse-processed > .claro-details__summary .details-title::after {
|
|
position: absolute;
|
|
top: -1px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
left: -1px;
|
|
content: "";
|
|
transition: opacity 0.2s ease-in-out;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
border: 3px solid #26a769;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.collapse-processed > .claro-details__summary .details-title:focus::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Accordion item modifiers for the focus box. */
|
|
|
|
.collapse-processed > .claro-details__summary--accordion-item .details-title::after,
|
|
.vertical-tabs__item > .claro-details__summary--vertical-tabs-item .details-title::after {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.collapse-processed:first-child > .claro-details__summary--accordion-item .details-title::after,
|
|
.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item .details-title::after {
|
|
border-top-left-radius: 2px;
|
|
border-top-right-radius: 2px;
|
|
}
|
|
|
|
.collapse-processed:last-child > .claro-details__summary--accordion-item .details-title::after,
|
|
.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item .details-title::after {
|
|
border-bottom-right-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
|
|
.collapse-processed[open] > .claro-details__summary--accordion .details-title::after,
|
|
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title::after,
|
|
.vertical-tabs__item[open] > .claro-details__summary--vertical-tabs-item .details-title::after {
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
/**
|
|
* Hide JS summary from the details polyfill to make it consistent with native
|
|
* details elements.
|
|
*
|
|
* @todo Consider removing this after https://www.drupal.org/node/2493957 has
|
|
* been solved.
|
|
*/
|
|
|
|
.claro-details__summary--accordion .summary,
|
|
.claro-details__summary--accordion-item .summary,
|
|
.claro-details__summary--vertical-tabs-item .summary {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (-ms-high-contrast: active) {
|
|
.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
|
|
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
|
|
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
|
|
top: -1px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
left: -1px;
|
|
}
|
|
.collapse-processed > .claro-details__summary .details-title::after {
|
|
top: -5px;
|
|
right: -5px;
|
|
bottom: -5px;
|
|
left: -5px;
|
|
border: 2px dotted;
|
|
}
|
|
}
|
|
|
|
.required-mark::after {
|
|
display: inline-block;
|
|
width: 0.4375rem;
|
|
height: 0.4375rem;
|
|
margin-right: 0.3em;
|
|
margin-left: 0.3em;
|
|
content: "";
|
|
vertical-align: super;
|
|
background-image: url(../../images/core/ee0000/required.svg);
|
|
background-repeat: no-repeat;
|
|
background-size: 0.4375rem 0.4375rem;
|
|
}
|