Coder Social home page Coder Social logo

Button rework .. about bootplus HOT 10 CLOSED

aozora avatar aozora commented on June 8, 2024
Button rework ..

from bootplus.

Comments (10)

aozora avatar aozora commented on June 8, 2024

That was ...by design... analyzing G+ styles, original G+ buttons have a minimum width that, in addition of a left & right padding, render the buttons wide even with single icons...
In order to avoi dfurther issues, I'll remove this limit...
I'll fix icon vertical alignment too, please be patient

from bootplus.

mafar avatar mafar commented on June 8, 2024

** Fix button class **
buttons that are created like <a class="btn">sad</a> in bootstrap or like below need to be fixed.
<span class="btn"> <i class="icon-plus icon-white"></i> <span>Add files...</span> </span>
Many of bootstrap addons from bootsnip like datepicker, jquery file upload and many others are showing bad buttons.
untitled - copy - copy
untitled
untitled - copy

from bootplus.

aozora avatar aozora commented on June 8, 2024

I know, I'm working on it.. otherwise this issue wuold be already closed ;)

from bootplus.

mafar avatar mafar commented on June 8, 2024

I was making a mistake by adding fontaweosme like
@import url('bootplus/css/bootplus.css'); @import url('bootplus/css/bootplus-responsive.min.css'); @import url('font-awesome/css/font-awesome.css');

Can you remove fontawesome from main bootplus.css ? so others dont have confusion ?
Did u make any changes to standard fontawesome ?

Now it has come down to this after removing additional fontawesome.

bootstrap-wysihtml5 plugin
untitled - copy

bootstrap-timepicker bootstrap-datepicker jQuery-File-Upload ![untitled](https://f.cloud.github.com/assets/4101480/627294/851b9a42-d019-11e2-9c93-e64e9715749c.png)

<span class="btn btn-small"> <i class="icon-upload icon-white"></i> <span>Start upload</span> </span> <button class="btn btn-small"> <i class="icon-upload icon-white"></i> <span>Start upload</span> </button>
Above code produces different size buttons which is not right

from bootplus.

aozora avatar aozora commented on June 8, 2024

I'm working on the fix for buttons...
About not including font-awesome in bootplus, I'll think about it. As of now there is only 1 icon that is used by the theme, the caret one (the down arrow used for dropdowns).

from bootplus.

aozora avatar aozora commented on June 8, 2024

Just committed on master, please can you check it?
(font-aweseme is still included... for now)

from bootplus.

mafar avatar mafar commented on June 8, 2024

Ok checking it.
I am asking to leave font-awesome as separate addon instead of merging it together with bootstrap css as it will surely cause confusion and people may end up adding duplicate fontawesome in header like me.

from bootplus.

mafar avatar mafar commented on June 8, 2024

Problem is still there. Let me stup a jsfiddle with bootstrap addons which will help you review your changes.

from bootplus.

mafar avatar mafar commented on June 8, 2024

I setup a jsfiddle http://jsfiddle.net/bababalcksheep/MgcDU/5006/ with datepicker addon,
http://jsfiddle.net/bababalcksheep/MgcDU/5006/show to see full screen view.

I could not use latest css from github at jsfiddle to i used css from http://aozora.github.io/ .
Fontawesome is not showing icon for now. May be we can add popular bootstrap addons there and check for css design problems.

from bootplus.

aozora avatar aozora commented on June 8, 2024

I committed new updates. And now Font-Awesome is no more bundled.

For the datepicker, the problem is in datepicker.css; add this fix in your css:
/* FIX FOR datepicker.css */
.input-append.date .add-on i, .input-prepend.date .add-on i {
display: inline-block;
}

For the datepicker, I suggest you to use the improved version you can find here: https://github.com/eternicode/bootstrap-datepicker

from bootplus.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.