| // ---- | |
| // Sass (v3.3.0.rc.3) | |
| // Compass (v1.0.0.alpha.18) | |
| // SassyJSON (v1.1.2) | |
| // ---- | |
| @import "SassyJSON"; | |
| test{ | |
| test: _json-decode--number('1e0', 2); |
| // ---- | |
| // Sass (v3.3.4) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| @function _f-normalize($param){ | |
| @if ( type-of($param) != list ) { $param : ($param,) }; | |
| @return $param; | |
| } |
You can see a live demo of this here.
I experimented a little bit with web components and Polymer in the last few days and come up with a routing schema using web components. I would like to know if there are any flaws or shortcomings you can see.
I will start with the basic usage:
demo-app.html
| <link rel="import" href="../core-scaffold/core-scaffold.html"> | |
| <link rel="import" href="../core-header-panel/core-header-panel.html"> | |
| <link rel="import" href="../core-menu/core-menu.html"> | |
| <link rel="import" href="../core-item/core-item.html"> | |
| <link rel="import" href="../core-icon-button/core-icon-button.html"> | |
| <link rel="import" href="../core-toolbar/core-toolbar.html"> | |
| <link rel="import" href="../core-input/core-input.html"> | |
| <link rel="import" href="../core-menu/core-submenu.html"> | |
| <link rel="import" href="../google-map/google-map-search.html"> | |
| <link rel="import" href="../google-map/google-map.html"> |
| <link rel="import" href="../polymer/polymer.html"> | |
| <link rel="import" href="socket-connection.html"> | |
| <link rel="import" href="socket-emitter.html"> | |
| <link rel="import" href="socket-receiver.html"> | |
| <polymer-element name="server-time"> | |
| <template> | |
Another small UI/UX experiment. Password fields are quite annoying to fill. In this concept I have visualised the required password's length using dashes.
A Pen by Theodore Vorillas on CodePen.
| // Pipe operator | |
| operator infix | { | |
| associativity left | |
| } | |
| // Use the left side as a parameter for the function on the right. | |
| func |<T, R>(left:T, right:(T) -> (R) ) -> R { return right(left) } | |
| var upperCase:(String) -> (String) = { $0.uppercaseString } |
| <link rel="import" href="../paper-tabs/paper-tabs.html"> | |
| <link rel="import" href="../paper-tabs/paper-tab.html"> | |
| <link rel="import" href="../core-animated-pages/core-animated-pages.html"> | |
| <link rel="import" href="../core-animated-pages/transitions/hero-transition.html"> | |
| <link rel="import" href="../core-animated-pages/transitions/cross-fade.html"> | |
| <link rel="import" href="../core-animated-pages/transitions/slide-down.html"> | |
| <link rel="import" href="../core-animated-pages/transitions/slide-up.html"> | |
| <link rel="import" href="../core-animated-pages/transitions/tile-cascade.html"> | |
| <link rel="import" href="../paper-input/paper-input.html"> | |
| <link rel="import" href="../core-icons/core-icons.html"> |
| // ---- | |
| // Sass (v3.4.0) | |
| // Compass (v1.0.0) | |
| // ---- | |
| $gap: 20px; | |
| .my-class { | |
| margin-top: -$gap; | |
| } |
| // ---- | |
| // Sass (v3.4.0) | |
| // Compass (v1.0.0) | |
| // ---- | |
| $gap: 20px; | |
| .my-class { | |
| margin-top: -$gap + 5; | |
| } |