darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-16 19:30:13 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make placeholder highlighting align at all size

Browse Source 
Because the placeholder highlighting was defined in pixels it got
slightly out of line when it was used at larger type sizes, eg inside a
heading.

By using `em`s it will scale with the size of the type.
This commit is contained in:
Chris Hill-Scott
2016-08-30 15:34:12 +01:00
parent 1651c72b3d
commit 45c4b24d9a
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/stylesheets/components/placeholder.scss
View File

@@ -7,10 +7,10 @@
overflow-wrap: break-word;
word-wrap: break-word;
border-radius: 20px;
box-shadow: inset 9px 0 0 0 $white, inset -9px 0 0 0 $white, inset 0 -3px 0 0 $white, inset 0 3px 0 0 $white;
box-shadow: inset 0.47em 0 0 0 $white, inset -0.47em 0 0 0 $white, inset 0 -0.15em 0 0 $white, inset 0 0.15em 0 0 $white;
.sms-message-wrapper & {
box-shadow: inset 9px 0 0 0 $panel-colour, inset -9px 0 0 0 $panel-colour, inset 0 -3.5px 0 0 $panel-colour, inset 0 3.5px 0 0 $panel-colour;
box-shadow: inset 0.47em 0 0 0 $panel-colour, inset -0.47em 0 0 0 $panel-colour, inset 0 -0.18em 0 0 $panel-colour, inset 0 0.18em 0 0 $panel-colour;
}
}
@@ -20,7 +20,7 @@
padding-left: 3px;
padding-right: 3px;
border-radius: 1px;
box-shadow: inset 0 -2px 0 0 $white, inset 0 2px 0 0 $white;
box-shadow: inset 0 -0.1em 0 0 $white, inset 0 0.1em 0 0 $white;
}
.placeholder-conditional {
@@ -31,10 +31,10 @@
border-bottom-left-radius: 20px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
box-shadow: inset 9px 0 0 0 $white, inset -17px 0 0 0 $white, inset 0 -3px 0 0 $white, inset 0 3px 0 0 $white;
box-shadow: inset 0.47em 0 0 0 $white, inset -0.89em 0 0 0 $white, inset 0 -0.16em 0 0 $white, inset 0 0.16em 0 0 $white;
.sms-message-wrapper & {
box-shadow: inset 9px 0 0 0 $panel-colour, inset -17px 0 0 0 $panel-colour, inset 0 -3.5px 0 0 $panel-colour, inset 0 3.5px 0 0 $panel-colour;
box-shadow: inset 0.47em 0 0 0 $panel-colour, inset -0.89em 0 0 0 $panel-colour, inset 0 -0.18em 0 0 $panel-colour, inset 0 0.18em 0 0 $panel-colour;
}
}