$modifiers doesn't stay in the right state about kss-node HOT 14 OPEN

I had a similar issue where the classes were being generated in the markup but the actual styles for pseudo classes were not. Realized that the issue was due to just opening the index.html file instead of running it on a server.

This may have been @davids701124 's issue. Perhaps we can include something in the readme regarding this?

from kss-node.

btn:hover is not a class. :hover is a pseudo state managed by the browser. kss.js included in the default template handles this problem by making the common pseudo classes explicitly available through those "pseudo-class-..." classes.

from kss-node.

I know that. What I mean is that the looks of those elements should stay on
hover, active or disable state. But they are not. I wonder because the
class names wrong or something.

On Feb 19, 2014 12:58 AM, "Mario Volke" [email protected] wrote:

btn:hover is not a class. :hover is a pseudo state managed by the
browser. kss.js included in the default template handles this problem by
making the common pseudo classes explicitly available through those
"pseudo-class-..." classes.

Reply to this email directly or view it on GitHub.

from kss-node.

This is the screenshot. The hover state should keep the background red.

from kss-node.

Seems like you are using an alternate styleguide template. In the original template it is working. See for example the button section in http://hughsk.io/kss-node/section-1.html

Maybe there's a problem in the template you are using.

from kss-node.

Correct. Be sure you have the kss.js included in your template

from kss-node.

Looks like we need some template docs that explain this. https://github.com/kss-node/kss-node/wiki/Creating-Custom-Templates

from kss-node.

Was experiencing the same issue, and your suggestion worked like a charm. Pseudo classes do not work when opening from the the file directly -- must run the file from a server. I burned through most of a day trying to figure that out. Many thanks.

from kss-node.

Having a similar issue here:

• Using kss-node 2.0.2
• Using the template from kss-node --init with an extra CSS file
• kss.js is loaded
• Using this in the *.less file:

      // The breadcrumb
      //
      // .active - The active breadcrumb
      //
      // Markup:
      // <div id="crumbs">
      //   <nav>
      //     <span class="{$modifiers}">
      //       <a>Crumb 2</a>
      //     </span>
      //   </nav>
      // </div>
      //
      // Style guide: modules.crumbs.breadcrumb
      span {
        background: url('../img/crumb.svg') no-repeat center right;
        background-size: 4px 10px;
        color: #6A6A6A;

        font-family: @font-family-proximanova-semibold;
        font-size: 16px;
        font-weight: 400;
        padding: 1px 15px 0 0;
        margin-right: 20px;

        a {
          color: #6A6A6A;
          font-family: @font-family-proximanova-semibold;
          font-size: 16px;
          font-weight: 400;
          text-decoration: none;

          &:hover {
            color: #e75d47;
          }
        }

        &.active {
          background-image: none;
          color: @color-siostandard;
          display: inline-block;
          font-family: @font-family-proximanova-semibold;
          font-size: 28px;
          font-weight: 400;
          line-height: 40px;
          padding-right: 0;
          padding-top: 6px;
        }
      }

Serving the styleguide with http-server, everything is loaded , but no modifier is given as state:

What could be wrong here? If I inspect the element and manually set .active class to the span-tag, it does with it should do..

from kss-node.

@phun-ky try to change the {$modifiers} to {{modifier_class}}

from kss-node.

@johannestroeger that worked! now I just have the similar issue with :hover taking no effect:

// Link
//
// The actual breadcrumb link
//
// :hover - When users hover over the button
//
// Markup:
// <div id="crumbs">
//   <nav>
//     <span>
//       <a>Crumb 1</a>
//     </span>
//   </nav>
// </div>
//
// Style guide: modules.crumbs.breadcrumb.link
a {
  color: #6A6A6A;
  font-family: @font-family-proximanova-semibold;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;

  &:hover {
    color: #e75d47;
  }
}

EDIT: solved this by adding {{modifier_class}} to <a> in the markup example..

from kss-node.

@phun-ky shouldn`t it be something like the following?

...
Markup: 
...
<a class="{{modifier_class}}">Crumb 1</a>
...

from kss-node.

@johannestroeger yes, found that out (ref edit in last comment). Must have missed it in the documentation. (if not in the documentation, can you add it, or make it clearer?)

from kss-node.

actually it is defined, somehow not in kss-node, but at the original Specification

from kss-node.