consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use rem units to define off screen content

Browse Source 
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:
Javi Martín
2021-03-07 18:08:27 +01:00
parent 0f6229cc2f
commit 1ee70464db
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/_consul_settings.scss
View File

@@ -74,6 +74,8 @@ $input-height: $line-height * 2;
$icon-width: $line-height * 2; $icon-width: $line-height * 2;
$off-screen-left: -1000rem;
$sdg-icon-min-width: 40px; $sdg-icon-min-width: 40px;
$sdg-colors: ( $sdg-colors: (

4
app/assets/stylesheets/admin/table_actions.scss
View File

@@ -10,7 +10,7 @@
> :first-child { > :first-child {
@include bottom-tooltip; @include bottom-tooltip;
left: -10000px; left: $off-screen-left;
opacity: 0; opacity: 0;
transform: translateX(-50%); transform: translateX(-50%);
transition: opacity 0.3s, left 0s 0.3s; transition: opacity 0.3s, left 0s 0.3s;
@@ -28,7 +28,7 @@
} }
&:not(:focus) > :first-child:hover { &:not(:focus) > :first-child:hover {
left: -10000px; left: $off-screen-left;
} }
&::before { &::before {