Congegni
/
barebones
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Form updates

This commit is contained in:
Mike Francis 2014-05-09 12:19:28 +01:00
parent d9a569ab87
commit 0274d90b4f
8 changed files with 58 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,5 +1,6 @@
npm-debug.log npm-debug.log
.sass-cache .sass-cache
node_modules node_modules
css-test.html
css/bourbon css/bourbon
css/neat css/neat

3
.gitmodules vendored Normal file
View File

@ -0,0 +1,3 @@
[submodule "css/grids"]
path = css/grids
url = git@github.com:csswizardry/csswizardry-grids.git

14
css/_buttons.scss Normal file
View File

@ -0,0 +1,14 @@
.btn {
background-color: $base-colour;
border: 0;
color: $base-background-colour;
cursor: pointer;
display: inline-block;
font: inherit;
font-weight: bold;
height: ($base-margin-bottom * 1.5);
line-height: ($base-margin-bottom * 1.5);
padding: 0 $base-margin-bottom;
text-align: center;
width: auto;
}

45
css/_forms.scss
View File

@ -7,8 +7,8 @@ textarea {
display: inline-block; display: inline-block;
font: inherit; font: inherit;
line-height: $base-margin-bottom; line-height: $base-margin-bottom;
padding: ($base-margin-bottom / 4) ($base-margin-bottom / 2); padding: ($base-margin-bottom / 4);
width: 300px; width: 100%;
} }
input[type="checkbox"], input[type="checkbox"],
@ -18,31 +18,30 @@ input[type="radio"] {
width: auto; width: auto;
} }
label {
display: block;
font-weight: bold;
}
select {
height: ($base-margin-bottom * 1.5);
}
textarea { textarea {
min-height: ($base-margin-bottom * 4); min-height: ($base-margin-bottom * 4);
} }
.form__group { .form__group {
margin-bottom: $base-margin-bottom; margin-bottom: $base-margin-bottom;
} .form__group__controls {
@extend .clearfix;
.form__label { label {
font-weight: bold; font-weight: normal;
} }
&.form__group__controls--inline {
.form__controls { label {
@extend .clearfix; display: inline-block;
} }
}
.btn { }
background-color: $base-colour;
border: 0;
color: $base-background-colour;
cursor: pointer;
display: inline-block;
height: ($base-margin-bottom * 1.5);
line-height: ($base-margin-bottom * 1.5);
padding: 0 $base-margin-bottom;
text-align: center;
width: auto;
} }

12
css/_mixins.scss
View File

@ -11,15 +11,15 @@
@mixin background-size($size) { @mixin background-size($size) {
-webkit-background-size: $size; -webkit-background-size: $size;
-moz-background-size: $size; -moz-background-size: $size;
-o-background-size: $size; -o-background-size: $size;
background-size: $size; background-size: $size;
} }
@mixin font-smoothing { @mixin font-smoothing {
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
@ -36,4 +36,4 @@
:-ms-input-placeholder { :-ms-input-placeholder {
@content; @content;
} }
} }

10
css/_normalise.scss
View File

@ -2,6 +2,7 @@ html {
background-color: $base-background-colour; background-color: $base-background-colour;
color: $base-colour; color: $base-colour;
font: #{($base-font-size * 6.25) * 1%}/#{$base-line-height} $base-font-stack; font: #{($base-font-size * 6.25) * 1%}/#{$base-line-height} $base-font-stack;
min-height: 100%;
} }
a { a {
@ -22,6 +23,15 @@ ol {
margin-bottom: $base-margin-bottom; margin-bottom: $base-margin-bottom;
} }
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: $base-margin-bottom;
}
h1 { h1 {
@include font-size($base-font-size * 2); @include font-size($base-font-size * 2);
} }

1
css/style.scss
View File

@ -27,6 +27,7 @@ Author: Mike Francis
// Form, Buttons // Form, Buttons
@import 'forms'; @import 'forms';
@import 'buttons';
// Nav abstraction, Navs // Nav abstraction, Navs

2
style.css
View File

