Permalink
Browse files

clean up some test data

  • Loading branch information...
1 parent 46835cc commit cc80b1e576c5e0af235df316125b5e9952ce6720 Jeff Escalante committed Jan 11, 2013
Showing with 2 additions and 2,424 deletions.
  1. +2 −1 .gitignore
  2. +0 −568 test/manual/public/css/index.html
  3. +0 −1,136 test/manual/public/css/main.css
  4. +0 −3 test/manual/public/css/test.css
  5. BIN test/manual/public/fonts/entypo/entypo.eot
  6. +0 −13 test/manual/public/fonts/entypo/entypo.svg
  7. BIN test/manual/public/fonts/entypo/entypo.ttf
  8. BIN test/manual/public/fonts/entypo/entypo.woff
  9. BIN test/manual/public/img/logo.png
  10. BIN test/manual/public/img/ribbon.png
  11. BIN test/manual/public/img/zebra.jpg
  12. +0 −154 test/manual/public/index.html
  13. +0 −49 test/manual/public/js/main.js
  14. +0 −34 test/manual/public/js/require.js
  15. +0 −8 test/manual/public/js/waypoints.min.js
  16. +0 −12 test/testproj/.gitignore
  17. +0 −31 test/testproj/app.coffee
  18. +0 −40 test/testproj/app.js
  19. +0 −48 test/testproj/assets/css/_settings.styl
  20. +0 −6 test/testproj/assets/css/example.css
  21. +0 −7 test/testproj/assets/css/main.styl
  22. +0 −7 test/testproj/assets/css/master.styl
  23. BIN test/testproj/assets/favicon.ico
  24. BIN test/testproj/assets/img/noise.png
  25. +0 −1 test/testproj/assets/js/_helper.coffee
  26. +0 −1 test/testproj/assets/js/main.coffee
  27. +0 −3 test/testproj/assets/js/main.js
  28. +0 −96 test/testproj/assets/js/pie.htc
  29. +0 −34 test/testproj/assets/js/require.js
  30. +0 −16 test/testproj/package.json
  31. BIN test/testproj/public/favicon.ico
  32. BIN test/testproj/public/img/noise.png
  33. +0 −96 test/testproj/public/pie.htc
  34. +0 −10 test/testproj/readme.md
  35. +0 −8 test/testproj/routes/index.js
  36. +0 −2 test/testproj/views/_partial.jade
  37. +0 −25 test/testproj/views/index.html
  38. +0 −5 test/testproj/views/index.jade
  39. +0 −10 test/testproj/views/layout.jade
