CODEWITHSUNDEEP
htmlcssformsmaterial-design
Vins
Vins

Reputation: 196

Customize material form color of Axentix framework

I'm working on a project using the Axentix framework.

I used their material forms and the animated bottom border color doesn't match with my website's main color.

Here is their input example : https://useaxentix.com/docs/forms/material

If someone has an idea to customize it, it will be really helpful.

Thanks a lot.

Upvotes: 1

Views: 114

Answers (2)

Axel S.
Axel S.

Reputation: 36

Happy to see you using Axentix !

As aprilunge explained, a way to custom the material forms color is to download the source files. But there is another way we are gonna to custom any material element color without downloading the source files, we're going to add it on the docs soon. To custom a material text-input, here is the code :

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

You can ask us if you want to change the checkboxes or radio colors too, but know that we are going to add these examples on the https://useaxentix.com/docs/forms/material soon.
If you need help and want to ask us any question, you can join us on gitter : https://gitter.im/axentix/home

Here is an example :

<!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/[email protected]/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/[email protected]/dist/js/axentix.min.js"></script>
</body>

</html>

Have a great day !
Axentix team.

Upvotes: 2

aprilunge
aprilunge

Reputation: 1

You can use the SCSS source files of Axentix. If you do so, you can overwrite the default variables with the needs for your project easily.

In your specific case the variable you search for is $material-color.

Upvotes: 0

Related Questions