diff --git a/_config.yml b/_config.yml
index 4f930918a..a4fbb15c1 100644
--- a/_config.yml
+++ b/_config.yml
@@ -131,7 +131,7 @@ variants:
- name: danger
icon: alert-circle
-button-variants:
+theme-colors:
primary:
class: primary
title: Primary
diff --git a/src/pages/_data/docs.yml b/src/pages/_data/docs.yml
index bfc5aca70..6df0cdc8c 100644
--- a/src/pages/_data/docs.yml
+++ b/src/pages/_data/docs.yml
@@ -105,6 +105,10 @@ utils:
title: Utilities
icon: flame
children:
+ borders:
+ title: Borders
+ url: docs/borders.html
+
cursors:
title: Cursors
url: docs/cursors.html
diff --git a/src/pages/_docs/borders.md b/src/pages/_docs/borders.md
new file mode 100644
index 000000000..4e44920bd
--- /dev/null
+++ b/src/pages/_docs/borders.md
@@ -0,0 +1,70 @@
+---
+title: Borders
+---
+
+## Border direction
+
+The following border utilities classes will add border to any side of an element.
+
+{% capture code %}
+
+
+
+
+
+
+
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="d-flex space-x-3" %}
+
+## Border size
+
+Below are the available border size utilities classes.
+
+{% capture code %}
+
+
+
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="d-flex space-x-3" %}
+
+
+## Remove border
+
+You can remove a border on a single side of an element by using the following border utilities classes.
+
+{% capture code %}
+
+
+
+
+
+
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="d-flex space-x-3" %}
+
+## Border color
+
+You can set a border color of any side of an element by adding the following utilities classes below.
+
+{% capture code %}
+{% for color in site.theme-colors %}
+
+{% endfor %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
+
+
+## Border radius
+
+You can set a border to any element by using the following utilities classes below.
+
+{% capture code %}
+
+
+
+
+
+
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="d-flex space-x-3" %}
\ No newline at end of file
diff --git a/src/pages/_docs/buttons.md b/src/pages/_docs/buttons.md
index 2046bd7b1..1b6721ab1 100644
--- a/src/pages/_docs/buttons.md
+++ b/src/pages/_docs/buttons.md
@@ -34,7 +34,7 @@ The standard button creates a white background and subtle hover animation. It's
Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons' purpose and make them easy to spot.
{% capture code %}
-{% for button in site.button-variants %}
+{% for button in site.theme-colors %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include ui/button.html color=btn-color text=btn-title %}
@@ -48,7 +48,7 @@ Use the button classes that correspond to the function of your button. The big r
Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.
{% capture code %}
-{% for button in site.button-variants %}
+{% for button in site.theme-colors %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include ui/button.html color=btn-color text=btn-title disabled=true %}
@@ -74,7 +74,7 @@ Choose the right color for your button to make it go well with your design and d
Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, at the same time encouraging them to take action.
{% capture code %}
-{% for button in site.button-variants %}
+{% for button in site.theme-colors %}
{{ button[1].title }}
{% endfor %}
{% endcapture %}
diff --git a/src/pages/_includes/layout/debug.html b/src/pages/_includes/layout/debug.html
index 875964fb1..274a399cc 100644
--- a/src/pages/_includes/layout/debug.html
+++ b/src/pages/_includes/layout/debug.html
@@ -59,7 +59,7 @@
height: 6px;
display: inline-block;
background: rgba(255, 255, 255, .3);
- border-radius: $border-radius-full;
+ border-radius: $border-radius-pill;
}
body.show-debug-code .card-debug {
diff --git a/src/pages/_includes/parts/buttons-table.html b/src/pages/_includes/parts/buttons-table.html
index d138dfb69..de70c3929 100644
--- a/src/pages/_includes/parts/buttons-table.html
+++ b/src/pages/_includes/parts/buttons-table.html
@@ -2,7 +2,7 @@
{% assign show-link = include.show-link | default: false %}
{% assign show-states = include.show-states | default: false %}
{% assign hide-labels = include.hide-labels | default: false %}
-{% assign variants = include.variants | default: site.button-variants %}
+{% assign variants = include.variants | default: site.theme-colors %}
{% for state in site.button-states %}
{% if show-states or (state.class != 'active' and state.class != 'disabled') %}
diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss
index 118f017a8..be75a96b8 100644
--- a/src/scss/_utilities.scss
+++ b/src/scss/_utilities.scss
@@ -1,4 +1,9 @@
$margin-spacers: map-merge($spacers, (auto: auto, null: $spacer));
+$border-values: (
+ null: $border-width solid $border-color-transparent,
+ wide: $border-width-wide solid $border-color-transparent,
+ 0: 0,
+);
//Utilities
$utilities: (
@@ -57,43 +62,35 @@ $utilities: (
),
"border": (
property: border,
- values: (
- null: $border-width solid $border-color-transparent,
- wide: $border-width-wide solid $border-color-transparent,
- 0: 0,
- )
+ values: $border-values
),
"border-top": (
property: border-top,
- values: (
- null: $border-width solid $border-color-transparent,
- wide: $border-width-wide solid $border-color-transparent,
- 0: 0,
- )
+ values: $border-values
),
"border-end": (
+ class: border-end,
property: border-right,
- values: (
- null: $border-width solid $border-color-transparent,
- wide: $border-width-wide solid $border-color-transparent,
- 0: 0,
- )
+ values: $border-values
),
"border-bottom": (
property: border-bottom,
- values: (
- null: $border-width solid $border-color-transparent,
- wide: $border-width-wide solid $border-color-transparent,
- 0: 0,
- )
+ values: $border-values
),
"border-start": (
+ class: border-start,
property: border-left,
- values: (
- null: $border-width solid $border-color-transparent,
- wide: $border-width-wide solid $border-color-transparent,
- 0: 0,
- )
+ values: $border-values
+ ),
+ "border-x": (
+ class: border-x,
+ property: border-left border-right,
+ values: $border-values
+ ),
+ "border-y": (
+ class: border-y,
+ property: border-top border-bottom,
+ values: $border-values
),
"width": (
property: width,
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index e94199d06..3f4f85ced 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -189,8 +189,11 @@ $dark-mode-text: $light;
// Borders
$border-width: 1px !default;
$border-width-wide: 2px !default;
-$border-radius: 3px !default;
-$border-radius-full: 50% !default;
+
+$border-radius-sm: 2px !default;
+$border-radius: 4px !default;
+$border-radius-lg: 8px !default;
+$border-radius-pill: 50% !default;
// Avatars
$avatar-size: 2.5rem !default;
@@ -238,14 +241,13 @@ $size-spacers: (
) !default;
-$size-values: (
- 1: 1%,
+$size-values: map-merge($spacers, (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
-) !default;
+)) !default;
$container-variations: (
diff --git a/src/scss/ui/_avatars.scss b/src/scss/ui/_avatars.scss
index e738de180..3da303c6a 100644
--- a/src/scss/ui/_avatars.scss
+++ b/src/scss/ui/_avatars.scss
@@ -25,7 +25,7 @@
position: absolute;
right: 0;
bottom: 0;
- border-radius: $border-radius-full;
+ border-radius: $border-radius-pill;
box-shadow: 0 0 0 2px $white;
}
@@ -35,7 +35,7 @@
}
.avatar-rounded {
- border-radius: $border-radius-full;
+ border-radius: $border-radius-pill;
}
@each $avatar-size, $size in $avatar-sizes {
diff --git a/src/scss/ui/_badges.scss b/src/scss/ui/_badges.scss
index 12f758ea8..181406216 100644
--- a/src/scss/ui/_badges.scss
+++ b/src/scss/ui/_badges.scss
@@ -21,7 +21,7 @@
min-width: 0;
min-height: auto;
padding: 0;
- border-radius: $border-radius-full;
+ border-radius: $border-radius-pill;
}
.avatar {
diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss
index 0783a78a5..83f70cad7 100644
--- a/src/scss/ui/_buttons.scss
+++ b/src/scss/ui/_buttons.scss
@@ -157,7 +157,7 @@
z-index: $zindex-fixed;
bottom: 1.5rem;
right: 1.5rem;
- border-radius: $border-radius-full;
+ border-radius: $border-radius-pill;
}
.btn-loading {
@@ -172,7 +172,7 @@
vertical-align: text-bottom;
border: $spinner-border-width-sm solid currentColor;
border-right-color: transparent;
- border-radius: $border-radius-full;
+ border-radius: $border-radius-pill;
color: $white;
position: absolute;
width: 1rem;
diff --git a/src/scss/ui/_calendars.scss b/src/scss/ui/_calendars.scss
index 4ffcd6c93..ffeae3766 100644
--- a/src/scss/ui/_calendars.scss
+++ b/src/scss/ui/_calendars.scss
@@ -53,7 +53,7 @@
cursor: pointer;
background: 0 0;
border: 1px solid transparent;
- border-radius: $border-radius-full;
+ border-radius: $border-radius-pill;
outline: 0;
transition: background .3s, border .3s, box-shadow .32s, color .3s;
diff --git a/src/scss/ui/_forms.scss b/src/scss/ui/_forms.scss
index d697127d6..065268541 100644
--- a/src/scss/ui/_forms.scss
+++ b/src/scss/ui/_forms.scss
@@ -152,7 +152,7 @@ Form help
cursor: pointer;
user-select: none;
background: $min-white;
- border-radius: $border-radius-full;
+ border-radius: $border-radius-pill;
transition: .3s background-color, .3s color;
&:hover,
diff --git a/src/scss/ui/_lists.scss b/src/scss/ui/_lists.scss
index 68facca72..38e9bad1f 100644
--- a/src/scss/ui/_lists.scss
+++ b/src/scss/ui/_lists.scss
@@ -77,7 +77,7 @@
color: $white;
text-align: center;
background: $text-muted;
- border-radius: $border-radius-full;
+ border-radius: $border-radius-pill;
.icon {
width: 1rem;
diff --git a/src/scss/ui/_loaders.scss b/src/scss/ui/_loaders.scss
index 5943c8b7f..488f0a65f 100644
--- a/src/scss/ui/_loaders.scss
+++ b/src/scss/ui/_loaders.scss
@@ -28,7 +28,7 @@
border-top-color: currentColor;
border-left-color: currentColor;
- border-radius: $border-radius-full;
+ border-radius: $border-radius-pill;
animation: loader .6s linear;
animation-iteration-count: infinite;
}
diff --git a/src/scss/ui/_skeleton.scss b/src/scss/ui/_skeleton.scss
index ed77ee1d1..82466e7b0 100644
--- a/src/scss/ui/_skeleton.scss
+++ b/src/scss/ui/_skeleton.scss
@@ -20,7 +20,7 @@
vertical-align: bottom;
width: $avatar-size;
height: $avatar-size;
- border-radius: $border-radius-full;
+ border-radius: $border-radius-pill;
@each $name, $size in $avatar-sizes {
&-#{$name} {
diff --git a/src/scss/ui/_steps.scss b/src/scss/ui/_steps.scss
index 2f9850954..00b02ec3a 100644
--- a/src/scss/ui/_steps.scss
+++ b/src/scss/ui/_steps.scss
@@ -82,7 +82,7 @@
display: block;
content: "";
border: 2px solid $white;
- border-radius: $border-radius-full;
+ border-radius: $border-radius-pill;
transform: translateX(-50%);
}