From 8decceaa38d47811957990dc6d437289b94d6edb Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 7 Aug 2023 22:37:19 +0200
Subject: [PATCH] Move bootstrap overrides to shlink-frontend-kit

---
 shlink-frontend-kit/src/index.scss | 215 ++++++++++++++++++++++++++++
 src/index.scss                     | 217 -----------------------------
 2 files changed, 215 insertions(+), 217 deletions(-)

diff --git a/shlink-frontend-kit/src/index.scss b/shlink-frontend-kit/src/index.scss
index 95fb926e..18701bfa 100644
--- a/shlink-frontend-kit/src/index.scss
+++ b/shlink-frontend-kit/src/index.scss
@@ -1,2 +1,217 @@
 @import './utils/ResponsiveTable';
 @import './theme/theme';
+
+a,
+.btn-link {
+  text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-max-pseudo-class */
+a:not(.nav-link):not(.navbar-brand):not(.page-link):not(.highlight-card):not(.btn):not(.dropdown-item):hover,
+.btn-link:hover {
+  text-decoration: underline;
+}
+
+.bg-main {
+  background-color: $mainColor !important;
+}
+
+.bg-warning {
+  color: $lightTextColor;
+}
+
+.card-body,
+.card-header,
+.list-group-item {
+  background-color: transparent;
+}
+
+.card-footer {
+  background-color: var(--primary-color-alfa);
+}
+
+.card {
+  box-shadow: 0 .125rem .25rem rgb(0 0 0 / .075);
+  background-color: var(--primary-color);
+  border-color: var(--border-color);
+}
+
+.list-group {
+  background-color: var(--primary-color);
+}
+
+.modal-content,
+.page-link,
+.page-item.disabled .page-link,
+.dropdown-menu {
+  background-color: var(--primary-color);
+}
+
+.modal-header,
+.modal-footer,
+.card-header,
+.card-footer,
+.table thead th,
+.table th,
+.table td,
+.page-link,
+.page-link:hover,
+.page-item.disabled .page-link,
+.dropdown-divider,
+.dropdown-menu,
+.list-group-item,
+.modal-content,
+hr {
+  border-color: var(--border-color);
+}
+
+.table-bordered,
+.table-bordered thead th,
+.table-bordered thead td {
+  border-color: var(--table-border-color);
+}
+
+.page-link:hover,
+.page-link:focus {
+  background-color: var(--secondary-color);
+}
+
+.page-item.active .page-link {
+  background-color: var(--brand-color);
+  border-color: var(--brand-color);
+}
+
+.pagination .page-link {
+  cursor: pointer;
+}
+
+.container-xl {
+  @media (min-width: $xlgMin) {
+    max-width: 1320px;
+  }
+
+  @media (max-width: $smMax) {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+/* Deprecated. Brought from bootstrap 4 */
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
+.btn-primary,
+.btn-primary:hover,
+.btn-primary:active,
+.btn-primary.active,
+.btn-outline-primary:hover,
+.btn-outline-primary:active,
+.btn-outline-primary.active, {
+  color: #ffffff;
+}
+
+.dropdown-item,
+.dropdown-item-text {
+  color: var(--text-color);
+}
+
+.dropdown-item:not(:disabled) {
+  cursor: pointer;
+}
+
+.dropdown-item:focus:not(:disabled),
+.dropdown-item:hover:not(:disabled),
+.dropdown-item.active:not(:disabled),
+.dropdown-item:active:not(:disabled) {
+  background-color: var(--active-color) !important;
+  color: var(--text-color) !important;
+}
+
+.dropdown-item--danger.dropdown-item--danger {
+  color: $dangerColor;
+
+  &:hover,
+  &:active,
+  &.active {
+    color: $dangerColor !important;
+  }
+}
+
+.badge-main {
+  color: #ffffff;
+  background-color: var(--brand-color);
+}
+
+.close,
+.close:hover,
+.table,
+.table-hover > tbody > tr:hover > *,
+.table-hover > tbody > tr > * {
+  color: var(--text-color);
+}
+
+.btn-close {
+  filter: var(--btn-close-filter);
+}
+
+.table-hover tbody tr:hover {
+  background-color: var(--secondary-color);
+}
+
+.form-control,
+.form-control:focus {
+  background-color: var(--primary-color);
+  border-color: var(--input-border-color);
+  color: var(--input-text-color);
+}
+
+.form-control.disabled,
+.form-control:disabled {
+  background-color: var(--input-disabled-color);
+  cursor: not-allowed;
+}
+
+.card .form-control:not(:disabled),
+.card .form-control:not(:disabled):hover {
+  background-color: var(--input-color);
+}
+
+.table-active,
+.table-active > th,
+.table-active > td {
+  background-color: var(--table-highlight-color) !important;
+}
+
+.navbar-brand {
+  @media (max-width: $smMax) {
+    margin: 0 auto !important;
+  }
+}
+
+.indivisible {
+  white-space: nowrap;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.progress-bar {
+  background-color: $mainColor;
+}
+
+.btn-xs-block {
+  @media (max-width: $xsMax) {
+    width: 100%;
+    display: block;
+  }
+}
+
+.btn-md-block {
+  @media (max-width: $mdMax) {
+    width: 100%;
+    display: block;
+  }
+}
diff --git a/src/index.scss b/src/index.scss
index 13204c5c..3dfcc1b1 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,5 +1,3 @@
-/* stylelint-disable no-descending-specificity */
-
 @import '@shlinkio/shlink-frontend-kit/base';
 @import '@shlinkio/shlink-frontend-kit/index';
 @import '@shlinkio/shlink-web-component/index';
@@ -21,218 +19,3 @@ body,
   background: var(--secondary-color);
   color: var(--text-color);
 }
-
-a,
-.btn-link {
-  text-decoration: none;
-}
-
-/* stylelint-disable-next-line selector-max-pseudo-class */
-a:not(.nav-link):not(.navbar-brand):not(.page-link):not(.highlight-card):not(.btn):not(.dropdown-item):hover,
-.btn-link:hover {
-  text-decoration: underline;
-}
-
-.bg-main {
-  background-color: $mainColor !important;
-}
-
-.bg-warning {
-  color: $lightTextColor;
-}
-
-.card-body,
-.card-header,
-.list-group-item {
-  background-color: transparent;
-}
-
-.card-footer {
-  background-color: var(--primary-color-alfa);
-}
-
-.card {
-  box-shadow: 0 .125rem .25rem rgb(0 0 0 / .075);
-  background-color: var(--primary-color);
-  border-color: var(--border-color);
-}
-
-.list-group {
-  background-color: var(--primary-color);
-}
-
-.modal-content,
-.page-link,
-.page-item.disabled .page-link,
-.dropdown-menu {
-  background-color: var(--primary-color);
-}
-
-.modal-header,
-.modal-footer,
-.card-header,
-.card-footer,
-.table thead th,
-.table th,
-.table td,
-.page-link,
-.page-link:hover,
-.page-item.disabled .page-link,
-.dropdown-divider,
-.dropdown-menu,
-.list-group-item,
-.modal-content,
-hr {
-  border-color: var(--border-color);
-}
-
-.table-bordered,
-.table-bordered thead th,
-.table-bordered thead td {
-  border-color: var(--table-border-color);
-}
-
-.page-link:hover,
-.page-link:focus {
-  background-color: var(--secondary-color);
-}
-
-.page-item.active .page-link {
-  background-color: var(--brand-color);
-  border-color: var(--brand-color);
-}
-
-.pagination .page-link {
-  cursor: pointer;
-}
-
-.container-xl {
-  @media (min-width: $xlgMin) {
-    max-width: 1320px;
-  }
-
-  @media (max-width: $smMax) {
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-
-/* Deprecated. Brought from bootstrap 4 */
-.btn-block {
-  display: block;
-  width: 100%;
-}
-
-.btn-primary,
-.btn-primary:hover,
-.btn-primary:active,
-.btn-primary.active,
-.btn-outline-primary:hover,
-.btn-outline-primary:active,
-.btn-outline-primary.active, {
-  color: #ffffff;
-}
-
-.dropdown-item,
-.dropdown-item-text {
-  color: var(--text-color);
-}
-
-.dropdown-item:not(:disabled) {
-  cursor: pointer;
-}
-
-.dropdown-item:focus:not(:disabled),
-.dropdown-item:hover:not(:disabled),
-.dropdown-item.active:not(:disabled),
-.dropdown-item:active:not(:disabled) {
-  background-color: var(--active-color) !important;
-  color: var(--text-color) !important;
-}
-
-.dropdown-item--danger.dropdown-item--danger {
-  color: $dangerColor;
-
-  &:hover,
-  &:active,
-  &.active {
-    color: $dangerColor !important;
-  }
-}
-
-.badge-main {
-  color: #ffffff;
-  background-color: var(--brand-color);
-}
-
-.close,
-.close:hover,
-.table,
-.table-hover > tbody > tr:hover > *,
-.table-hover > tbody > tr > * {
-  color: var(--text-color);
-}
-
-.btn-close {
-  filter: var(--btn-close-filter);
-}
-
-.table-hover tbody tr:hover {
-  background-color: var(--secondary-color);
-}
-
-.form-control,
-.form-control:focus {
-  background-color: var(--primary-color);
-  border-color: var(--input-border-color);
-  color: var(--input-text-color);
-}
-
-.form-control.disabled,
-.form-control:disabled {
-  background-color: var(--input-disabled-color);
-  cursor: not-allowed;
-}
-
-.card .form-control:not(:disabled),
-.card .form-control:not(:disabled):hover {
-  background-color: var(--input-color);
-}
-
-.table-active,
-.table-active > th,
-.table-active > td {
-  background-color: var(--table-highlight-color) !important;
-}
-
-.navbar-brand {
-  @media (max-width: $smMax) {
-    margin: 0 auto !important;
-  }
-}
-
-.indivisible {
-  white-space: nowrap;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.progress-bar {
-  background-color: $mainColor;
-}
-
-.btn-xs-block {
-  @media (max-width: $xsMax) {
-    width: 100%;
-    display: block;
-  }
-}
-
-.btn-md-block {
-  @media (max-width: $mdMax) {
-    width: 100%;
-    display: block;
-  }
-}