Skip to content

Commit

Permalink
fix: restore files to pre-formatted state
Browse files Browse the repository at this point in the history
  • Loading branch information
pfulton committed Jun 12, 2023
1 parent cb87e41 commit 491dbcb
Show file tree
Hide file tree
Showing 204 changed files with 18,435 additions and 27,969 deletions.
243 changes: 127 additions & 116 deletions components/accordion/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,146 +12,157 @@ governing permissions and limitations under the License.

/* https://git.corp.adobe.com/Spectrum/spectrum-origins/pull/60 */
.spectrum-Accordion {
/* Subtract the size of the border since it's on the item itself */
--spectrum-accordion-item-height-actual: calc(
var(--spectrum-accordion-item-height) -
var(--spectrum-accordion-item-border-size)
);
--spectrum-accordion-item-title-padding-y: var(
--spectrum-global-dimension-size-150
);
--spectrum-accordion-animation-duration: var(
--spectrum-global-animation-duration-100
);
/* Subtract the size of the border since it's on the item itself */
--spectrum-accordion-item-height-actual: calc(
var(--spectrum-accordion-item-height) -
var(--spectrum-accordion-item-border-size)
);
--spectrum-accordion-item-title-padding-y: var(
--spectrum-global-dimension-size-150
);
--spectrum-accordion-animation-duration: var(
--spectrum-global-animation-duration-100
);
}

.spectrum-Accordion {
display: block;
list-style: none;
padding: 0;
margin: 0;
display: block;
list-style: none;
padding: 0;
margin: 0;
}

.spectrum-Accordion-itemIndicator {
display: block;
display: block;

position: absolute;
inset-inline-start: var(--spectrum-accordion-item-padding-x);
inset-block-start: calc(50% - var(--spectrum-accordion-icon-height) / 2);
position: absolute;
inset-inline-start: var(--spectrum-accordion-item-padding-x);
inset-block-start: calc(
50% -
var(--spectrum-accordion-icon-height) / 2
);

transition: transform ease var(--spectrum-accordion-animation-duration);
transform: logical rotate(0deg);
transition: transform ease var(--spectrum-accordion-animation-duration);
transform: logical rotate(0deg);
}

.spectrum-Accordion-item {
z-index: inherit;
position: relative;
z-index: inherit;
position: relative;

display: list-item;
margin: 0;
display: list-item;
margin: 0;

border-block-end: var(--spectrum-accordion-item-border-size) solid transparent;
border-block-end: var(--spectrum-accordion-item-border-size) solid transparent;

&:first-of-type {
border-block-start: var(--spectrum-accordion-item-border-size) solid
transparent;
}
&:first-of-type {
border-block-start: var(--spectrum-accordion-item-border-size) solid
transparent;
}
}

.spectrum-Accordion-itemHeading {
margin: 0;
position: relative;
box-sizing: border-box;
margin: 0;
position: relative;
box-sizing: border-box;
}

.spectrum-Accordion-itemHeader {
position: relative;

display: flex;
align-items: center;
justify-content: flex-start;

box-sizing: border-box;
/* left padding takes into account the icon's size as well as the focus state's left border */
padding-block: var(--spectrum-accordion-item-title-padding-y);
/* using icon-height instead of icon-width for space with rotating the icon */
padding-inline-start: calc(
var(--spectrum-accordion-item-padding-x) +
var(--spectrum-accordion-icon-height) + var(--spectrum-accordion-icon-gap) +
var(--spectrum-accordion-item-border-left-size)
);
padding-inline-end: var(--spectrum-accordion-item-padding-x);
margin: 0;

min-block-size: calc(100% - var(--spectrum-accordion-item-border-size));

font-size: var(--spectrum-accordion-item-title-text-size);
line-height: var(--spectrum-accordion-text-line-height);
text-transform: uppercase;
letter-spacing: calc(var(--spectrum-accordion-item-title-tracking) / 100);

text-overflow: ellipsis;
cursor: pointer;
font-weight: 500;

/* reset styling if button element is used */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: inherit;
border: 0;
font-family: inherit;
text-align: start;
inline-size: 100%;

&:focus {
outline: none;

&::after {
content: "";

position: absolute;
inset-inline-start: 0;
inset-block-start: calc(-1 * var(--spectrum-accordion-item-border-size));
inset-block-end: calc(-1 * var(--spectrum-accordion-item-border-size));

inline-size: var(--spectrum-accordion-item-border-left-size);
}
}
position: relative;

display: flex;
align-items: center;
justify-content: flex-start;

box-sizing: border-box;
/* left padding takes into account the icon's size as well as the focus state's left border */
padding-block: var(--spectrum-accordion-item-title-padding-y);
/* using icon-height instead of icon-width for space with rotating the icon */
padding-inline-start: calc(
var(--spectrum-accordion-item-padding-x) +
var(--spectrum-accordion-icon-height) + var(--spectrum-accordion-icon-gap) +
var(--spectrum-accordion-item-border-left-size)
);
padding-inline-end: var(--spectrum-accordion-item-padding-x);
margin: 0;

min-block-size: calc(
100% -
var(--spectrum-accordion-item-border-size)
);

font-size: var(--spectrum-accordion-item-title-text-size);
line-height: var(--spectrum-accordion-text-line-height);
text-transform: uppercase;
letter-spacing: calc(
var(--spectrum-accordion-item-title-tracking) / 100
);

text-overflow: ellipsis;
cursor: pointer;
font-weight: 500;

/* reset styling if button element is used */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: inherit;
border: 0;
font-family: inherit;
text-align: start;
inline-size: 100%;

&:focus {
outline: none;

&::after {
content: "";

position: absolute;
inset-inline-start: 0;
inset-block-start: calc(-1 * var(--spectrum-accordion-item-border-size));
inset-block-end: calc(-1 * var(--spectrum-accordion-item-border-size));

inline-size: var(--spectrum-accordion-item-border-left-size);
}
}
}

