diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/tiled-gallery/view.scss')
-rw-r--r-- | plugins/jetpack/extensions/blocks/tiled-gallery/view.scss | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss b/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss new file mode 100644 index 00000000..456f8acb --- /dev/null +++ b/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss @@ -0,0 +1,115 @@ +@import '../../shared/styles/jetpack-variables.scss'; +@import './variables.scss'; +@import './css-gram.scss'; + +$tiled-gallery-max-column-count: 20; + +.wp-block-jetpack-tiled-gallery { + margin: 0 auto $jetpack-block-margin-bottom; + + &.is-style-circle .tiled-gallery__item img { + border-radius: 50%; + } + + &.is-style-square, + &.is-style-circle { + .tiled-gallery__row { + flex-grow: 1; + width: 100%; + + @for $cols from 1 through $tiled-gallery-max-column-count { + &.columns-#{$cols} { + .tiled-gallery__col { + width: calc( ( 100% - #{ $tiled-gallery-gutter * ( $cols - 1 ) } ) / #{$cols} ); + } + } + } + } + } + + &.is-style-columns, + &.is-style-rectangular { + .tiled-gallery__item { + display: flex; + } + } +} + +.tiled-gallery__gallery { + width: 100%; + display: flex; + padding: 0; + flex-wrap: wrap; +} + +.tiled-gallery__row { + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + margin: 0; + + & + & { + margin-top: $tiled-gallery-gutter; + } +} + +.tiled-gallery__col { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0; + + & + & { + margin-left: $tiled-gallery-gutter; + } +} + +.tiled-gallery__item { + justify-content: center; + margin: 0; + overflow: hidden; + padding: 0; + position: relative; + + &.filter__black-and-white { + filter: grayscale( 100% ); + } + + &.filter__sepia { + filter: sepia( 100% ); + } + + &.filter__1977 { + @include _1977; + } + + &.filter__clarendon { + @include clarendon; + } + + &.filter__gingham { + @include gingham; + } + + & + & { + margin-top: $tiled-gallery-gutter; + } + + > img { + background-color: rgba( 0, 0, 0, 0.1 ); + } + + > a, + > a > img, + > img { + display: block; + height: auto; + margin: 0; + max-width: 100%; + object-fit: cover; + object-position: center; + padding: 0; + width: 100%; + } +} |