mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-29 04:09:07 -04:00
a7d6d85d8b
This doesn’t need to be a form—it’s not changing any data. And having the primary action on the page as ‘Use this template’ it makes it clear what the page is for.
69 lines
1.0 KiB
SCSS
69 lines
1.0 KiB
SCSS
%sms-message-wrapper,
|
|
.sms-message-wrapper {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: $gutter/2;
|
|
background: $panel-colour;
|
|
border: 1px solid $panel-colour;
|
|
border-radius: 5px;
|
|
white-space: normal;
|
|
margin: 0 0 $gutter 0;
|
|
}
|
|
|
|
.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: -20px 0 $gutter 0;
|
|
}
|
|
|
|
.sms-message-name {
|
|
@include bold-19;
|
|
margin: 20px 0 10px 0;
|
|
}
|
|
|
|
.sms-message-picker {
|
|
display: block;
|
|
margin: 7px 0 0 0;
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 50%;
|
|
z-index: 50;
|
|
}
|
|
|
|
label.sms-message-option {
|
|
|
|
display: block;
|
|
position: relative;
|
|
|
|
&.selected {
|
|
|
|
.sms-message-wrapper-with-radio {
|
|
background: $white;
|
|
border: 1px solid $text-colour;
|
|
}
|
|
|
|
}
|
|
|
|
&.focused {
|
|
|
|
outline: none;
|
|
|
|
.sms-message-wrapper-with-radio {
|
|
box-shadow: 0 0 0 3px $yellow;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.sms-message-use-link {
|
|
margin-top: 70px;
|
|
@include bold-19;
|
|
}
|