Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Log in form

  • Loading branch information...
commit 06d951cf564df16a9fe52442af31c1765768375d 1 parent ab71c01
authored February 12, 2013
16  index.html
@@ -6,6 +6,7 @@
6 6
 
7 7
 <link rel="stylesheet" type="text/css" href="style/headers.css"/>
8 8
 <link rel="stylesheet" type="text/css" href="style/lists.css" />
  9
+<link rel="stylesheet" type="text/css" href="style/input_areas.css" />
9 10
 <link rel="stylesheet" type="text/css" href="style/app.css"/>
10 11
 </head>
11 12
 
@@ -40,13 +41,22 @@
40 41
     </article>
41 42
   </section>
42 43
 
43  
-  <section role="region" id="settings-view" class="move-down skin-organic">
  44
+  <section role="region" id="settings-view" class="skin-organic">
44 45
     <header>
45  
-    <button id="close-btn"><span class="icon icon-close">close</span></button>
  46
+      <button id="close-btn"><span class="icon icon-close">close</span></button>
  47
+      <menu type="toolbar">
  48
+        <button id="settings-btn">Log in</button>
  49
+      </menu>
46 50
       <h1>Settings</h1>
47 51
     </header>
48 52
     <article>
49  
-      <!-- Content -->
  53
+      <form>
  54
+        <p>
  55
+          <input type="text" placeholder="username">
  56
+          <button type="reset">Clear</button>
  57
+        </p>
  58
+        <p><input type="password" placeholder="password"/></p>
  59
+      </form>
50 60
     </article>
51 61
   </section>
52 62
 
6  style/app.css
@@ -49,4 +49,8 @@ section[role="region"] > header:first-child .icon.icon-settings {
49 49
   height: 3rem;
50 50
   width: 3rem;
51 51
   margin: 1.5rem 0 0 1rem;
52  
-}
  52
+}
  53
+
  54
+#settings-view form {
  55
+	margin: 1.5rem;
  56
+}
309  style/temp/input_areas.css
... ...
@@ -0,0 +1,309 @@
  1
+/* ----------------------------------
  2
+* Input areas
  3
+* ---------------------------------- */
  4
+input[type="text"],
  5
+input[type="password"],
  6
+input[type="email"],
  7
+input[type="tel"],
  8
+input[type="search"],
  9
+input[type="url"],
  10
+textarea {
  11
+  -moz-box-sizing: border-box;
  12
+  display: block;
  13
+  overflow: hidden;
  14
+  width: 100%;
  15
+  height: 4rem;
  16
+  resize: none;
  17
+  padding: 0 0.8rem;
  18
+  font: 1.4rem/4rem "MozTT", Sans-serif;
  19
+  border: 0.1rem solid #ccc;
  20
+  border-radius: 0.3rem;
  21
+  box-shadow: none; /* override the box-shadow from the system (performance issue) */
  22
+  background: #fff url(input_areas/images/ui/shadow.png) repeat-x;
  23
+}
  24
+
  25
+textarea {
  26
+  height: 10rem;
  27
+  max-height: 10rem;
  28
+  line-height: 2rem;
  29
+  margin: 0;
  30
+}
  31
+
  32
+/* fix for required inputs with wrong or empty value e.g. [type=email] */
  33
+input:invalid,
  34
+textarea:invalid {
  35
+  border: 0.1rem solid #820000;
  36
+  color: #b90000;
  37
+}
  38
+
  39
+input[type="text"]::-moz-placeholder,
  40
+input[type="password"]::-moz-placeholder,
  41
+input[type="email"]::-moz-placeholder,
  42
+input[type="tel"]::-moz-placeholder,
  43
+input[type="search"]::-moz-placeholder,
  44
+input[type="url"]::-moz-placeholder,
  45
+textarea::-moz-placeholder {
  46
+  color: #666;
  47
+}
  48
+
  49
+form p {
  50
+  position: relative;
  51
+  margin: 0;
  52
+}
  53
+
  54
+form p + p {
  55
+  margin-top: 1rem;
  56
+}
  57
+
  58
+form p input + button[type="reset"],
  59
+form p textarea + button[type="reset"] {
  60
+  position: absolute;
  61
+  top: 50%;
  62
+  right: 0;
  63
+  width: 3.5rem;
  64
+  height: 4rem;
  65
+  margin: -2rem 0 0;
  66
+  padding: 0;
  67
+  border: none;
  68
+  font-size: 0;
  69
+  opacity: 0;
  70
+  pointer-events: none;
  71
+  background: url(input_areas/images/icons/clear.png) no-repeat 50% 50%;
  72
+}
  73
