Radius

Usage #

This class syntax is used to specify rounded corners:

radius-{size}
radius-{side}-{size}

Where {size} is based on the scale of named radius that are specified in $scales. The default values are as follows:

// =Scales
$scales: (
    radius: (
        small: 2px,
        medium: 4px,
        base: 6px,
        large: 8px,
        huge: 12px
    )
);

The {side} is an indication of the direction of the rounding:

• top
• bottom
• left
• right

Here are examples of how to use rounded classes.

<div class="radius-base">...</div>
<div class="radius-top-base">...</div>
<div class="radius-bottom-base">...</div>
<div class="radius-left-base">...</div>
<div class="radius-right-base">...</div>

You can mix the direction classes.

<div class="radius-top-large radius-left-large">...</div>

Variables #

Superkube automatically generates radius variants as global css variables that you can use in your custom CSS/SCSS. The variants are generated based on the values specified in $scales map. See more about Scales.

All radius variables begin with the --radius prefix.

--radius-small
--radius-medium
--radius-base
--radius-large
--radius-huge

You can use variables in your CSS/SCSS code like this:

.my-module {
    border-radius: var(--radius-medium);
}

Extend #

You can add your own rounded size or override an existing one by extending $scales. See also how to work with scales for modules.

// =Scales
$scales: map-extend($scales, (
    radius: (
        base: 5px, // override
        mega: 20px // add new one
    )
));

Superkube will automatically create new size classes with the specified value.

<div class="radius-mega">...</div>
<div class="radius-top-mega">...</div>
<div class="radius-bottom-mega">...</div>
<div class="radius-left-mega">...</div>
<div class="radius-right-mega">...</div>

Helpers #

Turn off

Use the radius-off class to turn off rounded corners of the element.

<div class="radius-off">...</div>

Circle

Use the radius-circle class to make an element circular if it has the same height and width.

<img class="image-64 radius-circle" src="...">

Responsive #

To change the behavior of rounded corners on small screens, you need to apply the -sm suffix to the classes.

radius-{size}-sm
radius-{side}-{size}-sm

This works, for example, if the radius should be larger or smaller on mobile screens. Also if you want to change the rounding of the top corners on the mobile to the rounding on the left.

<div class="radius-huge radius-base-sm">...</div>
<div class="radius-top-huge radius-top-base-sm">...</div>
<div class="radius-top-base radius-off-sm radius-left-base-sm">...</div>

Note: If you want to change the rounding direction on mobile screens, you must first turn it off by using the radius-off-sm class.

<div class="radius-top-base radius-off-sm radius-left-base-sm">...</div>

Turn off

Use the radius-off-sm class to turn off rounded corners on small screens.

<div class="radius-base radius-off-sm">...</div>

Circle

Use the radius-circle-sm class to make the element round on small screens.

<div class="radius-base radius-circle-sm">...</div>