twitter-bootstrap - banners - bootstrap 3

Twitter bootstrap-cómo eliminar gradiente mixin en subclase

Question

Quiero crear una subclase de .navbar-inner en mi tema personalizado, pero no puedo encontrar una forma no hacker para deshabilitar el degradado (aparte de configurar ambos colores del degradado en el mismo color que parece sucio). ¿Alguna idea de cómo puedo anular (deshabilitar) una mezcla de una subclase en menos?

Answer 1

El gradiente es agregado por el archivo bootstrap_theme.

Realmente no me gustó la idea de tener tanta imagen de fondo como ninguna. Así que mi solución es si está usando la versión SASS o LESS de bootstrap, simplemente anule el gradiente por las siguientes líneas originalmente presentes en _theme.scss

DESDE

.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));
  }
}

A

.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));
  }
}

Como puede ver, los puntos de inicio y finalización tienen el mismo valor, por lo que nunca veríamos el efecto de degradado. Simple y Limpio.

Answer 2

Eso es lo que necesita lograr en css para anular la desactivación del gradiente.

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; tiene que ser usado varias veces para anular todos los prefijos de proveedores.

Answer 3

Gracias por la solución. Solo compartiendo lo que se me ocurrió después de leer las respuestas:

Este es el SCSS que estoy usando para eliminar un gradiente simple:

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

Tenga en cuenta que puede pasar un color a la mezcla (era necesario en mi caso):

@include remove_gradient(white);

O dejarlo por defecto a transparente:

@include remove_gradient();

Answer 4

Para el código SASS: agregué color de fondo: transparente y lo moví en una mezcla

@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;
}

Ahora solo puedes usar

@include override_gradient_vertical();

Answer 5

Por lo que vale aquí una implementación menor . archivos bootstrap mixin.less

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