salix/front/salix/styles/photo-list.scss

40 lines
979 B
SCSS

@import "./variables";
.photo-list {
justify-content: center;
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
.photo {
box-sizing: border-box;
transition: all .5s;
padding: $spacing-sm;
position: relative;
width: 448px;
.image {
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
0 3px 1px -2px rgba(0,0,0,.2),
0 1px 5px 0 rgba(0,0,0,.12);
background: no-repeat center center fixed;
background-size: cover !important;
border: 2px solid transparent;
overflow: hidden;
cursor: zoom-in;
height: 100%;
img {
max-width: 100%
}
}
.actions {
position: absolute;
right: 16px;
top: 16px
}
}
.photo:hover .image {
border: 2px solid $color-primary
}
}