Skip to content

#196739: updated icon button styles per design specs #13

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

Merged
dubunin merged 16 commits into from
Jul 29, 2016
Merged

#196739: updated icon button styles per design specs #13

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
d5288fd
#196743: removed beakWidth and class settings. Use defaults
Jul 22, 2016
4031190
TaskID 196744: updated default gapSpace to be 16
Jul 22, 2016
3b2bbcf
#196739: updated icon button styles per design specs
Jul 26, 2016
3907638
Merge pull request #11 from OfficeDev/dubunin/callout-issues
dubunin Jul 27, 2016
a142df5
Fixing list group header css
Jul 27, 2016
ff794c7
Bringing over the latest updates from separat VSO repo.
dzearing Jul 27, 2016
869361c
Replacing tabs with spaces.
dzearing Jul 27, 2016
e7231a9
Adding example and bestpractices.
dzearing Jul 27, 2016
5dd916c
Merge pull request #18 from OfficeDev/latest-bits
dzearing Jul 27, 2016
1212598
Removing examples from npm publishing. (#19)
dzearing Jul 27, 2016
60ffd0d
196739: code cleanup and contrast styles
Jul 27, 2016
983b923
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
aditima Jul 28, 2016
d64d0a3
Merge pull request #17 from aditima/master
aditima Jul 28, 2016
23c5bea
#196739: updated icon button styles per design specs
Jul 26, 2016
c017b61
196739: code cleanup and contrast styles
Jul 27, 2016
eb8711e
Merge branch 'dubunin/icon-button-styling' of https://github.com/Offi…
Jul 28, 2016
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
15 changes: 13 additions & 2 deletions src/components/Button/Button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,36 @@
@import "~office-ui-fabric/src/components/Button/Button";

.ms-Button--icon {
@include focus-border(0px);
background-color: transparent;
color: $ms-color-neutralSecondary;
padding: 0;
min-width: auto;
height: auto;
border: 0;

&:hover {
&:hover,
&:active {
background-color: transparent;
border-color: transparent;
outline-color: transparent;
color: $ms-color-neutralPrimary;
}
Copy link
Member

@cschlechty cschlechty Jul 27, 2016

Choose a reason for hiding this comment

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

Please verify this still looks like a button or how you'd expect in high contrast.

Copy link
Contributor Author

@dubunin dubunin Jul 27, 2016

Choose a reason for hiding this comment

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

Double checked with design to make sure this is the desired look. Also, worked with design to figure out high contrast colors for icon buttons. Decided best to use colors that match up with link colors in high contrast. Per design no hover color change necessary in high contrast. Cursor changing to pointer is change enough.


&:focus {
background-color: transparent;
}

.ms-Icon {
font-size: 16px;
padding: 8px;
}
Copy link
Member

@Jahnp Jahnp Jul 26, 2016

Choose a reason for hiding this comment

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

nit: newline before block declarations

.ms-Button-icon {
display: inline;
}
&.is-disabled, &:disabled {
Copy link
Member

@Jahnp Jahnp Jul 26, 2016

Choose a reason for hiding this comment

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

nit: newline before block declarations

color: $ms-color-neutralTertiaryAlt;
background-color: transparent;
}
}

// this is added because we have an anchor styled like a button and there is no
Expand Down