darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-18 05:29:38 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
55abdae45d315e9f6b8564a9d62ee149c7b4ab49
notifications-admin/app/assets/stylesheets/components/pill.scss

152 lines
3.1 KiB
SCSS
Raw Normal View History

Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
.pill {
display: flex;
Make the selected pill item a link All other navigations have their selected item as a link so we should match this. Includes changes to the pill CSS so: 1. it doesn't use elements in the selectors 2. all the selectors use BEM I did 2. because I had to change the classes/selectors anyway, they might as well match the style GOVUK Design System uses.
2020-09-04 13:32:34 +01:00
&-item__container {
Mark up ‘pill’ component as being tabs Currently it’s not possible for a screen reader user to know which financial year they’re looking at. From the accessibility report: > The financial year links are contained in a navigation region - > tabbing or arrowing through only reads out the links, not the main > information of "2016 to 2017 financial year" - that information is > vital for understanding the page content. This problem also applies to other pages which use the `pill` component, which is effectively tabbed navigation (that reloads the page rather than showing or hiding content on the page). There are specific ARIA attributes that can be used to mark up a navigation as being tabbed. This commit: - adds those attributes - makes the selected ‘tab’ visible to screenreaders and keyboard focusable - adds a visual focus indicator to the selected tab - adds `id`s to the parts of the page that are controlled by the tabs so that they are labelled as such This also means changing the pill component from being a `<nav>` to a `<ul>` because `tablist` is not a valid `role` for a `nav`. Mostly follows the example here: http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml
2017-02-14 14:21:36 +00:00
width: 25%;
flex-grow: 1;
text-align: left;
Add comment to explain combining of flex and float Just so no-one thinks it’s redundant and removes it.
2018-11-13 14:22:48 +00:00
/*
For browsers that don’t support flexbox, use float instead.
Float does not create floating of flex item, and do not take it
out-of-flow. So this is ignored by browsers that support flexbox.
See: https://www.w3.org/TR/css-flexbox-1/#flex-containers
*/
Fix folder navigation in IE 10 IE10 doesn’t support flexbox. We can work around this using floats. I think the flexbox will override it, so will be ignored by newer browsers.
2018-11-13 14:01:19 +00:00
float: left;
Make pill items match their heights
2020-02-06 16:38:24 +00:00
/*
Setting this as a flex container means the contents (1 item)
will fill the vertical space due to `align-items` defaulting
to `stretch`.
See: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#prop-align-items
*/
display: flex;
Mark up ‘pill’ component as being tabs Currently it’s not possible for a screen reader user to know which financial year they’re looking at. From the accessibility report: > The financial year links are contained in a navigation region - > tabbing or arrowing through only reads out the links, not the main > information of "2016 to 2017 financial year" - that information is > vital for understanding the page content. This problem also applies to other pages which use the `pill` component, which is effectively tabbed navigation (that reloads the page rather than showing or hiding content on the page). There are specific ARIA attributes that can be used to mark up a navigation as being tabbed. This commit: - adds those attributes - makes the selected ‘tab’ visible to screenreaders and keyboard focusable - adds a visual focus indicator to the selected tab - adds `id`s to the parts of the page that are controlled by the tabs so that they are labelled as such This also means changing the pill component from being a `<nav>` to a `<ul>` because `tablist` is not a valid `role` for a `nav`. Mostly follows the example here: http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml
2017-02-14 14:21:36 +00:00
}
Make the selected pill item a link All other navigations have their selected item as a link so we should match this. Includes changes to the pill CSS so: 1. it doesn't use elements in the selectors 2. all the selectors use BEM I did 2. because I had to change the classes/selectors anyway, they might as well match the style GOVUK Design System uses.
2020-09-04 13:32:34 +01:00
&-item,
&-item--selected {
Center pill content using more flexbox Turns each pill item (already full height) into a flex container with its content as a column. Uses this to align the content (the pill label) to the middle of the column.
2020-02-07 17:42:53 +00:00
display: flex; // float causes display: block in browsers without flexbox
flex-direction: column;
justify-content: center;
Fix status counter in old IE versions We use flexbox to lay out the counts of sending/delivered/failed on the activity and job pages. flexbox makes the best use of the space when the numbers can be significantly different widths (eg 0 sending, 5000 delivered). Flexbox was only supported from IE 11 onwards [1]. And since we were setting the `display` property of the individual numbers to `block` they were rendering one-per-line on browsers that don’t support flexbox. This commit changes these items to be floated and a predefined width. In browsers that support it, flexbox seems to override these hard-coded widths. It’s not quite as good as the flexbox solution because: - it doesn’t adjust the widths in the nice way that flexbox does - it’s hard-coded to expect 4 items (we don’t have this component with any other number of items at the moment, so it won’t actually break anything) But it’s pretty much OK because: - it’s a lot better than the before - IE 8 and 9 combined only make up 5% of our users, and this will be a declining number - polyfilling flexbox would mean using Javascript, and we don’t serve working Javacript to IE 8 users anyway 1. http://caniuse.com/#feat=flexbox
2017-01-23 10:34:08 +00:00
float: left;
Mark up ‘pill’ component as being tabs Currently it’s not possible for a screen reader user to know which financial year they’re looking at. From the accessibility report: > The financial year links are contained in a navigation region - > tabbing or arrowing through only reads out the links, not the main > information of "2016 to 2017 financial year" - that information is > vital for understanding the page content. This problem also applies to other pages which use the `pill` component, which is effectively tabbed navigation (that reloads the page rather than showing or hiding content on the page). There are specific ARIA attributes that can be used to mark up a navigation as being tabbed. This commit: - adds those attributes - makes the selected ‘tab’ visible to screenreaders and keyboard focusable - adds a visual focus indicator to the selected tab - adds `id`s to the parts of the page that are controlled by the tabs so that they are labelled as such This also means changing the pill component from being a `<nav>` to a `<ul>` because `tablist` is not a valid `role` for a `nav`. Mostly follows the example here: http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml
2017-02-14 14:21:36 +00:00
box-sizing: border-box;
width: 100%;
Fix spacing in pill items At maximum zoom, the text in the items gets cropped horizontally. This removes the padding on their containers to give them more space and, instead, puts it on the content items instead. Left-aligned content still needs some padding on the left-hand side but centrally-aligned can grow into the whole space. This also reduces the padding applied below 420px width or when the screen is zoomed below 300%. Above that, our content needs more space between items but below that, the space allocated to the content is more important.
2020-08-26 14:24:00 +01:00
padding: 10px 0;
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
}
Make the selected pill item a link All other navigations have their selected item as a link so we should match this. Includes changes to the pill CSS so: 1. it doesn't use elements in the selectors 2. all the selectors use BEM I did 2. because I had to change the classes/selectors anyway, they might as well match the style GOVUK Design System uses.
2020-09-04 13:32:34 +01:00
&-item {
Give headline numbers a blue, not black background These numbers don’t look very clickable white-on-black. Blue is the colour of links, so lets see if they are more clickable in blue. The same clicking-a-big-number thing is also happening on the activity page, so this commit also changes the activity page to look the same.
2016-06-08 15:41:02 +01:00
$background: $link-colour;
background: $background;
color: $white;
border: 2px solid $background;
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
position: relative;
Put counts into the notification filters We can filter notifications on the activity page by state. This commit adds counts to those filters. This is mainly so that we can consistently do the same thing on the job page later on.
2016-06-08 15:15:59 +01:00
text-decoration: none;
cursor: pointer;
Give headline numbers a blue, not black background These numbers don’t look very clickable white-on-black. Blue is the colour of links, so lets see if they are more clickable in blue. The same clicking-a-big-number thing is also happening on the activity page, so this commit also changes the activity page to look the same.
2016-06-08 15:41:02 +01:00
&:link,
&:visited {
color: $white;
}
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
&:hover {
Give headline numbers a blue, not black background These numbers don’t look very clickable white-on-black. Blue is the colour of links, so lets see if they are more clickable in blue. The same clicking-a-big-number thing is also happening on the activity page, so this commit also changes the activity page to look the same.
2016-06-08 15:41:02 +01:00
color: $light-blue-25;
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
}
&:active,
&:focus {
z-index: 10;
Fix focus style for pill links Includes changes for: - pills as page navigation - pills as separate items - big number links
2020-09-14 23:31:13 +01:00
color: $govuk-focus-text-colour;
/* override default focus styles to inset bottom underline */
box-shadow: inset 0 -4px $govuk-focus-text-colour;
border: none;
padding: 12px 2px; /* compensate for lack of border with padding */
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
}
}
Make the selected pill item a link All other navigations have their selected item as a link so we should match this. Includes changes to the pill CSS so: 1. it doesn't use elements in the selectors 2. all the selectors use BEM I did 2. because I had to change the classes/selectors anyway, they might as well match the style GOVUK Design System uses.
2020-09-04 13:32:34 +01:00
&-item--selected {
background: inherit;
Give headline numbers a blue, not black background These numbers don’t look very clickable white-on-black. Blue is the colour of links, so lets see if they are more clickable in blue. The same clicking-a-big-number thing is also happening on the activity page, so this commit also changes the activity page to look the same.
2016-06-08 15:41:02 +01:00
border: 2px solid $black;
outline: 1px solid rgba($white, 0.1);
position: relative;
Add grey lines to visually show level of nesting Uses some CSS to draw some grey lines to show which radios descend from which. I don’t feel like the intentation is enough, and it looks a bit messy because the circles of the radio buttons don’t have straight edges easily suggest visual alignment. Copies the design from conditionally revealing content in the design system: https://design-system.service.gov.uk/components/radios/#conditionally-revealing-content Implementation is done with pseudo elements, because borders can’t be positionned exactly enough.
2019-01-04 13:44:52 +00:00
z-index: 10;
Mark up ‘pill’ component as being tabs Currently it’s not possible for a screen reader user to know which financial year they’re looking at. From the accessibility report: > The financial year links are contained in a navigation region - > tabbing or arrowing through only reads out the links, not the main > information of "2016 to 2017 financial year" - that information is > vital for understanding the page content. This problem also applies to other pages which use the `pill` component, which is effectively tabbed navigation (that reloads the page rather than showing or hiding content on the page). There are specific ARIA attributes that can be used to mark up a navigation as being tabbed. This commit: - adds those attributes - makes the selected ‘tab’ visible to screenreaders and keyboard focusable - adds a visual focus indicator to the selected tab - adds `id`s to the parts of the page that are controlled by the tabs so that they are labelled as such This also means changing the pill component from being a `<nav>` to a `<ul>` because `tablist` is not a valid `role` for a `nav`. Mostly follows the example here: http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml
2017-02-14 14:21:36 +00:00
Make the selected pill item a link All other navigations have their selected item as a link so we should match this. Includes changes to the pill CSS so: 1. it doesn't use elements in the selectors 2. all the selectors use BEM I did 2. because I had to change the classes/selectors anyway, they might as well match the style GOVUK Design System uses.
2020-09-04 13:32:34 +01:00
&:link,
&:visited {
color: $govuk-text-colour;
}
&:hover {
color: govuk-tint($govuk-text-colour, 25%);
}
&:active,
Mark up ‘pill’ component as being tabs Currently it’s not possible for a screen reader user to know which financial year they’re looking at. From the accessibility report: > The financial year links are contained in a navigation region - > tabbing or arrowing through only reads out the links, not the main > information of "2016 to 2017 financial year" - that information is > vital for understanding the page content. This problem also applies to other pages which use the `pill` component, which is effectively tabbed navigation (that reloads the page rather than showing or hiding content on the page). There are specific ARIA attributes that can be used to mark up a navigation as being tabbed. This commit: - adds those attributes - makes the selected ‘tab’ visible to screenreaders and keyboard focusable - adds a visual focus indicator to the selected tab - adds `id`s to the parts of the page that are controlled by the tabs so that they are labelled as such This also means changing the pill component from being a `<nav>` to a `<ul>` because `tablist` is not a valid `role` for a `nav`. Mostly follows the example here: http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml
2017-02-14 14:21:36 +00:00
&:focus {
Add grey lines to visually show level of nesting Uses some CSS to draw some grey lines to show which radios descend from which. I don’t feel like the intentation is enough, and it looks a bit messy because the circles of the radio buttons don’t have straight edges easily suggest visual alignment. Copies the design from conditionally revealing content in the design system: https://design-system.service.gov.uk/components/radios/#conditionally-revealing-content Implementation is done with pseudo elements, because borders can’t be positionned exactly enough.
2019-01-04 13:44:52 +00:00
z-index: 1000;
Fix focus style for pill links Includes changes for: - pills as page navigation - pills as separate items - big number links
2020-09-14 23:31:13 +01:00
color: $govuk-focus-text-colour;
border: solid 2px $black;
padding: 10px 0px; /* reset padding to default */
box-shadow: inset 0 -2px $govuk-focus-text-colour; /* remove bottom border from underline */
Mark up ‘pill’ component as being tabs Currently it’s not possible for a screen reader user to know which financial year they’re looking at. From the accessibility report: > The financial year links are contained in a navigation region - > tabbing or arrowing through only reads out the links, not the main > information of "2016 to 2017 financial year" - that information is > vital for understanding the page content. This problem also applies to other pages which use the `pill` component, which is effectively tabbed navigation (that reloads the page rather than showing or hiding content on the page). There are specific ARIA attributes that can be used to mark up a navigation as being tabbed. This commit: - adds those attributes - makes the selected ‘tab’ visible to screenreaders and keyboard focusable - adds a visual focus indicator to the selected tab - adds `id`s to the parts of the page that are controlled by the tabs so that they are labelled as such This also means changing the pill component from being a `<nav>` to a `<ul>` because `tablist` is not a valid `role` for a `nav`. Mostly follows the example here: http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml
2017-02-14 14:21:36 +00:00
}
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
}
Center-align pill text when there’s no big number When the text is left aligned it looks messy because the spacing is so uneven and there are no big numbers to give it some rhythm.
2017-06-23 10:53:24 +01:00
Make the selected pill item a link All other navigations have their selected item as a link so we should match this. Includes changes to the pill CSS so: 1. it doesn't use elements in the selectors 2. all the selectors use BEM I did 2. because I had to change the classes/selectors anyway, they might as well match the style GOVUK Design System uses.
2020-09-04 13:32:34 +01:00
&-item__label {
Fix spacing in pill items At maximum zoom, the text in the items gets cropped horizontally. This removes the padding on their containers to give them more space and, instead, puts it on the content items instead. Left-aligned content still needs some padding on the left-hand side but centrally-aligned can grow into the whole space. This also reduces the padding applied below 420px width or when the screen is zoomed below 300%. Above that, our content needs more space between items but below that, the space allocated to the content is more important.
2020-08-26 14:24:00 +01:00
Make the selected pill item a link All other navigations have their selected item as a link so we should match this. Includes changes to the pill CSS so: 1. it doesn't use elements in the selectors 2. all the selectors use BEM I did 2. because I had to change the classes/selectors anyway, they might as well match the style GOVUK Design System uses.
2020-09-04 13:32:34 +01:00
text-decoration: underline;
Fix spacing in pill items At maximum zoom, the text in the items gets cropped horizontally. This removes the padding on their containers to give them more space and, instead, puts it on the content items instead. Left-aligned content still needs some padding on the left-hand side but centrally-aligned can grow into the whole space. This also reduces the padding applied below 420px width or when the screen is zoomed below 300%. Above that, our content needs more space between items but below that, the space allocated to the content is more important.
2020-08-26 14:24:00 +01:00
// reduce padding until screen is above 420px / zoomed below 300%
padding-left: govuk-spacing(1);
@include govuk-media-query($from: 420px) {
padding-left: govuk-spacing(2);
}
}
Fix focus style for pill links Includes changes for: - pills as page navigation - pills as separate items - big number links
2020-09-14 23:31:13 +01:00
&-item,
&-item--selected {
&:focus .pill-item__label {
text-decoration: none;
}
}
Make the selected pill item a link All other navigations have their selected item as a link so we should match this. Includes changes to the pill CSS so: 1. it doesn't use elements in the selectors 2. all the selectors use BEM I did 2. because I had to change the classes/selectors anyway, they might as well match the style GOVUK Design System uses.
2020-09-04 13:32:34 +01:00
&-item--centered {
Center-align pill text when there’s no big number When the text is left aligned it looks messy because the spacing is so uneven and there are no big numbers to give it some rhythm.
2017-06-23 10:53:24 +01:00
text-align: center;
Fix spacing in pill items At maximum zoom, the text in the items gets cropped horizontally. This removes the padding on their containers to give them more space and, instead, puts it on the content items instead. Left-aligned content still needs some padding on the left-hand side but centrally-aligned can grow into the whole space. This also reduces the padding applied below 420px width or when the screen is zoomed below 300%. Above that, our content needs more space between items but below that, the space allocated to the content is more important.
2020-08-26 14:24:00 +01:00
padding-left: 0;
Center-align pill text when there’s no big number When the text is left aligned it looks messy because the spacing is so uneven and there are no big numbers to give it some rhythm.
2017-06-23 10:53:24 +01:00
}
Make the flow of using templates better For users who: - want to send messages from a template - want to edit templates For developers: - who need to get the ID of a template This commit mainly cleans up the choose template page so there are less options, and the options that are there are less wordy. This means: - moving ‘send yourself a test’ onto the send messages page, and making it button - stripping a lot of stuff out of the ‘send from API’ page, so it’s more obvious what the template ID is
2016-04-18 11:10:47 +01:00
}
Add a new pattern for sub-navigation This is like the ‘pill’ pattern that we use for filtering lists of notifications. However it is meant for navigating between discrete things, not a filtered view of the same list. This is why is has a gutter between each item, and no selected state. Turns out we already had a pattern about this on the dashboard, so this commit also changes the dashboard to use the same code.
2016-09-20 11:46:56 +01:00
.pill-separate {
&-item {
display: block;
text-align: left;
Give link-buttons an outline in high contrast The link-buttons we use in our pill component have a blue background which shows the area they occupy by default. In high contrast mode, backgrounds are hidden so the link-button text looks like it is floating because you can't see the edge of their area. These changes use the trick of adding a transparent border. This is hidden by default but displays in high contrast mode to show the edges of the link-button. I've reduced the padding to accommodate the extra space it takes up.
2021-10-28 12:13:29 +01:00
padding: 9px (govuk-spacing(3) - 1);
border: 1px solid transparent;
Centre text in pill navigation Now the text is smaller (fewer words) it looks a bit wrong bunched up on the left. the only other page this affects is ‘API integration’.
2018-07-19 10:36:15 +01:00
text-align: center;
Add a new pattern for sub-navigation This is like the ‘pill’ pattern that we use for filtering lists of notifications. However it is meant for navigating between discrete things, not a filtered view of the same list. This is why is has a gutter between each item, and no selected state. Turns out we already had a pattern about this on the dashboard, so this commit also changes the dashboard to use the same code.
2016-09-20 11:46:56 +01:00
&:link,
&:visited {
background: $link-colour;
color: $white;
text-decoration: underline;
}
Fix focus style for pill links Includes changes for: - pills as page navigation - pills as separate items - big number links
2020-09-14 23:31:13 +01:00
&:hover {
color: $light-blue-25;
}
Fix invisible focused item text GOV.UK Template hanged the colour of text in focused links in https://github.com/alphagov/govuk_template/commit/79466a489c38b0b82f4cb95daa2baba41b375a81 It was done with greater specificity than before. This means that the way we were previously overriding the focus colour (for links with a dark background) no longer works. This commit makes our override more specific, so that it works again.
2017-10-17 16:34:47 +01:00
&:focus,
&:link:focus {
Fix focus style for pill links Includes changes for: - pills as page navigation - pills as separate items - big number links
2020-09-14 23:31:13 +01:00
color: $govuk-focus-text-colour;
text-decoration: none;
background: $govuk-focus-colour;
/* override default focus style to inset bottom underline */
box-shadow: inset 0 -4px $govuk-focus-text-colour;
Add a new pattern for sub-navigation This is like the ‘pill’ pattern that we use for filtering lists of notifications. However it is meant for navigating between discrete things, not a filtered view of the same list. This is why is has a gutter between each item, and no selected state. Turns out we already had a pattern about this on the dashboard, so this commit also changes the dashboard to use the same code.
2016-09-20 11:46:56 +01:00
}
}
}
Reference in New Issue Copy Permalink