From 690e08d46ca3aebf3f02704b412a05e81fe59d59 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 14 Nov 2016 12:40:25 -0500 Subject: [PATCH 01/10] move button styles to correct component sheet --- app/styles/_bootstrap-theme.scss | 144 ---------------------------- app/styles/components/_buttons.scss | 143 +++++++++++++++++++++++++++ 2 files changed, 143 insertions(+), 144 deletions(-) diff --git a/app/styles/_bootstrap-theme.scss b/app/styles/_bootstrap-theme.scss index bf9bf13ee9..5ba1d177c0 100644 --- a/app/styles/_bootstrap-theme.scss +++ b/app/styles/_bootstrap-theme.scss @@ -1,149 +1,5 @@ // BOOTSTRAP-THEME // Bootstrap v3.1.1 (http://getbootstrap.com) - -.btn { - &.on-white { - background-color: $blue_light; - color: $navy; - } - - &.warning { - background-color: $red_light; - color: $red; - - &:hover, - &:focus { - background-color: $red; - color: $white; - } - } - - &.neutral { - background-color: $gray_light; - color: $gray; - - &:hover, - &:focus { opacity: .8; } - } - - &.admit { - width: 103px; - } - - .octicon { - position: relative; - left: -3px; - } - - &.align-right { float: right; } - &.align-left { float: left; } -} - -.btn-default { - border: 0; - border-radius: 3px; - background-color: $green; - - &:hover, - &:focus { background-color: $green_light; } -} - -.btn-primary { - background-color: $green; - - // needs converted to variable - &:hover, - &:focus { background-color: #00c4a2; } - - // needs converted to variable - &:active, - &.active { background-color: #00cca8; } - - &.disabled-btn, - &.disabled:hover, - &[disabled]:hover, - &.disabled:focus, - &[disabled]:focus, - &.disabled:active, - &[disabled]:active { - opacity: .7; - background-color: $green; - color: $white; - } -} - -.btn-success { - border-color: #3e8f3e; - background-image: linear-gradient(to bottom,#5cb85c 0%,#419641 100%); - background-repeat: repeat-x; - - &:hover, - &:focus { - background-color: #419641; - background-position: 0 -15px; - } - - &:active, - &.active { - border-color: #3e8f3e; - background-color: #419641; - } -} - -.btn-info { - border-color: #28a4c9; - background-image: linear-gradient(to bottom,#5bc0de 0%,#2aabd2 100%); - background-repeat: repeat-x; - - &:hover, - &:focus { - background-color: #2aabd2; - background-position: 0 -15px; - } - - &:active, - &.active { - border-color: #28a4c9; - background-color: #2aabd2; - } -} - -.btn-warning { - border-color: #e38d13; - background-image: linear-gradient(to bottom,#f0ad4e 0%,#eb9316 100%); - background-repeat: repeat-x; - - &:hover, - &:focus { - background-color: #eb9316; - background-position: 0 -15px; - } - - &:active, - &.active { - border-color: #e38d13; - background-color: #eb9316; - } -} - -.btn-danger { - border-color: #b92c28; - background-image: linear-gradient(to bottom,#d9534f 0%,#c12e2a 100%); - background-repeat: repeat-x; - - &:hover, - &:focus { - background-color: #c12e2a; - background-position: 0 -15px; - } - - &:active, - &.active { - border-color: #b92c28; - background-color: #c12e2a; - } -} - .thumbnail, .img-thumbnail { box-shadow: 0 1px 2px rgba(0,0,0,.075); diff --git a/app/styles/components/_buttons.scss b/app/styles/components/_buttons.scss index a745f9097d..8ffddc3120 100644 --- a/app/styles/components/_buttons.scss +++ b/app/styles/components/_buttons.scss @@ -1,3 +1,146 @@ +.btn { + &.on-white { + background-color: $blue_light; + color: $navy; + } + + &.warning { + background-color: $red_light; + color: $red; + + &:hover, + &:focus { + background-color: $red; + color: $white; + } + } + + &.neutral { + background-color: $gray_light; + color: $gray; + + &:hover, + &:focus { opacity: .8; } + } + + &.admit { + width: 103px; + } + + .octicon { + position: relative; + left: -3px; + } + + &.align-right { float: right; } + &.align-left { float: left; } +} + +.btn-default { + border: 0; + border-radius: 3px; + background-color: $green; + + &:hover, + &:focus { background-color: $green_light; } +} + +.btn-primary { + background-color: $green; + + // needs converted to variable + &:hover, + &:focus { background-color: #00c4a2; } + + // needs converted to variable + &:active, + &.active { background-color: #00cca8; } + + &.disabled-btn, + &.disabled:hover, + &[disabled]:hover, + &.disabled:focus, + &[disabled]:focus, + &.disabled:active, + &[disabled]:active { + opacity: .7; + background-color: $green; + color: $white; + } +} + +.btn-success { + border-color: #3e8f3e; + background-image: linear-gradient(to bottom,#5cb85c 0%,#419641 100%); + background-repeat: repeat-x; + + &:hover, + &:focus { + background-color: #419641; + background-position: 0 -15px; + } + + &:active, + &.active { + border-color: #3e8f3e; + background-color: #419641; + } +} + +.btn-info { + border-color: #28a4c9; + background-image: linear-gradient(to bottom,#5bc0de 0%,#2aabd2 100%); + background-repeat: repeat-x; + + &:hover, + &:focus { + background-color: #2aabd2; + background-position: 0 -15px; + } + + &:active, + &.active { + border-color: #28a4c9; + background-color: #2aabd2; + } +} + +.btn-warning { + border-color: #e38d13; + background-image: linear-gradient(to bottom,#f0ad4e 0%,#eb9316 100%); + background-repeat: repeat-x; + + &:hover, + &:focus { + background-color: #eb9316; + background-position: 0 -15px; + } + + &:active, + &.active { + border-color: #e38d13; + background-color: #eb9316; + } +} + +.btn-danger { + border-color: #b92c28; + background-image: linear-gradient(to bottom,#d9534f 0%,#c12e2a 100%); + background-repeat: repeat-x; + + &:hover, + &:focus { + background-color: #c12e2a; + background-position: 0 -15px; + } + + &:active, + &.active { + border-color: #b92c28; + background-color: #c12e2a; + } +} + // Loading icon from http://www.bootply.com/128062 .glyphicon-refresh-animate { -webkit-animation: spin2 .7s infinite linear; From c2259296535dedee1ce8381ae7019d174c579e23 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 14 Nov 2016 12:42:46 -0500 Subject: [PATCH 02/10] extract alert and progress to partials --- app/styles/_bootstrap-theme.scss | 61 ------------------------ app/styles/components/_alert.scss | 30 ++++++++++++ app/styles/components/_progress-bar.scss | 29 +++++++++++ 3 files changed, 59 insertions(+), 61 deletions(-) create mode 100644 app/styles/components/_alert.scss create mode 100644 app/styles/components/_progress-bar.scss diff --git a/app/styles/_bootstrap-theme.scss b/app/styles/_bootstrap-theme.scss index 5ba1d177c0..7091baeeba 100644 --- a/app/styles/_bootstrap-theme.scss +++ b/app/styles/_bootstrap-theme.scss @@ -29,67 +29,6 @@ } } -.alert { - border: 0; - border-radius: 3px; - padding: 12px; -} - -.alert-success { - border-color: #b2dba1; - background-image: linear-gradient(to bottom,#dff0d8 0%,#c8e5bc 100%); - background-repeat: repeat-x; -} - -.alert-info { - border: 0; - box-shadow: none; - background: $alert_yellow; - text-shadow: none; - color: $alert_yellow_drk; -} - -.alert-warning { - border-color: #f5e79e; - background-image: linear-gradient(to bottom,#fcf8e3 0%,#f8efc0 100%); - background-repeat: repeat-x; -} - -.alert-danger { - background-color: $red_light; - color: $red_dark; -} - -.progress { - background-image: linear-gradient(to bottom,#ebebeb 0%,#f5f5f5 100%); - background-repeat: repeat-x; -} - -.progress-bar { - background-image: linear-gradient(to bottom,#428bca 0%,#3071a9 100%); - background-repeat: repeat-x; -} - -.progress-bar-success { - background-image: linear-gradient(to bottom,#5cb85c 0%,#449d44 100%); - background-repeat: repeat-x; -} - -.progress-bar-info { - background-image: linear-gradient(to bottom,#5bc0de 0%,#31b0d5 100%); - background-repeat: repeat-x; -} - -.progress-bar-warning { - background-image: linear-gradient(to bottom,#f0ad4e 0%,#ec971f 100%); - background-repeat: repeat-x; -} - -.progress-bar-danger { - background-image: linear-gradient(to bottom,#d9534f 0%,#c9302c 100%); - background-repeat: repeat-x; -} - .list-group { border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.075); diff --git a/app/styles/components/_alert.scss b/app/styles/components/_alert.scss new file mode 100644 index 0000000000..9b9616dc2e --- /dev/null +++ b/app/styles/components/_alert.scss @@ -0,0 +1,30 @@ +.alert { + border: 0; + border-radius: 3px; + padding: 12px; +} + +.alert-success { + border-color: #b2dba1; + background-image: linear-gradient(to bottom,#dff0d8 0%,#c8e5bc 100%); + background-repeat: repeat-x; +} + +.alert-info { + border: 0; + box-shadow: none; + background: $alert_yellow; + text-shadow: none; + color: $alert_yellow_drk; +} + +.alert-warning { + border-color: #f5e79e; + background-image: linear-gradient(to bottom,#fcf8e3 0%,#f8efc0 100%); + background-repeat: repeat-x; +} + +.alert-danger { + background-color: $red_light; + color: $red_dark; +} diff --git a/app/styles/components/_progress-bar.scss b/app/styles/components/_progress-bar.scss new file mode 100644 index 0000000000..c484faeac1 --- /dev/null +++ b/app/styles/components/_progress-bar.scss @@ -0,0 +1,29 @@ +.progress { + background-image: linear-gradient(to bottom,#ebebeb 0%,#f5f5f5 100%); + background-repeat: repeat-x; +} + +.progress-bar { + background-image: linear-gradient(to bottom,#428bca 0%,#3071a9 100%); + background-repeat: repeat-x; +} + +.progress-bar-success { + background-image: linear-gradient(to bottom,#5cb85c 0%,#449d44 100%); + background-repeat: repeat-x; +} + +.progress-bar-info { + background-image: linear-gradient(to bottom,#5bc0de 0%,#31b0d5 100%); + background-repeat: repeat-x; +} + +.progress-bar-warning { + background-image: linear-gradient(to bottom,#f0ad4e 0%,#ec971f 100%); + background-repeat: repeat-x; +} + +.progress-bar-danger { + background-image: linear-gradient(to bottom,#d9534f 0%,#c9302c 100%); + background-repeat: repeat-x; +} From 1c6884a0f99e332b59761507268f69cc3d54f3d4 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 14 Nov 2016 12:43:38 -0500 Subject: [PATCH 03/10] belongs in input styles --- app/styles/_bootstrap-theme.scss | 9 --------- app/styles/components/_form_styles.scss | 9 +++++++++ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/app/styles/_bootstrap-theme.scss b/app/styles/_bootstrap-theme.scss index 7091baeeba..18fed353d0 100644 --- a/app/styles/_bootstrap-theme.scss +++ b/app/styles/_bootstrap-theme.scss @@ -78,12 +78,3 @@ background-image: linear-gradient(to bottom,#e8e8e8 0%,#f5f5f5 100%); background-repeat: repeat-x; } - -.radio input[type='radio'], -.radio-inline input[type='radio'], -.checkbox input[type='checkbox'], -.checkbox-inline input[type='checkbox'] { margin-left: -18px; } - -.form-control { - border: 1px solid $blue_lightest2; -} diff --git a/app/styles/components/_form_styles.scss b/app/styles/components/_form_styles.scss index c61d8beaf2..c0e2f2763c 100644 --- a/app/styles/components/_form_styles.scss +++ b/app/styles/components/_form_styles.scss @@ -24,6 +24,15 @@ background-color: $white; } +.radio input[type='radio'], +.radio-inline input[type='radio'], +.checkbox input[type='checkbox'], +.checkbox-inline input[type='checkbox'] { margin-left: -18px; } + +.form-control { + border: 1px solid $blue_lightest2; +} + // I *think* this belongs here (extracting from // temp_styles), but not actually sure if we // even use this anymore From 447f6e3d4635a4483a98891b3ccda82e46380834 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 14 Nov 2016 12:44:16 -0500 Subject: [PATCH 04/10] move to layout styles --- app/styles/_bootstrap-theme.scss | 23 ----------------------- app/styles/_layout.scss | 25 ++++++++++++++++++++++++- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/app/styles/_bootstrap-theme.scss b/app/styles/_bootstrap-theme.scss index 18fed353d0..c179c354b9 100644 --- a/app/styles/_bootstrap-theme.scss +++ b/app/styles/_bootstrap-theme.scss @@ -49,29 +49,6 @@ } } -.panel-default { - border: 0; - border-radius: 0; - background-color: transparent; - - > { - .panel-heading { - border: 0; - border-radius: 0; - background-color: transparent; - padding: 0; - color: $navy; - } - } -} - -.panel-heading { - border-radius: 3px; - background-color: $blue_light2; - padding: 10px 15px; - color: $navy; -} - .well { border-color: #dcdcdc; box-shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss index edabaaa589..c9d69104bb 100644 --- a/app/styles/_layout.scss +++ b/app/styles/_layout.scss @@ -18,7 +18,30 @@ select { background: rgba($blue_light,.2); } } -// ? unsure what below are for... +.panel-default { + border: 0; + border-radius: 0; + background-color: transparent; + + > { + .panel-heading { + border: 0; + border-radius: 0; + background-color: transparent; + padding: 0; + color: $navy; + } + } +} + +.panel-heading { + border-radius: 3px; + background-color: $blue_light2; + padding: 10px 15px; + color: $navy; +} + +// ? unsure what below are for...needs cleanup .detail-section-content { padding: 15px 0; From f9be9b7e4c104d79487ff75afca9754e9a998d81 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 14 Nov 2016 12:44:56 -0500 Subject: [PATCH 05/10] move to partial --- app/styles/_bootstrap-theme.scss | 24 ------------------------ app/styles/components/_dropdown.scss | 23 +++++++++++++++++++++++ 2 files changed, 23 insertions(+), 24 deletions(-) create mode 100644 app/styles/components/_dropdown.scss diff --git a/app/styles/_bootstrap-theme.scss b/app/styles/_bootstrap-theme.scss index c179c354b9..cb503295e1 100644 --- a/app/styles/_bootstrap-theme.scss +++ b/app/styles/_bootstrap-theme.scss @@ -5,30 +5,6 @@ box-shadow: 0 1px 2px rgba(0,0,0,.075); } -.dropdown-menu > { - li > a { - &:hover, - &:focus { - background-color: #e8e8e8; - background-image: linear-gradient(to bottom,#f5f5f5 0%,#e8e8e8 100%); - background-repeat: repeat-x; - } - } - - .active > a { - background-color: #357ebd; - background-image: linear-gradient(to bottom,#428bca 0%,#357ebd 100%); - background-repeat: repeat-x; - - &:hover, - &:focus { - background-color: #357ebd; - background-image: linear-gradient(to bottom,#428bca 0%,#357ebd 100%); - background-repeat: repeat-x; - } - } -} - .list-group { border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.075); diff --git a/app/styles/components/_dropdown.scss b/app/styles/components/_dropdown.scss new file mode 100644 index 0000000000..d2af2fd7fe --- /dev/null +++ b/app/styles/components/_dropdown.scss @@ -0,0 +1,23 @@ +.dropdown-menu > { + li > a { + &:hover, + &:focus { + background-color: #e8e8e8; + background-image: linear-gradient(to bottom,#f5f5f5 0%,#e8e8e8 100%); + background-repeat: repeat-x; + } + } + + .active > a { + background-color: #357ebd; + background-image: linear-gradient(to bottom,#428bca 0%,#357ebd 100%); + background-repeat: repeat-x; + + &:hover, + &:focus { + background-color: #357ebd; + background-image: linear-gradient(to bottom,#428bca 0%,#357ebd 100%); + background-repeat: repeat-x; + } + } +} From c678ecfebc3afb18f30df8c3a5f59d81725e2f8e Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 14 Nov 2016 12:46:28 -0500 Subject: [PATCH 06/10] include new partials in index --- app/styles/app.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/styles/app.scss b/app/styles/app.scss index 0b9233671a..7ded45abf0 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -22,7 +22,9 @@ @import 'basscss/typography'; // Components +@import 'components/alert'; @import 'components/buttons'; +@import 'components/dropdown'; @import 'components/form_styles'; @import 'components/imaging'; @import 'components/labs'; @@ -31,6 +33,7 @@ @import 'components/panel'; @import 'components/patient_history'; @import 'components/patient_summary'; +@import 'components/progress-bar'; @import 'components/sidebar_nav'; @import 'components/tab_content'; @import 'components/tab_nav'; From 2da3c4184f5b046b20a22164f7da73cb135e3b30 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 14 Nov 2016 12:54:55 -0500 Subject: [PATCH 07/10] unused --- app/styles/_bootstrap-theme.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/app/styles/_bootstrap-theme.scss b/app/styles/_bootstrap-theme.scss index cb503295e1..1ae048eddb 100644 --- a/app/styles/_bootstrap-theme.scss +++ b/app/styles/_bootstrap-theme.scss @@ -24,10 +24,3 @@ text-shadow: 0 -1px 0 #3071a9; } } - -.well { - border-color: #dcdcdc; - box-shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); - background-image: linear-gradient(to bottom,#e8e8e8 0%,#f5f5f5 100%); - background-repeat: repeat-x; -} From 83e7818f124eae088154913311ce04dd1b96e2bb Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 14 Nov 2016 12:58:10 -0500 Subject: [PATCH 08/10] :fire: unused --- app/styles/_bootstrap-theme.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/app/styles/_bootstrap-theme.scss b/app/styles/_bootstrap-theme.scss index 1ae048eddb..df43d5f4c0 100644 --- a/app/styles/_bootstrap-theme.scss +++ b/app/styles/_bootstrap-theme.scss @@ -1,10 +1,5 @@ // BOOTSTRAP-THEME // Bootstrap v3.1.1 (http://getbootstrap.com) -.thumbnail, -.img-thumbnail { - box-shadow: 0 1px 2px rgba(0,0,0,.075); -} - .list-group { border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.075); From a7521aa5e60021e584f052645e552de5a59c0920 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 14 Nov 2016 12:59:07 -0500 Subject: [PATCH 09/10] :fire: more unused --- app/styles/_bootstrap-theme.scss | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/app/styles/_bootstrap-theme.scss b/app/styles/_bootstrap-theme.scss index df43d5f4c0..e69de29bb2 100644 --- a/app/styles/_bootstrap-theme.scss +++ b/app/styles/_bootstrap-theme.scss @@ -1,21 +0,0 @@ -// BOOTSTRAP-THEME -// Bootstrap v3.1.1 (http://getbootstrap.com) -.list-group { - border-radius: 4px; - box-shadow: 0 1px 2px rgba(0,0,0,.075); -} - -.list-group-item.active { - border-color: #3278b3; - background-image: linear-gradient(to bottom,#428bca 0%,#3278b3 100%); - background-repeat: repeat-x; - text-shadow: 0 -1px 0 #3071a9; - - &:hover, - &:focus { - border-color: #3278b3; - background-image: linear-gradient(to bottom,#428bca 0%,#3278b3 100%); - background-repeat: repeat-x; - text-shadow: 0 -1px 0 #3071a9; - } -} From 6d8eedcea087565fd838443e69a881c12a55b54b Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 14 Nov 2016 12:59:41 -0500 Subject: [PATCH 10/10] remove bootstrap theme file --- app/styles/_bootstrap-theme.scss | 0 app/styles/app.scss | 1 - 2 files changed, 1 deletion(-) delete mode 100644 app/styles/_bootstrap-theme.scss diff --git a/app/styles/_bootstrap-theme.scss b/app/styles/_bootstrap-theme.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/app/styles/app.scss b/app/styles/app.scss index 7ded45abf0..c29da4666d 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -1,7 +1,6 @@ // Base styles @import 'variables_mixins'; @import 'bootstrap'; -@import 'bootstrap-theme'; @import 'typography'; @import 'base'; @import 'layout';