General

mixins

oTeaserClearfix

@mixin oTeaserClearfix() { ... }

Description

Clearfix helper styles Outputs clearfix styles on the current element

Parameters

None.

Used by

[private] _oTeaserGetElementsMixin

@mixin _oTeaserGetElementsMixin($group) { ... }

Description

Includes the correct mixin for elements based on the group name passed

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$groupnoneStringnone

Used by

[private] _oTeaserGetThemeMixin

@mixin _oTeaserGetThemeMixin($theme) { ... }

Description

Includes the correct mixin for themes based on the theme name passed

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$themenoneStringnone

Used by

oTeaser

@mixin oTeaser() { ... }

Description

Output styles for teasers. Can be passed a list of styles to output, or 'all' to output everything

Parameters

None.

Throws

  • There is no theme

Requires

oTeaserBase

@mixin oTeaserBase() { ... }

Description

Base styles for a teaser sets the font and basic display properties

Parameters

None.

Used by

oTeaserHeading

@mixin oTeaserHeading() { ... }

Description

Teaser heading styles. Including link and hover styling.

Parameters

None.

Requires

oTeaserMeta

@mixin oTeaserMeta() { ... }

Description

Meta area and colouring styles

Parameters

None.

oTeaserTag

@mixin oTeaserTag() { ... }

Description

Tag styling. Element should be a link, otherwise use oTeaserMeta

Parameters

None.

Requires

oTeaserDuration

@mixin oTeaserDuration() { ... }

Description

Video duration styles

Parameters

None.

oTeaserStandfirst

@mixin oTeaserStandfirst() { ... }

Description

Styles for standfirst element

Parameters

None.

Requires

oTeaserImage

@mixin oTeaserImage() { ... }

Description

Default image styles

Parameters

None.

oTeaserImagePlaceholder

@mixin oTeaserImagePlaceholder() { ... }

Description

Image placeholder styles to create a 16:9 space for when an image is being lazy-loaded

Parameters

None.

oTeaserHeadshot

@mixin oTeaserHeadshot() { ... }

Description

Headshot styles and modification of content to accomodate the headshot. Should be used outside of a selector

Parameters

None.

oTeaserPromotedContent

@mixin oTeaserPromotedContent() { ... }

Description

Promoted content theme

Parameters

None.

Requires

oTeaserPaidPost

@mixin oTeaserPaidPost() { ... }

Description

Paid post theme

Parameters

None.

oTeaserRelated

@mixin oTeaserRelated() { ... }

Description

Related content list styles

Parameters

None.

oTeaserRelatedItem

@mixin oTeaserRelatedItem() { ... }

Description

Single related content item styles

Parameters

None.

Requires

oTeaserTimestamp

@mixin oTeaserTimestamp() { ... }

Description

Timestamp base styles

Parameters

None.

Requires

oTeaserTimestampVariants

@mixin oTeaserTimestampVariants() { ... }

Description

Timestamp variant styles adding coloured prefixes. Includes keyframe declaration so must be used outside of a selector

Parameters

None.

oTeaserHero

@mixin oTeaserHero() { ... }

Description

Base styles for a hero layout teaser

Parameters

None.

oTeaserHeroThemeBase

@mixin oTeaserHeroThemeBase() { ... }

Description

Base styles for themed hero teasers

Parameters

None.

Requires

oTeaserHeroOpinion

@mixin oTeaserHeroOpinion() { ... }

Description

Hero opinion theme - blue background white based text

Parameters

None.

Requires

oTeaserHeroImage

@mixin oTeaserHeroImage() { ... }

Description

Hero image theme styles - full size image with text overlay

Parameters

None.

Requires

oTeaserHeroImageContainer

@mixin oTeaserHeroImageContainer() { ... }

Description

Hero teaser image container - for standard hero teasers

Parameters

None.

oTeaserHeroCentre

@mixin oTeaserHeroCentre() { ... }

Description

Centred hero teaser styles for centering content

Parameters

None.

Used by

oTeaserHeroCentreImage

@mixin oTeaserHeroCentreImage() { ... }

Description

Centred hero teaser styles to centre image

Parameters

None.

Used by

oTeaserHeroStandalone

@mixin oTeaserHeroStandalone() { ... }

Description

Hero standalone theme styles

Parameters

None.

oTeaserLarge

@mixin oTeaserLarge() { ... }

Description

Styles for large teasers. Also form the basis of styles for hero teasers

Parameters

None.

Requires

oTeaserLargeWithImage

@mixin oTeaserLargeWithImage() { ... }

Description

Adjusts large teasers to work with images. Appears in portrait at default-medium, landscape in medium-large, and portrait from large up

Parameters

None.

oTeaserImageContainer

@mixin oTeaserImageContainer() { ... }

Description

Image container styles for large image at various breakpoints

Parameters

None.

oTeaserLargeImagePortrait

@mixin oTeaserLargeImagePortrait() { ... }

Description

Forces a large teaser to always appear in the portrait style, regardless of breakpoint

Parameters

None.

oTeaserLargeImageLandscape

@mixin oTeaserLargeImageLandscape() { ... }

Description

Forces a large teaser to always appear in the landscape style, regardless of breakpoint

Parameters

None.

oTeaserSmall

@mixin oTeaserSmall() { ... }

Description

Small teaser styles

Parameters

None.

oTeaserSmallStacked

@mixin oTeaserSmallStacked() { ... }

Description

Small teaser styles for a stacked image image will appear 100% width at the top of the teaser

Parameters

None.

oTeaserInverse

@mixin oTeaserInverse() { ... }

Description

Inverse theme styles - base all text content on white

Parameters

None.

Requires

Used by

oTeaserStretched

@mixin oTeaserStretched() { ... }

Description

Make a teaser fill the full height of it's container (if the container is flex) and stretch the heading to move standfirst and timestamp to card footer

Parameters

None.

oTeaserOpinion

@mixin oTeaserOpinion() { ... }

Description

General opinion theme teaser - turns tag content blue

Parameters

None.

oTeaserOpinionBackground

@mixin oTeaserOpinionBackground() { ... }

Description

Opinion background theme - colours background blue and adjust text

Parameters

None.

Requires

oTeaserHighlight

@mixin oTeaserHighlight() { ... }

Description

Highlight theme - colours background claret and adjust text colours

Parameters

None.

Requires

oTeaserTopStoryBase

@mixin oTeaserTopStoryBase() { ... }

Description

Base Top story styles for all variants

Parameters

None.

oTeaserTopStoryStandalone

@mixin oTeaserTopStoryStandalone() { ... }

Description

Standalone top story theme styles

Parameters

None.

oTeaserTopStoryLandscape

@mixin oTeaserTopStoryLandscape() { ... }

Description

Landscape top story theme styles

Parameters

None.

Requires

oTeaserTopStoryBigStory

@mixin oTeaserTopStoryBigStory() { ... }

Description

Big Story top story theme styles

Parameters

None.

functions

oTeaserTextColor

@function oTeaserTextColor($color: #000000, $background: #fff1e0, $percent: 60) { ... }

Description

Get the text colour for a teaser content based on the background of the teaser

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

the main colour for the text

Hex#000000
$background

the background the text will appear on

Hex#fff1e0
$percent

the percentage the main colour should be mixed with the background

Int60

Used by

variables

o-teaser-is-silent

$o-teaser-is-silent: true !default;

Description

Is silent setting