{: versionI"3.2.19 (Media Mark):EF:shaI"-c48e5112427570beb1e1d772b9996677ce881d8e;F: contents"f5o:Sass::Tree::RootNode :@children[/o:Sass::Tree::CommentNode : @value[I"^/* Forms * ========================================================================== */:ET: @type: silent;[: @linei: @options{o; ;[I";/* Form group is used to wrap label and input pairs */; T; ; ;[; i ; @ o:Sass::Tree::RuleNode : @rule[I".form-group; T: @tabsi:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[o:Sass::Selector::Sequence;[o:#Sass::Selector::SimpleSequence ;[o:Sass::Selector::Class: @name[I"form-group; T; i :@filenameI"; T: @subject0: @sourceso:Set: @hash{; i ;@; i ;@;[ o:Sass::Tree::PropNode ;[I" float; T;o:Sass::Script::String;I" left; T; :identifier; @ ;i:@prop_syntax:new;[; i ; @ o; ;[I" width; T;o;;I" 100%; T; ;; @ ;i; ;!;[; i ; @ o; ;[I" clear; T;o;;I" both; T; ;; @ ;i; ;!;[; i ; @ o:Sass::Tree::MixinNode ;I"contain-floats; T: @args[:@keywords{: @splat0;[; i; @ o; ;[I"margin-bottom; T;o:Sass::Script::Variable ;I"gutter-half; T:@underscored_nameI"gutter_half; T; i; @ ;i; ;!;[; i; @ o;" ;I" media; T;#[o; ;I" tablet; T; ;; i; @ ;${;%0;[o; ;[I"margin-bottom; T;o;& ;I" gutter; T;'I" gutter; T; i; @ ;i; ;!;[; i; @ ; i:@has_childrenT; @ ; i ;(T; @ o; ;[I".form-group-related; T;i;o;;[o;;[o; ;[o;;[I"form-group-related; T; i;I"; T;0;o;;{; i;@X; i;@X;[o; ;[I"margin-bottom; T;o;;I" 10px; T; ;; @ ;i; ;!;[; i; @ o;" ;I" media; T;#[o; ;I" tablet; T; ;; i; @ ;${;%0;[o; ;[I"margin-bottom; T;o;;I" 20px; T; ;; @ ;i; ;!;[; i; @ ; i;(T; @ ; i;(T; @ o; ;[I".form-group-compound; T;i;o;;[o;;[o; ;[o;;[I"form-group-compound; T; i;I"; T;0;o;;{; i;@{; i;@{;[o; ;[I"margin-bottom; T;o;;I" 10px; T; ;; @ ;i; ;!;[; i; @ ; i;(T; @ o; ;[I">/* Fieldset is used to group more than one .form-group */; T; ; ;[; i ; @ o; ;[I" fieldset; T;i;o;;[o;;[o; ;[o:Sass::Selector::Element ;[I" fieldset; T:@namespace0; i!;I"; T;0;o;;{; i!;@; i!;@;[o; ;[I" width; T;o;;I" 100%; T; ;; @ ;i; ;!;[; i"; @ o; ;[I" clear; T;o;;I" both; T; ;; @ ;i; ;!;[; i#; @ ; i!;(T; @ o; ;[I"/* Form title */; T; ; ;[; i'; @ o; ;[I".form-title; T;i;o;;[o;;[o; ;[o;;[I"form-title; T; i(;I"; T;0;o;;{; i(;@; i(;@;[o; ;[I"margin-bottom; T;o;& ;I" gutter; T;'I" gutter; T; i); @ ;i; ;!;[; i); @ o;" ;I" media; T;#[o; ;I" tablet; T; ;; i*; @ ;${;%0;[o; ;[I"margin-bottom; T;o:Sass::Script::Operation :@operand1o;& ;I" gutter; T;'I" gutter; T; i+; @ :@operand2o:Sass::Script::Number ;f1.5:@numerator_units[:@denominator_units[; i+:@originalI"1.5; F; @ :@operator: times; i+; @ ;i; ;!;[; i+; @ ; i*;(T; @ ; i(;(T; @ o; ;[I"/* Labels */; T; ; ;[; i0; @ o; ;[I"A/* Form labels, or for legends styled to look like labels */; T; ; ;[; i2; @ o; ;[I".form-label; T;i;o;;[o;;[o; ;[o;;[I"form-label; T; i3;I"; T;0;o;;{; i3;@; i3;@;[o;" ;I" core-19; T;#[;${;%0;[; i4; @ o; ;[I" display; T;o;;I" block; T; ;; @ ;i; ;!;[; i5; @ o; ;[I"margin-bottom; T;o;;I"5px; T; ;; @ ;i; ;!;[; i6; @ ; i3;(T; @ o; ;[I".form-label-bold; T;i;o;;[o;;[o; ;[o;;[I"form-label-bold; T; i9;I"; T;0;o;;{; i9;@; i9;@;[ o;" ;I" bold-24; T;#[;${;%0;[; i:; @ o; ;[I" display; T;o;;I" block; T; ;; @ ;i; ;!;[; i;; @ o; ;[I"margin-bottom; T;o;;I"0; T; ;; @ ;i; ;!;[; i<; @ o; ;[I".form-hint; T;i;o;;[o;;[o; ;[o;;[I"form-hint; T; i=;I"; T;0;o;;{; i=;@%; i=;@%;[o;" ;I" core-19; T;#[;${;%0;[; i>; @ ; i=;(T; @ ; i9;(T; @ o; ;[I"7/* Used for paragraphs in-between form elements */; T; ; ;[; iB; @ o; ;[I".form-block; T;i;o;;[o;;[o; ;[o;;[I"form-block; T; iC;I"; T;0;o;;{; iC;@>; iC;@>;[o; ;[I" float; T;o;;I" left; T; ;; @ ;i; ;!;[; iD; @ o; ;[I" width; T;o;;I" 100%; T; ;; @ ;i; ;!;[; iE; @ o;" ;I"contain-floats; T;#[;${;%0;[; iF; @ ; iC;(T; @ o; ;[I"/* Hints */; T; ; ;[; iJ; @ o; ;[I"L/* Form hints & examples are light grey and sit above a form control */; T; ; ;[; iL; @ o; ;[I".form-hint; T;i;o;;[o;;[o; ;[o;;[I"form-hint; T; iM;I"; T;0;o;;{; iM;@g; iM;@g;[ o; ;[I" display; T;o;;I" block; T; ;; @ ;i; ;!;[; iN; @ o; ;[I" color; T;o;& ;I"secondary-text-colour; T;'I"secondary_text_colour; T; iO; @ ;i; ;!;[; iO; @ o; ;[I"margin-bottom; T;o;;I"5px; T; ;; @ ;i; ;!;[; iP; @ o;" ;I" media; T;#[o; ;I" tablet; T; ;; iQ; @ ;${;%0;[o; ;[I"margin-top; T;o;;I"8px; T; ;; @ ;i; ;!;[; iR; @ ; iQ;(T; @ ; iM;(T; @ o; ;[I"/* Form controls */; T; ; ;[; iW; @ o; ;[I"\/* By default, form controls are 50% width for desktop, * and 100% width for mobile */; T; ; ;[; iY; @ o; ;[I".form-control; T;i;o;;[o;;[o; ;[o;;[I"form-control; T; i[;I"; T;0;o;;{; i[;@; i[;@;[o;" ;I" core-19; T;#[;${;%0;[; i\; @ o; ;[I" width; T;o;;I" 100%; T; ;; @ ;i; ;!;[; i^; @ o;" ;I"box-sizing; T;#[o; ;I"border-box; T; ;; i_; @ ;${;%0;[; i_; @ o; ;[I" padding; T;o;;I"4px; T; ;; @ ;i; ;!;[; i`; @ o; ;[I"background-color; T;o;& ;I" white; T;'I" white; T; ia; @ ;i; ;!;[; ia; @ o; ;[I" border; T;o:Sass::Script::List ;[o;. ;i;/[I"px; T;0[; ib;1I"1px; F; @ o; ;I" solid; T; ;; ib; @ o;& ;I"border-colour; T;'I"border_colour; T; ib; @ :@separator: space; ib; @ ;i; ;!;[; ib; @ o; ;[I"?/* Disable webkit appearance and remove rounded corners */; T; ; ;[; id; @ o; ;[I"-webkit-appearance; T;o;;I" none; T; ;; @ ;i; ;!;[; ie; @ o; ;[I"border-radius; T;o;;I"0; T; ;; @ ;i; ;!;[; if; @ o;" ;I" media; T;#[o; ;I" tablet; T; ;; ih; @ ;${;%0;[o; ;[I" width; T;o;;I"50%; T; ;; @ ;i; ;!;[; ii; @ ; ih;(T; @ ; i[;(T; @ o; ;[I"/* Form control widths */; T; ; ;[; in; @ o; ;[I".form-control-3-4; T;i;o;;[o;;[o; ;[o;;[I"form-control-3-4; T; io;I"; T;0;o;;{; io;@; io;@;[o; ;[I" width; T;o;;I" 100%; T; ;; @ ;i; ;!;[; ip; @ o;" ;I" media; T;#[o; ;I" tablet; T; ;; iq; @ ;${;%0;[o; ;[I" width; T;o;;I"75%; T; ;; @ ;i; ;!;[; ir; @ ; iq;(T; @ ; io;(T; @ o; ;[I".form-control-1-2; T;i;o;;[o;;[o; ;[o;;[I"form-control-1-2; T; iv;I"; T;0;o;;{; iv;@"; iv;@";[o; ;[I" width; T;o;;I" 100%; T; ;; @ ;i; ;!;[; iw; @ o;" ;I" media; T;#[o; ;I" tablet; T; ;; ix; @ ;${;%0;[o; ;[I" width; T;o;;I"50%; T; ;; @ ;i; ;!;[; iy; @ ; ix;(T; @ ; iv;(T; @ o; ;[I".form-control-1-4; T;i;o;;[o;;[o; ;[o;;[I"form-control-1-4; T; i};I"; T;0;o;;{; i};@E; i};@E;[o; ;[I" width; T;o;;I"25%; T; ;; @ ;i; ;!;[; i~; @ ; i};(T; @ o; ;[I".form-control-1-8; T;i;o;;[o;;[o; ;[o;;[I"form-control-1-8; T; i|;I"; T;0;o;;{; i|;@[; i|;@[;[o; ;[I" width; T;o;;I" 12.5%; T; ;; @ ;i; ;!;[; i}; @ ; i|;(T; @ o; ;[I"/* Radio buttons */; T; ; ;[; i; @ o; ;[I".form-radio; T;i;o;;[o;;[o; ;[o;;[I"form-radio; T; i;I"; T;0;o;;{; i;@u; i;@u;[o; ;[I" display; T;o;;I" block; T; ;; @ ;i; ;!;[; i; @ o; ;[I" margin; T;o;;I" 10px 0; T; ;; @ ;i; ;!;[; i; @ ; i;(T; @ o; ;[I".form-radio input; T;i;o;;[o;;[o; ;[o;;[I"form-radio; T; i;I"; T;0;o;;{; i;@o; ;[o;) ;[I" input; T;*0; i;@;0;o;;{; i;@; i;@;[o; ;[I"vertical-align; T;o;;I" middle; T; ;; @ ;i; ;!;[; i; @ o; ;[I" margin; T;o;;I"-4px 5px 0 0; T; ;; @ ;i; ;!;[; i; @ ; i;(T; @ o; ;[I"/* Checkboxes */; T; ; ;[; i; @ o; ;[I".form-checkbox; T;i;o;;[o;;[o; ;[o;;[I"form-checkbox; T; i;I"; T;0;o;;{; i;@; i;@;[o; ;[I" display; T;o;;I" block; T; ;; @ ;i; ;!;[; i; @ o; ;[I" margin; T;o;4 ;[o;& ;I"gutter-half; T;'I"gutter_half; T; i; @ o;. ;i;/[;0@; i;1I"0; F; @ ;5;6; i; @ ;i; ;!;[; i; @ o; ;[I"margin-bottom; T;o;;I" 30px; T; ;; @ ;i; ;!;[; i; @ ; i;(T; @ o; ;[I".form-checkbox input; T;i;o;;[o;;[o; ;[o;;[I"form-checkbox; T; i;I"; T;0;o;;{; i;@o; ;[o;) ;[I" input; T;*0; i;@;0;o;;{; i;@; i;@;[ o; ;[I"vertical-align; T;o;;I" middle; T; ;; @ ;i; ;!;[; i; @ o; ;[I" margin; T;o;;I"-2px 5px 0 0; T; ;; @ ;i; ;!;[; i; @ o; ;[I" width; T;o;;I" 30px; T; ;; @ ;i; ;!;[; i; @ o; ;[I"-webkit-appearance; T;o;;I" checkbox; T; ;; @ ;i; ;!;[; i; @ ; i;(T; @ o; ;[I".form-checkbox label; T;i;o;;[o;;[o; ;[o;;[I"form-checkbox; T; i;I"; T;0;o;;{; i;@o; ;[o;) ;[I" label; T;*0; i;@;0;o;;{; i;@; i;@;[ o; ;[I" display; T;o;;I" inline; T; ;; @ ;i; ;!;[; i; @ o; ;[I"font-weight; T;o;;I" normal; T; ;; @ ;i; ;!;[; i; @ o; ;[I" cursor; T;o;;I" pointer; T; ;; @ ;i; ;!;[; i; @ o; ;[I"font-size; T;o;;I" 19px; T; ;; @ ;i; ;!;[; i; @ ; i;(T; @ o; ;[I"/* Buttons */; T; ; ;[; i; @ o; ;[I".form .button; T;i;o;;[o;;[o; ;[o;;[I" form; T; i;I"; T;0;o;;{; i;@Bo; ;[o;;[I" button; T; i;@B;0;o;;{; i;@B; i;@B;[o;" ;I" media; T;#[o; ;I" mobile; T; ;; i; @ ;${;%0;[o; ;[I" width; T;o;;I" 100%; T; ;; @ ;i; ;!;[; i; @ ; i;(T; @ ; i;(T; @ o; ;[I"/* Hide toggled content */; T; ; ;[; i; @ o; ;[I" .js-enabled .toggle-content; T;i;o;;[o;;[o; ;[o;;[I"js-enabled; T; i;I"; T;0;o;;{; i;@jo; ;[o;;[I"toggle-content; T; i;@j;0;o;;{; i;@j; i;@j;[o; ;[I" display; T;o;;I" none; T; ;; @ ;i; ;!;[; i; @ ; i;(T; @ o; ;[I"/* Form validation */; T; ; ;[; i; @ o:Sass::Tree::ImportNode :@imported_filenameI"forms/form-validation; T;[:@template0; i; @ :@imported_file0o; ;[I"/* Form patterns */; T; ; ;[; i; @ o;7 ;8I"forms/form-date-of-birth; T;[;90; i; @ ;:0o;7 ;8I"forms/form-chunky-labels; T;[;90; i; @ ;:0;9I" // Forms // ========================================================================== // Form group is used to wrap label and input pairs .form-group { float: left; width: 100%; clear: both; @include contain-floats; margin-bottom: $gutter-half; @include media(tablet) { margin-bottom: $gutter; } } .form-group-related { margin-bottom: 10px; @include media(tablet) { margin-bottom: 20px; } } .form-group-compound { margin-bottom: 10px; } // Fieldset is used to group more than one .form-group fieldset { width: 100%; clear: both; } // Form title .form-title { margin-bottom: $gutter; @include media(tablet) { margin-bottom: ($gutter*1.5); } } // Labels // Form labels, or for legends styled to look like labels .form-label { @include core-19; display: block; margin-bottom: 5px; } .form-label-bold { @include bold-24; display: block; margin-bottom: 0; .form-hint { @include core-19; } } // Used for paragraphs in-between form elements .form-block { float: left; width: 100%; @include contain-floats; } // Hints // Form hints & examples are light grey and sit above a form control .form-hint { display: block; color: $secondary-text-colour; margin-bottom: 5px; @include media (tablet) { margin-top: 8px; } } // Form controls // By default, form controls are 50% width for desktop, // and 100% width for mobile .form-control { @include core-19; width: 100%; @include box-sizing(border-box); padding: 4px; background-color: $white; border: 1px solid $border-colour; // Disable webkit appearance and remove rounded corners -webkit-appearance: none; border-radius: 0; @include media(tablet) { width: 50%; } } // Form control widths .form-control-3-4 { width: 100%; @include media(tablet) { width: 75%; } } .form-control-1-2 { width: 100%; @include media(tablet) { width: 50%; } } .form-control-1-4 { width: 25%; } .form-control-1-8 { width: 12.5%; } // Radio buttons .form-radio { display: block; margin: 10px 0; } .form-radio input { vertical-align: middle; margin: -4px 5px 0 0; } // Checkboxes .form-checkbox { display: block; margin: $gutter-half 0; margin-bottom: 30px; } .form-checkbox input { vertical-align: middle; margin: -2px 5px 0 0; width: 30px; -webkit-appearance: checkbox; } .form-checkbox label { display: inline; font-weight: normal; cursor: pointer; font-size: 19px; } // Buttons .form .button { @include media(mobile) { width: 100%; } } // Hide toggled content .js-enabled .toggle-content { display: none; } // Form validation @import "forms/form-validation"; // Form patterns @import "forms/form-date-of-birth"; @import "forms/form-chunky-labels"; ; T; i;(T; @