Added new design

[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / utils / bourbon / library / _border-radius.scss

diff --git a/src/wolnelektury/static/2022/styles/utils/bourbon/library/_border-radius.scss b/src/wolnelektury/static/2022/styles/utils/bourbon/library/_border-radius.scss
new file mode 100644 (file)
index 0000000..3fce348
--- /dev/null
+++ b/src/wolnelektury/static/2022/styles/utils/bourbon/library/_border-radius.scss
@@ -0,0 +1,85 @@
+@charset "UTF-8";
+
+/// Provides a concise, one-line method for setting `border-radius` on both the
+/// top-left and top-right of a box.
+///
+/// @argument {number (with unit)} $radii
+///
+/// @example scss
+///   .element {
+///     @include border-top-radius(4px);
+///   }
+///
+///   // CSS Output
+///   .element {
+///     border-top-left-radius: 4px;
+///     border-top-right-radius: 4px;
+///   }
+
+@mixin border-top-radius($radii) {
+  border-top-left-radius: $radii;
+  border-top-right-radius: $radii;
+}
+
+/// Provides a concise, one-line method for setting `border-radius` on both the
+/// top-right and bottom-right of a box.
+///
+/// @argument {number (with unit)} $radii
+///
+/// @example scss
+///   .element {
+///     @include border-right-radius(3px);
+///   }
+///
+///   // CSS Output
+///   .element {
+///     border-bottom-right-radius: 3px;
+///     border-top-right-radius: 3px;
+///   }
+
+@mixin border-right-radius($radii) {
+  border-bottom-right-radius: $radii;
+  border-top-right-radius: $radii;
+}
+
+/// Provides a concise, one-line method for setting `border-radius` on both the
+/// bottom-left and bottom-right of a box.
+///
+/// @argument {number (with unit)} $radii
+///
+/// @example scss
+///   .element {
+///     @include border-bottom-radius(2px);
+///   }
+///
+///   // CSS Output
+///   .element {
+///     border-bottom-left-radius: 2px;
+///     border-bottom-right-radius: 2px;
+///   }
+
+@mixin border-bottom-radius($radii) {
+  border-bottom-left-radius: $radii;
+  border-bottom-right-radius: $radii;
+}
+
+/// Provides a concise, one-line method for setting `border-radius` on both the
+/// top-left and bottom-left of a box.
+///
+/// @argument {number (with unit)} $radii
+///
+/// @example scss
+///   .element {
+///     @include border-left-radius(1px);
+///   }
+///
+///   // CSS Output
+///   .element {
+///     border-bottom-left-radius: 1px;
+///     border-top-left-radius: 1px;
+///   }
+
+@mixin border-left-radius($radii) {
+  border-bottom-left-radius: $radii;
+  border-top-left-radius: $radii;
+}