@nulllogic/scssleon 1.0.1 → 1.0.3

package/scss/components/_placeholder.scss

@@ -0,0 +1,34 @@
+/*
+┌─┐┬  ┌─┐┌─┐┌─┐┬ ┬┌─┐┬  ┌┬┐┌─┐┬─┐┌─┐
+├─┘│  ├─┤│  ├┤ ├─┤│ ││   ││├┤ ├┬┘└─┐
+┴  ┴─┘┴ ┴└─┘└─┘┴ ┴└─┘┴─┘─┴┘└─┘┴└─└─┘
+*/
+
+/* Load settings and functions */
+@use "../mixins" as mixins;
+@use "../functions" as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component(
+  "placeholder",
+  "placeholder",
+  $config,
+  $theme
+);
+
+@keyframes placeholder-glow {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes placeholder-wave {
+  100% {
+    mask-position: -200% 0;
+    -webkit-mask-position: -200% 0;
+  }
+}
+

package/scss/components/_sidecap.scss

@@ -0,0 +1,15 @@
+/*
+┌─┐┬┌┬┐┌─┐┌─┐┌─┐┌─┐
+└─┐│ ││├┤ │  ├─┤├─┘
+└─┘┴─┴┘└─┘└─┘┴ ┴┴
+*/
+
+/* Load settings and functions */
+@use "../mixins" as mixins;
+@use "../functions" as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component("sidecap", "sidecap", $config, $theme);

package/scss/components/_table.scss

@@ -0,0 +1,78 @@
+/*
+┌┬┐┌─┐┌┐ ┬  ┌─┐
+ │ ├─┤├┴┐│  ├┤
+ ┴ ┴ ┴└─┘┴─┘└─┘
+*/
+
+/* Load settings and functions */
+@use "../mixins" as mixins;
+@use "../functions" as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+.table {
+  width: 100%;
+  color: inherit;
+  vertical-align: middle;
+  border-color: inherit;
+
+  > :not(caption) > * > * {
+    padding: 5px;
+    border-bottom-width: 1px;
+  }
+
+  > tbody {
+    vertical-align: inherit;
+  }
+
+  > thead {
+    vertical-align: bottom;
+  }
+}
+
+.table-group-divider {
+  border-top: 1px solid #ccc;
+}
+
+// Border versions
+.table-bordered {
+  > :not(caption) > * {
+    border-width: 1px;
+
+    > * {
+      border-width: 1px;
+    }
+  }
+}
+
+.table-borderless {
+  > :not(caption) > * > * {
+    border-bottom-width: 0;
+  }
+
+  > :not(:first-child) {
+    border-top-width: 0;
+  }
+}
+
+// Zebra-striping
+.table-striped {
+  > tbody > tr:nth-of-type(odd) > * {
+    color: inherit;
+  }
+}
+
+// For columns
+.table-striped-columns {
+  > :not(caption) > tr > :nth-child(even) {
+    color: inherit;
+  }
+}
+
+.table-hover {
+  > tbody > tr:hover > * {
+    color: inherit;
+  }
+}

package/scss/forms/_checkbox.scss

@@ -0,0 +1,14 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component(
+  "form.checkbox",
+  "checkbox",
+  $config,
+  $theme
+);

package/scss/forms/_input-group.scss

@@ -0,0 +1,14 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component(
+  "form.input-group",
+  "input-group",
+  $config,
+  $theme
+);

package/scss/forms/_input.scss

@@ -0,0 +1,14 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component(
+  "form.input",
+  "input",
+  $config,
+  $theme
+);

package/scss/forms/_label.scss

@@ -0,0 +1,14 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component(
+  "form.label",
+  "label",
+  $config,
+  $theme
+);

package/scss/forms/_radio.scss

@@ -0,0 +1,14 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component(
+  "form.radio",
+  "radio",
+  $config,
+  $theme
+);

package/scss/forms/_range.scss

@@ -0,0 +1,14 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component(
+  "form.range",
+  "range",
+  $config,
+  $theme
+);

package/scss/forms/_select.scss

@@ -0,0 +1,14 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component(
+  "form.select",
+  "select",
+  $config,
+  $theme
+);

package/scss/forms/_switch.scss

@@ -0,0 +1,14 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component(
+  "form.switch",
+  "switch",
+  $config,
+  $theme
+);

package/scss/forms/_validation.scss

@@ -0,0 +1,14 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component(
+  "form.validation",
+  "validation",
+  $config,
+  $theme
+);

package/scss/helpers/_clearfix.scss

@@ -0,0 +1,5 @@
+@use '../mixins' as mixins;
+
+.clearfix {
+  @include mixins.clearfix();
+}

package/scss/helpers/_screen_reader.scss

@@ -0,0 +1,11 @@
+.sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/scss/helpers/_text_truncate.scss

@@ -0,0 +1,5 @@
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/scss/mixins/_border-radius.scss

@@ -0,0 +1,3 @@
+@mixin border-radius($radius) {
+  border-radius: $radius;
+}

package/scss/mixins/_box-shadow.scss

@@ -0,0 +1,16 @@
+@mixin box-shadow($shadow...) {
+  $result: ();
+
+  @each $value in $shadow {
+    @if $value != null {
+      $result: append($result, $value, "comma");
+    }
+    @if $value == none and length($shadow) > 1 {
+      @warn "The keyword 'none' must be used as a single argument.";
+    }
+  }
+
+  @if (length($result) > 0) {
+    box-shadow: $result;
+  }
+}

package/scss/mixins/_breakpoints.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+@use '../functions' as functions;
+
+@mixin breakpoint($size, $type) {
+
+  @media (screen and min-width: $size) {
+    @content;
+  }
+
+}

package/scss/mixins/_clearfix.scss

@@ -0,0 +1,9 @@
+// scss-docs-start clearfix
+@mixin clearfix() {
+  &::after {
+    display: block;
+    clear: both;
+    content: "";
+  }
+}
+// scss-docs-end clearfix

package/scss/mixins/_forms.scss

@@ -0,0 +1,152 @@
+// This mixin uses an `if()` technique to be compatible with Dart Sass
+// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
+
+// scss-docs-start form-validation-mixins
+@mixin form-validation-state-selector($state) {
+  @if ($state == "valid" or $state == "invalid") {
+    .was-validated #{if(&, "&", "")}:#{$state},
+    #{if(&, "&", "")}.is-#{$state} {
+      @content;
+    }
+  } @else {
+    #{if(&, "&", "")}.is-#{$state} {
+      @content;
+    }
+  }
+}
+
+@mixin form-validation-state(
+  $state,
+  $color,
+  $icon,
+  $tooltip-color: color-contrast($color),
+  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
+  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
+) {
+  .#{$state}-feedback {
+    display: none;
+    width: 100%;
+    margin-top: $form-feedback-margin-top;
+    font-size : $form-feedback-font-size;
+    font-style: $form-feedback-font-style;
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    position: absolute;
+    top: 100%;
+    z-index: 5;
+    display: none;
+    max-width: 100%; // Contain to parent when possible
+    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+    margin-top: .1rem;
+    font-size : $form-feedback-tooltip-font-size;
+    line-height: $form-feedback-tooltip-line-height;
+    color: $tooltip-color;
+    background-color: $tooltip-bg-color;
+    @include border-radius($form-feedback-tooltip-border-radius);
+  }
+
+  @include form-validation-state-selector($state) {
+    ~ .#{$state}-feedback,
+    ~ .#{$state}-tooltip {
+      display: block;
+    }
+  }
+
+  .form-control {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-image: escape-svg($icon);
+        background-repeat: no-repeat;
+        background-position: right $input-height-inner-quarter center;
+        background-size: $input-height-inner-half $input-height-inner-half;
+      }
+
+      &:focus {
+        border-color: $color;
+        box-shadow: $focus-box-shadow;
+      }
+    }
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  textarea.form-control {
+    @include form-validation-state-selector($state) {
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+      }
+    }
+  }
+
+  .form-select {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      @if $enable-validation-icons {
+        &:not([multiple]):not([size]),
+        &:not([multiple])[size="1"] {
+          padding-right: $form-select-feedback-icon-padding-end;
+          background-image: escape-svg($form-select-indicator), escape-svg($icon);
+          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+        }
+      }
+
+      &:focus {
+        border-color: $color;
+        box-shadow: $focus-box-shadow;
+      }
+    }
+  }
+
+  .form-control-color {
+    @include form-validation-state-selector($state) {
+      @if $enable-validation-icons {
+        width: add($form-color-width, $input-height-inner);
+      }
+    }
+  }
+
+  .form-check-input {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      &:checked {
+        background-color: $color;
+      }
+
+      &:focus {
+        box-shadow: $focus-box-shadow;
+      }
+
+      ~ .form-check-label {
+        color: $color;
+      }
+    }
+  }
+  .form-check-inline .form-check-input {
+    ~ .#{$state}-feedback {
+      margin-left: .5em;
+    }
+  }
+
+  .input-group .form-control,
+  .input-group .form-select {
+    @include form-validation-state-selector($state) {
+      @if $state == "valid" {
+        z-index: 1;
+      } @else if $state == "invalid" {
+        z-index: 2;
+      }
+      &:focus {
+        z-index: 3;
+      }
+    }
+  }
+}
+// scss-docs-end form-validation-mixins

