×
Back to book

Custom Element Styling

How to style the buttons and inputs in your application to your preference.

This article will show you how to customise the style of buttons and inputs within your project. We are going to use Fishnatics as an example.

At this stage, you can find the class names you require by exploring harmony styles located in your target project. Alternatively, you can inspect the existing elements to find the classes to overwrite.

Customising Buttons

  1. In your scss folder, navigate yourself to the button.scss file in the elements folder.
  2. Turn on the protected region [Change button variables here] and change the $radius variable to add a border-radius to all buttons
     $radius: convert-rem(5px);

convert-rem is useful function in included in Harmony that can be used to convert pixel measurements to rem.

It's best practice to choose only one unit of measurement, and Harmony uses the industry-preferred measurement of rem. If you're more comfortable working with pixels, feel free to use this fuction.

Customing Textfields

  1. Inside the elements folder you can see the inputs.scss, open the file inputs.scss file.
  2. Turn on the protected region [Change standard input styles here] and replace the text colour of your inputs by locating color: $grey-8 and changing it to your projects colour:
input[type="text"],
input[type="number"],
input[type="password"],
input[type="time"],
input[type="date"],
input[type="email"],
textarea,
select {
    display: inline-flex;
    position: relative;
    white-space: nowrap;
    line-height: 1;
    font-size: $input-font-size;
    vertical-align: top;
    border-radius: $input-radius;
    margin: $space-xxs 0 $space-xs 0;
    width: auto;
    @include truncate;
    color: $color-primary; //change your text colour here
    font-weight: $text-regular;
    border: convert-rem(1px) solid rgba($grey-4, 1);

    &::placeholder {
        color: $grey-4;
        font-weight: $text-light;
        opacity: 1;
    }

    &:focus {
        outline: none;
    }

    &:hover,
    &:active,
    &:focus {
        color: $grey-6;
        border: convert-rem(1px) solid $grey-1;
        background-color: rgba($grey-1, 0.02);
        @include transform-timing($animation-time);
    }
}