metaskills / less-rails-bootstrap

The most popular front-end framework for developing responsive, mobile first projects on the web for Rails asset pipeline.
561 stars 127 forks source link

Some Mixins Undefined #97

Closed jonahbron closed 10 years ago

jonahbron commented 11 years ago

I just integrated the latest version of this gem into my project, and I got several import errors upon use. The mixins input-lg and input-sm were being called in the input.less file, but they have been replaced by input-large and input-small, respectively.

I also got errors that the mixins label-variant and panel-variant were missing. The strange thing is, these ones are definitely present in the Bootstrap mixins file. I had to add them to the custom bootstrap mixins.less file in order for it to work. Here is the LESS I used to get it working:

.input-lg {
  .input-large();
}
.input-sm {
  .input-small();
}
.label-variant(@color) {
  background-color: @color;
  &[href] {
    &:hover,
    &:focus {
      background-color: darken(@color, 10%);
    }
  }
}
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {
  border-color: @border;
  & > .panel-heading {
    color: @heading-text-color;
    background-color: @heading-bg-color;
    border-color: @heading-border;
    + .panel-collapse .panel-body {
      border-top-color: @border;
    }
  }
  & > .panel-footer {
    + .panel-collapse .panel-body {
      border-bottom-color: @border;
    }
  }
}
simi commented 11 years ago

@jonahbron hello. I'm trying to reproduce this.

Can you fill missing informations (https://github.com/metaskills/less-rails-bootstrap/blob/master/ISSUES.md#reporting-problems) ?

maxd commented 11 years ago

@jonahbron Do you solve this problem?

jonlaing commented 10 years ago

I'm having the same issue with column offsets.

simi commented 10 years ago

@jonlaing can you provide me some minimal git repo with this error to save me some time while I'll be debugging this issue?

jonlaing commented 10 years ago

@simi I will get back to you with a repo, but I was able to make it work by putting @import "twitter/bootstrap/mixins"; at the head of each file that needed mixins. I couldn't use implicit mixins, but I could use the function style mixins. So, .col-lg-offset-3; didn't work but make-lg-column-offset(3); did. Neither work if I don't include the mixins at the top of each file.

jonlaing commented 10 years ago

This is what my files look like:

// dashboard.less
@import "twitter/bootstrap/mixins";

.dashboard {
  .row;
  margin: @navbar-height 0 0 -15px;

  .dashboard-body {
    .col-lg-9;
    .make-lg-column-offset(3);
    position: fixed;
    bottom: 0px;
    top: @navbar-height;
    padding-top: 30px;
    overflow-y: scroll;
  }

  .dashboard-control {
    .col-lg-3;
    position: fixed;
    bottom: 0px;
    top: 0px;
  }
}
// application.less
@import "custom_bootstrap/custom_bootstrap";
@import "typography.less";
//@import "layout.less";
@import "dashboard.less";
@import "navlist.less";
@import "navigation.less";
@import "colors.less";

////// TEMPORARY //////////

#b-facebook, #b-twitter {
  display: none;
}
maxd commented 10 years ago

@jonahbron input-small and input-large has been renamed in v3.0.0. Also v2.3.2 or v3.0.0 doesn't have input.less file. So, your issue description looks very strange.

@jonlaing grid.less has been changed in v3.0.1 (see commit). So, .col-lg-offset-3 not available anymore.

simi commented 10 years ago

@maxd feel free to close if this is not related to gem, but to upstream.

jonlaing commented 10 years ago

Good catch @maxd. Now I'll know to check the bootstrap repo next time I have a problem.