@graupl/graupl 1.0.0-alpha.12 → 1.0.0-alpha.14

package/src/scss/component/card/_index.scss

@@ -0,0 +1,177 @@
+// @graupl/graupl card component styles.
+
+@use "defaults";
+@use "variables" as *;
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../../mixins/media-queries" as *;
+
+@include layer(component) {
+  #{defaults.$card-selector} {
+    display: grid;
+    position: relative;
+    grid-template-columns: 1fr;
+    padding: $card-padding;
+    transform: $card-transform;
+    transition: $card-transition;
+    border: $card-border;
+    border-radius: $card-border-radius;
+    gap: $card-gap;
+    isolation: isolate;
+
+    &,
+    &#{defaults.$vertical-card-top-selector} {
+      grid-template-rows:
+        [image-start]
+        $card-image-ratio
+        [image-end content-start]
+        $card-content-ratio
+        [content-end];
+    }
+
+    &#{defaults.$vertical-card-bottom-selector},
+    &#{defaults.$inverse-card-selector} {
+      grid-template-rows:
+        [content-start]
+        $card-content-ratio
+        [content-end image-start]
+        $card-image-ratio
+        [image-end];
+    }
+
+    &:hover {
+      --#{root-defaults.$prefix}-card-transform: #{$card-hover-transform};
+    }
+
+    &#{defaults.$horizontal-card-selector} {
+      &,
+      &#{defaults.$horizontal-card-left-selector} {
+        --#{root-defaults.$prefix}-card-content-ratio: #{$horizontal-card-content-ratio};
+        --#{root-defaults.$prefix}-card-image-ratio: #{$horizontal-card-image-ratio};
+
+        grid-template-columns:
+          [image-start]
+          $card-image-ratio
+          [image-end content-start]
+          $card-content-ratio
+          [content-end];
+        grid-template-rows: 1fr;
+
+        #{defaults.$card-image-selector} img {
+          border-radius: calc($card-top-left-border-radius - $card-border-width)
+            0 0 calc($card-bottom-left-border-radius - $card-border-width);
+        }
+      }
+
+      &#{defaults.$horizontal-card-right-selector},
+      &#{defaults.$inverse-card-selector} {
+        grid-template-columns:
+          [content-start]
+          $card-content-ratio
+          [content-end image-start]
+          $card-image-ratio
+          [image-end];
+
+        #{defaults.$card-image-selector} img {
+          border-radius: 0
+            calc($card-top-right-border-radius - $card-border-width)
+            calc($card-bottom-right-border-radius - $card-border-width) 0;
+        }
+      }
+    }
+  }
+
+  #{defaults.$card-image-selector} {
+    grid-area: image;
+    padding: $card-image-padding;
+
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: calc($card-top-left-border-radius - $card-border-width)
+        calc($card-top-right-border-radius - $card-border-width) 0 0;
+      object-fit: cover;
+    }
+  }
+
+  #{defaults.$card-content-selector} {
+    display: flex;
+    grid-area: content;
+    flex-direction: column;
+    padding: $card-content-padding;
+    gap: $card-content-gap;
+  }
+
+  #{defaults.$card-body-selector} {
+    flex: 1 0 auto;
+  }
+
+  #{defaults.$card-footer-selector} {
+    flex: 0 0 auto;
+  }
+
+  #{defaults.$card-title-selector} {
+    flex: 0 0 auto;
+  }
+
+  @include screen-trigger(force-vertical-card) {
+    #{defaults.$card-selector} {
+      &#{defaults.$horizontal-card-selector} {
+        &,
+        &#{defaults.$horizontal-card-left-selector},
+        &#{defaults.$vertical-card-top-selector},
+        &#{defaults.$horizontal-card-right-selector},
+        &#{defaults.$vertical-card-bottom-selector},
+        &#{defaults.$inverse-card-selector} {
+          --#{root-defaults.$prefix}-horizontal-card-image-ratio: #{defaults.$card-image-ratio};
+          --#{root-defaults.$prefix}-horizontal-card-content-ratio: #{defaults.$card-content-ratio};
+
+          grid-template-columns: 1fr;
+        }
+
+        &,
+        &#{defaults.$horizontal-card-left-selector},
+        &#{defaults.$horizontal-card-right-selector},
+        &#{defaults.$vertical-card-top-selector} {
+          grid-template-rows:
+            [image-start]
+            $card-image-ratio
+            [image-end content-start]
+            $card-content-ratio
+            [content-end];
+        }
+
+        &#{defaults.$vertical-card-bottom-selector},
+        &#{defaults.$inverse-card-selector} {
+          grid-template-rows:
+            [content-start]
+            $card-content-ratio
+            [content-end image-start]
+            $card-image-ratio
+            [image-end];
+        }
+      }
+    }
+  }
+
+  @include animation-off {
+    #{defaults.$card-selector} {
+      --#{root-defaults.$prefix}-card-transition: #{$card-transition-reduced-motion};
+    }
+  }
+}
+
+@include layer(theme) {
+  #{defaults.$card-selector} {
+    border-color: $card-border-color;
+    background: $card-background;
+    color: $card-color;
+  }
+
+  #{defaults.$card-title-selector} {
+    color: $card-title-color;
+    font-size: $card-title-font-size;
+    font-weight: $card-title-font-weight;
+    line-height: $card-title-line-height;
+  }
+}

