Styling

info

Only available after version 2.0.0

We'd love to help making your product look awesome, so we included css variables to make your life easier.

Grab the snippet below and add it to your css file to get yourself a 🌈

:root {
    --PF-primary-color: #ff3366; 
    --PF-primary-color: #ff6633;
    --PF-secondary-color: #ffcc33;

    --PF-button-primary-border-color: #33ff66;
    --PF-button-primary-bg-color: #33ffcc;
    --PF-button-primary-color: #33ccff;


    --PF-button-secondary-border-color: #3366ff;
    --PF-button-secondary-bg-color: #6633ff;
    --PF-button-secondary-color: #cc33ff;


    --PF-progress-bg-color: #efefef;
    --PF-progress-completed-color: #efefef;
}

Tired of our icons? We got you covered! Just add the following snippet to your css file and you're good to go.

:root {
    --PF-icon-file: url('your icon resource here');
    --PF-icon-welcome: url('your icon resource here');
    --PF-icon-permission: url('your icon resource here');
    --PF-icon-loader: url('your icon resource here');
    --PF-icon-success: url('your icon resource here');
    --PF-icon-success_large: url('your icon resource here');
    --PF-icon-uploading: url('your icon resource here');
    --PF-icon-error_large: url('your icon resource here');
    --PF-icon-error: url('your icon resource here');
    --PF-icon-fullscreen_on: url('your icon resource here');
    --PF-icon-fullscreen_off: url('your icon resource here');
}

tip

Did we miss something? Feel free to reach out to us at hi@pathfindr.dev, if you need more variables!