@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/themes/cr/2019/_cr19-styleguide.scss

@@ -0,0 +1,654 @@
+//==========================================================================
+// Elements
+// ==========================================================================
+
+// Elements
+//
+// Style guide: 10
+
+// Typography
+//
+// Markup: typography.twig
+//
+// Style guide: 10.1
+
+// Links
+//
+// Links are used for call-to-actions that are lower in the hierachy and aren’t as key as ones used in buttons. They can also be used for call-to-actions with a longer character count.
+//
+// .link--small - Small - The font size is 16px and line height is 26px. Border / underline is 4px.
+//
+// Markup: links.twig
+//
+// Style guide: 10.25
+
+// Buttons
+//
+// Markup: buttons.twig
+//
+// Style guide: 10.3
+
+// Background Colours
+//
+// To be used by row components
+//
+// Markup: background-colours.twig
+
+// Colours
+//
+// Markup: colour.twig
+//
+// Style guide: 10.5
+
+// Background Colours
+//
+// To be used by row components
+//
+// Markup: background-colours.twig
+//
+// Style guide: 10.6
+
+// External Link
+//
+// Markup:
+// <a href="#" class="external-link">External Link</a>
+//
+// Style guide: 10.7
+
+// Lists
+//
+// These are the list items
+//
+// Markup:
+// <div class="cr-body">
+//  <ul>
+//    <li>Item 1</li>
+// 	  <li>Item 2</li>
+// 	  <li>Item 3</li>
+// 	  <li>Item 4</li>
+//  </ul>
+// </div>
+//
+// Style guide: 10.8
+
+// Table
+//
+// Standard Table
+//
+// Markup: table.twig
+//
+// Style guide: 10.9
+
+// Forms
+//
+// New Standard Forms
+//
+// Markup: form.twig
+//
+// Style guide: 10.11
+
+// Highlight
+//
+// .highlight--red - Red highlight
+// .highlight--purple - Purple highlight
+// .highlight--royal-blue - Royal-blue highlight
+// .highlight--mint-green - Mint-green highlight
+// .highlight--white - Mint-green highlight
+//
+// Markup: highlight.twig
+//
+// Style guide: 10.19
+
+// ==========================================================================
+// Components
+// ==========================================================================
+
+// Components
+//
+// Style guide: 20
+
+// Background Single Message
+//
+// This is Paragraph Background Single Message type with an image as background
+//
+// Markup: background-single-msg.twig
+//
+// Style guide: 20.80
+
+// Card banner
+//
+// Uses card block.
+//
+// Markup: card-banner.twig
+//
+// Style guide: 20.197
+
+// Card Block
+//
+// Standard Card Block
+//
+// When no card background colour is selected the card content will have no left and right padding.
+// When a background colour is selected the card content will have padding all around (see cards grid below).
+//
+// Markup: card.twig
+//
+// Style guide: 20.60
+
+// Cards
+//
+// Markup: cards.twig
+//
+// .cards--four-grid.cards--feature-layout - Feature Layout
+// .cards--four-grid - Grid of four cards left aligned (default)
+// .cards--four-grid-centre - Grid of four cards centre align
+// .cards--three-grid - Grid of three cards left aligned
+// .cards--three-grid-centre - Grid of three cards centre align
+// .cards--two-grid - Grid of two cards centre-aligned
+//
+// Style guide: 20.61
+
+// Content Reference Block
+//
+// Comes in 4 sizes.
+//
+// Markup: content-block.twig
+//
+// .block-content--view-mode-cw-s -  Small
+// .block-content--view-mode-cw-m  -  Medium
+// .block-content--view-mode-cw-mp -  Medium Plus
+// .block-content--view-mode-cw-l  -  Large
+//
+// Style guide: 20.40
+
+// Story
+//
+// This is the Story row component (aka fundraising journey)
+//
+// Markup: _story.twig
+//
+// Style guide: 20.90
+
+// Teaser Block
+//
+// Comes in 4 sizes and in a background-image and no-image versions (the latter not displayed here).
+// Content is editable.
+//
+// Markup: teaser-block.twig
+//
+// .block-content--view-mode-cw-s.teaser-block  -  Small
+// .block-content--view-mode-cw-m.teaser-block  -  Medium
+// .block-content--view-mode-cw-mp.teaser-block -  Medium Plus
+// .block-content--view-mode-cw-l.teaser-block  -  Large
+// .block-content--view-mode-cw-s.teaser-block.teaser-block--bg-image  -  Small Background image
+// .block-content--view-mode-cw-m.teaser-block.teaser-block--bg-image  -  Medium Background image
+// .block-content--view-mode-cw-mp.teaser-block.teaser-block--bg-image -  Medium Plus Background image
+// .block-content--view-mode-cw-l.teaser-block.teaser-block--bg-image  -  Large Background image
+//
+// Style guide: 20.20
+
+// Single Message
+//
+// Markup: single-msg.twig
+//
+// .single-msg--copy-left - Copy left
+// .single-msg--copy-only - Copy only
+//
+// Style guide: 20.70
+
+// Partners row
+//
+// This is the Partners Row
+//
+// Markup: partners-row.twig
+//
+// Style guide: 20.102
+
+// Partners Grid
+//
+// This is the Partners Grid
+//
+// Markup: partners-grid.twig
+//
+// Style guide: 20.101
+
+// Postcode lookup
+//
+// This is postcode lookup
+//
+// Markup: postcode-lookup.twig
+//
+// Style guide: 20.1005
+
+// Progress bar
+//
+// This is Progress bar
+//
+// Markup: progress-bar.twig
+//
+// Style guide: 20.1000
+
+// Progress indicator
+//
+// This is Progress indicator
+//
+// Markup: progress-indicator.twig
+//
+// Style guide: 20.1001
+
+// Quote Block
+//
+// Comes in 4 sizes.
+//
+// Markup: content-wall-quote.twig
+//
+// .block-content--view-mode-cw-s.cw-quote  -  Small
+// .block-content--view-mode-cw-m.cw-quote  -  Medium
+// .block-content--view-mode-cw-mp.cw-quote -  Medium Plus
+// .block-content--view-mode-cw-l.cw-quote  -  Large
+//
+// Style guide: 20.30
+
+// Search block
+//
+// Markup: search.twig
+//
+// Style guide: 20.195
+
+// News teaser
+//
+// Markup: news-teaser.twig
+//
+// Style guide: 20.23
+
+// Pagination
+//
+// Markup: pagination.twig
+//
+// Style guide: 20.150
+
+// Feature Articles block
+//
+// Feature Articles by category block
+//
+// Markup: feature-articles-block.twig
+//
+// Style guide: 20.48
+
+// Fundraising target
+//
+// Markup: fundraising-target.twig
+//
+// Style guide: 20.1002
+
+// Header
+//
+// Markup: base_header.twig
+//
+// Style guide: 20.180
+
+// Just-in-time block
+//
+// Markup: just-in-time-block.twig
+//
+// Style guide: 20.1004
+
+// Media Reference Block
+//
+// Comes in 4 sizes.
+//
+// Markup: media-block.twig
+//
+// .block-content--view-mode-cw-s -  Small
+// .block-content--view-mode-cw-m  -  Medium
+// .block-content--view-mode-cw-mp -  Medium Plus
+// .block-content--view-mode-cw-l  -  Large
+//
+// Style guide: 20.50
+
+// Cookie consent
+//
+// Markup: cookie-consent.twig
+//
+// Style guide: 20.115
+
+// Promo header
+//
+// Markup: promo-header.twig
+//
+// Style guide: 20.95
+
+// Footer
+//
+// Markup: footer.twig
+//
+// Style guide: 20.190
+
+// Full Height - Single Image / Single Copy
+//
+// Markup: full-height-single-image-single-copy.twig
+//
+// .paragraph--full-height-single-image-single-copy--image-right - image right
+//
+// Style guide: 20.1006
+
+// Full Height - Double Image / Single Copy
+//
+// Markup: full-height-double-image-single-copy.twig
+//
+// .paragraph--full-height-double-image-single-copy--image-right - image right
+//
+// Style guide: 20.1007
+
+// Full Height - Single Image / Triple Copy
+//
+// Markup: full-height-single-image-triple-copy.twig
+//
+// .paragraph--full-height-sing-img-triple-copy--image-right - image right
+//
+// Style guide: 20.1008
+
+// Fixed-ratio-image
+//
+// Markup: fixed-ratio-image.twig
+//
+// .paragraph--fixed-ratio-image--image-right - image right 
+//
+// Style guide: 20.1009
+
+// Copy-Video
+//
+// Markup: copy-video.twig
+//
+// .paragraph--copy-video--video-right - video right 
+//
+// Style guide: 20.1010
+
+// Full Height Single Image
+//
+// Markup: full-height-single-image.twig
+//
+// .paragraph--full-height-single-image--no-image - no image
+// .fhsi__middle-left  -  middle left
+// .paragraph--full-height-single-image--no-image.fhsi__middle-left - no image middle left
+// .paragraph--full-height-single-image--no-image.fhsi__middle-left - no image, middle left
+// .fhsi__middle-right  -  middle right
+// .paragraph--full-height-single-image--no-image.fhsi__middle-right - no image, middle right
+// .fhsi__top-left  - top left
+// .paragraph--full-height-single-image--no-image.fhsi__top-left - no image top left
+// .paragraph--full-height-single-image--no-image.fhsi__top-left - no image, top left
+// .fhsi__top-centre  -  top centre
+// .paragraph--full-height-single-image--no-image.fhsi__top-centre - no image, top centre
+// .fhsi__top-right  -  top right
+// .paragraph--full-height-single-image--no-image.fhsi__top-right - no image top right
+// .fhsi__bottom-left  -  bottom left
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-left - no image bottom left
+// .fhsi__bottom-centre  -  bottom centre
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-centre - no image bottom centre
+// .fhsi__bottom-right  -  bottom right
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-right - no image bottom right
+//
+// .paragraph--full-height-single-image--no-image.fhsi__top-right - no image, top right
+// .fhsi__bottom-left  -  bottom left
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-left - no image, bottom left
+// .fhsi__bottom-centre  -  bottom centre
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-centre - no image, bottom centre
+// .fhsi__bottom-right  -  bottom right
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-right - no image, bottom right
+// .paragraph--full-height-single-image--no-image.fhsi__fifty-vh - no image, 50vh variant
+// .fhsi__middle-left.fhsi__fifty-vh  -  middle left, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__middle-left.fhsi__fifty-vh - no image, middle left, 50vh variant
+// .fhsi__middle-right.fhsi__fifty-vh  -  middle right, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__middle-right.fhsi__fifty-vh - no image, middle right, 50vh variant
+// .fhsi__top-left.fhsi__fifty-vh  - top left, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__top-left.fhsi__fifty-vh - no image, top left, 50vh variant
+// .fhsi__top-centre.fhsi__fifty-vh  -  top centre, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__top-centre.fhsi__fifty-vh - no image, top centre, 50vh variant
+// .fhsi__top-right.fhsi__fifty-vh  -  top right, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__top-right.fhsi__fifty-vh - no image, top right, 50vh variant
+// .fhsi__bottom-left.fhsi__fifty-vh  -  bottom left, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-left.fhsi__fifty-vh - no image, bottom left, 50vh variant
+// .fhsi__bottom-centre.fhsi__fifty-vh  -  bottom centre, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-centre.fhsi__fifty-vh - no image, bottom centre, 50vh variant
+// .fhsi__bottom-right.fhsi__fifty-vh  -  bottom right, 50vh variant
+// .paragraph--full-height-single-image--no-image.fhsi__bottom-right.fhsi__fifty-vh - no image, bottom right, 50vh variant
+//
+// Style guide: 20.1011
+
+// Copy - Copy
+//
+// Markup: copy-copy.twig
+//
+// .paragraph--copy-copy--align-top  - Align top
+// .paragraph--copy-copy--align-bottom - Align bottom
+//
+// Style guide: 20.1013
+
+// Background Video - Copy
+//
+// Markup: bg-video-copy.twig
+//
+// .paragraph--background-video-copy--video-right - Video right
+// .paragraph--background-video-copy--fullscreen.middle-centre - Fullscreen BG video middle centre
+// .paragraph--background-video-copy--fullscreen.top-left - Fullscreen BG video top-left
+// .paragraph--background-video-copy--fullscreen.top-centre - Fullscreen BG video top-centre
+// .paragraph--background-video-copy--fullscreen.top-right - Fullscreen BG video top-right
+// .paragraph--background-video-copy--fullscreen.middle-left - Fullscreen BG video middle-left
+// .paragraph--background-video-copy--fullscreen.middle-right - Fullscreen BG video middle-right
+// .paragraph--background-video-copy--fullscreen.bottom-left - Fullscreen BG video bottom-left
+// .paragraph--background-video-copy--fullscreen.bottom-centre - Fullscreen BG video bottom-centre
+// .paragraph--background-video-copy--fullscreen.bottom-right - Fullscreen BG video bottom-right
+//
+// Style guide: 20.1014
+
+// Membership Donate Widget
+//
+// Markup: membership-signup.twig
+//
+// .paragraph--membership-signup--copy-centre - Copy centre
+// .paragraph--membership-signup--copy-left - Copy left
+//
+// Style guide: 20.1015
+
+// ==========================================================================
+// Pages
+// ==========================================================================
+
+// Pages
+//
+// Style guide: 300
+
+// Content Wall
+//
+// Can include Teaser, Quote, Content Reference and Media Reference blocks.
+// Title can be hidden.
+//
+// Markup: content-wall.twig
+//
+// Style guide: 300.1
+
+// News article
+//
+// News article page
+//
+// Markup: news-article.twig
+//
+// Style guide: 300.5
+
+// Press release article page
+//
+// Markup: press-release-article.twig
+//
+// Style guide: 300.6
+
+// News overview page
+//
+// Overview for news landing page with filter
+//
+// Markup: news.twig
+//
+// Style guide: 300.20
+
+// Press releases overview page
+//
+// Markup: news_press-releases.twig
+//
+// Style guide: 300.25
+
+// Partner Page
+//
+// Individual Partner page
+//
+// Markup: partners.twig
+//
+// Style guide: 300.26
+
+// Search results page
+//
+// Markup: search-results.twig
+//
+// Style guide: 300.30
+
+// ==========================================================================
+// Email Sign Up
+// ==========================================================================
+
+// Email sign up
+//
+// Style guide: 120
+
+// Email sign up header
+//
+// Markup: email-signup-header.twig
+//
+// Style guide: 120.1
+
+// Email sign up standard
+//
+// Has a second message for school resources
+//
+// Markup: email-signup-standard.twig
+//
+// Style guide: 120.2
+
+// Email sign up fundraise
+//
+// Markup: email-signup-fundraise.twig
+//
+// Style guide: 120.3
+
+// Email sign up workplace
+//
+// Markup: email-signup-workplace.twig
+//
+// Style guide: 120.4
+
+// Email sign up register interest
+//
+// Markup: email-signup-interest.twig
+//
+// Style guide: 120.5
+
+// ==========================================================================
+// Miscellaneous
+// ==========================================================================
+
+// Miscellaneous
+//
+// Style guide 160
+
+// Animations
+//
+// Markup: animations.twig
+//
+// Style guide: 160.1
+
+// Demo
+//
+// Markup: demo.twig
+//
+// Style guide: 160.2
+
+// ==========================================================================
+// Grid & Breakpoints
+// ==========================================================================
+
+// Grid & Breakpoints
+//
+// Markup: grid.twig
+//
+// Style guide: 1.0
+
+// ==========================================================================
+// Navigation
+// ==========================================================================
+
+// Navigation
+//
+// Different types of navigation
+//
+// Style guide: 185
+
+// Main Nav
+//
+// This is the Main Nav
+//
+// The main nav relies on the smartmenus plugin which is added as a dependency to the pattern-lab. 
+// This plugin will need to be included to any environment in which the main nav component is used.
+//
+// Markup: main-nav.twig
+//
+// Style guide: 185.1
+
+// Feature Nav
+//
+// Markup: feature-nav.twig
+//
+// Style guide: 185.2
+
+// Footer Nav
+//
+// Markup: footer-nav.twig
+//
+// Style guide: 185.3
+
+// Expanded Footer
+//
+// Expanded footer (aka TURBOFOOTER™) for the CR.com site in 2018
+// 
+// Markup: expanded-footer.twig
+//
+// Style guide: 185.5
+
+// ==========================================================================
+// Icons
+// ==========================================================================
+
+// Icons
+//
+// Social sharing icons currently only contain twitter and facebook.
+//
+// Style guide: 140
+
+// Social sharing icons
+//
+// Markup: social-sharing.twig
+//
+// Style guide: 140.1
+
+// Social media follow icons
+//
+// Markup: social-following.twig
+//
+// Style guide: 140.2
+
+// Meta icons
+//
+// Markup: meta-icons.twig
+//
+// Style guide: 140.3
+
+// Inline social icons
+//
+// Markup: inline-social-icons.twig
+//
+// Style guide: 140.4