insights4you-jekyll-theme 0.2.2 → 0.4.0

data/_sass/ui/_chat.scss

@@ -0,0 +1,38 @@
+.chat {
+}
+
+.chat-bubbles {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.chat-bubble {
+  background: var(--#{$prefix}bg-surface-secondary);
+  border-radius: var(--#{$prefix}border-radius-lg);
+  padding: 1rem;
+  position: relative;
+}
+
+.chat-bubble-me {
+  background-color: var(--#{$prefix}primary-lt);
+  box-shadow: none;
+}
+
+.chat-bubble-title {
+  margin-bottom: 0.25rem;
+}
+
+.chat-bubble-author {
+  font-weight: 600;
+}
+
+.chat-bubble-date {
+  color: var(--#{$prefix}secondary);
+}
+
+.chat-bubble-body {
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}

data/_sass/ui/_close.scss

@@ -0,0 +1,60 @@
+.btn-close {
+  --#{$prefix}btn-close-color: currentColor;
+  --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+  --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
+  --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
+  --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
+  --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
+  --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
+  --#{$prefix}btn-close-size: #{$btn-close-width};
+
+  width: var(--#{$prefix}btn-close-size);
+  height: var(--#{$prefix}btn-close-size);
+  padding: $btn-close-padding-y $btn-close-padding-x;
+  color: var(--#{$prefix}btn-close-color);
+  mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * .75);
+  background-color: var(--#{$prefix}btn-close-color);
+  border: 0;
+  border-radius: var(--tblr-border-radius);
+  opacity: var(--#{$prefix}btn-close-opacity);
+  cursor: pointer;
+  display: block;
+
+  &:hover {
+    color: var(--#{$prefix}btn-close-color);
+    text-decoration: none;
+    opacity: var(--#{$prefix}btn-close-hover-opacity);
+  }
+
+  &:focus {
+    outline: 0;
+    box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+    opacity: var(--#{$prefix}btn-close-focus-opacity);
+  }
+
+  &:disabled,
+  &.disabled {
+    pointer-events: none;
+    user-select: none;
+    opacity: var(--#{$prefix}btn-close-disabled-opacity);
+  }
+}
+
+// @mixin btn-close-white() {
+//   --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
+// }
+
+// .btn-close-white {
+//   @include btn-close-white();
+// }
+
+// :root,
+// [data-bs-theme="light"] {
+//   --#{$prefix}btn-close-filter: #{$btn-close-filter};
+// }
+
+// @if $enable-dark-mode {
+//   @include color-mode(dark, true) {
+//     @include btn-close-white();
+//   }
+// }

data/_sass/ui/_datagrid.scss

@@ -0,0 +1,17 @@
+//
+// Base styles
+//
+
+.datagrid {
+  --#{$prefix}datagrid-padding: #{$datagrid-padding};
+  --#{$prefix}datagrid-item-width: #{$datagrid-item-width};
+
+  display: grid;
+  grid-gap: var(--#{$prefix}datagrid-padding);
+  grid-template-columns: repeat(auto-fit, minmax(var(--#{$prefix}datagrid-item-width), 1fr));
+}
+
+.datagrid-title {
+  @include subheader;
+  margin-bottom: .25rem;
+}

data/_sass/ui/_dropdowns.scss

@@ -0,0 +1,120 @@
+.dropdown-menu {
+  user-select: none;
+  background-clip: border-box;
+
+  &.card {
+    padding: 0;
+    min-width: $dropdown-max-width;
+    display: none;
+
+    &.show {
+      display: flex;
+    }
+  }
+}
+
+.dropdown-item {
+  min-width: $dropdown-min-width;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  line-height: $line-height-base;
+  gap: .5rem;
+}
+
+.dropdown-item-icon {
+  width: $icon-size !important;
+  height: $icon-size !important;
+  margin-right: .5rem;
+  color: var(--#{$prefix}secondary);
+  opacity: $text-secondary-opacity;
+  text-align: center;
+}
+
+.dropdown-item-indicator {
+  margin-right: .5rem;
+  margin-left: -.25rem;
+  height: 1.25rem;
+  display: inline-flex;
+  line-height: 1;
+  vertical-align: bottom;
+  align-items: center;
+}
+
+.dropdown-header {
+  @include subheader;
+  padding-bottom: .25rem;
+  pointer-events: none;
+}
+
+.dropdown-menu-scrollable {
+  height: auto;
+  max-height: $dropdown-scrollable-height;
+  overflow-x: hidden;
+}
+
+.dropdown-menu-column {
+  min-width: $dropdown-min-width;
+
+  .dropdown-item {
+    min-width: 0;
+  }
+}
+
+.dropdown-menu-columns {
+  display: flex;
+  flex: 0 .25rem;
+}
+
+.dropdown-menu-arrow {
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: -.25rem;
+    left: .75rem;
+    display: block;
+    background: inherit;
+    width: 14px;
+    height: 14px;
+    /*rtl:ignore*/
+    transform: rotate(45deg);
+    transform-origin: center;
+    border: 1px solid;
+    border-color: inherit;
+    z-index: -1;
+    clip: rect(0px, 9px, 9px, 0px);
+  }
+
+  &.dropdown-menu-end {
+    &:before {
+      right: .75rem;
+      left: auto;
+    }
+  }
+}
+
+.dropend {
+  > .dropdown-menu {
+    margin-top: subtract(-$dropdown-padding-y, 1px);
+    margin-left: -.25rem;
+  }
+
+  .dropdown-toggle {
+    &:after {
+      margin-left: auto;
+    }
+  }
+}
+
+.dropdown-menu-card {
+  padding: 0;
+  min-width: 20rem;
+
+  > .card {
+    margin: 0;
+    border: 0;
+    box-shadow: none;
+  }
+}
+

data/_sass/ui/_empty.scss

@@ -0,0 +1,60 @@
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 1rem;
+  text-align: center;
+
+  @include media-breakpoint-up(md) {
+    padding: 3rem;
+  }
+}
+
+.empty-icon {
+  margin: 0 0 1rem;
+  width: 3rem;
+  height: 3rem;
+  line-height: 1;
+  color: var(--#{$prefix}secondary);
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.empty-img {
+  margin: 0 0 2rem;
+  line-height: 1;
+}
+
+.empty-header {
+  margin: 0 0 1rem;
+  font-size: 4rem;
+  font-weight: var(--#{$prefix}font-weight-light);
+  line-height: 1;
+  color: var(--#{$prefix}secondary);
+}
+
+.empty-title {
+  font-size: $h2-font-size;
+  line-height: $h2-line-height;
+  font-weight: $headings-font-weight;
+}
+
+.empty-title,
+.empty-subtitle {
+  margin: 0 0 .5rem;
+}
+
+.empty-action {
+  margin-top: 1.5rem;
+}
+
+
+.empty-bordered {
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  border-radius: var(--#{$prefix}border-radius);
+}

data/_sass/ui/_flags.scss

@@ -0,0 +1,31 @@
+$countries: (
+  'ad', 'af', 'ae', 'afrun', 'ag', 'ai', 'al', 'am', 'ao', 'aq', 'ar', 'as', 'at', 'au', 'aw', 'ax', 'az', 'ba', 'bb', 'bd', 'be', 'bf', 'bg', 'bh', 'bi', 'bj', 'bl', 'bm', 'bn', 'bo', 'bq-bo', 'bq-sa', 'bq-se', 'br', 'bs', 'bt', 'bv', 'bw', 'by', 'bz', 'ca', 'cc', 'cd', 'cf', 'cg', 'ch', 'ci', 'ck', 'cl', 'cm', 'cn', 'co', 'cr', 'cu', 'cv', 'cw', 'cx', 'cy', 'cz', 'de', 'dj', 'dk', 'dm', 'do', 'dz', 'ec', 'ee', 'eg', 'eh', 'er', 'es', 'et', 'eu', 'fi', 'fj', 'fk', 'fm', 'fo', 'fr', 'ga', 'gb-eng', 'gb-sct', 'gb', 'gb-wls', 'gb-nir', 'gd', 'ge', 'gf', 'gg', 'gh', 'gi', 'gl', 'gm', 'gn', 'gp', 'gq', 'gr', 'gs', 'gt', 'gu', 'gw', 'gy', 'hk', 'hm', 'hn', 'hr', 'ht', 'hu', 'id', 'ie', 'il', 'im', 'in', 'io', 'iq', 'ir', 'is', 'it', 'je', 'jm', 'jo', 'jp', 'ke', 'kg', 'kh', 'ki', 'km', 'kn', 'kp', 'kr', 'kw', 'ky', 'kz', 'la', 'lb', 'lc', 'li', 'lk', 'lr', 'ls', 'lt', 'lu', 'lv', 'ly', 'ma', 'mc', 'md', 'me', 'mf', 'mg', 'mh', 'mk', 'ml', 'mm', 'mn', 'mo', 'mp', 'mq', 'mr', 'ms', 'mt', 'mu', 'mv', 'mw', 'mx', 'my', 'mz', 'na', 'nc', 'ne', 'nf', 'ng', 'ni', 'nl', 'no', 'np', 'nr', 'nu', 'nz', 'om', 'pa', 'pe', 'pf', 'pg', 'ph', 'pk', 'pl', 'pm', 'pn', 'pr', 'ps', 'pt', 'pw', 'py', 'qa', 'rainbow', 're', 'ro', 'rs', 'ru', 'rw', 'sa', 'sb', 'sc', 'sd', 'se', 'sg', 'sh', 'si', 'sj', 'sk', 'sl', 'sm', 'sn', 'so', 'sr', 'ss', 'st', 'sv', 'sx', 'sy', 'sz', 'tc', 'td', 'tf', 'tg', 'th', 'tj', 'tk', 'tl', 'tm', 'tn', 'to', 'tr', 'tt', 'tv', 'tw', 'tz', 'ua', 'ug', 'um', 'unasur', 'us', 'uy', 'uz', 'va', 'vc', 've', 'vg', 'vi', 'vn', 'vu', 'wf', 'ws', 'ye', 'za', 'zm', 'zw'
+);
+
+.flag {
+  position: relative;
+  display: inline-block;
+  height: $avatar-size;
+  aspect-ratio: 1.33333;
+  background: no-repeat center/cover;
+  box-shadow: $flag-box-shadow;
+  border-radius: $flag-border-radius;
+  vertical-align: bottom;
+
+  &.flag-country-np {
+    box-shadow: none;
+    border-radius: 0;
+  }
+}
+
+@each $country in $countries {
+  .flag-country-#{$country} {
+    background-image: url("#{$assets-base}/img/flags/#{$country}.svg");
+  }
+}
+
+@each $flag-size, $size in $flag-sizes {
+  .flag-#{$flag-size} {
+    height: map-get($size, size);
+  }
+}

data/_sass/ui/_forms.scss

@@ -0,0 +1,241 @@
+textarea {
+  &[cols] {
+    height: auto;
+  }
+}
+
+/**
+Form label
+ */
+.col-form-label,
+.form-label {
+  display: block;
+  font-weight: var(--#{$prefix}font-weight-medium);
+
+  &.required {
+    &:after {
+      content: "*";
+      margin-left: .25rem;
+      color: $red;
+    }
+  }
+}
+
+.form-label-description {
+  float: right;
+  font-weight: var(--#{$prefix}font-weight-normal);
+  color: $form-secondary-color;
+}
+
+/**
+Form hint
+ */
+.form-hint {
+  display: block;
+  color: $form-secondary-color;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  & + .form-control {
+    margin-top: .25rem;
+  }
+
+  .form-label + & {
+    margin-top: -.25rem;
+  }
+
+  .input-group + &,
+  .form-control + &,
+  .form-select + & {
+    margin-top: .5rem;
+    color: $form-secondary-color;
+  }
+}
+
+/**
+Form select
+ */
+.form-select {
+  &:-moz-focusring {
+    color: var(--#{$prefix}body-color);
+  }
+}
+
+/**
+Form control
+ */
+.form-control {
+  &:-webkit-autofill {
+    box-shadow: 0 0 0 1000px var(--#{$prefix}bg-surface-secondary) inset;
+    color: var(--#{$prefix}body-color);
+    -webkit-text-fill-color: var(--#{$prefix}body-color);
+  }
+
+  &:disabled,
+  &.disabled {
+    color: $form-secondary-color;
+    user-select: none;
+  }
+
+  &[size] {
+    width: auto;
+  }
+}
+
+.form-control-light {
+  background-color: var(--#{$prefix}gray-100);
+  border-color: transparent;
+}
+
+.form-control-dark {
+  background-color: rgba($black, .1);
+  color: $white;
+  border-color: transparent;
+
+  &:focus {
+    background-color: rgba($black, .1);
+    box-shadow: none;
+    border-color: rgba($white, .24);
+  }
+
+  &::placeholder {
+    color: rgba($white, .6);
+  }
+}
+
+.form-control-rounded {
+  border-radius: 10rem;
+}
+
+.form-control-flush {
+  padding: 0;
+  background: none !important;
+  border-color: transparent !important;
+  resize: none;
+  box-shadow: none !important;
+  line-height: inherit;
+}
+
+.form-footer {
+  margin-top: 2rem;
+}
+
+.form-fieldset {
+  padding: 1rem;
+  margin-bottom: 1rem;
+  background: var(--#{$prefix}bg-surface-secondary);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  border-radius: var(--#{$prefix}border-radius);
+}
+
+fieldset:empty {
+  display: none;
+}
+
+/**
+Form help
+ */
+.form-help {
+  display: inline-flex;
+  font-weight: var(--#{$prefix}font-weight-bold);
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  font-size: .75rem;
+  color: $form-secondary-color;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  background: var(--#{$prefix}gray-100);
+  border-radius: $border-radius-pill;
+  @include transition(background-color $transition-time, color $transition-time);
+
+  &:hover,
+  &[aria-describedby] {
+    color: $white;
+    background: var(--#{$prefix}primary);
+  }
+}
+
+
+
+/**
+Input group
+ */
+.input-group {
+  box-shadow: $input-box-shadow;
+  border-radius: $input-border-radius;
+
+  .form-control,
+  .btn {
+    box-shadow: none;
+  }
+}
+
+.input-group-link {
+  font-size: $h5-font-size;
+}
+
+.input-group-flat {
+  &:focus-within {
+    box-shadow: $input-focus-box-shadow;
+    border-radius: $input-border-radius;
+
+    .form-control,
+    .input-group-text {
+      border-color: $input-focus-border-color !important;
+    }
+  }
+
+  .form-control {
+    &:focus {
+      border-color: $input-border-color;
+      box-shadow: none;
+    }
+
+    &:not(:last-child) {
+      border-right: 0;
+    }
+
+    &:not(:first-child) {
+      border-left: 0;
+    }
+  }
+
+  .input-group-text {
+    background: $form-check-input-bg;
+    @include transition($input-transition);
+
+    &:first-child {
+      padding-right: 0;
+    }
+
+    &:last-child {
+      padding-left: 0;
+    }
+  }
+}
+
+
+/**
+Upload files
+ */
+.form-file-button {
+  margin-left: 0;
+  border-left: 0;
+}
+
+/**
+Floating inputs
+ */
+// Fix for the bug in twbs/bootstrap v5.3.3. Issue #39080. Should be fixed in v5.3.4
+label[for="floating-input"] {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

data/_sass/ui/_grid.scss

@@ -0,0 +1,115 @@
+.row > * {
+  min-width: 0;
+}
+
+.col-separator {
+  border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+}
+
+.container {
+  @each $variation, $size in $container-variations {
+    &-#{$variation} {
+      @include make-container();
+      max-width: $size;
+    }
+  }
+}
+
+@each $name, $value in (0: 0, sm: .375rem, md: 1.5rem, lg: 3rem) {
+  .row-#{$name} {
+    margin-right: (-$value);
+    margin-left: -($value);
+
+    > .col,
+    > [class*="col-"] {
+      padding-right: $value;
+      padding-left: $value;
+    }
+
+    .card {
+      margin-bottom: 2 * $value;
+    }
+  }
+}
+
+.row-deck {
+  > .col,
+  > [class*="col-"] {
+    display: flex;
+    align-items: stretch;
+
+    .card {
+      flex: 1 1 auto;
+    }
+  }
+}
+
+.row-cards {
+  --#{$prefix}gutter-x: #{$cards-grid-gap};
+  --#{$prefix}gutter-y: #{$cards-grid-gap};
+  min-width: 0;
+
+  .row-cards {
+    flex: 1;
+  }
+}
+
+@each $name, $size in map-merge((null: $spacer), $spacers) {
+  $name-prefixed: if($name == null, null, '-#{$name}');
+
+  .space-y#{$name-prefixed} {
+    display: flex;
+    flex-direction: column;
+    gap: $size;
+  }
+
+  .space-x#{$name-prefixed} {
+    display: flex;
+    gap: $size;
+  }
+}
+
+@each $name, $size in map-merge((null: $spacer), $spacers) {
+  $name-prefixed: if($name == null, null, '-#{$name}');
+
+  .divide-y#{$name-prefixed} {
+    > :not(template) ~ :not(template) {
+      border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
+    }
+
+    > :not(template):not(:first-child) {
+      padding-top: $size !important;
+    }
+
+    > :not(template):not(:last-child) {
+      padding-bottom: $size !important;
+    }
+  }
+
+  .divide-x#{$name-prefixed} {
+    > :not(template) ~ :not(template) {
+      border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
+    }
+
+    > :not(template):not(:first-child) {
+      padding-left: $size !important;
+    }
+
+    > :not(template):not(:last-child) {
+      padding-right: $size !important;
+    }
+  }
+}
+
+.divide-y-fill {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  > :not(template) {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+}