Все кнопки наведите стиль в Twitter Загрузочный лот

Question

Я хотел бы изменить стиль по умолчанию для кнопок наведения (Bootstrap v3.2). По умолчанию становится темнее. Предположим, я хотел бы сделать его легче.

Я посмотрел на Buttons Less variables, но не вижу кнопки для наведения курсора.

В SASS я могу сделать:

@import "packages/stylesheets/bootstrap/bootstrap"; 

.btn { 
    &:hover { 
    background: yellow; 
    } 
} 

но меняет все кнопки фона для определенного цвета (в данном случае желтый).

Можно ли это сделать для всех кнопок?

Единственное решение, которое я нашел идентификатор, чтобы сделать это для каждого типа кнопки таким образом, но я надеюсь, что это может быть сделано для всех кнопок немного проще:

@import "packages/stylesheets/bootstrap/bootstrap"; 

.btn-primary { 
    &:hover { 
    background: lighten($btn-primary-bg, 5%); 
    } 
} 
.btn-success { 
    &:hover { 
    background: lighten($btn-success-bg, 5%); 
    } 
} 

Answer 1

Решение, которое я нашел не очень элегантный (вам нужно изменить файл начальной загрузки), но он работает.

Вы должны пойти в mixins/_buttons.scss файл, а затем изменить:

background-color: darken($background, 10%); 

в

background-color: lighten($background, 10%); 

Это должно сделать работу для всех кнопок.

Answer 2

Хотя решение Marcin будет работать, поскольку он упомянул, что он не очень изящный, поскольку вы измените исходный код начальной загрузки, и вы потеряете все изменения после обновления базы bs.

Что вам нужно сделать, чтобы правильно настроить наведение кнопки, определите новый файл, называемый, например, «_buttons.scss», и включите его в свой основной загрузочный файл/основной файл, который вы используете (обычно это файл, который включают в себя базовый boostrap + настроенные части):

// Base bootstrap 3 
@import "./vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss"; 
// My custom buttons 
@import "_buttons.scss" 

таким образом, вы переопределение стилей по умолчанию для того, чтобы ваш внешний вид бутстраповские по умолчанию элементов и сохраняя базовый загрузочный файл нетронутым, так что вы можете обновить его без бойтесь, что вы перепишете свои изменения при следующем обновлении.

И теперь, ваша часть: в _buttons.scss определять парит, как вы упомянули:

// My custom variation for btn-primary 
.btn-primary { 
    &:hover { 
    background: lighten($btn-primary-bg, 5%); 
    } 
} 

Если вы хотите сделать это на глобальном уровне, просто обновить Примеси, которые отвечают за кнопки вывода в файле коррекции, так что будет (если вы будете следовать пространство имен вашего Bootstrap по умолчанию в пользовательских стилей папки, например: MyProject/активы/СКС/Примеси/_buttons.scss)

// My custom mixin for button-variant override file 
// I only include the part i want to customize 
// In this case, i want to customize background-color 
@mixin button-variant($color, $background, $border) { 
    &:hover { 
    background-color: darken($background, 40%); 
    } 
} 

..и включить его в основной файл

// Base bootstrap 3 
@import "./vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss"; 
// My custom buttons 
@import "_buttons.scss" 
@import "mixins/_buttons.scss" 

Таким образом, вы: 1) Возможность обновления начальной загрузки базы после того, как обновление до 2) Возможность сохранить ваши пользовательские кнопки стили в одном файле, если вы решите обновить его позже, вы можете найти его легко 3) Возможность использовать такие же начальную загрузку базу для различных проектов (при необходимости)

Надеются, что это помогает Приветствию M.