Permalink
Find file
6ba5a66 Dec 5, 2016
@gemmaleigh @robinwhittleton @p-m-p
379 lines (299 sloc) 6.75 KB
@import "main";
// ==========================================================================
// Elements page styles
// ==========================================================================
// These are example styles, used only for the elements pages
.elements-index {
// Reduce top and bottom margins
.heading-medium {
margin: 1em 0 0 0;
}
// Add spacing above
.divider {
margin-top: 4em;
}
}
// Increase spacing above headings
.heading-xlarge {
@include media(tablet) {
margin-top: em(60, 48);
margin-bottom: em(30, 48);
}
}
// Page contents
.heading-contents {
margin-top: 3em;
}
.list-contents li {
@include core-16;
}
// Use for paragraphs before lists
.lead-in {
margin-bottom: 0;
}
// Lists
.list-bullet {
margin-bottom: ($gutter*1.5);
}
.list-underline {
border-top: 1px solid #bfc1c3;
}
.list-underline li {
border-bottom: 1px solid #bfc1c3;
padding: 2px 0 3px 0;
}
.list-underline a {
text-decoration: none;
}
.no-top-margin {
margin-top: 0;
}
// Example boxes
// ==========================================================================
.example {
@extend %contain-floats;
position: relative;
overflow: hidden;
border: 1px solid $grey-2;
margin-top: $gutter-half;
margin-bottom: $gutter-half;
padding-top: $gutter;
padding-right: $gutter-half;
padding-bottom: $gutter-half;
padding-left: $gutter-half;
@include media(tablet) {
padding-top: $gutter*1.5;
padding-right: $gutter;
padding-bottom: $gutter;
padding-left: $gutter;
}
&:before {
content: "EXAMPLE";
position: absolute;
top: 0;
left: 0;
padding: em(4) em(15) em(4) em(15);
@include core-14;
background: $grey-2;
color: white;
}
// Blue text for heading sizes
.highlight {
font-style: normal;
color: $hm-government;
}
// Lists (reset this to elements default)
.list-bullet {
margin-bottom: 20px;
}
// Fix grid layout within example boxes for IE7 and below
// where box-sizing isn't supported: http://caniuse.com/#search=box-sizing
@mixin example-box-column($width) {
width: (($site-width - $gutter) * $width) - $gutter;
}
@include ie-lte(7){
// Set example box width to 900px (removing left and right padding)
$example-box-width: $site-width - ($gutter * 2);
width: $example-box-width;
// Recalculate grid column widths
.column-quarter {
@include example-box-column( 1/4 );
}
.column-half {
@include example-box-column( 1/2 );
}
.column-third {
@include example-box-column( 1/3 );
}
.column-two-thirds {
@include example-box-column( 2/3 );
}
// Scale images to fit grid columns
img {
width: 100%;
}
}
}
// 1. Layout
// ==========================================================================
.example-grid p {
width: 100%;
background: file-url("examples/grid.png") 0 0 repeat;
margin-bottom: 0;
height: 30px;
@include media(tablet) {
height: 60px;
}
overflow: hidden;
text-indent: -999em;
}
// 2. Typography
// ==========================================================================
// 3. Colour
// ==========================================================================
// Colour swatches
.swatch {
width: 60px;
height: 60px;
@include border-radius(100%);
@include media(mobile) {
clear: both;
float: left;
margin-right: $gutter-half;
margin-bottom: $gutter-half;
}
@include media(tablet) {
margin: 0 auto $gutter-half auto;
}
}
// Sass list for colour palette
$palette: (
("purple", $purple),
("mauve", $mauve),
("fuschia", $fuschia),
("pink", $pink),
("baby-pink", $baby-pink),
("red", $red),
("mellow-red", $mellow-red),
("orange", $orange),
("brown", $brown),
("yellow", $yellow),
("green", $green),
("grass-green", $grass-green),
("turquoise", $turquoise),
("light-blue", $light-blue),
("govuk-blue", $govuk-blue)
);
@mixin color-swatches {
@each $color in $palette {
$color-name: nth($color, 1);
$color-var: nth($color, 2);
.swatch-#{$color-name} {
background-color: $color-var;
}
}
}
// Generate swatch classes for each colour in palette list
@include color-swatches;
.swatch-alpha {
background-color: $alpha-colour;
}
.swatch-beta {
background-color: $beta-colour;
}
.swatch-discovery {
background-color: $discovery-colour;
}
.swatch-live {
background-color: $live-colour;
}
.swatch-error {
background-color: $error-colour;
}
.swatch-focus {
background-color: $focus-colour;
}
.swatch-button-colour {
background-color: $button-colour;
}
.swatch-black {
background-color: $black;
}
.swatch-grey-1 {
background-color: $grey-1;
}
.swatch-grey-2 {
background-color: $grey-2;
}
.swatch-grey-3 {
background-color: $grey-3;
}
.swatch-grey-4 {
background-color: $grey-4;
}
.swatch-white {
background-color: $white;
border: 1px solid $grey-3;
}
.swatch-text-colour {
background-color: $text-colour;
}
.swatch-text-secondary {
background-color: $secondary-text-colour;
}
.swatch-page-colour {
background-color: $page-colour;
border: 1px solid $grey-3;
}
.swatch-button-colour {
background-color: $button-colour;
}
.swatch-link-colour {
background-color: $link-colour;
}
.swatch-link-colour-visited {
background-color: $link-visited-colour;
}
.swatch-link-colour-hover {
background-color: $link-hover-colour;
}
.swatch-border-colour {
background-color: $border-colour;
}
.swatch-panel-colour {
background-color: $panel-colour;
}
.swatch-highlight-colour {
background-color: $highlight-colour;
}
// Colour swatch layout
.swatch-wrapper {
@include media(tablet) {
float: left;
width: 20%;
text-align: center;
}
.heading-small {
margin-bottom: em(10);
}
ul {
list-style-type: none;
padding-bottom: $gutter-half;
@include media(mobile) {
min-height: 50px;
padding-top: 10px;
}
}
li {
@include core-16;
}
b {
font-weight: bold;
text-transform: uppercase;
}
}
// 4. Images and icons
// ==========================================================================
.example-images img {
max-width: 100%;
vertical-align: top;
}
// 5. Data
// ==========================================================================
.example .data {
margin-bottom: 0;
}
// 6. Forms
// ==========================================================================
// 7. Buttons
// ==========================================================================
// Remove top margin from headings in the "Creating buttons" example
.example-button .heading-small {
margin-top: 0;
}
// Make swatch wrapper full width for "Creating buttons" example
.example-button .swatch-wrapper {
width: 100%;
}
// 9. Alpha beta banners
// ==========================================================================