From 4ea4d8c5f718b79851372243244554ee7a039427 Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Sun, 9 Oct 2011 01:03:21 -0400 Subject: Improve usability of scss. (a lot of form style stuff) --- style.scss | 86 ++++++++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 56 insertions(+), 30 deletions(-) diff --git a/style.scss b/style.scss index 627df42..7a86e20 100644 --- a/style.scss +++ b/style.scss @@ -1,3 +1,9 @@ +@mixin box-shadow($shadow) { + -webkit-box-shadow: $shadow; + -moz-box-shadow: $shadow; + box-shadow: $shadow; +} + body.loggedin { div.infobar * { margin: 0 1em; @@ -26,33 +32,60 @@ body { } } div.main { - form fieldset li { - clear: both; - padding: .5em 0; - label { - width: 25%; - float: left; - } - input, textarea { - width: 60%; - float: left; - } - input[type="password"] { - width: 30%; - } - p.form_data { - margin-left: 25%; - } - &.wide { + form { + fieldset li { clear: both; padding: .5em 0; label { - width: 100%; - float: none; + width: 25%; + float: left; } input, textarea { - width: 100%; - float: none; + width: 60%; + float: left; + } + input[type="password"] { + width: 30%; + } + p.form_data { + margin-left: 25%; + } + &.wide { + clear: both; + padding: .5em 0; + label { + width: 100%; + float: none; + } + input, textarea { + width: 100%; + float: none; + } + } + } + table { + border: solid 1px black; + border-collapse: collapse; + border-spacing: 0; + td, th { + border: solid 1px black; + padding: 0; + .cell_width { + display: block; + overflow: hidden; + height: 0px; + @extend input[type="text"]; + } + input { + outline: solid 1px black; + width: 100%; + background: transparent; + border: 0; + &:focus { + outline-color: blue; + @include box-shadow(inset 0 0 1pt 1pt rgba(0,0,1,.5)); + } + } } } } @@ -67,19 +100,12 @@ a { } input[type="text"], textarea { font-family: monospace; + font-size: 12pt; } iframe { width: 100%; height: 100%; } -table, td { - border: solid 1px black; -} -table input { - border: none; - width: 100%; - background: transparent; -} .error { font-weight: bold; color: red; -- cgit v1.2.3