diff --git a/demos/demos.css b/demos/demos.css index 6c50aa0..cfe6171 100644 --- a/demos/demos.css +++ b/demos/demos.css @@ -1,5 +1,43 @@ +.clearfix:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } +* html .clearfix { zoom: 1; } /* IE6 */ +*:first-child+html .clearfix { zoom: 1; } /* IE7 */ + body { max-width: 900px; margin: 3em auto; padding: 0 1em; } + +ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +.inputs-container { + box-sizing: border-box + width: 100%; +} + +.inputs-row { + width: 100%; +} + +.inputs-label { + width: 10%; + float: left; + padding: 0.25em 1em 0.25em 0; + text-align: right; +} + +.inputs-input { + width: 85%; + float: right; +} \ No newline at end of file diff --git a/demos/inputs.html b/demos/inputs.html new file mode 100644 index 0000000..5333d2e --- /dev/null +++ b/demos/inputs.html @@ -0,0 +1,534 @@ + + + + + CSS Chassis - Inputs + + + + + + + +

Chassis - Inputs

+ +

Checkboxes and Radios

+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + +
+
+ + + + + + +

Inputs - Inline

+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + + +

Inputs

+ + + + + + + + + + + + + +

Inputs (Disabled)

+ + + + + + + + + + + + + +

Inputs (Readonly)

+ + + + + + + + + + + + + +

Inputs (Focus)

+ + + + + + + + + + + + + +

Inputs (Active)

+ + + + + + + + + + + + + +

Inputs (Warning)

+ + + + + + + + + + + + + +

Inputs (Error)

+ + + + + + + + + + + + + + + + + + + +

Inputs - md

+ + + + + + + + + + + + + + +

Inputs (Disabled)

+ + + + + + + + + + + + + +

Inputs (Readonly)

+ + + + + + + + + + + + + +

Inputs (Focus)

+ + + + + + + + + + + + + +

Inputs (Active)

+ + + + + + + + + + + + + +

Inputs (Warning)

+ + + + + + + + + + + + + +

Inputs (Error)

+ + + + + + + + + + + + + + + + + + + +

Inputs - lg

+ + + + + + + + + + + + + + +

Inputs (Disabled)

+ + + + + + + + + + + + + +

Inputs (Readonly)

+ + + + + + + + + + + + + +

Inputs (Focus)

+ + + + + + + + + + + + + +

Inputs (Active)

+ + + + + + + + + + + + + +

Inputs (Warning)

+ + + + + + + + + + + + + +

Inputs (Error)

+ + + + + + + + + + + + + + + + + + + +

Inputs - xs

+ + + + + + + + + + + + + + +

Inputs (Disabled)

+ + + + + + + + + + + + + +

Inputs (Readonly)

+ + + + + + + + + + + + + +

Inputs (Focus)

+ + + + + + + + + + + + + +

Inputs (Active)

+ + + + + + + + + + + + + +

Inputs (Warning)

+ + + + + + + + + + + + + +

Inputs (Error)

