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.
Fabrice FWeinb
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.0) | |
| // Compass (v1.0.0) | |
| // ---- | |
| $gap: 20px; | |
| .my-class { | |
| margin-top: -$gap; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 } |
FWeinb
/ Fixed-length-password-field-concept..markdown
Created
June 9, 2014 15:42
A Pen by Theodore Vorillas.
FWeinb
/ server-time.html
Last active
August 29, 2015 14:02
Preview of socket.io Web Components using poylmer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"> |
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.3.4) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| @function _f-normalize($param){ | |
| @if ( type-of($param) != list ) { $param : ($param,) }; | |
| @return $param; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // 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); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.3.0.rc.3) | |
| // Compass (v1.0.0.alpha.18) | |
| // SassyJSON (v1.1.2) | |
| // ---- | |
| debug{ | |
| /* This is working */ | |
| // debug: inspect((())); | |