View
3 .gitignore
@@ -1,3 +1,4 @@
.DS_Store
node_modules
-.sass-cache
+.sass-cache
+test/**/public
View
568 test/manual/public/css/index.html
@@ -1,568 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
- <meta name="description" content="roots is a light, fast build system for advanced front end development">
- <meta name="author" content="jeff escalante">
- <title>roots | where it all begins</title>
- <link rel="stylesheet" href="/css/main.css">
- <script src="//use.typekit.net/ltb5pgo.js"></script><script type="text/javascript">
-(function() {
-
- try {
- Typekit.load();
- } catch (e) {
-
- }
-
-}).call(this);
-</script>
- </head>
- <body><a href="http://github.com/jenius/roots-cli" class="fork-ribbon">fork on github</a>
- <header><a href="/" class="logo">roots | where it all begins</a>
- <nav>
- <ul>
- <li><a href="/#overview">overview</a></li>
- <li><a href="/css">css library</a></li>
- <li><a href="/#installation">installation</a></li>
- <li><a href="/#commands">commands</a></li>
- <li><a href="/#plugins">plugins</a></li>
- <li><a href="/#help">help</a></li>
- </ul>
- </nav>
- </header>
-<div id="hero">
- <h2>roots <span>&#9889; </span>better css</h2>
-</div>
-<div id="content" class="cssdocs">
- <div id="cssnav">
- <ul>
- <li><a href="#introduction">introduction</a></li>
- <li><a href="#settings">settings</a></li>
- <li><a href="#reset">reset</a></li>
- <li><a href="#vendor">vendor</a></li>
- <li><a href="#positioning">positioning</a></li>
- <li><a href="#grid">grid</a></li>
- <li><a href="#utilities">utilities</a></li>
- <li><a href="#typography">typography</a></li>
- <li><a href="#tables">tables</a></li>
- <li><a href="#gradients">gradients</a></li>
- <li><a href="#forms">forms</a></li>
- <li><a href="#code">code</a></li>
- <li><a href="#interaction">interaction</a></li>
- <li><a href="#easing">easing</a></li>
- <li><a href="#buttons">buttons</a></li>
- <li><a href="#ui">ui</a></li>
- <li><a href="#animation">animation</a></li>
- </ul>
- </div>
- <h3 id="introduction">introduction</h3><p>Roots includes a css library built on top of <a href="http://learnboost.github.com/stylus/">stylus</a>. It contains a lot of functionality and is very large, but it should be an easy transition from regular css, less, or sass. With stylus, you can use brackets and semicolons or not, your choice. You can even mix them. Pasting straight css will compile perfectly, and nothing in this library overrides anything in regular css in a destructive manner. In addition, this library adds no extra weight to your css footprint unless you do it specifically using mixins or imports. Roots css is an enhancement of regular css, and you can ease into it gradually, unlike some other libraries which require you to learn entirely new syntax.
-
-</p>
-<p>Since this library is mixin-based, it&#39;s worth briefly discussing mixins here. There are two ways to call a mixin in stylus, what I call the <em>mixin form</em> or the <em>native form</em>. The mixin form has parens and comma-separated arguments while the native form uses a colon and space-separated args.
-
-</p>
-<p>this is the mixin form: <code>mixin(arg1, arg2)</code><br>and this is the native form: <code>mixin: arg1 arg2</code>
-
-</p>
-<p>When calling mixins in roots, you should use the native style, <em>unless the mixin is being called at the root level</em>, in which case you should use the native syntax. When you call a mixin with no arguments, it must be followed by empty parens <code>()</code>. Examples below:
-
-</p>
-<pre><code>// root level, call with mixin syntax
-font-face(&#39;proxima-nova&#39;, &#39;/fonts&#39;)
-
-.picture
- // not root level, call with native syntax
- bg: &#39;/img/whatever.png&#39;
-
- // no arguments, call with empty parens
- transition()</code></pre>
-<p>Finally, the source code for roots is organized exactly as this page is, and is thoroughly commented and as clear as possible. Feel free to <a href="https://github.com/jenius/roots-css/tree/master/roots-css">check out the source</a> if you are after implementation details.</p>
-
- <h3 id="settings">settings</h3><p>There are a number of global settings in roots that you can and should feel free to override at any time. If you are using the <a href="https://github.com/jenius/roots-cli">roots command line client</a>, any project you generate will come with a copy of the roots settings file in the css and/or assets folder. I would list them all out here, but it&#39;s probably easier to just look at them directly.
-
-</p>
-<p><a href="https://github.com/jenius/roots-cli/blob/master/templates/new/assets/css/_settings.styl">Check out the settings variables &raquo;</a></p>
-
- <h3 id="reset">reset</h3><p>When you&#39;re trying to reset browser css, there are two ways to do it. The global reset gets rid of all browser default styles, and can be called with <code>global-reset()</code>. In addition, you can use <a href="http://necolas.github.com/normalize.css/">normalize.css</a> to normalize styles across browsers. Just call <code>normalize()</code>. Both of these should be executed at root level.</p>
-
- <h3 id="vendor">vendor</h3><p>Everybody hates vendor prefixing. It&#39;s just a huge pain, and there have been half a million solutions to it. Roots has the best one: don&#39;t worry about prefixes at all, ever. Don&#39;t do anything different. Just write the properties as they appear in the official spec and they will be prefixed for you automatically if necessary when compiled.
-
-</p>
-<p> <strong>Examples:</strong><br> <code>translate: rotate(45deg)</code><br> <code>box-shadow: 0 0 5px rgba(#000, .3)</code> </p>
-
- <h3 id="positioning">positioning</h3><p>Let&#39;s face it, writing out absolute, relative, or fixed positioning and the dimensions is a pain and takes a long time. So I ported (read: stole) this incredible couple of utilities from <a href="https://github.com/visionmedia/nib">nib</a>, which allow you to write out positions like such:
-
-</p>
-<p><code>absolute: top left</code><br><code>absolute: top 5px right</code><br><code>absolute: top left 5px</code><br><code>absolute: bottom 5px left 5px</code>
-
-</p>
-<p>Of course absolute can be substituted for relative or fixed. When you call <code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code> without a value after it, the value is assumed to be zero.</p>
-
- <h3 id="grid">grid</h3><p>There are hundreds of existing grid systems out there, and honestly there is no need to make another one just for roots. So I brought in the most excellent and flexible <a href="http://semantic.gs">semantic.gs</a>, which is truly fantastic. Feel free to check out the documentation on the semantic.gs site - but it&#39;s very easy to use. To set initial styles, call <code>grid()</code> at root level. There are a few configuration variables for the grid in the settings file. What follows is an example of a fluid grid with a main area and sidebar.
-
-</p>
-<pre><code> grid()
-
- column-width: 60
- gutter-width: 20
- columns: 12
- total-width: 100%
-
- .main
- .sidebar
- float: left
-
- .main
- column(9)
-
- .sidebar
- column(3)</code></pre>
-
- <h3 id="utilities">utilities</h3><p>The utilities module is a mixed bag of moderately to extremely useful css shortcuts.
-
-</p>
-<p><strong><code>size()</code></strong><br>This is the mixin I use most; it&#39;s a combination of width and height. Pass it a width and height or just one number which is set as the width and height. like this: <code>size: 50px 20px</code> or this: <code>size: 30px</code>. It defaults to <code>px</code> if you don&#39;t pass it a unit, so you can even call it like this if you want: <code>size: 10 27</code>
-
-</p>
-<p><strong><code>bold()</code></strong><br>Bold text. Makes way more sense and is a lot faster.
-
-</p>
-<p><strong><code>italic()</code></strong><br>Italic text.
-
-</p>
-<p><strong><code>normal()</code></strong><br>Removes all traces of boldenss and italic-ness from the text.
-
-</p>
-<p><strong><code>group()</code></strong><br>A way better name for clearfix. Can also be called as <code>clearfix()</code> if you really can&#39;t give up the nonsensical word.
-
-</p>
-<p><strong><code>inline-block()</code></strong><br>Renders <code>display: inline-block</code>, except it works in all browsers including old IE.
-
-</p>
-<p><strong><code>rounded()</code></strong><br>Renders <code>border-radius: 999px</code>
-
-</p>
-<p><strong><code>no-select()</code></strong><br>Sets <code>user-select</code> (prefixed) to none so that the text inside the specified element can&#39;t be selected. <a href="https://developer.mozilla.org/en-US/docs/CSS/user-select">More info on user-select here</a>.
-
-</p>
-<p><strong><code>b()</code></strong><br>Short alias for <code>border: 1px solid</code>.
-
-</p>
-<p><strong><code>bg(path, args...)</code></strong><br>Shortcut for setting the background to an image. Call it with a quoted image path to render <code>background: url(path/image.jpg) no-repeat</code>. If you pass it more arguments after the image path, they will replace <code>no-repeat</code>.
-
-</p>
-<p><strong><code>font-face(name, folder, weight = normal, style = normal)</code></strong><br>Pass a name for the font and the folder it&#39;s in and it will declare the font-face using the lightweight and reliable <a href="http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax">fontspring syntax</a>. It will look for the font based on <code>folder/name.extension</code> - we&#39;ll take care of the extension. So if you passed it like this: <code>font-face: myfont &#39;/fonts&#39;</code>, it would look in <code>/fonts/myfont.ttf</code> for the ttf file, for example, and the font would be named <code>myfont</code> in your css.
-
-</p>
-<p><strong><code>triangle(direction = up, size = 10px, color = #000)</code></strong><br>Makes a little html triangle. Pass it a direction, size, and color.
-
-</p>
-<p><strong><code>image-replace(path, dimensions)</code></strong><br>Image replacement. Pass it an image path and the dimensions of the image and it will replace get rid of any text in the div and render an image instead. But it&#39;s still semantic! Can also be called with <code>ir()</code>.
-
-</p>
-<p><strong><code>raquo()</code></strong><br>Puts a <a href="http://www.raquo.net/">raquo</a> after whatever text is in your div semantically. Because raquos are awesome, but they aren&#39;t really that semantic.
-
-</p>
-<p><strong><code>columns(count = 3, gap = 30px, width = null, rule = null)</code></strong><br>Column-ize that shit. Takes number of columns, gap between columns, width of each column, and if you want a column rule (syntax like border). Combines <code>column-count</code>, <code>column-gap</code>, <code>column-width</code>, and <code>column-rule</code> into one convenient package.
-
-</p>
-<p><strong><code>debug()</code></strong><br>A moderately useful mixin - drop this at root level and it will put yellow or red borders around objects for which there are errors, like missing alt attributes on images or empty links. Everything valid gets a green border.</p>
-
- <h3 id="typography">typography</h3><p>Everyone wants to have typography their own way so I&#39;m not messing with any grids or vertical rhythms or anything here. Just the basics to make your type look nice, and a few shortcuts for uselessly long common properties.
-
-</p>
-<p><strong><code>paragraph(size = font-size, margins = true)</code></strong><br>Sets the font to the specified size, adds a nice line-height, and unless you turn it off, adds appropriate margins for paragraphs.
-
-</p>
-<p><strong><code>fs(size)</code></strong><br>A shortcut for <code>font-size</code>.
-
-</p>
-<p><strong><code>upcase()</code></strong><br><code>text-transform: uppercase</code>. Can also be called as <code>uppercase()</code>.
-
-</p>
-<p><strong><code>downcase()</code></strong><br><code>text-transform: lowercase</code>. Can also be called as <code>lowercase()</code>.
-
-</p>
-<p><strong><code>reset-case()</code></strong><br><code>text-transform: none</code>. Just regular case.
-
-</p>
-<p><strong><code>h1(), h2(), h3(), h4(), h5(), h6()</code></strong><br>Nice default sizes and styles for headings.
-
-</p>
-<p><strong><code>link(color = blue, style = underline)</code></strong><br>A boilerplate link default style. Uses border-bottom for the underline by default for smooth transitions. The style parameter accepts <code>underline</code>, <code>darken</code>, <code>lighten</code>, or <code>glow</code>, and you can pass any valid color to the color parameter.
-
-</p>
-<p><strong><code>reset-link()</code></strong><br>Takes all the styling off links, including the annoying underline on default styles, and if you have the above link mixin, all borders and hover effects.
-
-</p>
-<p><strong><code>text-selection(color = highlight-color, textColor = null)</code></strong><br>Sets the text selection color either to the default variable or to any color you pass in. Sets the text color by default to white for dark hilight colors and black for light hilight colors, but you can override it if you want.
-
-</p>
-<p><strong><code>ul(style = disc)</code></strong><br>A nice, semantic, and unorderd list that scales with the font-size. Takes an optional style, which can be <a href="https://developer.mozilla.org/en-US/docs/CSS/list-style-type">anything you would pass to</a> <code>list-style-type</code> in css.
-
-</p>
-<p><strong><code>ol(style = decimal)</code></strong><br>Same thing as above, but an ordered list.
-
-</p>
-<p><strong><code>inline-list(spacing = 20px)</code></strong><br>Put this on a <code>ul</code> or <code>ol</code> and your list will be inline and work in any browser. Pass an optional spacing value to change the spacing between list items.
-
-</p>
-<p><strong><code>reset-list()</code></strong><br>Strips a list of all styles that would be there by default or from one of the above mixins.
-
-</p>
-<p><strong><code>blockquote()</code></strong><br>Nice default style for a blockquote. Expects the quote to be in a nested paragraph element and the citation to be in a cite element.
-
-</p>
-<hr>
-<p><em>Each of the below mixins apply styles to elements which means they should be called at root level. If you accidentally call them nested under another element, they will render nothing and add a warning to the console.</em>
-
-</p>
-<hr>
-<p><strong><code>base(fonts = font-stack, size = font-size, color = font-color)</code></strong><br>Applies the default font size, color, and font-family to the body, and adds better anti-aliasing. A great place to start for a custom site.
-
-</p>
-<p><strong><code>headers()</code></strong><br>Adds roots&#39; header mixins to the <code>h1</code> - <code>h6</code> tags
-
-</p>
-<p><strong><code>lists()</code></strong><br>Adds roots&#39; list styles to <code>ol</code> and <code>ul</code>.
-
-</p>
-<p><strong><code>bold-italic()</code></strong><br>Adds bold and italic styles to <code>b</code>, <code>i</code>, <code>strong</code>, and <code>em</code> tags.
-
-</p>
-<p><strong><code>typography()</code></strong><br>Executes <code>bold-italic()</code>, <code>headers()</code>, <code>text-selection()</code>, and <code>lists()</code>, adds <code>paragraph()</code> to the <code>p</code> tag, <code>small-text()</code> to the <code>small</code> tag, <code>link()</code> to the <code>a</code> tag, and <code>blockquote()</code> to the <code>blockquote</code> tag - intelligent defaults for all the typography basics.</p>
-
- <h3 id="tables">tables</h3><p>The tables are ported directly from <a href="http://twitter.github.com/bootstrap/base-css.html#tables">twitter bootstrap</a>, because they did a good job with them. It&#39;s just one mixin which takes care of all the aspects of a nice table.
-
-</p>
-<p><strong><code>table(border = true, striped = true, condensed = false)</code></strong><br>Add this to a <code>table</code> tag to get a nice-looking table. All options are boolean and do just about what they say.
-
-</p>
-<p><strong><code>tables()</code></strong><br>Root level mixin that just adds <code>table()</code> to the <code>table</code> tag. Almost always more convenient.</p>
-
- <h3 id="gradients">gradients</h3><p>Gradients are a huge pain in css, but roots makes life a bit easier on that front. There are a number of methods available that you can utilize to make gradients easier, ranging from finer control to simpler and more generic mixins. All credit for the incredible base gradient logic goes again to <a href="https://github.com/visionmedia">TJ</a> and <a href="https://github.com/visionmedia/nib">nib</a>, which I shamelessly ported here. Open source ftw!
-
-</p>
-<p><strong><code>linear-gradient(start, stops...)</code></strong><br>Probably the most insane mixin in this library. It can be used as the value of a background, and will automatically prefix itself with multiple background properties. The way it&#39;s declared is with an optional starting point (top, bottom, left, right, defaults to top if not provided) then gradient stops, which is a percentage followed by a space followed by a color. A few examples:
-
-</p>
-<p><code>background: linear-gradient(top, red, green, blue)</code><br><code>background: linear-gradient(bottom, red, green 50%, blue)</code><br><code>background: linear-gradient(bottom, red, 50% green, blue)</code><br><code>background: linear-gradient(bottom, red, 50% green, 90% white, blue)</code>
-
-</p>
-<p>Try experimenting around a bit with this one, you&#39;ll get it quickly.
-
-</p>
-<p><strong><code>gradient(color1, color2)</code></strong><br>Simple top-to-bottom two-color gradient. IE support if pie is enabled in settings.
-
-</p>
-<p><strong><code>simple-gradient(color, strength = 10%)</code></strong><br>Pass the base color, the mixin will lighten and darken it by the specified strength and create a simple gradient with the base color being the middle/average.
-
-</p>
-<p><strong><code>noise-gradient(color1, color2, imagePath = &#39;/img/noise.png&#39;)</code></strong><br>Roots ships with a tiny light noise image tile which is useful for adding a bit of randomness to an otherwise solid color. This gradient adds that image on top, which gives it a slightly more organic feel. Of course if you have your own noise or other image, you can override the default here.
-
-</p>
-<p><strong><code>simple-noise-gradient(color, strength = 10%, imagePath = &#39;/img/noise.png)</code></strong><br>Same as simple gradient, but includes the noise image over the top.</p>
-
- <h3 id="forms">forms</h3><p>Forms are one of the most difficult and annoying things to style. It&#39;s impossible to make assumptions about the html structure of the forms, so many of the core mixins here just provide basic nicer-looking form fields without trying to align things correctly for you (although a few mixins present that option if you want).
-
-</p>
-<p><strong><code>input(color = light-blue, width = 250px)</code></strong><br>The most important mixin here. Nice-looking and basic default styles for input fields. Takes an optional color and width, and comes with a style when focused based on the color.
-
-</p>
-<p><strong><code>input-disabled()</code></strong><br>Put this on an input and it will style it so that it looks disabled. Make sure to actually disable the input in your html as well.
-
-</p>
-<p><strong><code>label(display = inline-block)</code></strong><br>Super basic label styles. Pass it an optional value for <code>display</code>.
-
-</p>
-<p><strong><code>field(direction = right, width = 370px)</code></strong><br>Often times it&#39;s easier to wrap your input and label in a div called <code>field</code> so the input and label can be floated, positioned, and manipulated without screwing up the rest of the form. That&#39;s what this mixin is for - put it on a div that contains a label and an input. Then feed it a direction to align (default is right), and an optional width.
-
-</p>
-<p><strong><code>input-error(color = red)</code></strong><br>Throw this on an input element to give it a red hue indicitive of an egregious error. Best used when applied to a class called <code>.error</code>, for example. Can also be called on a wrapper div as <code>field-error(color)</code> (if you are using wrapper divs) to color the label text red as well.
-
-</p>
-<p><strong><code>input-warning(color = yellow)</code></strong><br>Exactly the same as above, but yellow for warning. Can also be called as <code>field-warning(color)</code>, same as above.
-
-</p>
-<p><strong><code>input-success(color = green)</code></strong><br>Exactly the same as the two others but with a green color. Again, you can use <code>field-success(color)</code> on a wrapper div for the same effect.
-
-</p>
-<hr>
-<p><em>These form helpers can be applied at root level to apply defaults intelligently to certain classes and elements.</em>
-
-</p>
-<hr>
-<p><strong><code>forms()</code></strong><br>Applies the <code>input</code> mixin to all types of input and if classes of <code>disabled</code>, <code>success</code>, <code>warning</code>, and/or <code>error</code> are applied to an input, they are styled appropriately.
-
-</p>
-<p><strong><code>fields()</code></strong><br>Applies the <code>field()</code> mixin to any element with a <code>field</code> class. If a <code>success</code>, <code>warning</code>, or <code>error</code> class is applied, they are also styled appropriately.</p>
-
- <h3 id="code">code</h3><p>A simple modules that applies appropriate styles to <code>code</code> and <code>pre</code> blocks.
-
-</p>
-<p><strong><code>code(color = #DF5C33)</code></strong><br>Styles inline code snippets on the page. Defaults to a nice attention-catching red, but accepts any other color as well.
-
-</p>
-<p><strong><code>pre()</code></strong><br>Monospace font and a light background and border for longer blocks of code.
-
-</p>
-<p><strong><code>code-blocks()</code></strong><br>This is a <em>root level mixin</em> which applies the <code>code</code> and <code>pre</code> mixins to <code>code</code> and <code>pre</code> elements automatically.</p>
-
- <h3 id="interaction">interaction</h3><p>This module is where stylus&#39; power really shines. Often times, we find ourselves executing the same types of hover effects over and over. Hover this and it&#39;s underlined. Hover this and it lightens or darkens the background color, etc. This set of mixins are shortcuts for these situations.
-
-</p>
-<p><strong><code>hover-darken(percent = 15%)</code></strong><br>Looks first for a background color defined on the element, then for a color. If it finds either of these, it will darken them by the specified percentage when the element is hovered. If not, it will throw a warning that the element needs a color or background color.
-
-</p>
-<p><strong><code>hover-lighten(percent = 15%)</code></strong><br>Exact same as above, but it lightens the color instead.
-
-</p>
-<p><strong><code>hover-underline()</code></strong><br>Uses border-bottom to add an underline to the specified element on hover. If you already have a border on the bottom, this will probably cause an issue.
-
-</p>
-<p><strong><code>hover-pop(scale = 1.2, rotate = null, shadow = null)</code></strong><br>When you hover an element, it will scale up so it appears to be popping out. Works best with a css transition. If you specify a degree measure (like <code>45deg</code>), it will rotate that much as it pops, and if you set shadow to true, it will add a little drop shadow as it comes out. An example of a call with all params specified: <code>hover-pop: 1.2 15deg true</code>
-
-</p>
-<p><strong><code>hover-fade(amount)</code></strong><br>When the element is hovered, it&#39;s opacity is set to the specified amount. Also works great with a transition.
-
-</p>
-<p><strong><code>hover-color(color)</code></strong><br>Looks first for a background color, then a color on the current element. If it finds one, it will swap it for the color passed as an argument. Also looks much better with a transition.</p>
-
- <h3 id="easing">easing</h3><p>You seriously expect me to write out cubic bezier functions in this $6,800 suit? <a href="http://www.youtube.com/watch?v=81Nl7VYFEaI">Come on!</a> Roots has all the most common easing functions right here for you, in english™! You can use these anywhere, but they are probably most useful in a transition, like this for example: <code>transition: all .25s ease-in-sine</code>. It&#39;s almost like this was actually a part of css like it should be!
-</p>
-
- <div class="easing-demo">
- <div class="ease-in-quad">
- <div class="name">ease-in-quad</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-cubic">
- <div class="name">ease-in-cubic</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-quart">
- <div class="name">ease-in-quart</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-quint">
- <div class="name">ease-in-quint</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-sine">
- <div class="name">ease-in-sine</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-expo">
- <div class="name">ease-in-expo</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-circ">
- <div class="name">ease-in-circ</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-back">
- <div class="name">ease-in-back</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-out-quad">
- <div class="name">ease-out-quad</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-out-cubic">
- <div class="name">ease-out-cubic</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-out-quart">
- <div class="name">ease-out-quart</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-out-quint">
- <div class="name">ease-out-quint</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-out-sine">
- <div class="name">ease-out-sine</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-out-expo">
- <div class="name">ease-out-expo</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-out-circ">
- <div class="name">ease-out-circ</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-out-back">
- <div class="name">ease-out-back</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-out-quad">
- <div class="name">ease-in-out-quad</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-out-cubic">
- <div class="name">ease-in-out-cubic</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-out-quart">
- <div class="name">ease-in-out-quart</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-out-quint">
- <div class="name">ease-in-out-quint</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-out-sine">
- <div class="name">ease-in-out-sine</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-out-expo">
- <div class="name">ease-in-out-expo</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-out-circ">
- <div class="name">ease-in-out-circ</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- <div class="ease-in-out-back">
- <div class="name">ease-in-out-back</div>
- <div class="animation">
- <div class="box"></div>
- <div class="line"></div>
- </div>
- </div>
- </div>
- <h3 id="buttons">buttons</h3><p>This begins the UI section of roots, which is designed to be as modular and flexible as possible. Since the buttons are so complex, they are split into their own section, and below this is a collection of other smaller UI components.
-
-</p>
-<p><strong><code>simple-button(color = default, size = &#39;medium&#39;)</code></strong><br>A simple, flat, one-color button. Example below. Takes a color and a size. Color can be any valid color, and the size can be <code>small</code>, <code>medium</code>, <code>large</code>, or a number from 1 to infinity, no units necessary.
-</p>
-
- <div class="btn-simple">click me!</div><p><strong><code>button(color = default, size = &#39;medium&#39;)</code></strong><br>A more shinier and modern button, same parameters as the simple button. Any color, any size. Very flexible and useful. Example below.
-</p>
-
- <div class="btn">no me, i'm shinier</div><p><strong><code>button-disabled()</code></strong><br>Lay this mixin down on any roots-css button and it will appear to be disabled. Again, make sure you actually disable it in your html.
-</p>
-
- <div class="btn disabled">don't click me :(</div><p><strong><code>buttons()</code></strong><br>This is <em>a root level mixin</em> that applies the <code>simple-button</code> mixin to the class <code>btn-simple</code> and the <code>button</code> mixin to the class <code>btn</code>. If you add a <code>disabled</code> class to either one, it will render appropriately as well.</p>
-
- <h3 id="ui">ui</h3><p>There are a variety of UI components I find myself using over and over which I&#39;ve tried to abstract into flexible mixins here.
-
-</p>
-<p><strong><code>area(color = #f5f5f5)</code></strong><br>Light grey background, padding, and subtle inner shadow provide a nice box around some content. You can change the color, but don&#39;t get too crazy.
-</p>
-<p><strong><code>notice(width = false, color = #f5f5f5)</code></strong><br>This is best used in notifications or flash messages, as will be seen below. This is the version that you can customize more - just a rectangular box with bold text and a light gradient in the background, intended for sitting at the top of the screen and notifying the user of something.
-</p>
-
- <div class="notice">look at me!</div><p><strong><code>flash(type = notice)</code></strong><br>This is a standard notice, but comes pre-populated with the four most common flavors. <code>notice</code>, <code>success</code>, <code>error</code>, and <code>warning</code>. Examples below.
-</p>
-
- <div class="flash notice">hey, i have something to tell you</div>
- <div class="flash warning">you'd better watch yourself son</div>
- <div class="flash error">delete the logs! we've been breached!</div>
- <div class="flash success">awwww yeaahhh - you won life!</div><p><strong><code>breadcrumb(character = &#39;/&#39;, spacing = 10px, divider-color = #cdcdcd)</code></strong><br>Place this on a <code>ul</code> and it will create an inline list separated by the specified character. Nice for breadcrumb trails - example below.
-</p>
-
- <div class="breadcrumbs">
- <ul>
- <li>system</li>
- <li>bin</li>
- <li>roots</li>
- <li>mixins</li>
- <li>breadcrumb</li>
- </ul>
- </div><p><strong><code>bubble(pointer = left, color = #eee, width = false)</code></strong><br>Creates a little speech bubble. Specify if you want the pointer on the <code>left</code>, <code>center</code>, or <code>right</code>, add a color, and set a width if you&#39;d like. Very helpful, example below.
-</p>
-
- <div class="bubble">hey girl, check out my curves</div><p><strong><code>figure(color = default, dimensions = false)</code></strong><br>Place this on a figure element and it will nicely style an <code>img</code> and <code>figcaption</code> nested inside. Example below.
-</p>
-
- <figure><img src="/img/zebra.jpg"/>
- <figcaption>a fine specimen of zebra. a fine specimen indeed.</figcaption>
- </figure><p><strong><code>nav(size = 1, color = #222, link-color = #fff, fixed = true)</code></strong><br>Creates a standard navigation bar. The size parameter just scales everything up or down, the rest is self-explanitory. Make sure to put this mixin on a <code>nav</code> element with a <code>ul</code> and/or <code>h1</code> inside for the navigation and title respetively. Click here to see an example.
-
-</p>
-<p><strong><code>flash-notices()</code></strong><br>This is a <em>root level mixin</em> which adds the appropriate flash notification mixin to elements with the classes <code>.flash .error</code>, <code>.flash .success</code>, <code>.flash .notice</code>, or <code>.flash .warning</code>. Must have both of the classes. It will make sense once you start styling them.</p>
-
- <h3 id="animation">animation</h3><p>There are a bunch of animations available in roots-css that have been ported from <a href="http://daneden.me/animate/">animate.css</a>. If you @import <code>roots-css/animation</code>, they will be made available and you can use any of them in your project. Note that any animation with &quot;big&quot; at the end has been left out because these are horrendous and should never be used. And if you really want to use it, you can write it yourself. An example of usage would be as such:
-
-</p>
-<pre><code> @import &#39;roots-css/animation&#39;
- .test
- animation: bounce 3s infinite</code></pre>
-
-</div>
- </body>
- <script data-main="/js/main" src="/js/require.js"></script>
-</html>
View
1,136 test/manual/public/css/main.css
@@ -1,1136 +0,0 @@
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-nav,
-section {
- display: block;
-}
-audio,
-canvas,
-video {
- display: inline-block;
- *display: inline;
- *zoom: 1;
-}
-audio:not([controls]) {
- display: none;
-}
-[hidden] {
- display: none;
-}
-html {
- font-size: 100%;
- overflow-y: scroll;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
-}
-body {
- margin: 0;
-}
-body,
-button,
-input,
-select,
-textarea {
- font-family: sans-serif;
-}
-a:focus {
- outline: thin dotted;
-}
-a:hover,
-a:active {
- outline: 0;
-}
-h1 {
- font-size: 2em;
-}
-abbr[title] {
- border-bottom: 1px dotted;
-}
-b,
-strong {
- font-weight: bold;
-}
-blockquote {
- margin: 1em 40px;
-}
-dfn {
- font-style: italic;
-}
-mark {
- background: #ff0;
- color: #000;
-}
-pre,
-code,
-kbd,
-samp {
- font-family: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace, serif;
- _font-family: 'Courier New', 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
- font-size: 1em;
-}
-pre {
- white-space: pre;
- white-space: pre-wrap;
- word-wrap: break-word;
-}
-q {
- quotes: none;
-}
-q:before,
-q:after {
- content: '';
- content: none;
-}
-small {
- font-size: 75%;
-}
-sub,
-sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-sup {
- top: -0.5em;
-}
-sub {
- bottom: -0.25em;
-}
-ul,
-ol {
- margin-left: 0;
- padding: 0 0 0 40px;
-}
-dd {
- margin: 0 0 0 40px;
-}
-nav ul,
-nav ol {
- list-style: none;
- list-style-image: none;
-}
-img {
- border: 1px solid;
- -ms-interpolation-mode: bicubic;
-}
-svg:not(:root) {
- overflow: hidden;
-}
-figure {
- margin: 0;
-}
-form {
- margin: 0;
-}
-fieldset {
- border: 1px solid #c0c0c0;
- margin: 0 2px;
- padding: 0.35em 0.625em 0.75em;
-}
-legend {
- border: 1px solid;
- *margin-left: -7px;
-}
-button,
-input,
-select,
-textarea {
- font-size: 100%;
- margin: 0;
- vertical-align: baseline;
- *vertical-align: middle;
-}
-button,
-input {
- line-height: normal;
-}
-button,
-input[type='button'],
-input[type='reset'],
-input[type='submit'] {
- cursor: pointer;
- -webkit-appearance: button;
- *overflow: visible;
-}
-input[type="checkbox"],
-input[type="radio"] {
- box-sizing: border-box;
- padding: 0;
-}
-input[type="search"] {
- -webkit-appearance: textfield;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
-}
-input[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
- border: 1px solid;
- padding: 0;
-}
-textarea {
- overflow: auto;
- vertical-align: top;
-}
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-body {
- font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
- font-size: 96.9%;
- font-size: 15px;
- color: #555;
- -webkit-font-smoothing: antialiased;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
-}
-.btn-simple {
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -o-transition: all .3s ease;
- -ms-transition: all .3s ease;
- transition: all .3s ease;
- font-size: 13px;
- padding: 9.945px 21.879px;
- -webkit-border-radius: 3.000002307694083px;
- -moz-border-radius: 3.000002307694083px;
- -o-border-radius: 3.000002307694083px;
- -ms-border-radius: 3.000002307694083px;
- border-radius: 3.000002307694083px;
- background-color: #00a6fc;
- color: #fff;
- color: rgba(255,255,255,0.95);
- cursor: pointer;
- font-weight: bold;
- font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
- line-height: 1;
- text-align: center;
- text-decoration: none;
- display: inline-block;
-}
-.btn-simple:hover,
-.btn-simple:focus {
- background-color: #009eef;
- color: #f7f7f7;
- color: rgba(247,247,247,0.95);
-}
-.btn-simple:active {
- background-color: #0095e3;
-}
-.btn {
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -o-transition: all .3s ease;
- -ms-transition: all .3s ease;
- transition: all .3s ease;
- font-size: 13px;
- padding: 9.945px 21.879px;
- -webkit-border-radius: 3.000002307694083px;
- -moz-border-radius: 3.000002307694083px;
- -o-border-radius: 3.000002307694083px;
- -ms-border-radius: 3.000002307694083px;
- border-radius: 3.000002307694083px;
- background: url("noise.png") repeat, #0095e3 -webkit-gradient(linear, left top, left bottom, color-stop(0, #17b0ff), color-stop(1, #0095e3)) repeat-x;
- background: url("noise.png") repeat, #0095e3 -webkit-linear-gradient(top, #17b0ff 0%, #0095e3 100%) repeat-x;
- background: url("noise.png") repeat, #0095e3 -moz-linear-gradient(top, #17b0ff 0%, #0095e3 100%) repeat-x;
- background: url("noise.png") repeat, #0095e3 -o-linear-gradient(top, #17b0ff 0%, #0095e3 100%) repeat-x;
- background: url("noise.png") repeat, #0095e3 -ms-linear-gradient(top, #17b0ff 0%, #0095e3 100%) repeat-x;
- background: url("noise.png") repeat, #0095e3 linear-gradient(top, #17b0ff 0%, #0095e3 100%) repeat-x;
- text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
- border: 1px solid #0095e3;
- color: #fff;
- color: rgba(255,255,255,0.95);
- -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
- -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
- -o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
- -ms-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
- box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
- cursor: pointer;
- font-weight: bold;
- font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
- line-height: 1;
- text-align: center;
- text-decoration: none;
- display: inline-block;
-}
-.btn:hover,
-.btn:focus {
- background-position: 0 -9.945px;
- color: #f7f7f7;
- color: rgba(247,247,247,0.95);
- text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
-}
-.btn:active {
- -webkit-box-shadow: inset 0 1px 5px rgba(0,124,189,0.6);
- -moz-box-shadow: inset 0 1px 5px rgba(0,124,189,0.6);
- -o-box-shadow: inset 0 1px 5px rgba(0,124,189,0.6);
- -ms-box-shadow: inset 0 1px 5px rgba(0,124,189,0.6);
- box-shadow: inset 0 1px 5px rgba(0,124,189,0.6);
- text-shadow: 0 -1px 1px rgba(0,0,0,0.2);
- border-color: #0088cf;
-}
-.btn.disabled,
-.btn-simple.disabled {
- background: #ccc;
- border-color: #b8b8b8;
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
- opacity: 0.5;
- cursor: default;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -o-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-.btn.disabled:hover,
-.btn-simple.disabled:hover {
- background: #ccc;
- background-position: 0 0;
-}
-.btn.disabled:active,
-.btn-simple.disabled:active {
- background: #ccc;
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- -o-box-shadow: none;
- -ms-box-shadow: none;
- box-shadow: none;
- border-color: #b8b8b8;
- text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
-}
-.flash.error {
- background: #e67467 -webkit-gradient(linear, left top, left bottom, color-stop(0, #e88074), color-stop(1, #e67467)) repeat-x;
- background: #e67467 -webkit-linear-gradient(top, #e88074 0%, #e67467 100%) repeat-x;
- background: #e67467 -moz-linear-gradient(top, #e88074 0%, #e67467 100%) repeat-x;
- background: #e67467 -o-linear-gradient(top, #e88074 0%, #e67467 100%) repeat-x;
- background: #e67467 -ms-linear-gradient(top, #e88074 0%, #e67467 100%) repeat-x;
- background: #e67467 linear-gradient(top, #e88074 0%, #e67467 100%) repeat-x;
- zoom: 1;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- -o-border-radius: 5px;
- -ms-border-radius: 5px;
- border-radius: 5px;
- padding: 15px;
- border: 1px solid #e26153;
- -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
- position: relative;
- color: #fff;
- font-weight: bold;
- text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
-}
-.flash.error:before,
-.flash.error:after {
- content: "";
- display: table;
-}
-.flash.error:after {
- clear: both;
-}
-.flash.warning {
- background: #fae46c -webkit-gradient(linear, left top, left bottom, color-stop(0, #fae77b), color-stop(1, #fae46c)) repeat-x;
- background: #fae46c -webkit-linear-gradient(top, #fae77b 0%, #fae46c 100%) repeat-x;
- background: #fae46c -moz-linear-gradient(top, #fae77b 0%, #fae46c 100%) repeat-x;
- background: #fae46c -o-linear-gradient(top, #fae77b 0%, #fae46c 100%) repeat-x;
- background: #fae46c -ms-linear-gradient(top, #fae77b 0%, #fae46c 100%) repeat-x;
- background: #fae46c linear-gradient(top, #fae77b 0%, #fae46c 100%) repeat-x;
- zoom: 1;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- -o-border-radius: 5px;
- -ms-border-radius: 5px;
- border-radius: 5px;
- padding: 15px;
- border: 1px solid #f9df53;
- -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
- position: relative;
- font-weight: bold;
- text-shadow: 1px 1px 1px rgba(255,255,255,0.2);
-}
-.flash.warning:before,
-.flash.warning:after {
- content: "";
- display: table;
-}
-.flash.warning:after {
- clear: both;
-}
-.flash.notice {
- background: #62c1fa -webkit-gradient(linear, left top, left bottom, color-stop(0, #70c7fa), color-stop(1, #62c1fa)) repeat-x;
- background: #62c1fa -webkit-linear-gradient(top, #70c7fa 0%, #62c1fa 100%) repeat-x;
- background: #62c1fa -moz-linear-gradient(top, #70c7fa 0%, #62c1fa 100%) repeat-x;
- background: #62c1fa -o-linear-gradient(top, #70c7fa 0%, #62c1fa 100%) repeat-x;
- background: #62c1fa -ms-linear-gradient(top, #70c7fa 0%, #62c1fa 100%) repeat-x;
- background: #62c1fa linear-gradient(top, #70c7fa 0%, #62c1fa 100%) repeat-x;
- zoom: 1;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- -o-border-radius: 5px;
- -ms-border-radius: 5px;
- border-radius: 5px;
- padding: 15px;
- border: 1px solid #49b7f9;
- -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
- position: relative;
- color: #fff;
- font-weight: bold;
- text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
-}
-.flash.notice:before,
-.flash.notice:after {
- content: "";
- display: table;
-}
-.flash.notice:after {
- clear: both;
-}
-.flash.success {
- background: #73dc9d -webkit-gradient(linear, left top, left bottom, color-stop(0, #7fdfa6), color-stop(1, #73dc9d)) repeat-x;
- background: #73dc9d -webkit-linear-gradient(top, #7fdfa6 0%, #73dc9d 100%) repeat-x;
- background: #73dc9d -moz-linear-gradient(top, #7fdfa6 0%, #73dc9d 100%) repeat-x;
- background: #73dc9d -o-linear-gradient(top, #7fdfa6 0%, #73dc9d 100%) repeat-x;
- background: #73dc9d -ms-linear-gradient(top, #7fdfa6 0%, #73dc9d 100%) repeat-x;
- background: #73dc9d linear-gradient(top, #7fdfa6 0%, #73dc9d 100%) repeat-x;
- zoom: 1;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- -o-border-radius: 5px;
- -ms-border-radius: 5px;
- border-radius: 5px;
- padding: 15px;
- border: 1px solid #5fd790;
- -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
- position: relative;
- color: #fff;
- font-weight: bold;
- text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
-}
-.flash.success:before,
-.flash.success:after {
- content: "";
- display: table;
-}
-.flash.success:after {
- clear: both;
-}
-@font-face {
- font-family: 'entypo';
- src: url("/fonts/entypo/entypo.eot?#iefix") format('embedded-opentype'), url("/fonts/entypo/entypo.woff") format('woff'), url("/fonts/entypo/entypo.ttf") format('truetype'), url("/fonts/entypo/entypo.svg#svgFontName") format('svg');
-}
-body {
- border-top: 7px solid #e77552;
- font-family: 'freight-sans-pro', sans-serif;
- position: relative;
- background: #f6f8fb;
- overflow-x: hidden;
- -webkit-animation: fadeIn 1s ease;
-}
-strong {
- font-weight: 600;
-}
-strong code {
- color: inherit;
-}
-hr {
- border: 1px solid #ccc;
- border-top: none;
-}
-code {
- color: #e77552;
- font-size: 0.95em;
-}
-code.big {
- font-size: 1.4em;
-}
-.fork-ribbon {
- display: block;
- position: absolute;
- top: 25px;
- right: -45px;
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
- background: #3e444d;
- padding: 5px 50px;
- color: #fff;
- text-decoration: none;
-}
-header {
- zoom: 1;
- padding: 60px;
- width: 960px;
- margin: 0 auto;
-}
-header:before,
-header:after {
- content: "";
- display: table;
-}
-header:after {
- clear: both;
-}
-header .logo {
- font: 0/0 a;
- text-shadow: none;
- color: transparent;
- background: url("/img/logo.png") no-repeat;
- width: 163px;
- height: 84px;
- float: left;
- display: block;
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -o-transition: all .3s ease;
- -ms-transition: all .3s ease;
- transition: all .3s ease;
-}
-header .logo:hover {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
- opacity: 0.8;
-}
-header nav {
- float: right;
-}
-header nav ul {
- zoom: 1;
- margin: 0;
- padding: 0;
- padding-top: 30px;
- color: #a8a9ab;
- font-size: 18px;
-}
-header nav ul:before,
-header nav ul:after {
- content: "";
- display: table;
-}
-header nav ul:after {
- clear: both;
-}
-header nav ul li {
- float: left;
- margin-right: 20px;
- list-style-type: none;
-}
-header nav ul li:last-child {
- margin-right: 0;
-}
-header nav ul li a {
- color: #a8a9ab;
- text-decoration: none;
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -o-transition: all .3s ease;
- -ms-transition: all .3s ease;
- transition: all .3s ease;
-}
-header nav ul li a:hover {
- color: #8e8e8e;
-}
-#hero {
- background: #3e444d;
- color: #fff;
- padding: 50px;
-}
-#hero h2 {
- width: 800px;
- margin: 0 auto;
- font-weight: normal;
- text-align: center;
- font-size: 2.5em;
-}
-#hero h2 span {
- font-size: 1.4em;
- margin-right: -4px;
- font-family: 'entypo';
-}
-#hero ul {
- zoom: 1;
- margin: 0;
- padding: 0;
- width: 700px;
- margin: 0 auto;
-}
-#hero ul:before,
-#hero ul:after {
- content: "";
- display: table;
-}
-#hero ul:after {
- clear: both;
-}
-#hero ul li {
- float: left;
- margin-right: 120px;
- list-style-type: none;
-}
-#hero ul li:last-child {
- margin-right: 0;
-}
-#hero ul li:nth-child(2) .icon {
- -webkit-animation-delay: 0.3s;
-}
-#hero ul li:nth-child(3) .icon {
- -webkit-animation-delay: 0.5s;
-}
-#hero ul li .icon {
- -webkit-animation: icon-in 1s ease;
- font-family: 'entypo';
- font-size: 180px;
- text-align: center;
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
- opacity: 0;
-}
-#hero ul li span {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
- opacity: 0.6;
-}
-#content {
- max-width: 960px;
- padding: 0 40px;
- margin: 0 auto;
- margin-bottom: 160px;
-}
-#content.cssdocs {
- padding-left: 260px;
- padding-right: 0;
- max-width: 700px;
-}
-#content h3 {
- font-weight: normal;
- color: #333;
- font-size: 2em;
- margin-bottom: 15px;
- margin-top: 25px;
-}
-#content p {
- color: #7e7e7e;
- font-size: 16px;
- line-height: 1.6em;
-}
-#content ul {
- color: #888;
- font-size: 16px;
- line-height: 1.6em;
-}
-#content a {
- color: #3e444d;
- text-decoration: none;
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -o-transition: all .3s ease;
- -ms-transition: all .3s ease;
- transition: all .3s ease;
- border-bottom: 1px solid transparent;
-}
-#content a:hover {
- border-bottom: 1px solid #e77552;
-}
-#cssnav {
- position: fixed;
- margin-left: -260px;
- font-size: 18px;
-}
-#cssnav ul {
- background: #3f444c;
- width: 170px;
- margin: 0;
- padding: 0;
- padding: 10px 20px;
- margin-top: 15px;
-}
-#cssnav ul li {
- float: none;
- list-style-type: none;
- padding: 0;
- margin: 0;
-}
-#cssnav ul li {
- margin: 7px 0;
-}
-#cssnav ul li.active {
- background: url("/img/ribbon.png") no-repeat;
- width: 200px;
- height: 39px;
- margin-left: -28px;
- padding-left: 28px;
- margin-bottom: -12px;
- padding-top: 3px;
- font-weight: bold;
- text-shadow: 0 1px 1px rgba(0,0,0,0.2);
-}
-#cssnav ul li a {
- color: inherit;
- border: none;
- text-decoration: none;
- color: #fff;
-}
-#cssnav ul li a:hover {
- color: inherit;
- border: none;
- text-decoration: none;
-}
-#cssnav ul li a:visited {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
- opacity: 1;
-}
-#cssnav ul li a:hover {
- color: #e2d3cf;
-}
-.easing-demo > div {
- width: 70%;
- margin-left: 20px;
- height: 45px;
- cursor: pointer;
-}
-.easing-demo > div .animation {
- float: right;
- width: 370px;
-}
-.easing-demo > div .name {
- float: left;
- font-weight: 600;
-}
-.easing-demo > div .box {
- width: 20px;
- height: 20px;
- background: #e9754d;
- margin-bottom: -10px;
- margin-left: 0%;
- position: relative;
- z-index: 2;
-}
-.easing-demo > div .line {
- border-bottom: 1px solid #ccc;
- width: 100%;
-}
-.easing-demo > div:hover .box {
- margin-left: 100%;
-}
-.easing-demo > div.ease-in-quad .box {
- -webkit-transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
- -moz-transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
- -o-transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
- -ms-transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
- transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
-}
-.easing-demo > div.ease-in-cubic .box {
- -webkit-transition: all 1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
- -moz-transition: all 1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
- -o-transition: all 1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
- -ms-transition: all 1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
- transition: all 1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
-}
-.easing-demo > div.ease-in-quart .box {
- -webkit-transition: all 1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
- -moz-transition: all 1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
- -o-transition: all 1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
- -ms-transition: all 1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
- transition: all 1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
-}
-.easing-demo > div.ease-in-quint .box {
- -webkit-transition: all 1s cubic-bezier(0.755, 0.05, 0.855, 0.06);
- -moz-transition: all 1s cubic-bezier(0.755, 0.05, 0.855, 0.06);
- -o-transition: all 1s cubic-bezier(0.755, 0.05, 0.855, 0.06);
- -ms-transition: all 1s cubic-bezier(0.755, 0.05, 0.855, 0.06);
- transition: all 1s cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-.easing-demo > div.ease-in-sine .box {
- -webkit-transition: all 1s cubic-bezier(0.47, 0, 0.745, 0.715);
- -moz-transition: all 1s cubic-bezier(0.47, 0, 0.745, 0.715);
- -o-transition: all 1s cubic-bezier(0.47, 0, 0.745, 0.715);
- -ms-transition: all 1s cubic-bezier(0.47, 0, 0.745, 0.715);
- transition: all 1s cubic-bezier(0.47, 0, 0.745, 0.715);
-}
-.easing-demo > div.ease-in-expo .box {
- -webkit-transition: all 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
- -moz-transition: all 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
- -o-transition: all 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
- -ms-transition: all 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
- transition: all 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
-}
-.easing-demo > div.ease-in-circ .box {
- -webkit-transition: all 1s cubic-bezier(0.6, 0.04, 0.98, 0.335);
- -moz-transition: all 1s cubic-bezier(0.6, 0.04, 0.98, 0.335);
- -o-transition: all 1s cubic-bezier(0.6, 0.04, 0.98, 0.335);
- -ms-transition: all 1s cubic-bezier(0.6, 0.04, 0.98, 0.335);
- transition: all 1s cubic-bezier(0.6, 0.04, 0.98, 0.335);
-}
-.easing-demo > div.ease-in-back .box {
- -webkit-transition: all 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);
- -moz-transition: all 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);
- -o-transition: all 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);
- -ms-transition: all 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);
- transition: all 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);
-}
-.easing-demo > div.ease-out-quad .box {
- -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
- -moz-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
- -o-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
- -ms-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
- transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-.easing-demo > div.ease-out-cubic .box {
- -webkit-transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
- -moz-transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
- -o-transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
- -ms-transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
- transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-.easing-demo > div.ease-out-quart .box {
- -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
- -moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
- -o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
- -ms-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
- transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-}
-.easing-demo > div.ease-out-quint .box {
- -webkit-transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
- -moz-transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
- -o-transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
- -ms-transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
- transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
-}
-.easing-demo > div.ease-out-sine .box {
- -webkit-transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
- -moz-transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
- -o-transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
- -ms-transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
- transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
-}
-.easing-demo > div.ease-out-expo .box {
- -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
- -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
- -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
- -ms-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
- transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
-}
-.easing-demo > div.ease-out-circ .box {
- -webkit-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
- -moz-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
- -o-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
- -ms-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
- transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
-}
-.easing-demo > div.ease-out-back .box {
- -webkit-transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- -moz-transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- -o-transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- -ms-transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-.easing-demo > div.ease-in-out-quad .box {
- -webkit-transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
- -moz-transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
- -o-transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
- -ms-transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
- transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-}
-.easing-demo > div.ease-in-out-cubic .box {
- -webkit-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
- -moz-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
- -o-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
- -ms-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
- transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-.easing-demo > div.ease-in-out-quart .box {
- -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
- -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
- -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
- -ms-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
- transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
-}
-.easing-demo > div.ease-in-out-quint .box {
- -webkit-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
- -moz-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
- -o-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
- -ms-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
- transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
-}
-.easing-demo > div.ease-in-out-sine .box {
- -webkit-transition: all 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
- -moz-transition: all 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
- -o-transition: all 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
- -ms-transition: all 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
- transition: all 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-}
-.easing-demo > div.ease-in-out-expo .box {
- -webkit-transition: all 1s cubic-bezier(1, 0, 0, 1);
- -moz-transition: all 1s cubic-bezier(1, 0, 0, 1);
- -o-transition: all 1s cubic-bezier(1, 0, 0, 1);
- -ms-transition: all 1s cubic-bezier(1, 0, 0, 1);
- transition: all 1s cubic-bezier(1, 0, 0, 1);
-}
-.easing-demo > div.ease-in-out-circ .box {
- -webkit-transition: all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
- -moz-transition: all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
- -o-transition: all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
- -ms-transition: all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
- transition: all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-}
-.easing-demo > div.ease-in-out-back .box {
- -webkit-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
- -moz-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
- -o-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
- -ms-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
- transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-.notice {
- background: #e7e7e7 -webkit-gradient(linear, left top, left bottom, color-stop(0, #efefef), color-stop(1, #e7e7e7)) repeat-x;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef 0%, #e7e7e7 100%) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef 0%, #e7e7e7 100%) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef 0%, #e7e7e7 100%) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef 0%, #e7e7e7 100%) repeat-x;
- background: #e7e7e7 linear-gradient(top, #efefef 0%, #e7e7e7 100%) repeat-x;
- zoom: 1;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- -o-border-radius: 5px;
- -ms-border-radius: 5px;
- border-radius: 5px;
- padding: 15px;
- border: 1px solid #d6d6d6;
- -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
- position: relative;
-}
-.notice:before,
-.notice:after {
- content: "";
- display: table;
-}
-.notice:after {
- clear: both;
-}
-.flash {
- margin-bottom: 10px;
-}
-.breadcrumbs {
- zoom: 1;
- margin: 0;
- padding: 0;
-}
-.breadcrumbs:before,
-.breadcrumbs:after {
- content: "";
- display: table;
-}
-.breadcrumbs:after {
- clear: both;
-}
-.breadcrumbs li {
- float: left;
- margin-right: 10px;
- list-style-type: none;
-}
-.breadcrumbs li:last-child {
- margin-right: 0;
-}
-.breadcrumbs li:after {
- content: "/";
- margin-left: 10px;
- color: #cdcdcd;
-}
-.breadcrumbs li:last-child:after {
- content: "";
-}
-.bubble {
- background: #e7e7e7 -webkit-gradient(linear, left top, left bottom, color-stop(0, #efefef), color-stop(1, #e7e7e7)) repeat-x;
- background: #e7e7e7 -webkit-linear-gradient(top, #efefef 0%, #e7e7e7 100%) repeat-x;
- background: #e7e7e7 -moz-linear-gradient(top, #efefef 0%, #e7e7e7 100%) repeat-x;
- background: #e7e7e7 -o-linear-gradient(top, #efefef 0%, #e7e7e7 100%) repeat-x;
- background: #e7e7e7 -ms-linear-gradient(top, #efefef 0%, #e7e7e7 100%) repeat-x;
- background: #e7e7e7 linear-gradient(top, #efefef 0%, #e7e7e7 100%) repeat-x;
- zoom: 1;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- -o-border-radius: 5px;
- -ms-border-radius: 5px;
- border-radius: 5px;
- padding: 15px;
- border: 1px solid #d6d6d6;
- -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
- position: relative;
-}
-.bubble:before,
-.bubble:after {
- content: "";
- display: table;
-}
-.bubble:after {
- clear: both;
-}
-.bubble:after {
- width: 0;
- height: 0;
- border-left: 10px solid transparent;
- border-right: 10px solid transparent;
- border-top: 10px solid #e7e7e7;
- position: absolute;
- bottom: -9px;
-}
-.bubble:before {
- width: 0;
- height: 0;
- border-left: 10px solid transparent;
- border-right: 10px solid transparent;
- border-top: 10px solid #d6d6d6;
- position: absolute;
- bottom: -11px;
-}
-figure {
- display: -moz-inline-stack;
- display: inline-block;
- vertical-align: baseline;
- zoom: 1;
- *display: inline;
- *vertical-align: auto;
-}
-figure img {
- display: block;
- padding: 4px;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- -o-border-radius: 3px;
- -ms-border-radius: 3px;
- border-radius: 3px;
- border: 1px solid rgba(0,166,252,0.6);
-}
-figure figcaption {
- padding: 10px 0;
- text-align: center;
- font-style: italic;
-}
-@-webkit-keyframes icon-in {
- 0% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
- opacity: 0;
- -webkit-transform: translateY(20px);
- }
-
- 100% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
- opacity: 1;
- -webkit-transform: translateY(0px);
- }
-}
-@-moz-keyframes icon-in {
- 0% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
- opacity: 0;
- -webkit-transform: translateY(20px);
- }
-
- 100% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
- opacity: 1;
- -webkit-transform: translateY(0px);
- }
-}
-@-o-keyframes icon-in {
- 0% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
- opacity: 0;
- -webkit-transform: translateY(20px);
- }
-
- 100% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
- opacity: 1;
- -webkit-transform: translateY(0px);
- }
-}
-@-ms-keyframes icon-in {
- 0% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
- opacity: 0;
- -webkit-transform: translateY(20px);
- }
-
- 100% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
- opacity: 1;
- -webkit-transform: translateY(0px);
- }
-}
-@keyframes icon-in {
- 0% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
- opacity: 0;
- -webkit-transform: translateY(20px);
- }
-
- 100% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
- opacity: 1;
- -webkit-transform: translateY(0px);
- }
-}
-@-webkit-keyframes fadeIn {
- 0% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
- opacity: 0;
- }
-
- 100% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
- opacity: 1;
- }
-}
-@-moz-keyframes fadeIn {
- 0% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
- opacity: 0;
- }
-
- 100% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
- opacity: 1;
- }
-}
-@-o-keyframes fadeIn {
- 0% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
- opacity: 0;
- }
-
- 100% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
- opacity: 1;
- }
-}
-@-ms-keyframes fadeIn {
- 0% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
- opacity: 0;
- }
-
- 100% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
- opacity: 1;
- }
-}
-@keyframes fadeIn {
- 0% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
- opacity: 0;
- }
-
- 100% {
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
- opacity: 1;
- }
-}
View
3 test/manual/public/css/test.css
@@ -1,3 +0,0 @@
-p {
- color: #b44326;
-}
View
BIN test/manual/public/fonts/entypo/entypo.eot
Binary file not shown.
View
13 test/manual/public/fonts/entypo/entypo.svg
@@ -1,13 +0,0 @@
-<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" > <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
-<defs >
-<font id="entypo" horiz-adv-x="508" ><font-face
- font-family="Entypo"
- units-per-em="1000"
- panose-1="0 0 0 0 0 0 0 0 0 0"
- ascent="750"
- descent="-250"
- alphabetic="0" />
-<missing-glyph horiz-adv-x="500" />
-</font>
-</defs>
-</svg>
View
BIN test/manual/public/fonts/entypo/entypo.ttf
Binary file not shown.
View
BIN test/manual/public/fonts/entypo/entypo.woff
Binary file not shown.
View
BIN test/manual/public/img/logo.png
Deleted file not rendered
View
BIN test/manual/public/img/ribbon.png
Deleted file not rendered
View
BIN test/manual/public/img/zebra.jpg
Deleted file not rendered
View
154 test/manual/public/index.html
@@ -1,154 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
- <meta name="description" content="roots is a light, fast build system for advanced front end development">
- <meta name="author" content="jeff escalante">
- <title>roots | where it all begins</title>
- <link rel="stylesheet" href="/css/main.css">
- <script src="//use.typekit.net/ltb5pgo.js"></script><script type="text/javascript">
-(function() {
-
- try {
- Typekit.load();
- } catch (e) {
-
- }
-
-}).call(this);
-</script>
- </head>
- <body><a href="http://github.com/jenius/roots-cli" class="fork-ribbon">fork on github</a>
- <header><a href="/" class="logo">roots | where it all begins</a>
- <nav>
- <ul>
- <li><a href="/#overview">overview</a></li>
- <li><a href="/css">css library</a></li>
- <li><a href="/#installation">installation</a></li>
- <li><a href="/#commands">commands</a></li>
- <li><a href="/#plugins">plugins</a></li>
- <li><a href="/#help">help</a></li>
- </ul>
- </nav>
- </header>
-<div id="hero">
- <h2>roots is a toolbox for building simple, beautiful, and efficient products for the web.</h2>
- <ul>
- <li>
- <div class="icon">&#9874;</div><span>powerful compiled languages</span>
- </li>
- <li>
- <div class="icon">&#128213;</div><span>simple project structure</span>
- </li>
- <li>
- <div class="icon">&#59254;</div><span>css library &amp; live reload</span>
- </li>
- </ul>
-</div>
-<div id="content">
- <h3 id="overview">overview</h3><p>roots is toolkit built on best pratices for advanced front-end web development. It has a very large number of features, which I’ll attempt to list below. Roots comes in the form of a static site build tool by default, but also includes templates and plugins for <a href="https://github.com/jenius/roots-express">express.js</a> and <a href="https://github.com/jenius/roots-rails">rails</a>. Plugins for <a href="http://railwayjs.com/">RailwayJS</a> and <a href="http://www.sinatrarb.com/">Sinatra</a> are also in the works.
-
-</p>
-<ul>
-<li>extremely simple <a href="#installation">installation</a></li>
-<li>clean and minimal default project template</li>
-<li><a href="http://jade-lang.com/">jade</a>, <a href="http://learnboost.github.com/stylus/">stylus</a>, and <a href="http://coffeescript.org/">coffeescript</a> default stack</li>
-<li>super fast live reload implementation</li>
-<li>compile errors displayed as a flash message, doesn’t break workflow</li>
-<li>layouts and partials fully supported</li>
-<li><a href="http://coffeescript.org/">coffeescript</a> and <a href="http://daringfireball.net/projects/markdown/">markdown</a> can be written directly in views</li>
-<li>extremely robust, modular, and powerful <a href="/css">css helper library</a> built in</li>
-<li>global variables and functions (view helpers)</li>
-<li>clean and intuitive app settings file</li>
-<li>single command deploy to heroku</li>
-<li>intelligently minifies html, css, and js on deploy</li>
-<li>efficient client-side js management through <a href="http://twitter.github.com/bower/">bower</a> and <a href="http://requirejs.org/">require.js</a></li>
-<li>easy to extend with a simple and well-documented plugin interface</li>
-</ul>
-
- <h3 id="installation">installation</h3><p>Installation is super straightforward and relies only on <a href="http://nodejs.org">node.js</a>, which has a well-maintined universal installer. If you want to do it the &quot;longer and more manual way&quot;, head over to nodejs.org and install node, then run <code>npm install roots -g</code> from your command line. Or even easier, if you are on mac or linux, run the command below from your terminal:
-</p>
-<code class="big">curl get.roots.cx | sh</code>
- <h3 id="commands">commands</h3><p>Once you have roots installed, it exposes a few useful commands for getting your project set up. You must be at least somewhat familiar with the command line to be able to use roots.
-
-</p>
-<p><code>$ roots new name</code> - creates a new project in the current directory called name<br><code>$ roots compile</code> - compiles, minifies, and compresses the project to the public folder<br><code>$ roots watch</code> - compiles the project, opens it on a local server, watches files for change, and live reloads<br><code>$ roots update</code> - installs a new version of roots if there is one<br><code>$ roots js</code> - wrapper for bower, type <code>roots help</code> for details on roots js commands
-
-</p>
-<p>...and if you forget or need help, just type <code>roots help</code> for a list of available commands
-</p>
-
- <h3 id="plugins">plugins</h3><p>Roots ships with a few core compilers that are optimized for a speedy and efficient workflow. But of course everyone has their own preferred tools, and if there are languages you would rather work in, you can build them in to roots through the plugin interface.
-
-</p>
-<p>Plugins need only be one file, and are frequently less than 10 lines of javascript (many of the core compilers are, actually). To create a plugin, just drop a new file, javascript or coffeescript, into <code>/plugins</code>. The module need only export two methods, <code>settings</code> and <code>compile</code>. To get you started, you can run <code>roots plugin generate</code> to have roots generate a basic plugin template.
-
-</p>
-<p>Here are a few examples of how plugins can look. Note that plugins are executed inside roots&#39; environment, so if you want to require any external files, you need to use <code>module.require()</code> instead of just <code>require()</code> in order to have roots look for files starting in the plugins directory.
-
-</p>
-<ul>
-<li><a href="https://github.com/jenius/roots-cli/blob/master/test/plugins/sass.coffee">sass compiler</a> (command line)</li>
-<li><a href="https://github.com/jenius/roots-cli/blob/master/lib/compilers/core/jade.js">ejs compiler</a> (handles layout files)</li>
-<li><a href="https://github.com/jenius/roots-cli/blob/master/lib/compilers/core/styl.js">stylus compiler</a> (js library based)</li>
-</ul>
-<p>You will probably notice that a class called <code>Helper</code> is provided and does much of the work. This class manages important paths and file info and is designed to make compilers clean and easy to manage. Documentation for the <code>Helper</code> class is below.
-
-</p>
-<p><strong><code>helper = new Helper(file)</code></strong><br>Sample code for how to initialize the helper. Takes a single file from the <code>files</code> object that the <code>compile</code> method receives
-
-</p>
-<p><strong><code>helper.extension</code></strong><br>Returns the extension of the current file
-
-</p>
-<p><strong><code>helper.target_extension</code></strong><br>Returns the extension that the file will compile into
-
-</p>
-<p><strong><code>helper.export_path</code></strong><br>Returns the absolute path that the file will be placed into after compile
-
-</p>
-<p><strong><code>helper.file_path</code></strong><br>Returns the absolute path of the current file
-
-</p>
-<p><strong><code>helper.file_contents</code></strong><br>Returns a string with the contents of the current file
-
-</p>
-<p><strong><code>helper.layout_path</code></strong><br><em>If the file&#39;s target extension is html</em>, Returns the absolute path of the layout file it will be compiled into.
-
-</p>
-<p><strong><code>helper.layout_contents</code></strong><br><em>If the file&#39;s target extension is html</em>, Returns the contents of the layout file it will be compiled into.
-
-</p>
-<p><strong><code>helper.locals(extra_object)</code></strong><br>Returns all the local functions to be rendered with a view template. If you pass it an object, it will include it in the locals. You will want to add yield when compiling the layout, like in the ejs compiler example above.
-
-</p>
-<p><strong><code>helper.write(content)</code></strong><br>Writes the provided string to the correct file in the public directory.
-
-</p>
-<p>If you want to dig into the <code>Helper</code> a bit more, feel free to <a href="https://github.com/jenius/roots-cli/blob/master/lib/compilers/compile-helper.coffee">check out the source</a>. It&#39;s only one small file.
-</p>
-
- <h3 id="help">help</h3><p>Speaking of helpers, if you need help or something is confusing, feel free to <a href="http://github.com/jenius/roots-cli/issues">file an issue</a>, or get in touch with me directly (you shouldn&#39;t have much trouble finding my email). I can&#39;t debug your app, but if you have found an issue or have a feature request I&#39;d be more than happy to discuss and try to implement it!
-
-</p>
-<h3>faq</h3>
-<p><strong>Can I contribute to this project?</strong><br>Yes! In fact, I would love it if you did. The repo for the command line client is <a href="https://github.com/jenius/roots-cli">right here on github</a>, and the repo for the css library is <a href="https://github.com/jenius/roots-css">here</a>. Please, help a brother out!
-
-</p>
-<p><strong>I&#39;m having a problem with roots and I&#39;m mad at you.</strong><br>Breathe deep. I know this project is not perfect. I&#39;m only one guy, I&#39;m doing my best &mdash; promise! I&#39;d be happy to look into any issue - just <a href="https://github.com/jenius/roots-cli/issues">file an issue on github</a> and I&#39;ll get to it as quickly as I can.
-
-</p>
-<p><strong>Is roots totally free?</strong><br>Why yes it is! It&#39;s licensed under <strong><em>_</em></strong>, which means you can use it free forever. It&#39;s because I love you. If you love roots, I would feel great if you <a href="http://twitter.com/jescalan">let me know</a>.
-
-</p>
-<p><strong>Why isn&#39;t this site responsive?</strong>
-Because it doesn&#39;t need to be. You don&#39;t code on your mobile phone, so you don&#39;t need coding docs there. Be responsable with responsiveness.
-
-</p>
-<p><strong>Who is responsable for the awesome icons on this site?</strong><br>Glad you asked! The icons on this site are from <a href="http://www.entypo.com/">entypo</a>, by Daniel Bruce, and he is the man for making such awesome free icons.</p>
-
-</div>
- </body>
- <script data-main="/js/main" src="/js/require.js"></script>
-</html>
View
49 test/manual/public/js/main.js
@@ -1,49 +0,0 @@
-(function() {
- var js;
-
- js = ["http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js", '/js/waypoints.min.js'];
-
- require(js, function() {
- return $(function() {
- setTimeout((function() {
- return $('.icon').css({
- opacity: 1
- });
- }), 500);
- if ($(window).scrollTop() > 392) {
- $('#cssnav').css({
- top: 5
- });
- }
- $(window).on('scroll', function() {
- if ($(window).scrollTop() > 392) {
- return $('#cssnav').css({
- top: 5
- });
- } else {
- return $('#cssnav').css({
- top: 385 - $(window).scrollTop()
- });
- }
- });
- $('.cssdocs h3').waypoint(function() {
- $('#cssnav li').removeClass('active');
- return $("a[href='#" + ($(this).text()) + "']").parent().addClass('active');
- });
- return $('a[href*=#]:not([href=#])').on('click', function() {
- var factor, target;
- if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') || location.hostname === this.hostname) {
- target = $(this.hash).length ? $(this.hash) : $("[name=" + (this.hash.slice(1)) + "]");
- if (target.length) {
- factor = target.offset().top > $(window).scrollTop() ? -1 : 1;
- $('html,body').animate({
- scrollTop: target.offset().top - factor
- }, 500);
- return false;
- }
- }
- });
- });
- });
-
-}).call(this);
View
34 test/manual/public/js/require.js
@@ -1,34 +0,0 @@
-/*
- RequireJS 2.1.1 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
- Available via the MIT or new BSD license.
- see: http://github.com/jrburke/requirejs for details
-*/
-var requirejs,require,define;
-(function(W){function D(b){return M.call(b)==="[object Function]"}function E(b){return M.call(b)==="[object Array]"}function t(b,c){if(b){var d;for(d=0;d<b.length;d+=1)if(b[d]&&c(b[d],d,b))break}}function N(b,c){if(b){var d;for(d=b.length-1;d>-1;d-=1)if(b[d]&&c(b[d],d,b))break}}function A(b,c){for(var d in b)if(b.hasOwnProperty(d)&&c(b[d],d))break}function O(b,c,d,g){c&&A(c,function(c,j){if(d||!F.call(b,j))g&&typeof c!=="string"?(b[j]||(b[j]={}),O(b[j],c,d,g)):b[j]=c});return b}function r(b,c){return function(){return c.apply(b,
-arguments)}}function X(b){if(!b)return b;var c=W;t(b.split("."),function(b){c=c[b]});return c}function G(b,c,d,g){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=g;if(d)c.originalError=d;return c}function ba(){if(H&&H.readyState==="interactive")return H;N(document.getElementsByTagName("script"),function(b){if(b.readyState==="interactive")return H=b});return H}var g,s,u,y,q,B,H,I,Y,Z,ca=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,da=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,
-$=/\.js$/,ea=/^\.\//;s=Object.prototype;var M=s.toString,F=s.hasOwnProperty,fa=Array.prototype.splice,v=!!(typeof window!=="undefined"&&navigator&&document),aa=!v&&typeof importScripts!=="undefined",ga=v&&navigator.platform==="PLAYSTATION 3"?/^complete$/:/^(complete|loaded)$/,R=typeof opera!=="undefined"&&opera.toString()==="[object Opera]",w={},n={},P=[],J=!1;if(typeof define==="undefined"){if(typeof requirejs!=="undefined"){if(D(requirejs))return;n=requirejs;requirejs=void 0}typeof require!=="undefined"&&
-!D(require)&&(n=require,require=void 0);g=requirejs=function(b,c,d,p){var i,j="_";!E(b)&&typeof b!=="string"&&(i=b,E(c)?(b=c,c=d,d=p):b=[]);if(i&&i.context)j=i.context;(p=w[j])||(p=w[j]=g.s.newContext(j));i&&p.configure(i);return p.require(b,c,d)};g.config=function(b){return g(b)};g.nextTick=typeof setTimeout!=="undefined"?function(b){setTimeout(b,4)}:function(b){b()};require||(require=g);g.version="2.1.1";g.jsExtRegExp=/^\/|:|\?|\.js$/;g.isBrowser=v;s=g.s={contexts:w,newContext:function(b){function c(a,
-f,x){var e,m,b,c,d,h,i,g=f&&f.split("/");e=g;var j=k.map,l=j&&j["*"];if(a&&a.charAt(0)===".")if(f){e=k.pkgs[f]?g=[f]:g.slice(0,g.length-1);f=a=e.concat(a.split("/"));for(e=0;f[e];e+=1)if(m=f[e],m===".")f.splice(e,1),e-=1;else if(m==="..")if(e===1&&(f[2]===".."||f[0]===".."))break;else e>0&&(f.splice(e-1,2),e-=2);e=k.pkgs[f=a[0]];a=a.join("/");e&&a===f+"/"+e.main&&(a=f)}else a.indexOf("./")===0&&(a=a.substring(2));if(x&&(g||l)&&j){f=a.split("/");for(e=f.length;e>0;e-=1){b=f.slice(0,e).join("/");if(g)for(m=
-g.length;m>0;m-=1)if(x=j[g.slice(0,m).join("/")])if(x=x[b]){c=x;d=e;break}if(c)break;!h&&l&&l[b]&&(h=l[b],i=e)}!c&&h&&(c=h,d=i);c&&(f.splice(0,d,c),a=f.join("/"))}return a}function d(a){v&&t(document.getElementsByTagName("script"),function(f){if(f.getAttribute("data-requiremodule")===a&&f.getAttribute("data-requirecontext")===h.contextName)return f.parentNode.removeChild(f),!0})}function p(a){var f=k.paths[a];if(f&&E(f)&&f.length>1)return d(a),f.shift(),h.require.undef(a),h.require([a]),!0}function i(a){var f,
-b=a?a.indexOf("!"):-1;b>-1&&(f=a.substring(0,b),a=a.substring(b+1,a.length));return[f,a]}function j(a,f,b,e){var m,K,d=null,g=f?f.name:null,j=a,l=!0,k="";a||(l=!1,a="_@r"+(M+=1));a=i(a);d=a[0];a=a[1];d&&(d=c(d,g,e),K=o[d]);a&&(d?k=K&&K.normalize?K.normalize(a,function(a){return c(a,g,e)}):c(a,g,e):(k=c(a,g,e),a=i(k),d=a[0],k=a[1],b=!0,m=h.nameToUrl(k)));b=d&&!K&&!b?"_unnormalized"+(N+=1):"";return{prefix:d,name:k,parentMap:f,unnormalized:!!b,url:m,originalName:j,isDefine:l,id:(d?d+"!"+k:k)+b}}function n(a){var f=
-a.id,b=l[f];b||(b=l[f]=new h.Module(a));return b}function q(a,f,b){var e=a.id,m=l[e];if(F.call(o,e)&&(!m||m.defineEmitComplete))f==="defined"&&b(o[e]);else n(a).on(f,b)}function z(a,f){var b=a.requireModules,e=!1;if(f)f(a);else if(t(b,function(f){if(f=l[f])f.error=a,f.events.error&&(e=!0,f.emit("error",a))}),!e)g.onError(a)}function s(){P.length&&(fa.apply(C,[C.length-1,0].concat(P)),P=[])}function u(a,f,b){var e=a.map.id;a.error?a.emit("error",a.error):(f[e]=!0,t(a.depMaps,function(e,c){var d=e.id,
-g=l[d];g&&!a.depMatched[c]&&!b[d]&&(f[d]?(a.defineDep(c,o[d]),a.check()):u(g,f,b))}),b[e]=!0)}function w(){var a,f,b,e,m=(b=k.waitSeconds*1E3)&&h.startTime+b<(new Date).getTime(),c=[],g=[],i=!1,j=!0;if(!S){S=!0;A(l,function(b){a=b.map;f=a.id;if(b.enabled&&(a.isDefine||g.push(b),!b.error))if(!b.inited&&m)p(f)?i=e=!0:(c.push(f),d(f));else if(!b.inited&&b.fetched&&a.isDefine&&(i=!0,!a.prefix))return j=!1});if(m&&c.length)return b=G("timeout","Load timeout for modules: "+c,null,c),b.contextName=h.contextName,
-z(b);j&&t(g,function(a){u(a,{},{})});if((!m||e)&&i)if((v||aa)&&!T)T=setTimeout(function(){T=0;w()},50);S=!1}}function y(a){n(j(a[0],null,!0)).init(a[1],a[2])}function B(a){var a=a.currentTarget||a.srcElement,b=h.onScriptLoad;a.detachEvent&&!R?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=h.onScriptError;a.detachEvent&&!R||a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function I(){var a;for(s();C.length;)if(a=C.shift(),a[0]===
-null)return z(G("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));else y(a)}var S,U,h,L,T,k={waitSeconds:7,baseUrl:"./",paths:{},pkgs:{},shim:{},map:{},config:{}},l={},V={},C=[],o={},Q={},M=1,N=1;L={require:function(a){return a.require?a.require:a.require=h.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?a.exports:a.exports=o[a.map.id]={}},module:function(a){return a.module?a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return k.config&&
-k.config[a.map.id]||{}},exports:o[a.map.id]}}};U=function(a){this.events=V[a.id]||{};this.map=a;this.shim=k.shim[a.id];this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};U.prototype={init:function(a,b,c,e){e=e||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=r(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=c;this.inited=!0;this.ignore=e.ignore;e.enabled||this.enabled?this.enable():this.check()}},
-defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=b)},fetch:function(){if(!this.fetched){this.fetched=!0;h.startTime=(new Date).getTime();var a=this.map;if(this.shim)h.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],r(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=this.map.url;Q[a]||(Q[a]=!0,h.load(this.map.id,a))},check:function(){if(this.enabled&&
-!this.enabling){var a,b,c=this.map.id;b=this.depExports;var e=this.exports,m=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(this.depCount<1&&!this.defined){if(D(m)){if(this.events.error)try{e=h.execCb(c,m,b,e)}catch(d){a=d}else e=h.execCb(c,m,b,e);if(this.map.isDefine)if((b=this.module)&&b.exports!==void 0&&b.exports!==this.exports)e=b.exports;else if(e===void 0&&this.usingExports)e=this.exports;if(a)return a.requireMap=this.map,
-a.requireModules=[this.map.id],a.requireType="define",z(this.error=a)}else e=m;this.exports=e;if(this.map.isDefine&&!this.ignore&&(o[c]=e,g.onResourceLoad))g.onResourceLoad(h,this.map,this.depMaps);delete l[c];this.defined=!0}this.defining=!1;if(this.defined&&!this.defineEmitted)this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0}}else this.fetch()}},callPlugin:function(){var a=this.map,b=a.id,d=