diff --git a/app.rb b/app.rb index a34f04a6..75641e5b 100644 --- a/app.rb +++ b/app.rb @@ -31,7 +31,7 @@ end get '/?' do dashboard_if_signed_in - slim :index + erb :index end get '/browse' do @@ -58,7 +58,7 @@ end get '/new' do dashboard_if_signed_in - @site = Site.new + @site = Site.new username: params[:username] slim :'new' end diff --git a/public/assets/css/.gitignore b/public/assets/css/.gitignore new file mode 100644 index 00000000..af3f6036 --- /dev/null +++ b/public/assets/css/.gitignore @@ -0,0 +1 @@ +# This file is here simplt to force git to allow the folder within the zip \ No newline at end of file diff --git a/public/assets/css/_base-sass/_base-Form.scss b/public/assets/css/_base-sass/_base-Form.scss new file mode 100644 index 00000000..6cc7e1cf --- /dev/null +++ b/public/assets/css/_base-sass/_base-Form.scss @@ -0,0 +1,29 @@ +// ---------------------------------------------------------------- +// Form Elements Standardization +// ---------------------------------------------------------------- +// Consistent Margins +form{@extend %margin-bottom;} + +// Corrects font-family and size not being inherited in all browsers, inconsistent margins, line-heights and transforms +button, input, select, textarea{border:0; font:{family:inherit; size:100%}; line-height:normal; margin:0; text-transform:none} + +// Makes buttons look like buttons with appropriate cursors +button, html input[type='button'], input[type='reset'], input[type='submit']{cursor:pointer; -webkit-appearance:button} + +// Makes it look like a normal text input, only with a (x) when text has been entered +input[type='search']{-webkit-appearance:textfield} + +// Disabled input styling +input[disabled]{background:$c-Light; cursor:not-allowed} + +// Read Only input styling +input[readonly]{background:$c-Disabled} + +// Removes extra inner padding for webkit +input[type='search']::-webkit-search-decoration{-webkit-appearance:none} + +// Removes inner padding & border in Firefox 4+ +buton::-moz-focus-inner, input::-moz-focus-inner{border:0; padding:0} + +// Makes sure that overflow shows and text is aligned to top of area +textarea{overflow:auto; vertical-align:top} diff --git a/public/assets/css/_base-sass/_base-HTML5.scss b/public/assets/css/_base-sass/_base-HTML5.scss new file mode 100644 index 00000000..c29697e9 --- /dev/null +++ b/public/assets/css/_base-sass/_base-HTML5.scss @@ -0,0 +1,10 @@ +// ---------------------------------------------------------------- +// HTML5 Elements that need some additional loving +// ---------------------------------------------------------------- + +// Give HTML5 elements block display, which is not defined in ie8/9 +article, aside, details, figure, figcaption, footer, +header, main, nav, section, summary{display:block} + +// Makes hidden actually [hidden] in IE 8/9 +[hidden]{display:none} diff --git a/public/assets/css/_base-sass/_base-Media.scss b/public/assets/css/_base-sass/_base-Media.scss new file mode 100644 index 00000000..2880ccc1 --- /dev/null +++ b/public/assets/css/_base-sass/_base-Media.scss @@ -0,0 +1,18 @@ +// ---------------------------------------------------------------- +// Basic Styling: Media Elements +// ---------------------------------------------------------------- + +// If an image doesn't load, make the alt text noticable +img{color:$c-Required; font-style:italic} + +// Make sure these guys don't extend beyond their parent containers +audio, img, object, embed, video{max-width:100%} + +// Give HTML5 elements inline-block display, which is also not defined in ie8/9 +audio, canvas, video{display:inline-block} + +// Prevents browsers from displaying 'audio' w/out controls and fixes height for iOS 5 +audio:not([controls]){display:none; height:0} + +// Corrects overflow issue in IE9 +svg:not(:root){overflow:hidden} diff --git a/public/assets/css/_base-sass/_basic.scss b/public/assets/css/_base-sass/_basic.scss new file mode 100644 index 00000000..2a542c0a --- /dev/null +++ b/public/assets/css/_base-sass/_basic.scss @@ -0,0 +1,24 @@ +// ---------------------------------------------------------------- +// Basic Style Normalizing/Resetting +// ---------------------------------------------------------------- + +// Make a smarter Box Model +*, *:before, *:after{@include box-sizing(border-box)} + +// Just to make sure the HTML doesn't act like a bitch +html{overflow-y:scroll; min-height:100%} + +// Default body text styling +body{font-size:100%; line-height:1.5} + +// Reset the Standard Tags +body, blockquote, h1, h2, h3, h4, h5, h6, p, pre, form, fieldset, img, +legend, table, th, td, caption, hr{border:0; margin:0; outline:0; padding:0} + +// Easy re-styling for
tags +hr{border-top:1px solid #ddd; display:block; height:1px; margin:$spacing*6 0} + +@import 'base-HTML5'; // Styling for HTML5 sepecific elements/selectors +@import 'base-Media'; // Styling for base media elements +@import 'typography'; // Styling for base typographical elements +@import 'base-Form'; // Styling for base form elements diff --git a/public/assets/css/_base-sass/_forms.scss b/public/assets/css/_base-sass/_forms.scss new file mode 100644 index 00000000..8ef250f0 --- /dev/null +++ b/public/assets/css/_base-sass/_forms.scss @@ -0,0 +1,99 @@ +// ---------------------------------------------------------------- +// Styling for form elements +// ---------------------------------------------------------------- + +.form-Container{} +.grouping{padding:$spacing 0} + +// Legend Styling +.fs-Legend{ + border:1px solid $c-Border; + margin-bottom:$spacing*2; + padding:$spacing*2 $spacing*3; +} +legend, .legend{ + font-size:$eps; + margin-left:-$spacing; + padding:0 $spacing; +} + +/* Text Input Areas & Labels */ +.text-Label{font-family:$arial; cursor:pointer; display:block; margin-bottom:$spacing} +.dis-Label{cursor:not-allowed} + +.input-Area, %input-Area{ + background:#fff; border:1px solid $c-Border; font-family:$arial; line-height:1.25; + margin-bottom:$spacing*2; padding:$spacing*2 $spacing; width:50%; + &:focus{background:$c-Lighter; border:1px solid #50B6D5; @include box-shadow($bs-2)} +} + +.text-Area{ + @extend %input-Area; + display:block; min-height:150px; resize:vertical; width:100% +} + +/* Check/Radio Inputs & Labels */ +.option-Container{ + @extend .text-Label; + // background:url() no-repeat left center; + // ------ instead of reusing btns for inputs, can put img sprites here instead + position:relative; + &:hover{ + .btn-Radio, + .btn-Check{border-color:#333} + } +} +.option-Label{cursor:pointer; display:block; padding-left:$spacing*7; position:relative; z-index:2} + +.input-Hide{@include invisible;} + +.btn-Radio, .btn-Check{ + @extend %btn; + background:$c-Btn-RC; border:1px solid #ccc; font:{size:14px; weight:bold}; height:19px; left:0; padding:2px; position:absolute; top:0; width:19px; + &:hover{background:$c-Btn-1} +} +.btn-Radio{@include border-radius($radius*5)} + +.input-Radio.selected-Radio .btn-Radio{@extend .btn-Radio:hover; border-color:#333} +.input-Check.selected-Check .btn-Check{@extend .btn-Check:hover; border-color:#333} + +.ifChecked{visibility:hidden} +.selected-Check .ifChecked{visibility:visible} + +/* Drop Down Selection Inputs */ +.select-Container{ + @extend %input-Area; + background:url(../img/drop-Arrow.png) no-repeat 99% center #fff; display:inline-block; overflow:hidden; +} +.input-Select{background:none; border:0; font-size:$base; padding-right:$spacing*4; width:120%; -webkit-appearance:textarea} + +// File Input Styling +.file-Input-Area{ + position:relative; + label{cursor:default} +} +.input-File{ + cursor:pointer; + left:0; + height:100%; + opacity:0; + position:absolute; + top:0; + width:100%; + z-index:9; +} +.input-File-Text{ + cursor:pointer; + display:inline-block; +} + +/* Inputs not supported in all browsers */ +.input-Color{ // reusing a lot of input-Area here, but not @extending it because the rules of input-Area 'break' how this should look in chrome/opera + border:1px solid $c-Border; font-family:$arial; margin-bottom:$spacing*2; padding:0 $spacing; height:45px; width:50%; + &:focus{background:$c-Lighter; border:1px solid #50B6D5; @include box-shadow($bs-2)} +} + +.input-Number{ + @extend %input-Area; + font-size:$base; +} diff --git a/public/assets/css/_base-sass/_navs.scss b/public/assets/css/_base-sass/_navs.scss new file mode 100644 index 00000000..bc93acb8 --- /dev/null +++ b/public/assets/css/_base-sass/_navs.scss @@ -0,0 +1,26 @@ +// ---------------------------------------------------------------- +// Basic Setups for Navigation Elements +// ---------------------------------------------------------------- + +nav{ + ul, + ol{ + @extend .clearfix; + list-style:none; + margin:0; + padding:0; + } + + li{margin:0} + + a{ + display:inline-block; + padding:$spacing $spacing*2; + text-decoration:underline; + + &:hover{ + text-decoration:none; + } + + } +} diff --git a/public/assets/css/_base-sass/_tables.scss b/public/assets/css/_base-sass/_tables.scss new file mode 100644 index 00000000..bc9a694a --- /dev/null +++ b/public/assets/css/_base-sass/_tables.scss @@ -0,0 +1,51 @@ +// ---------------------------------------------------------------- +// Tables +// ---------------------------------------------------------------- + +$table-Border: 1px solid #ccc; // sets consistent boarder styling for table elements + +// Removes most of the table spacing issues +table{ + @extend %margin-bottom; + border-collapse:collapse; + border-spacing:0; +} + +.table-Base{ + background:#fafafa; + font-size:$base; + width:100%; // make tables always take up the entire width of their containing parent. + + th, + td{ + padding:$spacing; + text-align:left; + } +} + +.table-Header{ + background:#eee; +} + +.table-Body{ + // style? +} + +.table-Footer{ + background:#e3e3e3; +} + +.table-Border{ + @extend .table-Base; + border-bottom:$table-Border; + border-right:$table-Border; + + tr{border-top:$table-Border} + th, td{border-left:$table-Border} +} + +.table-Stripe{ + @extend .table-Base; + + tr:nth-child(2n){background:$c-Light} +} diff --git a/public/assets/css/_base-sass/_type-Code.scss b/public/assets/css/_base-sass/_type-Code.scss new file mode 100644 index 00000000..70e41151 --- /dev/null +++ b/public/assets/css/_base-sass/_type-Code.scss @@ -0,0 +1,41 @@ +// ---------------------------------------------------------------- +// Basic Styling: Code Elements +// ---------------------------------------------------------------- + +code, kbd, pre, samp{ + @extend %margin-bottom; + background:#16414c; + border-left:6px solid #acd473; + color:#a9b9b9; + display:block; + font-family:monospace, serif; + font-size:$base; + padding:$spacing*3 $spacing*2 $spacing*3 $spacing*5; +} + +pre{ + overflow:auto; + white-space:pre-wrap; + + mark{ // test out styling for this + background:#eee; + border-bottom:1px solid #ddd; + color:#333; + } +} + +p, li, pre{ + code, kbd, pre, samp{ + display:inline-block; + margin:0; + padding:$spacing; + } +} + +.code-Value{ + color:#24b9af; +} + +.code-Tag{ + color:#8ab04c; +} diff --git a/public/assets/css/_base-sass/_type-Lists.scss b/public/assets/css/_base-sass/_type-Lists.scss new file mode 100644 index 00000000..00348484 --- /dev/null +++ b/public/assets/css/_base-sass/_type-Lists.scss @@ -0,0 +1,20 @@ +// ---------------------------------------------------------------- +// Basic Styling: List Elements +// ---------------------------------------------------------------- + +// Ordered/Unordered lists +ol, ul{ + margin:0 0 $spacing*2; + padding:0 0 0 $spacing*6; + + > li:last-child{margin-bottom:0} // Kill double bottom margin + li ol, li ul{margin-top:$spacing*2} // keep equal spacing li content followed by lists within lists + li li{font-size:1em} // Keeps same font-size as parent
  • +} + +// Definition Lists +dt{@extend %margin-bottom;} +dd{ + margin:0 0 $spacing*2; + padding-left:$spacing*4 +} \ No newline at end of file diff --git a/public/assets/css/_base-sass/_typography.scss b/public/assets/css/_base-sass/_typography.scss new file mode 100644 index 00000000..ea539fa9 --- /dev/null +++ b/public/assets/css/_base-sass/_typography.scss @@ -0,0 +1,59 @@ +// ---------------------------------------------------------------- +// Basic Styling: Typography Elements +// ---------------------------------------------------------------- + +// Consistent margin-bottom for block text elements +blockquote, h1, h2, h3, h4, h5, h6, li, p, small{@extend %margin-bottom;} + +// Give small some weight when used outside of

    or

  • , +// but make it an inline element again inside of these elements +small{display:block} +p, li{ + small{ + display:inline; + margin:0; + } +} + +// Bold these things. Bold 'em good. +b, strong{font-weight:bold} + +// Italicize these things. Italicize them gooder. +i, em, dfn{font-style:italic} + +// Blockquote base styling +blockquote{ + font:{size:$zeta; style:italic}; + &:before, + &:after{ + font:{size:$eps; weight:400}; + line-height:1; + position:relative; + top:2px; + } + &:before{ + content:'"'; + left:-1px; + } + &:after{ + content:'"'; + right:-1px; + } +} + +// sets consistent quotes across browsers +q{quotes:"\201C" "\201D" "\2018" "\2019"} + +// An underline & help cursor in all browsers when a title tag is present +abbr[title], dfn[title]{border-bottom:1px dotted $c-Underline; cursor:help} + +// IE 8/9 doesn't do this by default. shame. shame IE. shame... +mark{background:$c-Highlight; color:$c-Darker} + +// Prevents sub & sup from affecting the line-height +sub, sup{font-size:75%; line-height:0; position:relative; vertical-align:baseline} + sub{bottom:-.25em} + sup{top:-.5em} + +@import 'type-Code'; // Code styling +@import 'type-Lists'; // Lists styling diff --git a/public/assets/css/_helper-sass/_buttons.scss b/public/assets/css/_helper-sass/_buttons.scss new file mode 100644 index 00000000..ac7b29d6 --- /dev/null +++ b/public/assets/css/_helper-sass/_buttons.scss @@ -0,0 +1,112 @@ +// ---------------------------------------------------------------- +// Basic Styling for Buttons +// ---------------------------------------------------------------- +.btn, %btn{ + background:$c-Dark; + @include border-radius($radius*6); + @include box-shadow($bs-1); + color:$c-Lighter; + cursor:pointer; + display:inline-block; + font:{family:$arial; size:$base} + line-height:1; + padding:$spacing*2 $spacing*5; + text-align:center; + text-decoration:none!important; // set to !important so that if used inside of a .nav, no decoration doesn't get overridden + text-shadow:0 1px 1px rgba(0,0,0,.4); + @include vendor(transition, all .25s ease-in-out 0s); + vertical-align:middle; + -webkit-appearance:none; + + &.btn-Pad{ + padding:$spacing*2 $spacing*4 + } + + &:hover, &:active{ + background:$c-Darker; + color:$c-Lighter + } + + &:visited{color:$c-Lighter;} +} + + +// ---------------------------------------------------------------- +// Sizing +// ---------------------------------------------------------------- +.btn-Small{ + @extend %btn; + font-size:$tiny; + padding:$spacing $spacing*2; + + &.btn-Pad{ + padding:$spacing $spacing*3 + } + +} +.btn-Large{ + @extend %btn; + font-size:$gamma; + padding:$spacing*3; + + &.btn-Pad{ + padding:$spacing*3 $spacing*5 + } + +} +.btn-XLarge{ + @extend %btn; + font-size:$beta; + padding:$spacing*3 $spacing*4; + + &.btn-Pad{ + padding:$spacing*4 $spacing*6 + } + +} + +.btn-Wide{@extend %btn; display:block} + + +// ---------------------------------------------------------------- +// Coloring +// ---------------------------------------------------------------- +.btn-Action{@extend %btn; + // background:$c-Btn-1; + @include linear-gradient(top, #e93250, #b11f36); + + &:hover{ + @include linear-gradient(top, #d51c3a, #841526); + } +} + +.btn-Action-2{@extend %btn; background:$c-Btn-2; + &:hover{background:darken($c-Btn-2, 15%)} +} + +.btn-Action-3{@extend %btn; background:$c-Btn-3; + &:hover{background:darken($c-Btn-3, 15%)} +} + +.btn-Neg, +.btn-Neg:hover{ + @extend %btn; + background:$c-Btn-Neg; + color:$c-Lighter; +} + +.btn-Disable{ + @extend %btn; + background:$c-Disabled; + border:1px solid #eee; + color:$c-Dark; + cursor:default; + &:hover, &:visited{@extend .btn-Disable} +} + + +// ---------------------------------------------------------------- +// Additional Styling +// ---------------------------------------------------------------- +.btn-Square{@extend %btn; @include border-radius(0)} +.btn-Round{@extend %btn; @include border-radius($radius*4)} diff --git a/public/assets/css/_helper-sass/_helper.scss b/public/assets/css/_helper-sass/_helper.scss new file mode 100644 index 00000000..011e797a --- /dev/null +++ b/public/assets/css/_helper-sass/_helper.scss @@ -0,0 +1,116 @@ +// ---------------------------------------------------------------- +// Floats & Clearing +// ---------------------------------------------------------------- +.float-Left {float:left} +.float-Right {float:right} +.float-None {float:none} +.clear {clear:both} +.clearfix {@include clearfix} +.overflow {overflow:hidden} + + +// Consistent Margin Bottom +%margin-bottom{margin-bottom:$spacing*3} + +// ---------------------------------------------------------------- +// Showing & Hiding +// ---------------------------------------------------------------- +.d-Block, .show{display:block} +.d-None, .mobile-Show{display:none} + // change display value for .mobile-Show in the appropriate @media break-point + +// Hides from screenreaders and browsers +.hidden{display:none!important; visibility:hidden} + +// Hide from browsers but not from screen readers +.invis, %invis{@include invisible} + +// ---------------------------------------------------------------- +// Reoccuring HTML Elements +// ---------------------------------------------------------------- +// Profile Picture +.pic, %pic{ + border:1px solid $c-White; + @include border-radius(4px); + @include box-shadow($bs-4); + display:inline-block; + overflow:hidden; + width:90px; + + img{display:block} +} + +// Make picture into a circle +.pic-Rounded{ + @extend %pic; + @include border-radius(100px); +} +/* + Code Example + -------------------------- + + + +*/ + +// Media Item +.media, %media{ + margin-bottom:$spacing*4; + @extend .clearfix; + position:relative; + z-index:2; + .media-Text >:last-child{margin-bottom:0} + .media-Object{float:left; margin:0 $spacing*4 $spacing*2 0; max-width:30%;} +} + +// Have media element appear on the right hand side +.media-Reverse, %media-Reverse{ + @extend %media; + .media-Object{float:right; margin:0 0 $spacing*2 $spacing*4; max-width:30%} +} + +.media-No-Wrap{ + @extend %media; + padding-left:100px; + .media-Text{float:left; width:100%} + .media-Object{margin-left:-100px; margin-right:0} +} + +.media-No-Wrap-Reverse{ + @extend %media-Reverse; + padding-right:100px; + .media-Object{margin-right:-100px; margin-left:0} +} +/* + Code Example + -------------------------- +
    +
    + +
    +
    +

    Title for Meida Element

    +

    Paragraph text to go along with media element.

    +
    +
    + + -- Divs were used in this example, but the media element could be applied to various situations. + Ie. could be used for a header or footer area where a logo is placed on the right or left w/text to the side. +*/ + + +// Call out boxes +.emph-Block{ + background:#fafafa; + border:1px solid #ddd; + @include border-radius(4px); + @include box-shadow($bs-4); + margin-bottom:$spacing*4; + min-height:50px; + padding:$spacing*4; + + & > :last-child{margin-bottom:0} +} + + + diff --git a/public/assets/css/_helper-sass/_layout.scss b/public/assets/css/_helper-sass/_layout.scss new file mode 100644 index 00000000..6607f961 --- /dev/null +++ b/public/assets/css/_helper-sass/_layout.scss @@ -0,0 +1,67 @@ +// ---------------------------------------------------------------- +// Layout - Responsive & Static Grid Elements +// ---------------------------------------------------------------- + +// A container for each row of our layout. +// Simply styled with only a base margin-bottom and extending the clearfix class, +// a row can also have helper classes added onto it for other general styling purposes +.row{ + margin-left:-$spacing*5; + margin-bottom:$spacing*5; + @extend .clearfix; +} + +// The grid columns within a row. +// Do not apply styling to this class as its purpose is for layout only. +.col{ + float:left; + margin-bottom:0!important; + // row has a margin-bottom applied to it already, + // to absolutely make sure there is no extra margin, 0!important is used + padding-left:$spacing*5; + position:relative; + width:100%; // default width is 100%. +} + +// Convert columns to inline-blocks so we can center them when our row does not add up to 100% +.c-Row{ + @extend .row; + font-size:0; // ** + text-align:center; + .col{ + display:inline-block; + float:none; + font-size:16px; // resets the font back to the default base to fix the font-size:0 needed for centering + text-align:left; + } + // ** This kills the extra white-space created by the inline-blocks. + // Make sure interior elements have a font-size reaplied to them to make text visible. + // (as long as they're using semantic tags or the font-size class names, + // then this should not be a problem). +} + +// Base responsive grid column classes. +// Do not apply styling to these as their purpose is for width only. +.col-90 {width:90%} +.col-80 {width:80%} +.col-75 {width:75%} +.col-66 {width:66.6666%} +.col-60 {width:60%} +.col-50 {width:50%} +.col-40 {width:40%} +.col-33 {width:33.3333%} +.col-25 {width:25%} +.col-20 {width:20%} +.col-10 {width:10%} + +.rfl{@include row-fixed-Left(300px)} +.rfr{@include row-fixed-Right(300px)} + // make sure to use .f-Col for the fixed column in the row + +// The block class can be modified or deleted and replaced with other classes (like .media or .callout) +// The main purpose of a class like this is to apply to an inner HTML element of the column structure +// so we can apply styling to the columns. +.block{ + background:#ccc; color:#333; padding:$spacing; + & > :last-child{margin-bottom:0} +} diff --git a/public/assets/css/_helper-sass/_mixins.scss b/public/assets/css/_helper-sass/_mixins.scss new file mode 100644 index 00000000..85648fd0 --- /dev/null +++ b/public/assets/css/_helper-sass/_mixins.scss @@ -0,0 +1,138 @@ +// ---------------------------------------------------------------- +// Vendor Prefix Mixins +// ---------------------------------------------------------------- +// All Vendor Prefixes +@mixin vendor($property, $value...){ + -moz-#{$property}:$value; + -ms-#{$property}:$value; + -o-#{$property}:$value; + -webkit-#{$property}:$value; + #{$property}:$value; +} + +// Just webkit & moz Prefixes +@mixin base-vendor($property, $value...){ + -moz-#{$property}:$value; + -webkit-#{$property}:$value; + #{$property}:$value; +} + + +// ---------------------------------------------------------------- +// Useful CSS3 Mixins +// ---------------------------------------------------------------- +// Box Sizing +@mixin box-sizing($box-value){ + @include base-vendor(box-sizing, $box-value); +} + +// Border Radius +@mixin border-radius($br-value){ + @include base-vendor(border-radius, $br-value); + background-clip:padding-box; +} + +// Box Shadow --- See _var.scss to edit & create box-shadow rules +@mixin box-shadow($bs-value){ + @include base-vendor(box-shadow, $bs-value) +} + +// Linear Gradient +@mixin linear-gradient($grad-Line, $grad-Colors...) { + background: -webkit-linear-gradient($grad-Line, $grad-Colors); + background: -moz-linear-gradient($grad-Line, $grad-Colors); + background: -o-linear-gradient($grad-Line, $grad-Colors); + background: linear-gradient($grad-Line, $grad-Colors); +} + // grad-Line - use either ###deg or top, left, bottom, right + // example: + // @include linear-gradient(80deg, #fcc, #f23); + // @include linear-gradient(top, #fcc, #f23); + +// Radial Gradient +@mixin radial-gradient($radial...) { + background: -webkit-radial-gradient($radial); + background: -moz-radial-gradient($radial); + background: -o-radial-gradient($radial); + background: radial-gradient($radial); +} + + +// ---------------------------------------------------------------- +// Hidden Elements Mixins +// ---------------------------------------------------------------- +// Hide text that you don't want visible +// like on submit buttons that use an icon instead of text +@mixin hide-text{ + color:transparent; + font:0/0 a; + text-shadow:none; +} + +// Hide entire elements that you don't want visible +// but still need for accesibility / functionality +// -- ie. radio buttons for custom styled radio inputs +@mixin invisible{ + border:0!important; height:1px!important; left:-999999px!important; overflow:hidden!important; position:absolute!important; width:1px!important; +} + +// Truncate Text +@mixin truncate($truncation-boundary){ + max-width:$truncation-boundary; + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; +} + // Example -- @include truncate(100%); + + +// ---------------------------------------------------------------- +// Clearfix +// ---------------------------------------------------------------- +@mixin clearfix{ + *zoom:1; + &:before, &:after{content:""; display:table} + &:after{clear:both} +} + + +// ---------------------------------------------------------------- +// Hi-Res Retina Images +// https://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss +// ---------------------------------------------------------------- +@mixin image-2x($image, $width, $height){ + @media (min--moz-device-pixel-ratio: 1.3), + (-o-min-device-pixel-ratio: 2.6/2), + (-webkit-min-device-pixel-ratio: 1.3), + (min-device-pixel-ratio: 1.3), + (min-resolution: 1.3dppx){ + // on retina, use image that's scaled by 2 + background-image:url($image); + background-size:$width $height; + } +} + + +// ---------------------------------------------------------------- +// Responsive Row w/fixed width column -- use in combo with .row +// ---------------------------------------------------------------- +@mixin row-fixed-Left($col-Size){ + padding-left:$col-Size; + + .f-Col{ + float:left; + margin-left:-$col-Size + 20px; + width:$col-Size - 20px; + } +} + +@mixin row-fixed-Right($col-Size){ + padding-right:$col-Size; + + .f-Col{ + float:right; + margin-right:-$col-Size; + width:$col-Size - 20px; + } +} + diff --git a/public/assets/css/_helper-sass/_navs.scss b/public/assets/css/_helper-sass/_navs.scss new file mode 100644 index 00000000..52af85ea --- /dev/null +++ b/public/assets/css/_helper-sass/_navs.scss @@ -0,0 +1,125 @@ +// ---------------------------------------------------------------- +// Basic Setups for Navigation Elements +// ---------------------------------------------------------------- + +// The main navigation class to be placed on the