×
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 the Codebots Zoo example project.

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

Customising Buttons

  1. Navigate to clientside/src/app/lib/scss/elements/buttons/buttons.scss
  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. Navigate to clientside/src/app/lib/scss/elements/inputs/inputs.scss
  2. Turn on the protected region [Change standard input styles here] and add 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);
    }
}