package/scss/mixins/_gradients.scss

@@ -0,0 +1,6 @@
+// Gradients
+// scss-docs-start gradient-bg-mixin
+@mixin gradient-bg($color: null) {
+  background-color: $color;
+}
+// scss-docs-end gradient-bg-mixin

package/scss/mixins/_grid.scss

@@ -0,0 +1,93 @@
+
+@use 'sass:map';
+@use "sass:meta";
+
+@use '../config';
+@use './breakpoints' as mixins;
+@use '../functions' as functions;
+
+// Row columns
+@function divide($dividend, $divisor, $precision: 10) {
+
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+
+  @if $dividend == 0 {
+    @return 0;
+  }
+
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+
+  @while ($remainder > 0 and $precision >= 0) {
+    $quotient: 0;
+
+    @while ($remainder >= $divisor) {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+
+    $result: $result * 10 + $quotient;
+    $factor: $factor * .1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 1;
+    }
+
+  }
+  $result: $result * $factor * $sign;
+
+  @return $result;
+}
+
+@mixin generate_columns($size: false, $columns) {
+
+  @if $size {
+    flex: 0 0 auto;
+    width: percentage(divide($size, $columns));
+
+  } @else {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
+
+}
+
+// Framework grid generation
+@mixin generate_grid_columns($columns, $breakpoints) {
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: mixins.breakpoint-infix($breakpoint, $breakpoints);
+
+    @include mixins.media-breakpoint-up($breakpoint, $breakpoints) {
+
+      .col#{$infix} {
+        flex: 1 0 0;
+      }
+
+      .col#{$infix}-auto {
+        flex: 0 0 auto;
+        width: auto;
+      }
+
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .col#{$infix}-#{$i} {
+            @include generate_columns($i, $columns);
+          }
+        }
+
+      }
+
+    }
+  }
+
+}

