Welcome to project Axiom!

Project Axiom is a web component set which aims to combine good part of Fluent Design System and Material Design to a single design language.

This repo contains code of Reveal Highlight effect of Fluent design System.

General Button

In order to use this component, we need to prepare some HTML:

<ax-reveal-provider>
  <ax-reveal-bound class="my-reveal-container">
      <ax-reveal>
        <button class="ax-reveal-button">Reveal</button>
      </ax-reveal>
      <ax-reveal>
        <button class="ax-reveal-button">To</button>
      </ax-reveal>
    </div>
  </ax-reveal-bound>
</ax-reveal-provider>

Colored Button

.my-reveal-container{
  --reveal-color: red;
}

Border Width

.my-reveal-container{
  --reveal-border-width: 3px;
}

Fill Radius

.my-reveal-container{
  --reveal-fill-radius: 0.2;
}

Hold animation

.my-reveal-container{
  --reveal-animate-speed: 8000;
}

Release animation

.my-reveal-container{
  --reveal-released-accelerate-rate: 20;
}

List style

.my-reveal-container{
  --reveal-border-style: half;
}

No diffuse

.my-reveal-container{
  --reveal-border-style: half;
  --reveal-diffuse: false;
}