+
  74
+form p input + button[type="reset"],
  75
+form p textarea + button[type="reset"] {
  76
+  top: 0;
  77
+  margin: 0;
  78
+}
  79
+
  80
+textarea {
  81
+  padding: 0.8rem;
  82
+}
  83
+
  84
+form p input:focus {
  85
+  padding-right: 3.5rem;
  86
+}
  87
+
  88
+form p textarea:focus {
  89
+  padding-right: 3rem;
  90
+}
  91
+
  92
+form p input:focus + button[type="reset"],
  93
+form p textarea:focus + button[type="reset"] {
  94
+  opacity: 1;
  95
+  pointer-events: all;
  96
+}
  97
+
  98
+/* Fieldset */
  99
+fieldset {
  100
+  overflow: hidden;
  101
+  margin: 0;
  102
+  padding: 0;
  103
+  border-radius: 0.3rem;
  104
+  border: 0.1rem solid rgba(0,0,0,.2);
  105
+  font: 1.4rem/1em "MozTT", Sans-serif;
  106
+  background: #fff url(input_areas/images/ui/shadow.png) repeat-x left top;
  107
+}
  108
+
  109
+fieldset  + fieldset {
  110
+  margin-top: 1.5rem;
  111
+}
  112
+
  113
+fieldset legend {
  114
+  -moz-box-sizing: border-box;
  115
+  position: relative;
  116
+  float: left;
  117
+  width: 9.5rem;
  118
+  height: 4rem;
  119
+  padding: 0 0.5rem 0 1.8rem;
  120
+  white-space: nowrap;
  121
+  text-overflow: ellipsis;
  122
+  overflow: hidden;
  123
+  color: #333;
  124
+  line-height: 4rem;
  125
+  text-transform: uppercase;
  126
+}
  127
+
  128
+fieldset legend.action {
  129
+  position: relative;
  130
+}
  131
+
  132
+fieldset legend.action:after {
  133
+  content: "";
  134
+  position: absolute;
  135
+  top: 1.8rem;
  136
+  width: 0;
  137
+  height: 0;
  138
+  margin-left: 0.5rem;
  139
+  border: 0.4rem solid transparent;
  140
+  border-top-color: #333;
  141
+}
  142
+
  143
+fieldset section input[type="text"],
  144
+fieldset section input[type="password"],
  145
+fieldset section input[type="email"],
  146
+fieldset section input[type="tel"],
  147
+fieldset section input[type="search"],
  148
+fieldset section textarea {
  149
+  height: 4rem;
  150
+  border: none;
  151
+  border-radius: 0;
  152
+  background: none;
  153
+  font-weight: 600;
  154
+}
  155
+
  156
+fieldset section {
  157
+  display: block;
  158
+  border-left: 0.1rem solid #ddd;
  159
+  border-radius: 0 0.3rem 0.3rem 0;
  160
+  overflow: hidden;
  161
+}
  162
+
  163
+fieldset section p {
  164
+  margin: 0;
  165
+  border-bottom: 0.1rem solid #ddd;
  166
+}
  167
+
  168
+fieldset section p:last-child {
  169
+  border-bottom: none;
  170
+}
  171
+
  172
+/* Tidy (search/submit) */
  173
+form[role="search"] {
  174
+  position: relative;
  175
+  height: 3.7rem;
  176
+  background: #e8e8e8 url(input_areas/images/ui/background.png) repeat-x;
  177
+}
  178
+
  179
+section[role="region"] > header:first-child + form[role="search"] {
  180
+  /* increase height when underneath a header because of header's shadow */
  181
+  padding-top: 0.3rem;
  182
+  border-bottom: 0.1rem solid #c8c8c8;
  183
+}
  184
+
  185
+form[role="search"]:after {
  186
+  content: "";
  187
+  position: absolute;
  188
+  top: 100%;
  189
+  right: 0;
  190
+  left: 0;
  191
+  height: 0.3rem;
  192
+  background: url(input_areas/images/ui/shadow-search.png) repeat-x left top;
  193
+}
  194
+
  195
+form[role="search"].bottom:after {
  196
+  content: "";
  197
+  position: absolute;
  198
+  top: -0.3rem;
  199
+  right: 0;
  200
+  left: 0;
  201
+  height: 0.3rem;
  202
+  background: url(input_areas/images/ui/shadow-invert.png) repeat-x 0 100%;
  203
+}
  204
