[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:000var(--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:000var(--line-width) rgb(var(--accent)),000calc(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:02px1pxrgba(0,0,0,0.1),03px2pxrgba(0,0,0,0.1);
+--shadow-medium:04px10pxrgba(0,0,0,0.1),06px15pxrgba(0,0,0,0.1);
+--shadow-large:04px10pxrgba(0,0,0,0.1),06px30pxrgba(0,0,0,0.1);
+--shadow-small-inset: inset 01px1pxrgba(0,0,0,0.05);
+--shadow-medium-inset: inset 02px2pxrgba(0,0,0,0.1);
+--shadow-large-inset: inset 03px3pxrgba(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-openbody{
-overflow: hidden;
-}
-
 .is-header-alignment-vertical-topbody{
 justify-content: flex-start;
 }