2014-02-16 3 views
0

Я создал новое приложение 4 рельсов с основанием 5 (через жемчужину фундаментных рельсов). Теперь я собираюсь изменить некоторые стили.Невозможно полностью изменить основной цвет в фундаменте 5 рельсов app

Если изменить основной цвет страницы внутри foundation_and_overrides.scss путем включения и изменения строки:

$primary-color: #0f6f5f; 

результат, что все ссылки в настоящее время используют новый цвет, но кнопки по-прежнему использовать старые фон синий. Копаем в основу scss. Я вижу, что цвет фона по умолчанию на кнопке составляет $ primary-color, поэтому почему он не меняет цвет?

Как изменить фон по умолчанию для всех кнопок, используя основание 5 без использования что-то вроде

.button { 
    background-color: #0f6f5f !important; 
} 

, который имеет 2 недостатка:

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

Обновление: Я выяснил, что это также относится к другим элементам. Изменение, например.

$body-font-family: "Courier New", "Courier", monospace; 

изменит шрифт для простого текста в теле, но не для кнопок, форм и т.д., даже если эти шрифты семья определяется как

$button-font-family: $body-font-family; 

внутри фундамента.

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

+3

Вы уверены, что код Sass верен? # В вашей цветовой декларации отсутствует. – cimmanon

+0

извините, это была SO-опечатка, не скопированная из реального кода! Хорошая точка в любом случае - я исправил ее в сообщении. Как сказано, он меняет цвет для ссылок и т. Д., Но не для фона кнопки. –

ответ

0

Там может быть 2 варианта, почему это случилось для вас:

  • Во-первых, вы могли бы установить кнопки по умолчанию цвет где-то и перезаписывает $primary-color, которые вы установили. Осмотрите кнопку, чтобы увидеть, был ли цвет переписан или нет.

  • Во-вторых, в файле, который определяет стиль для кнопки, см первую строку, если она @import файл, который настроил параметры $primary-color

Например, в моем проекте, все настройки по умолчанию в _global.scss файл, все настроенные параметры находятся в файле _settings.scss. Поэтому, если я хочу изменить настройки для любого элемента, у меня есть @import файл с настраиваемыми настройками. Надеюсь, это сработает для вас.

Смежные вопросы