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

first commit
Some checks are pending
Deploy / Deploy to Production (push) Waiting to run
Details

Browse source
This commit is contained in:
isUnknown 2025-12-10 15:12:06 +01:00
commit a3620a1f5f
1042 changed files with 226722 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

127
assets/css/components/_form-newsletter.scss Normal file
View file

@ -0,0 +1,127 @@
.form__newsletter{
--size: 24px;
position: relative;
display: flex;
align-items: center;
position: relative;
input[type="email"]{
height: calc(var(--h-block)*1.25);
width: 100%;
border-radius: calc(var(--h-block)*0.625);
outline: none;
border: none;
padding: 0 2ch;
font-family: var(--font);
font-size: var(--fs-normal);
z-index: 40;
padding-top: 4px;
&::placeholder{
font-family: var(--font);
font-size: var(--fs-normal);
}
&:focus{
outline: 3px solid var(--grey-400);
}
}
button[type="submit"].btn--bold{
position: absolute;
right: 2px;
z-index: 100;
}
button[type="submit"].btn--bold {
--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;
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%;
}
}
.txt{
position: relative;
top: 2px;
font-size: var(--fs-normal);
display: none;
padding-left: 1ch;
}
&::after{
content: '';
display: block;
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%;
// }
// }
}
}