@ -1 +1 @@
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block}address,caption,cite,dfn,th,var{font-style:normal;font-weight:normal}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}th{font-weight:bold;text-align:left}html{background-color:#fff;color:#444;font:100%/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif}a{color:#444;text-decoration:none}h1,h2,h3,h4,h5,h6,p,hr,ul,ol{margin-bottom:24px}h1{font-size:32px;font-size:2rem}h2{font-size:28px;font-size:1.75rem}h3{font-size:24px;font-size:1.5rem}h4{font-size:20px;font-size:1.25rem}h5,h6{font-size:16px;font-size:1rem}ul,ol{margin-left:24px}ul ul,ol ol{margin-bottom:0}img{display:block;height:auto;max-width:100%}blockquote{font-family:serif;padding-left:24px}em{font-style:italic}hr{background-color:#444;border:0;color:#444;height:1px}h1,h2,h3,h4,h5,h6,strong,th{font-weight:bold}table{width:100%}table th,table td{padding:6px;text-align:left}.alignleft{float:left}img.alignleft{margin-right:24px}.alignright{float:right}img.alignright{margin-left:24px}.aligncenter{display:block;margin-left:auto;margin-right:auto}img.aligncenter{margin-bottom:24px}.clearfix:before,.form__controls:before,.clearfix:after,.form__controls:after{content:'';display:table;line-height:0}.clearfix:after,.form__controls:after{clear:both}.container{*zoom:1;max-width:1200px;margin-left:auto;margin-right:auto;padding:0 20px}.container:before,.container:after{content:" ";display:table}.container:after{clear:both}input,select,textarea{background-color:#fff;border:solid 1px #444;color:#444;display:inline-block;font:inherit;line-height:24px;padding:6px 12px;width:300px}input[type="checkbox"],input[type="radio"]{background:transparent;border:0;width:auto}textarea{min-height:96px}.form__group{margin-bottom:24px}.form__label{font-weight:bold}.btn{background-color:#444;border:0;color:#fff;cursor:pointer;display:inline-block;height:36px;line-height:36px;padding:0 24px;text-align:center;width:auto}.nav{list-style:none;margin:0}.nav>li{display:inline-block}.nav>li>a{display:block} *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block}address,caption,cite,dfn,th,var{font-style:normal;font-weight:normal}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}th{font-weight:bold;text-align:left}html{background-color:#fff;color:#444;font:100%/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;min-height:100%}a{color:#444;text-decoration:none}h1,h2,h3,h4,h5,h6,p,hr,ul,ol{margin-bottom:24px}h1,h2,h3,h4,h5,h6{line-height:24px}h1{font-size:32px;font-size:2rem}h2{font-size:28px;font-size:1.75rem}h3{font-size:24px;font-size:1.5rem}h4{font-size:20px;font-size:1.25rem}h5,h6{font-size:16px;font-size:1rem}ul,ol{margin-left:24px}ul ul,ol ol{margin-bottom:0}img{display:block;height:auto;max-width:100%}blockquote{font-family:serif;padding-left:24px}em{font-style:italic}hr{background-color:#444;border:0;color:#444;height:1px}h1,h2,h3,h4,h5,h6,strong,th{font-weight:bold}table{width:100%}table th,table td{padding:6px;text-align:left}.alignleft{float:left}img.alignleft{margin-right:24px}.alignright{float:right}img.alignright{margin-left:24px}.aligncenter{display:block;margin-left:auto;margin-right:auto}img.aligncenter{margin-bottom:24px}.clearfix:before,.form__group .form__group__controls:before,.clearfix:after,.form__group .form__group__controls:after{content:'';display:table;line-height:0}.clearfix:after,.form__group .form__group__controls:after{clear:both}.container{*zoom:1;max-width:1200px;margin-left:auto;margin-right:auto;padding:0 20px}.container:before,.container:after{content:" ";display:table}.container:after{clear:both}input,select,textarea{background-color:#fff;border:solid 1px #444;color:#444;display:inline-block;font:inherit;line-height:24px;padding:6px;width:100%}input[type="checkbox"],input[type="radio"]{background:transparent;border:0;width:auto}label{display:block;font-weight:bold}select{height:36px}textarea{min-height:96px}.form__group{margin-bottom:24px}.form__group .form__group__controls label{font-weight:normal}.form__group .form__group__controls.form__group__controls--inline label{display:inline-block}.btn{background-color:#444;border:0;color:#fff;cursor:pointer;display:inline-block;font:inherit;font-weight:bold;height:36px;line-height:36px;padding:0 24px;text-align:center;width:auto}.nav{list-style:none;margin:0}.nav>li{display:inline-block}.nav>li>a{display:block}