formir/src/less/core/layouts/side.less

Pure CSS / HTML Framework

/// DO NO NOT change this ///
@include-core-layout-side: true;

.side-width(@width) {
  &.@{side-uncover-hover}.@{side-hoverable}:hover, &:not(.@{side-cover}), &.@{side-uncover-focus}.@{side-focusable}:focus {
    &.@{side-left} {
      ~ .@{body-content} {
        margin-left: @width;
        & when(@include-core-layout-header = true) {
          .header-position(@width);
        }
      }
    }
    &.@{side-right} {
      ~ .@{body-content} {
        margin-right: @width;
        & when(@include-core-layout-header = true) {
          .header-position(false, @width);
        }
      }
    }
  }
}

.side-height(@height) {
  &.@{side-uncover-hover}.@{side-hoverable}:hover, &:not(.@{side-cover}), &.@{side-uncover-focus}.@{side-focusable}:focus {
    &.@{side-top} {
      ~ .@{body-content} {
        margin-top: @height;
        & when(@include-core-layout-header = true) {
          .header-position(false, false, @height);
        }
      }
    }
    &.@{side-bottom} {
      ~ .@{body-content} {
        margin-bottom: @height;
        & when(@include-core-layout-header = true) {
          .header-position(false, false, false, @height);
        }
      }
    }
  }
}

.side-collapse-off() {
  .side-expanded;
  .@{side-expanded-hide} {
    display: none;
  }
  .@{side-expanded-show} {
    display: block;
  }
  &:not([class*="width-"]) {
    &.@{side-left}, &.@{side-right} {
      width: @side-width-default;
    }
  }
  &:not([class*="height-"]) {
    &.@{side-top}, &.@{side-bottom} {
      height: @side-height-default;
    }
  }
  &.@{side-cover} {
    &.@{side-left} {
      ~ .@{body-content} {
        margin-left: @side-collapse-width;
      }
    }
    &.@{side-right} {
      ~ .@{body-content} {
        margin-right: @side-collapse-width;
      }
    }
    &.@{side-top} {
      ~ .@{body-content} {
        margin-top: @side-collapse-height;
      }
    }
    &.@{side-bottom} {
      ~ .@{body-content} {
        margin-bottom: @side-collapse-height;
      }
    }
  }
}

.side-collapse-on() {
  .side-collapsed;
  .@{side-collapsed-hide} {
    display: none;
  }
  .@{side-collapsed-show} {
    display: block;
  }
  &.@{side-animated} {
    &.@{side-left}, &.@{side-right} {
      transition: width @side-animate-time;
    }
    &.@{side-top}, &.@{side-bottom} {
      transition: height @side-animate-time;
    }

    ~ .@{body-content} {
      transition: margin @side-animate-time;
    }
  }
  &:not(.@{side-cover}) {
    &.@{side-left} {
      ~ .@{body-content} {
        margin-left: @side-collapse-width;
        & when(@include-core-layout-header = true) {
          .header-position(@side-collapse-width);
        }
      }
    }
    &.@{side-right} {
      ~ .@{body-content} {
        margin-right: @side-collapse-width;
        & when(@include-core-layout-header = true) {
          .header-position(false, @side-collapse-width);
        }
      }
    }
    &.@{side-top} {
      ~ .@{body-content} {
        margin-top: @side-collapse-height;
        & when(@include-core-layout-header = true) {
          .header-position(false, false, @side-collapse-height);
        }
      }
    }
    &.@{side-bottom} {
      ~ .@{body-content} {
        margin-bottom: @side-collapse-height;
        & when(@include-core-layout-header = true) {
          .header-position(false, false, false, @side-collapse-height);
        }
      }
    }
  }

  &.@{side-left}, &.@{side-right} {
    width: @side-collapse-width;
  }

  &.@{side-top}, &.@{side-bottom} {
    height: @side-collapse-height;
  }
  &.@{side-hoverable}:hover {
    .side-hovered;
  }
  &.@{side-focusable}:focus {
    .side-focused;
  }
  &.@{side-hoverable}:hover, &.@{side-focusable}:focus {
    &.@{side-left}, &.@{side-right} {
      .and-width(@layout-steps);
    }

    &.@{side-top}, &.@{side-bottom} {
      .and-height(@layout-steps);
    }
  }
  &.@{side-focusable}.@{side-focus-backdrop}:focus {
    + .@{side-backdrop} {
      display: block;
    }
  }
  &.@{side-hoverable}.@{side-hover-backdrop}:hover {
    + .@{side-backdrop} {
      display: block;
    }
  }
}

