@nulllogic/scssleon 1.0.2 → 1.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nulllogic/scssleon",
-  "description": "Most advanced responsive front-end SCSS framework",
-  "version": "1.0.2",
+  "description": "Most advanced, simple and clean SCSS framework",
+  "version": "1.0.3",
   "version_short": "1.0",
   "keywords": [
     "css",
@@ -11,7 +11,8 @@
     "front-end",
     "css-framework",
     "framework",
-    "web"
+    "web",
+    "scssleon"
   ],
   "scripts": {
     "css": "npm run css-compile",
@@ -27,14 +28,13 @@
     "clean-css": "^5.3.3"
   },
   "homepage": "https://nulllogic.github.io/scssleon",
-  "main": ".babelrc.js",
   "style": "dist/scssleon.css",
   "sass": "scss/scssleon.scss",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nulllogic/scssleon.git"
   },
-  "author": "Vladimir Lukyanov",
+  "author": "NullLogic",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/nulllogic/scssleon/issues"

package/scss/components/_loader.scss

@@ -12,4 +12,4 @@
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("loader", "loader", $config, $theme);
+@include mixins.generate-component("loader", "loader", $config, $theme);

package/scss/components/_nav.scss

@@ -11,5 +11,4 @@
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("nav", "nav", $config, $theme);
-
+@include mixins.generate-component("nav", "nav", $config, $theme);

package/scss/components/_navbar.scss

@@ -12,5 +12,4 @@
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("navbar", "navbar", $config, $theme);
-
+@include mixins.generate-component("navbar", "navbar", $config, $theme);

package/scss/components/_placeholder.scss

@@ -31,3 +31,4 @@ $theme: nil !default;
     -webkit-mask-position: -200% 0;
   }
 }
+

package/scss/forms/_checkbox.scss

@@ -2,32 +2,13 @@
 @use '../functions' as functions;
 @use '../mixins' as mixins;
 
+/* SCSS variables definition requirement */
 $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));
-  }
-
-}
-
+@include mixins.generate-component(
+  "form.checkbox",
+  "checkbox",
+  $config,
+  $theme
+);

package/scss/forms/_input-group.scss

@@ -1,121 +1,14 @@
-//
-// Base styles
-//
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
 
-.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);
-//  }
-}
+/* 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

@@ -2,33 +2,13 @@
 @use '../functions' as functions;
 @use '../mixins' as mixins;
 
+/* SCSS variables definition requirement */
 $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));
-  }
-
-
-}
-
+@include mixins.generate-component(
+  "form.input",
+  "input",
+  $config,
+  $theme
+);

package/scss/forms/_label.scss

@@ -2,14 +2,13 @@
 @use '../functions' as functions;
 @use '../mixins' as mixins;
 
+/* SCSS variables definition requirement */
 $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);
-}
+@include mixins.generate-component(
+  "form.label",
+  "label",
+  $config,
+  $theme
+);

package/scss/forms/_radio.scss

@@ -2,33 +2,13 @@
 @use '../functions' as functions;
 @use '../mixins' as mixins;
 
+/* SCSS variables definition requirement */
 $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));
-  }
-
-}
-
-
+@include mixins.generate-component(
+  "form.radio",
+  "radio",
+  $config,
+  $theme
+);

package/scss/forms/_range.scss

@@ -2,6 +2,13 @@
 @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

@@ -2,33 +2,13 @@
 @use '../functions' as functions;
 @use '../mixins' as mixins;
 
+/* SCSS variables definition requirement */
 $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));
-  }
-
-}
+@include mixins.generate-component(
+  "form.select",
+  "select",
+  $config,
+  $theme
+);

package/scss/forms/_switch.scss

@@ -2,17 +2,13 @@
 @use '../functions' as functions;
 @use '../mixins' as mixins;
 
