@ngx-performance-ui/ui/assets/main.css

Ngx Performance UI - UI

/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop

$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1em = 16px
*/
.fade-in-top {
  animation: fadeInTop 0.5s ease-in-out; }

.fade-out-top {
  animation: fadeOutTop 0.5s ease-in-out; }

.move-in-top {
  animation: moveInTop 0.5s ease-in-out; }

.move-out-top {
  animation: moveOutTop 0.5s ease-in-out; }

.expand-top {
  animation: expandTop 0.3s ease-in-out; }

.collapse-top {
  animation: collapseTop 0.3s ease-in-out; }

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem); }
  80% {
    transform: translateX(1rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem); }
  80% {
    transform: translateX(-1rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

@keyframes fadeInTop {
  from {
    transform: translateY(-5px);
    opacity: 0; }
  to {
    transform: translateY(5px);
    opacity: 1; } }

@keyframes fadeOutTop {
  to {
    transform: translateY(-5px);
    opacity: 0; } }

@keyframes moveInTop {
  from {
    transform: translateY(-3rem);
    opacity: 0; }
  to {
    transform: translateY(0.5rem);
    opacity: 1; } }

@keyframes moveOutTop {
  to {
    transform: translateY(-3rem);
    opacity: 0; } }

@keyframes expandTop {
  0% {
    transform: translateY(-3rem);
    height: 0%;
    overflow: hidden; }
  100% {
    transform: translate(0);
    height: 100%;
    overflow: hidden; } }

@keyframes collapseTop {
  0% {
    transform: translate(0);
    height: 100%;
    overflow: hidden; }
  100% {
    transform: translateY(-3rem);
    height: 0%;
    overflow: hidden; } }

@media only screen and (max-width: 75em) {
  html {
    font-size: 75%; } }

@media only screen and (max-width: 56.25em) {
  html {
    font-size: 90%; } }

@media only screen and (min-width: 112.5em) {
  html {
    font-size: 100%; } }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

a {
  cursor: pointer; }

.p-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block; }

.autocomplete-container {
  position: relative; }
  .autocomplete-container .list-group {
    position: absolute;
    width: 100%; }
  .autocomplete-container .fa-times {
    position: absolute;
    top: 14px;
    right: 10px;
    font-size: 10px;
    cursor: pointer; }

.ngx-datepicker-calendar-container {
  z-index: 2000; }
  .ngx-datepicker-calendar-container.ngx-datepicker-position-bottom-right {
    top: 0 !important; }
  .ngx-datepicker-calendar-container.ngx-datepicker-position-bottom-left {
    top: 0 !important; }

.datepicker-container .fa-times {
  position: absolute;
  top: 14px;
  right: 48px;
  font-size: 10px;
  cursor: pointer;
  z-index: 4; }

.datepicker-container .input-group-prepend {
  cursor: pointer; }

.modal {
  background-color: rgba(0, 0, 0, 0.6); }

.toast-container {
  position: fixed;
  z-index: 999999;
  top: 12px;
  right: 12px;
  width: 280px;
  max-width: 320px; }
  .toast-container .toaster {
    opacity: 1; }
    .toast-container .toaster .header {
      width: 100%;
      border-bottom: solid 1px #f7f7f7;
      font-size: 1.25rem; }
      .toast-container .toaster .header .icon {
        display: inline-block;
        width: 30px;
        height: 30px; }
      .toast-container .toaster .header .alert-heading {
        font-weight: 600;
        word-break: break-all; }
    .toast-container .toaster .body {
      padding: 10px; }
  .toast-container .alert-dismisable {
    padding-right: 1rem; }

.tooltip {
  display: block;
  pointer-events: none; }

.bs-tooltip-top .arrow,
.bs-tooltip-bottom .arrow {
  left: 50%;
  transform: translateX(-50%); }

.bs-tooltip-left .arrow,
.bs-tooltip-right .arrow {
  top: 50%;
  transform: translateY(-50%); }