Permalink
Browse files

feature: Material FORMS-Sample added

  • Loading branch information...
MikeMitterer committed May 26, 2015
1 parent 7c07f11 commit 2fc41621f3319dd4302b2751fa8b0c8a56a64d4d
View

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -1,25 +1,42 @@
@import "packages/mdl/assets/styles/material-design-lite";
.forms.sample {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start; // ⇾
align-content: space-between; // ||
align-items: flex-start; // ↓
.linklist {
width: 100%;
}
> * {
margin-right: 12px;
margin-bottom: 24px;
.demo-page--forms {
background-color : linen;
.firstblock {
clear : both;
height: 400px;
}
form {
max-width: 512px;
max-width : 512px;
margin-bottom : 24px;
}
.demo-registration {
float : right;
clear : both;
max-width : 320px;
}
.demo-slider {
.mdl-form__content {
margin-right: 0;
.mdl-form__group {
margin: 20px 0 20px 20px;
&:first-child {
margin-top: 20px;
}
}
}
}
}
@@ -0,0 +1,250 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forms</title>
<link rel="stylesheet" href="demo.css">
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en'
rel='stylesheet' type='text/css'>
<style>
/* Autogenerated with gensamples.dart */
div.loading { display : none; }
body.mdl-upgrading > * { display : none; }
body.mdl-upgrading div.loading { display : block; }
</style>
</head>
<body class="mdl-upgrading demo-page--forms">
<div class="loading">Loading...</div>
<div class="PreviewBlock forms sample">
<div class="linklist"><a href="index.html">With material components</a> | <a href="index-html-controls.html">Basic HTML elements</a></div>
<h4>Horizontal</h4>
<div>
<div class="base">
<form method="post" class="right mdl-basic-form">
<h3>Register for the launch</h3>
<label for="name">Name</label>
<input name="name" id="name" placeholder="Thomas A Anderson" required="">
<label for="email">Email address</label>
<input type="email" name="email" id="email" placeholder="neo@example.com" required="">
<label for="tel">Telephone</label>
<input type="tel" name="tel" id="tel" placeholder="(555) 555 5555" required="">
<div class="mdl-basic-form__group mdl-basic-form__group--checkbox">
<input type="checkbox"> Remember me
</div>
<input type="submit" value="Sign up" class="mdl-basic-form__control--maxsize mdl-basic-form__control--right">
</form>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla turpis mauris, faucibus nec consequat
vitae, tincidunt eget lorem. Cras molestie, massa quis tempus aliquet, enim purus facilisis mauris, ut
placerat ligula ex id massa. Vestibulum est turpis, vestibulum a massa eget, pellentesque eleifend
justo. Morbi tincidunt vulputate urna vitae malesuada. Vivamus est erat, venenatis eu mauris ac, finibus
cursus lectus. Nunc ultrices libero vitae est egestas consectetur. Aliquam dapibus, mi quis sollicitudin
vestibulum, odio nulla ultrices erat, vel sagittis ligula sem et nunc.
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla turpis mauris, faucibus nec consequat
vitae, tincidunt eget lorem. Cras molestie, massa quis tempus aliquet, enim purus facilisis mauris, ut
placerat ligula ex id massa. Vestibulum est turpis, vestibulum a massa eget, pellentesque eleifend
justo. Morbi tincidunt vulputate urna vitae malesuada. Vivamus est erat, venenatis eu mauris ac, finibus
cursus lectus. Nunc ultrices libero vitae est egestas consectetur. Aliquam dapibus, mi quis sollicitudin
vestibulum, odio nulla ultrices erat, vel sagittis ligula sem et nunc.
</p>
</div>
<form method="post" class="mdl-basic-form">
<h3>Register for the launch</h3>
<label for="name">Name</label>
<input name="name" id="name" placeholder="Thomas A Anderson" required="">
<label for="email">Email address</label>
<input type="email" name="email" id="email" placeholder="neo@example.com" required="">
<label for="tel">Telephone</label>
<input type="tel" name="tel" id="tel" placeholder="(555) 555 5555" required="">
<div class="mdl-basic-form__group mdl-basic-form__group--checkbox">
<input type="checkbox"> Remember me
</div>
<input type="submit" value="Sign up" class="mdl-basic-form__control--right mdl-basic-form__control--last-row">
</form>
<form method="post" class="mdl-basic-form">
<h3>Two buttons</h3>
<label for="name">Name</label>
<input name="name" id="name" placeholder="Thomas A Anderson" required="">
<label for="email">Email address</label>
<input type="email" name="email" id="email" placeholder="neo@example.com" required="">
<label for="tel">Telephone</label>
<input type="tel" name="tel" id="tel" placeholder="(555) 555 5555" required="">
<div class="mdl-basic-form__group mdl-basic-form__group--checkbox">
<input type="checkbox"> Remember me
</div>
<div class="mdl-basic-form__group mdl-basic-form__group--last-row mdl-basic-form__group--right equal">
<button type="button" value="Cancel">Cancel</button>
<input type="submit" value="Sign up">
</div>
</form>
<form method="post" class="mdl-basic-form">
<h3>Three buttons</h3>
<label for="name">Name</label>
<input name="name" id="name" placeholder="Thomas A Anderson" required="">
<label for="email">Email address</label>
<input type="email" name="email" id="email" placeholder="neo@example.com" required="">
<label for="tel">Telephone</label>
<input type="tel" name="tel" id="tel" placeholder="(555) 555 5555" required="">
<div class="mdl-basic-form__group mdl-basic-form__group--radio">
<input type="radio" id="mc" name="payment" value="Mastercard">Mastercard
<input type="radio" id="vi" name="payment" value="Visa">Visa
</div>
<div class="mdl-basic-form__group mdl-basic-form__group--last-row mdl-basic-form__group--right equal">
<button type="button" value="Exit">Exit</button>
<button type="button" value="Cancel">Cancel</button>
<input type="submit" value="Sign up">
</div>
</form>
<form method="post" style="width: 100%" class="mdl-basic-form">
<h3>Three buttons large (100%)</h3>
<label for="name">Name</label>
<input name="name" id="name" placeholder="Thomas A Anderson" required="">
<label for="email">Email address</label>
<input type="email" name="email" id="email" placeholder="neo@example.com" required="">
<label for="tel">Telephone</label>
<input type="tel" name="tel" id="tel" placeholder="(555) 555 5555" required="">
<div class="mdl-basic-form__group mdl-basic-form__group--last-row mdl-basic-form__group--right equal">
<button type="button" value="Exit">Exit</button>
<button type="button" value="Cancel">Cancel</button>
<input type="submit" value="Sign up">
</div>
</form>
<form method="post" style="width: 100%" class="mdl-basic-form">
<h3>Three buttons, large, right.</h3>
<label for="name">Name</label>
<input name="name" id="name" placeholder="Thomas A Anderson" required="">
<label for="email">Email address</label>
<input type="email" name="email" id="email" placeholder="neo@example.com" required="">
<label for="tel">Telephone</label>
<input type="tel" name="tel" id="tel" placeholder="(555) 555 5555" required="">
<div class="mdl-basic-form__group mdl-basic-form__group--last-row mdl-basic-form__group--right">
<button type="button" value="Cancel">Cancel</button>
<input type="submit" value="Sign up">
</div>
</form>
<form method="post" style="width: 520px;" class="mdl-basic-form">
<h3>Vertical, buttons, right</h3>
<div class="mdl-basic-form__group">
<label for="name">Name</label>
<input name="name" id="name" placeholder="Thomas A Anderson" required="">
</div>
<div class="mdl-basic-form__group">
<label for="email">Email address</label>
<input type="email" name="email" id="email" placeholder="neo@example.com" required="">
</div>
<div class="mdl-basic-form__group">
<label for="tel">Telephone</label>
<input type="tel" name="tel" id="tel" placeholder="(555) 555 5555" required="">
</div>
<div class="mdl-basic-form__group mdl-basic-form__group--last-row mdl-basic-form__group--right">
<button type="button" value="Cancel">Cancel</button>
<input type="submit" value="Sign up">
</div>
</form>
<form method="post" style="width: 520px;" class="mdl-basic-form">
<h3>Vertical with offset</h3>
<div class="mdl-basic-form__group">
<label for="name">Name</label>
<input name="name" id="name" placeholder="Thomas A Anderson" required="">
</div>
<div class="mdl-basic-form__group">
<label for="email">Email address</label>
<input type="email" name="email" id="email" placeholder="neo@example.com" required="">
</div>
<div class="mdl-basic-form__group">
<label for="tel">Telephone</label>
<input type="tel" name="tel" id="tel" placeholder="(555) 555 5555" required="">
</div>
<div class="mdl-basic-form__group mdl-basic-form__group--last-row equal with-offset">
<button type="button" value="Cancel">Cancel</button>
<input type="submit" value="Sign up">
</div>
</form>
<form method="post" class="mdl-basic-form" style="width: 520px;">
<h3>Vertical, distributed, offset</h3>
<div class="mdl-basic-form__group">
<label for="name">Name</label>
<input name="name" id="name" placeholder="Thomas A Anderson" required="">
</div>
<div class="mdl-basic-form__group">
<label for="email">Email address</label>
<input type="email" name="email" id="email" placeholder="neo@example.com" required="">
</div>
<div class="mdl-basic-form__group">
<label for="tel">Telephone</label>
<input type="tel" name="tel" id="tel" placeholder="(555) 555 5555" required="">
</div>
<div class="mdl-basic-form__group mdl-basic-form__group--last-row equal with-offset">
<button type="button" value="Exit">Exit</button>
<button type="button" value="Cancel">Cancel</button>
<input type="submit" value="Sign up">
</div>
</form>
<form method="post" class="mdl-basic-form"style="width: 520px;">
<h3>Vertical, distributed, without offset</h3>
<div class="mdl-basic-form__group">
<label for="name">Name</label>
<input name="name" id="name" placeholder="Thomas A Anderson" required="">
</div>
<div class="mdl-basic-form__group">
<label for="email">Email address</label>
<input type="email" name="email" id="email" placeholder="neo@example.com" required="">
</div>
<div class="mdl-basic-form__group">
<label for="tel">Telephone</label>
<input type="tel" name="tel" id="tel" placeholder="(555) 555 5555" required="">
</div>
<div class="mdl-basic-form__group mdl-basic-form__group--last-row equal">
<button type="button" value="Exit">Exit</button>
<button type="button" value="Cancel">Cancel</button>
<input type="submit" value="Sign up">
</div>
</form>
<form class="mdl-basic-form" role="form">
<label for="inputEmail">Email:</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
<label for="inputPassword">Password:</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="mdl-basic-form__group mdl-basic-form__group--checkbox">
<input type="checkbox"> Remember me
</div>
<button type="submit" class="mdl-basic-form__control--right">Sign in</button>
</form>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla turpis mauris, faucibus nec consequat
vitae, tincidunt eget lorem. Cras molestie, massa quis tempus aliquet, enim purus facilisis mauris, ut
placerat ligula ex id massa. Vestibulum est turpis, vestibulum a massa eget, pellentesque eleifend
justo. Morbi tincidunt vulputate urna vitae malesuada. Vivamus est erat, venenatis eu mauris ac, finibus
cursus lectus. Nunc ultrices libero vitae est egestas consectetur. Aliquam dapibus, mi quis sollicitudin
vestibulum, odio nulla ultrices erat, vel sagittis ligula sem et nunc.
</p>
</div>
<!-- start Autogenerated with gensamples.dart -->
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
<!-- end Autogenerated with gensamples.dart -->
</body>
</html>
Oops, something went wrong.

0 comments on commit 2fc4162

Please sign in to comment.