Quill: More prominent hover/active button style

Created on 1 Aug 2016  路  3Comments  路  Source: quilljs/quill

In my opinion the blue color when a button is hover or active is not noticeable enough.
I've added border around the buttons on hover/active and background-color when active.
Please try hover and active in the following example:

http://codepen.io/anon/pen/jAvOKG

The only thing missing is to collapse the border when two neighboring buttons are active so we don't get double border. Not sure how.

Feel free to close this if you don't like the style.

Version: [version]
1.0.0-beta.9

Most helpful comment

Agree with this.
Another suggestion for styling format buttons
http://codepen.io/cutteroid/pen/vKzEXy

All 3 comments

Borders can be collapsed with:

.ql-active + .ql-active,
.ql-active + .ql-selected,
.ql-selected + .ql-active,
.ql-selected + .ql-selected {
  border-left-color: transparent !important;
}

and the same for hover/hover, hover/active and active/hover

Agree with this.
Another suggestion for styling format buttons
http://codepen.io/cutteroid/pen/vKzEXy

With slight changes like this I think it's difficult to settle on a strictly best version--any variation will have some people in favor and against. Custom styling with CSS is something specifically Quill aims to support however so you can safely make these changes to your application stylesheets and get the more prominent buttons.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lustoykov picture lustoykov  路  3Comments

aletorrado picture aletorrado  路  3Comments

eamodio picture eamodio  路  3Comments

stas-kh picture stas-kh  路  3Comments

rsdrsd picture rsdrsd  路  3Comments