Sha256: 7d676214434f09d26cf5e67bf8371924b9e4d95dfcab7c0b61dc43b008387d92
Contents?: true
Size: 1.85 KB
Versions: 17
Compression:
Stored size: 1.85 KB
Contents
@import "govuk/components/input/input";
.gem-c-input--search-icon {
background: govuk-colour("white") url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") no-repeat -5px -3px;
padding-left: govuk-spacing(6);
}
// this overrides styles from static that break the look of the component
// unfortunately we then need to override the override for the search icon variant
// TODO: remove these styles once static is made less aggressive
.gem-c-input.govuk-input {
margin: 0;
min-width: 0;
padding: govuk-spacing(1);
box-sizing: border-box;
&.gem-c-input--search-icon {
padding-left: govuk-spacing(6);
}
}
.gem-c-input__wrapper {
display: flex;
display: -ms-flexbox;
.gem-c-input {
display: inline-block;
flex: 0 1 auto;
}
.gem-c-input:focus {
z-index: 1; // increase z-index on focus so it appears over the suffix
}
}
.gem-c-input__prefix,
.gem-c-input__suffix {
@include govuk-font($size: 19);
background-color: govuk-colour("light-grey", $legacy: "grey-3");
border: $govuk-border-width-form-element solid $govuk-input-border-colour;
box-sizing: border-box;
cursor: default; // emphasise non-editable status of prefixes and suffixes
display: inline-block;
flex: 0 0 auto;
height: 40px;
margin-top: 0;
min-width: 40px;
padding: govuk-spacing(1);
text-align: center;
white-space: nowrap;
width: auto;
@if $govuk-typography-use-rem {
height: govuk-px-to-rem(40px);
min-width: govuk-px-to-rem(40px);
}
}
.gem-c-input__prefix {
border-right: 0;
}
.gem-c-input__suffix {
border-left: 0;
}
Version data entries
17 entries across 17 versions & 1 rubygems