CSS for tags *ough*

components/01_Atoms/button/_button.scss

@@ -6,6 +6,7 @@
     border-radius: 2px;
     font-weight: bold;
     cursor: pointer;
+    white-space: nowrap;
 
     &:active {
         background-color: $-wine-red;
@@ -15,6 +16,7 @@
     &--cancel {
         background-color: $-grey;
         color: $-almost-white;
+
         &:active {
             color: $-grey;
             background-color: $-almost-white;

components/01_Atoms/input/_input.scss

@@ -5,6 +5,22 @@
     margin-bottom: -$-margin-bottom;
     padding: 10px 0;
 
+    &--tagging {
+
+        .LP-Button {
+            height: 53px;
+        }
+
+        .LP-Input__Field {
+            min-height: 36px;
+            height: max-content;
+            font-family: $-primary-sans-serif-font;
+            font-size: 1em;
+            padding: 0;
+            padding-left: 8px;
+        }
+    }
+
     .LP-Input__Field {
         border: none;
         border-bottom: 1px solid $-grey;
@@ -12,7 +28,10 @@
         margin-bottom: $-margin-bottom;
         width: 100%;
 
-        &:focus, &:active, &:invalid{
+        &:focus,
+        &:active,
+        &:invalid,
+        &--active {
             margin-bottom: $-margin-bottom - 1px;
             border-bottom: 2px solid $-wine-red;
             background-color: $-almost-white;
@@ -67,7 +86,9 @@
     }
 
     &--disabled {
-        .LP-Input__Field, .LP-Input__Field:disabled{
+
+        .LP-Input__Field,
+        .LP-Input__Field:disabled {
             background-color: transparent;
             border-bottom: 1px dashed $-grey;
             cursor: not-allowed;
@@ -76,7 +97,8 @@
                 color: red;
             }
 
-            &:focus, &:active{
+            &:focus,
+            &:active {
                 margin-bottom: $-margin-bottom;
                 border-radius: 0;
             }

components/01_Atoms/tag/_tag.scss

@@ -1,9 +1,13 @@
 .LP-Tag {
     padding: 8px 14px;
-    background-color: #D7CEC7;
+    background-color: $-beige;
     border-radius: 2px;
     width: max-content;
 
+    &:hover {
+        background-color: #bdbdbd;
+    }
+
     .LP-Paragraph {
         padding: 0;
         margin: 0;

components/02_Molecules/tagList/_tagList.scss

@@ -7,7 +7,7 @@
         margin: 0;
 
         .LP-TagList__Item {
-            margin: 6px;
+            margin: 3px;
         }
     }
 }

components/03_Organisms/form/_form.scss

@@ -1,13 +1,31 @@
 .LP-Form {
 
+    &--tagging {
+        margin-top: 25px;
+
+        div.LP-Form__Composition {
+            gap: 25px;
+        }
+    }
+
     &--inline {
-		.LP-Form__Legend, .LP-Input__Label {
+
+        .LP-Form__Legend,
+        .LP-Input__Label {
             display: none;
         }
 
         .LP-Form__Button {
             @include RV-FlexRow__Item--fixedSize(max-content);
         }
+
+        fieldset.LP-Form__Fieldset {
+            max-width: unset;
+        }
+
+        div.LP-Form__Composition {
+            padding: 0;
+        }
     }
 
     &:not(.LP-Form--inline) {

components/_tagify.scss

@@ -0,0 +1,80 @@
+.tagify {
+    @extend .LP-Input__Field;
+
+    &+input,
+    &+textarea {
+        display: none;
+    }
+
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+
+.tagify--focus {
+    @extend .LP-Input__Field--active
+}
+
+.tagify__tag {
+    @extend .LP-Tag;
+    @extend .LP-TagList__Item;
+    background-color: #bdbdbd;
+
+    &:hover {
+        background-color: #e9e9e9;
+    }
+
+    display: inline-flex;
+    cursor: default;
+    transition: .13s ease-out;
+    height: max-content;
+
+    align-items: center;
+    gap: 3px;
+}
+
+.tagify__input {
+    flex-grow: 1;
+    display: inline-block;
+    min-width: 110px;
+    margin: 5px;
+    line-height: inherit;
+    position: relative;
+    white-space: pre-wrap;
+    margin-left: 15px;
+}
+
+.tagify__tag__removeBtn {
+    order: 5;
+    cursor: pointer;
+    font: 1em/1 Arial;
+    transition: .2s ease-out;
+    color: $-wine-red;
+}
+
+.tagify__tag__removeBtn::after {
+    content: "\00D7"
+}
+
+.tagify__tag__removeBtn:hover {
+    color: $-grey;
+}
+
+.tagify__tag__removeBtn:hover+div>span {
+    opacity: .5
+}
+
+.tagify__tag__removeBtn:hover+div::before {
+    box-shadow: 0 0 0 1.1em rgba(211, 148, 148, .3) inset !important;
+    box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg) inset !important;
+    transition: .2s
+}
+
+.tagify__tag--loading .tagify__tag__removeBtn {
+    display: none
+}
+
+.tagify[readonly]:not(.tagify--mix) .tagify__tag__removeBtn {
+    display: none
+}

components/main.scss

@@ -5,8 +5,7 @@
     src:
         url('fonts/Crimson/CrimsonText-Regular.ttf'),
         url('fonts/Crimson/CrimsonText-Bold.ttf'),
-        url('fonts/Crimson/CrimsonText-Italic.ttf')
+        url('fonts/Crimson/CrimsonText-Italic.ttf');
-        ;
 }
 
 @font-face {
@@ -14,8 +13,7 @@
     src:
         url('fonts/Montserrat/Montserrat-Regular.ttf'),
         url('fonts/Montserrat/Montserrat-Bold.ttf'),
-        url('fonts/Montserrat/Montserrat-Italic.ttf')
+        url('fonts/Montserrat/Montserrat-Italic.ttf');
-        ;
 }
 
 $-beige: #D7CEC7;
@@ -24,9 +22,15 @@ $-wine-red: #76323F;
 $-light-brown: #C09F80;
 $-almost-white: #f9f9f9;
 
-$-primary-sans-serif-font: Montserrat, Helvetica, sans-serif;
+$-primary-sans-serif-font: Montserrat,
-$-primary-serif-font: Crimson, Times, serif;
+Helvetica,
-$-primary-sans-serif-accent-font: Roboto, Arial, sans-serif;
+sans-serif;
+$-primary-serif-font: Crimson,
+Times,
+serif;
+$-primary-sans-serif-accent-font: Roboto,
+Arial,
+sans-serif;
 
 $-viewport-extra-small: 450px;
 $-viewport-small: 650px;
@@ -162,3 +166,5 @@ body{
 @import '03_Organisms/organisms';
 @import '04_Templates/templates';
 @import '05_Pages/pages';
+
+@import './tagify';

public/main.css

@@ -574,7 +574,8 @@ body {
   padding: 8px 14px;
   border-radius: 2px;
   font-weight: bold;
-  cursor: pointer; }
+  cursor: pointer;
+  white-space: nowrap; }
   .LP-Button:active {
     background-color: #76323F;
     color: #f9f9f9; }
@@ -600,19 +601,28 @@ body {
   flex-direction: column;
   margin-bottom: -30px;
   padding: 10px 0; }
-  .LP-Input .LP-Input__Field {
+  .LP-Input--tagging .LP-Button {
+    height: 53px; }
+  .LP-Input--tagging .LP-Input__Field, .LP-Input--tagging .tagify {
+    min-height: 36px;
+    height: max-content;
+    font-family: Montserrat, Helvetica, sans-serif;
+    font-size: 1em;
+    padding: 0;
+    padding-left: 8px; }
+  .LP-Input .LP-Input__Field, .LP-Input .tagify {
     border: none;
     border-bottom: 1px solid #565656;
     padding: 8px 0;
     margin-bottom: 30px;
     width: 100%; }
-    .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid {
+    .LP-Input .LP-Input__Field:focus, .LP-Input .tagify:focus, .LP-Input .LP-Input__Field:active, .LP-Input .tagify:active, .LP-Input .LP-Input__Field:invalid, .LP-Input .tagify:invalid, .LP-Input .LP-Input__Field--active, .LP-Input .tagify--focus {
       margin-bottom: 29px;
       border-bottom: 2px solid #76323F;
       background-color: #f9f9f9;
       border-radius: 3px 3px 0 0;
       box-shadow: none; }
-    .LP-Input .LP-Input__Field[type=submit] {
+    .LP-Input .LP-Input__Field[type=submit], .LP-Input .tagify[type=submit] {
       background-color: #C09F80;
       color: #565656;
       border: none;
@@ -620,7 +630,7 @@ body {
       border-radius: 2px;
       font-weight: bold;
       cursor: pointer; }
-      .LP-Input .LP-Input__Field[type=submit]:active {
+      .LP-Input .LP-Input__Field[type=submit]:active, .LP-Input .tagify[type=submit]:active {
         background-color: #76323F;
         color: #f9f9f9; }
   .LP-Input .LP-Input__Label {
@@ -636,22 +646,30 @@ body {
     position: relative;
     top: -30px;
     overflow: hidden; }
-  .LP-Input--error .LP-Input__Field {
+  .LP-Input--error .LP-Input__Field, .LP-Input--error .tagify {
     margin-bottom: 25px;
     border-bottom: 2px solid #76323F;
     margin-bottom: 29px; }
   .LP-Input--error .LP-Input__Message {
     color: #76323F; }
-  .LP-Input--disabled .LP-Input__Field, .LP-Input--disabled .LP-Input__Field:disabled {
+  .LP-Input--disabled .LP-Input__Field, .LP-Input--disabled .tagify,
+  .LP-Input--disabled .LP-Input__Field:disabled,
+  .LP-Input--disabled .tagify:disabled {
     background-color: transparent;
     border-bottom: 1px dashed #565656;
     cursor: not-allowed; }
-    label + .LP-Input--disabled .LP-Input__Field, label + .LP-Input--disabled .LP-Input__Field:disabled {
+    label + .LP-Input--disabled .LP-Input__Field, label + .LP-Input--disabled .tagify, label + .LP-Input--disabled .LP-Input__Field:disabled, label + .LP-Input--disabled .tagify:disabled {
       color: red; }
-    .LP-Input--disabled .LP-Input__Field:focus, .LP-Input--disabled .LP-Input__Field:active, .LP-Input--disabled .LP-Input__Field:disabled:focus, .LP-Input--disabled .LP-Input__Field:disabled:active {
+    .LP-Input--disabled .LP-Input__Field:focus, .LP-Input--disabled .tagify:focus, .LP-Input--disabled .LP-Input__Field:active, .LP-Input--disabled .tagify:active,
+    .LP-Input--disabled .LP-Input__Field:disabled:focus,
+    .LP-Input--disabled .tagify:disabled:focus,
+    .LP-Input--disabled .LP-Input__Field:disabled:active,
+    .LP-Input--disabled .tagify:disabled:active {
       margin-bottom: 30px;
       border-radius: 0; }
-    .LP-Input--disabled .LP-Input__Field ~ .LP-Input__Message, .LP-Input--disabled .LP-Input__Field:disabled ~ .LP-Input__Message {
+    .LP-Input--disabled .LP-Input__Field ~ .LP-Input__Message, .LP-Input--disabled .tagify ~ .LP-Input__Message,
+    .LP-Input--disabled .LP-Input__Field:disabled ~ .LP-Input__Message,
+    .LP-Input--disabled .tagify:disabled ~ .LP-Input__Message {
       visibility: hidden; }
   .LP-Input--disabled .LP-Input__Label {
     color: #565656; }
@@ -670,12 +688,14 @@ body {
   width: auto;
   object-fit: contain; }
 
-.LP-Tag {
+.LP-Tag, .tagify__tag {
   padding: 8px 14px;
   background-color: #D7CEC7;
   border-radius: 2px;
   width: max-content; }
-  .LP-Tag .LP-Paragraph {
+  .LP-Tag:hover, .tagify__tag:hover {
+    background-color: #bdbdbd; }
+  .LP-Tag .LP-Paragraph, .tagify__tag .LP-Paragraph {
     padding: 0;
     margin: 0;
     font-family: Montserrat, Helvetica, sans-serif;
@@ -861,8 +881,8 @@ body {
   flex-wrap: wrap;
   padding: 0;
   margin: 0; }
-  .LP-TagList .LP-TagList__List .LP-TagList__Item {
+  .LP-TagList .LP-TagList__List .LP-TagList__Item, .LP-TagList .LP-TagList__List .tagify__tag {
-    margin: 6px; }
+    margin: 3px; }
 
 .LP-Menu {
   border-left: 1px solid #C09F80; }
@@ -1189,7 +1209,13 @@ body {
         .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
           background-color: inherit; }
 
-.LP-Form--inline .LP-Form__Legend, .LP-Form--inline .LP-Input__Label {
+.LP-Form--tagging {
+  margin-top: 25px; }
+  .LP-Form--tagging div.LP-Form__Composition {
+    gap: 25px; }
+
+.LP-Form--inline .LP-Form__Legend,
+.LP-Form--inline .LP-Input__Label {
   display: none; }
 
 .LP-Form--inline .LP-Form__Button {
@@ -1198,6 +1224,12 @@ body {
   width: min-content;
   flex-basis: max-content; }
 
+.LP-Form--inline fieldset.LP-Form__Fieldset {
+  max-width: unset; }
+
+.LP-Form--inline div.LP-Form__Composition {
+  padding: 0; }
+
 @media (max-width: 450px) {
   .LP-Form:not(.LP-Form--inline) .LP-Form__Composition {
     flex-wrap: wrap; } }
@@ -1411,3 +1443,60 @@ body {
     margin: 0;
     padding: 0;
     margin-bottom: 25px; } }
+
+.tagify {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap; }
+  .tagify + input,
+  .tagify + textarea {
+    display: none; }
+
+.tagify__tag {
+  background-color: #bdbdbd;
+  display: inline-flex;
+  cursor: default;
+  transition: .13s ease-out;
+  height: max-content;
+  align-items: center;
+  gap: 3px; }
+  .tagify__tag:hover {
+    background-color: #e9e9e9; }
+
+.tagify__input {
+  flex-grow: 1;
+  display: inline-block;
+  min-width: 110px;
+  margin: 5px;
+  line-height: inherit;
+  position: relative;
+  white-space: pre-wrap;
+  margin-left: 15px; }
+
+.tagify__tag__removeBtn {
+  order: 5;
+  cursor: pointer;
+  font: 1em/1 Arial;
+  transition: .2s ease-out;
+  color: #76323F; }
+
+.tagify__tag__removeBtn::after {
+  content: "\00D7"; }
+
+.tagify__tag__removeBtn:hover {
+  color: #565656; }
+
+.tagify__tag__removeBtn:hover + div > span {
+  opacity: .5; }
+
+.tagify__tag__removeBtn:hover + div::before {
+  box-shadow: 0 0 0 1.1em rgba(211, 148, 148, 0.3) inset !important;
+  box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg) inset !important;
+  transition: .2s; }
+
+.tagify__tag--loading .tagify__tag__removeBtn {
+  display: none; }
+
+.tagify[readonly]:not(.tagify--mix) .tagify__tag__removeBtn {
+  display: none; }