From 9cf8765eac36cb93c70759c4e7bcbc23c4459f2e Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Wed, 25 Jan 2023 09:57:28 +0100
Subject: [PATCH] Add new components like flex-group and flex-inline.

---
 assets/sass/components/cards/_cards.scss      | 36 +++++++++++++++++++
 .../sass/components/disabled/_disabled.scss   | 14 ++++++++
 .../components/flex-group/_flex-group.scss    | 31 ++++++++++++++++
 .../components/flex-inline/_flex-inline.scss  | 18 ++++++++++
 assets/sass/components/stretch/_stretch.scss  | 12 +++++++
 5 files changed, 111 insertions(+)
 create mode 100644 assets/sass/components/cards/_cards.scss
 create mode 100644 assets/sass/components/disabled/_disabled.scss
 create mode 100644 assets/sass/components/flex-group/_flex-group.scss
 create mode 100644 assets/sass/components/flex-inline/_flex-inline.scss
 create mode 100644 assets/sass/components/stretch/_stretch.scss

diff --git a/assets/sass/components/cards/_cards.scss b/assets/sass/components/cards/_cards.scss
new file mode 100644
index 0000000..67ab56c
--- /dev/null
+++ b/assets/sass/components/cards/_cards.scss
@@ -0,0 +1,36 @@
+// Cards
+//
+// A simple cards style.
+
+.cards,
+%cards {
+  @extend %flex-group;
+  // Add vertical rhythm margins.
+  @include margin-block(1);
+}
+
+.card,
+%card {
+  @include padding(.5);
+  border: 1px solid var(--color-border);
+
+  &--highlight {
+    border-color: var(--color-highlight);
+  }
+
+  &--inverted {
+    @extend %link-inverted;
+    background: var(--color-border);
+    color: var(--color-text-bg);
+  }
+
+  > * {
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/assets/sass/components/disabled/_disabled.scss b/assets/sass/components/disabled/_disabled.scss
new file mode 100644
index 0000000..8eb0fc3
--- /dev/null
+++ b/assets/sass/components/disabled/_disabled.scss
@@ -0,0 +1,14 @@
+.disabled,
+%disabled {
+  // Re-set default cursor for disabled elements.
+  cursor: default;
+  color: var(--color-button-disabled);
+
+  &:hover,
+  &:focus,
+  &:active {
+    // Override any link underlines and color changes.
+    color: var(--color-button-disabled);
+    text-decoration: none;
+  }
+}
diff --git a/assets/sass/components/flex-group/_flex-group.scss b/assets/sass/components/flex-group/_flex-group.scss
new file mode 100644
index 0000000..cbb80ed
--- /dev/null
+++ b/assets/sass/components/flex-group/_flex-group.scss
@@ -0,0 +1,31 @@
+.flex-group,
+%flex-group {
+  $gap: 1;
+  @include gap($gap);
+  display: flex;
+  flex-wrap: wrap;
+
+  & > * {
+    flex: 1;
+  }
+
+  &--2 > * {
+    @include flex(2, $gap);
+  }
+
+  &--3 > * {
+    @include flex(3, $gap);
+  }
+
+  &--4 > * {
+    @include flex(4, $gap);
+  }
+
+  &--5 > * {
+    @include flex(5, $gap);
+  }
+
+  &--6 > * {
+    @include flex(6, $gap);
+  }
+}
diff --git a/assets/sass/components/flex-inline/_flex-inline.scss b/assets/sass/components/flex-inline/_flex-inline.scss
new file mode 100644
index 0000000..231b742
--- /dev/null
+++ b/assets/sass/components/flex-inline/_flex-inline.scss
@@ -0,0 +1,18 @@
+.flex-inline,
+%flex-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem;
+  padding: 0;
+  text-align: left;
+
+  @include rtl() {
+    flex-direction: row-reverse;
+    text-align: right;
+  }
+
+  &__item,
+  li {
+    list-style: none;
+  }
+}
diff --git a/assets/sass/components/stretch/_stretch.scss b/assets/sass/components/stretch/_stretch.scss
new file mode 100644
index 0000000..8a22de9
--- /dev/null
+++ b/assets/sass/components/stretch/_stretch.scss
@@ -0,0 +1,12 @@
+// Stretch content to the page edge.
+//
+// Requeried: Set max-page-width to a larger value than max-content-width.
+
+.stretch,
+%stretch {
+  width: 100%;
+
+  .main & {
+    max-width: none;
+  }
+}