Skip to content

Commit

Permalink
button styles
Browse files Browse the repository at this point in the history
fixes

paper styles
  • Loading branch information
rossmoody committed Jul 16, 2019
1 parent 331f2f5 commit 4a8c282
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 50 deletions.
1 change: 1 addition & 0 deletions browser/resources/settings/brave_settings_overrides.html
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@
padding: 0 !important;
margin-top: 30px !important;
line-height: 1.25 !important;
border: none !important;
}

#advancedButton > iron-icon {
Expand Down
86 changes: 36 additions & 50 deletions ui/webui/resources/css/paper_button_style.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,70 +10,56 @@
*
* Translation of variants from Paper to Brave:
* action-button = Primary (solid fill bg, white fg)
* default = Secondary (outline color bg, white bg, color fg)
* default = default (outline color grey, white bg, dark grey fg)
*
*/

paper-button {
--brave-hover-color: #e7e7ec;
--brave-active-color: white;
--paper-button-ink-color: #242536 !important;

/* normal button */
--text-color: #242536 !important;
--border-color: var(--text-color) !important;
--hover-bg-color: var(--brave-hover-color) !important;
--hover-border-color: var(--text-color) !important;
--active-bg: var(--brave-active-color) !important;
/* Light theme */

/* action button */
--flat-text-color-action: white !important;
--flat-bg-action: var(--text-color) !important;
--hover-bg-action: var(--flat-bg-action) !important;
font-family: Poppins;
/* NOTE(petemill): some pages override default line-height for text,
but that shouldn't flow to buttons. It affects text centering. */
line-height: 1 !important;

border-radius: 20px !important;
border-color: currentColor !important;

--flat-focus-shadow-color: rgba(255, 69, 48, .4) !important;
paper-button {
--brave-text-color: #3b3e4f; /* grey800 */
--brave-brand-color: #ff7654; /* orange400 */
--brave-primary-hover: #ff977d; /* orange300 */
--brave-default-hover: rgba(255, 118, 84, 0.1); /* orange400 */
--brave-focus-outline: rgba(255, 118, 84, 0.4); /* orange400 */
--brave-default-border: #c2c4cf; /* grey 400 */
--paper-button-ink-color: var(--brave-brand-color) !important;
}

/* Dark theme */
[dark] paper-button,
:host-context([dark]) paper-button {
/* --text-color: #AEB1C2 !important; */
--text-color: var(--cr-primary-text-color) !important;
--brave-hover-color: rgb(63, 63, 63) !important;
--flat-text-color-action: #242536 !important;
--brave-text-color: #ffffff;
--brave-default-border: #5e6175; /* grey 700 */
}

paper-button:not(.action-button):hover {
/* background handled in chromium but not foreground */
color: var(--hover-fg-color, var(--text-color));
/* Regular styles */
paper-button {
font-family: Muli !important;
border-radius: 20px !important;
border: 1px solid var(--brave-default-border) !important;
color: var(--brave-text-color) !important;
outline: none;
}

paper-button:not(.action-button):active {
/* background handled in chromium but not foreground */
color: var(--active-fg-color, var(--text-color));
paper-button:not([raised]).keyboard-focus,
paper-button:not([raised]).action-button.keyboard-focus {
box-shadow: 0 0 0 3px var(--brave-focus-outline) !important;
}

paper-button.warn {
--text-color: #E2052A !important;
/* normal (looks filled in on hover) */
--brave-active-color: #99022F;
--hover-fg-color: white;
--brave-hover-color: #BE032D;
--active-fg-color: white;
/* action */
--hover-bg-action: #BE032D !important;
--active-shadow-action-rgb: 153,2,47 !important;
/* Default button */
paper-button:not(.action-button):hover {
background: none !important;
border-color: var(--brave-brand-color) !important;
color: var(--brave-brand-color) !important;
}

[dark] paper-button,
:host-context([dark]) paper-button {
--text-color: var(--cr-primary-text-color) !important;
--brave-hover-color: rgb(63, 63, 63) !important;
--flat-text-color-action: #242536 !important;
paper-button:not([raised]).action-button {
background-color: var(--brave-brand-color) !important;
color: #ffffff !important;
border: none !important;
}

paper-button:not([raised]).action-button:hover {
background: var(--brave-primary-hover) !important;
}

0 comments on commit 4a8c282

Please sign in to comment.