Files
notifications-admin/app/assets/stylesheets/app.scss
Chris Hill-Scott 4aa4970fc9 Add grey lines to visually show level of nesting
Uses some CSS to draw some grey lines to show which radios descend from
which.

I don’t feel like the intentation is enough, and it looks a bit messy
because the circles of the radio buttons don’t have straight edges
easily suggest visual alignment.

Copies the design from conditionally revealing content in the design
system:
https://design-system.service.gov.uk/components/radios/#conditionally-revealing-content

Implementation is done with pseudo elements, because borders can’t be
positionned exactly enough.
2019-01-04 15:15:59 +00:00

277 lines
3.3 KiB
SCSS

// Extra CSS overlaying elements
#global-header-bar {
background-color: $govuk-blue;
}
#global-header,
#global-header.with-proposition {
#logo {
white-space: nowrap;
#product-name {
font-size: 24px;
font-weight: 400;
padding-left: 5px;
}
}
.header-wrapper {
.header-global {
.header-logo {
@include media(desktop) {
width: auto;
}
&:after {
display: none;
}
}
}
}
.header-proposition {
#proposition-links {
li {
padding: 0 0 0 15px;
}
}
}
}
@include media(desktop) {
#proposition-menu {
float: right;
}
}
a {
&:visited {
color: $link-colour;
}
}
.form-control-1-1 {
width: 100%;
}
.form-control-5em {
width: 100%;
@include media(tablet) {
width: 5em;
}
}
.column-main {
.heading-large,
> .heading-medium {
margin: 10px 0 15px 0;
word-wrap: break-word;
}
> .grid-row:first-child {
.heading-large,
.heading-medium {
margin: 10px 0 15px 0;
word-wrap: break-word;
}
}
}
.highlight {
font-family: monospace;
overflow-x: scroll;
padding: 10px 0 10px 10px;
}
.inline {
.block-label {
@include media(tablet) {
float: none;
display: inline-block;
}
}
}
td {
vertical-align: top;
}
.heading-xlarge {
margin-bottom: 20px;
}
.heading-medium {
margin-top: $gutter;
}
.form-label {
margin-bottom: 5px;
}
.hint {
color: $secondary-text-colour;
}
.list-bullet {
.list-bullet {
list-style: circle;
}
}
details summary {
text-decoration: underline;
margin-bottom: $gutter-half;
}
.spreadsheet {
margin-bottom: -$gutter;
.table {
margin-bottom: 0;
}
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 {
border-top: 0;
// 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 {
z-index: 1000;
.table-field-heading-first {
background: $grey-4;
}
}
}
.body-copy-table {
table {
th,
td {
@include core-19;
word-wrap: break-word;
}
thead {
th {
@include bold-19;
}
}
}
}
.tabular-numbers {
@include core-19($tabular-numbers: true);
}
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;
}
.block-label-hint {
@include core-16;
margin-top: 5px;
}
#content.override-elements-content {
padding-bottom: 0;
}
.multiple-choice input:disabled+label {
opacity: 1;
color: $secondary-text-colour;
cursor: default;
}
.heading-inline {
display: inline-block;
}
.bordered-image {
padding: 5px;
outline: 1px solid $border-colour;
max-width: 100%;
label & {
cursor: pointer;
}
}
.bordered-text-box {
padding: 5px;
outline: 2px solid $black;
max-width: 100%;
}
.nowrap {
white-space: nowrap;
}