Aller au contenu

Conditional Radius

Ce contenu n’est pas encore disponible dans votre langue.

Border Size

link Border Size
OxyProps CSS Variables
--o-border-size-1: 1px;
--o-border-size-2: 2px;
--o-border-size-3: 5px;
--o-border-size-4: 10px;
--o-border-size-5: 25px;
o-border-1
CSS Variable
var(--o-border-size-1)
Utility Class (all sides)
o-border-1
Utility Class (top)
o-border-top-1
Utility Class (bottom)
o-border-bottom-1
Utility Class (left)
o-border-left-1
Utility Class (right)
o-border-right-1
o-border-2
CSS Variable
var(--o-border-size-2)
Utility Class (all sides)
o-border-2
Utility Class (top)
o-border-top-2
Utility Class (bottom)
o-border-bottom-2
Utility Class (left)
o-border-left-2
Utility Class (right)
o-border-right-2
o-border-3
CSS Variable
var(--o-border-size-3)
Utility Class (all sides)
o-border-3
Utility Class (top)
o-border-top-3
Utility Class (bottom)
o-border-bottom-3
Utility Class (left)
o-border-left-3
Utility Class (right)
o-border-right-3
o-border-4
CSS Variable
var(--o-border-size-4)
Utility Class (all sides)
o-border-4
Utility Class (top)
o-border-top-4
Utility Class (bottom)
o-border-bottom-4
Utility Class (left)
o-border-left-4
Utility Class (right)
o-border-right-4
o-border-5
CSS Variable
var(--o-border-size-5)
Utility Class (all sides)
o-border-5
Utility Class (top)
o-border-top-5
Utility Class (bottom)
o-border-bottom-5
Utility Class (left)
o-border-left-5
Utility Class (right)
o-border-right-5

Border Radius

link Border Radius
OxyProps CSS Variables
--o-radius-1: 2px;
--o-radius-2: 5px;
--o-radius-3: 1rem;
--o-radius-4: 2rem;
--o-radius-5: 4rem;
--o-radius-6: 8rem;
--o-radius-round: 1e5px;
o-noradius

Use this class to remove the border radius from an element.

Utility Class
o-noradius
o-radius-1
CSS Variable
var(--o-radius-1)
Utility Class (all corners)
o-radius-1

Set Radius on Corners of a specific side

link Set Radius on Corners of a specific side
o-radius-left-1
Utility Class (top corners)
o-radius-top-1
Utility Class (bottom corners)
o-radius-bottom-1
Utility Class (left corners)
o-radius-left-1
Utility Class (right corners)
o-radius-right-1

Set Radius on a specific corner

link Set Radius on a specific corner
o-radius-bottom-right-1
Utility Class (top left corner)
o-radius-top-left-1
Utility Class (top right corner)
o-radius-top-right-1
Utility Class (bottom left corner)
o-radius-bottom-left-1
Utility Class (bottom right corner)
o-radius-bottom-right-1
o-radius-2
CSS Variable
var(--o-radius-2)
Utility Class (all corners)
o-radius-2

Set Radius on Corners of a specific side

link Set Radius on Corners of a specific side
o-radius-left-2
Utility Class (top corners)
o-radius-top-2
Utility Class (bottom corners)
o-radius-bottom-2
Utility Class (left corners)
o-radius-left-2
Utility Class (right corners)
o-radius-right-2

Set Radius on a specific corner

link Set Radius on a specific corner
o-radius-bottom-right-2
Utility Class (top left corner)
o-radius-top-left-2
Utility Class (top right corner)
o-radius-top-right-2
Utility Class (bottom left corner)
o-radius-bottom-left-2
Utility Class (bottom right corner)
o-radius-bottom-right-2
o-radius-3
CSS Variable
var(--o-radius-3)
Utility Class (all corners)
o-radius-3

Set Radius on Corners of a specific side

link Set Radius on Corners of a specific side
o-radius-left-3
Utility Class (top corners)
o-radius-top-3
Utility Class (bottom corners)
o-radius-bottom-3
Utility Class (left corners)
o-radius-left-3
Utility Class (right corners)
o-radius-right-3

Set Radius on a specific corner

link Set Radius on a specific corner
o-radius-bottom-right-3
Utility Class (top left corner)
o-radius-top-left-3
Utility Class (top right corner)
o-radius-top-right-3
Utility Class (bottom left corner)
o-radius-bottom-left-3
Utility Class (bottom right corner)
o-radius-bottom-right-3
o-radius-4
CSS Variable
var(--o-radius-4)
Utility Class (all corners)
o-radius-4

Set Radius on Corners of a specific side

link Set Radius on Corners of a specific side
o-radius-left-4
Utility Class (top corners)
o-radius-top-4
Utility Class (bottom corners)
o-radius-bottom-4
Utility Class (left corners)
o-radius-left-4
Utility Class (right corners)
o-radius-right-4

Set Radius on a specific corner

link Set Radius on a specific corner
o-radius-bottom-right-4
Utility Class (top left corner)
o-radius-top-left-4
Utility Class (top right corner)
o-radius-top-right-4
Utility Class (bottom left corner)
o-radius-bottom-left-4
Utility Class (bottom right corner)
o-radius-bottom-right-4
o-radius-5
CSS Variable
var(--o-radius-5)
Utility Class (all corners)
o-radius-5

Set Radius on Corners of a specific side

link Set Radius on Corners of a specific side
o-radius-left-5
Utility Class (top corners)
o-radius-top-5
Utility Class (bottom corners)
o-radius-bottom-5
Utility Class (left corners)
o-radius-left-5
Utility Class (right corners)
o-radius-right-5

