shlink-web-client/src/index.scss

240 lines
3.9 KiB
SCSS
Raw Normal View History

2021-02-19 22:18:02 +03:00
/* stylelint-disable no-descending-specificity */
@import './utils/base';
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import './common/react-tag-autocomplete.scss';
@import './theme/theme';
@import './utils/table/ResponsiveTable';
2021-09-25 10:34:38 +03:00
@import './utils/StickyCardPaginator';
* {
outline: none !important;
}
:root {
scroll-behavior: auto;
}
2018-08-14 21:28:46 +03:00
html,
body,
#root {
height: 100%;
background: var(--secondary-color);
color: var(--text-color);
}
a,
.btn-link {
2022-03-05 16:04:01 +03:00
text-decoration: none;
}
2022-03-07 10:46:43 +03:00
a:not(.nav-link):not(.navbar-brand):not(.page-link):hover,
.btn-link:hover {
2022-03-05 16:04:01 +03:00
text-decoration: underline;
}
.bg-main {
background-color: $mainColor !important;
}
.card-body,
.card-header,
.list-group-item {
background-color: transparent;
}
.card-footer {
background-color: var(--primary-color-alfa);
}
2020-12-12 12:56:10 +03:00
.card {
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
background-color: var(--primary-color);
border-color: var(--border-color);
2020-12-12 12:56:10 +03:00
}
.list-group {
background-color: var(--primary-color);
}
.modal-content,
.page-link,
.page-item.disabled .page-link,
.dropdown-menu {
background-color: var(--primary-color);
2020-12-12 12:56:10 +03:00
}
.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,
2021-02-27 10:23:06 +03:00
.list-group-item,
2021-03-05 17:44:15 +03:00
.modal-content,
hr {
border-color: var(--border-color);
}
.table-bordered,
.table-bordered thead th,
.table-bordered thead td {
border-color: var(--table-border-color);
}
2022-03-07 10:46:43 +03:00
.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;
2020-12-12 12:56:10 +03:00
}
2020-12-14 20:39:19 +03:00
.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%;
}
2022-03-07 10:46:43 +03:00
.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;
2022-03-07 10:46:43 +03:00
}
.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;
}
2018-07-20 23:32:50 +03:00
2021-10-17 20:13:06 +03:00
.dropdown-item--danger.dropdown-item--danger {
color: $dangerColor;
&:hover,
&:active,
&.active {
color: $dangerColor !important;
}
}
2018-08-11 19:27:51 +03:00
.badge-main {
2020-09-06 11:17:46 +03:00
color: #ffffff;
background-color: var(--brand-color);
2018-08-11 19:27:51 +03:00
}
2018-08-11 22:41:01 +03:00
2021-02-27 10:23:06 +03:00
.close,
.close:hover,
.table,
.table-hover > tbody > tr:hover > * {
color: var(--text-color);
}
.btn-close {
filter: var(--btn-close-filter);
}
2020-12-12 18:55:01 +03:00
.table-hover tbody tr:hover {
background-color: var(--secondary-color);
2020-12-12 18:55:01 +03:00
}
.form-control,
.form-control:focus {
background-color: var(--primary-color);
border-color: var(--input-border-color);
2021-02-27 10:23:06 +03:00
color: var(--input-text-color);
2020-10-03 12:22:21 +03:00
}
.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);
}
2021-02-19 22:18:02 +03:00
.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;
2019-03-09 15:20:43 +03:00
}
2020-01-12 14:08:26 +03:00
.pointer {
cursor: pointer;
}
.text-ellipsis {
text-overflow: ellipsis;
overflow: hidden;
2020-01-12 14:08:26 +03:00
white-space: nowrap;
}
.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;
}
}