mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-05-04 16:11:11 -04:00
71fd7f98a7
The grouping on this page was weird because these links were two far away from the associated textbox, and too close to the next textbox. This commit adds them as parameters to the textbox macro, which means their relative spacing can be controlled exactly, and thus reduced.
88 lines
1.3 KiB
SCSS
88 lines
1.3 KiB
SCSS
.textbox-highlight {
|
|
|
|
&-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
&-textbox {
|
|
resize: none;
|
|
z-index: 20;
|
|
background: none;
|
|
}
|
|
|
|
&-textbox,
|
|
&-background,
|
|
&-foreground,
|
|
&-mask {
|
|
@include core-19;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
width: 500px;
|
|
height: 200px;
|
|
margin: 0;
|
|
padding: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&-background,
|
|
&-foreground,
|
|
&-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
color: transparent;
|
|
white-space: pre-wrap;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
&-background {
|
|
|
|
z-index: 10;
|
|
|
|
.tag {
|
|
background: $light-blue;
|
|
border-radius: 3px;
|
|
color: transparent;
|
|
display: inline;
|
|
}
|
|
|
|
}
|
|
|
|
&-mask {
|
|
|
|
z-index: 30;
|
|
|
|
.tag {
|
|
color: $white;
|
|
text-shadow: 0 1px 0 $light-blue, 0 -1px 0 $light-blue;
|
|
position: relative;
|
|
display: inline;
|
|
overflow: hidden;
|
|
}
|
|
|
|
}
|
|
|
|
&-foreground {
|
|
|
|
z-index: 40;
|
|
|
|
.tag {
|
|
color: transparent;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
display: inline;
|
|
box-shadow: inset 0.75em 0 0 0 rgba($light-blue, .7),
|
|
inset -0.75em 0 0 0 rgba($light-blue, .7);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.textbox-help-link {
|
|
margin: 5px 0 0 0;
|
|
}
|