spacedeck-open/styles/toolbar.scss

@import "vars";
@import "mixins";
@import "bounce";

.toolbar {
  &.toolbar-meta {
    @include translate3d(0, -100%, 0);
    width: auto !important; 
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
  }

  &.toolbar-undo {
    width: auto !important; 
    top: auto !important;
    left: 0 !important;
    bottom: 0 !important;
  }

  margin: auto;
  position: fixed;
  top: 20px;
  z-index: 3000;
  padding: 0;
  font-size: 0;
  line-height: 0;

  box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.15);
  border: 1px solid black;
  border-radius: 5px;

  // FIXME questionable?
  
  pointer-events: none !important; 
  
  > * {
    pointer-events: auto !important; 
  }

  &.toolbar-vertical {
    width: auto !important;

    &.toolbar-left  { 
      left: 0px; 
      .panel-wrap {
        left: 0px;
        @include transform-origin(center left);
        .panel {@include perspective-origin(center left); 

          > div {
            @include rotateY(90deg);
            @include transform-origin(center left);
          }
        }
      } 
    }

    &.toolbar-right { 
      right: 0px; 
      .panel-wrap {
        right: 0px; 
        @include transform-origin(center right);
        .panel {@include perspective-origin(center right); 

          > div {
            @include rotateY(-90deg);
            @include transform-origin(center right);
          }
        }
      }
    }

    font-size: 0px;
    height: 100%;
    pointer-events: none;
    @include transition( all 0.25s ease-in-out);
    @include translate3d(0, 0, 0);
    
    -webkit-perspective: 1000;
       -moz-perspective: 1000;
        -ms-perspective: 1000;
            perspective: 1000;
            
    .panel-toggles {
      @include transition( all 0.15s ease-in-out);
      display: inline-block;
      vertical-align: middle;
      .btn-group { 
        display: block;
        margin: 4px 0;
      }
      // > div > * {
      //   height: 0px;
      //   // pointer-events: auto;
      //   display: block !important;
      //   overflow: hidden;
      //   @include transition( height 0.125s ease-in-out);
      // }

      // > div > .in {
      //   pointer-events: auto;
      //   cursor: pointer;
      //   height: 60px;
      // }
    }

    .panels {
      @include transition( all 0.15s ease-in-out);
      height: 100%;
      display: inline-block;
      vertical-align: middle;
      position: relative;
      margin: 10px;

      .panel-wrap {
        display: table;
        position: absolute;
        height: 100%;
        pointer-events: none; 
        @include scale(0,0);
        @include user-select(none);
        @include transition( all 0.125s ease-in-out);

        &.open {
          @include scale(1,1);
          .panel > div {
            @include rotateX(0deg);
            opacity: 1 !important;
            pointer-events: auto !important;
          }
        }

        .panel {

          display: table-cell;
          vertical-align: middle;
          // @include backface-visibility(hidden);
          -webkit-perspective: 1000;
             -moz-perspective: 1000;
              -ms-perspective: 1000;
                  perspective: 1000;
    
          z-index: 1000;

          pointer-events: none;

          > div {
            @include backface-visibility(hidden);
            /* Other transform properties here */
            pointer-events: none;
            @include transition(all 0.2s ease-in-out);
            position: relative;

          }
        }
      }
    }
  }
}

.toolbar-properties {
  z-index: 0;

  &.in {
    z-index: 3000;
  }

  .icon-sm {
    z-index: 110;
    //background-color: #222;
    border-radius: 50px;
  }

  .jewel {
    border: 2px solid #888;
    background-color: transparent;
    color: #989898;
    width: 36px;
    height: 36px;
    border-top-left: 0px;
    border-top-right: 0px;
    
    font-size: 13px;
    line-height: 26px;
    top: 10px;
    right: 2px;

    box-shadow: 0px 0px 1px;
  }

  .jewel-stroke {
    border-width: 10px;
  }

  .dropdown-toggle.open .jewel {
    color: white;
  }
}

.toolbar-elements > .btn-group,
.toolbar-properties > .btn-group {
    //box-shadow: 0 0 30px rgba(0,0,0,0.5);
    background-color: $white;
}

.toolbar-elements {
    left: 20px;
}

.toolbar-properties {
    right: 30px;
}

.zoom-bar {
    position: absolute;
    bottom: 30px;
    right: 30px;
    box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.15);
    border: 1px solid black;
}