insights4you-jekyll-theme 0.2.0 → 0.4.0

data/_sass/ui/forms/_form-selectgroup.scss

@@ -0,0 +1,153 @@
+/*
+Select group
+ */
+.form-selectgroup {
+  display: inline-flex;
+  margin: 0 -.5rem -.5rem 0;
+  flex-wrap: wrap;
+
+  .form-selectgroup-item {
+    margin: 0 .5rem .5rem 0;
+  }
+}
+
+.form-selectgroup-vertical {
+  flex-direction: column;
+}
+
+.form-selectgroup-item {
+  display: block;
+  position: relative;
+}
+
+.form-selectgroup-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  opacity: 0;
+}
+
+.form-selectgroup-label {
+  position: relative;
+  display: block;
+  min-width: $input-height;
+  margin: 0;
+  padding: $input-btn-padding-y $input-btn-padding-x;
+  font-size: $input-btn-font-size;
+  line-height: $input-line-height;
+  color: var(--#{$prefix}secondary);
+  background: $form-check-input-bg;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color;
+  border-radius: var(--#{$prefix}border-radius);
+  box-shadow: $input-box-shadow;
+  @include transition(border-color $transition-time, background $transition-time, color $transition-time);
+
+  .icon:only-child {
+    margin: 0 -.25rem;
+  }
+
+  &:hover {
+    color: var(--#{$prefix}body-color);
+  }
+}
+
+.form-selectgroup-check {
+  display: inline-block;
+  width: $form-check-input-width;
+  height: $form-check-input-width;
+  border: $form-check-input-border;
+  vertical-align: middle;
+  box-shadow: $form-check-input-box-shadow;
+
+  .form-selectgroup-input[type="checkbox"] + .form-selectgroup-label & {
+    border-radius: $form-check-input-border-radius;
+  }
+
+  .form-selectgroup-input[type="radio"] + .form-selectgroup-label & {
+    border-radius: $form-check-radio-border-radius;
+  }
+
+  .form-selectgroup-input:checked + .form-selectgroup-label & {
+    background-color: $form-check-input-checked-bg-color;
+    background-repeat: $form-check-input-checked-bg-repeat;
+    background-position: center;
+    background-size: $form-check-input-checked-bg-size;
+    border-color: $form-check-input-checked-border-color;
+  }
+
+  .form-selectgroup-input[type="checkbox"]:checked + .form-selectgroup-label & {
+    background-image: escape-svg($form-check-input-checked-bg-image);
+  }
+
+  .form-selectgroup-input[type="radio"]:checked + .form-selectgroup-label & {
+    background-image: escape-svg($form-check-radio-checked-bg-image);
+  }
+}
+
+.form-selectgroup-check-floated {
+  position: absolute;
+  top: $input-btn-padding-y;
+  right: $input-btn-padding-y;
+}
+
+.form-selectgroup-input:checked + .form-selectgroup-label {
+  z-index: 1;
+  color: #{$active-color};
+  background: #{$active-bg};
+  border-color: #{$active-border-color};
+}
+
+.form-selectgroup-input:focus + .form-selectgroup-label {
+  z-index: 2;
+  color: var(--#{$prefix}primary);
+  border-color: var(--#{$prefix}primary);
+  box-shadow: $input-btn-focus-box-shadow;
+}
+
+.form-selectgroup-label-content {
+}
+
+/**
+Alternate version of form select group
+ */
+.form-selectgroup-boxes {
+  .form-selectgroup-label {
+    text-align: left;
+    padding: $card-spacer-x $card-spacer-y;
+    color: inherit;
+  }
+
+  .form-selectgroup-input:checked {
+    + .form-selectgroup-label {
+      color: inherit;
+
+      .form-selectgroup-title {
+        color: var(--#{$prefix}primary);
+      }
+
+      .form-selectgroup-label-content {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+/**
+Select group
+ */
+.form-selectgroup-pills {
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  .form-selectgroup-item {
+    flex-grow: 0;
+  }
+
+  .form-selectgroup-label {
+    border-radius: 50px;
+  }
+}

data/_sass/ui/forms/_validation.scss

@@ -0,0 +1,13 @@
+%validation-lite {
+  border-color: var(--#{$prefix}border-color) !important;
+}
+
+@each $state, $data in $form-validation-states {
+  .form-control.is-#{$state}-lite {
+    @extend %validation-lite;
+  }
+
+  .form-select.is-#{$state}-lite {
+    @extend %validation-lite;
+  }
+}

data/_sass/ui/typo/_hr.scss

@@ -0,0 +1,77 @@
+
+/**
+Horizontal rules
+ */
+.hr {
+  @extend hr;
+}
+
+/**
+Hr text
+ */
+.hr-text {
+  display: flex;
+  align-items: center;
+  margin: $hr-margin-y 0;
+  @include subheader;
+  height: 1px;
+
+  &:after,
+  &:before {
+    flex: 1 1 auto;
+    height: 1px;
+    background-color: var(--#{$prefix}border-color);
+  }
+
+  &:before {
+    content: "";
+    margin-right: .5rem;
+  }
+
+  &:after {
+    content: "";
+    margin-left: .5rem;
+  }
+
+  > *:first-child {
+    padding-right: .5rem;
+    padding-left: 0;
+    color: var(--#{$prefix}secondary);
+  }
+
+  &.hr-text-left,
+  &.hr-text-start {
+    &:before {
+      content: none;
+    }
+
+    & > *:first-child {
+      padding-right: .5rem;
+      padding-left: .5rem;
+    }
+  }
+
+  &.hr-text-right,
+  &.hr-text-end {
+    &:before {
+      content: "";
+    }
+
+    &:after {
+      content: none;
+    }
+
+    & > *:first-child {
+      padding-right: 0;
+      padding-left: .5rem;
+    }
+  }
+
+  .card > & {
+    margin: 0;
+  }
+}
+
+.hr-text-spaceless {
+  margin: -.5rem 0;
+}

data/_sass/utils/_background.scss

@@ -0,0 +1,15 @@
+.bg-white-overlay {
+  color: $white;
+  background-color: rgba($light, .24);
+}
+
+.bg-dark-overlay {
+  color: $white;
+  background-color: rgba($dark, .24);
+}
+
+.bg-cover {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}

data/_sass/utils/_colors.scss

@@ -0,0 +1,100 @@
+// All colors
+@each $color, $value in map-merge($theme-colors, ( white: $white)) {
+  .bg-#{"" + $color} {
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
+  }
+
+  .bg-#{"" + $color}-lt {
+    color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity, 1) * 100%), transparent) !important;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lt) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
+  }
+
+  .border-#{"" + $color} {
+    border-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}border-opacity, 1) * 100%), transparent) !important;
+  }
+
+  .bg-gradient-from-#{"" + $color} {
+    --#{$prefix}gradient-from: var(--#{$prefix}#{$color});
+  }
+
+  .bg-gradient-to-#{"" + $color} {
+    --#{$prefix}gradient-to: var(--#{$prefix}#{$color});
+  }
+
+  .bg-gradient-via-#{"" + $color} {
+    --#{$prefix}gradient-via: var(--#{$prefix}#{$color});
+    --#{$prefix}gradient-stops: var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-via, transparent), var(--#{$prefix}gradient-to, transparent);
+  }
+
+  .text-bg-#{"" + $color} {
+    color: color-contrast($value) if($enable-important-utilities, !important, null);
+    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+  }
+
+  .link-#{"" + $color} {
+    color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}link-opacity, 1) * 100%), transparent) !important;
+    text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}link-underline-opacity, 1) * 100%), transparent) !important;
+
+    @if $link-shade-percentage != 0 {
+      &:hover,
+      &:focus {
+        $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+      }
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .text-#{"" + $color} {
+    --#{$prefix}text-opacity: 1;
+    color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity) * 100%), transparent) !important;
+  }
+
+  .text-#{"" + $color}-fg {
+    color: var(--#{$prefix}#{$color}-fg) !important;
+  }
+}
+
+@each $color, $value in $gray-colors {
+  .bg-#{"" + $color} {
+    --#{$prefix}bg-opacity: 1;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
+  }
+
+  .text-#{"" + $color}-fg {
+    color: $value !important;
+  }
+}
+
+@each $color, $value in $social-colors {
+  .bg-#{"" + $color} {
+    --#{$prefix}bg-opacity: 1;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
+  }
+
+  .text-#{"" + $color}-fg {
+    color: $value !important;
+  }
+}
+
+.bg-inverted {
+  --#{$prefix}bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--#{$prefix}bg-surface-inverted) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
+}
+.bg-surface {
+  background-color: var(--#{$prefix}bg-surface) !important;
+}
+
+.bg-surface-secondary {
+  background-color: var(--#{$prefix}bg-surface-secondary) !important;
+}
+
+.bg-surface-tertiary {
+  background-color: var(--#{$prefix}bg-surface-tertiary) !important;
+}
+
+.bg-surface-backdrop {
+  background-color: color-transparent($modal-backdrop-bg, $modal-backdrop-opacity) !important;
+}

data/_sass/utils/_opacity.scss

@@ -0,0 +1,7 @@
+// stylelint-disable declaration-no-important
+
+@for $i from 0 through 20 {
+  .opacity-#{$i * 5} {
+    opacity: calc(#{$i * 5} / 100) !important;
+  }
+}

data/_sass/utils/_scroll.scss

@@ -0,0 +1,47 @@
+// stylelint-disable declaration-no-important
+
+/*
+Scrollable
+*/
+.scrollable {
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  &.hover {
+    overflow-y: hidden;
+
+    > * {
+      margin-top: -1px;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      overflow: visible;
+      overflow-y: auto;
+    }
+  }
+
+  .touch & {
+    overflow-y: auto !important;
+  }
+}
+
+.scroll-x,
+.scroll-y {
+  overflow: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+.scroll-y {
+  overflow-y: auto;
+}
+
+.scroll-x {
+  overflow-x: auto;
+}
+
+.no-scroll {
+  overflow: hidden;
+}

data/_sass/utils/_shadow.scss

@@ -0,0 +1,9 @@
+// stylelint-disable declaration-no-important
+
+.hover-shadow-sm:hover { box-shadow: $box-shadow-sm !important; }
+
+.hover-shadow:hover{ box-shadow: $box-shadow !important; }
+
+.hover-shadow-lg:hover { box-shadow: $box-shadow-lg !important; }
+
+.hover-shadow-none:hover{ box-shadow: none !important; }

data/_sass/utils/_sizing.scss

@@ -0,0 +1,6 @@
+// stylelint-disable declaration-no-important
+
+@each $size-name, $size in map_merge($spacers, $size-spacers) {
+  .w-#{$size-name} { width: $size !important; }
+  .h-#{$size-name} { height: $size !important; }
+}

data/_sass/utils/_text.scss

@@ -0,0 +1,15 @@
+// stylelint-disable declaration-no-important
+
+/**
+Antialiasing
+ */
+.antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.subpixel-antialiased {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+

data/_sass/vendors/_apexcharts.scss

@@ -0,0 +1,48 @@
+.apexcharts-tooltip {
+  color: $tooltip-color !important;
+  background: $tooltip-bg !important;
+  font-size: $tooltip-font-size !important;
+  padding: .25rem !important;
+  box-shadow: none !important;
+}
+
+.apexcharts-tooltip-title {
+  background: transparent !important;
+  border: 0 !important;
+  margin: 0 !important;
+  font-weight: var(--#{$prefix}font-weight-bold);
+  padding: .25rem .5rem !important;
+}
+
+.apexcharts-tooltip-y-group {
+  padding: 2px 0 !important;
+}
+
+.apexcharts-tooltip-series-group {
+  padding: 0 .5rem 0 !important;
+}
+
+.apexcharts-tooltip-marker:before {
+  font-size: 16px !important;
+}
+
+.apexcharts-text {
+  fill: var(--#{$prefix}body-color) !important;
+}
+
+.apexcharts-gridline {
+  stroke: var(--#{$prefix}border-color) !important;
+}
+
+.apexcharts-legend-text {
+  color: inherit !important;
+}
+
+.apexcharts-radialbar-track .apexcharts-radialbar-area {
+  stroke: var(--#{$prefix}border-color) !important;
+}
+
+.apexcharts-svg,
+.apexcharts-canvas {
+  border-radius: inherit;
+}

data/_sass/vendors/_coloris.scss

@@ -0,0 +1,72 @@
+.clr-picker {
+  box-shadow: var(--#{$prefix}shadow-dropdown);
+  background-color: var(--#{$prefix}bg-surface);
+  border-radius: var(--#{$prefix}border-radius);
+}
+
+.clr-gradient {
+  border-radius: var(--#{$prefix}border-radius) var(--#{$prefix}border-radius) 0 0;
+}
+
+input.clr-color {
+  border-radius: var(--#{$prefix}border-radius);
+  color: var(--#{$prefix}body-color);
+  border-color: var(--#{$prefix}border-color);
+  background: transparent;
+
+  &:focus {
+    @include focus-ring(true);
+  }
+}
+
+.clr-swatches {
+  button {
+    border-radius: var(--#{$prefix}border-radius);
+    padding: 0 2px 4px 2px;
+
+    &:focus {
+      @include focus-ring;
+    }
+  }
+}
+
+.clr-preview {
+  border-radius: var(--#{$prefix}border-radius);
+  overflow: visible;
+
+  button,
+  &:before,
+  &:after {
+    border-radius: var(--#{$prefix}border-radius);
+  }
+
+  button {
+    &:focus {
+      @include focus-ring;
+    }
+  }
+}
+
+.clr-field {
+  display: block;
+  
+  button {
+    width: 1.5rem;
+    height: 1.5rem;
+    left: 6px;
+    right: auto;
+    border-radius: var(--#{$prefix}border-radius);
+
+    &:after {
+      box-shadow: inset 0 0 0 1px var(--#{$prefix}border-color-translucent);
+    }
+
+    &:focus {
+      @include focus-ring;
+    }
+  }
+
+  input {
+    padding-left: 2.5rem;
+  }
+}

data/_sass/vendors/_dropzone.scss

@@ -0,0 +1,27 @@
+.dropzone {
+  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color) !important;
+  color: var(--#{$prefix}secondary) !important;
+  padding: 1rem !important;
+
+  &.dz-drag-hover {
+    border: var(--#{$prefix}border-width) dashed var(--#{$prefix}primary);
+    background: rgba(var(--#{$prefix}primary-rgb), .01);
+    color: var(--#{$prefix}primary);
+
+    .dz-message {
+      opacity: 1;
+    }
+  }
+
+  .dz-preview {
+    margin: .5rem;
+
+    .dz-image {
+      border-radius: var(--#{$prefix}border-radius);
+    }
+
+    .dz-success-mark {
+      height: 54px;
+    }
+  }
+}

data/_sass/vendors/_fslightbox.scss

@@ -0,0 +1,13 @@
+.fslightbox-container {
+  font-family: inherit !important;
+  background: var(--#{$prefix}backdrop-bg) !important;
+  backdrop-filter: blur($modal-backdrop-blur) !important;
+}
+
+.fslightbox-slide-number-container {
+  color: inherit !important;
+}
+
+.fslightbox-slash {
+  background: currentColor !important;
+}

data/_sass/vendors/_jsvectormap.scss

@@ -0,0 +1,47 @@
+.jvm-tooltip {
+  background: var(--#{$prefix}bg-surface-inverted);
+  color: var(--#{$prefix}text-inverted);
+  font-family: inherit;
+  font-size: $h5-font-size;
+  box-shadow: $card-box-shadow;
+}
+
+.jvm-series-container .jvm-legend  .jvm-legend-title {
+  border-bottom: 0;
+  font-weight: var(--#{$prefix}font-weight-medium);
+}
+
+.jvm-series-container .jvm-legend {
+  background-color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  min-width: 8rem;
+
+  .jvm-legend-inner .jvm-legend-tick {
+    display: flex;
+    align-items: center;
+
+    .jvm-legend-tick-sample {
+      width: .75rem;
+      height: .75rem;
+    }
+  }
+}
+
+.jvm-zoom-btn {
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+  color: var(--#{$prefix}body-color);
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1rem;
+  box-shadow: $card-box-shadow;
+
+  &.jvm-zoomout {
+    top: 2.5rem;
+  }
+}