.
8 | .list-group {
9 | // No need to set list-style: none; since .list-group-item is block level
10 | margin-bottom: 20px;
11 | padding-left: 0; // reset padding because ul and ol
12 | }
13 |
14 | // Individual list items
15 | // -------------------------
16 |
17 | .list-group-item {
18 | position: relative;
19 | display: block;
20 | padding: 10px 15px;
21 | // Place the border on the list items and negative margin up for better styling
22 | margin-bottom: -1px;
23 | background-color: @list-group-bg;
24 | border: 1px solid @list-group-border;
25 |
26 | // Round the first and last items
27 | &:first-child {
28 | .border-top-radius(@list-group-border-radius);
29 | }
30 | &:last-child {
31 | margin-bottom: 0;
32 | .border-bottom-radius(@list-group-border-radius);
33 | }
34 |
35 | // Align badges within list items
36 | > .badge {
37 | float: right;
38 | }
39 | > .badge + .badge {
40 | margin-right: 5px;
41 | }
42 |
43 | // Linked list items
44 | a& {
45 | color: @list-group-link-color;
46 |
47 | .list-group-item-heading {
48 | color: @list-group-link-heading-color;
49 | }
50 |
51 | // Hover state
52 | &:hover,
53 | &:focus {
54 | text-decoration: none;
55 | background-color: @list-group-hover-bg;
56 | }
57 | }
58 |
59 | // Active class on item itself, not parent
60 | &.active,
61 | &.active:hover,
62 | &.active:focus {
63 | z-index: 2; // Place active items above their siblings for proper border styling
64 | color: @list-group-active-color;
65 | background-color: @list-group-active-bg;
66 | border-color: @list-group-active-border;
67 |
68 | // Force color to inherit for custom content
69 | .list-group-item-heading {
70 | color: inherit;
71 | }
72 | .list-group-item-text {
73 | color: lighten(@list-group-active-bg, 40%);
74 | }
75 | }
76 | }
77 |
78 | // Custom content options
79 | // -------------------------
80 |
81 | .list-group-item-heading {
82 | margin-top: 0;
83 | margin-bottom: 5px;
84 | }
85 | .list-group-item-text {
86 | margin-bottom: 0;
87 | line-height: 1.3;
88 | }
89 |
--------------------------------------------------------------------------------
/syntax/variables.md:
--------------------------------------------------------------------------------
1 | ## Variables and Scope
2 | CoffeeScript fixes one of the major bugbears with JavaScript, global variables. In JavaScript,
3 | it's all too easy to accidentally declare a global variable by forgetting to include var before the variable assignment.
4 | CoffeeScript solves this by simply removing global variables. Behind the scenes, CoffeeScript wraps up scripts with an
5 | anonymous function, keeping the local context, and automatically prefixes all variable assignments with var.
6 | For example, take this simple variable assignment in CoffeeScript:
7 |
8 | *CoffeeScript*
9 | ``` coffeescript
10 | person = "Jimmy Hendrix"
11 | ```
12 |
13 | *JavaScript*
14 | ``` javascript
15 | var person;
16 | person = "Jimmy Hendrix";
17 | ```
18 |
19 | As you can see, the variable assignment is kept completely local, it's impossible to accidentally create a global variable. CoffeeScript actually takes this a step further, and makes it difficult to shadow a higher-level variable. This goes a great deal to prevent some of the most common mistakes developers make in JavaScript.
20 |
21 | However, sometimes it's useful to create global variables. You can either do this by directly setting them as properties on the global object (window in browsers), or with the following pattern:
22 |
23 | *CoffeeScript*
24 |
25 | ``` coffeescript
26 | exports = this
27 | exports.band = "Led Zeppelin"
28 | ```
29 |
30 | *JavaScript*
31 |
32 | ``` javascript
33 | var exports;
34 | exports = this;
35 | exports.band = "Led Zeppelin";
36 | ```
37 |
38 |
39 | In the root context, this is equal to the global object, and by creating a local exports variable you're making it really obvious to anyone reading your code exactly which global variables a script is creating. Additionally, it paves the way for CommonJS modules, which we're going to cover later in the book.
40 |
41 | ## String interpolation
42 | CoffeeScript brings Ruby style string interpolation to JavaScript. Double quotes strings can contain #{} tags, which contain expressions to be interpolated into the string.
43 |
44 | *CoffeeScript*
45 | ``` coffeescript
46 | band = 'Metallica'
47 | dialog = "- What is your favorite band? - #{band}!"
48 | ```
49 |
50 | *JavaScript*
51 | ``` javascript
52 | var band, dialog;
53 | band = 'Metallica';
54 | dialog = "- What is your favorite band? - "+band+"!";
55 | ```
56 |
57 | As you can see in the example above, multiline strings are also allowed, without having to prefix each line with a +:
58 |
--------------------------------------------------------------------------------
/_theme/stylesheets/vendors/bootstrap/progress-bars.less:
--------------------------------------------------------------------------------
1 | //
2 | // Progress bars
3 | // --------------------------------------------------
4 |
5 |
6 | // Bar animations
7 | // -------------------------
8 |
9 | // Webkit
10 | @-webkit-keyframes progress-bar-stripes {
11 | from { background-position: 40px 0; }
12 | to { background-position: 0 0; }
13 | }
14 |
15 | // Firefox
16 | @-moz-keyframes progress-bar-stripes {
17 | from { background-position: 40px 0; }
18 | to { background-position: 0 0; }
19 | }
20 |
21 | // Opera
22 | @-o-keyframes progress-bar-stripes {
23 | from { background-position: 0 0; }
24 | to { background-position: 40px 0; }
25 | }
26 |
27 | // Spec and IE10+
28 | @keyframes progress-bar-stripes {
29 | from { background-position: 40px 0; }
30 | to { background-position: 0 0; }
31 | }
32 |
33 |
34 |
35 | // Bar itself
36 | // -------------------------
37 |
38 | // Outer container
39 | .progress {
40 | overflow: hidden;
41 | height: @line-height-computed;
42 | margin-bottom: @line-height-computed;
43 | background-color: @progress-bg;
44 | border-radius: @border-radius-base;
45 | .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
46 | }
47 |
48 | // Bar of progress
49 | .progress-bar {
50 | float: left;
51 | width: 0%;
52 | height: 100%;
53 | font-size: @font-size-small;
54 | color: @progress-bar-color;
55 | text-align: center;
56 | background-color: @progress-bar-bg;
57 | .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
58 | .transition(width .6s ease);
59 | }
60 |
61 | // Striped bars
62 | .progress-striped .progress-bar {
63 | #gradient > .striped(@progress-bar-bg);
64 | background-size: 40px 40px;
65 | }
66 |
67 | // Call animation for the active one
68 | .progress.active .progress-bar {
69 | -webkit-animation: progress-bar-stripes 2s linear infinite;
70 | -moz-animation: progress-bar-stripes 2s linear infinite;
71 | -ms-animation: progress-bar-stripes 2s linear infinite;
72 | -o-animation: progress-bar-stripes 2s linear infinite;
73 | animation: progress-bar-stripes 2s linear infinite;
74 | }
75 |
76 |
77 |
78 | // Variations
79 | // -------------------------
80 |
81 | .progress-bar-success {
82 | .progress-bar-variant(@progress-bar-success-bg);
83 | }
84 |
85 | .progress-bar-info {
86 | .progress-bar-variant(@progress-bar-info-bg);
87 | }
88 |
89 | .progress-bar-warning {
90 | .progress-bar-variant(@progress-bar-warning-bg);
91 | }
92 |
93 | .progress-bar-danger {
94 | .progress-bar-variant(@progress-bar-danger-bg);
95 | }
96 |
--------------------------------------------------------------------------------
/installation/index.md:
--------------------------------------------------------------------------------
1 | # Installation
2 | In order to get started with CoffeeScript you need to compile it to JavaScript nativly supported by browsers. Here you have couple options:
3 |
4 | You can use the browser-based CoffeeScript compiler, by including [compiler script](http://jashkenas.github.io/coffee-script/extras/coffee-script.js) in a page, marking up any CoffeeScript script tags with the correct type like:
5 | ```html
6 |
7 |
10 | ```
11 | This will compile all your CoffeeScript code to JavaScript at runtime.
12 |
13 | There's also a command line version of coffee compiler that is available as Node.js utility. The core compiler however, does not depend on Node, and can be run in any JavaScript environment.
14 |
15 | To install, first make sure you have a working copy of the latest stable version of Node.js, and npm (the Node Package Manager). You can then install CoffeeScript with npm:
16 | ```
17 | npm install -g coffee-script
18 | ```
19 |
20 | Once installed, you are able to run coffee command, which can execute scripts, compile ```.coffee``` files into ```.js```, and provide an interactive console, which you can use to quickly execute CoffeeScript statements.
21 |
22 | The coffee command takes a bunch of useful options like:
23 |
24 | ```-c, --compile``` – Compile a ```.coffee``` script into a ```.js``` JavaScript file of the same name.
25 |
26 | ```-m, --map``` – Generate source maps alongside the compiled JavaScript files. Adds sourceMappingURL directives to the JavaScript as well.
27 |
28 | ```-i, --interactive``` – Launch an interactive CoffeeScript session to try short snippets. Identical to calling ```coffee``` with no arguments.
29 |
30 | ```-o, --output [DIR]``` – Write out all compiled JavaScript files into the specified directory. Use in conjunction with ```--compile``` or ```--watch```.
31 |
32 | ```-j, --join [FILE]``` Before compiling, concatenate all scripts together in the order they were passed, and write them into the specified file. Useful for building large projects.
33 |
34 | ```-w, --watch``` Watch files for changes, rerunning the specified command when any file is updated.
35 |
36 | ```-b, --bare``` Compile the JavaScript without the top-level function safety wrapper.
37 |
38 | You can check out all options related to your version of coffee-script by running:
39 |
40 | coffee --help
41 |
42 | Of course there are more convenient ways to automatically compile CoffeeScript
43 | instead of running ```coffee``` command in console. We'll take a look at them later.
44 |
--------------------------------------------------------------------------------
/syntax/arrays_and_objects.md:
--------------------------------------------------------------------------------
1 | ## Object literals
2 | Object literals can be specified exactly as in JavaScript, with a pair of braces and key/value statements.
3 | However, like with function invocation, CoffeeScript makes the braces optional. In fact, you can also use
4 | indentation and new lines instead of comma separation.
5 | ``` coffeescript
6 | rockStar = {tallent: '30%', charisma: '70%'}
7 |
8 | rockStar = tallent: '30%', charisma: '70%'
9 |
10 | rockStar =
11 | tallent: '30%'
12 | charisma: '70%'
13 | ```
14 | ## Arrays
15 | Arrays definitions look pretty similar to object literals - coma separated if defined in a single line and you
16 | can use whitespace instead of comma separators, although the square brackets `[]` are still required.
17 | ``` coffeescript
18 | nirvana = ['Bleach', 'Nevermind', 'Incesticide', 'In Utero']
19 |
20 | nirvana = [
21 | 'Bleach'
22 | 'Nevermind'
23 | 'Incesticide'
24 | 'In Utero'
25 | ]
26 | ```
27 | CoffeeScript also strippes the trailing comma in arrays which is another common source of cross-browser errors.
28 |
29 | ### Ranges
30 | CoffeeScript takes inspiration from Ruby and provides you an ability to define ranges if you need an array of sequential integers.
31 | Ranges are created by two numerical values, the first and last positions in the range, separated by `..` or `...`.
32 | With two dots (1..4), the range is inclusive (1, 2, 3, 4); with three dots (1...4), the range excludes the end (1, 2, 3).
33 |
34 | *CoffeeScript*
35 | ``` coffeescript
36 | rangeOne = [1..10]
37 | rangeTwo = [1...10]
38 | ```
39 |
40 | *JavaScript*
41 | ``` javascript
42 | var rangeOne, rangeTwo;
43 | rangeOne = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
44 | rangeTwo = [1, 2, 3, 4, 5, 6, 7, 8, 9];
45 | ```
46 | If, however, the range is specified immediately after a variable, CoffeeScript converts it into a slice() method call.
47 | ``` coffeescript
48 | numbers = [1, 2, 3, 4][0..1] # => [1, 2]
49 | ```
50 | In the example above, the range returns a new array, containing only the first two elements of the original array. You can also use the same syntax for replacing an array segment with another array.
51 |
52 | *CoffeeScript*
53 | ``` coffeescript
54 | numbers = [0..9]
55 | numbers[3..5] = [-3, -4, -5] # => [0, 1, 2, -3, -4, -5, 6, 7, 8, 9]
56 | ```
57 |
58 | *JavaScript*
59 | ``` javascript
60 | var numbers, _ref;
61 | numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
62 | [].splice.apply(numbers, [3, 3].concat(_ref = [-3, -4, -5])), _ref;
63 | ```
64 |
65 | What's neat, is that JavaScript allows you to call slice() on strings too, so you can use ranges with string to return a new subset of characters.
66 |
67 | *CoffeeScript*
68 | ``` coffeescript
69 | lyrics = "So close no matter how far"[0..7] # => "So close"
70 | ```
71 |
--------------------------------------------------------------------------------
/syntax/loops_and_comprehensions.md:
--------------------------------------------------------------------------------
1 | ## Loops and Comprehensions
2 | Array iteration in JavaScript has a rather archaic syntax, reminiscent of an older language like C
3 | rather than a modern object-orientated one. The introduction of ES5 improved that situation somewhat,
4 | with the forEach() function, but that still requires a function call every iteration and is therefore
5 | much slower. Again, CoffeeScript comes to the rescue, with a beautiful syntax:
6 |
7 | *CoffeeScript*
8 | ``` coffeescript
9 | for surname in ["Young", "Gilmour", "Blackmore"]
10 | console.log "David #{surname}"
11 | ```
12 | *JavaScript*
13 | ``` javascript
14 | var surname, _i, _len, _ref;
15 | _ref = ["Young", "Gilmour", "Blackmore"];
16 | for (_i = 0, _len = _ref.length; _i < _len; _i++) {
17 | surname = _ref[_i];
18 | console.log("David " + surname);
19 | }
20 | ```
21 | If you need the current iteration index, you are able to pass an extra argument:
22 |
23 | *CoffeeScript*
24 | ``` coffeescript
25 | for count, i in ["one", "two", "three"]
26 | console.log "#{i} - #{count}"
27 | ```
28 | *JavaScript*
29 | ``` javascript
30 | var i, count, _len, _ref;
31 | _ref = ["one", "two", "three"];
32 | for (i = 0, _len = _ref.length; i < _len; i++) {
33 | count = _ref[i];
34 | alert("" + i + " - " + count);
35 | }
36 | ```
37 | You can also iterate on one line, using the suffix form by placing `for` at the end of expression
38 |
39 | *CoffeScript*
40 | ``` coffeescript
41 | like guitarist for guitarist in ["Young", "Gilmour", "Blackmore"]
42 | ```
43 | *JavaScript*
44 | ``` javascript
45 | var guitarist, _i, _len, _ref;
46 | _ref = ["Young", "Gilmour", "Blackmore"];
47 | for (_i = 0, _len = _ref.length; _i < _len; _i++) {
48 | guitarist = _ref[_i];
49 | like(guitarist);
50 | }
51 | ```
52 | And also filtering is available in comprehensions Python style:
53 | ``` coffeescript
54 | guitarists = ["Young", "Gilmour", "Blackmore"]
55 | like guitarist for guitarist in guitarists when guitarist[0] is "G"
56 | ```
57 |
58 | You can also use comprehensions for iterating over properties in objects. Instead of the `in` keyword, use `of`.
59 |
60 | *CoffeeScript*
61 | ``` coffeescript
62 | names = Angus: "Young", David: "Gilmour", Richie: "Blackmore"
63 | alert("#{first} #{last}") for first, last of names
64 | ```
65 | *JavaScript*
66 | ``` javascript
67 | var first, last, names;
68 | names = {
69 | Angus: "Young",
70 | David: "Gilmour",
71 | Richie: "Blackmore"
72 | };
73 | for (first in names) {
74 | last = names[first];
75 | alert("" + first + " " + last);
76 | }
77 | ```
78 | The only low-level loop that CoffeeScript exposes is the `while` loop. This has similar behavior to the while
79 | loop in pure JavaScript, but has the added advantage that it returns an array of results, i.e. like
80 | the Array.prototype.map() function.
81 |
--------------------------------------------------------------------------------
/_theme/stylesheets/vendors/bootstrap/scaffolding.less:
--------------------------------------------------------------------------------
1 | //
2 | // Scaffolding
3 | // --------------------------------------------------
4 |
5 |
6 | // Reset the box-sizing
7 |
8 | *,
9 | *:before,
10 | *:after {
11 | .box-sizing(border-box);
12 | }
13 |
14 |
15 | // Body reset
16 |
17 | html {
18 | font-size: 62.5%;
19 | -webkit-tap-highlight-color: rgba(0,0,0,0);
20 | }
21 |
22 | body {
23 | font-family: @font-family-base;
24 | font-size: @font-size-base;
25 | line-height: @line-height-base;
26 | color: @text-color;
27 | background-color: @body-bg;
28 | }
29 |
30 | // Reset fonts for relevant elements
31 | input,
32 | button,
33 | select,
34 | textarea {
35 | font-family: inherit;
36 | font-size: inherit;
37 | line-height: inherit;
38 | }
39 |
40 | // Reset unusual Firefox-on-Android default style.
41 | //
42 | // See https://github.com/necolas/normalize.css/issues/214
43 |
44 | button,
45 | input,
46 | select[multiple],
47 | textarea {
48 | background-image: none;
49 | }
50 |
51 |
52 | // Links
53 |
54 | a {
55 | color: @link-color;
56 | text-decoration: none;
57 |
58 | &:hover,
59 | &:focus {
60 | color: @link-hover-color;
61 | text-decoration: underline;
62 | }
63 |
64 | &:focus {
65 | .tab-focus();
66 | }
67 | }
68 |
69 |
70 | // Images
71 |
72 | img {
73 | vertical-align: middle;
74 | }
75 |
76 | // Responsive images (ensure images don't scale beyond their parents)
77 | .img-responsive {
78 | .img-responsive();
79 | }
80 |
81 | // Rounded corners
82 | .img-rounded {
83 | border-radius: @border-radius-large;
84 | }
85 |
86 | // Image thumbnails
87 | //
88 | // Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
89 | .img-thumbnail {
90 | padding: @thumbnail-padding;
91 | line-height: @line-height-base;
92 | background-color: @thumbnail-bg;
93 | border: 1px solid @thumbnail-border;
94 | border-radius: @thumbnail-border-radius;
95 | .transition(all .2s ease-in-out);
96 |
97 | // Keep them at most 100% wide
98 | .img-responsive(inline-block);
99 | }
100 |
101 | // Perfect circle
102 | .img-circle {
103 | border-radius: 50%; // set radius in percents
104 | }
105 |
106 |
107 | // Horizontal rules
108 |
109 | hr {
110 | margin-top: @line-height-computed;
111 | margin-bottom: @line-height-computed;
112 | border: 0;
113 | border-top: 1px solid @hr-border;
114 | }
115 |
116 |
117 | // Only display content to screen readers
118 | //
119 | // See: http://a11yproject.com/posts/how-to-hide-content/
120 |
121 | .sr-only {
122 | position: absolute;
123 | width: 1px;
124 | height: 1px;
125 | margin: -1px;
126 | padding: 0;
127 | overflow: hidden;
128 | clip: rect(0 0 0 0);
129 | border: 0;
130 | }
131 |
--------------------------------------------------------------------------------
/_theme/stylesheets/print.less:
--------------------------------------------------------------------------------
1 | @import "vendors/bootstrap/bootstrap.less";
2 | @import "vendors/fontawesome/font-awesome.less";
3 |
4 | @import "mixins.less";
5 | @import "variables.less";
6 | @import "fonts.less";
7 |
8 | @import "page/highlight.less";
9 |
10 |
11 | @font-size-base: 13px;
12 |
13 |
14 | * {
15 | -webkit-overflow-scrolling: touch;
16 | -webkit-tap-highlight-color: transparent;
17 | -webkit-text-size-adjust: none;
18 | -webkit-touch-callout: none;
19 | -webkit-font-smoothing: antialiased;
20 | }
21 |
22 | html, body {
23 | height: 100%;
24 | }
25 |
26 | body {
27 | text-rendering: optimizeLegibility;
28 | font-smoothing: antialiased;
29 | font-family: @font-family-base;
30 | }
31 |
32 |
33 | h1, h2, h3 {
34 | page-break-after: avoid;
35 | page-break-before: auto;
36 | }
37 |
38 | h1 { font-size: floor(@font-size-base * 2.15); }
39 | h2 { font-size: floor(@font-size-base * 1.70); }
40 | h3 { font-size: ceil(@font-size-base * 1.25); }
41 | h4 { font-size: ceil(@font-size-base * 1); }
42 | h5 { font-size: ceil(@font-size-base * 0.85); }
43 | h6 { font-size: ceil(@font-size-base * 0.65); }
44 |
45 | pre, blockquote {
46 | border: 1px solid #999;
47 | page-break-inside: avoid;
48 | }
49 |
50 | img {
51 | max-width: 100% !important;
52 | page-break-inside: avoid;
53 | }
54 |
55 | section {
56 | page-break-after: always;
57 |
58 | &#cover {
59 | padding: 3cm 0cm;
60 | text-align: center;
61 |
62 | h1 {
63 | font-size: 1.5cm;
64 | }
65 | }
66 |
67 | &#summary {
68 | margin: 1.5cm;
69 |
70 | h1 {
71 | text-align: center;
72 | }
73 |
74 | ol {
75 | list-style: none;
76 | padding: 0px;
77 | margin: 0px;
78 | margin-left: 1cm;
79 | }
80 |
81 | > ol {
82 | > li {
83 | }
84 | }
85 | }
86 |
87 | article {
88 | margin-bottom: 1.5cm;
89 |
90 | &.new-chapter {
91 | page-break-after: always;
92 | font-size: 0.6cm;
93 | text-align: center;
94 | padding: 3cm 0cm;
95 |
96 | h1 {
97 | font-size: floor(@font-size-base * 2.7);
98 | }
99 | }
100 |
101 | .exercise {
102 | margin: 1cm 0cm;
103 | padding: 0.4cm;
104 | page-break-inside: avoid;
105 |
106 | border: 3px solid #ddd;
107 |
108 | .exercise-header {
109 | margin-bottom: 0.4cm;
110 | padding-bottom: 0.2cm;
111 | border-bottom: 1px solid #ddd;
112 | }
113 | }
114 | }
115 | }
--------------------------------------------------------------------------------
/_theme/stylesheets/vendors/bootstrap/tooltip.less:
--------------------------------------------------------------------------------
1 | //
2 | // Tooltips
3 | // --------------------------------------------------
4 |
5 |
6 | // Base class
7 | .tooltip {
8 | position: absolute;
9 | z-index: @zindex-tooltip;
10 | display: block;
11 | visibility: visible;
12 | font-size: @font-size-small;
13 | line-height: 1.4;
14 | .opacity(0);
15 |
16 | &.in { .opacity(.9); }
17 | &.top { margin-top: -3px; padding: 5px 0; }
18 | &.right { margin-left: 3px; padding: 0 5px; }
19 | &.bottom { margin-top: 3px; padding: 5px 0; }
20 | &.left { margin-left: -3px; padding: 0 5px; }
21 | }
22 |
23 | // Wrapper for the tooltip content
24 | .tooltip-inner {
25 | max-width: @tooltip-max-width;
26 | padding: 3px 8px;
27 | color: @tooltip-color;
28 | text-align: center;
29 | text-decoration: none;
30 | background-color: @tooltip-bg;
31 | border-radius: @border-radius-base;
32 | }
33 |
34 | // Arrows
35 | .tooltip-arrow {
36 | position: absolute;
37 | width: 0;
38 | height: 0;
39 | border-color: transparent;
40 | border-style: solid;
41 | }
42 | .tooltip {
43 | &.top .tooltip-arrow {
44 | bottom: 0;
45 | left: 50%;
46 | margin-left: -@tooltip-arrow-width;
47 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
48 | border-top-color: @tooltip-arrow-color;
49 | }
50 | &.top-left .tooltip-arrow {
51 | bottom: 0;
52 | left: 5px;
53 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
54 | border-top-color: @tooltip-arrow-color;
55 | }
56 | &.top-right .tooltip-arrow {
57 | bottom: 0;
58 | right: 5px;
59 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
60 | border-top-color: @tooltip-arrow-color;
61 | }
62 | &.right .tooltip-arrow {
63 | top: 50%;
64 | left: 0;
65 | margin-top: -@tooltip-arrow-width;
66 | border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
67 | border-right-color: @tooltip-arrow-color;
68 | }
69 | &.left .tooltip-arrow {
70 | top: 50%;
71 | right: 0;
72 | margin-top: -@tooltip-arrow-width;
73 | border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
74 | border-left-color: @tooltip-arrow-color;
75 | }
76 | &.bottom .tooltip-arrow {
77 | top: 0;
78 | left: 50%;
79 | margin-left: -@tooltip-arrow-width;
80 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
81 | border-bottom-color: @tooltip-arrow-color;
82 | }
83 | &.bottom-left .tooltip-arrow {
84 | top: 0;
85 | left: 5px;
86 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
87 | border-bottom-color: @tooltip-arrow-color;
88 | }
89 | &.bottom-right .tooltip-arrow {
90 | top: 0;
91 | right: 5px;
92 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
93 | border-bottom-color: @tooltip-arrow-color;
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/_theme/javascript/core/search.js:
--------------------------------------------------------------------------------
1 | define([
2 | "jQuery",
3 | "lodash",
4 | "lunr",
5 | "utils/storage",
6 | "core/state",
7 | "core/sidebar"
8 | ], function($, _, lunr, storage, state, sidebar) {
9 | var index = null;
10 |
11 | // Use a specific idnex
12 | var useIndex = function(data) {
13 | index = lunr.Index.load(data);
14 | };
15 |
16 | // Load complete index
17 | var loadIndex = function() {
18 | $.getJSON(state.basePath+"/search_index.json")
19 | .then(useIndex);
20 | };
21 |
22 | // Search for a term
23 | var search = function(q) {
24 | if (!index) return;
25 | var results = _.chain(index.search(q))
26 | .map(function(result) {
27 | var parts = result.ref.split("#")
28 | return {
29 | path: parts[0],
30 | hash: parts[1]
31 | }
32 | })
33 | .value();
34 |
35 | return results;
36 | };
37 |
38 | // Toggle search bar
39 | var toggleSearch = function(_state) {
40 | if (state != null && isSearchOpen() == _state) return;
41 |
42 | var $searchInput = $(".book-search input");
43 | state.$book.toggleClass("with-search", _state);
44 |
45 | // If search bar is open: focus input
46 | if (isSearchOpen()) {
47 | sidebar.toggle(true);
48 | $searchInput.focus();
49 | } else {
50 | $searchInput.blur();
51 | $searchInput.val("");
52 | sidebar.filter(null);
53 | }
54 | };
55 |
56 | // Return true if search bar is open
57 | var isSearchOpen = function() {
58 | return state.$book.hasClass("with-search");
59 | };
60 |
61 |
62 | var init = function() {
63 | loadIndex();
64 |
65 | // Toggle search
66 | $(document).on("click", ".book-header .toggle-search", function(e) {
67 | e.preventDefault();
68 | toggleSearch();
69 | });
70 | };
71 |
72 | var prepare = function() {
73 | var $searchInput = $(".book-search input");
74 |
75 | $searchInput.keyup(function(e) {
76 | var key = (e.keyCode ? e.keyCode : e.which);
77 | var q = $(this).val();
78 |
79 | if (key == 27) {
80 | e.preventDefault();
81 | toggleSearch(false);
82 | return;
83 | }
84 | if (q.length == 0) {
85 | sidebar.filter(null);
86 | } else {
87 | var results = search(q);
88 | sidebar.filter(
89 | _.pluck(results, "path")
90 | );
91 | }
92 | });
93 | }
94 |
95 | return {
96 | init: init,
97 | search: search,
98 | toggle: toggleSearch,
99 | prepare: prepare
100 | };
101 | });
--------------------------------------------------------------------------------
/_theme/templates/site.html:
--------------------------------------------------------------------------------
1 | {% extends "layout.html" %}
2 |
3 | {% block htmlTag %}manifest="{{ basePath }}/manifest.appcache"{% endblock %}
4 | {% block title %}{{ progress.current.title }}{% parent %}{% endblock %}
5 | {% block content %}
6 |
7 | {% include "includes/book/header.html" %}
8 | {% include "includes/book/summary.html" %}
9 |
10 |
11 |
12 | {% include "includes/book/progress.html" %}
13 |
14 |
15 | {% for section in content %}
16 |
17 | {% if section.type == "normal" %}
18 | {% autoescape false %}{{ section.content }}{% endautoescape %}
19 | {% elif section.type == "exercise" %}
20 | {% include "./includes/book/exercise.html" with {section: section} %}
21 | {% elif section.type == "quiz" %}
22 | {% include "./includes/book/quiz.html" with {section: section} %}
23 | {% endif %}
24 |
25 | {% endfor %}
26 |
27 |
28 |
29 |
30 | {% if progress.current.prev and progress.current.prev.path %}
31 |
32 | {% endif %}
33 | {% if progress.current.next and progress.current.next.path %}
34 |
35 | {% endif %}
36 |
37 |
38 | {% endblock %}
39 |
40 | {% block javascript %}
41 | {% parent %}
42 | {% for resource in plugins.resources.js %}
43 | {% if resource.url %}
44 |
45 | {% else %}
46 |
47 | {% endif %}
48 | {% endfor %}
49 |
55 | {% endblock %}
56 |
57 | {% block style %}
58 | {% parent %}
59 | {% for resource in plugins.resources.css %}
60 | {% if resource.url %}
61 |
62 | {% else %}
63 |
64 | {% endif %}
65 | {% endfor %}
66 | {% endblock %}
67 |
--------------------------------------------------------------------------------
/syntax/flow_control.md:
--------------------------------------------------------------------------------
1 | ## Flow control
2 | The convention of optional parentheses continues with CoffeeScript's if and else keywords.
3 |
4 | *CoffeeScript*
5 | ``` coffeescript
6 | if true == true
7 | "Rock'n'Roll"
8 |
9 | if true != true then "Let it be"
10 |
11 | if 1 > 0 then "Ok" else "Y2K!"
12 | ```
13 | *JavaScript*
14 | ``` javascript
15 | if (true === true) {
16 | "Rock'n'Roll";
17 | }
18 | if (true !== true) {
19 | "Let it be";
20 | }
21 | if (1 > 0) {
22 | "Ok";
23 | } else {
24 | "Y2K!";
25 | }
26 | ```
27 | As you can see above, if the if statement is on one line, you'll need to use the then keyword, so CoffeeScript knows when the block begins. Conditional operators (?:) are not supported, instead you should use a single line if/else statement.
28 |
29 | CoffeeScript also includes a Ruby idiom of allowing suffixed if statements.
30 |
31 | *CoffeeScript*
32 | ``` coffeescript
33 | alert "It's cold!" if heat < 5
34 | ```
35 | *JavaScript*
36 | ``` javascript
37 | if (heat < 5) {
38 | alert("It's cold!");
39 | }
40 | ```
41 | Instead of using the exclamation mark (!) for negation, you can also use the not keyword - which can sometimes make your code more readable as exclamation marks can be easy to miss.
42 |
43 | *CoffeeScript*
44 | ``` coffeescript
45 | if not true then "Rock'n'Roll"
46 | ```
47 | *JavaScript*
48 | ``` javascript
49 | if (!true) {
50 | "Rock'n'Roll";
51 | }
52 | ```
53 | In the example above, we could also use the CoffeeScript's unless statement, the opposite of if.
54 |
55 | *CoffeeScript*
56 | ``` coffeescript
57 | unless true
58 | "Rock'n'Roll"
59 | ```
60 | *JavaScript*
61 | ``` javascript
62 | if (!true) {
63 | "Rock'n'Roll";
64 | }
65 | ```
66 | In a similar fashion to not, CoffeeScript also introduces the is statement, which translates to ===.
67 |
68 | *CoffeeScript*
69 | ``` coffeescript
70 | if true is 1
71 | "Type coercion fail!"
72 | ```
73 | *JavaScript*
74 | ``` javascript
75 | if (true === 1) {
76 | "Type coercion fail!";
77 | }
78 | ```
79 | As an alternative to is not, you can use isnt.
80 |
81 | *CoffeeScript*
82 | ``` coffeescript
83 | if true isnt true
84 | alert "Try to rock as hard as you can!"
85 | ```
86 | You may have noticed in the examples above, that CoffeeScript is converting `==` operators into `===` and `!=` into `!==`. This is one of my favorite features to the language, and yet one of the most simple. What's the reasoning behind this? Well frankly JavaScript's type coercion is a bit odd, and its equality operator coerces types in order to compare them, leading to some confusing behaviors and the source of many bugs.
87 |
88 | ### Chained Comparisons
89 |
90 | CoffeeScript borrows chained comparisons from Python — making it easy to test if a value falls within a certain range.
91 |
92 | *CoffeeScript*
93 | ``` coffeescript
94 | PinkFloydAlbums = 14
95 | fromTenToTwenty = 20 > PinkFloydAlbums > 10 # true
96 | ```
97 | *JavaScript*
98 | ``` javascript
99 | var PinkFloydAlbums, fromTenToTwenty;
100 | PinkFloydAlbums = 14;
101 | fromTenToTwenty = (20 > PinkFloydAlbums && PinkFloydAlbums > 10);
102 | ```
103 |
--------------------------------------------------------------------------------
/classes/instance_and_static_properties.md:
--------------------------------------------------------------------------------
1 | ### Instance properties
2 |
3 | Adding additional instance properties to a class is very straightforward, it's exactly the syntax as adding properties onto an object. Just make sure properties are indented correctly inside the class body.
4 |
5 | *CoffeeScript*
6 | ``` coffeescript
7 | class Band
8 | members: 4
9 |
10 | play: (song) ->
11 |
12 | band = new Band()
13 | band.play('Brick in the wall')
14 | ```
15 | *JavaScript*
16 | ``` javascript
17 | var Band, band;
18 | Band = (function() {
19 | function Band() {}
20 | Band.prototype.members = 4;
21 | Band.prototype.play = function(song) {
22 | };
23 | return Band;
24 | })();
25 | band = new Band();
26 | band.play('Brick in the wall');
27 | ```
28 |
29 | Context changes are rife within JavaScript, and earlier in the Syntax chapter we talked about how CoffeeScript can lock the value of this to a particular context using a fat arrow function: =>. This ensures that whatever context a function is called under, it'll always execute inside the context it was created in. CoffeeScript has extended support for fat arrows to classes, so by using a fat arrow for an instance method you'll ensure that it's invoked in the correct context, and that this is always equal to the current instance.
30 |
31 | *CoffeeScript*
32 | ``` coffeescript
33 | class Band
34 | members: 4
35 |
36 | play: () =>
37 | console.log "#{@members} musicians are playing."
38 |
39 | band = new Band()
40 | $('#play-button').click(band.play)
41 | ```
42 | *JavaScript*
43 | ``` javascript
44 | var Band, band,
45 | __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); };
46 | Band = (function() {
47 | function Band() {
48 | this.play = __bind(this.play, this);
49 | }
50 | Band.prototype.members = 4;
51 | Band.prototype.play = function() {
52 | return console.log(this.members + " musicians are playing.");
53 | };
54 | return Band;
55 | })();
56 |
57 | band = new Band();
58 | $('#play-button').click(band.play);
59 | ```
60 |
61 |
62 | As demonstrated in the example above, this is especially useful in event callbacks. Normally the `play` method would be invoked in the context of the `#play-button` element. However, by using fat arrows for the `play` method, we're ensuring the correct context is being maintained, and that this.members equals 4.
63 |
64 | ### Static properties
65 |
66 | How about defining class (i.e. static) properties? Well, it turns out that inside a class definition, this refers to the class object. In other words you can set class properties by setting them directly on this.
67 |
68 | *CoffeeScript*
69 | ``` coffeescript
70 | class Band
71 | this.play = (song) ->
72 |
73 | Band.play('Brick in the wall')
74 | ```
75 | *JavaScript*
76 | ``` javascript
77 | var Band;
78 | Band = (function() {
79 | function Band() {}
80 | Band.play = function(song) {};
81 | return Band;
82 | })();
83 | Band.play('Brick in the wall');
84 | ```
85 | In fact, as you may remember, CoffeeScript aliases this to @, which lets you write static properties even more succinctly:
86 |
87 | *CoffeeScript*
88 | ``` coffeescript
89 | class Band
90 | @play = (song) ->
91 |
92 | Band.play('Brick in the wall')
93 | ```
94 |
--------------------------------------------------------------------------------
/_theme/stylesheets/book/header.less:
--------------------------------------------------------------------------------
1 | .book {
2 | .book-header {
3 | font-family: @font-family-sans;
4 |
5 | position: absolute;
6 | overflow: visible;
7 | top: 0px;
8 | right: 0px;
9 | left: 0px;
10 | height: @header-height;
11 | z-index: 2;
12 |
13 | font-size: 0.85em;
14 | color: @header-color;
15 | background: @header-background;
16 | box-shadow: 0 1px 2px hsla(200,10%,80%,0.6);
17 |
18 | .btn {
19 | display: block;
20 | height: @header-height;
21 | padding: 0px 15px;
22 | border-bottom: none;
23 | color: @header-button-color;
24 | text-transform: uppercase;
25 | line-height: @header-height;
26 | .box-shadow(none) !important;
27 | position:relative;
28 |
29 | &:hover {
30 | position: relative;
31 | text-decoration: none;
32 | color: @header-button-hover-color;
33 | background: @header-button-hover-background;
34 | }
35 | }
36 |
37 | h1 {
38 | margin: 0px;
39 | font-size: 20px;
40 | text-align: center;
41 | line-height: @header-height;
42 |
43 | padding-left: 200px;
44 | padding-right: 200px;
45 | .transition(margin-left 0.5s ease);
46 |
47 | a, a:hover {
48 | color: inherit;
49 | text-decoration: none;
50 | }
51 |
52 | @media (max-width: 800px) {
53 | display: none;
54 | }
55 |
56 | i {
57 | display: none;
58 | }
59 | }
60 | }
61 |
62 | &.is-loading {
63 | .book-header h1 {
64 | i {
65 | display: inline-block;
66 | }
67 | a {
68 | display: none;
69 | }
70 | }
71 | }
72 | &.with-summary {
73 | .book-header h1 {
74 | margin-left: 250px;
75 | }
76 | }
77 | &.without-animation {
78 | .book-header h1 {
79 | .transition(none) !important;
80 | }
81 | }
82 | &.color-theme-1{
83 | .book-header{
84 | color: @header-color-1;
85 | background: @header-background-1;
86 | .btn {
87 | color: @header-button-color-1;
88 | &:hover {
89 | color: @header-button-hover-color-1;
90 | background: @header-button-hover-background-1;
91 | }
92 | }
93 | }
94 | }
95 | &.color-theme-2{
96 | .book-header{
97 | color: @header-color-2;
98 | background: @header-background-2;
99 | .btn {
100 | color: @header-button-color-2;
101 | &:hover {
102 | color: @header-button-hover-color-2;
103 | background: @header-button-hover-background-2;
104 | }
105 | }
106 | }
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/_theme/templates/includes/book/summary.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 | {% if options.links.about !== false && (options.links.about != null || githubId) %}
7 |
8 | About the author
9 |
10 | {% endif %}
11 |
12 | {% if options.links.issues !== false && (options.links.issues != null || githubId) %}
13 |
14 | Questions and Issues
15 |
16 | {% endif %}
17 |
18 | {% if options.links.contribute !== false && (options.links.contribute != null || githubId) %}
19 |
20 | Edit and Contribute
21 |
22 | {% endif %}
23 |
24 | {% if options.links.contribute || options.links.issues || options.links.about || githubId %}
25 |
29 |
31 | {% for item in summary.chapters %}
32 |
33 | {% if item.path %}
34 |
35 | {{ item.level }}. {{ item.title }}
36 |
37 | {% else %}
38 | {{ item.level }}. {{ item.title }}
42 | {% for article in item.articles %}
43 |
44 | {% if article.path %}
45 |
46 | {{ article.level }}. {{ article.title }}
47 |
48 | {% else %}
49 | {{ article.level }}. {{ article.title }}
52 | {% endfor %}
53 |
54 | {% endif %}
55 |
56 | {% endfor %}
57 |
58 | {% if options.links.gitbook !== false %}
59 |
61 | Generated using GitBook
62 |
63 | {% endif %}
64 |
65 |
66 |
--------------------------------------------------------------------------------
/_theme/javascript/utils/execute.js:
--------------------------------------------------------------------------------
1 | define([
2 | "execute/javascript"
3 | ], function(javascript) {
4 | var LANGUAGES = {
5 | "javascript": javascript
6 | };
7 |
8 |
9 | var evalJS = function(lang, code, callback) {
10 | var ready = false;
11 | var finished = false;
12 |
13 | var finish = function() {
14 | if(finished) {
15 | return console.error('Already finished');
16 | }
17 | finished = true;
18 | return callback.apply(null, arguments);
19 | };
20 |
21 | var repl;
22 |
23 | // Handles all our events
24 | var eventHandler = function(data, eventType) {
25 | console.log([eventType, data]);
26 | switch(eventType) {
27 | case 'progress':
28 | // Update UI loading bar
29 | break;
30 | case 'timeout':
31 | finish(new Error(data));
32 | break;
33 | case 'result':
34 | finish(null, {
35 | value: data,
36 | type: 'result'
37 | });
38 | break;
39 | case 'error':
40 | if(ready) {
41 | return finish(null, {
42 | value: data,
43 | type: 'error'
44 | });
45 | }
46 | return finish(new Error(data));
47 | break
48 | case 'ready':
49 | // We're good to get results and stuff back now
50 | ready = true;
51 | // Eval our code now that the runtime is ready
52 | repl.eval(code);
53 | break;
54 | default:
55 | console.log('Unhandled event =', eventType, 'data =', data);
56 | }
57 | };
58 |
59 | repl = new lang.REPL({
60 | input: eventHandler,
61 | output: eventHandler,
62 | result: eventHandler,
63 | error: eventHandler,
64 | progress: eventHandler,
65 | timeout: {
66 | time: 30000,
67 | callback: eventHandler
68 | }
69 | });
70 |
71 | repl.loadLanguage(lang.id, eventHandler);
72 | };
73 |
74 | var execute = function(lang, solution, validation, context, callback) {
75 | // Language data
76 | var langd = LANGUAGES[lang];
77 |
78 | // Check language is supported
79 | if (!langd) return callback(new Error("Language '"+lang+"' not available for execution"));
80 |
81 | // Validate with validation code
82 | var code = [
83 | context,
84 | solution,
85 | langd.assertCode,
86 | validation,
87 | ].join(langd.sep);
88 | evalJS(langd, code, function(err, res) {
89 | if(err) return callback(err);
90 |
91 | if (res.type == "error") callback(new Error(res.value));
92 | else callback(null, res.value);
93 | });
94 | };
95 |
96 | return execute;
97 | });
98 |
--------------------------------------------------------------------------------
/_theme/stylesheets/book/progress.less:
--------------------------------------------------------------------------------
1 | /* Chrome, Safari, Opera */
2 | @-webkit-keyframes animate-loading {
3 | from {width: 0%;}
4 | to {}
5 | }
6 |
7 | /* Standard syntax */
8 | @keyframes animate-loading {
9 | from {width: 0%;}
10 | to {}
11 | }
12 |
13 | .book .book-body {
14 | .book-progress {
15 | height: @progress-height;
16 | width: 100%;
17 | position: relative;
18 | background: #fff;
19 | margin-bottom: 10px;
20 |
21 | .bar {
22 | height: @bar-height;
23 | position: @bar-position;
24 | right: @bar-right;
25 | left: @bar-left;
26 | top: @bar-top;
27 |
28 | background: @bar-background;
29 | border-radius: 5px;
30 | overflow: hidden;
31 |
32 | .inner {
33 | height: 100%;
34 | width: 0%;
35 |
36 | background: @bar-progress-background;
37 | -webkit-animation: animate-loading 1s; /* Chrome, Safari, Opera */
38 | animation: animate-loading 1s;
39 |
40 | .in-inner {
41 | height: 100%;
42 | width: 50%;
43 | }
44 | }
45 | }
46 |
47 | .chapters {
48 | display: @chapter-display;
49 |
50 | position: absolute;
51 | right: 20px + @chapter-size;
52 | left: 20px;
53 | top: 7px;
54 |
55 | .chapter {
56 | position: absolute;
57 | width: @chapter-size;
58 | height: @chapter-size;
59 | border-radius: @chapter-size;
60 |
61 | background: @bar-background;
62 | box-shadow: 0px 0px 1px #bbb;
63 |
64 | &.new-chapter {
65 |
66 | }
67 |
68 | &.done {
69 | background: @bar-progress-background;
70 | box-shadow: none;
71 | }
72 |
73 | @media (max-width: 800px) {
74 | display: none;
75 |
76 | &.new-chapter {
77 | display: block;
78 | }
79 | }
80 | }
81 | }
82 | }
83 | }
84 | .book.color-theme-1 .book-body {
85 | .book-progress {
86 | .bar {
87 | background: @bar-background-1;
88 | .inner {
89 | background: @bar-progress-background-1;
90 | }
91 | }
92 | }
93 | .chapters .chapter{
94 | background: @bar-background-1;
95 | &.done{
96 | background: @bar-progress-background-1;
97 | }
98 | }
99 | }
100 | .book.color-theme-2 .book-body {
101 | .book-progress {
102 | .bar {
103 | background: @bar-background-2;
104 | .inner {
105 | background: @bar-progress-background-2;
106 | }
107 | }
108 | }
109 | .chapters .chapter{
110 | background: @bar-background-2;
111 | &.done{
112 | background: @bar-progress-background-2;
113 | }
114 | }
115 | }
--------------------------------------------------------------------------------
/classes/index.md:
--------------------------------------------------------------------------------
1 | ## Classes
2 | JavaScript doesn’t have a traditional class system. Instead, it has prototypes. Prototypes can be extremely versatile and powerful, but they’re confusing to novices. Hence, CoffeeScript has created a traditional class system.
3 |
4 | Instead of repetitively attaching functions to a prototype, CoffeeScript provides a basic class structure that allows you to name your class, set the superclass, assign prototypal properties, and define the constructor, in a single assignable expression.
5 |
6 | Behind the scenes, CoffeeScript is using JavaScript's native prototype to create classes; adding a bit of syntactic sugar for static property inheritance and context persistence. As a developer all that's exposed to you is the class keyword.
7 |
8 | *CoffeeScript*
9 | ``` coffeescript
10 | class Guitar
11 | ```
12 | *JavaScript*
13 | ``` javascript
14 | var Guitar;
15 | Guitar = (function() {
16 | function Guitar() {}
17 | return Guitar;
18 | })();
19 | ```
20 | In the example above, Guitar is the name of the class, and also the name of the returned variable that you can use to
21 | create instances. Behind the scenes CoffeeScript is using constructor functions, which means you can instantiate classes
22 | using the new operator.
23 |
24 | *CoffeeScript*
25 | ``` coffeescript
26 | gibson = new Guitar()
27 | ```
28 | *JavaScript*
29 | ``` javascript
30 | var gibson;
31 | gibson = new Guitar();
32 | ```
33 |
34 | Defining constructors, functions that get invoked on instantiation, is simple, just use a function named ```constructor```.
35 | This works pretty similar to Python's ```__init__``` or Ruby's ```initialize``` methods . It prepares the new object for use,
36 | accepting arguments that the constructor uses to set required instance variables.
37 |
38 | *CoffeeScript*
39 | ``` coffeescript
40 | class Guitar
41 | constructor: (type) ->
42 | @type = type
43 | ```
44 | *JavaScript*
45 | ``` coffeescript
46 | var Guitar;
47 | Guitar = (function() {
48 | function Guitar(type) {
49 | this.type = type;
50 | }
51 | return Guitar;
52 | })();
53 | ```
54 |
55 | As you can see, constructor accepts ```type``` as an argument and sets it as an instance variable. CoffeeScript provides
56 | a shorthand for the common pattern of setting instance properties. By prefixing argument's with ```@```, CoffeeScript will
57 | automatically set the arguments as instance properties in the constructor. Indeed, this shorthand will also work for normal
58 | functions outside classes. The example below is equivalent to the last example, where we set the instance properties manually.
59 |
60 | *CoffeeScript*
61 | ``` coffeescript
62 | class Guitar
63 | constructor: (@type) ->
64 | ```
65 | *JavaScript*
66 | ``` javascript
67 | var Guitar;
68 | Guitar = (function() {
69 | function Guitar(type) {
70 | this.type = type;
71 | }
72 | return Guitar;
73 | })();
74 | ```
75 | So constructor is called when we use ```new``` keyword along with class name. Any arguments passed to a class on instantiation are proxied to the constructor function.
76 |
77 | *CoffeeScript*
78 | ``` coffeescript
79 | gibson = new Guitar("Les Paul")
80 | alert "Guitar is a #{gibson.type}"
81 | ```
82 | *JavaScript*
83 | ``` javascript
84 | var gibson;
85 | gibson = new Guitar("Les Paul");
86 | alert("Guitar is a " + gibson.type);
87 | ```
88 |
--------------------------------------------------------------------------------
/syntax/index.md:
--------------------------------------------------------------------------------
1 | ## Scoping and variables safety
2 |
3 | In CoffeeScript you don't have direct access to the var keyword, it's impossible to shadow an outer variable on purpose, you may only refer to it. So be careful that you're not reusing the name of an external variable accidentally, if you're writing a deeply nested function.
4 |
5 | Although suppressed within this documentation for clarity, all CoffeeScript output is wrapped in an anonymous function.
6 | ``` javascript
7 | (function(){
8 |
9 | // your code goes here
10 |
11 | })();
12 | ```
13 | This safety wrapper, combined with the automatic generation of the var keyword, make it exceedingly difficult to pollute the global namespace by accident.
14 |
15 | If you'd like to create top-level variables for other scripts to use, attach them as properties on window, or on the exports object in CommonJS. The existential operator (covered below), gives you a reliable way to figure out where to add them; if you're targeting both CommonJS and the browser: `exports ? this`
16 |
17 | ## Comments
18 | Comments are in the same format as Ruby comments, starting with a hash character.
19 | ``` coffeescript
20 | # Commented line of code
21 | ```
22 | Multiline comments are also supported, and are brought forward to the generated JavaScript. They're enclosed by three hash characters.
23 | ``` coffeescript
24 | ###
25 | Commented block of code
26 | ###
27 | ```
28 |
29 | ## Block Strings
30 |
31 | Multiline strings are allowed in CoffeeScript. Lines are joined by a single space unless they end with a backslash. Indentation is ignored.
32 |
33 | ``` coffeescript
34 | quote = "They’d say “if ya play the record backwards,
35 | you can hear evil tings like grrrr!” and I would think,
36 | “Jeez, I didn’t know the devil sounded like that.
37 | I thought he was coherent, like the rest of us
38 | - Brian Johnson of ACDC - 2001"
39 | ```
40 |
41 | Block strings can be used to hold formatted or indentation-sensitive text (or, if you just don't feel like escaping
42 | quotes and apostrophes). The indentation level that begins the block is maintained throughout, so you can keep it all
43 | aligned with the body of your code.
44 |
45 | ``` coffeescript
46 | quote = """
47 |
48 | We believed that anything that was worth doing was worth overdoing.
49 |
50 | """
51 | ```
52 |
53 | Double-quoted block strings, like other double-quoted strings, allow interpolation.
54 |
55 | ## Block Regular Expressions
56 |
57 | Similar to block strings and comments, CoffeeScript supports block regexes — extended regular expressions that ignore
58 | internal whitespace and can contain comments and interpolation. Modeled after Perl's ```/x``` modifier, CoffeeScript's
59 | block regexes are delimited by ```///``` and go a long way towards making complex regular expressions readable. To quote from the
60 | CoffeeScript source:
61 |
62 | ``` coffeescript
63 | OPERATOR = /// ^ (
64 | ?: [-=]> # function
65 | | [-+*/%<>&|^!?=]= # compound assign / compare
66 | | >>>=? # zero-fill right shift
67 | | ([-+:])\1 # doubles
68 | | ([&|<>])\2=? # logic / shift
69 | | \?\. # soak access
70 | | \.{2,3} # range or splat
71 | ) ///
72 | ```
73 |
74 | ``` javascript
75 | var OPERATOR;
76 | OPERATOR = /^(?:[-=]>|[-+*\/%<>&|^!?=]=|>>>=?|([-+:])\1|([&|<>])\2=?|\?\.|\.{2,3})/;
77 | ```
78 |
--------------------------------------------------------------------------------
/_theme/stylesheets/book/body.less:
--------------------------------------------------------------------------------
1 | .book {
2 | position: relative;
3 | width: 100%;
4 | height: 100%;
5 |
6 | .book-body {
7 | position: absolute;
8 | top: @header-height;
9 | right: 0px;
10 | left: 0px;
11 | bottom: 0px;
12 |
13 | color: @page-color;
14 | background: @body-background;
15 | .transition(left 0.5s ease);
16 |
17 | .body-inner {
18 | position: absolute;
19 | top: 0px;
20 | right: 0px;
21 | left: 0px;
22 | bottom: 0px;
23 | overflow-y: auto;
24 | }
25 |
26 | .page-wrapper {
27 | position: relative;
28 | outline: none;
29 |
30 | .page-inner {
31 | max-width: 800px;
32 | margin: 0px auto;
33 |
34 | section {
35 | margin: 0px 0px;
36 | padding: 5px 15px;
37 |
38 | background: @page-background;
39 | border-radius: 2px;
40 | line-height: 1.5em;
41 | }
42 |
43 | .btn-group {
44 | .btn {
45 | border-radius: 0px;
46 | background: #eee;
47 | border: 0px;
48 | }
49 | }
50 | }
51 | }
52 |
53 | @media (max-width: @mobileMaxWidth) {
54 | overflow-y: auto;
55 |
56 | .body-inner {
57 | position: static;
58 | padding-bottom: 20px;
59 | min-height: calc(~"100% - 57px")
60 | }
61 | }
62 | &.font-size-0{
63 | font-size:@s-font-size;
64 | }
65 | &.font-size-1{
66 | font-size:@m-font-size;
67 | }
68 | &.font-size-2{
69 | font-size:@l-font-size;
70 | }
71 | &.font-size-3{
72 | font-size:@xl-font-size;
73 | }
74 | &.font-size-4{
75 | font-size:@xxl-font-size;
76 | }
77 |
78 | &.font-family-0{
79 | font-family: @font-family-serif;
80 | }
81 | &.font-family-1{
82 | font-family: @font-family-sans;
83 | }
84 | }
85 |
86 | &.with-summary {
87 | @media (min-width: 800px) {
88 | .book-body {
89 | left: 250px;
90 | }
91 | }
92 | }
93 |
94 | &.without-animation {
95 | .book-body {
96 | .transition(none) !important;
97 | }
98 | }
99 | &.color-theme-1{
100 | .book-body {
101 | color: @page-color-1;
102 | background: @body-background-1;
103 | .page-wrapper {
104 | .page-inner {
105 | section{
106 | background: @page-background-1;
107 | }
108 | }
109 | }
110 | }
111 | }
112 | &.color-theme-2{
113 | .book-body {
114 | color: @page-color-2;
115 | background: @body-background-2;
116 | .page-wrapper {
117 | .page-inner {
118 | section{
119 | background: @page-background-2;
120 | }
121 | }
122 | }
123 | }
124 | }
125 | }
--------------------------------------------------------------------------------
/classes/inheritance.md:
--------------------------------------------------------------------------------
1 | ## Inheritance & Super
2 |
3 | It wouldn't be a proper class implementation without some form of inheritance, and CoffeeScript doesn't disappoint. You can inherit from another class by using the extends keyword.
4 |
5 | *CoffeeScript*
6 | ``` coffeescript
7 | class Instrument
8 | constructor: (@type)->
9 |
10 | sound: ->
11 | console.log("#{@type} sound")
12 |
13 | class Guitar extends Instrument
14 |
15 | constructor: ->
16 | super("Guitar")
17 |
18 | guitar = new Guitar()
19 | guitar.sound() # Guitar sound
20 | ```
21 | *JavaScript*
22 | ``` javascript
23 | var Guitar, Instrument, guitar,
24 | __hasProp = {}.hasOwnProperty,
25 | __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
26 | Instrument = (function() {
27 | function Instrument(type) {
28 | this.type = type;
29 | }
30 | Instrument.prototype.sound = function() {
31 | return console.log("" + this.type + " sound");
32 | };
33 | return Instrument;
34 | })();
35 |
36 | Guitar = (function(_super) {
37 | __extends(Guitar, _super);
38 | function Guitar() {
39 | Guitar.__super__.constructor.call(this, "Guitar");
40 | }
41 | return Guitar;
42 | })(Instrument);
43 |
44 | guitar = new Guitar();
45 | guitar.sound(); // Guitar sound
46 | ```
47 |
48 | This class extends Guitar, which means that it has all the characteristics of the parent class. The constructor and profit functions are exactly the same, the only difference is that you make a call to Fender instead of Guitar when constructing an instance.
49 |
50 | You'll notice that in the example above, we're using the ```super()``` keyword. Behind the scenes, this is translated into a function call on the class' parent prototype, invoked in the current context. In this case, it'll be Parrot.__super__.constructor.call(this, "Parrot");. In practice, this will have exactly the same effect as invoking super in Ruby or Python, invoking the overridden inherited function.
51 |
52 | Unless you override the constructor, by default CoffeeScript will invoke the parent's constructor when instances are created.
53 |
54 | CoffeeScript uses prototypal inheritance to automatically inherit all of a class's instance properties. This ensures that classes are dynamic; even if you add properties to a parent class after a child has been created, the property will still be propagated to all of its inherited children.
55 |
56 | *CoffeeScript*
57 | ``` coffeescript
58 | class Instrument
59 | constructor: (@type)->
60 |
61 | class Guitar extends Instrument
62 |
63 | Instrument::acoustic = true
64 |
65 | guitar = new Guitar()
66 | console.log "Acoustic guitar" if guitar.acoustic
67 | ```
68 | *JavaScript*
69 | ``` javascript
70 | var Guitar, Instrument, guitar,
71 | __hasProp = {}.hasOwnProperty,
72 | __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
73 | Instrument = (function() {
74 | function Instrument(type) {
75 | this.type = type;
76 | }
77 | return Instrument;
78 | })();
79 |
80 | Guitar = (function(_super) {
81 | __extends(Guitar, _super);
82 | function Guitar() {
83 | return Guitar.__super__.constructor.apply(this, arguments);
84 | }
85 | return Guitar;
86 | })(Instrument);
87 | Instrument.prototype.acoustic = true;
88 |
89 | guitar = new Guitar();
90 | if (guitar.acoustic) {
91 | console.log("Acoustic guitar");
92 | }
93 | ```
94 |
--------------------------------------------------------------------------------
/_theme/stylesheets/vendors/bootstrap/input-groups.less:
--------------------------------------------------------------------------------
1 | //
2 | // Input groups
3 | // --------------------------------------------------
4 |
5 | // Base styles
6 | // -------------------------
7 | .input-group {
8 | position: relative; // For dropdowns
9 | display: table;
10 | border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
11 |
12 | // Undo padding and float of grid classes
13 | &.col {
14 | float: none;
15 | padding-left: 0;
16 | padding-right: 0;
17 | }
18 |
19 | .form-control {
20 | width: 100%;
21 | margin-bottom: 0;
22 | }
23 | }
24 |
25 | // Sizing options
26 | //
27 | // Remix the default form control sizing classes into new ones for easier
28 | // manipulation.
29 |
30 | .input-group-lg > .form-control,
31 | .input-group-lg > .input-group-addon,
32 | .input-group-lg > .input-group-btn > .btn { .input-lg(); }
33 | .input-group-sm > .form-control,
34 | .input-group-sm > .input-group-addon,
35 | .input-group-sm > .input-group-btn > .btn { .input-sm(); }
36 |
37 |
38 | // Display as table-cell
39 | // -------------------------
40 | .input-group-addon,
41 | .input-group-btn,
42 | .input-group .form-control {
43 | display: table-cell;
44 |
45 | &:not(:first-child):not(:last-child) {
46 | border-radius: 0;
47 | }
48 | }
49 | // Addon and addon wrapper for buttons
50 | .input-group-addon,
51 | .input-group-btn {
52 | width: 1%;
53 | white-space: nowrap;
54 | vertical-align: middle; // Match the inputs
55 | }
56 |
57 | // Text input groups
58 | // -------------------------
59 | .input-group-addon {
60 | padding: @padding-base-vertical @padding-base-horizontal;
61 | font-size: @font-size-base;
62 | font-weight: normal;
63 | line-height: 1;
64 | text-align: center;
65 | background-color: @input-group-addon-bg;
66 | border: 1px solid @input-group-addon-border-color;
67 | border-radius: @border-radius-base;
68 |
69 | // Sizing
70 | &.input-sm {
71 | padding: @padding-small-vertical @padding-small-horizontal;
72 | font-size: @font-size-small;
73 | border-radius: @border-radius-small;
74 | }
75 | &.input-lg {
76 | padding: @padding-large-vertical @padding-large-horizontal;
77 | font-size: @font-size-large;
78 | border-radius: @border-radius-large;
79 | }
80 |
81 | // Nuke default margins from checkboxes and radios to vertically center within.
82 | input[type="radio"],
83 | input[type="checkbox"] {
84 | margin-top: 0;
85 | }
86 | }
87 |
88 | // Reset rounded corners
89 | .input-group .form-control:first-child,
90 | .input-group-addon:first-child,
91 | .input-group-btn:first-child > .btn,
92 | .input-group-btn:first-child > .dropdown-toggle,
93 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
94 | .border-right-radius(0);
95 | }
96 | .input-group-addon:first-child {
97 | border-right: 0;
98 | }
99 | .input-group .form-control:last-child,
100 | .input-group-addon:last-child,
101 | .input-group-btn:last-child > .btn,
102 | .input-group-btn:last-child > .dropdown-toggle,
103 | .input-group-btn:first-child > .btn:not(:first-child) {
104 | .border-left-radius(0);
105 | }
106 | .input-group-addon:last-child {
107 | border-left: 0;
108 | }
109 |
110 | // Button input groups
111 | // -------------------------
112 | .input-group-btn {
113 | position: relative;
114 | white-space: nowrap;
115 | }
116 | .input-group-btn > .btn {
117 | position: relative;
118 | // Jankily prevent input button groups from wrapping
119 | + .btn {
120 | margin-left: -4px;
121 | }
122 | // Bring the "active" button to the front
123 | &:hover,
124 | &:active {
125 | z-index: 2;
126 | }
127 | }
128 |
--------------------------------------------------------------------------------
/syntax/operators_and_alises.md:
--------------------------------------------------------------------------------
1 | ## Operators and aliases
2 |
3 | CoffeeScript includes some useful aliases to provide you with shorthands. First one is `@`, which is an alias for `this` keyword in JavaScript.
4 |
5 | *CoffeeScript*
6 | ``` coffeescript
7 | goByGuitar = ->
8 | @guitar = true
9 | ```
10 | *JavaScript*
11 | ``` javascript
12 | var goByGuitar;
13 | goByGuitar = function() {
14 | return this.guitar = true;
15 | };
16 | ```
17 |
18 | Another useful alias shortens your expression is ::, which is an alias for prototype.
19 |
20 | *CoffeeScript*
21 | ``` coffeescript
22 | Band::members = -> @members.length
23 | ```
24 | *JavaScript*
25 | ``` javascript
26 | Band.prototype.members = function() {
27 | return this.members.length;
28 | };
29 | ```
30 |
31 | Because the `==` operator frequently causes undesirable coercion, is intransitive, and has a different meaning than in other languages, CoffeeScript compiles `==` into `===`, and `!=` into `!==`.
32 |
33 | CoffeeScript also provides some human readable aliases for this operators: you can use `is` instead of `==` and `isnt` instead of `!=`. And also you can use `not` as an alias for `!`.
34 |
35 | *CoffeeScript*
36 | ``` coffeescript
37 | 'life' is 'life' # true
38 | 'iron man' isnt 'sandman' # true
39 | true is not false # true
40 | ```
41 | *JavaScript*
42 | ``` javascript
43 | 'life' === 'life';
44 | 'iron man' !== 'sandman';
45 | true === !false;
46 | ```
47 | Logical operators aliases are pretty straightforward - `and` compiles to `&&`, and `or` into `||`.
48 | You can also use `in` to test for array presence, and `of` to test for JavaScript object-key presence.
49 |
50 | ## The Existential Operator
51 | It's a little difficult to check for the existence of a variable in JavaScript. `if (variable) ...`
52 | comes close, but fails for zero, the empty string, and `false`.
53 |
54 | ### Existence
55 | CoffeeScript's existential operator `?` returns `true` unless a variable is `null` or `undefined`, which makes it analogous to Ruby's `nil?`
56 |
57 | Behind the scenes CoffeeScript will check previously defined variables like this:
58 |
59 | ``` javascript
60 | variable != null;
61 | ```
62 | and if variable haven't been defined previously like this:
63 | ``` javascript
64 | typeof variable !== "undefined" && variable !== null;
65 | ```
66 | ### Conditional assignment
67 | It can also be used for safer conditional assignment than `||=` provides, for cases where you may be handling numbers or strings.
68 | ``` coffeescript
69 | band = null
70 | band ?= 'Stone Sour'
71 | ```
72 | ### Or operator
73 | You can also use it in place of the `||` operator:
74 | ``` coffeescript
75 | band = missingName ? 'Halloween'
76 | ```
77 |
78 | ### Null check
79 | You can skip a null check before accessing a property by placing the existential operator right before it.
80 | Use `?.` instead of the dot accessor `.` in cases where the base value may be `null` or `undefined`.
81 | If all of the properties exist then you'll get the expected result, if the chain is broken, `undefined` is
82 | returned instead of the TypeError that would be raised otherwise.
83 |
84 | *CoffeeScript*
85 | ``` coffeescript
86 | singer.playTheGuitar()?.solo()
87 | ```
88 | *JavaScript*
89 | ``` javascript
90 | var _ref;
91 | if ((_ref = singer.playTheGuitar()) != null) {
92 | _ref.solo();
93 | }
94 | ```
95 | ### Callable check
96 | Similarly you can check that a property is actually a function, and callable, by placing the existential
97 | operator right before the parentheses. If the property doesn't exist, or isn't a function, it simply won't get called.
98 |
99 | *CoffeeScript*
100 | ``` coffeescript
101 | guitarist.sing().chorus?()
102 | ```
103 | *JavaScript*
104 | ``` javascript
105 | var _base;
106 | if (typeof (_base = guitarist.sing()).chorus === "function") {
107 | _base.chorus();
108 | }
109 | ```
110 |
--------------------------------------------------------------------------------
/_theme/stylesheets/vendors/bootstrap/popovers.less:
--------------------------------------------------------------------------------
1 | //
2 | // Popovers
3 | // --------------------------------------------------
4 |
5 |
6 | .popover {
7 | position: absolute;
8 | top: 0;
9 | left: 0;
10 | z-index: @zindex-popover;
11 | display: none;
12 | max-width: @popover-max-width;
13 | padding: 1px;
14 | text-align: left; // Reset given new insertion method
15 | background-color: @popover-bg;
16 | background-clip: padding-box;
17 | border: 1px solid @popover-fallback-border-color;
18 | border: 1px solid @popover-border-color;
19 | border-radius: @border-radius-large;
20 | .box-shadow(0 5px 10px rgba(0,0,0,.2));
21 |
22 | // Overrides for proper insertion
23 | white-space: normal;
24 |
25 | // Offset the popover to account for the popover arrow
26 | &.top { margin-top: -10px; }
27 | &.right { margin-left: 10px; }
28 | &.bottom { margin-top: 10px; }
29 | &.left { margin-left: -10px; }
30 | }
31 |
32 | .popover-title {
33 | margin: 0; // reset heading margin
34 | padding: 8px 14px;
35 | font-size: @font-size-base;
36 | font-weight: normal;
37 | line-height: 18px;
38 | background-color: @popover-title-bg;
39 | border-bottom: 1px solid darken(@popover-title-bg, 5%);
40 | border-radius: 5px 5px 0 0;
41 | }
42 |
43 | .popover-content {
44 | padding: 9px 14px;
45 | }
46 |
47 | // Arrows
48 | //
49 | // .arrow is outer, .arrow:after is inner
50 |
51 | .popover .arrow {
52 | &,
53 | &:after {
54 | position: absolute;
55 | display: block;
56 | width: 0;
57 | height: 0;
58 | border-color: transparent;
59 | border-style: solid;
60 | }
61 | }
62 | .popover .arrow {
63 | border-width: @popover-arrow-outer-width;
64 | }
65 | .popover .arrow:after {
66 | border-width: @popover-arrow-width;
67 | content: "";
68 | }
69 |
70 | .popover {
71 | &.top .arrow {
72 | left: 50%;
73 | margin-left: -@popover-arrow-outer-width;
74 | border-bottom-width: 0;
75 | border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
76 | border-top-color: @popover-arrow-outer-color;
77 | bottom: -@popover-arrow-outer-width;
78 | &:after {
79 | content: " ";
80 | bottom: 1px;
81 | margin-left: -@popover-arrow-width;
82 | border-bottom-width: 0;
83 | border-top-color: @popover-arrow-color;
84 | }
85 | }
86 | &.right .arrow {
87 | top: 50%;
88 | left: -@popover-arrow-outer-width;
89 | margin-top: -@popover-arrow-outer-width;
90 | border-left-width: 0;
91 | border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
92 | border-right-color: @popover-arrow-outer-color;
93 | &:after {
94 | content: " ";
95 | left: 1px;
96 | bottom: -@popover-arrow-width;
97 | border-left-width: 0;
98 | border-right-color: @popover-arrow-color;
99 | }
100 | }
101 | &.bottom .arrow {
102 | left: 50%;
103 | margin-left: -@popover-arrow-outer-width;
104 | border-top-width: 0;
105 | border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
106 | border-bottom-color: @popover-arrow-outer-color;
107 | top: -@popover-arrow-outer-width;
108 | &:after {
109 | content: " ";
110 | top: 1px;
111 | margin-left: -@popover-arrow-width;
112 | border-top-width: 0;
113 | border-bottom-color: @popover-arrow-color;
114 | }
115 | }
116 |
117 | &.left .arrow {
118 | top: 50%;
119 | right: -@popover-arrow-outer-width;
120 | margin-top: -@popover-arrow-outer-width;
121 | border-right-width: 0;
122 | border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
123 | border-left-color: @popover-arrow-outer-color;
124 | &:after {
125 | content: " ";
126 | right: 1px;
127 | border-right-width: 0;
128 | border-left-color: @popover-arrow-color;
129 | bottom: -@popover-arrow-width;
130 | }
131 | }
132 |
133 | }
134 |
--------------------------------------------------------------------------------
/_theme/stylesheets/vendors/bootstrap/modals.less:
--------------------------------------------------------------------------------
1 | //
2 | // Modals
3 | // --------------------------------------------------
4 |
5 | // .modal-open - body class for killing the scroll
6 | // .modal - container to scroll within
7 | // .modal-dialog - positioning shell for the actual modal
8 | // .modal-content - actual modal w/ bg and corners and shit
9 |
10 | // Kill the scroll on the body
11 | .modal-open {
12 | overflow: hidden;
13 |
14 |
15 | // Account for hiding of scrollbar
16 | body&,
17 | .navbar-fixed-top,
18 | .navbar-fixed-bottom {
19 | margin-right: 15px
20 | }
21 | }
22 |
23 | // Container that the modal scrolls within
24 | .modal {
25 | display: none;
26 | overflow: auto;
27 | overflow-y: scroll;
28 | position: fixed;
29 | top: 0;
30 | right: 0;
31 | bottom: 0;
32 | left: 0;
33 | z-index: @zindex-modal-background;
34 |
35 | // When fading in the modal, animate it to slide down
36 | &.fade .modal-dialog {
37 | .translate(0, -25%);
38 | .transition-transform(~"0.3s ease-out");
39 | }
40 | &.in .modal-dialog { .translate(0, 0)}
41 | }
42 |
43 | // Shell div to position the modal with bottom padding
44 | .modal-dialog {
45 | margin-left: auto;
46 | margin-right: auto;
47 | width: auto;
48 | padding: 10px;
49 | z-index: (@zindex-modal-background + 10);
50 | }
51 |
52 | // Actual modal
53 | .modal-content {
54 | position: relative;
55 | background-color: @modal-content-bg;
56 | border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
57 | border: 1px solid @modal-content-border-color;
58 | border-radius: @border-radius-large;
59 | .box-shadow(0 3px 9px rgba(0,0,0,.5));
60 | background-clip: padding-box;
61 | // Remove focus outline from opened modal
62 | outline: none;
63 | }
64 |
65 | // Modal background
66 | .modal-backdrop {
67 | position: fixed;
68 | top: 0;
69 | right: 0;
70 | bottom: 0;
71 | left: 0;
72 | z-index: (@zindex-modal-background - 10);
73 | background-color: @modal-backdrop-bg;
74 | // Fade for backdrop
75 | &.fade { .opacity(0); }
76 | &.in { .opacity(.5); }
77 | }
78 |
79 | // Modal header
80 | // Top section of the modal w/ title and dismiss
81 | .modal-header {
82 | padding: @modal-title-padding;
83 | border-bottom: 1px solid @modal-header-border-color;
84 | min-height: (@modal-title-padding + @modal-title-line-height);
85 | }
86 | // Close icon
87 | .modal-header .close {
88 | margin-top: -2px;
89 | }
90 |
91 | // Title text within header
92 | .modal-title {
93 | margin: 0;
94 | line-height: @modal-title-line-height;
95 | }
96 |
97 | // Modal body
98 | // Where all modal content resides (sibling of .modal-header and .modal-footer)
99 | .modal-body {
100 | position: relative;
101 | padding: @modal-inner-padding;
102 | }
103 |
104 | // Footer (for actions)
105 | .modal-footer {
106 | margin-top: 15px;
107 | padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
108 | text-align: right; // right align buttons
109 | border-top: 1px solid @modal-footer-border-color;
110 | .clearfix(); // clear it in case folks use .pull-* classes on buttons
111 |
112 | // Properly space out buttons
113 | .btn + .btn {
114 | margin-left: 5px;
115 | margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
116 | }
117 | // but override that for button groups
118 | .btn-group .btn + .btn {
119 | margin-left: -1px;
120 | }
121 | // and override it for block buttons as well
122 | .btn-block + .btn-block {
123 | margin-left: 0;
124 | }
125 | }
126 |
127 | // Scale up the modal
128 | @media screen and (min-width: @screen-tablet) {
129 |
130 | .modal-dialog {
131 | left: 50%;
132 | right: auto;
133 | width: 600px;
134 | padding-top: 30px;
135 | padding-bottom: 30px;
136 | }
137 | .modal-content {
138 | .box-shadow(0 5px 15px rgba(0,0,0,.5));
139 | }
140 |
141 | }
142 |
--------------------------------------------------------------------------------
/_theme/javascript/core/font-settings.js:
--------------------------------------------------------------------------------
1 | define([
2 | "jQuery",
3 | "utils/storage"
4 | ], function($, storage) {
5 | var fontState;
6 |
7 | var togglePopover = function(e) {
8 | var $dropdown = $("#font-settings-wrapper .dropdown-menu");
9 |
10 | $dropdown.toggleClass("open");
11 | e.stopPropagation();
12 | e.preventDefault();
13 | };
14 |
15 | var closePopover = function(e) {
16 | var $dropdown = $("#font-settings-wrapper .dropdown-menu");
17 |
18 | $dropdown.removeClass("open");
19 | };
20 |
21 | var enlargeFontSize = function(e){
22 | var $bookBody = $(".book-body");
23 |
24 | if (fontState.size < 4){
25 | $bookBody.toggleClass("font-size-"+fontState.size, false);
26 | fontState.size++;
27 |
28 | $bookBody.toggleClass("font-size-"+fontState.size, true);
29 | fontState.save();
30 | }
31 | };
32 |
33 | var reduceFontSize = function(e){
34 | var $bookBody = $(".book-body");
35 |
36 | if (fontState.size > 0){
37 | $bookBody.toggleClass("font-size-"+fontState.size);
38 | fontState.size--;
39 |
40 | $bookBody.toggleClass("font-size-"+fontState.size);
41 | fontState.save();
42 | }
43 | };
44 |
45 | var changeFontFamily = function(){
46 | var $bookBody = $(".book-body");
47 | var index = $(this).data("font");
48 |
49 | $bookBody.toggleClass("font-family-"+fontState.family);
50 | $(".font-settings .font-family-list li:nth-child("+(fontState.family+1)+")")
51 | .removeClass("active");
52 |
53 | fontState.family = index;
54 | $bookBody.toggleClass("font-family-"+fontState.family);
55 | $(this).addClass("active");
56 | fontState.save();
57 | };
58 |
59 | var changeColorTheme = function(){
60 | var $book = $(".book");
61 | var index = $(this).data("theme");
62 |
63 | if (fontState.theme !== 0)
64 | $book.removeClass("color-theme-"+fontState.theme);
65 |
66 | fontState.theme = index;
67 | if (fontState.theme !== 0)
68 | $book.addClass("color-theme-"+fontState.theme);
69 |
70 | fontState.save();
71 | };
72 |
73 | var init = function() {
74 | var $toggle, $bookBody, $dropdown, $book;
75 |
76 | //Find DOM elements.
77 | $book = $(".book");
78 | $toggle = $(".book-header .toggle-font-settings");
79 | $dropdown = $("#font-settings-wrapper .dropdown-menu");
80 | $bookBody = $(".book-body");
81 |
82 | //Instantiate font state object
83 | fontState = storage.get("fontState", {
84 | size:1,
85 | family:0,
86 | theme:0
87 | });
88 | fontState.save = function(){
89 | storage.set("fontState",fontState);
90 | };
91 |
92 | $bookBody.addClass("font-size-"+fontState.size);
93 | $bookBody.addClass("font-family-"+fontState.family);
94 |
95 | $(".font-settings .font-family-list li:nth-child("+(fontState.family+1)+")").addClass("active");
96 |
97 | if(fontState.theme !== 0)
98 | $book.addClass("color-theme-"+fontState.theme);
99 |
100 | //Add event listeners
101 | $(document).on('click', "#enlarge-font-size", enlargeFontSize);
102 | $(document).on('click', "#reduce-font-size", reduceFontSize);
103 |
104 | $(document).on('click', "#font-settings-wrapper .font-family-list li", changeFontFamily);
105 | $(document).on('click', "#font-settings-wrapper .color-theme-list button", changeColorTheme);
106 |
107 | $(document).on('click', ".book-header .toggle-font-settings", togglePopover);
108 | $(document).on('click', "#font-settings-wrapper .dropdown-menu", function(e){ e.stopPropagation(); });
109 | $(document).on("click", closePopover);
110 | };
111 |
112 | return {
113 | init: init
114 | }
115 | });
--------------------------------------------------------------------------------
/_theme/stylesheets/vendors/bootstrap/buttons.less:
--------------------------------------------------------------------------------
1 | //
2 | // Buttons
3 | // --------------------------------------------------
4 |
5 |
6 | // Base styles
7 | // --------------------------------------------------
8 |
9 | // Core styles
10 | .btn {
11 | display: inline-block;
12 | padding: @padding-base-vertical @padding-base-horizontal;
13 | margin-bottom: 0; // For input.btn
14 | font-size: @font-size-base;
15 | font-weight: @btn-font-weight;
16 | line-height: @line-height-base;
17 | text-align: center;
18 | vertical-align: middle;
19 | cursor: pointer;
20 | border: 1px solid transparent;
21 | border-radius: @border-radius-base;
22 | white-space: nowrap;
23 | .user-select(none);
24 |
25 | &:focus {
26 | .tab-focus();
27 | }
28 |
29 | &:hover,
30 | &:focus {
31 | color: @btn-default-color;
32 | text-decoration: none;
33 | }
34 |
35 | &:active,
36 | &.active {
37 | outline: 0;
38 | background-image: none;
39 | .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
40 | }
41 |
42 | &.disabled,
43 | &[disabled],
44 | fieldset[disabled] & {
45 | cursor: not-allowed;
46 | pointer-events: none; // Future-proof disabling of clicks
47 | .opacity(.65);
48 | .box-shadow(none);
49 | }
50 |
51 | }
52 |
53 |
54 | // Alternate buttons
55 | // --------------------------------------------------
56 |
57 | .btn-default {
58 | .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
59 | }
60 | .btn-primary {
61 | .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
62 | }
63 | // Warning appears as orange
64 | .btn-warning {
65 | .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
66 | }
67 | // Danger and error appear as red
68 | .btn-danger {
69 | .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
70 | }
71 | // Success appears as green
72 | .btn-success {
73 | .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
74 | }
75 | // Info appears as blue-green
76 | .btn-info {
77 | .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
78 | }
79 |
80 |
81 | // Link buttons
82 | // -------------------------
83 |
84 | // Make a button look and behave like a link
85 | .btn-link {
86 | color: @link-color;
87 | font-weight: normal;
88 | cursor: pointer;
89 | border-radius: 0;
90 |
91 | &,
92 | &:active,
93 | &[disabled],
94 | fieldset[disabled] & {
95 | background-color: transparent;
96 | .box-shadow(none);
97 | }
98 | &,
99 | &:hover,
100 | &:focus,
101 | &:active {
102 | border-color: transparent;
103 | }
104 | &:hover,
105 | &:focus {
106 | color: @link-hover-color;
107 | text-decoration: underline;
108 | background-color: transparent;
109 | }
110 | &[disabled],
111 | fieldset[disabled] & {
112 | &:hover,
113 | &:focus {
114 | color: @btn-link-disabled-color;
115 | text-decoration: none;
116 | }
117 | }
118 | }
119 |
120 |
121 | // Button Sizes
122 | // --------------------------------------------------
123 |
124 | .btn-lg {
125 | // line-height: ensure even-numbered height of button next to large input
126 | .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
127 | }
128 | .btn-sm,
129 | .btn-xs {
130 | // line-height: ensure proper height of button next to small input
131 | .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
132 | }
133 | .btn-xs {
134 | padding: 1px 5px;
135 | }
136 |
137 |
138 | // Block button
139 | // --------------------------------------------------
140 |
141 | .btn-block {
142 | display: block;
143 | width: 100%;
144 | padding-left: 0;
145 | padding-right: 0;
146 | }
147 |
148 | // Vertically space out multiple block buttons
149 | .btn-block + .btn-block {
150 | margin-top: 5px;
151 | }
152 |
153 | // Specificity overrides
154 | input[type="submit"],
155 | input[type="reset"],
156 | input[type="button"] {
157 | &.btn-block {
158 | width: 100%;
159 | }
160 | }
161 |
--------------------------------------------------------------------------------
/_theme/stylesheets/vendors/bootstrap/panels.less:
--------------------------------------------------------------------------------
1 | //
2 | // Panels
3 | // --------------------------------------------------
4 |
5 |
6 | // Base class
7 | .panel {
8 | margin-bottom: @line-height-computed;
9 | background-color: @panel-bg;
10 | border: 1px solid transparent;
11 | border-radius: @panel-border-radius;
12 | .box-shadow(0 1px 1px rgba(0,0,0,.05));
13 | }
14 |
15 | // Panel contents
16 | .panel-body {
17 | padding: 15px;
18 | .clearfix();
19 | }
20 |
21 |
22 | // List groups in panels
23 | //
24 | // By default, space out list group content from panel headings to account for
25 | // any kind of custom content between the two.
26 |
27 | .panel {
28 | > .list-group {
29 | margin-bottom: 0;
30 |
31 | .list-group-item {
32 | border-width: 1px 0;
33 |
34 | // Remove border radius for top one
35 | &:first-child {
36 | .border-top-radius(0);
37 | }
38 | // But keep it for the last one
39 | &:last-child {
40 | border-bottom: 0;
41 | }
42 | }
43 | }
44 | }
45 | // Collapse space between when there's no additional content.
46 | .panel-heading + .list-group {
47 | .list-group-item:first-child {
48 | border-top-width: 0;
49 | }
50 | }
51 |
52 |
53 | // Tables in panels
54 | //
55 | // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
56 | // watch it go full width.
57 |
58 | .panel {
59 | > .table {
60 | margin-bottom: 0;
61 | }
62 | > .panel-body + .table {
63 | border-top: 1px solid @table-border-color;
64 | }
65 | }
66 |
67 |
68 | // Optional heading
69 | .panel-heading {
70 | padding: 10px 15px;
71 | border-bottom: 1px solid transparent;
72 | .border-top-radius(@panel-border-radius - 1);
73 | }
74 |
75 | // Within heading, strip any `h*` tag of it's default margins for spacing.
76 | .panel-title {
77 | margin-top: 0;
78 | margin-bottom: 0;
79 | font-size: ceil((@font-size-base * 1.125));
80 | > a {
81 | color: inherit;
82 | }
83 | }
84 |
85 | // Optional footer (stays gray in every modifier class)
86 | .panel-footer {
87 | padding: 10px 15px;
88 | background-color: @panel-footer-bg;
89 | border-top: 1px solid @panel-inner-border;
90 | .border-bottom-radius(@panel-border-radius - 1);
91 | }
92 |
93 |
94 | // Collapsable panels (aka, accordion)
95 | //
96 | // Wrap a series of panels in `.panel-group` to turn them into an accordion with
97 | // the help of our collapse JavaScript plugin.
98 |
99 | .panel-group {
100 | // Tighten up margin so it's only between panels
101 | .panel {
102 | margin-bottom: 0;
103 | border-radius: @panel-border-radius;
104 | overflow: hidden; // crop contents when collapsed
105 | + .panel {
106 | margin-top: 5px;
107 | }
108 | }
109 |
110 | .panel-heading {
111 | border-bottom: 0;
112 | + .panel-collapse .panel-body {
113 | border-top: 1px solid @panel-inner-border;
114 | }
115 | }
116 | .panel-footer {
117 | border-top: 0;
118 | + .panel-collapse .panel-body {
119 | border-bottom: 1px solid @panel-inner-border;
120 | }
121 | }
122 |
123 | // New subcomponent for wrapping collapsable content for proper animations
124 | .panel-collapse {
125 |
126 | }
127 | }
128 |
129 |
130 | // Contextual variations
131 | .panel-default {
132 | .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
133 | }
134 | .panel-primary {
135 | .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
136 | }
137 | .panel-success {
138 | .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
139 | }
140 | .panel-warning {
141 | .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
142 | }
143 | .panel-danger {
144 | .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
145 | }
146 | .panel-info {
147 | .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
148 | }
149 |
--------------------------------------------------------------------------------
/_theme/stylesheets/book/font-settings.less:
--------------------------------------------------------------------------------
1 | .book-header{
2 | #font-settings-wrapper{
3 | position:relative;
4 | .dropdown-menu{
5 | background-color:@header-background;
6 | border-color:@sidebar-divider-color;
7 | padding: 0px;
8 |
9 | .dropdown-caret{
10 | position: absolute;
11 | top: 14px;
12 | left: -8px;
13 | width: 10px;
14 | height: 18px;
15 | float: left;
16 | overflow: hidden;
17 | .caret-outer{
18 | position: absolute;
19 | border-bottom: 9px solid transparent;
20 | border-top: 9px solid transparent;
21 | border-right: 9px solid rgba(0,0,0,0.1);
22 | height: auto;
23 | left: 0;
24 | top: 0;
25 | width: auto;
26 | display: inline-block;
27 | margin-left: -1px;
28 | }
29 | .caret-inner{
30 | position: absolute;
31 | display: inline-block;
32 | margin-left: -1px;
33 | top: 0;
34 | left: 1px;
35 | border-bottom: 9px solid transparent;
36 | border-top: 9px solid transparent;
37 | border-right: 9px solid @header-background;
38 | }
39 | }
40 | button{
41 | border: 0;
42 | background-color:transparent;
43 | color:@header-button-color;
44 | &:hover{
45 | color:@header-button-hover-color;
46 | background-color:@header-button-hover-background;
47 | }
48 | }
49 | #enlarge-font-size{
50 | width: 50%;
51 | font-size:1.4em;
52 | }
53 | #reduce-font-size{
54 | width: 50.5%;
55 | font-size:1em;
56 | }
57 | .btn-group-xs{
58 | .btn{
59 | width: 33.7%;
60 | padding: initial;
61 | }
62 | }
63 | .list-group{
64 | margin: 0px 0;
65 |
66 | .list-group-item{
67 | cursor:pointer;
68 | background-color:transparent;
69 | border-color: @sidebar-divider-color;
70 | border-width: 1px 0 !important;
71 |
72 | &:hover{
73 | color:@header-button-hover-color;
74 | background-color:@header-button-hover-background !important;
75 | }
76 | &.active{
77 | color:@header-button-hover-color;
78 | background-color:@header-button-hover-background !important;
79 | }
80 | }
81 | }
82 | &.open{
83 | display:block;
84 | }
85 | }
86 | }
87 | }
88 |
89 | /*
90 | * Theme 1
91 | */
92 |
93 | .color-theme-1{
94 | #font-settings-wrapper{
95 | .dropdown-menu{
96 | background-color:@sidebar-background-1;
97 | border-color:@sidebar-divider-color-1;
98 | .dropdown-caret .caret-inner{
99 | border-right: 9px solid @sidebar-background-1;
100 | }
101 | button{
102 | color:@header-button-color-1;
103 | &:hover{
104 | color:@header-button-hover-color-1;
105 | background-color:@header-button-hover-background-1;
106 | }
107 | }
108 | .list-group{
109 | .list-group-item{
110 | border-color:@sidebar-divider-color-1;
111 | &:hover{
112 | color:@header-button-hover-color-1;
113 | background-color:@header-button-hover-background-1 !important;
114 | }
115 | &.active{
116 | color:@header-button-hover-color-1;
117 | background-color:@header-button-hover-background-1 !important;
118 | }
119 | }
120 | }
121 | }
122 | }
123 | }
124 |
125 | /*
126 | * Theme 2
127 | */
128 |
129 | .color-theme-2{
130 | #font-settings-wrapper{
131 | .dropdown-menu{
132 | background-color:@sidebar-background-2;
133 | border-color:@sidebar-divider-color-2;
134 | .dropdown-caret .caret-inner{
135 | border-right: 9px solid @sidebar-background-2;
136 | }
137 | button{
138 | color:@header-button-color-2;
139 | &:hover{
140 | color:@header-button-hover-color-2;
141 | background-color:@header-button-hover-background-2;
142 | }
143 | }
144 | .list-group{
145 | .list-group-item{
146 | border-color:@sidebar-divider-color-2;
147 | &:hover{
148 | color:@header-button-hover-color-2;
149 | background-color:@header-button-hover-background-2 !important;
150 | }
151 | &.active{
152 | color:@header-button-hover-color-2;
153 | background-color:@header-button-hover-background-2 !important;
154 | }
155 | }
156 | }
157 | }
158 | }
159 | }
160 |
--------------------------------------------------------------------------------
/syntax/destructuring_assignment.md:
--------------------------------------------------------------------------------
1 | ## Destructuring Assignment
2 |
3 | To make extracting values from complex arrays and objects more convenient, CoffeeScript implements ECMAScript Harmony's
4 | proposed destructuring assignment syntax. When you assign an array or object literal to a value, CoffeeScript breaks up
5 | and matches both sides against each other, assigning the values on the right to the variables on the left. In the simplest
6 | case, it can be used for parallel assignment. Look at this little White Stripes example:
7 |
8 | *CoffeeScript*
9 | ```coffeescript
10 | guitar = "Meg White"
11 | drums = "Jack White"
12 | [guitar, drums] = [drums, guitar] # ['Jack White', 'Meg White']
13 | ```
14 |
15 | *JavaScript*
16 | ```javascript
17 | var drums, guitar, _ref;
18 | guitar = "Meg White";
19 | drums = "Jack White";
20 | _ref = [drums, guitar], guitar = _ref[0], drums = _ref[1];
21 | ```
22 |
23 | But it's also helpful for dealing with functions that return multiple values.
24 |
25 | *CoffeeScript*
26 | ```coffeescript
27 | bandMembers = (name) ->
28 | # Retrieving members via ajax
29 | ['Kurt Cobain', 'Dave Grohl', 'Krist Novoselic']
30 | [guitar, drums, base] = bandMembers "Nirvana"
31 | ```
32 |
33 | *JavaScript*
34 | ```javascript
35 | var bandMembers, base, drums, guitar, _ref;
36 | bandMembers = function(name) {
37 | return ['Kurt Cobain', 'Dave Grohl', 'Krist Novoselic'];
38 | };
39 | _ref = bandMembers("Nirvana"), guitar = _ref[0], drums = _ref[1], base = _ref[2];
40 | ```
41 |
42 | Destructuring assignment can be used with any depth of array and object nesting, to help pull out deeply nested properties.
43 |
44 | *CoffeeScript*
45 | ```coffeescript
46 | ledZeppelin =
47 | vocal: "Robert Plant"
48 | drums: "John Bonham"
49 | guitarist:
50 | name: "Jimmy Page"
51 | vocal: false
52 | guitars: [
53 | "Gibson Les Paul"
54 | "Gibson EDS-1275"
55 | ]
56 |
57 | {guitarist: {name, vocal, guitars: [first, second]}} = ledZeppelin
58 | ```
59 |
60 | *JavaScript*
61 | ```javascript
62 | var first, ledZeppelin, name, second, vocal, _ref, _ref1;
63 | ledZeppelin = {
64 | vocal: "Robert Plant",
65 | drums: "John Bonham",
66 | guitarist: {
67 | name: "Jimmy Page",
68 | vocal: false,
69 | guitars: ["Gibson Les Paul", "Gibson EDS-1275"]
70 | }
71 | };
72 | _ref = ledZeppelin.guitarist, name = _ref.name, vocal = _ref.vocal, (_ref1 = _ref.guitars, first = _ref1[0], second = _ref1[1]);
73 | ```
74 |
75 | Destructuring assignment can even be combined with splats.
76 |
77 |
78 | *CoffeeScript*
79 | ```coffeescript
80 | name = "Ronnie James Dio"
81 | [firstname, middle, lastname] = name.split " "
82 | ```
83 |
84 | *JavaScript*
85 | ```javascript
86 | var firstname, lastname, middle, name, _ref;
87 | name = "Ronnie James Dio";
88 | _ref = name.split(" "), firstname = _ref[0], middle = _ref[1], lastname = _ref[2];
89 | ```
90 |
91 | Expansion can be used to retrieve elements from the end of an array without having to assign the rest of its values. It works in function parameter lists as well.
92 |
93 | *CoffeeScript*
94 | ```coffeescript
95 | name = "Ronnie James (more middle names here) Dio"
96 | [firstname, middle..., lastname] = name.split " "
97 | ```
98 |
99 | *JavaScript*
100 | ```javascript
101 | var firstname, lastname, name, _ref;
102 | name = "Ronnie James (more middle names here) Dio";
103 | _ref = name.split(" "), firstname = _ref[0], lastname = _ref[_ref.length - 1];
104 | ```
105 |
106 | Destructuring assignment is also useful when combined with class constructors to assign properties to your instance from an options object passed to the constructor.
107 |
108 | *CoffeeScript*
109 | ```coffeescript
110 | class Frontman
111 | constructor: (options) ->
112 | {@name, @vocals, @guitar} = options
113 |
114 | jaymz = new Frontman
115 | name: 'James Hetfield'
116 | vocals: true
117 | guitar: true
118 | ```
119 |
120 | *JavaScript*
121 | ```javascript
122 | var Frontman, jaymz;
123 | Frontman = (function() {
124 | function Frontman(options) {
125 | this.name = options.name, this.vocals = options.vocals, this.guitar = options.guitar;
126 | }
127 | return Frontman;
128 | })();
129 |
130 | jaymz = new Frontman({
131 | name: 'James Hetfield',
132 | vocals: true,
133 | guitar: true
134 | });
135 | ```
136 |
--------------------------------------------------------------------------------
/_theme/assets/jsrepl/engines/javascript-default.js:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Copyright Joyent, Inc. and other Node contributors.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a
6 | copy of this software and associated documentation files (the
7 | "Software"), to deal in the Software without restriction, including
8 | without limitation the rights to use, copy, modify, merge, publish,
9 | distribute, sublicense, and/or sell copies of the Software, and to permit
10 | persons to whom the Software is furnished to do so, subject to the
11 | following conditions:
12 |
13 | The above copyright notice and this permission notice shall be included
14 | in all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
17 | OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
19 | NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
20 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
21 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
22 | USE OR OTHER DEALINGS IN THE SOFTWARE.
23 |
24 | Original at: https://github.com/joyent/node/blob/master/lib/util.js
25 | */
26 | (function(){function o(c){return c instanceof Array||Array.isArray(c)||c&&c!==Object.prototype&&o(c.__proto__)}function p(c){return c instanceof RegExp||typeof c==="function"&&c.constructor.name==="RegExp"&&c.compile&&c.test&&c.exec&&(""+c).match(/^\/.*\/[gim]{0,3}$/)}var q=80,l=function(c,h,b,f){function m(a,c){switch(typeof a){case "undefined":return d("undefined","undefined");case "string":var b="'"+JSON.stringify(a).replace(/^"|"$/g,"").replace(/'/g,"\\'").replace(/\\"/g,'"')+"'";return d(b,"string");
27 | case "number":return d(""+a,"number");case "boolean":return d(""+a,"boolean")}if(a===null)return d("null","null");var f=Object.keys(a),i=h?Object.getOwnPropertyNames(a):f;if(typeof a==="function"&&i.length===0)return p(a)?d(""+a,"regexp"):d("[Function"+(a.name?": "+a.name:"")+"]","special");if(a instanceof Date&&i.length===0)return d(a.toUTCString(),"date");var j,l;o(a)?(l="Array",b=["[","]"]):(l="Object",b=["{","}"]);typeof a==="function"?(j=a.name?": "+a.name:"",j=p(a)?" "+a:" [Function"+j+"]"):
28 | j="";a instanceof Date&&(j=" "+a.toUTCString());if(i.length===0)return b[0]+j+b[1];if(c<0)return p(a)?d(""+a,"regexp"):d("[Object]","special");k.push(a);i=i.map(function(b){var e,g;a.__lookupGetter__&&(a.__lookupGetter__(b)?g=a.__lookupSetter__(b)?d("[Getter/Setter]","special"):d("[Getter]","special"):a.__lookupSetter__(b)&&(g=d("[Setter]","special")));f.indexOf(b)<0&&(e="["+b+"]");g||(k.indexOf(a[b])<0?(g=c===null?m(a[b]):m(a[b],c-1),g.indexOf("\n")>-1&&(g=o(a)?g.split("\n").map(function(a){return" "+
29 | a}).join("\n").substr(2):"\n"+g.split("\n").map(function(a){return" "+a}).join("\n"))):g=d("[Circular]","special"));if(typeof e==="undefined"){if(l==="Array"&&b.match(/^\d+$/))return g;e=JSON.stringify(""+b);e.match(/^"([a-zA-Z_][a-zA-Z_0-9]*)"$/)?(e=e.substr(1,e.length-2),e=d(e,"name")):(e=e.replace(/'/g,"\\'").replace(/\\"/g,'"').replace(/(^"|"$)/g,"'"),e=d(e,"string"))}return e+": "+g});k.pop();var n=0;return i=i.reduce(function(a,b){n++;b.indexOf("\n")>=0&&n++;return a+b.length+1},0)>q?b[0]+
30 | (j===""?"":j+"\n ")+" "+i.join(",\n ")+" "+b[1]:b[0]+j+" "+i.join(", ")+" "+b[1]}var k=[],d=function(a,b){var c={bold:[1,22],italic:[3,23],underline:[4,24],inverse:[7,27],white:[37,39],grey:[90,39],black:[30,39],blue:[34,39],cyan:[36,39],green:[32,39],magenta:[35,39],red:[31,39],yellow:[33,39]},d={special:"cyan",number:"blue","boolean":"yellow",undefined:"grey","null":"bold",string:"green",date:"magenta",regexp:"red"}[b];return d?"\u001b["+c[d][0]+"m"+a+"\u001b["+c[d][1]+"m":a};f||(d=function(a){return a});
31 | return m(c,typeof b==="undefined"?2:b)},r=/%[sdj%]/g,s=function(c){if(typeof c!=="string"){for(var h=[],b=0;b
=m)return c;switch(c){case "%s":return String(f[b++]);case "%d":return Number(f[b++]);case "%j":return JSON.stringify(f[b++]);case "%%":return"%";default:return c}}),k=f[b];b .item {
17 | display: none;
18 | position: relative;
19 | .transition(.6s ease-in-out left);
20 |
21 | // Account for jankitude on images
22 | > img,
23 | > a > img {
24 | .img-responsive();
25 | line-height: 1;
26 | }
27 | }
28 |
29 | > .active,
30 | > .next,
31 | > .prev { display: block; }
32 |
33 | > .active {
34 | left: 0;
35 | }
36 |
37 | > .next,
38 | > .prev {
39 | position: absolute;
40 | top: 0;
41 | width: 100%;
42 | }
43 |
44 | > .next {
45 | left: 100%;
46 | }
47 | > .prev {
48 | left: -100%;
49 | }
50 | > .next.left,
51 | > .prev.right {
52 | left: 0;
53 | }
54 |
55 | > .active.left {
56 | left: -100%;
57 | }
58 | > .active.right {
59 | left: 100%;
60 | }
61 |
62 | }
63 |
64 | // Left/right controls for nav
65 | // ---------------------------
66 |
67 | .carousel-control {
68 | position: absolute;
69 | top: 0;
70 | left: 0;
71 | bottom: 0;
72 | width: @carousel-control-width;
73 | .opacity(@carousel-control-opacity);
74 | font-size: @carousel-control-font-size;
75 | color: @carousel-control-color;
76 | text-align: center;
77 | text-shadow: @carousel-text-shadow;
78 | // We can't have this transition here because webkit cancels the carousel
79 | // animation if you trip this while in the middle of another animation.
80 |
81 | // Set gradients for backgrounds
82 | &.left {
83 | #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
84 | }
85 | &.right {
86 | left: auto;
87 | right: 0;
88 | #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
89 | }
90 |
91 | // Hover/focus state
92 | &:hover,
93 | &:focus {
94 | color: @carousel-control-color;
95 | text-decoration: none;
96 | .opacity(.9);
97 | }
98 |
99 | // Toggles
100 | .icon-prev,
101 | .icon-next,
102 | .glyphicon-chevron-left,
103 | .glyphicon-chevron-right {
104 | position: absolute;
105 | top: 50%;
106 | left: 50%;
107 | z-index: 5;
108 | display: inline-block;
109 | }
110 | .icon-prev,
111 | .icon-next {
112 | width: 20px;
113 | height: 20px;
114 | margin-top: -10px;
115 | margin-left: -10px;
116 | font-family: serif;
117 | }
118 |
119 | .icon-prev {
120 | &:before {
121 | content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
122 | }
123 | }
124 | .icon-next {
125 | &:before {
126 | content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
127 | }
128 | }
129 | }
130 |
131 | // Optional indicator pips
132 | //
133 | // Add an unordered list with the following class and add a list item for each
134 | // slide your carousel holds.
135 |
136 | .carousel-indicators {
137 | position: absolute;
138 | bottom: 10px;
139 | left: 50%;
140 | z-index: 15;
141 | width: 60%;
142 | margin-left: -30%;
143 | padding-left: 0;
144 | list-style: none;
145 | text-align: center;
146 |
147 | li {
148 | display: inline-block;
149 | width: 10px;
150 | height: 10px;
151 | margin: 1px;
152 | text-indent: -999px;
153 | border: 1px solid @carousel-indicator-border-color;
154 | border-radius: 10px;
155 | cursor: pointer;
156 | }
157 | .active {
158 | margin: 0;
159 | width: 12px;
160 | height: 12px;
161 | background-color: @carousel-indicator-active-bg;
162 | }
163 | }
164 |
165 | // Optional captions
166 | // -----------------------------
167 | // Hidden by default for smaller viewports
168 | .carousel-caption {
169 | position: absolute;
170 | left: 15%;
171 | right: 15%;
172 | bottom: 20px;
173 | z-index: 10;
174 | padding-top: 20px;
175 | padding-bottom: 20px;
176 | color: @carousel-caption-color;
177 | text-align: center;
178 | text-shadow: @carousel-text-shadow;
179 | & .btn {
180 | text-shadow: none; // No shadow for button elements in carousel-caption
181 | }
182 | }
183 |
184 |
185 | // Scale up controls for tablets and up
186 | @media screen and (min-width: @screen-tablet) {
187 |
188 | // Scale up the controls a smidge
189 | .carousel-control .icon-prev,
190 | .carousel-control .icon-next {
191 | width: 30px;
192 | height: 30px;
193 | margin-top: -15px;
194 | margin-left: -15px;
195 | font-size: 30px;
196 | }
197 |
198 | // Show and left align the captions
199 | .carousel-caption {
200 | left: 20%;
201 | right: 20%;
202 | padding-bottom: 30px;
203 | }
204 |
205 | // Move up the indicators
206 | .carousel-indicators {
207 | bottom: 20px;
208 | }
209 | }
210 |
--------------------------------------------------------------------------------
/_theme/stylesheets/vendors/bootstrap/dropdowns.less:
--------------------------------------------------------------------------------
1 | //
2 | // Dropdown menus
3 | // --------------------------------------------------
4 |
5 |
6 | // Dropdown arrow/caret
7 | .caret {
8 | display: inline-block;
9 | width: 0;
10 | height: 0;
11 | margin-left: 2px;
12 | vertical-align: middle;
13 | border-top: @caret-width-base solid @dropdown-caret-color;
14 | border-right: @caret-width-base solid transparent;
15 | border-left: @caret-width-base solid transparent;
16 | // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
17 | // we can just straight up remove this.
18 | border-bottom: 0 dotted;
19 | content: "";
20 | }
21 |
22 | // The dropdown wrapper (div)
23 | .dropdown {
24 | position: relative;
25 | }
26 |
27 | // Prevent the focus on the dropdown toggle when closing dropdowns
28 | .dropdown-toggle:focus {
29 | outline: 0;
30 | }
31 |
32 | // The dropdown menu (ul)
33 | .dropdown-menu {
34 | position: absolute;
35 | top: 100%;
36 | left: 0;
37 | z-index: @zindex-dropdown;
38 | display: none; // none by default, but block on "open" of the menu
39 | float: left;
40 | min-width: 160px;
41 | padding: 5px 0;
42 | margin: 2px 0 0; // override default ul
43 | list-style: none;
44 | font-size: @font-size-base;
45 | background-color: @dropdown-bg;
46 | border: 1px solid @dropdown-fallback-border; // IE8 fallback
47 | border: 1px solid @dropdown-border;
48 | border-radius: @border-radius-base;
49 | .box-shadow(0 6px 12px rgba(0,0,0,.175));
50 | background-clip: padding-box;
51 |
52 | // Aligns the dropdown menu to right
53 | &.pull-right {
54 | right: 0;
55 | left: auto;
56 | }
57 |
58 | // Dividers (basically an hr) within the dropdown
59 | .divider {
60 | .nav-divider(@dropdown-divider-bg);
61 | }
62 |
63 | // Links within the dropdown menu
64 | > li > a {
65 | display: block;
66 | padding: 3px 20px;
67 | clear: both;
68 | font-weight: normal;
69 | line-height: @line-height-base;
70 | color: @dropdown-link-color;
71 | white-space: nowrap; // prevent links from randomly breaking onto new lines
72 | }
73 | }
74 |
75 | // Hover/Focus state
76 | .dropdown-menu > li > a {
77 | &:hover,
78 | &:focus {
79 | text-decoration: none;
80 | color: @dropdown-link-hover-color;
81 | background-color: @dropdown-link-hover-bg;
82 | }
83 | }
84 |
85 | // Active state
86 | .dropdown-menu > .active > a {
87 | &,
88 | &:hover,
89 | &:focus {
90 | color: @dropdown-link-active-color;
91 | text-decoration: none;
92 | outline: 0;
93 | background-color: @dropdown-link-active-bg;
94 | }
95 | }
96 |
97 | // Disabled state
98 | //
99 | // Gray out text and ensure the hover/focus state remains gray
100 |
101 | .dropdown-menu > .disabled > a {
102 | &,
103 | &:hover,
104 | &:focus {
105 | color: @dropdown-link-disabled-color;
106 | }
107 | }
108 | // Nuke hover/focus effects
109 | .dropdown-menu > .disabled > a {
110 | &:hover,
111 | &:focus {
112 | text-decoration: none;
113 | background-color: transparent;
114 | background-image: none; // Remove CSS gradient
115 | .reset-filter();
116 | cursor: not-allowed;
117 | }
118 | }
119 |
120 | // Open state for the dropdown
121 | .open {
122 | // Show the menu
123 | > .dropdown-menu {
124 | display: block;
125 | }
126 |
127 | // Remove the outline when :focus is triggered
128 | > a {
129 | outline: 0;
130 | }
131 | }
132 |
133 | // Dropdown section headers
134 | .dropdown-header {
135 | display: block;
136 | padding: 3px 20px;
137 | font-size: @font-size-small;
138 | line-height: @line-height-base;
139 | color: @dropdown-header-color;
140 | }
141 |
142 | // Backdrop to catch body clicks on mobile, etc.
143 | .dropdown-backdrop {
144 | position: fixed;
145 | left: 0;
146 | right: 0;
147 | bottom: 0;
148 | top: 0;
149 | z-index: @zindex-dropdown - 10;
150 | }
151 |
152 | // Right aligned dropdowns
153 | .pull-right > .dropdown-menu {
154 | right: 0;
155 | left: auto;
156 | }
157 |
158 | // Allow for dropdowns to go bottom up (aka, dropup-menu)
159 | //
160 | // Just add .dropup after the standard .dropdown class and you're set, bro.
161 | // TODO: abstract this so that the navbar fixed styles are not placed here?
162 |
163 | .dropup,
164 | .navbar-fixed-bottom .dropdown {
165 | // Reverse the caret
166 | .caret {
167 | // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
168 | // gets fixed, restore `border-top: 0;`.
169 | border-top: 0 dotted;
170 | border-bottom: 4px solid @dropdown-caret-color;
171 | content: "";
172 | }
173 | // Different positioning for bottom up menu
174 | .dropdown-menu {
175 | top: auto;
176 | bottom: 100%;
177 | margin-bottom: 1px;
178 | }
179 | }
180 |
181 |
182 | // Component alignment
183 | //
184 | // Reiterate per navbar.less and the modified component alignment there.
185 |
186 | @media (min-width: @grid-float-breakpoint) {
187 | .navbar-right {
188 | .dropdown-menu {
189 | .pull-right > .dropdown-menu();
190 | }
191 | }
192 | }
193 |
194 |
--------------------------------------------------------------------------------
/_theme/stylesheets/fonts.less:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'EB Garamond';
3 | font-style: normal;
4 | font-weight: 400;
5 | src: local('EB Garamond 12 Regular'),url('@{FontPath}/ebgaramond/400.woff') format('woff');
6 | }
7 | @font-face {
8 | font-family: 'EB Garamond';
9 | font-style: italic;
10 | font-weight: 400i;
11 | src: local('EB Garamond 12 Italic'),url('@{FontPath}/ebgaramond/400i.woff') format('woff');
12 | }
13 | @font-face {
14 | font-family: 'Merriweather';
15 | font-style: normal;
16 | font-weight: 250;
17 | src: local('Merriweather Light'),url('@{FontPath}/merriweather/250.woff') format('woff');
18 | }
19 | @font-face {
20 | font-family: 'Merriweather';
21 | font-style: italic;
22 | font-weight: 250i;
23 | src: local('Merriweather Light Italic'),url('@{FontPath}/merriweather/250i.woff') format('woff');
24 | }
25 | @font-face {
26 | font-family: 'Merriweather';
27 | font-style: normal;
28 | font-weight: 400;
29 | src: local('Merriweather'),url('@{FontPath}/merriweather/400.woff') format('woff');
30 | }
31 | @font-face {
32 | font-family: 'Merriweather';
33 | font-style: italic;
34 | font-weight: 400i;
35 | src: local('Merriweather Italic'),url('@{FontPath}/merriweather/400i.woff') format('woff');
36 | }
37 | @font-face {
38 | font-family: 'Merriweather';
39 | font-style: normal;
40 | font-weight: 600;
41 | src: local(''),url('@{FontPath}/merriweather/600.woff') format('woff');
42 | }
43 | /*@font-face {
44 | font-family: 'Merriweather';
45 | font-style: italic;
46 | font-weight: 600i;
47 | src: local(''),url('@{FontPath}/merriweather/600i.woff') format('woff');
48 | }*/
49 | @font-face {
50 | font-family: 'Merriweather';
51 | font-style: normal;
52 | font-weight: 700;
53 | src: local('Merriweather Bold'),url('@{FontPath}/merriweather/700.woff') format('woff');
54 | }
55 | @font-face {
56 | font-family: 'Merriweather';
57 | font-style: italic;
58 | font-weight: 700i;
59 | src: local('Merriweather Bold Italic'),url('@{FontPath}/merriweather/700i.woff') format('woff');
60 | }
61 | @font-face {
62 | font-family: 'Merriweather';
63 | font-style: normal;
64 | font-weight: 900;
65 | src: local('Merriweather Heavy'),url('@{FontPath}/merriweather/900.woff') format('woff');
66 | }
67 | @font-face {
68 | font-family: 'Merriweather';
69 | font-style: italic;
70 | font-weight: 900i;
71 | src: local('Merriweather Heavy Italic'),url('@{FontPath}/merriweather/900i.woff') format('woff');
72 | }
73 | @font-face {
74 | font-family: 'Anonymous Pro';
75 | font-style: normal;
76 | font-weight: 400;
77 | src: local('Anonymous Pro'),url('@{FontPath}/anonymouspro/400.woff') format('woff');
78 | }
79 | @font-face {
80 | font-family: 'Anonymous Pro';
81 | font-style: italic;
82 | font-weight: 400i;
83 | src: local('Anonymous Pro Italic'),url('@{FontPath}/anonymouspro/400i.woff') format('woff');
84 | }
85 | @font-face {
86 | font-family: 'Anonymous Pro';
87 | font-style: normal;
88 | font-weight: 700;
89 | src: local('Anonymous Pro Bold'),url('@{FontPath}/anonymouspro/700.woff') format('woff');
90 | }
91 | @font-face {
92 | font-family: 'Anonymous Pro';
93 | font-style: italic;
94 | font-weight: 700i;
95 | src: local('Anonymous Pro Bold Italic'),url('@{FontPath}/anonymouspro/700i.woff') format('woff');
96 | }
97 | @font-face {
98 | font-family: 'Open Sans';
99 | font-style: normal;
100 | font-weight: 300;
101 | src: local('Open Sans Light'),url('@{FontPath}/opensans/300.woff') format('woff');
102 | }
103 | @font-face {
104 | font-family: 'Open Sans';
105 | font-style: italic;
106 | font-weight: 300i;
107 | src: local('Open Sans Light Italic'),url('@{FontPath}/opensans/300i.woff') format('woff');
108 | }
109 | @font-face {
110 | font-family: 'Open Sans';
111 | font-style: normal;
112 | font-weight: 400;
113 | src: local('Open Sans Regular'),url('@{FontPath}/opensans/400.woff') format('woff');
114 | }
115 | @font-face {
116 | font-family: 'Open Sans';
117 | font-style: italic;
118 | font-weight: 400i;
119 | src: local('Open Sans Italic'),url('@{FontPath}/opensans/400i.woff') format('woff');
120 | }
121 | @font-face {
122 | font-family: 'Open Sans';
123 | font-style: normal;
124 | font-weight: 600;
125 | src: local('Open Sans Semibold'),url('@{FontPath}/opensans/600.woff') format('woff');
126 | }
127 | @font-face {
128 | font-family: 'Open Sans';
129 | font-style: italic;
130 | font-weight: 600i;
131 | src: local('Open Sans Semibold Italic'),url('@{FontPath}/opensans/600i.woff') format('woff');
132 | }
133 | @font-face {
134 | font-family: 'Open Sans';
135 | font-style: normal;
136 | font-weight: 700;
137 | src: local('Open Sans Bold'),url('@{FontPath}/opensans/700.woff') format('woff');
138 | }
139 | @font-face {
140 | font-family: 'Open Sans';
141 | font-style: italic;
142 | font-weight: 700i;
143 | src: local('Open Sans Bold Italic'),url('@{FontPath}/opensans/700i.woff') format('woff');
144 | }
--------------------------------------------------------------------------------
/_theme/stylesheets/vendors/bootstrap/tables.less:
--------------------------------------------------------------------------------
1 | //
2 | // Tables
3 | // --------------------------------------------------
4 |
5 |
6 | table {
7 | max-width: 100%;
8 | background-color: @table-bg;
9 | }
10 | th {
11 | text-align: left;
12 | }
13 |
14 |
15 | // Baseline styles
16 |
17 | .table {
18 | width: 100%;
19 | margin-bottom: @line-height-computed;
20 | // Cells
21 | thead,
22 | tbody,
23 | tfoot {
24 | > tr {
25 | > th,
26 | > td {
27 | padding: @table-cell-padding;
28 | line-height: @line-height-base;
29 | vertical-align: top;
30 | border-top: 1px solid @table-border-color;
31 | }
32 | }
33 | }
34 | // Bottom align for column headings
35 | thead > tr > th {
36 | vertical-align: bottom;
37 | border-bottom: 2px solid @table-border-color;
38 | }
39 | // Remove top border from thead by default
40 | caption + thead,
41 | colgroup + thead,
42 | thead:first-child {
43 | tr:first-child {
44 | th, td {
45 | border-top: 0;
46 | }
47 | }
48 | }
49 | // Account for multiple tbody instances
50 | tbody + tbody {
51 | border-top: 2px solid @table-border-color;
52 | }
53 |
54 | // Nesting
55 | .table {
56 | background-color: @body-bg;
57 | }
58 | }
59 |
60 |
61 | // Condensed table w/ half padding
62 |
63 | .table-condensed {
64 | thead,
65 | tbody,
66 | tfoot {
67 | > tr {
68 | > th,
69 | > td {
70 | padding: @table-condensed-cell-padding;
71 | }
72 | }
73 | }
74 | }
75 |
76 |
77 | // Bordered version
78 | //
79 | // Add borders all around the table and between all the columns.
80 |
81 | .table-bordered {
82 | border: 1px solid @table-border-color;
83 | > thead,
84 | > tbody,
85 | > tfoot {
86 | > tr {
87 | > th,
88 | > td {
89 | border: 1px solid @table-border-color;
90 | }
91 | }
92 | }
93 | > thead {
94 | > tr {
95 | > th,
96 | > td {
97 | border-bottom-width: 2px;
98 | }
99 | }
100 | }
101 | }
102 |
103 |
104 | // Zebra-striping
105 | //
106 | // Default zebra-stripe styles (alternating gray and transparent backgrounds)
107 |
108 | .table-striped {
109 | > tbody {
110 | > tr:nth-child(odd) {
111 | > td,
112 | > th {
113 | background-color: @table-bg-accent;
114 | }
115 | }
116 | }
117 | }
118 |
119 |
120 | // Hover effect
121 | //
122 | // Placed here since it has to come after the potential zebra striping
123 |
124 | .table-hover {
125 | > tbody {
126 | > tr:hover {
127 | > td,
128 | > th {
129 | background-color: @table-bg-hover;
130 | }
131 | }
132 | }
133 | }
134 |
135 |
136 | // Table cell sizing
137 | //
138 | // Reset default table behavior
139 |
140 | table col[class*="col-"] {
141 | float: none;
142 | display: table-column;
143 | }
144 | table {
145 | td,
146 | th {
147 | &[class*="col-"] {
148 | float: none;
149 | display: table-cell;
150 | }
151 | }
152 | }
153 |
154 |
155 | // Table backgrounds
156 | //
157 | // Exact selectors below required to override `.table-striped` and prevent
158 | // inheritance to nested tables.
159 |
160 | .table > thead > tr,
161 | .table > tbody > tr,
162 | .table > tfoot > tr {
163 | > td.active,
164 | > th.active,
165 | &.active > td,
166 | &.active > th {
167 | background-color: @table-bg-active;
168 | }
169 | }
170 |
171 | // Generate the contextual variants
172 | .table-row-variant(success; @state-success-bg; @state-success-border);
173 | .table-row-variant(danger; @state-danger-bg; @state-danger-border);
174 | .table-row-variant(warning; @state-warning-bg; @state-warning-border);
175 |
176 |
177 | // Responsive tables
178 | //
179 | // Wrap your tables in `.table-scrollable` and we'll make them mobile friendly
180 | // by enabling horizontal scrolling. Only applies <768px. Everything above that
181 | // will display normally.
182 |
183 | @media (max-width: @screen-sm) {
184 | .table-responsive {
185 | width: 100%;
186 | margin-bottom: 15px;
187 | overflow-y: hidden;
188 | overflow-x: scroll;
189 | border: 1px solid @table-border-color;
190 |
191 | // Tighten up spacing and give a background color
192 | > .table {
193 | margin-bottom: 0;
194 | background-color: #fff;
195 |
196 | // Ensure the content doesn't wrap
197 | > thead,
198 | > tbody,
199 | > tfoot {
200 | > tr {
201 | > th,
202 | > td {
203 | white-space: nowrap;
204 | }
205 | }
206 | }
207 | }
208 |
209 | // Special overrides for the bordered tables
210 | > .table-bordered {
211 | border: 0;
212 |
213 | // Nuke the appropriate borders so that the parent can handle them
214 | > thead,
215 | > tbody,
216 | > tfoot {
217 | > tr {
218 | > th:first-child,
219 | > td:first-child {
220 | border-left: 0;
221 | }
222 | > th:last-child,
223 | > td:last-child {
224 | border-right: 0;
225 | }
226 | }
227 | > tr:last-child {
228 | > th,
229 | > td {
230 | border-bottom: 0;
231 | }
232 | }
233 | }
234 | }
235 | }
236 | }
237 |
--------------------------------------------------------------------------------
/_theme/stylesheets/vendors/bootstrap/navs.less:
--------------------------------------------------------------------------------
1 | //
2 | // Navs
3 | // --------------------------------------------------
4 |
5 |
6 | // Base class
7 | // --------------------------------------------------
8 |
9 | .nav {
10 | margin-bottom: 0;
11 | padding-left: 0; // Override default ul/ol
12 | list-style: none;
13 | .clearfix();
14 |
15 | > li {
16 | position: relative;
17 | display: block;
18 |
19 | > a {
20 | position: relative;
21 | display: block;
22 | padding: @nav-link-padding;
23 | &:hover,
24 | &:focus {
25 | text-decoration: none;
26 | background-color: @nav-link-hover-bg;
27 | }
28 | }
29 |
30 | // Disabled state sets text to gray and nukes hover/tab effects
31 | &.disabled > a {
32 | color: @nav-disabled-link-color;
33 |
34 | &:hover,
35 | &:focus {
36 | color: @nav-disabled-link-hover-color;
37 | text-decoration: none;
38 | background-color: transparent;
39 | cursor: not-allowed;
40 | }
41 | }
42 | }
43 |
44 | // Open dropdowns
45 | .open > a {
46 | &,
47 | &:hover,
48 | &:focus {
49 | background-color: @nav-link-hover-bg;
50 | border-color: @link-color;
51 | }
52 | }
53 |
54 | // Dividers (basically an hr) within the dropdown
55 | .nav-divider {
56 | .nav-divider();
57 | }
58 |
59 | // Prevent IE8 from misplacing imgs
60 | // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
61 | > li > a > img {
62 | max-width: none;
63 | }
64 | }
65 |
66 |
67 | // Tabs
68 | // -------------------------
69 |
70 | // Give the tabs something to sit on
71 | .nav-tabs {
72 | border-bottom: 1px solid @nav-tabs-border-color;
73 | > li {
74 | float: left;
75 | // Make the list-items overlay the bottom border
76 | margin-bottom: -1px;
77 |
78 | // Actual tabs (as links)
79 | > a {
80 | margin-right: 2px;
81 | line-height: @line-height-base;
82 | border: 1px solid transparent;
83 | border-radius: @border-radius-base @border-radius-base 0 0;
84 | &:hover {
85 | border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
86 | }
87 | }
88 |
89 | // Active state, and it's :hover to override normal :hover
90 | &.active > a {
91 | &,
92 | &:hover,
93 | &:focus {
94 | color: @nav-tabs-active-link-hover-color;
95 | background-color: @nav-tabs-active-link-hover-bg;
96 | border: 1px solid @nav-tabs-active-link-hover-border-color;
97 | border-bottom-color: transparent;
98 | cursor: default;
99 | }
100 | }
101 | }
102 | // pulling this in mainly for less shorthand
103 | &.nav-justified {
104 | .nav-justified();
105 | .nav-tabs-justified();
106 | }
107 | }
108 |
109 |
110 | // Pills
111 | // -------------------------
112 | .nav-pills {
113 | > li {
114 | float: left;
115 |
116 | // Links rendered as pills
117 | > a {
118 | border-radius: 5px;
119 | }
120 | + li {
121 | margin-left: 2px;
122 | }
123 |
124 | // Active state
125 | &.active > a {
126 | &,
127 | &:hover,
128 | &:focus {
129 | color: @nav-pills-active-link-hover-color;
130 | background-color: @nav-pills-active-link-hover-bg;
131 | }
132 | }
133 | }
134 | }
135 |
136 |
137 | // Stacked pills
138 | .nav-stacked {
139 | > li {
140 | float: none;
141 | + li {
142 | margin-top: 2px;
143 | margin-left: 0; // no need for this gap between nav items
144 | }
145 | }
146 | }
147 |
148 |
149 | // Nav variations
150 | // --------------------------------------------------
151 |
152 | // Justified nav links
153 | // -------------------------
154 |
155 | .nav-justified {
156 | width: 100%;
157 |
158 | > li {
159 | float: none;
160 | > a {
161 | text-align: center;
162 | }
163 | }
164 |
165 | @media (min-width: @screen-sm) {
166 | > li {
167 | display: table-cell;
168 | width: 1%;
169 | }
170 | }
171 | }
172 |
173 | // Move borders to anchors instead of bottom of list
174 | .nav-tabs-justified {
175 | border-bottom: 0;
176 | > li > a {
177 | border-bottom: 1px solid @nav-tabs-justified-link-border-color;
178 |
179 | // Override margin from .nav-tabs
180 | margin-right: 0;
181 | }
182 | > .active > a {
183 | border-bottom-color: @nav-tabs-justified-active-link-border-color;
184 | }
185 | }
186 |
187 |
188 | // Tabbable tabs
189 | // -------------------------
190 |
191 | // Clear any floats
192 | .tabbable {
193 | .clearfix();
194 | }
195 |
196 | // Show/hide tabbable areas
197 | .tab-content > .tab-pane,
198 | .pill-content > .pill-pane {
199 | display: none;
200 | }
201 | .tab-content,
202 | .pill-content {
203 | > .active {
204 | display: block;
205 | }
206 | }
207 |
208 |
209 |
210 | // Dropdowns
211 | // -------------------------
212 |
213 | // Make dropdown carets use link color in navs
214 | .nav .caret {
215 | border-top-color: @link-color;
216 | border-bottom-color: @link-color;
217 | }
218 | .nav a:hover .caret {
219 | border-top-color: @link-hover-color;
220 | border-bottom-color: @link-hover-color;
221 | }
222 |
223 | // Specific dropdowns
224 | .nav-tabs .dropdown-menu {
225 | // make dropdown border overlap tab border
226 | margin-top: -1px;
227 | // Remove the top rounded corners here since there is a hard edge above the menu
228 | .border-top-radius(0);
229 | }
230 |
--------------------------------------------------------------------------------