iseal-core/site/source/scss/iseal.scss
Alan Orth 6970aec24a
site: style buttons for required elements
We wanted a way to increase the findability of required elements in
addition the the "required" badge on the element's information box.
This styles the button in the module grouping as well.
2022-02-14 21:43:38 +03:00

72 lines
1.8 KiB
SCSS

// override some Bootstrap colors. Apparently we need to do this *before* we
// process Bootstrap.
// ISEAL primary (dark) blue
$primary: rgb(0, 82, 142);
// ISEAL secondary (light) blue
$secondary: rgb(27, 118, 188);
// Tint colors (80%, 60%, 40%, and 20% of primary blue)
$iseal-tint-80: rgb(68, 106, 160);
$iseal-tint-60: rgb(113, 136, 181);
$iseal-tint-40: rgb(159, 172, 205);
$iseal-tint-20: rgb(206, 212, 229);
// Secondary colors
$iseal-secondary-orange: rgb(223, 155, 24);
$iseal-secondary-green: rgb(137, 168, 52);
$iseal-secondary-red: rgb(196, 41, 55);
$iseal-secondary-purple: rgb(116, 68, 129);
// selectively import components we need from bootstrap
// see: node_modules/bootstrap/scss/bootstrap.scss
@import 'bootstrap';
// common style overrides
@import 'main';
div.badge-required {
float: right;
span {
background-color: $iseal-secondary-red;
}
}
// Style the buttons for required metadata elements. Note the syntax for the
// hover and active states uses the SASS parent selector "&" so we can nest
// the rules.
.btn-required {
color: $iseal-secondary-red;
border-color: $iseal-secondary-red;
&:hover, &:active {
color: #fff;
background-color: $iseal-secondary-red;
}
}
/* Override Bootstrap's top border on tbody */
.table>:not(:first-child) {
border-top: 2px solid $iseal-tint-80;
}
// The ISEAL Branding Guidelines Version 3.0 say that headings should be bold
// weight and primary blue color.
h1, h2, h3, h4 {
color: $primary;
font-weight: 700;
}
// Add a bit of space below the logo
#iseal-logo {
margin-bottom: 3px;
}
// Vertically align the heading with the ISEAL logo in the navigation bar. The
// default Bootstrap padding is 16px on the navbar, so we need that plus a few
// more to achieve visual alignment with the bottom of the logo.
#iseal-heading {
padding-top: 21px;
}