From 5f7d25587f0a94c6907a6932397148e63b98d1fe Mon Sep 17 00:00:00 2001 From: Ernie Park Date: Wed, 1 Feb 2012 14:05:12 -0500 Subject: [PATCH 01/26] 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/26] 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/26] 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/26] 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/26] 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 +
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 14/26] 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 15/26] 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 16/26] 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 17/26] 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 18/26] 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 19/26] 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 20/26] 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 21/26] 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 22/26] 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 23/26] 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 24/26] 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 25/26] 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 940fe75262aaaa0cf3cd99a7f55949ebb1505c86 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 15 Feb 2012 14:16:01 -0500 Subject: [PATCH 26/26] 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;