You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.0 KiB
89 lines
2.0 KiB
div.gallery |
|
margin: $gap-row 0 |
|
overflow: hidden |
|
$sp = 1px |
|
>.fancybox,>p>.fancybox |
|
margin: $sp |
|
padding: 0 |
|
position: relative |
|
.image-caption |
|
opacity: 0 |
|
transform: translateY(100%) |
|
transition: all 0.3s ease |
|
pointer-events: none |
|
position: absolute |
|
width: 100% |
|
bottom: 0 |
|
text-align: center |
|
background: rgba(0, 0, 0, 0.3) |
|
color: #fff |
|
&:empty |
|
display:none |
|
&:hover |
|
.image-caption |
|
opacity: 1 |
|
transform: translateY(0) |
|
&,>p |
|
display: flex |
|
justify-content: center |
|
align-items: center |
|
flex-wrap: nowrap |
|
padding: 0 !important |
|
align-items: stretch |
|
&[col]>p |
|
flex-wrap: wrap |
|
justify-content: flex-start |
|
&[col='2']>p>.fancybox |
|
width: "calc(50% - 2 * %s)" % $sp |
|
&[col='3']>p>.fancybox |
|
width: "calc(33.33% - 2 * %s)" % $sp |
|
&[col='4']>p>.fancybox |
|
width: "calc(25% - 2 * %s)" % $sp |
|
&[col='5']>p>.fancybox |
|
width: "calc(20% - 2 * %s)" % $sp |
|
&[col='6']>p>.fancybox |
|
width: "calc(16.66% - 2 * %s)" % $sp |
|
&[col='7']>p>.fancybox |
|
width: "calc(14.2857% - 2 * %s)" % $sp |
|
&[col='8']>p>.fancybox |
|
width: "calc(12.5% - 2 * %s)" % $sp |
|
>p |
|
margin: 0 |
|
&.left,&.left>p |
|
justify-content: flex-start |
|
&.center,&.center>p |
|
justify-content: center |
|
&.right,&.right>p |
|
justify-content: flex-end |
|
&.stretch,&.stretch>p |
|
align-items: stretch |
|
img |
|
transform: scale(1.5) |
|
|
|
.fancybox-container |
|
.fancybox-stage |
|
cursor: zoom-out |
|
|
|
.fancybox |
|
display: flex |
|
flex-direction: column |
|
justify-content: center |
|
align-items: center |
|
flex-wrap: nowrap |
|
padding: 0 !important |
|
overflow: hidden |
|
border-radius: 2px |
|
@media screen and (max-width: $device-mobile) |
|
border-radius: 1px |
|
a |
|
line-height: 0 |
|
margin: 0 |
|
align-items: stretch |
|
cursor: zoom-in |
|
.gallery |
|
overflow: hidden |
|
.image-caption |
|
font-size: $fontsize-code |
|
padding-top: $gap-row |
|
padding-bottom: $gap-row |
|
color: $color-meta
|
|
|