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: #494949;
// Sticky Footer
body {
display: flex;
flex-direction: column;
& > .v-main {
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: 0px;
margin-bottom: 1em;
color: lightgray;
.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;
}
}
}