$modifiers doesn't stay in the right state #51

Open
davids701124 opened this Issue Feb 19, 2014 · 14 comments

Comments

Projects
None yet
7 participants
@davids701124

I try to do a test for button elements. The modifiers doesn't generate the right class for me. The class should be "btn:hover" but it gives me "btn pseudo-class-hover".

/*
Buttons

Buttons are actionable items.

Markup:
<button class="btn {$modifiers}">Action Button</button>

:hover    - hover state

Styleguide 4
*/

.btn{
    display: inline-block;
    .ie7-inline-block();
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
    border: 1px solid @btnBorder;
    border-bottom-color: darken(@btnBorder, 10%);
    .border-radius(@baseBorderRadius);

    &:hover{
        color: @grayDark;
        text-decoration: none;
        background-position: 0 -15px;
        .transition(background-position .1s linear);
    }
}
@webholics

This comment has been minimized.

Show comment
Hide comment
@webholics

webholics Feb 19, 2014

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.

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.

@davids701124

This comment has been minimized.

Show comment
Hide comment
@davids701124

davids701124 Feb 19, 2014

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" notifications@github.com 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.

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" notifications@github.com 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.

@davids701124

This comment has been minimized.

Show comment
Hide comment
@davids701124

davids701124 Feb 19, 2014

This is the screenshot. The hover state should keep the background red.
screen shot 2014-02-19 at 9 48 42 am

This is the screenshot. The hover state should keep the background red.
screen shot 2014-02-19 at 9 48 42 am

@webholics

This comment has been minimized.

Show comment
Hide comment
@webholics

webholics Feb 20, 2014

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.

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.

@johannestroeger

This comment has been minimized.

Show comment
Hide comment
@johannestroeger

johannestroeger Feb 20, 2014

Member

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

Member

johannestroeger commented Feb 20, 2014

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

@JohnAlbin

This comment has been minimized.

Show comment
Hide comment
@JohnAlbin

JohnAlbin Jul 22, 2014

Contributor

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

Contributor

JohnAlbin commented Jul 22, 2014

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

@donaldpcook

This comment has been minimized.

Show comment
Hide comment
@donaldpcook

donaldpcook Jul 23, 2014

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?

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?

@joeloverpeck

This comment has been minimized.

Show comment
Hide comment
@joeloverpeck

joeloverpeck Oct 23, 2014

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.

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.

@phun-ky

This comment has been minimized.

Show comment
Hide comment
@phun-ky

phun-ky Apr 15, 2015

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:

ss

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..

phun-ky commented Apr 15, 2015

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:

ss

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..

@johannestroeger

This comment has been minimized.

Show comment
Hide comment
@johannestroeger

johannestroeger Apr 15, 2015

Member

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

Member

johannestroeger commented Apr 15, 2015

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

@phun-ky

This comment has been minimized.

Show comment
Hide comment
@phun-ky

phun-ky Apr 15, 2015

@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..

phun-ky commented Apr 15, 2015

@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..

@johannestroeger

This comment has been minimized.

Show comment
Hide comment
@johannestroeger

johannestroeger Apr 15, 2015

Member

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

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

johannestroeger commented Apr 15, 2015

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

...
Markup: 
...
<a class="{{modifier_class}}">Crumb 1</a>
...
@phun-ky

This comment has been minimized.

Show comment
Hide comment
@phun-ky

phun-ky Apr 15, 2015

@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?)

phun-ky commented Apr 15, 2015

@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?)

@johannestroeger

This comment has been minimized.

Show comment
Hide comment
@johannestroeger

johannestroeger Apr 15, 2015

Member

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

Member

johannestroeger commented Apr 15, 2015

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

@kpingel kpingel referenced this issue in nadarei/nkss-rails Mar 14, 2016

Open

KSS Modifiers Section #2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment