2015-11-25 16:21:28 +00:00
|
|
|
// Extra CSS overlaying elements
|
|
|
|
|
|
2016-02-01 11:59:45 +00:00
|
|
|
#global-header-bar {
|
2016-07-28 09:05:10 +01:00
|
|
|
background-color: $govuk-blue;
|
2016-02-01 11:59:45 +00:00
|
|
|
}
|
|
|
|
|
|
2016-11-22 17:21:12 +00:00
|
|
|
#global-header,
|
|
|
|
|
#global-header.with-proposition {
|
2016-02-08 11:11:55 +00:00
|
|
|
|
|
|
|
|
#logo {
|
|
|
|
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
2016-11-18 10:54:34 +00:00
|
|
|
#product-name {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
padding-left: 5px;
|
2016-02-08 11:11:55 +00:00
|
|
|
}
|
2016-02-01 11:54:10 +00:00
|
|
|
|
2016-02-08 11:11:55 +00:00
|
|
|
}
|
|
|
|
|
|
2016-11-22 17:21:12 +00:00
|
|
|
.header-wrapper {
|
|
|
|
|
.header-global {
|
|
|
|
|
.header-logo {
|
|
|
|
|
|
|
|
|
|
@include media(desktop) {
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-02-08 11:11:55 +00:00
|
|
|
.header-proposition {
|
|
|
|
|
#proposition-links {
|
|
|
|
|
li {
|
|
|
|
|
padding: 0 0 0 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
2016-02-01 11:54:10 +00:00
|
|
|
}
|
|
|
|
|
|
2015-12-15 13:48:23 +00:00
|
|
|
}
|
2015-12-14 16:37:15 +00:00
|
|
|
|
2016-02-01 11:26:38 +00:00
|
|
|
@include media(desktop) {
|
|
|
|
|
#proposition-menu {
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-02-08 11:11:55 +00:00
|
|
|
a {
|
|
|
|
|
&:visited {
|
|
|
|
|
color: $link-colour;
|
|
|
|
|
}
|
Use a Node-based tools for handling assets
…or how to move a bunch of things from a bunch of different places into
`app/static`.
There are three main reasons not to use Flask Assets:
- It had some strange behaviour like only
- It was based on Ruby SASS, which is slower to get new features than libsass,
and meant depending on Ruby, and having the SASS Gem globally installed—so
you’re already out of being a ‘pure’ Python app
- Martyn and I have experience of doing it this way on Marketplace, and we’ve
ironed out the initial rough patches
The specific technologies this introduces, all of which are Node-based:
- Gulp – like a Makefile written in Javascript
- NPM – package management, used for managing Gulp and its related dependencies
- Bower – also package management, and the only way I can think to have
GOV.UK template as a proper dependency
…speaking of which, GOV.UK template is now a dependency. This means it can’t be
modified at all (eg to add a global `#content` wrapper), so every page now
inherits from a template that has this wrapper. But it also means that we have a
clean upgrade path when the template is modified.
Everything else (toolkit, elements) I’ve kept as submodules but moved them to a
more logical place (`app/assets` not `app/assets/stylesheets`, because they
contain more than just SASS/CSS).
2015-12-15 08:20:25 +00:00
|
|
|
}
|
2016-02-02 15:31:11 +00:00
|
|
|
|
2016-02-18 07:44:50 +00:00
|
|
|
.form-control-1-1 {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2016-02-02 15:31:11 +00:00
|
|
|
.form-control-5em {
|
2016-02-08 11:11:55 +00:00
|
|
|
|
2016-02-02 15:31:11 +00:00
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
@include media(tablet) {
|
|
|
|
|
width: 5em;
|
|
|
|
|
}
|
2016-02-08 11:11:55 +00:00
|
|
|
|
2016-02-02 15:31:11 +00:00
|
|
|
}
|
2016-02-03 15:49:28 +00:00
|
|
|
|
|
|
|
|
.column-main {
|
|
|
|
|
|
2017-02-23 10:39:26 +00:00
|
|
|
.heading-large,
|
2016-11-18 11:18:29 +00:00
|
|
|
> .heading-medium {
|
|
|
|
|
margin: 10px 0 15px 0;
|
2018-01-26 14:47:56 +00:00
|
|
|
word-wrap: break-word;
|
2016-02-03 15:49:28 +00:00
|
|
|
}
|
|
|
|
|
|
2016-11-18 11:18:29 +00:00
|
|
|
> .grid-row:first-child {
|
2016-05-17 09:18:23 +01:00
|
|
|
|
2016-11-18 11:18:29 +00:00
|
|
|
.heading-large,
|
|
|
|
|
.heading-medium {
|
|
|
|
|
margin: 10px 0 15px 0;
|
2018-01-26 14:47:56 +00:00
|
|
|
word-wrap: break-word;
|
2016-03-29 16:15:15 +01:00
|
|
|
}
|
2016-05-17 09:18:23 +01:00
|
|
|
|
2016-03-29 16:15:15 +01:00
|
|
|
}
|
|
|
|
|
|
2016-02-03 15:49:28 +00:00
|
|
|
}
|
2016-02-09 10:28:12 +00:00
|
|
|
|
|
|
|
|
.highlight {
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
overflow-x: scroll;
|
2016-03-15 06:53:06 +00:00
|
|
|
padding: 10px 0 10px 10px;
|
2016-02-09 10:28:12 +00:00
|
|
|
}
|
2016-02-19 15:02:13 +00:00
|
|
|
|
|
|
|
|
.inline {
|
|
|
|
|
|
|
|
|
|
.block-label {
|
|
|
|
|
|
|
|
|
|
@include media(tablet) {
|
|
|
|
|
float: none;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
2016-03-16 11:01:19 +00:00
|
|
|
|
|
|
|
|
td {
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.heading-xlarge {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
2016-03-18 16:25:43 +00:00
|
|
|
|
2016-04-18 11:10:47 +01:00
|
|
|
.heading-medium {
|
|
|
|
|
margin-top: $gutter;
|
|
|
|
|
}
|
|
|
|
|
|
2016-03-22 13:18:06 +00:00
|
|
|
.form-label {
|
|
|
|
|
margin-bottom: 5px;
|
2016-03-23 10:41:37 +00:00
|
|
|
}
|
|
|
|
|
|
2016-04-06 13:38:10 +01:00
|
|
|
.hint {
|
|
|
|
|
color: $secondary-text-colour;
|
|
|
|
|
}
|
2016-04-18 11:10:47 +01:00
|
|
|
|
2016-04-20 15:47:25 +01:00
|
|
|
.list-bullet {
|
|
|
|
|
|
|
|
|
|
.list-bullet {
|
|
|
|
|
list-style: circle;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
2016-05-17 09:18:23 +01:00
|
|
|
|
|
|
|
|
details summary {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
margin-bottom: $gutter-half;
|
|
|
|
|
}
|
2016-05-27 16:21:29 +01:00
|
|
|
|
|
|
|
|
.spreadsheet {
|
|
|
|
|
|
2018-01-26 15:37:37 +00:00
|
|
|
margin-bottom: -$gutter;
|
|
|
|
|
|
2018-11-01 15:31:14 +00:00
|
|
|
.table {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2016-05-27 16:21:29 +01:00
|
|
|
th,
|
|
|
|
|
.table-field-index {
|
|
|
|
|
background: $grey-4;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
th, td {
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
padding-right: 10px;
|
|
|
|
|
border: 1px solid $border-colour;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
td {
|
2018-11-01 15:31:14 +00:00
|
|
|
|
2016-05-27 16:21:29 +01:00
|
|
|
border-top: 0;
|
2018-11-01 15:31:14 +00:00
|
|
|
// 194 is the width of the table * 1/3.5, so the overflow cuts off
|
|
|
|
|
// at 3.5 columns wide.
|
|
|
|
|
// 11 accounts for the padding of the table cell
|
|
|
|
|
min-width: 194px - 11px;
|
|
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
|
min-width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fullscreen-fixed-table {
|
2018-11-01 16:03:16 +00:00
|
|
|
|
2018-11-01 15:31:14 +00:00
|
|
|
z-index: 1000;
|
2018-11-01 16:03:16 +00:00
|
|
|
|
|
|
|
|
.table-field-heading-first {
|
|
|
|
|
background: $grey-4;
|
|
|
|
|
}
|
|
|
|
|
|
2016-05-27 16:21:29 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
2016-07-28 09:05:10 +01:00
|
|
|
|
2016-09-29 18:44:10 +01:00
|
|
|
.body-copy-table {
|
|
|
|
|
|
2017-03-06 14:35:31 +00:00
|
|
|
table {
|
|
|
|
|
|
|
|
|
|
th,
|
|
|
|
|
td {
|
|
|
|
|
@include core-19;
|
2017-09-14 13:10:56 +01:00
|
|
|
word-wrap: break-word;
|
2017-03-06 14:35:31 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
thead {
|
|
|
|
|
th {
|
|
|
|
|
@include bold-19;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-09-29 18:44:10 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tabular-numbers {
|
|
|
|
|
@include core-19($tabular-numbers: true);
|
|
|
|
|
}
|
2016-10-12 15:55:53 +01:00
|
|
|
|
|
|
|
|
summary::-moz-details-marker {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
summary::-ms-details-marker {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
summary::-o-details-marker {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
summary::details-marker {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
summary::-webkit-details-marker {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
details .arrow {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
2016-11-01 15:34:04 +00:00
|
|
|
|
|
|
|
|
.block-label-hint {
|
|
|
|
|
@include core-16;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
2017-02-14 11:33:55 +00:00
|
|
|
#content.override-elements-content {
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
}
|
2017-04-10 14:51:32 +01:00
|
|
|
|
|
|
|
|
.multiple-choice input:disabled+label {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
color: $secondary-text-colour;
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
2017-06-26 14:41:00 +01:00
|
|
|
|
|
|
|
|
.heading-inline {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
2018-03-19 13:11:32 +00:00
|
|
|
|
2018-05-18 14:05:48 +01:00
|
|
|
.bordered-image {
|
|
|
|
|
padding: 5px;
|
|
|
|
|
outline: 1px solid $border-colour;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
|
|
|
|
|
label & {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
2018-06-25 13:34:54 +01:00
|
|
|
|
|
|
|
|
.bordered-text-box {
|
|
|
|
|
padding: 5px;
|
|
|
|
|
outline: 2px solid $black;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
2018-07-02 09:16:48 +01:00
|
|
|
|
|
|
|
|
.nowrap {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|