mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-05-01 14:41:25 -04:00
45c4b24d9a
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.
41 lines
1.2 KiB
SCSS
41 lines
1.2 KiB
SCSS
%placeholder,
|
|
.placeholder {
|
|
|
|
display: inline;
|
|
background: $yellow;
|
|
color: $text-colour;
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
border-radius: 20px;
|
|
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 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;
|
|
}
|
|
|
|
}
|
|
|
|
.placeholder-no-brackets {
|
|
@extend %placeholder;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
border-radius: 1px;
|
|
box-shadow: inset 0 -0.1em 0 0 $white, inset 0 0.1em 0 0 $white;
|
|
}
|
|
|
|
.placeholder-conditional {
|
|
|
|
@extend %placeholder;
|
|
border-radius: 0;
|
|
border-top-left-radius: 20px;
|
|
border-bottom-left-radius: 20px;
|
|
border-top-right-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
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 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;
|
|
}
|
|
|
|
}
|