Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Added basic input styling for Before/After card

Browse source 
refs https://github.com/TryGhost/Team/issues/1249

This makes the input act as a slider over the image.
This commit is contained in:
Fabien egg O'Carroll 2021-12-13 17:40:37 +02:00
parent 8b03c97b1e
commit 8966f45993
1 changed files with 31 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
core/frontend/src/cards/css/before-after.css
View file

@ -14,3 +14,34 @@
max-width: none;
width: unset;
}
.kg-before-after-card input {
top:0;
left: -25px;
position: absolute;
-webkit-appearance: none;
appearance: none;
width: calc(100% + 50px);
height: 100%;
background: rgba(0, 0, 0, 0);
outline: none;
margin: 0;
}
.kg-before-after-card input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 50px;
height: 50px;
background: white;
cursor: pointer;
border-radius: 25px;
}
.kg-before-after-card input::-moz-range-thumb {
width: 50px;
height: 50px;
background: white;
cursor: pointer;
border-radius: 25px;
}