2019-05-09 18:54:39 +12:00
|
|
|
/**
|
|
|
|
* Gridpak Beta LESS
|
|
|
|
*
|
|
|
|
* Generator - http://gridpak.com/
|
|
|
|
* Created by @erskinedesign
|
|
|
|
*/
|
|
|
|
|
|
|
|
.zone {
|
2020-02-11 06:04:57 +13:00
|
|
|
max-width: var(--config-width-xl);
|
2019-05-09 18:54:39 +12:00
|
|
|
margin: 0 auto 40px auto;
|
|
|
|
|
|
|
|
&.xxxl {
|
2019-08-24 01:39:00 +12:00
|
|
|
max-width: ~"calc(100% - 100px)";
|
2019-08-25 07:52:55 +12:00
|
|
|
|
|
|
|
@media @phones, @tablets {
|
2019-08-25 08:12:16 +12:00
|
|
|
max-width: 100%;
|
2019-08-25 07:52:55 +12:00
|
|
|
}
|
2019-05-09 18:54:39 +12:00
|
|
|
}
|
|
|
|
|
|
|
|
&.xxl {
|
2020-02-11 06:04:57 +13:00
|
|
|
max-width: var(--config-width-xxl);
|
2019-05-09 18:54:39 +12:00
|
|
|
}
|
|
|
|
|
|
|
|
&.xl {
|
2020-02-11 06:04:57 +13:00
|
|
|
max-width: var(--config-width-xl);
|
2019-05-09 18:54:39 +12:00
|
|
|
}
|
|
|
|
|
|
|
|
&.large {
|
2020-02-11 06:04:57 +13:00
|
|
|
max-width: var(--config-width-large);
|
2019-05-09 18:54:39 +12:00
|
|
|
}
|
|
|
|
|
|
|
|
&.medium {
|
2020-02-11 06:04:57 +13:00
|
|
|
max-width: var(--config-width-medium);
|
2019-05-09 18:54:39 +12:00
|
|
|
}
|
|
|
|
|
|
|
|
&.small {
|
2020-02-11 06:04:57 +13:00
|
|
|
max-width: var(--config-width-small);
|
2019-05-09 18:54:39 +12:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@max_columns: 12;
|
2019-08-17 18:09:09 +12:00
|
|
|
@padding: 40px;
|
2019-05-09 18:54:39 +12:00
|
|
|
|
|
|
|
.mixin-span(@num, @padding) {
|
|
|
|
@one: (100% / @max_columns);
|
|
|
|
width:calc(@one * @num ~"-" @padding);
|
|
|
|
box-sizing: content-box;
|
|
|
|
.func-padding-end(@padding);
|
|
|
|
}
|
|
|
|
|
|
|
|
.row {
|
|
|
|
//overflow: hidden;
|
|
|
|
position: relative;
|
|
|
|
margin: 0 -50px;
|
|
|
|
.func-padding-start(50px);
|
|
|
|
|
|
|
|
@media @phones, @tablets {
|
|
|
|
margin: 0 -30px;
|
|
|
|
.func-padding-start(30px);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.force-ltr {
|
|
|
|
>.col {
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.force-rtl {
|
|
|
|
>.col {
|
|
|
|
float: right;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.force-reverse {
|
|
|
|
>.col {
|
|
|
|
float: @config-end;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.wide {
|
|
|
|
margin: 0 -100px;
|
|
|
|
.func-padding-start(100px);
|
|
|
|
|
|
|
|
> .span-1 {
|
|
|
|
.mixin-span(1, 100px);
|
|
|
|
}
|
|
|
|
> .span-2 {
|
|
|
|
.mixin-span(2, 100px);
|
|
|
|
}
|
|
|
|
> .span-3 {
|
|
|
|
.mixin-span(3, 100px);
|
|
|
|
}
|
|
|
|
> .span-4 {
|
|
|
|
.mixin-span(4, 100px);
|
|
|
|
}
|
|
|
|
> .span-5 {
|
|
|
|
.mixin-span(5, 100px);
|
|
|
|
}
|
|
|
|
> .span-6 {
|
|
|
|
.mixin-span(6, 100px);
|
|
|
|
}
|
|
|
|
> .span-7 {
|
|
|
|
.mixin-span(7, 100px);
|
|
|
|
}
|
|
|
|
> .span-8 {
|
|
|
|
.mixin-span(8, 100px);
|
|
|
|
}
|
|
|
|
> .span-9 {
|
|
|
|
.mixin-span(9, 100px);
|
|
|
|
}
|
|
|
|
> .span-10 {
|
|
|
|
.mixin-span(10, 100px);
|
|
|
|
}
|
|
|
|
> .span-11 {
|
|
|
|
.mixin-span(11, 100px);
|
|
|
|
}
|
|
|
|
> .span-12 {
|
|
|
|
.mixin-span(12, 100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.thin {
|
|
|
|
margin: 0 -20px;
|
|
|
|
.func-padding-start(20px);
|
|
|
|
|
|
|
|
> .span-1 {
|
|
|
|
.mixin-span(1, 20px);
|
|
|
|
}
|
|
|
|
> .span-2 {
|
|
|
|
.mixin-span(2, 20px);
|
|
|
|
}
|
|
|
|
> .span-3 {
|
|
|
|
.mixin-span(3, 20px);
|
|
|
|
}
|
|
|
|
> .span-4 {
|
|
|
|
.mixin-span(4, 20px);
|
|
|
|
}
|
|
|
|
> .span-5 {
|
|
|
|
.mixin-span(5, 20px);
|
|
|
|
}
|
|
|
|
> .span-6 {
|
|
|
|
.mixin-span(6, 20px);
|
|
|
|
}
|
|
|
|
> .span-7 {
|
|
|
|
.mixin-span(7, 20px);
|
|
|
|
}
|
|
|
|
> .span-8 {
|
|
|
|
.mixin-span(8, 20px);
|
|
|
|
}
|
|
|
|
> .span-9 {
|
|
|
|
.mixin-span(9, 20px);
|
|
|
|
}
|
|
|
|
> .span-10 {
|
|
|
|
.mixin-span(10, 20px);
|
|
|
|
}
|
|
|
|
> .span-11 {
|
|
|
|
.mixin-span(11, 20px);
|
|
|
|
}
|
|
|
|
> .span-12 {
|
|
|
|
.mixin-span(12, 20px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
visibility: hidden;
|
|
|
|
display: block;
|
|
|
|
font-size: 0;
|
|
|
|
content: " ";
|
|
|
|
clear: both;
|
|
|
|
height: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.col {
|
|
|
|
float: @config-start;
|
|
|
|
box-sizing:border-box;
|
|
|
|
|
|
|
|
&.sticky-top {
|
|
|
|
position: sticky;
|
|
|
|
top: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.sticky-bottom {
|
|
|
|
position: sticky;
|
|
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.span-1 {
|
|
|
|
.mixin-span(1, @padding);
|
|
|
|
}
|
|
|
|
.span-2 {
|
|
|
|
.mixin-span(2, @padding);
|
|
|
|
}
|
|
|
|
.span-3 {
|
|
|
|
.mixin-span(3, @padding);
|
|
|
|
}
|
|
|
|
.span-4 {
|
|
|
|
.mixin-span(4, @padding);
|
|
|
|
}
|
|
|
|
.span-5 {
|
|
|
|
.mixin-span(5, @padding);
|
|
|
|
}
|
|
|
|
.span-6 {
|
|
|
|
.mixin-span(6, @padding);
|
|
|
|
}
|
|
|
|
.span-7 {
|
|
|
|
.mixin-span(7, @padding);
|
|
|
|
}
|
|
|
|
.span-8 {
|
|
|
|
.mixin-span(8, @padding);
|
|
|
|
}
|
|
|
|
.span-9 {
|
|
|
|
.mixin-span(9, @padding);
|
|
|
|
}
|
|
|
|
.span-10 {
|
|
|
|
.mixin-span(10, @padding);
|
|
|
|
}
|
|
|
|
.span-11 {
|
|
|
|
.mixin-span(11, @padding);
|
|
|
|
}
|
|
|
|
.span-12 {
|
|
|
|
.mixin-span(12, @padding);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media @phones, @tablets {
|
|
|
|
.row.responsive {
|
|
|
|
>.span-1,>.span-2,>.span-3,>.span-4,>.span-5,>.span-6,>.span-7,>.span-8,>.span-9,>.span-10,>.span-11,>.span-12 {
|
|
|
|
.mixin-span(12, 0px)!important;
|
|
|
|
width: 100% !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
&> {
|
|
|
|
width: 100%;
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-25 19:08:42 +12:00
|
|
|
// @media @desktops {
|
|
|
|
// .xxxl {
|
|
|
|
// >.row.responsive {
|
|
|
|
// >.span-1,>.span-2,>.span-3,>.span-4,>.span-5,>.span-6,>.span-7,>.span-8,>.span-9,>.span-10,>.span-11,>.span-12 {
|
|
|
|
// .mixin-span(12, 0px)!important;
|
|
|
|
// width: 100% !important;
|
|
|
|
// }
|
|
|
|
|
|
|
|
// &> {
|
|
|
|
// width: 100%;
|
|
|
|
// padding: 0;
|
|
|
|
// margin: 0;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
2019-05-09 18:54:39 +12:00
|
|
|
|
|
|
|
.tiles {
|
|
|
|
.clear;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
li {
|
|
|
|
.margin-end-large;
|
|
|
|
.pull-start;
|
|
|
|
width: ~"calc(33% - 33px)";
|
|
|
|
|
|
|
|
.photo-title {
|
|
|
|
width: ~"calc(100% + 30px)";
|
|
|
|
height: 15px;
|
|
|
|
margin: -15px -15px 10px -15px;
|
|
|
|
border-radius: 10px 10px 0 0;
|
2020-02-11 06:04:57 +13:00
|
|
|
background: var(--config-color-fade-super);
|
|
|
|
border-bottom: solid 1px var(--config-color-fade-super);
|
2019-05-09 18:54:39 +12:00
|
|
|
}
|
|
|
|
|
|
|
|
&:nth-child(3n) {
|
|
|
|
.func-margin-end(0)!important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media @tablets {
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
@media @phones {
|
|
|
|
|
|
|
|
li {
|
|
|
|
width: 100%;
|
|
|
|
.func-margin-end(0)!important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|