+
  205
+section[role="region"] > header:first-child + form[role="search"]:after{
  206
+  background: none;
  207
+}
  208
+
  209
+form[role="search"] p {
  210
+  -moz-box-sizing: border-box;
  211
+  padding: 0.3rem 1.2rem;
  212
+  overflow: hidden;
  213
+}
  214
+
  215
+form[role="search"].full p {
  216
+  padding: 0.3rem 2.5rem;
  217
+}
  218
+
  219
+form[role="search"] p input {
  220
+  height: 3rem;
  221
+  border: 0.1rem solid #ababab;
  222
+  background: #fff url(input_areas/images/ui/shadow-search.png) repeat-x left top;
  223
+}
  224
+
  225
+form[role="search"] p button[type="reset"] {
  226
+  right: 1rem;
  227
+}
  228
+
  229
+form[role="search"].full p button[type="reset"] {
  230
+  right: 2.3rem;
  231
+}
  232
+
  233
+form[role="search"] button[type="submit"] {
  234
+  float: right;
  235
+  min-width: 6rem;
  236
+  height: 3.7rem;
  237
+  padding: 0 0.4rem;
  238
+  border: none;
  239
+  color: #333;
  240
+  font: 600 1.4rem/3.2rem "MozTT", Sans-serif;
  241
+  background: url(input_areas/images/ui/separator.png) no-repeat 0 50%,
  242
+              url(input_areas/images/ui/active.png) repeat-x 0 100%;
  243
+}
  244
+
  245
+form[role="search"] button[type="submit"] + p > textarea {
  246
+  height: 3rem;
  247
+  padding: 0.5rem 3rem 0.5rem 0.8rem;
  248
+  line-height: 2rem;
  249
+}
  250
+
  251
+form[role="search"] button[type="submit"] + p button {
  252
+  height: 3.7rem;
  253
+}
  254
+
  255
+form[role="search"].full button[type="submit"] {
  256
+  display: none;
  257
+}
  258
+
  259
+form[role="search"] button[type="submit"]:active {
  260
+  background: #008caa;
  261
+  text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,.3);
  262
+}
  263
+
  264
+form[role="search"] button[type="submit"][disabled] {
  265
+  color: #adadad;
  266
+  background: url(input_areas/images/ui/separator.png) no-repeat 0 50%;
  267
+}
  268
+
  269
+form p button[type="reset"]:focus,
  270
+form p button[type="reset"]::-moz-focus-inner {
  271
+  border: none;
  272
+  outline: none;
  273
+}
  274
+
  275
+/******************************************************************************
  276
+ * Right-to-Left layout
  277
+ */
  278
+
  279
+html[dir="rtl"] form p input:valid,
  280
+html[dir="rtl"] form p input:valid:focus {
  281
+  padding: 0 0.8rem 0 3.5rem;
  282
+}
  283
+
  284
+html[dir="rtl"] form p textarea:valid,
  285
+html[dir="rtl"] form p textarea:valid:focus {
  286
+  padding: 0.8rem 0.8rem 0.8rem 3.5rem;
  287
+}
  288
+
  289
+html[dir="rtl"] form p input + button[type="reset"],
  290
+html[dir="rtl"] form p textarea + button[type="reset"] {
  291
+  right: auto;
  292
+  left: 0;
  293
+}
  294
+
  295
+html[dir="rtl"] fieldset legend.action:after {
  296
+  margin: 0 0.5rem 0 0;
  297
+}
  298
+
  299
+html[dir="rtl"] fieldset legend {
  300
+  padding: 0 1.8rem 0 0.5rem;
  301
+}
  302
+
  303
+html[dir="rtl"] form[role="search"] button[type="submit"] + p > textarea {
  304
+  padding: 0.5rem 0.8rem 0.5rem 3rem;
  305
+}
  306
+
  307
+html[dir="rtl"] form[role="search"] button[type="submit"] + p > button {
  308
+  left: 1rem;
  309
+}
BIN  style/temp/input_areas/images/icons/clear.png
BIN  style/temp/input_areas/images/ui/active.png
BIN  style/temp/input_areas/images/ui/background.png
BIN  style/temp/input_areas/images/ui/separator.png
BIN  style/temp/input_areas/images/ui/shadow-invert.png
BIN  style/temp/input_areas/images/ui/shadow-search.png
BIN  style/temp/input_areas/images/ui/shadow.png
123  style/temp/input_areas/index.html
... ...
@@ -0,0 +1,123 @@
  1
