SassDoc: o-labels

oLabels(opts)

Outputs all available features and styles for labels.

The output includes the .o-labels class definition as well as class definitions for every variant.

Examples

Example #1

All label styles

@include oLabels();

Example #2

Standard label styles including big size and gold tier state variants

@include oLabels($opts: ('sizes': ('big'), 'states': ('tier-gold'));

Example #3

Indicator label styles including live and new variants

@include oLabels($opts: ('indicators': ('status': ('live', 'new')));

Example #4

Indicator label styles with inverse modifier class

@include oLabels($opts: ('indicators': ('status': ('live', 'new'), 'inverse': true));

Example #5

Timestamp label with inverse modifier class

@include oLabels($opts: ('timestamp': ('inverse': true));

Links

• "oLabels" mixin on Github

oLabelsAddState(state-name, opts)

Add a state modifier for standard labels. Note this mixin is dor standard labels only, not indicator labels.

The output includes the .o-labels--STATE modifier class definition, which includes all overrides.

Examples

Example #1

Existing standard label state

@include oLabelsAddState('tier-gold');

Example #2

Custom standard label state

@include oLabelsAddState('citrus-fruit', (
    background-color: oColorsByName('lemon')
));

Links

• "oLabelsAddState" mixin on Github

oLabelsContent(opts)

Styles for a standard label without an o-labels CSS class. Recommended only when a custom class name is required, for example within another component.

Styles for a label without a CSS selector.

Examples

Example #1

existing label.

.o-example-my-label {
	@include oLabelsContent($opts: ('base': true, 'size': 'big', 'state': 'tier-gold'));
}

Example #2

custom label.

.o-example-my-custom-label {
	@include oLabelsContent($opts: (
		'base': true,
		'size': 'big',
		'state': (
			'background-color': oColorsByName('lemon')
		)
	));
}

Links

• "oLabelsContent" mixin on Github

oLabelsTimestampContent

Styles for a timestamp label i.e. .o-labels-timestamp. This mixin is not recommend. Instead the the oLabels primary mixin and o-labels markup. This should only be used where using o-labels markup is not possible.

If outputting a timestamp in a non-label context see o-editorial-typography.

Example

a timestamp label with custom markup.

.my-timestamp-label {
    @include oLabelsTimestampContent();
}

Links

• "oLabelsTimestampContent" mixin on Github

oLabelsIndicatorContent(ops)

Styles for indicator label elements e.g. .o-labels-indicator. This mixin is not recommend. Instead the the oLabels primary mixin and o-labels markup. This should only be used where using o-labels markup is not possible.

Example

indicator labels with custom markup.

.my-indicator-label {
    @include oLabelsIndicatorContent($opts: ('block': true));
}
.my-indicator-label--new {
    @include oLabelsIndicatorContent($opts: ('block': true, 'modifier': 'new'));
}
.my-indicator-label--updated {
    @include oLabelsIndicatorContent($opts: ('block': true, 'modifier': 'updated'));
}
.my-indicator-label--closed {
    @include oLabelsIndicatorContent($opts: ('block': true, 'modifier': 'closed'));
}
.my-indicator-label--live {
    @include oLabelsIndicatorContent($opts: ('block': true, 'modifier': 'live'));
}
.my-indicator-label__status {
    @include oLabelsIndicatorContent($opts: ('element': 'status'));
}
.my-indicator-label__timestamp {
    @include oLabelsIndicatorContent($opts: ('element': 'timestamp'));
}

Links

• "oLabelsIndicatorContent" mixin on Github

o-labels-is-silent

Silent mode: on (true) or off (false) Set to false to output default label classes

Links

• "o-labels-is-silent" variable on Github