_galleries.scss (933B)
1 .gallery { 2 display: flex; 3 flex-flow: row wrap; 4 justify-content: center; 5 margin-bottom: calc(1.5 * #{$size__spacing-unit}); 6 } 7 8 .gallery-item { 9 display: inline-block; 10 margin-right: 16px; 11 margin-bottom: 16px; 12 text-align: center; 13 vertical-align: top; 14 width: 100%; 15 16 // Loops to enumerate the classes for gallery columns. 17 @for $i from 2 through 9 { 18 .gallery-columns-#{$i} & { 19 max-width: calc((100% - 16px * #{ $i - 1 }) / #{ $i }); 20 21 &:nth-of-type(#{$i}n+#{$i}) { 22 margin-right: 0; 23 } 24 } 25 } 26 27 &:last-of-type { 28 padding-right: 0; 29 } 30 } 31 32 .gallery-caption { 33 display: block; 34 font-size: $font__size-xs; 35 @include font-family( $font__heading ); 36 line-height: $font__line-height-pre; 37 margin: 0; 38 padding: ( $size__spacing-unit * .5 ); 39 } 40 41 .gallery-item > div > a { 42 display: block; 43 line-height: 0; 44 45 // Accessibility 46 box-shadow: 0 0 0 0 transparent; 47 48 &:focus { 49 box-shadow: 0 0 0 2px rgba( $color__link, 1 ); 50 } 51 } 52