webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: normalized and centralized sizes and padding

Browse source
This commit is contained in:
Robert Janus 2025-05-14 10:58:19 +02:00
parent 38cd37cf74
commit e591c276f5
11 changed files with 108 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

24
app/assets/styles/button.css
View file

@ -1,5 +1,5 @@
.Button {
--padding: .2rem;
--padding: var(--padding-xs);
--background: var(--color-main-dark);
--color: var(--color-lightest);
--background-hover: var(--color-main-dark);
@ -8,7 +8,7 @@
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
gap: var(--padding-default);
cursor: pointer;
transition: var(--transition-default);
outline: none;
@ -19,13 +19,13 @@
&.transparent {
--background: transparent;
box-shadow: none;
padding: .5em 1.5em;
padding: var(--padding-s) var(--padding-l);
border-radius: var(--radius-default);
}
&.raised {
box-shadow: var(--box-shadow-z2);
padding: .5em 1.5em;
padding: var(--padding-s) var(--padding-l);
border-radius: var(--radius-default);
&.danger {
@ -37,7 +37,7 @@
&.text {
--background: transparent;
--color: var(--color-darkest);
padding: .5em 1.5em;
padding: var(--padding-s) var(--padding-l);
border-radius: var(--radius-default);
&:hover {
@ -62,13 +62,13 @@
justify-content: center;
align-items: center;
border-radius: 100%;
padding: .5rem;
padding: var(--padding-s);
}
&.cta {
background: var(--background);
color: var(--color);
padding: .5rem 1.5rem;
padding: var(--padding-s) var(--padding-l);
border-radius: var(--radius-default);
box-shadow: var(--box-shadow-z2);
@ -98,7 +98,7 @@
--color: var(--color-main-darkest);
border-radius: 100%;
padding: var(--padding);
font-size: 1.1em;
font-size: var(--font-size-l);
&:hover {
scale: 1.2;
@ -106,17 +106,17 @@
}
&.mini-button {
padding: .5rem 1.5rem;
padding: var(--padding-s) var(--padding-l);
display: flex;
flex-direction: column;
gap: .5rem;
gap: var(--padding-xs);
& > .icon {
font-size: 1.5rem;
font-size: var(--font-size-xl);
}
& > span {
font-size: .8rem;
font-size: var(--font-size-s);
}
}
}