Skip to content

Commit

Permalink
refactor(react): refactor css
Browse files Browse the repository at this point in the history
  • Loading branch information
@naporin0624
naporin0624 committed Nov 28, 2023
1 parent 4e13151 commit bf05eb3
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 125 deletions.
35 changes: 12 additions & 23 deletions packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -560,42 +560,31 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
transition: 0.2s background-color,0.2s box-shadow;
}

.c12:hover:not(:disabled):not([aria-disabled]),
.c12:hover[aria-disabled='false'] {
background-color: var(--charcoal-transparent-hover);
.c12:not(:disabled):not([aria-disabled]):hover,
.c12[aria-disabled='false']:hover {
background-color: var( --charcoal-transparent-hover );
}

.c12:active:not(:disabled):not([aria-disabled]),
.c12:active[aria-disabled='false'] {
background-color: var(--charcoal-transparent-press);
}

.c12:disabled,
.c12[aria-disabled]:not([aria-disabled='false']) {
opacity: 0.32;
.c12:not(:disabled):not([aria-disabled]):active,
.c12[aria-disabled='false']:active {
background-color: var( --charcoal-transparent-press );
}

.c12:not(:disabled):not([aria-disabled]):focus,
.c12[aria-disabled='false']:focus,
.c12:not(:disabled):not([aria-disabled]):active,
.c12[aria-disabled='false']:active {
outline: none;
box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
}

.c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
.c12[aria-disabled='false']:focus:not(:focus-visible),
.c12:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
.c12[aria-disabled='false']:active:not(:focus-visible) {
outline: none;
}

.c12[aria-disabled='false']:active,
.c12:not(:disabled):not([aria-disabled]):focus-visible,
.c12[aria-disabled='false']:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
}

.c12:disabled,
.c12[aria-disabled]:not([aria-disabled='false']) {
opacity: 0.32;
}

.c1 {
margin: auto;
position: relative;
Expand Down
70 changes: 24 additions & 46 deletions packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,42 +63,31 @@ exports[`Storyshots IconButton Default M 1`] = `
transition: 0.2s background-color,0.2s box-shadow;
}

.c1:hover:not(:disabled):not([aria-disabled]),
.c1:hover[aria-disabled='false'] {
background-color: var(--charcoal-transparent-hover);
.c1:not(:disabled):not([aria-disabled]):hover,
.c1[aria-disabled='false']:hover {
background-color: var( --charcoal-transparent-hover );
}

.c1:active:not(:disabled):not([aria-disabled]),
.c1:active[aria-disabled='false'] {
background-color: var(--charcoal-transparent-press);
}

.c1:disabled,
.c1[aria-disabled]:not([aria-disabled='false']) {
opacity: 0.32;
.c1:not(:disabled):not([aria-disabled]):active,
.c1[aria-disabled='false']:active {
background-color: var( --charcoal-transparent-press );
}

.c1:not(:disabled):not([aria-disabled]):focus,
.c1[aria-disabled='false']:focus,
.c1:not(:disabled):not([aria-disabled]):active,
.c1[aria-disabled='false']:active {
outline: none;
box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
}

.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
.c1[aria-disabled='false']:focus:not(:focus-visible),
.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
.c1[aria-disabled='false']:active:not(:focus-visible) {
outline: none;
}

.c1[aria-disabled='false']:active,
.c1:not(:disabled):not([aria-disabled]):focus-visible,
.c1[aria-disabled='false']:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
}

.c1:disabled,
.c1[aria-disabled]:not([aria-disabled='false']) {
opacity: 0.32;
}

<div
data-dark={false}
>
Expand Down Expand Up @@ -179,42 +168,31 @@ exports[`Storyshots IconButton Overlay M 1`] = `
transition: 0.2s background-color,0.2s box-shadow;
}

.c1:hover:not(:disabled):not([aria-disabled]),
.c1:hover[aria-disabled='false'] {
background-color: var(--charcoal-surface4-hover);
.c1:not(:disabled):not([aria-disabled]):hover,
.c1[aria-disabled='false']:hover {
background-color: var( --charcoal-surface4-hover );
}

.c1:active:not(:disabled):not([aria-disabled]),
.c1:active[aria-disabled='false'] {
background-color: var(--charcoal-surface4-press);
}

.c1:disabled,
.c1[aria-disabled]:not([aria-disabled='false']) {
opacity: 0.32;
.c1:not(:disabled):not([aria-disabled]):active,
.c1[aria-disabled='false']:active {
background-color: var( --charcoal-surface4-press );
}

.c1:not(:disabled):not([aria-disabled]):focus,
.c1[aria-disabled='false']:focus,
.c1:not(:disabled):not([aria-disabled]):active,
.c1[aria-disabled='false']:active {
outline: none;
box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
}

.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
.c1[aria-disabled='false']:focus:not(:focus-visible),
.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
.c1[aria-disabled='false']:active:not(:focus-visible) {
outline: none;
}

.c1[aria-disabled='false']:active,
.c1:not(:disabled):not([aria-disabled]):focus-visible,
.c1[aria-disabled='false']:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
}

.c1:disabled,
.c1[aria-disabled]:not([aria-disabled='false']) {
opacity: 0.32;
}

<div
data-dark={false}
>
Expand Down
51 changes: 18 additions & 33 deletions packages/react/src/components/IconButton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,45 +46,30 @@ const StyledIconButton = styled(Clickable).attrs<
border-radius: 999999px;
transition: 0.2s background-color, 0.2s box-shadow;
&:hover:not(:disabled):not([aria-disabled]),
&:hover[aria-disabled='false'] {
background-color: var(
${({ background }) => `--charcoal-${background}-hover`}
);
}
&:active:not(:disabled):not([aria-disabled]),
&:active[aria-disabled='false'] {
background-color: var(
${({ background }) => `--charcoal-${background}-press`}
);
&:not(:disabled):not([aria-disabled]),
&[aria-disabled='false'] {
&:hover {
background-color: var(
${({ background }) => `--charcoal-${background}-hover`}
);
}
&:active {
background-color: var(
${({ background }) => `--charcoal-${background}-press`}
);
}
&:focus,
&:active,
&:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
}
}
&:disabled,
&[aria-disabled]:not([aria-disabled='false']) {
opacity: 0.32;
}
&:not(:disabled):not([aria-disabled]):focus,
&[aria-disabled='false']:focus,
&:not(:disabled):not([aria-disabled]):active,
&[aria-disabled='false']:active {
outline: none;
box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
}
&:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
&[aria-disabled='false']:focus:not(:focus-visible),
&:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
&[aria-disabled='false']:active:not(:focus-visible) {
outline: none;
}
&:not(:disabled):not([aria-disabled]):focus-visible,
&[aria-disabled='false']:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
}
`

function styledProps(props: Required<StyledProps>) {
Expand Down
35 changes: 12 additions & 23 deletions packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1370,42 +1370,31 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
transition: 0.2s background-color,0.2s box-shadow;
}

.c12:hover:not(:disabled):not([aria-disabled]),
.c12:hover[aria-disabled='false'] {
background-color: var(--charcoal-surface4-hover);
.c12:not(:disabled):not([aria-disabled]):hover,
.c12[aria-disabled='false']:hover {
background-color: var( --charcoal-surface4-hover );
}

.c12:active:not(:disabled):not([aria-disabled]),
.c12:active[aria-disabled='false'] {
background-color: var(--charcoal-surface4-press);
}

.c12:disabled,
.c12[aria-disabled]:not([aria-disabled='false']) {
opacity: 0.32;
.c12:not(:disabled):not([aria-disabled]):active,
.c12[aria-disabled='false']:active {
background-color: var( --charcoal-surface4-press );
}

.c12:not(:disabled):not([aria-disabled]):focus,
.c12[aria-disabled='false']:focus,
.c12:not(:disabled):not([aria-disabled]):active,
.c12[aria-disabled='false']:active {
outline: none;
box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
}

.c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
.c12[aria-disabled='false']:focus:not(:focus-visible),
.c12:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
.c12[aria-disabled='false']:active:not(:focus-visible) {
outline: none;
}

.c12[aria-disabled='false']:active,
.c12:not(:disabled):not([aria-disabled]):focus-visible,
.c12[aria-disabled='false']:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
}

.c12:disabled,
.c12[aria-disabled]:not([aria-disabled='false']) {
opacity: 0.32;
}

.c0 {
display: -webkit-box;
display: -webkit-flex;
Expand Down

0 comments on commit bf05eb3

Please sign in to comment.