package/scss/mixins/_transition.scss

@@ -0,0 +1,30 @@
+@mixin transition($transition...) {
+  @if length($transition) == 0 {
+    $transition: config.$transition-base;
+  }
+
+  @if length($transition) > 1 {
+    @each $value in $transition {
+      @if $value == null or $value == none {
+        @warn "The keyword 'none' or 'null' must be used as a single argument.";
+      }
+    }
+  }
+
+  @if config.$enable-transitions {
+    @if nth($transition, 1) != null {
+      transition: $transition;
+    }
+
+    @if config.$enable-reduced-motion and
+      nth($transition, 1) !=
+      null and
+      nth($transition, 1) !=
+      none
+    {
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+  }
+}

package/scss/mixins/_utilities.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+
+// Utility generator
+// Used to generate utilities & print utilities
+@mixin generate-utility($property, $settings) {
+  $class : map.get($settings, 'property');
+  $values : map.get($settings, 'values');
+  $suffix : map.get($settings, 'suffix');
+
+  @each $name, $value in $values {
+    .#{$name} {
+      #{$property} : #{$value};
+    }
+  }
+}

package/scss/mixins/generators/_color-sheme.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+
+@use '../../functions' as functions;
+
+// Media that add color variables
+
+@mixin generate-color-scheme($schema) {
+  @if $schema == 'light' {
+    @media (prefers-color-scheme: light) {
+      @content
+    }
+  } @else if $schema == 'dark' {
+    @media (prefers-color-scheme: dark) {
+      @content
+    }
+  }
+}

package/scss/mixins/generators/_components.scss

@@ -0,0 +1,33 @@
+@use "sass:map";
+@use "sass:meta";
+
+@use "properties";
+@use "wrapper";
+
+@use "../../functions" as functions;
+
+@mixin generate-component($component, $class, $config, $theme) {
+  $theme-component: "";
+
+  // Checking, if the component was previously defined inside theme components
+  @if (meta.type-of($component) == "string") {
+    /* Loading component settings and styling */
+    $theme-component: functions.get-theme(
+      $theme,
+      "components" + "." + $component
+    );
+  } @else {
+    $theme-component: $component;
+  }
+
+  %#{$class} {
+    @include properties.generate-properties($class, $theme-component, $config);
+  }
+
+  @include wrapper.generate-wrapper($config) {
+    .#{$class} {
+      @extend %#{$class};
+    }
+  }
+}
+