darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-07 03:48:26 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
e2099d6170f2dade3dce41172ef88bcff02ea853
notifications-admin/app/assets/stylesheets/components/tick-cross.scss

82 lines
1.3 KiB
SCSS
Raw Normal View History

Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
%tick-cross {
Use 19px not 16px type in more places Making the navigation narrower means that we have more space on every page. So on pages where we had to use 16px type just to fit stuff on the page we can now bump the type size up to something less miserly. This is mainly the team and settings pages. We still need to use 16px on pages which list notifications or previews of spreadsheets, because we’re still trying to fit a lot of information onto these pages, so every little space-saving helps.
2017-03-15 12:50:45 +00:00
@include core-19;
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
display: inline-block;
background-size: 19px 19px;
background-repeat: no-repeat;
Change manage team layout to fit extra option We’ve moved from three to four permissions. Four permissions don’t fit in the exiting horizontal layout. This commit makes the permissions stack vertically instead. This approach has some downsides: - makes the permissions less easy to scan vertically - makes them take up a lot more space (and at lives services, most of them have somewhere around 15 team members) But I think for now it’s better than any horizontal alternative that I tried.
2017-08-17 14:30:53 +01:00
background-position: 0 6px;
padding: 6px 0 5px 25px;
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
}
.tick-cross {
&-tick {
@extend %tick-cross;
background-image: file-url('tick.png');
}
&-cross {
@extend %tick-cross;
color: $secondary-text-colour;
Fix ticks and crosses on team page in IE8 The ticks and crosses on the team page are served bigger than actual size (128×128px). They are then resized using CSS3 `background-size` to their displayed size (19px). The reason for doing this is so they display crisply on retina screens. IE8 doesn’t support `background-size` (see http://caniuse.com/#feat=background-img-opts). This means that the ticks and crosses get show at their original size (way too big). This commit adds resized versions of the ticks and crosses which are then served to these older browsers only.
2017-01-23 13:02:36 +00:00
background-image: file-url('cross-grey.png');
Change manage team layout to fit extra option We’ve moved from three to four permissions. Four permissions don’t fit in the exiting horizontal layout. This commit makes the permissions stack vertically instead. This approach has some downsides: - makes the permissions less easy to scan vertically - makes them take up a lot more space (and at lives services, most of them have somewhere around 15 team members) But I think for now it’s better than any horizontal alternative that I tried.
2017-08-17 14:30:53 +01:00
box-shadow: inset 20px 0 0 0 rgba(255, 255, 255, 0.6);
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
}
&-list {
Change manage team layout to fit extra option We’ve moved from three to four permissions. Four permissions don’t fit in the exiting horizontal layout. This commit makes the permissions stack vertically instead. This approach has some downsides: - makes the permissions less easy to scan vertically - makes them take up a lot more space (and at lives services, most of them have somewhere around 15 team members) But I think for now it’s better than any horizontal alternative that I tried.
2017-08-17 14:30:53 +01:00
position: relative;
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
&-permissions {
Hide ID when only one reply to address is shown Most user will only have one reply to address. Which means they should never have to worry about IDs. And if you only have one then you never need its ID, because the last remaining address will always be the default. So IDs should only be shown when a service has created more than one reply to address. This required a bit of visual tweaking of the _user list_ pattern, because its spacing wasn’t defined in a way that worked when only the name of the thing, and not its details were shown on the page.
2017-09-28 11:35:52 +01:00
margin-top: 5px;
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
li {
Change manage team layout to fit extra option We’ve moved from three to four permissions. Four permissions don’t fit in the exiting horizontal layout. This commit makes the permissions stack vertically instead. This approach has some downsides: - makes the permissions less easy to scan vertically - makes them take up a lot more space (and at lives services, most of them have somewhere around 15 team members) But I think for now it’s better than any horizontal alternative that I tried.
2017-08-17 14:30:53 +01:00
display: block;
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
margin-right: 0.5em;
}
}
&-edit-link {
Make hit area bigger on team members ‘edit’ links Bigger hit areas are generally better (cf Fitt’s law[1]), as long as they’re not ambiguous. This commit enlarges the hit area of the edit links (using a border) so they fill the same vertical space as the row they sit in.
2019-02-11 11:57:53 +00:00
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
text-align: right;
Change manage team layout to fit extra option We’ve moved from three to four permissions. Four permissions don’t fit in the exiting horizontal layout. This commit makes the permissions stack vertically instead. This approach has some downsides: - makes the permissions less easy to scan vertically - makes them take up a lot more space (and at lives services, most of them have somewhere around 15 team members) But I think for now it’s better than any horizontal alternative that I tried.
2017-08-17 14:30:53 +01:00
position: absolute;
Hide ID when only one reply to address is shown Most user will only have one reply to address. Which means they should never have to worry about IDs. And if you only have one then you never need its ID, because the last remaining address will always be the default. So IDs should only be shown when a service has created more than one reply to address. This required a bit of visual tweaking of the _user list_ pattern, because its spacing wasn’t defined in a way that worked when only the name of the thing, and not its details were shown on the page.
2017-09-28 11:35:52 +01:00
top: -25px;
Change manage team layout to fit extra option We’ve moved from three to four permissions. Four permissions don’t fit in the exiting horizontal layout. This commit makes the permissions stack vertically instead. This approach has some downsides: - makes the permissions less easy to scan vertically - makes them take up a lot more space (and at lives services, most of them have somewhere around 15 team members) But I think for now it’s better than any horizontal alternative that I tried.
2017-08-17 14:30:53 +01:00
right: -135px;
Make hit area bigger on team members ‘edit’ links Bigger hit areas are generally better (cf Fitt’s law[1]), as long as they’re not ambiguous. This commit enlarges the hit area of the edit links (using a border) so they fill the same vertical space as the row they sit in.
2019-02-11 11:57:53 +00:00
a {
Use pseudo elements not borders This is the technique that GOV.UK Frontend uses to make clickable areas of buttons bigger. See: https://github.com/alphagov/govuk-frontend/blob/47407edcb5694afb36b6aa6b2a6050a5e92f9ef4/src/components/button/_button.scss#L89
2019-02-13 13:28:32 +00:00
&:before {
content: "";
display: block;
position: absolute;
Replace $gutter with govuk-spacing function Replaced `$gutter` and similar variables such as `$gutter-half` with the `govuk-spacing()` static spacing function. This uses `govuk-spacing()` instead of `$govuk-gutter` because `$govuk-gutter` should only be used for the gaps in between grid columns and we were mostly using `$gutter` to add more space around elements. There are other places in the SCSS files where we had hardcoded a measurement in px which could be replaced with `govuk-spacing`, but this commit only replaces the existing uses of `$gutter`.
2020-02-21 13:21:44 +00:00
top: -govuk-spacing(3) - 1;
Use pseudo elements not borders This is the technique that GOV.UK Frontend uses to make clickable areas of buttons bigger. See: https://github.com/alphagov/govuk-frontend/blob/47407edcb5694afb36b6aa6b2a6050a5e92f9ef4/src/components/button/_button.scss#L89
2019-02-13 13:28:32 +00:00
right: 0;
Replace $gutter with govuk-spacing function Replaced `$gutter` and similar variables such as `$gutter-half` with the `govuk-spacing()` static spacing function. This uses `govuk-spacing()` instead of `$govuk-gutter` because `$govuk-gutter` should only be used for the gaps in between grid columns and we were mostly using `$gutter` to add more space around elements. There are other places in the SCSS files where we had hardcoded a measurement in px which could be replaced with `govuk-spacing`, but this commit only replaces the existing uses of `$gutter`.
2020-02-21 13:21:44 +00:00
bottom: -govuk-spacing(3);
left: -govuk-spacing(3);
Use pseudo elements not borders This is the technique that GOV.UK Frontend uses to make clickable areas of buttons bigger. See: https://github.com/alphagov/govuk-frontend/blob/47407edcb5694afb36b6aa6b2a6050a5e92f9ef4/src/components/button/_button.scss#L89
2019-02-13 13:28:32 +00:00
background: transparent;
}
Make hit area bigger on team members ‘edit’ links Bigger hit areas are generally better (cf Fitt’s law[1]), as long as they’re not ambiguous. This commit enlarges the hit area of the edit links (using a border) so they fill the same vertical space as the row they sit in.
2019-02-11 11:57:53 +00:00
Remove all redundant link CSS Giving all links the GOVUK Frontend classes, and the new `govuk-link--destructive` class, means some styles are already applied. This strips out those styles. Note: there's still a good amount of styling, most of which is to make the focus styles specific to the space the link is in. These will need reviewing when GOVUK Frontend is bumped past version 3 as this brings in new focus styles.
2020-02-11 22:23:03 +00:00
&:active:before,
&:focus:before {
border-color: $yellow;
border-style: solid;
border-width: 15px 3px 15px 15px;
right: -3px;
Use pseudo elements not borders This is the technique that GOV.UK Frontend uses to make clickable areas of buttons bigger. See: https://github.com/alphagov/govuk-frontend/blob/47407edcb5694afb36b6aa6b2a6050a5e92f9ef4/src/components/button/_button.scss#L89
2019-02-13 13:28:32 +00:00
}
Make hit area bigger on team members ‘edit’ links Bigger hit areas are generally better (cf Fitt’s law[1]), as long as they’re not ambiguous. This commit enlarges the hit area of the edit links (using a border) so they fill the same vertical space as the row they sit in.
2019-02-11 11:57:53 +00:00
}
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
}
Email auth for inviting members and editing permissions
2017-11-01 15:36:27 +00:00
&-hint {
color: #6F777B;
padding-top: 5px;
}
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
}
}
Reference in New Issue Copy Permalink