mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-06 08:28:26 -04:00
dfcfe6a91e
Letter templates have (or will have) multiple different editable regions. I think that the most intuitive way for this to work is to have - an edit link for each of these areas - positioned next to the thing to be edited Again, this isn’t fully hooked up, but since no-one is using letters live yet this is a good way of getting research feedback and pointing towards where we want the feature to go. Uses percentages for the positioning so that the alignment is maintained on mobile.
42 lines
718 B
SCSS
42 lines
718 B
SCSS
.template-container {
|
|
position: relative;
|
|
}
|
|
|
|
%edit-template-link,
|
|
.edit-template-link {
|
|
|
|
@include core-19;
|
|
position: absolute;
|
|
background: $link-colour;
|
|
color: $white;
|
|
padding: 10px $gutter-half;
|
|
z-index: 10000;
|
|
|
|
&:link, &:visited {
|
|
color: $white;
|
|
}
|
|
|
|
&:hover {
|
|
color: $light-blue-25;
|
|
}
|
|
|
|
}
|
|
|
|
.edit-template-link-letter-contact {
|
|
@extend %edit-template-link;
|
|
right: -25px;
|
|
top: 13.3%; // align to top of contact block
|
|
}
|
|
|
|
.edit-template-link-letter-address {
|
|
@extend %edit-template-link;
|
|
top: 16.5%; // align bottom edge to bottom of address
|
|
left: -5px;
|
|
}
|
|
|
|
.edit-template-link-letter-body {
|
|
@extend %edit-template-link;
|
|
top: 33.3%; // aligns to top of subject
|
|
left: -5px;
|
|
}
|