astuto/app/javascript/stylesheets/general/_components.scss

a {
  color: $astuto-black;

  &:hover { color: inherit; }
}

.card {
  @extend .card;

  box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.15);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);

  color: $astuto-black;

  padding: 8px;
}

.card3D {
  @extend
    .card;

  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);

  &:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  }
}

.multiColumnContainer {
  @extend
    .d-flex,
    .justify-content-between,
    .align-items-start;

  flex-direction: row;

  @include media-breakpoint-down(sm) {
    flex-direction: column;

    .postAndCommentsContainer { width: 100%; }
  }
}

.multiRowContent {
  @extend
    .flex-grow-1,
    .w-100;
}

.content {
  @extend
    .card,
    .flex-grow-1,
    .p-3,
    .mb-3;
}

.sidebar {
  position: sticky;
  top: 79px;

  .sidebarCard {
    @extend
      .card,
      .d-flex,
      .flex-column,
      .justify-content-start,
      .align-items-center,
      .flex-grow-0,
      .flex-shrink-0,
      .mb-3,
      .p-2;

    width: 250px;
    margin-right: 16px;
  }
}

.verticalNavigation {
  @extend
    .nav,
    .flex-column,
    .nav-pills,
    .text-center,
    .align-self-stretch;

  .nav-link.active {
    background-color: $astuto-black;
  }
}

.drag-zone {
  @extend
    .align-self-center,
    .pl-4,
    .pr-4,
    .pt-1,
    .pb-1;

  cursor: grab;

  &.drag-zone-disabled {
    cursor: not-allowed;

    &:active { cursor: not-allowed; }
  }

  &:active { cursor: grabbing; }
}


@include media-breakpoint-down(sm) {
  .sidebar {
    position: relative;
    width: 100%;
    top: 0;

    .sidebarCard { width: 100%; }
  }
}

.badge {
  @extend
    .badge,
    .badge-pill,
    .p-2;

  font-size: 13px;
}

.badgeLight {
  @extend .badge-light;

  background-color: $astuto-grey;
}

@media (prefers-color-scheme: dark) {
  .card {
    color: white;
    background-color: $astuto-black;
  }

  .alert-primary {
    background-color: #00bc8c;
    border-color: #fff;
  }

  .alert-danger {
    background-color: #E74C3C;
    border-color: #fff;
  }
}