mirror of
https://github.com/ISEAL-Community/iseal-core.git
synced 2024-12-23 05:32:26 +01:00
Alan Orth
6970aec24a
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.
72 lines
1.8 KiB
SCSS
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;
|
|
}
|