.side-show-full {
  .side-expanded;
  .side-expanded-full;
  width: @side-full-width !important;
  display: block !important;
  ~ .@{body-content} {
    > * {
      width: 100vw !important;
      max-width: none;
    }
    > .@{content-holder} {
      margin-left: @content-min-margin;
      margin-right: @content-min-margin;
    }
  }
  + .@{side-backdrop} {
    display: block;
  }
  &:not(.@{side-cover}) {
    &.@{side-left}, &.@{side-right} {
      ~ .@{body-content} {
        width: 100% - @side-full-width;
        overflow: hidden;
      }
    }
    &.@{side-left} {
      ~ .@{body-content} {
        margin-left: @side-full-width;
        & when(@include-core-layout-header = true) {
          .header-position(@side-full-width);
        }
      }
    }
    &.@{side-right} {
      ~ .@{body-content} {
        margin-right: @side-full-width;
        & when(@include-core-layout-header = true) {
          .header-position(false, @side-full-width);
        }
      }
    }
  }
  &.@{side-cover} {
    ~ .@{body-content} {
      margin-left: 0;
    }
  }
}

.side-input-backdrop() {
  display: block !important;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: @side-zindex - 2;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.side-hide-on() {
  &.@{side-hoverable} {
    display: block;
    &:not(:hover) {
      &.@{side-left}, &.@{side-right} {
        width: @side-hoverable-offset-width;
        opacity: 0;
        overflow-x: hidden;
      }
      &.@{side-top}, &.@{side-bottom} {
        height: @side-hoverable-offset-height;
        opacity: 0;
        overflow-y: hidden;
      }
    }
    &:hover {
      .side-hovered();
    }
  }
  &:not(.@{side-cover}), .@{side-cover} {
    &.@{side-left}, &.@{side-right} {
      ~ .@{body-content} {
        & when(@include-core-layout-header = true) {
          .header-position(0, 0);
        }
      }
    }
  }
  &:not(.@{side-hoverable}), &.@{side-hoverable}:not(:hover) {
    display: none;
    & ~ .@{side-open} {
      display: block;
    }
    &.@{side-animated} {
      display: block;
      &.@{side-left}, &.@{side-right} {
        width: 0;
        overflow-x: hidden;
      }
      &.@{side-top}, &.@{side-bottom} {
        height: 0;
        overflow-y: hidden;
      }
    }
  }
  &:not([class*="width-"]) {
    &.@{side-left}, &.@{side-right} {
      width: @side-width-default;
    }
  }
  &[class*="width-"], &:not([class*="width-"]) {
    &.@{side-left} {
      ~ .@{body-content} {
        margin-left: 0;
      }
    }
    &.@{side-right} {
      ~ .@{body-content} {
        margin-right: 0;
      }
    }
  }
  &:not([class*="height-"]) {
    &.@{side-top}, &.@{side-bottom} {
      height: @side-height-default;
    }
  }
  &[class*="height-"] {
    &.@{side-top} {
      ~ .@{body-content} {
        margin-top: 0;
      }
    }
    &.@{side-bottom} {
      ~ .@{body-content} {
        margin-bottom: 0;
      }
    }
  }
}

.@{side-collapse} {
  &:not(:checked) {
    + @{side} {
      & when (@device-width-side-collapse > 0) {
        @media (min-width: (@device-width-side-collapse + 1px)) {
          .side-collapse-off;
        }
        @media (max-width: @device-width-side-collapse) {
          .side-collapse-on;
        }
      }
      & when (@device-width-side-collapse = 0) {
        .side-collapse-off;
      }
      & when (@device-width-side-hide > 0) {
        @media (max-width: @device-width-side-hide) {
          .side-hide-on;
        }
      }
    }
  }
  &:checked {
    & when (@device-width-side-show-full > 0) {
      @media (max-width: @device-width-side-show-full) {
        .side-input-backdrop
      }
    }
    + @{side} {
      & when (@device-width-side-collapse > 0) {
        @media (min-width: (@device-width-side-collapse + 1px)) {
          .side-collapse-on;
        }
        @media (max-width: @device-width-side-collapse) {
          .side-collapse-off;
        }
      }
      & when (@device-width-side-show-full > 0) {
        &.@{side-left}, &.@{side-right} {
          @media (max-width: @device-width-side-show-full) {
            .side-show-full;
          }
        }
      }
      & when (@device-width-side-collapse = 0) {
        .side-collapse-on;
      }
    }
  }
}

.@{side-expand} {
  &:not(:checked) {
    + @{side} {
      .side-collapse-on;

      & when (@device-width-side-hide > 0) {
        @media (max-width: @device-width-side-hide) {
          .side-hide-on;
        }
      }
    }
  }
  &:checked {
    & when (@device-width-side-show-full > 0) {
      @media (max-width: @device-width-side-show-full) {
        .side-input-backdrop
      }
    }
    + @{side} {
      & when (@device-width-side-show-full > 0) {
        @media (min-width: (@device-width-side-show-full + 1px)) {
          .side-collapse-off;
        }
      }
      & when (@device-width-side-show-full = 0) {
        .side-collapse-off;
      }
      & when (@device-width-side-show-full > 0) {
        &.@{side-left}, &.@{side-right} {
          @media (max-width: @device-width-side-show-full) {
            .side-show-full;
          }
        }
      }
    }
  }
}

.@{side-hide} {  //collapse
  &:checked {
    & when (@device-width-side-show-full > 0) {
      @media (max-width: @device-width-side-show-full) {
        .side-input-backdrop
      }
    }
    + @{side} {
      .side-hide-on;

      & when (@device-width-side-show-full > 0) {
        &.@{side-left}, &.@{side-right} {
          @media (max-width: @device-width-side-show-full) {
            .side-show-full;
          }
        }
      }
    }
  }
  & when (@device-width-side-hide > 0) {
    &:not(:checked) {
      + @{side} {
        @media (max-width: @device-width-side-collapse) {
          .side-hide-on;
        }
      }
    }
  }
}

.@{side-hide-expand} {
  &:not(:checked) {
    + @{side} {
      .side-hide-on;
    }
  }

  &:checked {
    + @{side} {
      & when (@device-width-side-hide > 0) {
        @media (max-width: @device-width-side-hide) {
          .side-hide-on;
        }
      }
      & when (@device-width-side-show-full > 0) {
        &.@{side-left}, &.@{side-right} {
          @media (max-width: @device-width-side-show-full) {
            .side-show-full;
          }
        }
      }
    }
  }
}

.@{side-collapse}, .@{side-expand}, .@{side-hide}, .@{side-hide-expand} {
  display: none;
  & when (@device-width-side-show-full > 0) {
    &:checked {
      + @{side} {
        &.@{side-left}, &.@{side-right} {
          + .@{side-backdrop} {
            @media (max-width: @device-width-side-show-full) {
              display: block;
            }
          }
        }
      }
    }
  }
}

.@{side-expand}, .@{side-hide-expand} {
  &:checked {
    + @{side} + .@{side-backdrop} {
      display: block;
    }
  }
}

.@{side-full-height} {
  position: relative;
}

@{side} {
  position: fixed;
  z-index: @side-zindex;
  overflow: auto;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  outline: none;
  &.@{side-uncover-hover}.@{side-hoverable}:hover, &:not(.@{side-cover}), &.@{side-uncover-focus}.@{side-focusable}:focus {
    &:not([class*="width-"]) {
      &.@{side-left} {
        ~ .@{body-content} {
          margin-left: @side-width-default;
          .header-position(@side-width-default);
        }
      }
      &.@{side-right} {
        ~ .@{body-content} {
          margin-right: @side-width-default;
          .header-position(false, @side-width-default);
        }
      }
    }
    &:not([class*="height-"]) {
      &.@{side-top} {
        ~ .@{body-content} {
          margin-top: @side-height-default;
        }
      }
      &.@{side-bottom} {
        ~ .@{body-content} {
          margin-bottom: @side-height-default;
        }
      }
    }
  }

  &.@{side-left}, &.@{side-right} {
    overflow-y: auto;
    overflow-x: hidden;
  }
  &.@{side-top}, &.@{side-bottom} {
    overflow-x: auto;
    overflow-y: hidden;
  }

  &.@{side-animated} {
    &.@{side-left}, &.@{side-right} {
      transition: width @side-animate-time;
    }
    &.@{side-top}, &.@{side-bottom} {
      transition: height @side-animate-time;
    }
    ~ .@{body-content} {
      transition: margin @side-animate-time;
    }
  }

  &.@{side-absolute} {
    &.@{side-left}, &.@{side-right} {
      position: absolute;
      top: 0;
      bottom: auto;
      height: auto;
      min-height: 100%;
      max-height: 100%;
    }
  }

  &.@{side-float} {
    &.@{side-right} {
      float: right;
    }
    &.@{side-left} {
      float: left;
    }
  }

  &.@{side-relative} {
    position: relative;
    
    &.@{side-right} {
      float: right;
    }
    &.@{side-left} {
      float: left;
    }
  }
  &.@{side-static} {
    position: static;
  }

  &.@{side-left}, &.@{side-right} {
    top: 0;
    bottom: 0;
    max-height: 100%;
    height: 100%;
    will-change: width;
  }

  &.@{side-left} {
    left: 0;
    right: auto;
    ~ .@{side-open} {
      .side-open-left-style;
    }
  }

  &.@{side-right} {
    right: 0;
    left: auto;
    ~ .@{side-open} {
      .side-open-right-style;
    }
  }

  &.@{side-top}, &.@{side-bottom} {
    left: 0;
    right: 0;
    will-change: height;
  }

  &.@{side-top} {
    top: 0;
    bottom: auto;
    ~ .@{side-open} {
      .side-open-top-style;
    }
  }

  &.@{side-bottom} {
    bottom: 0;
    top: auto;
    ~ .@{side-open} {
      .side-open-bottom-style;
    }
  }
}

.@{side-backdrop} {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: @side-zindex - 1;
  display: none;
}

.@{side-open} {
  position: fixed;
  z-index: @side-zindex;
  display: none;
  .side-open-style();
}