groundworkcss 0.2.2

data/vendor/assets/stylesheets/groundworkcss/ui/_messages.scss

@@ -0,0 +1,124 @@
+// =============================================
+//              Message Boxes
+//          Last Updated:2013-4-24
+// =============================================
+
+
+
+
+%message {
+  position:relative;
+  word-wrap:break-word;
+  padding:0.25em 1em;
+  background:$button-color;
+  border:1px solid $button-active;
+  color:$button-text;
+  font-weight:bold;
+  text-decoration:none;
+  @include rounded($radius);
+}
+
+%message-small { @include _small; }
+%message-large { @include _large; }
+%message-square { @include _square; }
+%message-round { @include _round; }
+%message-disabled { @include state(disabled,normal,desaturate($button-color,20%)); }
+
+%message-info {
+  background-color:$info-background;
+  color:$info-color;
+  border-color:$info-border;
+  &%message-disabled {
+    @include state(disabled,normal,desaturate($info-color,20%));
+  }
+}
+
+%message-alert {
+  background-color:$alert-background;
+  color:$alert-color;
+  border-color:$alert-border;
+  &%message-disabled {
+    @include state(disabled,normal,desaturate($alert-color,20%));
+  }
+}
+
+%message-warning {
+  background:$warning-background;
+  color:$warning-color;
+  border-color:$warning-border;
+  &%message-disabled {
+    @include state(disabled,normal,desaturate($warning-color,20%));
+  }
+}
+
+%message-error {
+  background:$error-background;
+  color:$error-color;
+  border-color:$error-border;
+  &%message-disabled {
+    @include state(disabled,normal,desaturate($error-color,20%));
+  }
+}
+
+%message-success {
+  background:$success-background;
+  color:$success-color;
+  border-color:$success-border;
+  &%message-disabled {
+    @include state(disabled,normal,desaturate($success-color,20%));
+  }
+}
+
+%message-dismissible {
+  padding-right:3em;
+  &:after {
+    content:'X';
+    display:block;
+    padding:0.5em 0;
+    font-size:0.8em;
+    text-align:center;
+    position:absolute;
+    top:0;
+    right:1em;
+    line-height:1.5;
+  }
+}
+
+@for $i from 1 through length($modifier-name) {
+  %message-#{nth($modifier-name, $i)} {
+    border-color:nth($modifier-code, $i);
+    background-color:lighten(nth($modifier-code, $i), 10%);
+    color:nth($modifier-text, $i);
+  }
+}
+
+@mixin message-modifiers() {
+  $modifiers: small large info alert warning error success square round disabled dismissible;
+  @for $i from 1 through length($modifiers) {
+    &.#{nth($modifiers, $i)} {
+      @extend %message-#{nth($modifiers, $i)};
+    }
+  }
+  @for $i from 1 through length($modifier-name) {
+    &.#{nth($modifier-name, $i)} {
+      @extend %message-#{nth($modifier-name, $i)};
+    }
+  }
+}
+
+@if $classes {
+  .message {
+    @extend %message;
+    @include message-modifiers;
+  }
+}
+
+@if $aria {
+  [role~=alert] {
+    @extend %message;
+    
+    @if $classes {
+      @include message-modifiers;
+    }
+  }
+}

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

@@ -0,0 +1,558 @@
+// =============================================
+//                  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($radius);
+}
+
+.mfp-iframe {
+  @include rounded($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;
+  }
+}