Skip to content

[Button] Fixes #5643 Primary & Secondary Inverted Buttons #6242

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

Closed
wants to merge 9 commits into from
Closed

[Button] Fixes #5643 Primary & Secondary Inverted Buttons #6242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
20361f2
Add issue templates
jlukic Feb 23, 2018
25b7b26
Update ISSUE_TEMPLATE.md
jlukic Feb 23, 2018
9d23bed
Update ISSUE_TEMPLATE.md
jlukic Feb 23, 2018
b987777
Update ISSUE_TEMPLATE.md
jlukic Feb 23, 2018
411989c
Update ISSUE_TEMPLATE.md
jlukic Feb 23, 2018
10ebc98
Update ISSUE_TEMPLATE.md
jlukic Feb 23, 2018
6819743
Update ISSUE_TEMPLATE.md
jlukic Feb 23, 2018
64b9fdb
Added primary & secondary inverted buttons Fixes #5643
Mar 5, 2018
8249072
Merge branch 'next' into patch-5643
Mar 5, 2018
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
10 changes: 4 additions & 6 deletions .github/ISSUE_TEMPLATE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,12 @@
Chat - https://gitter.im/Semantic-Org/Semantic-UI
SO - https://stackoverflow.com/questions/tagged/semantic-ui?sort=votes

✔ Enhancements → Be specific. Assume backwards compatibility is a necessity. Suggest implementation when possible.
✔ BUGS → ❤❤❤. Keep in mind some bugs may not be immediately fixable due to backwards compatibility or CSS limitations.

✔ BUGS → This form is required:
✔ Enhancements → Only specific enhancements with detailed descriptions.

### Issue Titles
### Title (Put in field above)
Use the format: [Component] Component Should Do X

For example: [Checkbox] onChange Should Fire when update triggered via DOM
i.e. [Checkbox] onChange Should Fire When Update Triggered via DOM

### Steps

Expand Down
54 changes: 48 additions & 6 deletions src/definitions/elements/button.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,12 +329,22 @@
Inverted
--------------------*/

.ui.inverted.button {
.ui.inverted.button:not(.primary + .secondary) {
box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
background: transparent none;
color: @white;
text-shadow: none !important;
}
.ui.inverted.primary.button {
box-shadow: 0px 0px 0px @invertedBorderSize @primaryColor inset !important;
background: transparent none;
color: @primaryColor;
}
.ui.inverted.secondary.button {
box-shadow: 0px 0px 0px @invertedBorderSize @secondaryColor inset !important;
background: transparent none;
color: @secondaryColor;
}

/* Group */
.ui.inverted.buttons .button {
Expand All @@ -353,25 +363,57 @@
/* States */

/* Hover */
.ui.inverted.button:hover {
.ui.inverted.button:hover:not(.primary + .secondary) {
background: @white;
box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
color: @hoverColor;
}
.ui.inverted.primary.button:hover {
background: @primaryColorHover;
box-shadow: 0px 0px 0px @invertedBorderSize @primaryColorHover inset !important;
color: @white;
}
.ui.inverted.secondary.button:hover {
background: @secondaryColorHover;
box-shadow: 0px 0px 0px @invertedBorderSize @secondaryColorHover inset !important;
color: @white;
}

/* Active / Focus */
.ui.inverted.button:focus,
.ui.inverted.button.active {
.ui.inverted.button:focus:not(.primary + .secondary),
.ui.inverted.button.active:not(.primary + .secondary) {
background: @white;
box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
color: @focusColor;
}
.ui.inverted.primary.button:focus,
.ui.inverted.primary.button.active {
background: @primaryColorActive;
box-shadow: 0px 0px 0px @invertedBorderSize @primaryColorActive inset !important;
color: @white;
}
.ui.inverted.secondary.button:focus,
.ui.inverted.secondary.button.active {
background: @secondaryColorActive;
box-shadow: 0px 0px 0px @invertedBorderSize @secondaryColorActive inset !important;
color: @white;
}

/* Active Focus */
.ui.inverted.button.active:focus {
.ui.inverted.button.active:focus:not(.primary + .secondary) {
background: @midWhite;
box-shadow: 0px 0px 0px @invertedBorderSize @midWhite inset !important;
color: @focusColor;
color: @white;
}
.ui.inverted.primary.button.active:focus {
background: @primaryColorActive;
box-shadow: 0px 0px 0px @invertedBorderSize @primaryColorActive inset !important;
color: @white;
}
.ui.inverted.secondary.button.active:focus {
background: @secondaryColorActive;
box-shadow: 0px 0px 0px @invertedBorderSize @secondaryColorActive inset !important;
color: @white;
}


Expand Down