Git Product home page Git Product logo

mdbootstrap / bootstrap-material-design Goto Github PK

View Code? Open in Web Editor NEW
67.0 7.0 41.0 10.94 MB

Important! A new UI Kit version for the latest Bootstrap 5 is available. Access the latest version via the link below

Home Page: https://mdbootstrap.com/docs/standard/

License: MIT License

JavaScript 11.25% SCSS 17.61% Ruby 0.76% HTML 2.59% CSS 67.02% Shell 0.78%
bootstrap material bootstrap-css

bootstrap-material-design's Introduction

bootstrap-material-design's People

Contributors

bwsky-a avatar filipkappa avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

bootstrap-material-design's Issues

No Tags for this Project Breaks NPM and Bower builds

Whatever was done 4 days ago deleted the tags that was being used by NPM and bower projects. Our project was dependent on version 0.5.10 and now we get the following error

[INFO] bower bootstrap-material-design#^0.5.10 cached https://github.com/mdbootstrap/bootstrap-material-design.git#0.5.10
[INFO] bower bootstrap-material-design#^0.5.10 validate 0.5.10 against https://github.com/mdbootstrap/bootstrap-material-design.git#^0.5.10
[INFO] bower bootstrap-material-design#^0.5.10 ENORESTARGET No tag found that was able to satisfy ^0.5.10
[INFO]
[INFO] Additional error details:
[INFO] No versions found in https://github.com/mdbootstrap/bootstrap-material-design.git

Option to ignore HTML by framework

Test Case

https://codepen.io/ybelenko/pen/VwKgwPw

Summary

I try to apply framework to specific part of the application. However it adds classes to all entities within page body.

$('.use-bmd').bootstrapMaterialDesign({});
<!-- apply bootstrap material design to next div -->
<div class="container use-bmd">

  <h3>Floating label <i class="material-icons">face</i></h3>
  <div class="form-group bmd-form-group">
    <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <span class="bmd-help">We'll never share your email with anyone else.</span>
  </div>
 
</div>
<!-- keep next div not modified -->
<div class="container keep-vanilla">

  <h3>Bootstrap vanilla</h3>
  <div class="form-group bmd-form-group">
    <label for="exampleInputEmail1" class="bmd-label-static">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <span class="form-text">We'll never share your email with anyone else.</span>
  </div>
 
</div>

Expected result

I would expect HTML inside .keep-vanilla untouched

<!-- apply bootstrap material design to next div -->
<div class="container use-bmd">

  <h3>Floating label <i class="material-icons">face</i></h3>
  <div class="form-group bmd-form-group">
    <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <span class="bmd-help">We'll never share your email with anyone else.</span>
  </div>
 
</div>
<!-- keep next div not modified -->
<div class="container keep-vanilla">

  <h3>Bootstrap vanilla</h3>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <span class="form-text">We'll never share your email with anyone else.</span>
  </div>
 
</div>

Additional Information

It would also be great to have some ignore classes or data attributes. Like:

<!-- please don't add bmd-form-group and everything to next div -->
<div class="bmd-ignore" data-bmd-ignore>
    ...
</div>

.checkbox-on doesn't work in Safari 14

Test Case

https://codepen.io/FezVrasta/pen/JyVWMo?__cf_chl_captcha_tk__=f15e18beebedcdb1f32c83896155cbbb06c74dfc-1612904015-0-Abu4xlnDgO0C95-OAZh6NFL7tD6V7HNzH50HCUQ_cO-a0KS91_ApG1h5XmKOMWIatiy3UNJhUXzceJNa33Xz9P8PvXuZvo_Yt15o1C2I6srixnvlfaQRUiQLVUCHn9TVgFRaMVACBIKRXuwxFVNnzgR7mk7G6lyshE6BHgcBsxwNhpaoncZnzjHQbuf8CvkoAuH86O02j24kKEuSnuwKtmPRc-U8eK_N-gVr8DH9mdeQZvGhukzsacUAs2bPLvmw2MqkHKmfIts0j8OP1kXdq3LT-v41wYka53HybveajlvzT7D_lsKsRbfs4V56QJT4b-2TldDSTYN3ppob49CIFjnFDnIv1pTLu9bsENJfrA9oyZn4JmQ0CFTXdox4iLDA80suNgdCLbkFRFClNxFl1Uwi7pHS0fUJLNbElEl32SG-w5uJJETMj45anI6yur74waYjEBCwycY-y6f5FCU2Va4yGBwz8y4pKozJ5QxukTr3C7t2ibnLH3g0wuKDMD7jWiTC4QSbx__pwwtwQtad-vecOiHv3T4FNQr8KTkkY6l65pO8I1EksN5uh3_Cw2h-IE_ycdaSQxKh2DqgTzlbWvy84lpHb7UeNKHKVIJTpu-v

<div class="checkbox">
  <label>
    <input type="checkbox" class="arg" checked="checked" value="Example"><span class="checkbox-decorator"><span class="check"></span>
      <div class="ripple-container"></div>
    </span> Example
  </label>
</div>

Summary

On Safari 14.0.3/macOS 11.2 using Bootstrap material 4.1.3, the checkbox briefly flashes during animation and then disappears. Visually it is not able to be seen as checked or not.

On Chrome 88 on macOS 11.2 the checkbox is shown correctly.

Expected result

Checkbox should be seen

Additional Information

Originally discovered in gchq/CyberChef#1172 and now reported here with bootstrap material design 4.1.3.

image

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.