Permalink
Browse files

feature: form added to components and samples

  • Loading branch information...
MikeMitterer committed Mar 20, 2015
1 parent 814173c commit 687e6896db1f7422893ee0948b761a7f6856e36e
View
@@ -8,3 +8,4 @@ pubspec.lock
.sass-cache
lib/sass/*/*.css
.bs
+*.css.map
View
@@ -36,6 +36,7 @@
<excludeFolder url="file://$MODULE_DIR$/example/footer/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/footer/web/images/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/footer/web/packages" />
+ <excludeFolder url="file://$MODULE_DIR$/example/forms/build" />
<excludeFolder url="file://$MODULE_DIR$/example/forms/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/forms/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/icon-toggle/build" />
@@ -0,0 +1,10 @@
+@import 'packages/material_icons/sass/action/svg/production/ic_extension_48px';
+.bg-ic_extension_48px {
+ @include svg-background("48");
+ background-image: svg-ic_extension_48px($icon-color);
+}
+
+.bg-ic_extension_48px.script {
+ @include svg-background("48");
+ background-image: svg-ic_extension_48px(darken($icon-color,20%));
+}
@@ -1,2 +1,2 @@
@import "packages/wsk_material/sass/styleguide_demo_bp";
-@import "packages/wsk_material/sass/checkbox/_checkbox";
+@import "packages/wsk_material/sass/checkbox/checkbox";
View

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -1,6 +1,12 @@
@import "packages/wsk_material/sass/styleguide_demo_bp";
@import "packages/wsk_material/sass/forms/forms";
+// Extended - Material, form
+@import "packages/wsk_material/sass/button/button";
+@import "packages/wsk_material/sass/checkbox/checkbox";
+@import "packages/wsk_material/sass/radio/_radio";
+@import "packages/wsk_material/sass/textfield/_textfield";
+
.forms.sample {
display: flex;
flex-direction: row;
@@ -9,10 +15,18 @@
align-content: space-between; // ||
align-items: flex-start; // ↓
+ .linklist {
+ width: 100%;
+ }
> * {
margin-right: 12px;
margin-bottom: 24px;
}
+
+ form {
+ max-width: 512px;
+ }
}
+
@@ -0,0 +1,98 @@
+<!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>Nav-Pills</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.wsk-upgrading > * { display : none; }
+
+ body.wsk-upgrading div.loading { display : block; }
+ </style>
+</head>
+<body class="wsk-upgrading">
+<div class="loading">Loading...</div>
+
+<div class="PreviewBlock forms sample">
+ <div class="linklist"><a href="index.html">Basic HTML elements</a> | <a href="index-with-material-components.html">With
+ material components</a></div>
+ <div>
+ <p>
+ 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>
+
+ <form method="post" class="right wsk-form">
+ <h3>Register for the launch</h3>
+
+ <div class="wsk-input">
+ <input class="wsk-textfield wsk-js-textfield" type="text" name="name" required=""/>
+ <label class="wsk-label" for="name">Name</label>
+ </div>
+ <div class="wsk-input">
+ <input class="wsk-textfield wsk-js-textfield" type="email" name="email" required=""/>
+ <label class="wsk-label" for="email">Email address</label>
+ </div>
+ <div class="wsk-input">
+ <input class="wsk-textfield wsk-js-textfield" type="tel" name="tel" required=""/>
+ <label class="wsk-label" for="tel">Telephone</label>
+ </div>
+ <label class="wsk-checkbox wsk-js-checkbox wsk-js-ripple-effect" for="checkbox-1">
+ <input type="checkbox" id="checkbox-1" class="wsk-checkbox__input"/>
+ <span class="wsk-checkbox__label">Remember me</span>
+ </label>
+ <div class="wsk-form__group">
+ <button class="wsk-button wsk-js-button">Sign up</button>
+ </div>
+ </form>
+
+ <p>
+ 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="right wsk-form">
+ <h3>Register for the launch</h3>
+
+ <div class="wsk-input">
+ <input class="wsk-textfield wsk-js-textfield" type="text" name="name2" required=""/>
+ <label class="wsk-label" for="name2">Name</label>
+ </div>
+ <div class="wsk-input">
+ <input class="wsk-textfield wsk-js-textfield" type="email" name="email2" required=""/>
+ <label class="wsk-label" for="email2">Email address</label>
+ </div>
+ <div class="wsk-input">
+ <input class="wsk-textfield wsk-js-textfield" type="tel" name="tel2" required=""/>
+ <label class="wsk-label" for="tel2">Telephone</label>
+ </div>
+ <label class="wsk-checkbox wsk-js-checkbox wsk-js-ripple-effect" for="checkbox-1">
+ <input type="checkbox" id="checkbox-1" class="wsk-checkbox__input"/>
+ <span class="wsk-checkbox__label">Remember me</span>
+ </label>
+ <div class="wsk-form__group">
+ <button class="wsk-button wsk-js-button">Cancel</button>
+ <button class="wsk-button wsk-js-button">Sign up</button>
+ </div>
+ </form>
+</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 687e689

Please sign in to comment.