1 files changed, 172 insertions, 0 deletions
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
new file mode 100644
index 0000000..93cbc44
--- /dev/null
+++ b/app/assets/stylesheets/mixins.scss
@@ -0,0 +1,172 @@
+// Gradients
+@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
+  background-color: $endColor;
+  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
+  background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
+  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
+  background-image: linear-gradient(left, $startColor, $endColor); // Le standard
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1), $startColor, $endColor; // IE9 and down
+}
+@mixin gradient-vertical($startColor: #555, $endColor: #333) {
+  background-color: mix($startColor, $endColor, 60%);
+  background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
+  background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
+  background-image: linear-gradient(top, $startColor, $endColor); // The standard
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0),$startColor,$endColor; // IE9 and down
+}
+@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
+  background-color: $endColor;
+  background-repeat: repeat-x;
+  background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
+  background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
+  background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
+  background-image: linear-gradient($deg, $startColor, $endColor); // The standard
+}
+@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
+  background-color: mix($midColor, $endColor, 80%);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
+  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
+  background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-repeat: no-repeat;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0), $startColor, $endColor; // IE9 and down, gets no color-stop at all the proper fallback
+}
+@mixin gradient-radial($innerColor: #555, $outerColor: #333)  {
+  background-color: $outerColor;
+  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
+  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
+  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
+  background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
+  background-repeat: no-repeat;
+  // Opera cannot do radial gradients yet
+}
+@mixin gradient-striped($color,$angle: -45deg) {
+    background-color: $color;
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
+    background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+    background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+    background-image: -ms-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+    background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+    //background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+  }
+
+// Gradient Bar Colors for buttons and alerts
+@mixin gradientBar($primaryColor, $secondaryColor) {
+  @include gradient-vertical($primaryColor, $secondaryColor);
+  border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
+  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
+}
+
+// Reset filters for IE
+@mixin reset-filter() {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+
+
+//
+// An UL,LI menu that looks like a cutout and is positioned at the bottom
+// of the enclosing block.
+//
+// This mixin is applied to the enclosing block.
+//
+// the markup should look like this:
+//
+// enclosing-block
+//   ul#id
+//     li.tab
+//       a.tab
+//     li.tab
+//       a.tab
+//
+// the id for the ul is passed in as the first argument.
+//
+// it is difficult to create cutout tabs with a border that look good
+// in all browsers and at different client font-sizes.
+//
+// the problem is that the tab element needs to line up exactly with the
+// bottom of the enclosing block in order to make the cutout illusion work.
+// most methods of doing this create weird jitters in webkit
+// and gecko when resizing the screen or changing the font size. it does not
+// look so good to have a dark line under your tab, breaking the illusion of
+// a cutout.
+//
+// the method which makes this jitter-free is to use a height and a line-height
+// for the <a> tag instead of vertical padding. This requires that <a> is a block
+// which requires that the <li> is block & floated, instead of inline.
+//
+// This method seems to produce by far the most consistant results of letting
+// the active tab sit snugly on the bottom of the enclosing div.
+//
+// Change with caution: I spent way too much time getting this to work.
+//
+
+@mixin cutout-menu(
+  $ul_id,
+  $tab_margin: 10px,
+  $active_background: white,
+  $active_border: false) {
+
+  // allows us to put the menu at the bottom
+  position: relative;
+
+  ul##{$ul_id} {
+    margin: 0;
+    padding: 0;
+
+    // allows us to put the menu at the bottom
+    position: absolute;
+
+    // puts the menu at the bottom of the enclosing block,
+    // minus the overhand needed to cover the border:
+    // bottom: -(border_width($active_border));
+    bottom: -1px;
+
+    // padding-left: don't do it.
+    // ^^ In some cases, we need width of 100% to actually be the screen width,
+    // but adding padding makes 100% width be wider than the screen.
+    // So, instead, we add margin to the first and last li.
+
+    white-space: nowrap;
+
+    li.tab {
+      display: block;
+      float: left;
+      &.first {margin-left: $tab_margin;}
+      &.last  {margin-right: $tab_margin;}
+      a.tab {
+        // @include cg-hover-link;
+        display: block;
+        padding: 3px 15px;
+
+        // using height and line-height makes for much more consistant rendering
+        // than using vertical padding. essential to prevent tabs from looking
+        // horrible at different fonts sizes.
+        height: 1.75em;
+        line-height: 1.75em;
+
+        // the transparent border is needed to prevent the menu from jittering
+        // when the active border is applied.
+        border: 1px solid transparent;
+        border-bottom: 0;
+
+        &.active {
+          background-color: $active_background;
+          @if $active_border {
+            border: $active_border;
+            border-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}