// =============================================================================
// BC FORMS (CSS)
// =============================================================================
// Bigcommerce Component
// -----------------------------------------------------------------------------
//
// The Bigcommerce Coding Standards, coupled with Foundation Variables.
//
// 1. If set to false, there is no outputted CSS for this component.
// 2. This matches the variable of Foundation forms, as they come together
//
// -----------------------------------------------------------------------------
@if $exportCSS--bcForms { // 1, 2
/*doc
---
title: Form Panels and Layouts
name: 13forms_layouts
category: Forms
parent: forms
---
We provide a couple of component styles to layout forms.
The more `form-field` components you place in the `form-row`, the smaller the columns gets.
Columns are equal length, and calculated automatically by Flexbox by default.
It's the same mark-up but depending on your browser support needs, you can switch
between a flexbox layout or a more traditional grid based layout by setting
`$formRow-modernBrowsers` to `false`.
The grid based layout of `form-feilds` will require the use of modifiers to calculate
the correct widths. We support `form-field--half`, `form-field--third` and
`form-field--quarter`
```html_example
```
*/
.form-body {
background-color: $formBody-backgroundColor;
border: $formBody-border;
box-shadow: $formBody-boxShadow;
margin-bottom: $formBody-marginBottom;
max-width: $formBody-maxWidth;
padding: $formBody-padding;
}
.form-row {
@if $formRow-modernBrowsers {
@include formRow--flex();
}
@else {
@include formRow--grid();
}
}
// Form Basics
// -----------------------------------------------------------------------------
//
// Purpose: Bigcommerce form basics that aren't covered by Foundation
//
// 1. Can be a custom element needs display-block to hold styles
//
// -----------------------------------------------------------------------------
/*doc
---
title: Form Fields
name: 02forms_basics
category: Forms
parent: forms
---
Each form input should be wrapped in a `form-field`
```html_example
```
*/
.form-field {
@include clearfix();
display: block; // 1
margin: $formField-margin;
max-width: $formField-maxWidth;
}
/*doc
---
title: Selects [multiple]
name: 06forms_basics
category: Forms
parent: forms
---
Styling of the select element with the multiple attribute
```html_example
```
*/
.form-select[multiple] {
height: auto;
option {
padding: 5px;
}
}
// Checkboxes and Radios
// -----------------------------------------------------------------------------
//
// Purpose: We do these better than Foundation
//
// -----------------------------------------------------------------------------
/*doc
---
title: Radios and Checkbox
name: 07forms_basics
category: Forms
parent: forms
---
```html_example
```
```html_example
```
*/
.form-checkbox,
.form-radio {
@include u-hidden("visually");
+ .form-label {
@include checkRadioBase();
}
}
.form-checkbox:checked,
.form-radio:checked {
+ .form-label {
@include checkRadioBase--checked();
}
}
//
// Don't forget you focus styles if you're creating custom Inputs
// -----------------------------------------------------------------------------
.form-checkbox:focus,
.form-radio:focus {
+ .form-label {
@include checkRadioBase--focus();
}
}
.form-checkbox[disabled],
.form-radio[disabled] {
+ .form-label {
@include checkRadioBase--disabled();
}
}
//
// Checkbox
// -----------------------------------------------------------------------------
.form-checkbox {
+ .form-label {
@include checkBox-base();
}
}
//
// Radiobutton
// -----------------------------------------------------------------------------
.form-radio {
+ .form-label {
@include radioButton-base();
}
}
// Inputs with internal actions
// -----------------------------------------------------------------------------
//
// Purpose: Define inputs that have internal action button, like a search box
//
// -----------------------------------------------------------------------------
/*doc
---
title: Inputs with Extras
name: 08forms_inputextras
category: Forms
parent: forms
---
Sometimes inputs need inline actions. An inline button for a search box for example.
```html_example
```
*/
.form-input.has-action {
float: $inputAction-floatDirection;
padding-right: $inputAction-input-paddingRight;
+ .button--inputAction {
background: $inputAction-backgroundColor;
border: 0;
border-radius: $inputAction-borderRadius;
float: left;
height: $inputAction-button-width;
margin: $inputAction-margin;
width: $inputAction-button-width;
}
}
// Inputs with internal icons
// -----------------------------------------------------------------------------
//
// Purpose: Define inputs that have internal icons
//
// -----------------------------------------------------------------------------
/*doc
---
title: Inputs with Icons
name: 09forms_inputicons
category: Forms
parent: forms
---
Sometimes inputs need to display an informative icon to convey a certain meaning, like secure.
```html_example
```
*/
.form-input.has-icon {
float: $inputIcon-floatDirection;
padding-#{$inputIcon-oppositeDirection}: $inputAction-input-paddingOffset;
+ .icon {
height: $inputIcon-icon-height;
margin-#{$inputIcon-floatDirection}: $inputIcon-icon-marginOffset;
width: $inputIcon-icon-width;
}
}
// PrefixPostfix
// -----------------------------------------------------------------------------
//
// Purpose: Pre/Postfixed label and actions to form elements
//
// -----------------------------------------------------------------------------
/*doc
---
title: Form PrefixPostfix
name: 10forms_prefixpostfix
category: Forms
parent: forms
---
PrefixPostfix
```html_example
AUD $
KG
```
### PrefixPostfix with a button
```html_example
```
*/
.form-prefixPostfix {
@include prefixPostfix-container($prefixPostfix-inputClassName, $prefixPostfix-buttonClassName);
}
// PrefixPostfix inputs (but only if touching)
.form-prefixPostfix-input {
@include prefixPostfix-input();
}
// PrefixPostfix Labels
.form-prefixPostfix-label {
@include prefixPostfix-label();
}
.form-prefixPostfix-label--prefix {
@include prefixPostfix-label--prefix($prefixPostfix-inputClassName);
}
.form-prefixPostfix-label--postfix {
@include prefixPostfix-label--postfix();
}
// PrefixPostfix buttons
.form-prefixPostfix-button--prefix {
margin: 0 ($form-spacing / 2) 0 0;
}
.form-prefixPostfix-button--postfix {
margin: 0 0 0 ($form-spacing / 2);
}
// Switches
// -----------------------------------------------------------------------------
//
// Purpose: CHECKBOX OVERRIDES THAT LOOK LIKE NICE SWITCHES
//
// -----------------------------------------------------------------------------
//
// Switch checkbox
//
// Purpose: The switch is just a custom, css checkbox.
// -----------------------------------------------------------------------------
/*doc
---
title: Form Switch
name: 11forms_switch
category: Forms
parent: forms
---
Switch
```html_example
Switching this setting off will...
Switching this setting off will...
Switching this setting off will...
Switching this setting off will...
Down for MaintenanceOpen
Switching this setting to off will enter your store into maintenance mode.
Down for MaintenanceOpen
Switching this setting to off will enter your store into maintenance mode.
```
*/
.switch-checkbox {
@include u-hidden("visually");
// Focus state of the checkbox
&:focus + .switch-toggle {
border-color: $switch-focus-borderColor;
box-shadow: $switch-focus-BoxShadow;
}
}
//
// Switch Toggle
//
// Purpose: The actual, graphical toggle you seen in the UI
// -----------------------------------------------------------------------------
.switch-toggle {
background-color: $switch-backgroundColor;
border: $switch-borderSize $switch-borderStyle $switch-borderColor;
border-radius: $switch-borderRadius;
cursor: $form-label-pointer;
display: inline-block;
height: $switch-height;
position: relative;
transition: $switch-transition;
vertical-align: middle;
width: $switch-width;
.switch--important & {
background-color: $switch-important-checked-backgroundColor;
border-color: $switch-important-checked-borderColor;
}
.switch--checked & {
background-color: $switch-checked-backgroundColor;
border-color: $switch-checked-borderColor;
}
.switch--disabled & {
background-color: $switch-disabled-backgroundcolor;
border-color: $switch-disabled-borderColor;
cursor: default;
}
}
//
// Toggle element before pseudo element
//
// Purpose: Effectively used as the indicator of the switch, positioned left or right
// -----------------------------------------------------------------------------
.switch-toggle::before {
background: $switch-indicator-color;
border-radius: $switch-indicator-borderRadius;
box-shadow: $switch-indicator-boxShadow;
content: "";
height: $switch-indicator-height;
left: remCalc($switch-indicator-offSet);
position: absolute;
top: remCalc($switch-indicator-offSet);
transition: $switch-transition;
width: $switch-indicator-width;
.switch--checked & {
left: remCalc($switch-indicator-on-offSet);
}
}
//
// Toggle element supportive text
//
// Purpose: Effectively used as the background of the UI switch
// Can have ON/OFF text or tick/cross icons in the content
// -----------------------------------------------------------------------------
.switch-label {
color: $switch-label-text-color;
height: $switch-label-height;
line-height: $switch-lineHeight;
position: absolute;
right: $switch-label-text-rightPosition;
text-transform: uppercase;
transition: $switch-transition;
.switch--checked & {
font-weight: $switch-label-text-onFontWeight;
left: $switch-label-text-rightPosition;
right: auto;
}
.switch--disabled & {
color: $switch-label-disabled-text-color;
}
}
.switch-label--icon.icon { // fighting specificity
@include square($switch-label-height);
svg {
@include square($switch-label-height);
fill: $switch-label-text-color;
// scss-lint:disable NestingDepth, SelectorDepth
.switch--disabled & {
fill: $switch-label-disabled-text-color;
}
// scss-lint:enable NestingDepth, SelectorDepth
}
}
//
// Switch explanatory text labels
//
// Purpose: Text labels can be placed either side of the switch to give more
// meaning to the position of the switch indicator. "On this side, it means off",
// "On that side it means on"
// -----------------------------------------------------------------------------
.switch-description--off {
color: $switch-description-selected-color;
margin-right: $switch-description-spacing;
.switch--checked & {
color: $switch-description-unselected-color;
}
}
.switch-description--on {
color: $switch-description-unselected-color;
margin-left: $switch-description-spacing;
.switch--checked & {
color: $switch-description-selected-color;
}
}
.switch-ariaDescription {
@include u-hidden("visually");
}
// FORM ACTIONS
// -----------------------------------------------------------------------------
//
// Purpose: Container for the form's primary actions, like Submit, Reset, etc.
// This can also manifest as a fixed bar, which runs along the bottom of the page.
//
// -----------------------------------------------------------------------------
/*doc
---
title: Form Actions
name: 14forms_actions
category: Forms
parent: forms
---
Forms require actions to submit or cancel (or what ever action a user should perform).
Form actions come in 2 flavours; normal and fixed.
```html_example