diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..7d0995e --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +js/libs/*.min.js +js/plugins.js diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..d8cb816 --- /dev/null +++ b/.jshintrc @@ -0,0 +1,10 @@ +{ + "evil": false, // Make sure to warn about eval + "regexdash": true, + "browser": true, + "jquery": true, + "trailing": false, + "sub": true, + "multistr": true, + "expr": true +} diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..78aa8ce --- /dev/null +++ b/.travis.yml @@ -0,0 +1,15 @@ +language: node_js +node_js: +- '0.10' +before_install: +- npm install -g jshint +- gem install sass compass modular-scale +script: +- jshint . +- compass compile +notifications: + email: + recipients: + - secure: NYyWrnOzCZC5VrrZiVaBt1BMb3LAvDb/v0gtXnZyXJz4D8kpV4D+FMDcpc44cId5hx2NMfvv26bIKtCj9N8PHBgM2rlztH8rhlI5uC2d2WK4tl2+Do1NCp/MbJKkhDiRDQGukEf+QBoKv/f/xsbuJIHTvPfwNbpiqw1iwGKxzoo= + campfire: + secure: KMTupKSaR1ThG0rW8RpsXcyVCTPfFKvNhU/TJh1QwVx9mPEfU8oeYh65gSiw5IUYy65yL0cB3jAmzJt6pCpujKj/vdy3l6fq4WAzvVLuPOoGK2QYnAPrB3y3CkDH/rG/tfaktyhJ6DntEHqnwJ+GvTU5M5StPHaL1YnweU87FUE= diff --git a/README.md b/README.md index 25299c3..00b3a45 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -Gumby Framework +Gumby Framework [![Build Status](https://travis-ci.org/GumbyFramework/Gumby.png?branch=master)](https://travis-ci.org/GumbyFramework/Gumby) ===================== Gumby Framework is a flexible, responsive CSS Framework, Powered by SASS. Create rapid and logical page layout and app diff --git a/bower.json b/bower.json index 5742f03..e6c11c2 100644 --- a/bower.json +++ b/bower.json @@ -1,5 +1,5 @@ { "name": "gumby", - "version": "2.4.10", + "version": "2.5.0", "main": ["./js/libs/gumby.min.js", "./css/gumby.css"] } diff --git a/css/gumby.css b/css/gumby.css index 7c2d96b..85aceb3 100644 --- a/css/gumby.css +++ b/css/gumby.css @@ -34,6 +34,10 @@ a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } +.pull_right { float: right; } + +.pull_left { float: left; } + * html { font-size: 100%; } html { font-size: 16px; line-height: 1.625em; } @@ -45,9 +49,6 @@ body { background: white; font-family: "Open Sans"; font-weight: 400; color: #55 html, body { height: 100%; } -.ie9 { font-family: "Open Sans"; } -.ie9 * { font-family: "Open Sans"; } - .hide { display: none; } .hide.active, .show { display: block; } @@ -166,10 +167,8 @@ abbr { text-transform: none; } ==================================================*/ /*.container { padding: 0px $gutter-in-px; }*/ -.row { width: 100%; max-width: 940px; min-width: 320px; margin: 0 auto; } -@media only screen and (max-width: 960px) { .row { padding: 0 20px; } } -.row .row { min-width: 0px; } -@media only screen and (max-width: 960px) { .row .row { padding: 0; } } +.row { width: 100%; max-width: 980px; min-width: 320px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } +.row .row { min-width: 0px; padding-left: 0; padding-right: 0; } /* To fix the grid into a different size, set max-width to your desired width */ .column, .columns { margin-left: 2.12766%; float: left; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @@ -193,29 +192,271 @@ abbr { text-transform: none; } .row .eleven.columns { width: 91.48936%; } .row .twelve.columns { width: 100%; } -/* Push Classes */ +/* Push and Pull Classes */ .row .push_one { margin-left: 10.6383%; } .row .push_one:first-child { margin-left: 8.51064%; } +.row .pull_one.one.column { margin-left: -14.89362%; } +.row .pull_one.one.column:first-child { margin-left: 0; } +.row .pull_one.two.columns { margin-left: -23.40426%; } +.row .pull_one.two.columns:first-child { margin-left: 0; } +.row .pull_one.three.columns { margin-left: -31.91489%; } +.row .pull_one.three.columns:first-child { margin-left: 0; } +.row .pull_one.four.columns { margin-left: -40.42553%; } +.row .pull_one.four.columns:first-child { margin-left: 0; } +.row .pull_one.five.columns { margin-left: -48.93617%; } +.row .pull_one.five.columns:first-child { margin-left: 0; } +.row .pull_one.six.columns { margin-left: -57.44681%; } +.row .pull_one.six.columns:first-child { margin-left: 0; } +.row .pull_one.seven.columns { margin-left: -65.95745%; } +.row .pull_one.seven.columns:first-child { margin-left: 0; } +.row .pull_one.eight.columns { margin-left: -74.46809%; } +.row .pull_one.eight.columns:first-child { margin-left: 0; } +.row .pull_one.nine.columns { margin-left: -82.97872%; } +.row .pull_one.nine.columns:first-child { margin-left: 0; } +.row .pull_one.ten.columns { margin-left: -91.48936%; } +.row .pull_one.ten.columns:first-child { margin-left: 0; } +.row .pull_one.eleven.columns { margin-left: -100.0%; } +.row .pull_one.eleven.columns:first-child { margin-left: 0; } .row .push_two { margin-left: 19.14894%; } .row .push_two:first-child { margin-left: 17.02128%; } +.row .pull_two.one.column { margin-left: -23.40426%; } +.row .pull_two.one.column:first-child { margin-left: 0; } +.row .pull_two.two.columns { margin-left: -31.91489%; } +.row .pull_two.two.columns:first-child { margin-left: 0; } +.row .pull_two.three.columns { margin-left: -40.42553%; } +.row .pull_two.three.columns:first-child { margin-left: 0; } +.row .pull_two.four.columns { margin-left: -48.93617%; } +.row .pull_two.four.columns:first-child { margin-left: 0; } +.row .pull_two.five.columns { margin-left: -57.44681%; } +.row .pull_two.five.columns:first-child { margin-left: 0; } +.row .pull_two.six.columns { margin-left: -65.95745%; } +.row .pull_two.six.columns:first-child { margin-left: 0; } +.row .pull_two.seven.columns { margin-left: -74.46809%; } +.row .pull_two.seven.columns:first-child { margin-left: 0; } +.row .pull_two.eight.columns { margin-left: -82.97872%; } +.row .pull_two.eight.columns:first-child { margin-left: 0; } +.row .pull_two.nine.columns { margin-left: -91.48936%; } +.row .pull_two.nine.columns:first-child { margin-left: 0; } +.row .pull_two.ten.columns { margin-left: -100.0%; } +.row .pull_two.ten.columns:first-child { margin-left: 0; } +.row .pull_two.eleven.columns { margin-left: -108.51064%; } +.row .pull_two.eleven.columns:first-child { margin-left: 0; } .row .push_three { margin-left: 27.65957%; } .row .push_three:first-child { margin-left: 25.53191%; } +.row .pull_three.one.column { margin-left: -31.91489%; } +.row .pull_three.one.column:first-child { margin-left: 0; } +.row .pull_three.two.columns { margin-left: -40.42553%; } +.row .pull_three.two.columns:first-child { margin-left: 0; } +.row .pull_three.three.columns { margin-left: -48.93617%; } +.row .pull_three.three.columns:first-child { margin-left: 0; } +.row .pull_three.four.columns { margin-left: -57.44681%; } +.row .pull_three.four.columns:first-child { margin-left: 0; } +.row .pull_three.five.columns { margin-left: -65.95745%; } +.row .pull_three.five.columns:first-child { margin-left: 0; } +.row .pull_three.six.columns { margin-left: -74.46809%; } +.row .pull_three.six.columns:first-child { margin-left: 0; } +.row .pull_three.seven.columns { margin-left: -82.97872%; } +.row .pull_three.seven.columns:first-child { margin-left: 0; } +.row .pull_three.eight.columns { margin-left: -91.48936%; } +.row .pull_three.eight.columns:first-child { margin-left: 0; } +.row .pull_three.nine.columns { margin-left: -100.0%; } +.row .pull_three.nine.columns:first-child { margin-left: 0; } +.row .pull_three.ten.columns { margin-left: -108.51064%; } +.row .pull_three.ten.columns:first-child { margin-left: 0; } +.row .pull_three.eleven.columns { margin-left: -117.02128%; } +.row .pull_three.eleven.columns:first-child { margin-left: 0; } .row .push_four { margin-left: 36.17021%; } .row .push_four:first-child { margin-left: 34.04255%; } +.row .pull_four.one.column { margin-left: -40.42553%; } +.row .pull_four.one.column:first-child { margin-left: 0; } +.row .pull_four.two.columns { margin-left: -48.93617%; } +.row .pull_four.two.columns:first-child { margin-left: 0; } +.row .pull_four.three.columns { margin-left: -57.44681%; } +.row .pull_four.three.columns:first-child { margin-left: 0; } +.row .pull_four.four.columns { margin-left: -65.95745%; } +.row .pull_four.four.columns:first-child { margin-left: 0; } +.row .pull_four.five.columns { margin-left: -74.46809%; } +.row .pull_four.five.columns:first-child { margin-left: 0; } +.row .pull_four.six.columns { margin-left: -82.97872%; } +.row .pull_four.six.columns:first-child { margin-left: 0; } +.row .pull_four.seven.columns { margin-left: -91.48936%; } +.row .pull_four.seven.columns:first-child { margin-left: 0; } +.row .pull_four.eight.columns { margin-left: -100.0%; } +.row .pull_four.eight.columns:first-child { margin-left: 0; } +.row .pull_four.nine.columns { margin-left: -108.51064%; } +.row .pull_four.nine.columns:first-child { margin-left: 0; } +.row .pull_four.ten.columns { margin-left: -117.02128%; } +.row .pull_four.ten.columns:first-child { margin-left: 0; } +.row .pull_four.eleven.columns { margin-left: -125.53191%; } +.row .pull_four.eleven.columns:first-child { margin-left: 0; } .row .push_five { margin-left: 44.68085%; } .row .push_five:first-child { margin-left: 42.55319%; } +.row .pull_five.one.column { margin-left: -48.93617%; } +.row .pull_five.one.column:first-child { margin-left: 0; } +.row .pull_five.two.columns { margin-left: -57.44681%; } +.row .pull_five.two.columns:first-child { margin-left: 0; } +.row .pull_five.three.columns { margin-left: -65.95745%; } +.row .pull_five.three.columns:first-child { margin-left: 0; } +.row .pull_five.four.columns { margin-left: -74.46809%; } +.row .pull_five.four.columns:first-child { margin-left: 0; } +.row .pull_five.five.columns { margin-left: -82.97872%; } +.row .pull_five.five.columns:first-child { margin-left: 0; } +.row .pull_five.six.columns { margin-left: -91.48936%; } +.row .pull_five.six.columns:first-child { margin-left: 0; } +.row .pull_five.seven.columns { margin-left: -100.0%; } +.row .pull_five.seven.columns:first-child { margin-left: 0; } +.row .pull_five.eight.columns { margin-left: -108.51064%; } +.row .pull_five.eight.columns:first-child { margin-left: 0; } +.row .pull_five.nine.columns { margin-left: -117.02128%; } +.row .pull_five.nine.columns:first-child { margin-left: 0; } +.row .pull_five.ten.columns { margin-left: -125.53191%; } +.row .pull_five.ten.columns:first-child { margin-left: 0; } +.row .pull_five.eleven.columns { margin-left: -134.04255%; } +.row .pull_five.eleven.columns:first-child { margin-left: 0; } .row .push_six { margin-left: 53.19149%; } .row .push_six:first-child { margin-left: 51.06383%; } +.row .pull_six.one.column { margin-left: -57.44681%; } +.row .pull_six.one.column:first-child { margin-left: 0; } +.row .pull_six.two.columns { margin-left: -65.95745%; } +.row .pull_six.two.columns:first-child { margin-left: 0; } +.row .pull_six.three.columns { margin-left: -74.46809%; } +.row .pull_six.three.columns:first-child { margin-left: 0; } +.row .pull_six.four.columns { margin-left: -82.97872%; } +.row .pull_six.four.columns:first-child { margin-left: 0; } +.row .pull_six.five.columns { margin-left: -91.48936%; } +.row .pull_six.five.columns:first-child { margin-left: 0; } +.row .pull_six.six.columns { margin-left: -100.0%; } +.row .pull_six.six.columns:first-child { margin-left: 0; } +.row .pull_six.seven.columns { margin-left: -108.51064%; } +.row .pull_six.seven.columns:first-child { margin-left: 0; } +.row .pull_six.eight.columns { margin-left: -117.02128%; } +.row .pull_six.eight.columns:first-child { margin-left: 0; } +.row .pull_six.nine.columns { margin-left: -125.53191%; } +.row .pull_six.nine.columns:first-child { margin-left: 0; } +.row .pull_six.ten.columns { margin-left: -134.04255%; } +.row .pull_six.ten.columns:first-child { margin-left: 0; } +.row .pull_six.eleven.columns { margin-left: -142.55319%; } +.row .pull_six.eleven.columns:first-child { margin-left: 0; } .row .push_seven { margin-left: 61.70213%; } .row .push_seven:first-child { margin-left: 59.57447%; } +.row .pull_seven.one.column { margin-left: -65.95745%; } +.row .pull_seven.one.column:first-child { margin-left: 0; } +.row .pull_seven.two.columns { margin-left: -74.46809%; } +.row .pull_seven.two.columns:first-child { margin-left: 0; } +.row .pull_seven.three.columns { margin-left: -82.97872%; } +.row .pull_seven.three.columns:first-child { margin-left: 0; } +.row .pull_seven.four.columns { margin-left: -91.48936%; } +.row .pull_seven.four.columns:first-child { margin-left: 0; } +.row .pull_seven.five.columns { margin-left: -100.0%; } +.row .pull_seven.five.columns:first-child { margin-left: 0; } +.row .pull_seven.six.columns { margin-left: -108.51064%; } +.row .pull_seven.six.columns:first-child { margin-left: 0; } +.row .pull_seven.seven.columns { margin-left: -117.02128%; } +.row .pull_seven.seven.columns:first-child { margin-left: 0; } +.row .pull_seven.eight.columns { margin-left: -125.53191%; } +.row .pull_seven.eight.columns:first-child { margin-left: 0; } +.row .pull_seven.nine.columns { margin-left: -134.04255%; } +.row .pull_seven.nine.columns:first-child { margin-left: 0; } +.row .pull_seven.ten.columns { margin-left: -142.55319%; } +.row .pull_seven.ten.columns:first-child { margin-left: 0; } +.row .pull_seven.eleven.columns { margin-left: -151.06383%; } +.row .pull_seven.eleven.columns:first-child { margin-left: 0; } .row .push_eight { margin-left: 70.21277%; } .row .push_eight:first-child { margin-left: 68.08511%; } +.row .pull_eight.one.column { margin-left: -74.46809%; } +.row .pull_eight.one.column:first-child { margin-left: 0; } +.row .pull_eight.two.columns { margin-left: -82.97872%; } +.row .pull_eight.two.columns:first-child { margin-left: 0; } +.row .pull_eight.three.columns { margin-left: -91.48936%; } +.row .pull_eight.three.columns:first-child { margin-left: 0; } +.row .pull_eight.four.columns { margin-left: -100.0%; } +.row .pull_eight.four.columns:first-child { margin-left: 0; } +.row .pull_eight.five.columns { margin-left: -108.51064%; } +.row .pull_eight.five.columns:first-child { margin-left: 0; } +.row .pull_eight.six.columns { margin-left: -117.02128%; } +.row .pull_eight.six.columns:first-child { margin-left: 0; } +.row .pull_eight.seven.columns { margin-left: -125.53191%; } +.row .pull_eight.seven.columns:first-child { margin-left: 0; } +.row .pull_eight.eight.columns { margin-left: -134.04255%; } +.row .pull_eight.eight.columns:first-child { margin-left: 0; } +.row .pull_eight.nine.columns { margin-left: -142.55319%; } +.row .pull_eight.nine.columns:first-child { margin-left: 0; } +.row .pull_eight.ten.columns { margin-left: -151.06383%; } +.row .pull_eight.ten.columns:first-child { margin-left: 0; } +.row .pull_eight.eleven.columns { margin-left: -159.57447%; } +.row .pull_eight.eleven.columns:first-child { margin-left: 0; } .row .push_nine { margin-left: 78.7234%; } .row .push_nine:first-child { margin-left: 76.59574%; } +.row .pull_nine.one.column { margin-left: -82.97872%; } +.row .pull_nine.one.column:first-child { margin-left: 0; } +.row .pull_nine.two.columns { margin-left: -91.48936%; } +.row .pull_nine.two.columns:first-child { margin-left: 0; } +.row .pull_nine.three.columns { margin-left: -100.0%; } +.row .pull_nine.three.columns:first-child { margin-left: 0; } +.row .pull_nine.four.columns { margin-left: -108.51064%; } +.row .pull_nine.four.columns:first-child { margin-left: 0; } +.row .pull_nine.five.columns { margin-left: -117.02128%; } +.row .pull_nine.five.columns:first-child { margin-left: 0; } +.row .pull_nine.six.columns { margin-left: -125.53191%; } +.row .pull_nine.six.columns:first-child { margin-left: 0; } +.row .pull_nine.seven.columns { margin-left: -134.04255%; } +.row .pull_nine.seven.columns:first-child { margin-left: 0; } +.row .pull_nine.eight.columns { margin-left: -142.55319%; } +.row .pull_nine.eight.columns:first-child { margin-left: 0; } +.row .pull_nine.nine.columns { margin-left: -151.06383%; } +.row .pull_nine.nine.columns:first-child { margin-left: 0; } +.row .pull_nine.ten.columns { margin-left: -159.57447%; } +.row .pull_nine.ten.columns:first-child { margin-left: 0; } +.row .pull_nine.eleven.columns { margin-left: -168.08511%; } +.row .pull_nine.eleven.columns:first-child { margin-left: 0; } .row .push_ten { margin-left: 87.23404%; } .row .push_ten:first-child { margin-left: 85.10638%; } +.row .pull_ten.one.column { margin-left: -91.48936%; } +.row .pull_ten.one.column:first-child { margin-left: 0; } +.row .pull_ten.two.columns { margin-left: -100.0%; } +.row .pull_ten.two.columns:first-child { margin-left: 0; } +.row .pull_ten.three.columns { margin-left: -108.51064%; } +.row .pull_ten.three.columns:first-child { margin-left: 0; } +.row .pull_ten.four.columns { margin-left: -117.02128%; } +.row .pull_ten.four.columns:first-child { margin-left: 0; } +.row .pull_ten.five.columns { margin-left: -125.53191%; } +.row .pull_ten.five.columns:first-child { margin-left: 0; } +.row .pull_ten.six.columns { margin-left: -134.04255%; } +.row .pull_ten.six.columns:first-child { margin-left: 0; } +.row .pull_ten.seven.columns { margin-left: -142.55319%; } +.row .pull_ten.seven.columns:first-child { margin-left: 0; } +.row .pull_ten.eight.columns { margin-left: -151.06383%; } +.row .pull_ten.eight.columns:first-child { margin-left: 0; } +.row .pull_ten.nine.columns { margin-left: -159.57447%; } +.row .pull_ten.nine.columns:first-child { margin-left: 0; } +.row .pull_ten.ten.columns { margin-left: -168.08511%; } +.row .pull_ten.ten.columns:first-child { margin-left: 0; } +.row .pull_ten.eleven.columns { margin-left: -176.59574%; } +.row .pull_ten.eleven.columns:first-child { margin-left: 0; } .row .push_eleven { margin-left: 95.74468%; } .row .push_eleven:first-child { margin-left: 93.61702%; } +.row .pull_eleven.one.column { margin-left: -100.0%; } +.row .pull_eleven.one.column:first-child { margin-left: 0; } +.row .pull_eleven.two.columns { margin-left: -108.51064%; } +.row .pull_eleven.two.columns:first-child { margin-left: 0; } +.row .pull_eleven.three.columns { margin-left: -117.02128%; } +.row .pull_eleven.three.columns:first-child { margin-left: 0; } +.row .pull_eleven.four.columns { margin-left: -125.53191%; } +.row .pull_eleven.four.columns:first-child { margin-left: 0; } +.row .pull_eleven.five.columns { margin-left: -134.04255%; } +.row .pull_eleven.five.columns:first-child { margin-left: 0; } +.row .pull_eleven.six.columns { margin-left: -142.55319%; } +.row .pull_eleven.six.columns:first-child { margin-left: 0; } +.row .pull_eleven.seven.columns { margin-left: -151.06383%; } +.row .pull_eleven.seven.columns:first-child { margin-left: 0; } +.row .pull_eleven.eight.columns { margin-left: -159.57447%; } +.row .pull_eleven.eight.columns:first-child { margin-left: 0; } +.row .pull_eleven.nine.columns { margin-left: -168.08511%; } +.row .pull_eleven.nine.columns:first-child { margin-left: 0; } +.row .pull_eleven.ten.columns { margin-left: -176.59574%; } +.row .pull_eleven.ten.columns:first-child { margin-left: 0; } +.row .pull_eleven.eleven.columns { margin-left: -185.10638%; } +.row .pull_eleven.eleven.columns:first-child { margin-left: 0; } /* Centered Classes */ .row .one.centered { margin-left: 46.80851%; } @@ -249,37 +490,487 @@ abbr { text-transform: none; } .sixteen.colgrid .row .fifteen.columns { width: 93.61702%; } .sixteen.colgrid .row .sixteen.columns { width: 100%; } -/* Hybrid Push Classes */ +/* Hybrid Push and Pull Classes */ .sixteen.colgrid .row .push_one { margin-left: 8.51064%; } .sixteen.colgrid .row .push_one:first-child { margin-left: 6.38298%; } +.sixteen.colgrid .row .pull_one.one.column { margin-left: -10.6383%; } +.sixteen.colgrid .row .pull_one.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_one.two.columns { margin-left: -17.02128%; } +.sixteen.colgrid .row .pull_one.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_one.three.columns { margin-left: -23.40426%; } +.sixteen.colgrid .row .pull_one.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_one.four.columns { margin-left: -29.78723%; } +.sixteen.colgrid .row .pull_one.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_one.five.columns { margin-left: -36.17021%; } +.sixteen.colgrid .row .pull_one.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_one.six.columns { margin-left: -42.55319%; } +.sixteen.colgrid .row .pull_one.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_one.seven.columns { margin-left: -48.93617%; } +.sixteen.colgrid .row .pull_one.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_one.eight.columns { margin-left: -55.31915%; } +.sixteen.colgrid .row .pull_one.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_one.nine.columns { margin-left: -61.70213%; } +.sixteen.colgrid .row .pull_one.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_one.ten.columns { margin-left: -68.08511%; } +.sixteen.colgrid .row .pull_one.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_one.eleven.columns { margin-left: -74.46809%; } +.sixteen.colgrid .row .pull_one.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_one.twelve.columns { margin-left: -80.85106%; } +.sixteen.colgrid .row .pull_one.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_one.thirteen.columns { margin-left: -87.23404%; } +.sixteen.colgrid .row .pull_one.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_one.fourteen.columns { margin-left: -93.61702%; } +.sixteen.colgrid .row .pull_one.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_one.fifteen.columns { margin-left: -100%; } +.sixteen.colgrid .row .pull_one.fifteen.columns:first-child { margin-left: 0; } .sixteen.colgrid .row .push_two { margin-left: 14.89362%; } .sixteen.colgrid .row .push_two:first-child { margin-left: 12.76596%; } +.sixteen.colgrid .row .pull_two.one.column { margin-left: -17.02128%; } +.sixteen.colgrid .row .pull_two.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_two.two.columns { margin-left: -23.40426%; } +.sixteen.colgrid .row .pull_two.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_two.three.columns { margin-left: -29.78723%; } +.sixteen.colgrid .row .pull_two.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_two.four.columns { margin-left: -36.17021%; } +.sixteen.colgrid .row .pull_two.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_two.five.columns { margin-left: -42.55319%; } +.sixteen.colgrid .row .pull_two.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_two.six.columns { margin-left: -48.93617%; } +.sixteen.colgrid .row .pull_two.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_two.seven.columns { margin-left: -55.31915%; } +.sixteen.colgrid .row .pull_two.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_two.eight.columns { margin-left: -61.70213%; } +.sixteen.colgrid .row .pull_two.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_two.nine.columns { margin-left: -68.08511%; } +.sixteen.colgrid .row .pull_two.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_two.ten.columns { margin-left: -74.46809%; } +.sixteen.colgrid .row .pull_two.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_two.eleven.columns { margin-left: -80.85106%; } +.sixteen.colgrid .row .pull_two.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_two.twelve.columns { margin-left: -87.23404%; } +.sixteen.colgrid .row .pull_two.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_two.thirteen.columns { margin-left: -93.61702%; } +.sixteen.colgrid .row .pull_two.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_two.fourteen.columns { margin-left: -100%; } +.sixteen.colgrid .row .pull_two.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_two.fifteen.columns { margin-left: -106.38298%; } +.sixteen.colgrid .row .pull_two.fifteen.columns:first-child { margin-left: 0; } .sixteen.colgrid .row .push_three { margin-left: 21.2766%; } .sixteen.colgrid .row .push_three:first-child { margin-left: 19.14894%; } +.sixteen.colgrid .row .pull_three.one.column { margin-left: -23.40426%; } +.sixteen.colgrid .row .pull_three.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_three.two.columns { margin-left: -29.78723%; } +.sixteen.colgrid .row .pull_three.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_three.three.columns { margin-left: -36.17021%; } +.sixteen.colgrid .row .pull_three.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_three.four.columns { margin-left: -42.55319%; } +.sixteen.colgrid .row .pull_three.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_three.five.columns { margin-left: -48.93617%; } +.sixteen.colgrid .row .pull_three.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_three.six.columns { margin-left: -55.31915%; } +.sixteen.colgrid .row .pull_three.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_three.seven.columns { margin-left: -61.70213%; } +.sixteen.colgrid .row .pull_three.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_three.eight.columns { margin-left: -68.08511%; } +.sixteen.colgrid .row .pull_three.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_three.nine.columns { margin-left: -74.46809%; } +.sixteen.colgrid .row .pull_three.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_three.ten.columns { margin-left: -80.85106%; } +.sixteen.colgrid .row .pull_three.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_three.eleven.columns { margin-left: -87.23404%; } +.sixteen.colgrid .row .pull_three.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_three.twelve.columns { margin-left: -93.61702%; } +.sixteen.colgrid .row .pull_three.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_three.thirteen.columns { margin-left: -100%; } +.sixteen.colgrid .row .pull_three.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_three.fourteen.columns { margin-left: -106.38298%; } +.sixteen.colgrid .row .pull_three.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_three.fifteen.columns { margin-left: -112.76596%; } +.sixteen.colgrid .row .pull_three.fifteen.columns:first-child { margin-left: 0; } .sixteen.colgrid .row .push_four { margin-left: 27.65957%; } .sixteen.colgrid .row .push_four:first-child { margin-left: 25.53191%; } +.sixteen.colgrid .row .pull_four.one.column { margin-left: -29.78723%; } +.sixteen.colgrid .row .pull_four.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_four.two.columns { margin-left: -36.17021%; } +.sixteen.colgrid .row .pull_four.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_four.three.columns { margin-left: -42.55319%; } +.sixteen.colgrid .row .pull_four.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_four.four.columns { margin-left: -48.93617%; } +.sixteen.colgrid .row .pull_four.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_four.five.columns { margin-left: -55.31915%; } +.sixteen.colgrid .row .pull_four.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_four.six.columns { margin-left: -61.70213%; } +.sixteen.colgrid .row .pull_four.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_four.seven.columns { margin-left: -68.08511%; } +.sixteen.colgrid .row .pull_four.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_four.eight.columns { margin-left: -74.46809%; } +.sixteen.colgrid .row .pull_four.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_four.nine.columns { margin-left: -80.85106%; } +.sixteen.colgrid .row .pull_four.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_four.ten.columns { margin-left: -87.23404%; } +.sixteen.colgrid .row .pull_four.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_four.eleven.columns { margin-left: -93.61702%; } +.sixteen.colgrid .row .pull_four.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_four.twelve.columns { margin-left: -100%; } +.sixteen.colgrid .row .pull_four.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_four.thirteen.columns { margin-left: -106.38298%; } +.sixteen.colgrid .row .pull_four.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_four.fourteen.columns { margin-left: -112.76596%; } +.sixteen.colgrid .row .pull_four.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_four.fifteen.columns { margin-left: -119.14894%; } +.sixteen.colgrid .row .pull_four.fifteen.columns:first-child { margin-left: 0; } .sixteen.colgrid .row .push_five { margin-left: 34.04255%; } .sixteen.colgrid .row .push_five:first-child { margin-left: 31.91489%; } +.sixteen.colgrid .row .pull_five.one.column { margin-left: -36.17021%; } +.sixteen.colgrid .row .pull_five.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_five.two.columns { margin-left: -42.55319%; } +.sixteen.colgrid .row .pull_five.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_five.three.columns { margin-left: -48.93617%; } +.sixteen.colgrid .row .pull_five.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_five.four.columns { margin-left: -55.31915%; } +.sixteen.colgrid .row .pull_five.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_five.five.columns { margin-left: -61.70213%; } +.sixteen.colgrid .row .pull_five.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_five.six.columns { margin-left: -68.08511%; } +.sixteen.colgrid .row .pull_five.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_five.seven.columns { margin-left: -74.46809%; } +.sixteen.colgrid .row .pull_five.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_five.eight.columns { margin-left: -80.85106%; } +.sixteen.colgrid .row .pull_five.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_five.nine.columns { margin-left: -87.23404%; } +.sixteen.colgrid .row .pull_five.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_five.ten.columns { margin-left: -93.61702%; } +.sixteen.colgrid .row .pull_five.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_five.eleven.columns { margin-left: -100%; } +.sixteen.colgrid .row .pull_five.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_five.twelve.columns { margin-left: -106.38298%; } +.sixteen.colgrid .row .pull_five.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_five.thirteen.columns { margin-left: -112.76596%; } +.sixteen.colgrid .row .pull_five.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_five.fourteen.columns { margin-left: -119.14894%; } +.sixteen.colgrid .row .pull_five.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_five.fifteen.columns { margin-left: -125.53191%; } +.sixteen.colgrid .row .pull_five.fifteen.columns:first-child { margin-left: 0; } .sixteen.colgrid .row .push_six { margin-left: 40.42553%; } .sixteen.colgrid .row .push_six:first-child { margin-left: 38.29787%; } +.sixteen.colgrid .row .pull_six.one.column { margin-left: -42.55319%; } +.sixteen.colgrid .row .pull_six.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_six.two.columns { margin-left: -48.93617%; } +.sixteen.colgrid .row .pull_six.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_six.three.columns { margin-left: -55.31915%; } +.sixteen.colgrid .row .pull_six.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_six.four.columns { margin-left: -61.70213%; } +.sixteen.colgrid .row .pull_six.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_six.five.columns { margin-left: -68.08511%; } +.sixteen.colgrid .row .pull_six.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_six.six.columns { margin-left: -74.46809%; } +.sixteen.colgrid .row .pull_six.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_six.seven.columns { margin-left: -80.85106%; } +.sixteen.colgrid .row .pull_six.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_six.eight.columns { margin-left: -87.23404%; } +.sixteen.colgrid .row .pull_six.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_six.nine.columns { margin-left: -93.61702%; } +.sixteen.colgrid .row .pull_six.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_six.ten.columns { margin-left: -100.0%; } +.sixteen.colgrid .row .pull_six.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_six.eleven.columns { margin-left: -106.38298%; } +.sixteen.colgrid .row .pull_six.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_six.twelve.columns { margin-left: -112.76596%; } +.sixteen.colgrid .row .pull_six.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_six.thirteen.columns { margin-left: -119.14894%; } +.sixteen.colgrid .row .pull_six.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_six.fourteen.columns { margin-left: -125.53191%; } +.sixteen.colgrid .row .pull_six.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_six.fifteen.columns { margin-left: -131.91489%; } +.sixteen.colgrid .row .pull_six.fifteen.columns:first-child { margin-left: 0; } .sixteen.colgrid .row .push_seven { margin-left: 46.80851%; } .sixteen.colgrid .row .push_seven:first-child { margin-left: 44.68085%; } +.sixteen.colgrid .row .pull_seven.one.column { margin-left: -48.93617%; } +.sixteen.colgrid .row .pull_seven.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_seven.two.columns { margin-left: -55.31915%; } +.sixteen.colgrid .row .pull_seven.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_seven.three.columns { margin-left: -61.70213%; } +.sixteen.colgrid .row .pull_seven.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_seven.four.columns { margin-left: -68.08511%; } +.sixteen.colgrid .row .pull_seven.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_seven.five.columns { margin-left: -74.46809%; } +.sixteen.colgrid .row .pull_seven.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_seven.six.columns { margin-left: -80.85106%; } +.sixteen.colgrid .row .pull_seven.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_seven.seven.columns { margin-left: -87.23404%; } +.sixteen.colgrid .row .pull_seven.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_seven.eight.columns { margin-left: -93.61702%; } +.sixteen.colgrid .row .pull_seven.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_seven.nine.columns { margin-left: -100.0%; } +.sixteen.colgrid .row .pull_seven.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_seven.ten.columns { margin-left: -106.38298%; } +.sixteen.colgrid .row .pull_seven.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_seven.eleven.columns { margin-left: -112.76596%; } +.sixteen.colgrid .row .pull_seven.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_seven.twelve.columns { margin-left: -119.14894%; } +.sixteen.colgrid .row .pull_seven.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_seven.thirteen.columns { margin-left: -125.53191%; } +.sixteen.colgrid .row .pull_seven.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_seven.fourteen.columns { margin-left: -131.91489%; } +.sixteen.colgrid .row .pull_seven.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_seven.fifteen.columns { margin-left: -138.29787%; } +.sixteen.colgrid .row .pull_seven.fifteen.columns:first-child { margin-left: 0; } .sixteen.colgrid .row .push_eight { margin-left: 53.19149%; } .sixteen.colgrid .row .push_eight:first-child { margin-left: 51.06383%; } +.sixteen.colgrid .row .pull_eight.one.column { margin-left: -55.31915%; } +.sixteen.colgrid .row .pull_eight.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eight.two.columns { margin-left: -61.70213%; } +.sixteen.colgrid .row .pull_eight.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eight.three.columns { margin-left: -68.08511%; } +.sixteen.colgrid .row .pull_eight.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eight.four.columns { margin-left: -74.46809%; } +.sixteen.colgrid .row .pull_eight.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eight.five.columns { margin-left: -80.85106%; } +.sixteen.colgrid .row .pull_eight.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eight.six.columns { margin-left: -87.23404%; } +.sixteen.colgrid .row .pull_eight.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eight.seven.columns { margin-left: -93.61702%; } +.sixteen.colgrid .row .pull_eight.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eight.eight.columns { margin-left: -100%; } +.sixteen.colgrid .row .pull_eight.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eight.nine.columns { margin-left: -106.38298%; } +.sixteen.colgrid .row .pull_eight.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eight.ten.columns { margin-left: -112.76596%; } +.sixteen.colgrid .row .pull_eight.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eight.eleven.columns { margin-left: -119.14894%; } +.sixteen.colgrid .row .pull_eight.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eight.twelve.columns { margin-left: -125.53191%; } +.sixteen.colgrid .row .pull_eight.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eight.thirteen.columns { margin-left: -131.91489%; } +.sixteen.colgrid .row .pull_eight.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eight.fourteen.columns { margin-left: -138.29787%; } +.sixteen.colgrid .row .pull_eight.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eight.fifteen.columns { margin-left: -144.68085%; } +.sixteen.colgrid .row .pull_eight.fifteen.columns:first-child { margin-left: 0; } .sixteen.colgrid .row .push_nine { margin-left: 59.57447%; } .sixteen.colgrid .row .push_nine:first-child { margin-left: 57.44681%; } +.sixteen.colgrid .row .pull_nine.one.column { margin-left: -61.70213%; } +.sixteen.colgrid .row .pull_nine.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_nine.two.columns { margin-left: -68.08511%; } +.sixteen.colgrid .row .pull_nine.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_nine.three.columns { margin-left: -74.46809%; } +.sixteen.colgrid .row .pull_nine.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_nine.four.columns { margin-left: -80.85106%; } +.sixteen.colgrid .row .pull_nine.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_nine.five.columns { margin-left: -87.23404%; } +.sixteen.colgrid .row .pull_nine.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_nine.six.columns { margin-left: -93.61702%; } +.sixteen.colgrid .row .pull_nine.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_nine.seven.columns { margin-left: -100%; } +.sixteen.colgrid .row .pull_nine.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_nine.eight.columns { margin-left: -106.38298%; } +.sixteen.colgrid .row .pull_nine.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_nine.nine.columns { margin-left: -112.76596%; } +.sixteen.colgrid .row .pull_nine.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_nine.ten.columns { margin-left: -119.14894%; } +.sixteen.colgrid .row .pull_nine.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_nine.eleven.columns { margin-left: -125.53191%; } +.sixteen.colgrid .row .pull_nine.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_nine.twelve.columns { margin-left: -131.91489%; } +.sixteen.colgrid .row .pull_nine.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_nine.thirteen.columns { margin-left: -138.29787%; } +.sixteen.colgrid .row .pull_nine.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_nine.fourteen.columns { margin-left: -144.68085%; } +.sixteen.colgrid .row .pull_nine.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_nine.fifteen.columns { margin-left: -151.06383%; } +.sixteen.colgrid .row .pull_nine.fifteen.columns:first-child { margin-left: 0; } .sixteen.colgrid .row .push_ten { margin-left: 65.95745%; } .sixteen.colgrid .row .push_ten:first-child { margin-left: 63.82979%; } +.sixteen.colgrid .row .pull_ten.one.column { margin-left: -68.08511%; } +.sixteen.colgrid .row .pull_ten.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_ten.two.columns { margin-left: -74.46809%; } +.sixteen.colgrid .row .pull_ten.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_ten.three.columns { margin-left: -80.85106%; } +.sixteen.colgrid .row .pull_ten.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_ten.four.columns { margin-left: -87.23404%; } +.sixteen.colgrid .row .pull_ten.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_ten.five.columns { margin-left: -93.61702%; } +.sixteen.colgrid .row .pull_ten.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_ten.six.columns { margin-left: -100%; } +.sixteen.colgrid .row .pull_ten.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_ten.seven.columns { margin-left: -106.38298%; } +.sixteen.colgrid .row .pull_ten.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_ten.eight.columns { margin-left: -112.76596%; } +.sixteen.colgrid .row .pull_ten.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_ten.nine.columns { margin-left: -119.14894%; } +.sixteen.colgrid .row .pull_ten.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_ten.ten.columns { margin-left: -125.53191%; } +.sixteen.colgrid .row .pull_ten.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_ten.eleven.columns { margin-left: -131.91489%; } +.sixteen.colgrid .row .pull_ten.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_ten.twelve.columns { margin-left: -138.29787%; } +.sixteen.colgrid .row .pull_ten.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_ten.thirteen.columns { margin-left: -144.68085%; } +.sixteen.colgrid .row .pull_ten.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_ten.fourteen.columns { margin-left: -151.06383%; } +.sixteen.colgrid .row .pull_ten.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_ten.fifteen.columns { margin-left: -157.44681%; } +.sixteen.colgrid .row .pull_ten.fifteen.columns:first-child { margin-left: 0; } .sixteen.colgrid .row .push_eleven { margin-left: 72.34043%; } .sixteen.colgrid .row .push_eleven:first-child { margin-left: 70.21277%; } +.sixteen.colgrid .row .pull_eleven.one.column { margin-left: -74.46809%; } +.sixteen.colgrid .row .pull_eleven.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eleven.two.columns { margin-left: -80.85106%; } +.sixteen.colgrid .row .pull_eleven.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eleven.three.columns { margin-left: -87.23404%; } +.sixteen.colgrid .row .pull_eleven.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eleven.four.columns { margin-left: -93.61702%; } +.sixteen.colgrid .row .pull_eleven.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eleven.five.columns { margin-left: -100%; } +.sixteen.colgrid .row .pull_eleven.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eleven.six.columns { margin-left: -106.38298%; } +.sixteen.colgrid .row .pull_eleven.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eleven.seven.columns { margin-left: -112.76596%; } +.sixteen.colgrid .row .pull_eleven.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eleven.eight.columns { margin-left: -119.14894%; } +.sixteen.colgrid .row .pull_eleven.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eleven.nine.columns { margin-left: -125.53191%; } +.sixteen.colgrid .row .pull_eleven.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eleven.ten.columns { margin-left: -131.91489%; } +.sixteen.colgrid .row .pull_eleven.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eleven.eleven.columns { margin-left: -138.29787%; } +.sixteen.colgrid .row .pull_eleven.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eleven.twelve.columns { margin-left: -144.68085%; } +.sixteen.colgrid .row .pull_eleven.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eleven.thirteen.columns { margin-left: -151.06383%; } +.sixteen.colgrid .row .pull_eleven.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eleven.fourteen.columns { margin-left: -157.44681%; } +.sixteen.colgrid .row .pull_eleven.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_eleven.fifteen.columns { margin-left: -163.82979%; } +.sixteen.colgrid .row .pull_eleven.fifteen.columns:first-child { margin-left: 0; } .sixteen.colgrid .row .push_twelve { margin-left: 78.7234%; } .sixteen.colgrid .row .push_twelve:first-child { margin-left: 76.59574%; } +.sixteen.colgrid .row .pull_twelve.one.column { margin-left: -80.85106%; } +.sixteen.colgrid .row .pull_twelve.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_twelve.two.columns { margin-left: -87.23404%; } +.sixteen.colgrid .row .pull_twelve.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_twelve.three.columns { margin-left: -93.61702%; } +.sixteen.colgrid .row .pull_twelve.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_twelve.four.columns { margin-left: -100.0%; } +.sixteen.colgrid .row .pull_twelve.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_twelve.five.columns { margin-left: -106.38298%; } +.sixteen.colgrid .row .pull_twelve.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_twelve.six.columns { margin-left: -112.76596%; } +.sixteen.colgrid .row .pull_twelve.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_twelve.seven.columns { margin-left: -119.14894%; } +.sixteen.colgrid .row .pull_twelve.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_twelve.eight.columns { margin-left: -125.53191%; } +.sixteen.colgrid .row .pull_twelve.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_twelve.nine.columns { margin-left: -131.91489%; } +.sixteen.colgrid .row .pull_twelve.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_twelve.ten.columns { margin-left: -138.29787%; } +.sixteen.colgrid .row .pull_twelve.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_twelve.eleven.columns { margin-left: -144.68085%; } +.sixteen.colgrid .row .pull_twelve.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_twelve.twelve.columns { margin-left: -151.06383%; } +.sixteen.colgrid .row .pull_twelve.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_twelve.thirteen.columns { margin-left: -157.44681%; } +.sixteen.colgrid .row .pull_twelve.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_twelve.fourteen.columns { margin-left: -163.82979%; } +.sixteen.colgrid .row .pull_twelve.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_twelve.fifteen.columns { margin-left: -170.21277%; } +.sixteen.colgrid .row .pull_twelve.fifteen.columns:first-child { margin-left: 0; } .sixteen.colgrid .row .push_thirteen { margin-left: 85.10638%; } .sixteen.colgrid .row .push_thirteen:first-child { margin-left: 82.97872%; } +.sixteen.colgrid .row .pull_thirteen.one.column { margin-left: -87.23404%; } +.sixteen.colgrid .row .pull_thirteen.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_thirteen.two.columns { margin-left: -93.61702%; } +.sixteen.colgrid .row .pull_thirteen.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_thirteen.three.columns { margin-left: -100.0%; } +.sixteen.colgrid .row .pull_thirteen.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_thirteen.four.columns { margin-left: -106.38298%; } +.sixteen.colgrid .row .pull_thirteen.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_thirteen.five.columns { margin-left: -112.76596%; } +.sixteen.colgrid .row .pull_thirteen.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_thirteen.six.columns { margin-left: -119.14894%; } +.sixteen.colgrid .row .pull_thirteen.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_thirteen.seven.columns { margin-left: -125.53191%; } +.sixteen.colgrid .row .pull_thirteen.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_thirteen.eight.columns { margin-left: -131.91489%; } +.sixteen.colgrid .row .pull_thirteen.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_thirteen.nine.columns { margin-left: -138.29787%; } +.sixteen.colgrid .row .pull_thirteen.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_thirteen.ten.columns { margin-left: -144.68085%; } +.sixteen.colgrid .row .pull_thirteen.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_thirteen.eleven.columns { margin-left: -151.06383%; } +.sixteen.colgrid .row .pull_thirteen.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_thirteen.twelve.columns { margin-left: -157.44681%; } +.sixteen.colgrid .row .pull_thirteen.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_thirteen.thirteen.columns { margin-left: -163.82979%; } +.sixteen.colgrid .row .pull_thirteen.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_thirteen.fourteen.columns { margin-left: -170.21277%; } +.sixteen.colgrid .row .pull_thirteen.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_thirteen.fifteen.columns { margin-left: -176.59574%; } +.sixteen.colgrid .row .pull_thirteen.fifteen.columns:first-child { margin-left: 0; } .sixteen.colgrid .row .push_fourteen { margin-left: 91.48936%; } .sixteen.colgrid .row .push_fourteen:first-child { margin-left: 89.3617%; } +.sixteen.colgrid .row .pull_fourteen.one.column { margin-left: -93.61702%; } +.sixteen.colgrid .row .pull_fourteen.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fourteen.two.columns { margin-left: -100%; } +.sixteen.colgrid .row .pull_fourteen.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fourteen.three.columns { margin-left: -106.38298%; } +.sixteen.colgrid .row .pull_fourteen.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fourteen.four.columns { margin-left: -112.76596%; } +.sixteen.colgrid .row .pull_fourteen.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fourteen.five.columns { margin-left: -119.14894%; } +.sixteen.colgrid .row .pull_fourteen.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fourteen.six.columns { margin-left: -125.53191%; } +.sixteen.colgrid .row .pull_fourteen.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fourteen.seven.columns { margin-left: -131.91489%; } +.sixteen.colgrid .row .pull_fourteen.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fourteen.eight.columns { margin-left: -138.29787%; } +.sixteen.colgrid .row .pull_fourteen.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fourteen.nine.columns { margin-left: -144.68085%; } +.sixteen.colgrid .row .pull_fourteen.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fourteen.ten.columns { margin-left: -151.06383%; } +.sixteen.colgrid .row .pull_fourteen.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fourteen.eleven.columns { margin-left: -157.44681%; } +.sixteen.colgrid .row .pull_fourteen.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fourteen.twelve.columns { margin-left: -163.82979%; } +.sixteen.colgrid .row .pull_fourteen.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fourteen.thirteen.columns { margin-left: -170.21277%; } +.sixteen.colgrid .row .pull_fourteen.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fourteen.fourteen.columns { margin-left: -176.59574%; } +.sixteen.colgrid .row .pull_fourteen.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fourteen.fifteen.columns { margin-left: -182.97872%; } +.sixteen.colgrid .row .pull_fourteen.fifteen.columns:first-child { margin-left: 0; } .sixteen.colgrid .row .push_fifteen { margin-left: 97.87234%; } .sixteen.colgrid .row .push_fifteen:first-child { margin-left: 95.74468%; } +.sixteen.colgrid .row .pull_fifteen.one.column { margin-left: -100%; } +.sixteen.colgrid .row .pull_fifteen.one.column:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fifteen.two.columns { margin-left: -106.38298%; } +.sixteen.colgrid .row .pull_fifteen.two.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fifteen.three.columns { margin-left: -112.76596%; } +.sixteen.colgrid .row .pull_fifteen.three.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fifteen.four.columns { margin-left: -119.14894%; } +.sixteen.colgrid .row .pull_fifteen.four.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fifteen.five.columns { margin-left: -125.53191%; } +.sixteen.colgrid .row .pull_fifteen.five.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fifteen.six.columns { margin-left: -131.91489%; } +.sixteen.colgrid .row .pull_fifteen.six.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fifteen.seven.columns { margin-left: -138.29787%; } +.sixteen.colgrid .row .pull_fifteen.seven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fifteen.eight.columns { margin-left: -144.68085%; } +.sixteen.colgrid .row .pull_fifteen.eight.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fifteen.nine.columns { margin-left: -151.06383%; } +.sixteen.colgrid .row .pull_fifteen.nine.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fifteen.ten.columns { margin-left: -157.44681%; } +.sixteen.colgrid .row .pull_fifteen.ten.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fifteen.eleven.columns { margin-left: -163.82979%; } +.sixteen.colgrid .row .pull_fifteen.eleven.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fifteen.twelve.columns { margin-left: -170.21277%; } +.sixteen.colgrid .row .pull_fifteen.twelve.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fifteen.thirteen.columns { margin-left: -176.59574%; } +.sixteen.colgrid .row .pull_fifteen.thirteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fifteen.fourteen.columns { margin-left: -182.97872%; } +.sixteen.colgrid .row .pull_fifteen.fourteen.columns:first-child { margin-left: 0; } +.sixteen.colgrid .row .pull_fifteen.fifteen.columns { margin-left: -189.3617%; } +.sixteen.colgrid .row .pull_fifteen.fifteen.columns:first-child { margin-left: 0; } /* Hybrid Centered Classes */ .sixteen.colgrid .row .one.centered { margin-left: 47.87234%; } @@ -298,10 +989,6 @@ abbr { text-transform: none; } .sixteen.colgrid .row .fourteen.centered { margin-left: 6.38298%; } .sixteen.colgrid .row .fifteen.centered { margin-left: 3.19149%; } -.pull_right { float: right; } - -.pull_left { float: left; } - img, object, embed { max-width: 100%; height: auto; } img { -ms-interpolation-mode: bicubic; } @@ -329,8 +1016,7 @@ img { -ms-interpolation-mode: bicubic; } .row:after { clear: both; } .valign { display: table; width: 100%; } -.valign > div { display: table-cell; vertical-align: middle; } -.valign ​ > article { display: table-cell; vertical-align: middle; } +.valign > div, .valign > article, .valign > section, .valign > figure { display: table-cell; vertical-align: middle; } /* Mobile */ @media only screen and (max-width: 767px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; } @@ -343,24 +1029,27 @@ img { -ms-interpolation-mode: bicubic; } [class*="column"] + [class*="column"]:last-child { float: none; } [class*="column"]:before { display: table; } [class*="column"]:after { display: table; clear: both; } - [class^="push_"], [class*="push_"] { margin-left: 0 !important; } } + [class^="push_"], [class*="push_"], [class^="pull_"], [class*="pull_"] { margin-left: 0 !important; } } /*===================================================== Navigation (with dropdowns) ======================================================*/ -.navbar { width: 100%; min-height: 60px; display: block; margin-bottom: 20px; background: #4a4d50; } -@media only screen and (max-width: 767px) { .navbar { position: relative; border: none; } +.navbar { width: 100%; min-height: 60px; display: block; margin-bottom: 20px; background: #4a4d50; position: relative; } +@media only screen and (max-width: 767px) { .navbar { border: none; } .navbar .column, .navbar .columns { min-height: 0; } } -.navbar.fixed { top: 0; left: 0; z-index: 99999; } +.navbar.fixed { position: fixed; z-index: 99999; } +.navbar.pinned { position: absolute; } .navbar a.toggle { display: none; } @media only screen and (max-width: 767px) { .navbar a.toggle { top: 18%; right: 4%; width: 46px; position: absolute; text-align: center; display: inline-block; color: white; background: #4a4d50; height: 40px; line-height: 38px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; font-size: 30px; font-size: 1.875rem; } .navbar a.toggle:hover { background: #565a5d; } .navbar a.toggle:active, .navbar a.toggle.active { background: #3e4043; } } + .navbar .logo { display: inline-block; margin: 0 2.12766% 0 0; padding: 0; height: 60px; line-height: 58px; } -.navbar .logo a { display: block; padding: 0 0 0 16px; overflow: hidden; height: 60px; line-height: 58px; } +.navbar .logo a { display: block; padding: 0; overflow: hidden; height: 60px; line-height: 58px; } .navbar .logo a img { max-height: 95%; } @media only screen and (max-width: 767px) { .navbar .logo { float: left; display: inline; } .navbar .logo a { padding: 0; } .navbar .logo a img { width: auto; height: auto; max-width: 100%; } } + .navbar ul { display: table; vertical-align: middle; margin: 0; float: none; } @media only screen and (max-width: 767px) { .navbar ul { position: absolute; display: block; width: 100% !important; height: 0; max-height: 0; top: 60px; left: 0; overflow: hidden; text-align: center; background: #3e4043; } .navbar ul.active { height: auto; max-height: 600px; z-index: 999999; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-box-shadow: 0 2px 2px #252728; -moz-box-shadow: 0 2px 2px #252728; box-shadow: 0 2px 2px #252728; } } @@ -379,19 +1068,12 @@ img { -ms-interpolation-mode: bicubic; } .navbar ul li.active .dropdown ul li { min-height: 50px; border-bottom: #3e4043; } .navbar ul li.active .dropdown ul li a { color: white; border-bottom: 1px solid #313436; } .navbar ul li.active .dropdown ul li a:hover { color: #d04526; } } + @media only screen and (min-width: 768px) and (max-width: 939px) { .navbar > ul > li > .btn a { padding: 0 10px 0 10px !important; } .navbar ul > li .dropdown ul li.active .dropdown { left: -320px; } } -/**** Navbar positioning for Microsoft's browser who deserves not to be mentioned ****/ -.ie7 .navbar > ul { width: auto; } - -.ie7 .navbar, .ie7 .navbar > ul > li > a { display: block; } - -.ie7 .navbar .logo, .ie7 .navbar ul, .ie7 .navbar ul li { float: left; display: inline-block; } - -.ie7 .navbar .logo a { display: block; overflow: hidden; } - -.ie7 .navbar > ul > li .field { display: block; padding: 12px 18px 0; width: 80%; } +.navcontain { height: 80px; } +@media only screen and (max-width: 768px) { .navcontain { height: auto; } } .pretty.navbar { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7b8085), color-stop(100%, #313436)); background-image: -webkit-linear-gradient(#7b8085, #313436); background-image: -moz-linear-gradient(#7b8085, #313436); background-image: -o-linear-gradient(#7b8085, #313436); background-image: linear-gradient(#7b8085, #313436); -webkit-box-shadow: inset 0 1px 1px #7b8085, 0 1px 2px rgba(0, 0, 0, 0.8) !important; -moz-box-shadow: inset 0 1px 1px #7b8085, 0 1px 2px rgba(0, 0, 0, 0.8) !important; box-shadow: inset 0 1px 1px #7b8085, 0 1px 2px rgba(0, 0, 0, 0.8) !important; /* Remove this line if you dont want a dropshadow on your navigation*/ } @media only screen and (max-width: 767px) { .pretty.navbar a.toggle { border: 1px solid #3e4043; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7b8085), color-stop(100%, #4a4d50)); background-image: -webkit-linear-gradient(#7b8085, #4a4d50); background-image: -moz-linear-gradient(#7b8085, #4a4d50); background-image: -o-linear-gradient(#7b8085, #4a4d50); background-image: linear-gradient(#7b8085, #4a4d50); -webkit-box-shadow: inset 0 1px 2px #888d91, inset 0 -1px 1px #565a5d, inset 1px 0 1px #565a5d, inset -1px 0 1px #565a5d, 0 1px 1px #63676a; -moz-box-shadow: inset 0 1px 2px #888d91, inset 0 -1px 1px #565a5d, inset 1px 0 1px #565a5d, inset -1px 0 1px #565a5d, 0 1px 1px #63676a; box-shadow: inset 0 1px 2px #888d91, inset 0 -1px 1px #565a5d, inset 1px 0 1px #565a5d, inset -1px 0 1px #565a5d, 0 1px 1px #63676a; } @@ -403,6 +1085,14 @@ img { -ms-interpolation-mode: bicubic; } .pretty.navbar ul li.field input.search { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #191a1b), color-stop(100%, #4f5255)); background-image: -webkit-linear-gradient(#191a1b, #4f5255); background-image: -moz-linear-gradient(#191a1b, #4f5255); background-image: -o-linear-gradient(#191a1b, #4f5255); background-image: linear-gradient(#191a1b, #4f5255); border: none; -webkit-box-shadow: 0 1px 2px #888d91 !important; -moz-box-shadow: 0 1px 2px #888d91 !important; box-shadow: 0 1px 2px #888d91 !important; /* Remove this line if you dont want a dropshadow on your navigation*/ } .pretty.navbar > ul > li:first-child, .pretty.navbar .pretty.navbar > ul > li:first-child a:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } +.navbar li .dropdown { width: auto; min-width: 0px; max-width: 320px; height: 0; position: absolute; background: #fafafa; overflow: hidden; z-index: 999; } +@media only screen and (max-width: 767px) { .navbar li .dropdown .dropdown { width: 100%; max-width: 100%; position: relative; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } + .navbar li .dropdown.active .dropdown { border-bottom: 1px solid #313436; } + .navbar li .dropdown.active .dropdown ul { position: relative; top: 0; background: #36393b; min-height: 50px; max-height: 250px; height: auto; overflow: auto; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } + .navbar li .dropdown.active .dropdown ul li { min-height: 50px; border-bottom: #3e4043; } + .navbar li .dropdown.active .dropdown ul li a { color: white; border-bottom: 1px solid #313436; } + .navbar li .dropdown.active .dropdown ul li a:hover { color: #d04526; } } + .navbar li .dropdown ul { margin: 0; display: block; } .navbar li .dropdown ul > li { position: relative; display: block; width: 100%; float: left; text-align: left; height: auto; -webkit-border-radius: none; -moz-border-radius: none; -ms-border-radius: none; -o-border-radius: none; border-radius: none; } @media only screen and (min-width: 768px) and (max-width: 939px) { .navbar li .dropdown ul > li { max-width: 320px; word-wrap: break-word; } } @@ -432,14 +1122,15 @@ img { -ms-interpolation-mode: bicubic; } .subnav { display: block; width: auto; overflow: hidden; margin: 0 0 18px 0; padding-top: 4px; } .subnav li, .subnav dt, .subnav dd { float: left; display: inline; margin-left: 9px; margin-bottom: 4px; } .subnav li:first-child, .subnav dt:first-child, .subnav dd:first-child { margin-left: 0; } -.subnav dt { color: #999; font-weight: normal; } -.subnav li a, .subnav dd a { color: #05390a; font-size: 15px; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } -.subnav li.active a, .subnav dd.active a { background: #5dbb73; padding: 5px 9px; text-shadow: 0 1px 1px #77d58e; } +.subnav dt { color: #f2f2f2; font-weight: normal; } +.subnav li a, .subnav dd a { color: white; font-size: 15px; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } +.subnav li.active a, .subnav dd.active a { background: #4a4d50; padding: 5px 9px; text-shadow: 0 1px 1px #4a4d50; } /* Buttons */ .btn, .skiplink { display: inline-block; width: auto; background: #f2f2f2; -webkit-appearance: none; font-family: "Open Sans"; font-weight: 600; padding: 0 !important; text-align: center; } .btn > a, .btn input, .btn button, .skiplink > a, .skiplink input, .skiplink button { display: block; padding: 0 18px; color: white; height: 100%; } .btn input, .btn button, .skiplink input, .skiplink button { background: none; border: none; width: 100%; font-size: 100%; cursor: pointer; font-weight: 400; -webkit-appearance: none; -moz-appearance: none; appearance: none; } + .btn.xlarge, .skiplink.xlarge { font-size: 30px; font-size: 1.875rem; height: 66px; line-height: 64px; } .btn.xlarge a, .skiplink.xlarge a { position: relative; padding: 0 30px; } .btn.xlarge.icon-left a, .skiplink.xlarge.icon-left a { padding-left: 66px; } @@ -466,9 +1157,10 @@ img { -ms-interpolation-mode: bicubic; } .btn.small.icon-right a, .skiplink.small.icon-right a { padding-right: 23px; } .btn.small.icon-right a:after, .skiplink.small.icon-right a:after { right: 6.66667px; } .btn.small a, .skiplink.small a { padding: 0 10px; } -.btn.oval, .skiplink.oval { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; } -.btn.pill-left, .skiplink.pill-left { -webkit-border-radius: 500px 0 0 500px; -moz-border-radius: 500px 0 0 500px; -ms-border-radius: 500px 0 0 500px; -o-border-radius: 500px 0 0 500px; border-radius: 500px 0 0 500px; } -.btn.pill-right, .skiplink.pill-right { -webkit-border-radius: 0 500px 500px 0; -moz-border-radius: 0 500px 500px 0; -ms-border-radius: 0 500px 500px 0; -o-border-radius: 0 500px 500px 0; border-radius: 0 500px 500px 0; } +.btn.oval, .skiplink.oval { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } +.btn.pill-left, .skiplink.pill-left { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; -webkit-border-radius: 500px 0 0 500px; -moz-border-radius: 500px 0 0 500px; -ms-border-radius: 500px 0 0 500px; -o-border-radius: 500px 0 0 500px; border-radius: 500px 0 0 500px; -webkit-border-radius: 0 500px 500px 0; -moz-border-radius: 0 500px 500px 0; -ms-border-radius: 0 500px 500px 0; -o-border-radius: 0 500px 500px 0; border-radius: 0 500px 500px 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } +.btn.pill-right, .skiplink.pill-right { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } + .btn.primary, .skiplink.primary { background: #3085d6; border: 1px solid #3085d6; } .btn.primary:hover, .skiplink.primary:hover { background: #5b9ede; } .btn.primary:active, .skiplink.primary:active { background: #236bb0; } @@ -497,6 +1189,7 @@ img { -ms-interpolation-mode: bicubic; } .btn.metro.rounded, .metro .rounded.btn, .metro .rounded.skiplink, .rounded.skiplink.metro:hover, .rounded.skiplink.metro:active, .skiplink.metro.rounded { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .btn.pretty, .pretty .btn, .pretty .skiplink, .btn.pretty:hover, .skiplink.pretty:hover, .btn.pretty:active, .skiplink.pretty:active, .skiplink.pretty { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .btn.pretty.squared, .pretty .squared.btn, .pretty .squared.skiplink, .squared.skiplink.pretty:hover, .squared.skiplink.pretty:active, .skiplink.pretty.squared { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } + .btn.pretty.primary, .pretty .primary.btn, .pretty .primary.skiplink, .primary.skiplink.pretty:hover, .primary.skiplink.pretty:active, .skiplink.pretty.primary { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #85b7e7), color-stop(100%, #2a85dc)); background-image: -webkit-linear-gradient(#85b7e7, #2a85dc); background-image: -moz-linear-gradient(#85b7e7, #2a85dc); background-image: -o-linear-gradient(#85b7e7, #2a85dc); background-image: linear-gradient(#85b7e7, #2a85dc); -webkit-box-shadow: inset 0 0 3px #f0f6fc; -moz-box-shadow: inset 0 0 3px #f0f6fc; box-shadow: inset 0 0 3px #f0f6fc; border: 1px solid #1f5e9b; } .pretty .primary.btn:hover, .pretty .primary.skiplink:hover, .primary.btn.pretty:hover, .primary.skiplink.pretty:hover, .skiplink.pretty.primary:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a2d4fc), color-stop(100%, #54b2fe)); background-image: -webkit-linear-gradient(#a2d4fc, #54b2fe); background-image: -moz-linear-gradient(#a2d4fc, #54b2fe); background-image: -o-linear-gradient(#a2d4fc, #54b2fe); background-image: linear-gradient(#a2d4fc, #54b2fe); -webkit-box-shadow: inset 0 0 3px white; -moz-box-shadow: inset 0 0 3px white; box-shadow: inset 0 0 3px white; border: 1px solid #0e90f8; } .pretty .primary.btn:active, .pretty .primary.skiplink:active, .primary.btn.pretty:active, .primary.skiplink.pretty:active, .skiplink.pretty.primary:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2a85dc), color-stop(100%, #85b7e7)); background-image: -webkit-linear-gradient(#2a85dc, #85b7e7); background-image: -moz-linear-gradient(#2a85dc, #85b7e7); background-image: -o-linear-gradient(#2a85dc, #85b7e7); background-image: linear-gradient(#2a85dc, #85b7e7); -webkit-box-shadow: inset 0 0 3px white; -moz-box-shadow: inset 0 0 3px white; box-shadow: inset 0 0 3px white; } @@ -1677,11 +2370,9 @@ form ul, form ul li { margin-left: 0; list-style-type: none; } form fieldset { border-style: solid; border-width: 0.0625em; padding: 1.5625em; border-color: #d8d8d8; margin: 18px 0; } form fieldset legend { padding: 5px 10px; } -.field { position: relative; max-width: 100%; margin-bottom: 10px; vertical-align: middle; font-size: 16px; /* remove inline-block white-space — A 0px font-size = 0px of white space */ } +.field { position: relative; max-width: 100%; margin-bottom: 10px; vertical-align: middle; font-size: 16px; overflow: hidden; /* remove inline-block white-space — A 0px font-size = 0px of white space */ } .field.metro, .field .metro { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .field input, .field input[type="*"], .field textarea { max-width: 100%; width: 100%; padding: 0; margin: 0; border: none; outline: none; resize: none; -webkit-appearance: none; font-family: "Open Sans"; font-weight: 300; font-size: 16px; font-size: 1rem; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } -.field .radio, .field .checkbox { position: relative; } -.field .radio input[type="radio"], .field .checkbox input[type="checkbox"] { display: none; } .field .input { position: relative; padding: 0 10px; background: #fff; border: 1px solid #d8d8d8; height: 36px; line-height: 34px; font-size: 16px; font-size: 1rem; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .field .input.search { height: 36px; line-height: 34px; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; padding-right: 0; } .field .input.textarea { height: auto; } @@ -1744,29 +2435,36 @@ form fieldset legend { padding: 5px 10px; } .field .picker.warning select, .field .picker.warning:after { color: #f6b83f; } .field .picker.success { border-color: #58c026; color: #58c026; background: #c0eeaa; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; } .field .picker.success select, .field .picker.success:after { color: #58c026; } -.field .radio.danger, .field .checkbox.danger { color: #ca3838; } -.field .radio.danger span, .field .checkbox.danger span { border-color: #ca3838; color: #ca3838; background: #f0c5c5; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; } -.field .radio.warning, .field .checkbox.warning { color: #f6b83f; } -.field .radio.warning span, .field .checkbox.warning span { border-color: #f6b83f; color: #f6b83f; background: #fef7ea; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; } -.field .radio.success, .field .checkbox.success { color: #58c026; color: #555555; } -.field .radio.success i, .field .checkbox.success i { color: #58c026; } -.field .radio.success span, .field .checkbox.success span { border-color: #58c026; color: #58c026; background: #c0eeaa; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; } -.field .radio span, .field .checkbox span { display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; border: solid 1px #ccc; background: #fefefe; } -.field .radio span { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } -.field .checkbox span { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } -.field .radio.checked i, .field .checkbox.checked i { position: absolute; top: -1px; left: -8px; line-height: 16px; } + +.field .text input[type="search"] { -webkit-appearance: textfield; } + +.no-js .radio input { -webkit-appearance: radio; margin-left: 1px; } +.no-js .checkbox input { -webkit-appearance: checkbox; } +.no-js .radio input, .no-js .checkbox input { display: inline-block; width: 16px; } + +.js .field .radio, .js .field .checkbox { position: relative; } +.js .field .radio.danger, .js .field .checkbox.danger { color: #ca3838; } +.js .field .radio.danger span, .js .field .checkbox.danger span { border-color: #ca3838; color: #ca3838; background: #f0c5c5; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; } +.js .field .radio.warning, .js .field .checkbox.warning { color: #f6b83f; } +.js .field .radio.warning span, .js .field .checkbox.warning span { border-color: #f6b83f; color: #f6b83f; background: #fef7ea; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; } +.js .field .radio.success, .js .field .checkbox.success { color: #58c026; color: #555555; } +.js .field .radio.success i, .js .field .checkbox.success i { color: #58c026; } +.js .field .radio.success span, .js .field .checkbox.success span { border-color: #58c026; color: #58c026; background: #c0eeaa; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; } +.js .field .radio.checked i, .js .field .checkbox.checked i { position: absolute; top: -1px; left: -8px; line-height: 16px; } +.js .field .radio span, .js .field .checkbox span { display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; border: solid 1px #ccc; background: #fefefe; } +.js .field .radio input[type="radio"], .js .field .radio input[type="checkbox"], .js .field .checkbox input[type="radio"], .js .field .checkbox input[type="checkbox"] { display: none; } +.js .field .radio span { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } +.js .field .checkbox span { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .field .text input[type="search"] { -webkit-appearance: textfield; } /* Form Picker Element (').attr($.extend(g(this),{type:'text'}))}q.removeAttr('name').data({'placeholder-password':true,'placeholder-id':o}).bind('focus.placeholder',b);p.data({'placeholder-textinput':q,'placeholder-id':o}).before(q)}p=p.removeAttr('id').hide().prev().attr('id',o).show()}p.addClass('placeholder');p[0].value=p.attr('placeholder')}else{p.removeClass('placeholder')}}}(this,document,jQuery)); diff --git a/sass/_base.scss b/sass/_base.scss index 5905d77..83fc5eb 100644 --- a/sass/_base.scss +++ b/sass/_base.scss @@ -25,13 +25,6 @@ html, body { height: 100%; } -.ie9 { - font-family: $font-family; - * { - font-family: $font-family; - } -} - .hide { display: none; } @@ -40,32 +33,15 @@ html, body { display: block; } -.fixed { - position: fixed; - &.pinned { - position: absolute; - } - @include respond(portrait-tablets) { - position: relative !important; - top: auto !important; - left: auto !important; - } -} +// .fixed elements will be static at supplied breakpoint +// set arg to false for permanent .fixed elements +@include fixed(portrait-tablets); -.unfixed { - position: relative !important; - top: auto !important; - left: auto !important; -} - -.text-center { - text-align: center; -} +.text-center { @extend %text-center; } +.text-left { @extend %text-left; } +.text-right { @extend %text-right; } -.text-left { - text-align: left; -} - -.text-right { - text-align: right; -} +// Partial to align Text Left or Right +%text-center { text-align: center; } +%text-left { text-align: left; } +%text-right { text-align: right; } diff --git a/sass/_grid.scss b/sass/_grid.scss index 2db88ed..137bf45 100755 --- a/sass/_grid.scss +++ b/sass/_grid.scss @@ -19,17 +19,15 @@ .row { width: 100%; - max-width: $row-max-width; + max-width: $row-max-width + 40px; min-width: $min-device-width; margin: 0 auto; - @include respond(document-width) { - padding: 0 $gutter-in-px; - } + padding-left: 20px; + padding-right: 20px; .row { min-width: 0px; - @include respond(document-width) { - padding: 0; - } + padding-left: 0; + padding-right: 0; } } @@ -68,9 +66,9 @@ } } -/* Push Classes */ +/* Push and Pull Classes */ -// Generate Push Classes +// Generate Push and Pull Classes .row { @for $i from 1 through $cols - 1 { .push_#{number-as-word($i)} { @@ -79,6 +77,27 @@ margin-left: push_x($i, true); } } + .pull_#{number-as-word($i)} { + // pull classes need to know the width of the container being pulled + @for $j from 1 through $cols - 1 { + @if $j == 1 { + &.one.column { + margin-left: pull_x($i, $j); + &:first-child { + margin-left: 0; + } + } + } + @else { + &.#{number-as-word($j)}.columns { + margin-left: pull_x($i, $j); + &:first-child { + margin-left: 0; + } + } + } + } + } } } @@ -109,7 +128,7 @@ } } -/* Hybrid Push Classes */ +/* Hybrid Push and Pull Classes */ // Generate Hybrid Push Classes .#{number-as-word($hybrid)}.colgrid .row { @@ -120,6 +139,27 @@ margin-left: push_x($i, true, true); } } + .pull_#{number-as-word($i)} { + // pull classes need to know the width of the container being pulled + @for $j from 1 through $hybrid - 1 { + @if $j == 1 { + &.one.column { + margin-left: pull_x($i, $j, true); + &:first-child { + margin-left: 0; + } + } + } + @else { + &.#{number-as-word($j)}.columns { + margin-left: pull_x($i, $j, true); + &:first-child { + margin-left: 0; + } + } + } + } + } } } @@ -134,9 +174,9 @@ } } -.pull_right { float: right; } +.pull_right { @include pull(right); } -.pull_left { float: left; } +.pull_left { @include pull(left); } img, object, embed { max-width: 100%; @@ -205,16 +245,16 @@ img { .valign { display: table; width: 100%; - > div { + > div, > article, > section, > figure { display: table-cell; vertical-align: middle; }​ > article { - display: table-cell; - vertical-align: middle; + } } + /* Mobile */ @include respond(all-phones) { @@ -267,7 +307,9 @@ img { } } [class^="push_"], - [class*="push_"] { + [class*="push_"], + [class^="pull_"], + [class*="pull_"] { margin-left: 0 !important; } } diff --git a/sass/_shame.scss b/sass/_shame.scss new file mode 100644 index 0000000..52f4157 --- /dev/null +++ b/sass/_shame.scss @@ -0,0 +1,36 @@ +/* shame */ + +.ie8 { + //double input field fix + .xxwide, + .xwide, + .wide, + .normal, + .narrow, + .xnarrow { + display: inline; + &+input { + display: inline; + margin: 0 0 0 -.25em; + } + } + + // tooltip 'fade' fix + .ttip { + &:before, &:after { + display: none; + } + &:hover { + &:before, &:after { + display: block; + } + } + } +} + +.ie9 { + // IE9 checkbox fix + .radio.checked i, .checkbox.checked i { + top: 0px; + } +} diff --git a/sass/functions/_all.scss b/sass/functions/_all.scss index 5b0dda2..f79ef1d 100644 --- a/sass/functions/_all.scss +++ b/sass/functions/_all.scss @@ -3,13 +3,21 @@ @import "breakpoints"; @import "strip-units"; @import "grid-calc"; +@import "em"; +@import "even"; // Global Gumby Mixins @import "clearfix"; @import "typography"; +@import "fixed"; +@import "palette"; +@import "shapes"; +@import "palette"; @import "responsivity"; @import "line-and-height"; @import "height-calc"; @import "semantic-grid"; +@import "tooltips"; @import "visibility"; +@import "fancytiles"; diff --git a/sass/functions/_buttons.scss b/sass/functions/_button-size.scss similarity index 100% rename from sass/functions/_buttons.scss rename to sass/functions/_button-size.scss diff --git a/sass/functions/_em.scss b/sass/functions/_em.scss new file mode 100644 index 0000000..0bf3284 --- /dev/null +++ b/sass/functions/_em.scss @@ -0,0 +1,11 @@ +// Convert pixels to ems + +@function em($size-in-px, $context: 16) { + @if not unitless($size-in-px) { + $size-in-px: strip-units($size-in-px); + } + @if not unitless($context) { + $parent: strip-units($context); + } + @return ($size-in-px / $context) * 1em; +} \ No newline at end of file diff --git a/sass/functions/_even.scss b/sass/functions/_even.scss new file mode 100644 index 0000000..62c4e4c --- /dev/null +++ b/sass/functions/_even.scss @@ -0,0 +1,10 @@ +// test for even numbers, do something with the result + +@function even($number) { + @if ($number % 2 == 0) { + @return true; + } + @else { + @return false; + } +} \ No newline at end of file diff --git a/sass/functions/_fancytiles.scss b/sass/functions/_fancytiles.scss new file mode 100644 index 0000000..50f8f47 --- /dev/null +++ b/sass/functions/_fancytiles.scss @@ -0,0 +1,26 @@ +@function divide-cols($colnum) { + @return 100%/$colnum; +} + + +@mixin fancytiles($desktop-columns, $tablet-columns: $desktop-columns, $mobile-columns: 1, $small-break: $min-device-width, $medium-break: $tablet-device-width, $large-break: $row-max-width) { + + // These styles apply to all shift-columns + display: inline-block; + float: left; + padding-left: $gutter / 2; + padding-right: $gutter / 2; + + @include respond("min-width: #{$small-break}") { + width: divide-cols($mobile-columns); + } + + @include respond("min-width: #{$medium-break}") { + width: divide-cols($tablet-columns); + } + + @include respond("min-width: #{$large-break}") { + width: divide-cols($desktop-columns); + } + +} \ No newline at end of file diff --git a/sass/functions/_fixed.scss b/sass/functions/_fixed.scss new file mode 100644 index 0000000..79a7c1c --- /dev/null +++ b/sass/functions/_fixed.scss @@ -0,0 +1,21 @@ +@mixin fixed($removal-breakpoint) { + .fixed { + position: fixed; + &.pinned { + position: absolute; + } + @if $removal-breakpoint != false { + @include respond($removal-breakpoint) { + position: relative !important; + top: auto !important; + left: auto !important; + } + } + } + + .unfixed { + position: relative !important; + top: auto !important; + left: auto !important; + } +} diff --git a/sass/functions/_grid-calc.scss b/sass/functions/_grid-calc.scss index b7f1975..292cb33 100755 --- a/sass/functions/_grid-calc.scss +++ b/sass/functions/_grid-calc.scss @@ -38,6 +38,19 @@ $gutter: percentage($gutter-in-px / $row-max-width); // 2.1276596 } } +// Calculate Pull Class Margins +// note absence of first-child; first-child column containers should not be pulled +// $num is number of columns to be pulled +// $width is number of columns of container that is being pulled +@function pull_x($num, $width, $is-hybrid: false) { + @if $is-hybrid { + @return -((oneCol(true) * $num) + ($gutter * ($num - 1)) + (oneCol(true) * $width) + ($gutter * ($width - 1)) + $gutter); // Pull width + column width + gutter + } + @else { + @return -((oneCol() * $num) + ($gutter * ($num - 1)) + (oneCol() * $width) + ($gutter * ($width - 1)) + $gutter); // Pull width + column width + gutter + } +} + // Calculate Centered Class Margins @function centered($num, $hybrid-grid: false) { @if $hybrid-grid{ diff --git a/sass/functions/_palette.scss b/sass/functions/_palette.scss new file mode 100644 index 0000000..a6fb3f0 --- /dev/null +++ b/sass/functions/_palette.scss @@ -0,0 +1,76 @@ +// Color Pallete + +@function getColor($key, $state: false, $list: $ui-coloring) { + @each $color in $list { + @if $key == nth($color, 1) and $state == default { + @return nth($color, 2); + } + @else if $key == nth($color, 1) and $state == hover { + @return nth($color, 3); + } + @else if $key == nth($color, 1) { + @return nth($color, 1); + } + } + @return false; +} + +@mixin palette($shade, $palette-text-color:false) { + @if $shade == getColor($shade) { + @if $palette-text-color != false { + color: $palette-text-color; + } + @else { + color: lighten(getColor($shade, default), 80%); + } + background: getColor($shade, default); + border: 1px solid getColor($shade, default); + &:hover { + background: getColor($shade, hover); + border: 1px solid darken(getColor($shade, hover), 3%); + } + &:active { + background: darken(getColor($shade, default), 10%); + border: 1px solid darken(getColor($shade, default), 10%); + } + + @if $shade == default { + @if $palette-text-color != false { + color: $palette-text-color; + } + @else { + color: darken(getColor($shade, default), 61.5%); + } + border: 1px solid getColor($shade, default); + &:hover { + border: 1px solid darken(getColor($shade, hover), 5%); + } + } + @if $shade == warning { + @if $palette-text-color != false { + color: $palette-text-color; + } + @else { + color: darken(getColor($shade, hover), 40%); + } + } + } + @else { + @if $palette-text-color != false { + color: $palette-text-color; + } + @else { + color: lighten($shade, 80%); + } + background: $shade; + border: 1px solid $shade; + &:hover { + background: lighten($shade, 30%); + border: 1px solid lighten($shade, 27%); + } + &:active { + background: darken($shade, 10%); + border: 1px solid darken($shade, 10%); + } + } +} \ No newline at end of file diff --git a/sass/functions/_responsivity.scss b/sass/functions/_responsivity.scss index 7aab35d..233f3ae 100644 --- a/sass/functions/_responsivity.scss +++ b/sass/functions/_responsivity.scss @@ -29,6 +29,6 @@ @media print { @content; } } @else { - @media only screen and ($media) { @content; } + @media only screen and ('#{$media}') { @content; } } } diff --git a/sass/functions/_semantic-grid.scss b/sass/functions/_semantic-grid.scss index ae3f2f9..b7c5ab0 100644 --- a/sass/functions/_semantic-grid.scss +++ b/sass/functions/_semantic-grid.scss @@ -7,24 +7,20 @@ @mixin row($nested: false) { @if $nested == nested { - width: auto; - min-width: 0px; - max-width: none; - @extend %clearfix; + @include nestedRow(); } @else { width: 100%; - max-width: $row-max-width; + max-width: $row-max-width + 40px; min-width: $min-device-width; margin: 0 auto; + padding-left: 20px; + padding-right: 20px; @extend %clearfix; } > *:first-child { margin-left: 0px; } - @include respond(document-width) { - padding: 0 20px; - } @include respond(all-phones) { width: auto; min-width: 0; @@ -39,17 +35,19 @@ width: auto; min-width: 0px; max-width: none; + padding-left: 0; + padding-right: 0; @extend %clearfix; } -@mixin column($columns:$columns, $alignment: false, $behavior: false) { +@mixin column($columns:$columns, $alignment: false, $behavior: false, $hybrid: false) { + @extend %columnconfig; @if $alignment == center { - @extend %columnconfig; float: none; margin-left: auto !important; margin-right: auto !important; - width: columns($columns); + width: columns($columns, $hybrid); @include respond(all-phones) { float: left; margin-left: 0; @@ -57,17 +55,15 @@ } } @else if $behavior == collapse { - @extend %columnconfig; @extend %collapse; - width: columns($columns); + width: columns($columns, $hybrid); @include respond(all-phones) { float: left; width: 100%; } } @else { - @extend %columnconfig; - width: columns($columns); + width: columns($columns, $hybrid); @include respond(all-phones) { float: left; margin-left: 0; @@ -77,36 +73,7 @@ } @mixin hybrid($columns:$columns, $alignment: false, $behavior: false) { - @if $alignment == center { - @extend %columnconfig; - float: none; - margin-left: auto !important; - margin-right: auto !important; - width: columns($columns, true); - @include respond(all-phones) { - float: left; - margin-left: 0; - width: 100%; - } - } - @else if $behavior == collapse { - @extend %columnconfig; - @extend %collapse; - width: columns($columns, true); - @include respond(all-phones) { - float: left; - width: 100%; - } - } - @else { - @extend %columnconfig; - width: columns($columns, true); - @include respond(all-phones) { - float: left; - margin-left: 0; - width: 100%; - } - } + @include column($columns, $alignment, $behavior, true); } @mixin push($columns, $hybrid-grid: false) { @@ -136,9 +103,23 @@ } } -@mixin pull($direction:false) { +@mixin pull($direction: false, $columns: 0, $width: 0, $hybrid-grid: false) { @if $direction == left { @extend %pull-left; + @if ($columns > 0 and $width > 0) { + @if ($hybrid-grid == hybrid) { + margin-left: pull_x($columns, $width, true); + &:first-child { + margin-left: 0; + } + } + @else { + margin-left: pull_x($columns, $width); + &:first-child { + margin-left: 0; + } + } + } } @elseif $direction == none { @extend %pull-none; diff --git a/sass/functions/_shapes.scss b/sass/functions/_shapes.scss new file mode 100644 index 0000000..828b9c1 --- /dev/null +++ b/sass/functions/_shapes.scss @@ -0,0 +1,19 @@ +// Shapes + +@mixin shape($shape: square, $shape-radius: false) { + @if $shape == oval, circle { + @include border-radius(1000px); + } + @if $shape == pill-left { + @include border-radius(500px 0 0 500px); + } + @if $shape == pill-left { + @include border-radius(0 500px 500px 0); + } + @if $shape-radius != false { + @include border-radius($shape-radius); + } + @else { + @include border-radius(0); + } +} \ No newline at end of file diff --git a/sass/functions/_tooltips.scss b/sass/functions/_tooltips.scss new file mode 100644 index 0000000..d148956 --- /dev/null +++ b/sass/functions/_tooltips.scss @@ -0,0 +1,96 @@ +// CSS Tooltips + +@mixin tooltip($tt-min-width, $tt-bgcolor, $tt-position) { + position: relative; + + &:after { + display: block; + background: $tt-bgcolor; + border: 1px solid $tt-bgcolor; + border-bottom: 0; + @include border-radius(3px); + padding: em(8) em(12); + width: auto; + min-width: $tt-min-width; + max-width: 500px; + position: absolute; + @if $tt-position == "bottom" { + @if $tt-align == "right" { right: 0 } @else { left: 0; } + top: 101%; + margin-top: 8px; + } @else if $tt-position == "top" { + @if $tt-align == "right" { right: 0 } @else { left: 0; } + bottom: 101%; + margin-bottom: 8px; + } @else if $tt-position == "left" { + right: 101%; + top: -35%; + margin-right: 8px; + } @else if $tt-position == "right" { + left: 101%; + top: -35%; + margin-left: 8px; + } + + @if $tt-align == "right" { + text-align: right; + } @else if $tt-align == "left" { + text-align: left; + } + + color: #fff; + content: attr(data-tooltip); + line-height: 1.5; + font-size: em(14.4); + + @include transition(all 0.1s ease); + @include opacity(0); + pointer-events: none; + + @if $tt-pretty != "no" { + @include background-image(linear-gradient($tt-position, lighten($tt-bgcolor, 12.5%), $tt-bgcolor)); + @include box-shadow(0 0 5px 0 rgba($tt-bgcolor,.25)); + } + } + + &:before { + content: " "; + width: 0; + height: 0; + position: absolute; + @if $tt-position == "bottom" { + top: 101%; + @if $tt-align == "right" { right: 8px } @else { left: 8px; } + border-bottom: 8px solid $tt-bgcolor !important; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + } @else if $tt-position == "top" { + bottom: 101%; + @if $tt-align == "right" { right: 8px } @else { left: 8px; } + border-top: 8px solid $tt-bgcolor !important; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + } @else if $tt-position == "left" { + top: 3px; + right: 101%; + border-left: 8px solid $tt-bgcolor !important; + border-top: 8px solid transparent; + border-bottom: 8px solid transparent; + } @else if $tt-position == "right" { + top: 3px; + left: 101%; + border-right: 8px solid $tt-bgcolor !important; + border-top: 8px solid transparent; + border-bottom: 8px solid transparent; + } + @include transition(all 0.1s ease); + @include opacity(0); + pointer-events: none; + } + + &:hover:after, + &:hover:before { + @include transition(all 0.1s ease); + @include opacity(1); + } +} diff --git a/sass/functions/_typography.scss b/sass/functions/_typography.scss index 6b9eee4..2a37e73 100644 --- a/sass/functions/_typography.scss +++ b/sass/functions/_typography.scss @@ -12,4 +12,4 @@ font-size: $size + px; font-size: ($size / strip-units($base-font-size)) + rem; } -} +} \ No newline at end of file diff --git a/sass/gumby.scss b/sass/gumby.scss index 625d633..0dd748b 100644 --- a/sass/gumby.scss +++ b/sass/gumby.scss @@ -33,5 +33,6 @@ @import "typography"; @import "grid"; @import "ui/all"; +@import "shame"; -@import "custom"; \ No newline at end of file +@import "custom"; diff --git a/sass/ui/_all.scss b/sass/ui/_all.scss index b05ce34..4165433 100644 --- a/sass/ui/_all.scss +++ b/sass/ui/_all.scss @@ -8,3 +8,4 @@ @import "video"; @import "toggles"; @import "tables"; +@import "tooltips"; diff --git a/sass/ui/_buttons.scss b/sass/ui/_buttons.scss index da5fc8a..025ee9e 100644 --- a/sass/ui/_buttons.scss +++ b/sass/ui/_buttons.scss @@ -1,8 +1,9 @@ /* Buttons */ // Buttons -@import "../functions/buttons"; +@import "../functions/button-size"; +// Button structure .btn, .skiplink { display: inline-block; width: auto; @@ -31,7 +32,10 @@ font-weight: $type-font-weight; @include appearance(none); } +} +// Button Shapes & Sizes +.btn, .skiplink { &.xlarge { @include button-size(xlarge); } @@ -50,19 +54,22 @@ padding: 0 ms(-1); } } - + &.oval { - @include border-radius(1000px); + @include shape(oval); } &.pill-left { - @include border-radius(500px 0 0 500px); + @include shape(pill-left); } &.pill-right { - @include border-radius(0 500px 500px 0); + @include shape(pill-right); } +} +// Button Colors & Styles +.btn, .skiplink { @each $shade in $ui-coloring { &.#{nth($shade, 1)} { background: nth($shade, 2); @@ -113,7 +120,10 @@ } } } +} +// Buttons with Gradients +.btn, .skiplink { &.pretty { @each $grade in $ui-coloring { &.#{nth($grade, 1)} { diff --git a/sass/ui/_forms.scss b/sass/ui/_forms.scss index 402b578..2d59cb4 100644 --- a/sass/ui/_forms.scss +++ b/sass/ui/_forms.scss @@ -43,6 +43,7 @@ form { vertical-align: middle; // Font-size 16px for weird form style error font-size: 16px; + overflow: hidden; &.metro, .metro { @include border-radius(0); } @@ -60,12 +61,6 @@ form { @include font-size($norm); @include box-shadow(none); } - .radio, .checkbox { - position: relative; - } - .radio input[type="radio"], .checkbox input[type="checkbox"] { - display: none; - } .input { position: relative; padding: 0 10px; @@ -283,8 +278,29 @@ form { } } } +} + +.field .text input[type="search"] { + -webkit-appearance: textfield; +} - .radio, & .checkbox { +// checkboxes/radio buttons only styled where JS supported +.no-js { + .radio input { + -webkit-appearance: radio; + margin-left: 1px; + } + .checkbox input { + -webkit-appearance: checkbox; + } + .radio input, .checkbox input { + display: inline-block; + width: 16px; + } +} + +.js .field { + .radio, .checkbox { @each $error in danger $danger-color, warning $warning-color, success $success-color { &.#{nth($error, 1)} { color: nth($error, 2); @@ -300,16 +316,25 @@ form { } } } - } - - .radio span, & .checkbox span { - display: inline-block; - width: 16px; - height: 16px; position: relative; - top: 2px; - border: solid 1px #ccc; - background: #fefefe; + &.checked i { + position: absolute; + top: -1px; + left: -8px; + line-height: 16px; + } + span { + display: inline-block; + width: 16px; + height: 16px; + position: relative; + top: 2px; + border: solid 1px #ccc; + background: #fefefe; + } + input[type="radio"], input[type="checkbox"] { + display: none; + } } .radio span { @include border-radius(8px); @@ -317,12 +342,6 @@ form { .checkbox span { @include border-radius(3px); } - .radio.checked i, .checkbox.checked i { - position: absolute; - top: -1px; - left: -8px; - line-height: 16px; - } } .field .text input[type="search"] { @@ -346,6 +365,7 @@ form { @include background-image(linear-gradient(lighten($default-color, 20%), $default-color)); &:after { content: "\25BE"; + font-family: $icons; z-index: 0; position:absolute; right: 8%; @@ -377,10 +397,3 @@ form { } } -// IE9 fix - seems no other way around this :( -.ie9 { - .radio.checked i, .checkbox.checked i { - top: 0px; - } -} - diff --git a/sass/ui/_navbar.scss b/sass/ui/_navbar.scss index 44a2720..c82ff04 100644 --- a/sass/ui/_navbar.scss +++ b/sass/ui/_navbar.scss @@ -11,8 +11,8 @@ display: block; margin-bottom: 20px; background: $navbar-color; // Change this color in settings to change the navbar color + position: relative; @include respond(all-phones) { - position: relative; border: none; .column, .columns { min-height: 0; @@ -20,10 +20,12 @@ } &.fixed { - top: 0; - left: 0; + position: fixed; z-index: 99999; } + &.pinned { + position: absolute; + } a.toggle { display: none; @@ -47,157 +49,159 @@ background: darken($navbar-color, 5%); } } - } - .logo { - display: inline-block; - margin: 0 $gutter 0 0; +} + +.navbar .logo { + display: inline-block; + margin: 0 $gutter 0 0; + padding: 0; + @include line-and-height(height-calc($larger - 3)); + a { + display: block; padding: 0; + overflow: hidden; @include line-and-height(height-calc($larger - 3)); + img { + max-height: 95%; + } + } + + // Navbar Logo Mobile Styles + @include respond(all-phones) { + float: $default-float; + display: inline; a { - display: block; - padding: 0 0 0 $norm; - overflow: hidden; - @include line-and-height(height-calc($larger - 3)); + padding: 0; img { - max-height: 95%; + width: auto; + height: auto; + max-width: 100%; } } + } +} - // Navbar Logo Mobile Styles - @include respond(all-phones) { - float: $default-float; - display: inline; - a { - padding: 0; - img { - width: auto; - height: auto; - max-width: 100%; - } - } +.navbar ul { + display: table; + vertical-align: middle; + margin: 0; + float: none; + + // Navbar Navigation List Mobile Specific Styles + @include respond(all-phones) { + position: absolute; + display: block; + width: 100% !important; + height: 0; + max-height: 0; + top: 60px; + left: 0; + overflow: hidden; + text-align: center; + background: darken($navbar-color, 5%); + &.active { + height: auto; + max-height: 600px; + z-index: 999999; + @include transition-duration(.5s); + @include box-shadow(0 2px 2px darken($navbar-color, 15%)); } } - ul { - display: table; - vertical-align: middle; + li { + display: table-cell; + text-align: center; + padding-bottom: 0; margin: 0; - float: none; + @include line-and-height(height-calc($larger - 3)); - // Navbar Navigation List Mobile Specific Styles + // Navbar List Item Mobile Specific Styles @include respond(all-phones) { - position: absolute; display: block; - width: 100% !important; - height: 0; - max-height: 0; - top: 60px; - left: 0; - overflow: hidden; - text-align: center; - background: darken($navbar-color, 5%); - &.active { - height: auto; - max-height: 600px; - z-index: 999999; - @include transition-duration(.5s); - @include box-shadow(0 2px 2px darken($navbar-color, 15%)); - } + position: relative; + min-height: 50px; + max-height: 320px; + height: auto; + width: 100%; + border-right: 0 !important; + @include box-shadow(none); + @include transition-duration(.5s); } - li { - display: table-cell; - text-align: center; - padding-bottom: 0; - margin: 0; + > a { + display: block; + padding: 0 ms(0); + white-space: nowrap; + color: $navbar-link-color; + text-shadow: 0 1px 2px darken($navbar-color, 20%), + 0 1px 0 darken($navbar-color, 20%); @include line-and-height(height-calc($larger - 3)); - - // Navbar List Item Mobile Specific Styles - @include respond(all-phones) { - display: block; - position: relative; - min-height: 50px; - max-height: 320px; - height: auto; - width: 100%; - border-right: 0 !important; - @include box-shadow(none); - @include transition-duration(.5s); - } - - > a { - display: block; - padding: 0 ms(0); - white-space: nowrap; - color: $navbar-link-color; - text-shadow: 0 1px 2px darken($navbar-color, 20%), - 0 1px 0 darken($navbar-color, 20%); - @include line-and-height(height-calc($larger - 3)); - @include font-size($norm); - i.icon-popup { - position: absolute; - } + @include font-size($norm); + i.icon-popup { + position: absolute; } - .btn { - border-color: darken($navbar-color, 30%) !important; + } + .btn { + border-color: darken($navbar-color, 30%) !important; + } + &.field { + margin-bottom: 0 !important; + margin-right: 0; + @include respond(all-phones) { + padding: 0 $gutter-in-px; } - &.field { - margin-bottom: 0 !important; - margin-right: 0; - @include respond(all-phones) { - padding: 0 $gutter-in-px; - } - input.search { - background: darken($navbar-color, 20%); - border: none; - color: $default-color; - } + input.search { + background: darken($navbar-color, 20%); + border: none; + color: $default-color; } + } + .dropdown { + width: auto; + min-width: 0px; + max-width: $min-device-width; + height: 0; + position: absolute; + background: lighten($default-color, 3%); + overflow: hidden; + z-index: 999; + } + // Navigation Dropdown Mobile Specific Styles + @include respond(all-phones) { .dropdown { - width: auto; - min-width: 0px; - max-width: $min-device-width; - height: 0; - position: absolute; - background: lighten($default-color, 3%); - overflow: hidden; - z-index: 999; + width: 100%; + max-width: 100%; + position: relative; + @include box-shadow(none !important); } - // Navigation Dropdown Mobile Specific Styles - @include respond(all-phones) { - .dropdown { - width: 100%; - max-width: 100%; - position: relative; - @include box-shadow(none !important); - } - &.active .dropdown { - border-bottom: 1px solid darken($navbar-color, 10%); - } - &.active .dropdown ul { - position: relative; - top: 0; - background: darken($navbar-color, 8%); + &.active .dropdown { + border-bottom: 1px solid darken($navbar-color, 10%); + } + &.active .dropdown ul { + position: relative; + top: 0; + background: darken($navbar-color, 8%); + min-height: 50px; + max-height: 250px; + height: auto; + overflow: auto; + @include box-shadow(none !important); + li { min-height: 50px; - max-height: 250px; - height: auto; - overflow: auto; - @include box-shadow(none !important); - li { - min-height: 50px; - border-bottom: darken($navbar-color, 5%); - a { - color: $white; - border-bottom: 1px solid darken($navbar-color, 10%); - &:hover {color: $body-link-color;} - } + border-bottom: darken($navbar-color, 5%); + a { + color: $white; + border-bottom: 1px solid darken($navbar-color, 10%); + &:hover {color: $body-link-color;} } } } } } +} +.navbar { // Mobile Only Navbar Styles @include respond(tablets) { > ul > li > .btn a { @@ -207,24 +211,14 @@ left: -$min-device-width; } } - } - - - -/**** Navbar positioning for Microsoft's browser who deserves not to be mentioned ****/ - -.ie7 .navbar > ul { width: auto; } - -.ie7 .navbar, .ie7 .navbar > ul > li > a { display: block; } - -.ie7 .navbar .logo, .ie7 .navbar ul, .ie7 .navbar ul li { float: left; display: inline-block; } - -.ie7 .navbar .logo a { display: block; overflow: hidden; } - -.ie7 .navbar > ul > li .field { display: block; padding: 12px 18px 0; width: 80%; } - +.navcontain { + height: $navcontain-height; + @include respond(portrait-tablets) { + height: auto; + } +} // Pretty Navigation Styles @@ -273,6 +267,48 @@ // Dropdown menu styles +.navbar li .dropdown { + width: auto; + min-width: 0px; + max-width: $min-device-width; + height: 0; + position: absolute; + background: lighten($default-color, 3%); + overflow: hidden; + z-index: 999; + // Navigation Dropdown Mobile Specific Styles + @include respond(all-phones) { + .dropdown { + width: 100%; + max-width: 100%; + position: relative; + @include box-shadow(none !important); + } + &.active .dropdown { + border-bottom: 1px solid darken($navbar-color, 10%); + } + &.active .dropdown ul { + position: relative; + top: 0; + background: darken($navbar-color, 8%); + min-height: 50px; + max-height: 250px; + height: auto; + overflow: auto; + @include box-shadow(none !important); + li { + min-height: 50px; + border-bottom: darken($navbar-color, 5%); + a { + color: $white; + border-bottom: 1px solid darken($navbar-color, 10%); + &:hover {color: $body-link-color;} + } + } + } + } +} + .navbar li .dropdown ul { margin: 0; display: block; @@ -392,18 +428,18 @@ } } dt { - color: #999; + color: $default-color; font-weight: normal; } li a, dd a { - color: #05390a; + color: $navbar-link-color; font-size: 15px; text-decoration: none; @include border-radius(4px); } li.active a, dd.active a { - background: #5dbb73; + background: $navbar-color; padding: 5px 9px; - text-shadow: 0 1px 1px #77d58e; + text-shadow: 0 1px 1px $navbar-color; } } diff --git a/sass/ui/_tabs.scss b/sass/ui/_tabs.scss index 0ee305c..1c8269f 100644 --- a/sass/ui/_tabs.scss +++ b/sass/ui/_tabs.scss @@ -1,11 +1,21 @@ /* Tabs */ -.tabs { +.tabs { display: block; - .tab-nav { - margin: 0; +} + +.tab-nav { + margin: 0; + padding: 0; + border-bottom: 1px solid darken($default-color, 5%); + > li { + display: inline-block; + width: auto; padding: 0; - border-bottom: 1px solid darken($default-color, 5%); + margin: 0 $gutter 0 0; + cursor: default; + top: 1px; + @include box-shadow(0 1px 0 $white); > li { display: inline-block; width: auto; @@ -47,63 +57,100 @@ } } } - .tab-content { - display: none; - padding: 20px 10px; - &.active { - display: block; +} + +.tab-nav > li:last-child { + margin-right: 0; +} + +.tab-nav > li > a { + display: block; + width: auto; + padding: 0 $norm; + margin: 0; + color: $body-font-color; + font-family: $font-family; + font-weight: $tabs-font-weight; + border: 1px solid darken($default-color, 5%); + border-width: 1px 1px 0 1px; + text-shadow: 0 1px 1px lighten($default-color, 5%); + background: $default-color; + cursor: pointer; + @include border-radius($button-radius $button-radius 0 0); + @include line-and-height($tab-height); + &:hover { + text-decoration: none; + background: lighten($default-color, 1%); + } + &:active { + background: darken($default-color, 2%); + } +} + +.tab-nav > li.active > a { + @include line-and-height($tab-height + 1); + background: $white; +} + +.tabs.pill .tab-nav { + width: 100%; /* remove if you dont want the tabs to span the full container width */ + display: table; + overflow: hidden; + border: 1px solid darken($default-color, 5%); + @include border-radius($button-radius); + > li { + display: table-cell; + margin: 0; + margin-left: -4px; + text-align: center; + top: 0; + &:first-child { + margin-left: 0; + } + > a { + border: none; + border-right: 1px solid darken($default-color, 5%); + @include border-radius(0); + @include line-and-height($tab-height); + } + &:last-child > a { + border-right:none; } } - &.pill .tab-nav { - width: 100%; /* remove if you dont want the tabs to span the full container width */ - display: table; - overflow: hidden; - border: 1px solid darken($default-color, 5%); - @include border-radius($button-radius); +} + +.tab-content { + display: none; + padding: 20px 10px; + &.active { + display: block; + } +} + +.tabs.vertical { + .tab-nav { + border: none; > li { - display: table-cell; + display: block; margin: 0; - margin-left: -4px; - text-align: center; - top: 0; - &:first-child { - margin-left: 0; + margin-bottom: 5px; + &.active { + position: relative; + z-index: 99; + > a { + border-right: 1px solid $global-bg-color; + } } > a { - border: none; - border-right: 1px solid darken($default-color, 5%); - @include border-radius(0); - @include line-and-height($tab-height); - } - &:last-child > a { - border-right:none; + border: 1px solid darken($default-color, 5%); + @include border-radius($button-radius 0 0 $button-radius); } } } - &.vertical { - .tab-nav { - border: none; - > li { - display: block; - margin: 0; - margin-bottom: 5px; - &.active { - position: relative; - z-index: 99; - > a { - border-right: 1px solid $global-bg-color; - } - } - > a { - border: 1px solid darken($default-color, 5%); - @include border-radius($button-radius 0 0 $button-radius); - } - } - } - .tab-content { - padding: 10px 0 30px 20px; - margin-left: -1px; - border-left: 1px solid darken($default-color, 5%); - } + .tab-content { + padding: 10px 0 30px 20px; + margin-left: -1px; + border-left: 1px solid darken($default-color, 5%); } } + diff --git a/sass/ui/_toggles.scss b/sass/ui/_toggles.scss index a9399d1..fffcc2d 100644 --- a/sass/ui/_toggles.scss +++ b/sass/ui/_toggles.scss @@ -54,14 +54,16 @@ top: 10px; right: 10px; cursor: pointer; + z-index: 3; } } &, > .content { @include opacity(0); - @include transition-duration(.3s); } &.active { z-index: 999999; + @include transition-property(opacity); + @include transition-duration(.3s); &, > .content { @include opacity(1); } diff --git a/sass/ui/_tooltips.scss b/sass/ui/_tooltips.scss new file mode 100644 index 0000000..93ec743 --- /dev/null +++ b/sass/ui/_tooltips.scss @@ -0,0 +1,12 @@ +/* Tooltips */ + +.ttip { + @include tooltip($tt-min-width, $tt-bgcolor, $tt-position); + cursor: pointer; +} + +.ttip:after, .ttip:before { + @include respond(portrait-tablets) { + display: none; + } +} diff --git a/sass/var/_settings.scss b/sass/var/_settings.scss index 84dcd09..ca4e048 100755 --- a/sass/var/_settings.scss +++ b/sass/var/_settings.scss @@ -116,9 +116,22 @@ $default-button-padding: $med; // Height $default-button-height: 36px; +// Form Elements +$form-text-input-stroke: #ccc; +$form-text-input-background: $white; +$form-text-input-placeholder-color: $default-color; +$form-text-input-color: #555; + +$form-select-stroke: #ccc; +$form-select-background: $white; +$form-select-color: #555; + // Tabs $tab-height: 42px; +// Navigation +$navcontain-height: 80px; // makes space at the top of a document for when using a fixed nav + // Drawers & Modals $modal-overlay-color: rgba(0, 0, 0, 0.8); $modal-window-color: $white; @@ -143,6 +156,13 @@ $table-border-radius: 4px; // .striped $table-stripe-bgcolor: #e5e5e5; +// Tooltips +$tt-min-width: 130px; +$tt-bgcolor: $primary-color; +$tt-position: top; // position: top / bottom / left / right +$tt-align: left; // text and caret alignment: left / right +$tt-pretty: yes; // yes = pretty / no = flat + // Floats $default-float: left; $switch-float: right; diff --git a/ui.html b/ui.html index 31c7e8d..50d2312 100644 --- a/ui.html +++ b/ui.html @@ -34,7 +34,7 @@ + However, there is a blank style.css in the css directory should you prefer --> @@ -49,6 +49,7 @@ #icon_map ul li { font-size: 16px; } .smallify { font-size: 13px; } .modal h2, .modal .btn { margin: 5% 0 20px; } + .ttip.example { float: left; background: #eee; border: 1px dotted #ccc; padding: 20px; } @@ -138,33 +139,38 @@

-