shlink-web-client/src/index.scss

@import './utils/base';
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import './common/react-tagsinput.scss';

html,
body,
#root {
  height: 100%;
  background: $lightColor;
}

* {
  outline: none !important;
}

.bg-main {
  background-color: $mainColor !important;
}

.card {
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.card-header {
  background-color: white;
}

.card-footer {
  background-color: rgba(255, 255, 255, .5);
}

.container-xl {
  @media (min-width: $xlgMin) {
    max-width: 1320px;
  }

  @media (max-width: $smMax) {
    padding-right: 0;
    padding-left: 0;
  }
}

.dropdown-item:not(:disabled) {
  cursor: pointer;
}

.dropdown-item.active:not(:disabled),
.dropdown-item:active:not(:disabled) {
  background-color: $lightGrey !important;
  color: inherit !important;
}

.badge-main {
  color: #ffffff;
  background-color: $mainColor;
}

.table-hover tbody tr:hover {
  background-color: $lightColor;
}

.react-datepicker__input-container,
.react-datepicker-wrapper {
  display: block !important;
}

.react-datepicker-popper {
  z-index: 2;
}

.navbar-brand {
  @media (max-width: $smMax) {
    margin: 0 auto !important;
  }
}

.pagination .page-link {
  cursor: pointer;
}

.indivisible {
  white-space: nowrap;
}

.pointer {
  cursor: pointer;
}

.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.react-datepicker__day--keyboard-selected {
  background-color: $mainColor;

  &:hover {
    background-color: darken($mainColor, 12%);
  }
}

.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;
  }
}