133 lines
1.7 KiB
SCSS
Executable File
133 lines
1.7 KiB
SCSS
Executable File
|
|
.grid {
|
|
|
|
.grid-item-wrapper {
|
|
display: inline-block;
|
|
}
|
|
|
|
.grid-item {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
border-bottom: 0;
|
|
position: relative;
|
|
|
|
.thumbnail {
|
|
@include animate();
|
|
max-width: 100%;
|
|
}
|
|
|
|
.name {
|
|
@include one_line_text;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.secondary {
|
|
@include one_line_text;
|
|
padding-top: 2px;
|
|
color: $secondary_grey;
|
|
}
|
|
|
|
.fa {
|
|
font-size: 10px;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
&:hover{
|
|
cursor: pointer;
|
|
|
|
.thumbnail {
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.category-grid {
|
|
.grid-item {
|
|
position: relative;
|
|
|
|
.name {
|
|
position: absolute;
|
|
bottom: 15%;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
@include responsive( null, $bp_wide ){
|
|
.grid-item {
|
|
.name {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include responsive( null, 2400px ){
|
|
&.mini {
|
|
.grid-item {
|
|
@include grid_item( 3 )
|
|
}
|
|
}
|
|
&:not(.mini){
|
|
.grid-item {
|
|
@include grid_item( 5 )
|
|
}
|
|
}
|
|
}
|
|
|
|
@include responsive( 2399px, 1200px ){
|
|
&.mini {
|
|
.grid-item {
|
|
@include grid_item( 2 )
|
|
}
|
|
}
|
|
&:not(.mini){
|
|
.grid-item {
|
|
@include grid_item( 5 )
|
|
}
|
|
}
|
|
}
|
|
|
|
@include responsive( 1199px, 800px ){
|
|
&.mini {
|
|
.grid-item {
|
|
@include grid_item( 2 )
|
|
}
|
|
}
|
|
&:not(.mini){
|
|
.grid-item {
|
|
@include grid_item( 4 )
|
|
}
|
|
}
|
|
}
|
|
|
|
@include responsive( 799px, 500px ){
|
|
&.mini{
|
|
.grid-item {
|
|
@include grid_item( 6 )
|
|
}
|
|
}
|
|
&:not(.mini){
|
|
.grid-item {
|
|
@include grid_item( 3 )
|
|
}
|
|
}
|
|
}
|
|
|
|
@include responsive( 499px ){
|
|
&.mini{
|
|
.grid-item {
|
|
@include grid_item( 3 )
|
|
}
|
|
}
|
|
&:not(.mini){
|
|
.grid-item {
|
|
@include grid_item( 2 )
|
|
}
|
|
}
|
|
}
|
|
} |