package/src/scss/component/card/_variables.scss

@@ -0,0 +1,185 @@
+// @graupl/graupl card component variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../variables" as root-variables;
+@use "../../theme/color/variables" as color;
+@use "../../theme/typography/variables" as typography;
+@use "sass:map";
+
+// Card properties.
+$card-padding-x: var(
+  --#{root-defaults.$prefix}-card-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$card-padding-y: var(
+  --#{root-defaults.$prefix}-card-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$card-padding: var(
+  --#{root-defaults.$prefix}-card-padding,
+  #{$card-padding-y} #{$card-padding-x}
+);
+$card-transition: var(
+  --#{root-defaults.$prefix}-card-transition,
+  transform #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function}
+);
+$card-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}-card-transition-reduced-motion,
+  none
+);
+
+// Card transform properties.
+$card-transform: var(
+  --#{root-defaults.$prefix}-card-transform,
+  #{defaults.$card-transform}
+);
+$card-hover-transform: var(
+  --#{root-defaults.$prefix}-card-hover-transform,
+  #{defaults.$card-hover-transform}
+);
+
+// Card gap properties.
+$card-column-gap: var(
+  --#{root-defaults.$prefix}-card-column-gap,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$card-row-gap: var(
+  --#{root-defaults.$prefix}-card-row-gap,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$card-gap: var(
+  --#{root-defaults.$prefix}-card-gap,
+  #{$card-column-gap} #{$card-row-gap}
+);
+
+// Card color properties.
+$card-background: var(
+  --#{root-defaults.$prefix}-card-background,
+  #{color.$root-background}
+);
+$card-color: var(--#{root-defaults.$prefix}-card-color, #{color.$root-color});
+
+// Card border-properties.
+$card-border-color: var(
+  --#{root-defaults.$prefix}-card-border-color,
+  #{$card-color}
+);
+$card-top-left-border-radius: var(
+  --#{root-defaults.$prefix}-card-top-left-border-radius,
+  #{root-variables.$border-radius}
+);
+$card-top-right-border-radius: var(
+  --#{root-defaults.$prefix}-card-top-right-border-radius,
+  #{root-variables.$border-radius}
+);
+$card-bottom-left-border-radius: var(
+  --#{root-defaults.$prefix}-card-bottom-left-border-radius,
+  #{root-variables.$border-radius}
+);
+$card-bottom-right-border-radius: var(
+  --#{root-defaults.$prefix}-card-bottom-right-border-radius,
+  #{root-variables.$border-radius}
+);
+$card-border-radius: var(
+  --#{root-defaults.$prefix}-card-border-radius,
+  #{$card-top-left-border-radius} #{$card-top-right-border-radius} #{$card-bottom-right-border-radius}
+    #{$card-bottom-left-border-radius}
+);
+$card-border-style: var(
+  --#{root-defaults.$prefix}-card-border-style,
+  #{root-variables.$border-style}
+);
+$card-border-width: var(
+  --#{root-defaults.$prefix}-card-border-width,
+  #{root-variables.$border-width}
+);
+$card-border: var(
+  --#{root-defaults.$prefix}-card-border,
+  #{$card-border-width} #{$card-border-style}
+);
+
+// Card layout properties.
+$card-content-ratio: var(
+  --#{root-defaults.$prefix}-card-content-ratio,
+  defaults.$card-content-ratio
+);
+$card-image-ratio: var(
+  --#{root-defaults.$prefix}-card-image-ratio,
+  defaults.$card-image-ratio
+);
+$horizontal-card-content-ratio: var(
+  --#{root-defaults.$prefix}-horizontal-card-content-ratio,
+  defaults.$horizontal-card-content-ratio
+);
+$horizontal-card-image-ratio: var(
+  --#{root-defaults.$prefix}-horizontal-card-image-ratio,
+  defaults.$horizontal-card-image-ratio
+);
+
+// Card image properties.
+$card-image-padding-x: var(
+  --#{root-defaults.$prefix}-card-image-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$card-image-padding-y: var(
+  --#{root-defaults.$prefix}-card-image-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$card-image-padding: var(
+  --#{root-defaults.$prefix}-card-image-padding,
+  #{$card-image-padding-y} #{$card-image-padding-x}
+);
+
+// Card content properties.
+$card-content-padding-x: var(
+  --#{root-defaults.$prefix}-card-content-padding-x,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$card-content-padding-y: var(
+  --#{root-defaults.$prefix}-card-content-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$card-content-padding: var(
+  --#{root-defaults.$prefix}-card-content-padding,
+  #{$card-content-padding-y} #{$card-content-padding-x}
+);
+
+// Card content gap properties.
+$card-content-column-gap: var(
+  --#{root-defaults.$prefix}-card-content-column-gap,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$card-content-row-gap: var(
+  --#{root-defaults.$prefix}-card-content-row-gap,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$card-content-gap: var(
+  --#{root-defaults.$prefix}-card-content-gap,
+  #{$card-content-column-gap} #{$card-content-row-gap}
+);
+
+// Card title properties.
+$card-title-color: var(
+  --#{root-defaults.$prefix}-card-title-color,
+  #{$card-color}
+);
+$card-title-font-size: var(
+  --#{root-defaults.$prefix}-card-title-font-size,
+  #{typography.$h4-font-size}
+);
+$card-title-font-weight: var(
+  --#{root-defaults.$prefix}-card-title-font-weight,
+  #{typography.$h4-font-weight}
+);
+$card-title-font-family: var(
+  --#{root-defaults.$prefix}-card-title-font-family,
+  #{typography.$h4-font-family}
+);
+$card-title-line-height: var(
+  --#{root-defaults.$prefix}-card-title-line-height,
+  #{typography.$h4-line-height}
+);

package/src/scss/component/carousel/_defaults.scss

@@ -0,0 +1,43 @@
+// @graupl/graupl carousel component default values.
+//
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.
+
+@use "sass:map";
+
+// Carousel selectors.
+$carousel-selector: ".carousel" !default;
+$carousel-control-container-selector: ".carousel-control-container" !default;
+$carousel-control-selector: ".carousel-control" !default;
+$carousel-pause-selector: ".pause" !default;
+$carousel-play-selector: ".play" !default;
+$carousel-autoplay-selector: ".autoplay" !default;
+$carousel-previous-selector: ".previous" !default;
+$carousel-next-selector: ".next" !default;
+$carousel-item-container-selector: ".carousel-item-container" !default;
+$carousel-item-selector: ".carousel-item" !default;
+$carousel-tab-container-selector: ".carousel-tab-container" !default;
+$carousel-tab-selector: ".carousel-tab" !default;
+$carousel-active-item-selector: ".active" !default;
+$carousel-next-item-selector: ".next" !default;
+$carousel-previous-item-selector: ".previous" !default;
+
+// Carousel grid area properties.
+$carousel-controls-height: auto !default;
+$carousel-tabs-width: 1fr !default;
+$carousel-tabs-height: auto !default;
+$carousel-slide-height: 1fr !default;
+$carousel-control-height: 3rem !default;
+$carousel-control-width: 4rem !default;
+
+// Carousel slide properties.
+$carousel-item-max-width: 100% !default;
+
+// Carousel control properties.
+$carousel-play-content: "'▶'" !default;
+$carousel-pause-content: "'❚❚'" !default;
+$carousel-next-content: "'▶'" !default;
+$carousel-previous-content: "'◀'" !default;

package/src/scss/component/carousel/_index.scss

@@ -0,0 +1,182 @@
+// @graupl/graupl carousel component styles.
+
+@use "defaults";
+@use "variables" as *;
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../../base/button/variables" as button-variables;
+@use "../../base/button/mixins" as button-mixins;
+
+#{defaults.$carousel-selector} {
+  @include layer(component) {
+    display: grid;
+    position: relative;
+    grid-template-columns: [slide-start controls-start] auto [tabs-start] $carousel-tabs-width [tabs-end] auto [controls-end slide-end];
+    grid-template-rows: [slide-start controls-start] $carousel-controls-height [controls-end] $carousel-slide-height [tabs-start] $carousel-tabs-height [tabs-end slide-end];
+    isolation: isolate;
+    padding: $carousel-padding;
+
+    &[data-graupl-action="next"] {
+      #{defaults.$carousel-item-selector} {
+        &#{defaults.$carousel-previous-item-selector} {
+          transform: translateX(calc(-1 * $carousel-item-max-width));
+
+          &#{defaults.$carousel-active-item-selector} {
+            transform: none;
+          }
+        }
+
+        &#{defaults.$carousel-next-item-selector} {
+          transform: translateX($carousel-item-max-width);
+
+          &#{defaults.$carousel-active-item-selector} {
+            transform: none;
+          }
+        }
+      }
+    }
+
+    &[data-graupl-action="previous"] {
+      #{defaults.$carousel-item-selector} {
+        &#{defaults.$carousel-previous-item-selector} {
+          transform: translateX($carousel-item-max-width);
+
+          &#{defaults.$carousel-active-item-selector} {
+            transform: none;
+          }
+        }
+
+        &#{defaults.$carousel-next-item-selector} {
+          transform: translateX(calc(-1 * $carousel-item-max-width));
+
+          &#{defaults.$carousel-active-item-selector} {
+            transform: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+#{defaults.$carousel-control-container-selector} {
+  @include layer(component) {
+    display: grid;
+    z-index: 1;
+    grid-area: controls;
+    grid-template-columns:
+      [autoplay-start] $carousel-control-width [autoplay-end]
+      1fr [previous-start] $carousel-control-width [previous-end next-start]
+      $carousel-control-width [next-end];
+    grid-template-rows: [autoplay-start next-start previous-start] $carousel-control-height [previous-end next-end autoplay-end];
+  }
+}
+
+#{defaults.$carousel-control-selector} {
+  @include button-mixins.apply-button;
+
+  @include layer(component) {
+    &#{defaults.$carousel-autoplay-selector} {
+      grid-area: autoplay;
+    }
+
+    &#{defaults.$carousel-play-selector}::before {
+      content: $carousel-play-content;
+      display: inline-block;
+    }
+
+    &#{defaults.$carousel-pause-selector}::before {
+      content: $carousel-pause-content;
+      display: inline-block;
+    }
+
+    &#{defaults.$carousel-next-selector} {
+      grid-area: next;
+
+      &::before {
+        content: $carousel-next-content;
+        display: inline-block;
+      }
+    }
+
+    &#{defaults.$carousel-previous-selector} {
+      grid-area: previous;
+
+      &::before {
+        content: $carousel-previous-content;
+        display: inline-block;
+      }
+    }
+  }
+}
+
+#{defaults.$carousel-item-container-selector} {
+  @include layer(component) {
+    display: grid;
+    z-index: 0;
+    grid-area: slide;
+    grid-template-areas: "items";
+    padding: $carousel-item-container-padding;
+    overflow-x: hidden;
+    isolation: isolate;
+  }
+}
+
+#{defaults.$carousel-item-selector} {
+  @include layer(component) {
+    z-index: -1;
+    grid-area: items;
+    max-width: $carousel-item-max-width;
+    opacity: 0;
+
+    &#{defaults.$carousel-active-item-selector} {
+      z-index: 1;
+      transform: none;
+      transition: transform
+        var(--#{root-defaults.$prefix}-carousel-transition-duration, 500ms)
+        ease-in-out;
+      opacity: 1;
+    }
+
+    &#{defaults.$carousel-previous-item-selector} {
+      z-index: 1;
+      transform: translateX(calc(-1 * $carousel-item-max-width));
+      transition: transform
+        var(--#{root-defaults.$prefix}-carousel-transition-duration, 500ms)
+        ease-in-out;
+      opacity: 1;
+
+      &#{defaults.$carousel-active-item-selector} {
+        transform: none;
+      }
+    }
+
+    &#{defaults.$carousel-next-item-selector} {
+      z-index: 1;
+      transform: translateX($carousel-item-max-width);
+      opacity: 1;
+
+      &#{defaults.$carousel-active-item-selector} {
+        transform: none;
+      }
+    }
+  }
+}
+
+#{defaults.$carousel-tab-container-selector} {
+  @include layer(component) {
+    display: flex;
+    z-index: 1;
+    grid-area: tabs;
+    justify-content: center;
+    padding: $carousel-tab-container-padding;
+    gap: $carousel-tab-container-gap;
+  }
+}
+
+#{defaults.$carousel-tab-selector} {
+  @include button-mixins.apply-button;
+
+  @include layer(component) {
+    --#{root-defaults.$prefix}-button-border-radius: 50%;
+  }
+}

