feature: form added to components and samples

MikeMitterer · Mar 20, 2015 · 687e689 · 687e689
1 parent 814173c
commit 687e689
Show file tree

Hide file tree

Showing 14 changed files with 2,088 additions and 845 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ pubspec.lock
 .sass-cache
 lib/sass/*/*.css
 .bs
+*.css.map
diff --git a/WskMaterial.iml b/WskMaterial.iml
@@ -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" />

diff --git a/example/_material_icons.scss b/example/_material_icons.scss
@@ -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%));
+}
diff --git a/example/checkbox/web/demo.scss b/example/checkbox/web/demo.scss
@@ -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";
diff --git a/example/forms/web/demo.css b/example/forms/web/demo.css
diff --git a/example/forms/web/demo.scss b/example/forms/web/demo.scss
@@ -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;
+    }
 }
 
 
+
diff --git a/example/forms/web/index-with-material-components.html b/example/forms/web/index-with-material-components.html
@@ -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>