diff --git a/edivorce/apps/core/static/css/main.css b/edivorce/apps/core/static/css/main.css index 47e9f0ab..13ec41ad 100644 --- a/edivorce/apps/core/static/css/main.css +++ b/edivorce/apps/core/static/css/main.css @@ -1,353 +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: 18px; - line-height: 27px; - 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: 400; - line-height: 54px; - color: #494949; - margin-bottom: 30px; } - -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: #213E86; - margin-top: 15px; } - -h4 { - font-weight: 600; - font-size: 18px; - line-height: 27px; - color: #213E86; - text-transform: uppercase; } - -a { - color: #365EBE; - text-decoration: none; } - a:hover, a:focus { - color: #2b4a96; - text-decoration: underline; - transition: color 0.1s ease; } - -.container-wrapper { - padding: 40px 0; } - .container-wrapper:nth-child(odd) { - background: #f2f2f2; } - .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: #213E86; } - -.tooltip.in { - opacity: 1; } - -.tooltip-inner { - text-align: left; - background-color: #213E86; - padding: 30px; - font-size: 16px; - line-height: 24px; - max-width: 400px; - border-radius: 10px; } - .tooltip-innerb { - font-size: 18px; } - -.collapse-trigger { - margin-bottom: 20px; } - .collapse-trigger > div { - color: #365EBE; - border-bottom: solid 1px #365EBE; - 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: #2b4a96; - border-bottom: solid 1px #2b4a96; - 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: #365EBE; } - i.fa.circle { - border-radius: 50%; - padding: 10px; - border: solid 1px #365EBE; } - -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: #D7DFF2; - color: #213E86; } - .btn-primary:hover { - background-color: #213E86; - 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: #213E86; - background-color: #D7DFF2; - border-color: #D7DFF2; - font-size: 18px; - text-transform: uppercase; - font-weight: 600; - line-height: 45px; - width: 60px; - height: 60px; - border-radius: 30px; - border: 3px solid #D7DFF2; } - -.btn-radio:hover, -.btn-radio:focus, -.btn-radio:active, -.btn-radio.active, -.open .dropdown-toggle.btn-radio { - color: #FFFFFF; - background-color: #365EBE; - border: 3px solid #D7DFF2; } - -.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: #D7DFF2; - border-color: #D7DFF2; } - -.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; - background: #f2f2f2; - color: #494949; - padding: 15px 20px; - border: none; } - input:focus { - outline: 0; - box-shadow: inset 0 1px 1px rgba(73, 73, 73, 0.075), 0 0 8px rgba(157, 157, 157, 0.6); } - 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: 0 20px; - border-radius: 5px; - margin-left: 5px; } - -#top_banner { - background-color: #003366; - border-bottom: 2px solid #fcba19; - padding: 5px 0 10px; } - #top_banner .top_banner-logo img { - width: 148px; - height: auto; - float: left; } - #top_banner h4 { - color: #D7DFF2; - line-height: 1em; - margin-top: 13px; - margin-left: 15px; - float: left; } - #top_banner h4 .beta { - border: solid 1px #D7DFF2; - padding: 4px 5px 0; - margin-left: 10px; } - #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: #365EBE; - font-size: 16px; - font-weight: 600; - text-transform: uppercase; } - #mid_banner .mid_banner-dash { - float: left; - margin-right: 40px; - margin-top: 20px; } - #mid_banner .mid_banner-dash i { - color: #ffffff; - padding: 0 15px; } - #mid_banner .mid_banner-tab { - float: left; - display: inline-block; - margin-top: 10px; - padding: 10px 15px; - border-radius: 10px 10px 0 0; - color: #365EBE; - background: #D7DFF2; } - #mid_banner .mid_banner-link { - margin-top: 20px; - float: right; } - #mid_banner a { - color: #ffffff; - text-decoration: none; } - #mid_banner a:hover, #mid_banner a:focus { - color: #ffffff; - text-decoration: underline; } - -#bot_banner { - background-color: #D7DFF2; - padding: 10px 0; - font-size: 16px; - font-weight: 600; - text-transform: uppercase; } - #bot_banner img { - max-width: 100%; - height: auto; } - #bot_banner .bot_banner-link { - float: right; - margin-top: 8px; } - -#form_navigation { - display: flex; } - #form_navigation form { - margin-right: 10px; } - -#more_information { - position: absolute; - top: 191px; - right: 0; - background: #494949; - color: #ffffff; - border-radius: 10px 0 0 10px; - padding: 15px; - cursor: pointer; } - #more_information h1, #more_information h2, #more_information h3, #more_information h4 { - color: #ffffff; } - #more_information h4 { - font-size: 16px; - line-height: 1em; - margin-bottom: 0; } - #more_information h4:after { - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - display: inline-block; - text-decoration: inherit; - content: "\f067"; - padding-left: 15px; - color: #fcba19; } - #more_information > :not(.more_information-title) { - display: none; } - #more_information.active > :not(.more_information-title) { - display: block; } - #more_information.active h4 { - padding-bottom: 20px; - margin-bottom: 20px; - border-bottom: solid 1px #9D9D9D; } - #more_information.active h4:after { - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - display: inline-block; - text-decoration: inherit; - content: "\f068"; - padding-left: 60px; - color: #fcba19; } - -/*# sourceMappingURL=main.css.map */ +@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}span.toolip{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}#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} diff --git a/edivorce/apps/core/static/css/main.scss b/edivorce/apps/core/static/css/main.scss index 0ad20203..5b0a9f08 100644 --- a/edivorce/apps/core/static/css/main.scss +++ b/edivorce/apps/core/static/css/main.scss @@ -1,19 +1,27 @@ +// compileCompressed: $1.css + $body-copy: #494949; -$brand-blue: #003366; -$brand-gold: #fcba19; +$brand-blue: #042553; +$brand-gold: #dea61b; -$brand-titles: #213E86; -$brand-links: #365EBE; -$brand-buttons: #D7DFF2; +$brand-titles: #062652; +$brand-links: #2b5580; +$brand-buttons: #365ebe; $color-blue-dark: $brand-titles; $color-blue-medium: $brand-links; $color-blue-light: $brand-buttons; +$color-blue-lighter: #d4dce5; $color-grey-dark: $body-copy; $color-grey-medium: #9D9D9D; -$color-grey-lightest: #f2f2f2; +$color-grey-light: #d5d5d5; +$color-grey-lighter: #efefef; +$color-grey-lightest: #fdfdfd; + +$color-green: #57b26a; +$color-green-light: #d9f6df; $font-custom: Myriad-Pro, Calibri, Arial, Sans Serif; @@ -26,8 +34,8 @@ $font-custom: Myriad-Pro, Calibri, Arial, Sans Serif; body { font-family: $font-custom; - font-size: 18px; - line-height: 27px; + font-size: 16px; + line-height: 24px; color: $body-copy; background: #ffffff; -webkit-font-smoothing: antialiased; @@ -40,10 +48,18 @@ h1,h2,h3,h4 { } h1 { - font-weight: 400; + font-weight: 600; line-height: 54px; - color: $body-copy; - margin-bottom: 30px; + color: $brand-blue; + margin-bottom: 20px; + small { + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + color: $brand-blue; + display: block; + letter-spacing: .1em; + } } h2 { @@ -81,6 +97,11 @@ a { } } +.intro { + font-size: 18px; + line-height: 28px; +} + // Bootstrap Overrides .container-wrapper { @@ -120,12 +141,25 @@ a { &b { font-size: 18px; } + a { + color: #ffffff; + text-decoration: underline; + &:hover, &:focus { + color: $color-grey-light; + } + } +} + +span.toolip { + color: $brand-titles; + border-bottom: dotted 1px $brand-titles; + cursor: pointer; } .collapse-trigger { & > div { - color: $brand-links; - border-bottom: solid 1px $brand-links; + color: $brand-titles; + border-bottom: solid 1px $brand-titles; display: inline; cursor: pointer; &:after { @@ -273,13 +307,13 @@ fieldset[disabled] .btn-radio.active { input { border-radius: 10px; - background: #f2f2f2; color: #494949; - padding: 15px 20px; - border: none; + padding: 12px 15px; + border: solid 1px $color-grey-light; + line-height: 1em; &:focus { outline: 0; - box-shadow: inset 0 1px 1px rgba($color-grey-dark,.075), 0 0 8px rgba($color-grey-medium,.6); + box-shadow: inset 0 1px 1px rgba($color-grey-dark,.075), 0 0 4px rgba($color-grey-medium,.5); } &+i.fa {margin-left: 10px;} &.form-block { @@ -293,7 +327,7 @@ input { max-width: 100px; } &.input-inline { - padding: 0 20px; + padding: 5px 20px; border-radius: 5px; margin-left: 5px; } @@ -305,22 +339,25 @@ input { #top_banner { background-color: $brand-blue; border-bottom: 2px solid $brand-gold; - padding: 5px 0 10px; + padding: 5px 20px 10px; .top_banner-logo img { width: 148px; height: auto; float: left; } - h4 { - color: $color-blue-light; + p { + color: #ffffff; + font-size: 16px; line-height: 1em; - margin-top: 13px; - margin-left: 15px; + margin-top: 20px; + margin-left: 35px; float: left; .beta { - border: solid 1px $color-blue-light; - padding: 4px 5px 0; + border: solid 1px #ffffff; + padding: 4px 8px 3px; margin-left: 10px; + font-size: 12px; + text-transform: uppercase; } } @@ -340,55 +377,34 @@ input { #mid_banner { background-color: $color-blue-medium; - font-size: 16px; + font-size: 14px; font-weight: 600; - text-transform: uppercase; .mid_banner-dash { float: left; - margin-right: 40px; - margin-top: 20px; - i { - color: #ffffff; - padding: 0 15px; - } - } - .mid_banner-tab { - float: left; - display: inline-block; - margin-top: 10px; - padding: 10px 15px; - border-radius: 10px 10px 0 0; - color: $color-blue-medium; - background: $color-blue-light; + margin-left: -20px; } - .mid_banner-link { - margin-top: 20px; + .mid_banner-dash a, + .mid_banner-link a, + .more_information-link a { + padding: 10px 20px; float: right; + margin-left: 20px; + &:hover, &.active { + color: $brand-blue; + background-color: $color-grey-lighter; + text-decoration: none; + i { + color: $brand-blue; + } + } + } + i { + color: #ffffff; + padding: 0 10px 0 0; } a { color: #ffffff; text-decoration: none; - &:hover, - &:focus { - color: #ffffff; - text-decoration: underline; - } - } -} - -#bot_banner { - background-color: $color-blue-light; - padding: 10px 0; - font-size: 16px; - font-weight: 600; - text-transform: uppercase; - img { - max-width: 100%; - height: auto; - } - .bot_banner-link { - float: right; - margin-top: 8px; } } @@ -399,54 +415,58 @@ input { } } -#more_information { - position: absolute; - top: 191px; - right: 0; - background: $color-grey-dark; - color: #ffffff; - border-radius: 10px 0 0 10px; - padding: 15px; - cursor: pointer; - h1,h2,h3,h4 { - color: #ffffff; +.question-well { + min-height: 20px; + padding: 25px; + margin-bottom: 25px; + border: 1px solid $color-grey-light; + border-radius: 10px; + &.hasFocus {border: 1px solid $brand-blue;} +} + +/* Column Grid in flexbox */ + +.row-flex { + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 100%; + .col { + flex: 1 1 8%; + margin: 0 0 0.5rem 0; + padding: 0.5em 10px; + box-sizing: border-box; } - h4 { - font-size: 16px; - line-height: 1em; - margin-bottom: 0; - &:after { - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - display: inline-block; - text-decoration: inherit; - content: "\f067"; - padding-left: 15px; - color: $brand-gold; - } + .content-column { + flex-basis: 100%; + max-width: 800px; + padding: 60px; } - &>:not(.more_information-title) { - display: none; + .progress-column { + flex: 0 0 262px; + background-color: $color-grey-lighter; } - &.active { - &>:not(.more_information-title) { - display: block; + .more_information-column { + flex: 0 0 306px; + background-color: $color-grey-lighter; + box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.1); + padding: 45px 20px; + font-size: 14px; + line-height: 21px; + .more_information-close { + float: right; + font-size: 24px; + margin-top: 3px; + color: $brand-blue; } - h4 { - padding-bottom: 20px; - margin-bottom: 20px; - border-bottom: solid 1px $color-grey-medium; - &:after { - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - display: inline-block; - text-decoration: inherit; - content: "\f068"; - padding-left: 60px; - color: $brand-gold; - } + h2 { + color: $brand-blue; + padding-right: 25px; } } -} \ No newline at end of file +} + + + + + diff --git a/edivorce/apps/core/static/js/main.js b/edivorce/apps/core/static/js/main.js index 8df8c1d3..c1bda616 100755 --- a/edivorce/apps/core/static/js/main.js +++ b/edivorce/apps/core/static/js/main.js @@ -53,13 +53,33 @@ $(function () { }); // Expand More Information boxes -// TODO this is fragile and really just a place holder until the sidebar is revised -$("#more_information").click(function () { - if ($(this).hasClass("active")) { - $(this).removeClass("col-md-4 active"); - $(".container-wrapper .col-md-8").addClass("col-md-offset-2"); +$(".more_information-link a").click(function () { + var moreInfo = $(".more_information-column"); + if ($(moreInfo).hasClass("hidden")) { + $(moreInfo).removeClass("hidden"); } else { - $(this).addClass("col-md-4 active"); - $(".container-wrapper .col-md-8").removeClass("col-md-offset-2"); + $(moreInfo).addClass("hidden"); } -}); \ No newline at end of file +}); +$("a.more_information-close").click(function () { + var moreInfo = $(".more_information-column"); + $(moreInfo).addClass("hidden"); +}); + +// Change border color on well when child has focus + +$(".question-well").click(function () { + $(".question-well").removeClass('hasFocus'); + $(this).addClass('hasFocus'); +}); + +// $('.question-well > *') +// .focus(function() { +// $(this).parent('.question-well').addClass('hasFocus'); +// console.log("FOCUS!"); +// }) +// .blur(function() { +// $(this).parent('.question-well').removeClass('hasFocus'); +// console.log("NO FOCUS!"); +// }); + diff --git a/edivorce/apps/core/templates/base.html b/edivorce/apps/core/templates/base.html index c9149869..f45f672b 100644 --- a/edivorce/apps/core/templates/base.html +++ b/edivorce/apps/core/templates/base.html @@ -29,12 +29,12 @@
-
+
@@ -55,31 +55,19 @@ {% if not hide_nav %}
-
+
-
-
Dashboard +
+
Back to Dashboard
- 1: Prepare Notice of Joint Family Claim (f1)
-
-
Legal Support
-
- -
-
-
-
-
-
- -
- -
-
-
Preview Form
+
+
+ More Information +
+
+ Legal Support +
@@ -87,15 +75,30 @@ {% endif %} - {% block content %}{% endblock %} +
+
+

