astuto/app/javascript/stylesheets/common/_index.scss

.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: $primary-color;

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

// General container for pages with siderbar + main content
.twoColumnsContainer {
  @extend
    .d-flex,
    .justify-content-between,
    .align-items-start;

  flex-direction: row;

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

  // Make the main content full width
  & > div:nth-child(2) {
    @extend
      .flex-grow-1,
      .w-100;
  }
}

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

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

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

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

    width: 280px;
    margin-right: 16px;

    @include media-breakpoint-down(sm) {
      width: 100%;
    }
  }
}

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

  a {
    color: $astuto-grey;
    font-weight: 500;

    &:hover {
      color: $astuto-black;
    }
  }

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

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

  cursor: grab;

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

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

  &:active { cursor: grabbing; }
}

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

  font-size: 13px;
}

.badgeLight {
  @extend .badge-light;

  background-color: $astuto-light-grey;
}

.container {
  max-width: 960px;
}

.smallContainer {
  max-width: 540px;
  margin: 16px auto;
}

.turbolinks-progress-bar {
  background-color: $primary-color;
  height: 2px;
}

.gravatar {
  border-radius: 100%;
}

.checkboxSwitch {
  @extend 
    .custom-control,
    .custom-switch;

  & > input[type="checkbox"] {
    @extend .custom-control-input;
  }

  & > label {
    @extend .custom-control-label;

    &::before {
      transform: scale(1.2);
    }
  }

  & > input:checked ~ label::before {
    background-color: $primary-color !important;
    border-color: $primary-color !important;
  }
}

.selectPicker {
  @extend
    .custom-select;
}

.link {
  cursor: pointer;
  &:hover { text-decoration: underline; }
}