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

✨(react) add a nano button, proper icon sizes

Browse Source 
Previously we had to hack the button in order to display small clickable
icons, like the clear button in the DatePicker. By introducing a new
nano button we can natively achieve that. Also make more homegenous
font size and icon sizes in existing button sizes.
This commit is contained in:
Nathan Vasse
2023-09-01 17:33:15 +02:00
committed by NathanVss
parent 495f7d3731
commit c0028966f1
9 changed files with 86 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/react/src/components/Button/index.scss
View File

@@ -10,6 +10,11 @@
transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
user-select: none;
&__icon {
display: flex;
align-items: center;
}
&:hover, &:focus-visible, &:active, &.c__button--active {
border-radius: var(--c--components--button--border-radius--active);
}
@@ -45,6 +50,10 @@
&.c__button--icon-only {
width: var(--c--components--button--medium-height);
}
.c__button__icon, .c__button__icon * {
font-size: var(--c--components--button--medium-icon-font-size);
}
}
&--small {
@@ -55,6 +64,25 @@
&.c__button--icon-only {
width: var(--c--components--button--small-height);
}
.c__button__icon, .c__button__icon * {
font-size: var(--c--components--button--small-icon-font-size);
}
}
&--nano {
height: var(--c--components--button--nano-height);
font-size: var(--c--components--button--nano-font-size);
padding: 0 0.5rem;
&.c__button--icon-only {
width: var(--c--components--button--nano-height);
}
.c__button__icon, .c__button__icon * {
font-size: var(--c--components--button--nano-icon-font-size);
}
}
&--icon-only {