+<!DOCTYPE html>
  2
+<html dir="ltr">
  3
+<head>
  4
+  <meta charset="utf-8">
  5
+
  6
+  <title>Input areas</title>
  7
+  <link rel="stylesheet" href="../input_areas.css">
  8
+
  9
+  <!--
  10
+    This <style> and <link> is only used for the example code, is no needed for the real case use
  11
+  -->
  12
+  <style>
  13
+    html, body {
  14
+      margin: 0;
  15
+      padding: 0;
  16
+      font-size: 10px;
  17
+      background-color: #fff;
  18
+    }
  19
+    body { background: none; }
  20
+    h2.bb-docs {
  21
+      padding: 0.4rem 3rem;
  22
+      margin: -0.1rem 0 0;
  23
+      border: solid 0.1rem #e8e8e8;
  24
+      color: #666;
  25
+      font-size: 1.8rem;
  26
+      font-family: "MozTT", Sans-serif;
  27
+      font-weight: lighter;
  28
+      background-color: #f5f5f5;
  29
+    }
  30
+   form { margin: 1rem 2rem; }
  31
+  </style>
  32
+</head>
  33
+
  34
+<body role="application">
  35
+
  36
+    <h2 class="bb-docs">Default inputs</h2>
  37
+    <form>
  38
+      <p>
  39
+        <input type="text" placeholder="Placeholder" required>
  40
+        <button type="reset">Clear</button>
  41
+      </p>
  42
+
  43
+      <p>
  44
+        <textarea placeholder="Placeholder in textarea" required></textarea>
  45
+        <button type="reset">Clear</button>
  46
+      </p>
  47
+
  48
+      <p>
  49
+        <input type="text" placeholder="Placeholder" value="Some written text" required>
  50
+        <button type="reset">Clear</button>
  51
+      </p>
  52
+    </form>
  53
+
  54
+    <h2 class="bb-docs">Fieldset</h2>
  55
+     <form>
  56
+      <fieldset>
  57
+        <legend class="action">Mobile</legend>
  58
+        <section>
  59
+          <p>
  60
+            <input type="tel" placeholder="Phone number" required>
  61
+            <button type="reset">Clear</button>
  62
+          </p>
  63
+          <p>
  64
+            <input type="text" placeholder="Name" value="Jessy James" required>
  65
+            <button type="reset">Clear</button>
  66
+          </p>
  67
+        </section>
  68
+      </fieldset>
  69
+
  70
+      <fieldset>
  71
+        <legend>Work</legend>
  72
+        <section>
  73
+          <p>
  74
+            <input type="tel" placeholder="Email" required>
  75
+            <button type="reset">Clear</button>
  76
+          </p>
  77
+        </section>
  78
+      </fieldset>
  79
+     </form>
  80
+
  81
+    <h2 class="bb-docs">Input forms</h2>
  82
+
  83
+    <!-- form used at the top of the page with fixed/absolute position and content scrolls underneath -->
  84
+    <form role="search">
  85
+      <button type="submit">Cancel</button>
  86
+      <p>
  87
+        <input type="text" placeholder="search term here..." required>
  88
+        <button type="reset">Clear</button>
  89
+      </p>
  90
+    </form>
  91
+
  92
+    <!-- form used under a header, this form scrolls together with the content underneath the header -->
  93
+    <section role="region"> 
  94
+      <header>
  95
+          <!-- here should be the content of the header -->
  96
+      </header>
  97
+      <form role="search" class="full">
  98
+        <button type="submit">Send</button>
  99
+        <p>
  100
+          <input type="text" placeholder="search term here..." required>
  101
+          <button type="reset">Clear</button>
  102
+        </p>
  103
+      </form>
  104
+    </section>
  105
+
  106
+    <form role="search" class="bottom">
  107
+      <button type="submit">Send</button>
  108
+      <p>
  109
+        <input type="text" required>
  110
+        <button type="reset">Clear</button>
  111
+      </p>
  112
+    </form>
  113
+
  114
+    <form role="search" class="bottom">
  115
+      <button type="submit">Send</button>
  116
+      <p>
  117
+        <textarea placeholder="Placeholder in textarea" required></textarea>
  118
+        <button type="reset">Clear</button>
  119
+      </p>
  120
+    </form>
  121
+
  122
+</body>
  123
+</html>

0 notes on commit 06d951c

Please sign in to comment.
Something went wrong with that request. Please try again.