From 567f2368e38b7507645eebf106f075d2e02ea982 Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Sun, 3 Aug 2014 09:52:45 -0400 Subject: [PATCH 1/3] pull over latest Less styling updates to the Sass directory remove some repetitive comments from the Sass files. Move the label and form > * selectors from input to general. (maybe input should be renamed forms and all form elements get put back in there?) --- less/general.less | 2 +- sass/_general.scss | 24 +++++++++++++++++------- sass/_grid.scss | 2 +- sass/_inputs.scss | 9 --------- sass/_table.scss | 2 +- 5 files changed, 20 insertions(+), 19 deletions(-) diff --git a/less/general.less b/less/general.less index f75dacc..09cb6b7 100644 --- a/less/general.less +++ b/less/general.less @@ -30,7 +30,7 @@ body, textarea, input { } label > * { - display:inline + display:inline; } form > * { diff --git a/sass/_general.scss b/sass/_general.scss index 664df9e..e1bd12b 100644 --- a/sass/_general.scss +++ b/sass/_general.scss @@ -4,15 +4,25 @@ body, textarea, input { + background: 0; + border-radius: 0; font: 16px sans-serif; margin: 0; - border-radius: 0; } * { outline: 0; } +label > * { + display: inline; +} + +form > * { + display: block; + margin-bottom: 10px; +} + // apply a smooth transition effect to an element's state change .smooth { @@ -20,12 +30,12 @@ textarea, input { } .container { - margin: auto; - width: 1270px; + margin: 0 20px; + width: auto; - @media(max-width:1310px) { - margin: 0 20px; - width: auto; + @media(min-width:1310px) { + margin: auto; + width: 1270px; } } @@ -41,5 +51,5 @@ textarea, input { // shared smaller text size %shared-font-size { - font-size: .9em; + font-size: 14px; } diff --git a/sass/_grid.scss b/sass/_grid.scss index 69a8d2a..7d3f95e 100644 --- a/sass/_grid.scss +++ b/sass/_grid.scss @@ -8,7 +8,7 @@ //------------------------------------------------------------------- .row { - margin-top: 2%; + margin: 1% 0; overflow: auto; // needed for proper formed layout } diff --git a/sass/_inputs.scss b/sass/_inputs.scss index 747e725..b160327 100644 --- a/sass/_inputs.scss +++ b/sass/_inputs.scss @@ -3,15 +3,6 @@ // Inputs //------------------------------------------------------------------- -label > * { - display: inline; -} - -form > * { - display: block; - margin-bottom: 10px; -} - input, textarea { @extend %shared-font-size; border: 1px solid $c-grey; diff --git a/sass/_table.scss b/sass/_table.scss index 8b9171f..b48cead 100644 --- a/sass/_table.scss +++ b/sass/_table.scss @@ -12,7 +12,7 @@ } tbody>*:nth-child(2n-1) { - background: $c-grey; // Shade every other table row + background: $c-grey; // We use tbody to ensure that we don't shade the heading // this preserves the order of the shading } From fc297fe36261a1d5f5acf02371b0eb7454d9e319 Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Sun, 3 Aug 2014 16:41:15 -0400 Subject: [PATCH 2/3] ABCSSified Less files --- less/general.less | 6 +++--- less/inputs.less | 5 +++-- less/navbar.less | 20 ++++++++++---------- 3 files changed, 16 insertions(+), 15 deletions(-) diff --git a/less/general.less b/less/general.less index 09cb6b7..16a57f0 100644 --- a/less/general.less +++ b/less/general.less @@ -1,8 +1,8 @@ body, textarea, input { + background: 0; + border-radius: 0; font: 16px sans-serif; margin: 0; - border-radius: 0; - background: 0; } .smooth { @@ -24,8 +24,8 @@ body, textarea, input { @media(min-width:1310px) { .container { - width: 1270px; margin: auto; + width: 1270px; } } diff --git a/less/inputs.less b/less/inputs.less index 99292f6..7a215de 100644 --- a/less/inputs.less +++ b/less/inputs.less @@ -5,17 +5,18 @@ textarea, input, .addon-front, .btn-sm, .nav a { textarea, input { border: 1px solid #ccc; padding: 8px; + &:focus { border-color: #5ab; } } textarea, input[type='text'] { - width: 13em; -webkit-appearance: none; /* make iOS inputs pretty */ + width: 13em; } .addon-front { - padding: 8px 12px; box-shadow: 0 0 0 1px #ccc; + padding: 8px 12px; } diff --git a/less/navbar.less b/less/navbar.less index 305682b..818add6 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -13,18 +13,18 @@ } .nav a { - padding-right: 1em; color: #aaa; - top: -1px; + padding-right: 1em; position: relative; + top: -1px; } .btn.btn-close { background: #000; - visibility: hidden; float: right; - margin-top: -54px; font-size: 25px; + margin-top: -54px; + visibility: hidden; } .nav .pagename { @@ -44,27 +44,27 @@ margin-top: -11px; } .nav:focus { + height: auto; /* Necesary for animations max-height: 500px; height: 100%; */ - height: auto; } .nav div:before { - content: ''; - border-top: 3px solid; + background: #000; border-bottom: 10px double; + border-top: 3px solid; + content: ''; float: right; height: 4px; + position: relative; right: 3px; top: 14px; width: 20px; - position: relative; - background: #000; } .nav a { + display: block; padding: .5em 0; width: 50%; - display: block; } } From 4a114e1965ed533b7eb4844755043e8bdda84d50 Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Sun, 3 Aug 2014 16:53:47 -0400 Subject: [PATCH 3/3] rename input.scss to forms.scss and add form styling from general to renamed forms.scss file --- sass/{_inputs.scss => _forms.scss} | 13 +++++++++++-- sass/_general.scss | 10 ---------- sass/min-master.scss | 4 ++-- 3 files changed, 13 insertions(+), 14 deletions(-) rename sass/{_inputs.scss => _forms.scss} (80%) diff --git a/sass/_inputs.scss b/sass/_forms.scss similarity index 80% rename from sass/_inputs.scss rename to sass/_forms.scss index b160327..c258f8c 100644 --- a/sass/_inputs.scss +++ b/sass/_forms.scss @@ -1,8 +1,17 @@ -@if $import-inputs == true { +@if $import-forms == true { //------------------------------------------------------------------- -// Inputs +// Form Elements //------------------------------------------------------------------- +form > * { + display: block; + margin-bottom: 10px; +} + +label > * { + display: inline; +} + input, textarea { @extend %shared-font-size; border: 1px solid $c-grey; diff --git a/sass/_general.scss b/sass/_general.scss index e1bd12b..4795cb0 100644 --- a/sass/_general.scss +++ b/sass/_general.scss @@ -14,16 +14,6 @@ textarea, input { outline: 0; } -label > * { - display: inline; -} - -form > * { - display: block; - margin-bottom: 10px; -} - - // apply a smooth transition effect to an element's state change .smooth { transition: all .2s; diff --git a/sass/min-master.scss b/sass/min-master.scss index 2ab6e03..6fcacd8 100644 --- a/sass/min-master.scss +++ b/sass/min-master.scss @@ -17,7 +17,7 @@ $import-headings: true!default; $import-buttons: true!default; -$import-inputs: true!default; +$import-forms: true!default; $import-navbar: true!default; @@ -40,7 +40,7 @@ $import-ie-hacks: false!default; 'grid', 'headings', 'icons', - 'inputs', + 'forms', 'navbar', 'table', 'iehacks';