SassDoc: o-spacing

oSpacing(opts)

Output all o-spacing features.

Example

@include oSpacing($opts: (
	'margin-bottom-utilities': true, // Output CSS classes such as `o-spacing-s1`.
	'custom-properties': true // Output CSS variables.
));

Links

• "oSpacing" mixin on Github

oOverlayContentClose

Overlay close button styles.

The output does not include a class definition, and should be wrapped in a selector.

Example

Output button styles

.my-close-button {
    @include oOverlayContentClose();
}

Links

• "oOverlayContentClose" mixin on Github

oSpacingByName(size-name)

Returns

Links

• "oSpacingByName" function on Github

oSpacingByIncrement(increment)

Returns

Links

• "oSpacingByIncrement" function on Github

oSpacingGetBaselineValue

Returns

Links

• "oSpacingGetBaselineValue" function on Github

oButtonsAddTheme(...)

Styles for a custom button theme .o-buttons--[$name].

Examples

Example #1

a new claret theme for both primary and secondary buttons.

// Outputs class .o-buttons--my-special-button
@include oButtonsAddTheme(
    $name: 'my-special-button',
    $opts: ('color': 'claret-80'),
    $types: ('primary', 'secondary')
);

Example #2

a new claret theme to go on a slate background.

// Outputs class .o-buttons--my-special-button
@include oButtonsAddTheme(
    $name: 'my-special-button',
    $opts: ('color': 'claret-80', 'context': 'slate'),
    $types: ('primary', 'secondary')
);

Example #3

a new claret theme for buttons with icons.

// Outputs class .o-buttons--my-special-button
@include oButtonsAddTheme(
    $name: 'my-special-button',
    $opts: ('color': 'claret-80'),
    $types: ('primary', 'secondary'),
    $icons: ('arrow-up', 'arrow-down')
);

Links

• "oButtonsAddTheme" mixin on Github

oButtonsContent(...)

Create a single button with a custom class. To avoid duplicate CSS this is not recommended unless o-buttons default classes cannot be used. See the README for more details.

Button CSS declarations without any selectors.

Examples

Example #1

a primary button with right arrow.

.my-button {
    @include oButtonsContent($opts: (
        'type': 'primary',
        'icon': 'arrow-right'
    ));
}

Example #2

a primary button with a custom lemon theme.

.my-lemon-button {
    @include oButtonsContent($opts: (
        'type': 'primary',
        'theme': ('color': 'lemon')
    ));
}

Example #3

base button styles.

// output base button styles only
.my-button {
    @include oButtonsContent($opts: ());
}
// output modifier classes for button types, without duplicating base styles
.my-button--secondary {
    @include oButtonsContent($opts: (
        'type': 'secondary'
    ), $include-base-styles: false);
}
.my-button--primary {
    @include oButtonsContent($opts: (
        'type': 'primary'
    ), $include-base-styles: false);
}

Links

• "oButtonsContent" mixin on Github

o-spacing-is-silent

Links

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

o-spacing-relative-units

When true output relative rem space values, not px. Relative spaces will respect the browser's configured font size.

For legacy reasons, this defaults to false (outputs px units). Projects may need to be updated to support relative units.

Links

• "o-spacing-relative-units" variable on Github

o-spacing-names

All space names supported by o-spacing.

Links

• "o-spacing-names" variable on Github