From 8cba62b8d083cdd4fe164f928ab194551df1b5b1 Mon Sep 17 00:00:00 2001 From: Foley Lynn Date: Thu, 2 Mar 2017 16:43:49 -0800 Subject: [PATCH] DIV-112 added styling for progress side nav --- edivorce/apps/core/static/css/main.css | 2 +- edivorce/apps/core/static/css/main.scss | 84 ++++++++++++++++++++-- edivorce/apps/core/templates/base.html | 7 +- edivorce/apps/core/templates/progress.html | 60 ++++++++++++++++ 4 files changed, 145 insertions(+), 8 deletions(-) create mode 100644 edivorce/apps/core/templates/progress.html diff --git a/edivorce/apps/core/static/css/main.css b/edivorce/apps/core/static/css/main.css index 5799881b..877fb4c2 100644 --- a/edivorce/apps/core/static/css/main.css +++ b/edivorce/apps/core/static/css/main.css @@ -1 +1 @@ -@font-face{font-family:'Myriad-Pro';src:url("../fonts/MyriadWebPro.ttf");font-weight:normal;font-style:normal}body{font-family:Myriad-Pro,Calibri,Arial,Sans Serif;font-size:16px;line-height:24px;color:#494949;background:#ffffff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4{margin-top:0px;margin-bottom:10px}h1{font-weight:600;line-height:54px;color:#042553;margin-bottom:20px}h1 small{font-size:14px;font-weight:700;text-transform:uppercase;color:#042553;display:block;letter-spacing:.1em}h2{font-weight:600;font-size:24px;line-height:36px;color:#494949;margin-bottom:20px}h3{font-weight:400;font-size:28px;line-height:42px;color:#062652;margin-top:15px}h4{font-weight:600;font-size:18px;line-height:27px;color:#062652;text-transform:uppercase}a{color:#2b5580;text-decoration:none}a:hover,a:focus{color:#1e3c5a;text-decoration:underline;transition:color 0.1s ease}.intro{font-size:18px;line-height:28px}.container-wrapper{padding:40px 0}.container-wrapper:nth-child(odd){background:#fdfdfd}.container-wrapper:nth-child(odd) input{background:#ffffff}.bg-danger{padding:30px;border-radius:10px;margin-bottom:20px}@media (max-width: 991px){.container{width:100%;min-width:750px}}.tooltip-arrow{border-top-color:#062652}.tooltip.in{opacity:1}.tooltip-inner{text-align:left;background-color:#062652;padding:30px;font-size:16px;line-height:24px;max-width:400px;border-radius:10px}.tooltip-innerb{font-size:18px}.tooltip-inner a{color:#ffffff;text-decoration:underline}.tooltip-inner a:hover,.tooltip-inner a:focus{color:#d5d5d5}.tooltip-link{color:#062652;border-bottom:dotted 1px #062652;cursor:pointer}.collapse-trigger{margin-bottom:20px}.collapse-trigger>div{color:#062652;border-bottom:solid 1px #062652;display:inline;cursor:pointer}.collapse-trigger>div:after{font-family:FontAwesome;font-weight:normal;font-style:normal;display:inline-block;text-decoration:inherit;padding-left:10px;content:"\f077";transform-origin:65% 50%;transition:transform 0.2s linear}.collapse-trigger>div:hover,.collapse-trigger>div:focus{color:#1e3c5a;border-bottom:solid 1px #1e3c5a;transition:all 0.1s ease}.collapse-trigger.collapsed div:after{transform:rotate(-180deg);transform-style:preserve-3D;transform-origin:65% 50%}.collapse>div,.collapsing>div{margin-bottom:25px}i.fa{color:#2b5580}i.fa.circle{border-radius:50%;padding:10px;border:solid 1px #2b5580}i.fa.fa-question-circle{margin-left:5px}.btn-primary{font-size:18px;line-height:32px;border:none;border-radius:10px;line-height:32px;padding:6px 18px;background-color:#365ebe;color:#062652}.btn-primary:hover{background-color:#062652;color:#ffffff}a.btn+a.btn{margin-right:20px}a.btn>i.fa{padding-right:5px}a.btn:hover>i.fa{color:#ffffff}.btn-radio{color:#062652;background-color:#365ebe;border-color:#365ebe;font-size:18px;text-transform:uppercase;font-weight:600;line-height:45px;width:60px;height:60px;border-radius:30px;border:3px solid #365ebe}.btn-radio:hover,.btn-radio:focus,.btn-radio:active,.btn-radio.active,.open .dropdown-toggle.btn-radio{color:#FFFFFF;background-color:#2b5580;border:3px solid #365ebe}.btn-radio:active,.btn-radio.active,.open .dropdown-toggle.btn-radio{background-image:none}.btn-radio.disabled,.btn-radio[disabled],fieldset[disabled] .btn-radio,.btn-radio.disabled:hover,.btn-radio[disabled]:hover,fieldset[disabled] .btn-radio:hover,.btn-radio.disabled:focus,.btn-radio[disabled]:focus,fieldset[disabled] .btn-radio:focus,.btn-radio.disabled:active,.btn-radio[disabled]:active,fieldset[disabled] .btn-radio:active,.btn-radio.disabled.active,.btn-radio[disabled].active,fieldset[disabled] .btn-radio.active{background-color:#365ebe;border-color:#365ebe}.btn-radio+.btn-radio{margin-left:15px}.btn-radio-group{margin-bottom:20px}.btn-radio-group .btn.active.focus,.btn-radio-group .btn.active:focus,.btn-radio-group .btn.focus,.btn-radio-group .btn:active.focus,.btn-radio-group .btn:active:focus,.btn-radio-group .btn:focus{outline:none}.btn-radio-group .btn-radio-long{width:auto;white-space:normal;text-transform:none;align-items:center;line-height:1em;max-width:500px;display:inline-flex;text-align:left;padding:0 20px}input{border-radius:10px;color:#494949;padding:12px 15px;border:solid 1px #d5d5d5;line-height:1em}input:focus{outline:0;box-shadow:inset 0 1px 1px rgba(73,73,73,0.075),0 0 4px rgba(157,157,157,0.5)}input+i.fa{margin-left:10px}input.form-block{display:block;margin-bottom:10px}input.input-wide{width:50%}input.input-narrow{max-width:100px}input.input-inline{padding:5px 20px;border-radius:5px;margin-left:5px}textarea{width:100%;border-radius:10px;color:#494949;padding:12px 15px;border:solid 1px #d5d5d5;line-height:1em}#top_banner{background-color:#042553;border-bottom:2px solid #dea61b;padding:5px 20px 10px}#top_banner .top_banner-logo img{width:148px;height:auto;float:left}#top_banner p{color:#ffffff;font-size:16px;line-height:1em;margin-top:20px;margin-left:35px;float:left}#top_banner p .beta{border:solid 1px #ffffff;padding:4px 8px 3px;margin-left:10px;font-size:12px;text-transform:uppercase}#top_banner .top_banner-user{color:#fff;font-size:14px;float:right;margin-top:9px}#top_banner .top_banner-user a{color:#ffffff}#top_banner .top_banner-user a:hover,#top_banner .top_banner-user a:active{color:#fcfcfc}#mid_banner{background-color:#2b5580;font-size:14px;font-weight:600}#mid_banner .mid_banner-dash{float:left;margin-left:-20px}#mid_banner .mid_banner-dash a,#mid_banner .mid_banner-link a,#mid_banner .more_information-link a{padding:10px 20px;float:right;margin-left:20px}#mid_banner .mid_banner-dash a:hover,#mid_banner .mid_banner-dash a.active,#mid_banner .mid_banner-link a:hover,#mid_banner .mid_banner-link a.active,#mid_banner .more_information-link a:hover,#mid_banner .more_information-link a.active{color:#042553;background-color:#efefef;text-decoration:none}#mid_banner .mid_banner-dash a:hover i,#mid_banner .mid_banner-dash a.active i,#mid_banner .mid_banner-link a:hover i,#mid_banner .mid_banner-link a.active i,#mid_banner .more_information-link a:hover i,#mid_banner .more_information-link a.active i{color:#042553}#mid_banner i{color:#ffffff;padding:0 10px 0 0}#mid_banner a{color:#ffffff;text-decoration:none}#form_navigation{display:flex}#form_navigation form{margin-right:10px}.question-well{min-height:20px;padding:25px;margin-bottom:25px;border:1px solid #d5d5d5;border-radius:10px}.question-well.hasFocus{border:1px solid #042553}.row-flex{display:flex;flex-direction:row;flex-wrap:wrap;height:100%}.row-flex .col{flex:1 1 8%;margin:0 0 0.5rem 0;padding:0.5em 10px;box-sizing:border-box}.row-flex .content-column{flex-basis:100%;max-width:800px;padding:60px}.row-flex .progress-column{flex:0 0 262px;background-color:#efefef}.row-flex .more_information-column{flex:0 0 306px;background-color:#efefef;box-shadow:inset 0px 0px 10px 0px rgba(0,0,0,0.1);padding:45px 20px;font-size:14px;line-height:21px}.row-flex .more_information-column .more_information-close{float:right;font-size:24px;margin-top:3px;color:#042553}.row-flex .more_information-column h2{color:#042553;padding-right:25px} +@font-face{font-family:'Myriad-Pro';src:url("../fonts/MyriadWebPro.ttf");font-weight:normal;font-style:normal}body{font-family:Myriad-Pro,Calibri,Arial,Sans Serif;font-size:16px;line-height:24px;color:#494949;background:#ffffff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4{margin-top:0px;margin-bottom:10px}h1{font-weight:600;line-height:54px;color:#042553;margin-bottom:20px}h1 small{font-size:14px;font-weight:700;text-transform:uppercase;color:#042553;display:block;letter-spacing:.1em}h2{font-weight:600;font-size:24px;line-height:36px;color:#494949;margin-bottom:20px}h3{font-weight:400;font-size:28px;line-height:42px;color:#062652;margin-top:15px}h4{font-weight:600;font-size:18px;line-height:27px;color:#062652;text-transform:uppercase}a{color:#2b5580;text-decoration:none}a:hover,a:focus{color:#1e3c5a;text-decoration:underline;transition:color 0.1s ease}.intro{font-size:18px;line-height:28px}.footer{height:50px;background-color:#042553;color:#ffffff}.container-wrapper{padding:40px 0}.container-wrapper:nth-child(odd){background:#fdfdfd}.container-wrapper:nth-child(odd) input{background:#ffffff}.bg-danger{padding:30px;border-radius:10px;margin-bottom:20px}@media (max-width: 991px){.container{width:100%;min-width:750px}}.tooltip-arrow{border-top-color:#062652}.tooltip.in{opacity:1}.tooltip-inner{text-align:left;background-color:#062652;padding:30px;font-size:16px;line-height:24px;max-width:400px;border-radius:10px}.tooltip-innerb{font-size:18px}.tooltip-inner a{color:#ffffff;text-decoration:underline}.tooltip-inner a:hover,.tooltip-inner a:focus{color:#d5d5d5}.tooltip-link{color:#062652;border-bottom:dotted 1px #062652;cursor:pointer}.collapse-trigger{margin-bottom:20px}.collapse-trigger>div{color:#062652;border-bottom:solid 1px #062652;display:inline;cursor:pointer}.collapse-trigger>div:after{font-family:FontAwesome;font-weight:normal;font-style:normal;display:inline-block;text-decoration:inherit;padding-left:10px;content:"\f077";transform-origin:65% 50%;transition:transform 0.2s linear}.collapse-trigger>div:hover,.collapse-trigger>div:focus{color:#1e3c5a;border-bottom:solid 1px #1e3c5a;transition:all 0.1s ease}.collapse-trigger.collapsed div:after{transform:rotate(-180deg);transform-style:preserve-3D;transform-origin:65% 50%}.collapse>div,.collapsing>div{margin-bottom:25px}i.fa{color:#2b5580}i.fa.circle{border-radius:50%;padding:10px;border:solid 1px #2b5580}i.fa.fa-question-circle{margin-left:5px}.btn-primary{font-size:18px;line-height:32px;border:none;border-radius:10px;line-height:32px;padding:6px 18px;background-color:#365ebe;color:#062652}.btn-primary:hover{background-color:#062652;color:#ffffff}a.btn+a.btn{margin-right:20px}a.btn>i.fa{padding-right:5px}a.btn:hover>i.fa{color:#ffffff}.btn-radio{color:#062652;background-color:#365ebe;border-color:#365ebe;font-size:18px;text-transform:uppercase;font-weight:600;line-height:45px;width:60px;height:60px;border-radius:30px;border:3px solid #365ebe}.btn-radio:hover,.btn-radio:focus,.btn-radio:active,.btn-radio.active,.open .dropdown-toggle.btn-radio{color:#FFFFFF;background-color:#2b5580;border:3px solid #365ebe}.btn-radio:active,.btn-radio.active,.open .dropdown-toggle.btn-radio{background-image:none}.btn-radio.disabled,.btn-radio[disabled],fieldset[disabled] .btn-radio,.btn-radio.disabled:hover,.btn-radio[disabled]:hover,fieldset[disabled] .btn-radio:hover,.btn-radio.disabled:focus,.btn-radio[disabled]:focus,fieldset[disabled] .btn-radio:focus,.btn-radio.disabled:active,.btn-radio[disabled]:active,fieldset[disabled] .btn-radio:active,.btn-radio.disabled.active,.btn-radio[disabled].active,fieldset[disabled] .btn-radio.active{background-color:#365ebe;border-color:#365ebe}.btn-radio+.btn-radio{margin-left:15px}.btn-radio-group{margin-bottom:20px}.btn-radio-group .btn.active.focus,.btn-radio-group .btn.active:focus,.btn-radio-group .btn.focus,.btn-radio-group .btn:active.focus,.btn-radio-group .btn:active:focus,.btn-radio-group .btn:focus{outline:none}.btn-radio-group .btn-radio-long{width:auto;white-space:normal;text-transform:none;align-items:center;line-height:1em;max-width:500px;display:inline-flex;text-align:left;padding:0 20px}input{border-radius:10px;color:#494949;padding:12px 15px;border:solid 1px #d5d5d5;line-height:1em}input:focus{outline:0;box-shadow:inset 0 1px 1px rgba(73,73,73,0.075),0 0 4px rgba(157,157,157,0.5)}input+i.fa{margin-left:10px}input.form-block{display:block;margin-bottom:10px}input.input-wide{width:50%}input.input-narrow{max-width:100px}input.input-inline{padding:5px 20px;border-radius:5px;margin-left:5px}textarea{width:100%;border-radius:10px;color:#494949;padding:12px 15px;border:solid 1px #d5d5d5;line-height:1em}#top_banner{background-color:#042553;border-bottom:2px solid #dea61b;padding:5px 20px 10px}#top_banner .top_banner-logo img{width:148px;height:auto;float:left}#top_banner p{color:#ffffff;font-size:16px;line-height:1em;margin-top:20px;margin-left:35px;float:left}#top_banner p .beta{border:solid 1px #ffffff;padding:4px 8px 3px;margin-left:10px;font-size:12px;text-transform:uppercase}#top_banner .top_banner-user{color:#fff;font-size:14px;float:right;margin-top:9px}#top_banner .top_banner-user a{color:#ffffff}#top_banner .top_banner-user a:hover,#top_banner .top_banner-user a:active{color:#fcfcfc}#mid_banner{background-color:#2b5580;font-size:14px;font-weight:600}#mid_banner .mid_banner-dash{float:left;margin-left:-20px}#mid_banner .mid_banner-dash a,#mid_banner .mid_banner-link a,#mid_banner .more_information-link a{padding:10px 20px;float:right;margin-left:20px}#mid_banner .mid_banner-dash a:hover,#mid_banner .mid_banner-dash a.active,#mid_banner .mid_banner-link a:hover,#mid_banner .mid_banner-link a.active,#mid_banner .more_information-link a:hover,#mid_banner .more_information-link a.active{color:#042553;background-color:#efefef;text-decoration:none}#mid_banner .mid_banner-dash a:hover i,#mid_banner .mid_banner-dash a.active i,#mid_banner .mid_banner-link a:hover i,#mid_banner .mid_banner-link a.active i,#mid_banner .more_information-link a:hover i,#mid_banner .more_information-link a.active i{color:#042553}#mid_banner i{color:#ffffff;padding:0 10px 0 0}#mid_banner a{color:#ffffff;text-decoration:none}#form_navigation{display:flex}#form_navigation form{margin-right:10px}.question-well{min-height:20px;padding:25px;margin-bottom:25px;border:1px solid #d5d5d5;border-radius:10px}.question-well.hasFocus{border:1px solid #042553}.row-flex{display:flex;flex-direction:row;flex-wrap:wrap;height:100%}.row-flex .col{flex:1;box-sizing:border-box}.row-flex .content-column{flex-basis:100%;max-width:800px;padding:35px 50px 50px 50px}.row-flex .progress-column{flex:0 0 262px;background-color:#efefef}.row-flex .more_information-column{flex:0 0 306px;background-color:#efefef;box-shadow:inset 0px 0px 10px 0px rgba(0,0,0,0.1);padding:45px 20px;font-size:14px;line-height:21px}.row-flex .more_information-column .more_information-close{float:right;font-size:24px;margin-top:3px;color:#042553}.row-flex .more_information-column h2{color:#042553;padding-right:25px}.progress-column h4{color:#494949;padding:0 18px;margin-top:36px}.progress-column .progress-question{display:flex;align-items:center;height:60px;margin-bottom:12px;padding:0 12px 0 18px}.progress-column .progress-question .progress-icon{width:46px}.progress-column .progress-question .progress-icon i{font-size:20px;border:solid 1px #494949;padding:7px;border-radius:50%}.progress-column .progress-question .progress-content{width:158px;font-size:14px;line-height:16px;color:#494949}.progress-column .progress-question .progress-content small{font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.1em}.progress-column .progress-question .progress-status{width:28px}.progress-column .progress-question .progress-status i{float:right}.progress-column .progress-question i{color:#494949}.progress-column .progress-question.complete span,.progress-column .progress-question.complete i{color:#57b26a;border-color:#57b26a}.progress-column .progress-question:hover,.progress-column .progress-question:focus{background-color:#e6ca85;text-decoration:none}.progress-column .progress-question:hover span,.progress-column .progress-question:hover i,.progress-column .progress-question:focus span,.progress-column .progress-question:focus i{color:#ffffff;border-color:#ffffff}.progress-column .progress-question.active{background-color:#dea61b;text-decoration:none}.progress-column .progress-question.active span,.progress-column .progress-question.active i{color:#ffffff;border-color:#ffffff} diff --git a/edivorce/apps/core/static/css/main.scss b/edivorce/apps/core/static/css/main.scss index b8aa8a6d..19573872 100644 --- a/edivorce/apps/core/static/css/main.scss +++ b/edivorce/apps/core/static/css/main.scss @@ -23,6 +23,8 @@ $color-grey-lightest: #fdfdfd; $color-green: #57b26a; $color-green-light: #d9f6df; +$color-gold-light: #e6ca85; + $font-custom: Myriad-Pro, Calibri, Arial, Sans Serif; @font-face { @@ -102,6 +104,12 @@ a { line-height: 28px; } +.footer { + height: 50px; + background-color: $brand-blue; + color: #ffffff; +} + // Bootstrap Overrides .container-wrapper { @@ -440,15 +448,13 @@ textarea { flex-wrap: wrap; height: 100%; .col { - flex: 1 1 8%; - margin: 0 0 0.5rem 0; - padding: 0.5em 10px; + flex: 1; box-sizing: border-box; } .content-column { flex-basis: 100%; max-width: 800px; - padding: 60px; + padding: 35px 50px 50px 50px; } .progress-column { flex: 0 0 262px; @@ -474,6 +480,76 @@ textarea { } } +/* Side Progress Navigation */ + +.progress-column { + h4 { + color: $color-grey-dark; + padding: 0 18px; + margin-top: 36px; + } + .progress-question { + display: flex; + align-items: center; + height: 60px; + margin-bottom: 12px; + padding: 0 12px 0 18px; + .progress-icon { + width: 46px; + i { + font-size: 20px; + border: solid 1px $color-grey-dark; + padding: 7px; + border-radius: 50%; + } + } + .progress-content { + width: 158px; + font-size: 14px; + line-height: 16px; + color: $body-copy; + small { + font-size: 11px; + text-transform: uppercase; + font-weight: 700; + letter-spacing: .1em; + } + } + .progress-status { + width: 28px; + i { + float: right; + } + } + i { + color: $color-grey-dark; + } + &.complete { + span, i { + color: $color-green; + border-color: $color-green; + } + } + &:hover, &:focus { + background-color: $color-gold-light; + text-decoration: none; + span, i { + color: #ffffff; + border-color: #ffffff; + } + } + &.active { + background-color: $brand-gold; + text-decoration: none; + span, i { + color: #ffffff; + border-color: #ffffff; + } + } + } +} + + diff --git a/edivorce/apps/core/templates/base.html b/edivorce/apps/core/templates/base.html index f45f672b..ca07ef0b 100644 --- a/edivorce/apps/core/templates/base.html +++ b/edivorce/apps/core/templates/base.html @@ -76,9 +76,7 @@ {% endif %}
-
-

Stuff

-
+ {% include "progress.html" %}
@@ -96,7 +94,10 @@
+
+ +
diff --git a/edivorce/apps/core/templates/progress.html b/edivorce/apps/core/templates/progress.html new file mode 100644 index 00000000..b6a85d9e --- /dev/null +++ b/edivorce/apps/core/templates/progress.html @@ -0,0 +1,60 @@ +
+

Questionnaire

+ + + + Qualifying Questions + + + + Step 1
What Are You Asking For? + + + + + Step 2
Your information + + + + + Step 3
Your information + + + + Step 4
Your information + + + + Step 5
Your information + + + + Step 6
Your information + + + + Step 7
Your information + + + + Step 8
Your information + + + + Step 9
Your information + + + + Step 10
Your information + + + + Step 11
Your information + + + + Step 12
Your information + + + +
\ No newline at end of file