From 627f0488e5bd3c31359fc9e78acffbfea4a86a8b Mon Sep 17 00:00:00 2001 From: elijah Date: Fri, 24 Aug 2012 21:12:36 -0700 Subject: committed website v. 0.1.0 --- app/assets/stylesheets/mixins.scss | 172 +++++++++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 app/assets/stylesheets/mixins.scss (limited to 'app/assets/stylesheets/mixins.scss') 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 tag instead of vertical padding. This requires that is a block +// which requires that the
  • 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; + } + } + } + } + } +} -- cgit v1.2.3