Set Radius on a specific corner

link Set Radius on a specific corner
o-radius-bottom-right-5
Utility Class (top left corner)
o-radius-top-left-5
Utility Class (top right corner)
o-radius-top-right-5
Utility Class (bottom left corner)
o-radius-bottom-left-5
Utility Class (bottom right corner)
o-radius-bottom-right-5
o-radius-6
CSS Variable
var(--o-radius-6)
Utility Class (all corners)
o-radius-6

Set Radius on Corners of a specific side

link Set Radius on Corners of a specific side
o-radius-left-6
Utility Class (top corners)
o-radius-top-6
Utility Class (bottom corners)
o-radius-bottom-6
Utility Class (left corners)
o-radius-left-6
Utility Class (right corners)
o-radius-right-6

Set Radius on a specific corner

link Set Radius on a specific corner
o-radius-bottom-right-6
Utility Class (top left corner)
o-radius-top-left-6
Utility Class (top right corner)
o-radius-top-right-6
Utility Class (bottom left corner)
o-radius-bottom-left-6
Utility Class (bottom right corner)
o-radius-bottom-right-6

Radius round

link Radius round
o-radius-round
CSS Variable
var(--o-radius-round)
Utility Class (all corners)
o-radius-round

Set Radius on Corners of a specific side

link Set Radius on Corners of a specific side
o-radius-left-round
Utility Class (top corners)
o-radius-top-round
Utility Class (bottom corners)
o-radius-bottom-round
Utility Class (left corners)
o-radius-left-round
Utility Class (right corners)
o-radius-right-round

Set Radius on a specific corner

link Set Radius on a specific corner
o-radius-bottom-right-round
Utility Class (top left corner)
o-radius-top-left-round
Utility Class (top right corner)
o-radius-top-right-round
Utility Class (bottom left corner)
o-radius-bottom-left-round
Utility Class (bottom right corner)
o-radius-bottom-right-round
OxyProps CSS Variables
--o-radius-blob-1: 30% 70% 70% 30%/53% 30% 70% 47%;
--o-radius-blob-2: 53% 47% 34% 66%/63% 46% 54% 37%;
--o-radius-blob-3: 37% 63% 56% 44%/49% 56% 44% 51%;
--o-radius-blob-4: 63% 37% 37% 63%/43% 37% 63% 57%;
--o-radius-blob-5: 49% 51% 48% 52%/57% 44% 56% 43%;
o-blob-1
CSS Variable
var(--o-radius-blob-1)
Utility Class
o-blob-1
o-blob-2
CSS Variable
var(--o-radius-blob-2)
Utility Class
o-blob-2
o-blob-3
CSS Variable
var(--o-radius-blob-3)
Utility Class
o-blob-3
o-blob-4
CSS Variable
var(--o-radius-blob-4)
Utility Class
o-blob-4
o-blob-5
CSS Variable
var(--o-radius-blob-5)
Utility Class
o-blob-5

Conditional Radius

link Conditional Radius

Conditional radius sets a radius, and when we have a component that doesn’t have margin or is taking the full viewport width, it flips the border-radius to 0.

Read the full story by Ahmad Shadeed

Pattern: —o-radius-conditional--5

--o-radius-conditional-1
--o-radius-conditional-2
--o-radius-conditional-3
--o-radius-conditional-4
--o-radius-conditional-5
--o-radius-conditional-6

The Classes

link The Classes

Pattern: o-radius-{ side | corner }-conditional-{ 1-6 | round }

/* Applies to all corners */
o-radius-conditional-1
o-radius-conditional-2
o-radius-conditional-3
o-radius-conditional-4
o-radius-conditional-5
o-radius-conditional-6
/* Applies to the 2 corners on the given side */
o-radius-top-conditional-1
o-radius-top-conditional-2
o-radius-top-conditional-3
o-radius-top-conditional-4
o-radius-top-conditional-5
o-radius-top-conditional-6
o-radius-bottom-conditional-1
o-radius-bottom-conditional-2
o-radius-bottom-conditional-3
o-radius-bottom-conditional-4
o-radius-bottom-conditional-5
o-radius-bottom-conditional-6
o-radius-left-conditional-1
o-radius-left-conditional-2
o-radius-left-conditional-3
o-radius-left-conditional-4
o-radius-left-conditional-5
o-radius-left-conditional-6
o-radius-right-conditional-1
o-radius-right-conditional-2
o-radius-right-conditional-3
o-radius-right-conditional-4
o-radius-right-conditional-5
o-radius-right-conditional-6
/* Applies to an individual corner */
o-radius-top-left-conditional-1
o-radius-top-left-conditional-2
o-radius-top-left-conditional-3
o-radius-top-left-conditional-4
o-radius-top-left-conditional-5
o-radius-top-left-conditional-6
o-radius-top-right-conditional-1
o-radius-top-right-conditional-2
o-radius-top-right-conditional-3
o-radius-top-right-conditional-4
o-radius-top-right-conditional-5
o-radius-top-right-conditional-6
o-radius-bottom-left-conditional-1
o-radius-bottom-left-conditional-2
o-radius-bottom-left-conditional-3
o-radius-bottom-left-conditional-4
o-radius-bottom-left-conditional-5
o-radius-bottom-left-conditional-6
o-radius-bottom-right-conditional-1
o-radius-bottom-right-conditional-2
o-radius-bottom-right-conditional-3
o-radius-bottom-right-conditional-4
o-radius-bottom-right-conditional-5
o-radius-bottom-right-conditional-6
1
2
3
4
5
6