Переопределить / настроить миксины в Boostrap 4 - PullRequest
Новая
       21

Переопределить / настроить миксины в Boostrap 4

0 голосов
/ 11 октября 2018

Я пытаюсь настроить класс значков в Bootstrap 4. Я пытаюсь добиться отображения всех значков с контуром (аналогично .btn-outline- *).Прямо сейчас я (наивно) пытаюсь сделать это путем «переопределения» микширования в отдельной таблице стилей следующим образом: 

@mixin badge-variant($bg) {
  //color: color-yiq($bg); #original
  color: $bg;
  background-color: transparent;
  border: 1px solid $bg;

  &[href] {
    @include hover-focus {
      //background-color: darken($bg, 10%); #original
      background-color: $bg;
    }
  }
}

@import "node_modules/bootstrap/scss/bootstrap";

Почему это не работает и что я могу сделать, чтобы настроить миксин(без редактирования исходного файла)?Спасибо!

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Это должно работать, но помните, что сначала вам нужно @import bootstrap, а затем сгенерировать badge-* классы ... 

@import "bootstrap";

@mixin badge-variant($bg) {
  color: $bg;
  background-color: transparent;
  border: 1px solid $bg;

  &[href] {
    @include hover-focus {
      background-color: $bg;
    }
  }
}

@each $color, $value in $theme-colors {
  .badge-#{$color} {
    @include badge-variant($value);
  }
}

Демо: https://www.codeply.com/go/Iq1RJ96AmW

0 голосов
/ 11 октября 2018

Как насчет перевеса .badge класса, подобного этому, и имеют border.

enter image description here

CSS 

.badge {
      border: 2px solid #ff0000
 }

Образец HTML, содержащий значки, 

<div class="container mt-4">
        <div class="row">
          <div class="col-12">
            <h1>Example heading <span class="badge badge-secondary">New</span></h1>
      <h2>Example heading <span class="badge badge-secondary">New</span></h2>
      <h3>Example heading <span class="badge badge-secondary">New</span></h3>
      <h4>Example heading <span class="badge badge-secondary">New</span></h4>
      <h5>Example heading <span class="badge badge-secondary">New</span></h5>
      <h6>Example heading <span class="badge badge-secondary">New</span></h6>
          </div>
        </div>
  </div>

Например,

https://codepen.io/anjanasilva/pen/MPmxJd

Надеюсь, это поможет.Приветствия.

...