package/src/scss/component/carousel/_variables.scss

@@ -0,0 +1,104 @@
+// @graupl/graupl carousel component variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../variables" as root-variables;
+@use "../../base/button/variables" as button-variables;
+@use "sass:map";
+
+// Carousel grid area properties.
+$carousel-controls-height: var(
+  --#{root-defaults.$prefix}-carousel-controls-height,
+  #{defaults.$carousel-controls-height}
+);
+$carousel-tabs-width: var(
+  --#{root-defaults.$prefix}-carousel-tabs-width,
+  #{defaults.$carousel-tabs-width}
+);
+$carousel-tabs-height: var(
+  --#{root-defaults.$prefix}-carousel-tabs-height,
+  #{defaults.$carousel-tabs-height}
+);
+$carousel-slide-height: var(
+  --#{root-defaults.$prefix}-carousel-slide-height,
+  #{defaults.$carousel-slide-height}
+);
+
+// Carousel properties.
+$carousel-padding-x: var(
+  --#{root-defaults.$prefix}-carousel-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$carousel-padding-y: var(
+  --#{root-defaults.$prefix}-carousel-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$carousel-padding: var(
+  --#{root-defaults.$prefix}-carousel-padding,
+  #{$carousel-padding-y} #{$carousel-padding-x}
+);
+
+// Carousel slide properties.
+$carousel-item-max-width: var(
+  --#{root-defaults.$prefix}-carousel-item-max-width,
+  #{defaults.$carousel-item-max-width}
+);
+$carousel-item-container-padding-x: var(
+  --#{root-defaults.$prefix}-carousel-item-container-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$carousel-item-container-padding-y: var(
+  --#{root-defaults.$prefix}-carousel-item-container-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$carousel-item-container-padding: var(
+  --#{root-defaults.$prefix}-carousel-item-container-padding,
+  #{$carousel-item-container-padding-y} #{$carousel-item-container-padding-x}
+);
+
+// Carousel control properties.
+$carousel-play-content: var(
+  --#{root-defaults.$prefix}-carousel-play-content,
+  #{defaults.$carousel-play-content}
+);
+$carousel-pause-content: var(
+  --#{root-defaults.$prefix}-carousel-pause-content,
+  #{defaults.$carousel-pause-content}
+);
+$carousel-next-content: var(
+  --#{root-defaults.$prefix}-carousel-next-content,
+  #{defaults.$carousel-next-content}
+);
+$carousel-previous-content: var(
+  --#{root-defaults.$prefix}-carousel-previous-content,
+  #{defaults.$carousel-previous-content}
+);
+$carousel-control-width: var(
+  --#{root-defaults.$prefix}-carousel-control-width,
+  #{defaults.$carousel-control-width}
+);
+$carousel-control-height: var(
+  --#{root-defaults.$prefix}-carousel-control-height,
+  #{defaults.$carousel-control-height}
+);
+
+// Carousel tab properties.
+$carousel-tab-container-padding-x: var(
+  --#{root-defaults.$prefix}-carousel-tab-container-padding-x,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$carousel-tab-container-padding-y: var(
+  --#{root-defaults.$prefix}-carousel-tab-container-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$carousel-tab-container-padding: var(
+  --#{root-defaults.$prefix}-carousel-tab-container-padding,
+  #{$carousel-tab-container-padding-y} #{$carousel-tab-container-padding-x}
+);
+$carousel-tab-container-gap: var(
+  --#{root-defaults.$prefix}-carousel-tab-container-gap,
+  #{map.get(root-variables.$spacers, 3)}
+);

package/src/scss/component/input-group/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl input group component styles.
+// @graupl/graupl input group component styles.
 
 @use "defaults";
 @use "../../base/form/defaults" as form-defaults;