studio-variable/index-main
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

save
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
isUnknown 2026-01-06 11:19:25 +01:00
parent 522d975a3a
commit 48e7f21c71
37 changed files with 2595 additions and 1348 deletions
Download patch file Download diff file Expand all files Collapse all files

124
assets/css/components/_form-newsletter.scss
View file

@ -4,26 +4,26 @@
position: relative;
display: flex;
align-items: center;
position: relative;
max-width: 36ch;
margin: calc(var(--spacing)*1) auto;
margin-top: calc(var(--spacing)*1.5);
input[type="email"]{
height: var(--h-block);
height: calc(var(--h-block)*1.25);
width: 100%;
border-radius: calc(var(--h-block)*0.5);
border-radius: calc(var(--h-block)*0.625);
outline: none;
border: none;
padding: 0 1ch;
padding: 0 2ch;
font-family: var(--font);
font-size: var(--fs-medium);
font-size: var(--fs-normal);
z-index: 40;
padding-top: 4px;
&::placeholder{
font-size: var(--fs-medium);
font-family: var(--font);
font-size: var(--fs-normal);
}
&:focus{
@ -33,49 +33,95 @@
}
button[type="submit"].btn--bold{
z-index: 50;
button[type="submit"].btn--newletter{
position: absolute;
right: 3px;
right: 2px;
z-index: 100;
}
.btn--bold__container{
z-index: 50;
padding-right: 0;
&::before{
left: auto;
right: 0;
}
button[type="submit"].btn--newletter {
.txt{
font-size: var(--fs-medium);
display: none;
padding-left: 1ch;
}
--size: calc(var(--h-block)*1.25 - 4px);
font-family: var(--font);
font-size: var(--fs-button-bold);
height: var(--size);
display: flex;
align-items: center;
gap: 0.75ch;
color: var(--color-accent);
font-weight: var(--fw-medium);
text-decoration: none;
&:hover{
.txt{
display: block;
}
cursor: pointer;
.icon, .txt{ z-index: 10; }
.icon{
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-bg);
text-align: center;
svg{
fill: var(--color-bg);
width: 80%;
}
}
// shadow on input
&::before{
.txt{
position: relative;
top: 2px;
font-size: var(--fs-normal);
display: none;
padding-left: 1ch;
}
&::after{
content: '';
display: block;
width: 120px;
height: 30px;
background: linear-gradient(90deg,transparent 0%, var(--color-txt) 80%);
position: absolute;
left: -110px;
z-index: 40;
background-color: var(--color-accent);
border-radius: calc(var(--size)/2);
width: var(--size);
height: var(--size);
position: absolute;
right: 0;
z-index: 0;
transition: width .2s
}
&:hover{
.txt{
color: var(--color-bg);
display: block;
}
&::after{
width: 100%;
}
}
// @media #{$small}{
// .txt{
// color: var(--color-bg);
// display: block;
// }
// &::after{
// width: 100%;
// }
// }
}
}