gridstack.scss

/*
 * This SCSS file is based on gridstack.scss by Pavel Reznikov, http://troolee.github.io/gridstack.js/
 */

$gridstack_columns: 3 !default;
$gridstack_horizontal_padding: 12px !default;
$gridstack_vertical_padding: 6px !default;
$gridstack_animation_speed: .3s !default;
$gridstack_item_padding: $gridstack_horizontal_padding / 2 !default;

@mixin gridstackvendor($property, $value...){
  -webkit-#{$property}:$value;
  -moz-#{$property}:$value;
  -ms-#{$property}:$value;
  -o-#{$property}:$value;
  #{$property}:$value;
}

@mixin gridstacklayout-columns($gridstack-columns: 3) {
  > .grid-stack-item {
    min-width: 100% / $gridstack-columns;

    @for $i from 1 through $gridstack-columns {
      &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
      &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
      &[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
      &[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
  }
}

@mixin gridstack {
  .grid-stack {
    position: relative;

    &.gridstack-initializing {
      &:after {
        display: block;
        position: absolute;
        top: 70px;
        left: 50%;
        width: 30px;
        height: 30px;
        margin-left: -15px;
        content: "\21bb";
        color: rgba(0,0,0,0.3);
        font-size: 28px;
        font-weight: 800;
        line-height: 30px;
        pointer-events: none;
      }
    }

    .grid-stack-placeholder > .placeholder-content {
      border: 2px dashed rgba(255,255,255,0.25);
      background: rgba(0,0,0,0.10);
      box-sizing: border-box;
      margin: 0;
      position: absolute;
      top: 0;
      left: $gridstack_item_padding;
      right: $gridstack_item_padding;
      bottom: 0;
      width: auto;
      z-index: 0 !important;
    }

    > .grid-stack-item {
      position: absolute;
      padding: 0;

      > .grid-stack-item-content {
        margin: 0;
        position: absolute;
        top: 0;
        left: $gridstack_horizontal_padding / 2;
        right: $gridstack_horizontal_padding / 2;
        bottom: 0;
        width: auto;
        z-index: 0 !important;
        overflow-x: hidden;
        overflow-y: auto;
      }

      &.disable-scrolling > .grid-stack-item-content {
        overflow-y: hidden;
      }

      > .ui-resizable-handle {
        position: absolute;
        font-size: 0.1px;
        display: block;
        -ms-touch-action: none;
        touch-action: none;
      }

      &.ui-resizable-disabled > .ui-resizable-handle,
      &.ui-resizable-autohide > .ui-resizable-handle { display: none; }

      &.ui-draggable-dragging,
      &.ui-resizable-resizing {
        z-index: 100;

        > .grid-stack-item-content,
        > .grid-stack-item-content {
          box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
          opacity: 0.4;
        }
      }

      > .ui-resizable-se,
      > .ui-resizable-sw {
        text-align: right;
        color: gray;

        padding: 2px 3px 0 0;
        margin: 0;

        font: normal normal normal 10px/1 Vaadin-Icons;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        &::before { content: "\e776"; }
      }

      > .ui-resizable-se {
        display: inline-block;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        @include gridstackvendor(transform, rotate(90deg));
      }

      > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; left: $gridstack_item_padding; top: 0; }
      > .ui-resizable-n  { cursor: n-resize;  height: 10px; top: 0; left: 25px; right: 25px; }
      > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; right: $gridstack_item_padding; top: 0; }
      > .ui-resizable-e  { cursor: e-resize;  width: 10px; right: $gridstack_item_padding; top: 15px; bottom: 15px; }
      > .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px; right: $gridstack_item_padding; bottom: 0; }
      > .ui-resizable-s  { cursor: s-resize;  height: 10px; left: 25px; bottom: 0; right: 25px; }
      > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; left: $gridstack_item_padding; bottom: 0; }
      > .ui-resizable-w  { cursor: w-resize;  width: 10px; left: $gridstack_item_padding; top: 15px; bottom: 15px; }

      .grid-stack-item-drag-handle.separate-handle {
        position: absolute;
        top: 0;
        left: $gridstack_item_padding;
        width: 20px;
        height: 20px;
        border-radius: 4px;
        background: rgba(0,0,0,0.5);
        cursor: move;
        display: none;
        opacity: 0.5;
        z-index: 90;

        &::after {
          font-family: "Vaadin-Icons";
          content: "\e755";
          color: white;
          text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
          display: inline-block;
          font-size: 12px;
          line-height: 20px;
          width: 20px;
          height: 20px;
          top: 0;
          left: 0;
          position: absolute;
          text-align: center;
          vertical-align: middle;
        }
      }

      &.ui-draggable-disabled .grid-stack-item-drag-handle.separate-handle {
      display: none !important;
      }

      &:hover .grid-stack-item-drag-handle.separate-handle {
        display: block;
      }

      .grid-stack-item-drag-handle.separate-handle:hover {
        opacity: 1.0;
      }
    }

    &.grid-stack-static > .grid-stack-item {
      .ui-resizable-handle {
        display: none !important;
      }

      .grid-stack-item-drag-handle.separate-handle {
        display: none !important;
      }
    }

    &.grid-stack-animate,
    &.grid-stack-animate .grid-stack-item {
      @include gridstackvendor(transition, left $gridstack_animation_speed, top $gridstack_animation_speed, height $gridstack_animation_speed, width $gridstack_animation_speed);
    }

    &.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
    &.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
    &.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
      @include gridstackvendor(transition, left .0s, top .0s, height .0s, width .0s);
    }

    @include gridstacklayout-columns($gridstack_columns);

    &.with-1-columns {
      @include gridstacklayout-columns(1);
    }

    &.with-2-columns {
      @include gridstacklayout-columns(2);
    }

    /* current default, no need to redefine
    &.with-three-columns {
      @include gridstacklayout-columns(3);
    }
    */

    &.with-4-columns {
      @include gridstacklayout-columns(4);
    }

    &.with-5-columns {
      @include gridstacklayout-columns(5);
    }

    &.with-6-columns {
      @include gridstacklayout-columns(6);
    }

    &.with-7-columns {
      @include gridstacklayout-columns(7);
    }

    &.with-8-columns {
      @include gridstacklayout-columns(8);
    }

    .grid-stack-item-content {
      &:before, &:after {
        opacity: 0;
        transition: opacity 2s ease-in;
        transition-delay: 1s;
      }
    }

    &.papers {
      overflow: visible;

      .ui-resizable-handle {
        background: rgba(255,255,255,0.75);
        border-radius: 6px;
      }

      .grid-stack-item-content {
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        overflow: visible !important;
        border-left-color: white;
        border-top-color: white;

        > .paper-item {
          box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
          background-color: #fff;
          position: relative;
          padding: 10px;
          z-index: 1;
          overflow: hidden;
        }

        &:before, &:after {
          position: absolute;
          width: 40%;
          max-width: 200px;
          height: 10px;
          content: " ";
          bottom: 8px;
          background: transparent;
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
          pointer-events: none;
          user-select: none;
          opacity: 0;
          transition: opacity 1s ease-in;
          transition-delay: 2s;
        }

        &:before {
          left: 2px;
          right: auto;
          transform: skew(-5deg) rotate(-5deg);
        }

        &:after {
          left: auto;
          right: 2px;
          transform: skew(5deg) rotate(5deg);
        }
      }
    }

    &.gridstack-initializing {
      .grid-stack-item-content {
        &:before, &:after {
          display: none;
        }
      }
    }

    &.gridstack-ready {
      .grid-stack-item-content {
        &:before, &:after {
          opacity: 1;
        }
      }
    }
  }
}