insights4you-jekyll-theme 0.2.0 → 0.4.0

data/_sass/ui/_icons.scss

@@ -0,0 +1,72 @@
+//
+// Icon component
+//
+.icon {
+  --#{$prefix}icon-size: #{$font-size-base * $line-height-base};
+  width: var(--#{$prefix}icon-size);
+  height: var(--#{$prefix}icon-size);
+  font-size: var(--#{$prefix}icon-size);
+  vertical-align: bottom;
+
+  @if $icon-stroke-width {
+    stroke-width: $icon-stroke-width;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+//
+// Inline icon
+//
+.icon-inline {
+  --#{$prefix}icon-size: 1rem;
+  vertical-align: -.2rem;
+}
+
+//
+// Filled icon
+//
+.icon-filled {
+  fill: currentColor;
+}
+
+//
+// Icon size
+//
+.icon-sm {
+  --#{$prefix}icon-size: 1rem;
+  stroke-width: 1;
+}
+
+.icon-md {
+  --#{$prefix}icon-size: 2.5rem;
+  stroke-width: 1;
+}
+
+.icon-lg {
+  --#{$prefix}icon-size: 3.5rem;
+  stroke-width: 1;
+}
+
+//
+// Icons animation
+//
+.icon-pulse {
+  transition: all .15s ease 0s;
+  animation: pulse 2s ease infinite;
+  animation-fill-mode: both
+}
+
+.icon-tada {
+  transition: all .15s ease 0s;
+  animation: tada 3s ease infinite;
+  animation-fill-mode: both
+}
+
+.icon-rotate {
+  transition: all .15s ease 0s;
+  animation: rotate-360 3s linear infinite;
+  animation-fill-mode: both
+}

data/_sass/ui/_images.scss

@@ -0,0 +1,19 @@
+.img-responsive {
+  --#{$prefix}img-responsive-ratio: #{percentage(.75)};
+  background: no-repeat center/cover;
+  padding-top: var(--#{$prefix}img-responsive-ratio);
+}
+
+.img-responsive-grid {
+  padding-top: calc(var(--#{$prefix}img-responsive-ratio) - calc(var(--#{$prefix}gutter-y) / 2));
+}
+
+@each $key, $ratio in $aspect-ratios {
+  .img-responsive-#{$key} {
+    --#{$prefix}img-responsive-ratio: #{$ratio};
+  }
+}
+
+.img-bg {
+  background: no-repeat center/cover;
+}

data/_sass/ui/_legend.scss

@@ -0,0 +1,12 @@
+/**
+Legend
+ */
+.legend {
+  --#{$prefix}legend-size: #{$legend-size};
+  display: inline-block;
+  background: $legend-bg;
+  width: var(--#{$prefix}legend-size);
+  height: var(--#{$prefix}legend-size);
+  border-radius: $legend-border-radius;
+  border: 1px solid var(--#{$prefix}border-color-translucent);
+}

data/_sass/ui/_lists.scss

@@ -0,0 +1,124 @@
+.list-group {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.list-group-header {
+  background: $list-group-header-bg;
+  padding: .5rem $list-group-item-padding-x;
+  font-size: $h5-font-size;
+  font-weight: var(--#{$prefix}font-weight-medium);
+  line-height: 1;
+  text-transform: uppercase;
+  color: $list-group-header-color;
+  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+
+  .list-group-flush > & {
+    &:last-child {
+      border-bottom-width: 0;
+    }
+  }
+}
+
+.list-group-item {
+  background-color: inherit;
+}
+
+.list-group-item.active {
+  background-color: $dropdown-link-hover-bg;
+  border-left-color: $component-active-bg;
+  border-left-width: $border-width-wide;
+}
+
+.list-group-item {
+  &:active,
+  &:focus,
+  &:hover {
+    background-color: $dropdown-link-hover-bg;
+  }
+}
+
+.list-group-item {
+  &.disabled,
+  &:disabled {
+    color: $gray-500;
+    background-color: $dropdown-link-hover-bg;
+  }
+}
+
+.list-bordered {
+  .list-item {
+    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+    margin-top: -1px;
+
+    &:first-child {
+      border-top: none;
+    }
+  }
+}
+
+.list-group-hoverable {
+  .list-group-item-actions {
+    opacity: 0;
+    @include transition(opacity $transition-time);
+  }
+
+  .list-group-item:hover .list-group-item-actions,
+  .list-group-item-actions.show {
+    opacity: 1;
+  }
+}
+
+
+
+.list-group-transparent {
+  --#{$prefix}list-group-border-radius: 0;
+  margin: 0 (- $list-group-item-padding-x);
+
+  .list-group-item {
+    background: none;
+    border: 0;
+
+    .icon {
+      color: var(--#{$prefix}secondary);
+    }
+
+    &.active {
+      font-weight: var(--#{$prefix}font-weight-bold);
+      color: inherit;
+      background: $list-group-active-bg;
+
+      .icon {
+        color: inherit;
+      }
+    }
+  }
+}
+
+/**
+Seprated list
+*/
+.list-separated {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer;
+}
+
+/**
+Inline list
+ */
+.list-inline {
+  margin: 0;
+}
+
+.list-inline-item:not(:last-child) {
+  margin-right: auto;
+  margin-inline-end: $list-inline-padding;
+}
+
+.list-inline-dots {
+  .list-inline-item + .list-inline-item:before {
+    content: ' · ';
+    margin-inline-end: $list-inline-padding;
+  }
+}

data/_sass/ui/_loaders.scss

@@ -0,0 +1,72 @@
+.loader {
+  position: relative;
+  display: block;
+  width: $loader-size;
+  height: $loader-size;
+  color: $blue;
+  vertical-align: middle;
+
+  &:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    content: "";
+    border: 1px var(--#{$prefix}border-style);
+    border-color: transparent;
+    border-top-color: currentColor;
+    border-left-color: currentColor;
+
+    border-radius: $border-radius-pill;
+    animation: rotate-360 .6s linear;
+    animation-iteration-count: infinite;
+  }
+}
+
+/**
+Dimmer
+*/
+.dimmer {
+  position: relative;
+
+  .loader {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    display: none;
+    margin: 0 auto;
+    transform: translateY(-50%);
+  }
+
+  &.active {
+    .loader {
+      display: block;
+    }
+
+    .dimmer-content {
+      pointer-events: none;
+      opacity: .1;
+    }
+  }
+}
+
+
+@keyframes animated-dots {
+  0% {
+    transform: translateX(-100%);
+  }
+}
+
+.animated-dots {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: bottom;
+
+  &:after {
+    display: inline-block;
+    content: "...";
+    animation: animated-dots 1.2s steps(4, jump-none) infinite;
+  }
+}

data/_sass/ui/_login.scss

@@ -0,0 +1,3 @@
+//.col-login {
+//  max-width: 24rem;
+//}

data/_sass/ui/_markdown.scss

@@ -0,0 +1,43 @@
+/**
+Markdown
+ */
+.markdown {
+  line-height: $line-height-lg;
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child,
+  > :last-child .highlight {
+    margin-bottom: 0;
+  }
+
+  > hr {
+    @include media-breakpoint-up(md) {
+      margin-top: 3em;
+      margin-bottom: 3em;
+    }
+  }
+
+  > {
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: var(--#{$prefix}font-weight-bold);
+    }
+  }
+
+  > table {
+    @extend .table, .table-bordered;
+  }
+
+  > blockquote {
+    font-size: $h3-font-size;
+    margin: 1.5rem 0;
+    padding: .5rem 1.5rem;
+  }
+
+  > img,
+  > p > img {
+    border-radius: var(--#{$prefix}border-radius);
+  }
+}

data/_sass/ui/_modals.scss

@@ -0,0 +1,67 @@
+.modal-content, .modal-header {
+  > .btn-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: $modal-header-height;
+    height: $modal-header-height;
+    margin: 0;
+    padding: 0;
+    z-index: 10;
+  }
+}
+
+.modal-body {
+  @include scrollbar;
+
+  .modal-title {
+    margin-bottom: 1rem;
+  }
+
+  & + & {
+    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  }
+}
+
+.modal-status {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: $modal-status-size;
+  background: var(--#{$prefix}secondary);
+  border-radius: $modal-content-border-radius $modal-content-border-radius 0 0;
+}
+
+.modal-header {
+  align-items: center;
+  min-height: $modal-header-height;
+  background: $modal-header-bg;
+  padding: 0 $modal-header-height 0 $modal-inner-padding;
+}
+
+.modal-title {
+  font-size: $h3-font-size;
+  font-weight: $headings-font-weight;
+  color: $headings-color;
+  line-height: $line-height-base;
+}
+
+.modal-footer {
+  @if $modal-footer-border-width == 0 {
+    padding-top: 0;
+  } @else {
+    padding-top: .75rem;
+  }
+
+  padding-bottom: .75rem;
+}
+
+.modal-blur {
+  backdrop-filter: blur($modal-backdrop-blur);
+}
+
+.modal-full-width {
+  max-width: none;
+  margin: 0 $modal-dialog-margin;
+}

data/_sass/ui/_nav.scss

@@ -0,0 +1,96 @@
+.nav-vertical {
+  &,
+  .nav {
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+
+  .nav {
+    margin-left: 1.25rem;
+    border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+    padding-left: .5rem;
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    font-weight: var(--#{$prefix}font-weight-medium);
+  }
+
+  &.nav-pills {
+    margin: 0 (-$nav-link-padding-x);
+  }
+}
+
+//
+// Nav bordered
+//
+.nav-bordered {
+  border-bottom: $nav-bordered-border-width var(--#{$prefix}border-style) $nav-bordered-border-color;
+
+  .nav-item {
+    + .nav-item {
+      margin-left: $nav-bordered-margin-x;
+    }
+  }
+
+  .nav-link {
+    padding-left: 0;
+    padding-right: 0;
+    margin: 0 0 calc(-1 * #{$nav-bordered-border-width});
+    border: 0;
+    border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: $nav-bordered-link-active-color;
+    border-color: $nav-bordered-link-active-border-color;
+  }
+
+}
+
+.nav-link {
+  display: flex;
+  @include transition(color $transition-time, background-color $transition-time);
+  align-items: center;
+
+  &:hover,
+  &:focus {
+    background-color: var(--#{$prefix}nav-link-hover-bg);
+  }
+}
+
+.nav-link-toggle {
+  margin-left: auto;
+  padding: 0 .25rem;
+  @include transition(transform $transition-time);
+  @include caret();
+
+  &:after {
+    margin: 0;
+  }
+
+  @at-root .nav-link[aria-expanded="true"] & {
+    transform: rotate(180deg);
+  }
+}
+
+.nav-link-icon {
+  width: $nav-link-icon-size;
+  height: $nav-link-icon-size;
+  margin-right: .5rem;
+  color: $nav-link-icon-color;
+
+  svg {
+    display: block;
+    height: 100%;
+  }
+}
+
+.nav-fill {
+  .nav-item {
+    .nav-link {
+      justify-content: center;
+    }
+  }
+}

data/_sass/ui/_offcanvas.scss

@@ -0,0 +1,17 @@
+.offcanvas-header {
+  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+}
+
+.offcanvas-footer {
+  padding: $offcanvas-padding-y $offcanvas-padding-x;
+}
+
+.offcanvas-title {
+  font-size: $h3-font-size;
+  font-weight: var(--#{$prefix}font-weight-medium);
+  line-height: 1.5rem;
+}
+
+.offcanvas-narrow {
+  width: 20rem;
+}

data/_sass/ui/_pagination.scss

@@ -0,0 +1,58 @@
+.pagination {
+  --#{$prefix}pagination-gap: .25rem;
+  user-select: none;
+  gap: var(--#{$prefix}pagination-gap);
+}
+
+.page-link {
+  min-width: 1.75rem;
+  border-radius: var(--#{$prefix}border-radius);
+}
+
+.page-item {
+  text-align: center;
+
+  &:not(.active) {
+    .page-link {
+      &:hover {
+        background: transparent;
+      }
+    }
+  }
+
+  &.page-prev,
+  &.page-next {
+    flex: 0 0 50%;
+    text-align: left;
+  }
+
+  &.page-next {
+    margin-left: auto;
+    text-align: right;
+  }
+}
+
+.page-item-subtitle {
+  margin-bottom: 2px;
+  font-size: 12px;
+  color: var(--#{$prefix}secondary);
+  text-transform: uppercase;
+
+  .page-item.disabled & {
+    color: $pagination-disabled-color;
+  }
+}
+
+.page-item-title {
+  font-size: $h3-font-size;
+  font-weight: var(--#{$prefix}font-weight-normal);
+  color: var(--#{$prefix}body-color);
+
+  .page-link:hover & {
+    color: $link-color;
+  }
+
+  .page-item.disabled & {
+    color: $pagination-disabled-color;
+  }
+}

data/_sass/ui/_payments.scss

@@ -0,0 +1,28 @@
+$payment-icons: ("2c2p", "2checkout", "adyen", "affirm", "alipay-plus", "alipay", "allegro-pay", "amazon-pay", "amazon", "americanexpress", "applepay", "authorize", "autopay", "bancontact", "binance-usd", "bitcoin", "bitpay", "bkash", "blik", "braintree", "cash-app", "chime", "cirrus", "clickandbuy", "coinkite", "dinersclub", "directdebit", "discover", "dotpay", "dwolla", "easypaisa", "ebay", "elo", "epayco", "esewa", "ethereum", "eway", "fonepay", "giropay", "google-pay", "googlewallet", "hubspot", "ingenico", "ideal", "imepay", "jcb", "khalti", "klarna", "laser", "litecoin", "maestro", "mastercard", "mercado-pago", "metamask", "mir", "monero", "moneygram", "neteller", "ogone", "okpay", "opensea", "paybox", "payconiq", "payka", "payline", "paymill", "payone", "payoneer", "paypal", "paypo", "paysafe", "paysafecard", "payu", "payza", "poli", "przelewy24", "revolut-pay", "ripple", "sage", "samsung-pay", "sepa", "shop-pay", "shopify", "skrill", "solana", "solo", "spingo", "square", "stax", "stripe", "switch", "tether", "tpay", "troy", "true-usd", "ukash", "unionpay", "venmo", "verifone", "verisign", "visa", "we-chat-pay", "webmoney", "westernunion", "wise", "worldpay", "zelle");
+
+.payment {
+  height: $avatar-size;
+  aspect-ratio: 1.66666;
+  display: inline-block;
+  background: no-repeat center/100% 100%;
+  vertical-align: bottom;
+  font-style: normal;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
+  border-radius: 2px;
+}
+
+@each $payment in $payment-icons {
+  .payment-provider-#{$payment} {
+    background-image: url("#{$assets-base}/img/payments/#{$payment}.svg");
+  }
+
+  .payment-provider-#{$payment}-dark {
+    background-image: url("#{$assets-base}/img/payments/#{$payment}-dark.svg");
+  }
+}
+
+@each $payment-size, $size in $payment-sizes {
+  .payment-#{$payment-size} {
+    height: map-get($size, size);
+  }
+}

data/_sass/ui/_placeholder.scss

@@ -0,0 +1,9 @@
+.placeholder {
+  &:not(.btn):not([class*="bg-"]) {
+    background-color: currentColor !important;
+  }
+
+  &:not(.avatar):not([class*="card-img-"]), {
+    border-radius: var(--#{$prefix}border-radius);
+  }
+}

data/_sass/ui/_popovers.scss

@@ -0,0 +1,2 @@
+.popover {
+}