You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
4.5 KiB
156 lines
4.5 KiB
// Import GOV.UK Frontend styles |
|
@function frontend-font-url($filename) { |
|
@return url("~assets/fonts/" + $filename); |
|
} |
|
|
|
@function frontend-image-url($filename) { |
|
@return url("~assets/images/" + $filename); |
|
} |
|
|
|
$govuk-font-url-function: frontend-font-url; |
|
$govuk-image-url-function: frontend-image-url; |
|
|
|
@import "~govuk-frontend/govuk/base"; |
|
@import "~govuk-frontend/govuk/core/typography"; |
|
@import "~govuk-frontend/govuk/objects/all"; |
|
|
|
@import "~govuk-frontend/govuk/components/button"; |
|
@import "~govuk-frontend/govuk/components/header"; |
|
@import "~govuk-frontend/govuk/components/table"; |
|
@import "~govuk-frontend/govuk/components/tag"; |
|
|
|
@import "~govuk-frontend/govuk/overrides/all"; |
|
|
|
@import "../styles/button"; |
|
@import "../styles/table-group"; |
|
@import "../styles/tag"; |
|
|
|
// Override default Bootstrap colour palette to match that of GOV.UK |
|
// https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss |
|
|
|
// Colour system |
|
$white: govuk-colour("white"); |
|
$gray-100: govuk-colour("light-grey"); |
|
$gray-200: govuk-colour("light-grey"); |
|
$gray-300: govuk-colour("light-grey"); |
|
$gray-400: govuk-colour("mid-grey"); |
|
$gray-500: govuk-colour("mid-grey"); |
|
$gray-600: govuk-colour("mid-grey"); |
|
$gray-700: govuk-colour("dark-grey"); |
|
$gray-800: govuk-colour("dark-grey"); |
|
$gray-900: govuk-colour("dark-grey"); |
|
$black: govuk-colour("black"); |
|
|
|
$blue: govuk-colour("blue"); |
|
$indigo: govuk-colour("light-purple"); |
|
$purple: govuk-colour("purple"); |
|
$pink: govuk-colour("pink"); |
|
$red: govuk-colour("red"); |
|
$orange: govuk-colour("orange"); |
|
$yellow: govuk-colour("yellow"); |
|
$green: govuk-colour("green"); |
|
$teal: govuk-colour("turquoise"); |
|
$cyan: govuk-colour("light-blue"); |
|
|
|
// Colour assignments |
|
$primary: govuk-colour("green"); |
|
$secondary: govuk-colour("light-grey"); |
|
$success: $govuk-success-colour; |
|
$info: govuk-colour("blue"); |
|
$warning: $govuk-error-colour; |
|
$danger: $govuk-error-colour; |
|
$light: govuk-colour("light-grey"); |
|
$dark: govuk-colour("black"); |
|
|
|
// Options |
|
$enable-rounded: false; |
|
$enable-transitions: false; |
|
$enable-shadows: false; |
|
|
|
// Spacing |
|
$spacers: ( |
|
0: 0, |
|
1: govuk-spacing(1), |
|
2: govuk-spacing(2), |
|
3: govuk-spacing(3), |
|
4: govuk-spacing(6), |
|
5: govuk-spacing(9), |
|
); |
|
|
|
// Body |
|
$body-bg: $govuk-body-background-colour; |
|
$body-color: $govuk-text-colour; |
|
$text-muted: $govuk-secondary-text-colour; |
|
|
|
// Links |
|
$link-hover-color: $govuk-text-colour; |
|
$link-hover-decoration: underline; |
|
|
|
// Focus |
|
$component-active-bg: $govuk-focus-colour; |
|
|
|
// Typography |
|
$font-family-sans-serif: $govuk-font-family-gds-transport; |
|
$font-size-base: 1rem; |
|
$font-size-sm: $font-size-base * .875; // 14px |
|
$font-size-lg: $font-size-base * 1.1875; // 19px |
|
|
|
$h1-font-size: $font-size-base * 3; // 48px |
|
$h2-font-size: $font-size-base * 2.25; // 36px |
|
$h3-font-size: $font-size-base * 1.6875; // 27px |
|
$h4-font-size: $font-size-base * 1.5; // 24px |
|
$h5-font-size: $font-size-base * 1.1875; // 19px |
|
$h6-font-size: $font-size-base; |
|
|
|
$headings-font-weight: $govuk-font-weight-regular; |
|
|
|
// Tables |
|
$table-border-width: 1px; |
|
$table-border-color: $govuk-border-colour; |
|
|
|
// Forms |
|
$input-btn-padding-y: (govuk-spacing(2) - $govuk-border-width-form-element); |
|
$input-btn-padding-x: govuk-spacing(2); |
|
$input-btn-border-width: $govuk-border-width-form-element; |
|
$input-btn-focus-width: $govuk-focus-width; |
|
$input-btn-focus-color-opacity: 1.0; |
|
$input-btn-focus-color: $component-active-bg; |
|
$input-btn-focus-color: $yellow; |
|
$input-btn-line-height: 1; |
|
|
|
// Form - Inputs |
|
$input-border-color: $black; |
|
$input-focus-border-color: $black; |
|
|
|
// Form - Labels |
|
$form-label-font-size: $font-size-lg; |
|
$form-label-font-weight: $govuk-font-weight-bold; |
|
|
|
// Form - Check boxes |
|
$form-check-input-bg: $body-bg; |
|
$form-check-input-border: 2px solid $body-color; |
|
|
|
$form-check-input-checked-color: $body-color; |
|
$form-check-input-checked-bg-color: $body-bg; |
|
$form-check-input-checked-border-color: $body-color; |
|
|
|
$form-check-input-indeterminate-color: $body-color; |
|
$form-check-input-indeterminate-bg-color: $body-bg; |
|
$form-check-input-indeterminate-border-color: $body-color; |
|
|
|
// Breadcrumb |
|
$breadcrumb-active-color: $govuk-text-colour; |
|
$breadcrumb-divider-color: $govuk-secondary-text-colour; |
|
|
|
// Navigation bar |
|
$navbar-brand-font-size: $h4-font-size; |
|
$navbar-dark-color: $white; |
|
$navbar-dark-active-color: #1d8feb; |
|
$navbar-dark-hover-color: $white; |
|
$navbar-dark-brand-color: $white; |
|
$navbar-dark-brand-hover-color: $white; |
|
|
|
// Sass variable overrides must be declared before loading Adminterface styles. |
|
// See: https://adminterface.io/docs/enhancements/customizations#adminterface |
|
@import "~@cmdbrew/adminterface/src/scss/base"; |
|
@import "./active_admin/overrides";
|
|
|