Issue #3303544 by Gauravvvv, Aditya4478, finnsky, Stanzin, vsujeetkumar, Santosh_Verma, Sakthivel M, Nitin shrivastava, lauriii, smustgrave, sasanikolic: Refactor Claro's details stylesheet
Cristina Chumillas
parent
e3a964b0a2
commit
d8e3d8c97c
|
|
@ -162,7 +162,6 @@
|
|||
/*
|
||||
* Details.
|
||||
*/
|
||||
--details-bg-color: rgba(243, 244, 249, 0.4);
|
||||
--details-border-color: var(--color-gray-100);
|
||||
--details-summary-shadow-color: var(--color-focus);
|
||||
--details-summary-focus-border-size: var(--focus-border-size);
|
||||
|
|
|
|||
|
|
@ -156,7 +156,6 @@
|
|||
/*
|
||||
* Details.
|
||||
*/
|
||||
--details-bg-color: rgba(243, 244, 249, 0.4);
|
||||
--details-border-color: var(--color-gray-100);
|
||||
--details-summary-shadow-color: var(--color-focus);
|
||||
--details-summary-focus-border-size: var(--focus-border-size);
|
||||
|
|
|
|||
|
|
@ -43,8 +43,7 @@
|
|||
|
||||
.claro-details {
|
||||
display: block;
|
||||
margin-top: var(--space-m);
|
||||
margin-bottom: var(--space-m);
|
||||
margin-block: var(--space-m);
|
||||
color: var(--color-text);
|
||||
border: var(--details-border-size) solid var(--details-border-color);
|
||||
border-radius: var(--details-border-size-radius);
|
||||
|
|
@ -66,8 +65,7 @@ td .claro-details {
|
|||
|
||||
.claro-details--accordion-item,
|
||||
.claro-details--vertical-tabs-item {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-block: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -89,7 +87,8 @@ td .claro-details {
|
|||
.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 */
|
||||
padding-block: var(--space-m);
|
||||
padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-m);
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
|
||||
|
|
@ -102,28 +101,17 @@ td .claro-details {
|
|||
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 */
|
||||
padding-block: var(--summary-accordion-padding-vertical);
|
||||
padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-l);
|
||||
background: var(--color-white);
|
||||
line-height: var(--summary-accordion-line-height);
|
||||
}
|
||||
|
||||
[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.
|
||||
|
|
@ -155,23 +143,21 @@ td .claro-details {
|
|||
|
||||
.claro-details__summary::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: var(--space-s); /* LTR */
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: var(--space-s);
|
||||
display: inline-block;
|
||||
width: var(--space-m);
|
||||
height: var(--space-m);
|
||||
margin-top: calc(var(--space-m) / -2);
|
||||
margin-block-start: calc(var(--space-m) / -2);
|
||||
content: "";
|
||||
transition: transform var(--details-transform-transition-duration) ease-in 0s;
|
||||
transform: rotate(90deg); /* LTR */
|
||||
transform: rotate(90deg);
|
||||
text-align: center;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath d='M5.21 1.314L3.79 2.723l5.302 5.353-5.303 5.354 1.422 1.408 6.697-6.762z' fill='%23545560'/%3e%3c/svg%3e");
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
[dir="rtl"] .claro-details__summary::before {
|
||||
right: var(--space-s);
|
||||
left: auto;
|
||||
transform: rotate(-270deg);
|
||||
}
|
||||
|
||||
|
|
@ -189,11 +175,10 @@ td .claro-details {
|
|||
transform var(--details-transform-transition-duration) ease-in 0s,
|
||||
margin var(--details-transform-transition-duration) ease-in 0s;
|
||||
transform: rotate(135deg); /* LTR */
|
||||
border-top: 0.125rem solid;
|
||||
border-right: 0.125rem solid;
|
||||
border-block-start: 0.125rem solid;
|
||||
border-inline-end: 0.125rem solid;
|
||||
background: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] .claro-details__summary::before {
|
||||
transform: rotate(-225deg);
|
||||
}
|
||||
|
|
@ -232,10 +217,7 @@ td .claro-details {
|
|||
|
||||
.claro-details__summary::after {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
inset: -1px;
|
||||
content: "";
|
||||
transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
|
||||
pointer-events: none;
|
||||
|
|
@ -312,8 +294,8 @@ td .claro-details {
|
|||
|
||||
.claro-details[open] > .claro-details__summary::before,
|
||||
[dir="rtl"] .claro-details[open] > .claro-details__summary::before {
|
||||
margin-top: calc(0.125rem / -2);
|
||||
margin-right: 0.125rem;
|
||||
margin-block-start: calc(0.125rem / -2);
|
||||
margin-inline-end: 0.125rem;
|
||||
transform: rotate(-45deg); /* for LTR and RTL */
|
||||
background: none;
|
||||
}
|
||||
|
|
@ -322,7 +304,7 @@ td .claro-details {
|
|||
.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);
|
||||
box-shadow: var(--details-box-shadow);
|
||||
}
|
||||
|
||||
.claro-details__summary:hover {
|
||||
|
|
@ -347,9 +329,9 @@ td .claro-details {
|
|||
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"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after {
|
||||
[dir="rtl"] :is([open] > .claro-details__summary--accordion:not(:focus, :active)::after),
|
||||
[dir="rtl"] :is([open] > .claro-details__summary--accordion-item:not(:focus, :active)::after),
|
||||
[dir="rtl"] :is([open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after) {
|
||||
border-width: 0 var(--details-summary-focus-border-size) 0 0;
|
||||
}
|
||||
|
||||
|
|
@ -454,7 +436,7 @@ td .claro-details {
|
|||
/* Description. */
|
||||
|
||||
.claro-details__description {
|
||||
margin-bottom: var(--space-m);
|
||||
margin-block-end: var(--space-m);
|
||||
color: var(--input-fg-color--description);
|
||||
font-size: var(--font-size-xs); /* ~13px */
|
||||
line-height: calc(17rem / 16); /* 17px */
|
||||
|
|
@ -475,8 +457,7 @@ td .claro-details {
|
|||
display: inline-block;
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
margin-right: 0.3em;
|
||||
margin-left: 0.3em;
|
||||
margin-inline: 0.3em;
|
||||
content: "";
|
||||
vertical-align: super;
|
||||
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23e00'/%3e%3c/svg%3e");
|
||||
|
|
|
|||
|
|
@ -36,8 +36,7 @@
|
|||
|
||||
.claro-details {
|
||||
display: block;
|
||||
margin-top: var(--space-m);
|
||||
margin-bottom: var(--space-m);
|
||||
margin-block: var(--space-m);
|
||||
color: var(--color-text);
|
||||
border: var(--details-border-size) solid var(--details-border-color);
|
||||
border-radius: var(--details-border-size-radius);
|
||||
|
|
@ -58,8 +57,7 @@
|
|||
|
||||
.claro-details--accordion-item,
|
||||
.claro-details--vertical-tabs-item {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-block: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -81,7 +79,8 @@
|
|||
.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 */
|
||||
padding-block: var(--space-m);
|
||||
padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-m);
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
|
||||
|
|
@ -92,25 +91,16 @@
|
|||
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 */
|
||||
padding-block: var(--summary-accordion-padding-vertical);
|
||||
padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-l);
|
||||
background: var(--color-white);
|
||||
line-height: var(--summary-accordion-line-height);
|
||||
}
|
||||
[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
|
||||
|
|
@ -141,24 +131,23 @@
|
|||
|
||||
.claro-details__summary::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: var(--space-s); /* LTR */
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: var(--space-s);
|
||||
display: inline-block;
|
||||
width: var(--space-m);
|
||||
height: var(--space-m);
|
||||
margin-top: calc(var(--space-m) / -2);
|
||||
margin-block-start: calc(var(--space-m) / -2);
|
||||
content: "";
|
||||
transition: transform var(--details-transform-transition-duration) ease-in 0s;
|
||||
transform: rotate(90deg); /* LTR */
|
||||
transform: rotate(90deg);
|
||||
text-align: center;
|
||||
background-image: url(../../images/icons/545560/chevron-right.svg);
|
||||
background-size: contain;
|
||||
}
|
||||
[dir="rtl"] .claro-details__summary::before {
|
||||
right: var(--space-s);
|
||||
left: auto;
|
||||
|
||||
@nest [dir="rtl"] & {
|
||||
transform: rotate(-270deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.claro-details__summary::before {
|
||||
|
|
@ -172,15 +161,15 @@
|
|||
height: 0.5625rem;
|
||||
transition: transform var(--details-transform-transition-duration) ease-in 0s, margin var(--details-transform-transition-duration) ease-in 0s;
|
||||
transform: rotate(135deg); /* LTR */
|
||||
border-top: 0.125rem solid;
|
||||
border-right: 0.125rem solid;
|
||||
border-block-start: 0.125rem solid;
|
||||
border-inline-end: 0.125rem solid;
|
||||
background: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] .claro-details__summary::before {
|
||||
@nest [dir="rtl"] & {
|
||||
transform: rotate(-225deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Safari (at least version 12.1) cannot handle our details marker
|
||||
|
|
@ -212,10 +201,7 @@
|
|||
*/
|
||||
.claro-details__summary::after {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
inset: -1px;
|
||||
content: "";
|
||||
transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
|
||||
pointer-events: none;
|
||||
|
|
@ -290,8 +276,8 @@
|
|||
|
||||
.claro-details[open] > .claro-details__summary::before,
|
||||
[dir="rtl"] .claro-details[open] > .claro-details__summary::before {
|
||||
margin-top: calc(0.125rem / -2);
|
||||
margin-right: 0.125rem;
|
||||
margin-block-start: calc(0.125rem / -2);
|
||||
margin-inline-end: 0.125rem;
|
||||
transform: rotate(-45deg); /* for LTR and RTL */
|
||||
background: none;
|
||||
}
|
||||
|
|
@ -300,7 +286,7 @@
|
|||
.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);
|
||||
box-shadow: var(--details-box-shadow);
|
||||
}
|
||||
|
||||
.claro-details__summary:hover {
|
||||
|
|
@ -322,12 +308,11 @@
|
|||
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"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after {
|
||||
|
||||
@nest [dir="rtl"] & {
|
||||
border-width: 0 var(--details-summary-focus-border-size) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.claro-details__summary:focus::after,
|
||||
.claro-details__summary:active::after {
|
||||
|
|
@ -424,7 +409,7 @@
|
|||
|
||||
/* Description. */
|
||||
.claro-details__description {
|
||||
margin-bottom: var(--space-m);
|
||||
margin-block-end: var(--space-m);
|
||||
color: var(--input-fg-color--description);
|
||||
font-size: var(--font-size-xs); /* ~13px */
|
||||
line-height: calc(17rem / 16); /* 17px */
|
||||
|
|
@ -444,8 +429,7 @@
|
|||
display: inline-block;
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
margin-right: 0.3em;
|
||||
margin-left: 0.3em;
|
||||
margin-inline: 0.3em;
|
||||
content: "";
|
||||
vertical-align: super;
|
||||
background-image: url(../../images/core/ee0000/required.svg);
|
||||
|
|
|
|||
Loading…
Reference in New Issue