diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000..5008ddfcf5 Binary files /dev/null and b/.DS_Store differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_animation.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_animation.scssc new file mode 100644 index 0000000000..9f65b466b7 Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_animation.scssc differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_appearance.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_appearance.scssc new file mode 100644 index 0000000000..38daf2542d Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_appearance.scssc differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_background-image.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_background-image.scssc new file mode 100644 index 0000000000..1b0135a461 Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_background-image.scssc differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_background-size.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_background-size.scssc new file mode 100644 index 0000000000..2af3d7fb06 Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_background-size.scssc differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_border-image.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_border-image.scssc new file mode 100644 index 0000000000..6c705696e7 Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_border-image.scssc differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_border-radius.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_border-radius.scssc new file mode 100644 index 0000000000..706de53362 Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_border-radius.scssc differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_box-shadow.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_box-shadow.scssc new file mode 100644 index 0000000000..388875d07f Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_box-shadow.scssc differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_box-sizing.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_box-sizing.scssc new file mode 100644 index 0000000000..c0e6f6ad4e Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_box-sizing.scssc differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_columns.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_columns.scssc new file mode 100644 index 0000000000..2e55fc5dc0 Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_columns.scssc differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_flex-box.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_flex-box.scssc new file mode 100644 index 0000000000..15a62362ed Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_flex-box.scssc differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_inline-block.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_inline-block.scssc new file mode 100644 index 0000000000..16ccd57e69 Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_inline-block.scssc differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_linear-gradient.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_linear-gradient.scssc new file mode 100644 index 0000000000..5f02a42ad0 Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_linear-gradient.scssc differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_radial-gradient.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_radial-gradient.scssc new file mode 100644 index 0000000000..8e5b5c49d4 Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_radial-gradient.scssc differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_transform.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_transform.scssc new file mode 100644 index 0000000000..212fe947c2 Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_transform.scssc differ diff --git a/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_transition.scssc b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_transition.scssc new file mode 100644 index 0000000000..77089fc94a Binary files /dev/null and b/.sass-cache/3880f4eb5d804120948cf97cf33cca286b65912d/_transition.scssc differ diff --git a/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_deprecated-webkit-gradient.scssc b/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_deprecated-webkit-gradient.scssc new file mode 100644 index 0000000000..e1a3ebf05e Binary files /dev/null and b/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_deprecated-webkit-gradient.scssc differ diff --git a/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_golden-ratio.scssc b/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_golden-ratio.scssc new file mode 100644 index 0000000000..6757862678 Binary files /dev/null and b/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_golden-ratio.scssc differ diff --git a/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_grid-width.scssc b/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_grid-width.scssc new file mode 100644 index 0000000000..7bd3fc7559 Binary files /dev/null and b/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_grid-width.scssc differ diff --git a/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_linear-gradient.scssc b/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_linear-gradient.scssc new file mode 100644 index 0000000000..04a533e659 Binary files /dev/null and b/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_linear-gradient.scssc differ diff --git a/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_radial-gradient.scssc b/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_radial-gradient.scssc new file mode 100644 index 0000000000..65b7f66025 Binary files /dev/null and b/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_radial-gradient.scssc differ diff --git a/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_tint-shade.scssc b/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_tint-shade.scssc new file mode 100644 index 0000000000..b8e9ef83e4 Binary files /dev/null and b/.sass-cache/39942612fcff3338e5188be4e77119bcd3d1e55d/_tint-shade.scssc differ diff --git a/.sass-cache/454319bd2251634ce4a0d8035ab87ff9a089ca51/_bourbon.scssc b/.sass-cache/454319bd2251634ce4a0d8035ab87ff9a089ca51/_bourbon.scssc new file mode 100644 index 0000000000..68ac906368 Binary files /dev/null and b/.sass-cache/454319bd2251634ce4a0d8035ab87ff9a089ca51/_bourbon.scssc differ diff --git a/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_button.scssc b/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_button.scssc new file mode 100644 index 0000000000..39b26791ea Binary files /dev/null and b/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_button.scssc differ diff --git a/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_font-family.scssc b/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_font-family.scssc new file mode 100644 index 0000000000..edcb905e91 Binary files /dev/null and b/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_font-family.scssc differ diff --git a/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_html5-input-types.scssc b/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_html5-input-types.scssc new file mode 100644 index 0000000000..69d95d8f0d Binary files /dev/null and b/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_html5-input-types.scssc differ diff --git a/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_position.scssc b/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_position.scssc new file mode 100644 index 0000000000..621868f1f6 Binary files /dev/null and b/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_position.scssc differ diff --git a/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_timing-functions.scssc b/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_timing-functions.scssc new file mode 100644 index 0000000000..1b8042621c Binary files /dev/null and b/.sass-cache/84004ce618e571a697a1850fe7ac090ae72a9c1d/_timing-functions.scssc differ diff --git a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-extends.scssc b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-extends.scssc new file mode 100644 index 0000000000..afb485eab7 Binary files /dev/null and b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-extends.scssc differ diff --git a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-variables.scssc b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-variables.scssc new file mode 100644 index 0000000000..c38fc42be1 Binary files /dev/null and b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-variables.scssc differ diff --git a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_layout.scssc b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_layout.scssc new file mode 100644 index 0000000000..fca0e18273 Binary files /dev/null and b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_layout.scssc differ diff --git a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_local.scssc b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_local.scssc new file mode 100644 index 0000000000..ff1f29cf58 Binary files /dev/null and b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_local.scssc differ diff --git a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_reset.scssc b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_reset.scssc new file mode 100644 index 0000000000..38bc887589 Binary files /dev/null and b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_reset.scssc differ diff --git a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_theme.scssc b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_theme.scssc new file mode 100644 index 0000000000..9e07958d19 Binary files /dev/null and b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_theme.scssc differ diff --git a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/application.scssc b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/application.scssc new file mode 100644 index 0000000000..f4648a5b2b Binary files /dev/null and b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/application.scssc differ diff --git a/main.html b/main.html index 0d76ac66f1..6020dda4fd 100644 --- a/main.html +++ b/main.html @@ -4,8 +4,7 @@ MITX 6.002 - - + diff --git a/navigation.html b/navigation.html index 71d337f0f4..f6948267cb 100644 --- a/navigation.html +++ b/navigation.html @@ -1,11 +1,15 @@ - +
+

