Настройка цвета формы материала каркаса Axentix - PullRequest
1 голос
/ 23 января 2020

Я работаю над проектом с использованием среды Axentix.

Я использовал их материальные формы, и цвет анимированной нижней границы не совпадает с основным цветом моего сайта.

Вот их пример ввода: https://useaxentix.com/docs/forms/material

Если у кого-то есть идея настроить его, это будет очень полезно.

Большое спасибо.

Ответы [ 2 ]

2 голосов
/ 28 января 2020

Рад видеть, что вы используете Axentix!

Как объяснил aprilunge, способ настроить цвет форм материала - это загрузить исходные файлы. Но есть еще один способ, которым мы собираемся настраивать любой цвет элемента материала, не загружая исходные файлы, мы скоро добавим его в документы. Чтобы настроить ввод текста материала, вот код:

.form-material .form-field:not(.form-default).active textarea.form-control,
.form-material .form-field:not(.form-default)::after {
  border-bottom: .1rem solid YOUR_COLOR;
}

.form-material .form-field:not(.form-default).active label {
  color: YOUR_COLOR;
}

Вы можете спросить нас, хотите ли вы также изменить флажки или цвета радио, но знайте, что мы собираемся добавить эти примеры на https://useaxentix.com/docs/forms/material скоро.
Если вам нужна помощь и вы хотите задать нам любой вопрос, вы можете присоединиться к нам на gitter: https://gitter.im/axentix/home

Здесь пример:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/axentix@0.4.3/dist/css/axentix.min.css" />
  <style>
    .form-material .form-field:not(.form-default).active.is-txtarea-focused textarea.form-control,
    .form-material .form-field:not(.form-default)::after {
      border-bottom: .1rem solid #e92626;
    }
    
    .form-material .form-field:not(.form-default).active label {
      color: #e92626;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>Example form</h1>
    <form class="form-material">
      <div class="grix xs1">
        <div class="form-field">
          <input type="text" id="name" class="form-control" />
          <label for="name">Name</label>
        </div>
        <div class="form-field">
          <label for="textarea">A textarea</label>
          <textarea id="textarea" class="form-control"></textarea>
        </div>
      </div>
    </form>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/axentix@0.4.3/dist/js/axentix.min.js"></script>
</body>

</html>

Хорошего дня!
Команда Axentix.

0 голосов
/ 23 января 2020

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

В вашем конкретном случае c переменная, которую вы ищете, равна $material-color.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...