Custom Element Styling

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-secondary; //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);
        }
    }
   

Adding border radius to checkboxes

1. Inside the elements folder you can see the inputs.scss, open the file checkbox.scss file.
2. Turn on the protected region [Change checkbox input styles here] and inside input[type="checkbox"] add border-radius: $radius underneath margin:0