From b69272756a3115db5455f4210ae768c78e8af1aa Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Wed, 27 May 2015 23:14:26 -0400 Subject: [PATCH 01/53] add new color --- app/styles/_variables_mixins.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/styles/_variables_mixins.scss b/app/styles/_variables_mixins.scss index 926a0482e4..2f8f3a330c 100644 --- a/app/styles/_variables_mixins.scss +++ b/app/styles/_variables_mixins.scss @@ -7,6 +7,7 @@ $navy: #2e4359; $navy_mid: #546a83; $navy_mid2: #3A4D63; $navy_drk: #253649; +$navy_drk2: #263648; $navy_text: #97afc8; $blue_light: #dbebff; $blue_light2: #e9f3ff; From 1227b105884ee6dc988892d48c4c8ad2c303abce Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Thu, 28 May 2015 11:10:59 -0400 Subject: [PATCH 02/53] derp correct that vertical alignment mixin --- app/styles/_variables_mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/styles/_variables_mixins.scss b/app/styles/_variables_mixins.scss index 2f8f3a330c..f24075b2d1 100644 --- a/app/styles/_variables_mixins.scss +++ b/app/styles/_variables_mixins.scss @@ -26,7 +26,7 @@ $gray: rgba($navy,.65); @mixin vertically_centered { position: relative; top: 50%; - margin-top: -50%; + transform: translateY(-50%) } @mixin transition($value) { From 6eee80c03eee49673b52995197520714fce7f793 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Thu, 28 May 2015 11:12:10 -0400 Subject: [PATCH 03/53] improve loading notice design --- app/index.html | 38 +++++----------- app/styles/app.scss | 92 +++++++++++++++++++++++++++++++++++++++ app/templates/loading.hbs | 15 ++++--- 3 files changed, 112 insertions(+), 33 deletions(-) diff --git a/app/index.html b/app/index.html index 35d378be23..eb22e93a45 100644 --- a/app/index.html +++ b/app/index.html @@ -15,36 +15,18 @@ {{content-for 'head-footer'}} -
- \ No newline at end of file diff --git a/app/templates/navigation.hbs b/app/templates/navigation.hbs index 3ab93fe5c7..0e989d7482 100644 --- a/app/templates/navigation.hbs +++ b/app/templates/navigation.hbs @@ -1,34 +1,33 @@ - From d941833ed07c20d1a35364dc39916e21f1e4bbc1 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Thu, 28 May 2015 17:06:04 -0400 Subject: [PATCH 09/53] restyle search form for sidebar context --- app/styles/_variables_mixins.scss | 1 + app/styles/app.scss | 178 ++++++++++++++++-------------- app/templates/navigation.hbs | 4 +- 3 files changed, 97 insertions(+), 86 deletions(-) diff --git a/app/styles/_variables_mixins.scss b/app/styles/_variables_mixins.scss index 1f5df79a05..572d70b975 100644 --- a/app/styles/_variables_mixins.scss +++ b/app/styles/_variables_mixins.scss @@ -20,6 +20,7 @@ $red_light: rgba($red,.3); $gray_light: #d9d9d9; $gray: rgba($navy,.65); $sidebar_icon: #92a7bc; +$sidebar_icon_lighter: #d2dae3; // end variables ------------/ diff --git a/app/styles/app.scss b/app/styles/app.scss index 2d768a3e0a..d414ea239b 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -227,45 +227,6 @@ body { background-color: $navy; } } } -.site-search-form { - margin: 13px 0; - - .form-group { - float: left; - } - - input { - height: 38px; - border-radius: 5px 0 0 5px; - padding: 6px 12px; - font-size: 18px; - font-weight: 300; - width: 78px; - @include transition(width); - - &:focus { width: 214px; } - } - - .btn { - background-color: #d2dae3; - border-radius: 0 5px 5px 0; - font-size: 18px; - width: 46px; - height: 38px; - text-shadow: none; - @include transition(opacity); - - &:hover { - opacity: .8; - } - - .glyphicon { - top: 2px; - right: 1px; - } - } -} - .jumbotron { background-color: #2e4359; @@ -294,9 +255,7 @@ body { background-color: $navy; } } } -.modal-dialog { - color: $navy; -} +.modal-dialog { color: $navy; } .form-signin { max-width: 300px; @@ -349,60 +308,113 @@ h1 { font-size: 24px; color: $sidebar_icon; } +} - .sidebar-nav-section { height: 55px; } +.sidebar-nav-section { height: 55px; } - .sidebar-nav-header { - background-color: $navy_mid2; - box-shadow: 0 1px 0 $navy_drkest; - } +// sidebar header - .sidebar-nav-logo { - display: inline-block; - height: 55px; - padding: 0 15px; +.sidebar-nav-header { + background-color: $navy_mid2; + box-shadow: 0 1px 0 $navy_drkest; +} - .logo-svg { - width: 150px; - position: relative; - top: 15px; - } - } +.sidebar-nav-logo { + display: inline-block; + height: 55px; + padding: 0 15px; - .settings-trigger { - float: right; - padding: 15px; + .logo-svg { + width: 150px; + position: relative; + top: 15px; } +} + +.settings-nav { + background-color: $blue_lightest; + border-radius: 5px; + position: absolute; + top: 48px; + right: 10px; + z-index: 10; + min-width: 130px; + display: none; - .settings-nav { - background-color: $blue_lightest; - border-radius: 5px; + &:before { + content: " "; + display: block; position: absolute; - top: 48px; + border-bottom: 7px solid $blue_lightest; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + top: -7px; right: 10px; - z-index: 10; - min-width: 130px; + } - &:before { - content: " "; - display: block; - position: absolute; - border-bottom: 7px solid $blue_lightest; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - top: -7px; - right: 10px; + > a { + border-top: 1px solid $blue_lightest2; + padding: 6px 10px; + display: block; + color: $navy_mid3; + font-size: 14px; + font-weight: 400; + + &:first-of-type { border-top: none; } + } +} + + +.settings-trigger { + float: right; + padding: 15px; + + &:hover + .settings-nav { + display: block; // temporary styles due to not having script setup yet to trigger + } +} + +// sidebar search + +.sidebar-nav-search { + padding: 10px 15px; + height: 58px; + + .form-group { float: left; } + + input { + height: 38px; + width: 198px; + border-radius: 5px 0 0 5px; + padding: 6px 12px; + font-size: 18px; + font-weight: 300; + background-color: $navy_mid; + color: white; + + &:focus { + background-color: white; + color: $navy; } + } - > a { - border-top: 1px solid $blue_lightest2; - padding: 6px 10px; - display: block; - color: $navy_mid3; - font-size: 14px; - font-weight: 400; + .btn { + background-color: $sidebar_icon; + color: $sidebar_icon_lighter; + border-radius: 0 5px 5px 0; + font-size: 18px; + width: 46px; + height: 38px; + text-shadow: none; + @include transition(opacity); - &:first-of-type { border-top: none; } + &:hover { + opacity: .8; + } + + .glyphicon { + top: 2px; + right: 1px; } } } diff --git a/app/templates/navigation.hbs b/app/templates/navigation.hbs index 0e989d7482..db3f50ebd6 100644 --- a/app/templates/navigation.hbs +++ b/app/templates/navigation.hbs @@ -8,8 +8,6 @@ From 0be44939db399201981fac34a7d53fc7d99f96d2 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Thu, 28 May 2015 21:39:37 -0400 Subject: [PATCH 11/53] linting, :fire: unused styles, & split up for maintainability --- app/styles/_base.scss | 7 + app/styles/_dashboard.scss | 161 ++++++++ app/styles/_layout.scss | 17 + app/styles/_loading_notice.scss | 92 +++++ app/styles/_sidebar_nav.scss | 130 +++++++ app/styles/_temp_misc.scss | 180 +++++++++ app/styles/app.scss | 649 +------------------------------- 7 files changed, 600 insertions(+), 636 deletions(-) create mode 100644 app/styles/_base.scss create mode 100644 app/styles/_dashboard.scss create mode 100644 app/styles/_layout.scss create mode 100644 app/styles/_loading_notice.scss create mode 100644 app/styles/_sidebar_nav.scss create mode 100644 app/styles/_temp_misc.scss diff --git a/app/styles/_base.scss b/app/styles/_base.scss new file mode 100644 index 0000000000..001b955c5c --- /dev/null +++ b/app/styles/_base.scss @@ -0,0 +1,7 @@ +body { background-color: $navy; } + +// change to $navy_drk2 once rest of UI elements are styled accordingly + +.ember-application { + padding-left: 275px; // to accomodate for .sidebar-nav +} diff --git a/app/styles/_dashboard.scss b/app/styles/_dashboard.scss new file mode 100644 index 0000000000..acce5ac666 --- /dev/null +++ b/app/styles/_dashboard.scss @@ -0,0 +1,161 @@ +// Index (dashboard) styles +// -------------------------------------------/ + +.index { + + .view-title { + text-align: center; + color: $navy_text; + font-weight: 300; + margin: 0; + padding: 12px 0; + line-height: 1; + background: $navy_mid2; + font-size: 28px; + } + + .splash-nav { + padding: 16px 12px 32px; + } + +} + +.nav-category { + background: $navy_drk; + padding: 14px 14px 10px; + color: white; + border-radius: 8px; + float: left; + width: 248px; + // min-height: 266px; + position: relative; + margin-right: 16px; + margin-bottom: 16px; + + .primary-section { + font-weight: 300; + font-size: 24px; + line-height: 1; + margin: 0; + padding-bottom: 14px; + } + + .primary-section-link { + color: white; + text-decoration: none; + + .mega-octicon { + font-size: 24px; + color: $navy_mid; + line-height: 27px; + margin-right: 5px; + } + + &:hover { color: $green; } + } + + .panel-options { + position: absolute; + top: 18px; + right: 14px; + z-index: 10; + + .hidden-link-list-trigger { + + &:hover, + &.active { + + .mega-octicon { color: $green; } + } + } + + .mega-octicon { + font-size: 16px; + color: $navy_mid; + } + } + + .hidden-link-list { + position: absolute; + display: none; + width: 160px; + background: white; + right: -7px; + top: 22px; + border-radius: 4px; + box-shadow: 0 1px 8px rgba($navy_drk, .8); + padding: 4px 6px; + + &.show { display: block; } + + &:before { + content: " "; + display: block; + width: 0; + height: 0; + border-bottom: 6px solid white; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + position: absolute; + top: -6px; + right: 8px; + } + + + > h4 { + font-weight: 300; + font-size: 14px; + color: $navy_text; + padding-bottom: 5px; + margin: 3px 0 8px; + text-align: center; + line-height: 1; + background: rgba($blue_light,.6); + padding: 3px; + border-radius: 3px; + } + + > a { + display: block; + font-size: 13px; + margin: 4px 0; + } + } + + .category-links { + height: 236px; + } + + .sub-section-link { + display: block; + background: $navy_mid2; + border-radius: 6px; + color: $navy_text; + font-weight: 300; + padding: 10px 14px; + margin-top: 10px; + font-size: 16px; + position: relative; + + &:first-of-type { margin-top: 0; } + + .octicon { + border-left: 1px solid rgba($navy_drk,.6); + padding: 15px 16px; + position: absolute; + top: 0; + right: 0; + width: 44px; + text-align: center; + color: $navy_text; + } + + &:hover { + text-decoration: none; + background: rgba($navy_mid2,.8); + color: $green; + + .octicon { color: $green; } + } + } +} \ No newline at end of file diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss new file mode 100644 index 0000000000..c655a638ab --- /dev/null +++ b/app/styles/_layout.scss @@ -0,0 +1,17 @@ +// layout styles +// -------------------------------------------/ + +.detail-section-content { + padding: 15px 0; + + .table { margin-top: -15px; } +} + +.table-header { + background-color: transparent; + + > th { + border-top: none !important; + font-weight: 300; + } +} \ No newline at end of file diff --git a/app/styles/_loading_notice.scss b/app/styles/_loading_notice.scss new file mode 100644 index 0000000000..af55e28926 --- /dev/null +++ b/app/styles/_loading_notice.scss @@ -0,0 +1,92 @@ +// Loading notice styles +// ------------------------------------------ + +.loading-notice { + text-align: center; + margin: 0 auto; + + .wrapper { + width: 140px; + border-radius: 10px; + background-color: $navy_drk2; + padding: 20px; + margin: 20px auto; + } + + &.apploading { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + bottom: 0; + right: 0; + + .wrapper { + position: relative; + top: 50%; + transform: translateY(-50%); + } + } + + .loading-text { + text-transform: uppercase; + font-weight: 300; + letter-spacing: 2px; + margin-bottom: 0; + } + + // adapted from @tobiasahlin's spinkit: http://tobiasahlin.com/spinkit/ + .spinner { + width: 50px; + margin: 0 auto 10px; + height: 40px; + text-align: center; + font-size: 10px; + + > div { + background-color: $green; + height: 100%; + width: 6px; + display: inline-block; + margin-left: 3px; + border-radius: 50px; + -webkit-animation: stretchdelay 1.2s infinite ease-in-out; + animation: stretchdelay 1.2s infinite ease-in-out; + + &:first-child { margin-left: 0; } + } + + .rect2 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; + } + .rect3 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; + } + .rect4 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; + } + .rect5 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; + } + } +} + +@-webkit-keyframes stretchdelay { + 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } + 20% { -webkit-transform: scaleY(1.0) } +} + +@keyframes stretchdelay { + 0%, 40%, 100% { + transform: scaleY(0.4); + -webkit-transform: scaleY(0.4); + } 20% { + transform: scaleY(1.0); + -webkit-transform: scaleY(1.0); + } +} diff --git a/app/styles/_sidebar_nav.scss b/app/styles/_sidebar_nav.scss new file mode 100644 index 0000000000..bb84b4dd89 --- /dev/null +++ b/app/styles/_sidebar_nav.scss @@ -0,0 +1,130 @@ +// Sidebar nav +// -------------------------------------------/ + +.sidebar-nav { + position: fixed; + top: 0; + bottom: 0; + left: 0; + width: 275px; + display: block; + z-index: 1; + color: #fff; + font-weight: 300; + background-color: $navy_drk2; + box-shadow: 1px 0 0 $navy_drkest; + + .mega-octicon { + font-size: 24px; + color: $sidebar_icon; + } +} + +.sidebar-nav-section { height: 55px; } + +// sidebar header + +.sidebar-nav-header { + background-color: $navy_mid2; + box-shadow: 0 1px 0 $navy_drkest; +} + +.sidebar-nav-logo { + display: inline-block; + height: 55px; + padding: 0 15px; + + .logo-svg { + width: 150px; + position: relative; + top: 15px; + } +} + +.settings-nav { + background-color: $blue_lightest; + border-radius: 5px; + position: absolute; + top: 48px; + right: 10px; + z-index: 10; + min-width: 130px; + display: none; + + &:before { + content: " "; + display: block; + position: absolute; + border-bottom: 7px solid $blue_lightest; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + top: -7px; + right: 10px; + } + + > a { + border-top: 1px solid $blue_lightest2; + padding: 6px 10px; + display: block; + color: $navy_mid3; + font-size: 14px; + font-weight: 400; + + &:first-of-type { border-top: none; } + } +} + + +.settings-trigger { + float: right; + padding: 15px; + + &:hover + .settings-nav { + display: block; // temporary styles due to not having script setup yet to trigger + } +} + +// sidebar search + +.sidebar-nav-search { + padding: 10px 15px; + height: 58px; + + .form-group { float: left; } + + input { + height: 38px; + width: 198px; + border-radius: 5px 0 0 5px; + padding: 6px 12px; + font-size: 18px; + font-weight: 300; + background-color: $navy_mid; + color: white; + + &:focus { + background-color: white; + color: $navy; + } + } + + .btn { + background-color: $sidebar_icon; + color: $sidebar_icon_lighter; + border-radius: 0 5px 5px 0; + font-size: 18px; + width: 46px; + height: 38px; + text-shadow: none; + @include transition(opacity); + + &:hover { + opacity: .8; + } + + .glyphicon { + top: 2px; + right: 1px; + } + } +} diff --git a/app/styles/_temp_misc.scss b/app/styles/_temp_misc.scss new file mode 100644 index 0000000000..f0d8aa04a8 --- /dev/null +++ b/app/styles/_temp_misc.scss @@ -0,0 +1,180 @@ +.screen-button, +.screen-title { margin: 20px 0 10px 20px; } + +.panel-heading { + .nav { + margin-top: 20px; + margin-left: 20px; + } +} + +h3.panel-title { + font-size: 24px; +} + +.nav-pills > li > a { + color: #00bd9c; +} + +.panel-heading .nav-pills > li.active > a { + background-color: #3b5268;; +} + +.table-header { + background-color: #e9f3ff; + color: #8794a4; +} + +.twitter-typeahead { + width: 100%; + .tt-query, .tt-hint { + margin-bottom: 0; + } +} + +.tt-dropdown-menu { + min-width: 160px; + margin-top: 2px; + padding: 5px 0; + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + *border-right-width: 2px; + *border-bottom-width: 2px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + width: 100%; +} + +.tt-suggestion { + display: block; + padding: 3px 20px; + &.tt-is-under-cursor { + color: #fff; + background-color: #0081c2; + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); + a { + color: #fff; + } + } + p { + margin: 0; + } +} + +//Scrollable typeahead +.scrollable-typeahead .tt-dropdown-menu { + max-height: 200px; + overflow-y: auto; +} + +.tt-dropdown-menu .query-results { + margin-bottom: 0; +} + +.jumbotron { + background-color: #2e4359; + + h1 { + font-weight: 100; + text-align: center; + letter-spacing: -3px; + word-spacing: 8px; + margin: 20px 0; + } +} + +.container { + label { font-weight: 300; } +} + +.panel-primary { + color: $navy; + background-color: white; + border: none; + + input, + textarea, + select { + background: rgba($blue_light,.2); + } +} + +.modal-dialog { color: $navy; } + +.form-signin { + max-width: 300px; + margin: 0 auto 0; + + .form-signin-heading { + font-weight: 300; + text-transform: uppercase; + letter-spacing: 2px; + text-align: center; + border-bottom: 2px solid $navy_drk; + padding-bottom: 20px; + margin-bottom: 26px; + } +} + +h1 { + + &.pull-left { + font-weight: 300; + letter-spacing: -1px; + } +} + +.not-editable { + background-color: rgba($gray_light,.5); + opacity: .5; + cursor: default; +} + +// mark input fields as required +.required { + .control-label:after { + content:"*"; + color:red; + } +} + +.input-group-addon { + border: 0; + background-color: white; +} + +//Loading icon from http://www.bootply.com/128062 +.glyphicon-refresh-animate { + -animation: spin .7s infinite linear; + -webkit-animation: spin2 .7s infinite linear; +} + +@-webkit-keyframes spin2 { + from { -webkit-transform: rotate(0deg);} + to { -webkit-transform: rotate(360deg);} +} + +@keyframes spin { + from { transform: scale(1) rotate(0deg);} + to { transform: scale(1) rotate(360deg);} +} + +@media print { + body { font-size: 10px; } + + .panel-footer { display: none; } +} diff --git a/app/styles/app.scss b/app/styles/app.scss index d414ea239b..0307e839ff 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -2,639 +2,16 @@ @import "bootstrap"; @import "bootstrap-theme"; @import "typography"; - -@keyframes domChanged { - from { - margin-left: 100%; - width: 300%; - } - to { - margin-left: 0%; - width: 100%; - } -} - - -@-webkit-keyframes domChanged { - from { - margin-left: 100%; - width: 300%; - } - to { - margin-left: 0%; - width: 100%; - } -} - - -/*.ember-view { animation: domChanged 1s; -webkit-animation: domChanged 1s; }*/ - -.panel-primary { - // commenting out until we can sort out best flow for transition - // animation: domChanged 1s; - // -webkit-animation: domChanged 1s; -} - -.screen-button, .screen-title { - margin: 20px 0 10px 20px; -} - -.panel-heading { - .nav { - margin-top: 20px; - margin-left: 20px; - } -} - -h3.panel-title { - font-size: 24px; -} - -.nav-pills > li > a { - color: #00bd9c; -} - -.panel-heading .nav-pills > li.active > a { - background-color: #3b5268;; -} - -.table-header { - background-color: #e9f3ff; - color: #8794a4; -} - -.twitter-typeahead { - width: 100%; - .tt-query, .tt-hint { - margin-bottom: 0; - } -} - -.tt-dropdown-menu { - min-width: 160px; - margin-top: 2px; - padding: 5px 0; - background-color: #fff; - border: 1px solid #ccc; - border: 1px solid rgba(0, 0, 0, 0.2); - *border-right-width: 2px; - *border-bottom-width: 2px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; - width: 100%; -} - -.tt-suggestion { - display: block; - padding: 3px 20px; - &.tt-is-under-cursor { - color: #fff; - background-color: #0081c2; - background-image: -moz-linear-gradient(top, #0088cc, #0077b3); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); - background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); - background-image: -o-linear-gradient(top, #0088cc, #0077b3); - background-image: linear-gradient(to bottom, #0088cc, #0077b3); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); - a { - color: #fff; - } - } - p { - margin: 0; - } -} - -//Scrollable typeahead -.scrollable-typeahead .tt-dropdown-menu { - max-height: 200px; - overflow-y: auto; -} - -.tt-dropdown-menu .query-results { - margin-bottom: 0; -} - -// jglovier's temporary style tweaks -// -------------------------------------------/ - -body { background-color: $navy; } - -// change to $navy_drk2 once rest of UI elements are styled accordingly - -.ember-application { - padding-left: 275px; // to accomodate for .sidebar-nav -} - -// Loading notice styles -// ------------------------------------------ - -.loading-notice { - text-align: center; - margin: 0 auto; - - .wrapper { - width: 140px; - border-radius: 10px; - background-color: $navy_drk2; - padding: 20px; - margin: 20px auto; - } - - &.apploading { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - bottom: 0; - right: 0; - - .wrapper { - position: relative; - top: 50%; - transform: translateY(-50%); - } - } - - .loading-text { - text-transform: uppercase; - font-weight: 300; - letter-spacing: 2px; - margin-bottom: 0; - } - - // adapted from @tobiasahlin's spinkit: http://tobiasahlin.com/spinkit/ - .spinner { - width: 50px; - margin: 0 auto 10px; - height: 40px; - text-align: center; - font-size: 10px; - - > div { - background-color: $green; - height: 100%; - width: 6px; - display: inline-block; - margin-left: 3px; - border-radius: 50px; - -webkit-animation: stretchdelay 1.2s infinite ease-in-out; - animation: stretchdelay 1.2s infinite ease-in-out; - - &:first-child { margin-left: 0; } - } - - .rect2 { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; - } - .rect3 { - -webkit-animation-delay: -1.0s; - animation-delay: -1.0s; - } - .rect4 { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; - } - .rect5 { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; - } - } -} - -@-webkit-keyframes stretchdelay { - 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } - 20% { -webkit-transform: scaleY(1.0) } -} - -@keyframes stretchdelay { - 0%, 40%, 100% { - transform: scaleY(0.4); - -webkit-transform: scaleY(0.4); - } 20% { - transform: scaleY(1.0); - -webkit-transform: scaleY(1.0); - } -} - -.jumbotron { - background-color: #2e4359; - - h1 { - font-weight: 100; - text-align: center; - letter-spacing: -3px; - word-spacing: 8px; - margin: 20px 0; - } -} - -.container { - label { font-weight: 300; } -} - -.panel-primary { - color: $navy; - background-color: white; - border: none; - - input, - textarea, - select { - background: rgba($blue_light,.2); - } -} - -.modal-dialog { color: $navy; } - -.form-signin { - max-width: 300px; - margin: 0 auto 0; - - .form-signin-heading { - font-weight: 300; - text-transform: uppercase; - letter-spacing: 2px; - text-align: center; - border-bottom: 2px solid $navy_drk; - padding-bottom: 20px; - margin-bottom: 26px; - } -} - -h1 { - - &.pull-left { - font-weight: 300; - letter-spacing: -1px; - } -} - -.not-editable { - background-color: rgba($gray_light,.5); - opacity: .5; - cursor: default; -} - -// end temp style tweaks ------------/ - -// Sidebar nav -// -------------------------------------------/ - -.sidebar-nav { - position: fixed; - top: 0; - bottom: 0; - left: 0; - width: 275px; - display: block; - z-index: 1; - color: #fff; - font-weight: 300; - background-color: $navy_drk2; - box-shadow: 1px 0 0 $navy_drkest; - - .mega-octicon { - font-size: 24px; - color: $sidebar_icon; - } -} - -.sidebar-nav-section { height: 55px; } - -// sidebar header - -.sidebar-nav-header { - background-color: $navy_mid2; - box-shadow: 0 1px 0 $navy_drkest; -} - -.sidebar-nav-logo { - display: inline-block; - height: 55px; - padding: 0 15px; - - .logo-svg { - width: 150px; - position: relative; - top: 15px; - } -} - -.settings-nav { - background-color: $blue_lightest; - border-radius: 5px; - position: absolute; - top: 48px; - right: 10px; - z-index: 10; - min-width: 130px; - display: none; - - &:before { - content: " "; - display: block; - position: absolute; - border-bottom: 7px solid $blue_lightest; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - top: -7px; - right: 10px; - } - - > a { - border-top: 1px solid $blue_lightest2; - padding: 6px 10px; - display: block; - color: $navy_mid3; - font-size: 14px; - font-weight: 400; - - &:first-of-type { border-top: none; } - } -} - - -.settings-trigger { - float: right; - padding: 15px; - - &:hover + .settings-nav { - display: block; // temporary styles due to not having script setup yet to trigger - } -} - -// sidebar search - -.sidebar-nav-search { - padding: 10px 15px; - height: 58px; - - .form-group { float: left; } - - input { - height: 38px; - width: 198px; - border-radius: 5px 0 0 5px; - padding: 6px 12px; - font-size: 18px; - font-weight: 300; - background-color: $navy_mid; - color: white; - - &:focus { - background-color: white; - color: $navy; - } - } - - .btn { - background-color: $sidebar_icon; - color: $sidebar_icon_lighter; - border-radius: 0 5px 5px 0; - font-size: 18px; - width: 46px; - height: 38px; - text-shadow: none; - @include transition(opacity); - - &:hover { - opacity: .8; - } - - .glyphicon { - top: 2px; - right: 1px; - } - } -} - -// Index (dashboard) styles -// -------------------------------------------/ - -.index { - - .view-title { - text-align: center; - color: $navy_text; - font-weight: 300; - margin: 0; - padding: 12px 0; - line-height: 1; - background: $navy_mid2; - font-size: 28px; - } - - .splash-nav { - padding: 16px 12px 32px; - } - -} - -.nav-category { - background: $navy_drk; - padding: 14px 14px 10px; - color: white; - border-radius: 8px; - float: left; - width: 248px; - // min-height: 266px; - position: relative; - margin-right: 16px; - margin-bottom: 16px; - - .primary-section { - font-weight: 300; - font-size: 24px; - line-height: 1; - margin: 0; - padding-bottom: 14px; - } - - .primary-section-link { - color: white; - text-decoration: none; - - .mega-octicon { - font-size: 24px; - color: $navy_mid; - line-height: 27px; - margin-right: 5px; - } - - &:hover { color: $green; } - } - - .panel-options { - position: absolute; - top: 18px; - right: 14px; - z-index: 10; - - .hidden-link-list-trigger { - - &:hover, - &.active { - - .mega-octicon { color: $green; } - } - } - - .mega-octicon { - font-size: 16px; - color: $navy_mid; - } - } - - .hidden-link-list { - position: absolute; - display: none; - width: 160px; - background: white; - right: -7px; - top: 22px; - border-radius: 4px; - box-shadow: 0 1px 8px rgba($navy_drk, .8); - padding: 4px 6px; - - &.show { display: block; } - - &:before { - content: " "; - display: block; - width: 0; - height: 0; - border-bottom: 6px solid white; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - position: absolute; - top: -6px; - right: 8px; - } - - - > h4 { - font-weight: 300; - font-size: 14px; - color: $navy_text; - padding-bottom: 5px; - margin: 3px 0 8px; - text-align: center; - line-height: 1; - background: rgba($blue_light,.6); - padding: 3px; - border-radius: 3px; - } - - > a { - display: block; - font-size: 13px; - margin: 4px 0; - } - } - - .category-links { - height: 236px; - } - - .sub-section-link { - display: block; - background: $navy_mid2; - border-radius: 6px; - color: $navy_text; - font-weight: 300; - padding: 10px 14px; - margin-top: 10px; - font-size: 16px; - position: relative; - - &:first-of-type { margin-top: 0; } - - .octicon { - border-left: 1px solid rgba($navy_drk,.6); - padding: 15px 16px; - position: absolute; - top: 0; - right: 0; - width: 44px; - text-align: center; - color: $navy_text; - } - - &:hover { - text-decoration: none; - background: rgba($navy_mid2,.8); - color: $green; - - .octicon { color: $green; } - } - } -} - - -// end index styles ------------/ - -// layout styles -// -------------------------------------------/ - -.detail-section-content { - padding: 15px 0; - - .table { margin-top: -15px; } -} - -.table-header { - background-color: transparent; - - > th { - border-top: none !important; - font-weight: 300; - } -} - -// end layout styles ------------/ - -// mark input fields as required -.required { - .control-label:after { - content:"*"; - color:red; - } -} - -.input-group-addon { - border: 0; - background-color: white; -} - -//Loading icon from http://www.bootply.com/128062 -.glyphicon-refresh-animate { - -animation: spin .7s infinite linear; - -webkit-animation: spin2 .7s infinite linear; -} - -@-webkit-keyframes spin2 { - from { -webkit-transform: rotate(0deg);} - to { -webkit-transform: rotate(360deg);} -} - -@keyframes spin { - from { transform: scale(1) rotate(0deg);} - to { transform: scale(1) rotate(360deg);} -} - -@media print { - body { font-size: 10px; } - - .panel-footer { display: none; } -} +@import "base"; +@import "layout"; +@import "temp_misc"; +@import "loading_notice"; +@import "sidebar_nav"; +@import "dashboard"; + +// NOTE: do not place styles in this file +// If you have styles to add, put them in +// the appropriate imported stylesheet, or +// create a new one; or if you're not sure +// where it should go, just drop it in +// _temp_misc.scss for now \ No newline at end of file From 5e5db9b9ccff47a14bf05d4e9bb20e90e573dc06 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Thu, 28 May 2015 21:50:00 -0400 Subject: [PATCH 12/53] tweak sign in styles :wrench: --- app/styles/_loading_notice.scss | 2 +- app/styles/_sign_in_screen.scss | 18 ++++++++++++++++++ app/styles/_temp_misc.scss | 14 -------------- app/styles/app.scss | 1 + 4 files changed, 20 insertions(+), 15 deletions(-) create mode 100644 app/styles/_sign_in_screen.scss diff --git a/app/styles/_loading_notice.scss b/app/styles/_loading_notice.scss index af55e28926..06ff8d40f6 100644 --- a/app/styles/_loading_notice.scss +++ b/app/styles/_loading_notice.scss @@ -14,7 +14,7 @@ } &.apploading { - position: fixed; + position: absolute; width: 100%; height: 100%; top: 0; diff --git a/app/styles/_sign_in_screen.scss b/app/styles/_sign_in_screen.scss new file mode 100644 index 0000000000..b6202ca01c --- /dev/null +++ b/app/styles/_sign_in_screen.scss @@ -0,0 +1,18 @@ +.form-signin { + max-width: 300px; + margin: 0 auto; + position: absolute; + top: 50%; + transform: translateY(-165px); + left: 50%; + + .form-signin-heading { + font-weight: 300; + text-transform: uppercase; + letter-spacing: 2px; + text-align: center; + border-bottom: 2px solid $navy_drk; + padding-bottom: 20px; + margin-bottom: 26px; + } +} \ No newline at end of file diff --git a/app/styles/_temp_misc.scss b/app/styles/_temp_misc.scss index f0d8aa04a8..6c5a607018 100644 --- a/app/styles/_temp_misc.scss +++ b/app/styles/_temp_misc.scss @@ -115,20 +115,6 @@ h3.panel-title { .modal-dialog { color: $navy; } -.form-signin { - max-width: 300px; - margin: 0 auto 0; - - .form-signin-heading { - font-weight: 300; - text-transform: uppercase; - letter-spacing: 2px; - text-align: center; - border-bottom: 2px solid $navy_drk; - padding-bottom: 20px; - margin-bottom: 26px; - } -} h1 { diff --git a/app/styles/app.scss b/app/styles/app.scss index 0307e839ff..14417b7bf0 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -5,6 +5,7 @@ @import "base"; @import "layout"; @import "temp_misc"; +@import "sign_in_screen"; @import "loading_notice"; @import "sidebar_nav"; @import "dashboard"; From 92f200f6dee67565313f8be13a8ff2507c75e84f Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Thu, 28 May 2015 22:17:54 -0400 Subject: [PATCH 13/53] fix up loading notice styles --- app/styles/_loading_notice.scss | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/app/styles/_loading_notice.scss b/app/styles/_loading_notice.scss index 06ff8d40f6..d77e4f9b47 100644 --- a/app/styles/_loading_notice.scss +++ b/app/styles/_loading_notice.scss @@ -4,29 +4,28 @@ .loading-notice { text-align: center; margin: 0 auto; + position: absolute; + height: 100%; + width: calc(100% - 275px); + top: 0; + bottom: 0; + right: 0; + z-index: 99; .wrapper { width: 140px; border-radius: 10px; background-color: $navy_drk2; padding: 20px; - margin: 20px auto; + margin: 0 auto; + position: relative; + top: 50%; + transform: translateY(-50%); } &.apploading { - position: absolute; width: 100%; - height: 100%; - top: 0; left: 0; - bottom: 0; - right: 0; - - .wrapper { - position: relative; - top: 50%; - transform: translateY(-50%); - } } .loading-text { From d611918df316045ed4d9b94ef1fd412746c549bf Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Thu, 28 May 2015 22:26:15 -0400 Subject: [PATCH 14/53] style search form placeholder text --- app/styles/_sidebar_nav.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/app/styles/_sidebar_nav.scss b/app/styles/_sidebar_nav.scss index bb84b4dd89..8eb40ed5eb 100644 --- a/app/styles/_sidebar_nav.scss +++ b/app/styles/_sidebar_nav.scss @@ -100,12 +100,11 @@ font-size: 18px; font-weight: 300; background-color: $navy_mid; - color: white; + color: $navy; - &:focus { - background-color: white; - color: $navy; - } + &::-webkit-input-placeholder { color: $sidebar_icon; } + + &:focus { background-color: white; } } .btn { From 7c3581659db9f8ebdc4855a45c16fc0f3b403760 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Thu, 28 May 2015 23:34:11 -0400 Subject: [PATCH 15/53] start moving nav categories into sidebar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @jkleinsc I’m running into an issue where the category I put into the sidebar isn’t rendering there. Is that expected? What do I need to modify to make it render in the new location (navigation.hbs)? --- app/templates/index.hbs | 47 +---------------------- app/templates/navigation.hbs | 27 ++----------- app/templates/sidebar_nav/header.hbs | 15 ++++++++ app/templates/sidebar_nav/primary_nav.hbs | 43 +++++++++++++++++++++ app/templates/sidebar_nav/search.hbs | 8 ++++ 5 files changed, 70 insertions(+), 70 deletions(-) create mode 100644 app/templates/sidebar_nav/header.hbs create mode 100644 app/templates/sidebar_nav/primary_nav.hbs create mode 100644 app/templates/sidebar_nav/search.hbs diff --git a/app/templates/index.hbs b/app/templates/index.hbs index d74bdef47c..1a150ffdef 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -3,52 +3,7 @@

What would you like to do?

- {{#if userCan_inventory}} -
-
-

- {{#link-to 'inventory' class="primary-section-link" }} - - Inventory - {{/link-to}} -

-
- - - - -
-
- -
- {{/if}} + {{#if userCan_patients}}
diff --git a/app/templates/navigation.hbs b/app/templates/navigation.hbs index e5c8560a25..84fd017a74 100644 --- a/app/templates/navigation.hbs +++ b/app/templates/navigation.hbs @@ -1,31 +1,10 @@