[hawiducss] 2 new revisions pushed by ao5357 on 2011-08-29 21:09 GMT

[hawi...@googlecode.com]

2 new revisions:

Revision: ee59f5a729ee
Author: Brad Czerniak <ao5...@gmail.com>
Date: Mon Aug 29 14:08:20 2011
Log: The buttons/pillboxes build is currently broken. This needs to be
refa...
http://code.google.com/p/hawiducss/source/detail?r=ee59f5a729ee

Revision: fe3a4b7ea482
Author: Brad Czerniak <ao5...@gmail.com>
Date: Mon Aug 29 14:09:12 2011
Log: Added a test for the button role on an anchor. TODO: add button
role t...
http://code.google.com/p/hawiducss/source/detail?r=fe3a4b7ea482

==============================================================================
Revision: ee59f5a729ee
Author: Brad Czerniak <ao5...@gmail.com>
Date: Mon Aug 29 14:08:20 2011
Log: The buttons/pillboxes build is currently broken. This needs to be
refactored.

http://code.google.com/p/hawiducss/source/detail?r=ee59f5a729ee

Modified:
/styles.css

=======================================
--- /styles.css Mon Aug 29 13:46:45 2011
+++ /styles.css Mon Aug 29 14:08:20 2011
@@ -4,10 +4,10 @@
html{font-size:100.01%;}