Stuff

+
- {% block sidebar %} -
-

More Information

- {% block sidebarText %} +
+
+ {% block content %}{% endblock %} +
+
+ + {% block sidebar %} + {% endblock %} +
- {% endblock %} + + + + diff --git a/edivorce/apps/core/templates/question/04_marriage.html b/edivorce/apps/core/templates/question/04_marriage.html index 0bbad9df..96080d29 100644 --- a/edivorce/apps/core/templates/question/04_marriage.html +++ b/edivorce/apps/core/templates/question/04_marriage.html @@ -4,115 +4,109 @@ {% block title %}{{ block.super }}: Your Marriage{% endblock %} {% block content %} -
-
-
-
-

Step 4: Your Marriage

-

It is very important that you enter the information below as it appears on your official marriage - certificate - - or registration of marriage - . Not doing this can result in delays and - your divorce request being returned for correction.

-
-

When were you married?

-

{% input_field type="text" name="when_were_you_married" class="date-picker" id="marriage_date" placeholder="DD/MM/YYYY" %}

-
+

Step 4: Your Marriage

+

It is very important that you enter the information below as it appears on your official marriage + certificate + + or registration of marriage + . Not doing this can result in delays and + your divorce request being returned for correction.

-
-

When did you and {% if name_spouse %} {{ name_spouse }} {% else %} your spouse {% endif %} begin to live together in a marriage-like relationship?

