Icons size issue

[KINGSABRI]

Thanks for the plugin.

Some observation though

• Boxes need more elegant style
• Icon of success expected to be like Ok or check mark sign
• Icons are too big for regular book, if we can configure the icons' size that would be great!

Appreciated!

[erixtekila]

Thanks. Would you mind develop a little bit more ?

[szarnyasg]

Hi @erixtekila,

I experimented with adding a scale attribute to the pictograms: https://github.com/szarnyasg/gitbook-plugin-richquotes/commit/107b2b6be5e986aa38d8fa3ffca6fcadf1ae5a55. I'm not an experienced JS programmer so I imagine there are more elegans solutions. Also, the current implementation does not adjust the width/height of the items selected blockquote.alert > strong. What do you think?

Thanks!

[erixtekila]

Would you mind do a pull request, in order to merge your changes, please ?

[aschempp]

Here's what I re-styled the boxes in our books. I think the more flat approach fit's better in the default Gitbook style. Shall I contribute the design?

[KINGSABRI]

Looks elegant! I like the flat design

Did you have enhancements on the others boxes icons?

[aschempp]

well as far as I remember, there are only three colors. They only change in the icons (see https://github.com/erixtekila/gitbook-plugin-richquotes homepage). Here's what the whole CSS looks like:

blockquote.alert {
    padding-left: 0 !important;
    background-color: #f7f7f7;
    color: inherit !important;
    border: 1px solid #ddd !important;
    border-radius: 3px !important
}

blockquote.alert-info {
    background-color: #eff5fa;
    color: #4b85ba !important;
    border-color: #4b85ba !important
}

blockquote.alert-success {
    background-color: #f3f8ee !important;
    color: #77ac45 !important;
    border-color: #77ac45 !important
}

blockquote.alert-warning {
    background-color: #fff3e0 !important;
    color: #d68c23 !important;
    border-color: #d68c23 !important
}

blockquote.alert-danger {
    background-color: #faeeee !important;
    color: #c33 !important;
    border-color: #c33 !important
}

blockquote.alert > strong {
    width: 60px;
    height: auto;
    margin-right: 0;
    padding-top: 12px;
    font-size: 2em
}

blockquote.alert > p {
    margin-left: 60px;
    margin-bottom: 15px !important
}

blockquote.alert p a {
    text-decoration: underline !important
}

[KINGSABRI]

True, I mean you made the style is flat and the icons now are smaller and really fit with the overall look. So did you change the icons or just resize it? (my css skills are zero) I couldn't use the plugin because it gives huge box + icon, but your modification are looking good. I think the plug-in needs more icons too. Thank for both of you guys @aschempp @erixtekila

[aschempp]

I just resized them, the icons come default with Gitbook

[erixtekila]

Yeah, gitbook css take priority on the plugin's one. I'll try to look after this issue.

[erixtekila]

Last commit solves the issue. Sorry for the delay