css-pro-layout/dist/less/css-pro-layout.less

CSS library for building responsive and customizable page layouts

@import './variables.less';

.break-point() {
  position: fixed;
  left: -@sidebar-width;
  height: 100%;
  top: 0;
  z-index: 100;
  &.collapsed {
    left: -@sidebar-collapsed-width;
  }
  &.toggled {
    left: 0;
    ~ .overlay {
      display: block;
    }
  }

  ~ .layout {
    .header {
      width: 100% !important;
      transition: none;
    }
  }
}

.breakpoints() {
  break-point-xs: @breakpoint-xs;
  break-point-sm: @breakpoint-sm;
  break-point-md: @breakpoint-md;
  break-point-lg: @breakpoint-lg;
  break-point-xl: @breakpoint-xl;
  break-point-xxl: @breakpoint-xxl;
}

.break-point-rtl() {
  left: auto;
  right: -@sidebar-width;
  &.collapsed {
    left: auto;
    right: -@sidebar-collapsed-width;
  }
  &.toggled {
    left: auto;
    right: 0;
  }
}

.setBreakPoint(@name; @value) {
  &.@{name} {
    @media (max-width: @value) {
      .break-point();
    }
  }
}

.layout {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  flex-grow: 1;

  &.has-sidebar {
    flex-direction: row;
  }
  .header {
    transition: width, 0.3s;
    height: @header-height;
    min-height: @header-height;
    position: relative;
  }
  .sidebar {
    width: @sidebar-width;
    min-width: @sidebar-width;
    transition: width, left, right, 0.3s;
    &.collapsed {
      width: @sidebar-collapsed-width;
      min-width: @sidebar-collapsed-width;
    }

    each(.breakpoints(), {
      .setBreakPoint(@key, @value);
    });
  }
  .footer {
    height: @footer-height;
    min-height: @footer-height;
  }
  .content {
    flex-grow: 1;
  }

  .overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(#000, 0.3);
    z-index: 99;
    display: none;
  }

  .sidebar-toggler {
    display: none;

    each(.breakpoints(), {
      &.@{key} {
        @media (max-width: @value) {
          display: initial;
        }
      }
    });
  }

  &.fixed-sidebar {
    height: 100%;
    .sidebar {
      height: 100%;
      overflow: auto;
      ~ .layout {
        height: 100%;
        overflow: auto;
      }
    }
  }

  &.fixed-header {
    .header {
      position: fixed;
      width: 100%;
      z-index: 2;
      ~ .layout,
      ~ .content {
        margin-top: @header-height;
      }
    }
    &.fixed-sidebar {
      .header {
        width: calc(100% - @sidebar-width);
      }
      .sidebar.collapsed {
        ~ .layout {
          .header {
            width: calc(100% - @sidebar-collapsed-width);
          }
        }
      }
    }
  }

  &.rtl {
    direction: rtl;
    .sidebar {
      each(.breakpoints(), {
        &.@{key} {
          @media (max-width: @value) {
            .break-point-rtl();
          }
        }
      });
    }
  }
}