appwrite/public/styles/grid.less

/**
 * Gridpak Beta LESS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */

.zone {
  max-width: var(--config-width-xl);
  margin: 0 auto 40px auto;

  &.xxxl {
    max-width: ~"calc(1400px - 100px)";

    @media @phones, @tablets {
      max-width: 100%;
    }
  }

  &.xxl {
    max-width: var(--config-width-xxl);
  }

  &.xl {
    max-width: var(--config-width-xl);
  }

  &.large {
    max-width: var(--config-width-large);
  }

  &.medium {
    max-width: var(--config-width-medium);
  }

  &.small {
    max-width: var(--config-width-small);
  }
}

@max_columns: 12;
@padding: 40px;

.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);
    }
  }

  &.modalize {
    margin: 0 -30px;
    .func-padding-start(30px);

    > .span-1 {
      .mixin-span(1, 30px);
    }
    > .span-2 {
      .mixin-span(2, 30px);
    }
    > .span-3 {
      .mixin-span(3, 30px);
    }
    > .span-4 {
      .mixin-span(4, 30px);
    }
    > .span-5 {
      .mixin-span(5, 30px);
    }
    > .span-6 {
      .mixin-span(6, 30px);
    }
    > .span-7 {
      .mixin-span(7, 30px);
    }
    > .span-8 {
      .mixin-span(8, 30px);
    }
    > .span-9 {
      .mixin-span(9, 30px);
    }
    > .span-10 {
      .mixin-span(10, 30px);
    }
    > .span-11 {
      .mixin-span(11, 30px);
    }
    > .span-12 {
      .mixin-span(12, 30px);
    }
  }

  &: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: 90px;
    }

    &.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;
    }
  }
}

.tiles {
  .clear;
  position: relative;

  > * {
    .margin-end-large;
    .pull-start;
    width: ~"calc(33.3333% - 33.3333px)";

    .photo-title {
      width: ~"calc(100% + 30px)";
      height: 15px;
      margin: -15px -15px 10px -15px;
      border-radius: 10px 10px 0 0;
      background: var(--config-color-fade-super);
      border-bottom: solid 1px var(--config-color-fade-super);
    }

    &:nth-child(3n) {
      .func-margin-end(0)!important;
    }
  }

  @media @tablets {
    > li {
      width: ~"calc(50% - 25px)";

      &:nth-child(3n) {
        .margin-end-large!important;
      }
      
      &:nth-child(2n) {
        .func-margin-end(0)!important;
      }
    }
  }

  @media @phones {

    > li {
      width: 100%;
        .func-margin-end(0)!important;
    }
  }
}