From 5f7d25587f0a94c6907a6932397148e63b98d1fe Mon Sep 17 00:00:00 2001 From: Ernie Park Date: Wed, 1 Feb 2012 14:05:12 -0500 Subject: [PATCH 01/75] open close sidebar implement js adding removing closed class on accordion --HG-- branch : close_sidebar --- accordion_init.js | 13 +++++++++++-- courseware.html | 3 +++ sass/_courseware.scss | 10 +--------- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/accordion_init.js b/accordion_init.js index 138ac15608..bf31e0b21f 100644 --- a/accordion_init.js +++ b/accordion_init.js @@ -1,10 +1,19 @@ $("#accordion").accordion({ active: ${ active_chapter }, - autoHeight: false + header: 'h3', + autoHeight: false, +}); + +$("#open_close_accordion").click(function(){ + if ($("#accordion").hasClass("closed")){ + $("#accordion").removeClass("closed"); + } else { + $("#accordion").addClass("closed"); + } }); $('.ui-accordion').bind('accordionchange', function(event, ui) { var event_data = {'newheader':ui.newHeader.text(), - 'oldheader':ui.oldHeader.text()}; + 'oldheader':ui.oldHeader.text()}; log_event('accordion', event_data); }); diff --git a/courseware.html b/courseware.html index 99444c5077..bce8589d6c 100644 --- a/courseware.html +++ b/courseware.html @@ -28,6 +28,9 @@
+
+ Courseware +
${accordion}
diff --git a/sass/_courseware.scss b/sass/_courseware.scss index 3c59e6e0c8..b4ea8e3cbf 100644 --- a/sass/_courseware.scss +++ b/sass/_courseware.scss @@ -9,16 +9,8 @@ div.course-wrapper { @extend .sidebar; div#open_close_accordion { - position: absolute; - right: 0px; - width: 20px; - height: 20px; - background: #ccc; - border: 1px solid black; - right: -22px; - top: 5px; } - + h3 { overflow: hidden; margin: 0; From ff129a01f2abdc59af98559a3892f45c58a8830e Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 7 Feb 2012 15:43:10 -0500 Subject: [PATCH 02/75] Added start to some styles --HG-- branch : close_sidebar --- accordion_init.js | 6 +++--- courseware.html | 3 ++- sass/_courseware.scss | 46 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 51 insertions(+), 4 deletions(-) diff --git a/accordion_init.js b/accordion_init.js index bf31e0b21f..1afaa058ac 100644 --- a/accordion_init.js +++ b/accordion_init.js @@ -5,10 +5,10 @@ $("#accordion").accordion({ }); $("#open_close_accordion").click(function(){ - if ($("#accordion").hasClass("closed")){ - $("#accordion").removeClass("closed"); + if ($(".course-wrapper").hasClass("closed")){ + $(".course-wrapper").removeClass("closed"); } else { - $("#accordion").addClass("closed"); + $(".course-wrapper").addClass("closed"); } }); diff --git a/courseware.html b/courseware.html index 0867ea9eb6..9458306e3b 100644 --- a/courseware.html +++ b/courseware.html @@ -29,7 +29,8 @@
- Courseware +

Courseware Index

+ close
${accordion}
diff --git a/sass/_courseware.scss b/sass/_courseware.scss index 85fe533df2..9e76474d8c 100644 --- a/sass/_courseware.scss +++ b/sass/_courseware.scss @@ -7,11 +7,24 @@ div.course-wrapper { div#accordion { @extend .sidebar; + @include transition( all, .5s, $ease-in-out-quad); div#open_close_accordion { + h2 { + display: inline-block; + } + + a { + text-indent: -9999px; + display: inline-block; + background: red; + width: 16px; + height: 16px; + } } h3 { + @include transition( all, .5s, $ease-in-out-quad); overflow: hidden; margin: 0; @@ -77,6 +90,7 @@ div.course-wrapper { section.course-content { @extend .content; + @include transition( all, .5s, $ease-in-out-quad); p { margin-bottom: lh(); @@ -203,4 +217,36 @@ div.course-wrapper { } } } + + &.closed { + + div#accordion { + width: flex-grid(.5); + + div#open_close_accordion { + h2 { + position: relative; + left: -100%; + } + } + + h3, ul, li { + position: relative; + left: -100%; + } + } + + section.course-content { + width: flex-grid(11.5) + flex-gutter(); + } + + // div#accordion { + // left: -(flex-grid(2.7)); + // } + + // section.course-content { + // left: -(flex-grid(2.7)); + // position: relative; + // } + } } From a89de961e82eb0fd6922901c7ebfb3e183ddf4a2 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 8 Feb 2012 11:05:08 -0500 Subject: [PATCH 03/75] Added more styles for cloes and open sidebar --HG-- branch : close_sidebar --- courseware.html | 9 ++- sass/_courseware.scss | 146 +++++++++++++++++++++--------------------- 2 files changed, 80 insertions(+), 75 deletions(-) diff --git a/courseware.html b/courseware.html index 9458306e3b..b77806f3e1 100644 --- a/courseware.html +++ b/courseware.html @@ -27,13 +27,16 @@
-
+

Courseware Index

close
- ${accordion} -
+ +
+ ${accordion} +
+
${content} diff --git a/sass/_courseware.scss b/sass/_courseware.scss index 9e76474d8c..2323206590 100644 --- a/sass/_courseware.scss +++ b/sass/_courseware.scss @@ -5,92 +5,102 @@ div.course-wrapper { list-style: none; } - div#accordion { + .tran { + @include transition( all, .2s, $ease-in-out-quad); + } + + section.course-index { @extend .sidebar; - @include transition( all, .5s, $ease-in-out-quad); + position: relative; + @extend .tran; div#open_close_accordion { h2 { - display: inline-block; + padding: 0 lh(); } a { text-indent: -9999px; - display: inline-block; background: red; width: 16px; height: 16px; + position: absolute; + padding: 8px; + top: 12px; + right: 0; } } - h3 { - @include transition( all, .5s, $ease-in-out-quad); - overflow: hidden; - margin: 0; + div#accordion { - &:last-child { - @include box-shadow(none); - } + h3 { + overflow: hidden; + margin: 0; - &.ui-accordion-header { - color: #000; - - a { - font-size: $body-font-size; - color: lighten($text-color, 10%); + &:last-child { + @include box-shadow(none); } - &.ui-state-hover { - border: none; - border-bottom: 1px solid #d3d3d3; - } - - &.ui-state-active { - @extend .active; - } - } - } - - ul.ui-accordion-content { - @include border-radius(0); - @include box-shadow( inset -1px 0 0 #e6e6e6); - background: #d6d6d6; - border: none; - border-bottom: 1px solid #c3c3c3; - font-size: 12px; - margin: 0; - overflow: hidden; - - li { - &.active { - font-weight: bold; - } - - a { - text-decoration: none; - margin-bottom: lh(.5); - display: block; + &.ui-accordion-header { color: #000; - &:hover { - color: #666; + a { + font-size: $body-font-size; + color: lighten($text-color, 10%); } - p { - margin-bottom: 0; + &.ui-state-hover { + border: none; + border-bottom: 1px solid #d3d3d3; + } - &.subtitle { + &.ui-state-active { + @extend .active; + } + } + } + + ul.ui-accordion-content { + @include border-radius(0); + @include box-shadow( inset -1px 0 0 #e6e6e6); + background: #d6d6d6; + border: none; + border-bottom: 1px solid #c3c3c3; + font-size: 12px; + margin: 0; + overflow: hidden; + + li { + &.active { + font-weight: bold; + } + + a { + text-decoration: none; + margin-bottom: lh(.5); + display: block; + color: #000; + + &:hover { color: #666; } + + p { + margin-bottom: 0; + + &.subtitle { + color: #666; + } + } } } } } } + section.course-content { @extend .content; - @include transition( all, .5s, $ease-in-out-quad); p { margin-bottom: lh(); @@ -219,34 +229,26 @@ div.course-wrapper { } &.closed { - - div#accordion { + section.course-index { width: flex-grid(.5); + div#open_close_accordion { - div#open_close_accordion { - h2 { - position: relative; - left: -100%; - } + h2 { + visibility: hidden; + width: 10px; + padding: 0; } + } - h3, ul, li { - position: relative; - left: -100%; + div#accordion { + visibility: hidden; + width: 10px; + padding: 0; } } section.course-content { width: flex-grid(11.5) + flex-gutter(); } - - // div#accordion { - // left: -(flex-grid(2.7)); - // } - - // section.course-content { - // left: -(flex-grid(2.7)); - // position: relative; - // } } } From 5cf7d9ab8ccc32b613341bb870c7d4de23797862 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 8 Feb 2012 16:32:48 -0500 Subject: [PATCH 04/75] Added more styles for the slider --HG-- branch : close_sidebar --- sass/_courseware.scss | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/sass/_courseware.scss b/sass/_courseware.scss index 2323206590..559333255e 100644 --- a/sass/_courseware.scss +++ b/sass/_courseware.scss @@ -20,14 +20,21 @@ div.course-wrapper { } a { - text-indent: -9999px; - background: red; width: 16px; + text-indent: -9999px; height: 16px; position: absolute; padding: 8px; top: 12px; - right: 0; + right: -1px; + border: 1px solid #D3D3D3; + background: #eee url('/static/images/slide-left-icon.png') center center no-repeat; + @include box-shadow(0 0 0 1px #fff); + @include border-radius(3px 0 0 3px); + + &:hover { + background-color: white; + } } } @@ -230,8 +237,13 @@ div.course-wrapper { &.closed { section.course-index { - width: flex-grid(.5); + width: flex-grid(.6); + padding-left: 4px; + div#open_close_accordion { + a { + background-image: url('/static/images/slide-right-icon.png'); + } h2 { visibility: hidden; From a8a01ce94281bd3de9fd7b55c0e2af1de4855737 Mon Sep 17 00:00:00 2001 From: Bridger Maxwell Date: Thu, 9 Feb 2012 14:55:40 -0500 Subject: [PATCH 05/75] Cleaning up profile to output better lists --HG-- branch : templates-profilecleanup --- profile.html | 76 ++++++++++++++++++++++++---------------------------- 1 file changed, 35 insertions(+), 41 deletions(-) diff --git a/profile.html b/profile.html index 422d21f2b8..a3280e8f01 100644 --- a/profile.html +++ b/profile.html @@ -91,49 +91,43 @@ $(function() {
-
    - <% - lastChapter = None - %> - % for hw in homeworks: +
      + %for chapter in chapters:
    1. - %if hw['chapter'] != lastChapter: -

      - ${ hw['chapter'] }

      - <% lastChapter = hw['chapter'] %> - %else: -

      -

      - %endif - -
      -

      - <% - earned = hw['section_total'][0] - total = hw['section_total'][1] - percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 else "" - %> - ${ hw['section'] } ${"({0}/{1}) {2}".format( earned, total, percentageString )}

      - ${hw['subtitle']} - % if 'due' in hw and hw['due']!="": - due ${hw['due']} - % endif - -
        - %if len(hw['scores']) > 0: - %if hw['graded']: - Problem Scores: - %else: - Practice Scores: - %endif - % for score in hw['scores']: -
      • ${ score[0] }/${ score[1] }
        • - % endfor +

        + ${ chapter['chapter'] }

        + +
          + %for section in chapter['sections']: +
        1. + <% + earned = section['section_total'][0] + total = section['section_total'][1] + percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 else "" + %> + +

          + ${ section['section'] } ${"({0}/{1}) {2}".format( earned, total, percentageString )}

          + ${section['subtitle']} + %if 'due' in section and section['due']!="": + due ${section['due']} %endif -
      -
      -
      2. - % endfor -
    + + %if len(section['scores']) > 0: +
      + ${ "Problem Scores: " if section['graded'] else "Practice Scores: "} + %for score in section['scores']: +
    1. ${ score[0] }/${ score[1] }
      2. + %endfor +
    + %endif + + + %endfor +
+ + %endfor +
From 5835fd6eeb0fa95384044b2dda37e3e211f2673b Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Mon, 13 Feb 2012 00:43:08 -0500 Subject: [PATCH 16/75] MITx italics --- create_account.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/create_account.html b/create_account.html index 990ff2b8f9..e50c26d748 100644 --- a/create_account.html +++ b/create_account.html @@ -30,7 +30,7 @@ -
If you successfully complete the course, you will receive an electronic certificate of accomplishment from MITx with this name on it.
+
If you successfully complete the course, you will receive an electronic certificate of accomplishment from MITx with this name on it.
  • From fdcb58489a51ff76ecd76d8f61be04920980579d Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 13 Feb 2012 12:17:35 -0500 Subject: [PATCH 17/75] Added link to homepage and course page on acctivation --- activation_complete.html | 1 + sass/_index-extends.scss | 2 ++ 2 files changed, 3 insertions(+) diff --git a/activation_complete.html b/activation_complete.html index c74af930d5..0e13733778 100644 --- a/activation_complete.html +++ b/activation_complete.html @@ -5,4 +5,5 @@

    Activation Complete!

    Thanks for activating your email. We will notify you as soon as the course starts.

    +

    For now you can got to the MITx homepage or the 6.002x course page.

    • diff --git a/sass/_index-extends.scss b/sass/_index-extends.scss index 2d3f911633..f3e79430d8 100644 --- a/sass/_index-extends.scss +++ b/sass/_index-extends.scss @@ -20,6 +20,7 @@ p { margin-bottom: lh(); + line-height: lh(); } h1 { @@ -37,6 +38,7 @@ li { list-style: disc outside none; + line-height: lh(); } } } From 1366afcfc135e816c6bbf70755dd1f5726eb5572 Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Mon, 13 Feb 2012 13:52:23 -0500 Subject: [PATCH 18/75] Minor bug fixes --- 6002x-faq.html | 5 +++-- 6002x-press-release.html | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/6002x-faq.html b/6002x-faq.html index 2cbe5ade4a..c33cb5e966 100644 --- a/6002x-faq.html +++ b/6002x-faq.html @@ -19,9 +19,10 @@ This set of questions and answers accompanies MIT’s February 13,

    -What is MITx? MIT seeks through the development of MITx to improve +What is MITx?

    + +

    MIT seeks through the development of MITx to improve education both on the MIT campus and around the world. -

    On campus, MITx will be coupled with an Institute-wide research initiative on online teaching and learning. The online learning tools diff --git a/6002x-press-release.html b/6002x-press-release.html index 8cb394db99..439c234edd 100644 --- a/6002x-press-release.html +++ b/6002x-press-release.html @@ -70,7 +70,7 @@ be found here.

    about 6.002x can be found here.

    - + FAQs about MITx as a whole can be found here.

    From 89fbab77f7708482ab41b848f9c037fe70a21ee9 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 13 Feb 2012 14:01:52 -0500 Subject: [PATCH 19/75] Fixed links and added them to other pages --- activation_active.html | 1 + activation_complete.html | 2 +- activation_invalid.html | 2 ++ sass/_index.scss | 7 ------- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/activation_active.html b/activation_active.html index 5b5e42478f..2861784cff 100644 --- a/activation_active.html +++ b/activation_active.html @@ -6,4 +6,5 @@

    This account has already been activated. We will notify you as soon as the course starts.

    +

    For now you can go to the MITx homepage or the 6.002x course page.

    diff --git a/activation_complete.html b/activation_complete.html index 0e13733778..ff988da1c6 100644 --- a/activation_complete.html +++ b/activation_complete.html @@ -5,5 +5,5 @@

    Activation Complete!

    Thanks for activating your email. We will notify you as soon as the course starts.

    -

    For now you can got to the MITx homepage or the 6.002x course page.

    +

    For now you can go to the MITx homepage or the 6.002x course page.

    diff --git a/activation_invalid.html b/activation_invalid.html index 583c5d9a90..f8afc8233b 100644 --- a/activation_invalid.html +++ b/activation_invalid.html @@ -6,4 +6,6 @@ correct -- e-mail programs will sometimes split it into two lines. If you still have issues, e-mail us to let us know what happened at bugs@mitx.mit.edu.

    + +

    Or you can go back to the 6.002x course page.

    diff --git a/sass/_index.scss b/sass/_index.scss index d579eb8ea6..0c7360f015 100644 --- a/sass/_index.scss +++ b/sass/_index.scss @@ -53,13 +53,6 @@ header.announcement { &.home { background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg"); - @media screen and (min-width: 1200px) { - background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg"); - } - - // @media screen and (max-width: 1199px) { - // } - div { padding: lh(10) lh() lh(3); From 56e1111a4a83f9345b3fab02076d0acc27965af4 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 13 Feb 2012 14:35:18 -0500 Subject: [PATCH 20/75] Added style for the layout --HG-- branch : templates-profilecleanup --- sass/_profile.scss | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/sass/_profile.scss b/sass/_profile.scss index b383c61a85..ad99c2f621 100644 --- a/sass/_profile.scss +++ b/sass/_profile.scss @@ -52,7 +52,7 @@ div.profile-wrapper { section.course-info { @extend .content; - ol { + > ol { list-style: none; > li { @@ -68,15 +68,28 @@ div.profile-wrapper { margin-right: flex-gutter(9); } - div.scores { + ol.sections { float: left; + list-style: none; width: flex-grid(7, 9); + > li { + border-bottom: 1px solid #e3e3e3; + padding: lh() 0; + + &:first-child { + padding-top: 0; + } + + &:last-child { + border-bottom: 0; + } + h3 { color: #666; } - ul { + ol { list-style: none; li { @@ -84,6 +97,7 @@ div.profile-wrapper { padding-right: 1em; } } + } } } } From 0c83d18761cf20f8a67c582031cf3b2848cb88f3 Mon Sep 17 00:00:00 2001 From: Ernie Park Date: Mon, 13 Feb 2012 14:55:28 -0500 Subject: [PATCH 21/75] switch intro video to (experimental) iframe player so closing overlay stops video, and hitting play autoplays video. still buggy if clicked within 1 second of loading page --HG-- branch : templates-ernie-global-intro-video --- mitx_global.html | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/mitx_global.html b/mitx_global.html index ee89e655f8..70fa2b7145 100644 --- a/mitx_global.html +++ b/mitx_global.html @@ -12,7 +12,7 @@
    - Watch intro video + Watch intro video
    @@ -48,12 +48,32 @@
    - +
    From b30dc6fed69ff42fa0e40944166fb2af1d5e87a2 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 13 Feb 2012 15:09:57 -0500 Subject: [PATCH 22/75] Hide footer links for activation pages --- activation_active.html | 2 ++ activation_complete.html | 1 + activation_invalid.html | 2 ++ index.html | 2 ++ main.html | 2 +- sass/_activation.scss | 15 ++++++++ sass/_layout.scss | 78 ++++++++++++++++++++++------------------ 7 files changed, 66 insertions(+), 36 deletions(-) diff --git a/activation_active.html b/activation_active.html index 2861784cff..e28d0f1205 100644 --- a/activation_active.html +++ b/activation_active.html @@ -1,6 +1,8 @@ <%inherit file="main.html" /> +<%block name="bodyclass">activation +

    Account already active!

    diff --git a/activation_complete.html b/activation_complete.html index ff988da1c6..04878c118e 100644 --- a/activation_complete.html +++ b/activation_complete.html @@ -1,6 +1,7 @@ <%inherit file="main.html" /> +<%block name="bodyclass">activation

    Activation Complete!

    diff --git a/activation_invalid.html b/activation_invalid.html index f8afc8233b..f327fbaa67 100644 --- a/activation_invalid.html +++ b/activation_invalid.html @@ -1,4 +1,6 @@ <%inherit file="main.html" /> +<%block name="body-class">activation +

    Activation Invalid

    diff --git a/index.html b/index.html index ff32f6a336..a8e716d3f9 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,7 @@ <%inherit file="marketing.html" /> +<%block name="body-class">activation + <%block name="header_text">
    diff --git a/main.html b/main.html index 05d00112f5..96f2a32cd4 100644 --- a/main.html +++ b/main.html @@ -38,7 +38,7 @@ - +"> ${self.body()} <%block name="bodyextra"/> diff --git a/sass/_activation.scss b/sass/_activation.scss index 0ec5ea837a..8ae293200e 100644 --- a/sass/_activation.scss +++ b/sass/_activation.scss @@ -1,3 +1,18 @@ +body.activation { + footer { + max-width: 600px; + text-align: center; + + p { + float: none; + } + + ul { + display: none; + } + } +} + section.activation { @extend .wrapper; @include box-shadow(0 1px 0 #fff); diff --git a/sass/_layout.scss b/sass/_layout.scss index 6984531ff9..e124f0f62f 100644 --- a/sass/_layout.scss +++ b/sass/_layout.scss @@ -133,49 +133,57 @@ html { max-width: 100%; height: auto; } - } - footer { - @extend .clearfix; - @extend .wrapper; - @include box-sizing(border-box); - color: #777; - margin-top: $body-line-height; - padding: 0 $body-line-height; + footer { + @extend .clearfix; + @extend .wrapper; + @include box-sizing(border-box); + color: #777; + margin-top: $body-line-height; + padding: 0 $body-line-height; - p { - float: left; - - a { - color: #444; - - &:link, &:visited { - color: #444; - } - - &:hover, &:focus { - color: #000; - } - } - } - - ul { - float: right; - - li { - display: inline-block; - margin-right: 20px; + p { + float: left; a { color: #444; - &:link, &:visited { - color: #444; - } + &:link, &:visited { + color: #444; + } - &:hover, &:focus { - color: #000; + &:hover, &:focus { + color: #000; + } } + } + + ul { + float: right; + + li { + display: inline-block; + margin-right: 20px; + + a { + color: #444; + + &:link, &:visited { + color: #444; + } + + &:hover, &:focus { + color: #000; + } + } + } + } + } + + &.activation { + footer { + ul { + display: none; } } } From 2db960a2b3c993a717baf431367da8df0d8184ee Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 13 Feb 2012 15:26:55 -0500 Subject: [PATCH 23/75] unused css class --- index.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/index.html b/index.html index a8e716d3f9..ff32f6a336 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,5 @@ <%inherit file="marketing.html" /> -<%block name="body-class">activation - <%block name="header_text">
    From 0b424b4bd8024aee53cc46671c191fa60a7a3905 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 13 Feb 2012 15:40:02 -0500 Subject: [PATCH 24/75] Fixed errorn on invalid activation --- activation_invalid.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/activation_invalid.html b/activation_invalid.html index f327fbaa67..d2e7086592 100644 --- a/activation_invalid.html +++ b/activation_invalid.html @@ -1,5 +1,5 @@ <%inherit file="main.html" /> -<%block name="body-class">activation +<%block name="bodyclass">activation

    Activation Invalid

    From 06d241c5144464a6c33f02b6b6eef806c0022f6d Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Mon, 13 Feb 2012 15:57:31 -0500 Subject: [PATCH 25/75] Standard forms for templates --- activation_active.html | 7 ++++--- activation_complete.html | 8 ++++---- activation_invalid.html | 7 ++++--- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/activation_active.html b/activation_active.html index e28d0f1205..5f2af64c21 100644 --- a/activation_active.html +++ b/activation_active.html @@ -1,7 +1,7 @@ +<%inherit file="marketing.html" /> -<%inherit file="main.html" /> - -<%block name="bodyclass">activation +
    +

    Account already active!

    @@ -9,4 +9,5 @@

    This account has already been activated. We will notify you as soon as the course starts.

    For now you can go to the MITx homepage or the 6.002x course page.

    +
    diff --git a/activation_complete.html b/activation_complete.html index 04878c118e..f976f00239 100644 --- a/activation_complete.html +++ b/activation_complete.html @@ -1,10 +1,10 @@ +<%inherit file="marketing.html" /> -<%inherit file="main.html" /> - -<%block name="bodyclass">activation -
    +
    +

    Activation Complete!

    Thanks for activating your email. We will notify you as soon as the course starts.

    For now you can go to the MITx homepage or the 6.002x course page.

    +
    diff --git a/activation_invalid.html b/activation_invalid.html index d2e7086592..419f7a0ae6 100644 --- a/activation_invalid.html +++ b/activation_invalid.html @@ -1,7 +1,7 @@ -<%inherit file="main.html" /> -<%block name="bodyclass">activation +<%inherit file="marketing.html" /> -
    +
    +

    Activation Invalid

    Something went wrong. Check to make sure the URL you went to was @@ -10,4 +10,5 @@ at bugs@mitx.mit.edu.

    Or you can go back to the 6.002x course page.

    +
    From 4cd5720abaa379307076d0ba9b46c089ea77212a Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Mon, 13 Feb 2012 16:16:25 -0500 Subject: [PATCH 26/75] Removed obsolete error code -- now AJAX --- login.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/login.html b/login.html index 798817047a..abf59aae74 100644 --- a/login.html +++ b/login.html @@ -1,6 +1,4 @@ -${ error } -

    Log in to MITx

    From 872b2af4c94ee13b0b903ab7df2fe8ac05948881 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 13 Feb 2012 16:32:15 -0500 Subject: [PATCH 27/75] Added help page for outside the app, link to help in footer and Opencourseware link --- marketing.html | 1 + mitx_global.html | 2 +- mitx_help.html | 24 ++++++++++++++++++++++++ sass/_index-extends.scss | 8 ++++++++ 4 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 mitx_help.html diff --git a/marketing.html b/marketing.html index f34150fcf0..9f59ef88f0 100644 --- a/marketing.html +++ b/marketing.html @@ -96,6 +96,7 @@ function postJSON(url, data, callback) {
  • Terms of Service
  • Privacy Policy
  • Honor Code
    • +
  • Help
    • diff --git a/mitx_global.html b/mitx_global.html index 6c8449da81..3cc3b302e7 100644 --- a/mitx_global.html +++ b/mitx_global.html @@ -27,7 +27,7 @@
  • operates on an open-source, scalable software infrastructure in order to make it continuously improving and readily available to other educational institutions, such as universities and K-12 school systems.
    • -

    Press & links: 6.002x Press Release, 6.002x FAQ, MITx overview, Boston Globe, New York Times, MIT Press Release, MITx FAQ

    +

    Press & links: 6.002x Press Release, 6.002x FAQ, MITx overview, Boston Globe, New York Times, MIT Press Release, MITx FAQ, OpenCourseWare

    diff --git a/mitx_help.html b/mitx_help.html new file mode 100644 index 0000000000..e67fd1255d --- /dev/null +++ b/mitx_help.html @@ -0,0 +1,24 @@ +<%inherit file="marketing.html" /> + +
    +
    +
    +

    Help & Feedback

    +

    If run into any problems, we have several e-mail addresses set up:

    +
    +
    System-related questions
    +
    technical@mitx.mit.edu
    +
    Content-related questions
    +
    content@mitx.mit.edu
    +
    Bug reports
    +
    bugs@mitx.mit.edu
    +
    Suggestions
    +
    suggestions@mitx.mit.edu
    +
    + +

    Please bear in mind that while we read them, we do not expect to + have time to respond to all e-mails.

    +
    +
    +
    + diff --git a/sass/_index-extends.scss b/sass/_index-extends.scss index f3e79430d8..47f16352ad 100644 --- a/sass/_index-extends.scss +++ b/sass/_index-extends.scss @@ -41,6 +41,14 @@ line-height: lh(); } } + + dl { + margin-bottom: lh(); + + dd { + margin-bottom: lh(.5); + } + } } } From 31c63455e1a1c70c9c07094f2d62f26e9119a3c1 Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Mon, 13 Feb 2012 16:42:38 -0500 Subject: [PATCH 28/75] Slightly better text --- mitx_help.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/mitx_help.html b/mitx_help.html index e67fd1255d..ab0c28a23e 100644 --- a/mitx_help.html +++ b/mitx_help.html @@ -4,7 +4,8 @@

    Help & Feedback

    -

    If run into any problems, we have several e-mail addresses set up:

    +

    If run into problems signing up for the web site which you + cannot resolve on your own, you can reach us at:

    System-related questions
    technical@mitx.mit.edu
    From 24f4ec363a1187fc58c4840f6441774348b5e6e0 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 13 Feb 2012 17:15:05 -0500 Subject: [PATCH 29/75] Added style for header in sidebar --HG-- branch : close_sidebar --- sass/_courseware.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sass/_courseware.scss b/sass/_courseware.scss index 559333255e..9149ae2213 100644 --- a/sass/_courseware.scss +++ b/sass/_courseware.scss @@ -15,9 +15,9 @@ div.course-wrapper { @extend .tran; div#open_close_accordion { - h2 { - padding: 0 lh(); - } + @include box-shadow(0 1px 0 #eee); + border-bottom: 1px solid #d3d3d3; + padding: 0 lh() 4px; a { width: 16px; From 647407ad45a2c25ac5e7b801d2f27fec5aa68ff9 Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Mon, 13 Feb 2012 17:20:33 -0500 Subject: [PATCH 30/75] hg ignore update --- .hgignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.hgignore b/.hgignore index c93aa7128d..e2ae8c91cb 100644 --- a/.hgignore +++ b/.hgignore @@ -5,3 +5,5 @@ syntax: glob *.swp *.orig *.DS_Store +#* +.#* \ No newline at end of file From 0cb2f2817333a00d09c9294de5b98aab396fb889 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 13 Feb 2012 17:31:33 -0500 Subject: [PATCH 31/75] fix header clashing with close button --HG-- branch : close_sidebar --- sass/_courseware.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/sass/_courseware.scss b/sass/_courseware.scss index 9149ae2213..caa9608780 100644 --- a/sass/_courseware.scss +++ b/sass/_courseware.scss @@ -19,6 +19,10 @@ div.course-wrapper { border-bottom: 1px solid #d3d3d3; padding: 0 lh() 4px; + h2 { + padding-right: 20px; + } + a { width: 16px; text-indent: -9999px; From 56858e6498ec855f3b5921e8f710f1f8f24d4ae4 Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Mon, 13 Feb 2012 18:42:13 -0500 Subject: [PATCH 32/75] Undid Kyle's Chrome bug fix, since it resulted in worse Firefox bugs --- sass/_index.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/sass/_index.scss b/sass/_index.scss index 0c7360f015..d579eb8ea6 100644 --- a/sass/_index.scss +++ b/sass/_index.scss @@ -53,6 +53,13 @@ header.announcement { &.home { background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg"); + @media screen and (min-width: 1200px) { + background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg"); + } + + // @media screen and (max-width: 1199px) { + // } + div { padding: lh(10) lh() lh(3); From 3176123c7c2d1a34798c07f6a3fd3d033c7c75dc Mon Sep 17 00:00:00 2001 From: Reda Lemeden Date: Mon, 13 Feb 2012 18:52:00 -0500 Subject: [PATCH 33/75] Started redesigning the question filtering and navigation --- sass/_askbot-original.scss | 20 ++--- sass/_discussion-questions.scss | 129 +++++++++++++++++++++++--------- sass/_discussion.scss | 88 +++------------------- sass/_question-view.scss | 1 + 4 files changed, 114 insertions(+), 124 deletions(-) diff --git a/sass/_askbot-original.scss b/sass/_askbot-original.scss index a1ff71cb0e..811be0496c 100644 --- a/sass/_askbot-original.scss +++ b/sass/_askbot-original.scss @@ -650,17 +650,17 @@ body.anon #searchBar { // padding-top: 6px; // font-family: 'Yanone Kaffeesatz',sans-serif; } -#listSearchTags { - float: left; - margin-top: 3px; - color: #707070; - font-size: 16px; - font-family: 'Yanone Kaffeesatz',sans-serif; } +// #listSearchTags { +// float: left; +// margin-top: 3px; +// color: #707070; +// font-size: 16px; +// font-family: 'Yanone Kaffeesatz',sans-serif; } -ul#searchTags { - margin-left: 10px; - float: right; - padding-top: 2px; } +// ul#searchTags { +// margin-left: 10px; +// float: right; +// padding-top: 2px; } // .search-tips { // font-size: 16px; diff --git a/sass/_discussion-questions.scss b/sass/_discussion-questions.scss index a776c316d4..eb0d0aedf3 100644 --- a/sass/_discussion-questions.scss +++ b/sass/_discussion-questions.scss @@ -1,55 +1,112 @@ -div.question-controls { +div.question-list-header { display: block; - margin-bottom: 30px; + margin-bottom: 15px; overflow: hidden; width: flex-grid(9,9); - div { - display: inline-block; - } + section.question-list-meta, section.question-sort-filter { + display: block; + overflow: hidden; + width: 100%; - div.question-count { - margin-right: flex-gutter(); - width: flex-grid(4,9); - - h1 { - margin-top: 0; + div { + display: inline; + float: left; } } - div.question-sort { - vertical-align: bottom; - width: flex-grid(5,9); + section.question-list-meta { + div.question-list-title { + margin-right: flex-gutter(); + // width: flex-grid(3,9); - nav { - @include border-radius(35px); - background-color: lighten(#F6EFD4, 5%) ; - height: 30px; - float: right; - font-size: 16px; - margin: 3px 0; - padding:0px 20px 5px; + h1 { + margin-top: 0; + } + } - a { - color: darken(#F6EFD4, 50%); + div.question-list-tags { + // width: flex-grid(6,9); + padding-top:8px; - &.on span{ - font-weight: bold; - } + ul.tags { + display: inline; + // float: left; - &:before { - content: '|'; - color: darken(#F6EFD4, 10%); - font-size: 22px; - } + li { + span.delete-icon, div.delete-icon { + @include border-radius(0 4px 4px 0); + background: #555; + color: #eee; + cursor: pointer; + float: none; + left: 10px; + padding: 3px 6px; + position: relative; + top: 1px; + opacity: 0.5; - &:hover { - text-decoration: none; - color: darken(#F6EFD4, 70%); + &:hover { + opacity: 1; + } + } } } } } + section.question-sort-filter { + font-size: 16px; + + span.label { + color: #555; + } + + div.question-filter { + margin-right: flex-gutter(9); + + ul.scope-filters { + @extend .action-link; + + li { + display: inline; + + a { + &.on { + font-weight: bold; + } + + &:before { + content: '|'; + color: darken(#F6EFD4, 10%); + font-size: 22px; + } + } + } + } + } + + div.question-sort { + margin-left: flex-gutter(); + float: right; + + nav { + @extend .action-link; + + a { + &.on span{ + font-weight: bold; + } + + &:before { + content: '|'; + color: darken(#F6EFD4, 10%); + font-size: 22px; + } + } + } + } + } + } ul.question-list { @@ -75,7 +132,7 @@ ul.question-list { h2 { font-size: 16px; - font-weight: normal; + font-weight: bold; margin: 0px 0 15px 0; text-transform: none; } diff --git a/sass/_discussion.scss b/sass/_discussion.scss index 58250f9b73..111d23bff0 100644 --- a/sass/_discussion.scss +++ b/sass/_discussion.scss @@ -17,73 +17,19 @@ text-decoration: none; } } +.action-link { + a { + color: darken(#F6EFD4, 50%); + + &:hover { + text-decoration: none; + color: darken(#F6EFD4, 70%); + } + } +} // Layout body.askbot { - .secondary-nav { - margin: 0; - - nav { - @extend .clearfix; - @extend .topbar; - @extend .wrapper; - @include box-sizing(border-box); - border: 1px solid darken(#F6EFD4, 10%); - border-top: 0; - margin: 0 auto; - padding: $body-line-height; - - div { - float: left; - - &.question-filter { - font-size:16px; - margin-top: 4px; - width: flex-grid(4); - - ul { - @include border-radius(35px); - background: darken(#F6EFD4, 20%); - display: inline; - margin: 0 0 0 10px; - padding: $body-line-height/4 20px; - - li { - display: inline-block; - list-style: none; - margin-right: 10px; - - &:last-child { - margin-right: 0; - } - - a { - text-transform: capitalize; - text-shadow: none; - font-size: 14px; - - &.on { - font-weight: bold; - } - } - } - } - } - - &.search-box { - margin-left:2%; - text-align:right; - width: flex-grid(8); - - input[type="text"] { - margin-right: 6px; - width: flex-grid(2,8); - } - } - - } - } - } section.main-content { div.discussion-wrapper { @@ -149,18 +95,4 @@ body.askbot { } } - // footer { - // margin: 0 auto; - // padding: 0; - - // div.footer-wrapper { - // @extend .clearfix; - // @extend .wrapper; - // @include box-shadow(0 1px 0 #fff); - // @include box-sizing(border-box); - // background-color: #000; - // border-top: 0; - // padding: $gw-gutter/2; - // } - // } } diff --git a/sass/_question-view.scss b/sass/_question-view.scss index 1fae85f023..090551b052 100644 --- a/sass/_question-view.scss +++ b/sass/_question-view.scss @@ -93,6 +93,7 @@ div.question-header { float: left; margin-right: flex-gutter(8); width: flex-grid(6.2,8); + } div.post-update-container { From e3e1a37bc27d0876e0a0b204eef22df98a1ebe7c Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Mon, 13 Feb 2012 20:24:08 -0500 Subject: [PATCH 34/75] Missed commit for custom tags --- custom_tags | 1 + 1 file changed, 1 insertion(+) create mode 120000 custom_tags diff --git a/custom_tags b/custom_tags new file mode 120000 index 0000000000..ec1dac8fbe --- /dev/null +++ b/custom_tags @@ -0,0 +1 @@ +../data/custom_tags \ No newline at end of file From 453a72af96d6a8e7da5b69d41c7baa68b8d48cb9 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 14 Feb 2012 10:57:34 -0500 Subject: [PATCH 35/75] Changed padding on close and changed so only the a closes sidebar --HG-- branch : close_sidebar --- accordion_init.js | 2 +- sass/_courseware.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/accordion_init.js b/accordion_init.js index 1afaa058ac..7c4ca2603c 100644 --- a/accordion_init.js +++ b/accordion_init.js @@ -4,7 +4,7 @@ $("#accordion").accordion({ autoHeight: false, }); -$("#open_close_accordion").click(function(){ +$("#open_close_accordion a").click(function(){ if ($(".course-wrapper").hasClass("closed")){ $(".course-wrapper").removeClass("closed"); } else { diff --git a/sass/_courseware.scss b/sass/_courseware.scss index caa9608780..f11e55c2f7 100644 --- a/sass/_courseware.scss +++ b/sass/_courseware.scss @@ -245,6 +245,8 @@ div.course-wrapper { padding-left: 4px; div#open_close_accordion { + padding: 0; + a { background-image: url('/static/images/slide-right-icon.png'); } From 02f99ec65c249a5d23fa63337950886757f7030d Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 14 Feb 2012 11:05:16 -0500 Subject: [PATCH 36/75] Remove old Sass readme and add new onw --HG-- branch : close_sidebar --- .DS_Store | Bin 12292 -> 12292 bytes sass/{reademe.md => README} | 9 +++++++-- 2 files changed, 7 insertions(+), 2 deletions(-) rename sass/{reademe.md => README} (71%) diff --git a/.DS_Store b/.DS_Store index b9a409939207eb86dd2d0e8a5dbb4b906be0aec4..a511c81699e614c17125778724b428fc9f3b0606 100644 GIT binary patch delta 114 zcmZokXi1ph&&a+pU^hP_`(z%0U~eu4ABIGRBnBe}M+QBH42BYhT!x&S{Pf`D{M-Tt u2#^L+Sk>j`ySSv3mLxMUoDTcizd1@EmVGn3#5b1BYek}%Hy@B&%MSqX`5iF; delta 39 ucmZokXi1ph&&awlU^hP_>tr5*;LYm=BG@N31Z-xP_{Or?S9ZG)kOKe=^$o@V diff --git a/sass/reademe.md b/sass/README similarity index 71% rename from sass/reademe.md rename to sass/README index 4550d0c9c5..96cb2425d1 100644 --- a/sass/reademe.md +++ b/sass/README @@ -5,7 +5,12 @@ $ gem install sass We are also using Bourbon with sass. They are a generic set of mixins, and functions that allow for more rapid development of CSS3. Find out more about bourbon here: https://github.com/thoughtbot/bourbon -Then to generate Sass files cd to templates directory and watch the sass files with: +Then to generate Sass files cd to templates directory and watch the sass files for developement: + $ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb -This will automatically generate the CSS files on save. +To generate a compressed css file for production: + +$ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb --style :compressed + +These will automatically generate the CSS files on save. From 48650b131b97634ad621bbfb0deb9dc30f3e1383 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 14 Feb 2012 11:31:23 -0500 Subject: [PATCH 37/75] Changed amazon link --- index.html | 2 +- sass/_index.scss | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/index.html b/index.html index ff32f6a336..3cbb0bf84d 100644 --- a/index.html +++ b/index.html @@ -31,7 +31,7 @@

    If you successfully complete the course, you will receive an electronic certificate of accomplishment from MITx. This certificate will indicate that you earned it from MITx’s pilot course. In this prototype version, MITx will not require that you be tested in a testing center or otherwise have your identity certified in order to receive this certificate.

    -

    The course uses the textbook Foundations of Analog and Digital Electronic Circuits, by Anant Agarwal and Jeffrey H. Lang. Morgan Kaufmann Publishers, Elsevier, July 2005. While recommended, the book is not required: relevant sections will be provided electronically as part of the online course for personal use in connection with this course only. The copyright for the book is owned by Elsevier. The book can be purchased on Amazon.

    +

    The course uses the textbook Foundations of Analog and Digital Electronic Circuits, by Anant Agarwal and Jeffrey H. Lang. Morgan Kaufmann Publishers, Elsevier, July 2005. While recommended, the book is not required: relevant sections will be provided electronically as part of the online course for personal use in connection with this course only. The copyright for the book is owned by Elsevier. The book can be purchased on Amazon.

    diff --git a/sass/_index.scss b/sass/_index.scss index d579eb8ea6..163c46305e 100644 --- a/sass/_index.scss +++ b/sass/_index.scss @@ -57,9 +57,6 @@ header.announcement { background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg"); } - // @media screen and (max-width: 1199px) { - // } - div { padding: lh(10) lh() lh(3); From 7e0d9b0d4349a148ff784a163ebbf62f5e8d0edc Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 14 Feb 2012 11:40:23 -0500 Subject: [PATCH 38/75] Update bourbon --HG-- branch : kf-refactor-scss --- bourbon/_bourbon.scss | 29 ++ bourbon/addons/_button.scss | 267 ++++++++++++++++++ bourbon/addons/_font-family.scss | 5 + bourbon/addons/_html5-input-types.scss | 36 +++ bourbon/addons/_position.scss | 30 ++ bourbon/addons/_timing-functions.scss | 32 +++ bourbon/css3/_animation.scss | 171 +++++++++++ bourbon/css3/_appearance.scss | 7 + bourbon/css3/_background-image.scss | 71 +++++ bourbon/css3/_background-size.scss | 15 + bourbon/css3/_border-image.scss | 7 + bourbon/css3/_border-radius.scss | 59 ++++ bourbon/css3/_box-shadow.scss | 16 ++ bourbon/css3/_box-sizing.scss | 8 + bourbon/css3/_columns.scss | 67 +++++ bourbon/css3/_flex-box.scss | 67 +++++ bourbon/css3/_inline-block.scss | 10 + bourbon/css3/_linear-gradient.scss | 41 +++ bourbon/css3/_radial-gradient.scss | 22 ++ bourbon/css3/_transform.scss | 19 ++ bourbon/css3/_transition.scss | 104 +++++++ .../_deprecated-webkit-gradient.scss | 36 +++ bourbon/functions/_grid-width.scss | 13 + bourbon/functions/_linear-gradient.scss | 23 ++ bourbon/functions/_modular-scale.scss | 40 +++ bourbon/functions/_radial-gradient.scss | 15 + bourbon/functions/_tint-shade.scss | 9 + bourbon/lib/bourbon.rb | 19 ++ bourbon/lib/bourbon/sass_extensions.rb | 6 + .../lib/bourbon/sass_extensions/functions.rb | 13 + .../sass_extensions/functions/compact.rb | 13 + sass/application.scss | 1 - 32 files changed, 1270 insertions(+), 1 deletion(-) create mode 100644 bourbon/_bourbon.scss create mode 100644 bourbon/addons/_button.scss create mode 100644 bourbon/addons/_font-family.scss create mode 100644 bourbon/addons/_html5-input-types.scss create mode 100644 bourbon/addons/_position.scss create mode 100644 bourbon/addons/_timing-functions.scss create mode 100644 bourbon/css3/_animation.scss create mode 100644 bourbon/css3/_appearance.scss create mode 100644 bourbon/css3/_background-image.scss create mode 100644 bourbon/css3/_background-size.scss create mode 100644 bourbon/css3/_border-image.scss create mode 100644 bourbon/css3/_border-radius.scss create mode 100644 bourbon/css3/_box-shadow.scss create mode 100644 bourbon/css3/_box-sizing.scss create mode 100644 bourbon/css3/_columns.scss create mode 100644 bourbon/css3/_flex-box.scss create mode 100644 bourbon/css3/_inline-block.scss create mode 100644 bourbon/css3/_linear-gradient.scss create mode 100644 bourbon/css3/_radial-gradient.scss create mode 100644 bourbon/css3/_transform.scss create mode 100644 bourbon/css3/_transition.scss create mode 100644 bourbon/functions/_deprecated-webkit-gradient.scss create mode 100644 bourbon/functions/_grid-width.scss create mode 100644 bourbon/functions/_linear-gradient.scss create mode 100644 bourbon/functions/_modular-scale.scss create mode 100644 bourbon/functions/_radial-gradient.scss create mode 100644 bourbon/functions/_tint-shade.scss create mode 100644 bourbon/lib/bourbon.rb create mode 100644 bourbon/lib/bourbon/sass_extensions.rb create mode 100644 bourbon/lib/bourbon/sass_extensions/functions.rb create mode 100644 bourbon/lib/bourbon/sass_extensions/functions/compact.rb diff --git a/bourbon/_bourbon.scss b/bourbon/_bourbon.scss new file mode 100644 index 0000000000..447167c5ab --- /dev/null +++ b/bourbon/_bourbon.scss @@ -0,0 +1,29 @@ +// Custom Functions +@import "functions/deprecated-webkit-gradient"; +@import "functions/grid-width"; +@import "functions/modular-scale"; +@import "functions/tint-shade"; + +// CSS3 Mixins +@import "css3/animation"; +@import "css3/appearance"; +@import "css3/background-image"; +@import "css3/background-size"; +@import "css3/border-image"; +@import "css3/border-radius"; +@import "css3/box-shadow"; +@import "css3/box-sizing"; +@import "css3/columns"; +@import "css3/flex-box"; +@import "css3/inline-block"; +@import "css3/linear-gradient"; +@import "css3/radial-gradient"; +@import "css3/transform"; +@import "css3/transition"; + +// Addons & other mixins +@import "addons/button"; +@import "addons/font-family"; +@import "addons/html5-input-types"; +@import "addons/position"; +@import "addons/timing-functions"; diff --git a/bourbon/addons/_button.scss b/bourbon/addons/_button.scss new file mode 100644 index 0000000000..1d32125140 --- /dev/null +++ b/bourbon/addons/_button.scss @@ -0,0 +1,267 @@ +@mixin button ($style: simple, $base-color: #4294f0) { + + @if type-of($style) == color { + $base-color: $style; + $style: simple; + } + + // Grayscale button + @if $base-color == grayscale($base-color) { + @if $style == simple { + @include simple($base-color, $grayscale: true); + } + + @else if $style == shiny { + @include shiny($base-color, $grayscale: true); + } + + @else if $style == pill { + @include pill($base-color, $grayscale: true); + } + } + + // Colored button + @else { + @if $style == simple { + @include simple($base-color); + } + + @else if $style == shiny { + @include shiny($base-color); + } + + @else if $style == pill { + @include pill($base-color); + } + } +} + + +// Simple Button +//************************************************************************// +@mixin simple($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); + $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); + $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); + + @if lightness($base-color) > 70% { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border: grayscale($border); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + + border: 1px solid $border; + @include border-radius (3px); + @include box-shadow (inset 0 1px 0 0 $inset-shadow); + color: $color; + display: inline; + font-size: 11px; + font-weight: bold; + @include linear-gradient ($base-color, $stop-gradient); + padding: 6px 18px 7px; + text-shadow: 0 1px 0 $text-shadow; + -webkit-background-clip: padding-box; + + &:hover { + $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); + $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + } + + @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover); + cursor: pointer; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + } + + &:active { + $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); + + @if $grayscale == true { + $border-active: grayscale($border-active); + $inset-shadow-active: grayscale($inset-shadow-active); + } + + border: 1px solid $border-active; + @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee); + } +} + + +// Shiny Button +//************************************************************************// +@mixin shiny($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); + $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); + $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); + $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); + $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); + $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); + $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); + + @if lightness($base-color) > 70% { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border: grayscale($border); + $border-bottom: grayscale($border-bottom); + $fourth-stop: grayscale($fourth-stop); + $inset-shadow: grayscale($inset-shadow); + $second-stop: grayscale($second-stop); + $text-shadow: grayscale($text-shadow); + $third-stop: grayscale($third-stop); + } + + border: 1px solid $border; + border-bottom: 1px solid $border-bottom; + @include border-radius(5px); + @include box-shadow(inset 0 1px 0 0 $inset-shadow); + color: $color; + display: inline; + font-size: 14px; + font-weight: bold; + @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); + padding: 7px 20px 8px; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px $text-shadow; + + &:hover { + $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); + $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); + $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); + $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); + + @if $grayscale == true { + $first-stop-hover: grayscale($first-stop-hover); + $second-stop-hover: grayscale($second-stop-hover); + $third-stop-hover: grayscale($third-stop-hover); + $fourth-stop-hover: grayscale($fourth-stop-hover); + } + + cursor: pointer; + @include linear-gradient(top, $first-stop-hover 0%, + $second-stop-hover 50%, + $third-stop-hover 50%, + $fourth-stop-hover 100%); + } + + &:active { + $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); + + @if $grayscale == true { + $inset-shadow-active: grayscale($inset-shadow-active); + } + + @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff); + } +} + + +// Pill Button +//************************************************************************// +@mixin pill($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); + $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); + $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); + $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); + + @if lightness($base-color) > 70% { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + + border: 1px solid $border-top; + border-color: $border-top $border-sides $border-bottom; + @include border-radius(16px); + @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3); + color: $color; + display: inline; + font-size: 11px; + font-weight: normal; + line-height: 1; + @include linear-gradient ($base-color, $stop-gradient); + padding: 3px 16px 5px; + text-align: center; + text-shadow: 0 -1px 1px $text-shadow; + -webkit-background-clip: padding-box; + + &:hover { + $base-color-hover: adjust-color($base-color, $lightness: -4.5%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); + $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); + $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + $text-shadow-hover: grayscale($text-shadow-hover); + } + + border: 1px solid $border-top; + border-color: $border-top $border-sides $border-bottom; + @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover); + cursor: pointer; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + text-shadow: 0 -1px 1px $text-shadow-hover; + -webkit-background-clip: padding-box; + } + + &:active { + $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); + $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); + $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); + $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); + $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); + + @if $grayscale == true { + $active-color: grayscale($active-color); + $border-active: grayscale($border-active); + $border-bottom-active: grayscale($border-bottom-active); + $inset-shadow-active: grayscale($inset-shadow-active); + $text-shadow-active: grayscale($text-shadow-active); + } + + background: $active-color; + border: 1px solid $border-active; + border-bottom: 1px solid $border-bottom-active; + @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff); + text-shadow: 0 -1px 1px $text-shadow-active; + } +} + diff --git a/bourbon/addons/_font-family.scss b/bourbon/addons/_font-family.scss new file mode 100644 index 0000000000..df8a80ddfc --- /dev/null +++ b/bourbon/addons/_font-family.scss @@ -0,0 +1,5 @@ +$georgia: Georgia, Cambria, "Times New Roman", Times, serif; +$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; +$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; +$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; +$verdana: Verdana, Geneva, sans-serif; diff --git a/bourbon/addons/_html5-input-types.scss b/bourbon/addons/_html5-input-types.scss new file mode 100644 index 0000000000..9d86fbb4d4 --- /dev/null +++ b/bourbon/addons/_html5-input-types.scss @@ -0,0 +1,36 @@ +//************************************************************************// +// Generate a variable ($all-text-inputs) with a list of all html5 +// input types that have a text-based input, excluding textarea. +// http://diveintohtml5.org/forms.html +//************************************************************************// +$inputs-list: 'input[type="email"]', + 'input[type="number"]', + 'input[type="password"]', + 'input[type="search"]', + 'input[type="tel"]', + 'input[type="text"]', + 'input[type="url"]', + + // Webkit & Gecko may change the display of these in the future + 'input[type="color"]', + 'input[type="date"]', + 'input[type="datetime"]', + 'input[type="datetime-local"]', + 'input[type="month"]', + 'input[type="time"]', + 'input[type="week"]'; + +$unquoted-inputs-list: (); + +@each $input-type in $inputs-list { + $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma); +} + +$all-text-inputs: $unquoted-inputs-list; + +// You must use interpolation on the variable: +// #{$all-text-inputs} +//************************************************************************// +// #{$all-text-inputs}, textarea { +// border: 1px solid red; +// } diff --git a/bourbon/addons/_position.scss b/bourbon/addons/_position.scss new file mode 100644 index 0000000000..6ad330f1df --- /dev/null +++ b/bourbon/addons/_position.scss @@ -0,0 +1,30 @@ +@mixin position ($position: relative, $coordinates: 0 0 0 0) { + + @if type-of($position) == list { + $coordinates: $position; + $position: relative; + } + + $top: nth($coordinates, 1); + $right: nth($coordinates, 2); + $bottom: nth($coordinates, 3); + $left: nth($coordinates, 4); + + position: $position; + + @if not(unitless($top)) { + top: $top; + } + + @if not(unitless($right)) { + right: $right; + } + + @if not(unitless($bottom)) { + bottom: $bottom; + } + + @if not(unitless($left)) { + left: $left; + } +} diff --git a/bourbon/addons/_timing-functions.scss b/bourbon/addons/_timing-functions.scss new file mode 100644 index 0000000000..51b2410914 --- /dev/null +++ b/bourbon/addons/_timing-functions.scss @@ -0,0 +1,32 @@ +// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) +// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html + +// EASE IN +$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); +$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); +$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); +$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); +$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); +$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); +$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); +$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); + +// EASE OUT +$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); +$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); +$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); +$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); +$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); +$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); +$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); +$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); + +// EASE IN OUT +$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); +$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); +$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); +$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); +$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); +$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); +$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); +$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); diff --git a/bourbon/css3/_animation.scss b/bourbon/css3/_animation.scss new file mode 100644 index 0000000000..f99e06eb6f --- /dev/null +++ b/bourbon/css3/_animation.scss @@ -0,0 +1,171 @@ +// http://www.w3.org/TR/css3-animations/#the-animation-name-property- +// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. + +// Official animation shorthand property. +@mixin animation ($animation-1, + $animation-2: false, $animation-3: false, + $animation-4: false, $animation-5: false, + $animation-6: false, $animation-7: false, + $animation-8: false, $animation-9: false) + { + $full: compact($animation-1, $animation-2, $animation-3, $animation-4, + $animation-5, $animation-6, $animation-7, $animation-8, $animation-9); + + -webkit-animation: $full; + -moz-animation: $full; + animation: $full; +} + +// Individual Animation Properties +@mixin animation-name ($name-1, + $name-2: false, $name-3: false, + $name-4: false, $name-5: false, + $name-6: false, $name-7: false, + $name-8: false, $name-9: false) + { + $full: compact($name-1, $name-2, $name-3, $name-4, + $name-5, $name-6, $name-7, $name-8, $name-9); + + -webkit-animation-name: $full; + -moz-animation-name: $full; + animation-name: $full; +} + + +@mixin animation-duration ($time-1: 0, + $time-2: false, $time-3: false, + $time-4: false, $time-5: false, + $time-6: false, $time-7: false, + $time-8: false, $time-9: false) + { + $full: compact($time-1, $time-2, $time-3, $time-4, + $time-5, $time-6, $time-7, $time-8, $time-9); + + -webkit-animation-duration: $full; + -moz-animation-duration: $full; + animation-duration: $full; +} + + +@mixin animation-timing-function ($motion-1: ease, +// ease | linear | ease-in | ease-out | ease-in-out + $motion-2: false, $motion-3: false, + $motion-4: false, $motion-5: false, + $motion-6: false, $motion-7: false, + $motion-8: false, $motion-9: false) + { + $full: compact($motion-1, $motion-2, $motion-3, $motion-4, + $motion-5, $motion-6, $motion-7, $motion-8, $motion-9); + + -webkit-animation-timing-function: $full; + -moz-animation-timing-function: $full; + animation-timing-function: $full; +} + + +@mixin animation-iteration-count ($value-1: 1, +// infinite | + $value-2: false, $value-3: false, + $value-4: false, $value-5: false, + $value-6: false, $value-7: false, + $value-8: false, $value-9: false) + { + $full: compact($value-1, $value-2, $value-3, $value-4, + $value-5, $value-6, $value-7, $value-8, $value-9); + + -webkit-animation-iteration-count: $full; + -moz-animation-iteration-count: $full; + animation-iteration-count: $full; +} + + +@mixin animation-direction ($direction-1: normal, +// normal | alternate + $direction-2: false, $direction-3: false, + $direction-4: false, $direction-5: false, + $direction-6: false, $direction-7: false, + $direction-8: false, $direction-9: false) + { + $full: compact($direction-1, $direction-2, $direction-3, $direction-4, + $direction-5, $direction-6, $direction-7, $direction-8, $direction-9); + + -webkit-animation-direction: $full; + -moz-animation-direction: $full; + animation-direction: $full; +} + + +@mixin animation-play-state ($state-1: running, +// running | paused + $state-2: false, $state-3: false, + $state-4: false, $state-5: false, + $state-6: false, $state-7: false, + $state-8: false, $state-9: false) + { + $full: compact($state-1, $state-2, $state-3, $state-4, + $state-5, $state-6, $state-7, $state-8, $state-9); + + -webkit-animation-play-state: $full; + -moz-animation-play-state: $full; + animation-play-state: $full; +} + + +@mixin animation-delay ($time-1: 0, + $time-2: false, $time-3: false, + $time-4: false, $time-5: false, + $time-6: false, $time-7: false, + $time-8: false, $time-9: false) + { + $full: compact($time-1, $time-2, $time-3, $time-4, + $time-5, $time-6, $time-7, $time-8, $time-9); + + -webkit-animation-delay: $full; + -moz-animation-delay: $full; + animation-delay: $full; +} + + +@mixin animation-fill-mode ($mode-1: none, +// http://goo.gl/l6ckm +// none | forwards | backwards | both + $mode-2: false, $mode-3: false, + $mode-4: false, $mode-5: false, + $mode-6: false, $mode-7: false, + $mode-8: false, $mode-9: false) + { + $full: compact($mode-1, $mode-2, $mode-3, $mode-4, + $mode-5, $mode-6, $mode-7, $mode-8, $mode-9); + + -webkit-animation-fill-mode: $full; + -moz-animation-fill-mode: $full; + animation-fill-mode: $full; +} + + +// Deprecated +@mixin animation-basic ($name, $time: 0, $motion: ease) { + $length-of-name: length($name); + $length-of-time: length($time); + $length-of-motion: length($motion); + + @if $length-of-name > 1 { + @include animation-name(zip($name)); + } @else { + @include animation-name( $name); + } + + @if $length-of-time > 1 { + @include animation-duration(zip($time)); + } @else { + @include animation-duration( $time); + } + + @if $length-of-motion > 1 { + @include animation-timing-function(zip($motion)); + } @else { + @include animation-timing-function( $motion); + } + @warn "The animation-basic mixin is deprecated. Use the animation mixin instead."; +} + diff --git a/bourbon/css3/_appearance.scss b/bourbon/css3/_appearance.scss new file mode 100644 index 0000000000..548767e166 --- /dev/null +++ b/bourbon/css3/_appearance.scss @@ -0,0 +1,7 @@ +@mixin appearance ($value) { + -webkit-appearance: $value; + -moz-appearance: $value; + -ms-appearance: $value; + -o-appearance: $value; + appearance: $value; +} diff --git a/bourbon/css3/_background-image.scss b/bourbon/css3/_background-image.scss new file mode 100644 index 0000000000..b11ab3fd53 --- /dev/null +++ b/bourbon/css3/_background-image.scss @@ -0,0 +1,71 @@ +//************************************************************************// +// Background-image property for adding multiple background images with +// gradients, or for stringing multiple gradients together. +//************************************************************************// +@import "../functions/linear-gradient"; +@import "../functions/radial-gradient"; + +@mixin background-image( + $image-1 , $image-2: false, + $image-3: false, $image-4: false, + $image-5: false, $image-6: false, + $image-7: false, $image-8: false, + $image-9: false, $image-10: false +) { + $images: compact($image-1, $image-2, + $image-3, $image-4, + $image-5, $image-6, + $image-7, $image-8, + $image-9, $image-10); + + background-image: add-prefix($images, webkit); + background-image: add-prefix($images, moz); + background-image: add-prefix($images, ms); + background-image: add-prefix($images, o); + background-image: add-prefix($images); +} + + +@function add-prefix($images, $vendor: false) { + $images-prefixed: (); + + @for $i from 1 through length($images) { + $type: type-of(nth($images, $i)); // Get type of variable - List or String + + // If variable is a list - Gradient + @if $type == list { + $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial) + $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) + + $gradient: render-gradients($gradient-args, $gradient-type, $vendor); + $images-prefixed: append($images-prefixed, $gradient, comma); + } + + // If variable is a string - Image + @else if $type == string { + $images-prefixed: join($images-prefixed, nth($images, $i), comma); + } + } + @return $images-prefixed; +} + + +@function render-gradients($gradients, $gradient-type, $vendor: false) { + $vendor-gradients: false; + @if $vendor { + $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients); + } + + @else if $vendor == false { + $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})"; + $vendor-gradients: unquote($vendor-gradients); + } + @return $vendor-gradients; +} + +//Examples: + //@include background-image(linear-gradient(top, orange, red)); + //@include background-image(radial-gradient(50% 50%, cover circle, orange, red)); + //@include background-image(url("/images/a.png"), linear-gradient(orange, red)); + //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png")); + //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red); diff --git a/bourbon/css3/_background-size.scss b/bourbon/css3/_background-size.scss new file mode 100644 index 0000000000..4bba11027d --- /dev/null +++ b/bourbon/css3/_background-size.scss @@ -0,0 +1,15 @@ +@mixin background-size ($length-1, + $length-2: false, $length-3: false, + $length-4: false, $length-5: false, + $length-6: false, $length-7: false, + $length-8: false, $length-9: false) + { + $full: compact($length-1, $length-2, $length-3, $length-4, + $length-5, $length-6, $length-7, $length-8, $length-9); + + -webkit-background-size: $full; + -moz-background-size: $full; + -ms-background-size: $full; + -o-background-size: $full; + background-size: $full; +} diff --git a/bourbon/css3/_border-image.scss b/bourbon/css3/_border-image.scss new file mode 100644 index 0000000000..0373980422 --- /dev/null +++ b/bourbon/css3/_border-image.scss @@ -0,0 +1,7 @@ +@mixin border-image ($image) { + -webkit-border-image: $image; + -moz-border-image: $image; + -ms-border-image: $image; + -o-border-image: $image; + border-image: $image; +} diff --git a/bourbon/css3/_border-radius.scss b/bourbon/css3/_border-radius.scss new file mode 100644 index 0000000000..f950d4dd98 --- /dev/null +++ b/bourbon/css3/_border-radius.scss @@ -0,0 +1,59 @@ +@mixin border-radius ($radii) { + -webkit-border-radius: $radii; + -moz-border-radius: $radii; + -ms-border-radius: $radii; + -o-border-radius: $radii; + border-radius: $radii; +} + +@mixin border-top-left-radius($radii) { + -webkit-border-top-left-radius: $radii; + -moz-border-top-left-radius: $radii; + -ms-border-top-left-radius: $radii; + -o-border-top-left-radius: $radii; + border-top-left-radius: $radii; +} + +@mixin border-top-right-radius($radii) { + -webkit-border-top-right-radius: $radii; + -moz-border-top-right-radius: $radii; + -ms-border-top-right-radius: $radii; + -o-border-top-right-radius: $radii; + border-top-right-radius: $radii; +} + +@mixin border-bottom-left-radius($radii) { + -webkit-border-bottom-left-radius: $radii; + -moz-border-bottom-left-radius: $radii; + -ms-border-bottom-left-radius: $radii; + -o-border-bottom-left-radius: $radii; + border-bottom-left-radius: $radii; +} + +@mixin border-bottom-right-radius($radii) { + -webkit-border-bottom-right-radius: $radii; + -moz-border-bottom-right-radius: $radii; + -ms-border-bottom-right-radius: $radii; + -o-border-bottom-right-radius: $radii; + border-bottom-right-radius: $radii; +} + +@mixin border-top-radius($radii) { + @include border-top-left-radius($radii); + @include border-top-right-radius($radii); +} + +@mixin border-right-radius($radii) { + @include border-top-right-radius($radii); + @include border-bottom-right-radius($radii); +} + +@mixin border-bottom-radius($radii) { + @include border-bottom-left-radius($radii); + @include border-bottom-right-radius($radii); +} + +@mixin border-left-radius($radii) { + @include border-top-left-radius($radii); + @include border-bottom-left-radius($radii); +} diff --git a/bourbon/css3/_box-shadow.scss b/bourbon/css3/_box-shadow.scss new file mode 100644 index 0000000000..ad5c24e7aa --- /dev/null +++ b/bourbon/css3/_box-shadow.scss @@ -0,0 +1,16 @@ +// Box-Shadow Mixin Requires Sass v3.1.1+ +@mixin box-shadow ($shadow-1, + $shadow-2: false, $shadow-3: false, + $shadow-4: false, $shadow-5: false, + $shadow-6: false, $shadow-7: false, + $shadow-8: false, $shadow-9: false) + { + $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, + $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9); + + -webkit-box-shadow: $full; + -moz-box-shadow: $full; + -ms-box-shadow: $full; + -o-box-shadow: $full; + box-shadow: $full; +} diff --git a/bourbon/css3/_box-sizing.scss b/bourbon/css3/_box-sizing.scss new file mode 100644 index 0000000000..a9c6cdb43f --- /dev/null +++ b/bourbon/css3/_box-sizing.scss @@ -0,0 +1,8 @@ +@mixin box-sizing ($box) { +// content-box | border-box | inherit + -webkit-box-sizing: $box; + -moz-box-sizing: $box; + -ms-box-sizing: $box; + -o-box-sizing: $box; + box-sizing: $box; +} diff --git a/bourbon/css3/_columns.scss b/bourbon/css3/_columns.scss new file mode 100644 index 0000000000..2896c91d7f --- /dev/null +++ b/bourbon/css3/_columns.scss @@ -0,0 +1,67 @@ +@mixin columns($arg: auto) { +// || + -webkit-columns: $arg; + -moz-columns: $arg; + columns: $arg; +} + +@mixin column-count($int: auto) { +// auto || integer + -webkit-column-count: $int; + -moz-column-count: $int; + column-count: $int; +} + +@mixin column-gap($length: normal) { +// normal || length + -webkit-column-gap: $length; + -moz-column-gap: $length; + column-gap: $length; +} + +@mixin column-fill($arg: auto) { +// auto || length + -webkit-columns-fill: $arg; + -moz-columns-fill: $arg; + columns-fill: $arg; +} + +@mixin column-rule($arg) { +// || || + -webkit-column-rule: $arg; + -moz-column-rule: $arg; + column-rule: $arg; +} + +@mixin column-rule-color($color) { + -webkit-column-rule-color: $color; + -moz-column-rule-color: $color; + column-rule-color: $color; +} + +@mixin column-rule-style($style: none) { +// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid + -webkit-column-rule-style: $style; + -moz-column-rule-style: $style; + column-rule-style: $style; +} + +@mixin column-rule-width ($width: none) { + -webkit-column-rule-width: $width; + -moz-column-rule-width: $width; + column-rule-width: $width; +} + +@mixin column-span($arg: none) { +// none || all + -webkit-column-span: $arg; + -moz-column-span: $arg; + column-span: $arg; +} + +@mixin column-width($length: auto) { +// auto || length + -webkit-column-width: $length; + -moz-column-width: $length; + column-width: $length; +} diff --git a/bourbon/css3/_flex-box.scss b/bourbon/css3/_flex-box.scss new file mode 100644 index 0000000000..44c1dfd789 --- /dev/null +++ b/bourbon/css3/_flex-box.scss @@ -0,0 +1,67 @@ +// CSS3 Flexible Box Model and property defaults + +// Custom shorthand notation for flexbox +@mixin box($orient: inline-axis, $pack: start, $align: stretch) { + @include display-box; + @include box-orient($orient); + @include box-pack($pack); + @include box-align($align); +} + +@mixin display-box { + display: -webkit-box; + display: -moz-box; + display: box; +} + +@mixin box-orient($orient: inline-axis) { +// horizontal|vertical|inline-axis|block-axis|inherit + -webkit-box-orient: $orient; + -moz-box-orient: $orient; + box-orient: $orient; +} + +@mixin box-pack($pack: start) { +// start|end|center|justify + -webkit-box-pack: $pack; + -moz-box-pack: $pack; + box-pack: $pack; +} + +@mixin box-align($align: stretch) { +// start|end|center|baseline|stretch + -webkit-box-align: $align; + -moz-box-align: $align; + box-align: $align; +} + +@mixin box-direction($direction: normal) { +// normal|reverse|inherit + -webkit-box-direction: $direction; + -moz-box-direction: $direction; + box-direction: $direction; +} +@mixin box-lines($lines: single) { +// single|multiple + -webkit-box-lines: $lines; + -moz-box-lines: $lines; + box-lines: $lines; +} + +@mixin box-ordinal-group($integer: 1) { + -webkit-box-ordinal-group: $integer; + -moz-box-ordinal-group: $integer; + box-ordinal-group: $integer; +} + +@mixin box-flex($value: 0.0) { + -webkit-box-flex: $value; + -moz-box-flex: $value; + box-flex: $value; +} + +@mixin box-flex-group($integer: 1) { + -webkit-box-flex-group: $integer; + -moz-box-flex-group: $integer; + box-flex-group: $integer; +} diff --git a/bourbon/css3/_inline-block.scss b/bourbon/css3/_inline-block.scss new file mode 100644 index 0000000000..d79a13c851 --- /dev/null +++ b/bourbon/css3/_inline-block.scss @@ -0,0 +1,10 @@ +// Legacy support for inline-block in IE7 (maybe IE6) +@mixin inline-block { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; +} diff --git a/bourbon/css3/_linear-gradient.scss b/bourbon/css3/_linear-gradient.scss new file mode 100644 index 0000000000..0b68501719 --- /dev/null +++ b/bourbon/css3/_linear-gradient.scss @@ -0,0 +1,41 @@ +@mixin linear-gradient($pos, $G1, $G2: false, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false, + $fallback: false) { + // Detect what type of value exists in $pos + $pos-type: type-of(nth($pos, 1)); + + // If $pos is missing from mixin, reassign vars and add default position + @if ($pos-type == color) or (nth($pos, 1) == "transparent") { + $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; + $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; + $pos: top; // Default position + } + + $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + + // Set $G1 as the default fallback color + $fallback-color: nth($G1, 1); + + // If $fallback is a color use that color as the fallback color + @if type-of($fallback) == color { + $fallback-color: $fallback; + } + + background-color: $fallback-color; + background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0 + background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome + background-image: -moz-linear-gradient($pos, $full); + background-image: -ms-linear-gradient($pos, $full); + background-image: -o-linear-gradient($pos, $full); + background-image: unquote("linear-gradient(#{$pos}, #{$full})"); +} + + +// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well. +// @include linear-gradient(#1e5799, #2989d8); +// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8); +// @include linear-gradient(top, #1e5799 0%, #2989d8 50%); +// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); diff --git a/bourbon/css3/_radial-gradient.scss b/bourbon/css3/_radial-gradient.scss new file mode 100644 index 0000000000..fbd0a8523c --- /dev/null +++ b/bourbon/css3/_radial-gradient.scss @@ -0,0 +1,22 @@ +// Requires Sass 3.1+ +@mixin radial-gradient($pos, $shape-size, + $G1, $G2, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false) { + + $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + + background-color: nth($G1, 1); + background-image: deprecated-webkit-gradient(radial, $full); // Safari <= 5.0 + background-image: -webkit-radial-gradient($pos, $shape-size, $full); + background-image: -moz-radial-gradient($pos, $shape-size, $full); + background-image: -ms-radial-gradient($pos, $shape-size, $full); + background-image: -o-radial-gradient($pos, $shape-size, $full); + background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})"); +} + +// Usage: Gradient position and shape-size are required. Color stops are optional. +// @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef); +// @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef); diff --git a/bourbon/css3/_transform.scss b/bourbon/css3/_transform.scss new file mode 100644 index 0000000000..8d19e8b88d --- /dev/null +++ b/bourbon/css3/_transform.scss @@ -0,0 +1,19 @@ +@mixin transform($property: none) { +// none | + -webkit-transform: $property; + -moz-transform: $property; + -ms-transform: $property; + -o-transform: $property; + transform: $property; +} + +@mixin transform-origin($axes: 50%) { +// x-axis - left | center | right | length | % +// y-axis - top | center | bottom | length | % +// z-axis - length + -webkit-transform-origin: $axes; + -moz-transform-origin: $axes; + -ms-transform-origin: $axes; + -o-transform-origin: $axes; + transform-origin: $axes; +} diff --git a/bourbon/css3/_transition.scss b/bourbon/css3/_transition.scss new file mode 100644 index 0000000000..058dbe0e33 --- /dev/null +++ b/bourbon/css3/_transition.scss @@ -0,0 +1,104 @@ +// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. +// Example: @include transition (all, 2.0s, ease-in-out); +// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); +// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s)); + +@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) { + + // Detect # of args passed into each variable + $length-of-property: length($property); + $length-of-duration: length($duration); + $length-of-timing-function: length($timing-function); + $length-of-delay: length($delay); + + @if $length-of-property > 1 { + @include transition-property(zip($property)); } + @else { + @include transition-property( $property); + } + + @if $length-of-duration > 1 { + @include transition-duration(zip($duration)); } + @else { + @include transition-duration( $duration); + } + + @if $length-of-timing-function > 1 { + @include transition-timing-function(zip($timing-function)); } + @else { + @include transition-timing-function( $timing-function); + } + + @if $length-of-delay > 1 { + @include transition-delay(zip($delay)); } + @else { + @include transition-delay( $delay); + } +} + + +@mixin transition-property ($prop-1: all, + $prop-2: false, $prop-3: false, + $prop-4: false, $prop-5: false, + $prop-6: false, $prop-7: false, + $prop-8: false, $prop-9: false) + { + $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5, + $prop-6, $prop-7, $prop-8, $prop-9); + + -webkit-transition-property: $full; + -moz-transition-property: $full; + -ms-transition-property: $full; + -o-transition-property: $full; + transition-property: $full; +} + +@mixin transition-duration ($time-1: 0, + $time-2: false, $time-3: false, + $time-4: false, $time-5: false, + $time-6: false, $time-7: false, + $time-8: false, $time-9: false) + { + $full: compact($time-1, $time-2, $time-3, $time-4, $time-5, + $time-6, $time-7, $time-8, $time-9); + + -webkit-transition-duration: $full; + -moz-transition-duration: $full; + -ms-transition-duration: $full; + -o-transition-duration: $full; + transition-duration: $full; +} + +@mixin transition-timing-function ($motion-1: ease, + $motion-2: false, $motion-3: false, + $motion-4: false, $motion-5: false, + $motion-6: false, $motion-7: false, + $motion-8: false, $motion-9: false) + { + $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5, + $motion-6, $motion-7, $motion-8, $motion-9); + +// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() + -webkit-transition-timing-function: $full; + -moz-transition-timing-function: $full; + -ms-transition-timing-function: $full; + -o-transition-timing-function: $full; + transition-timing-function: $full; +} + +@mixin transition-delay ($time-1: 0, + $time-2: false, $time-3: false, + $time-4: false, $time-5: false, + $time-6: false, $time-7: false, + $time-8: false, $time-9: false) + { + $full: compact($time-1, $time-2, $time-3, $time-4, $time-5, + $time-6, $time-7, $time-8, $time-9); + + -webkit-transition-delay: $full; + -moz-transition-delay: $full; + -ms-transition-delay: $full; + -o-transition-delay: $full; + transition-delay: $full; +} + diff --git a/bourbon/functions/_deprecated-webkit-gradient.scss b/bourbon/functions/_deprecated-webkit-gradient.scss new file mode 100644 index 0000000000..1322f6f60e --- /dev/null +++ b/bourbon/functions/_deprecated-webkit-gradient.scss @@ -0,0 +1,36 @@ +// Render Deprecated Webkit Gradient - Linear || Radial +//************************************************************************// +@function deprecated-webkit-gradient($type, $full) { + $gradient-list: (); + $gradient: false; + $full-length: length($full); + $percentage: false; + $gradient-type: $type; + + @for $i from 1 through $full-length { + $gradient: nth($full, $i); + + @if length($gradient) == 2 { + $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1)); + $gradient-list: join($gradient-list, $color-stop, comma); + } + @else { + @if $i == $full-length { + $percentage: 100%; + } + @else { + $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%"; + } + $color-stop: color-stop(unquote($percentage), $gradient); + $gradient-list: join($gradient-list, $color-stop, comma); + } + } + + @if $type == radial { + $gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list); + } + @else if $type == linear { + $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list); + } + @return $gradient; +} diff --git a/bourbon/functions/_grid-width.scss b/bourbon/functions/_grid-width.scss new file mode 100644 index 0000000000..8e63d83d60 --- /dev/null +++ b/bourbon/functions/_grid-width.scss @@ -0,0 +1,13 @@ +@function grid-width($n) { + @return $n * $gw-column + ($n - 1) * $gw-gutter; +} + +// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. +// +// $gw-column: 100px; // Column Width +// $gw-gutter: 40px; // Gutter Width +// +// div { +// width: grid-width(4); // returns 520px; +// margin-left: $gw-gutter; // returns 40px; +// } diff --git a/bourbon/functions/_linear-gradient.scss b/bourbon/functions/_linear-gradient.scss new file mode 100644 index 0000000000..3b10ca82a6 --- /dev/null +++ b/bourbon/functions/_linear-gradient.scss @@ -0,0 +1,23 @@ +@function linear-gradient($pos: top, $G1: false, $G2: false, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false) { + + // Detect what type of value exists in $pos + $pos-type: type-of(nth($pos, 1)); + + // If $pos is missing from mixin, reassign vars and add default position + @if ($pos-type == color) or (nth($pos, 1) == "transparent") { + $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; + $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; + $pos: top; // Default position + } + + $type: linear; + $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + $type-gradient: append($type, $gradient, comma); + + @return $type-gradient; +} + diff --git a/bourbon/functions/_modular-scale.scss b/bourbon/functions/_modular-scale.scss new file mode 100644 index 0000000000..dddccb5224 --- /dev/null +++ b/bourbon/functions/_modular-scale.scss @@ -0,0 +1,40 @@ +@function modular-scale($value, $increment, $ratio) { + @if $increment > 0 { + @for $i from 1 through $increment { + $value: ($value * $ratio); + } + } + + @if $increment < 0 { + $increment: abs($increment); + @for $i from 1 through $increment { + $value: ($value / $ratio); + } + } + + @return $value; +} + +// div { +// Increment Up GR with positive value +// font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px +// +// Increment Down GR with negative value +// font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px +// +// Can be used with ceil(round up) or floor(round down) +// font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px +// font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px +// } +// +// modularscale.com + +@function golden-ratio($value, $increment) { + @return modular-scale($value, $increment, 1.618) +} + +// div { +// font-size: golden-ratio(14px, 1); // returns: 22.652px +// } +// +// goldenratiocalculator.com diff --git a/bourbon/functions/_radial-gradient.scss b/bourbon/functions/_radial-gradient.scss new file mode 100644 index 0000000000..3d5461ad6e --- /dev/null +++ b/bourbon/functions/_radial-gradient.scss @@ -0,0 +1,15 @@ +// This function is required and used by the background-image mixin. +@function radial-gradient($pos, $shape-size, + $G1, $G2, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false) { + + $type: radial; + $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + $type-gradient: append($type, $gradient, comma); + + @return $type-gradient; +} + diff --git a/bourbon/functions/_tint-shade.scss b/bourbon/functions/_tint-shade.scss new file mode 100644 index 0000000000..f7172004ac --- /dev/null +++ b/bourbon/functions/_tint-shade.scss @@ -0,0 +1,9 @@ +// Add percentage of white to a color +@function tint($color, $percent){ + @return mix(white, $color, $percent); +} + +// Add percentage of black to a color +@function shade($color, $percent){ + @return mix(black, $color, $percent); +} diff --git a/bourbon/lib/bourbon.rb b/bourbon/lib/bourbon.rb new file mode 100644 index 0000000000..1635be836d --- /dev/null +++ b/bourbon/lib/bourbon.rb @@ -0,0 +1,19 @@ +require "bourbon/generator" + +module Bourbon + if defined?(Rails) + class Engine < ::Rails::Engine + require 'bourbon/engine' + end + + module Rails + class Railtie < ::Rails::Railtie + rake_tasks do + load "tasks/install.rake" + end + end + end + end +end + +require File.join(File.dirname(__FILE__), "/bourbon/sass_extensions") diff --git a/bourbon/lib/bourbon/sass_extensions.rb b/bourbon/lib/bourbon/sass_extensions.rb new file mode 100644 index 0000000000..ad567200e3 --- /dev/null +++ b/bourbon/lib/bourbon/sass_extensions.rb @@ -0,0 +1,6 @@ +module Bourbon::SassExtensions +end + +require "sass" + +require File.join(File.dirname(__FILE__), "/sass_extensions/functions") diff --git a/bourbon/lib/bourbon/sass_extensions/functions.rb b/bourbon/lib/bourbon/sass_extensions/functions.rb new file mode 100644 index 0000000000..daa877650e --- /dev/null +++ b/bourbon/lib/bourbon/sass_extensions/functions.rb @@ -0,0 +1,13 @@ +module Bourbon::SassExtensions::Functions +end + +require File.join(File.dirname(__FILE__), "/functions/compact") + +module Sass::Script::Functions + include Bourbon::SassExtensions::Functions::Compact +end + +# Wierd that this has to be re-included to pick up sub-modules. Ruby bug? +class Sass::Script::Functions::EvaluationContext + include Sass::Script::Functions +end diff --git a/bourbon/lib/bourbon/sass_extensions/functions/compact.rb b/bourbon/lib/bourbon/sass_extensions/functions/compact.rb new file mode 100644 index 0000000000..5192e921e7 --- /dev/null +++ b/bourbon/lib/bourbon/sass_extensions/functions/compact.rb @@ -0,0 +1,13 @@ +# Compact function pulled from compass +module Bourbon::SassExtensions::Functions::Compact + + def compact(*args) + sep = :comma + if args.size == 1 && args.first.is_a?(Sass::Script::List) + args = args.first.value + sep = args.first.separator + end + Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep) + end + +end diff --git a/sass/application.scss b/sass/application.scss index a32d8b3172..63b6ce1d20 100644 --- a/sass/application.scss +++ b/sass/application.scss @@ -13,7 +13,6 @@ @import "info"; @import "profile"; @import "wiki-basic-html", "wiki-create", "wiki"; -@import "activation"; @import "help"; @import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" , "discussion-answers", "discussion-forms", "form-wmd-toolbar"; From d6b96ae1f1c777cca56949557ecbeb6f2293759b Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 14 Feb 2012 13:55:06 -0500 Subject: [PATCH 39/75] Major refactor of scss --HG-- branch : kf-refactor-scss --- bourbon/_bourbon.scss | 29 - bourbon/addons/_button.scss | 267 -------- bourbon/addons/_font-family.scss | 5 - bourbon/addons/_html5-input-types.scss | 36 -- bourbon/addons/_position.scss | 30 - bourbon/addons/_timing-functions.scss | 32 - bourbon/css3/_animation.scss | 171 ------ bourbon/css3/_appearance.scss | 7 - bourbon/css3/_background-image.scss | 71 --- bourbon/css3/_background-size.scss | 15 - bourbon/css3/_border-image.scss | 7 - bourbon/css3/_border-radius.scss | 59 -- bourbon/css3/_box-shadow.scss | 16 - bourbon/css3/_box-sizing.scss | 8 - bourbon/css3/_columns.scss | 67 --- bourbon/css3/_flex-box.scss | 67 --- bourbon/css3/_inline-block.scss | 10 - bourbon/css3/_linear-gradient.scss | 41 -- bourbon/css3/_radial-gradient.scss | 22 - bourbon/css3/_transform.scss | 19 - bourbon/css3/_transition.scss | 104 ---- .../_deprecated-webkit-gradient.scss | 36 -- bourbon/functions/_grid-width.scss | 13 - bourbon/functions/_linear-gradient.scss | 23 - bourbon/functions/_radial-gradient.scss | 15 - bourbon/functions/_tint-shade.scss | 9 - bourbon/lib/bourbon.rb | 19 - bourbon/lib/bourbon/sass_extensions.rb | 6 - .../lib/bourbon/sass_extensions/functions.rb | 13 - .../sass_extensions/functions/compact.rb | 13 - main.html | 1 - sass/_activation.scss | 26 - sass/_base-variables.scss | 53 -- sass/_index.scss | 478 --------------- sass/_jquery-ui-1.8.16.custom.scss | 568 ++++++++++++++++++ sass/_layout.scss | 191 ------ sass/_local.scss | 36 -- sass/_theme.scss | 190 ------ sass/application.scss | 19 +- sass/{ => base}/_base.scss | 5 + .../_extends.scss} | 0 sass/{ => base}/_font-face.scss | 0 .../_functions.scss} | 14 +- sass/{ => base}/_reset.scss | 0 sass/base/_variables.scss | 31 + sass/bourbon/_bourbon.scss | 2 +- sass/bourbon/addons/_button.scss | 207 +++++-- sass/bourbon/addons/_font-family.scss | 1 + sass/bourbon/css3/_animation.scss | 26 +- sass/bourbon/css3/_linear-gradient.scss | 14 +- sass/bourbon/functions/_golden-ratio.scss | 31 - .../bourbon}/functions/_modular-scale.scss | 0 sass/bourbon/lib/bourbon.rb | 2 + sass/{ => courseware}/_courseware.scss | 78 --- .../_sequence-nav.scss} | 0 sass/courseware/_sidebar.scss | 77 +++ .../_video.scss} | 0 .../_answers.scss} | 0 sass/{ => discussion}/_askbot-original.scss | 0 sass/{ => discussion}/_discussion.scss | 0 sass/{ => discussion}/_form-wmd-toolbar.scss | 0 .../_forms.scss} | 0 sass/{ => discussion}/_question-view.scss | 0 .../_questions.scss} | 0 .../_tags.scss} | 0 sass/index/_base.scss | 44 ++ .../_extends.scss} | 0 sass/index/_footer.scss | 47 ++ sass/index/_header.scss | 144 +++++ sass/index/_index.scss | 233 +++++++ .../_variables.scss} | 10 +- sass/layout/_footer.scss | 45 ++ sass/layout/_header.scss | 103 ++++ sass/layout/_layout.scss | 28 + sass/{ => layout}/_leanmodal.scss | 0 sass/marketing.scss | 7 +- sass/print.scss | 6 + .../_basic-html.scss} | 0 sass/{_wiki-create.scss => wiki/_create.scss} | 0 sass/wiki/_sidebar.scss | 69 +++ sass/{ => wiki}/_wiki.scss | 70 --- 81 files changed, 1610 insertions(+), 2476 deletions(-) delete mode 100644 bourbon/_bourbon.scss delete mode 100644 bourbon/addons/_button.scss delete mode 100644 bourbon/addons/_font-family.scss delete mode 100644 bourbon/addons/_html5-input-types.scss delete mode 100644 bourbon/addons/_position.scss delete mode 100644 bourbon/addons/_timing-functions.scss delete mode 100644 bourbon/css3/_animation.scss delete mode 100644 bourbon/css3/_appearance.scss delete mode 100644 bourbon/css3/_background-image.scss delete mode 100644 bourbon/css3/_background-size.scss delete mode 100644 bourbon/css3/_border-image.scss delete mode 100644 bourbon/css3/_border-radius.scss delete mode 100644 bourbon/css3/_box-shadow.scss delete mode 100644 bourbon/css3/_box-sizing.scss delete mode 100644 bourbon/css3/_columns.scss delete mode 100644 bourbon/css3/_flex-box.scss delete mode 100644 bourbon/css3/_inline-block.scss delete mode 100644 bourbon/css3/_linear-gradient.scss delete mode 100644 bourbon/css3/_radial-gradient.scss delete mode 100644 bourbon/css3/_transform.scss delete mode 100644 bourbon/css3/_transition.scss delete mode 100644 bourbon/functions/_deprecated-webkit-gradient.scss delete mode 100644 bourbon/functions/_grid-width.scss delete mode 100644 bourbon/functions/_linear-gradient.scss delete mode 100644 bourbon/functions/_radial-gradient.scss delete mode 100644 bourbon/functions/_tint-shade.scss delete mode 100644 bourbon/lib/bourbon.rb delete mode 100644 bourbon/lib/bourbon/sass_extensions.rb delete mode 100644 bourbon/lib/bourbon/sass_extensions/functions.rb delete mode 100644 bourbon/lib/bourbon/sass_extensions/functions/compact.rb delete mode 100644 sass/_activation.scss delete mode 100644 sass/_base-variables.scss delete mode 100644 sass/_index.scss create mode 100644 sass/_jquery-ui-1.8.16.custom.scss delete mode 100644 sass/_layout.scss delete mode 100644 sass/_local.scss delete mode 100644 sass/_theme.scss rename sass/{ => base}/_base.scss (95%) rename sass/{_base-extends.scss => base/_extends.scss} (100%) rename sass/{ => base}/_font-face.scss (100%) rename sass/{_index-functions.scss => base/_functions.scss} (76%) rename sass/{ => base}/_reset.scss (100%) create mode 100644 sass/base/_variables.scss delete mode 100644 sass/bourbon/functions/_golden-ratio.scss rename {bourbon => sass/bourbon}/functions/_modular-scale.scss (100%) rename sass/{ => courseware}/_courseware.scss (67%) rename sass/{_courseware-sequence-nav.scss => courseware/_sequence-nav.scss} (100%) create mode 100644 sass/courseware/_sidebar.scss rename sass/{_courseware-video.scss => courseware/_video.scss} (100%) rename sass/{_discussion-answers.scss => discussion/_answers.scss} (100%) rename sass/{ => discussion}/_askbot-original.scss (100%) rename sass/{ => discussion}/_discussion.scss (100%) rename sass/{ => discussion}/_form-wmd-toolbar.scss (100%) rename sass/{_discussion-forms.scss => discussion/_forms.scss} (100%) rename sass/{ => discussion}/_question-view.scss (100%) rename sass/{_discussion-questions.scss => discussion/_questions.scss} (100%) rename sass/{_discussion-tags.scss => discussion/_tags.scss} (100%) create mode 100644 sass/index/_base.scss rename sass/{_index-extends.scss => index/_extends.scss} (100%) create mode 100644 sass/index/_footer.scss create mode 100644 sass/index/_header.scss create mode 100644 sass/index/_index.scss rename sass/{_index-variables.scss => index/_variables.scss} (69%) create mode 100644 sass/layout/_footer.scss create mode 100644 sass/layout/_header.scss create mode 100644 sass/layout/_layout.scss rename sass/{ => layout}/_leanmodal.scss (100%) create mode 100644 sass/print.scss rename sass/{_wiki-basic-html.scss => wiki/_basic-html.scss} (100%) rename sass/{_wiki-create.scss => wiki/_create.scss} (100%) create mode 100644 sass/wiki/_sidebar.scss rename sass/{ => wiki}/_wiki.scss (53%) diff --git a/bourbon/_bourbon.scss b/bourbon/_bourbon.scss deleted file mode 100644 index 447167c5ab..0000000000 --- a/bourbon/_bourbon.scss +++ /dev/null @@ -1,29 +0,0 @@ -// Custom Functions -@import "functions/deprecated-webkit-gradient"; -@import "functions/grid-width"; -@import "functions/modular-scale"; -@import "functions/tint-shade"; - -// CSS3 Mixins -@import "css3/animation"; -@import "css3/appearance"; -@import "css3/background-image"; -@import "css3/background-size"; -@import "css3/border-image"; -@import "css3/border-radius"; -@import "css3/box-shadow"; -@import "css3/box-sizing"; -@import "css3/columns"; -@import "css3/flex-box"; -@import "css3/inline-block"; -@import "css3/linear-gradient"; -@import "css3/radial-gradient"; -@import "css3/transform"; -@import "css3/transition"; - -// Addons & other mixins -@import "addons/button"; -@import "addons/font-family"; -@import "addons/html5-input-types"; -@import "addons/position"; -@import "addons/timing-functions"; diff --git a/bourbon/addons/_button.scss b/bourbon/addons/_button.scss deleted file mode 100644 index 1d32125140..0000000000 --- a/bourbon/addons/_button.scss +++ /dev/null @@ -1,267 +0,0 @@ -@mixin button ($style: simple, $base-color: #4294f0) { - - @if type-of($style) == color { - $base-color: $style; - $style: simple; - } - - // Grayscale button - @if $base-color == grayscale($base-color) { - @if $style == simple { - @include simple($base-color, $grayscale: true); - } - - @else if $style == shiny { - @include shiny($base-color, $grayscale: true); - } - - @else if $style == pill { - @include pill($base-color, $grayscale: true); - } - } - - // Colored button - @else { - @if $style == simple { - @include simple($base-color); - } - - @else if $style == shiny { - @include shiny($base-color); - } - - @else if $style == pill { - @include pill($base-color); - } - } -} - - -// Simple Button -//************************************************************************// -@mixin simple($base-color, $grayscale: false) { - $color: hsl(0, 0, 100%); - $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); - $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); - $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); - $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); - - @if lightness($base-color) > 70% { - $color: hsl(0, 0, 20%); - $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); - } - - @if $grayscale == true { - $border: grayscale($border); - $inset-shadow: grayscale($inset-shadow); - $stop-gradient: grayscale($stop-gradient); - $text-shadow: grayscale($text-shadow); - } - - border: 1px solid $border; - @include border-radius (3px); - @include box-shadow (inset 0 1px 0 0 $inset-shadow); - color: $color; - display: inline; - font-size: 11px; - font-weight: bold; - @include linear-gradient ($base-color, $stop-gradient); - padding: 6px 18px 7px; - text-shadow: 0 1px 0 $text-shadow; - -webkit-background-clip: padding-box; - - &:hover { - $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); - $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); - $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); - - @if $grayscale == true { - $base-color-hover: grayscale($base-color-hover); - $inset-shadow-hover: grayscale($inset-shadow-hover); - $stop-gradient-hover: grayscale($stop-gradient-hover); - } - - @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover); - cursor: pointer; - @include linear-gradient ($base-color-hover, $stop-gradient-hover); - } - - &:active { - $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); - $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); - - @if $grayscale == true { - $border-active: grayscale($border-active); - $inset-shadow-active: grayscale($inset-shadow-active); - } - - border: 1px solid $border-active; - @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee); - } -} - - -// Shiny Button -//************************************************************************// -@mixin shiny($base-color, $grayscale: false) { - $color: hsl(0, 0, 100%); - $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); - $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); - $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); - $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); - $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); - $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); - $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); - - @if lightness($base-color) > 70% { - $color: hsl(0, 0, 20%); - $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); - } - - @if $grayscale == true { - $border: grayscale($border); - $border-bottom: grayscale($border-bottom); - $fourth-stop: grayscale($fourth-stop); - $inset-shadow: grayscale($inset-shadow); - $second-stop: grayscale($second-stop); - $text-shadow: grayscale($text-shadow); - $third-stop: grayscale($third-stop); - } - - border: 1px solid $border; - border-bottom: 1px solid $border-bottom; - @include border-radius(5px); - @include box-shadow(inset 0 1px 0 0 $inset-shadow); - color: $color; - display: inline; - font-size: 14px; - font-weight: bold; - @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); - padding: 7px 20px 8px; - text-align: center; - text-decoration: none; - text-shadow: 0 -1px 1px $text-shadow; - - &:hover { - $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); - $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); - $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); - $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); - - @if $grayscale == true { - $first-stop-hover: grayscale($first-stop-hover); - $second-stop-hover: grayscale($second-stop-hover); - $third-stop-hover: grayscale($third-stop-hover); - $fourth-stop-hover: grayscale($fourth-stop-hover); - } - - cursor: pointer; - @include linear-gradient(top, $first-stop-hover 0%, - $second-stop-hover 50%, - $third-stop-hover 50%, - $fourth-stop-hover 100%); - } - - &:active { - $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); - - @if $grayscale == true { - $inset-shadow-active: grayscale($inset-shadow-active); - } - - @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff); - } -} - - -// Pill Button -//************************************************************************// -@mixin pill($base-color, $grayscale: false) { - $color: hsl(0, 0, 100%); - $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); - $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); - $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); - $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); - $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); - $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); - - @if lightness($base-color) > 70% { - $color: hsl(0, 0, 20%); - $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); - } - - @if $grayscale == true { - $border-bottom: grayscale($border-bottom); - $border-sides: grayscale($border-sides); - $border-top: grayscale($border-top); - $inset-shadow: grayscale($inset-shadow); - $stop-gradient: grayscale($stop-gradient); - $text-shadow: grayscale($text-shadow); - } - - border: 1px solid $border-top; - border-color: $border-top $border-sides $border-bottom; - @include border-radius(16px); - @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3); - color: $color; - display: inline; - font-size: 11px; - font-weight: normal; - line-height: 1; - @include linear-gradient ($base-color, $stop-gradient); - padding: 3px 16px 5px; - text-align: center; - text-shadow: 0 -1px 1px $text-shadow; - -webkit-background-clip: padding-box; - - &:hover { - $base-color-hover: adjust-color($base-color, $lightness: -4.5%); - $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); - $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); - $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); - $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); - $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); - $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); - - @if $grayscale == true { - $base-color-hover: grayscale($base-color-hover); - $border-bottom: grayscale($border-bottom); - $border-sides: grayscale($border-sides); - $border-top: grayscale($border-top); - $inset-shadow-hover: grayscale($inset-shadow-hover); - $stop-gradient-hover: grayscale($stop-gradient-hover); - $text-shadow-hover: grayscale($text-shadow-hover); - } - - border: 1px solid $border-top; - border-color: $border-top $border-sides $border-bottom; - @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover); - cursor: pointer; - @include linear-gradient ($base-color-hover, $stop-gradient-hover); - text-shadow: 0 -1px 1px $text-shadow-hover; - -webkit-background-clip: padding-box; - } - - &:active { - $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); - $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); - $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); - $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); - $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); - - @if $grayscale == true { - $active-color: grayscale($active-color); - $border-active: grayscale($border-active); - $border-bottom-active: grayscale($border-bottom-active); - $inset-shadow-active: grayscale($inset-shadow-active); - $text-shadow-active: grayscale($text-shadow-active); - } - - background: $active-color; - border: 1px solid $border-active; - border-bottom: 1px solid $border-bottom-active; - @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff); - text-shadow: 0 -1px 1px $text-shadow-active; - } -} - diff --git a/bourbon/addons/_font-family.scss b/bourbon/addons/_font-family.scss deleted file mode 100644 index df8a80ddfc..0000000000 --- a/bourbon/addons/_font-family.scss +++ /dev/null @@ -1,5 +0,0 @@ -$georgia: Georgia, Cambria, "Times New Roman", Times, serif; -$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; -$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; -$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; -$verdana: Verdana, Geneva, sans-serif; diff --git a/bourbon/addons/_html5-input-types.scss b/bourbon/addons/_html5-input-types.scss deleted file mode 100644 index 9d86fbb4d4..0000000000 --- a/bourbon/addons/_html5-input-types.scss +++ /dev/null @@ -1,36 +0,0 @@ -//************************************************************************// -// Generate a variable ($all-text-inputs) with a list of all html5 -// input types that have a text-based input, excluding textarea. -// http://diveintohtml5.org/forms.html -//************************************************************************// -$inputs-list: 'input[type="email"]', - 'input[type="number"]', - 'input[type="password"]', - 'input[type="search"]', - 'input[type="tel"]', - 'input[type="text"]', - 'input[type="url"]', - - // Webkit & Gecko may change the display of these in the future - 'input[type="color"]', - 'input[type="date"]', - 'input[type="datetime"]', - 'input[type="datetime-local"]', - 'input[type="month"]', - 'input[type="time"]', - 'input[type="week"]'; - -$unquoted-inputs-list: (); - -@each $input-type in $inputs-list { - $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma); -} - -$all-text-inputs: $unquoted-inputs-list; - -// You must use interpolation on the variable: -// #{$all-text-inputs} -//************************************************************************// -// #{$all-text-inputs}, textarea { -// border: 1px solid red; -// } diff --git a/bourbon/addons/_position.scss b/bourbon/addons/_position.scss deleted file mode 100644 index 6ad330f1df..0000000000 --- a/bourbon/addons/_position.scss +++ /dev/null @@ -1,30 +0,0 @@ -@mixin position ($position: relative, $coordinates: 0 0 0 0) { - - @if type-of($position) == list { - $coordinates: $position; - $position: relative; - } - - $top: nth($coordinates, 1); - $right: nth($coordinates, 2); - $bottom: nth($coordinates, 3); - $left: nth($coordinates, 4); - - position: $position; - - @if not(unitless($top)) { - top: $top; - } - - @if not(unitless($right)) { - right: $right; - } - - @if not(unitless($bottom)) { - bottom: $bottom; - } - - @if not(unitless($left)) { - left: $left; - } -} diff --git a/bourbon/addons/_timing-functions.scss b/bourbon/addons/_timing-functions.scss deleted file mode 100644 index 51b2410914..0000000000 --- a/bourbon/addons/_timing-functions.scss +++ /dev/null @@ -1,32 +0,0 @@ -// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) -// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html - -// EASE IN -$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); -$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); -$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); -$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); -$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); -$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); -$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); -$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); - -// EASE OUT -$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); -$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); -$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); -$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); -$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); -$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); -$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); -$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); - -// EASE IN OUT -$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); -$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); -$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); -$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); -$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); -$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); -$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); -$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); diff --git a/bourbon/css3/_animation.scss b/bourbon/css3/_animation.scss deleted file mode 100644 index f99e06eb6f..0000000000 --- a/bourbon/css3/_animation.scss +++ /dev/null @@ -1,171 +0,0 @@ -// http://www.w3.org/TR/css3-animations/#the-animation-name-property- -// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. - -// Official animation shorthand property. -@mixin animation ($animation-1, - $animation-2: false, $animation-3: false, - $animation-4: false, $animation-5: false, - $animation-6: false, $animation-7: false, - $animation-8: false, $animation-9: false) - { - $full: compact($animation-1, $animation-2, $animation-3, $animation-4, - $animation-5, $animation-6, $animation-7, $animation-8, $animation-9); - - -webkit-animation: $full; - -moz-animation: $full; - animation: $full; -} - -// Individual Animation Properties -@mixin animation-name ($name-1, - $name-2: false, $name-3: false, - $name-4: false, $name-5: false, - $name-6: false, $name-7: false, - $name-8: false, $name-9: false) - { - $full: compact($name-1, $name-2, $name-3, $name-4, - $name-5, $name-6, $name-7, $name-8, $name-9); - - -webkit-animation-name: $full; - -moz-animation-name: $full; - animation-name: $full; -} - - -@mixin animation-duration ($time-1: 0, - $time-2: false, $time-3: false, - $time-4: false, $time-5: false, - $time-6: false, $time-7: false, - $time-8: false, $time-9: false) - { - $full: compact($time-1, $time-2, $time-3, $time-4, - $time-5, $time-6, $time-7, $time-8, $time-9); - - -webkit-animation-duration: $full; - -moz-animation-duration: $full; - animation-duration: $full; -} - - -@mixin animation-timing-function ($motion-1: ease, -// ease | linear | ease-in | ease-out | ease-in-out - $motion-2: false, $motion-3: false, - $motion-4: false, $motion-5: false, - $motion-6: false, $motion-7: false, - $motion-8: false, $motion-9: false) - { - $full: compact($motion-1, $motion-2, $motion-3, $motion-4, - $motion-5, $motion-6, $motion-7, $motion-8, $motion-9); - - -webkit-animation-timing-function: $full; - -moz-animation-timing-function: $full; - animation-timing-function: $full; -} - - -@mixin animation-iteration-count ($value-1: 1, -// infinite | - $value-2: false, $value-3: false, - $value-4: false, $value-5: false, - $value-6: false, $value-7: false, - $value-8: false, $value-9: false) - { - $full: compact($value-1, $value-2, $value-3, $value-4, - $value-5, $value-6, $value-7, $value-8, $value-9); - - -webkit-animation-iteration-count: $full; - -moz-animation-iteration-count: $full; - animation-iteration-count: $full; -} - - -@mixin animation-direction ($direction-1: normal, -// normal | alternate - $direction-2: false, $direction-3: false, - $direction-4: false, $direction-5: false, - $direction-6: false, $direction-7: false, - $direction-8: false, $direction-9: false) - { - $full: compact($direction-1, $direction-2, $direction-3, $direction-4, - $direction-5, $direction-6, $direction-7, $direction-8, $direction-9); - - -webkit-animation-direction: $full; - -moz-animation-direction: $full; - animation-direction: $full; -} - - -@mixin animation-play-state ($state-1: running, -// running | paused - $state-2: false, $state-3: false, - $state-4: false, $state-5: false, - $state-6: false, $state-7: false, - $state-8: false, $state-9: false) - { - $full: compact($state-1, $state-2, $state-3, $state-4, - $state-5, $state-6, $state-7, $state-8, $state-9); - - -webkit-animation-play-state: $full; - -moz-animation-play-state: $full; - animation-play-state: $full; -} - - -@mixin animation-delay ($time-1: 0, - $time-2: false, $time-3: false, - $time-4: false, $time-5: false, - $time-6: false, $time-7: false, - $time-8: false, $time-9: false) - { - $full: compact($time-1, $time-2, $time-3, $time-4, - $time-5, $time-6, $time-7, $time-8, $time-9); - - -webkit-animation-delay: $full; - -moz-animation-delay: $full; - animation-delay: $full; -} - - -@mixin animation-fill-mode ($mode-1: none, -// http://goo.gl/l6ckm -// none | forwards | backwards | both - $mode-2: false, $mode-3: false, - $mode-4: false, $mode-5: false, - $mode-6: false, $mode-7: false, - $mode-8: false, $mode-9: false) - { - $full: compact($mode-1, $mode-2, $mode-3, $mode-4, - $mode-5, $mode-6, $mode-7, $mode-8, $mode-9); - - -webkit-animation-fill-mode: $full; - -moz-animation-fill-mode: $full; - animation-fill-mode: $full; -} - - -// Deprecated -@mixin animation-basic ($name, $time: 0, $motion: ease) { - $length-of-name: length($name); - $length-of-time: length($time); - $length-of-motion: length($motion); - - @if $length-of-name > 1 { - @include animation-name(zip($name)); - } @else { - @include animation-name( $name); - } - - @if $length-of-time > 1 { - @include animation-duration(zip($time)); - } @else { - @include animation-duration( $time); - } - - @if $length-of-motion > 1 { - @include animation-timing-function(zip($motion)); - } @else { - @include animation-timing-function( $motion); - } - @warn "The animation-basic mixin is deprecated. Use the animation mixin instead."; -} - diff --git a/bourbon/css3/_appearance.scss b/bourbon/css3/_appearance.scss deleted file mode 100644 index 548767e166..0000000000 --- a/bourbon/css3/_appearance.scss +++ /dev/null @@ -1,7 +0,0 @@ -@mixin appearance ($value) { - -webkit-appearance: $value; - -moz-appearance: $value; - -ms-appearance: $value; - -o-appearance: $value; - appearance: $value; -} diff --git a/bourbon/css3/_background-image.scss b/bourbon/css3/_background-image.scss deleted file mode 100644 index b11ab3fd53..0000000000 --- a/bourbon/css3/_background-image.scss +++ /dev/null @@ -1,71 +0,0 @@ -//************************************************************************// -// Background-image property for adding multiple background images with -// gradients, or for stringing multiple gradients together. -//************************************************************************// -@import "../functions/linear-gradient"; -@import "../functions/radial-gradient"; - -@mixin background-image( - $image-1 , $image-2: false, - $image-3: false, $image-4: false, - $image-5: false, $image-6: false, - $image-7: false, $image-8: false, - $image-9: false, $image-10: false -) { - $images: compact($image-1, $image-2, - $image-3, $image-4, - $image-5, $image-6, - $image-7, $image-8, - $image-9, $image-10); - - background-image: add-prefix($images, webkit); - background-image: add-prefix($images, moz); - background-image: add-prefix($images, ms); - background-image: add-prefix($images, o); - background-image: add-prefix($images); -} - - -@function add-prefix($images, $vendor: false) { - $images-prefixed: (); - - @for $i from 1 through length($images) { - $type: type-of(nth($images, $i)); // Get type of variable - List or String - - // If variable is a list - Gradient - @if $type == list { - $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial) - $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) - - $gradient: render-gradients($gradient-args, $gradient-type, $vendor); - $images-prefixed: append($images-prefixed, $gradient, comma); - } - - // If variable is a string - Image - @else if $type == string { - $images-prefixed: join($images-prefixed, nth($images, $i), comma); - } - } - @return $images-prefixed; -} - - -@function render-gradients($gradients, $gradient-type, $vendor: false) { - $vendor-gradients: false; - @if $vendor { - $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients); - } - - @else if $vendor == false { - $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})"; - $vendor-gradients: unquote($vendor-gradients); - } - @return $vendor-gradients; -} - -//Examples: - //@include background-image(linear-gradient(top, orange, red)); - //@include background-image(radial-gradient(50% 50%, cover circle, orange, red)); - //@include background-image(url("/images/a.png"), linear-gradient(orange, red)); - //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png")); - //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red); diff --git a/bourbon/css3/_background-size.scss b/bourbon/css3/_background-size.scss deleted file mode 100644 index 4bba11027d..0000000000 --- a/bourbon/css3/_background-size.scss +++ /dev/null @@ -1,15 +0,0 @@ -@mixin background-size ($length-1, - $length-2: false, $length-3: false, - $length-4: false, $length-5: false, - $length-6: false, $length-7: false, - $length-8: false, $length-9: false) - { - $full: compact($length-1, $length-2, $length-3, $length-4, - $length-5, $length-6, $length-7, $length-8, $length-9); - - -webkit-background-size: $full; - -moz-background-size: $full; - -ms-background-size: $full; - -o-background-size: $full; - background-size: $full; -} diff --git a/bourbon/css3/_border-image.scss b/bourbon/css3/_border-image.scss deleted file mode 100644 index 0373980422..0000000000 --- a/bourbon/css3/_border-image.scss +++ /dev/null @@ -1,7 +0,0 @@ -@mixin border-image ($image) { - -webkit-border-image: $image; - -moz-border-image: $image; - -ms-border-image: $image; - -o-border-image: $image; - border-image: $image; -} diff --git a/bourbon/css3/_border-radius.scss b/bourbon/css3/_border-radius.scss deleted file mode 100644 index f950d4dd98..0000000000 --- a/bourbon/css3/_border-radius.scss +++ /dev/null @@ -1,59 +0,0 @@ -@mixin border-radius ($radii) { - -webkit-border-radius: $radii; - -moz-border-radius: $radii; - -ms-border-radius: $radii; - -o-border-radius: $radii; - border-radius: $radii; -} - -@mixin border-top-left-radius($radii) { - -webkit-border-top-left-radius: $radii; - -moz-border-top-left-radius: $radii; - -ms-border-top-left-radius: $radii; - -o-border-top-left-radius: $radii; - border-top-left-radius: $radii; -} - -@mixin border-top-right-radius($radii) { - -webkit-border-top-right-radius: $radii; - -moz-border-top-right-radius: $radii; - -ms-border-top-right-radius: $radii; - -o-border-top-right-radius: $radii; - border-top-right-radius: $radii; -} - -@mixin border-bottom-left-radius($radii) { - -webkit-border-bottom-left-radius: $radii; - -moz-border-bottom-left-radius: $radii; - -ms-border-bottom-left-radius: $radii; - -o-border-bottom-left-radius: $radii; - border-bottom-left-radius: $radii; -} - -@mixin border-bottom-right-radius($radii) { - -webkit-border-bottom-right-radius: $radii; - -moz-border-bottom-right-radius: $radii; - -ms-border-bottom-right-radius: $radii; - -o-border-bottom-right-radius: $radii; - border-bottom-right-radius: $radii; -} - -@mixin border-top-radius($radii) { - @include border-top-left-radius($radii); - @include border-top-right-radius($radii); -} - -@mixin border-right-radius($radii) { - @include border-top-right-radius($radii); - @include border-bottom-right-radius($radii); -} - -@mixin border-bottom-radius($radii) { - @include border-bottom-left-radius($radii); - @include border-bottom-right-radius($radii); -} - -@mixin border-left-radius($radii) { - @include border-top-left-radius($radii); - @include border-bottom-left-radius($radii); -} diff --git a/bourbon/css3/_box-shadow.scss b/bourbon/css3/_box-shadow.scss deleted file mode 100644 index ad5c24e7aa..0000000000 --- a/bourbon/css3/_box-shadow.scss +++ /dev/null @@ -1,16 +0,0 @@ -// Box-Shadow Mixin Requires Sass v3.1.1+ -@mixin box-shadow ($shadow-1, - $shadow-2: false, $shadow-3: false, - $shadow-4: false, $shadow-5: false, - $shadow-6: false, $shadow-7: false, - $shadow-8: false, $shadow-9: false) - { - $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, - $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9); - - -webkit-box-shadow: $full; - -moz-box-shadow: $full; - -ms-box-shadow: $full; - -o-box-shadow: $full; - box-shadow: $full; -} diff --git a/bourbon/css3/_box-sizing.scss b/bourbon/css3/_box-sizing.scss deleted file mode 100644 index a9c6cdb43f..0000000000 --- a/bourbon/css3/_box-sizing.scss +++ /dev/null @@ -1,8 +0,0 @@ -@mixin box-sizing ($box) { -// content-box | border-box | inherit - -webkit-box-sizing: $box; - -moz-box-sizing: $box; - -ms-box-sizing: $box; - -o-box-sizing: $box; - box-sizing: $box; -} diff --git a/bourbon/css3/_columns.scss b/bourbon/css3/_columns.scss deleted file mode 100644 index 2896c91d7f..0000000000 --- a/bourbon/css3/_columns.scss +++ /dev/null @@ -1,67 +0,0 @@ -@mixin columns($arg: auto) { -// || - -webkit-columns: $arg; - -moz-columns: $arg; - columns: $arg; -} - -@mixin column-count($int: auto) { -// auto || integer - -webkit-column-count: $int; - -moz-column-count: $int; - column-count: $int; -} - -@mixin column-gap($length: normal) { -// normal || length - -webkit-column-gap: $length; - -moz-column-gap: $length; - column-gap: $length; -} - -@mixin column-fill($arg: auto) { -// auto || length - -webkit-columns-fill: $arg; - -moz-columns-fill: $arg; - columns-fill: $arg; -} - -@mixin column-rule($arg) { -// || || - -webkit-column-rule: $arg; - -moz-column-rule: $arg; - column-rule: $arg; -} - -@mixin column-rule-color($color) { - -webkit-column-rule-color: $color; - -moz-column-rule-color: $color; - column-rule-color: $color; -} - -@mixin column-rule-style($style: none) { -// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid - -webkit-column-rule-style: $style; - -moz-column-rule-style: $style; - column-rule-style: $style; -} - -@mixin column-rule-width ($width: none) { - -webkit-column-rule-width: $width; - -moz-column-rule-width: $width; - column-rule-width: $width; -} - -@mixin column-span($arg: none) { -// none || all - -webkit-column-span: $arg; - -moz-column-span: $arg; - column-span: $arg; -} - -@mixin column-width($length: auto) { -// auto || length - -webkit-column-width: $length; - -moz-column-width: $length; - column-width: $length; -} diff --git a/bourbon/css3/_flex-box.scss b/bourbon/css3/_flex-box.scss deleted file mode 100644 index 44c1dfd789..0000000000 --- a/bourbon/css3/_flex-box.scss +++ /dev/null @@ -1,67 +0,0 @@ -// CSS3 Flexible Box Model and property defaults - -// Custom shorthand notation for flexbox -@mixin box($orient: inline-axis, $pack: start, $align: stretch) { - @include display-box; - @include box-orient($orient); - @include box-pack($pack); - @include box-align($align); -} - -@mixin display-box { - display: -webkit-box; - display: -moz-box; - display: box; -} - -@mixin box-orient($orient: inline-axis) { -// horizontal|vertical|inline-axis|block-axis|inherit - -webkit-box-orient: $orient; - -moz-box-orient: $orient; - box-orient: $orient; -} - -@mixin box-pack($pack: start) { -// start|end|center|justify - -webkit-box-pack: $pack; - -moz-box-pack: $pack; - box-pack: $pack; -} - -@mixin box-align($align: stretch) { -// start|end|center|baseline|stretch - -webkit-box-align: $align; - -moz-box-align: $align; - box-align: $align; -} - -@mixin box-direction($direction: normal) { -// normal|reverse|inherit - -webkit-box-direction: $direction; - -moz-box-direction: $direction; - box-direction: $direction; -} -@mixin box-lines($lines: single) { -// single|multiple - -webkit-box-lines: $lines; - -moz-box-lines: $lines; - box-lines: $lines; -} - -@mixin box-ordinal-group($integer: 1) { - -webkit-box-ordinal-group: $integer; - -moz-box-ordinal-group: $integer; - box-ordinal-group: $integer; -} - -@mixin box-flex($value: 0.0) { - -webkit-box-flex: $value; - -moz-box-flex: $value; - box-flex: $value; -} - -@mixin box-flex-group($integer: 1) { - -webkit-box-flex-group: $integer; - -moz-box-flex-group: $integer; - box-flex-group: $integer; -} diff --git a/bourbon/css3/_inline-block.scss b/bourbon/css3/_inline-block.scss deleted file mode 100644 index d79a13c851..0000000000 --- a/bourbon/css3/_inline-block.scss +++ /dev/null @@ -1,10 +0,0 @@ -// Legacy support for inline-block in IE7 (maybe IE6) -@mixin inline-block { - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; -} diff --git a/bourbon/css3/_linear-gradient.scss b/bourbon/css3/_linear-gradient.scss deleted file mode 100644 index 0b68501719..0000000000 --- a/bourbon/css3/_linear-gradient.scss +++ /dev/null @@ -1,41 +0,0 @@ -@mixin linear-gradient($pos, $G1, $G2: false, - $G3: false, $G4: false, - $G5: false, $G6: false, - $G7: false, $G8: false, - $G9: false, $G10: false, - $fallback: false) { - // Detect what type of value exists in $pos - $pos-type: type-of(nth($pos, 1)); - - // If $pos is missing from mixin, reassign vars and add default position - @if ($pos-type == color) or (nth($pos, 1) == "transparent") { - $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; - $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; - $pos: top; // Default position - } - - $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); - - // Set $G1 as the default fallback color - $fallback-color: nth($G1, 1); - - // If $fallback is a color use that color as the fallback color - @if type-of($fallback) == color { - $fallback-color: $fallback; - } - - background-color: $fallback-color; - background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0 - background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome - background-image: -moz-linear-gradient($pos, $full); - background-image: -ms-linear-gradient($pos, $full); - background-image: -o-linear-gradient($pos, $full); - background-image: unquote("linear-gradient(#{$pos}, #{$full})"); -} - - -// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well. -// @include linear-gradient(#1e5799, #2989d8); -// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8); -// @include linear-gradient(top, #1e5799 0%, #2989d8 50%); -// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); diff --git a/bourbon/css3/_radial-gradient.scss b/bourbon/css3/_radial-gradient.scss deleted file mode 100644 index fbd0a8523c..0000000000 --- a/bourbon/css3/_radial-gradient.scss +++ /dev/null @@ -1,22 +0,0 @@ -// Requires Sass 3.1+ -@mixin radial-gradient($pos, $shape-size, - $G1, $G2, - $G3: false, $G4: false, - $G5: false, $G6: false, - $G7: false, $G8: false, - $G9: false, $G10: false) { - - $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); - - background-color: nth($G1, 1); - background-image: deprecated-webkit-gradient(radial, $full); // Safari <= 5.0 - background-image: -webkit-radial-gradient($pos, $shape-size, $full); - background-image: -moz-radial-gradient($pos, $shape-size, $full); - background-image: -ms-radial-gradient($pos, $shape-size, $full); - background-image: -o-radial-gradient($pos, $shape-size, $full); - background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})"); -} - -// Usage: Gradient position and shape-size are required. Color stops are optional. -// @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef); -// @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef); diff --git a/bourbon/css3/_transform.scss b/bourbon/css3/_transform.scss deleted file mode 100644 index 8d19e8b88d..0000000000 --- a/bourbon/css3/_transform.scss +++ /dev/null @@ -1,19 +0,0 @@ -@mixin transform($property: none) { -// none | - -webkit-transform: $property; - -moz-transform: $property; - -ms-transform: $property; - -o-transform: $property; - transform: $property; -} - -@mixin transform-origin($axes: 50%) { -// x-axis - left | center | right | length | % -// y-axis - top | center | bottom | length | % -// z-axis - length - -webkit-transform-origin: $axes; - -moz-transform-origin: $axes; - -ms-transform-origin: $axes; - -o-transform-origin: $axes; - transform-origin: $axes; -} diff --git a/bourbon/css3/_transition.scss b/bourbon/css3/_transition.scss deleted file mode 100644 index 058dbe0e33..0000000000 --- a/bourbon/css3/_transition.scss +++ /dev/null @@ -1,104 +0,0 @@ -// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. -// Example: @include transition (all, 2.0s, ease-in-out); -// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); -// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s)); - -@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) { - - // Detect # of args passed into each variable - $length-of-property: length($property); - $length-of-duration: length($duration); - $length-of-timing-function: length($timing-function); - $length-of-delay: length($delay); - - @if $length-of-property > 1 { - @include transition-property(zip($property)); } - @else { - @include transition-property( $property); - } - - @if $length-of-duration > 1 { - @include transition-duration(zip($duration)); } - @else { - @include transition-duration( $duration); - } - - @if $length-of-timing-function > 1 { - @include transition-timing-function(zip($timing-function)); } - @else { - @include transition-timing-function( $timing-function); - } - - @if $length-of-delay > 1 { - @include transition-delay(zip($delay)); } - @else { - @include transition-delay( $delay); - } -} - - -@mixin transition-property ($prop-1: all, - $prop-2: false, $prop-3: false, - $prop-4: false, $prop-5: false, - $prop-6: false, $prop-7: false, - $prop-8: false, $prop-9: false) - { - $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5, - $prop-6, $prop-7, $prop-8, $prop-9); - - -webkit-transition-property: $full; - -moz-transition-property: $full; - -ms-transition-property: $full; - -o-transition-property: $full; - transition-property: $full; -} - -@mixin transition-duration ($time-1: 0, - $time-2: false, $time-3: false, - $time-4: false, $time-5: false, - $time-6: false, $time-7: false, - $time-8: false, $time-9: false) - { - $full: compact($time-1, $time-2, $time-3, $time-4, $time-5, - $time-6, $time-7, $time-8, $time-9); - - -webkit-transition-duration: $full; - -moz-transition-duration: $full; - -ms-transition-duration: $full; - -o-transition-duration: $full; - transition-duration: $full; -} - -@mixin transition-timing-function ($motion-1: ease, - $motion-2: false, $motion-3: false, - $motion-4: false, $motion-5: false, - $motion-6: false, $motion-7: false, - $motion-8: false, $motion-9: false) - { - $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5, - $motion-6, $motion-7, $motion-8, $motion-9); - -// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() - -webkit-transition-timing-function: $full; - -moz-transition-timing-function: $full; - -ms-transition-timing-function: $full; - -o-transition-timing-function: $full; - transition-timing-function: $full; -} - -@mixin transition-delay ($time-1: 0, - $time-2: false, $time-3: false, - $time-4: false, $time-5: false, - $time-6: false, $time-7: false, - $time-8: false, $time-9: false) - { - $full: compact($time-1, $time-2, $time-3, $time-4, $time-5, - $time-6, $time-7, $time-8, $time-9); - - -webkit-transition-delay: $full; - -moz-transition-delay: $full; - -ms-transition-delay: $full; - -o-transition-delay: $full; - transition-delay: $full; -} - diff --git a/bourbon/functions/_deprecated-webkit-gradient.scss b/bourbon/functions/_deprecated-webkit-gradient.scss deleted file mode 100644 index 1322f6f60e..0000000000 --- a/bourbon/functions/_deprecated-webkit-gradient.scss +++ /dev/null @@ -1,36 +0,0 @@ -// Render Deprecated Webkit Gradient - Linear || Radial -//************************************************************************// -@function deprecated-webkit-gradient($type, $full) { - $gradient-list: (); - $gradient: false; - $full-length: length($full); - $percentage: false; - $gradient-type: $type; - - @for $i from 1 through $full-length { - $gradient: nth($full, $i); - - @if length($gradient) == 2 { - $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1)); - $gradient-list: join($gradient-list, $color-stop, comma); - } - @else { - @if $i == $full-length { - $percentage: 100%; - } - @else { - $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%"; - } - $color-stop: color-stop(unquote($percentage), $gradient); - $gradient-list: join($gradient-list, $color-stop, comma); - } - } - - @if $type == radial { - $gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list); - } - @else if $type == linear { - $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list); - } - @return $gradient; -} diff --git a/bourbon/functions/_grid-width.scss b/bourbon/functions/_grid-width.scss deleted file mode 100644 index 8e63d83d60..0000000000 --- a/bourbon/functions/_grid-width.scss +++ /dev/null @@ -1,13 +0,0 @@ -@function grid-width($n) { - @return $n * $gw-column + ($n - 1) * $gw-gutter; -} - -// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. -// -// $gw-column: 100px; // Column Width -// $gw-gutter: 40px; // Gutter Width -// -// div { -// width: grid-width(4); // returns 520px; -// margin-left: $gw-gutter; // returns 40px; -// } diff --git a/bourbon/functions/_linear-gradient.scss b/bourbon/functions/_linear-gradient.scss deleted file mode 100644 index 3b10ca82a6..0000000000 --- a/bourbon/functions/_linear-gradient.scss +++ /dev/null @@ -1,23 +0,0 @@ -@function linear-gradient($pos: top, $G1: false, $G2: false, - $G3: false, $G4: false, - $G5: false, $G6: false, - $G7: false, $G8: false, - $G9: false, $G10: false) { - - // Detect what type of value exists in $pos - $pos-type: type-of(nth($pos, 1)); - - // If $pos is missing from mixin, reassign vars and add default position - @if ($pos-type == color) or (nth($pos, 1) == "transparent") { - $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; - $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; - $pos: top; // Default position - } - - $type: linear; - $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); - $type-gradient: append($type, $gradient, comma); - - @return $type-gradient; -} - diff --git a/bourbon/functions/_radial-gradient.scss b/bourbon/functions/_radial-gradient.scss deleted file mode 100644 index 3d5461ad6e..0000000000 --- a/bourbon/functions/_radial-gradient.scss +++ /dev/null @@ -1,15 +0,0 @@ -// This function is required and used by the background-image mixin. -@function radial-gradient($pos, $shape-size, - $G1, $G2, - $G3: false, $G4: false, - $G5: false, $G6: false, - $G7: false, $G8: false, - $G9: false, $G10: false) { - - $type: radial; - $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); - $type-gradient: append($type, $gradient, comma); - - @return $type-gradient; -} - diff --git a/bourbon/functions/_tint-shade.scss b/bourbon/functions/_tint-shade.scss deleted file mode 100644 index f7172004ac..0000000000 --- a/bourbon/functions/_tint-shade.scss +++ /dev/null @@ -1,9 +0,0 @@ -// Add percentage of white to a color -@function tint($color, $percent){ - @return mix(white, $color, $percent); -} - -// Add percentage of black to a color -@function shade($color, $percent){ - @return mix(black, $color, $percent); -} diff --git a/bourbon/lib/bourbon.rb b/bourbon/lib/bourbon.rb deleted file mode 100644 index 1635be836d..0000000000 --- a/bourbon/lib/bourbon.rb +++ /dev/null @@ -1,19 +0,0 @@ -require "bourbon/generator" - -module Bourbon - if defined?(Rails) - class Engine < ::Rails::Engine - require 'bourbon/engine' - end - - module Rails - class Railtie < ::Rails::Railtie - rake_tasks do - load "tasks/install.rake" - end - end - end - end -end - -require File.join(File.dirname(__FILE__), "/bourbon/sass_extensions") diff --git a/bourbon/lib/bourbon/sass_extensions.rb b/bourbon/lib/bourbon/sass_extensions.rb deleted file mode 100644 index ad567200e3..0000000000 --- a/bourbon/lib/bourbon/sass_extensions.rb +++ /dev/null @@ -1,6 +0,0 @@ -module Bourbon::SassExtensions -end - -require "sass" - -require File.join(File.dirname(__FILE__), "/sass_extensions/functions") diff --git a/bourbon/lib/bourbon/sass_extensions/functions.rb b/bourbon/lib/bourbon/sass_extensions/functions.rb deleted file mode 100644 index daa877650e..0000000000 --- a/bourbon/lib/bourbon/sass_extensions/functions.rb +++ /dev/null @@ -1,13 +0,0 @@ -module Bourbon::SassExtensions::Functions -end - -require File.join(File.dirname(__FILE__), "/functions/compact") - -module Sass::Script::Functions - include Bourbon::SassExtensions::Functions::Compact -end - -# Wierd that this has to be re-included to pick up sub-modules. Ruby bug? -class Sass::Script::Functions::EvaluationContext - include Sass::Script::Functions -end diff --git a/bourbon/lib/bourbon/sass_extensions/functions/compact.rb b/bourbon/lib/bourbon/sass_extensions/functions/compact.rb deleted file mode 100644 index 5192e921e7..0000000000 --- a/bourbon/lib/bourbon/sass_extensions/functions/compact.rb +++ /dev/null @@ -1,13 +0,0 @@ -# Compact function pulled from compass -module Bourbon::SassExtensions::Functions::Compact - - def compact(*args) - sep = :comma - if args.size == 1 && args.first.is_a?(Sass::Script::List) - args = args.first.value - sep = args.first.separator - end - Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep) - end - -end diff --git a/main.html b/main.html index 96f2a32cd4..567f41b1db 100644 --- a/main.html +++ b/main.html @@ -5,7 +5,6 @@ - diff --git a/sass/_activation.scss b/sass/_activation.scss deleted file mode 100644 index 8ae293200e..0000000000 --- a/sass/_activation.scss +++ /dev/null @@ -1,26 +0,0 @@ -body.activation { - footer { - max-width: 600px; - text-align: center; - - p { - float: none; - } - - ul { - display: none; - } - } -} - -section.activation { - @extend .wrapper; - @include box-shadow(0 1px 0 #fff); - @include box-sizing(border-box); - background: #fff; - border-top: 0; - border: 1px solid #ccc; - max-width: 600px; - padding: lh(); - margin-top: lh(); -} diff --git a/sass/_base-variables.scss b/sass/_base-variables.scss deleted file mode 100644 index c89d62b3f2..0000000000 --- a/sass/_base-variables.scss +++ /dev/null @@ -1,53 +0,0 @@ -// Flexible grid -@function flex-grid($columns, $container-columns: $fg-max-columns) { - $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; - $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; - @return percentage($width / $container-width); -} - -// Flexible grid gutter -@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { - $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; - @return percentage($gutter / $container-width); -} -// Percentage of container calculator -@function perc($width, $container-width: $max-width) { - @return percentage($width / $container-width); -} - -// Line-height -@function lh($amount: 1) { - @return $body-line-height * $amount; -} - -// Variables -// ---------------------------------------- // - -// fonts -$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;; -$body-font-size: 14px; - -// grid -$columns: 12; -$column-width: 80px; -$gutter-width: 25px; -$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width); - -$gw-column: perc($column-width); -$gw-gutter: perc($gutter-width); -$body-line-height: golden-ratio($body-font-size, 1); - -//Flexible grid -$fg-column: $column-width; -$fg-gutter: $gutter-width; -$fg-max-columns: $columns; -$fg-max-width: 1400px; -$fg-min-width: 810px; - -// color -$light-gray: #ddd; -$dark-gray: #333; -$mit-red: #993333; - -$text-color: $dark-gray; -$border-color: $light-gray; diff --git a/sass/_index.scss b/sass/_index.scss deleted file mode 100644 index 163c46305e..0000000000 --- a/sass/_index.scss +++ /dev/null @@ -1,478 +0,0 @@ -body { - background-color: #fff; - color: #444; - font: $body-font-size $body-font-family; - - :focus { - outline-color: #ccc; - } - - h1 { - font: 800 24px $header-font-family; - } - - li { - margin-bottom: lh(); - } - - em { - font-style: italic; - } - - a { - color: $mit-red; - font-style: italic; - text-decoration: none; - - &:hover, &:focus { - color: darken($mit-red, 10%); - } - } - - #{$all-text-inputs}, textarea { - @include box-shadow(0 -1px 0 #fff); - @include linear-gradient(#eee, #fff); - border: 1px solid #999; - font: $body-font-size $body-font-family; - padding: 4px; - width: 100%; - - &:focus { - border-color: $mit-red; - } - } -} - -header.announcement { - @include background-size(cover); - background: #333; - border-bottom: 1px solid #000; - color: #fff; - -webkit-font-smoothing: antialiased; - - &.home { - background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg"); - - @media screen and (min-width: 1200px) { - background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg"); - } - - div { - padding: lh(10) lh() lh(3); - - //hide login link for homepage - nav { - h1 { - margin-right: 0; - } - - a.login { - display: none; - } - } - } - } - - &.course { - background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg"); - - @media screen and (min-width: 1200px) { - background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg"); - } - - @media screen and (max-width: 1199px) and (min-width: 700px) { - background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg"); - } - - div { - padding: lh(4) lh() lh(2); - } - } - - div { - @extend .wrapper; - position: relative; - - nav { - position: absolute; - top: 0; - right: lh(); - @include border-radius(0 0 3px 3px); - background: #333; - background: rgba(#000, .7); - padding: lh(.5) lh(); - - h1 { - @include inline-block(); - margin-right: lh(.5); - - a { - font: italic 800 18px $header-font-family; - color: #fff; - text-decoration: none; - - &:hover, &:focus { - color: #999; - } - } - } - - a.login { - text-decoration: none; - color: #fff; - font-size: 12px; - font-style: normal; - font-family: $header-font-family; - - &:hover, &:focus { - color: #999; - } - } - } - - section { - @extend .clearfix; - @include inline-block(); - background: $mit-red; - margin-left: flex-grid(4) + flex-gutter(); - padding: lh() lh(1.5); - - h1 { - @include inline-block(); - font-family: "Open Sans"; - font-size: 30px; - font-weight: 800; - line-height: 1.2em; - margin: 0 lh() 0 0; - } - - h2 { - @include inline-block(); - font-family: "Open Sans"; - font-size: 24px; - font-weight: 400; - line-height: 1.2em; - } - - &.course { - section { - width: flex-grid(4, 8); - margin-right: flex-gutter(8); - float: left; - margin-left: 0; - padding: 0; - - a { - @extend .button; - @include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%)); - background-color: darken($mit-red, 20%); - display: block; - padding: lh(.5) lh(); - border-color: darken($mit-red, 30%); - text-align: center; - - &:hover { - background-color: darken($mit-red, 10%); - border-color: darken($mit-red, 20%); - } - } - } - - p { - width: flex-grid(4, 8); - line-height: lh(); - float: left; - } - } - } - } -} - -section.index-content { - @extend .wrapper; - @extend .clearfix; - - section { - @extend .clearfix; - float: left; - - h1 { - font-size: 24px; - font-weight: 800; - font-family: "Open Sans"; - margin-bottom: lh(); - } - - p { - line-height: lh(); - margin-bottom: lh(); - } - - ul { - margin: 0; - // list-style: disc outside none; - - // li { - // list-style: disc outside none; - // } - } - - &.about { - @include box-sizing(border-box); - border-right: 1px solid #e5e5e5; - margin-right: flex-gutter(); - padding-right: flex-gutter() / 2; - width: flex-grid(8); - - section { - @extend .clearfix; - margin-bottom: lh(); - - p { - width: flex-grid(4, 8); - float: left; - - &:nth-child(odd) { - margin-right: flex-gutter(8); - } - } - - &.intro { - section { - margin-bottom: 0; - - &.intro-text { - margin-right: flex-gutter(8); - width: flex-grid(4, 8); - - p { - margin-right: 0; - width: auto; - float: none; - } - } - - &.intro-video { - width: flex-grid(4, 8); - - a { - display: block; - width: 100%; - - img { - width: 100%; - } - - span { - display: none; - } - } - } - } - } - - &.features { - border-top: 1px solid #E5E5E5; - padding-top: lh(); - margin-bottom: 0; - - h2 { - text-transform: uppercase; - letter-spacing: 1px; - color: #666; - margin-bottom: lh(); - - span { - text-transform: none; - } - } - - p { - width: auto; - clear: both; - - strong { - font-family: "Open sans"; - font-weight: 800; - } - - a { - color: $mit-red; - text-decoration: none; - @include transition(); - - &:hover, &:focus { - color: darken($mit-red, 15%); - } - } - } - - ul { - margin-bottom: 0; - - li { - line-height: lh(); - width: flex-grid(4, 8); - float: left; - margin-bottom: lh(.5); - - &:nth-child(odd) { - margin-right: flex-gutter(8); - } - } - } - } - } - } - - &.course, &.staff { - width: flex-grid(4); - - h1 { - font: normal $body-font-size $body-font-family; - text-transform: uppercase; - letter-spacing: 1px; - color: #666; - margin-bottom: lh(); - } - - h2 { - font: 800 24px $header-font-family; - } - - h3 { - font: 400 18px $header-font-family; - } - - a { - @extend .button; - } - - ul { - list-style: none; - - li { - img { - float: left; - margin-right: lh(.5); - } - } - } - } - - &.course { - h2 { - padding-top: lh(5); - background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat; - @include background-size(contain); - - @media screen and (max-width: 998px) { - background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat; - } - } - } - - - // index - //---------------------------------------- // - &.about-course { - @include box-sizing(border-box); - border-right: 1px solid #e5e5e5; - margin-right: flex-gutter(); - padding-right: flex-gutter() / 2; - width: flex-grid(8); - - section { - width: flex-grid(4, 8); - - - &.about-info { - margin-right: flex-gutter(8); - } - - &.requirements { - clear: both; - width: 100%; - border-top: 1px solid #E5E5E5; - padding-top: lh(); - margin-bottom: 0; - - p { - float: left; - width: flex-grid(4, 8); - margin-right: flex-gutter(8); - - &:nth-child(odd) { - margin-right: 0; - } - } - } - - &.cta { - width: 100%; - text-align: center; - - a.enroll { - @extend .button; - padding: lh(.5) lh(2); - @include inline-block(); - text-align: center; - font: 800 18px $header-font-family; - } - } - } - } - } -} - -section.copyright, section.tos, section.privacy-policy, section.honor-code { - @extend .subpage; -} - -footer { - @extend .wrapper; - @extend .clearfix; - padding-top: 0; - - div.footer-wrapper { - border-top: 1px solid #e5e5e5; - padding: lh() 0; - background: url('/static/images/marketing/mit-logo.png') right center no-repeat; - - a { - color: #888; - text-decoration: none; - @include transition(); - - &:hover, &:focus { - color: #666; - } - } - - p { - @include inline-block(); - margin-right: lh(); - } - - ul { - @include inline-block(); - - li { - @include inline-block(); - - &:after { - content: ' |'; - display: inline; - color: #ccc; - } - - &:last-child { - &:after { - content: none; - } - } - - } - } - } -} diff --git a/sass/_jquery-ui-1.8.16.custom.scss b/sass/_jquery-ui-1.8.16.custom.scss new file mode 100644 index 0000000000..d03e1ca7a2 --- /dev/null +++ b/sass/_jquery-ui-1.8.16.custom.scss @@ -0,0 +1,568 @@ +/* + * jQuery UI CSS Framework 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Theming/API + */ + +/* Layout helpers +----------------------------------*/ +.ui-helper-hidden { display: none; } +.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); } +.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } +.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } +.ui-helper-clearfix { display: inline-block; } +/* required comment for clearfix to work in Opera \*/ +* html .ui-helper-clearfix { height:1%; } +.ui-helper-clearfix { display:block; } +/* end clearfix */ +.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } + + +/* Interaction Cues +----------------------------------*/ +.ui-state-disabled { cursor: default !important; } + + +/* Icons +----------------------------------*/ + +/* states and images */ +.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } + + +/* Misc visuals +----------------------------------*/ + +/* Overlays */ +.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } + + +/* + * jQuery UI CSS Framework 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Theming/API + * + * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Helvetica,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=2px&bgColorHeader=7fbcfd&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=50&borderColorHeader=dae5c9&fcHeader=031634&iconColorHeader=031634&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=dae5c9&fcContent=031634&iconColorContent=adcc80&bgColorDefault=7fbcdf&bgTextureDefault=03_highlight_soft.png&bgImgOpacityDefault=100&borderColorDefault=dae5c9&fcDefault=7a994c&iconColorDefault=adcc80&bgColorHover=bddeff&bgTextureHover=03_highlight_soft.png&bgImgOpacityHover=25&borderColorHover=7fbcdf&fcHover=7a994c&iconColorHover=adcc80&bgColorActive=023063&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=dae5c9&fcActive=dae5c9&iconColorActive=454545&bgColorHighlight=ffffff&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=cccccc&fcHighlight=444444&iconColorHighlight=adcc80&bgColorError=ffffff&bgTextureError=01_flat.png&bgImgOpacityError=55&borderColorError=fa720a&fcError=222222&iconColorError=fa720a&bgColorOverlay=eeeeee&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=80&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=60&thicknessShadow=4px&offsetTopShadow=-4px&offsetLeftShadow=-4px&cornerRadiusShadow=0px + */ + + +/* Component containers +----------------------------------*/ +.ui-widget { font-family: Helvetica, Arial, sans-serif; font-size: 1.1em; } +.ui-widget .ui-widget { font-size: 1em; } +.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Helvetica, Arial, sans-serif; font-size: 1em; } +.ui-widget-content { border: 1px solid #dae5c9; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #031634; } +.ui-widget-content a { color: #031634; } +.ui-widget-header { border: 1px solid #dae5c9; background: #7fbcfd url(images/ui-bg_highlight-soft_50_7fbcfd_1x100.png) 50% 50% repeat-x; color: #031634; font-weight: bold; } +.ui-widget-header a { color: #031634; } + +/* Interaction states +----------------------------------*/ +.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #dae5c9; background: #7fbcdf url(images/ui-bg_highlight-soft_100_7fbcdf_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #7a994c; } +.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #7a994c; text-decoration: none; } +.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #7fbcdf; background: #bddeff url(images/ui-bg_highlight-soft_25_bddeff_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #7a994c; } +.ui-state-hover a, .ui-state-hover a:hover { color: #7a994c; text-decoration: none; } +.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #dae5c9; background: #023063 url(images/ui-bg_glass_65_023063_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #dae5c9; } +.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #dae5c9; text-decoration: none; } +.ui-widget :active { outline: none; } + +/* Interaction Cues +----------------------------------*/ +.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #cccccc; background: #ffffff url(images/ui-bg_flat_55_ffffff_40x100.png) 50% 50% repeat-x; color: #444444; } +.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #444444; } +.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #fa720a; background: #ffffff url(images/ui-bg_flat_55_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; } +.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #222222; } +.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #222222; } +.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } +.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; } +.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; } + +/* Icons +----------------------------------*/ + +/* states and images */ +.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_adcc80_256x240.png); } +.ui-widget-content .ui-icon {background-image: url(images/ui-icons_adcc80_256x240.png); } +.ui-widget-header .ui-icon {background-image: url(images/ui-icons_031634_256x240.png); } +.ui-state-default .ui-icon { background-image: url(images/ui-icons_adcc80_256x240.png); } +.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_adcc80_256x240.png); } +.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); } +.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_adcc80_256x240.png); } +.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_fa720a_256x240.png); } + +/* positioning */ +.ui-icon-carat-1-n { background-position: 0 0; } +.ui-icon-carat-1-ne { background-position: -16px 0; } +.ui-icon-carat-1-e { background-position: -32px 0; } +.ui-icon-carat-1-se { background-position: -48px 0; } +.ui-icon-carat-1-s { background-position: -64px 0; } +.ui-icon-carat-1-sw { background-position: -80px 0; } +.ui-icon-carat-1-w { background-position: -96px 0; } +.ui-icon-carat-1-nw { background-position: -112px 0; } +.ui-icon-carat-2-n-s { background-position: -128px 0; } +.ui-icon-carat-2-e-w { background-position: -144px 0; } +.ui-icon-triangle-1-n { background-position: 0 -16px; } +.ui-icon-triangle-1-ne { background-position: -16px -16px; } +.ui-icon-triangle-1-e { background-position: -32px -16px; } +.ui-icon-triangle-1-se { background-position: -48px -16px; } +.ui-icon-triangle-1-s { background-position: -64px -16px; } +.ui-icon-triangle-1-sw { background-position: -80px -16px; } +.ui-icon-triangle-1-w { background-position: -96px -16px; } +.ui-icon-triangle-1-nw { background-position: -112px -16px; } +.ui-icon-triangle-2-n-s { background-position: -128px -16px; } +.ui-icon-triangle-2-e-w { background-position: -144px -16px; } +.ui-icon-arrow-1-n { background-position: 0 -32px; } +.ui-icon-arrow-1-ne { background-position: -16px -32px; } +.ui-icon-arrow-1-e { background-position: -32px -32px; } +.ui-icon-arrow-1-se { background-position: -48px -32px; } +.ui-icon-arrow-1-s { background-position: -64px -32px; } +.ui-icon-arrow-1-sw { background-position: -80px -32px; } +.ui-icon-arrow-1-w { background-position: -96px -32px; } +.ui-icon-arrow-1-nw { background-position: -112px -32px; } +.ui-icon-arrow-2-n-s { background-position: -128px -32px; } +.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } +.ui-icon-arrow-2-e-w { background-position: -160px -32px; } +.ui-icon-arrow-2-se-nw { background-position: -176px -32px; } +.ui-icon-arrowstop-1-n { background-position: -192px -32px; } +.ui-icon-arrowstop-1-e { background-position: -208px -32px; } +.ui-icon-arrowstop-1-s { background-position: -224px -32px; } +.ui-icon-arrowstop-1-w { background-position: -240px -32px; } +.ui-icon-arrowthick-1-n { background-position: 0 -48px; } +.ui-icon-arrowthick-1-ne { background-position: -16px -48px; } +.ui-icon-arrowthick-1-e { background-position: -32px -48px; } +.ui-icon-arrowthick-1-se { background-position: -48px -48px; } +.ui-icon-arrowthick-1-s { background-position: -64px -48px; } +.ui-icon-arrowthick-1-sw { background-position: -80px -48px; } +.ui-icon-arrowthick-1-w { background-position: -96px -48px; } +.ui-icon-arrowthick-1-nw { background-position: -112px -48px; } +.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } +.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } +.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } +.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } +.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } +.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } +.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } +.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } +.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } +.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } +.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } +.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } +.ui-icon-arrowreturn-1-w { background-position: -64px -64px; } +.ui-icon-arrowreturn-1-n { background-position: -80px -64px; } +.ui-icon-arrowreturn-1-e { background-position: -96px -64px; } +.ui-icon-arrowreturn-1-s { background-position: -112px -64px; } +.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } +.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } +.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } +.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } +.ui-icon-arrow-4 { background-position: 0 -80px; } +.ui-icon-arrow-4-diag { background-position: -16px -80px; } +.ui-icon-extlink { background-position: -32px -80px; } +.ui-icon-newwin { background-position: -48px -80px; } +.ui-icon-refresh { background-position: -64px -80px; } +.ui-icon-shuffle { background-position: -80px -80px; } +.ui-icon-transfer-e-w { background-position: -96px -80px; } +.ui-icon-transferthick-e-w { background-position: -112px -80px; } +.ui-icon-folder-collapsed { background-position: 0 -96px; } +.ui-icon-folder-open { background-position: -16px -96px; } +.ui-icon-document { background-position: -32px -96px; } +.ui-icon-document-b { background-position: -48px -96px; } +.ui-icon-note { background-position: -64px -96px; } +.ui-icon-mail-closed { background-position: -80px -96px; } +.ui-icon-mail-open { background-position: -96px -96px; } +.ui-icon-suitcase { background-position: -112px -96px; } +.ui-icon-comment { background-position: -128px -96px; } +.ui-icon-person { background-position: -144px -96px; } +.ui-icon-print { background-position: -160px -96px; } +.ui-icon-trash { background-position: -176px -96px; } +.ui-icon-locked { background-position: -192px -96px; } +.ui-icon-unlocked { background-position: -208px -96px; } +.ui-icon-bookmark { background-position: -224px -96px; } +.ui-icon-tag { background-position: -240px -96px; } +.ui-icon-home { background-position: 0 -112px; } +.ui-icon-flag { background-position: -16px -112px; } +.ui-icon-calendar { background-position: -32px -112px; } +.ui-icon-cart { background-position: -48px -112px; } +.ui-icon-pencil { background-position: -64px -112px; } +.ui-icon-clock { background-position: -80px -112px; } +.ui-icon-disk { background-position: -96px -112px; } +.ui-icon-calculator { background-position: -112px -112px; } +.ui-icon-zoomin { background-position: -128px -112px; } +.ui-icon-zoomout { background-position: -144px -112px; } +.ui-icon-search { background-position: -160px -112px; } +.ui-icon-wrench { background-position: -176px -112px; } +.ui-icon-gear { background-position: -192px -112px; } +.ui-icon-heart { background-position: -208px -112px; } +.ui-icon-star { background-position: -224px -112px; } +.ui-icon-link { background-position: -240px -112px; } +.ui-icon-cancel { background-position: 0 -128px; } +.ui-icon-plus { background-position: -16px -128px; } +.ui-icon-plusthick { background-position: -32px -128px; } +.ui-icon-minus { background-position: -48px -128px; } +.ui-icon-minusthick { background-position: -64px -128px; } +.ui-icon-close { background-position: -80px -128px; } +.ui-icon-closethick { background-position: -96px -128px; } +.ui-icon-key { background-position: -112px -128px; } +.ui-icon-lightbulb { background-position: -128px -128px; } +.ui-icon-scissors { background-position: -144px -128px; } +.ui-icon-clipboard { background-position: -160px -128px; } +.ui-icon-copy { background-position: -176px -128px; } +.ui-icon-contact { background-position: -192px -128px; } +.ui-icon-image { background-position: -208px -128px; } +.ui-icon-video { background-position: -224px -128px; } +.ui-icon-script { background-position: -240px -128px; } +.ui-icon-alert { background-position: 0 -144px; } +.ui-icon-info { background-position: -16px -144px; } +.ui-icon-notice { background-position: -32px -144px; } +.ui-icon-help { background-position: -48px -144px; } +.ui-icon-check { background-position: -64px -144px; } +.ui-icon-bullet { background-position: -80px -144px; } +.ui-icon-radio-off { background-position: -96px -144px; } +.ui-icon-radio-on { background-position: -112px -144px; } +.ui-icon-pin-w { background-position: -128px -144px; } +.ui-icon-pin-s { background-position: -144px -144px; } +.ui-icon-play { background-position: 0 -160px; } +.ui-icon-pause { background-position: -16px -160px; } +.ui-icon-seek-next { background-position: -32px -160px; } +.ui-icon-seek-prev { background-position: -48px -160px; } +.ui-icon-seek-end { background-position: -64px -160px; } +.ui-icon-seek-start { background-position: -80px -160px; } +/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ +.ui-icon-seek-first { background-position: -80px -160px; } +.ui-icon-stop { background-position: -96px -160px; } +.ui-icon-eject { background-position: -112px -160px; } +.ui-icon-volume-off { background-position: -128px -160px; } +.ui-icon-volume-on { background-position: -144px -160px; } +.ui-icon-power { background-position: 0 -176px; } +.ui-icon-signal-diag { background-position: -16px -176px; } +.ui-icon-signal { background-position: -32px -176px; } +.ui-icon-battery-0 { background-position: -48px -176px; } +.ui-icon-battery-1 { background-position: -64px -176px; } +.ui-icon-battery-2 { background-position: -80px -176px; } +.ui-icon-battery-3 { background-position: -96px -176px; } +.ui-icon-circle-plus { background-position: 0 -192px; } +.ui-icon-circle-minus { background-position: -16px -192px; } +.ui-icon-circle-close { background-position: -32px -192px; } +.ui-icon-circle-triangle-e { background-position: -48px -192px; } +.ui-icon-circle-triangle-s { background-position: -64px -192px; } +.ui-icon-circle-triangle-w { background-position: -80px -192px; } +.ui-icon-circle-triangle-n { background-position: -96px -192px; } +.ui-icon-circle-arrow-e { background-position: -112px -192px; } +.ui-icon-circle-arrow-s { background-position: -128px -192px; } +.ui-icon-circle-arrow-w { background-position: -144px -192px; } +.ui-icon-circle-arrow-n { background-position: -160px -192px; } +.ui-icon-circle-zoomin { background-position: -176px -192px; } +.ui-icon-circle-zoomout { background-position: -192px -192px; } +.ui-icon-circle-check { background-position: -208px -192px; } +.ui-icon-circlesmall-plus { background-position: 0 -208px; } +.ui-icon-circlesmall-minus { background-position: -16px -208px; } +.ui-icon-circlesmall-close { background-position: -32px -208px; } +.ui-icon-squaresmall-plus { background-position: -48px -208px; } +.ui-icon-squaresmall-minus { background-position: -64px -208px; } +.ui-icon-squaresmall-close { background-position: -80px -208px; } +.ui-icon-grip-dotted-vertical { background-position: 0 -224px; } +.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } +.ui-icon-grip-solid-vertical { background-position: -32px -224px; } +.ui-icon-grip-solid-horizontal { background-position: -48px -224px; } +.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } +.ui-icon-grip-diagonal-se { background-position: -80px -224px; } + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px; } +.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px; } +.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; -khtml-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; } +.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; -khtml-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; } + +/* Overlays */ +.ui-widget-overlay { background: #eeeeee url(images/ui-bg_flat_0_eeeeee_40x100.png) 50% 50% repeat-x; opacity: .80;filter:Alpha(Opacity=80); } +.ui-widget-shadow { margin: -4px 0 0 -4px; padding: 4px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .60;filter:Alpha(Opacity=60); -moz-border-radius: 0px; -khtml-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; }/* + * jQuery UI Resizable 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Resizable#theming + */ +.ui-resizable { position: relative;} +.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; } +.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } +.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } +.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } +.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } +.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } +.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } +.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } +.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } +.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/* + * jQuery UI Selectable 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Selectable#theming + */ +.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; } +/* + * jQuery UI Accordion 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Accordion#theming + */ +/* IE/Win - Fix animation bug - #4615 */ +.ui-accordion { width: 100%; } +.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } +.ui-accordion .ui-accordion-li-fix { display: inline; } +.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } +.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; } +.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; } +.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } +.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; } +.ui-accordion .ui-accordion-content-active { display: block; } +/* + * jQuery UI Autocomplete 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Autocomplete#theming + */ +.ui-autocomplete { position: absolute; cursor: default; } + +/* workarounds */ +* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */ + +/* + * jQuery UI Menu 1.8.16 + * + * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Menu#theming + */ +.ui-menu { + list-style:none; + padding: 2px; + margin: 0; + display:block; + float: left; +} +.ui-menu .ui-menu { + margin-top: -3px; +} +.ui-menu .ui-menu-item { + margin:0; + padding: 0; + zoom: 1; + float: left; + clear: left; + width: 100%; +} +.ui-menu .ui-menu-item a { + text-decoration:none; + display:block; + padding:.2em .4em; + line-height:1.5; + zoom:1; +} +.ui-menu .ui-menu-item a.ui-state-hover, +.ui-menu .ui-menu-item a.ui-state-active { + font-weight: normal; + margin: -1px; +} +/* + * jQuery UI Button 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Button#theming + */ +.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */ +.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */ +button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */ +.ui-button-icons-only { width: 3.4em; } +button.ui-button-icons-only { width: 3.7em; } + +/*button text element */ +.ui-button .ui-button-text { display: block; line-height: 1.4; } +.ui-button-text-only .ui-button-text { padding: .4em 1em; } +.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; } +.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; } +.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; } +.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; } +/* no icon support for input elements, provide padding by default */ +input.ui-button { padding: .4em 1em; } + +/*button icon element(s) */ +.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; } +.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } +.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; } +.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } +.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } + +/*button sets*/ +.ui-buttonset { margin-right: 7px; } +.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; } + +/* workarounds */ +button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */ +/* + * jQuery UI Dialog 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Dialog#theming + */ +.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; } +.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } +.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } +.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } +.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; } +.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } +.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; } +.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } +.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } +.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } +.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } +.ui-draggable .ui-dialog-titlebar { cursor: move; } +/* + * jQuery UI Slider 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Slider#theming + */ +.ui-slider { position: relative; text-align: left; } +.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } +.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } + +.ui-slider-horizontal { height: .8em; } +.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } +.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } +.ui-slider-horizontal .ui-slider-range-min { left: 0; } +.ui-slider-horizontal .ui-slider-range-max { right: 0; } + +.ui-slider-vertical { width: .8em; height: 100px; } +.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } +.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } +.ui-slider-vertical .ui-slider-range-min { bottom: 0; } +.ui-slider-vertical .ui-slider-range-max { top: 0; }/* + * jQuery UI Tabs 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Tabs#theming + */ +.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ +.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } +.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } +.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } +.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } +.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } +.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ +.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } +.ui-tabs .ui-tabs-hide { display: none !important; } +/* + * jQuery UI Datepicker 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Datepicker#theming + */ +.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } +.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; } +.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; } +.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } +.ui-datepicker .ui-datepicker-prev { left:2px; } +.ui-datepicker .ui-datepicker-next { right:2px; } +.ui-datepicker .ui-datepicker-prev-hover { left:1px; } +.ui-datepicker .ui-datepicker-next-hover { right:1px; } +.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } +.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } +.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; } +.ui-datepicker select.ui-datepicker-month-year {width: 100%;} +.ui-datepicker select.ui-datepicker-month, +.ui-datepicker select.ui-datepicker-year { width: 49%;} +.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; } +.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } +.ui-datepicker td { border: 0; padding: 1px; } +.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } +.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } +.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; } +.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; } + +/* with multiple calendars */ +.ui-datepicker.ui-datepicker-multi { width:auto; } +.ui-datepicker-multi .ui-datepicker-group { float:left; } +.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; } +.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; } +.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; } +.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; } +.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; } +.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; } +.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; } +.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; } + +/* RTL support */ +.ui-datepicker-rtl { direction: rtl; } +.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } +.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } +.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } +.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } +.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; } +.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } +.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; } +.ui-datepicker-rtl .ui-datepicker-group { float:right; } +.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; } +.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; } + +/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */ +.ui-datepicker-cover { + display: none; /*sorry for IE5*/ + display/**/: block; /*sorry for IE5*/ + position: absolute; /*must have*/ + z-index: -1; /*must have*/ + filter: mask(); /*must have*/ + top: -4px; /*must have*/ + left: -4px; /*must have*/ + width: 200px; /*must have*/ + height: 200px; /*must have*/ +}/* + * jQuery UI Progressbar 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Progressbar#theming + */ +.ui-progressbar { height:2em; text-align: left; } +.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; } \ No newline at end of file diff --git a/sass/_layout.scss b/sass/_layout.scss deleted file mode 100644 index e124f0f62f..0000000000 --- a/sass/_layout.scss +++ /dev/null @@ -1,191 +0,0 @@ -html { - margin-top: 0; - - body { - color: $dark-gray; - font: $body-font-size $body-font-family; - text-align: center; - margin: 0; - background: #f4f4f4; //#f3f1e5 - - div.header-wrapper { - // @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%)); - @include box-shadow(inset 0 -1px 2px darken($mit-red, 10%)); - background: $mit-red; - border-bottom: 1px solid #fff; - - header { - @extend .clearfix; - @extend .wrapper; - @include box-sizing(border-box); - padding: 0 $body-line-height; - - hgroup { - @extend .clearfix; - float: left; - - h1 { - border-right: 1px solid darken($mit-red, 5%); - color: darken($mit-red, 25%); - font-size: 20px; - font-weight: 800; - margin: 0 lh() 0 0; - padding: 17px lh() 14px 0; - text-shadow: 0 1px 0 lighten($mit-red, 10%); - line-height: lh(); - @include inline-block(); - } - - h2 { - @include inline-block(); - margin: 0 lh() 0 0; - padding: 19px lh() 9px 0; - line-height: lh(); - border-right: 1px solid darken($mit-red, 5%); - -webkit-font-smoothing: antialiased; - - a { - color: #fff; - text-decoration: none; - - &:hover { - color: rgba(#fff, .7); - } - } - } - - @media screen and (max-width: 920px) { - border-bottom: 1px solid darken($mit-red, 5%); - display: block; - float: none; - - h1 { - float: right; - border: 0; - margin-right: 0; - padding-right: 0; - } - - h2 { - float: left; - border: 0; - margin-right: 0; - padding-right: 0; - } - } - } - - nav { - float: left; - display: block; - margin: 0; - padding: 0; - text-shadow: 0 -1px 0 darken($mit-red, 10%); - -webkit-font-smoothing: antialiased; - - - ul { - @extend .clearfix; - display: inline-block; - padding: 19px 0 9px; - margin: 0; - - li { - margin-right: lh(); - display: inline-block; - margin-bottom: 0; - line-height: lh(); - - a { - color: #fff; - text-decoration: none; - - &:hover { - color: rgba(#fff, .7); - background-color: none; - text-decoration: none; - } - } - } - } - } - } - } - - section.main-content { - @extend .clearfix; - @extend .wrapper; - @include box-sizing(border-box); - @include border-radius(4px); - overflow: hidden; - background: #fff; - border-bottom: 1px solid #bbb; - - @media screen and (min-width: 1400px) { - // @include border-radius(3px); - @include box-shadow(0 0 4px #dfdfdf); - border: 1px solid #bbb; - margin-top: lh(.5); - } - } - - img { - max-width: 100%; - height: auto; - } - - footer { - @extend .clearfix; - @extend .wrapper; - @include box-sizing(border-box); - color: #777; - margin-top: $body-line-height; - padding: 0 $body-line-height; - - p { - float: left; - - a { - color: #444; - - &:link, &:visited { - color: #444; - } - - &:hover, &:focus { - color: #000; - } - } - } - - ul { - float: right; - - li { - display: inline-block; - margin-right: 20px; - - a { - color: #444; - - &:link, &:visited { - color: #444; - } - - &:hover, &:focus { - color: #000; - } - } - } - } - } - - &.activation { - footer { - ul { - display: none; - } - } - } - } -} diff --git a/sass/_local.scss b/sass/_local.scss deleted file mode 100644 index bd866e3bb5..0000000000 --- a/sass/_local.scss +++ /dev/null @@ -1,36 +0,0 @@ -#hide_acc { - min-height:600; -} - -#mainblock { - border: 0; - padding: 0; - margin: 0; - width: 200; - min-height:600px; - margin-left: 276px; - margin-right: 0px; -} - -.bordered { border: 1px solid #AAAAAA; border-style : dotted; } - -.seq_problem_visited { background-color: #ccccaa;} -.seq_video_visited { background-color: #ccaacc;} -.seq_html_visited { background-color: #caaccc;} -.seq_tab_visited { background-color: #aacccc;} -.seq_vertical_visited { background-color: #acaccc;} -.seq_sequential_visited { background-color: #cacacc;} -.seq_problem_visited { background-color: #ccacac;} -.seq_schematic_visited { background-color: #cccaca;} - -.seq_problem_inactive { background-color: #aaaa99;} -.seq_video_inactive { background-color: #aa99aa;} -.seq_video_inactive { background-color: #aaa99a;} -.seq_html_inactive { background-color: #a99aaa;} -.seq_tab_inactive { background-color: #99aaaa;} -.seq_vertical_inactive { background-color: #9a9aab;} -.seq_sequential_inactive { background-color: #a9a9aa;} -.seq_problem_inactive { background-color: #aa9a9a;} -.seq_schematic_inactive { background-color: #aaa9a9;} - -.seq_active { background-color: red;} diff --git a/sass/_theme.scss b/sass/_theme.scss deleted file mode 100644 index 31e45ae734..0000000000 --- a/sass/_theme.scss +++ /dev/null @@ -1,190 +0,0 @@ -/* ----------------------------------------------------------------------------------------- - -Copyright 2010 - Thierry Ruiz - www.dotemplate.com - All rights reserved. - -THIS TEMPLATE IS FREE AS LONG AS YOU KEEP THE LINK TO WWW.DOTEMPLATE.COM IN THE FOOTER -TO REMOVE THE LINK, PLEASE MAKE A 10 DOLLARS DONATION at www.dotemplate.com/#donate - -pmitros donated $10 - -Colors: -Light blue: bddeff - Blue: 7fbcfd -Very dark blue: #031634 - -Dark blue: #023063; -Dark Greenish: #7a994c; -Greenish: #adcc80; -Very light greenish: #dae5c9; -Bright orange: #fa720a; - ----------------------------------------------------------------------------------------- -*/ - - -h1 { - clear:both; -} - -h2 { - clear:both; -} - -h3 { - font-size:1em; - margin:20px 0 5px 0; - clear:both; -} - -#wrapper { - background: transparent url( images/css/page-vbg.jpg ) repeat-y scroll 50% 0px; - margin:0 auto ; - width:100%; -} - -// marketing pages -#topWrapper { - width:100%; - height:100px; - background-image:url(images/css/topWrapper-bg.jpg); - background-position:center top ; - background-repeat:repeat-x; -} - -#topBanner { - width:800px; - margin:0 auto; - height:100px; - background-image:url(images/css/topBanner.jpg); - background-repeat:no-repeat; -} - -#topnav { - background:transparent url('images/css/hmenu.jpg') repeat-x top left; - height:20px; - margin:0 auto ; - text-align:center; - width:800px; - - ul { - display:table; - margin:0 auto; - padding:0; - list-style-type:none; - position:relative; - height:20px; - text-transform:uppercase; - font-size:0.9em; - font-family:Arial,sans-serif; - - li { - display:block; - float:left; - margin:0; - padding:0; - background:transparent url('images/css/hmenu.jpg') repeat-x top left; - - a { - display:block; - float:left; - color:#031634; - text-decoration:none; - padding:0px 50px ; - line-height:20px; - font-weight:bold; - } - } - } -} - -#topnav ul li a:hover, #topnav li#current a { - color:#7a994c; - background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left; -} - -#bg { - margin:0 auto; - padding:0; - background:transparent ; - background-image:url(images/css/hat.jpg); - background-repeat:no-repeat; - background-position: center top ; -} - -#header { - margin: 0 auto; - min-height:0px; - height: 0px; - width: 800px; -} - - -#page { - background: transparent url( images/css/page-bg.jpg ) no-repeat center top; -} - -#container { - margin:0 auto; - width:800px; -} - - -#content { - width:780px; - margin:0 auto ; - text-align:left; - min-height:800px; -} - - -#content p { - text-align:justify; -} - - - - - -#footerWrapper { - margin:0 auto; - height:10px; - padding:0; - background:transparent url( images/css/footerWrapper-bg.jpg ) no-repeat scroll center top; -} - - -#footer { - margin:0 auto; - padding:0; - width:800px; - height:10px; -} - -#sidebar ul.vmenu { - list-style: none; - text-align: left; - margin: 7px 0px 8px 0px; - padding: 0; - text-decoration: none; - border-top: 1px solid #eeeeee; -} - -#sidebar ul.vmenu li { - list-style: none; - padding: 4px 0 4px 0px; - margin: 0 2px; - border-bottom: 1px solid #eeeeee; -} - -#sidebar ul.vmenu li a { - text-decoration: none; - color:#023063; -} - -#sidebar ul.vmenu li a:hover { - color:#adcc80; -} - -#sidebar ul.vmenu ul { margin: 0 0 0 5px; padding: 0; } -#sidebar ul.vmenu ul li { border: none; } diff --git a/sass/application.scss b/sass/application.scss index 63b6ce1d20..e26dc21221 100644 --- a/sass/application.scss +++ b/sass/application.scss @@ -1,21 +1,16 @@ @import "bourbon/bourbon"; -@import "reset"; -@import "font-face"; // Base layout -@import "base-variables", "base-extends", "base"; -@import "layout"; -@import "leanmodal"; +@import "base/reset", "base/font-face"; +@import "base/variables", "base/functions", "base/extends", "base/base"; +@import "layout/layout", "layout/header", "layout/footer", "layout/leanmodal"; +@import "jquery-ui-1.8.16.custom"; // pages -@import "courseware", "courseware-video", "courseware-sequence-nav"; +@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav"; @import "textbook"; @import "info"; @import "profile"; -@import "wiki-basic-html", "wiki-create", "wiki"; +@import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki"; @import "help"; -@import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" , "discussion-answers", "discussion-forms", "form-wmd-toolbar"; - -// left over -// @import "theme"; -// @import "local"; +@import "discussion/askbot-original", "discussion/discussion", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar"; diff --git a/sass/_base.scss b/sass/base/_base.scss similarity index 95% rename from sass/_base.scss rename to sass/base/_base.scss index 8ea0957ac3..fd3f7774f7 100644 --- a/sass/_base.scss +++ b/sass/base/_base.scss @@ -29,6 +29,11 @@ em { font-style: italic; } +img { + max-width: 100%; + height: auto; +} + #{$all-text-inputs}, textarea { @include box-shadow(0 -1px 0 #fff); @include linear-gradient(#eee, #fff); diff --git a/sass/_base-extends.scss b/sass/base/_extends.scss similarity index 100% rename from sass/_base-extends.scss rename to sass/base/_extends.scss diff --git a/sass/_font-face.scss b/sass/base/_font-face.scss similarity index 100% rename from sass/_font-face.scss rename to sass/base/_font-face.scss diff --git a/sass/_index-functions.scss b/sass/base/_functions.scss similarity index 76% rename from sass/_index-functions.scss rename to sass/base/_functions.scss index d0777bd813..429c202226 100644 --- a/sass/_index-functions.scss +++ b/sass/base/_functions.scss @@ -1,6 +1,3 @@ -// Functions -//---------------------------------------- // - // Flexible grid @function flex-grid($columns, $container-columns: $fg-max-columns) { $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; @@ -14,8 +11,13 @@ @return percentage($gutter / $container-width); } -// Line-height -@function lh($amount: 1) { - @return $lh * $amount; +// Percentage of container calculator +@function perc($width, $container-width: $max-width) { + @return percentage($width / $container-width); +} + +// Line-height +@function lh($amount: 1) { + @return $body-line-height * $amount; } diff --git a/sass/_reset.scss b/sass/base/_reset.scss similarity index 100% rename from sass/_reset.scss rename to sass/base/_reset.scss diff --git a/sass/base/_variables.scss b/sass/base/_variables.scss new file mode 100644 index 0000000000..249f92dc96 --- /dev/null +++ b/sass/base/_variables.scss @@ -0,0 +1,31 @@ +// Variables +// ---------------------------------------- // + +// fonts +$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;; +$body-font-size: 14px; + +// grid +$columns: 12; +$column-width: 80px; +$gutter-width: 25px; +$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width); + +$gw-column: perc($column-width); +$gw-gutter: perc($gutter-width); +$body-line-height: golden-ratio($body-font-size, 1); + +//Flexible grid +$fg-column: $column-width; +$fg-gutter: $gutter-width; +$fg-max-columns: $columns; +$fg-max-width: 1400px; +$fg-min-width: 810px; + +// color +$light-gray: #ddd; +$dark-gray: #333; +$mit-red: #993333; + +$text-color: $dark-gray; +$border-color: $light-gray; diff --git a/sass/bourbon/_bourbon.scss b/sass/bourbon/_bourbon.scss index 5c1bc8a4a9..447167c5ab 100644 --- a/sass/bourbon/_bourbon.scss +++ b/sass/bourbon/_bourbon.scss @@ -1,7 +1,7 @@ // Custom Functions @import "functions/deprecated-webkit-gradient"; -@import "functions/golden-ratio"; @import "functions/grid-width"; +@import "functions/modular-scale"; @import "functions/tint-shade"; // CSS3 Mixins diff --git a/sass/bourbon/addons/_button.scss b/sass/bourbon/addons/_button.scss index d2f98ab0c3..1d32125140 100644 --- a/sass/bourbon/addons/_button.scss +++ b/sass/bourbon/addons/_button.scss @@ -5,31 +5,59 @@ $style: simple; } - @if $style == simple { - @include simple($base-color); + // Grayscale button + @if $base-color == grayscale($base-color) { + @if $style == simple { + @include simple($base-color, $grayscale: true); + } + + @else if $style == shiny { + @include shiny($base-color, $grayscale: true); + } + + @else if $style == pill { + @include pill($base-color, $grayscale: true); + } } - @else if $style == shiny { - @include shiny($base-color); - } + // Colored button + @else { + @if $style == simple { + @include simple($base-color); + } - @else if $style == pill { - @include pill($base-color); + @else if $style == shiny { + @include shiny($base-color); + } + + @else if $style == pill { + @include pill($base-color); + } } } -@mixin simple ($base-color) { - $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); - $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); - $color: hsl(0, 0, 100%); - $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); - $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); + +// Simple Button +//************************************************************************// +@mixin simple($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); + $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); + $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); @if lightness($base-color) > 70% { - $color: hsl(0, 0, 20%); + $color: hsl(0, 0, 20%); $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); } + @if $grayscale == true { + $border: grayscale($border); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + border: 1px solid $border; @include border-radius (3px); @include box-shadow (inset 0 1px 0 0 $inset-shadow); @@ -43,9 +71,15 @@ -webkit-background-clip: padding-box; &:hover { - $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); - $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); - $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); + $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); + $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + } @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover); cursor: pointer; @@ -53,30 +87,47 @@ } &:active { - $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); + @if $grayscale == true { + $border-active: grayscale($border-active); + $inset-shadow-active: grayscale($inset-shadow-active); + } + border: 1px solid $border-active; @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee); } } -@mixin shiny($base-color) { - $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); - $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); - $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); - $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); + +// Shiny Button +//************************************************************************// +@mixin shiny($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); - $color: hsl(0, 0, 100%); - $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); - $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); + $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); + $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); + $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); + $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); + $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); @if lightness($base-color) > 70% { - $color: hsl(0, 0, 20%); + $color: hsl(0, 0, 20%); $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); } - @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); + @if $grayscale == true { + $border: grayscale($border); + $border-bottom: grayscale($border-bottom); + $fourth-stop: grayscale($fourth-stop); + $inset-shadow: grayscale($inset-shadow); + $second-stop: grayscale($second-stop); + $text-shadow: grayscale($text-shadow); + $third-stop: grayscale($third-stop); + } + border: 1px solid $border; border-bottom: 1px solid $border-bottom; @include border-radius(5px); @@ -85,43 +136,69 @@ display: inline; font-size: 14px; font-weight: bold; + @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); padding: 7px 20px 8px; - text-decoration: none; text-align: center; + text-decoration: none; text-shadow: 0 -1px 1px $text-shadow; &:hover { - $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); + $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); - $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); + $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); - @include linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%); + @if $grayscale == true { + $first-stop-hover: grayscale($first-stop-hover); + $second-stop-hover: grayscale($second-stop-hover); + $third-stop-hover: grayscale($third-stop-hover); + $fourth-stop-hover: grayscale($fourth-stop-hover); + } + cursor: pointer; + @include linear-gradient(top, $first-stop-hover 0%, + $second-stop-hover 50%, + $third-stop-hover 50%, + $fourth-stop-hover 100%); } &:active { $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); + @if $grayscale == true { + $inset-shadow-active: grayscale($inset-shadow-active); + } + @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff); } } -@mixin pill($base-color) { - $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); - $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); - $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); - $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); - $color: hsl(0, 0, 100%); - $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); - $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); + +// Pill Button +//************************************************************************// +@mixin pill($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); + $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); + $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); + $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); @if lightness($base-color) > 70% { - $color: hsl(0, 0, 20%); + $color: hsl(0, 0, 20%); $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); } - @include linear-gradient ($base-color, $stop-gradient); + @if $grayscale == true { + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + border: 1px solid $border-top; border-color: $border-top $border-sides $border-bottom; @include border-radius(16px); @@ -131,35 +208,54 @@ font-size: 11px; font-weight: normal; line-height: 1; + @include linear-gradient ($base-color, $stop-gradient); padding: 3px 16px 5px; text-align: center; text-shadow: 0 -1px 1px $text-shadow; -webkit-background-clip: padding-box; &:hover { - $base-color-hover: adjust-color($base-color, $lightness: -4.5%); - $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); - $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); - $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); - $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); - $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); - $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); + $base-color-hover: adjust-color($base-color, $lightness: -4.5%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); + $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); + $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + $text-shadow-hover: grayscale($text-shadow-hover); + } - @include linear-gradient ($base-color-hover, $stop-gradient-hover); border: 1px solid $border-top; border-color: $border-top $border-sides $border-bottom; @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover); cursor: pointer; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); text-shadow: 0 -1px 1px $text-shadow-hover; -webkit-background-clip: padding-box; } &:active { - $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); - $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); - $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); - $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); - $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); + $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); + $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); + $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); + $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); + $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); + + @if $grayscale == true { + $active-color: grayscale($active-color); + $border-active: grayscale($border-active); + $border-bottom-active: grayscale($border-bottom-active); + $inset-shadow-active: grayscale($inset-shadow-active); + $text-shadow-active: grayscale($text-shadow-active); + } background: $active-color; border: 1px solid $border-active; @@ -168,3 +264,4 @@ text-shadow: 0 -1px 1px $text-shadow-active; } } + diff --git a/sass/bourbon/addons/_font-family.scss b/sass/bourbon/addons/_font-family.scss index 9e3bc6ee20..df8a80ddfc 100644 --- a/sass/bourbon/addons/_font-family.scss +++ b/sass/bourbon/addons/_font-family.scss @@ -1,4 +1,5 @@ $georgia: Georgia, Cambria, "Times New Roman", Times, serif; $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; +$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; $verdana: Verdana, Geneva, sans-serif; diff --git a/sass/bourbon/css3/_animation.scss b/sass/bourbon/css3/_animation.scss index 08f3b13e61..f99e06eb6f 100644 --- a/sass/bourbon/css3/_animation.scss +++ b/sass/bourbon/css3/_animation.scss @@ -1,6 +1,22 @@ // http://www.w3.org/TR/css3-animations/#the-animation-name-property- // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. +// Official animation shorthand property. +@mixin animation ($animation-1, + $animation-2: false, $animation-3: false, + $animation-4: false, $animation-5: false, + $animation-6: false, $animation-7: false, + $animation-8: false, $animation-9: false) + { + $full: compact($animation-1, $animation-2, $animation-3, $animation-4, + $animation-5, $animation-6, $animation-7, $animation-8, $animation-9); + + -webkit-animation: $full; + -moz-animation: $full; + animation: $full; +} + +// Individual Animation Properties @mixin animation-name ($name-1, $name-2: false, $name-3: false, $name-4: false, $name-5: false, @@ -127,8 +143,7 @@ } -// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable. -// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in); +// Deprecated @mixin animation-basic ($name, $time: 0, $motion: ease) { $length-of-name: length($name); $length-of-time: length($time); @@ -151,11 +166,6 @@ } @else { @include animation-timing-function( $motion); } + @warn "The animation-basic mixin is deprecated. Use the animation mixin instead."; } -// Official animation shorthand property. Needs more work to actually be useful. -@mixin animation ($name, $duration, $timing-function, $delay, $iteration-count, $direction) { - -webkit-animation: $name $duration $timing-function $delay $iteration-count $direction; - -moz-animation: $name $duration $timing-function $delay $iteration-count $direction; - animation: $name $duration $timing-function $delay $iteration-count $direction; -} diff --git a/sass/bourbon/css3/_linear-gradient.scss b/sass/bourbon/css3/_linear-gradient.scss index 585921f30b..0b68501719 100644 --- a/sass/bourbon/css3/_linear-gradient.scss +++ b/sass/bourbon/css3/_linear-gradient.scss @@ -2,7 +2,8 @@ $G3: false, $G4: false, $G5: false, $G6: false, $G7: false, $G8: false, - $G9: false, $G10: false) { + $G9: false, $G10: false, + $fallback: false) { // Detect what type of value exists in $pos $pos-type: type-of(nth($pos, 1)); @@ -15,7 +16,15 @@ $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); - background-color: nth($G1, 1); + // Set $G1 as the default fallback color + $fallback-color: nth($G1, 1); + + // If $fallback is a color use that color as the fallback color + @if type-of($fallback) == color { + $fallback-color: $fallback; + } + + background-color: $fallback-color; background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0 background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome background-image: -moz-linear-gradient($pos, $full); @@ -27,5 +36,6 @@ // Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well. // @include linear-gradient(#1e5799, #2989d8); +// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8); // @include linear-gradient(top, #1e5799 0%, #2989d8 50%); // @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); diff --git a/sass/bourbon/functions/_golden-ratio.scss b/sass/bourbon/functions/_golden-ratio.scss deleted file mode 100644 index 8f825addf3..0000000000 --- a/sass/bourbon/functions/_golden-ratio.scss +++ /dev/null @@ -1,31 +0,0 @@ -@function golden-ratio($value, $increment) { - @if $increment > 0 { - @for $i from 1 through $increment { - $value: ($value * 1.618); - } - } - - @if $increment < 0 { - $increment: abs($increment); - @for $i from 1 through $increment { - $value: ($value / 1.618); - } - } - - @return $value; -} - -// div { -// Increment Up GR with positive value -// font-size: golden-ratio(14px, 1); // returns: 22.652px -// -// Increment Down GR with negative value -// font-size: golden-ratio(14px, -1); // returns: 8.653px -// -// Can be used with ceil(round up) or floor(round down) -// font-size: floor( golden-ratio(14px, 1) ); // returns: 22px -// font-size: ceil( golden-ratio(14px, 1) ); // returns: 23px -// } -// -// modularscale.com -// goldenratiocalculator.com diff --git a/bourbon/functions/_modular-scale.scss b/sass/bourbon/functions/_modular-scale.scss similarity index 100% rename from bourbon/functions/_modular-scale.scss rename to sass/bourbon/functions/_modular-scale.scss diff --git a/sass/bourbon/lib/bourbon.rb b/sass/bourbon/lib/bourbon.rb index ca440eefbc..1635be836d 100644 --- a/sass/bourbon/lib/bourbon.rb +++ b/sass/bourbon/lib/bourbon.rb @@ -1,3 +1,5 @@ +require "bourbon/generator" + module Bourbon if defined?(Rails) class Engine < ::Rails::Engine diff --git a/sass/_courseware.scss b/sass/courseware/_courseware.scss similarity index 67% rename from sass/_courseware.scss rename to sass/courseware/_courseware.scss index 489657459f..65c71fc183 100644 --- a/sass/_courseware.scss +++ b/sass/courseware/_courseware.scss @@ -5,84 +5,6 @@ div.course-wrapper { list-style: none; } - div#accordion { - @extend .sidebar; - - div#open_close_accordion { - position: absolute; - right: 0px; - width: 20px; - height: 20px; - background: #ccc; - border: 1px solid black; - right: -22px; - top: 5px; - } - - h3 { - overflow: hidden; - margin: 0; - - &:last-child { - @include box-shadow(none); - } - - &.ui-accordion-header { - color: #000; - - a { - font-size: $body-font-size; - color: lighten($text-color, 10%); - } - - &.ui-state-hover { - border: none; - border-bottom: 1px solid #d3d3d3; - } - - &.ui-state-active { - @extend .active; - } - } - } - - ul.ui-accordion-content { - @include border-radius(0); - @include box-shadow( inset -1px 0 0 #e6e6e6); - background: #d6d6d6; - border: none; - border-bottom: 1px solid #c3c3c3; - font-size: 12px; - margin: 0; - overflow: hidden; - - li { - &.active { - font-weight: bold; - } - - a { - text-decoration: none; - margin-bottom: lh(.5); - display: block; - color: #000; - - &:hover { - color: #666; - } - - p { - margin-bottom: 0; - - &.subtitle { - color: #666; - } - } - } - } - } - } - section.course-content { @extend .content; diff --git a/sass/_courseware-sequence-nav.scss b/sass/courseware/_sequence-nav.scss similarity index 100% rename from sass/_courseware-sequence-nav.scss rename to sass/courseware/_sequence-nav.scss diff --git a/sass/courseware/_sidebar.scss b/sass/courseware/_sidebar.scss new file mode 100644 index 0000000000..401a2f5c3c --- /dev/null +++ b/sass/courseware/_sidebar.scss @@ -0,0 +1,77 @@ +div#accordion { + @extend .sidebar; + + div#open_close_accordion { + position: absolute; + right: 0px; + width: 20px; + height: 20px; + background: #ccc; + border: 1px solid black; + right: -22px; + top: 5px; + } + + h3 { + overflow: hidden; + margin: 0; + + &:last-child { + @include box-shadow(none); + } + + &.ui-accordion-header { + color: #000; + + a { + font-size: $body-font-size; + color: lighten($text-color, 10%); + } + + &.ui-state-hover { + border: none; + border-bottom: 1px solid #d3d3d3; + } + + &.ui-state-active { + @extend .active; + } + } + } + + ul.ui-accordion-content { + @include border-radius(0); + @include box-shadow( inset -1px 0 0 #e6e6e6); + background: #d6d6d6; + border: none; + border-bottom: 1px solid #c3c3c3; + font-size: 12px; + margin: 0; + overflow: hidden; + + li { + &.active { + font-weight: bold; + } + + a { + text-decoration: none; + margin-bottom: lh(.5); + display: block; + color: #000; + + &:hover { + color: #666; + } + + p { + margin-bottom: 0; + + &.subtitle { + color: #666; + } + } + } + } + } +} diff --git a/sass/_courseware-video.scss b/sass/courseware/_video.scss similarity index 100% rename from sass/_courseware-video.scss rename to sass/courseware/_video.scss diff --git a/sass/_discussion-answers.scss b/sass/discussion/_answers.scss similarity index 100% rename from sass/_discussion-answers.scss rename to sass/discussion/_answers.scss diff --git a/sass/_askbot-original.scss b/sass/discussion/_askbot-original.scss similarity index 100% rename from sass/_askbot-original.scss rename to sass/discussion/_askbot-original.scss diff --git a/sass/_discussion.scss b/sass/discussion/_discussion.scss similarity index 100% rename from sass/_discussion.scss rename to sass/discussion/_discussion.scss diff --git a/sass/_form-wmd-toolbar.scss b/sass/discussion/_form-wmd-toolbar.scss similarity index 100% rename from sass/_form-wmd-toolbar.scss rename to sass/discussion/_form-wmd-toolbar.scss diff --git a/sass/_discussion-forms.scss b/sass/discussion/_forms.scss similarity index 100% rename from sass/_discussion-forms.scss rename to sass/discussion/_forms.scss diff --git a/sass/_question-view.scss b/sass/discussion/_question-view.scss similarity index 100% rename from sass/_question-view.scss rename to sass/discussion/_question-view.scss diff --git a/sass/_discussion-questions.scss b/sass/discussion/_questions.scss similarity index 100% rename from sass/_discussion-questions.scss rename to sass/discussion/_questions.scss diff --git a/sass/_discussion-tags.scss b/sass/discussion/_tags.scss similarity index 100% rename from sass/_discussion-tags.scss rename to sass/discussion/_tags.scss diff --git a/sass/index/_base.scss b/sass/index/_base.scss new file mode 100644 index 0000000000..c2a5b9dcc2 --- /dev/null +++ b/sass/index/_base.scss @@ -0,0 +1,44 @@ +body { + background-color: #fff; + color: #444; + font: $body-font-size $body-font-family; + + :focus { + outline-color: #ccc; + } + + h1 { + font: 800 24px $header-font-family; + } + + li { + margin-bottom: lh(); + } + + em { + font-style: italic; + } + + a { + color: $mit-red; + font-style: italic; + text-decoration: none; + + &:hover, &:focus { + color: darken($mit-red, 10%); + } + } + + #{$all-text-inputs}, textarea { + @include box-shadow(0 -1px 0 #fff); + @include linear-gradient(#eee, #fff); + border: 1px solid #999; + font: $body-font-size $body-font-family; + padding: 4px; + width: 100%; + + &:focus { + border-color: $mit-red; + } + } +} diff --git a/sass/_index-extends.scss b/sass/index/_extends.scss similarity index 100% rename from sass/_index-extends.scss rename to sass/index/_extends.scss diff --git a/sass/index/_footer.scss b/sass/index/_footer.scss new file mode 100644 index 0000000000..ee62b69426 --- /dev/null +++ b/sass/index/_footer.scss @@ -0,0 +1,47 @@ +footer { + @extend .wrapper; + @extend .clearfix; + padding-top: 0; + + div.footer-wrapper { + border-top: 1px solid #e5e5e5; + padding: lh() 0; + background: url('/static/images/marketing/mit-logo.png') right center no-repeat; + + a { + color: #888; + text-decoration: none; + @include transition(); + + &:hover, &:focus { + color: #666; + } + } + + p { + @include inline-block(); + margin-right: lh(); + } + + ul { + @include inline-block(); + + li { + @include inline-block(); + + &:after { + content: ' |'; + display: inline; + color: #ccc; + } + + &:last-child { + &:after { + content: none; + } + } + + } + } + } +} diff --git a/sass/index/_header.scss b/sass/index/_header.scss new file mode 100644 index 0000000000..e5e8a12cdd --- /dev/null +++ b/sass/index/_header.scss @@ -0,0 +1,144 @@ +header.announcement { + @include background-size(cover); + background: #333; + border-bottom: 1px solid #000; + color: #fff; + -webkit-font-smoothing: antialiased; + + &.home { + background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg"); + + @media screen and (min-width: 1200px) { + background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg"); + } + + div { + padding: lh(10) lh() lh(3); + + //hide login link for homepage + nav { + h1 { + margin-right: 0; + } + + a.login { + display: none; + } + } + } + } + + &.course { + background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg"); + + @media screen and (min-width: 1200px) { + background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg"); + } + + @media screen and (max-width: 1199px) and (min-width: 700px) { + background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg"); + } + + div { + padding: lh(4) lh() lh(2); + } + } + + div { + @extend .wrapper; + position: relative; + + nav { + position: absolute; + top: 0; + right: lh(); + @include border-radius(0 0 3px 3px); + background: #333; + background: rgba(#000, .7); + padding: lh(.5) lh(); + + h1 { + @include inline-block(); + margin-right: lh(.5); + + a { + font: italic 800 18px $header-font-family; + color: #fff; + text-decoration: none; + + &:hover, &:focus { + color: #999; + } + } + } + + a.login { + text-decoration: none; + color: #fff; + font-size: 12px; + font-style: normal; + font-family: $header-font-family; + + &:hover, &:focus { + color: #999; + } + } + } + + section { + @extend .clearfix; + @include inline-block(); + background: $mit-red; + margin-left: flex-grid(4) + flex-gutter(); + padding: lh() lh(1.5); + + h1 { + @include inline-block(); + font-family: "Open Sans"; + font-size: 30px; + font-weight: 800; + line-height: 1.2em; + margin: 0 lh() 0 0; + } + + h2 { + @include inline-block(); + font-family: "Open Sans"; + font-size: 24px; + font-weight: 400; + line-height: 1.2em; + } + + &.course { + section { + width: flex-grid(4, 8); + margin-right: flex-gutter(8); + float: left; + margin-left: 0; + padding: 0; + + a { + @extend .button; + @include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%)); + background-color: darken($mit-red, 20%); + display: block; + padding: lh(.5) lh(); + border-color: darken($mit-red, 30%); + text-align: center; + + &:hover { + background-color: darken($mit-red, 10%); + border-color: darken($mit-red, 20%); + } + } + } + + p { + width: flex-grid(4, 8); + line-height: lh(); + float: left; + } + } + } + } +} diff --git a/sass/index/_index.scss b/sass/index/_index.scss new file mode 100644 index 0000000000..b24eee663e --- /dev/null +++ b/sass/index/_index.scss @@ -0,0 +1,233 @@ +section.index-content { + @extend .wrapper; + @extend .clearfix; + + section { + @extend .clearfix; + float: left; + + h1 { + font-size: 800 24px "Open Sans"; + margin-bottom: lh(); + } + + p { + line-height: lh(); + margin-bottom: lh(); + } + + ul { + margin: 0; + } + + &.about { + @include box-sizing(border-box); + border-right: 1px solid #e5e5e5; + margin-right: flex-gutter(); + padding-right: flex-gutter() / 2; + width: flex-grid(8); + + section { + @extend .clearfix; + margin-bottom: lh(); + + p { + width: flex-grid(4, 8); + float: left; + + &:nth-child(odd) { + margin-right: flex-gutter(8); + } + } + + &.intro { + section { + margin-bottom: 0; + + &.intro-text { + margin-right: flex-gutter(8); + width: flex-grid(4, 8); + + p { + margin-right: 0; + width: auto; + float: none; + } + } + + &.intro-video { + width: flex-grid(4, 8); + + a { + display: block; + width: 100%; + + img { + width: 100%; + } + + span { + display: none; + } + } + } + } + } + + &.features { + border-top: 1px solid #E5E5E5; + padding-top: lh(); + margin-bottom: 0; + + h2 { + text-transform: uppercase; + letter-spacing: 1px; + color: #666; + margin-bottom: lh(); + + span { + text-transform: none; + } + } + + p { + width: auto; + clear: both; + + strong { + font-family: "Open sans"; + font-weight: 800; + } + + a { + color: $mit-red; + text-decoration: none; + @include transition(); + + &:hover, &:focus { + color: darken($mit-red, 15%); + } + } + } + + ul { + margin-bottom: 0; + + li { + line-height: lh(); + width: flex-grid(4, 8); + float: left; + margin-bottom: lh(.5); + + &:nth-child(odd) { + margin-right: flex-gutter(8); + } + } + } + } + } + } + + &.course, &.staff { + width: flex-grid(4); + + h1 { + font: normal $body-font-size $body-font-family; + text-transform: uppercase; + letter-spacing: 1px; + color: #666; + margin-bottom: lh(); + } + + h2 { + font: 800 24px $header-font-family; + } + + h3 { + font: 400 18px $header-font-family; + } + + a { + @extend .button; + } + + ul { + list-style: none; + + li { + img { + float: left; + margin-right: lh(.5); + } + } + } + } + + &.course { + h2 { + padding-top: lh(5); + background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat; + @include background-size(contain); + + @media screen and (max-width: 998px) { + background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat; + } + } + } + + + // index + //---------------------------------------- // + &.about-course { + @include box-sizing(border-box); + border-right: 1px solid #e5e5e5; + margin-right: flex-gutter(); + padding-right: flex-gutter() / 2; + width: flex-grid(8); + + section { + width: flex-grid(4, 8); + + + &.about-info { + margin-right: flex-gutter(8); + } + + &.requirements { + clear: both; + width: 100%; + border-top: 1px solid #E5E5E5; + padding-top: lh(); + margin-bottom: 0; + + p { + float: left; + width: flex-grid(4, 8); + margin-right: flex-gutter(8); + + &:nth-child(odd) { + margin-right: 0; + } + } + } + + &.cta { + width: 100%; + text-align: center; + + a.enroll { + @extend .button; + padding: lh(.5) lh(2); + @include inline-block(); + text-align: center; + font: 800 18px $header-font-family; + } + } + } + } + } +} + +section.copyright, section.tos, section.privacy-policy, section.honor-code { + @extend .subpage; +} diff --git a/sass/_index-variables.scss b/sass/index/_variables.scss similarity index 69% rename from sass/_index-variables.scss rename to sass/index/_variables.scss index 47eb6b9179..7f3deac55e 100644 --- a/sass/_index-variables.scss +++ b/sass/index/_variables.scss @@ -13,15 +13,17 @@ $gw-gutter: 25px; $body-font-family: Georgia, serif; $header-font-family: "Open Sans", Helvetica, Arial, sans-serif; -// @media screen and (min-width: 940px) { - $body-font-size: 16px; +$body-font-size: 16px; + +// @media screen and (min-width:1200px) { +// $body-font-size: 18px; // } - -// @media screen and (max-width: 939px) { +// @media screen and (max-width:890px) { // $body-font-size: 14px; // } +$body-line-height: golden-ratio($body-font-size, 1); $lh: golden-ratio($body-font-size, 1); // Colors diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss new file mode 100644 index 0000000000..97c28d5fd8 --- /dev/null +++ b/sass/layout/_footer.scss @@ -0,0 +1,45 @@ +footer { + @extend .clearfix; + @extend .wrapper; + @include box-sizing(border-box); + color: #777; + margin-top: $body-line-height; + padding: 0 $body-line-height; + + p { + float: left; + + a { + color: #444; + + &:link, &:visited { + color: #444; + } + + &:hover, &:focus { + color: #000; + } + } + } + + ul { + float: right; + + li { + display: inline-block; + margin-right: 20px; + + a { + color: #444; + + &:link, &:visited { + color: #444; + } + + &:hover, &:focus { + color: #000; + } + } + } + } +} diff --git a/sass/layout/_header.scss b/sass/layout/_header.scss new file mode 100644 index 0000000000..5d3cf5a048 --- /dev/null +++ b/sass/layout/_header.scss @@ -0,0 +1,103 @@ +div.header-wrapper { + // @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%)); + @include box-shadow(inset 0 -1px 2px darken($mit-red, 10%)); + background: $mit-red; + border-bottom: 1px solid #fff; + + header { + @extend .clearfix; + @extend .wrapper; + @include box-sizing(border-box); + padding: 0 $body-line-height; + + hgroup { + @extend .clearfix; + float: left; + + h1 { + border-right: 1px solid darken($mit-red, 5%); + color: darken($mit-red, 25%); + font-size: 20px; + font-weight: 800; + margin: 0 lh() 0 0; + padding: 17px lh() 14px 0; + text-shadow: 0 1px 0 lighten($mit-red, 10%); + line-height: lh(); + @include inline-block(); + } + + h2 { + @include inline-block(); + margin: 0 lh() 0 0; + padding: 19px lh() 9px 0; + line-height: lh(); + border-right: 1px solid darken($mit-red, 5%); + -webkit-font-smoothing: antialiased; + + a { + color: #fff; + text-decoration: none; + + &:hover { + color: rgba(#fff, .7); + } + } + } + + @media screen and (max-width: 920px) { + border-bottom: 1px solid darken($mit-red, 5%); + display: block; + float: none; + + h1 { + float: right; + border: 0; + margin-right: 0; + padding-right: 0; + } + + h2 { + float: left; + border: 0; + margin-right: 0; + padding-right: 0; + } + } + } + + nav { + float: left; + display: block; + margin: 0; + padding: 0; + text-shadow: 0 -1px 0 darken($mit-red, 10%); + -webkit-font-smoothing: antialiased; + + + ul { + @extend .clearfix; + display: inline-block; + padding: 19px 0 9px; + margin: 0; + + li { + margin-right: lh(); + display: inline-block; + margin-bottom: 0; + line-height: lh(); + + a { + color: #fff; + text-decoration: none; + + &:hover { + color: rgba(#fff, .7); + background-color: none; + text-decoration: none; + } + } + } + } + } + } +} diff --git a/sass/layout/_layout.scss b/sass/layout/_layout.scss new file mode 100644 index 0000000000..c0f52ad268 --- /dev/null +++ b/sass/layout/_layout.scss @@ -0,0 +1,28 @@ +html { + margin-top: 0; + + body { + color: $dark-gray; + font: $body-font-size $body-font-family; + text-align: center; + margin: 0; + background: #f4f4f4; //#f3f1e5 + + section.main-content { + @extend .clearfix; + @extend .wrapper; + @include box-sizing(border-box); + @include border-radius(4px); + overflow: hidden; + background: #fff; + border-bottom: 1px solid #bbb; + + @media screen and (min-width: 1400px) { + // @include border-radius(3px); + @include box-shadow(0 0 4px #dfdfdf); + border: 1px solid #bbb; + margin-top: lh(.5); + } + } + } +} diff --git a/sass/_leanmodal.scss b/sass/layout/_leanmodal.scss similarity index 100% rename from sass/_leanmodal.scss rename to sass/layout/_leanmodal.scss diff --git a/sass/marketing.scss b/sass/marketing.scss index 61dff2d197..7b93c36a3b 100644 --- a/sass/marketing.scss +++ b/sass/marketing.scss @@ -1,7 +1,6 @@ @import "bourbon/bourbon"; -@import "reset"; -@import "font-face"; +@import "base/reset", "base/font-face", "base/functions"; // pages -@import "index-functions", "index-variables", "index-extends", "index"; -@import "leanmodal"; +@import "index/variables", "index/extends", "index/base", "index/header", "index/footer", "index/index"; +@import "layout/leanmodal"; diff --git a/sass/print.scss b/sass/print.scss new file mode 100644 index 0000000000..12436ba683 --- /dev/null +++ b/sass/print.scss @@ -0,0 +1,6 @@ +.header-wrapper {display:none;} +#accordion {display:none;} +.ui-accordion {display:none; +visibility:hidden; +width:0%; +} diff --git a/sass/_wiki-basic-html.scss b/sass/wiki/_basic-html.scss similarity index 100% rename from sass/_wiki-basic-html.scss rename to sass/wiki/_basic-html.scss diff --git a/sass/_wiki-create.scss b/sass/wiki/_create.scss similarity index 100% rename from sass/_wiki-create.scss rename to sass/wiki/_create.scss diff --git a/sass/wiki/_sidebar.scss b/sass/wiki/_sidebar.scss new file mode 100644 index 0000000000..513b3c2556 --- /dev/null +++ b/sass/wiki/_sidebar.scss @@ -0,0 +1,69 @@ +div#wiki_panel { + @extend .sidebar; + overflow: auto; + + input[type="button"] { + @extend h3; + @include transition(); + color: lighten($text-color, 10%); + font-size: $body-font-size; + margin: 0 !important; + padding: 7px lh(); + text-align: left; + width: 100%; + + &:hover { + @include box-shadow(0 1px 0 #fff); + background: #efefef; + } + } + + ul { + li { + &.search { + @include box-shadow(0 1px 0 #eee); + border-bottom: 1px solid #d3d3d3; + padding: 7px lh(); + + label { + display: none; + } + } + + &.create-article { + h3 { + a { + padding: 7px lh(); + } + } + } + } + } + + div#wiki_create_form { + @extend .clearfix; + padding: 15px; + background: #d6d6d6; + border-bottom: 1px solid #bbb; + + input[type="text"] { + margin-bottom: 6px; + display: block; + width: 100%; + @include box-sizing(border-box); + } + + ul { + list-style: none; + + li { + float: left; + + &#cancel { + float: right; + margin-top: 10px; + } + } + } + } +} diff --git a/sass/_wiki.scss b/sass/wiki/_wiki.scss similarity index 53% rename from sass/_wiki.scss rename to sass/wiki/_wiki.scss index 86b90c43d6..8078273514 100644 --- a/sass/_wiki.scss +++ b/sass/wiki/_wiki.scss @@ -2,76 +2,6 @@ div.wiki-wrapper { display: table; width: 100%; - div#wiki_panel { - @extend .sidebar; - overflow: auto; - - input[type="button"] { - @extend h3; - @include transition(); - color: lighten($text-color, 10%); - font-size: $body-font-size; - margin: 0 !important; - padding: 7px lh(); - text-align: left; - width: 100%; - - &:hover { - @include box-shadow(0 1px 0 #fff); - background: #efefef; - } - } - - ul { - li { - &.search { - @include box-shadow(0 1px 0 #eee); - border-bottom: 1px solid #d3d3d3; - padding: 7px lh(); - - label { - display: none; - } - } - - &.create-article { - h3 { - a { - padding: 7px lh(); - } - } - } - } - } - - div#wiki_create_form { - @extend .clearfix; - padding: 15px; - background: #d6d6d6; - border-bottom: 1px solid #bbb; - - input[type="text"] { - margin-bottom: 6px; - display: block; - width: 100%; - @include box-sizing(border-box); - } - - ul { - list-style: none; - - li { - float: left; - - &#cancel { - float: right; - margin-top: 10px; - } - } - } - } - } - section.wiki-body { @extend .content; From 92f2927fe53c4ab1ef7a8b60cbea1acb178cad69 Mon Sep 17 00:00:00 2001 From: Reda Lemeden Date: Tue, 14 Feb 2012 13:57:16 -0500 Subject: [PATCH 40/75] Redesigned the question tag filtering & navigation --- sass/_discussion-questions.scss | 125 ++++++++++++++------------------ 1 file changed, 55 insertions(+), 70 deletions(-) diff --git a/sass/_discussion-questions.scss b/sass/_discussion-questions.scss index eb0d0aedf3..d508ba6161 100644 --- a/sass/_discussion-questions.scss +++ b/sass/_discussion-questions.scss @@ -4,93 +4,45 @@ div.question-list-header { overflow: hidden; width: flex-grid(9,9); - section.question-list-meta, section.question-sort-filter { + section.question-list-meta { display: block; overflow: hidden; width: 100%; div { - display: inline; + display: inline-block; float: left; } - } - section.question-list-meta { + span.label { + color: #555; + } + div.question-list-title { margin-right: flex-gutter(); - // width: flex-grid(3,9); h1 { margin-top: 0; } } - div.question-list-tags { - // width: flex-grid(6,9); - padding-top:8px; - - ul.tags { - display: inline; - // float: left; - - li { - span.delete-icon, div.delete-icon { - @include border-radius(0 4px 4px 0); - background: #555; - color: #eee; - cursor: pointer; - float: none; - left: 10px; - padding: 3px 6px; - position: relative; - top: 1px; - opacity: 0.5; - - &:hover { - opacity: 1; - } - } - } - } - } - } - section.question-sort-filter { - font-size: 16px; - - span.label { - color: #555; - } - - div.question-filter { - margin-right: flex-gutter(9); - - ul.scope-filters { - @extend .action-link; - - li { - display: inline; - - a { - &.on { - font-weight: bold; - } - - &:before { - content: '|'; - color: darken(#F6EFD4, 10%); - font-size: 22px; - } - } - } - } - } div.question-sort { - margin-left: flex-gutter(); float: right; + margin-left: flex-gutter(); + // width: flex-grid(3,9); + + // @media screen and (max-width: 1300px) { + // width: 100%; + // } nav { @extend .action-link; + float: right; + + // @media screen and (max-width: 1300px) { + // float: left; + // } a { &.on span{ @@ -107,9 +59,46 @@ div.question-list-header { } } + section.question-tags-list { + display: block; + min-height: 40px; + overflow: hidden; + width: 100%; + + div.tags-list { + padding-top:8px; + display: inline-block; + float: left; + + ul.tags { + display: inline; + + li { + span.delete-icon, div.delete-icon { + @include border-radius(0 4px 4px 0); + background: #555; + color: #eee; + cursor: pointer; + float: none; + display: inline; + clear: none; + left: 10px; + padding: 3px 6px; + position: relative; + top: 1px; + opacity: 0.5; + + &:hover { + opacity: 1; + } + } + } + } + } + } } -ul.question-list { +ul.question-list, div#question-list { width: flex-grid(9,9); li.single-question { @@ -208,9 +197,5 @@ ul.question-list { } } -div.search-tips { - display: block; -} - .search-result-summary { } From 3a25e96a2c8c6212976937841265c762bf5f21bd Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 14 Feb 2012 14:35:49 -0500 Subject: [PATCH 41/75] Fixed padding on discussions --- sass/discussion/_discussion.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sass/discussion/_discussion.scss b/sass/discussion/_discussion.scss index 111d23bff0..14602f897d 100644 --- a/sass/discussion/_discussion.scss +++ b/sass/discussion/_discussion.scss @@ -38,9 +38,9 @@ body.askbot { div.discussion-content { @include box-sizing(border-box); display: table-cell; - padding: $gw-gutter; + padding: lh(); vertical-align: top; - width: flex-grid(9); + width: flex-grid(9) + flex-gutter(); p.tabula-rasa { @include border-radius(5px); @@ -72,7 +72,7 @@ body.askbot { @include border-radius(0 4px 4px 0); border-left: 1px solid #d3d3d3; border-right: 1px solid #f6f6f6; - padding: $gw-gutter; + padding: lh(); width: flex-grid(3); h2 { From f1fc649eee0e8a5eb2c1f9e5d8c0114018faa2c1 Mon Sep 17 00:00:00 2001 From: kaishin Date: Tue, 14 Feb 2012 15:24:31 -0500 Subject: [PATCH 42/75] Fixed the tag div properties --- sass/discussion/_questions.scss | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/sass/discussion/_questions.scss b/sass/discussion/_questions.scss index d508ba6161..5a2780853c 100644 --- a/sass/discussion/_questions.scss +++ b/sass/discussion/_questions.scss @@ -30,20 +30,11 @@ div.question-list-header { div.question-sort { float: right; margin-left: flex-gutter(); - // width: flex-grid(3,9); - - // @media screen and (max-width: 1300px) { - // width: 100%; - // } nav { @extend .action-link; float: right; - // @media screen and (max-width: 1300px) { - // float: left; - // } - a { &.on span{ font-weight: bold; @@ -61,14 +52,25 @@ div.question-list-header { section.question-tags-list { display: block; - min-height: 40px; + min-height: 26px; overflow: hidden; + padding-top:5px; width: 100%; - div.tags-list { - padding-top:8px; + div { display: inline-block; float: left; + } + + div.back { + margin-right: 10px; + + a { + color: #555; + } + } + + div.tags-list { ul.tags { display: inline; From de3fd877e50bd010ccdf0a4bc264c3928a22ce3d Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 15 Feb 2012 09:32:23 -0500 Subject: [PATCH 43/75] Fixed header bug and calculator bug in firefox --- sass/layout/_header.scss | 1 + sass/layout/_leanmodal.scss | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/sass/layout/_header.scss b/sass/layout/_header.scss index 5d3cf5a048..144194e397 100644 --- a/sass/layout/_header.scss +++ b/sass/layout/_header.scss @@ -71,6 +71,7 @@ div.header-wrapper { margin: 0; padding: 0; text-shadow: 0 -1px 0 darken($mit-red, 10%); + max-height: 52px; //fix for firefox -webkit-font-smoothing: antialiased; diff --git a/sass/layout/_leanmodal.scss b/sass/layout/_leanmodal.scss index 9e754377e2..730ea7b764 100644 --- a/sass/layout/_leanmodal.scss +++ b/sass/layout/_leanmodal.scss @@ -221,7 +221,6 @@ div#feedback_div{ div#calculator_div { max-width: 500px; - form { padding-bottom: lh(); margin-bottom: lh(); @@ -246,11 +245,12 @@ div#calculator_div { input#calculator_output { border: 0; - background: 0; + background: none; padding: lh(.35); width: 60px; font-size: 24px; font-weight: bold; + margin-top: 4px; } } From a21f01f468e61b20b45822d6d1b625734a81b4fa Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 15 Feb 2012 09:51:18 -0500 Subject: [PATCH 44/75] Added more style for the progress list --HG-- branch : templates-profilecleanup --- sass/_profile.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/sass/_profile.scss b/sass/_profile.scss index ceff56ccfc..8a08759294 100644 --- a/sass/_profile.scss +++ b/sass/_profile.scss @@ -59,28 +59,34 @@ div.profile-wrapper { > ol { list-style: none; + border-top: 1px solid #e3e3e3; + margin-top: lh(); > li { border-bottom: 1px solid #e3e3e3; padding: lh() 0; + width: 100%; + display: table; @extend .clearfix; h2 { - float: left; + display: table-cell; padding: 0; margin: 0; width: flex-grid(2, 9); - margin-right: flex-gutter(9); + padding-right: flex-gutter(9); + border-right: 1px dotted #ccc; + @include box-sizing(border-box); } ol.sections { - float: left; + padding-left: flex-gutter(9); + display: table-cell; list-style: none; width: flex-grid(7, 9); > li { - border-bottom: 1px solid #e3e3e3; - padding: lh() 0; + padding:0 0 lh() 0; &:first-child { padding-top: 0; From d287a110f88af53bc3a27c05a9faff6ca059ffce Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 15 Feb 2012 10:08:14 -0500 Subject: [PATCH 45/75] Made calc answer input whole width --- sass/layout/_leanmodal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/layout/_leanmodal.scss b/sass/layout/_leanmodal.scss index 730ea7b764..fb3e2d5a8f 100644 --- a/sass/layout/_leanmodal.scss +++ b/sass/layout/_leanmodal.scss @@ -247,8 +247,8 @@ div#calculator_div { border: 0; background: none; padding: lh(.35); - width: 60px; font-size: 24px; + width: 378px; font-weight: bold; margin-top: 4px; } From 1e4951dc889b78df7bc0386027029edd877df386 Mon Sep 17 00:00:00 2001 From: kaishin Date: Wed, 15 Feb 2012 10:37:05 -0500 Subject: [PATCH 46/75] Started restyling the sidebar --- sass/application.scss | 2 +- sass/discussion/_discussion.scss | 27 ------------- sass/discussion/_form-wmd-toolbar.scss | 2 +- sass/discussion/_sidebar.scss | 55 ++++++++++++++++++++++++++ 4 files changed, 57 insertions(+), 29 deletions(-) create mode 100644 sass/discussion/_sidebar.scss diff --git a/sass/application.scss b/sass/application.scss index e26dc21221..81e2af18c9 100644 --- a/sass/application.scss +++ b/sass/application.scss @@ -13,4 +13,4 @@ @import "profile"; @import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki"; @import "help"; -@import "discussion/askbot-original", "discussion/discussion", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar"; +@import "discussion/askbot-original", "discussion/discussion","discussion/sidebar", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar"; diff --git a/sass/discussion/_discussion.scss b/sass/discussion/_discussion.scss index 14602f897d..0a4395e27c 100644 --- a/sass/discussion/_discussion.scss +++ b/sass/discussion/_discussion.scss @@ -65,33 +65,6 @@ body.askbot { } } } - - aside { - @extend .sidebar; - @include box-shadow(inset 1px 0 0 #f6f6f6); - @include border-radius(0 4px 4px 0); - border-left: 1px solid #d3d3d3; - border-right: 1px solid #f6f6f6; - padding: lh(); - width: flex-grid(3); - - h2 { - font-size: 16px; - } - - h3 { - border-bottom: 0; - box-shadow: none; - } - - input[type="text"] { - width: 76%; - } - - #displayTagFilterControl { - margin-top: 10px; - } - } } } diff --git a/sass/discussion/_form-wmd-toolbar.scss b/sass/discussion/_form-wmd-toolbar.scss index 050f4bf354..be5bdaa24a 100644 --- a/sass/discussion/_form-wmd-toolbar.scss +++ b/sass/discussion/_form-wmd-toolbar.scss @@ -3,7 +3,7 @@ } #wmd-button-bar { - background: url(static/images/askbot/editor-toolbar-background.png) repeat-x bottom; + background: url(/static/images/askbot/editor-toolbar-background.png) repeat-x bottom; border: 1px solid #ddd; height:36px; float:left; diff --git a/sass/discussion/_sidebar.scss b/sass/discussion/_sidebar.scss new file mode 100644 index 0000000000..faa30d71a0 --- /dev/null +++ b/sass/discussion/_sidebar.scss @@ -0,0 +1,55 @@ +div.discussion-wrapper aside { + @extend .sidebar; + @include box-shadow(inset 1px 0 0 #f6f6f6); + @include border-radius(0 4px 4px 0); + border-left: 1px solid #d3d3d3; + border-right: 1px solid #f6f6f6; + padding: lh(); + width: flex-grid(3); + + h2 { + font-size: 16px; + } + + h3 { + border-bottom: 0; + box-shadow: none; + } + + input[type="text"] { + width: 76%; + } + + #displayTagFilterControl { + margin-top: 10px; + } + + div.search-box { + input { + display: inline; + } + input[type='submit'] { + @include box-shadow(none); + opacity: 0.5; + background: url(/static/images/askbot/search-icon.png) no-repeat center; + border: 0; + margin-left: 3px; + position: absolute; + text-indent: -9999px; + width: 24px; + + &:hover { + opacity: 0.9; + } + + &:focus { + opacity: 1; + } + } + + input#keywords { + padding-left: 30px; + } + } +} + From 35f6dc007997dbe781c7e0e7d6d1e9719c6390c1 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 15 Feb 2012 11:23:51 -0500 Subject: [PATCH 47/75] formating scss --HG-- branch : close_sidebar --- sass/courseware/_courseware.scss | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/sass/courseware/_courseware.scss b/sass/courseware/_courseware.scss index c23f030b3d..5876d67d5b 100644 --- a/sass/courseware/_courseware.scss +++ b/sass/courseware/_courseware.scss @@ -122,7 +122,7 @@ div.course-wrapper { } ol.vert-mod { - > li { + > li { @extend .clearfix; @extend .problem-set; border-bottom: 1px solid #ddd; @@ -142,19 +142,19 @@ div.course-wrapper { section.course-index { width: flex-grid(.6); - div#open_close_accordion { - padding: 0; - - a { - background-image: url('/static/images/slide-right-icon.png'); - } - - h2 { - visibility: hidden; - width: 10px; + div#open_close_accordion { padding: 0; + + a { + background-image: url('/static/images/slide-right-icon.png'); + } + + h2 { + visibility: hidden; + width: 10px; + padding: 0; + } } - } div#accordion { visibility: hidden; From 7dad99844e703cc0236d6734896b232bbe8938c0 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 15 Feb 2012 11:56:13 -0500 Subject: [PATCH 48/75] added some style for the courseware headers --- sass/courseware/_courseware.scss | 5 +++++ sass/courseware/_sidebar.scss | 1 - 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/sass/courseware/_courseware.scss b/sass/courseware/_courseware.scss index 5876d67d5b..873844fd5b 100644 --- a/sass/courseware/_courseware.scss +++ b/sass/courseware/_courseware.scss @@ -12,6 +12,11 @@ div.course-wrapper { section.course-content { @extend .content; + h1 { + @extend .top-header; + background: none; + } + p { margin-bottom: lh(); diff --git a/sass/courseware/_sidebar.scss b/sass/courseware/_sidebar.scss index e3730cb3f2..b1a3975b48 100644 --- a/sass/courseware/_sidebar.scss +++ b/sass/courseware/_sidebar.scss @@ -22,7 +22,6 @@ section.course-index { right: -1px; border: 1px solid #D3D3D3; background: #eee url('/static/images/slide-left-icon.png') center center no-repeat; - @include box-shadow(inset 0 0 0 1px #fff); @include border-radius(3px 0 0 3px); &:hover { From e5a06c096b8f9a0000854c9c29fa62d5edcd66b2 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 15 Feb 2012 13:39:47 -0500 Subject: [PATCH 49/75] Fix some minor things in the courseware --- sass/courseware/_courseware.scss | 17 +++++++++++++++-- sass/courseware/_video.scss | 1 + 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/sass/courseware/_courseware.scss b/sass/courseware/_courseware.scss index 873844fd5b..9d7ab8123a 100644 --- a/sass/courseware/_courseware.scss +++ b/sass/courseware/_courseware.scss @@ -14,7 +14,6 @@ div.course-wrapper { h1 { @extend .top-header; - background: none; } p { @@ -26,6 +25,12 @@ div.course-wrapper { } } + ul { + li { + margin-bottom: lh(.5); + } + } + .problem-set { position: relative; @extend .clearfix; @@ -111,7 +116,6 @@ div.course-wrapper { } } - section.problems-wrapper, div#seq_content { @extend .problem-set; } @@ -126,6 +130,15 @@ div.course-wrapper { } } + div#seq_content { + h1 { + background: none; + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; + } + } + ol.vert-mod { > li { @extend .clearfix; diff --git a/sass/courseware/_video.scss b/sass/courseware/_video.scss index 45e7777399..264bcc953d 100644 --- a/sass/courseware/_video.scss +++ b/sass/courseware/_video.scss @@ -88,6 +88,7 @@ section.course-content { li { float: left; + margin-bottom: 0; a { @include box-shadow(1px 0 0 #555); From f155d26b5ef7b3c0e705895028bedbc3f6dd8711 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 15 Feb 2012 14:12:33 -0500 Subject: [PATCH 50/75] Started some redesign --HG-- branch : templates-ky-new-nav --- sass/layout/_header.scss | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/sass/layout/_header.scss b/sass/layout/_header.scss index 144194e397..b1d56fe905 100644 --- a/sass/layout/_header.scss +++ b/sass/layout/_header.scss @@ -28,10 +28,11 @@ div.header-wrapper { h2 { @include inline-block(); - margin: 0 lh() 0 0; + margin: 0; padding: 19px lh() 9px 0; line-height: lh(); - border-right: 1px solid darken($mit-red, 5%); + text-transform: none; + letter-spacing: 0; -webkit-font-smoothing: antialiased; a { @@ -73,16 +74,16 @@ div.header-wrapper { text-shadow: 0 -1px 0 darken($mit-red, 10%); max-height: 52px; //fix for firefox -webkit-font-smoothing: antialiased; - + background: #501016; + margin-top: 10px; + @include border-radius(3px 3px 0 0); ul { @extend .clearfix; display: inline-block; - padding: 19px 0 9px; margin: 0; li { - margin-right: lh(); display: inline-block; margin-bottom: 0; line-height: lh(); @@ -90,6 +91,9 @@ div.header-wrapper { a { color: #fff; text-decoration: none; + padding: 12px lh() 6px; + display: block; + font-weight: bold; &:hover { color: rgba(#fff, .7); From 940fe75262aaaa0cf3cd99a7f55949ebb1505c86 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 15 Feb 2012 14:16:01 -0500 Subject: [PATCH 51/75] Fix close sidebar in firefox --- sass/courseware/_sidebar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sass/courseware/_sidebar.scss b/sass/courseware/_sidebar.scss index b1a3975b48..3f937433f2 100644 --- a/sass/courseware/_sidebar.scss +++ b/sass/courseware/_sidebar.scss @@ -1,12 +1,12 @@ section.course-index { @extend .sidebar; - position: relative; @extend .tran; div#open_close_accordion { @include box-shadow(0 1px 0 #eee); border-bottom: 1px solid #d3d3d3; padding: 0 lh(); + position: relative; h2 { padding-right: 20px; @@ -18,7 +18,7 @@ section.course-index { height: 16px; position: absolute; padding: 8px; - top: 12px; + top: -12px; right: -1px; border: 1px solid #D3D3D3; background: #eee url('/static/images/slide-left-icon.png') center center no-repeat; From 1921bd01baa28b24c9dd218cfb810311658547db Mon Sep 17 00:00:00 2001 From: Bridger Maxwell Date: Wed, 15 Feb 2012 14:20:26 -0500 Subject: [PATCH 52/75] Started implementing exit confirmation on wiki edit page. NOT WORKING YET --HG-- branch : bridger-dev --- simplewiki_edit.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/simplewiki_edit.html b/simplewiki_edit.html index 7d7a9c6bb8..0fb28f8d6e 100644 --- a/simplewiki_edit.html +++ b/simplewiki_edit.html @@ -8,6 +8,23 @@ ${ wiki_article.title } +<%block name="wiki_head"> + + + + <%block name="wiki_body">
    From 6afac1d03390b71bc0b7568c681a0f7ba9ba7230 Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Wed, 15 Feb 2012 15:08:16 -0500 Subject: [PATCH 53/75] Updated FAQ --- 6002x-faq.html | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/6002x-faq.html b/6002x-faq.html index c33cb5e966..3777d8f332 100644 --- a/6002x-faq.html +++ b/6002x-faq.html @@ -18,6 +18,53 @@ This set of questions and answers accompanies MIT’s February 13, 6.002x: Circuits and Electronics.

    +

    I tried to register for the course, but it says the username +is already taken.

    + +

    The system only allows each username to be used once. Probably, +someone else already signed up with that username. Try a different, +more unique username. For example, try adding a random number to the +end.

    + +

    I am interested in a different subject. What other courses do +you offer?

    + +

    6.002x is the pilot course for MITx. While we plan to offer a +range of courses in the future, at present, 6.002x is the only course +available.

    + +

    How will I know that the course has started?

    + +

    The course will start on March 5. Check the website +mitx.mit.edu as the date approaches. A login button will appear on +the course website 6.002x.mitx.mit.edu on or slightly before March 5 +so you can login, begin to get familiar with the site and start the +course.

    + +

    Why is there no log-in button?

    + +

    You will not be able to log into the course until either the +starting date, or shortly before.

    + +

    Does the class have a schedule?

    + +

    The lectures are on-line videos, and may be watched at your own +pace and schedule. The course will have fixed deadlines for homework +assignments and exams.

    + +

    I just enrolled for the course. I have not received any form +of acknowledgement that I have enrolled.

    + +

    You should receive a single activation e-mail. If you did not, +check your spam folder, or try to register again with your correct +e-mail address and a new username (most errors are from typos in +e-mail addresses).

    + +

    How do I drop the course?

    + +

    You do not have to do anything. You can simply stop working on the +course at any time you choose to do so.

    +

    What is MITx?

    From c9f83519ed1823928dcdac6c13dda74d3101361e Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Wed, 15 Feb 2012 15:18:04 -0500 Subject: [PATCH 54/75] Activation e-mail --- activation_email.txt | 3 ++- mitx_help.html | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/activation_email.txt b/activation_email.txt index 0bd636428c..21a09335c7 100644 --- a/activation_email.txt +++ b/activation_email.txt @@ -6,4 +6,5 @@ into your web browser's address bar: http://${ site }/activate/${ key } If you didn't request this, you don't need to do anything; you won't -receive any more email from us. +receive any more email from us. Please do not reply to this e-mail; if +you require assistance, check the help section of the MITx web site. diff --git a/mitx_help.html b/mitx_help.html index ab0c28a23e..0be0e5e891 100644 --- a/mitx_help.html +++ b/mitx_help.html @@ -5,7 +5,9 @@

    Help & Feedback

    If run into problems signing up for the web site which you - cannot resolve on your own, you can reach us at:

    + cannot resolve on your own, please check + the Frequently + Asked Questions. you can reach us at:

    System-related questions
    technical@mitx.mit.edu
    From e6e608d8feaf248dcf0adaf2ea5f6f1ab2a44b61 Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Wed, 15 Feb 2012 15:20:00 -0500 Subject: [PATCH 55/75] MITx help --- mitx_help.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/mitx_help.html b/mitx_help.html index 0be0e5e891..a9ec20eb44 100644 --- a/mitx_help.html +++ b/mitx_help.html @@ -7,7 +7,8 @@

    If run into problems signing up for the web site which you cannot resolve on your own, please check the Frequently - Asked Questions. you can reach us at:

    + Asked Questions. If you find a bug or other issues, you can + reach us at:

    System-related questions
    technical@mitx.mit.edu
    From 4b419b6fca41e2eaa950d9744031e6e8e28d53c4 Mon Sep 17 00:00:00 2001 From: kaishin Date: Wed, 15 Feb 2012 17:25:18 -0500 Subject: [PATCH 56/75] Redesigned the sidebar in the question list view --- sass/base/_extends.scss | 6 + sass/discussion/_askbot-original.scss | 354 +++++++++++++------------- sass/discussion/_questions.scss | 24 -- sass/discussion/_sidebar.scss | 84 +++++- sass/discussion/_tags.scss | 50 +++- 5 files changed, 309 insertions(+), 209 deletions(-) diff --git a/sass/base/_extends.scss b/sass/base/_extends.scss index 93ef00dd3f..c482b947e6 100644 --- a/sass/base/_extends.scss +++ b/sass/base/_extends.scss @@ -36,6 +36,8 @@ h1.top-header { font: bold $body-font-size $body-font-family; cursor: pointer; -webkit-font-smoothing: antialiased; + text-shadow: none; + text-decoration: none; &:hover, &:focus { @include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc); @@ -107,6 +109,10 @@ h1.top-header { } } } + + a.button { + text-decoration: none; + } } .topbar { diff --git a/sass/discussion/_askbot-original.scss b/sass/discussion/_askbot-original.scss index 811be0496c..304c616507 100644 --- a/sass/discussion/_askbot-original.scss +++ b/sass/discussion/_askbot-original.scss @@ -396,27 +396,27 @@ body.anon #searchBar { text-align: right; margin: 0; } } h2 { - padding-left: 0; - /*background: #eceeeb;*/ - height: 30px; - line-height: 30px; - /*text-align: right;*/ - /*font-size: 18px !important;*/ - font-weight: normal; - color: #656565; - /*padding-right: 10px;*/ - /*margin-bottom: 10px;*/ - /*font-family: 'Yanone Kaffeesatz',sans-serif;*/ + // padding-left: 0; + // /*background: #eceeeb;*/ + // height: 30px; + // line-height: 30px; + // /*text-align: right;*/ + // /*font-size: 18px !important;*/ + // // font-weight: normal; + // // color: #656565; + // /*padding-right: 10px;*/ + // /*margin-bottom: 10px;*/ + // /*font-family: 'Yanone Kaffeesatz',sans-serif;*/ } - h3 { - /*color: #4a757f;*/ - /*font-size: 18px;*/ - text-align: left; - font-weight: normal; - /*font-family: 'Yanone Kaffeesatz',sans-serif;*/ - padding-left: 0px; } - .contributorback { - background: #eceeeb url(../images/contributorsback.png) no-repeat center left; } + // h3 { + // /*color: #4a757f;*/ + // /*font-size: 18px;*/ + // text-align: left; + // font-weight: normal; + // /*font-family: 'Yanone Kaffeesatz',sans-serif;*/ + // padding-left: 0px; } + // .contributorback { + // background: #eceeeb url(../images/contributorsback.png) no-repeat center left; } // label { // color: #707070; // font-size: 15px; @@ -428,23 +428,23 @@ body.anon #searchBar { // margin-right: 18px; } // #displayTagFilterControl label { // width: 160px; } - ul { - margin-left: 22px; } - li { - list-style-type: disc; - font-size: 13px; - line-height: 20px; - margin-bottom: 10px; - color: #707070; } - ul.tags { - list-style: none; - margin: 0; - padding: 0; - line-height: 170%; - display: block; } - #displayTagFilterControl p label { - color: #707070; - font-size: 15px; } + // ul { + // margin-left: 22px; } + // li { + // list-style-type: disc; + // font-size: 13px; + // line-height: 20px; + // margin-bottom: 10px; + // color: #707070; } + // ul.tags { + // list-style: none; + // margin: 0; + // padding: 0; + // line-height: 170%; + // display: block; } + // #displayTagFilterControl p label { + // color: #707070; + // font-size: 15px; } /*.inputs { #interestingTagInput, #ignoredTagInput { width: 153px; @@ -474,47 +474,47 @@ body.anon #searchBar { box-shadow: 1px 1px 2px #808080; } #interestingTagAdd:hover, #ignoredTagAdd:hover { background: url(../images/small-button-blue.png) repeat-x bottom; } }*/ - img.gravatar { - margin: 1px; } - a { - &.followed, &.follow { - background: url(../images/medium-button.png) top repeat-x; - height: 34px; - line-height: 34px; - text-align: center; - border: 0; - font-family: 'Yanone Kaffeesatz',sans-serif; - color: #4a757f; - font-weight: normal; - font-size: 21px; - margin-top: 3px; - display: block; - width: 120px; - text-decoration: none; - border-radius: 4px; - -ms-border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - -webkit-box-shadow: 1px 1px 2px #636363; - -moz-box-shadow: 1px 1px 2px #636363; - box-shadow: 1px 1px 2px #636363; - margin: 0 auto; - padding: 0; } - &.followed:hover, &.follow:hover { - text-decoration: none; - background: url(../images/medium-button.png) bottom repeat-x; - text-shadow: 0px 1px 0px #c6d9dd; - -moz-text-shadow: 0px 1px 0px #c6d9dd; - -webkit-text-shadow: 0px 1px 0px #c6d9dd; } - &.followed { - div.unfollow { - display: none; } - &:hover div { - display: none; - &.unfollow { - display: inline; - color: #a05736; } } } } + // img.gravatar { + // margin: 1px; } + // a { + // &.followed, &.follow { + // background: url(../images/medium-button.png) top repeat-x; + // height: 34px; + // line-height: 34px; + // text-align: center; + // border: 0; + // font-family: 'Yanone Kaffeesatz',sans-serif; + // color: #4a757f; + // font-weight: normal; + // font-size: 21px; + // margin-top: 3px; + // display: block; + // width: 120px; + // text-decoration: none; + // border-radius: 4px; + // -ms-border-radius: 4px; + // -moz-border-radius: 4px; + // -webkit-border-radius: 4px; + // -khtml-border-radius: 4px; + // -webkit-box-shadow: 1px 1px 2px #636363; + // -moz-box-shadow: 1px 1px 2px #636363; + // box-shadow: 1px 1px 2px #636363; + // margin: 0 auto; + // padding: 0; } + // &.followed:hover, &.follow:hover { + // text-decoration: none; + // background: url(../images/medium-button.png) bottom repeat-x; + // text-shadow: 0px 1px 0px #c6d9dd; + // -moz-text-shadow: 0px 1px 0px #c6d9dd; + // -webkit-text-shadow: 0px 1px 0px #c6d9dd; } + // &.followed { + // div.unfollow { + // display: none; } + // &:hover div { + // display: none; + // &.unfollow { + // display: inline; + // color: #a05736; } } } } .favorite-number { padding: 5px 0 0 5px; font-size: 100%; @@ -839,35 +839,35 @@ body.anon #searchBar { .paginator-container-left { padding: 5px 0 10px 0; } } -.tag-size-1 { - font-size: 12px; } +// .tag-size-1 { +// font-size: 12px; } -.tag-size-2 { - font-size: 13px; } +// .tag-size-2 { +// font-size: 13px; } -.tag-size-3 { - font-size: 14px; } +// .tag-size-3 { +// font-size: 14px; } -.tag-size-4 { - font-size: 15px; } +// .tag-size-4 { +// font-size: 15px; } -.tag-size-5 { - font-size: 16px; } +// .tag-size-5 { +// font-size: 16px; } -.tag-size-6 { - font-size: 17px; } +// .tag-size-6 { +// font-size: 17px; } -.tag-size-7 { - font-size: 18px; } +// .tag-size-7 { +// font-size: 18px; } -.tag-size-8 { - font-size: 19px; } +// .tag-size-8 { +// font-size: 19px; } -.tag-size-9 { - font-size: 20px; } +// .tag-size-9 { +// font-size: 20px; } -.tag-size-10 { - font-size: 21px; } +// .tag-size-10 { +// font-size: 21px; } // ul { // &.tags { @@ -895,29 +895,29 @@ body.anon #searchBar { // padding: 0; // height: 20px; } } -.wildcard-tags { - clear: both; } +// .wildcard-tags { +// clear: both; } -ul.tags.marked-tags li, .wildcard-tags ul.tags li { - margin-bottom: 5px; } +// ul.tags.marked-tags li, .wildcard-tags ul.tags li { +// margin-bottom: 5px; } -#tagSelector div.inputs { - clear: both; - float: none; - margin-bottom: 10px; } +// #tagSelector div.inputs { +// clear: both; +// float: none; +// margin-bottom: 10px; } -.tags-page ul.tags li { - width: 160px; - margin: 5px; } +// .tags-page ul.tags li { +// width: 160px; +// margin: 5px; } -ul { - &#ab-user-tags li { - width: 160px; - margin: 5px; } - &#related-tags li { - margin: 0 5px 8px 0; - float: left; - clear: left; } } +// ul { +// &#ab-user-tags li { +// width: 160px; +// margin: 5px; } +// &#related-tags li { +// margin: 0 5px 8px 0; +// float: left; +// clear: left; } } // .tag-left { // cursor: pointer; @@ -949,28 +949,28 @@ ul { // font-family: Arial; // color: #717179; } -.deletable-tag { - margin-right: 3px; - white-space: nowrap; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - -moz-border-radius-topright: 4px; - -moz-border-radius-bottomright: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-top-right-radius: 4px; } +// .deletable-tag { +// margin-right: 3px; +// white-space: nowrap; +// border-top-right-radius: 4px; +// border-bottom-right-radius: 4px; +// -moz-border-radius-topright: 4px; +// -moz-border-radius-bottomright: 4px; +// -webkit-border-bottom-right-radius: 4px; +// -webkit-border-top-right-radius: 4px; } -.tags { - a.tag-right, span.tag-right { - color: #585858; - text-decoration: none; } - a:hover { - color: #1A1A1A; } } +// .tags { +// a.tag-right, span.tag-right { +// color: #585858; +// text-decoration: none; } +// a:hover { +// color: #1A1A1A; } } -.users-page h1, .tags-page h1 { - float: left; } +// .users-page h1, .tags-page h1 { +// float: left; } -.main-page h1 { - margin-right: 5px; } +// .main-page h1 { +// margin-right: 5px; } // .delete-icon { // margin-top: -1px; @@ -997,22 +997,22 @@ ul { // &:hover { // background: #b32f2f; } } -.tag-number { - font-weight: normal; - float: left; - font-size: 16px; - color: #5d5d5d; } +// .tag-number { +// font-weight: normal; +// float: left; +// font-size: 16px; +// color: #5d5d5d; } -.badges .tag-number { - float: none; - display: inline; - padding-right: 15px; } +// .badges .tag-number { +// float: none; +// display: inline; +// padding-right: 15px; } -.section-title { - color: #7ea9b3; - font-family: 'Yanone Kaffeesatz',sans-serif; - font-weight: bold; - font-size: 24px; } +// .section-title { +// color: #7ea9b3; +// font-family: 'Yanone Kaffeesatz',sans-serif; +// font-weight: bold; +// font-size: 24px; } // #fmask { // margin-bottom: 30px; @@ -1841,9 +1841,9 @@ ul { margin-right: 4px; display: inline; } } -.tabBar-tags { - width: 270px; - margin-bottom: 15px; } +// .tabBar-tags { +// width: 270px; +// margin-bottom: 15px; } a { &.medal { @@ -2100,10 +2100,10 @@ a { font-weight: bold; font-family: sans-serif; } } -del { - color: #C34719; - .post-tag { - color: #C34719; } } +// del { +// color: #C34719; +// .post-tag { +// color: #C34719; } } ins { .post-tag, p { @@ -2274,8 +2274,8 @@ label.retag-error { font-weight: bold; text-decoration: none; } -.narrow .tags { - float: left; } +// .narrow .tags { +// float: left; } .user-action-1 { font-weight: bold; @@ -2518,25 +2518,25 @@ ul.form-horizontal-rows { font-weight: bold; vertical-align: top; } -ul { - &.post-tags { - margin-left: 3px; - li { - margin-top: 4px; - margin-bottom: 3px; } } - &.post-retag { - margin-bottom: 0px; - margin-left: 5px; } } +// ul { +// &.post-tags { +// margin-left: 3px; +// li { +// margin-top: 4px; +// margin-bottom: 3px; } } +// &.post-retag { +// margin-bottom: 0px; +// margin-left: 5px; } } -#question-controls .tags { - margin: 0 0 3px 0; } +// #question-controls .tags { +// margin: 0 0 3px 0; } -#tagSelector { - padding-bottom: 2px; - margin-bottom: 0; } +// #tagSelector { +// padding-bottom: 2px; +// margin-bottom: 0; } -#related-tags { - padding-left: 3px; } +// #related-tags { +// padding-left: 3px; } #hideIgnoredTagsControl { margin: 5px 0 0 0; @@ -2666,8 +2666,8 @@ a.edit { .pln { color: #000; } -.tag { - color: #008; } +// .tag { +// color: #008; } .atn { color: #606; } diff --git a/sass/discussion/_questions.scss b/sass/discussion/_questions.scss index 5a2780853c..526d03a98d 100644 --- a/sass/discussion/_questions.scss +++ b/sass/discussion/_questions.scss @@ -72,30 +72,6 @@ div.question-list-header { div.tags-list { - ul.tags { - display: inline; - - li { - span.delete-icon, div.delete-icon { - @include border-radius(0 4px 4px 0); - background: #555; - color: #eee; - cursor: pointer; - float: none; - display: inline; - clear: none; - left: 10px; - padding: 3px 6px; - position: relative; - top: 1px; - opacity: 0.5; - - &:hover { - opacity: 1; - } - } - } - } } } } diff --git a/sass/discussion/_sidebar.scss b/sass/discussion/_sidebar.scss index faa30d71a0..2e1e46426a 100644 --- a/sass/discussion/_sidebar.scss +++ b/sass/discussion/_sidebar.scss @@ -1,3 +1,4 @@ + div.discussion-wrapper aside { @extend .sidebar; @include box-shadow(inset 1px 0 0 #f6f6f6); @@ -7,8 +8,13 @@ div.discussion-wrapper aside { padding: lh(); width: flex-grid(3); + h2 { - font-size: 16px; + color: #4D4D4D; + + &.first { + margin-top: 0px; + } } h3 { @@ -20,14 +26,60 @@ div.discussion-wrapper aside { width: 76%; } + div.box { + @include box-shadow(0 1px 0 #eee); + border-bottom: 1px solid #d3d3d3; + display: block; + padding-bottom: 20px; + overflow: hidden; + + &:last-child { + @include box-shadow(none); + border: 0; + } + + &.contributors { + + a { + @include border-radius(3px); + border: 1px solid #888; + cursor: pointer; + display: inline-block; + margin-right: 6px; + position: relative; + + &:before { + @include border-radius(3px); + @include box-shadow(inset 0 0 1px 1px rgba(255,255,255,.4)); + top: 1px; left: 1px; bottom: 1px; right: 1px; + content: ''; + position: absolute; + } + + } + img.gravatar { + @include border-radius(3px); + } + } + + &.tag-selector { + ul { + margin-bottom: 10px; + display: block; + } + } + } + #displayTagFilterControl { margin-top: 10px; } div.search-box { input { + @include box-sizing(border-box); display: inline; } + input[type='submit'] { @include box-shadow(none); opacity: 0.5; @@ -49,7 +101,37 @@ div.discussion-wrapper aside { input#keywords { padding-left: 30px; + padding-right: 30px; + width: 100%; + } + + input#clear { + @include box-shadow(none); + @include border-radius(5px); + border: none; + background: $mit-red; + color: #fff; + display: inline; + font-size: 10px; + margin-left: -25px; + padding: 2px 5px; + } + } + + // Question view sopecific + + div.follow-buttons { + margin: 20px 0; + display: block; + + a.button { + @include box-sizing(border-box); + display: block; + text-align: center; + width: 100%; } } } + + diff --git a/sass/discussion/_tags.scss b/sass/discussion/_tags.scss index 8dcbb2446e..a1b11625c0 100644 --- a/sass/discussion/_tags.scss +++ b/sass/discussion/_tags.scss @@ -1,5 +1,6 @@ ul.tags { list-style: none; + display: inline; li, a { position: relative; } @@ -7,21 +8,56 @@ ul.tags { @include border-radius(4px); background: #eee; color: #555; - display: inline; + display: inline-block; font-size: 12px; margin-left: 15px; padding: 3px 10px 5px 5px; + margin-bottom: 5px; &:before { - content:""; - position:absolute; - top:0; - left:-11px; - width:0; - height:0; border-color:transparent #eee transparent transparent; border-style:solid; border-width:12px 12px 12px 0; + content:""; + height:0; + left:-11px; + position:absolute; + top:0; + width:0; + } + + span.delete-icon, div.delete-icon { + @include border-radius(0 4px 4px 0); + background: #555; + clear: none; + color: #eee; + cursor: pointer; + display: inline; + float: none; + left: 10px; + opacity: 0.5; + padding: 3px 6px; + position: relative; + top: 1px; + + &:hover { + opacity: 1; + } + } + + a { + color: #555; + text-decoration: none; } } } + +span.tag-number { + @include border-radius(3px); + background: #555; + font-size: 10px; + margin: 0 3px; + padding: 2px 5px; + color: #eee; + opacity: 0.5; +} From 437f6ea2b1c86943ef7b35e25e740b37cae4eeb8 Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Wed, 15 Feb 2012 20:10:19 -0500 Subject: [PATCH 57/75] FAQ update --- 6002x-faq.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/6002x-faq.html b/6002x-faq.html index 3777d8f332..ccbe473b4e 100644 --- a/6002x-faq.html +++ b/6002x-faq.html @@ -65,6 +65,17 @@ e-mail addresses).

    You do not have to do anything. You can simply stop working on the course at any time you choose to do so.

    +

    What happens if I drop the course?

    + +

    For the prototype course, learners achieving grades of "A," "B," +or "C" will receive an electronic Certificate of completion with the +learner's name and grade on it. If you receive a grade below a "C" or +do not complete the course, you will not receive a Certificate and no +grade record attaching your name to your participation in the class +will be disclosed outside of MITx. You can also choose to opt for a +no record at any time. However, the posts you make while enrolled in +the class will remain visible.

    +

    What is MITx?

    From d0cd1f5e74e4be83e76fdd3545da2253421a24e7 Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Wed, 15 Feb 2012 21:36:09 -0500 Subject: [PATCH 58/75] New TOS --- tos.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/tos.html b/tos.html index 42bab7a235..c76dd13143 100644 --- a/tos.html +++ b/tos.html @@ -78,9 +78,7 @@ intent of misleading others.
  • You, furthermore, agree not to scrape, or otherwise download in bulk, user-contributed content, a list or directory of users on the system, or other material including but not limited to on-line -textbooks, User Postings, or user information. You agree not to store -more than 5 pages of the electronic textbook or 5 forum posts in any -permanent medium (hard drive, optical disk, etc., flash drive, etc.). +textbooks, User Postings, or user information. You agree to not misrepresent or attempt to misrepresent your identity while using the Sites (although you are welcome and encouraged to use an anonymous username in the forums). @@ -302,6 +300,6 @@ consent to the personal jurisdiction of and exclusive venue in the federal and state courts located in and serving Boston, Massachusetts as the legal forum for any such dispute.

    -

    Effective Date: February 10, 2012

    +

    Effective Date: February 20, 2012

    • From 44a5c6957539227ef5a2e40c6eb2c413cbe492b5 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 16 Feb 2012 09:55:51 -0500 Subject: [PATCH 59/75] Added more style for main navigation --HG-- branch : templates-ky-new-nav --- .DS_Store | Bin 12292 -> 12292 bytes navigation.html | 1 - sass/layout/_header.scss | 88 ++++++++++++++++++++++++++++++++------- sass/layout/_layout.scss | 8 ++-- 4 files changed, 77 insertions(+), 20 deletions(-) diff --git a/.DS_Store b/.DS_Store index a511c81699e614c17125778724b428fc9f3b0606..6e5576ca7e10e372339d2e21808290a0c9a489b0 100644 GIT binary patch delta 82 zcmZokXi3;`Sb%Z;=E3MK}owY8j_9Gn7AI7F57 mY&=2|YijH28zu(|$}=`?E)<-?wwYbx8w*o@-sZnDtik{(m>F;Y delta 106 zcmZokXi3;`Sb%ZuU}S{Q47^YpMm20M7M#MinN{Kk%jW+wtintT3;?T^7cT$+ diff --git a/navigation.html b/navigation.html index 3b4b50d314..bba364d18b 100644 --- a/navigation.html +++ b/navigation.html @@ -7,7 +7,6 @@ - +
    From 3ef3c055af3357688988ba09259683c115f73070 Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Sun, 19 Feb 2012 10:39:18 -0500 Subject: [PATCH 74/75] Profile page fixed --- profile_graphs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/profile_graphs.js b/profile_graphs.js index 073f3cda2e..502c3c1469 100644 --- a/profile_graphs.js +++ b/profile_graphs.js @@ -127,7 +127,7 @@ $(function () { var plot = $.plot($grade_detail_graph, series, options); var o = plot.pointOffset({x: ${overviewBarX} , y: ${totalScore}}); - $grade_detail_graph.append('
    ${"{:.0%}".format(totalScore)}
    '); + $grade_detail_graph.append('
    ${"{totalscore:.0%}".format(totalscore=totalScore)}
    '); // //Rotate the x-axis labels // var rotateValue = "rotate(-60deg)"; From 0807cf81607fba6f461578bda243cb96de1076d1 Mon Sep 17 00:00:00 2001 From: Piotr Mitros Date: Sun, 19 Feb 2012 14:03:12 -0500 Subject: [PATCH 75/75] Updated FAQ --- 6002x-faq.html | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/6002x-faq.html b/6002x-faq.html index ccbe473b4e..475e0312c8 100644 --- a/6002x-faq.html +++ b/6002x-faq.html @@ -55,10 +55,19 @@ assignments and exams.

    I just enrolled for the course. I have not received any form of acknowledgement that I have enrolled.

    -

    You should receive a single activation e-mail. If you did not, -check your spam folder, or try to register again with your correct -e-mail address and a new username (most errors are from typos in -e-mail addresses).

    +

    You should receive a single activation e-mail. If you did not, the +most common issues are: +

      +
    • Typo in e-mail address +
    • Old browser. We recommend trying a modern version of Firefox or Chrome +
    • JavaScript disabled +
    • Activation e-mail in spam folder. Check spam folder. +
    • Non-unique username. Try adding a random string at the end. +
    + +

    If you run into issues, try recreating your account. There is no need +to do anything about the old account, if any. If it is not activated +through the link in the e-mail, it will disappear later.

    How do I drop the course?