-

{% input_field type="text" name="when_were_you_live_married_like" class="date-picker" id="lived_start_date" placeholder="DD/MM/YYYY" %}

+
+

When were you married?

+

{% input_field type="text" name="when_were_you_married" class="date-picker" id="marriage_date" placeholder="DD/MM/YYYY" %}

+
- -
-
-

- Under the law, the start date of a spousal relationship is the day two individuals begin living together in - a marriage-like relationship, or the day they were married, whichever is first. The start date of - a spousal relationship determines when rights or responsibilities start under the Family Law Act, - particularly respecting property division. -

-
-
+
+

When did you and {% if name_spouse %} {{ name_spouse }} {% else %} your spouse {% endif %} begin to live together in a marriage-like relationship?

+

{% input_field type="text" name="when_were_you_live_married_like" class="date-picker" id="lived_start_date" placeholder="DD/MM/YYYY" %}

- -
-
-

If you cannot remember the exact date you sepearated then enter:

-
    -
  • the last day of that month in which you decided to separate from your spouse, and;
    • -
  • year
    • -
-
-
-
+ +
+
+

+ Under the law, the start date of a spousal relationship is the day two individuals begin living together in + a marriage-like relationship, or the day they were married, whichever is first. The start date of + a spousal relationship determines when rights or responsibilities start under the Family Law Act, + particularly respecting property division. +

