Sha256: 803c2ce6c5c0fbc94db5681bd4c16362d71462d42132f0b477df1db6f9e2ef18
Contents?: true
Size: 1.7 KB
Versions: 84
Compression:
Stored size: 1.7 KB
Contents
@import "../error-message/index";
@import "../hint/index";
@import "../label/index";
@include govuk-exports("govuk/component/file-upload") {
$component-padding: govuk-spacing(1);
.govuk-file-upload {
@include govuk-font($size: 19);
@include govuk-text-colour;
padding-top: $component-padding;
padding-bottom: $component-padding;
&:focus {
// "Yank" the padding with negative margin to avoid a jump
// when element is focused
margin-right: -$component-padding;
margin-left: -$component-padding;
padding-right: $component-padding;
padding-left: $component-padding;
outline: $govuk-focus-width solid $govuk-focus-colour;
// Use `box-shadow` to add border instead of changing `border-width`
// (which changes element size) and since `outline` is already used for the
// yellow focus state.
box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
@include govuk-if-ie8 {
// IE8 doesn't support `box-shadow` so add an actual border
border: 4px solid $govuk-input-border-colour;
}
}
// Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196
// so that component receives focus in Firefox.
// This can't be set together with `:focus` as all versions of IE fail
// to recognise `focus-within` and don't set any styles from the block
// when it's a selector.
&:focus-within {
margin-right: -$component-padding;
margin-left: -$component-padding;
padding-right: $component-padding;
padding-left: $component-padding;
outline: $govuk-focus-width solid $govuk-focus-colour;
box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
}
}
}
Version data entries
84 entries across 84 versions & 2 rubygems