|
|
|
@ -6,11 +6,11 @@ $brand-blue: #042553; |
|
|
|
$brand-gold: #dea61b; |
|
|
|
|
|
|
|
$brand-titles: #19355b; |
|
|
|
$brand-links: #2b5580; |
|
|
|
$brand-buttons: #365ebe; |
|
|
|
$brand-links: #365ebe; //#2b5580; |
|
|
|
$brand-buttons: $brand-links; |
|
|
|
|
|
|
|
$color-blue-dark: $brand-titles; |
|
|
|
$color-blue-medium: $brand-links; |
|
|
|
$color-blue-medium: #2b5580; |
|
|
|
$color-blue-light: $brand-buttons; |
|
|
|
$color-blue-lighter: #d4dce5; |
|
|
|
|
|
|
|
@ -39,15 +39,30 @@ body { |
|
|
|
font-size: 16px; |
|
|
|
line-height: 24px; |
|
|
|
color: $body-copy; |
|
|
|
background: #ffffff; |
|
|
|
background: $brand-blue; |
|
|
|
-webkit-font-smoothing: antialiased; |
|
|
|
-moz-osx-font-smoothing: grayscale; |
|
|
|
min-width: 768px; |
|
|
|
|
|
|
|
@media (min-width: 1680px) { |
|
|
|
font-size: 18px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
h1,h2,h3,h4 { |
|
|
|
margin-top: 0px; |
|
|
|
margin-bottom: 10px; |
|
|
|
|
|
|
|
.tooltip-link { |
|
|
|
color: $brand-blue; |
|
|
|
border: 0; |
|
|
|
} |
|
|
|
|
|
|
|
i.fa { |
|
|
|
color: $brand-blue; |
|
|
|
font-size: 24px; |
|
|
|
margin-right: 6px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
h1 { |
|
|
|
@ -186,18 +201,17 @@ img { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tooltip-arrow { |
|
|
|
border-top-color: $brand-titles; |
|
|
|
} |
|
|
|
.tooltip.in {opacity: 1;} |
|
|
|
.tooltip-inner { |
|
|
|
text-align: left; |
|
|
|
background-color: $brand-titles; |
|
|
|
background-color: $brand-links; |
|
|
|
padding: 20px; |
|
|
|
font-size: 16px; |
|
|
|
line-height: 24px; |
|
|
|
max-width: 300px; |
|
|
|
border-radius: 10px; |
|
|
|
font-family: $font-custom; |
|
|
|
|
|
|
|
&b { |
|
|
|
font-size: 18px; |
|
|
|
} |
|
|
|
@ -210,18 +224,68 @@ img { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tooltip-arrow { |
|
|
|
pointer-events: none; |
|
|
|
border-color: rgba(255,255,255,0); |
|
|
|
border-width: 12px !important; |
|
|
|
} |
|
|
|
|
|
|
|
.tooltip { |
|
|
|
&.top .tooltip-arrow { |
|
|
|
border-top-color: $brand-links; |
|
|
|
margin-bottom: -16px; |
|
|
|
} |
|
|
|
|
|
|
|
&.right { |
|
|
|
margin-left: 10px; |
|
|
|
.tooltip-arrow { |
|
|
|
border-right-color: $brand-links; |
|
|
|
margin-left: -12px; |
|
|
|
margin-top: -14px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&.bottom .tooltip-arrow { |
|
|
|
border-bottom-color: $brand-links; |
|
|
|
margin-top: -12px; |
|
|
|
} |
|
|
|
|
|
|
|
&.left { |
|
|
|
margin-left: -10px; |
|
|
|
.tooltip-arrow { |
|
|
|
border-left-color: $brand-links; |
|
|
|
margin-right: -12px; |
|
|
|
margin-top: -14px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tooltip-link { |
|
|
|
color: $brand-titles; |
|
|
|
border-bottom: dotted 1px $brand-titles; |
|
|
|
cursor: pointer; |
|
|
|
color: $brand-links; |
|
|
|
border-bottom: dotted 1px $brand-links; |
|
|
|
cursor: pointer; |
|
|
|
word-break: break-all; |
|
|
|
display: inline-block; |
|
|
|
&:hover { |
|
|
|
color: $brand-blue; |
|
|
|
border-bottom-color: $brand-links; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.collapse-trigger { |
|
|
|
& > div { |
|
|
|
color: $brand-titles; |
|
|
|
border-bottom: solid 1px $brand-titles; |
|
|
|
color: $color-blue-light; |
|
|
|
border-bottom: solid 1px $color-blue-light; |
|
|
|
display: inline; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
.tooltip-link { |
|
|
|
border: 0; |
|
|
|
&:hover { |
|
|
|
color: inherit; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&:after { |
|
|
|
font-family: FontAwesome; |
|
|
|
font-weight: normal; |
|
|
|
@ -243,7 +307,7 @@ img { |
|
|
|
transition: all 0.1s ease-in-out; |
|
|
|
} |
|
|
|
} |
|
|
|
margin-bottom: 20px; |
|
|
|
margin-bottom: 12px; |
|
|
|
&.collapsed div:after { |
|
|
|
-webkit-transform: rotate(-180deg); |
|
|
|
transform: rotate(-180deg); |
|
|
|
@ -259,11 +323,17 @@ img { |
|
|
|
margin-bottom: 25px; |
|
|
|
} |
|
|
|
|
|
|
|
select.form-control { |
|
|
|
font-size: 16px; |
|
|
|
height: 42px; |
|
|
|
} |
|
|
|
|
|
|
|
.input-group input.form-control:first-child, |
|
|
|
.form-group input.form-control { |
|
|
|
border-radius: 10px; |
|
|
|
border-top-right-radius: 10px; |
|
|
|
border-bottom-right-radius: 10px; |
|
|
|
margin-top: 12px; |
|
|
|
border-radius: 4px; |
|
|
|
border-top-right-radius: 4px; |
|
|
|
border-bottom-right-radius: 4px; |
|
|
|
height: inherit; |
|
|
|
width: inherit; |
|
|
|
float: inherit; |
|
|
|
@ -278,6 +348,18 @@ img { |
|
|
|
|
|
|
|
/* Buttons & Icons*/ |
|
|
|
|
|
|
|
.btn { |
|
|
|
line-height: initial; |
|
|
|
padding: 12px 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-primary { |
|
|
|
background: $brand-buttons; |
|
|
|
&:hover { |
|
|
|
background-color: darken($brand-buttons, 20%); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
i.fa { |
|
|
|
color: $brand-links; |
|
|
|
&.circle { |
|
|
|
@ -293,10 +375,9 @@ i.fa.fa-question-circle {margin-left: 5px;} |
|
|
|
margin: 30px 0; |
|
|
|
.btn { |
|
|
|
font-size: 18px; |
|
|
|
line-height: 32px; |
|
|
|
border: none; |
|
|
|
border-radius: 10px; |
|
|
|
padding: 6px 18px; |
|
|
|
padding: 12px 15px; |
|
|
|
background-color: $brand-buttons; |
|
|
|
color: #ffffff; |
|
|
|
margin-bottom: 12px; |
|
|
|
@ -327,10 +408,11 @@ i.fa.fa-question-circle {margin-left: 5px;} |
|
|
|
.btn-radio { |
|
|
|
color: $brand-titles; |
|
|
|
background-color: $color-blue-lighter; |
|
|
|
font-size: 18px; |
|
|
|
font-size: 16px; |
|
|
|
text-transform: uppercase; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
font-weight: 600; |
|
|
|
line-height: 45px; |
|
|
|
padding: 20px 0; |
|
|
|
width: 60px; |
|
|
|
height: 60px; |
|
|
|
border-radius: 30px; |
|
|
|
@ -346,7 +428,6 @@ i.fa.fa-question-circle {margin-left: 5px;} |
|
|
|
.open .dropdown-toggle.btn-radio { |
|
|
|
color: #FFFFFF; |
|
|
|
background-color: $brand-links; |
|
|
|
border: 3px solid $brand-buttons; |
|
|
|
-webkit-transition: all 0.1s ease-in-out; |
|
|
|
transition: all 0.1s ease-in-out; |
|
|
|
} |
|
|
|
@ -407,7 +488,7 @@ fieldset[disabled] .btn-radio.active { |
|
|
|
/* Form Elements*/ |
|
|
|
|
|
|
|
input { |
|
|
|
border-radius: 10px; |
|
|
|
border-radius: 4px; |
|
|
|
color: #494949; |
|
|
|
padding: 12px 15px; |
|
|
|
border: solid 1px $color-grey-light; |
|
|
|
@ -434,6 +515,10 @@ input { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.checkbox label, .radio label { |
|
|
|
margin-bottom: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
textarea { |
|
|
|
width: 100%; |
|
|
|
border-radius: 10px; |
|
|
|
@ -477,7 +562,7 @@ textarea { |
|
|
|
color: #fff; |
|
|
|
font-size: 14px; |
|
|
|
float: right; |
|
|
|
margin-top: 9px; |
|
|
|
margin-top: 16px; |
|
|
|
a { |
|
|
|
color: #ffffff; |
|
|
|
&:hover, &:active { |
|
|
|
@ -498,9 +583,9 @@ textarea { |
|
|
|
.mid_banner-dash a, |
|
|
|
.mid_banner-link a, |
|
|
|
.more_information-link a { |
|
|
|
padding: 10px 20px; |
|
|
|
padding: 10px 16px; |
|
|
|
float: right; |
|
|
|
margin-left: 20px; |
|
|
|
margin-left: 6px; |
|
|
|
&:hover, &.active { |
|
|
|
color: $brand-blue; |
|
|
|
background-color: $color-grey-lighter; |
|
|
|
@ -510,6 +595,10 @@ textarea { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.mid_banner-dash a { |
|
|
|
margin-left: 24px; |
|
|
|
} |
|
|
|
i { |
|
|
|
color: #ffffff; |
|
|
|
padding: 0 10px 0 0; |
|
|
|
@ -600,6 +689,9 @@ textarea { |
|
|
|
|
|
|
|
#btn_add_other_names { |
|
|
|
margin-left: 10px; |
|
|
|
background-color: $brand-buttons; |
|
|
|
border: 0; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.footer { |
|
|
|
@ -629,10 +721,31 @@ textarea { |
|
|
|
.question-well { |
|
|
|
min-height: 20px; |
|
|
|
padding: 25px; |
|
|
|
margin-bottom: 25px; |
|
|
|
margin-top: 25px; |
|
|
|
border: 1px solid $color-grey-light; |
|
|
|
border-radius: 10px; |
|
|
|
&.hasFocus {border: 1px solid $brand-blue;} |
|
|
|
background: #ffffff; |
|
|
|
&.hasFocus { |
|
|
|
border: 1px solid $color-blue-light; |
|
|
|
transition: 0.1s ease-in-out all; |
|
|
|
} |
|
|
|
h3 { |
|
|
|
margin-top: 0; |
|
|
|
} |
|
|
|
p { |
|
|
|
max-width: 90%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.print-form-action { |
|
|
|
display: inline-block; |
|
|
|
float: right; |
|
|
|
a { |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
&:after { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.step-review { |
|
|
|
@ -670,6 +783,8 @@ textarea { |
|
|
|
flex-wrap: wrap; |
|
|
|
height: 100%; |
|
|
|
overflow: hidden; |
|
|
|
background: #fdfdfd; |
|
|
|
|
|
|
|
.col { |
|
|
|
-webkit-box-flex: 1; |
|
|
|
-ms-flex: 1; |
|
|
|
@ -680,13 +795,15 @@ textarea { |
|
|
|
order: 3; |
|
|
|
} |
|
|
|
.content-column { |
|
|
|
max-width: 800px; |
|
|
|
padding: 35px 50px 50px 50px; |
|
|
|
// max-width: 800px; |
|
|
|
// padding: 35px 50px 50px 50px; |
|
|
|
max-width: 1280px; |
|
|
|
padding: 36px 6% 50px 6%; |
|
|
|
} |
|
|
|
.progress-column { |
|
|
|
-webkit-box-flex: 0; |
|
|
|
-ms-flex: 0 0 262px; |
|
|
|
flex: 0 0 262px; |
|
|
|
-ms-flex: 0 0 280px; |
|
|
|
flex: 0 0 280px; |
|
|
|
background-color: $color-grey-lighter; |
|
|
|
-webkit-box-ordinal-group: 3; |
|
|
|
-ms-flex-order: 2; |
|
|
|
@ -694,8 +811,8 @@ textarea { |
|
|
|
} |
|
|
|
.dashnav-column { |
|
|
|
-webkit-box-flex: 0; |
|
|
|
-ms-flex: 0 0 262px; |
|
|
|
flex: 0 0 262px; |
|
|
|
-ms-flex: 0 0 280px; |
|
|
|
flex: 0 0 280px; |
|
|
|
background-color: $brand-titles; |
|
|
|
-webkit-box-ordinal-group: 3; |
|
|
|
-ms-flex-order: 2; |
|
|
|
@ -714,11 +831,19 @@ textarea { |
|
|
|
-ms-flex-order: 1; |
|
|
|
order: 1; |
|
|
|
height: auto; |
|
|
|
|
|
|
|
@media (min-width: 1680px) { |
|
|
|
font-size: 16px; |
|
|
|
line-height: 1.5; |
|
|
|
} |
|
|
|
|
|
|
|
.more_information-close { |
|
|
|
float: right; |
|
|
|
font-size: 24px; |
|
|
|
margin-top: 3px; |
|
|
|
color: $brand-blue; |
|
|
|
i.fa { |
|
|
|
color: $brand-blue; |
|
|
|
} |
|
|
|
} |
|
|
|
h2 { |
|
|
|
color: $brand-blue; |
|
|
|
@ -814,6 +939,8 @@ textarea { |
|
|
|
color: $color-grey-dark; |
|
|
|
padding: 0 18px; |
|
|
|
margin-top: 36px; |
|
|
|
font-size: 14px; |
|
|
|
letter-spacing: 0.1em; |
|
|
|
} |
|
|
|
.progress-question { |
|
|
|
display: -webkit-box; |
|
|
|
@ -822,9 +949,9 @@ textarea { |
|
|
|
-webkit-box-align: center; |
|
|
|
-ms-flex-align: center; |
|
|
|
align-items: center; |
|
|
|
height: 60px; |
|
|
|
height: 72px; |
|
|
|
margin-bottom: 12px; |
|
|
|
padding: 0 12px 0 18px; |
|
|
|
padding: 0 18px; |
|
|
|
.progress-icon { |
|
|
|
-webkit-box-flex: 0; |
|
|
|
-ms-flex: 0 0 46px; |
|
|
|
@ -843,10 +970,16 @@ textarea { |
|
|
|
} |
|
|
|
} |
|
|
|
.progress-content { |
|
|
|
width: 158px; |
|
|
|
width: 176px; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 16px; |
|
|
|
line-height: 1.3; |
|
|
|
color: $body-copy; |
|
|
|
|
|
|
|
@media (min-width: 1680px) { |
|
|
|
font-size: 16px; |
|
|
|
width: 190px; |
|
|
|
} |
|
|
|
|
|
|
|
small { |
|
|
|
font-size: 11px; |
|
|
|
text-transform: uppercase; |
|
|
|
@ -856,6 +989,7 @@ textarea { |
|
|
|
} |
|
|
|
.progress-status { |
|
|
|
width: 28px; |
|
|
|
text-align: right; |
|
|
|
i { |
|
|
|
float: right; |
|
|
|
} |
|
|
|
@ -951,6 +1085,7 @@ textarea { |
|
|
|
.progress-status, |
|
|
|
.progress-status i { |
|
|
|
color: $brand-blue; |
|
|
|
border-color: $brand-blue; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
@ -988,7 +1123,41 @@ textarea { |
|
|
|
|
|
|
|
/* Modals */ |
|
|
|
|
|
|
|
.modal-dialog { |
|
|
|
width: 780px; |
|
|
|
} |
|
|
|
|
|
|
|
.modal-header { |
|
|
|
border: 0; |
|
|
|
padding-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.modal-title { |
|
|
|
font-size: 32px; |
|
|
|
font-weight: normal; |
|
|
|
} |
|
|
|
|
|
|
|
.modal-body { |
|
|
|
padding-left: 64px; |
|
|
|
padding-right: 64px; |
|
|
|
|
|
|
|
p { |
|
|
|
font-size: 18px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.modal-footer { |
|
|
|
background: #f5f5f5; |
|
|
|
border-bottom-left-radius: 10px; |
|
|
|
border-bottom-right-radius: 10px; |
|
|
|
.btn { |
|
|
|
margin-top: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
#questions_modal { |
|
|
|
margin-top: 112px; |
|
|
|
font-size: 18px; |
|
|
|
.modal-header { |
|
|
|
text-align: center; |
|
|
|
@ -1092,5 +1261,3 @@ span.hard-stop { |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
James Byun
8 years ago