pluto3/assets/less/theme/grid.less
2017-09-19 16:23:41 +08:00

148 lines
3.9 KiB
Plaintext

// set the variable when the media
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.display-type {
content: "tablet";
}
}
@media (max-width: @screen-xs-max) {
.display-type {
content: "phone";
}
}
.index-isotope {
padding-top: 20px;
&.v2 {
padding-top: 0px;
}
}
// GRID FOR FIXED WIDTH PAGE
@media (min-width: 992px) {
.page-fixed-width {
.index-isotope, .featured-posts-slider-contents, ul.products {
margin-left: -1%;
margin-right: -1%;
.item-isotope, article.featured-post {
@temp-width: 100% / 3 - 0.01%;
width: @temp-width;
padding: 1%;
}
}
.featured-posts-slider-contents, .featured-posts-slider-contents article.featured-post {
padding-top: 0px;
padding-bottom: 0px;
}
}
}
// GRID GENERATOR MIXIN
.os-make-isotope-grid(@os-items-per-row, @os-screen-min, @os-screen-max) {
@media (min-width: @os-screen-min) and (max-width: @os-screen-max) {
.index-isotope, .featured-posts-slider-contents {
margin-left: -1%;
margin-right: -1%;
.item-isotope, article.featured-post {
@temp-width: 100% / @os-items-per-row - 0.01%;
width: @temp-width;
padding: 1%;
}
&.isotope-condensed {
.item-isotope, article.featured-post {
padding: 0.7%;
}
}
}
.index-isotope.v2 {
margin-left: 0%;
margin-right: 0%;
.item-isotope {
@temp-width: 100% / @os-items-per-row - 0.01%;
width: @temp-width;
padding: 0%;
}
}
.featured-posts-slider-contents, .featured-posts-slider-contents article.featured-post {
padding-top: 0px;
padding-bottom: 0px;
}
}
}
.page-fluid-width {
&.no-sidebar {
&.menu-position-left, &.menu-position-right {
@media (max-width: 992px) {
.index-isotope.v1, .index-isotope.v3 {
padding: 0px;
.item-isotope {
padding: 15px 0px;
float: none;
}
}
}
.os-make-isotope-grid(@wosmlr_columns_992_1200, 992px, 1199px);
.os-make-isotope-grid(@wosmlr_columns_1200_1600, 1200px, 1599px);
.os-make-isotope-grid(@wosmlr_columns_1600_1750, 1600px, 1749px);
.os-make-isotope-grid(@wosmlr_columns_1750_5000, 1750px, 5000px);
}
&.menu-position-top {
@media (max-width: 768px) {
.index-isotope.v1, .index-isotope.v3 {
padding: 0px;
.item-isotope {
padding: 15px 0px;
float: none;
}
}
}
.os-make-isotope-grid(@wosmt_columns_768_992, 768px, 991px);
.os-make-isotope-grid(@wosmt_columns_992_1200, 992px, 1199px);
.os-make-isotope-grid(@wosmt_columns_1200_1300, 1200px, 1299px);
.os-make-isotope-grid(@wosmt_columns_1300_1600, 1300px, 1599px);
.os-make-isotope-grid(@wosmt_columns_1600_5000, 1600px, 5000px);
}
}
&.sidebar-position-left, &.sidebar-position-right {
&.menu-position-left, &.menu-position-right {
@media (max-width: 992px) {
.index-isotope.v1, .index-isotope.v3 {
padding: 0px;
.item-isotope {
padding: 15px 0px;
float: none;
}
}
}
.os-make-isotope-grid(@wsmlr_columns_992_1600, 992px, 1599px);
.os-make-isotope-grid(@wsmlr_columns_1600_1750, 1600px, 1749px);
.os-make-isotope-grid(@wsmlr_columns_1750_5000, 1750px, 5000px);
}
&.menu-position-top {
@media (max-width: 992px) {
.index-isotope.v1, .index-isotope.v3 {
padding: 0px;
.item-isotope {
padding: 15px 0px;
float: none;
}
}
}
.os-make-isotope-grid(@wsmt_columns_992_1300, 992px, 1299px);
.os-make-isotope-grid(@wsmt_columns_1300_1600, 1300px, 1599px);
.os-make-isotope-grid(@wsmt_columns_1600_1880, 1600px, 1879px);
.os-make-isotope-grid(@wsmt_columns_1880_5000, 1880px, 5000px);
}
}
}