insights4you-jekyll-theme 0.2.0 → 0.4.0

data/_sass/ui/_steps.scss

@@ -0,0 +1,156 @@
+//
+// Steps
+//
+.steps {
+  --#{$prefix}steps-color: #{$steps-color};
+  --#{$prefix}steps-inactive-color: #{$steps-inactive-color};
+  --#{$prefix}steps-dot-size: .5rem;
+  --#{$prefix}steps-border-width: #{$steps-border-width};
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+@each $name, $color in $extra-colors {
+  .steps-#{$name} {
+    --#{$prefix}steps-color: var(--#{$prefix}#{$name});
+
+    &-lt {
+      --#{$prefix}steps-color: var(--#{$prefix}#{$name}-lt);
+    }
+  }
+}
+
+//
+// Step item
+//
+.step-item {
+  position: relative;
+  flex: 1 1 0;
+  min-height: 1rem;
+  margin-top: 0;
+  color: inherit;
+  text-align: center;
+  cursor: default;
+  padding-top: calc(var(--#{$prefix}steps-dot-size));
+
+  @at-root a#{&} {
+    cursor: pointer;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+
+  &:after,
+  &:before {
+    background: var(--#{$prefix}steps-color);
+  }
+
+  &:not(:last-child):after {
+    position: absolute;
+    left: 50%;
+    width: 100%;
+    content: "";
+    transform: translateY(-50%);
+  }
+
+  &:after {
+    top: calc(var(--#{$prefix}steps-dot-size) * .5);
+    height: var(--#{$prefix}steps-border-width);
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    z-index: 1;
+    box-sizing: content-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $border-radius-pill;
+    transform: translateX(-50%);
+    color: var(--#{$prefix}white);
+    width: var(--#{$prefix}steps-dot-size);
+    height: var(--#{$prefix}steps-dot-size);
+  }
+
+  &.active {
+    font-weight: var(--#{$prefix}font-weight-bold);
+
+    &:after {
+      background: var(--#{$prefix}steps-inactive-color);
+    }
+
+    & ~ .step-item {
+      color: var(--#{$prefix}disabled-color);
+
+      &:after,
+      &:before {
+        background: var(--#{$prefix}steps-inactive-color);
+      }
+    }
+  }
+}
+
+//
+// Steps counter
+//
+.steps-counter {
+  --#{$prefix}steps-dot-size: 1.5rem;
+  counter-reset: steps;
+
+  .step-item {
+    counter-increment: steps;
+
+    &:before {
+      content: counter(steps);
+    }
+  }
+}
+
+//
+// Steps vertical
+//
+.steps-vertical {
+  --#{$prefix}steps-dot-offset: 6px;
+  flex-direction: column;
+
+  &.steps-counter {
+    --#{$prefix}steps-dot-offset: -2px;
+  }
+
+  .step-item {
+    text-align: left;
+    padding-top: 0;
+    padding-left: calc(var(--#{$prefix}steps-dot-size) + 1rem);
+    min-height: auto;
+
+    &:not(:first-child) {
+      margin-top: 1rem;
+    }
+
+    &:before {
+      top: var(--#{$prefix}steps-dot-offset);
+      left: 0;
+      transform: translate(0, 0);
+    }
+
+    &:not(:last-child) {
+      &:after {
+        position: absolute;
+        content: '';
+        transform: translateX(-50%);
+        top: var(--#{$prefix}steps-dot-offset);
+        left: calc(var(--#{$prefix}steps-dot-size) * 0.5);
+        width: var(--#{$prefix}steps-border-width);
+        height: calc(100% + 1rem);
+      }
+    }
+  }
+}

data/_sass/ui/_switch-icon.scss

@@ -0,0 +1,211 @@
+.switch-icon {
+  display: inline-block;
+  line-height: 1;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  width: $icon-size;
+  height: $icon-size;
+  vertical-align: bottom;
+  position: relative;
+  cursor: pointer;
+
+  &.disabled {
+    pointer-events: none;
+    opacity: $btn-disabled-opacity;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .switch-icon-a,
+  .switch-icon-b {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .switch-icon-a {
+    opacity: 1;
+  }
+
+  .switch-icon-b {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+
+  &.active {
+    .switch-icon-a {
+      opacity: 0;
+    }
+
+    .switch-icon-b {
+      opacity: 1;
+    }
+  }
+}
+
+// Fade variant
+.switch-icon-fade {
+  .switch-icon-a,
+  .switch-icon-b {
+    @include transition(opacity .5s);
+  }
+}
+
+// Scale variant
+.switch-icon-scale {
+  .switch-icon-a,
+  .switch-icon-b {
+    @include transition(opacity .5s, transform .0s .5s);
+  }
+
+  .switch-icon-b {
+    transform: scale(1.5);
+  }
+
+  &.active {
+    .switch-icon-a,
+    .switch-icon-b {
+      @include transition(opacity .0s, transform .5s);
+    }
+
+    .switch-icon-b {
+      transform: scale(1);
+    }
+  }
+}
+
+// Flip variant
+.switch-icon-flip {
+  perspective: 10em;
+
+  .switch-icon-a,
+  .switch-icon-b {
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+    @include transition(opacity 0s .2s, transform .4s ease-in-out);
+  }
+
+  .switch-icon-a {
+    opacity: 1;
+    transform: rotateY(0deg);
+  }
+
+  .switch-icon-b {
+    opacity: 1;
+    transform: rotateY(-180deg);
+  }
+
+  &.active {
+    .switch-icon-a {
+      opacity: 1;
+      transform: rotateY(180deg);
+    }
+
+    .switch-icon-b {
+      opacity: 1;
+      transform: rotateY(0deg);
+    }
+  }
+}
+
+// Slide variant
+.switch-icon-slide-up,
+.switch-icon-slide-left,
+.switch-icon-slide-right,
+.switch-icon-slide-down {
+  overflow: hidden;
+
+  .switch-icon-a,
+  .switch-icon-b {
+    @include transition(opacity $transition-time, transform $transition-time);
+  }
+
+  .switch-icon-a {
+    transform: translateY(0);
+  }
+
+  .switch-icon-b {
+    transform: translateY(100%);
+  }
+
+  &.active {
+    .switch-icon-a {
+      transform: translateY(-100%);
+    }
+
+    .switch-icon-b {
+      transform: translateY(0);
+    }
+  }
+}
+
+.switch-icon-slide-left {
+  .switch-icon-a {
+    transform: translateX(0);
+  }
+
+  .switch-icon-b {
+    transform: translateX(100%);
+  }
+
+  &.active {
+    .switch-icon-a {
+      transform: translateX(-100%);
+    }
+
+    .switch-icon-b {
+      transform: translateX(0);
+    }
+  }
+}
+
+.switch-icon-slide-right {
+  .switch-icon-a {
+    transform: translateX(0);
+  }
+
+  .switch-icon-b {
+    transform: translateX(-100%);
+  }
+
+  &.active {
+    .switch-icon-a {
+      transform: translateX(100%);
+    }
+
+    .switch-icon-b {
+      transform: translateX(0);
+    }
+  }
+}
+
+.switch-icon-slide-down {
+  .switch-icon-a {
+    transform: translateY(0);
+  }
+
+  .switch-icon-b {
+    transform: translateY(-100%);
+  }
+
+  &.active {
+    .switch-icon-a {
+      transform: translateY(100%);
+    }
+
+    .switch-icon-b {
+      transform: translateY(0);
+    }
+  }
+}

data/_sass/ui/_tables.scss

@@ -0,0 +1,177 @@
+.table {
+  thead {
+    th {
+      background: $table-th-bg;
+      @include subheader;
+      padding-top: $table-th-padding-y;
+      padding-bottom: $table-th-padding-y;
+      white-space: nowrap;
+
+      @media print {
+        background: transparent;
+      }
+    }
+  }
+}
+
+.table-responsive {
+  .table {
+    margin-bottom: 0;
+  }
+
+  + .card-footer {
+    border-top: 0;
+  }
+}
+
+.table-transparent {
+  thead {
+    th {
+      background: transparent;
+    }
+  }
+}
+
+.table-nowrap {
+  > :not(caption) > * > * {
+    white-space: nowrap;
+  }
+}
+
+.table-vcenter {
+  > :not(caption) > * > * {
+    vertical-align: middle;
+  }
+}
+
+.table-center {
+  > :not(caption) > * > * {
+    text-align: center;
+  }
+}
+
+.td-truncate {
+  max-width: 1px;
+  width: 100%;
+}
+
+.table-mobile {
+  @each $breakpoint, $breakpoint-max-widthin in $grid-breakpoints {
+    &#{breakpoint-infix($breakpoint)} {
+      @include media-breakpoint-down($breakpoint) {
+        display: block;
+
+        thead {
+          display: none;
+        }
+
+        tbody,
+        tr {
+          display: flex;
+          flex-direction: column;
+        }
+
+        td {
+          display: block;
+          padding: $table-cell-padding-x $table-cell-padding-y !important;
+          border: none;
+          color: var(--#{$prefix}body-color) !important;
+
+          &[data-label] {
+            &:before {
+              @include subheader;
+              content: attr(data-label);
+              display: block;
+            }
+          }
+        }
+
+        tr {
+          border-bottom: var(--#{$prefix}border-width)
+            var(--#{$prefix}border-style) $table-border-color;
+        }
+
+        .btn {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+/**
+Table sort
+ */
+.table-sort {
+  font: inherit;
+  color: inherit;
+  text-transform: inherit;
+  letter-spacing: inherit;
+  border: 0;
+  background: inherit;
+  display: block;
+  width: 100%;
+  text-align: inherit;
+  @include transition(color $transition-time);
+
+  margin: (-$table-th-padding-y) (-$table-th-padding-x);
+  padding: $table-th-padding-y $table-th-padding-x;
+
+  &:hover,
+  &.asc,
+  &.desc {
+    color: var(--#{$prefix}body-color);
+  }
+
+  &:after {
+    content: "";
+    display: inline-flex;
+    width: 1rem;
+    height: 1rem;
+    vertical-align: bottom;
+    mask-image: $table-sort-bg-image;
+    background: currentColor;
+    margin-left: .25rem;
+  }
+
+  &.asc:after {
+    mask-image: $table-sort-desc-bg-image;
+  }
+
+  &.desc:after {
+    mask-image: $table-sort-asc-bg-image;
+  }
+}
+
+.table-borderless {
+  thead th {
+    background: transparent;
+  }
+}
+
+//
+// Table selectable
+//
+.table-selectable {
+  tbody tr {
+    .on-checked {
+      display: none;
+    }
+
+    .on-unchecked {
+      display: initial;
+    }
+
+    &:has(.table-selectable-check:checked) {
+      background-color: $table-active-bg;
+
+      .on-checked {
+        display: initial;
+      }
+
+      .on-unchecked {
+        display: none;
+      }
+    }
+  }
+}

data/_sass/ui/_tags.scss

@@ -0,0 +1,57 @@
+.tag {
+  --#{$prefix}tag-height: 1.5rem;
+  border: $border-width solid var(--#{$prefix}border-color);
+  display: inline-flex;
+  align-items: center;
+  height: var(--#{$prefix}tag-height);
+  border-radius: var(--#{$prefix}border-radius);
+  padding: 0 0.5rem;
+  background: var(--#{$prefix}bg-surface);
+  box-shadow: var(--#{$prefix}shadow-input);
+  gap: .5rem;
+
+  .btn-close {
+    margin-right: -0.25rem;
+    margin-left: -0.125rem;
+    padding: 0;
+    width: 1rem;
+    height: 1rem;
+    font-size: .5rem;
+  }
+}
+
+.tag-badge {
+  --#{$prefix}badge-font-size: #{$h6-font-size};
+  --#{$prefix}badge-padding-x: .25rem;
+  --#{$prefix}badge-padding-y: .125rem;
+  margin-right: -.25rem;
+}
+
+.tag-avatar,
+.tag-flag,
+.tag-payment,
+.tag-icon,
+.tag-check {
+  margin-left: -.25rem;
+}
+
+.tag-icon {
+  color: var(--#{$prefix}secondary);
+  margin-right: -0.125rem;
+  width: 1rem;
+  height: 1rem;
+}
+
+.tag-check {
+  width: 1rem;
+  height: 1rem;
+  background-size: 1rem;
+}
+
+
+//
+// Tags list
+//
+.tags-list {
+  @include elements-list;
+}

data/_sass/ui/_timeline.scss

@@ -0,0 +1,61 @@
+//
+// Timeline
+//
+.timeline {
+  --#{$prefix}timeline-icon-size: #{$avatar-size};
+  position: relative;
+  list-style: none;
+  padding: 0;
+}
+
+//
+// Timeline event
+//
+.timeline-event {
+  position: relative;
+
+  &:not(:last-child) {
+    margin-bottom: var(--#{$prefix}page-padding);
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: var(--#{$prefix}timeline-icon-size);
+      left: calc(var(--#{$prefix}timeline-icon-size) / 2);
+      bottom: calc(-1 * var(--#{$prefix}page-padding));
+      width: var(--#{$prefix}border-width);
+      background-color: var(--#{$prefix}border-color);
+      border-radius: var(--#{$prefix}border-radius);
+    }
+  }
+}
+
+.timeline-event-icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--#{$prefix}timeline-icon-size, $avatar-size);
+  height: var(--#{$prefix}timeline-icon-size, $avatar-size);
+  background: var(--#{$prefix}gray-200);
+  color: var(--#{$prefix}secondary);
+  border-radius: var(--#{$prefix}border-radius);
+  z-index: 5
+}
+
+.timeline-event-card {
+  margin-left: calc(var(--#{$prefix}timeline-icon-size, $avatar-size) + var(--#{$prefix}page-padding));
+}
+
+//
+// Simple timeline
+//
+.timeline-simple {
+  .timeline-event-icon {
+    display: none;
+  }
+
+  .timeline-event-card {
+    margin-left: 0;
+  }
+}

data/_sass/ui/_toasts.scss

@@ -0,0 +1,18 @@
+.toast {
+  border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
+  box-shadow: $alert-shadow;
+
+  .toast-header {
+    user-select: none;
+  }
+
+  button[data-bs-dismiss="toast"] {
+    outline: none;
+  }
+}
+
+@each $state, $value in $theme-colors {
+  .toast-#{$state} {
+    --#{$prefix}toast-color: #{$value};
+  }
+}

data/_sass/ui/_toolbar.scss

@@ -0,0 +1,10 @@
+.toolbar {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  margin: 0 -.5rem;
+
+  > * {
+    margin: 0 .5rem;
+  }
+}

data/_sass/ui/_tracking.scss

@@ -0,0 +1,29 @@
+.tracking {
+  --#{$prefix}tracking-height: #{$tracking-height};
+  --#{$prefix}tracking-gap-width: #{$tracking-gap-width};
+  --#{$prefix}tracking-block-border-radius: #{$tracking-border-radius};
+  display: flex;
+  gap: var(--#{$prefix}tracking-gap-width);
+}
+
+.tracking-squares {
+  --#{$prefix}tracking-block-border-radius: var(--#{$prefix}border-radius-sm);
+
+  .tracking-block {
+    height: auto;
+
+    &:before {
+      content: "";
+      display: block;
+      padding-top: 100%;
+    }
+  }
+}
+
+.tracking-block {
+  flex: 1;
+  border-radius: var(--#{$prefix}tracking-block-border-radius);
+  height: var(--#{$prefix}tracking-height);
+  min-width: .25rem;
+  background: var(--#{$prefix}border-color);
+}