mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-28 11:49:13 -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.
57 lines
901 B
SCSS
57 lines
901 B
SCSS
%sms-message-wrapper,
|
|
.sms-message-wrapper {
|
|
|
|
width: 100%;
|
|
max-width: 450px;
|
|
box-sizing: border-box;
|
|
padding: $gutter-half $gutter-half $gutter-half $gutter-half;
|
|
background: $panel-colour;
|
|
border: 1px solid $panel-colour;
|
|
border-radius: 5px;
|
|
white-space: normal;
|
|
margin: 0 0 $gutter 0;
|
|
clear: both;
|
|
word-wrap: break-word;
|
|
|
|
p {
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
p + p {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
}
|
|
|
|
.sms-message-wrapper-with-radio {
|
|
@extend %sms-message-wrapper;
|
|
padding-left: 45px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sms-message-recipient {
|
|
@include copy-19;
|
|
color: $secondary-text-colour;
|
|
margin: 10px 0 0 0;
|
|
}
|
|
|
|
.sms-message-name {
|
|
@include bold-24;
|
|
margin: 20px 0 5px 0;
|
|
}
|
|
|
|
.sms-message-picker {
|
|
display: block;
|
|
margin: 7px 0 0 0;
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 50%;
|
|
z-index: 50;
|
|
}
|
|
|
|
.sms-message-from {
|
|
@include bold-19;
|
|
display: block;
|
|
}
|