spur-tailwind/css/components/weekly-carousel.css

Spur web UI

$active-svg: 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTMwIDIwNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNDE0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMTMwIDBIMHYxNjhsNjUgMzggNjUtMzhWMHoiIGZpbGw9IiNmOGY5ZmQiLz48cGF0aCBkPSJNMTMwIDE2OGwtNjUgMzgtNjUtMzhWMGgxMzB2MTY4em0tMTI5LS41NzRsNjQgMzcuNDE2IDY0LTM3LjQxNlYxSDF2MTY2LjQyNnoiIGZpbGw9IiNiN2I0ZDUiLz48L3N2Zz4=';

.weekly-pagination {
  @apply flex h-17;
  margin-left: -1px;
  margin-right: -1px;
}
.weekly-pagination-item {
  @apply w-1/7;
  flex-basis: 14.2857142%; /* 1/7 for ie11 */
  padding-left: 1px;
  padding-right: 1px;
}
.weekly-pagination-day {
  @apply relative rounded-md border border-filter-grey;
  z-index: 1;
}
.weekly-pagination-day-header {
  @apply bg-filter-grey py-1 font-semibold text-center text-xs;
  word-spacing: 100vw;
}
.weekly-pagination-day-content {
  @apply flex flex-col justify-between items-center h-10;
}
.weekly-pagination-day-icon {
  width: 64px;
  height: 64px;
  flex-basis: 0;
}
.weekly-pagination-day-list {
  @apply text-sm;
}
.weekly-pagination-day-list-item {
  @apply pb-1;
}
.weekly-pagination-fill-rate {
  @apply relative text-center -mt-3;
  transform: scale(0.5);
}
.weekly-pagination-fill-rate-text {
  @apply absolute w-full;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.5rem;
}
.weekly-pagination-item.is-active .weekly-pagination-day {
  @apply border-0 bg-no-repeat;
  background: url($active-svg);
  background-size: 100% 100%;
}
.weekly-pagination-item.is-active .weekly-pagination-day-header {
  @apply bg-blue-jeans text-white rounded-t-md;
}
.weekly-pagination-item.is-active .weekly-pagination-day-content {
  @apply bg-transparent;
  height: 4rem;
}
/* Responsive modifiers */
@screen sm {
  .weekly-pagination {
    @apply -mx-1 h-23;
  }
  .weekly-pagination-item {
    @apply px-1;
  }
  .weekly-pagination-day-header {
    @apply py-1 text-sm;
    word-spacing: unset;
  }
  .weekly-pagination-day-content {
    @apply h-18;
  }
  .weekly-pagination-fill-rate {
    @apply mt-0;
    transform: scale(0.85);
  }
  .weekly-pagination-item.is-active .weekly-pagination-day-content {
    height: 7rem;
  }
  .weekly-pagination-item.is-active .weekly-pagination-fill-rate {
    transform: scale(1);
  }
}
@screen md {
  .weekly-pagination {
    @apply h-33;
  }
  .weekly-pagination-day-content {
    @apply py-2 px-1 h-27;
  }
  .weekly-pagination-item.is-active .weekly-pagination-day-content {
    height: 10rem;
  }
  .weekly-pagination-fill-rate {
    @apply mt-2;
    transform: scale(1);
  }
  .weekly-pagination-item.is-active .weekly-pagination-fill-rate {
    @apply mt-3;
    transform: scale(1.25);
  }
}
@screen xl {
  .weekly-pagination {
    @apply -mx-2 h-43;
  }
  .weekly-pagination-item {
    @apply px-2;
  }
  .weekly-pagination-day-header {
    @apply py-1 text-base;
  }
  .weekly-pagination-day-content {
    @apply h-36; /* 9rem */
  }
  .weekly-pagination-fill-rate {
    @apply mt-auto;
  }
  .weekly-pagination-item.is-active .weekly-pagination-day-content {
    @apply bg-transparent;
    height: 13.5rem;
  }
  .weekly-pagination-item.is-active {
    @apply w-1/5;
    flex-basis: 20%; /* 1/5 for ie11 */
  }
  .weekly-pagination-item.is-active .weekly-pagination-fill-rate {
    @apply mt-auto;
    margin-bottom: 4.25rem;
  }
}