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.
// ---- | |
// Sass (v3.4.0) | |
// Compass (v1.0.0) | |
// ---- | |
$gap: 20px; | |
.my-class { | |
margin-top: -$gap; | |
} |
<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"> |
// 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 } |
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.
<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> | |
<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
// ---- | |
// Sass (v3.3.4) | |
// Compass (v1.0.0.alpha.18) | |
// ---- | |
@function _f-normalize($param){ | |
@if ( type-of($param) != list ) { $param : ($param,) }; | |
@return $param; | |
} |
// ---- | |
// 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.0.rc.3) | |
// Compass (v1.0.0.alpha.18) | |
// SassyJSON (v1.1.2) | |
// ---- | |
debug{ | |
/* This is working */ | |
// debug: inspect((())); | |