From 18c458d91ca5e7187ffb3615fca8970fc6e4ca65 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Mon, 6 Jun 2022 15:48:53 +0200
Subject: feat: More work on portal

---
 .../src/styles/components/auto-sized-grid.scss     | 56 ++++++++++++++++++++++
 .../src/styles/components/breadcrumbs.scss         | 18 +++++++
 .../src/styles/components/link-card.scss           | 56 ++++++++++++++++++++++
 .../src/styles/components/user-menu.scss           |  8 ++--
 4 files changed, 134 insertions(+), 4 deletions(-)
 create mode 100644 apps/web-shared/src/styles/components/auto-sized-grid.scss
 create mode 100644 apps/web-shared/src/styles/components/breadcrumbs.scss
 create mode 100644 apps/web-shared/src/styles/components/link-card.scss

(limited to 'apps/web-shared/src/styles/components')

diff --git a/apps/web-shared/src/styles/components/auto-sized-grid.scss b/apps/web-shared/src/styles/components/auto-sized-grid.scss
new file mode 100644
index 0000000..a3b1be5
--- /dev/null
+++ b/apps/web-shared/src/styles/components/auto-sized-grid.scss
@@ -0,0 +1,56 @@
+@use '../base' as *;
+
+/* --------------------------------
+
+File#: _1_auto-sized-grid
+Title: Auto Sized Grid
+Descr: A grid layout based on CSS Grid where the columns are automatically created according to a min-width value
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl {
+  display: grid;
+  gap: var(--gap-y, 0px) var(--gap-x, 0px);
+  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr)); // auto add new cols
+}
+
+.grid-auto-xs {
+  --col-min-width: 8rem;
+}
+
+.grid-auto-sm {
+  --col-min-width: 10rem;
+}
+
+.grid-auto-md {
+  --col-min-width: 15rem;
+}
+
+.grid-auto-lg {
+  --col-min-width: 20rem;
+}
+
+.grid-auto-xl {
+  --col-min-width: 25rem;
+}
+
+@each $breakpoint, $value in $breakpoints {
+  @include breakpoint(#{$breakpoint}) {
+    .grid-auto-xs\@#{$breakpoint} {
+      --col-min-width: 8rem;
+    }
+    .grid-auto-sm\@#{$breakpoint} {
+      --col-min-width: 10rem;
+    }
+    .grid-auto-md\@#{$breakpoint} {
+      --col-min-width: 15rem;
+    }
+    .grid-auto-lg\@#{$breakpoint} {
+      --col-min-width: 20rem;
+    }
+    .grid-auto-xl\@#{$breakpoint} {
+      --col-min-width: 25rem;
+    }
+  }
+}
diff --git a/apps/web-shared/src/styles/components/breadcrumbs.scss b/apps/web-shared/src/styles/components/breadcrumbs.scss
new file mode 100644
index 0000000..45bf7c6
--- /dev/null
+++ b/apps/web-shared/src/styles/components/breadcrumbs.scss
@@ -0,0 +1,18 @@
+@use '../base' as *;
+
+/* -------------------------------- 
+
+File#: _1_breadcrumbs
+Title: Breadcrumbs
+Descr: List of links to help the user move within website structure
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.breadcrumbs {}
+
+.breadcrumbs__item {
+  display: inline-block; // flex fallback
+  display: inline-flex;
+  align-items: center;
+}
diff --git a/apps/web-shared/src/styles/components/link-card.scss b/apps/web-shared/src/styles/components/link-card.scss
new file mode 100644
index 0000000..dad4f98
--- /dev/null
+++ b/apps/web-shared/src/styles/components/link-card.scss
@@ -0,0 +1,56 @@
+@use '../base' as *;
+
+/* -------------------------------- 
+
+File#: _1_link-card
+Title: Link Card
+Descr: Link card for app UI
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.link-card {
+  text-decoration: none;
+  color: inherit;
+  box-shadow: var(--inner-glow), var(--shadow-xs);
+
+  &:hover {
+    box-shadow: var(--inner-glow), var(--shadow-sm);
+  }
+}
+
+.link-card__footer {
+  position: relative;
+  overflow: hidden;
+  height: 60px;
+
+  > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  > *:last-child {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+.link-card:hover {
+  .link-card__footer {
+    > *:first-child {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+
+    > *:last-child {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}
diff --git a/apps/web-shared/src/styles/components/user-menu.scss b/apps/web-shared/src/styles/components/user-menu.scss
index 1b5c1d5..416655f 100644
--- a/apps/web-shared/src/styles/components/user-menu.scss
+++ b/apps/web-shared/src/styles/components/user-menu.scss
@@ -42,7 +42,7 @@ Usage: codyhouse.co/license
   width: var(--profile-figure-size);
   height: var(--profile-figure-size);
   position: relative;
-  transition: opacity 0.2s;
+  //transition: opacity 0.2s;
 
   &::after {
     content: '';
@@ -61,7 +61,7 @@ Usage: codyhouse.co/license
     opacity: 0;
     transform: scale(0.8);
 
-    transition: all 0.2s;
+    //transition: all 0.2s;
   }
 }
 
@@ -73,9 +73,9 @@ Usage: codyhouse.co/license
 }
 
 .user-menu__meta {
-  max-width: 100px;
+  //max-width: 100px;
 }
 
 .user-menu__meta-title {
-  transition: color 0.2s;
+  //transition: color 0.2s;
 }
-- 
cgit v1.3