app/assets/stylesheets/components/preview-pane.scss

.branding-preview {
  width: 100%;
  box-sizing: border-box;
  border: solid 1px $border-colour;
  min-height: 200px;
  margin-bottom: govuk-spacing(6)
}

#logo-img {
  background-color: $grey-4;
  background-image: linear-gradient(45deg, $grey-3 25%, transparent 25%), linear-gradient(-45deg, $grey-3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $grey-3 75%), linear-gradient(-45deg, transparent 75%, $grey-3 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

  img {
    display: block;
  }
}
Rename 'email-branding-preview' CSS styles to 'branding-preview' Renamed since the same styling will be used for previewing letters. 2019-02-13 08:40:52 +00:00			`.branding-preview {`
Add CSS for email preview iframe 2018-08-08 13:38:59 +01:00			`width: 100%;`
			`box-sizing: border-box;`
			`border: solid 1px $border-colour;`
			`min-height: 200px;`
Replace $gutter with govuk-spacing function Replaced `$gutter` and similar variables such as `$gutter-half` with the `govuk-spacing()` static spacing function. This uses `govuk-spacing()` instead of `$govuk-gutter` because `$govuk-gutter` should only be used for the gaps in between grid columns and we were mostly using `$gutter` to add more space around elements. There are other places in the SCSS files where we had hardcoded a measurement in px which could be replaced with `govuk-spacing`, but this commit only replaces the existing uses of `$gutter`. 2020-02-21 13:21:44 +00:00			`margin-bottom: govuk-spacing(6)`
Add CSS for email preview iframe 2018-08-08 13:38:59 +01:00			`}`
Put pattern behind logo images So that white on transparent images are visible. 2018-11-01 13:51:02 +00:00
			`#logo-img {`
			`background-color: $grey-4;`
			`background-image: linear-gradient(45deg, $grey-3 25%, transparent 25%), linear-gradient(-45deg, $grey-3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $grey-3 75%), linear-gradient(-45deg, transparent 75%, $grey-3 75%);`
			`background-size: 20px 20px;`
			`background-position: 0 0, 0 10px, 10px -10px, -10px 0px;`
Rename 'email-branding-preview' CSS styles to 'branding-preview' Renamed since the same styling will be used for previewing letters. 2019-02-13 08:40:52 +00:00
Put pattern behind logo images So that white on transparent images are visible. 2018-11-01 13:51:02 +00:00			`img {`
			`display: block;`
			`}`
			`}`