Skip to content

Commit

Permalink
Rework search icon styles
Browse files Browse the repository at this point in the history
- used a mixin relying on calc, but the same effect can be achieved using absolute positioning and a scale transform (which defaults to an origin of the centre, meaning that it shrinks in place)
  • Loading branch information
andysellick committed Mar 4, 2024
1 parent 6767a8d commit bcde8b6
Showing 1 changed file with 8 additions and 15 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ $large-input-size: 50px;
height: $large-input-size;

.gem-c-search__icon {
@include icon-positioning($large-input-size);
transform: scale(.4);
}
}
}
Expand Down Expand Up @@ -106,19 +106,6 @@ $large-input-size: 50px;
}
}

@mixin icon-positioning($container-size) {
$icon-dimension: 20px;
$icon-position: calc(($container-size - $icon-dimension) / 2);

display: block;
pointer-events: none;
position: absolute;
height: $icon-dimension;
width: $icon-dimension;
top: $icon-position;
left: $icon-position;
}

.gem-c-search__submit {
border: 0;
cursor: pointer;
Expand All @@ -135,7 +122,13 @@ $large-input-size: 50px;
overflow: hidden;

.gem-c-search__icon {
@include icon-positioning($input-size);
pointer-events: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: scale(.5);
}

&:focus {
Expand Down

0 comments on commit bcde8b6

Please sign in to comment.