Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: add transition-default mixin #8851

Draft
wants to merge 2 commits into
base: dev
Choose a base branch
from
+102 −57
Draft

refactor: add transition-default mixin #8851

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1fe0f91
refactor: add transition-default mixin
jcfranco Feb 29, 2024
89b9ca8
Merge branch 'main' into jcfranco/add-transition-default-mixin
jcfranco Apr 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion packages/calcite-components/src/assets/styles/includes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,8 @@
}

.x-button {
@apply appearance-none bg-transparent border-2 content-center cursor-pointer flex focus-base items-center justify-center m-0 self-center text-color-3 transition-default;
@apply appearance-none bg-transparent border-2 content-center cursor-pointer flex focus-base items-center justify-center m-0 self-center text-color-3;
@include transition-default();

border-radius: 50%;
border-color: transparent;
Expand All @@ -152,3 +153,13 @@
}
}
}

$common-animatable-props: "background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform";

@mixin transition-default($target-props: $common-animatable-props) {
transition:
// we explicitly list these properties to avoid animating properties that are not intended to be animated and that might affect performance
#{$target-props} var(--calcite-animation-timing) ease-in-out 0s,
outline 0s,
outline-offset 0s;
}
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/alert/alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,8 @@ $border-style: 1px solid var(--calcite-color-border-3);
overflow-hidden
self-stretch
text-center
text-color-2
transition-default;
text-color-2;
@include transition-default();
border-inline: 0 solid transparent;
border-start-end-radius: 0;

Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/checkbox/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@
overflow-hidden
fill-current
stroke-current
stroke-1
transition-default;
stroke-1;
@include transition-default();
box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
color: theme("backgroundColor.background");
}
Expand Down
3 changes: 2 additions & 1 deletion packages/calcite-components/src/components/chip/chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,13 +153,14 @@

