studio-variable/index-website-static
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

modal share
All checks were successful
Deploy / Deploy to pre-production (push) Successful in 5s
Details

Browse source
This commit is contained in:
Julie Blanc 2025-12-23 19:17:52 +01:00
parent 08ebf7fc9e
commit 5914178e2f
19 changed files with 440 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

16
assets/css/components/_buttons.scss
View file

@ -36,7 +36,7 @@ button:disabled{
display: block;
height: calc(var(--h-block)*1);
border: var(--border);
border-radius: 4px;
border-radius: var(--radius-btn);
font-size: var(--fs-small);
text-transform: uppercase;
line-height: 1;
@ -49,7 +49,15 @@ button:disabled{
width: 100%;
height: 100%;
padding: 0 2ch;
padding-top: 5px;
padding-top: 4px;
}
&.no-link{
display: flex;
align-items: center;
justify-content: center;
padding: 0 2ch;
padding-top: 4px;
}
}
@ -68,6 +76,8 @@ button:disabled{
}
.btn--bold-inline:hover{
background-color: var(--grey-800);
color: var(--color-txt);
a{
background-color: var(--grey-800);
color: var(--color-txt);
@ -78,6 +88,8 @@ button:disabled{
// DELETE ?
.btn__default{

120
assets/css/components/_modal-share.scss Normal file
View file

@ -0,0 +1,120 @@
.modal--share{
border: var(--border);
border-radius: var(--radius-btn);
background-color: var(--color-bg);
padding: var(--padding-inner);
padding-top: calc( var(--padding-inner)*0.5);
padding-bottom: calc( var(--padding-inner)*1.5);
.modal-title{
display: none;
}
.socials{
display: block;
list-style: none;
li{
font-size: var(--fs-normal);
padding-bottom: 6px;
border-bottom: var(--border-light);
padding-top: 6px;
a{
display: flex;
align-items: center;
gap: 1ch;
text-decoration: none;
}
.icon {
width: 20px;
height: 20px;
svg{
width: 100%;
height: 100%;
}
}
.text{
position: relative;
top: 2px;
}
&:hover{
color: var(--color-accent);
.icon svg,
.icon svg path,
.icon svg rect{
fill: var(--color-accent)!important;
}
}
}
}
.copy-link{
display: flex;
gap: 0.5ch;
margin-top: calc(var(--spacing)*0.75);
.copy-link__field{
flex-grow: 1;
display: grid;
grid-template-columns: var(--h-block) 1fr;
}
.icon{
display: flex;
width: var(--h-block);
height: 100%;
align-items: center;
justify-content: center;
position: relative;
// top: -2px;
grid-row: 1;
grid-column: 1;
}
.icon svg{
width: 12px;
}
input{
font-size: var(--fs-small);
font-family: var(--font);
background: none;
border: none;
color: var(--color-txt);
padding-top: 2px;
grid-column: 1/end;
grid-row: 1;
padding-left: var(--h-block);
padding-right: 0.5ch;
border: var(--border-light);
border-radius: var(--radius-btn);
height: var(--h-block);
&:focus{
border-color: var(--color-txt);
outline: none;
}
}
button{
background-color: var(--color-txt);
color: var(--color-bg);
border-radius: var(--radius-btn);
padding: 0 1ch;
font-size: var(--fs-small);
padding-top: 2px;
&:hover{
background-color: var(--color-accent);
}
}
}
}