spacedeck-open/styles/modal.scss

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

//
// Modals
// --------------------------------------------------

// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal w/ bg and corners etc

// Kill the scroll on the body
.modal-open {overflow: hidden; }

.modal-prev, 
.modal-next  {
  color: $dark !important;
  position: fixed;
  top: 50%;
  margin: 0 34px;
  margin-top: -30px;
  opacity: 0.5;
  z-index: 2000;
}
.modal-prev { left: 0;}
.modal-next { right: 0;}


// Container that the modal scrolls within
.modal {
  overflow: auto;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 35000;
  -webkit-overflow-scrolling: touch;

  // Prevent Chrome on Windows from adding a focus outline. For details, see
  // https://github.com/twbs/bootstrap/pull/10951.
  outline: 0;

  // When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    // @include translate(0, -25%);
    @include transition-transform(0.1s ease-out);
    @include scale(0.98,0.98);
  }

  &.in {
    pointer-events: auto;
    .modal-dialog { 
      // @include translate(0, 0)
      @include scale(1,1);
    }
  }
  
  .close {
      margin-left: 44px;
      margin-bottom: 44px;
      .icon {display: block; }
  }
  
  figure {
    margin: 0;
    img {
      display: block;
      margin: auto;
    }
  }
}

// Shell div to position the modal with bottom padding

.modal-wrapper {
  position: relative;
  margin: 0px;
  display: table;
  height: 100%;
  width: 100%;

  background-color: rgba(0,0,0, 0.7);
}
.modal-appendix {
  position: relative;
  margin: 0px;
  display: table;
  width: 100%;

  text-align: center;
  background-color: $light;
  color: $medium;
  vertical-align: top;
  height: auto;

  .modal-section {
    max-width: 600px;
    margin: auto;
    text-align: left;
  }
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  width: 100%;
  margin: auto;
  text-align: center;
  padding: 40px;
  &.top {vertical-align: top; }
}

.modal-medium {
  max-height: 100%;
  > * {
    max-width: 100%;
    max-height: 100%;
  }
}

// Actual modal
.modal-content {
  width: 600px;
  position: relative;
  // @include box-shadow(0 0px 10px 5px rgba(0,0,0,0.05));
  background-clip: padding-box;
  // Remove focus outline from opened modal
  outline: none;
  display: inline-block;
  text-align: left;
  @include user-select(none);

  border-radius: $radius*3;
  background-color: $light !important;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1);
}


.modal-header {
  padding: 30px 40px;
  position: relative;
}

.close-search {
  position: fixed;
  top: 0;
  right: 0;
  margin: 40px 35px;
}



// Title text within header
.modal-title {
  color: $dark;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-indent: 4px;
  text-align: center;
  padding-top: 30px;
}

.modal-side-tabs {
  position: absolute;
  right: 0;
  top: 0;
  list-style: none;
  padding: 0;
  height: 100%;
  padding: 15px;
  border-left: 2px solid rgba(0,0,0,0.025); 
  z-index: 100;
  border-top-right-radius: $radius*3;
  border-bottom-right-radius: $radius*3;
}


.modal-tabs-wrapper {
  overflow: hidden;
  border-top-left-radius: $radius*3;
  border-top-right-radius: $radius*3;
}

.modal-tabs {
  display: table;
  width: 100%;
  table-layout: auto;
  background-color: $lightish;

  .dialog-tab {
    display: table-cell;
    text-align: center; 
    &:hover span {color: $dark; }

    &.open span {
      background-color: $light;
      color: $dark;
      opacity: 1;
      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1) !important;
      border-bottom-right-radius: 0px !important;
      border-bottom-left-radius: 0px !important;
      border-top-left-radius: $radius*3;
      border-top-right-radius: $radius*3;

    }

    &:first-child span { 
      box-shadow: inset 0px -4px 1px -4px rgba(0, 0, 0, 0.05), inset 0px -4px 7px -4px rgba(0, 0, 0, 0.1); 
      // border-top-left-radius: $radius*3;
      // border-bottom-right-radius: $radius*3;
    }

    &:last-child  span { 
      // box-shadow: inset 0 -4px 1px -4px rgba(0, 0, 0, 0.05), inset 0 -4px 7px -4px rgba(0, 0, 0, 0.1); 
      // border-top-right-radius: $radius*3;
      // border-bottom-left-radius: $radius*3;
    }

    span {
      box-shadow: inset 0 -4px 1px -4px rgba(0, 0, 0, 0.05), inset 0 -4px 7px -4px rgba(0, 0, 0, 0.1); 
      cursor: pointer;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      text-indent: 4px;
      display: block;
      width: 100%;
      height: 44px;
      line-height: 44px;
    }
  }
}


// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
  position: relative;
  @include clearfix();
}

.modal {
  .modal-section {
    // overflow: hidden;
    border-bottom: 2px solid rgba(0,0,0,0.04);
    padding: 40px;
    display: block;
    @include clearfix();
  
    &:first-child {
      border-top-left-radius: $radius*3 !important;
      border-top-right-radius: $radius*3 !important;
    }

    &.dark {background-color: $dark; }
    &.light {background-color: $light; }
      
    .modal-section-title {
      margin: 0;
      padding-top: 15px;
      color: $dark;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      text-indent: 4px;
      text-align: center;
    }
  }
}

// Footer (for actions)
.modal-footer {
    margin-top: 20px;
}