+/* SCSS variables definition requirement */
 $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 {
-
-}
+@include mixins.generate-component(
+  "form.switch",
+  "switch",
+  $config,
+  $theme
+);

package/scss/forms/_validation.scss

@@ -1,12 +1,14 @@
-// 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.
+@use '../themes/default' as theme;
+@use '../functions' as functions;
+@use '../mixins' as mixins;
 
-// 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
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component(
+  "form.validation",
+  "validation",
+  $config,
+  $theme
+);

package/scss/mixins/generators/_properties.scss

@@ -8,30 +8,36 @@
 @mixin generate-css-properties($tag, $property, $value, $config) {
   $prefix: functions.get-config($config, "prefix");
 
-  --#{$prefix}-#{$tag}-#{functions.str-replace($property, '--', '')}: #{meta.inspect(
+  & {
+    --#{$prefix}-#{$tag}-#{functions.str-replace($property, '--', '')}: #{meta.inspect(
       $value
     )};
+  }
 }
 
 @mixin generate-css-variables($tag, $property, $value, $config) {
   $prefix: functions.get-config($config, "prefix");
 
   @if (meta.type-of($value) == "string" and str-index($value, "var(--") == 1) {
-    #{$property}: #{meta.inspect(
+    & {
+      #{$property}: #{meta.inspect(
         functions.str-replace($value, "--", "--" + $prefix + "-" + $tag + "-")
       )};
-  } @else if
-    (type-of($value) == "string" and str-index($value, "var(global(") == 1)
-  {
-    #{$property}: #{meta.inspect(
+    }
+  } @else if (type-of($value) == "string" and str-index($value, "var(global(") == 1) {
+    & {
+      #{$property}: #{meta.inspect(
         functions.str-replace(
           string.slice($value, 0, string.length($value) - 1),
           "global(--",
           "--" + $prefix + "-root-"
         )
       )};
+    }
   } @else {
-    #{$property}: #{meta.inspect($value)};
+    & {
+      #{$property}: #{meta.inspect($value)};
+    }
   }
 }
 
@@ -39,15 +45,15 @@
   $prefix: functions.get-config($config, "prefix");
 
   @each $color, $color-properties in $value {
-    @each $scheme
-      in functions.str-split(functions.get-config($config, "color-scheme"), " ")
-    {
+    @each $scheme in functions.str-split(functions.get-config($config, "color-scheme"), " ") {
       @if $scheme == $color {
         @include mixin.generate-color-scheme($color) {
           @each $color-property, $color-value in $color-properties {
-            --#{$prefix}-#{$tag}-#{functions.str-replace($color-property, '--', '')}: #{meta.inspect(
+            & {
+              --#{$prefix}-#{$tag}-#{functions.str-replace($color-property, '--', '')}: #{meta.inspect(
                 $color-value
               )};
+            }
           }
         }
       }
@@ -83,22 +89,22 @@
     // Looking for "--" symbols in the beginning of the property
     // Example: --flex-direction : row
     @if (
-      meta.type-of($property) == "string" and str-index($property, "--") == 1
+        meta.type-of($property) == "string" and str-index($property, "--") == 1
     ) {
       @include generate-css-properties($tag, $property, $value, $config);
     }
 
-    // Colors
+      // Colors
     @else if ($property == "colors") {
       @include generate-colors($tag, $value, $config);
     }
 
-    // Responsive
+      // Responsive
     @else if ($property == "responsive") {
       @include generate-responsive($tag, $value, $config);
     }
 
-    // Subclasses
+      // Subclasses
     @else if ($property == "subclasses") {
       @each $class, $class_properties in $value {
         @include generate-subclasses($tag, $class, $class_properties, $config);

package/scss/scssleon.scss

@@ -114,7 +114,7 @@ $theme: theme.$theme;
   $config: $config,
   $theme: $theme
 );
-@use "components/button-group" with (
+@use "components/button_group" with (
   $config: $config,
   $theme: $theme
 );