[feature] display icon or letter on link tile

Author: zombieFox

css/auto-suggest.css

@@ -0,0 +1,83 @@
+.auto-suggest {
+  position: relative;
+  z-index: 1;
+  font-size: 1em;
+}
+
+.auto-suggest-list {
+  background-color: rgb(var(--gray-02));
+  margin-top: 0.5em;
+  padding: 1em;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  max-height: 40vh;
+  border-radius: var(--radius);
+  overflow-y: auto;
+  z-index: var(--z-index-auto-suggest-list);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  box-shadow: var(--shadow-large);
+}
+
+.auto-suggest-list-item {
+  flex-basis: 33.3333333333%;
+}
+
+.auto-suggest-list-item:not(:last-child) {
+  margin-bottom: 0;
+}
+
+.auto-suggest-link {
+  padding: 0.5em;
+  border-width: var(--form-input-border);
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--radius);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border-color var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
+}
+
+.auto-suggest-link:link,
+.auto-suggest-link:visited {
+  color: rgb(var(--gray-16));
+  text-decoration: none;
+}
+
+.auto-suggest-link:hover {
+  background-color: rgb(var(--gray-03));
+  color: rgb(var(--form-input-text-hover));
+  outline: none;
+  text-decoration: none;
+  box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-06));
+}
+
+.auto-suggest-link:focus {
+  background-color: rgb(var(--gray-01));
+  color: rgb(var(--form-input-text-focus));
+  outline: none;
+  text-decoration: none;
+  box-shadow: 0 0 0 var(--line-width) rgb(var(--accent)), 0 0 0 calc(var(--line-width) * 2) rgba(var(--accent), 0.25);
+}
+
+.auto-suggest-link:active {
+  color: rgb(var(--style-neutral-text));
+}
+
+.auto-suggest-icon {
+  font-size: 2em;
+}
+
+.auto-suggest-icon-text {
+  color: rgb(var(--gray-08));
+  margin-top: 0.5em;
+  font-size: 0.6em;
+  text-align: center;
+}

css/base.css

@@ -30,14 +30,15 @@
   --button-link-text-active: var(--gray-18);
   --button-link-text-disabled: var(--gray-04);
   --form-input-text: var(--gray-16);
+  --form-input-border: 2;
   --form-input-text-hover: var(--style-neutral-text);
   --form-input-text-focus: var(--style-neutral-text);
-  --form-input-text-disabled: var(--gray-04);
+  --form-input-text-disabled: var(--gray-02);
   --form-input-text-disabled-helper-text: var(--gray-04);
   --form-input-placeholder: var(--gray-06);
   --form-input-placeholder-hover-focus: var(--gray-10);
   --form-input-placeholder-disabled: var(--gray-04);
-  --form-label: var(--gray-16);
+  --form-label: var(--gray-12);
   --form-label-disabled: var(--gray-04);
   --form-checkbox-radio-label: var(--gray-12);
   --form-checkbox-radio-chcked-label: var(--gray-16);
@@ -64,6 +65,7 @@
   --z-index-shade: 6000;
   --z-index-modal: 7000;
   --z-index-menu: 8000;
+  --z-index-auto-suggest-list: 8000;
   --header-shade-color: transparent;
   --header-shade-opacity: none;
   --header-height: 0;
@@ -84,6 +86,12 @@
   --layout-width-gutter: var(--gutter) * 8;
   --menu-border-width: 2px;
   --menu-border: var(--menu-border-width) solid rgb(var(--gray-02));
+  --shadow-small: 0 2px 1px rgba(0, 0, 0, 0.1), 0 3px 2px rgba(0, 0, 0, 0.1);
+  --shadow-medium: 0 4px 10px rgba(0, 0, 0, 0.1), 0 6px 15px rgba(0, 0, 0, 0.1);
+  --shadow-large: 0 4px 10px rgba(0, 0, 0, 0.1), 0 6px 30px rgba(0, 0, 0, 0.1);
+  --shadow-small-inset: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+  --shadow-medium-inset: inset 0 2px 2px rgba(0, 0, 0, 0.1);
+  --shadow-large-inset: inset 0 3px 3px rgba(0, 0, 0, 0.15);
   /* breakpoint reference */
   /* can not be used in @media as of yet */
   --breakpoint-sm: 550px;
@@ -136,10 +144,6 @@ body {
   transition: background-color var(--animation-speed-fast) ease-in-out;
 }
 
-.is-menu-open body {
-  overflow: hidden;
-}
-
 .is-header-alignment-vertical-top body {
   justify-content: flex-start;
 }