mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Move bootstrap overrides to shlink-frontend-kit
This commit is contained in:
Alejandro Celaya
parent
914efc6a64
commit
8decceaa38
2 changed files with 215 additions and 217 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
217
src/index.scss
217
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue