Skip to content

Commit

Permalink
Make input work on older layouts
Browse files Browse the repository at this point in the history
The bank holidays page is using an older layout, which includes the
button CSS. This contains a style rule on the `input` element, rather
than a class.

https://github.com/alphagov/static/blob/79d29b6a4221874ead27e67d007704a6
be166a57/app/assets/stylesheets/helpers/_buttons.scss#L91-L122

To make the styles work on these layouts we need to make the component
more specific (unfortunately). We also reset the margin to override the
styles from buttons.css

https://trello.com/c/8TC3AEms
  • Loading branch information
tijmenb committed Feb 16, 2018
1 parent 0be945f commit 19035c7
Showing 1 changed file with 10 additions and 2 deletions.
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
.gem-c-input {
// scss-lint:disable QualifyingElement
.gem-c-input,

// Explicitly set the input type so that we have higher specificity than
// https://github.com/alphagov/static/blob/79d29b6a4221874ead27e67d007704a6be166a57/app/assets/stylesheets/helpers/_buttons.scss#L91-L122
// This can be removed once everything is using `core_layout`.
input[type=text].gem-c-input {
@include core-19;

box-sizing: border-box;
width: 100%;
height: 2.10526em;
margin-top: 0;

margin: 0; // Override unwanted global cascaded styles
margin-bottom: 20px;

padding: $gem-spacing-scale-1;
Expand All @@ -16,6 +23,7 @@
// Disable inner shadow and remove rounded corners
appearance: none;
}
// scss-lint:enable QualifyingElement

@media (min-width: 40.0625em) {
.govuk-c-input {
Expand Down

0 comments on commit 19035c7

Please sign in to comment.