diff options
| -rw-r--r-- | res/css/modules/positions.scss | 15 | ||||
| -rw-r--r-- | res/css/partials/input-bar.scss | 29 | ||||
| -rw-r--r-- | res/css/partials/search-bar.scss | 10 | ||||
| -rw-r--r-- | res/css/partials/task-alert.scss | 12 | ||||
| -rw-r--r-- | res/css/partials/top-bar.scss | 2 | ||||
| -rw-r--r-- | res/css/style.css | 28 |
6 files changed, 53 insertions, 43 deletions
diff --git a/res/css/modules/positions.scss b/res/css/modules/positions.scss index f4e23fbf..8af9546f 100644 --- a/res/css/modules/positions.scss +++ b/res/css/modules/positions.scss @@ -1,8 +1,11 @@ -$top-bar-height: 36px; -$search-bar-height: 48px; -$search-icon-height: 20px; -$task-alert-height: 48px; -$task-desc-height: 20px; -$input-bar-height:36px; +/* Vertical spacing */ +$one-baseline: 12px; +$two-baselines: 24px; +$three-baselines: 36px; +$four-baselines: 48px; +$icon-height: 20px; + +/* Horizontal spacing */ $doc-margin: 70px; + diff --git a/res/css/partials/input-bar.scss b/res/css/partials/input-bar.scss index 9fb47d64..0b7df9f6 100644 --- a/res/css/partials/input-bar.scss +++ b/res/css/partials/input-bar.scss @@ -1,12 +1,18 @@ +.input-container { + position: relative; + margin: $two-baselines 0 0 $doc-margin; + + form { + display: inline; + } +} + + .input-bar { font-family: $base-font-family; color: $mid-grey; - position: fixed; - display: block; - height: $input-bar-height; + height: $three-baselines; width: 420px; - top: $top-bar-height+$search-bar-height+$task-alert-height+20px; - left: $doc-margin; padding-left:8px; border-radius: 4px; border: 1px solid $mid-grey; @@ -24,13 +30,12 @@ color: $mid-grey; } - .add-button { - position:fixed; - top: $top-bar-height+$search-bar-height+$task-alert-height+22px; - height: 36px; - width: 36px; - left: 453px; + position:relative; + height: 30px; + width: 30px; + left: -38px; + top: 10px; } .suggestion{ @@ -44,7 +49,7 @@ .ui-helper-hidden-accessible{ position:fixed; - top: $top-bar-height+$search-bar-height+$task-alert-height+35px+$input-bar-height; + top: $three-baselines+$four-baselines+$four-baselines+35px+$three-baselines; left:$doc-margin+8px; text-shadow: -1px 1px 8px #E DE275, 1px -1px 8px #EDE275; font-size:16px; diff --git a/res/css/partials/search-bar.scss b/res/css/partials/search-bar.scss index b9c37f40..94566de2 100644 --- a/res/css/partials/search-bar.scss +++ b/res/css/partials/search-bar.scss @@ -1,6 +1,6 @@ .search-bar{ width:100%; - height:$search-bar-height; + height:$four-baselines; background: white; -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3); @@ -10,16 +10,16 @@ .search-input{ position: fixed; width: 100%; - top: $top-bar-height+($search-bar-height - $search-icon-height)/2; - height:$search-icon-height; + top: $three-baselines+($four-baselines - $icon-height)/2; + height:$icon-height; left: $doc-margin + 40px; } .search-icon { position:fixed; width:20px; - height:$search-icon-height; + height:$icon-height; left: $doc-margin; - top: $top-bar-height+($search-bar-height - $search-icon-height)/2; + top: $three-baselines+($four-baselines - $icon-height)/2; } input { diff --git a/res/css/partials/task-alert.scss b/res/css/partials/task-alert.scss index b10d4805..02ddc202 100644 --- a/res/css/partials/task-alert.scss +++ b/res/css/partials/task-alert.scss @@ -1,7 +1,7 @@ .task-alert{ position:relative; width: 100%; - height:$task-alert-height; + height:$four-baselines; background-color: $light-cyan; color: $darker-cyan; border-top: 1px solid $dark-cyan; @@ -12,21 +12,21 @@ .task-desc{ position:fixed; width:100%; - height: $task-desc-height; - top: $top-bar-height + $search-bar-height + ($task-alert-height - $task-desc-height)/2; + height: $icon-height; + top: $three-baselines + $four-baselines + ($four-baselines - $icon-height)/2; text-align: center; font-size: $h3-size; } .task-close-text { position:fixed; - top: $top-bar-height + $search-bar-height + ($task-alert-height - $task-desc-height)/2 + 1 ; + top: $three-baselines + $four-baselines + ($four-baselines - $icon-height)/2 + 1 ; right: 70px; font-size: $h4-size; } .task-close-button { position: fixed; - top: $top-bar-height + $search-bar-height + ($task-alert-height - $task-desc-height)/2; + top: $three-baselines + $four-baselines + ($four-baselines - $icon-height)/2; right: 50px; -}
\ No newline at end of file +}
\ No newline at end of file diff --git a/res/css/partials/top-bar.scss b/res/css/partials/top-bar.scss index 85961d41..a04fdb77 100644 --- a/res/css/partials/top-bar.scss +++ b/res/css/partials/top-bar.scss @@ -3,7 +3,7 @@ top:0; left:0; width:100%; - min-height:$top-bar-height; + min-height:$three-baselines; background-color:$dark-grey; } diff --git a/res/css/style.css b/res/css/style.css index a27faa3d..c29a6b65 100644 --- a/res/css/style.css +++ b/res/css/style.css @@ -11,6 +11,8 @@ /* IE9 Compat Modes */ src: url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.woff") format("woff"), url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.ttf") format("truetype"); /* Safari, Android, iOS */ } +/* Vertical spacing */ +/* Horizontal spacing */ html, body { height: 100%; font-family: "Source_Regular", sans-serif; } @@ -283,15 +285,17 @@ table { height: inherit; font-size: 17px; } +.input-container { + position: relative; + margin: 24px 0 0 70px; } + .input-container form { + display: inline; } + .input-bar { font-family: "Source_Regular", sans-serif; color: #919095; - position: fixed; - display: block; height: 36px; width: 420px; - top: 152px; - left: 70px; padding-left: 8px; border-radius: 4px; border: 1px solid #919095; @@ -308,11 +312,11 @@ table { color: #919095; } .add-button { - position: fixed; - top: 154px; - height: 36px; - width: 36px; - left: 453px; } + position: relative; + height: 30px; + width: 30px; + left: -38px; + top: 10px; } .suggestion { list-style-type: none; } @@ -388,8 +392,8 @@ input { position: relative; width: 100%; height: 48px; - background-color: #D3F2F8; - color: #1D6E7F; + background-color: #d3f2f8; + color: #1d6e7f; border-top: 1px solid #8eb6bf; border-bottom: 1px solid #8eb6bf; z-index: 1; } @@ -478,5 +482,3 @@ h2 { h1 { font-size: 12px; } - -/*# sourceMappingURL=style.css.map */ |