Circuits and Electronics

+ + +
diff --git a/sass/.DS_Store b/sass/.DS_Store new file mode 100644 index 0000000000..293c0b03ea Binary files /dev/null and b/sass/.DS_Store differ diff --git a/sass/_base-extends.scss b/sass/_base-extends.scss new file mode 100644 index 0000000000..d714ee6ea7 --- /dev/null +++ b/sass/_base-extends.scss @@ -0,0 +1,8 @@ +.clearfix:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + diff --git a/sass/_base-variables.scss b/sass/_base-variables.scss new file mode 100644 index 0000000000..36f083bfe6 --- /dev/null +++ b/sass/_base-variables.scss @@ -0,0 +1,32 @@ +// Percentage of container calculator +@function perc($width, $container-width: $max-width) { + @return percentage($width / $container-width); +} + +// Line-height +@function lh($amount: 1) { + @return $base-line-height * $amount; +} + +@mixin border-box { + @include box-sizing(border-box); +} + + +// Variables +// ---------------------------------------- // + +// fonts +$body-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;; +$body-font-size: 14px; + +// grid +$columns: 12; +$column-width: golden-ratio($body-font-size, 3); +$gutter-width: golden-ratio($body-font-size, 1); +$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width); + +$gw-column: perc($column-width); +$gw-gutter: perc($gutter-width); +$base-line-height: golden-ratio($body-font-size, 1); + diff --git a/sass/_layout.scss b/sass/_layout.scss new file mode 100644 index 0000000000..7bf17e6106 --- /dev/null +++ b/sass/_layout.scss @@ -0,0 +1,34 @@ +html { + text-align: center; + margin: 0 $gw-gutter; + + body { + text-align: left; + width: grid-width(12); + margin: 0 auto; + font: $body-font-size $body-font-family; + max-width: $max-width; + + header { + @extend .clearfix; + + h1 { + float: left; + font-weight: bold; + } + + nav { + float: right; + + ul { + @extend .clearfix; + + li { + float: left; + margin-right: $gw-gutter; + } + } + } + } + } +} diff --git a/sass/_local.scss b/sass/_local.scss new file mode 100644 index 0000000000..7da2a7af07 --- /dev/null +++ b/sass/_local.scss @@ -0,0 +1,41 @@ +#hide_acc { + min-height:600; +} + +#mainblock { + border: 0; + padding: 0; + margin: 0; + width: 200; + min-height:600px; + margin-left: 276px; + margin-right: 0px; +} + +#bodyContent { + width: 100%; +} + +.bordered { border: 1px solid #AAAAAA; border-style : dotted; } + +.seq_problem_visited { background-color: #ccccaa;} +.seq_video_visited { background-color: #ccaacc;} +.seq_video_visited { background-color: #cccaac;} +.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/_reset.scss b/sass/_reset.scss new file mode 100644 index 0000000000..d1f752f88e --- /dev/null +++ b/sass/_reset.scss @@ -0,0 +1,47 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; +} +/* remember to define focus styles! */ +:focus { + outline: 0; +} +body { + line-height: 1; + color: black; + background: white; +} +ol, ul { + list-style: none; +} +/* tables still need 'cellspacing="0"' in the markup */ +table { + border-collapse: separate; + border-spacing: 0; +} +caption, th, td { + text-align: left; + font-weight: normal; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ""; +} +blockquote, q { + quotes: "" ""; +} + diff --git a/sass/_theme.scss b/sass/_theme.scss new file mode 100644 index 0000000000..21ed3895bf --- /dev/null +++ b/sass/_theme.scss @@ -0,0 +1,210 @@ +/* +---------------------------------------------------------------------------------------- + +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; + +---------------------------------------------------------------------------------------- +*/ + + +body { + font-family: Helvetica, Arial, sans-serif; +} + +h1 { + font-size:1.6em; + margin:25px 0 10px 0; + clear:both; +} + +h2 { + font-size:1.1em; + margin:20px 0 10px 0; + clear:both; +} + +h3 { + font-size:1em; + margin:20px 0 5px 0; + clear:both; +} + +a:link, a:visited { + text-decoration:none; +} + +a:hover { + text-decoration:underline; +} + +#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 new file mode 100644 index 0000000000..a3aa271063 --- /dev/null +++ b/sass/application.scss @@ -0,0 +1,10 @@ +@import "bourbon/bourbon"; +@import "reset"; + + +@import "base-variables", "base-extends"; + +@import "theme"; +@import "local"; + +@import "layout"; diff --git a/sass/bourbon/_bourbon.scss b/sass/bourbon/_bourbon.scss new file mode 100644 index 0000000000..5c1bc8a4a9 --- /dev/null +++ b/sass/bourbon/_bourbon.scss @@ -0,0 +1,29 @@ +// Custom Functions +@import "functions/deprecated-webkit-gradient"; +@import "functions/golden-ratio"; +@import "functions/grid-width"; +@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/sass/bourbon/addons/_button.scss b/sass/bourbon/addons/_button.scss new file mode 100644 index 0000000000..d2f98ab0c3 --- /dev/null +++ b/sass/bourbon/addons/_button.scss @@ -0,0 +1,170 @@ +@mixin button ($style: simple, $base-color: #4294f0) { + + @if type-of($style) == color { + $base-color: $style; + $style: simple; + } + + @if $style == simple { + @include simple($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%); + + @if lightness($base-color) > 70% { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + 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%); + $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); + + @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%); + + 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); + $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); + + @if lightness($base-color) > 70% { + $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%); + 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; + padding: 7px 20px 8px; + text-decoration: none; + text-align: center; + 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); + + @include linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%); + cursor: pointer; + } + + &:active { + $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); + + @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%); + + @if lightness($base-color) > 70% { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @include linear-gradient ($base-color, $stop-gradient); + 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; + 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%); + + @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; + 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%); + + 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/sass/bourbon/addons/_font-family.scss b/sass/bourbon/addons/_font-family.scss new file mode 100644 index 0000000000..9e3bc6ee20 --- /dev/null +++ b/sass/bourbon/addons/_font-family.scss @@ -0,0 +1,4 @@ +$georgia: Georgia, Cambria, "Times New Roman", Times, serif; +$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; +$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; +$verdana: Verdana, Geneva, sans-serif; diff --git a/sass/bourbon/addons/_html5-input-types.scss b/sass/bourbon/addons/_html5-input-types.scss new file mode 100644 index 0000000000..9d86fbb4d4 --- /dev/null +++ b/sass/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/sass/bourbon/addons/_position.scss b/sass/bourbon/addons/_position.scss new file mode 100644 index 0000000000..6ad330f1df --- /dev/null +++ b/sass/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/sass/bourbon/addons/_timing-functions.scss b/sass/bourbon/addons/_timing-functions.scss new file mode 100644 index 0000000000..51b2410914 --- /dev/null +++ b/sass/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/sass/bourbon/css3/_animation.scss b/sass/bourbon/css3/_animation.scss new file mode 100644 index 0000000000..08f3b13e61 --- /dev/null +++ b/sass/bourbon/css3/_animation.scss @@ -0,0 +1,161 @@ +// 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. + +@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; +} + + +// 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); +@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); + } +} + +// 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/_appearance.scss b/sass/bourbon/css3/_appearance.scss new file mode 100644 index 0000000000..548767e166 --- /dev/null +++ b/sass/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/sass/bourbon/css3/_background-image.scss b/sass/bourbon/css3/_background-image.scss new file mode 100644 index 0000000000..b11ab3fd53 --- /dev/null +++ b/sass/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/sass/bourbon/css3/_background-size.scss b/sass/bourbon/css3/_background-size.scss new file mode 100644 index 0000000000..4bba11027d --- /dev/null +++ b/sass/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/sass/bourbon/css3/_border-image.scss b/sass/bourbon/css3/_border-image.scss new file mode 100644 index 0000000000..0373980422 --- /dev/null +++ b/sass/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/sass/bourbon/css3/_border-radius.scss b/sass/bourbon/css3/_border-radius.scss new file mode 100644 index 0000000000..f950d4dd98 --- /dev/null +++ b/sass/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/sass/bourbon/css3/_box-shadow.scss b/sass/bourbon/css3/_box-shadow.scss new file mode 100644 index 0000000000..ad5c24e7aa --- /dev/null +++ b/sass/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/sass/bourbon/css3/_box-sizing.scss b/sass/bourbon/css3/_box-sizing.scss new file mode 100644 index 0000000000..a9c6cdb43f --- /dev/null +++ b/sass/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/sass/bourbon/css3/_columns.scss b/sass/bourbon/css3/_columns.scss new file mode 100644 index 0000000000..2896c91d7f --- /dev/null +++ b/sass/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/sass/bourbon/css3/_flex-box.scss b/sass/bourbon/css3/_flex-box.scss new file mode 100644 index 0000000000..44c1dfd789 --- /dev/null +++ b/sass/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/sass/bourbon/css3/_inline-block.scss b/sass/bourbon/css3/_inline-block.scss new file mode 100644 index 0000000000..d79a13c851 --- /dev/null +++ b/sass/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/sass/bourbon/css3/_linear-gradient.scss b/sass/bourbon/css3/_linear-gradient.scss new file mode 100644 index 0000000000..585921f30b --- /dev/null +++ b/sass/bourbon/css3/_linear-gradient.scss @@ -0,0 +1,31 @@ +@mixin linear-gradient($pos, $G1, $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 + } + + $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + + background-color: nth($G1, 1); + 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(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/css3/_radial-gradient.scss b/sass/bourbon/css3/_radial-gradient.scss new file mode 100644 index 0000000000..fbd0a8523c --- /dev/null +++ b/sass/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/sass/bourbon/css3/_transform.scss b/sass/bourbon/css3/_transform.scss new file mode 100644 index 0000000000..8d19e8b88d --- /dev/null +++ b/sass/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/sass/bourbon/css3/_transition.scss b/sass/bourbon/css3/_transition.scss new file mode 100644 index 0000000000..058dbe0e33 --- /dev/null +++ b/sass/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/sass/bourbon/functions/_deprecated-webkit-gradient.scss b/sass/bourbon/functions/_deprecated-webkit-gradient.scss new file mode 100644 index 0000000000..1322f6f60e --- /dev/null +++ b/sass/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/sass/bourbon/functions/_golden-ratio.scss b/sass/bourbon/functions/_golden-ratio.scss new file mode 100644 index 0000000000..8f825addf3 --- /dev/null +++ b/sass/bourbon/functions/_golden-ratio.scss @@ -0,0 +1,31 @@ +@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/sass/bourbon/functions/_grid-width.scss b/sass/bourbon/functions/_grid-width.scss new file mode 100644 index 0000000000..8e63d83d60 --- /dev/null +++ b/sass/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/sass/bourbon/functions/_linear-gradient.scss b/sass/bourbon/functions/_linear-gradient.scss new file mode 100644 index 0000000000..3b10ca82a6 --- /dev/null +++ b/sass/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/sass/bourbon/functions/_radial-gradient.scss b/sass/bourbon/functions/_radial-gradient.scss new file mode 100644 index 0000000000..3d5461ad6e --- /dev/null +++ b/sass/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/sass/bourbon/functions/_tint-shade.scss b/sass/bourbon/functions/_tint-shade.scss new file mode 100644 index 0000000000..f7172004ac --- /dev/null +++ b/sass/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/sass/bourbon/lib/bourbon.rb b/sass/bourbon/lib/bourbon.rb new file mode 100644 index 0000000000..ca440eefbc --- /dev/null +++ b/sass/bourbon/lib/bourbon.rb @@ -0,0 +1,17 @@ +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/sass/bourbon/lib/bourbon/sass_extensions.rb b/sass/bourbon/lib/bourbon/sass_extensions.rb new file mode 100644 index 0000000000..ad567200e3 --- /dev/null +++ b/sass/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/sass/bourbon/lib/bourbon/sass_extensions/functions.rb b/sass/bourbon/lib/bourbon/sass_extensions/functions.rb new file mode 100644 index 0000000000..daa877650e --- /dev/null +++ b/sass/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/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb b/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb new file mode 100644 index 0000000000..5192e921e7 --- /dev/null +++ b/sass/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/reademe.md b/sass/reademe.md new file mode 100644 index 0000000000..67ffcff923 --- /dev/null +++ b/sass/reademe.md @@ -0,0 +1,2 @@ +To generate Sass files cd to templates directory: +sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb diff --git a/staticbook.html b/staticbook.html index 6aea49eb8c..19276d95be 100644 --- a/staticbook.html +++ b/staticbook.html @@ -32,39 +32,19 @@ function next_page() { goto_page(newpage); log_event("book", {"type":"nextpage","new":page}); } - -
- -
- - - + + + + +
+ +<%include file="navigation.html" /> +
    -<%include file="book_toc.html" /> + <%include file="book_toc.html" />
-		 -
+ - - - -
  - - 
   
-