@nulllogic/scssleon 1.0.1 → 1.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nulllogic/scssleon",
-  "description": "Most advanced responsive front-end SCSS framework",
-  "version": "1.0.1",
+  "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/_base.scss

@@ -0,0 +1,31 @@
+/*
+┌┐ ┌─┐┌─┐┌─┐
+├┴┐├─┤└─┐├┤ 
+└─┘┴ ┴└─┘└─┘
+*/
+
+@use "sass:map";
+@use "sass:meta";
+@use "functions" as functions;
+@use "mixins" as mixins;
+
+$config: nil !default;
+$theme: nil !default;
+
+$prefix: functions.get-config($config, "prefix");
+
+$is-reset-enabled: functions.get-config($config, "enable.reset");
+$is-button-pointers-enabled: functions.get-config(
+  $config,
+  "enable.button-pointers"
+);
+
+$is-spacing-enabled: functions.get-config($config, "enable.spacing");
+
+$color_scheme: functions.get-config($config, "color-scheme");
+
+@each $tag, $properties in functions.get-theme($theme, "html") {
+  #{$tag} {
+    @include mixins.generate-properties(#{$tag}, $properties, $config);
+  }
+}

package/scss/_config.scss

@@ -0,0 +1,109 @@
+/*
+┌─┐┌─┐┌┐┌┌─┐┬┌─┐
+│  │ ││││├┤ ││ ┬
+└─┘└─┘┘└┘└  ┴└─┘
+*/
+@use "sass:map";
+
+// Root
+
+// ==================================================
+// User config
+// ==================================================
+// Deep merged with the default config. This means that this will override existing keys and append new key value pairs.
+$config: () !default;
+
+$default-config: (
+  // scss-docs-start root-variables
+  prefix: "xii",
+  wrapper-class: "wrapper" // scss-docs-end root-variables
+);
+
+// Container breakpoints
+// scss-docs-start container-max-widths
+$breakpoints-config: (
+  breakpoints: (
+    sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1140px,
+    xxl: 1320px,
+  ),
+) !default;
+// scss-docs-end container-max-widths
+
+$default-config: map.deep-merge($default-config, $breakpoints-config);
+
+// Grid breakpoints
+// scss-docs-start grid-breakpoints
+$grid-breakpoints-config: (
+  grid-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px,
+  ),
+);
+// scss-docs-end grid-breakpoints
+
+$default-config: map.deep-merge($default-config, $grid-breakpoints-config);
+
+$color_scheme-config: (
+  color-scheme: "light dark",
+);
+
+$default-config: map.deep-merge($default-config, $color_scheme-config);
+
+$enable-rules-config: (
+  enable: (
+    shadow: true,
+    border-radius: true,
+    transitions: true,
+    reduced-motion: true,
+    smooth-scroll: true,
+    dark-theme: true,
+    spacing: false,
+    reset: true,
+    rtl: false,
+    button-pointers: true,
+    content-class: true,
+    wrapper: true,
+  ),
+);
+
+$default-config: map.deep-merge($default-config, $enable-rules-config);
+
+// Content
+$content-default-config: (
+  content: (
+    elements: (
+      margin: 0 0 1rem 0,
+    ),
+  ),
+) !default;
+
+$default-config: map.deep-merge($default-config, $content-default-config);
+
+// Z-index
+// scss-docs-start z-index-stack
+$z-index-config: (
+  z-index: (
+    dropdown: 1000,
+    sticky: 1020,
+    fixed: 1030,
+    offcanvas-backdrop: 1040,
+    offcanvas: 1045,
+    modal-backdrop: 1050,
+    modal: 1055,
+    popover: 1070,
+    tooltip: 1080,
+    toast: 1090,
+  ),
+) !default;
+// scss-docs-end z-index-stack
+
+$default-config: map.deep-merge($default-config, $z-index-config);
+
+$config: map.deep-merge($default-config, $config);

package/scss/_content.scss

