o-forms

variables

o-forms-is-silent

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

Description

Silent mode

Type

Bool

Links

o-forms-font-family

$o-forms-font-family: MetricWeb, sans-serif !default;

Description

Field font family

This is required to override default system form element styling, since <input>, <textarea>, <select>… don't inherit global font styles

Type

String

Used by

Links

mixins

oFormsMessage

@mixin oFormsMessage() { ... }

Description

Messages styles

Parameters

None.

Requires

Links

oFormsCommonFieldBase

@mixin oFormsCommonFieldBase() { ... }

Description

Common field styles

Parameters

None.

Requires

Links

oFormsCommonFieldFocus

@mixin oFormsCommonFieldFocus() { ... }

Description

Common field styles: focused state only

Parameters

None.

Used by

Links

oFormsCommonFieldDisabled

@mixin oFormsCommonFieldDisabled() { ... }

Description

Common field styles: disabled state

Parameters

None.

Used by

Links

oFormsCommonFieldInvalid

@mixin oFormsCommonFieldInvalid() { ... }

Description

Common field styles: invalid state

Parameters

None.

Links

oFormsCommonFieldValid

@mixin oFormsCommonFieldValid() { ... }

Description

Common field styles: valid state

Parameters

None.

Links

oFormsCommonSmall

@mixin oFormsCommonSmall() { ... }

Description

Common field styles: small

Parameters

None.

Links

oFormsGroup

@mixin oFormsGroup() { ... }

Description

Group styles

Parameters

None.

Requires

Links

oFormsFullWidth

@mixin oFormsFullWidth() { ... }

Description

All the field to extend to the full width of the container

Parameters

None.

Used by

Links

[private] _oFormsTargetIE8

@mixin _oFormsTargetIE8() { ... }

Description

Target styles at Internet Explorer 8 only

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Links

[private] _oFormsBreakpoint

@mixin _oFormsBreakpoint() { ... }

Description

Target both IE8 and modern browsers at the breakpoint Useful for layout changes at the Small breakpoint

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Links

oFormsRadioCheckbox

@mixin oFormsRadioCheckbox($selectors: (radio: '.o-forms__radio', checkbox: '.o-forms__checkbox', label: '.o-forms__label')) { ... }

Description

Radio and checkboxes

Draws a fake control (radio or checkbox) using pseudo-elements

IE 8: in this mixin we're using ::before and ::after (instead of :before and :after) so that IE 8 doesn't get enhanced checkboxes (which it wouldn't render correctly anyway)

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$selectorsnoneMap(radio: '.o-forms__radio', checkbox: '.o-forms__checkbox', label: '.o-forms__label')

Requires

Links

functions

str-replace

@function str-replace($string, $search, $replace) { ... }

Description

Replace $search with $replace in $string

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$string

Initial string

Stringnone
$search

Substring to replace

Stringnone
$replace

('') - New value

Stringnone

Returns

String

Updated string

Used by

Links

Author

  • Hugo Giraudel

General

mixins

oFormsLabel

@mixin oFormsLabel() { ... }

Description

Label styles

Parameters

None.

oFormsAdditionalInfo

@mixin oFormsAdditionalInfo() { ... }

Description

Additional info

Parameters

None.

oFormsErrorText

@mixin oFormsErrorText() { ... }

Description

Error text

Parameters

None.

Requires

oFormsSelect

@mixin oFormsSelect() { ... }

Description

Select styles

To be used in combination with oFormsCommonField

Parameters

None.

Requires

oFormsTextarea

@mixin oFormsTextarea() { ... }

Description

Textarea styles

Parameters

None.

oFormsUnskin

@mixin oFormsUnskin() { ... }

Description

Unskin a field entirely, but keep its structure intact

Parameters

None.

oFormsWrapper

@mixin oFormsWrapper() { ... }

Description

Zone wrapper

Parameters

None.

Requires