body{background:#fff;color:#111;font-family:Arial,sans-serif;font-size:.875em;line-height:1.5;margin:0;}
article,aside,figure,footer,header,hgroup,nav,section{display:block;}
-button,input,select,textarea{border:.1em solid;border-color:#bbb #ccc #ccc
#bbb;color:#111;font-family:Arial,sans-serif;font-size:1em;padding:.1em;vertical-align:top;}
+button,[role=button],input,select,textarea{border:.1em
solid;border-color:#bbb #ccc #ccc
#bbb;color:#111;font-family:Arial,sans-serif;font-size:1em;padding:.1em;vertical-align:top;}
input:-moz-placeholder{color:graytext;}
input[type=search]{-webkit-appearance:textfield;}
-button,.button,code,fieldset,input[type=file] >
input[type=button],input[type=submit],pre,select{border-radius:.3em;}
+button,[role=button],code,fieldset,input[type=file] >
input[type=button],input[type=submit],pre,select{border-radius:.3em;}
embed,img,object{max-width:100%;}

/*-Link-*/
@@ -47,9 +47,9 @@
fieldset ol{margin:0;padding:0;}
fieldset li{list-style:none;margin:0;padding:.5em 1em;}
fieldset li label,fieldset
li .implicit-label{display:inline-block;margin:0 1em 0 0;width:9em;}
-
button,.button,input[type=file]>input[type=button],input[type=submit],select{background-color:#f9f9f9;background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.1),transparent);background-image:-ms-linear-gradient(bottom,rgba(0,0,0,.1),transparent);background-image:-o-linear-gradient(bottom,rgba(0,0,0,.1),transparent);background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.1),transparent);background-image:linear-gradient(bottom,rgba(0,0,0,.1),transparent);border:.1em
solid;border-color:#ccc #bbb #bbb
#ccc;cursor:pointer;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#ffffffff,endColorstr=#21000000);padding:.1em
1em;}
-
button:hover,.button:hover,input[type=file]>input[type=button]:hover,input[type=submit]:hover{background-color:#f0f0f0;}
- button,.button,input[type=submit]{margin:0 1em 0 0;}
+
button,[role=button],input[type=file]>input[type=button],input[type=submit],select{background-color:#f9f9f9;background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.1),transparent);background-image:-ms-linear-gradient(bottom,rgba(0,0,0,.1),transparent);background-image:-o-linear-gradient(bottom,rgba(0,0,0,.1),transparent);background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.1),transparent);background-image:linear-gradient(bottom,rgba(0,0,0,.1),transparent);border:.1em
solid;border-color:#ccc #bbb #bbb
#ccc;cursor:pointer;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#ffffffff,endColorstr=#21000000);padding:.1em
1em;}
+
button:hover,[role=button]:hover,input[type=file]>input[type=button]:hover,input[type=submit]:hover{background-color:#f0f0f0;}
+
button,[role=button],input[type=submit]{-moz-appearance:none;-webkit-appearance:none;margin:0
1em 0 0;}
input[type=file]{font-size:.714em;}
select[size],select[multiple]{background-image:none;}
legend{margin:0 0 0 .8em;}
@@ -83,8 +83,8 @@
sub{bottom:-.25em;position:relative;vertical-align:baseline;}
sup{bottom:.33em;position:relative;vertical-align:baseline;}

-/*--Utility Classes--*/
-.button{-moz-appearance:button;-webkit-appearance:button;color:#000;display:inline-block;padding:.1em
1em;text-decoration:none;}
+/*--Classes/Roles--*/
+button,[role=button]{color:#111;display:inline-block;padding:0
1em;text-decoration:none;}

.clicked,button.clicked,input.clicked{background-color:#e5e5e5;color:#fff;}
.column{float:left;margin:1.5em 0;width:50%;}

.columnated-text{-moz-column-count:2;-moz-column-gap:2em;-webkit-column-count:2;-webkit-column-gap:2em;column-count:2;column-gap:2em;}
@@ -94,8 +94,6 @@
button.pill{margin:0 -.3em;}

.pill-l,button.pill-l,input.pill-l{border-top-right-radius:.1em;border-bottom-right-radius:.1em;margin-right:0;}

.pill-r,button.pill-r,input.pill-r{border-top-left-radius:.1em;border-bottom-left-radius:.1em;border-color:#ccc
#bbb #bbb #fff;margin-left:0;}
-
-/*--Internationalization--*/

/*--Structure--*/
article,aside,footer,header,nav,section{background:#fff;margin:0
10px;padding:0 10px;}

==============================================================================
Revision: fe3a4b7ea482
Author: Brad Czerniak <ao5...@gmail.com>
Date: Mon Aug 29 14:09:12 2011
Log: Added a test for the button role on an anchor. TODO: add button
role to a div or other element for testing.

http://code.google.com/p/hawiducss/source/detail?r=fe3a4b7ea482

Modified:
/index.html

=======================================
--- /index.html Thu Aug 25 18:00:03 2011
+++ /index.html Mon Aug 29 14:09:12 2011
@@ -52,11 +52,13 @@
<option selected>two (default)</option>
<option>three</option>
</select></li>
- <li><span class="implicit-label">Pillbox</span><input class="pill-l"
id="reset" type="reset" value="Reset" name="awesome" /><select class="pill"
id="select3" name="select">
- <option>one</option>
- <option selected>two</option>
- <option>three</option>
- </select>
+ <li><span class="implicit-label">Pillbox</span>
+ <a role="button" class="pill-l" href="#">Anchor</a>
+ <select class="pill" id="select3" name="select">
+ <option>one</option>
+ <option selected>two</option>
+ <option>three</option>
+ </select>
<button class="pill" type="button">Button</button>
<input class="pill-r" id="sub" type="submit" value="Submit"
name="awesome" /></li>
<li><label for="checkbox">Checkbox</label><input id="checkbox"
type="checkbox" value="p455w0rd" name="checkbox" /></li>
@@ -67,7 +69,7 @@
<li><label for="keygen">Keygen</label><keygen id="keygen" name="keygen"
/></li>
<li><span class="implicit-label">Meter</span><meter value="2" min="0"
max="10">2 out of 10</meter></li>
<li><span class="implicit-label">Progress</span><progress value="22"
max="100">22%</progress></li>
- <li><span class="implicit-label">Default Buttons</span><input id="reset"
type="reset" value="Reset" name="awesome" /><input id="sub" type="submit"
value="Submit" name="awesome" /></li>
+ <li><span class="implicit-label">Default Buttons</span><button
type="button">Button</button><input id="sub" type="submit" value="Submit"
name="awesome" /></li>
</ol>
</fieldset></form>
<p>As Eric Meyer shows in his blog post, <a
href="http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/">Formal
Weirdness</a>, form elements are pretty much impossible to target and style
consistently across browsers. In cases of inconsistency, form controls in
Hawidu still resemble their OS-inserted counterparts enough that usability
should not be affected.</p>