@@ -0,0 +1,24 @@
+/*
+┌─┐┌─┐┌┐┌┌┬┐┌─┐┌┐┌┌┬┐
+│  │ ││││ │ ├┤ │││ │
+└─┘└─┘┘└┘ ┴ └─┘┘└┘ ┴
+*/
+@use "sass:map";
+@use "functions" as functions;
+@use "./mixins" as mixins;
+
+$config: nil !default;
+$theme: nil !default;
+
+$is-content-enabled: functions.get-config($config, "enable.content");
+
+@if ($is-content-enabled) {
+  .content {
+    @each $tag, $properties in functions.get-theme($theme, "content") {
+      #{$tag} {
+        @include mixins.generate-properties(#{$tag}, $properties, $config);
+      }
+    }
+  }
+}
+

package/scss/_functions.scss

@@ -0,0 +1,97 @@
+@use 'sass:list';
+@use 'sass:map';
+
+@function str-split($string, $separator) {
+  $split-arr: ();
+  $index : str-index($string, $separator);
+  @while $index != null {
+    $item: str-slice($string, 1, $index - 1);
+    $split-arr: append($split-arr, $item);
+    $string: str-slice($string, $index + 1);
+    $index : str-index($string, $separator);
+  }
+  $split-arr: append($split-arr, $string);
+
+  @return $split-arr;
+}
+
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+@function get-config($config, $value) {
+  $val: null;
+
+  @if($config == nil) {
+    @warn 'Config variable is nil';
+    @return nil;
+  }
+
+  @if (str-index($value, '.')) {
+    $path: str-split($value, '.');
+    $val: map.get($config, $path...);
+  } @else {
+    $val: map.get($config, $value);
+  }
+
+  @if ($val != null) {
+    @return $val;
+  } @else {
+    @return nil;
+  }
+}
+
+@function get-theme($theme, $value) {
+  $val: null;
+
+  @if($theme == nil) {
+    @warn 'Theme variable is nil';
+    @return nil;
+  }
+
+  @if (str-index($value, '.')) {
+    $path: str-split($value, '.');
+    $val: map.get($theme, $path...);
+  } @else {
+    $val: map.get($theme, $value);
+  }
+
+  @if ($val != null) {
+    @return $val;
+  } @else {
+    @return nil;
+  }
+
+}
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+//
+// Requires the use of quotes around data URIs.
+@function escape-svg($string) {
+  @if str-index($string, "data:image/svg+xml") {
+    @each $char, $encoded in $escaped-characters {
+      // Do not escape the url brackets
+      @if str-index($string, "url(") == 1 {
+        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      } @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+
+  @return $string;
+}
+
+@function add_components($components) {
+  $components_updated: ();
+  @each $component in $components {
+    $components_updated : list.append($components_updated, "components/" + $component);
+  }
+  @return $components_updated;
+}

package/scss/_mixins.scss

@@ -0,0 +1,22 @@
+// ↓ Helpers
+@forward "mixins/breakpoints";
+@forward "mixins/clearfix";
+
+@forward "mixins/box-shadow";
+@forward "mixins/border-radius";
+@forward "mixins/transition";
+@forward "mixins/gradients";
+
+// ↓ Generators
+@forward "mixins/generators/color-sheme";
+@forward "mixins/generators/components";
+@forward "mixins/generators/properties";
+@forward "mixins/generators/wrapper";
+
+// ↓ Utilities
+@forward "mixins/utilities";
+
+// ↓ Components
+@forward "mixins/forms";
+
+// ↓ Layout

package/scss/_reset.scss

@@ -0,0 +1,347 @@
+/*
+┬─┐┌─┐┌─┐┌─┐┌┬┐
+├┬┘├┤ └─┐├┤  │
+┴└─└─┘└─┘└─┘ ┴
+*/
+
+@use "sass:map";
+@use "sass:meta";
+@use "functions" as functions;
+@use "mixins" as mixins;
+
+$config: nil !default;
+$theme: nil !default;
+
+$prefix: functions.get-config($config, "prefix");
+
+$is-reset-enabled: functions.get-config($config, "enable.reset");
+$is-button-pointers-enabled: functions.get-config(
+  $config,
+  "enable.button-pointers"
+);
+$is-spacing-enabled: functions.get-config($config, "enable.spacing");
+
+$color_scheme: functions.get-config($config, "color-scheme");
+
+@if $is-reset-enabled {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  // Abbreviations
+  // 1. "text-decoration" correct text decoration in Chrome, Edge, Opera, and Safari.
+  // 2. "cursor" explicit cursor to indicate changed behavior.
+  // 3. "text-decoration-skip-ink" prevent the text-decoration to be skipped.
+  abbr[title] {
+    text-decoration: underline dotted;
+    cursor: help;
+    text-decoration-skip-ink: none;
+  }
+
+  // Lists
+  ul,ol,
+  ol ol,
+  ul ul,
+  ol ul,
+  ul ol {
+    margin: 0;
+  }
+
+  // Sub and Sup
+  // Prevent `sub` and `sup` elements from affecting the line height in
+  // all browsers.
+  sub,
+  sup {
+    position: relative;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  // And undo these styles for placeholder links/named anchors (without href).
+  // It would be more straightforward to just use a[href] in previous block, but that
+  // causes specificity issues in many other styles that are too complex to fix.
+  a:not([href]):not([class]) {
+    &,
+    &:hover {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
+  // Code
+  pre,
+  code,
+  kbd,
+  samp {
+    font-size: 1em; // Correct the odd `em` font sizing in all browsers.
+  }
+
+  // 1. "margin" remove browser default top margin
+  // 2. "overflow" don't allow content to break outside
+
+  pre {
+    display: block;
+    margin: 0;
+    overflow: auto;
+
+    // Account for some code outputs that place code tags in pre tags
+    code {
+      font-size: inherit;
+      color: inherit;
+      word-break: normal;
+    }
+  }
+
+  code {
+    word-wrap: break-word;
+    // Streamline the style when inside anchors to avoid broken underline and more
+    a > & {
+      color: inherit;
+    }
+  }
+
+  kbd {
+    padding: 0.1875rem 0.375rem;
+    font-size: 0.875em;
+    border-radius: 0.25rem;
+
+    kbd {
+      padding: 0;
+      font-size: inherit;
+    }
+  }
+
+  // Figures
+  // Apply a consistent margin strategy (matches our type styles).
+  figure {
+    margin: 0;
+  }
+
+  // Images and content
+  img,
+  svg {
+    vertical-align: middle;
+  }
+
+  // Tables
+  // Prevent double borders
+  table {
+    caption-side: bottom;
+    border-collapse: collapse;
+  }
+
+  caption {
+    text-align: left;
+  }
+
+  // 1. "font-weight" removes font-weight bold by inheriting
+  // 2. "text-align" matches default `<td>` alignment by inheriting `text-align`.
+  // 3. "text-align" fix alignment for Safari
+  th {
+    font-weight: inherit; // 1
+    text-align: inherit; // 2
+    text-align: -webkit-match-parent; // 3
+  }
+
+  thead,
+  tbody,
+  tfoot,
+  tr,
+  td,
+  th {
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+  }
+
+  // Forms
+  // Remove the default `border-radius` that macOS Chrome adds.
+  button {
+    border-radius: 0;
+  }
+
+  // Explicitly remove focus outline in Chromium when it shouldn't be
+  // visible (e.g. as result of mouse click or touch tap). It already
+  // should be doing this automatically, but seems to currently be
+  // confused and applies its very visible two-tone outline anyway.
+  button:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  // 1. "margin" remove the margin in Firefox and Safari
+  input,
+  button,
+  select,
+  optgroup,
+  textarea {
+    margin: 0;
+    line-height: inherit;
+  }
+
+  // Remove the inheritance of text transform in Firefox
+  button,
+  select {
+    text-transform: none;
+  }
+  // Set the cursor for non-`<button>` buttons
+  [role="button"] {
+    cursor: pointer;
+  }
+
+  select {
+    // Remove the inheritance of word-wrap in Safari.
+    word-wrap: normal;
+
+    // Undo the opacity change from Chrome
+    &:disabled {
+      opacity: 1;
+    }
+  }
+
+  // Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
+  // See https://stackoverflow.com/a/54997118
+  [list]:not([type="date"]):not([type="datetime-local"]):not(
+      [type="month"]
+    ):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
+    display: none !important;
+  }
+
+  // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+  //    controls in Android 4.
+  // 2. Correct the inability to style clickable types in iOS and Safari.
+  // 3. Opinionated: add "hand" cursor to non-disabled button elements.
+
+  button,
+  [type="button"], // 1
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button; // 2
+
+    @if $is-button-pointers-enabled {
+      &:not(:disabled) {
+        cursor: pointer; // 3
+      }
+    }
+  }
+
+  // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+  ::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+
+  // 1. "resize" textareas should really only resize vertically so they don't break their (horizontal) containers.
+  textarea {
+    resize: vertical;
+  }
+
+  // 1. "min-width" browsers set a default `min-width: min-content;` on fieldsets,
+  //    unlike e.g. `<div>`s, which have `min-width: 0;` by default.
+  //    So we reset that to ensure fieldsets behave more like a standard block element.
+  //    See https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+  // 2. "border" reset the default outline behavior of fieldsets so they don't affect page layout.
+
+  fieldset {
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  // 1. By using `float: left`, the legend will behave like a block element.
+  //    This way the border of a fieldset wraps around the legend if present.
+  // 2. "clear" fix wrapping bug.
+  legend {
+    float: left;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    line-height: inherit;
+
+    + * {
+      clear: left; // 2
+    }
+  }
+
+  // Fix height of inputs with a type of datetime-local, date, month, week, or time
+  ::-webkit-datetime-edit-fields-wrapper,
+  ::-webkit-datetime-edit-text,
+  ::-webkit-datetime-edit-minute,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-year-field {
+    padding: 0;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  // 1. Correct the outline style in Safari.
+  // 2. This overrides the extra rounded corners on search inputs in iOS
+  [type="search"] {
+    outline-offset: -2px; // 1
+    -webkit-appearance: textfield; // 2
+  }
+
+  // 1. A few input types should stay LTR
+  // See https://rtlstyling.com/posts/rtl-styling#form-inputs
+  // 2. RTL only output
+  // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
+
+  /* rtl:raw:
+  [type="tel"],
+  [type="url"],
+  [type="email"],
+  [type="number"] {
+    direction: ltr;
+  }
+  */
+
+  // Remove the inner padding in Chrome and Safari on macOS.
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  // Remove padding around color pickers in webkit browsers
+  ::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  // 1. Inherit font family and line height for file input buttons
+  // 2. Correct the inability to style clickable types in iOS and Safari.
+  ::file-selector-button {
+    font: inherit; // 1
+    -webkit-appearance: button; // 2
+  }
+
+  // Correct element displays
+  output {
+    display: inline-block;
+  }
+
+  // Remove border from iframe
+  iframe {
+    border: 0;
+  }
+
+  // Summary
+  // 1. "display" add the correct display in all browsers
+  summary {
+    display: list-item;
+    cursor: pointer;
+  }
+
+  // Progress
+  progress {
+    vertical-align: baseline;
+  }
+
+  // Hidden attribute
+  [hidden] {
+    display: none !important;
+  }
+}

package/scss/_root.scss

@@ -0,0 +1,36 @@
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+@use "sass:string";
+@use "./mixins" as mixins;
+@use "./functions" as functions;
+
+$config: () !default;
+$theme: () !default;
+
+$prefix: functions.get-config($config, "prefix");
+
+$is-smooth-scroll-enabled: functions.get-config(
+  $config,
+  "enable.smooth-scroll"
+);
+
+$color_scheme: functions.get-config($config, "color-scheme");
+
+$root-variables: functions.get-theme($theme, "root.variables");
+
+:root {
+  @if $is-smooth-scroll-enabled {
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+  }
+
+  & {
+    color-scheme: string.unquote($color_scheme);
+  }
+
+  @include mixins.generate-properties(
+    "root",
+    functions.get-theme($theme, "root"),
+    $config
+  );
+}