Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make use of currentColor #62

Merged
merged 10 commits into from
Oct 5, 2020
Merged

Make use of currentColor #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
96d4dec
Make use of currentColor
Sep 23, 2020
bf23d90
Revert form-control-focus changes
Sep 23, 2020
22a5f99
currentColor cannot override color
Sep 23, 2020
8a2cede
Fix btn-alert:hover:active background
Oct 2, 2020
ebbc304
Fix navbar hover background
Oct 2, 2020
972366f
Remove commented out rule
Sep 24, 2020
5bfaba6
More use of currentColor
Oct 5, 2020
a9e7613
Navbar outline should use currentColor
Oct 2, 2020
79d7148
Fix btn-alert underline and hover color
Oct 2, 2020
711d8df
btn-link should have transparent border
Oct 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions assets/stylesheets/bootstrap/_button-groups.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,7 @@
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
border-color: $brand-primary;
// box-shadow: 0 0 0 1px $brand-primary;
border-color: currentColor;
}


Expand Down
22 changes: 11 additions & 11 deletions assets/stylesheets/bootstrap/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ a.btn {
.btn-default,
.btn-success,
.btn-warning {
@include button-variant-plain($btn-default-color, $btn-default-bg, $btn-default-border);
@include button-variant-plain($btn-default-color, $btn-default-bg);
}
// Appears in Talis turqoise
.btn-primary {
Expand All @@ -78,12 +78,12 @@ a.btn {

// Info appears as pink
.btn-info {
@include button-variant-plain($btn-default-color, $btn-default-bg, $btn-default-border);
@include button-variant-plain($btn-default-color, $btn-default-bg);
}

// Danger and error appear as a plain button with red text...
.btn-danger {
@include button-variant-plain($btn-danger-color, $btn-danger-bg, $btn-danger-color);
@include button-variant-plain($btn-danger-color, $btn-danger-bg);
}

.btn-alert {
Expand All @@ -96,8 +96,8 @@ a.btn {

// Make a button look and behave like a link
.btn-link {
font-weight: 400;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Redefined two lines below

color: $link-color;
border-color: transparent;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure btn-link always has a transparent border, even if it is also a btn-danger

Examples are

  • the cancel button on the action bar when item has been cut
    image
  • the set importance button when no importance has been set
    image

font-weight: 600;

&,
Expand All @@ -115,26 +115,26 @@ a.btn {
}

&:hover {
border-color: $btn-default-border;
border-color: currentColor;
background-color: $gray200;
}

&:focus {
border-color: $btn-default-color;
border-color: currentColor;
background-color: transparent;
box-shadow: 0px 0px 0px 1px $btn-default-border;
box-shadow: 0px 0px 0px 1px currentColor;
}

&:hover:focus {
background-color: $gray200;
border-color: $btn-default-color;
box-shadow: 0px 0px 0px 1px $btn-default-border;
border-color: currentColor;
box-shadow: 0px 0px 0px 1px currentColor
}

&:active {
background-color: $gray200;
border-color: $btn-default-color;
box-shadow: 0px 0px 0px 1px $btn-default-border;
border-color: currentColor;
box-shadow: 0px 0px 0px 1px currentColor;
}

&[disabled],
Expand Down
6 changes: 3 additions & 3 deletions assets/stylesheets/bootstrap/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@
}

&:focus {
outline: 2px solid $white;
outline: 2px solid currentColor;
outline-offset: -2px;
}

Expand Down Expand Up @@ -433,9 +433,9 @@
color: $navbar-default-link-color;

&:focus {
outline: 2px solid $white;
outline: 2px solid currentColor;
outline-offset: -2px;
background-color: $navbar-default-bg;
background-color: inherit;
}

&:hover {
Expand Down
2 changes: 1 addition & 1 deletion assets/stylesheets/bootstrap/_scaffolding.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ a {

&:focus {
text-decoration: none;
outline: 1px solid $link-hover-color;
outline: 1px solid currentColor;
}
}

Expand Down
6 changes: 6 additions & 0 deletions assets/stylesheets/bootstrap/mixins/_alerts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,10 @@
a {
color: $text-color;
}
.btn-alert {
text-decoration: none;
&:hover {
color: $white !important;
}
}
Comment on lines +18 to +23
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overwrite the two rules immediately above when we have an a styled as a button inside an alert using btn-alert

Should look like
image
and on hover
image

}
16 changes: 10 additions & 6 deletions assets/stylesheets/bootstrap/mixins/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

@mixin button-variant-plain($color, $background, $border) {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The $border seemed to always be the same as $color so I've removed and used currentColor for all instances of both $color and $border except for the base rule color: $color; which will get overridden by customer branding if needed

@mixin button-variant-plain($color, $background) {
color: $color;
background-color: $background;
border-color: $border;
border-color: currentColor;

&:hover {
background-color: #E9ECEF;
Expand All @@ -17,13 +17,13 @@
&.focus {
color: darken(saturate(adjust-hue($color, -0.2776), 1.4706), 7.0588);
background-color: $background;
border-color: darken(saturate(adjust-hue($color, -0.2776), 1.4706), 7.0588);;
box-shadow: 0px 0px 0px 1px $color;
border-color: currentColor;
box-shadow: 0px 0px 0px 1px currentColor;
}

&:focus:hover {
background-color: #E9ECEF;
box-shadow: 0px 0px 0px 1px $color;
box-shadow: 0px 0px 0px 1px currentColor;
}

&:active,
Expand All @@ -35,7 +35,7 @@
&:focus,
&.focus {
background-color: #E9ECEF;
box-shadow: 0px 0px 0px 1px $color;
box-shadow: 0px 0px 0px 1px currentColor;
}
}

Expand Down Expand Up @@ -199,6 +199,10 @@
background-image: none;
}

&:hover:active {
background-color: $black;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should favour hover background-color when both hover and active

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was it going transparent again when clicked?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep
Oct-05-2020 11-23-41

}

&.disabled,
&[disabled],
fieldset[disabled] {
Expand Down