Relocate stylesheets to their proper component

shlink-web-component/src/Main.scss

@@ -0,0 +1,37 @@
+@import '@shlinkio/shlink-frontend-kit/base';
+
+.shlink-layout__swipeable {
+  height: 100%;
+}
+
+.shlink-layout__swipeable-inner {
+  height: 100%;
+}
+
+.shlink-layout__burger-icon {
+  display: none;
+  transition: color 300ms;
+  position: fixed;
+  top: 18px;
+  z-index: 1035;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: rgb(255 255 255 / .5);
+
+  @media (max-width: $smMax) {
+    display: inline-block;
+  }
+}
+
+.shlink-layout__burger-icon--active {
+  color: white;
+}
+
+.shlink-layout__container.shlink-layout__container {
+  padding: 20px 0 0;
+  min-height: 100%;
+
+  @media (min-width: $mdMin) {
+    padding: 30px 0 0 $asideMenuWidth;
+  }
+}

shlink-web-component/src/Main.tsx

@@ -9,7 +9,7 @@ import { AsideMenu } from './common/AsideMenu';
 import { useFeature } from './utils/features';
 import { useSwipeable } from './utils/helpers/hooks';
 import { useRoutesPrefix } from './utils/routesPrefix';
-import './utils/StickyCardPaginator.scss';
+import './Main.scss';
 
 export type MainProps = {
   createNotFound?: (nonPrefixedHomePath: string) => ReactNode;
@@ -41,7 +41,7 @@ export const Main = (
   useEffect(() => hideSidebar(), [location]);
 
   const addDomainVisitsRoute = useFeature('domainVisits');
-  const burgerClasses = classNames('menu-layout__burger-icon', { 'menu-layout__burger-icon--active': sidebarVisible });
+  const burgerClasses = classNames('shlink-layout__burger-icon', { 'shlink-layout__burger-icon--active': sidebarVisible });
   const swipeableProps = useSwipeable(showSidebar, hideSidebar);
 
   // FIXME Check if this works when not currently wrapped in a router
@@ -50,10 +50,10 @@ export const Main = (
     <Wrapper {...props}>
       <FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
 
-      <div {...swipeableProps} className="menu-layout__swipeable">
-        <div className="menu-layout__swipeable-inner">
+      <div {...swipeableProps} className="shlink-layout__swipeable">
+        <div className="shlink-layout__swipeable-inner">
           <AsideMenu routePrefix={routesPrefix} showOnMobile={sidebarVisible} />
-          <div className="menu-layout__container" onClick={() => hideSidebar()}>
+          <div className="shlink-layout__container" onClick={() => hideSidebar()}>
             <div className="container-xl">
               <Routes>
                 <Route index element={<Navigate replace to="overview" />} />

shlink-web-component/src/index.scss

@@ -0,0 +1,2 @@
+@import './tags/react-tag-autocomplete';
+@import './utils/StickyCardPaginator.scss';

shlink-web-component/src/tags/react-tag-autocomplete.scss

@@ -0,0 +1,159 @@
+@import '@shlinkio/shlink-frontend-kit/base';
+
+.react-tags {
+  position: relative;
+  padding: 5px 0 0 6px;
+  border-radius: .5rem;
+  background-color: var(--primary-color);
+  border: 1px solid var(--input-border-color);
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+  /* shared font styles */
+  font-size: 1em;
+  line-height: 1.2;
+
+  /* clicking anywhere will focus the input */
+  cursor: text;
+}
+
+.input-group > .react-tags {
+  flex: 1 1 auto;
+  width: 1%;
+  min-width: 0;
+}
+
+.card .react-tags {
+  background-color: var(--input-color);
+}
+
+.react-tags.is-focused {
+  box-shadow: 0 0 0 .2rem rgb(70 150 229 / 25%);
+}
+
+.react-tags__tag {
+  font-size: 100%;
+}
+
+.react-tags__selected {
+  display: inline;
+  vertical-align: 2px;
+}
+
+.react-tags__selected-tag {
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0 6px 6px 0;
+  padding: 6px 8px;
+  border: 1px solid var(--input-border-color);
+  border-radius: .25rem;
+  background: #f1f1f1;
+
+  /* match the font styles */
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.react-tags__selected-tag:after {
+  content: '\2715';
+  color: #aaaaaa;
+  margin-left: 8px;
+}
+
+.react-tags__selected-tag:hover,
+.react-tags__selected-tag:focus {
+  border-color: var(--input-border-color);
+}
+
+.react-tags__search {
+  display: inline-block;
+
+  /* match tag layout */
+  padding: 6px 2px;
+  margin-bottom: 5px;
+
+  /* prevent autoresize overflowing the container */
+  max-width: 100%;
+}
+
+@media screen and (min-width: $smMin) {
+  .react-tags__search {
+    /* this will become the offsetParent for suggestions */
+    position: relative;
+  }
+}
+
+.react-tags__search-input {
+  font-size: 1.25rem;
+  line-height: inherit;
+  color: var(--input-text-color);
+  background-color: inherit;
+
+  /* prevent autoresize overflowing the container */
+  max-width: 100%;
+
+  /* remove styles and layout from this element */
+  margin: 0 0 0 7px;
+  padding: 0;
+  border: 0;
+  outline: none;
+}
+
+.react-tags__search-input::placeholder {
+  color: #6c757d;
+}
+
+.react-tags__search-input::-ms-clear {
+  display: none;
+}
+
+.react-tags__suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+}
+
+@media screen and (min-width: $smMin) {
+  .react-tags__suggestions {
+    width: 240px;
+  }
+}
+
+.react-tags__suggestions ul {
+  margin: 4px -1px;
+  padding: 0;
+  list-style: none;
+  background: var(--primary-color);
+  border: 1px solid var(--border-color);
+  border-radius: .25rem;
+  box-shadow: 0 2px 6px rgb(0 0 0 / .2);
+}
+
+.react-tags__suggestions li {
+  padding: 8px 10px;
+}
+
+.react-tags__suggestions li:not(:last-child) {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.react-tags__suggestions li mark {
+  text-decoration: underline;
+  background: none;
+  font-weight: 600;
+}
+
+.react-tags__suggestions li:hover {
+  cursor: pointer;
+  background-color: var(--active-color);
+}
+
+.react-tags__suggestions li.is-active {
+  background-color: var(--active-color);
+}
+
+.react-tags__suggestions li.is-disabled {
+  opacity: .5;
+  cursor: auto;
+}