Use rem units to define off screen content
Using 10000px means content will be visible on screens with ultra-high resolution (although I don't think they exist nor will exist anytime soon). Having screens in the future with a width of 1000rem is less likely, since a line with 1000 characters would be pretty much impossible to read.
This commit is contained in:
@@ -74,6 +74,8 @@ $input-height: $line-height * 2;
|
||||
|
||||
$icon-width: $line-height * 2;
|
||||
|
||||
$off-screen-left: -1000rem;
|
||||
|
||||
$sdg-icon-min-width: 40px;
|
||||
|
||||
$sdg-colors: (
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
> :first-child {
|
||||
@include bottom-tooltip;
|
||||
left: -10000px;
|
||||
left: $off-screen-left;
|
||||
opacity: 0;
|
||||
transform: translateX(-50%);
|
||||
transition: opacity 0.3s, left 0s 0.3s;
|
||||
@@ -28,7 +28,7 @@
|
||||
}
|
||||
|
||||
&:not(:focus) > :first-child:hover {
|
||||
left: -10000px;
|
||||
left: $off-screen-left;
|
||||
}
|
||||
|
||||
&::before {
|
||||
|
||||
Reference in New Issue
Block a user