{: versionI"3.2.19 (Media Mark):EF:shaI"-3da788003af24b2dfca6c0d2901954324eee372f;F: contents"c:o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"../_shims.scss:ET;[:@template0: @linei: @options{:@imported_file0o; ;I"../_css3.scss; T;[; 0; i; @ ; 0o; ;I"../_conditionals.scss; T;[; 0; i; @ ; 0o; ;I"../_colours.scss; T;[; 0; i ; @ ; 0o:Sass::Tree::CommentNode : @value[I"D/* Mixin and defaults for making buttons on GOV.UK services. */; T: @type: silent;[; i ; @ o; ;[I"i/* For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html */; T;;;[; i ; @ o; ;[I"/* Example usage: */; T;;;[; i; @ o; ;[I"˜/* .button{ * @include button; * } * .button-secondary{ * @include button($grey-3); * } * .button-warning{ * @include button($red); * } */; T;;;[; i; @ o:Sass::Tree::MixinDefNode : @nameI" button; T: @args[[o:Sass::Script::Variable;I" colour; T:@underscored_nameI" colour; T; @ o; ;I"button-colour; T;I"button_colour; T; i; @ : @splat0;['o; ;[I"/* Colour */; T;;;[; i; @ o:Sass::Tree::PropNode ;[I"background-color; T;o; ;I" colour; T;I" colour; T; i; @ : @tabsi:@prop_syntax:new;[; i; @ o; ;[I"/* Size and shape */; T;;;[; i ; @ o; ;[I" position; T;o:Sass::Script::String;I" relative; T;:identifier; @ ;i;;;[; i!; @ o:Sass::Tree::MixinNode ;I"inline-block; T;[:@keywords{;0;[; i"; @ o; ;[I" padding; T;o;;I"0.3em 0.6em 0.2em 0.6em; T;;; @ ;i;;;[; i#; @ o; ;[I" border; T;o;;I" none; T;;; @ ;i;;;[; i$; @ o; ;I"border-radius; T;[o:Sass::Script::Number ;i:@numerator_units[:@denominator_units[; i%:@originalI"0; F; @ ;{;0;[; i%; @ o; ;[I"-webkit-appearance; T;o;;I" none; T;;; @ ;i;;;[; i&; @ o; ;[I"/* Bottom edge effect */; T;;;[; i(; @ o; ;I"box-shadow; T;[o:Sass::Script::List ;[ o; ;i;![;"@Z; i);#I"0; F; @ o; ;i;![I"px; T;"[; i);#I"2px; F; @ o; ;i;![;"@Z; i);#I"0; F; @ o:Sass::Script::Funcall ;I" darken; T;[o; ;I" colour; T;I" colour; T; i); @ o; ;i;![I"%; T;"[; i);#I"15%; F; @ ;{;0; i); @ :@separator: space; i); @ ;{;0;[; i); @ o; ;I" ie-lte; T;[o; ;i ;![;"@Z; i*;#I"8; F; @ ;{;0;[o; ;[I"border-bottom; T;o;$ ;[o; ;i;![I"px; T;"[; i+;#I"2px; F; @ o; ;I" solid; T;;; i+; @ o;% ;I" darken; T;[o; ;I" colour; T;I" colour; T; i+; @ o; ;i;![I"%; T;"[; i+;#I"15%; F; @ ;{;0; i+; @ ;&;'; i+; @ ;i;;;[; i+; @ ; i*:@has_childrenT; @ o; ;[I"/* Text */; T;;;[; i.; @ o; ;[I"font-size; T;o;;I"1em; T;;; @ ;i;;;[; i/; @ o; ;[I"/* inherit from parent */; T;;;[; i/; @ o; ;[I"line-height; T;o;;I" 1.25; T;;; @ ;i;;;[; i0; @ o; ;[I"text-decoration; T;o;;I" none; T;;; @ ;i;;;[; i1; @ o; ;[I"-webkit-font-smoothing; T;o;;I"antialiased; T;;; @ ;i;;;[; i2; @ o; ;[I"/* Interaction */; T;;;[; i4; @ o; ;[I" cursor; T;o;;I" pointer; T;;; @ ;i;;;[; i5; @ o:Sass::Tree::RuleNode : @rule[I"&:visited; T;i:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[o:Sass::Selector::Sequence;-[o:#Sass::Selector::SimpleSequence ;-[o:Sass::Selector::Parent; i6:@filenameI"; To:Sass::Selector::Pseudo :@syntactic_type: class;[I" visited; T: @arg0; i6;1@Ö: @subject0: @sourceso:Set: @hash{; i6;1@Ö; i6;1@Ö;[o; ;[I"background-color; T;o; ;I" colour; T;I" colour; T; i7; @ ;i;;;[; i7; @ ; i6;(T; @ o;) ;*[I"&:hover, &:focus; T;i;+o;,;-[o;.;-[o;/ ;-[o;0; i:;1I"; To;2 ;3;4;[I" hover; T;50; i:;1@î;60;7o;8;9{; i:;1@îo;.;-[I" ; To;/ ;-[o;0; i:;1@îo;2 ;3;4;[I" focus; T;50; i:;1@î;60;7o;8;9{; i:;1@î; i:;1@î;[o; ;[I"background-color; T;o;% ;I" darken; T;[o; ;I" colour; T;I" colour; T; i;; @ o; ;i ;![I"%; T;"[; i;;#I"5%; F; @ ;{;0; i;; @ ;i;;;[; i;; @ ; i:;(T; @ o;) ;*[I" &:active; T;i;+o;,;-[o;.;-[o;/ ;-[o;0; i=;1I"; To;2 ;3;4;[I" active; T;50; i=;1@;60;7o;8;9{; i=;1@; i=;1@;[o; ;[I"top; T;o;;I"2px; T;;; @ ;i;;;[; i>; @ o; ;I"box-shadow; T;[o;$ ;[ o; ;i;![;"@Z; i?;#I"0; F; @ o; ;i;![;"@Z; i?;#I"0; F; @ o; ;i;![;"@Z; i?;#I"0; F; @ o; ;I" colour; T;I" colour; T; i?; @ ;&;'; i?; @ ;{;0;[; i?; @ ; i=;(T; @ o; ;[I"!/* Disabled button styles */; T;;;[; iB; @ o;) ;*[I"8&.disabled, &[disabled="disabled"], &[disabled]; T;i;+o;,;-[o;.;-[o;/ ;-[o;0; iE;1I"; To:Sass::Selector::Class;[I" disabled; T; iE;1@H;60;7o;8;9{; iE;1@Ho;.;-[I" ; To;/ ;-[o;0; iE;1@Ho:Sass::Selector::Attribute ;[I" disabled; T:@namespace0:@operatorI"=; T;[I""disabled"; T: @flags0; iE;1@H;60;7o;8;9{; iE;1@Ho;.;-[I" ; To;/ ;-[o;0; iE;1@Ho;; ;[I" disabled; T;<0;=0;0;>0; iE;1@H;60;7o;8;9{; iE;1@H; iE;1@H;[o; ;I" opacity; T;[o; ;f0.5;![;"@Z; iF;#I"0.5; F; @ ;{;0;[; iF; @ o;) ;*[I" &:hover; T;i;+o;,;-[o;.;-[o;/ ;-[o;0; iG;1I"; To;2 ;3;4;[I" hover; T;50; iG;1@{;60;7o;8;9{; iG;1@{; iG;1@{;[o; ;[I" cursor; T;o;;I" default; T;;; @ ;i;;;[; iH; @ o; ;[I"background-color; T;o; ;I" colour; T;I" colour; T; iI; @ ;i;;;[; iI; @ ; iG;(T; @ o;) ;*[I" &:active; T;i;+o;,;-[o;.;-[o;/ ;-[o;0; iK;1I"; To;2 ;3;4;[I" active; T;50; iK;1@™;60;7o;8;9{; iK;1@™; iK;1@™;[o; ;[I"top; T;o;;I"0; T;;; @ ;i;;;[; iL; @ o; ;I"box-shadow; T;[o;$ ;[ o; ;i;![;"@Z; iM;#I"0; F; @ o; ;i;![I"px; T;"[; iM;#I"2px; F; @ o; ;i;![;"@Z; iM;#I"0; F; @ o;% ;I" darken; T;[o; ;I" colour; T;I" colour; T; iM; @ o; ;i;![I"%; T;"[; iM;#I"15%; F; @ ;{;0; iM; @ ;&;'; iM; @ ;{;0;[; iM; @ o; ;I" ie-lte; T;[o; ;i ;![;"@Z; iN;#I"8; F; @ ;{;0;[o; ;[I"border-bottom; T;o;$ ;[o; ;i;![I"px; T;"[; iO;#I"2px; F; @ o; ;I" solid; T;;; iO; @ o;% ;I" darken; T;[o; ;I" colour; T;I" colour; T; iO; @ o; ;i;![I"%; T;"[; iO;#I"15%; F; @ ;{;0; iO; @ ;&;'; iO; @ ;i;;;[; iO; @ ; iN;(T; @ ; iK;(T; @ ; iE;(T; @ o; ;[I"9/* Set text colour depending on background colour */; T;;;[; iT; @ u:Sass::Tree::IfNode [o:Sass::Script::Operation :@operand1o:Sass::Script::Funcall : @nameI"lightness:ET: @args[o:Sass::Script::Variable ;I" colour; T:@underscored_nameI" colour; T: @lineiU: @options{:@keywords{: @splat0; iU;@ :@operand2o:Sass::Script::Number : @valuei7:@numerator_units[I"%; T:@denominator_units[; iU:@originalI"50%; F;@ :@operator:lt; iU;@ u:Sass::Tree::IfNodeù[00[o:Sass::Tree::PropNode : @name[I" color:ET: @valueo:Sass::Script::Variable ;I"text-colour;T:@underscored_nameI"text_colour;T: @linei^: @options{: @tabsi:@prop_syntax:new:@children[; i^; @ o:Sass::Tree::RuleNode : @rule[I"4&:link, &:hover, &:focus, &:visited;T; i:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[ o:Sass::Selector::Sequence;[o:#Sass::Selector::SimpleSequence ;[o:Sass::Selector::Parent; ib:@filenameI";To:Sass::Selector::Pseudo :@syntactic_type: class;[I" link;T: @arg0; ib;@: @subject0: @sourceso:Set: @hash{; ib;@o;;[I" ;To; ;[o;; ib;@o; ;;;[I" hover;T;0; ib;@;0;o; ;!{; ib;@o;;[I" ;To; ;[o;; ib;@o; ;;;[I" focus;T;0; ib;@;0;o; ;!{; ib;@o;;[I" ;To; ;[o;; ib;@o; ;;;[I" visited;T;0; ib;@;0;o; ;!{; ib;@; ib;@;[o; ;[I" color;T;o; ;I"text-colour;T; I"text_colour;T; ic; @ ; i;;;[; ic; @ ; ib:@has_childrenT; @ [o:Sass::Tree::PropNode ;[I" color; T;o; ;I" white; T; I" white; T; iV;@ : @tabsi:@prop_syntax:new:@children[; iV;@ o:Sass::Tree::RuleNode : @rule[I"4&:link, &:hover, &:focus, &:visited; T;i:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[ o:Sass::Selector::Sequence;#[o:#Sass::Selector::SimpleSequence ;#[o:Sass::Selector::Parent; iZ:@filenameI"; To:Sass::Selector::Pseudo :@syntactic_type: class;[I" link; T: @arg0; iZ;'@': @subject0: @sourceso:Set: @hash{; iZ;'@'o;$;#[I" ; To;% ;#[o;&; iZ;'@'o;( ;);*;[I" hover; T;+0; iZ;'@';,0;-o;.;/{; iZ;'@'o;$;#[I" ; To;% ;#[o;&; iZ;'@'o;( ;);*;[I" focus; T;+0; iZ;'@';,0;-o;.;/{; iZ;'@'o;$;#[I" ; To;% ;#[o;&; iZ;'@'o;( ;);*;[I" visited; T;+0; iZ;'@';,0;-o;.;/{; iZ;'@'; iZ;'@';[o; ;[I" color; T;o; ;I" white; T; I" white; T; i[;@ ;i;;;[; i[;@ ; iZ:@has_childrenT;@ o; ;[I"l/* making the click target bigger than the button * (and fill the space made when the button moves) */; T;;;[; ig; @ o;) ;*[I" &:before; T;i;+o;,;-[o;.;-[o;/ ;-[o;0; ii;1I"; To;2 ;3;4;[I" before; T;50; ii;1@ø;60;7o;8;9{; ii;1@ø; ii;1@ø;[ o; ;[I" content; T;o;;I"""; T;;; @ ;i;;;[; ij; @ o; ;[I" height; T;o;;I" 110%; T;;; @ ;i;;;[; ik; @ o; ;[I" width; T;o;;I" 100%; T;;; @ ;i;;;[; il; @ o; ;[I" display; T;o;;I" block; T;;; @ ;i;;;[; im; @ o; ;[I"background; T;o;;I"transparent; T;;; @ ;i;;;[; in; @ o; ;[I" position; T;o;;I" absolute; T;;; @ ;i;;;[; io; @ o; ;[I"top; T;o;;I"0; T;;; @ ;i;;;[; ip; @ o; ;[I" left; T;o;;I"0; T;;; @ ;i;;;[; iq; @ ; ii;(T; @ o;) ;*[I"&:active:before; T;i;+o;,;-[o;.;-[o;/ ;-[o;0; is;1I"; To;2 ;3;4;[I" active; T;50; is;1@9o;2 ;3;4;[I" before; T;50; is;1@9;60;7o;8;9{; is;1@9; is;1@9;[ o; ;[I"top; T;o;;I" -10%; T;;; @ ;i;;;[; it; @ o; ;[I" height; T;o;;I" 120%; T;;; @ ;i;;;[; iu; @ o; ;[I"r/* IE6 ignores the :before psuedo-class but applies the block to :active * It therefore needs to be reset */; T;;;[; iw; @ o; ;I"ie; T;[o; ;i ;![;"@Z; iy;#I"6; F; @ ;{;0;[o; ;[I"top; T;o;;I" auto; T;;; @ ;i;;;[; iz; @ o; ;[I" height; T;o;;I" 100%; T;;; @ ;i;;;[; i{; @ ; iy;(T; @ ; is;(T; @ o; ;[I"1/* Reset styles applied to external links */; T;;;[; i; @ o;) ;*[I"&[rel="external"]:after; T;i;+o;,;-[o;.;-[o;/ ;-[o;0; i{;1I"; To;; ;[I"rel; T;<0;=I"=; T;[I""external"; T;>0; i{;1@uo;2 ;3;4;[I" after; T;50; i{;1@u;60;7o;8;9{; i{;1@u; i{;1@u;[ o; ;[I" display; T;o;;I" none; T;;; @ ;i;;;[; i|; @ o; ;[I" content; T;o;;I" none; T;;; @ ;i;;;[; i}; @ o; ;[I"margin-left; T;o;;I"0; T;;; @ ;i;;;[; i~; @ o; ;[I"margin-right; T;o;;I"0; T;;; @ ;i;;;[; i; @ ; i{;(T; @ o; ;[I"K/* Fixes a bug where IE puts a black border around certain elements */; T;;;[; i‚; @ o; ;I" ie-lte; T;[o; ;i ;![;"@Z; iƒ;#I"8; F; @ ;{;0;[o;) ;*[I"@&[type="submit"], &[type="reset"], &[type="button"]; T;i;+o;,;-[o;.;-[o;/ ;-[o;0; i†;1I"; To;; ;[I" type; T;<0;=I"=; T;[I" "submit"; T;>0; i†;1@°;60;7o;8;9{; i†;1@°o;.;-[I" ; To;/ ;-[o;0; i†;1@°o;; ;[I" type; T;<0;=I"=; T;[I" "reset"; T;>0; i†;1@°;60;7o;8;9{; i†;1@°o;.;-[I" ; To;/ ;-[o;0; i†;1@°o;; ;[I" type; T;<0;=I"=; T;[I" "button"; T;>0; i†;1@°;60;7o;8;9{; i†;1@°; i†;1@°;[o; ;[I" filter; T;o;% ;I" chroma; T;[o:Sass::Script::Operation :@operand1o; ;I" color; T;;; i‡; @ :@operand2o:Sass::Script::Color ;0: @attrs{ :redi: greeni: bluei: alphai; i‡; @ ;=:single_eq; i‡; @ ;{;0; i‡; @ ;i;;;[; i‡; @ ; i†;(T; @ o;) ;*[I"&[type=submit].button; T;i;+o;,;-[o;.;-[o;/ ;-[o;0; iŠ;1I"; To;; ;[I" type; T;<0;=I"=; T;[I" submit; T;>0; iŠ;1@ío;:;[I" button; T; iŠ;1@í;60;7o;8;9{; iŠ;1@í; iŠ;1@í;[o; ;[I" filter; T;o;;I" none; T;;; @ ;i;;;[; i‹; @ ; iŠ;(T; @ ; iƒ;(T; @ ; i;(T; @ ; I" @import '../_shims.scss'; @import '../_css3.scss'; @import '../_conditionals.scss'; @import '../_colours.scss'; // Mixin and defaults for making buttons on GOV.UK services. // For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html // Example usage: // .button{ // @include button; // } // .button-secondary{ // @include button($grey-3); // } // .button-warning{ // @include button($red); // } @mixin button($colour: $button-colour){ // Colour background-color: $colour; // Size and shape position: relative; @include inline-block; padding: 0.3em 0.6em 0.2em 0.6em; border: none; @include border-radius(0); -webkit-appearance: none; // Bottom edge effect @include box-shadow(0 2px 0 darken($colour, 15%)); @include ie-lte(8) { border-bottom: 2px solid darken($colour, 15%); } // Text font-size: 1em; // inherit from parent line-height: 1.25; text-decoration: none; -webkit-font-smoothing: antialiased; // Interaction cursor: pointer; &:visited{ background-color: $colour; } &:hover, &:focus { background-color: darken($colour, 5%); } &:active { top: 2px; @include box-shadow(0 0 0 $colour); } // Disabled button styles &.disabled, &[disabled="disabled"], &[disabled] { @include opacity(0.5); &:hover{ cursor: default; background-color: $colour; } &:active { top: 0; @include box-shadow(0 2px 0 darken($colour, 15%)); @include ie-lte(8) { border-bottom: 2px solid darken($colour, 15%); } } } // Set text colour depending on background colour @if lightness($colour) < 50% { color: $white; &:link, &:hover, &:focus, &:visited{ color: $white; } } @else { color: $text-colour; &:link, &:hover, &:focus, &:visited{ color: $text-colour; } } // making the click target bigger than the button // (and fill the space made when the button moves) &:before { content: ""; height: 110%; width: 100%; display: block; background: transparent; position: absolute; top: 0; left: 0; } &:active:before { top: -10%; height: 120%; // IE6 ignores the :before psuedo-class but applies the block to :active // It therefore needs to be reset @include ie(6) { top: auto; height: 100%; } } // Reset styles applied to external links &[rel="external"]:after { display: none; content: none; margin-left: 0; margin-right: 0; } // Fixes a bug where IE puts a black border around certain elements @include ie-lte(8) { &[type="submit"], &[type="reset"], &[type="button"] { filter:chroma(color=#000000); } &[type=submit].button { filter: none; } } } ; T; i;(T; @