darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-05 22:38:25 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
4dcd8906c88fb2797cccbdab480bb8a04a436718
notifications-admin/app/assets/stylesheets/components/placeholder.scss

25 lines
647 B
SCSS
Raw Normal View History

Make placeholder look more editable Depends on: - [ ] https://github.com/alphagov/notifications-utils/pull/40 In research we’ve noticed two problems with the appearance of placeholders: 1. We are inconsistent about when we display the ((double brackets)). Sometimes we show them, sometimes we don’t. This doesn’t help user’s understanding about where the column names in their CSV file come from, or how they can edit the template to fix any errors. 2. Because they look so different from normal `<textarea>` text, it’s not immediately obvious that they can be edited just like normal text. They look more like something that can be dragged/inserted. So this commit: 1. Makes the brackets always-visible. 2. Makes the text colour of the placeholder `$text-colour`, and only highlights the name of the ‘variable’, not the brackets themselves.
2016-06-02 10:40:17 +01:00
%placeholder,
Hard code some data in the Python This commit adds some stubbed data for the pages. The structure of the data is just a proposal, but it gives the templates something to work with for now.
2015-12-10 16:48:07 +00:00
.placeholder {
Make placeholder look more editable Depends on: - [ ] https://github.com/alphagov/notifications-utils/pull/40 In research we’ve noticed two problems with the appearance of placeholders: 1. We are inconsistent about when we display the ((double brackets)). Sometimes we show them, sometimes we don’t. This doesn’t help user’s understanding about where the column names in their CSV file come from, or how they can edit the template to fix any errors. 2. Because they look so different from normal `<textarea>` text, it’s not immediately obvious that they can be edited just like normal text. They look more like something that can be dragged/inserted. So this commit: 1. Makes the brackets always-visible. 2. Makes the text colour of the placeholder `$text-colour`, and only highlights the name of the ‘variable’, not the brackets themselves.
2016-06-02 10:40:17 +01:00
Hard code some data in the Python This commit adds some stubbed data for the pages. The structure of the data is just a proposal, but it gives the templates something to work with for now.
2015-12-10 16:48:07 +00:00
display: inline;
Make placeholder look more editable Depends on: - [ ] https://github.com/alphagov/notifications-utils/pull/40 In research we’ve noticed two problems with the appearance of placeholders: 1. We are inconsistent about when we display the ((double brackets)). Sometimes we show them, sometimes we don’t. This doesn’t help user’s understanding about where the column names in their CSV file come from, or how they can edit the template to fix any errors. 2. Because they look so different from normal `<textarea>` text, it’s not immediately obvious that they can be edited just like normal text. They look more like something that can be dragged/inserted. So this commit: 1. Makes the brackets always-visible. 2. Makes the text colour of the placeholder `$text-colour`, and only highlights the name of the ‘variable’, not the brackets themselves.
2016-06-02 10:40:17 +01:00
background: $yellow;
color: $text-colour;
overflow-wrap: break-word;
word-wrap: break-word;
border-radius: 20px;
box-shadow: inset 9px 0 0 0 $white, inset -9px 0 0 0 $white, inset 0 -3px 0 0 $white, inset 0 3px 0 0 $white;
.sms-message-wrapper & {
box-shadow: inset 9px 0 0 0 $panel-colour, inset -9px 0 0 0 $panel-colour, inset 0 -3.5px 0 0 $panel-colour, inset 0 3.5px 0 0 $panel-colour;
}
}
.placeholder-no-brackets {
@extend %placeholder;
padding-left: 3px;
padding-right: 3px;
border-radius: 1px;
box-shadow: inset 0 -2px 0 0 $white, inset 0 2px 0 0 $white;
Hard code some data in the Python This commit adds some stubbed data for the pages. The structure of the data is just a proposal, but it gives the templates something to work with for now.
2015-12-10 16:48:07 +00:00
}
Reference in New Issue Copy Permalink