darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-19 14:09:20 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
2cecadfcbc37cb4e64cb61fc75cbc47dee71cfac
notifications-admin/app/assets/stylesheets/components/placeholder.scss

60 lines
1.5 KiB
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;
Make placeholder highlighting align at all size Because the placeholder highlighting was defined in pixels it got slightly out of line when it was used at larger type sizes, eg inside a heading. By using `em`s it will scale with the size of the type.
2016-08-30 15:34:12 +01:00
box-shadow: inset 0.47em 0 0 0 $white, inset -0.47em 0 0 0 $white, inset 0 -0.15em 0 0 $white, inset 0 0.15em 0 0 $white;
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
.sms-message-wrapper & {
Make placeholder highlighting align at all size Because the placeholder highlighting was defined in pixels it got slightly out of line when it was used at larger type sizes, eg inside a heading. By using `em`s it will scale with the size of the type.
2016-08-30 15:34:12 +01:00
box-shadow: inset 0.47em 0 0 0 $panel-colour, inset -0.47em 0 0 0 $panel-colour, inset 0 -0.18em 0 0 $panel-colour, inset 0 0.18em 0 0 $panel-colour;
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-no-brackets {
@extend %placeholder;
padding-left: 3px;
padding-right: 3px;
border-radius: 1px;
Make placeholder highlighting align at all size Because the placeholder highlighting was defined in pixels it got slightly out of line when it was used at larger type sizes, eg inside a heading. By using `em`s it will scale with the size of the type.
2016-08-30 15:34:12 +01:00
box-shadow: inset 0 -0.1em 0 0 $white, inset 0 0.1em 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
}
Add conditional placeholder detection Implements: https://github.com/alphagov/notifications-utils/pull/51 Copies the same regex. Adds some CSS to display conditional placeholders differently to normal placeholders (vertical rather that curved right-hand edge).
2016-07-12 12:48:09 +01:00
.placeholder-conditional {
@extend %placeholder;
border-radius: 0;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
Make placeholder highlighting align at all size Because the placeholder highlighting was defined in pixels it got slightly out of line when it was used at larger type sizes, eg inside a heading. By using `em`s it will scale with the size of the type.
2016-08-30 15:34:12 +01:00
box-shadow: inset 0.47em 0 0 0 $white, inset -0.89em 0 0 0 $white, inset 0 -0.16em 0 0 $white, inset 0 0.16em 0 0 $white;
Add conditional placeholder detection Implements: https://github.com/alphagov/notifications-utils/pull/51 Copies the same regex. Adds some CSS to display conditional placeholders differently to normal placeholders (vertical rather that curved right-hand edge).
2016-07-12 12:48:09 +01:00
.sms-message-wrapper & {
Make placeholder highlighting align at all size Because the placeholder highlighting was defined in pixels it got slightly out of line when it was used at larger type sizes, eg inside a heading. By using `em`s it will scale with the size of the type.
2016-08-30 15:34:12 +01:00
box-shadow: inset 0.47em 0 0 0 $panel-colour, inset -0.89em 0 0 0 $panel-colour, inset 0 -0.18em 0 0 $panel-colour, inset 0 0.18em 0 0 $panel-colour;
Add conditional placeholder detection Implements: https://github.com/alphagov/notifications-utils/pull/51 Copies the same regex. Adds some CSS to display conditional placeholders differently to normal placeholders (vertical rather that curved right-hand edge).
2016-07-12 12:48:09 +01:00
}
}
Style redacted placeholders The visual convention for redaction is heavy black crossing-out. Our text colour isn’t always black exactly though (usually it’s very dark grey, sometimes just dark grey). `currentColor` is a magical CSS value that let’s us set the background colour to whatever the text colour is. So both the text and redaction look like they are part of the same thing. Couple of subtle visual things here: - opacity to make the colour better match the text colour – a filled box naturally looks darker than thin text, so this knocks it back a bit - an inset shadow to take a few pixels of the bottom edge – the visual weight of text is biased upwards because text has ore capital letters and ascenders than descenders – this make it look aligned visually
2017-06-24 17:32:47 +01:00
.placeholder-redacted {
background: currentColor;
padding: 0 0.5em;
opacity: 0.8;
Fix redacted placeholder style on orange BG Also does a tiny bit more tweaking of the vertical position to get it looking aligned correct.
2017-06-29 15:30:10 +01:00
box-shadow: inset 0 -0.35em 0 0 $white;
position: relative;
top: 0.1em;
Style redacted placeholders The visual convention for redaction is heavy black crossing-out. Our text colour isn’t always black exactly though (usually it’s very dark grey, sometimes just dark grey). `currentColor` is a magical CSS value that let’s us set the background colour to whatever the text colour is. So both the text and redaction look like they are part of the same thing. Couple of subtle visual things here: - opacity to make the colour better match the text colour – a filled box naturally looks darker than thin text, so this knocks it back a bit - an inset shadow to take a few pixels of the bottom edge – the visual weight of text is biased upwards because text has ore capital letters and ascenders than descenders – this make it look aligned visually
2017-06-24 17:32:47 +01:00
.sms-message-wrapper & {
Fix redacted placeholder style on orange BG Also does a tiny bit more tweaking of the vertical position to get it looking aligned correct.
2017-06-29 15:30:10 +01:00
box-shadow: inset 0 -0.35em 0 0 $panel-colour;
}
*:focus + p & {
box-shadow: inset 0 -0.35em 0 0 $yellow;
Style redacted placeholders The visual convention for redaction is heavy black crossing-out. Our text colour isn’t always black exactly though (usually it’s very dark grey, sometimes just dark grey). `currentColor` is a magical CSS value that let’s us set the background colour to whatever the text colour is. So both the text and redaction look like they are part of the same thing. Couple of subtle visual things here: - opacity to make the colour better match the text colour – a filled box naturally looks darker than thin text, so this knocks it back a bit - an inset shadow to take a few pixels of the bottom edge – the visual weight of text is biased upwards because text has ore capital letters and ascenders than descenders – this make it look aligned visually
2017-06-24 17:32:47 +01:00
}
}
Reference in New Issue Copy Permalink