Outline decoration of active button in Blocks

I wanted an outline look of the selected button in the interface in Pixilab Blocks. The outline css property doesn’t work with border-radius in Safari, so I made another solution that works with Blocks automatic scaling and centering of texts. And looks good in Safari on iPad!

I’ve create some settings for you to tweak it to fit various purposes. Variables for outline size, spacing, border radius and the colors are available. Check the comments in code below of what is done.

Inactive button with the outline-button class

Active button with the outline-button class

:root {
    --outline-button--text-color: white;
    --outline-button--color: pink;
    --outline-button--spacing: 8px;
    --outline-button--spacing-color: white;
    --outline-button--outline-size: 3px;
    --outline-button--border-radius: 1000px;
}

/* set the main element of the button */
.outline-button.Button-ctl,
.outline-button.Button-ctl.active {
    /* set the transparent border to get the same size when the button is inactive */
    border: var(--outline-button--outline-size) solid transparent; 

    /* set the radius of the button */
    border-radius: var(--outline-button--border-radius);
}

/* set the button color when the button is active */
.outline-button.Button-ctl.active {
    /* set the outline color when the button is active */
    border-color: var(--outline-button--color);
}

/* set the actual button div */
.outline-button.Button-ctl>div,
.outline-button.Button-ctl.active>div {
    /* the inner div border is used as the spacing around the button */
    border: var(--outline-button--spacing) solid var(--outline-button--spacing-color);

    /* the button color, same as outline, can be changed to other color if you want */
    background-color: var(--outline-button--color);

    /* the radius of the button is needed here as-well */
    border-radius: var(--outline-button--border-radius);
}

/* set the text color of the button */
.outline-button.Button-ctl>ctl-title,
.outline-button.Button-ctl.active>ctl-title {
    color: var(--outline-button--text-color);
}

For the Blocks scaling calculations of the text placement we have to do some work arounds with using the actual button div border color as spacing, and use the outer wrapper element border as the outline border.

The sizes needs to be set according to your environment to fit the scaling of the actual Spots that will use this feature.