colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
105 lines (92 loc) • 2.91 kB
text/stylus
// Form Component
//
// A colette form should have `form` class to benefit every features provided
// This class can be used for fake forms
//
// Styleguide: Forms.Form
.form
position relative
// Busy status
//
// You can apply an animated “waiting” status on a form (after submitting for example):
// if you add the `aria-busy="true"` to the `<form>` tag, you will get a **Loading** animation over it.
//
// Markup: form-ariabusy.twig
//
// Styleguide: Forms.Form.Busy
&[aria-busy=true]
{loading}
&:before
z-index 6
&:after
content ''
display block
position absolute
z-index 5
left 0
right 0
bottom 0
top 0
background-color s('hsla(0, 0%, var(--light-max), .8)')
// Form field
//
// **Form field** component provides styles for:
// - Field `label`
// - Valid / invalid fields status
//
// .form-field-success - valid field format
// .form-field-error - invalid field format
//
// Weight: 1
//
// Markup: form-field.twig
//
// Styleguide: Forms.Field
&-field
// display a widget for form element that must be filled with text content
// e.g. input[text|password|email|url]
label
display block
font-weight bold
&-error
border-color var(--color-error) !important // @stylint ignore: must override default form elements border-color
&-success
border-color var(--color-success) !important // @stylint ignore: must override default form elements border-color
// Form help
//
// **Form help** component provides styles for fields descriptions, with valid / invalid color indications.
// It can be used in combination with **Form field** to highlight the valid / invalid status of their related fields.
// <br />Note that you can also use **Alerts** component to handle success or error messages.
//
// .form-help-success - help text for valid field format
// .form-help-error - help text for invalid field format
//
// Weight: 2
//
// Markup: form-help.twig
//
// Styleguide: Forms.Help
&-help
padding-top .3em
color var(--color-secondary)
font-size .88em
font-style italic
line-height 1.1
&-error
color var(--color-error)
&-success
color var(--color-success)
// Form contextual link
//
// Provides style for a contextual link related to a specific piece of a form.
//
// Weight: 3
//
// Markup: form-link.twig
//
// Styleguide: Forms.Link
&-link
padding-top .15em
color var(--color-links)
font-size .85em
background transparent