+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/scss/atoms/inputs/_inputs.scss b/scss/atoms/inputs/_inputs.scss new file mode 100644 index 0000000..661ff19 --- /dev/null +++ b/scss/atoms/inputs/_inputs.scss @@ -0,0 +1,25 @@ +/* +* ========================================================================== +* Inputs +* ========================================================================== +*/ + +@import + "dist/chassis", + "mixins"; + +.input { + @include input(); +} + +.input-label { + @include input-label(); +} + +.radio { + @include radio(); +} + +.checkbox { + @include checkbox(); +} diff --git a/scss/atoms/inputs/_mixins.scss b/scss/atoms/inputs/_mixins.scss new file mode 100644 index 0000000..6120bd7 --- /dev/null +++ b/scss/atoms/inputs/_mixins.scss @@ -0,0 +1,255 @@ +/* +* ========================================================================== +* File : _mixins.scss +* For : Inputs +* ========================================================================== +*/ + +$margin: em(map-get($inputs-input-full-width, margin)); +$margin-label: em(map-get($inputs-label, margin)); +$input-padding: em(map-get($inputs-input-full-width, padding)); + +@mixin input() { + padding: $input-padding 0 $input-padding $input-padding; + margin: $margin 0 $margin 0; + border: map-get($inputs-input-full-width, border); + border-color: map-deep-get($inputs-input-full-width, border-color, light); + background: map-deep-get($inputs-input-full-width, background, base); + box-shadow: map-get($inputs-shadows, inset); + border-radius: em(map-get($inputs-input-full-width, border-radius)); + transition: map-get($inputs-transitions, blur-shadow), map-get($inputs-transitions, blur-border-color); + font-size: em(map-get($inputs-input-full-width, font-size)); + width: map-get($inputs-input-full-width, width); + + &:focus, + &.focus { + @include input-focus(); + } + + &:disabled, + &.disabled { + @include input-disabled(); + } + + &.readonly { + @include input-readonly(); + } + + &:active, + &.active { + @include input-active(); + } + + &.error { + @include input-error(); + } + + &.warning { + @include input-warning(); + } + + /* Sizes */ + &.input-xs { + @include input-xs(); + } + + &.input-md { + @include input-md(); + } + + &.input-lg { + @include input-lg(); + } +} + +/* Input Sizes */ + +@mixin input-xs() { + font-size: em(map-get($inputs-input-xs, font-size)); +} + +@mixin input-md() { + font-size: em(map-get($inputs-input-md, font-size)); +} + +@mixin input-lg() { + font-size: em(map-get($inputs-input-lg, font-size)); +} + +/* Input States */ + +@mixin input-focus() { + border-color: map-deep-get($inputs-focus, border-color, light); + transition: map-get($inputs-transitions, focus-shadow), map-get($inputs-transitions, focus-border-color); + outline: map-get($inputs-focus, outline); + box-shadow: map-get($inputs-shadows, inset), map-get($inputs-shadows, focus); +} + +@mixin input-disabled() { + background: map-deep-get($inputs-disabled, background, base); + border-color: rgba(map-deep-get($inputs-disabled, border-color, light), .65); + color: map-deep-get($inputs-disabled, color, light); + cursor: map-get($inputs-disabled, cursor); +} + +@mixin input-readonly() { + background: map-deep-get($inputs-readonly, background, base); + border-color: rgba(map-deep-get($inputs-readonly, border-color, light), .65); + color: map-deep-get($inputs-readonly, color, light); + cursor: map-get($inputs-readonly, cursor); +} + +@mixin input-active() { + border-color: map-deep-get($inputs-active, border-color, light); +} + +@mixin input-error() { + border-color: map-deep-get($inputs-error, border-color, base); + box-shadow: map-get($inputs-shadows, inset), map-get($inputs-shadows, error); +} + +@mixin input-warning() { + border-color: map-deep-get($inputs-error, border-color, base) ; + box-shadow: map-get($inputs-shadows, inset), map-get($inputs-shadows, warning); +} + +/* Labels */ + +@mixin input-label() { + font-size: em(map-get($inputs-label, font-size)); + display: map-get($inputs-label, display); + max-width: map-get($inputs-label, max-width); + + &.input-label-md { + @include input-label-md(); + } + + &.input-label-lg { + @include input-label-lg(); + } + + &.input-label-xs { + @include input-label-xs(); + } + + &.error { + @include input-label-error(); + } + + &.input-label-block { + display: block; + } +} + +@mixin input-label-error() { + color: map-deep-get($inputs-label-error, color, base); +} + +@mixin input-label-md() { + font-size: em(map-get($inputs-label-md, font-size)); +} + +@mixin input-label-lg() { + font-size: em(map-get($inputs-label-lg, font-size)); +} + +@mixin input-label-xs() { + font-size: em(map-get($inputs-label-xs, font-size)); +} + +/* Radio Buttons */ + +$radio-default-border: map-deep-get($inputs-radio, default-color, base); +$radio-checked-border: map-deep-get($inputs-radio, checked-color, base); + +@mixin radio() { + opacity: 0; + position: absolute; + + & + label { + display: inline-block; + vertical-align: middle; + margin: 5px; + cursor: pointer; + position: relative; + } + + & + label:before { + content: ""; + display: inline-block; + vertical-align: middle; + width: map-get($inputs-radio, width); + height: map-get($inputs-radio, height); + box-shadow: inset 0 0 0 1px $radio-default-border, inset 0 2px 2px 0 rgba(0,0,0,.10); + padding: 2px; + margin-right: 10px; + text-align: center; + transition: box-shadow .1s; + border-radius: 50%; + } + + &:checked + label:before { + box-shadow: inset 0 0 0 7px $radio-checked-border; + transition: box-shadow .2s; + } +} + +/* Checkboxes */ + +$checkbox-default-border: map-deep-get($inputs-checkbox, default-color, base); +$checkbox-checked-border: map-deep-get($inputs-checkbox, checked-color, base); + +@mixin checkbox() { + opacity: 0; + position: absolute; + + & + label { + display: inline-block; + vertical-align: middle; + margin: 5px; + cursor: pointer; + position: relative; + } + + & + label:before { + content: ""; + display: inline-block; + vertical-align: middle; + width: map-get($inputs-checkbox, width); + height: map-get($inputs-checkbox, height); + box-shadow: inset 0 2px 2px 0 rgba(0,0,0,.10); + padding: 2px; + border: 1px solid $checkbox-default-border; + margin-right: 10px; + text-align: center; + border-radius: 2px; + transition: background-color .1s; + } + + & + label:after { + content: ""; + width: 12px; + height: 6px; + position: absolute; + top: 9px; + left: 6px; + border: 3px solid #fff; + border-top: none; + border-right: none; + background: transparent; + opacity: 0; + transform: rotate(-65deg); + } + + &:checked + label:before { + background: $checkbox-checked-border; + border-color: $checkbox-checked-border; + transition: background-color .1s; + } + + &:checked + label:after { + opacity: 1; + transform: rotate(-45deg); + transition: transform .1s; + } +} diff --git a/scss/lint.scss b/scss/lint.scss index 427a48d..aa4a513 100644 --- a/scss/lint.scss +++ b/scss/lint.scss @@ -17,7 +17,8 @@ @import "atoms/icons/icons", "atoms/typography/typography", - "atoms/buttons/buttons"; + "atoms/buttons/buttons", + "atoms/inputs/inputs"; @import "views/main"; diff --git a/scss/style.scss.map b/scss/style.scss.map new file mode 100644 index 0000000..aa17acf --- /dev/null +++ b/scss/style.scss.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "file": "style.scss", + "sources": [ + "../external/normalize.css/normalize.scss" + ], + "mappings": "AAAA;;;;EAIE;AACF,AAAS,SAAA,AAAA,OAAO,EAAE,AAAS,SAAA,AAAA,MAAM,CAAC;EAChC,OAAO,EAAE,EAAG;EACZ,OAAO,EAAE,KAAM;CAChB;;AAED,AAAS,SAAA,AAAA,MAAM,CAAC;EACd,KAAK,EAAE,IAAK;CACb;;AAED;;;;EAIE;AACF;;;;;;;;;;;;EAYE;CACF,AAAA,AAAO,MAAN,AAAA,EAAQ;EACP,OAAO,EAAE,eAAgB;CAC1B;;AAED;;;;EAIE;AACF;;;;EAIE;AACF;;;;EAIE;AACF;;;;;;EAME;AACF;;;;EAIE;AACF,AAAA,IAAI,CAAC;EACH,IAAI,EAAE,4CAA6C;CACpD;;AAED,MAAM,EAAL,SAAS,EAAE,KAAK;EACf,AAAA,IAAI,CAAC;IACH,SAAS,EAAE,IAAK;GACjB;;;AAGH,MAAM,EAAL,SAAS,EAAE,KAAK;EACf,AAAA,IAAI,CAAC;IACH,SAAS,EAAE,IAAK;GACjB;;;AAGH,AAAA,EAAE,CAAC;EACD,SAAS,EAAE,MAAO;EAClB,WAAW,EAAE,GAAI;EACjB,WAAW,EAAE,CAAE;EACf,cAAc,EAAE,IAAK;CACtB;;AAED,AAAA,EAAE,CAAC;EACD,SAAS,EAAE,KAAM;EACjB,WAAW,EAAE,GAAI;EACjB,WAAW,EAAE,CAAE;EACf,cAAc,EAAE,IAAK;CACtB;;AAED,AAAA,EAAE,CAAC;EACD,SAAS,EAAE,KAAM;EACjB,WAAW,EAAE,GAAI;EACjB,WAAW,EAAE,CAAE;EACf,cAAc,EAAE,IAAK;CACtB;;AAED,AAAA,EAAE,CAAC;EACD,SAAS,EAAE,KAAM;EACjB,WAAW,EAAE,GAAI;EACjB,WAAW,EAAE,CAAE;EACf,cAAc,EAAE,IAAK;CACtB;;AAED,AAAA,EAAE,CAAC;EACD,SAAS,EAAE,GAAI;EACf,WAAW,EAAE,GAAI;EACjB,WAAW,EAAE,CAAE;EACf,cAAc,EAAE,IAAK;CACtB;;AAED,AAAA,EAAE,CAAC;EACD,SAAS,EAAE,KAAM;EACjB,WAAW,EAAE,GAAI;EACjB,WAAW,EAAE,CAAE;EACf,cAAc,EAAE,SAAU;CAC3B;;AAED;;;;EAIE;AACF,AAAA,EAAE,CAAC;EACD,MAAM,EAAE,CAAE;EACV,aAAa,EAAE,cAAe;CAC/B;;AAED,AAAA,UAAU,CAAC;EACT,MAAM,EAAE,CAAE;EACV,YAAY,EAAE,GAAI;EAClB,QAAQ,EAAE,QAAS;EACnB,WAAW,EAAE,cAAe;EAC5B,UAAU,EAAE,MAAO;CACpB;;AAED,AAAA,GAAG,CAAC;EACF,OAAO,EAAE,SAAU;EACnB,UAAU,EAAE,OAAQ;EACpB,IAAI,EAAE,wCAAyC;CAChD;;AAED;;;;EAIE;AACF,AAAA,EAAE,CAAC;EACD,WAAW,EAAE,GAAI;CAClB;;AAED,AAAA,EAAE,CAAC;EACD,MAAM,EAAE,CAAE;CACX;;AAED;;;;EAIE;AACF,AAAA,CAAC,CAAC;EACA,KAAK,EAAE,OAAQ;EACf,WAAW,EAAE,MAAO;EACpB,eAAe,EAAE,IAAK;CACvB;;AAED,AAAC,CAAA,AAAA,QAAQ,CAAC;EACR,KAAK,EAAE,OAAQ;EACf,WAAW,EAAE,MAAO;EACpB,eAAe,EAAE,IAAK;CACvB;;AAED,AAAC,CAAA,AAAA,OAAO,EAAE,AAAC,CAAA,AAAA,MAAM,CAAC;EAChB,KAAK,EAAE,OAAQ;EACf,WAAW,EAAE,MAAO;EACpB,eAAe,EAAE,IAAK;CACvB;;AAED,AAAC,CAAA,AAAA,MAAM,CAAC;EACN,KAAK,EAAE,OAAQ;EACf,WAAW,EAAE,MAAO;EACpB,eAAe,EAAE,SAAU;CAC5B;;AAED,AAAA,CAAC;AACD,AAAA,MAAM,CAAC;EACL,WAAW,EAAE,IAAK;CACnB;;AAED,AAAA,IAAI,CAAC;EACH,UAAU,EAAE,OAAQ;EACpB,SAAS,EAAE,KAAM;EACjB,OAAO,EAAE,YAAa;EACtB,aAAa,EAAE,GAAI;CACpB;;AAED;;;;EAIE;AACF,AAAA,UAAU,CAAC;EACT,QAAQ,EAAE,QAAS;EACnB,OAAO,EAAE,YAAa;EACtB,cAAc,EAAE,MAAO;CACxB;;AAED,AAAA,eAAe,CAAC;EACd,KAAK,EAAE,IAAK;EACZ,MAAM,EAAE,qBAAsB;EAC9B,MAAM,EAAE,OAAQ;EAChB,cAAc,EAAE,GAAI;EACpB,WAAW,EAAE,4BAA6B;EAC1C,WAAW,EAAE,GAAI;EACjB,MAAM,EAAE,CAAE;EACV,eAAe,EAAE,IAAK;EACtB,cAAc,EAAE,SAAU;CAC3B;;AAED,AAAe,eAAA,AAAA,YAAY,CAAC;EAC1B,uBAAuB,EAAE,CAAE;EAC3B,0BAA0B,EAAE,CAAE;CAC/B;;AAED,AAAe,eAAA,AAAA,WAAW,CAAC;EACzB,sBAAsB,EAAE,CAAE;EAC1B,yBAAyB,EAAE,CAAE;CAC9B;;AAED,AAAiD,eAAlC,AAAA,IAAK,CAAA,AAAA,YAAY,CAAC,IAAK,CAAA,AAAA,WAAW,EAAE;EACjD,aAAa,EAAE,CAAE;CAClB;;AAED,AAAA,UAAU,CAAC;EACT,OAAO,EAAE,KAAM;EACf,KAAK,EAAE,IAAK;CACb;;AAED,AAAA,IAAI,CAAC;EACH,MAAM,EAAE,qBAAsB;EAC9B,MAAM,EAAE,OAAQ;EAChB,cAAc,EAAE,GAAI;EACpB,WAAW,EAAE,4BAA6B;EAC1C,WAAW,EAAE,GAAI;EACjB,MAAM,EAAE,MAAO;EACf,eAAe,EAAE,IAAK;EACtB,cAAc,EAAE,SAAU;CAC3B;;AAED,mBAAmB;AACnB,AAAA,YAAY,CAAC;EACX,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,UAAU,CAAC,IAAI,CAAC,4BAAY;EACxC,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,mBAAI;CAC7B;;AAED,AAAY,YAAA,AAAA,OAAO,EAAE,AAAY,YAAA,AAAA,OAAO,CAAC;EACvC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAI;CAC9B;;AAED,AAAY,YAAA,AAAA,MAAM,EAAE,AAAY,YAAA,AAAA,MAAM,CAAC;EACrC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;CAC3B;;AAED,AAAY,YAAA,AAAA,MAAM,EAAE,AAAY,YAAA,AAAA,MAAM,CAAC;EACrC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;CAC3B;;AAED,AAAY,YAAA,AAAA,SAAS,EAAE,AAAY,YAAA,AAAA,SAAS,CAAC;EAC3C,MAAM,EAAE,WAAY;EACpB,KAAK,EAAE,qBAAI;EACX,UAAU,EAAE,wBAAI;EAChB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,iBAAkB;CAC/B;;AAED,AAAA,YAAY,CAAC;EACX,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,UAAU,CAAC,IAAI,CAAC,4BAAY;EACxC,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,mBAAI;CAC7B;;AAED,AAAY,YAAA,AAAA,OAAO,EAAE,AAAY,YAAA,AAAA,OAAO,CAAC;EACvC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAI;CAC9B;;AAED,AAAY,YAAA,AAAA,MAAM,EAAE,AAAY,YAAA,AAAA,MAAM,CAAC;EACrC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;CAC3B;;AAED,AAAY,YAAA,AAAA,MAAM,EAAE,AAAY,YAAA,AAAA,MAAM,CAAC;EACrC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;CAC3B;;AAED,AAAY,YAAA,AAAA,SAAS,EAAE,AAAY,YAAA,AAAA,SAAS,CAAC;EAC3C,MAAM,EAAE,WAAY;EACpB,KAAK,EAAE,wBAAI;EACX,UAAU,EAAE,sBAAI;EAChB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,iBAAkB;CAC/B;;AAED,AAAA,YAAY,CAAC;EACX,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,UAAU,CAAC,IAAI,CAAC,4BAAY;EACxC,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,mBAAI;CAC7B;;AAED,AAAY,YAAA,AAAA,OAAO,EAAE,AAAY,YAAA,AAAA,OAAO,CAAC;EACvC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAI;CAC9B;;AAED,AAAY,YAAA,AAAA,MAAM,EAAE,AAAY,YAAA,AAAA,MAAM,CAAC;EACrC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;CAC3B;;AAED,AAAY,YAAA,AAAA,MAAM,EAAE,AAAY,YAAA,AAAA,MAAM,CAAC;EACrC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;CAC3B;;AAED,AAAY,YAAA,AAAA,SAAS,EAAE,AAAY,YAAA,AAAA,SAAS,CAAC;EAC3C,MAAM,EAAE,WAAY;EACpB,KAAK,EAAE,wBAAI;EACX,UAAU,EAAE,sBAAI;EAChB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,iBAAkB;CAC/B;;AAED,AAAA,SAAS,CAAC;EACR,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,UAAU,CAAC,IAAI,CAAC,4BAAY;EACxC,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,mBAAI;CAC7B;;AAED,AAAS,SAAA,AAAA,OAAO,EAAE,AAAS,SAAA,AAAA,OAAO,CAAC;EACjC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAI;CAC9B;;AAED,AAAS,SAAA,AAAA,MAAM,EAAE,AAAS,SAAA,AAAA,MAAM,CAAC;EAC/B,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;CAC3B;;AAED,AAAS,SAAA,AAAA,MAAM,EAAE,AAAS,SAAA,AAAA,MAAM,CAAC;EAC/B,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;CAC3B;;AAED,AAAS,SAAA,AAAA,SAAS,EAAE,AAAS,SAAA,AAAA,SAAS,CAAC;EACrC,MAAM,EAAE,WAAY;EACpB,KAAK,EAAE,wBAAI;EACX,UAAU,EAAE,sBAAI;EAChB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,iBAAkB;CAC/B;;AAED,AAAA,YAAY,CAAC;EACX,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,UAAU,CAAC,IAAI,CAAC,4BAAY;EACxC,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,mBAAI;CAC7B;;AAED,AAAY,YAAA,AAAA,OAAO,EAAE,AAAY,YAAA,AAAA,OAAO,CAAC;EACvC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAI;CAC9B;;AAED,AAAY,YAAA,AAAA,MAAM,EAAE,AAAY,YAAA,AAAA,MAAM,CAAC;EACrC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;CAC3B;;AAED,AAAY,YAAA,AAAA,MAAM,EAAE,AAAY,YAAA,AAAA,MAAM,CAAC;EACrC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;CAC3B;;AAED,AAAY,YAAA,AAAA,SAAS,EAAE,AAAY,YAAA,AAAA,SAAS,CAAC;EAC3C,MAAM,EAAE,WAAY;EACpB,KAAK,EAAE,wBAAI;EACX,UAAU,EAAE,sBAAI;EAChB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,iBAAkB;CAC/B;;AAED,AAAA,WAAW,CAAC;EACV,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,UAAU,CAAC,IAAI,CAAC,4BAAY;EACxC,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,mBAAI;CAC7B;;AAED,AAAW,WAAA,AAAA,OAAO,EAAE,AAAW,WAAA,AAAA,OAAO,CAAC;EACrC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAI;CAC9B;;AAED,AAAW,WAAA,AAAA,MAAM,EAAE,AAAW,WAAA,AAAA,MAAM,CAAC;EACnC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;CAC3B;;AAED,AAAW,WAAA,AAAA,MAAM,EAAE,AAAW,WAAA,AAAA,MAAM,CAAC;EACnC,KAAK,EAAE,OAAQ;EACf,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,WAAY;CAC3B;;AAED,AAAW,WAAA,AAAA,SAAS,EAAE,AAAW,WAAA,AAAA,SAAS,CAAC;EACzC,MAAM,EAAE,WAAY;EACpB,KAAK,EAAE,wBAAI;EACX,UAAU,EAAE,sBAAI;EAChB,YAAY,EAAE,WAAY;EAC1B,UAAU,EAAE,iBAAkB;CAC/B;;AAED,kBAAkB;AAClB,AAAA,OAAO,CAAC;EACN,aAAa,EAAE,GAAI;EACnB,SAAS,EAAE,IAAK;EAChB,WAAW,EAAE,IAAK;EAClB,OAAO,EAAE,aAAc;CACxB;;AAED,AAAA,OAAO,CAAC;EACN,aAAa,EAAE,GAAI;EACnB,SAAS,EAAE,IAAK;EAChB,WAAW,EAAE,IAAK;EAClB,OAAO,EAAE,SAAU;CACpB;;AAED,AAAA,OAAO,CAAC;EACN,aAAa,EAAE,GAAI;EACnB,SAAS,EAAE,IAAK;EAChB,WAAW,EAAE,IAAK;EAClB,OAAO,EAAE,aAAc;CACxB;;AAED,AAAA,OAAO,CAAC;EACN,aAAa,EAAE,GAAI;EACnB,SAAS,EAAE,IAAK;EAChB,WAAW,EAAE,IAAK;EAClB,OAAO,EAAE,MAAO;CACjB;;AAED;;;;EAIE;AACF;;;;;EAKE;AACF,iBAAiB;AACjB,kBAAkB;AAClB,YAAY;AACZ,mBAAmB;AACnB,gBAAgB;AAChB,AAAA,MAAM,CAAC;EACL,OAAO,EAAE,mBAAoB;EAC7B,MAAM,EAAE,iBAAkB;EAC1B,MAAM,EAAE,SAAU;EAClB,YAAY,EAAE,OAAQ;EACtB,UAAU,EAAE,IAAK;EACjB,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAI;EACtC,aAAa,EAAE,KAAM;EACrB,UAAU,EAAE,kCAAmC;EAC/C,SAAS,EAAE,GAAI;EACf,KAAK,EAAE,IAAK;EACZ,WAAW;CACZ;;AAED,AAAM,MAAA,AAAA,MAAM,EAAE,AAAM,MAAA,AAAA,MAAM,CAAC;EACzB,YAAY,EAAE,OAAQ;EACtB,UAAU,EAAE,oCAAqC;EACjD,OAAO,EAAE,IAAK;EACd,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAI,EAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO;CAC9E;;AAED,AAAM,MAAA,AAAA,SAAS,EAAE,AAAM,MAAA,AAAA,SAAS,CAAC;EAC/B,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,yBAAI;EAClB,KAAK,EAAE,OAAQ;EACf,MAAM,EAAE,WAAY;CACrB;;AAED,AAAM,MAAA,AAAA,SAAS,CAAC;EACd,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,yBAAI;EAClB,KAAK,EAAE,OAAQ;EACf,MAAM,EAAE,IAAK;CACd;;AAED,AAAM,MAAA,AAAA,OAAO,EAAE,AAAM,MAAA,AAAA,OAAO,CAAC;EAC3B,YAAY,EAAE,OAAQ;CACvB;;AAED,AAAM,MAAA,AAAA,MAAM,CAAC;EACX,YAAY,EAAE,OAAQ;EACtB,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAI,EAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO;CAC9E;;AAED,AAAM,MAAA,AAAA,QAAQ,CAAC;EACb,YAAY,EAAE,OAAQ;EACtB,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAI,EAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO;CAC9E;;AAED,AAAM,MAAA,AAAA,SAAS,CAAC;EACd,SAAS,EAAE,KAAM;CAClB;;AAED,AAAM,MAAA,AAAA,SAAS,CAAC;EACd,SAAS,EAAE,KAAM;CAClB;;AAED,AAAM,MAAA,AAAA,SAAS,CAAC;EACd,SAAS,EAAE,KAAM;CAClB;;AAED,AAAA,YAAY,CAAC;EACX,SAAS,EAAE,GAAI;EACf,OAAO,EAAE,MAAO;EAChB,SAAS,EAAE,IAAK;CACjB;;AAED,AAAY,YAAA,AAAA,eAAe,CAAC;EAC1B,SAAS,EAAE,KAAM;CAClB;;AAED,AAAY,YAAA,AAAA,eAAe,CAAC;EAC1B,SAAS,EAAE,KAAM;CAClB;;AAED,AAAY,YAAA,AAAA,eAAe,CAAC;EAC1B,SAAS,EAAE,KAAM;CAClB;;AAED,AAAY,YAAA,AAAA,MAAM,CAAC;EACjB,KAAK,EAAE,OAAQ;CAChB;;AAED,AAAY,YAAA,AAAA,kBAAkB,CAAC;EAC7B,OAAO,EAAE,KAAM;CAChB;;AAED,AAAA,MAAM,CAAC;EACL,OAAO,EAAE,CAAE;EACX,QAAQ,EAAE,QAAS;CACpB;;AAED,AAAS,MAAH,GAAG,KAAK,CAAC;EACb,OAAO,EAAE,YAAa;EACtB,cAAc,EAAE,MAAO;EACvB,MAAM,EAAE,GAAI;EACZ,MAAM,EAAE,OAAQ;EAChB,QAAQ,EAAE,QAAS;CACpB;;AAED,AAAc,MAAR,GAAG,KAAK,AAAA,OAAO,CAAC;EACpB,OAAO,EAAE,EAAG;EACZ,OAAO,EAAE,YAAa;EACtB,cAAc,EAAE,MAAO;EACvB,KAAK,EAAE,IAAK;EACZ,MAAM,EAAE,IAAK;EACb,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,kBAAI;EAC3D,OAAO,EAAE,GAAI;EACb,YAAY,EAAE,IAAK;EACnB,UAAU,EAAE,MAAO;EACnB,UAAU,EAAE,cAAe;EAC3B,aAAa,EAAE,GAAI;CACpB;;AAED,AAAsB,MAAhB,AAAA,QAAQ,GAAG,KAAK,AAAA,OAAO,CAAC;EAC5B,UAAU,EAAE,uBAAwB;EACpC,UAAU,EAAE,cAAe;CAC5B;;AAED,AAAA,SAAS,CAAC;EACR,OAAO,EAAE,CAAE;EACX,QAAQ,EAAE,QAAS;CACpB;;AAED,AAAY,SAAH,GAAG,KAAK,CAAC;EAChB,OAAO,EAAE,YAAa;EACtB,cAAc,EAAE,MAAO;EACvB,MAAM,EAAE,GAAI;EACZ,MAAM,EAAE,OAAQ;EAChB,QAAQ,EAAE,QAAS;CACpB;;AAED,AAAiB,SAAR,GAAG,KAAK,AAAA,OAAO,CAAC;EACvB,OAAO,EAAE,EAAG;EACZ,OAAO,EAAE,YAAa;EACtB,cAAc,EAAE,MAAO;EACvB,KAAK,EAAE,IAAK;EACZ,MAAM,EAAE,IAAK;EACb,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,kBAAI;EAClC,OAAO,EAAE,GAAI;EACb,MAAM,EAAE,iBAAkB;EAC1B,YAAY,EAAE,IAAK;EACnB,UAAU,EAAE,MAAO;EACnB,aAAa,EAAE,GAAI;EACnB,UAAU,EAAE,oBAAqB;CAClC;;AAED,AAAiB,SAAR,GAAG,KAAK,AAAA,MAAM,CAAC;EACtB,OAAO,EAAE,EAAG;EACZ,KAAK,EAAE,IAAK;EACZ,MAAM,EAAE,GAAI;EACZ,QAAQ,EAAE,QAAS;EACnB,GAAG,EAAE,GAAI;EACT,IAAI,EAAE,GAAI;EACV,MAAM,EAAE,cAAe;EACvB,UAAU,EAAE,IAAK;EACjB,YAAY,EAAE,IAAK;EACnB,UAAU,EAAE,WAAY;EACxB,OAAO,EAAE,CAAE;EACX,SAAS,EAAE,cAAM;CAClB;;AAED,AAAyB,SAAhB,AAAA,QAAQ,GAAG,KAAK,AAAA,OAAO,CAAC;EAC/B,UAAU,EAAE,OAAQ;EACpB,YAAY,EAAE,OAAQ;EACtB,UAAU,EAAE,oBAAqB;CAClC;;AAED,AAAyB,SAAhB,AAAA,QAAQ,GAAG,KAAK,AAAA,MAAM,CAAC;EAC9B,OAAO,EAAE,CAAE;EACX,SAAS,EAAE,cAAM;EACjB,UAAU,EAAE,aAAc;CAC3B;;AAED;;;;EAIE;AAEF,0CAA0C", + "names": [] +} \ No newline at end of file diff --git a/scss/variables/inputs.js b/scss/variables/inputs.js new file mode 100644 index 0000000..e0babda --- /dev/null +++ b/scss/variables/inputs.js @@ -0,0 +1,157 @@ +( function( root, factory ) { + if ( typeof define === "function" && define.amd ) { + define( [ "./chassis" ], factory ); + } else if ( typeof exports === "object" ) { + module.exports = factory( require( "./chassis" ) ); + } else { + root.chassis = factory( root.chassis ); + } +}( this, function( chassis ) { + +chassis.inputs = { + "shadows": { + name: "Styles for input shadows", + value: { + "inset": "inset 0px 2px 2px 0px rgba(0,0,0,0.10)", + "focus": "0px 0px 2px 1px #03A9F4", + "error": "0px 0px 2px 1px #F44336", + "warning": "0px 0px 2px 1px #FF7043" + } + }, + "transitions": { + name: "Transition animations", + value: { + "focus-shadow": "box-shadow .25s", + "focus-border-color": "border-color .25s", + "blur-shadow": "box-shadow .1s", + "blur-border-color": "border-color .1s" + } + }, + "label": { + name: "Styles for input label", + value: { + "display": "inline", + "max-width": "100%", + "font-size": "20px", + "margin": "0px" + } + }, + "label-md": { + name: "Styles for small input lables", + value: { + "font-size": "28px" + } + }, + "label-lg": { + name: "Styles for large input lables", + value: { + "font-size": "36px" + } + }, + "label-xs": { + name: "Styles for extra small input labels", + value: { + "font-size": "14px" + } + }, + "label-error": { + name: "Styles for error labels", + value: { + color: () => "colors.error" + } + }, + "input-full-width": { + name: "Generic styles for single line inputs", + value: { + "padding": "10px", + "margin": "5px", + "border": "1px solid", + "border-color": () => "colors.text", + "border-radius": "2px", + "font-size": "20px", + "width": "100%", + "background": () => "colors.background" + } + }, + "disabled": { + name: "Styles for disabled input", + value: { + "border-color": () => "colors.text", + "background": () => "colors.default", + "color": () => "colors.text", + "cursor": "not-allowed" + } + }, + "readonly": { + name: "Styles for readonly inputs", + value: { + "border-color": () => "colors.text", + "background": () => "colors.default", + "color": () => "colors.text", + "cursor": "auto" + } + }, + "focus": { + name: "Styles for in focus inputs", + value: { + "border-color": () => "colors.info", + "outline": "none" + } + }, + "active": { + name: "Styles for active inputs", + value: { + "border-color": () => "colors.info" + } + }, + "error": { + name: "Styles for error state of inputs", + value: { + "border-color": () => "colors.error" + } + }, + "warning": { + name: "Styles for warning state inputs", + value: { + "border-color": () => "colors.warning" + } + }, + "input-md": { + name: "Styles for large sized inputs", + value: { + "font-size": "28px" + } + }, + "input-lg": { + name: "Styles for small sized inputs", + value: { + "font-size": "36px" + } + }, + "input-xs": { + name: "Styles for extra small sized inputs", + value: { + "font-size": "14px" + } + }, + "radio": { + name: "Styles for custom radio buttons", + value: { + "width": "20px", + "height": "20px", + "default-color": () => "colors.text", + "checked-color": () => "colors.primary" + } + }, + "checkbox": { + name: "Styles for custom radio buttons", + value: { + "width": "20px", + "height": "20px", + "default-color": () => "colors.text", + "checked-color": () => "colors.primary" + } + } +}; +return chassis; +} ) );