groundworkcss 0.4.4 → 2.0.0

data/app/assets/stylesheets/groundworkcss/ui/_modals.scss

@@ -1,556 +0,0 @@
-// =============================================
-//                  Modals
-//          Last Updated:2013-5-21
-// =============================================
-
-
-
-
-// Transluscent overlay
-.mfp-bg {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: $z-index-base + 2;
-  overflow: hidden;
-  position: fixed;
-
-  background: $overlay-color;
-  opacity: $overlay-opacity;
-  @if $IE7support {
-    filter: alpha(opacity=$overlay-opacity*100);
-  }
-}
-
-// Wrapper for popup
-.mfp-wrap {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: $z-index-base + 3;
-  position: fixed;
-  outline: none !important;
-  -webkit-backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar
-}
-
-// Root container
-.mfp-container {
-  text-align: center;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  padding: 0 $popup-padding-left;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-// Vertical centerer helper
-.mfp-container:before {
-  content: '';
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-
-// Remove vertical centering when popup has class `mfp-align-top`
-.mfp-align-top .mfp-container:before {
-  display: none;
-}
-
-// Popup content holder
-.mfp-content {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 auto;
-  text-align: left;
-  z-index: $z-index-base + 5;
-}
-.mfp-inline-holder .mfp-content,
-.mfp-ajax-holder .mfp-content {
-  width: auto;
-  max-width: $modal-max-width;
-  cursor: auto;
-}
-
-// Cursors
-.mfp-ajax-cur {
-  cursor: progress;
-}
-.mfp-zoom-out-cur,
-.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
-  cursor: -moz-zoom-out;
-  cursor: -webkit-zoom-out;
-  cursor: zoom-out;
-}
-.mfp-zoom {
-  cursor: pointer;
-  cursor: -webkit-zoom-in;
-  cursor: -moz-zoom-in;
-  cursor: zoom-in;
-}
-.mfp-auto-cursor .mfp-content {
-  cursor: auto;
-}
-
-.mfp-close,
-.mfp-arrow,
-.mfp-preloader,
-.mfp-counter {
-  -webkit-user-select:none;
-  -moz-user-select: none;
-  user-select: none;
-}
-
-// Hide the image during the loading
-.mfp-loading.mfp-figure {
-  display: none;
-}
-
-// Helper class that hides stuff
-.mfp-hide {
-  display: none !important;
-}
-
-
-
-////////////////////////
-// 3. Appearance
-////////////////////////
-
-// Preloader and text that displays error messages
-.mfp-preloader {
-  color: $controls-text-color;
-  position: absolute;
-  top: 50%;
-  width: auto;
-  text-align: center;
-  margin-top: -0.8em;
-  left: 8px;
-  right: 8px;
-  z-index: $z-index-base + 4;
-}
-.mfp-preloader a {
-  color: $controls-text-color;
-}
-.mfp-preloader a:hover {
-  color: $controls-text-color-hover;
-}
-
-// Hide preloader when content successfully loaded
-.mfp-s-ready .mfp-preloader {
-  display: none;
-}
-
-// Hide content when it was not loaded
-.mfp-s-error .mfp-content {
-  display: none;
-}
-
-
-// CSS-reset for buttons
-button.mfp-close,
-button.mfp-arrow {
-  overflow: visible;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  display: block;
-  padding: 0;
-  z-index: $z-index-base + 6;
-}
-button::-moz-focus-inner {
-    padding: 0;
-    border: 0
-}
-
-
-// Close icon
-.mfp-close {
-  width: 44px;
-  height:44px;
-  line-height: 44px;
-
-  position: absolute;
-  right: 0;
-  top: 0;
-  text-decoration: none;
-  text-align: center;
-  opacity: $controls-opacity;
-  padding: 0 0 18px 10px;
-  color: $controls-color;
-
-  font-style: normal;
-  font-size: 28px;
-  font-family: Arial, Baskerville, monospace;
-
-  &:hover,
-  &:focus {
-    opacity: 1;
-  }
-
-  &:active {
-    top: 1px;
-  }
-}
-.mfp-close-btn-in .mfp-close {
-  color: $inner-close-icon-color;
-}
-.mfp-image-holder .mfp-close,
-.mfp-iframe-holder .mfp-close {
-  color: $controls-color;
-  right: -6px;
-  text-align: right;
-  padding-right: 6px;
-  width: 100%;
-}
-
-// "1 of X" counter
-.mfp-counter {
-  position: absolute;
-  top:0;
-  right: 0;
-  color: $controls-text-color;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-// Navigation arrows
-@if $include-arrows {
-  .mfp-arrow {
-    position: absolute;
-    top: 0;
-    opacity: $controls-opacity;
-    margin: 0;
-    top: 50%;
-    margin-top: -55px;
-    padding: 0;
-    width: 90px;
-    height: 110px;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-  }
-  .mfp-arrow:active {
-    margin-top: -54px;
-  }
-  .mfp-arrow:hover,
-  .mfp-arrow:focus {
-    opacity: 1;
-  }
-
-  .mfp-arrow {
-
-    &:before,
-    &:after,
-    .mfp-b,
-    .mfp-a {
-      content: '';
-      display: block;
-      width: 0;
-      height: 0;
-      position: absolute;
-      left: 0;
-      top: 0;
-      margin-top: 35px;
-      margin-left: 35px;
-      border: solid transparent;
-    }
-
-    &:after,
-    .mfp-a {
-      opacity: $overlay-opacity;
-      border-top-width: 12px;
-      border-bottom-width: 12px;
-      top:8px;
-    }
-
-    &:before,
-    .mfp-b {
-      border-top-width: 20px;
-      border-bottom-width: 20px;
-    }
-
-  }
-
-  .mfp-arrow-left {
-    left: 0;
-
-    &:after,
-    .mfp-a {
-      border-right: 12px solid #000;
-      left: 5px;
-    }
-    &:before,
-    .mfp-b {
-       border-right: 20px solid #FFF;
-    }
-  }
-
-  .mfp-arrow-right {
-    right: 0;
-    &:after,
-    .mfp-a {
-      border-left: 12px solid #000;
-      left: 3px;
-    }
-    &:before,
-    .mfp-b {
-      border-left: 20px solid #FFF;
-    }
-  }
-}
-
-
-
-// Iframe content type
-@if $include-iframe-type {
-  .mfp-iframe-holder {
-    padding-top: $iframe-padding-top;
-    padding-bottom: $iframe-padding-top;
-  }
-  .mfp-iframe-holder .mfp-content {
-    line-height: 0;
-    width: 100%;
-    max-width: $iframe-max-width;
-  }
-  .mfp-iframe-scaler {
-    width: 100%;
-    height: 0;
-    overflow: hidden;
-    padding-top: $iframe-ratio * 100%;
-  }
-  .mfp-iframe-scaler iframe {
-    position: absolute;
-    top: -3px;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    box-shadow: $shadow;
-    background: $iframe-background;
-  }
-  .mfp-iframe-holder .mfp-close {
-    top: -43px;
-  }
-}
-
-
-
-
-
-// Image content type
-@if $include-image-type {
-
-  // Main image in popup
-  img.mfp-img {
-    width: auto;
-    max-width: 100%;
-    height: auto;
-    display: block;
-    line-height: 0;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: $image-padding-top 0 $image-padding-bottom;
-    margin: 0 auto;
-  }
-
-  // The shadow behind the image
-  .mfp-figure:after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: $image-padding-top;
-    bottom: $image-padding-bottom;
-    display: block;
-    right: 0;
-    width: auto;
-    height: auto;
-    z-index: -1;
-    box-shadow: $shadow;
-  }
-  .mfp-figure {
-    line-height: 0;
-  }
-  .mfp-bottom-bar {
-    margin-top:  -36px;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    cursor: auto;
-  }
-  .mfp-title {
-    text-align: left;
-    line-height: 18px;
-    color: $caption-title-color;
-    padding-right: 36px; // leave some space for counter at right side
-  }
-
-  .mfp-figure small {
-    color: $caption-subtitle-color;
-    display: block;
-    font-size: 12px;
-    line-height: 14px;
-  }
-  .mfp-image-holder .mfp-content {
-    max-width: 100%;
-  }
-
-  .mfp-gallery .mfp-image-holder .mfp-figure {
-    cursor: pointer;
-  }
-
-
-  @if $include-mobile-layout-for-image {
-
-      @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) {
-        // Remove all paddings around the image on small screen
-        .mfp-img-mobile .mfp-image-holder {
-          padding-left: 0;
-          padding-right: 0;
-        }
-        .mfp-img-mobile img.mfp-img {
-          padding: 0;
-        }
-        // The shadow behind the image
-        .mfp-img-mobile .mfp-figure:after {
-          top: 0;
-          bottom: 0;
-        }
-
-        .mfp-img-mobile .mfp-bottom-bar {
-          background: rgba(0,0,0,0.6);
-          bottom: 0;
-          margin: 0;
-          top: auto;
-          padding: 3px 5px;
-          position: fixed;
-          -webkit-box-sizing: border-box;
-          -moz-box-sizing: border-box;
-          box-sizing: border-box;
-        }
-        .mfp-img-mobile .mfp-bottom-bar:empty {
-          padding: 0;
-        }
-        .mfp-img-mobile .mfp-counter {
-          right: 5px;
-          top: 3px;
-        }
-        .mfp-img-mobile .mfp-close {
-          top: 0;
-          right: 0;
-          width: 35px;
-          height: 35px;
-          line-height: 35px;
-          background: rgba(0, 0, 0, 0.6);
-          position: fixed;
-          text-align: center;
-          padding: 0;
-        }
-        .mfp-img-mobile .mfp-figure small {
-          display: inline;
-          margin-left: 5px;
-        }
-      }
-  }
-
-}
-
-
-
-// Scale navigation arrows and reduce padding from sides
-@media all and (max-width: 800px) {
-  .mfp-arrow {
-    -webkit-transform: scale(0.75);
-    transform: scale(0.75);
-  }
-  .mfp-arrow-left {
-    -webkit-transform-origin: 0;
-    transform-origin: 0;
-  }
-  .mfp-arrow-right {
-     -webkit-transform-origin: 100%;
-    transform-origin: 100%;
-  }
-  .mfp-container {
-    padding-left: $popup-padding-left-mobile;
-    padding-right: $popup-padding-left-mobile;
-  }
-}
-
-
-// IE7 support
-// Styles that make popup look nicier in old IE
-@if $IE7support {
-  .mfp-ie7 {
-    .mfp-img {
-      padding: 0;
-    }
-    .mfp-bottom-bar {
-      width: 600px;
-      left: 50%;
-      margin-left: -300px;
-      margin-top: 5px;
-      padding-bottom: 5px;
-    }
-    .mfp-container {
-      padding: 0;
-    }
-    .mfp-content {
-      padding-top: 44px;
-    }
-    .mfp-close {
-      top: 0;
-      right: 0;
-      padding-top: 0;
-    }
-  }
-}
-
-// custom overrides
-
-.mfp-container {
-  @include inner-shadow(#000000, 200px, 0, 0);
-  @include gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.7));
-}
-
-.mfp-title {
-  word-break: break-word;
-}
-
-.mfp-content {
-  max-width: $max-width;
-  @include rounded($default-radius);
-}
-
-.mfp-iframe {
-  @include rounded($default-radius);
-}
-
-.mfp-iframe-holder {
-  .mfp-content {
-    width: 100%;
-    height: auto;
-    max-height: 100%;
-  }
-}
-
-.inline-modal {
-  .mfp-content {
-    width: auto;
-    position: relative;
-    padding: ($gutter*2.5);
-    background: #fff;
-  }
-  .mfp-close {
-    width: 25px;
-    height: 25px;
-    line-height: 30px;
-    font-size: 28px;
-  }
-}