Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Style Extension Update buttons to the match the green notification "badge" #6315

Merged
merged 3 commits into from
Apr 1, 2014
Merged

Style Extension Update buttons to the match the green notification "badge" #6315

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f269152
Style Extension Update buttons to the match the green "badge"
stowball Dec 24, 2013
977a246
Make appropriate color changes from PR comments
stowball Mar 24, 2014
acbf9ad
Whoops. Used tabs instead of spaces!
stowball Mar 24, 2014
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
16 changes: 16 additions & 0 deletions src/styles/brackets_patterns_override.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1070,6 +1070,22 @@ input[type="color"],
outline: none;
}
}

// Update Button Type
&.update {
background-color: #91cc41;
border-color: #658e2d;
Copy link
Member

Choose a reason for hiding this comment

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

Let's use #65A015 for border-color.

box-shadow: inset 0 1px 0 #d9edbd;
Copy link
Member

Choose a reason for hiding this comment

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

Use rgba(255, 255, 255, 0.27) for box-shadow.

color: #fff;
text-shadow: 0 1px 0 #333;
Copy link
Member

Choose a reason for hiding this comment

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

0 -1px 0 rgba(0, 0, 0, 0.24) for text-shadow, the text is white so we need to invert the shadow. Button labels in Brackets are sunken.

Copy link
Member

Choose a reason for hiding this comment

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

Add font-weight: 500; to increase the contrast a bit more between text and background color.

Copy link
Member

Choose a reason for hiding this comment

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

Please use @font-weight-semibold instead of 500


&:active {
background-color: #82b839;
border-color: #5b8028;
box-shadow: inset 0 1px 0 #d3e6ba;
Copy link
Member

Choose a reason for hiding this comment

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

Use rgba(0, 0, 0, 0.06) for pressed button shadow.

color: #fff;
}
}

// Button Sizes
&.large {
Expand Down