felipefialho / css-components Goto Github PK

With Kratos Boilerplate

I am the creator of Picnic CSS and I've found out about CSS Components recently... and I love it! (:

After investigating each of them, I find the components Tab and Tooltip specially useful for including them in Picnic CSS as plugins. I already have a modal plugin in my library, otherwise I'd include it too.

From your MIT license I will adapt them for my library needs (not so many classes, SASS), however I wanted to let you know that I'll base these plugins in your great set of Pure CSS components as ir shares a lot in common with Picnic CSS ideas.

Create a Carousel component.

Would appreciate a quick summary of browser support for each component in the Readme. A bit like what you did in this pen: http://codepen.io/LFeh/pen/oEula

add in project new attribute css scroll-behavior and scroll-margin-top. the behavior of the anchors will be nicer

Inspired in @bernarddeluna issue for the SennaJs

I used Sauce Labs to did this tests.

• Carrousel works fine, but without animation
  
• Collapse does not work.
  
• Dropdown does not work.
  
• Dropdown with hover works fine (using tap)
  
• Modal does not work
  
• Tab does not work
  
• Tooltip woks fine (using tap)
  

The modal appears off screen on Android.

Would it be ok to move the checkbox .collapse-open in front of .collapse-btn? By doing this it is possible to style .collapse-btn based on the open/closed state. For example background color, font weight or an icon as in the following example:

https://jsfiddle.net/mrgiao/2xfuwaLq/

It seems to me that the following should not be in the build/tab.css file:

@media (max-width: $screen-xs-max) {
}
@media (min-width: $screen-sm) {
}
@media (min-width: $screen-sm) {
}

There might be a typo as well here: "painel" > "panel"?

.tab-painel {
display: inline-block;
min-height: 150px;
}
.tab-painel .tab-open {

#15

Testei principalmente o collapse e consegui fazer rodar do IE9, obviamente precisei usar um fallback JS para o IE entender o :ckecked, mas fora isso o outro problema é que o IE9 não entende o atributo hidden, por isso o input radio (ou check) fica aparecendo.

A solução foi adicionar:

.collapse-open {
  display: none;
}

E também o http://selectivizr.com/ como fallback caso o navegador seja IE9 ou inferior.

Eu sei que a idéia é fazer Pure CSS, porém o fallback é apenas para forçar ao navegador entender alguns seletores CSS3 como o :checked. Acredito que com isso possamos extender o suporte dos componentes.

Add improvements in the organization of folders and files.

input and label have the same class