|
|
@@ -1,279 +0,0 @@
|
|
|
-//
|
|
|
-// Site Name:
|
|
|
-// Author:
|
|
|
-//
|
|
|
-// Stylesheet: Mixins & Constants Stylesheet
|
|
|
-//
|
|
|
-// This is where you can take advantage of LESS' great features:
|
|
|
-// Mixins & Constants. I won't go in-depth on how they work exactly,
|
|
|
-// there are a few articles below that will help do that. What I will
|
|
|
-// tell you is that this will help speed up simple changes like
|
|
|
-// changing a color or adding CSS3 techniques like box shadow and
|
|
|
-// border-radius.
|
|
|
-//
|
|
|
-// A WORD OF WARNING: It's very easy to overdo it here. Be careful and
|
|
|
-// remember less is more.
|
|
|
-//
|
|
|
-//
|
|
|
-
|
|
|
-//
|
|
|
-// CLEARFIXIN'
|
|
|
-//
|
|
|
-
|
|
|
-// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
|
|
|
-.clearfix
|
|
|
- &:before,
|
|
|
- &:after
|
|
|
- content: ""
|
|
|
- display: table
|
|
|
-
|
|
|
- &:after
|
|
|
- clear: both
|
|
|
-
|
|
|
- zoom: 1
|
|
|
-
|
|
|
-
|
|
|
-//
|
|
|
-// TOOLS
|
|
|
-//
|
|
|
-
|
|
|
-// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
|
|
|
-.image-replacement
|
|
|
- text-indent: 100%
|
|
|
- white-space: nowrap
|
|
|
- overflow: hidden
|
|
|
-
|
|
|
-
|
|
|
-//
|
|
|
-// COLORS
|
|
|
-// Need help w/ choosing your colors? Try this site out:
|
|
|
-// http://0to255.com/
|
|
|
-//
|
|
|
-
|
|
|
-$yellow: #ebe16f
|
|
|
-$red: #fbe3e4
|
|
|
-$green: #e6efc2
|
|
|
-$blue: #d5edf8
|
|
|
-
|
|
|
-$black: #000
|
|
|
-$grayDark: lighten($black, 25%)
|
|
|
-$gray: lighten($black, 50%)
|
|
|
-$grayLight: lighten($black, 75%)
|
|
|
-$grayLighter: lighten($black, 90%)
|
|
|
-$white: #fff
|
|
|
-
|
|
|
-// this is pulled from Bootstrap
|
|
|
-$baseColor: $black // Set a base color
|
|
|
-$complement: spin($baseColor, 180) // Determine a complementary color
|
|
|
-$split1: spin($baseColor, 158) // Split complements
|
|
|
-$split2: spin($baseColor, -158)
|
|
|
-$triad1: spin($baseColor, 135) // Triads colors
|
|
|
-$triad2: spin($baseColor, -135)
|
|
|
-$tetra1: spin($baseColor, 90) // Tetra colors
|
|
|
-$tetra2: spin($baseColor, -90)
|
|
|
-$analog1: spin($baseColor, 22) // Analogs colors
|
|
|
-$analog2: spin($baseColor, -22)
|
|
|
-
|
|
|
-//
|
|
|
-// TYPOGRAPHY
|
|
|
-//
|
|
|
-
|
|
|
-$sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif
|
|
|
-$serif: "Georgia", Cambria, Times New Roman, Times, serif
|
|
|
-
|
|
|
-
|
|
|
-// To embed your own fonts, use this syntax
|
|
|
-// and place your fonts inside the
|
|
|
-// library/fonts folder. For more information
|
|
|
-// on embedding fonts, go to:
|
|
|
-// http://www.fontsquirrel.com/
|
|
|
-// Be sure to remove the comment brackets.
|
|
|
-//
|
|
|
-
|
|
|
-// @font-face
|
|
|
-// font-family: 'Font Name'
|
|
|
-// src: url('../fonts/font-name.eot')
|
|
|
-// src: url('../fonts/font-name.eot?#iefix') format('embedded-opentype'),
|
|
|
-// url('../fonts/font-name.woff') format('woff'),
|
|
|
-// url('../fonts/font-name.ttf') format('truetype'),
|
|
|
-// url('../fonts/font-name.svg#font-name') format('svg')
|
|
|
-// font-weight: normal
|
|
|
-// font-style: normal
|
|
|
-//
|
|
|
-//
|
|
|
-
|
|
|
-//
|
|
|
-// use the best ampersand
|
|
|
-// http://simplebits.com/notebook/2008/08/14/ampersands-2/
|
|
|
-
|
|
|
-span.amp
|
|
|
- font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif
|
|
|
- font-style: italic
|
|
|
-
|
|
|
-// text alignment
|
|
|
-.text-left
|
|
|
- text-align: left
|
|
|
-.text-center
|
|
|
- text-align: center
|
|
|
-.text-right
|
|
|
- text-align: right
|
|
|
-
|
|
|
-// alerts & notices
|
|
|
-.help, .info, .error, .success
|
|
|
- margin: 10px
|
|
|
- padding: 5px 18px
|
|
|
- border: 1px solid
|
|
|
-
|
|
|
-.help
|
|
|
- border-color: darken($yellow, 5%)
|
|
|
- background: $yellow
|
|
|
-
|
|
|
-.info
|
|
|
- border-color: darken($blue, 5%)
|
|
|
- background: $blue
|
|
|
-
|
|
|
-.error
|
|
|
- border-color: darken($red, 5%)
|
|
|
- background: $red
|
|
|
-
|
|
|
-.success
|
|
|
- border-color: darken($green, 5%)
|
|
|
- background: $green
|
|
|
-
|
|
|
-
|
|
|
-//
|
|
|
-// BORDER RADIUS
|
|
|
-//
|
|
|
-
|
|
|
-// @include borderRadius(4px);
|
|
|
-@mixin borderRadius($radius: 4px)
|
|
|
- -webkit-border-radius: $radius
|
|
|
- -moz-border-radius: $radius
|
|
|
- -ms-border-radius: $radius
|
|
|
- -o-border-radius: $radius
|
|
|
- border-radius: $radius
|
|
|
-
|
|
|
-// @include borderTopRadius(4px);
|
|
|
-@mixin borderTopRadius($radius: 4px)
|
|
|
- -webkit-border-top-right-radius: $radius
|
|
|
- -webkit-border-top-left-radius: $radius
|
|
|
- -moz-border-radius-topright: $radius
|
|
|
- -moz-border-radius-topleft: $radius
|
|
|
- border-top-right-radius: $radius
|
|
|
- border-top-left-radius: $radius
|
|
|
-
|
|
|
-// @include borderRightRadius(4px);
|
|
|
-@mixin borderRightRadius($radius: 4px)
|
|
|
- -webkit-border-top-right-radius: $radius
|
|
|
- -webkit-border-bottom-right-radius: $radius
|
|
|
- -moz-border-radius-topright: $radius
|
|
|
- -moz-border-radius-bottomright: $radius
|
|
|
- border-top-right-radius: $radius
|
|
|
- border-bottom-right-radius: $radius
|
|
|
-
|
|
|
-// @include borderBottomRadius(4px);
|
|
|
-@mixin borderBottomRadius($radius: 4px)
|
|
|
- -webkit-border-bottom-right-radius: $radius
|
|
|
- -webkit-border-bottom-left-radius: $radius
|
|
|
- -moz-border-radius-bottomright: $radius
|
|
|
- -moz-border-radius-bottomleft: $radius
|
|
|
- border-bottom-right-radius: $radius
|
|
|
- border-bottom-left-radius: $radius
|
|
|
-
|
|
|
-// @include borderLeftRadius(4px);
|
|
|
-@mixin borderLeftRadius($radius: 4px)
|
|
|
- -webkit-border-top-left-radius: $radius
|
|
|
- -webkit-border-bottom-left-radius: $radius
|
|
|
- -moz-border-radius-topleft: $radius
|
|
|
- -moz-border-radius-bottomleft: $radius
|
|
|
- border-top-left-radius: $radius
|
|
|
- border-bottom-left-radius: $radius
|
|
|
-
|
|
|
-//
|
|
|
-// BOX SHADOWS
|
|
|
-//
|
|
|
-
|
|
|
-// @include box-shadow(5px, 5px, 10px, #000);
|
|
|
-@mixin box-shadow ($shadow-1, $shadow-2: false, $shadow-3: false, $shadow-4: false, $shadow-5: false, $shadow-6: false, $shadow-7: false, $shadow-8: false, $shadow-9: false)
|
|
|
- $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9)
|
|
|
- -webkit-box-shadow: $full
|
|
|
- -moz-box-shadow: $full
|
|
|
- -ms-box-shadow: $full
|
|
|
- -o-box-shadow: $full
|
|
|
- box-shadow: $full
|
|
|
-
|
|
|
-
|
|
|
-//
|
|
|
-// CSS3 GRADIENTS
|
|
|
-// Be careful with these since they can
|
|
|
-// really slow down your CSS. Don't overdue it.
|
|
|
-//
|
|
|
-
|
|
|
-// @include css-gradient(#dfdfdf,#f8f8f8);
|
|
|
-@mixin css-gradient($from: #dfdfdf, $to: #f8f8f8)
|
|
|
- background-color: $to
|
|
|
- background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to))
|
|
|
- background-image: -webkit-linear-gradient(top, $from, $to)
|
|
|
- background-image: -moz-linear-gradient(top, $from, $to)
|
|
|
- background-image: -o-linear-gradient(top, $from, $to)
|
|
|
- background-image: -ms-linear-gradient(top, $from, $to)
|
|
|
- background-image: linear-gradient(top, $from, $to)
|
|
|
-
|
|
|
-
|
|
|
-//
|
|
|
-// BOX SIZING
|
|
|
-//
|
|
|
-
|
|
|
-// @include boxSizing(border-box);
|
|
|
-@mixin boxSizing($type: border-box)
|
|
|
- -webkit-box-sizing: $type
|
|
|
- -moz-box-sizing: $type
|
|
|
- -ms-box-sizing: $type
|
|
|
- -o-box-sizing: $type
|
|
|
- box-sizing: $type
|
|
|
-
|
|
|
-
|
|
|
-//
|
|
|
-// BOX SHADOW
|
|
|
-//
|
|
|
-
|
|
|
-// @include boxShadow(0 0 4px #444);
|
|
|
-@mixin boxShadow($x: 0, $y: 0, $radius: 4px, $spread: 0, $color: rgba(0,0,0,0.5))
|
|
|
- -webkit-box-shadow: $x $y $radius $spread $color
|
|
|
- -moz-box-shadow: $x $y $radius $spread $color
|
|
|
- -ms-box-shadow: $x $y $radius $spread $color
|
|
|
- -o-box-shadow: $x $y $radius $spread $color
|
|
|
- box-shadow: $x $y $radius $spread $color
|
|
|
-
|
|
|
-
|
|
|
-//
|
|
|
-// BUTTONS
|
|
|
-//
|
|
|
-
|
|
|
-.button, .button:visited
|
|
|
- border: 1px solid darken($blue, 13%)
|
|
|
- border-top-color: darken($blue, 7%)
|
|
|
- border-left-color: darken($blue, 7%)
|
|
|
- padding: 4px 12px
|
|
|
- color: $white
|
|
|
- display: inline-block
|
|
|
- font-size: 11px
|
|
|
- font-weight: bold
|
|
|
- text-decoration: none
|
|
|
- text-shadow: 0 1px rgba(0,0,0, .75)
|
|
|
- cursor: pointer
|
|
|
- margin-bottom: 20px
|
|
|
- line-height: 21px
|
|
|
- @include borderRadius(4px)
|
|
|
- @include css-gradient($blue,darken($blue, 5%))
|
|
|
-
|
|
|
- &:hover, &:focus
|
|
|
- color: $white
|
|
|
- border: 1px solid darken($blue, 13%)
|
|
|
- border-top-color: darken($blue, 20%)
|
|
|
- border-left-color: darken($blue, 20%)
|
|
|
- @include css-gradient(darken($blue, 5%),darken($blue, 10%))
|
|
|
-
|
|
|
- &:active
|
|
|
- @include css-gradient(darken($blue, 5%),$blue)
|
|
|
-
|