Twitter bootstrap - wie zu entfernen gradient-mixin in der Unterklasse

Ich will Unterklasse .navbar-inner in meinem custom-theme, aber ich kann nicht die Abbildung einer nicht-hackish Weise zu deaktivieren gradient (abgesehen von der Einstellung der beiden Verlaufsfarben gleichen Farbe, die scheint schmutzig). Irgendeine Idee, wie kann ich überschreiben (deaktivieren) ein mixin von einer Unterklasse in weniger??

InformationsquelleAutor der Frage pielgrzym | 2012-07-04

  1. 14

    Das ist, was Sie brauchen, um zu erreichen in css zu überschreiben, deaktivieren Sie die Steigung.

    CSS:

    .navbar-inner {
  background-color: #2c2c2c; 
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

    background-image: none; hat mehrmals verwendet werden, überschreiben alle die vendor-Präfixe.

    Twitter bootstrap - wie zu entfernen gradient-mixin in der Unterklasse

    InformationsquelleAutor der Antwort baptme

  2. 5

    Für SASS-code:
    Ich fügte background-color:transparent und bewegt es in eine mixin

    @mixin override_gradient_vertical() {
  background-color:transparent;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

    Nun müssen Sie nur verwenden können,

    @include override_gradient_vertical();

    InformationsquelleAutor der Antwort ScotterC

  3. 3

    Danke für die Lösung. Nur das teilen, was ich kam mit nach der Lektüre der Antworten:

    Dies ist die SCSS ich verwende zum entfernen eines einfachen Verlaufs:

    @mixin remove_gradient($color:transparent) {
    background-color:$color;
    background-image: none;
    background-repeat: no-repeat;
    filter: none;
}

    Beachten Sie, dass Sie passieren kann eine Farbe auf den mixin (war nötig, in meinem Fall):

    @include remove_gradient(white);

    Oder lassen Sie es standardmäßig auf transparent:

    @include remove_gradient();

    InformationsquelleAutor der Antwort rafaelbiten

  4. 1

    für das, was seinen Wert hier ist ein weniger Umsetzung.
    bootstrap-Dateien mixin.weniger

    #gradient{
    .remove(@color: transparent) {
        background-color:@color;
        background-image: none;
        background-repeat: no-repeat;
        filter: none;
    }
}

    InformationsquelleAutor der Antwort Kieran

  5. 1

    Farbverlauf wird Hinzugefügt, indem die bootstrap_theme Datei.

    Ich wusste wirklich nicht, wie die Idee, dass so viele background-image auf none. Also meine Lösung ist, wenn Sie mit SASS oder LESS version von bootstrap, nur überschreiben Verlauf wird durch die folgenden Zeilen ursprünglich in _theme.scss

    VOM

    .navbar-default {
  @include gradient-vertical($start-color: lighten($navbar-default-bg, 10%), $end-color: $navbar-default-bg);
  @include reset-filter(); //Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
  border-radius: $navbar-border-radius;
  $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
  @include box-shadow($shadow);

  .navbar-nav > .active > a {
    @include gradient-vertical($start-color: darken($navbar-default-bg, 5%), $end-color: darken($navbar-default-bg, 2%));
    @include box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
  }
}

    ZU

    .navbar-default {
  @include gradient-vertical($start-color: $navbar-default-bg, $end-color: $navbar-default-bg);
  @include reset-filter(); //Remove gradient in IE<10 to fix bug where dropdowns don't get triggered

  $shadow: inset 0 0px 0 rgba(255,255,255,.15), 0 0px 0px rgba(0,0,0,.075);
  @include box-shadow($shadow);

  .navbar-nav > .active > a {
    @include gradient-vertical($start-color: $navbar-default-bg, $end-color: $navbar-default-bg);
    @include box-shadow(inset 0 0px 0px rgba(0,0,0,.075));
  }
}

    Wie Sie sehen können, die start-und end-Punkt denselben Wert haben, so würden wir nie sehen, der Farbverlauf.Einfach und Sauber.

    InformationsquelleAutor der Antwort Ronak Jain

Schreibe einen Kommentar