mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-29 22:38:30 -04:00
For some reason Chrome decides that using its own font declaration is preferable to keeping the input looking as it would without autofill. This overrides that with our bigger, better font.
260 lines
3.5 KiB
SCSS
260 lines
3.5 KiB
SCSS
// Extra CSS overlaying elements
|
|
.form-control-1-1 {
|
|
width: 100%;
|
|
}
|
|
|
|
.form-control-5em {
|
|
|
|
width: 100%;
|
|
|
|
@include media(tablet) {
|
|
width: 5em;
|
|
}
|
|
|
|
}
|
|
|
|
.column-main {
|
|
|
|
.heading-large,
|
|
> .heading-medium {
|
|
margin: govuk-spacing(3) 0 govuk-spacing(4) 0;
|
|
word-wrap: break-word;
|
|
|
|
&.top-gutter-0 {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.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: govuk-spacing(6);
|
|
}
|
|
|
|
.form-label {
|
|
margin-bottom: 5px;
|
|
|
|
&.heading-small {
|
|
@include bold-19();
|
|
}
|
|
}
|
|
|
|
.hint {
|
|
color: $secondary-text-colour;
|
|
|
|
.form-label + & {
|
|
display: block;
|
|
margin-top: -5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
.list-bullet {
|
|
|
|
.list-bullet {
|
|
list-style: circle;
|
|
}
|
|
|
|
}
|
|
|
|
details summary {
|
|
text-decoration: underline;
|
|
margin-bottom: govuk-spacing(3);
|
|
}
|
|
|
|
.spreadsheet {
|
|
|
|
margin-bottom: -1 * govuk-spacing(6);
|
|
|
|
.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;
|
|
}
|
|
|
|
.multiple-choice input:disabled+label {
|
|
opacity: 1;
|
|
color: $secondary-text-colour;
|
|
cursor: default;
|
|
}
|
|
|
|
.heading-inline {
|
|
display: inline-block;
|
|
}
|
|
|
|
.bordered-text-box {
|
|
padding: 5px;
|
|
outline: 2px solid $black;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.heading-upcoming-jobs {
|
|
margin-top: govuk-spacing(3);
|
|
}
|
|
|
|
@keyframes live-pulse {
|
|
0% {
|
|
background: $red;
|
|
box-shadow: inset 0 0 0 2px $red, inset 0 0 0 4px $white;
|
|
}
|
|
40% {
|
|
background: $red;
|
|
box-shadow: inset 0 0 0 2px $red, inset 0 0 0 4px $white;
|
|
}
|
|
50% {
|
|
background: $white;
|
|
box-shadow: inset 0 0 0 2px $red, inset 0 0 0 2px $white;
|
|
}
|
|
100% {
|
|
background: $white;
|
|
box-shadow: inset 0 0 0 2px $red, inset 0 0 0 4px $white;
|
|
}
|
|
}
|
|
|
|
.live-broadcast {
|
|
|
|
color: $red;
|
|
font-weight: bold;
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
float: right;
|
|
margin-top: 1px;
|
|
margin-left: 5px;
|
|
border: none;
|
|
background: $red;
|
|
width: 19px;
|
|
height: 19px;
|
|
border-radius: 50%;
|
|
animation: live-pulse 1.5s infinite;
|
|
//box-shadow: inset 0 0 0 2px $red, inset 0 0 0 5px $white;
|
|
}
|
|
|
|
}
|
|
|
|
input:-webkit-autofill::first-line {
|
|
@include core-19;
|
|
}
|