studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄(react) add border-radius transition

Browse Source 
This transition was not working, now this provides are smoother effect.

Closes #112
This commit is contained in:
Nathan Vasse
2024-03-08 17:14:27 +01:00
committed by NathanVss
parent 974f139f14
commit 8e7300b92c
5 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/smooth-starfishes-suffer.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@openfun/cunningham-react": minor
---
add border-radius transition

2
packages/react/src/components/Forms/DatePicker/_index.scss
View File

@@ -11,7 +11,7 @@
border-color: var(--c--components--forms-datepicker--border-color); border-color: var(--c--components--forms-datepicker--border-color);
border-style: var(--c--components--forms-datepicker--border-style); border-style: var(--c--components--forms-datepicker--border-style);
display: flex; display: flex;
transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out); transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
padding: 0 0.75rem; padding: 0 0.75rem;
gap: 1rem; gap: 1rem;
box-sizing: border-box; box-sizing: border-box;

2
packages/react/src/components/Forms/Input/_index.scss
View File

@@ -5,7 +5,7 @@
border-style: var(--c--components--forms-input--border-style); border-style: var(--c--components--forms-input--border-style);
background-color: var(--c--components--forms-input--background-color); background-color: var(--c--components--forms-input--background-color);
display: flex; display: flex;
transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out); transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
padding: 0 1rem; padding: 0 1rem;
gap: 1rem; gap: 1rem;
cursor: text; cursor: text;

2
packages/react/src/components/Forms/Select/_index.scss
View File

@@ -9,7 +9,7 @@
border-color: var(--c--components--forms-select--border-color); border-color: var(--c--components--forms-select--border-color);
border-style: var(--c--components--forms-select--border-style); border-style: var(--c--components--forms-select--border-style);
display: flex; display: flex;
transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out); transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
padding: 0 0.75rem; padding: 0 0.75rem;
gap: 1rem; gap: 1rem;
box-sizing: border-box; box-sizing: border-box;

2
packages/react/src/components/Forms/TextArea/index.scss
View File

@@ -13,7 +13,7 @@
border-color: var(--c--components--forms-textarea--border-color); border-color: var(--c--components--forms-textarea--border-color);
border-style: var(--c--components--forms-textarea--border-style); border-style: var(--c--components--forms-textarea--border-style);
background-color: var(--c--components--forms-textarea--background-color); background-color: var(--c--components--forms-textarea--background-color);
transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out); transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
overflow: hidden; overflow: hidden;
.labelled-box__label { .labelled-box__label {