+
+
-
-

Where were you married?

-

Enter the location as it appears on the marriage certificate (e.g. city, province or state and country)

-

City

- {% input_field type="text" name="where_were_you_married_city" class="form-block input-wide response-textbox" %} -

Prov/State

- {% input_field type="text" name="where_were_you_married_prov" class="form-block input-narrow response-textbox" %} -

Country

+ +
+
+

If you cannot remember the exact date you sepearated then enter:

+
    +
  • the last day of that month in which you decided to separate from your spouse, and;
    • +
  • year
    • +
+
+
+
-
-
-
-
+
+

Where were you married?

+

Enter the location as it appears on the marriage certificate (e.g. city, province or state and country)

+

City

+ {% input_field type="text" name="where_were_you_married_city" class="form-block input-wide response-textbox" %} +

Prov/State

+ {% input_field type="text" name="where_were_you_married_prov" class="form-block input-narrow response-textbox" %} +

Country

-
-

Before you got married to your spouse, what was your marital status?

-
-
-
-
+
+
+
+
-
-

What was the marital status of your spouse before your marriage?

-
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
-
+
+

Before you got married to your spouse, what was your marital status?

+
+
+
+
+

What was the marital status of your spouse before your marriage?

+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ + {% endblock %} {% block sidebarText %}