.close {
@apply focus-base
transition-default

text-color-1
m-0
cursor-pointer
items-center
border-none
bg-transparent;
@include transition-default();
-webkit-appearance: none;
display: flex;
border-radius: 50%;
Expand Down
3 changes: 2 additions & 1 deletion packages/calcite-components/src/components/date-picker-day/date-picker-day.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,9 @@
justify-center
rounded-full
leading-none
transition-default

z-default;
@include transition-default();
background: none;
box-shadow: 0 0 0 2px transparent;
block-size: var(--calcite-internal-day-size);
Expand Down
4 changes: 2 additions & 2 deletions .../calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@
justify-center
border-none
px-1
outline-none
transition-default;
outline-none;
@include transition-default();
inline-size: calc(100% / 7);

&:focus {
Expand Down
3 changes: 2 additions & 1 deletion packages/calcite-components/src/components/inline-editable/inline-editable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,11 @@

.wrapper {
@apply bg-foreground-1
transition-default

box-border
flex
justify-between;
@include transition-default();

.input-wrapper {
@apply flex-1;
Expand Down
6 changes: 4 additions & 2 deletions packages/calcite-components/src/components/input-message/input-message.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@
*/

:host {
@apply text-color-1 transition-default box-border flex h-auto w-full items-center font-medium opacity-100;
@apply text-color-1 box-border flex h-auto w-full items-center font-medium opacity-100;
@include transition-default();
--calcite-input-message-spacing-value: theme("spacing.1");
margin-block-start: var(--calcite-input-message-spacing-value);
}

.calcite-input-message-icon {
@apply transition-default pointer-events-none inline-flex flex-shrink-0;
@apply pointer-events-none inline-flex flex-shrink-0;
@include transition-default();
margin-inline-end: theme("margin.2");
}

Expand Down
19 changes: 12 additions & 7 deletions packages/calcite-components/src/components/input-number/input-number.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,9 +194,11 @@ input:focus {
border-inline-start-width: theme("borderWidth.0");

&:hover {
@apply bg-foreground-2 transition-default;
@apply bg-foreground-2;
@include transition-default();
calcite-icon {
@apply text-color-1 transition-default;
@apply text-color-1;
@include transition-default();
}
}
&:active {
Expand Down Expand Up @@ -270,12 +272,12 @@ input:focus {
}

.number-button-wrapper {
@apply transition-default
pointer-events-none
@apply pointer-events-none
order-6
box-border
flex
flex-col;
@include transition-default();
}

:host([number-button-type="vertical"]) .wrapper {
Expand Down Expand Up @@ -358,7 +360,7 @@ input:focus {
pointer-events: initial;
@apply border-color-input
bg-foreground-1
transition-default

m-0
box-border
flex
Expand All @@ -369,9 +371,11 @@ input:focus {
border-solid
py-0
px-2;
@include transition-default();
border-inline-start-width: theme("borderWidth.0");
& calcite-icon {
@apply transition-default pointer-events-none;
@apply pointer-events-none;
@include transition-default();
}
&:focus {
@apply bg-foreground-2;
Expand Down Expand Up @@ -405,7 +409,8 @@ input:focus {
// input needed for higher specificity of these overrides
input {
&.inline-child {
@apply transition-default bg-transparent;
@apply bg-transparent;
@include transition-default();
.editing-enabled {
background-color: inherit;
}
Expand Down
9 changes: 6 additions & 3 deletions packages/calcite-components/src/components/input-text/input-text.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,9 +236,11 @@ input[type="text"]::-ms-reveal {
border-inline-start-width: theme("borderWidth.0");

&:hover {
@apply bg-foreground-2 transition-default;
@apply bg-foreground-2;
@include transition-default();
calcite-icon {
@apply text-color-1 transition-default;
@apply text-color-1;
@include transition-default();
}
}
&:active {
Expand Down Expand Up @@ -329,7 +331,8 @@ input[type="text"]::-ms-reveal {
// input needed for higher specificity of these overrides
input {
&.inline-child {
@apply transition-default bg-transparent;
@apply bg-transparent;
@include transition-default();
.editing-enabled {
background-color: inherit;
}
Expand Down
23 changes: 14 additions & 9 deletions packages/calcite-components/src/components/input/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,10 +218,10 @@ input:focus {
}

.icon {
@apply transition-default
pointer-events-none
@apply pointer-events-none
absolute
block;
@include transition-default();
}

.icon,
Expand Down Expand Up @@ -266,9 +266,11 @@ input[type="time"]::-webkit-clear-button {
border-inline-start-width: theme("borderWidth.0");

&:hover {
@apply bg-foreground-2 transition-default;
@apply bg-foreground-2;
@include transition-default();
calcite-icon {
@apply text-color-1 transition-default;
@apply text-color-1;
@include transition-default();
}
}
&:active {
Expand Down Expand Up @@ -356,12 +358,12 @@ input[type="number"] {
}

.number-button-wrapper {
@apply transition-default
pointer-events-none
@apply pointer-events-none
order-6
box-border
flex
flex-col;
@include transition-default();
}

:host([number-button-type="vertical"]) .wrapper {
Expand Down Expand Up @@ -445,7 +447,7 @@ input[type="number"] {
pointer-events: initial;
@apply border-color-input
bg-foreground-1
transition-default

m-0
box-border
flex
Expand All @@ -456,9 +458,11 @@ input[type="number"] {
border-solid
py-0
px-2;
@include transition-default();
border-inline-start-width: theme("borderWidth.0");
& calcite-icon {
@apply transition-default pointer-events-none;
@apply pointer-events-none;
@include transition-default();
}
&:focus {
@apply bg-foreground-2;
Expand Down Expand Up @@ -563,7 +567,8 @@ textarea::-webkit-resizer {
// input needed for higher specificity of these overrides
input {
&.inline-child {
@apply transition-default bg-transparent;
@apply bg-transparent;
@include transition-default();
.editing-enabled {
background-color: inherit;
}
Expand Down
9 changes: 6 additions & 3 deletions packages/calcite-components/src/components/link/link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@
:host a,
:host span {
@apply font-inherit
transition-default

relative
flex
cursor-pointer
items-center
justify-center
rounded-none
border-none;
@include transition-default();
text-decoration: none;
line-height: inherit;
font-size: inherit;
Expand All @@ -40,7 +41,8 @@ calcite-icon {
}

.calcite-link--icon {
@apply transition-default align-middle;
@apply align-middle;
@include transition-default();
margin-block-start: -0.25em;
}

Expand All @@ -57,12 +59,13 @@ calcite-icon {
span,
a {
@apply text-color-link
transition-default

relative
inline
border-none
bg-transparent
p-0;
@include transition-default();
line-height: inherit;
white-space: initial;
background-image: linear-gradient(currentColor, currentColor),
Expand Down
3 changes: 2 additions & 1 deletion packages/calcite-components/src/components/modal/modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,14 +158,15 @@

.close {
@apply text-color-3
transition-default

focus-base
order-2
m-0
cursor-pointer
appearance-none
border-none
bg-transparent;
@include transition-default();
padding-block: var(--calcite-modal-padding-internal);
padding-inline: var(--calcite-modal-padding-internal);
flex: 0 0 auto;
Expand Down
3 changes: 2 additions & 1 deletion packages/calcite-components/src/components/navigation-logo/navigation-logo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@
items-center
justify-center
cursor-pointer
transition-default

focus-base
no-underline
text-0h;
@include transition-default();
color: inherit;
border-block-end: 2px solid transparent;
}
Expand Down
3 changes: 2 additions & 1 deletion packages/calcite-components/src/components/navigation-user/navigation-user.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@
items-center
justify-center
cursor-pointer
transition-default

focus-base
text-0h;
@include transition-default();
border-block-end: 2px solid transparent;
}
}
Expand Down
7 changes: 4 additions & 3 deletions packages/calcite-components/src/components/notice/notice.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@
box-border
hidden
w-full
opacity-0
transition-default;
opacity-0;
@include transition-default();
max-block-size: 0;
text-align: start;
border-inline-start: 0px solid;
Expand Down Expand Up @@ -117,7 +117,8 @@
}

@mixin notice-element-base() {
@apply transition-default box-border;
@apply box-border;
@include transition-default();
padding-block: var(--calcite-notice-spacing-token-small);
padding-inline: var(--calcite-notice-spacing-token-large);
flex: 0 0 auto;
Expand Down
3 changes: 2 additions & 1 deletion packages/calcite-components/src/components/pagination/pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,8 @@
border-block: 2px solid transparent;

&:hover {
@apply text-color-1 transition-default;
@apply text-color-1;
@include transition-default();
}
}

Expand Down
3 changes: 2 additions & 1 deletion packages/calcite-components/src/components/radio-button/radio-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
@apply relative outline-none;
}
.radio {
@apply bg-foreground-1 cursor-pointer focus-base rounded-full transition-default;
@apply bg-foreground-1 cursor-pointer focus-base rounded-full;
@include transition-default();
box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
}
}
Expand Down
Loading
Loading