@nulllogic/scssleon 1.0.1 → 1.0.2

package/scss/components/_placeholder.scss

@@ -0,0 +1,33 @@
+/*
+┌─┐┬  ┌─┐┌─┐┌─┐┬ ┬┌─┐┬  ┌┬┐┌─┐┬─┐┌─┐
+├─┘│  ├─┤│  ├┤ ├─┤│ ││   ││├┤ ├┬┘└─┐
+┴  ┴─┘┴ ┴└─┘└─┘┴ ┴└─┘┴─┘─┴┘└─┘┴└─└─┘
+*/
+
+/* 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,33 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+$config: nil !default;
+$theme: nil !default;
+
+$prefix: functions.get-config($config, 'prefix');
+$color_scheme: functions.get-config($config, 'color-scheme');
+
+$is_shadow_enabled: functions.get-config($config, 'shadow');
+$is_border_radius_enabled: functions.get-config($config, 'border-radius');
+
+$label-component: functions.get-theme($theme, 'components.form.checkbox');
+
+.checkbox {
+  @include mixins.generate-properties('checkbox', $label-component, $config);
+
+  background: var(--#{$prefix}-select-background);
+  color: var(--#{$prefix}-select-color);
+  padding: var(--#{$prefix}-select-padding);
+  border: var(--#{$prefix}-select-border);
+
+  @if($is_border_radius_enabled) {
+    @include mixins.border-radius(var(--#{$prefix}-select-border-radius));
+  }
+
+  @if($is_shadow_enabled) {
+    @include mixins.box-shadow(var(--#{$prefix}-select-box-shadow));
+  }
+
+}
+

package/scss/forms/_input-group.scss

@@ -0,0 +1,121 @@
+//
+// Base styles
+//
+
+.input-group {
+//  position: relative;
+//  display: flex;
+//  flex-wrap: wrap; // For form validation feedback
+//  align-items: stretch;
+//  width: 100%;
+//
+//  > .form-control,
+//  > .form-select {
+//    position: relative; // For focus state's z-index
+//    flex: 1 1 auto;
+//    width: 1%;
+//    min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
+//  }
+//
+//  // Bring the "active" form control to the top of surrounding elements
+//  > .form-control:focus,
+//  > .form-select:focus {
+//    z-index: 3;
+//  }
+//
+//  // Ensure buttons are always above inputs for more visually pleasing borders.
+//  // This isn't needed for `.input-group-text` since it shares the same border-color
+//  // as our inputs.
+//  .btn {
+//    position: relative;
+//    z-index: 2;
+//
+//    &:focus {
+//      z-index: 3;
+//    }
+//  }
+//}
+//
+//
+//// Textual addons
+////
+//// Serves as a catch-all element for any text or radio/checkbox input you wish
+//// to prepend or append to an input.
+//
+//.input-group-text {
+//  display: flex;
+//  align-items: center;
+//  padding: $input-group-addon-padding-y $input-group-addon-padding-x;
+//  font-size: $input-font-size; // Match inputs
+//  font-weight: $input-group-addon-font-weight;
+//  line-height: $input-line-height;
+//  color: $input-group-addon-color;
+//  text-align: center;
+//  white-space: nowrap;
+//  background-color: $input-group-addon-bg;
+//  border: $input-border-width solid $input-group-addon-border-color;
+//  @include border-radius($input-border-radius);
+//}
+//
+//
+//// Sizing
+////
+//// Remix the default form control sizing classes into new ones for easier
+//// manipulation.
+//
+//.input-group-lg > .form-control,
+//.input-group-lg > .form-select,
+//.input-group-lg > .input-group-text,
+//.input-group-lg > .btn {
+//  padding: $input-padding-y-lg $input-padding-x-lg;
+//  font-size: $input-font-size-lg;
+//  @include border-radius($input-border-radius-lg);
+//}
+//
+//.input-group-sm > .form-control,
+//.input-group-sm > .form-select,
+//.input-group-sm > .input-group-text,
+//.input-group-sm > .btn {
+//  padding: $input-padding-y-sm $input-padding-x-sm;
+//  font-size : $input-font-size-sm;
+//  @include border-radius($input-border-radius-sm);
+//}
+//
+//.input-group-lg > .form-select,
+//.input-group-sm > .form-select {
+//  padding-right: $form-select-padding-x + $form-select-indicator-padding;
+//}
+//
+//
+//// Rounded corners
+////
+//// These rulesets must come after the sizing ones to properly override sm and lg
+//// border-radius values when extending. They're more specific than we'd like
+//// with the `.input-group >` part, but without it, we cannot override the sizing.
+//
+//// stylelint-disable-next-line no-duplicate-selectors
+//.input-group {
+//  &:not(.has-validation) {
+//    > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
+//    > .dropdown-toggle:nth-last-child(n + 3) {
+//      @include border-end-radius(0);
+//    }
+//  }
+//
+//  &.has-validation {
+//    > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
+//    > .dropdown-toggle:nth-last-child(n + 4) {
+//      @include border-end-radius(0);
+//    }
+//  }
+//
+//  $validation-messages: "";
+//  @each $state in map-keys($form-validation-states) {
+//    $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
+//  }
+//
+//  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
+//    margin-left: -$input-border-width;
+//    @include border-start-radius(0);
+//  }
+}

package/scss/forms/_input.scss

@@ -0,0 +1,34 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+$config: nil !default;
+$theme: nil !default;
+
+$prefix: functions.get-config($config, 'prefix');
+$color_scheme: functions.get-config($config, 'color-scheme');
+
+$is_shadow_enabled: functions.get-config($config, 'shadow');
+$is_border_radius_enabled: functions.get-config($config, 'border-radius');
+
+$label-component: functions.get-theme($theme, 'components.form.input');
+
+.input {
+  @include mixins.generate-properties('input', $label-component, $config);
+
+  background: var(--#{$prefix}-input-background);
+  color: var(--#{$prefix}-input-color);
+  padding: var(--#{$prefix}-input-padding);
+  border: var(--#{$prefix}-input-border);
+
+  @if($is_border_radius_enabled) {
+    @include mixins.border-radius(var(--#{$prefix}-input-border-radius));
+  }
+
+  @if($is_shadow_enabled) {
+    @include mixins.box-shadow(var(--#{$prefix}-input-box-shadow));
+  }
+
+
+}
+

package/scss/forms/_label.scss

@@ -0,0 +1,15 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+$config: nil !default;
+$theme: nil !default;
+
+$prefix: functions.get-config($config, 'prefix');
+$color_scheme: functions.get-config($config, 'color-scheme');
+
+$label-component: functions.get-theme($theme, 'components.form.label');
+
+.label {
+  @include mixins.generate-properties('label', $label-component, $config);
+}

package/scss/forms/_radio.scss

@@ -0,0 +1,34 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+$config: nil !default;
+$theme: nil !default;
+
+$prefix: functions.get-config($config, 'prefix');
+$color_scheme: functions.get-config($config, 'color-scheme');
+
+$is_shadow_enabled: functions.get-config($config, 'shadow');
+$is_border_radius_enabled: functions.get-config($config, 'border-radius');
+
+$label-component: functions.get-theme($theme, 'components.form.radio');
+
+.radio {
+  @include mixins.generate-properties('radio', $label-component, $config);
+
+  background: var(--#{$prefix}-select-background);
+  color: var(--#{$prefix}-select-color);
+  padding: var(--#{$prefix}-select-padding);
+  border: var(--#{$prefix}-select-border);
+
+  @if($is_border_radius_enabled) {
+    @include mixins.border-radius(var(--#{$prefix}-select-border-radius));
+  }
+
+  @if($is_shadow_enabled) {
+    @include mixins.box-shadow(var(--#{$prefix}-select-box-shadow));
+  }
+
+}
+
+

package/scss/forms/_range.scss

@@ -0,0 +1,7 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+$config: nil !default;
+$theme: nil !default;
+

package/scss/forms/_select.scss

@@ -0,0 +1,34 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+$config: nil !default;
+$theme: nil !default;
+
+$prefix: functions.get-config($config, 'prefix');
+$color_scheme: functions.get-config($config, 'color-scheme');
+
+$is_shadow_enabled: functions.get-config($config, 'shadow');
+$is_border_radius_enabled: functions.get-config($config, 'border-radius');
+
+$label-component: functions.get-theme($theme, 'components.form.select');
+
+.select {
+  @include mixins.generate-properties('select', $label-component, $config);
+
+  background: var(--#{$prefix}-select-background);
+  color: var(--#{$prefix}-select-color);
+  padding: var(--#{$prefix}-select-padding);
+  border: var(--#{$prefix}-select-border);
+  appearance: none;
+  -webkit-appearance: none;
+
+  @if($is_border_radius_enabled) {
+    @include mixins.border-radius(var(--#{$prefix}-select-border-radius));
+  }
+
+  @if($is_shadow_enabled) {
+    @include mixins.box-shadow(var(--#{$prefix}-select-box-shadow));
+  }
+
+}

package/scss/forms/_switch.scss

@@ -0,0 +1,18 @@
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
+
+$config: nil !default;
+$theme: nil !default;
+
+$prefix: functions.get-config($config, 'prefix');
+$color_scheme: functions.get-config($config, 'color-scheme');
+
+$is_shadow_enabled: functions.get-config($config, 'shadow');
+$is_border_radius_enabled: functions.get-config($config, 'border-radius');
+
+$label-component: functions.get-theme($theme, 'components.form.input');
+
+.switch {
+
+}

package/scss/forms/_validation.scss

@@ -0,0 +1,12 @@
+// Form validation
+//
+// Provide feedback to users when form field values are valid or invalid. Works
+// primarily for client-side validation via scoped `:invalid` and `:valid`
+// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
+// server-side validation.
+
+// scss-docs-start form-validation-states-loop
+//@each $state, $data in $form-validation-states {
+//  @include form-validation-state($state, $data...);
+//}
+// scss-docs-end form-validation-states-loop

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