/* Base Theme Created on 05/10/2019 by Corey O'Brien and Alexa Hojczyk. */ /* ++++ Colors ++++ */ $rusted-orange: #FA5600; $navy: #1172B3; $green: #4F8A2F; $purple: #7D2F8A; $dark-gray: #494949; $light-gray: #F1F1F1; $rusted_red: #a94442; $black: #000000; $white: #FFFFFF; $red: #FF0000; html, body { font-size: 16px; font-family: 'Source Sans Pro', sans-serif; color: $dark-gray; } body { padding: 1.875rem; } h1 { background-color: $navy; color: $white !important; height: 4.8125rem; padding-left: 1.875rem; padding-top: 1rem; font-size: 2.5rem !important; text-transform: uppercase; font-weight: 600; margin: 0 -1.875rem 0.875rem -1.875rem; } h2 { font-weight: 600; font-size: 30px; color: $rusted-orange; margin: 1.25rem 0 0.5rem 0; } h3 { font-size: 1.75rem; color: $navy; margin: 1.25rem 0 1.25rem 0; font-weight: 600; } h4 { font-weight: 600; font-size: 1.5rem; color: $dark-gray; margin: 1.25rem 0 1.25rem 0; } p { font-family: 'Source Sans Pro', sans-serif; font-size: 1rem; margin-bottom: 0.625rem; // margin-bottom: 1.875rem; &.lead { font-size: 1.875rem; } } a { font-weight: 600; } hr { border-top: 0.0625rem solid lighten($dark-gray, 50%); } ul { li { font-size: 1.125rem; } } /* ++++ Containers/Components ++++ */ .container-fluid { padding-left: 1.875rem; padding-right: 1.875rem; padding-bottom: 0.9375rem; &.body-container { background: lighten($light-gray, 4%); border: 0.0625rem solid darken($light-gray, 1%); } } .panel { background-color: $light-gray; margin-top: 1rem; padding: 1rem; box-shadow: none; &.panel-default { border: none; .panel-heading { background: lighten($light-gray, 4%); border-bottom: none; padding: 0; h3 { margin: 0; padding: 0 0 0.9375rem 0; color: $navy; } } .panel-body { .btn { min-height: 2.3125rem; } } } &.panel-licensee { .panel-body { padding: 0; } } &.panel-scrollable { .panel-body { height: 14.5rem; overflow: hidden; overflow-y: auto; } } &.panel-sub { background-color: darken($light-gray, 3%); .panel-heading { background-color: darken($light-gray, 3%); h3 { padding: 0.9375rem 0 0 0.9375rem; } } } &.panel-solid-header { .panel-heading { background-color: $navy; text-align: center; padding-top:0.9375rem; h3 { color: $white; font-family: 'Source Sans Pro', sans-serif; letter-spacing: 0.04rem; } } .panel-body { background-color: $white; border: 0.125rem solid darken($light-gray, 15%); border-top: none; p { &.app-received { text-align: center; span { margin-top: 0.9375rem; font-weight: 800; display: block; span { display: inline; font-weight: 400; } } } } } } } .panel-group { .panel-default { .panel-heading { &:hover { background-color: darken($light-gray, 10%); } h3 { padding: 0; position: relative; a { text-decoration: none; padding: 0.9375rem 0.9375rem; width: 100%; display: block; &.delete { width: inherit; padding: 0; position: absolute; right: 0.9375rem; top: 1.0625rem; } } } } } } /* ++++ Button Styles ++++ */ .btn { border-radius: 0.3125rem !important; margin-left: 0.625rem !important; text-shadow: none; box-shadow: none; font-size: 1rem; min-height: 2.75rem; min-width: 6.25rem; font-weight: 600; letter-spacing: 0.04rem; &.btn-primary { background: $rusted-orange; border-color: $rusted-orange; &:hover, &:focus { background-color: darken($rusted-orange, 20%); border-color: darken($rusted-orange, 20%); } } &.btn-secondary { border-color: $navy; color: $navy; background-color: $white; &:hover, &:focus { background-color: $navy; color: $white; } } &.btn-alternate { background: $navy; border-color: $navy; color: $white; &:hover, &:focus { background-color: darken($navy, 20%); border-color: darken($navy, 20%); } } &.btn-full-width { margin-top: .625rem; margin-left: 0 !important; width: 100%; } &.btn-field { background: $dark-gray; border: none; border-radius: 50% !important; min-width: inherit; color: $white; top: 2rem; position: relative; right: 0.9375rem; padding: 0.3125rem 0.4375rem 0.25rem 0.5625rem; span { font-size: 1.25rem; } } &.btn-create-account { padding: 1.5rem 2rem; margin-top: 2rem; margin-bottom: 2rem; font-size: 2rem; } } .btn-group { margin-top: 0.625rem; margin-bottom: 1.875rem; width: 100%; display: block; &.header-buttons { margin-bottom: 0; margin-top: 1.1rem; .btn { min-height: 2.3125rem; } .btn-secondary { background: $navy; border-color: $navy; color: $white; &:hover { background-color: darken($navy, 20%); } } } &.table-actions { width: 100%; margin-bottom: 0.625rem; margin-top: -0.626rem; .btn { float: right; min-height: 2.3125rem; } } &.accordion-actions { width: 100%; margin-bottom: 0.625rem; margin-top: -0.626rem; .btn { float: right; min-height: 2.3125rem; span { margin-right: 0.4rem; top: 0.125rem; } } } } /* ++++ Form Styles ++++ */ fieldset { legend { color: $dark-gray; font-size: 1.125rem; font-weight: 400; border: none; padding: 0; margin: 0; &.has-error { color: $rusted-red; } ul { margin-top: 0.625rem; li { font-size: 1rem; } } } } .form-group { label { font-size: 1.125rem; font-weight: 400; span { color: $rusted-orange; font-size: 0.8rem; margin-left: 0.3rem; } } select { &.form-control { height: 2.5rem; } } .form-control { min-height: 2.5rem; font-size: 1rem; } .input-group { .input-group-btn { .btn { min-height: 2.5rem; font-size: 1.3rem; color: $navy; padding: 0.4rem 0.7rem 0 0.7rem; background: $light-gray; min-width: inherit; margin-left: -1px !important; border-radius: 0 !important; } } } &.has-feedback { label + input { ~ { .form-control-feedback { top: 1.9375rem; } } } label + select { ~ { .form-control-feedback { top: 1.75rem; right: 0.5rem; } } } label { &+ { .input-group { .input-group-btn { .btn { border-color: $rusted-red; border-left-color: darken($light-gray, 14.5%); } } } } } label + .input-group { ~ { .form-control-feedback { top: 2rem; right: 2.8rem; } } } } .checkbox, .radio { label { padding-left: 1.5625rem; } input { margin-left: 0; } } .radio-inline { margin-top: 0.625rem; } &.read-only { p { font-size: 1.125rem; font-weight: 600; margin-bottom: 0; } } }