move.gl 0.0.1 → 0.0.2

package/src/scss/mixins/_shape.scss

@@ -0,0 +1,315 @@
+
+
+// ============================================================================
+// Shapes
+// ============================================================================
+@use "../../dev" as *;
+@use "../../variables" as *;
+// @use "../../mixins" as *; // Removed to avoid circular dependency
+
+
+
+// Shapes | Basic
+// ============================================================================
+
+// Shapes | Basic | Circle
+// ----------------------------------------------------------------------------
+// A circle created by setting the border-radius to 50% and ensuring the
+// element has equal width and height.
+
+/// Creates a circular shape by setting the border-radius to 50%
+/// and ensuring the element has equal width and height.
+/// @group Shapes
+@mixin shape_circle {
+// @mixin shape_circle($size) {
+    @include ratio_1x1;
+    // width: $size;
+    // height: $size;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+
+///
+/// Creates a circular element with a given size.
+///
+/// @name circle
+/// @param {Number|Unit} $size - The diameter of the circle.
+/// @example scss - Usage
+///   @include circle(50px);
+///
+@mixin circle($size) {
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+}
+
+
+
+// Shapes | Basic | Square
+// ----------------------------------------------------------------------------
+// A straightforward square, defined by equal width and height.
+
+/// Creates a square shape by setting equal width and height.
+/// @group Shapes
+@mixin shape_square {
+// @mixin shape_square($size) {
+//     width: $size;
+//     height: $size;
+    @include ratio_1x1;
+    display: inline-block;
+}
+
+// Shapes | Basic | Diamond
+// ----------------------------------------------------------------------------
+// A diamond shape, created by rotating a square element.
+
+/// Creates a diamond shape by rotating a square element.
+/// @param {Number} $size - The size of the diamond.
+/// @param {Color} $color - The background color of the diamond.
+/// @group Shapes
+@mixin shape_diamond($size, $color) {
+    width: $size;
+    height: $size;
+    background-color: $color;
+    transform: rotate(45deg);
+    display: inline-block;
+}
+
+// Shapes | Basic | Rectangle
+// ----------------------------------------------------------------------------
+// A rectangle can vary in width and height.
+
+/// Creates a rectangle shape with specified width and height.
+/// @param {Number} $width - The width of the rectangle.
+/// @param {Number} $height - The height of the rectangle.
+/// @group Shapes
+@mixin shape_rectangle($width, $height) {
+    width: $width;
+    height: $height;
+    display: inline-block;
+}
+
+// Shapes | Basic | Triangle
+// ----------------------------------------------------------------------------
+// Triangles, created using the border property and making the width and
+// height of the element 0.
+
+/// Creates a triangle shape using the border property.
+/// The direction can be up, down, left, or right.
+/// @param {Number} $size - The size of the triangle.
+/// @param {Color} $color - The color of the triangle.
+/// @param {String} $direction - The direction of the triangle (up, down, left, right).
+/// @group Shapes
+@mixin shape_triangle($size, $color, $direction) {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    @if $direction == 'up' {
+        border-width: 0 $size $size $size;
+        border-color: transparent transparent $color transparent;
+    } @else if $direction == 'down' {
+        border-width: $size $size 0 $size;
+        border-color: $color transparent transparent transparent;
+    } @else if $direction == 'left' {
+        border-width: $size $size $size 0;
+        border-color: transparent $color transparent transparent;
+    } @else if $direction == 'right' {
+        border-width: $size 0 $size $size;
+        border-color: transparent transparent transparent $color;
+    }
+    display: inline-block;
+}
+
+
+
+
+
+///
+/// Creates a triangle using only CSS borders.
+///
+/// @name triangle
+/// @param {Number|Unit} $size - The size of the triangle.
+/// @param {Color} $color - The color of the triangle.
+/// @param {String} $direction - The direction the triangle points (default: up).
+/// @example scss - Usage
+///   @include triangle(10px, #ff5722, down);
+///
+@mixin triangle($size, $color, $direction: up) {
+    width: 0;
+    height: 0;
+    border-style: solid;
+
+    @if $direction == up {
+        border-width: 0 $size $size $size;
+        border-color: transparent transparent $color transparent;
+    } @else if $direction == down {
+        border-width: $size $size 0 $size;
+        border-color: $color transparent transparent transparent;
+    } @else if $direction == left {
+        border-width: $size $size $size 0;
+        border-color: transparent $color transparent transparent;
+    } @else if $direction == right {
+        border-width: $size 0 $size $size;
+        border-color: transparent transparent transparent $color;
+    }
+}
+
+
+// Shapes | Advanced
+// ============================================================================
+
+
+
+// Shapes | Advanced | Hexagon
+// ----------------------------------------------------------------------------
+
+/// Creates a hexagon shape using the CSS `clip-path` property.
+/// @param {Number} $size - The size of the hexagon.
+/// @param {Color} $color - The background color of the hexagon.
+/// @group Shapes
+@mixin shape_hexagon($size, $color) {
+    width: $size;
+    height: calc(#{$size} / 1.73205); // Height for hexagon
+    background-color: $color;
+    clip-path: polygon(
+        25% 0%,
+        75% 0%,
+        100% 50%,
+        75% 100%,
+        25% 100%,
+        0% 50%
+    );
+    display: inline-block;
+}
+
+// Shapes | Advanced | Star
+// ----------------------------------------------------------------------------
+// Stars using CSS clip-path property.
+// The mixin below is procides a simplified for a 5-point star, but you can
+// adjust the clip-path for more points.
+
+/// Creates a star shape using the CSS `clip-path` property.
+/// @param {Number} $size - The size of the star.
+/// @param {Color} $color - The background color of the star.
+/// @group Shapes
+@mixin shape_star($size, $color) {
+    width: $size;
+    height: $size;
+    display: inline-block;
+    background-color: #f1c40f;
+    background-color: $color;
+    clip-path: polygon(
+        50% 0%,
+        61% 35%,
+        98% 35%,
+        68% 57%,
+        79% 91%,
+        50% 70%,
+        21% 91%,
+        32% 57%,
+        2% 35%,
+        39% 35%
+    );
+}
+
+
+// Shapes | Advanced | Heart
+// ----------------------------------------------------------------------------
+// Creating a heart shape involves using the ::before and ::after
+// pseudo-elements along with the border-radius property to craft
+// the curves of the heart.
+
+/// Creates a heart shape using the `::before` and `::after` pseudo-elements.
+/// @param {Number} $size - The size of the heart.
+/// @param {Color} $color - The background color of the heart.
+/// @group Shapes
+@mixin shape_heart($size, $color) {
+    position: relative;
+    width: $size;
+    height: $size;
+    background-color: $color;
+    transform: rotate(45deg);
+    margin: $size / 4;
+    &:before,
+    &:after {
+        content: '';
+        position: absolute;
+        width: $size;
+        height: $size;
+        border-radius: 50%;
+        background-color: $color;
+    }
+    &:before {
+        top: -$size / 2;
+        left: 0;
+    }
+    &:after {
+        top: 0;
+        left: -$size / 2;
+    }
+}
+
+// Shapes | Advanced | Arrow
+// ----------------------------------------------------------------------------
+// An arrow shape can be created using borders of a transparent element,
+// similar to the triangle, but with adjustments to create the arrow's tail.
+
+/// Creates an arrow shape using borders of a transparent element.
+/// @param {Number} $width - The width of the arrow.
+/// @param {Number} $height - The height of the arrow.
+/// @param {Color} $color - The color of the arrow.
+/// @param {String} $direction - The direction of the arrow (up, down, left, right).
+/// @group Shapes
+@mixin shape_arrow($width, $height, $color, $direction) {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    @if $direction == 'up' {
+        border-width: 0 $width / 2 $height $width / 2;
+        border-color: transparent transparent $color transparent;
+    } @else if $direction == 'down' {
+        border-width: $height $width / 2 0 $width / 2;
+        border-color: $color transparent transparent transparent;
+    } @else if $direction == 'left' {
+        border-width: $width / 2 $height $width / 2 0;
+        border-color: transparent $color transparent transparent;
+    } @else if $direction == 'right' {
+        border-width: $width / 2 0 $width / 2 $height;
+        border-color: transparent transparent transparent $color;
+    }
+    display: inline-block;
+}
+
+// Shapes | Advanced | Speech Bubble
+// ----------------------------------------------------------------------------
+// A speech bubble can be created using ::after to form the tail. You can
+// adjust the position and size of the tail as needed.
+
+/// Creates a speech bubble shape with an optional directional tail.
+/// @param {Color} $background - The background color of the bubble.
+/// @param {String} $tail-direction - The direction of the bubble's tail (bottom, top).
+/// @group Shapes
+@mixin shape_bubble($background: #ecf0f1, $tail-direction: 'bottom') {
+    position: relative;
+    padding: 10px;
+    background: $background;
+    border-radius: 10px;
+    &:after {
+        content: '';
+        position: absolute;
+        border-style: solid;
+        @if $tail-direction == 'bottom' {
+            border-width: 0 10px 10px;
+            border-color: transparent transparent $background transparent;
+            bottom: -10px;
+            left: 20px;
+        } @else if $tail-direction == 'top' {
+            border-width: 10px 10px 0;
+            border-color: $background transparent transparent transparent;
+            top: -10px;
+            left: 20px;
+        }
+        // Add more conditions for 'left' and 'right' if needed
+    }
+}