.spectrum-Accordion-itemContent {
padding-block: 0 var(--spectrum-accordion-item-content-padding);
padding-inline: var(--spectrum-accordion-item-content-padding)
var(--spectrum-accordion-item-content-padding);
display: none;
padding-block: 0 var(--spectrum-accordion-item-content-padding);
padding-inline: var(--spectrum-accordion-item-content-padding)
var(--spectrum-accordion-item-content-padding);
display: none;
}

.spectrum-Accordion-item {
&.is-open {
> .spectrum-Accordion-itemHeading {
> .spectrum-Accordion-itemIndicator {
transform: logical rotate(90deg);
}
}

> .spectrum-Accordion-itemIndicator {
transform: logical rotate(90deg);
}

> .spectrum-Accordion-itemHeader::after {
/* No bottom border when open, so be less tall */
block-size: calc(100% - var(--spectrum-accordion-item-border-size));
}

> .spectrum-Accordion-itemContent {
display: block;
}
}

&.is-disabled {
.spectrum-Accordion-itemHeader {
cursor: default;
}
}
&.is-open {
> .spectrum-Accordion-itemHeading {
> .spectrum-Accordion-itemIndicator {
transform: logical rotate(90deg);
}
}

> .spectrum-Accordion-itemIndicator {
transform: logical rotate(90deg);
}

> .spectrum-Accordion-itemHeader::after {
/* No bottom border when open, so be less tall */
block-size: calc(
100% -
var(--spectrum-accordion-item-border-size)
);
}

> .spectrum-Accordion-itemContent {
display: block;
}
}

&.is-disabled {
.spectrum-Accordion-itemHeader {
cursor: default;
}
}
}
80 changes: 40 additions & 40 deletions components/accordion/skin.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,63 +11,63 @@ governing permissions and limitations under the License.
*/

.spectrum-Accordion-item {
border-color: var(--spectrum-accordion-border-color);
border-color: var(--spectrum-accordion-border-color);
}

.spectrum-Accordion-itemIndicator {
color: var(--spectrum-accordion-icon-color);
color: var(--spectrum-accordion-icon-color);
}

.spectrum-Accordion-itemHeader {
color: var(--spectrum-accordion-text-color);
color: var(--spectrum-accordion-text-color);

&:hover {
color: var(--spectrum-accordion-text-color-hover);
&:hover {
color: var(--spectrum-accordion-text-color-hover);

background-color: var(--spectrum-accordion-item-background-color-hover);
background-color: var(--spectrum-accordion-item-background-color-hover);

+ .spectrum-Accordion-itemIndicator {
color: var(--spectrum-accordion-icon-color-hover);
}
}
+ .spectrum-Accordion-itemIndicator {
color: var(--spectrum-accordion-icon-color-hover);
}
}

&:focus-ring {
&:after {
background-color: var(
--spectrum-accordion-item-border-left-color-key-focus
);
}
}
&:focus-ring {
&:after {
background-color: var(
--spectrum-accordion-item-border-left-color-key-focus
);
}
}
}

.spectrum-Accordion-item {
&.is-open {
.spectrum-Accordion-itemHeader {
&:hover {
background-color: transparent;
}
}
}
&.is-open {
.spectrum-Accordion-itemHeader {
&:hover {
background-color: transparent;
}
}
}
}

.spectrum-Accordion-item.is-disabled {
.spectrum-Accordion-itemHeader {
&,
&:hover,
&:focus-ring {
color: var(--spectrum-accordion-text-color-disabled);
background-color: transparent;
}
.spectrum-Accordion-itemHeader {
&,
&:hover,
&:focus-ring {
color: var(--spectrum-accordion-text-color-disabled);
background-color: transparent;
}

+ .spectrum-Accordion-itemIndicator {
color: var(--spectrum-accordion-icon-color-disabled);
}
}
+ .spectrum-Accordion-itemIndicator {
color: var(--spectrum-accordion-icon-color-disabled);
}
}
}
@media (forced-colors: active) {
.spectrum-Accordion-itemHeader {
&:focus-ring {
outline: 3px solid CanvasText;
}
}
.spectrum-Accordion-itemHeader {
&:focus-ring {
outline: 3px solid CanvasText;
}
}
}
Loading

0 comments on commit 491dbcb

Please sign in to comment.