Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Reworked project to extract bootstrap into a sass mixin based library

  • Loading branch information...
commit b17fdbcbe49a3ec184b1cbc38c18ee9397d0d212 1 parent 395db61
phillipkregg authored
47 app/assets/stylesheets/application.css.scss
View
@@ -12,8 +12,6 @@
*= require_self
*/
-//*************** Import Theme - theme overrides defaults below ********************
-
//*************** Import Defaults *****************
@@ -21,44 +19,21 @@
@import "bootstrap";
@import "bootstrap-responsive";
-.row { border: 1px solid black; }
-.span12, .span8, .span2 {
- border: 1px solid yellow;
-}
+
+//*************** Sass based framework below! *********
+
+// include grid
+@import "sass/grid/row";
+@import "sass/grid/spans";
+@import "sass/grid/offsets";
+
+//include post styles
+@import "sass/user_posts/post";
+
-//*** Comment styles
-.comment_container {
- .comment_header {
- .avatar_date_posted {}
- .comment_number {}
- }//end comment_header
-
- .comment_avatar {
- border: 1px solid red;
- float: left;
-
- .avatar_user_name {}
-
- }//end comment_avatar
-
- .comment_body {
- border: 1px solid blue;
- background: #e5e5e5;
- min-height: 200px;
-
-
- .comment {
-
-
- }
-
- }
-
-
-} //end comment_container
3  app/assets/stylesheets/home.css.scss
View
@@ -1,3 +0,0 @@
-// Place all the styles related to the home controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
58 app/assets/stylesheets/overrides/_buttons.css.scss
View
@@ -1,58 +0,0 @@
-
-.btn_no_bg {
-
-
- display: inline-block;
-
- padding: 4px 12px;
- margin-bottom: 0; // For input.btn
- font-size: $baseFontSize;
- line-height: $baseLineHeight;
- text-align: center;
- vertical-align: middle;
- cursor: pointer;
- //@include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75));
- border: 1px solid $btnBorder;
- *border: 0; // Remove the border to prevent IE7's black border on input:focus
- border-bottom-color: darken($btnBorder, 10%);
- @include border-radius($baseBorderRadius);
- @include ie7-restore-left-whitespace(); // Give IE7 some love
- @include box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
-
- // Hover/focus state
- &:hover,
- &:focus {
- color: $grayDark;
- text-decoration: none;
- background-position: 0 -15px;
-
- // transition is only when going to hover/focus, otherwise the background
- // behind the gradient (there for IE<=9 fallback) gets mismatched
- @include transition(background-position .1s linear);
- }
-
- // Focus state for keyboard and accessibility
- &:focus {
- @include tab-focus();
- }
-
- // Active state
- &.active,
- &:active {
- background-image: none;
- outline: 0;
- @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
- }
-
- // Disabled state
- &.disabled,
- &[disabled] {
- cursor: default;
- background-image: none;
- @include opacity(65);
- @include box-shadow(none);
- }
-
-
-
-}
690 app/assets/stylesheets/overrides/_mixins.css.scss
View
@@ -1,690 +0,0 @@
-//
-// Mixins
-// --------------------------------------------------
-
-
-// UTILITY MIXINS
-// --------------------------------------------------
-
-// Clearfix
-// --------
-// For clearing floats like a boss h5bp.com/q
-@mixin clearfix {
- *zoom: 1;
- &:before,
- &:after {
- display: table;
- content: "";
- // Fixes Opera/contenteditable bug:
- // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
- line-height: 0;
- }
- &:after {
- clear: both;
- }
-}
-
-// Webkit-style focus
-// ------------------
-@mixin tab-focus() {
- // Default
- outline: thin dotted #333;
- // Webkit
- outline: 5px auto -webkit-focus-ring-color;
- outline-offset: -2px;
-}
-
-// Center-align a block level element
-// ----------------------------------
-@mixin center-block() {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-
-// IE7 inline-block
-// ----------------
-@mixin ie7-inline-block() {
- *display: inline; /* IE7 inline-block hack */
- *zoom: 1;
-}
-
-// IE7 likes to collapse whitespace on either side of the inline-block elements.
-// Ems because we're attempting to match the width of a space character. Left
-// version is for form buttons, which typically come after other elements, and
-// right version is for icons, which come before. Applying both is ok, but it will
-// mean that space between those elements will be .6em (~2 space characters) in IE7,
-// instead of the 1 space in other browsers.
-@mixin ie7-restore-left-whitespace() {
- *margin-left: .3em;
-
- &:first-child {
- *margin-left: 0;
- }
-}
-
-@mixin ie7-restore-right-whitespace() {
- *margin-right: .3em;
-}
-
-// Sizing shortcuts
-// -------------------------
-@mixin size($height, $width) {
- width: $width;
- height: $height;
-}
-@mixin square($size) {
- @include size($size, $size);
-}
-
-// Placeholder text
-// -------------------------
-@mixin placeholder($color: $placeholderText) {
- &:-moz-placeholder {
- color: $color;
- }
- &:-ms-input-placeholder {
- color: $color;
- }
- &::-webkit-input-placeholder {
- color: $color;
- }
-}
-
-// Text overflow
-// -------------------------
-// Requires inline-block or block for proper styling
-@mixin text-overflow() {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-// CSS image replacement
-// -------------------------
-// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
-@mixin hide-text {
- font: 0/0 a;
- color: transparent;
- text-shadow: none;
- background-color: transparent;
- border: 0;
-}
-
-
-// FONTS
-// --------------------------------------------------
-
-@mixin font-family-serif() {
- font-family: $serifFontFamily;
-}
-@mixin font-family-sans-serif() {
- font-family: $sansFontFamily;
-}
-@mixin font-family-monospace() {
- font-family: $monoFontFamily;
-}
-@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
- font-size: $size;
- font-weight: $weight;
- line-height: $lineHeight;
-}
-@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
- @include font-family-serif();
- @include font-shorthand($size, $weight, $lineHeight);
-}
-@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
- @include font-family-sans-serif();
- @include font-shorthand($size, $weight, $lineHeight);
-}
-@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
- @include font-family-monospace();
- @include font-shorthand($size, $weight, $lineHeight);
-}
-
-
-// FORMS
-// --------------------------------------------------
-
-// Block level inputs
-@mixin input-block-level {
- display: block;
- width: 100%;
- min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
- @include box-sizing(border-box); // Makes inputs behave like true block-level elements
-}
-
-
-
-// Mixin for form field states
-@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
- // Set the text color
- .control-label,
- .help-block,
- .help-inline {
- color: $textColor;
- }
- // Style inputs accordingly
- .checkbox,
- .radio,
- input,
- select,
- textarea {
- color: $textColor;
- }
- input,
- select,
- textarea {
- border-color: $borderColor;
- @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
- &:focus {
- border-color: darken($borderColor, 10%);
- @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%));
- }
- }
- // Give a small background color for input-prepend/-append
- .input-prepend .add-on,
- .input-append .add-on {
- color: $textColor;
- background-color: $backgroundColor;
- border-color: $textColor;
- }
-}
-
-
-
-// CSS3 PROPERTIES
-// --------------------------------------------------
-
-// Border Radius
-@mixin border-radius($radius) {
- -webkit-border-radius: $radius;
- -moz-border-radius: $radius;
- border-radius: $radius;
-}
-
-// Single Corner Border Radius
-@mixin border-top-left-radius($radius) {
- -webkit-border-top-left-radius: $radius;
- -moz-border-radius-topleft: $radius;
- border-top-left-radius: $radius;
-}
-@mixin border-top-right-radius($radius) {
- -webkit-border-top-right-radius: $radius;
- -moz-border-radius-topright: $radius;
- border-top-right-radius: $radius;
-}
-@mixin border-bottom-right-radius($radius) {
- -webkit-border-bottom-right-radius: $radius;
- -moz-border-radius-bottomright: $radius;
- border-bottom-right-radius: $radius;
-}
-@mixin border-bottom-left-radius($radius) {
- -webkit-border-bottom-left-radius: $radius;
- -moz-border-radius-bottomleft: $radius;
- border-bottom-left-radius: $radius;
-}
-
-// Single Side Border Radius
-@mixin border-top-radius($radius) {
- @include border-top-right-radius($radius);
- @include border-top-left-radius($radius);
-}
-@mixin border-right-radius($radius) {
- @include border-top-right-radius($radius);
- @include border-bottom-right-radius($radius);
-}
-@mixin border-bottom-radius($radius) {
- @include border-bottom-right-radius($radius);
- @include border-bottom-left-radius($radius);
-}
-@mixin border-left-radius($radius) {
- @include border-top-left-radius($radius);
- @include border-bottom-left-radius($radius);
-}
-
-// Drop shadows
-@mixin box-shadow($shadow...) {
- -webkit-box-shadow: $shadow;
- -moz-box-shadow: $shadow;
- box-shadow: $shadow;
-}
-
-// Transitions
-@mixin transition($transition...) {
- -webkit-transition: $transition;
- -moz-transition: $transition;
- -o-transition: $transition;
- transition: $transition;
-}
-@mixin transition-delay($transition-delay) {
- -webkit-transition-delay: $transition-delay;
- -moz-transition-delay: $transition-delay;
- -o-transition-delay: $transition-delay;
- transition-delay: $transition-delay;
-}
-@mixin transition-duration($transition-duration) {
- -webkit-transition-duration: $transition-duration;
- -moz-transition-duration: $transition-duration;
- -o-transition-duration: $transition-duration;
- transition-duration: $transition-duration;
-}
-
-// Transformations
-@mixin rotate($degrees) {
- -webkit-transform: rotate($degrees);
- -moz-transform: rotate($degrees);
- -ms-transform: rotate($degrees);
- -o-transform: rotate($degrees);
- transform: rotate($degrees);
-}
-@mixin scale($ratio) {
- -webkit-transform: scale($ratio);
- -moz-transform: scale($ratio);
- -ms-transform: scale($ratio);
- -o-transform: scale($ratio);
- transform: scale($ratio);
-}
-@mixin translate($x, $y) {
- -webkit-transform: translate($x, $y);
- -moz-transform: translate($x, $y);
- -ms-transform: translate($x, $y);
- -o-transform: translate($x, $y);
- transform: translate($x, $y);
-}
-@mixin skew($x, $y) {
- -webkit-transform: skew($x, $y);
- -moz-transform: skew($x, $y);
- -ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
- -o-transform: skew($x, $y);
- transform: skew($x, $y);
- -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
-}
-@mixin translate3d($x, $y, $z) {
- -webkit-transform: translate3d($x, $y, $z);
- -moz-transform: translate3d($x, $y, $z);
- -o-transform: translate3d($x, $y, $z);
- transform: translate3d($x, $y, $z);
-}
-
-// Backface visibility
-// Prevent browsers from flickering when using CSS 3D transforms.
-// Default value is `visible`, but can be changed to `hidden
-// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
-@mixin backface-visibility($visibility){
- -webkit-backface-visibility: $visibility;
- -moz-backface-visibility: $visibility;
- backface-visibility: $visibility;
-}
-
-// Background clipping
-// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
-@mixin background-clip($clip) {
- -webkit-background-clip: $clip;
- -moz-background-clip: $clip;
- background-clip: $clip;
-}
-
-// Background sizing
-@mixin background-size($size) {
- -webkit-background-size: $size;
- -moz-background-size: $size;
- -o-background-size: $size;
- background-size: $size;
-}
-
-
-// Box sizing
-@mixin box-sizing($boxmodel) {
- -webkit-box-sizing: $boxmodel;
- -moz-box-sizing: $boxmodel;
- box-sizing: $boxmodel;
-}
-
-// User select
-// For selecting text on the page
-@mixin user-select($select) {
- -webkit-user-select: $select;
- -moz-user-select: $select;
- -ms-user-select: $select;
- -o-user-select: $select;
- user-select: $select;
-}
-
-// Resize anything
-@mixin resizable($direction) {
- resize: $direction; // Options: horizontal, vertical, both
- overflow: auto; // Safari fix
-}
-
-// CSS3 Content Columns
-@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
- -webkit-column-count: $columnCount;
- -moz-column-count: $columnCount;
- column-count: $columnCount;
- -webkit-column-gap: $columnGap;
- -moz-column-gap: $columnGap;
- column-gap: $columnGap;
-}
-
-// Optional hyphenation
-@mixin hyphens($mode: auto) {
- word-wrap: break-word;
- -webkit-hyphens: $mode;
- -moz-hyphens: $mode;
- -ms-hyphens: $mode;
- -o-hyphens: $mode;
- hyphens: $mode;
-}
-
-// Opacity
-@mixin opacity($opacity) {
- opacity: $opacity / 100;
- filter: alpha(opacity=$opacity);
-}
-
-
-
-// BACKGROUNDS
-// --------------------------------------------------
-
-// Add an alphatransparency value to any background or border color (via Elyse Holladay)
-@mixin translucent-background($color: $white, $alpha: 1) {
- background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
-}
-
-@mixin translucent-border($color: $white, $alpha: 1) {
- border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
- @include background-clip(padding-box);
-}
-
-// Gradient Bar Colors for buttons and alerts
-@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
- color: $textColor;
- text-shadow: $textShadow;
- @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);
-}
-
-// Gradients
-@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
- background-color: $endColor;
- background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
- 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(to right, $startColor, $endColor); // Standard, IE10
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // 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: -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(to bottom, $startColor, $endColor); // Standard, IE10
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // 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: -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); // Standard, IE10
-}
-@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: -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='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for 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: -o-radial-gradient(circle, $innerColor, $outerColor);
- background-repeat: no-repeat;
-}
-@mixin gradient-striped($color: #555, $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: -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);
-}
-
-// Reset filters for IE
-@mixin reset-filter() {
- filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-}
-
-
-
-// COMPONENT MIXINS
-// --------------------------------------------------
-
-// Horizontal dividers
-// -------------------------
-// Dividers (basically an hr) within dropdowns and nav lists
-@mixin nav-divider($top: #e5e5e5, $bottom: $white) {
- // IE7 needs a set width since we gave a height. Restricting just
- // to IE7 to keep the 1px left/right space in other browsers.
- // It is unclear where IE is getting the extra space that we need
- // to negative-margin away, but so it goes.
- *width: 100%;
- height: 1px;
- margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
- *margin: -5px 0 5px;
- overflow: hidden;
- background-color: $top;
- border-bottom: 1px solid $bottom;
-}
-
-// Button backgrounds
-// ------------------
-@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
- // gradientBar will set the background to a pleasing blend of these, to support IE<=9
- @include gradientBar($startColor, $endColor, $textColor, $textShadow);
- *background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
- @include reset-filter();
-
- // in these cases the gradient won't cover the background, so we override
- &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
- color: $textColor;
- background-color: $endColor;
- *background-color: darken($endColor, 5%);
- }
-
- // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
- &:active,
- &.active {
- background-color: darken($endColor, 10%) \9;
- }
-}
-
-// Navbar vertical align
-// -------------------------
-// Vertically center elements in the navbar.
-// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
-@mixin navbarVerticalAlign($elementHeight) {
- margin-top: ($navbarHeight - $elementHeight) / 2;
-}
-
-
-
-// Grid System
-// -----------
-
-// Centered container element
-@mixin container-fixed() {
- margin-right: auto;
- margin-left: auto;
- @include clearfix();
-}
-
-// Table columns
-@mixin tableColumns($columnSpan: 1) {
- float: none; // undo default grid column styles
- width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
- margin-left: 0; // undo default grid column styles
-}
-
-// Make a Grid
-// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
-@mixin makeRow() {
- margin-left: $gridGutterWidth * -1;
- @include clearfix();
-}
-@mixin makeColumn($columns: 1, $offset: 0) {
- float: left;
- margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
-}
-
-// The Grid
-@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
- .row {
- margin-left: $gridGutterWidth * -1;
- @include clearfix();
- }
-
- [class*="span"] {
- float: left;
- min-height: 1px; // prevent collapsing columns
- margin-left: $gridGutterWidth;
- }
-
- // Set the container width, and override it for fixed navbars in media queries
- .container,
- .navbar-static-top .container,
- .navbar-fixed-top .container,
- .navbar-fixed-bottom .container {
- @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
- }
-
- // generate .spanX and .offsetX
- @include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
- @include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
-}
-
-@mixin grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
- @while $gridColumns > 0 {
- .span#{$gridColumns} { @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth)}
- $gridColumns: $gridColumns - 1;
- }
-}
-
-@mixin grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
- @while $gridColumns > 0 {
- .offset#{$gridColumns} { @include grid-core-offset($gridColumns, $gridColumnWidth, $gridGutterWidth); }
- $gridColumns: $gridColumns - 1;
- }
-}
-
-@mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
-}
-
-@mixin grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
- margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
-}
-
-
-
-@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
- .row-fluid {
- width: 100%;
- @include clearfix();
- [class*="span"] {
- @include input-block-level();
- float: left;
- margin-left: $fluidGridGutterWidth;
- *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
- }
- [class*="span"]:first-child {
- margin-left: 0;
- }
-
- // Space grid-sized controls properly if multiple per line
- .controls-row [class*="span"] + [class*="span"] {
- margin-left: $fluidGridGutterWidth;
- }
-
- // generate .spanX and .offsetX
- @include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
- @include grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
- }
-}
-
-@mixin grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- @while $gridColumns > 0 {
- .span#{$gridColumns} { @include grid-fluid-span($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
- $gridColumns: $gridColumns - 1;
- }
-}
-
-@mixin grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- @while $gridColumns > 0 {
- .offset#{$gridColumns} { @include grid-fluid-offset($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
- .offset#{$gridColumns}:first-child { @include grid-fluid-offset-first-child($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
- $gridColumns: $gridColumns - 1;
- }
-}
-
-@mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
- *width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-@mixin grid-fluid-offset($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth * 2);
- *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + ($fluidGridGutterWidth * 2) - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-@mixin grid-fluid-offset-first-child($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth);
- *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-
-
-@mixin grid-input($gridColumnWidth, $gridGutterWidth) {
- input,
- textarea,
- .uneditable-input {
- margin-left: 0; // override margin-left from core grid system
- }
-
- // Space grid-sized controls properly if multiple per line
- .controls-row [class*="span"] + [class*="span"] {
- margin-left: $gridGutterWidth;
- }
-
- // generate .spanX
- @include grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
-}
-
-@mixin grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
- @while $gridColumns > 0 {
- input.span#{$gridColumns},
- textarea.span#{$gridColumns},
- .uneditable-input.span#{$gridColumns} {
- @include grid-input-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
- }
- $gridColumns: $gridColumns - 1;
- }
-}
-
-@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
- width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
-}
7 app/assets/stylesheets/overrides/_variables.css.scss
View
@@ -1,7 +0,0 @@
-
-//*** no border radius on buttons
-$baseBorderRadius: 0px;
-$borderRadiusLarge: 0px;
-$borderRadiusSmall: 0px;
-
-$reddish: #f00;
228 app/assets/stylesheets/sass/_buttons.css.scss
View
@@ -1,228 +0,0 @@
-//
-// Buttons
-// --------------------------------------------------
-
-
-// Base styles
-// --------------------------------------------------
-
-// Core
-.btn {
- display: inline-block;
- @include ie7-inline-block();
- padding: 4px 12px;
- margin-bottom: 0; // For input.btn
- font-size: $baseFontSize;
- line-height: $baseLineHeight;
- text-align: center;
- vertical-align: middle;
- cursor: pointer;
- @include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75));
- border: 1px solid $btnBorder;
- *border: 0; // Remove the border to prevent IE7's black border on input:focus
- border-bottom-color: darken($btnBorder, 10%);
- @include border-radius($baseBorderRadius);
- @include ie7-restore-left-whitespace(); // Give IE7 some love
- @include box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
-
- // Hover/focus state
- &:hover,
- &:focus {
- color: $grayDark;
- text-decoration: none;
- background-position: 0 -15px;
-
- // transition is only when going to hover/focus, otherwise the background
- // behind the gradient (there for IE<=9 fallback) gets mismatched
- @include transition(background-position .1s linear);
- }
-
- // Focus state for keyboard and accessibility
- &:focus {
- @include tab-focus();
- }
-
- // Active state
- &.active,
- &:active {
- background-image: none;
- outline: 0;
- @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
- }
-
- // Disabled state
- &.disabled,
- &[disabled] {
- cursor: default;
- background-image: none;
- @include opacity(65);
- @include box-shadow(none);
- }
-
-}
-
-
-
-// Button Sizes
-// --------------------------------------------------
-
-// Large
-.btn-large {
- padding: $paddingLarge;
- font-size: $fontSizeLarge;
- @include border-radius($borderRadiusLarge);
-}
-.btn-large [class^="icon-"],
-.btn-large [class*=" icon-"] {
- margin-top: 4px;
-}
-
-// Small
-.btn-small {
- padding: $paddingSmall;
- font-size: $fontSizeSmall;
- @include border-radius($borderRadiusSmall);
-}
-.btn-small [class^="icon-"],
-.btn-small [class*=" icon-"] {
- margin-top: 0;
-}
-.btn-mini [class^="icon-"],
-.btn-mini [class*=" icon-"] {
- margin-top: -1px;
-}
-
-// Mini
-.btn-mini {
- padding: $paddingMini;
- font-size: $fontSizeMini;
- @include border-radius($borderRadiusSmall);
-}
-
-
-// Block button
-// -------------------------
-
-.btn-block {
- display: block;
- width: 100%;
- padding-left: 0;
- padding-right: 0;
- @include box-sizing(border-box);
-}
-
-// Vertically space out multiple block buttons
-.btn-block + .btn-block {
- margin-top: 5px;
-}
-
-// Specificity overrides
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
- &.btn-block {
- width: 100%;
- }
-}
-
-
-
-// Alternate buttons
-// --------------------------------------------------
-
-// Provide *some* extra contrast for those who can get it
-.btn-primary.active,
-.btn-warning.active,
-.btn-danger.active,
-.btn-success.active,
-.btn-info.active,
-.btn-inverse.active {
- color: rgba(255,255,255,.75);
-}
-
-// Set the backgrounds
-// -------------------------
-.btn-primary {
- @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
-}
-// Warning appears are orange
-.btn-warning {
- @include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
-}
-// Danger and error appear as red
-.btn-danger {
- @include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
-}
-// Success appears as green
-.btn-success {
- @include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
-}
-// Info appears as a neutral blue
-.btn-info {
- @include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
-}
-// Inverse appears as dark gray
-.btn-inverse {
- @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
-}
-
-
-// Cross-browser Jank
-// --------------------------------------------------
-
-button.btn,
-input[type="submit"].btn {
-
- // Firefox 3.6 only I believe
- &::-moz-focus-inner {
- padding: 0;
- border: 0;
- }
-
- // IE7 has some default padding on button controls
- *padding-top: 3px;
- *padding-bottom: 3px;
-
- &.btn-large {
- *padding-top: 7px;
- *padding-bottom: 7px;
- }
- &.btn-small {
- *padding-top: 3px;
- *padding-bottom: 3px;
- }
- &.btn-mini {
- *padding-top: 1px;
- *padding-bottom: 1px;
- }
-}
-
-
-// Link buttons
-// --------------------------------------------------
-
-// Make a button look and behave like a link
-.btn-link,
-.btn-link:active,
-.btn-link[disabled] {
- background-color: transparent;
- background-image: none;
- @include box-shadow(none);
-}
-.btn-link {
- border-color: transparent;
- cursor: pointer;
- color: $linkColor;
- @include border-radius(0);
-}
-.btn-link:hover,
-.btn-link:focus {
- color: $linkColorHover;
- text-decoration: underline;
- background-color: transparent;
-}
-.btn-link[disabled]:hover,
-.btn-link[disabled]:focus {
- color: $grayDark;
- text-decoration: none;
-}
690 app/assets/stylesheets/sass/_mixins.css.scss
View
@@ -1,690 +0,0 @@
-//
-// Mixins
-// --------------------------------------------------
-
-
-// UTILITY MIXINS
-// --------------------------------------------------
-
-// Clearfix
-// --------
-// For clearing floats like a boss h5bp.com/q
-@mixin clearfix {
- *zoom: 1;
- &:before,
- &:after {
- display: table;
- content: "";
- // Fixes Opera/contenteditable bug:
- // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
- line-height: 0;
- }
- &:after {
- clear: both;
- }
-}
-
-// Webkit-style focus
-// ------------------
-@mixin tab-focus() {
- // Default
- outline: thin dotted #333;
- // Webkit
- outline: 5px auto -webkit-focus-ring-color;
- outline-offset: -2px;
-}
-
-// Center-align a block level element
-// ----------------------------------
-@mixin center-block() {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-
-// IE7 inline-block
-// ----------------
-@mixin ie7-inline-block() {
- *display: inline; /* IE7 inline-block hack */
- *zoom: 1;
-}
-
-// IE7 likes to collapse whitespace on either side of the inline-block elements.
-// Ems because we're attempting to match the width of a space character. Left
-// version is for form buttons, which typically come after other elements, and
-// right version is for icons, which come before. Applying both is ok, but it will
-// mean that space between those elements will be .6em (~2 space characters) in IE7,
-// instead of the 1 space in other browsers.
-@mixin ie7-restore-left-whitespace() {
- *margin-left: .3em;
-
- &:first-child {
- *margin-left: 0;
- }
-}
-
-@mixin ie7-restore-right-whitespace() {
- *margin-right: .3em;
-}
-
-// Sizing shortcuts
-// -------------------------
-@mixin size($height, $width) {
- width: $width;
- height: $height;
-}
-@mixin square($size) {
- @include size($size, $size);
-}
-
-// Placeholder text
-// -------------------------
-@mixin placeholder($color: $placeholderText) {
- &:-moz-placeholder {
- color: $color;
- }
- &:-ms-input-placeholder {
- color: $color;
- }
- &::-webkit-input-placeholder {
- color: $color;
- }
-}
-
-// Text overflow
-// -------------------------
-// Requires inline-block or block for proper styling
-@mixin text-overflow() {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-// CSS image replacement
-// -------------------------
-// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
-@mixin hide-text {
- font: 0/0 a;
- color: transparent;
- text-shadow: none;
- background-color: transparent;
- border: 0;
-}
-
-
-// FONTS
-// --------------------------------------------------
-
-@mixin font-family-serif() {
- font-family: $serifFontFamily;
-}
-@mixin font-family-sans-serif() {
- font-family: $sansFontFamily;
-}
-@mixin font-family-monospace() {
- font-family: $monoFontFamily;
-}
-@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
- font-size: $size;
- font-weight: $weight;
- line-height: $lineHeight;
-}
-@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
- @include font-family-serif();
- @include font-shorthand($size, $weight, $lineHeight);
-}
-@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
- @include font-family-sans-serif();
- @include font-shorthand($size, $weight, $lineHeight);
-}
-@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
- @include font-family-monospace();
- @include font-shorthand($size, $weight, $lineHeight);
-}
-
-
-// FORMS
-// --------------------------------------------------
-
-// Block level inputs
-@mixin input-block-level {
- display: block;
- width: 100%;
- min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
- @include box-sizing(border-box); // Makes inputs behave like true block-level elements
-}
-
-
-
-// Mixin for form field states
-@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
- // Set the text color
- .control-label,
- .help-block,
- .help-inline {
- color: $textColor;
- }
- // Style inputs accordingly
- .checkbox,
- .radio,
- input,
- select,
- textarea {
- color: $textColor;
- }
- input,
- select,
- textarea {
- border-color: $borderColor;
- @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
- &:focus {
- border-color: darken($borderColor, 10%);
- @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%));
- }
- }
- // Give a small background color for input-prepend/-append
- .input-prepend .add-on,
- .input-append .add-on {
- color: $textColor;
- background-color: $backgroundColor;
- border-color: $textColor;
- }
-}
-
-
-
-// CSS3 PROPERTIES
-// --------------------------------------------------
-
-// Border Radius
-@mixin border-radius($radius) {
- -webkit-border-radius: $radius;
- -moz-border-radius: $radius;
- border-radius: $radius;
-}
-
-// Single Corner Border Radius
-@mixin border-top-left-radius($radius) {
- -webkit-border-top-left-radius: $radius;
- -moz-border-radius-topleft: $radius;
- border-top-left-radius: $radius;
-}
-@mixin border-top-right-radius($radius) {
- -webkit-border-top-right-radius: $radius;
- -moz-border-radius-topright: $radius;
- border-top-right-radius: $radius;
-}
-@mixin border-bottom-right-radius($radius) {
- -webkit-border-bottom-right-radius: $radius;
- -moz-border-radius-bottomright: $radius;
- border-bottom-right-radius: $radius;
-}
-@mixin border-bottom-left-radius($radius) {
- -webkit-border-bottom-left-radius: $radius;
- -moz-border-radius-bottomleft: $radius;
- border-bottom-left-radius: $radius;
-}
-
-// Single Side Border Radius
-@mixin border-top-radius($radius) {
- @include border-top-right-radius($radius);
- @include border-top-left-radius($radius);
-}
-@mixin border-right-radius($radius) {
- @include border-top-right-radius($radius);
- @include border-bottom-right-radius($radius);
-}
-@mixin border-bottom-radius($radius) {
- @include border-bottom-right-radius($radius);
- @include border-bottom-left-radius($radius);
-}
-@mixin border-left-radius($radius) {
- @include border-top-left-radius($radius);
- @include border-bottom-left-radius($radius);
-}
-
-// Drop shadows
-@mixin box-shadow($shadow...) {
- -webkit-box-shadow: $shadow;
- -moz-box-shadow: $shadow;
- box-shadow: $shadow;
-}
-
-// Transitions
-@mixin transition($transition...) {
- -webkit-transition: $transition;
- -moz-transition: $transition;
- -o-transition: $transition;
- transition: $transition;
-}
-@mixin transition-delay($transition-delay) {
- -webkit-transition-delay: $transition-delay;
- -moz-transition-delay: $transition-delay;
- -o-transition-delay: $transition-delay;
- transition-delay: $transition-delay;
-}
-@mixin transition-duration($transition-duration) {
- -webkit-transition-duration: $transition-duration;
- -moz-transition-duration: $transition-duration;
- -o-transition-duration: $transition-duration;
- transition-duration: $transition-duration;
-}
-
-// Transformations
-@mixin rotate($degrees) {
- -webkit-transform: rotate($degrees);
- -moz-transform: rotate($degrees);
- -ms-transform: rotate($degrees);
- -o-transform: rotate($degrees);
- transform: rotate($degrees);
-}
-@mixin scale($ratio) {
- -webkit-transform: scale($ratio);
- -moz-transform: scale($ratio);
- -ms-transform: scale($ratio);
- -o-transform: scale($ratio);
- transform: scale($ratio);
-}
-@mixin translate($x, $y) {
- -webkit-transform: translate($x, $y);
- -moz-transform: translate($x, $y);
- -ms-transform: translate($x, $y);
- -o-transform: translate($x, $y);
- transform: translate($x, $y);
-}
-@mixin skew($x, $y) {
- -webkit-transform: skew($x, $y);
- -moz-transform: skew($x, $y);
- -ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
- -o-transform: skew($x, $y);
- transform: skew($x, $y);
- -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
-}
-@mixin translate3d($x, $y, $z) {
- -webkit-transform: translate3d($x, $y, $z);
- -moz-transform: translate3d($x, $y, $z);
- -o-transform: translate3d($x, $y, $z);
- transform: translate3d($x, $y, $z);
-}
-
-// Backface visibility
-// Prevent browsers from flickering when using CSS 3D transforms.
-// Default value is `visible`, but can be changed to `hidden
-// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
-@mixin backface-visibility($visibility){
- -webkit-backface-visibility: $visibility;
- -moz-backface-visibility: $visibility;
- backface-visibility: $visibility;
-}
-
-// Background clipping
-// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
-@mixin background-clip($clip) {
- -webkit-background-clip: $clip;
- -moz-background-clip: $clip;
- background-clip: $clip;
-}
-
-// Background sizing
-@mixin background-size($size) {
- -webkit-background-size: $size;
- -moz-background-size: $size;
- -o-background-size: $size;
- background-size: $size;
-}
-
-
-// Box sizing
-@mixin box-sizing($boxmodel) {
- -webkit-box-sizing: $boxmodel;
- -moz-box-sizing: $boxmodel;
- box-sizing: $boxmodel;
-}
-
-// User select
-// For selecting text on the page
-@mixin user-select($select) {
- -webkit-user-select: $select;
- -moz-user-select: $select;
- -ms-user-select: $select;
- -o-user-select: $select;
- user-select: $select;
-}
-
-// Resize anything
-@mixin resizable($direction) {
- resize: $direction; // Options: horizontal, vertical, both
- overflow: auto; // Safari fix
-}
-
-// CSS3 Content Columns
-@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
- -webkit-column-count: $columnCount;
- -moz-column-count: $columnCount;
- column-count: $columnCount;
- -webkit-column-gap: $columnGap;
- -moz-column-gap: $columnGap;
- column-gap: $columnGap;
-}
-
-// Optional hyphenation
-@mixin hyphens($mode: auto) {
- word-wrap: break-word;
- -webkit-hyphens: $mode;
- -moz-hyphens: $mode;
- -ms-hyphens: $mode;
- -o-hyphens: $mode;
- hyphens: $mode;
-}
-
-// Opacity
-@mixin opacity($opacity) {
- opacity: $opacity / 100;
- filter: alpha(opacity=$opacity);
-}
-
-
-
-// BACKGROUNDS
-// --------------------------------------------------
-
-// Add an alphatransparency value to any background or border color (via Elyse Holladay)
-@mixin translucent-background($color: $white, $alpha: 1) {
- background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
-}
-
-@mixin translucent-border($color: $white, $alpha: 1) {
- border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
- @include background-clip(padding-box);
-}
-
-// Gradient Bar Colors for buttons and alerts
-@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
- color: $textColor;
- text-shadow: $textShadow;
- @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);
-}
-
-// Gradients
-@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
- background-color: $endColor;
- background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
- 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(to right, $startColor, $endColor); // Standard, IE10
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // 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: -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(to bottom, $startColor, $endColor); // Standard, IE10
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // 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: -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); // Standard, IE10
-}
-@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: -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='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for 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: -o-radial-gradient(circle, $innerColor, $outerColor);
- background-repeat: no-repeat;
-}
-@mixin gradient-striped($color: #555, $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: -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);
-}
-
-// Reset filters for IE
-@mixin reset-filter() {
- filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-}
-
-
-
-// COMPONENT MIXINS
-// --------------------------------------------------
-
-// Horizontal dividers
-// -------------------------
-// Dividers (basically an hr) within dropdowns and nav lists
-@mixin nav-divider($top: #e5e5e5, $bottom: $white) {
- // IE7 needs a set width since we gave a height. Restricting just
- // to IE7 to keep the 1px left/right space in other browsers.
- // It is unclear where IE is getting the extra space that we need
- // to negative-margin away, but so it goes.
- *width: 100%;
- height: 1px;
- margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
- *margin: -5px 0 5px;
- overflow: hidden;
- background-color: $top;
- border-bottom: 1px solid $bottom;
-}
-
-// Button backgrounds
-// ------------------
-@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
- // gradientBar will set the background to a pleasing blend of these, to support IE<=9
- @include gradientBar($startColor, $endColor, $textColor, $textShadow);
- *background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
- @include reset-filter();
-
- // in these cases the gradient won't cover the background, so we override
- &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
- color: $textColor;
- background-color: $endColor;
- *background-color: darken($endColor, 5%);
- }
-
- // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
- &:active,
- &.active {
- background-color: darken($endColor, 10%) \9;
- }
-}
-
-// Navbar vertical align
-// -------------------------
-// Vertically center elements in the navbar.
-// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
-@mixin navbarVerticalAlign($elementHeight) {
- margin-top: ($navbarHeight - $elementHeight) / 2;
-}
-
-
-
-// Grid System
-// -----------
-
-// Centered container element
-@mixin container-fixed() {
- margin-right: auto;
- margin-left: auto;
- @include clearfix();
-}
-
-// Table columns
-@mixin tableColumns($columnSpan: 1) {
- float: none; // undo default grid column styles
- width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
- margin-left: 0; // undo default grid column styles
-}
-
-// Make a Grid
-// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
-@mixin makeRow() {
- margin-left: $gridGutterWidth * -1;
- @include clearfix();
-}
-@mixin makeColumn($columns: 1, $offset: 0) {
- float: left;
- margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
-}
-
-// The Grid
-@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
- .row {
- margin-left: $gridGutterWidth * -1;
- @include clearfix();
- }
-
- [class*="span"] {
- float: left;
- min-height: 1px; // prevent collapsing columns
- margin-left: $gridGutterWidth;
- }
-
- // Set the container width, and override it for fixed navbars in media queries
- .container,
- .navbar-static-top .container,
- .navbar-fixed-top .container,
- .navbar-fixed-bottom .container {
- @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
- }
-
- // generate .spanX and .offsetX
- @include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
- @include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
-}
-
-@mixin grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
- @while $gridColumns > 0 {
- .span#{$gridColumns} { @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth)}
- $gridColumns: $gridColumns - 1;
- }
-}
-
-@mixin grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
- @while $gridColumns > 0 {
- .offset#{$gridColumns} { @include grid-core-offset($gridColumns, $gridColumnWidth, $gridGutterWidth); }
- $gridColumns: $gridColumns - 1;
- }
-}
-
-@mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
-}
-
-@mixin grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
- margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
-}
-
-
-
-@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
- .row-fluid {
- width: 100%;
- @include clearfix();
- [class*="span"] {
- @include input-block-level();
- float: left;
- margin-left: $fluidGridGutterWidth;
- *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
- }
- [class*="span"]:first-child {
- margin-left: 0;
- }
-
- // Space grid-sized controls properly if multiple per line
- .controls-row [class*="span"] + [class*="span"] {
- margin-left: $fluidGridGutterWidth;
- }
-
- // generate .spanX and .offsetX
- @include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
- @include grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
- }
-}
-
-@mixin grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- @while $gridColumns > 0 {
- .span#{$gridColumns} { @include grid-fluid-span($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
- $gridColumns: $gridColumns - 1;
- }
-}
-
-@mixin grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- @while $gridColumns > 0 {
- .offset#{$gridColumns} { @include grid-fluid-offset($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
- .offset#{$gridColumns}:first-child { @include grid-fluid-offset-first-child($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
- $gridColumns: $gridColumns - 1;
- }
-}
-
-@mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
- *width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-@mixin grid-fluid-offset($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth * 2);
- *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + ($fluidGridGutterWidth * 2) - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-@mixin grid-fluid-offset-first-child($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth);
- *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-
-
-@mixin grid-input($gridColumnWidth, $gridGutterWidth) {
- input,
- textarea,
- .uneditable-input {
- margin-left: 0; // override margin-left from core grid system
- }
-
- // Space grid-sized controls properly if multiple per line
- .controls-row [class*="span"] + [class*="span"] {
- margin-left: $gridGutterWidth;
- }
-
- // generate .spanX
- @include grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
-}
-
-@mixin grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
- @while $gridColumns > 0 {
- input.span#{$gridColumns},
- textarea.span#{$gridColumns},
- .uneditable-input.span#{$gridColumns} {
- @include grid-input-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
- }
- $gridColumns: $gridColumns - 1;
- }
-}
-
-@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
- width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
-}
301 app/assets/stylesheets/sass/_variables.css.scss
View
@@ -1,301 +0,0 @@
-//
-// Variables
-// --------------------------------------------------
-
-
-// Global values
-// --------------------------------------------------
-
-
-// Grays
-// -------------------------
-$black: #000 !default;
-$grayDarker: #222 !default;
-$grayDark: #333 !default;
-$gray: #555 !default;
-$grayLight: #999 !default;
-$grayLighter: #eee !default;
-$white: #fff !default;
-
-
-// Accent colors
-// -------------------------
-$blue: #049cdb !default;
-$blueDark: #0064cd !default;
-$green: #46a546 !default;
-$red: #9d261d !default;
-$yellow: #ffc40d !default;
-$orange: #f89406 !default;
-$pink: #c3325f !default;
-$purple: #7a43b6 !default;
-
-
-// Scaffolding
-// -------------------------
-$bodyBackground: $white !default;
-$textColor: $grayDark !default;
-
-
-// Links
-// -------------------------
-$linkColor: #08c !default;
-$linkColorHover: darken($linkColor, 15%) !default;
-
-
-// Typography
-// -------------------------
-$sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
-$serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
-$monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default;
-
-$baseFontSize: 14px !default;
-$baseFontFamily: $sansFontFamily !default;
-$baseLineHeight: 20px !default;
-$altFontFamily: $serifFontFamily !default;
-
-$headingsFontFamily: inherit !default; // empty to use BS default, $baseFontFamily
-$headingsFontWeight: bold !default; // instead of browser default, bold
-$headingsColor: inherit !default; // empty to use BS default, $textColor
-
-
-// Component sizing
-// -------------------------
-// Based on 14px font-size and 20px line-height
-
-$fontSizeLarge: $baseFontSize * 1.25; // ~18px
-$fontSizeSmall: $baseFontSize * 0.85; // ~12px
-$fontSizeMini: $baseFontSize * 0.75; // ~11px
-
-$paddingLarge: 11px 19px !default; // 44px
-$paddingSmall: 2px 10px !default; // 26px
-$paddingMini: 0px 6px !default; // 22px
-
-$baseBorderRadius: 4px !default;
-$borderRadiusLarge: 6px !default;
-$borderRadiusSmall: 3px !default;
-
-
-// Tables
-// -------------------------
-$tableBackground: transparent !default; // overall background-color
-$tableBackgroundAccent: #f9f9f9 !default; // for striping
-$tableBackgroundHover: #f5f5f5 !default; // for hover
-$tableBorder: #ddd !default; // table and cell border
-
-// Buttons
-// -------------------------
-$btnBackground: $white !default;
-$btnBackgroundHighlight: darken($white, 10%) !default;
-$btnBorder: #ccc !default;
-
-$btnPrimaryBackground: $linkColor !default;
-$btnPrimaryBackgroundHighlight: adjust-hue($btnPrimaryBackground, 20%) !default;
-
-$btnInfoBackground: #5bc0de !default;
-$btnInfoBackgroundHighlight: #2f96b4 !default;
-
-$btnSuccessBackground: #62c462 !default;
-$btnSuccessBackgroundHighlight: #51a351 !default;
-
-$btnWarningBackground: lighten($orange, 15%) !default;
-$btnWarningBackgroundHighlight: $orange !default;
-
-$btnDangerBackground: #ee5f5b !default;
-$btnDangerBackgroundHighlight: #bd362f !default;
-
-$btnInverseBackground: #444 !default;
-$btnInverseBackgroundHighlight: $grayDarker !default;
-
-
-// Forms
-// -------------------------
-$inputBackground: $white !default;
-$inputBorder: #ccc !default;
-$inputBorderRadius: $baseBorderRadius !default;
-$inputDisabledBackground: $grayLighter !default;
-$formActionsBackground: #f5f5f5 !default;
-$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
-
-
-// Dropdowns
-// -------------------------
-$dropdownBackground: $white !default;
-$dropdownBorder: rgba(0,0,0,.2) !default;
-$dropdownDividerTop: #e5e5e5 !default;
-$dropdownDividerBottom: $white !default;
-
-$dropdownLinkColor: $grayDark !default;
-$dropdownLinkColorHover: $white !default;
-$dropdownLinkColorActive: $white !default;
-
-$dropdownLinkBackgroundActive: $linkColor !default;
-$dropdownLinkBackgroundHover: $dropdownLinkBackgroundActive !default;
-
-
-
-// COMPONENT VARIABLES
-// --------------------------------------------------
-
-
-// Z-index master list
-// -------------------------
-// Used for a bird's eye view of components dependent on the z-axis
-// Try to avoid customizing these :)
-$zindexDropdown: 1000 !default;
-$zindexPopover: 1010 !default;
-$zindexTooltip: 1030 !default;
-$zindexFixedNavbar: 1030 !default;
-$zindexModalBackdrop: 1040 !default;
-$zindexModal: 1050 !default;
-
-
-// Sprite icons path
-// -------------------------
-$iconSpritePath: image-path("glyphicons-halflings.png") !default;
-$iconWhiteSpritePath: image-path("glyphicons-halflings-white.png") !default;
-
-
-// Input placeholder text color
-// -------------------------
-$placeholderText: $grayLight !default;
-
-
-// Hr border color
-// -------------------------
-$hrBorder: $grayLighter !default;
-
-
-// Horizontal forms & lists
-// -------------------------
-$horizontalComponentOffset: 180px !default;
-
-
-// Wells
-// -------------------------
-$wellBackground: #f5f5f5 !default;
-
-
-// Navbar
-// -------------------------
-$navbarCollapseWidth: 979px !default;
-$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1;
-
-$navbarHeight: 40px !default;
-$navbarBackgroundHighlight: #ffffff !default;
-$navbarBackground: darken($navbarBackgroundHighlight, 5%) !default;
-$navbarBorder: darken($navbarBackground, 12%) !default;
-
-$navbarText: #777 !default;
-$navbarLinkColor: #777 !default;
-$navbarLinkColorHover: $grayDark !default;
-$navbarLinkColorActive: $gray !default;
-$navbarLinkBackgroundHover: transparent !default;
-$navbarLinkBackgroundActive: darken($navbarBackground, 5%) !default;
-
-$navbarBrandColor: $navbarLinkColor !default;
-
-// Inverted navbar
-$navbarInverseBackground: #111111 !default;
-$navbarInverseBackgroundHighlight: #222222 !default;
-$navbarInverseBorder: #252525 !default;
-
-$navbarInverseText: $grayLight !default;
-$navbarInverseLinkColor: $grayLight !default;
-$navbarInverseLinkColorHover: $white !default;
-$navbarInverseLinkColorActive: $navbarInverseLinkColorHover !default;
-$navbarInverseLinkBackgroundHover: transparent !default;
-$navbarInverseLinkBackgroundActive: $navbarInverseBackground !default;
-
-$navbarInverseSearchBackground: lighten($navbarInverseBackground, 25%) !default;
-$navbarInverseSearchBackgroundFocus: $white !default;
-$navbarInverseSearchBorder: $navbarInverseBackground !default;
-$navbarInverseSearchPlaceholderColor: #ccc !default;
-
-$navbarInverseBrandColor: $navbarInverseLinkColor !default;
-
-
-// Pagination
-// -------------------------
-$paginationBackground: #fff !default;
-$paginationBorder: #ddd !default;
-$paginationActiveBackground: #f5f5f5 !default;
-
-
-// Hero unit
-// -------------------------
-$heroUnitBackground: $grayLighter !default;
-$heroUnitHeadingColor: inherit !default;
-$heroUnitLeadColor: inherit !default;
-
-
-// Form states and alerts
-// -------------------------
-$warningText: #c09853 !default;
-$warningBackground: #fcf8e3 !default;
-$warningBorder: darken(adjust-hue($warningBackground, -10), 3%) !default;
-
-$errorText: #b94a48 !default;
-$errorBackground: #f2dede !default;
-$errorBorder: darken(adjust-hue($errorBackground, -10), 3%) !default;
-
-$successText: #468847 !default;
-$successBackground: #dff0d8 !default;
-$successBorder: darken(adjust-hue($successBackground, -10), 5%) !default;
-
-$infoText: #3a87ad !default;
-$infoBackground: #d9edf7 !default;
-$infoBorder: darken(adjust-hue($infoBackground, -10), 7%) !default;
-
-
-// Tooltips and popovers
-// -------------------------
-$tooltipColor: #fff !default;
-$tooltipBackground: #000 !default;
-$tooltipArrowWidth: 5px !default;
-$tooltipArrowColor: $tooltipBackground !default;
-
-$popoverBackground: #fff !default;
-$popoverArrowWidth: 10px !default;
-$popoverArrowColor: #fff !default;
-$popoverTitleBackground: darken($popoverBackground, 3%) !default;
-
-// Special enhancement for popovers
-$popoverArrowOuterWidth: $popoverArrowWidth + 1 !default;
-$popoverArrowOuterColor: rgba(0,0,0,.25) !default;
-
-
-
-// GRID
-// --------------------------------------------------
-
-
-// Default 940px grid
-// -------------------------
-$gridColumns: 12 !default;
-$gridColumnWidth: 60px !default;
-$gridGutterWidth: 20px !default;
-$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
-
-// 1200px min
-$gridColumnWidth1200: 70px !default;
-$gridGutterWidth1200: 30px !default;
-$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)) !default;
-
-// 768px-979px
-$gridColumnWidth768: 42px !default;
-$gridGutterWidth768: 20px !default;
-$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default;
-
-
-// Fluid grid
-// -------------------------
-$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth) !default;
-$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth) !default;
-
-// 1200px min
-$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200) !default;
-$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200) !default;
-
-// 768px-979px
-$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768) !default;
-$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768) !default;
37 app/assets/stylesheets/sass/grid/_offsets.scss
View
@@ -0,0 +1,37 @@
+
+@mixin offset12 {
+ margin-left: 980px;
+}
+@mixin offset11 {
+ margin-left: 900px;
+}
+@mixin offset10 {
+ margin-left: 820px;
+}
+@mixin offset9 {
+ margin-left: 740px;
+}
+@mixin offset8 {
+ margin-left: 660px;
+}
+@mixin offset7 {
+ margin-left: 580px;
+}
+@mixin offset6 {
+ margin-left: 500px;
+}
+@mixin offset5 {
+ margin-left: 420px;
+}
+@mixin offset4 {
+ margin-left: 340px;
+}
+@mixin offset3 {
+ margin-left: 260px;
+}
+@mixin offset2 {
+ margin-left: 180px;
+}
+@mixin offset1 {
+ margin-left: 100px;
+}
17 app/assets/stylesheets/sass/grid/_row.scss
View
@@ -0,0 +1,17 @@
+
+@mixin row {
+ border: 5px solid red;
+ margin-left: -20px;
+ *zoom: 1;
+
+ &:before,
+ &:after {
+ display: table;
+ content: "";
+ line-height: 0;
+ }
+ &:after {
+ clear: both;
+ }
+
+}
63 app/assets/stylesheets/sass/grid/_spans.scss
View
@@ -0,0 +1,63 @@
+
+.span {
+ float: left;
+ min-height: 1px;
+ margin-left: 20px;
+
+ border: 1px solid blue;
+}
+
+@mixin span12 {
+ @extend .span;
+ width: 940px;
+}
+@mixin span11 {
+ @extend .span;
+ width: 860px;
+}
+@mixin span10 {
+ @extend .span;
+ width: 780px;
+}
+@mixin span9 {
+ @extend .span;
+ width: 700px;
+}
+@mixin span8 {
+ @extend .span;
+ width: 620px;
+}
+@mixin span7 {
+ @extend .span;
+ width: 540px;
+}
+@mixin span6 {
+ @extend .span;
+ width: 460px;
+}
+@mixin span5 {
+ @extend .span;
+ width: 380px;
+}
+@mixin span4 {
+ @extend .span;
+ width: 300px;
+}
+@mixin span3 {
+ @extend .span;
+ width: 220px;
+}
+@mixin span2 {
+ @extend .span;
+ width: 140px;
+}
+@mixin span1 {
+ @extend .span;
+ width: 60px;
+}
+
+
+
+
+
+
19 app/assets/stylesheets/sass/user_posts/_post.scss
View
@@ -0,0 +1,19 @@
+
+
+div.post_container {
+ @include span12;
+
+ background: #e5e5e5;
+
+ div.post_header {
+ background: black;
+ padding: 10px;
+ span {
+ color: #fff;
+ }
+ span:nth-child(2) {
+ float: right;
+ }
+ }
+
+}
12 app/assets/stylesheets/themes/_theme1.css.scss
View
@@ -1,12 +0,0 @@
-
-
-//*************** Import Overrides *****************
-@import "../overrides/variables";
-
-
-
-h3 {
- color: $reddish;
-}
-
-
34 app/views/home/page1.html.erb
View
@@ -9,7 +9,7 @@
</ul>
</div>
-<div class="container">
+<div class="wrapper">
<h3 class="page_title pull-left">Is Hercarim balanced? UP? or OP?</h3>
<div class="btn-group pull-right">
@@ -43,20 +43,18 @@
- <!-- Comments Below -->
+ <!-- Posts Below -->
- <div class="row">
+ <div class="row">
-
-
- <div class="comment_container">
- <div class="comment_header span12">
- <span class="avatar_date_posted">Posted 3 days ago</span>
- <span class="comment_number">#1</span>
+ <div class="post_container">
+ <div class="post_header">
+ <span>Posted 3 days ago</span>
+ <span>#1</span>
</div>
- <div class="comment_avatar span2">
- <div class="avatar_user_name">
+ <div class="comment_avatar">
+ <div class="comment_user_name">
<button class="btn dropdown-toggle" data-toggle="dropdown">Potlik <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
@@ -69,13 +67,13 @@
<a href="#">
<img src="http://placehold.it/100x120">
</a>
- <div class="avatar_user_rank">Melee Minion</div>
- <div class="avatar_posts">Posts: 7</div>
+ <div class="comment_user_rank">Melee Minion</div>
+ <div class="comment_num_posts">Posts: 7</div>
</div>
- <div class="comment_body span9">
- <div class="comment">
- anyone know?
- </div>
+ <div class="comment_body">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis suscipit risus, non mattis lorem lobortis vel. Donec elit lectus, vehicula at euismod quis, ultrices id velit. Nulla porta fermentum massa nec scelerisque. Maecenas sem ligula, viverra id dapibus at, convallis ac leo. Quisque molestie aliquam ante, quis sagittis ipsum vehicula ac. Aenean tempus lectus turpis, a bibendum sem. Sed sit amet orci diam. Nam purus est, elementum ut rhoncus a, ultricies et dui.
+ </p>
</div>
@@ -89,5 +87,5 @@
-</div> <!-- end main container -->
+</div> <!-- end wrapper -->
Please sign in to comment.
Something went wrong with that request. Please try again.