app/frontend/src/assets/scss/style.scss
/*
* BCGov Style
* This globally extends the base Vuetify style
*/
@import '~vuetify/src/styles/styles.sass';
// Variables
$bcgov-blue: #003366;
$bcgov-blue-secondary: #38598a;
$bcgov-orange: #fcba19;
$bcgov-grey: #efefef;
$bcgov-font: #313132;
// Sticky Footer
body {
display: flex;
flex-direction: column;
& > .v-content {
flex: 1 0 auto;
}
}
// Typography
.v-application {
font-family: -apple-system, BlinkMacSystemFont, BCSans, Roboto, Verdana, Arial, sans-serif !important;
line-height: 1.4;
font-size: 0.875rem;
}
h1 { font-size: 1.9em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.05em; }
h1, h2, h3, h4, h5 {
color: $bcgov-font;
line-height: 1.2;
}
p {
color: $bcgov-font;
line-height: 1.4;
}
// Horizontal Rule
hr {
border-top: 1px solid lightgrey;
margin-bottom: 1em;
.orange {
border-top: 2px solid $bcgov-orange;
}
}
// Anchor and Tab Behavior
a, .v-tab {
text-decoration: none;
&:hover {
text-decoration: underline;
button, .v-icon {
display: inline-block;
text-decoration: none;
}
}
}
// General Button Style Extensions
.v-btn {
span > span {
font-weight: bold;
}
&:hover {
opacity: 0.8;
span > span {
text-decoration: underline;
}
}
&.v-btn--disabled {
background-color: #eee;
color: #777;
}
&.v-btn--outlined {
&.theme--light {
border: 2px solid #003366;
}
&.theme--dark {
border: 2px solid #fff;
}
}
}
// Generic Navigation Bar Style
.navigation-main {
box-shadow: 0 6px 8px -4px #b3b1b3;
display: flex;
color: #fcba19;
background-color: #38598a;
width: 100%;
-webkit-box-shadow: 0 6px 8px -4px #b3b1b3;
-moz-box-shadow: 0 6px 8px -4px #b3b1b3;
.container {
padding: 0;
ul {
display: flex;
flex-direction: row;
margin: 0;
color: #ffffff;
list-style: none;
margin-left: -1.7rem;
li {
a {
display: flex;
font-weight: normal;
min-height: 2rem;
color: #ffffff;
padding: 0.75rem 1rem 0.75rem 1rem;
text-decoration: none;
&:focus {
outline: none;
outline-offset: 0;
}
&:hover {
text-decoration: underline;
}
}
& ~ li {
border-left: 1px solid #9b9b9b;
margin: 0;
}
}
.router-link-exact-active {
background-color: #7ba2cc80;
border-bottom: 2px solid #fcba19;
font-weight: bold;
}
}
}
}
// Stepper
.form-stepper {
.header-row {
background-color: $bcgov-grey !important;
}
&.v-stepper--alt-labels {
.v-stepper__step {
padding-left: 0;
padding-right: 0;
.v-stepper__label {
color: $bcgov-font;
font-size: .75em;
}
&.v-stepper__step--active {
.v-stepper__label{
color: $bcgov-font;
font-weight: bold;
}
}
}
}
}
.question-series {
p {
font-size: 16px;
}
.question-head {
margin-bottom: 16px;
margin-top: 22px;
}
.questions {
@media (min-width: 600px) {
padding-left: 1.5em;
}
.questions-check-group {
padding-left: 2em;
.v-input {
margin-top: 0;
}
}
}
}
// Landing pages
.comfort-landing-title.v-sheet{
background-color: lightcoral !important;
padding: 0;
}