npm - noctemyth - Versions diffs - 0.0.36 - Mend

noctemyth 0.0.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/LICENSE +21 -0
package/README.md +60 -0
package/dist/css/noctemyth-skelton.css +11880 -0
package/dist/css/noctemyth-skelton.css.map +1 -0
package/dist/css/noctemyth-skelton.min.css +11880 -0
package/dist/css/noctemyth-skelton.min.css.map +1 -0
package/dist/css/noctemyth-utilities.css +142390 -0
package/dist/css/noctemyth-utilities.css.map +1 -0
package/dist/css/noctemyth-utilities.min.css +142390 -0
package/dist/css/noctemyth-utilities.min.css.map +1 -0
package/dist/css/noctemyth.css +51864 -0
package/dist/css/noctemyth.css.map +1 -0
package/dist/css/noctemyth.min.css +26439 -0
package/dist/css/noctemyth.min.css.map +1 -0
package/package.json +61 -0
package/src/animations/fade.scss +41 -0
package/src/animations/index.scss +1 -0
package/src/backgrounds/dot.scss +55 -0
package/src/backgrounds/gingham.scss +56 -0
package/src/backgrounds/index.scss +5 -0
package/src/backgrounds/rhombus.scss +49 -0
package/src/backgrounds/stripe.scss +45 -0
package/src/backgrounds/zigzag.scss +71 -0
package/src/base/dub.scss +9 -0
package/src/base/element.scss +5 -0
package/src/base/index.scss +3 -0
package/src/base/normalize.scss +394 -0
package/src/components/accordion.scss +179 -0
package/src/components/badge.scss +109 -0
package/src/components/blockquote.scss +92 -0
package/src/components/breadcrumbs.scss +47 -0
package/src/components/button.scss +157 -0
package/src/components/card.scss +89 -0
package/src/components/dialogue.scss +452 -0
package/src/components/div.scss +7 -0
package/src/components/footer.scss +21 -0
package/src/components/hamburger.scss +157 -0
package/src/components/header.scss +36 -0
package/src/components/heading.scss +40 -0
package/src/components/image.scss +10 -0
package/src/components/index.scss +26 -0
package/src/components/input.scss +338 -0
package/src/components/label.scss +17 -0
package/src/components/link.scss +29 -0
package/src/components/list.scss +16 -0
package/src/components/loader.scss +72 -0
package/src/components/main.scss +8 -0
package/src/components/message.scss +53 -0
package/src/components/modal.scss +41 -0
package/src/components/nav.scss +387 -0
package/src/components/paragraph.scss +12 -0
package/src/components/progress.scss +43 -0
package/src/components/section.scss +7 -0
package/src/components/span.scss +7 -0
package/src/css-variables/animation.scss +11 -0
package/src/css-variables/border.scss +16 -0
package/src/css-variables/color.scss +604 -0
package/src/css-variables/components/breadcrumbs.scss +5 -0
package/src/css-variables/components/button.scss +6 -0
package/src/css-variables/components/dialogue.scss +15 -0
package/src/css-variables/components/header.scss +7 -0
package/src/css-variables/components/heading.scss +5 -0
package/src/css-variables/components/index.scss +5 -0
package/src/css-variables/index.scss +7 -0
package/src/css-variables/miscellaneous.scss +8 -0
package/src/css-variables/typography.scss +24 -0
package/src/functions/index.scss +1 -0
package/src/functions/string.scss +31 -0
package/src/icons/check.scss +21 -0
package/src/icons/chevron.scss +30 -0
package/src/icons/index.scss +2 -0
package/src/layouts/centering.scss +13 -0
package/src/layouts/columns.scss +97 -0
package/src/layouts/container.scss +59 -0
package/src/layouts/index.scss +3 -0
package/src/mixins/animation.scss +80 -0
package/src/mixins/color.scss +33 -0
package/src/mixins/element.scss +5 -0
package/src/mixins/index.scss +5 -0
package/src/mixins/responsive.scss +222 -0
package/src/noctemyth-skelton.scss +12 -0
package/src/noctemyth-utilities.scss +3 -0
package/src/noctemyth.scss +9 -0
package/src/utilities/border.scss +46 -0
package/src/utilities/color.scss +327 -0
package/src/utilities/decoration.scss +16 -0
package/src/utilities/index.scss +7 -0
package/src/utilities/positioning.scss +90 -0
package/src/utilities/sizing.scss +142 -0
package/src/utilities/spacing.scss +154 -0
package/src/utilities/typography.scss +109 -0
package/src/variables/animation.scss +8 -0
package/src/variables/border.scss +81 -0
package/src/variables/color.scss +1371 -0
package/src/variables/components/breadcrumbs.scss +3 -0
package/src/variables/components/button.scss +3 -0
package/src/variables/components/dialogue.scss +12 -0
package/src/variables/components/header.scss +3 -0
package/src/variables/components/heading.scss +3 -0
package/src/variables/components/index.scss +5 -0
package/src/variables/index.scss +8 -0
package/src/variables/layout.scss +28 -0
package/src/variables/miscellaneous.scss +14 -0
package/src/variables/typography.scss +26 -0

package/src/components/blockquote.scss ADDED Viewed

@@ -0,0 +1,92 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+@use "../icons/index.scss" as icons;
+@use "../mixins/index.scss" as mixins;
+.blockquote {
+  --#{variables.$prefix}blockquote-icon-font-size: var(
+    --#{variables.$prefix}font-size-xxxlarge
+  );
+  --#{variables.$prefix}blockquote-border-left-width: var(
+    --#{variables.$prefix}border-width-thick
+  );
+  @include mixins.element();
+  position: relative;
+  color: var(--#{variables.$prefix}color-default-blockquote-fore);
+  background-color: var(--#{variables.$prefix}color-default-blockquote-back);
+  border-left-color: var(--#{variables.$prefix}color-default-blockquote-border);
+  border-left-style: solid;
+  border-left-width: var(--#{variables.$prefix}blockquote-border-left-width);
+  margin: 0;
+  margin-block: unset;
+  margin-inline: unset;
+  padding: 0.5rem;
+  &.is-italic {
+    font-style: italic;
+  }
+  &.has-quote,
+  &.has-quote-before {
+    padding-left: 1.5rem;
+    &::before {
+      position: absolute;
+      top: 0;
+      overflow-y: hidden;
+      height: calc(var(--#{variables.$prefix}blockquote-icon-font-size) / 2);
+      width: calc(var(--#{variables.$prefix}blockquote-icon-font-size) / 2);
+      left: 0.5rem;
+      quotes: initial;
+      content: open-quote;
+      display: block;
+      max-width: 100%;
+      color: var(--#{variables.$prefix}color-default-blockquote-fore);
+      font-size: var(--#{variables.$prefix}blockquote-icon-font-size);
+    }
+  }
+  &.has-quote,
+  &.has-quote-after {
+    padding-right: 1.5rem;
+    &::after {
+      position: absolute;
+      bottom: 0;
+      overflow-y: hidden;
+      height: calc(var(--#{variables.$prefix}blockquote-icon-font-size) / 2);
+      width: calc(var(--#{variables.$prefix}blockquote-icon-font-size) / 2);
+      right: 0.5rem;
+      quotes: initial;
+      content: close-quote;
+      display: block;
+      max-width: 100%;
+      color: var(--#{variables.$prefix}color-default-blockquote-fore);
+      font-size: var(--#{variables.$prefix}blockquote-icon-font-size);
+    }
+  }
+  @if (not variables.$is-skelton) {
+    @each $color in variables.$colors {
+      $colorName: map.get($color, "name");
+      &.is-#{$colorName} {
+        background-color: var(--#{variables.$prefix}color-#{$colorName}-blockquote-back);
+        border-left-color: var(
+          --#{variables.$prefix}color-#{$colorName}-blockquote-border
+        );
+        color: var(--#{variables.$prefix}color-#{$colorName}-blockquote-fore);
+        &.has-quote,
+        &.has-quote-before {
+          &::before {
+            color: var(
+              --#{variables.$prefix}color-#{$colorName}-blockquote-fore
+            );
+          }
+        }
+        &.has-quote,
+        &.has-quote-after {
+          &::after {
+            color: var(
+              --#{variables.$prefix}color-#{$colorName}-blockquote-fore
+            );
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/breadcrumbs.scss ADDED Viewed

@@ -0,0 +1,47 @@
+@use "sass:map";
+@use "sass:string";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+.breadcrumbs {
+  @include mixins.element();
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  > .breadcrumb {
+    @include mixins.element();
+    text-wrap: wrap;
+    color: var(--#{variables.$prefix}color-default-breadcrumb-fore);
+    &:has(~ .breadcrumb) {
+      &::after {
+        @include mixins.element();
+        content: var(--#{variables.$prefix}breadcrumb-divider);
+        margin: 0 0.5rem;
+        color: var(--#{variables.$prefix}color-default-breadcrumb-divider-fore);
+        user-select: none;
+      }
+    }
+  }
+  @if (not variables.$is-skelton) {
+    @each $color in variables.$colors {
+      $colorName: map.get($color, "name");
+      &.is-#{$colorName} {
+        > .breadcrumb {
+          color: var(--#{variables.$prefix}color-#{$colorName}-breadcrumb-fore);
+          &:has(~ .breadcrumb) {
+            &::after {
+              color: var(
+                --#{variables.$prefix}color-#{$colorName}-breadcrumb-divider-fore
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.breadcrumbs-nav {
+  @include mixins.element();
+}

package/src/components/button.scss ADDED Viewed

@@ -0,0 +1,157 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+.button {
+  @include mixins.element();
+  background-color: var(--#{variables.$prefix}color-default-button-back);
+  border-color: var(--#{variables.$prefix}color-default-button-border);
+  border-radius: var(--#{variables.$prefix}border-radius-medium);
+  border-style: solid;
+  color: var(--#{variables.$prefix}color-default-button-fore);
+  cursor: pointer;
+  display: inline-block;
+  height: auto;
+  padding: var(--#{variables.$prefix}button-padding-y)
+    var(--#{variables.$prefix}button-padding-x);
+  text-align: center;
+  text-transform: none;
+  touch-action: manipulation;
+  user-select: none;
+  vertical-align: top;
+  word-spacing: 0px;
+  &.is-circle {
+    border-radius: 50%;
+    text-align: center;
+    min-height: 2.5rem;
+    min-width: 2.5rem;
+    height: 2.5rem;
+    width: 2.5rem;
+    &.is-small {
+      font-size: var(--#{variables.$prefix}font-size-small);
+      min-height: 1rem;
+      min-width: 1rem;
+      height: 1rem;
+      width: 1rem;
+    }
+    &.is-large {
+      font-size: var(--#{variables.$prefix}font-size-large);
+      min-height: 3rem;
+      min-width: 3rem;
+      height: 3rem;
+      width: 3rem;
+    }
+    &.is-xlarge {
+      font-size: var(--#{variables.$prefix}font-size-xlarge);
+      min-height: 5rem;
+      min-width: 5rem;
+      height: 5rem;
+      width: 5rem;
+    }
+  }
+  &:hover,
+  &.is-hovered,
+  &.is-hovered {
+    outline: none;
+    background-color: var(
+      --#{variables.$prefix}color-default-button-hover-back
+    );
+    border-color: var(--#{variables.$prefix}color-default-button-hover-border);
+    color: var(--#{variables.$prefix}color-default-button-hover-fore);
+  }
+  &:focus,
+  &.is-focus,
+  &.is-focused {
+    outline: none;
+    background-color: var(
+      --#{variables.$prefix}color-default-button-focus-back
+    );
+    border-color: var(--#{variables.$prefix}color-default-button-focus-border);
+    color: var(--#{variables.$prefix}color-default-button-focus-fore);
+  }
+  &:active,
+  &.is-active {
+    background-color: var(
+      --#{variables.$prefix}color-default-button-active-back
+    );
+    border-color: var(--#{variables.$prefix}color-default-button-active-border);
+    color: var(--#{variables.$prefix}color-default-button-active-fore);
+  }
+  &[disabled],
+  fieldset[disabled],
+  &.is-disabled {
+    background-color: var(
+      --#{variables.$prefix}color-default-button-disabled-back
+    );
+    border-color: var(
+      --#{variables.$prefix}color-default-button-disabled-border
+    );
+    color: var(--#{variables.$prefix}color-default-button-disabled-fore);
+  }
+  @if (not variables.$is-skelton) {
+    @each $color in variables.$colors {
+      $colorName: map.get($color, "name");
+      &.is-#{$colorName} {
+        background-color: var(
+          --#{variables.$prefix}color-#{$colorName}-button-back
+        );
+        border-color: var(
+          --#{variables.$prefix}color-#{$colorName}-button-border
+        );
+        color: var(--#{variables.$prefix}color-#{$colorName}-button-fore);
+        &:focus,
+        &.is-focus,
+        &.is-focused {
+          background-color: var(
+            --#{variables.$prefix}color-#{$colorName}-button-focus-back
+          );
+          border-color: var(
+            --#{variables.$prefix}color-#{$colorName}-button-focus-border
+          );
+          color: var(
+            --#{variables.$prefix}color-#{$colorName}-button-focus-fore
+          );
+        }
+        &:hover,
+        &.is-hover,
+        &.is-hovered {
+          background-color: var(
+            --#{variables.$prefix}color-#{$colorName}-button-hover-back
+          );
+          border-color: var(
+            --#{variables.$prefix}color-#{$colorName}-button-hover-border
+          );
+          color: var(
+            --#{variables.$prefix}color-#{$colorName}-button-hover-fore
+          );
+        }
+        &:active,
+        &.is-active {
+          background-color: var(
+            --#{variables.$prefix}color-#{$colorName}-button-active-back
+          );
+          border-color: var(
+            --#{variables.$prefix}color-#{$colorName}-button-active-border
+          );
+          color: var(
+            --#{variables.$prefix}color-#{$colorName}-button-active-fore
+          );
+        }
+        &[disabled],
+        fieldset[disabled],
+        &.is-disabled {
+          background-color: var(
+            --#{variables.$prefix}color-#{$colorName}-button-disabled-back
+          );
+          border-color: var(
+            --#{variables.$prefix}color-#{$colorName}-button-disabled-border
+          );
+          color: var(
+            --#{variables.$prefix}color-#{$colorName}-button-disabled-fore
+          );
+        }
+      }
+    }
+  }
+}

package/src/components/card.scss ADDED Viewed

@@ -0,0 +1,89 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+.card {
+  @include mixins.element();
+  display: block;
+  background-color: var(--#{variables.$prefix}color-default-card-back);
+  border-radius: calc(
+    var(--#{variables.$prefix}border-radius-medium) +
+      var(--#{variables.$prefix}border-width-thin)
+  );
+  border-color: var(--#{variables.$prefix}color-default-card-border);
+  border-style: solid;
+  border-width: var(--#{variables.$prefix}border-width-thin);
+  color: var(--#{variables.$prefix}color-default-card-fore);
+  &.has-shadow {
+    box-shadow: 0 0.5rem 0.5rem var(--#{variables.$prefix}color-card-shadow);
+  }
+  >.card-header {
+    @include mixins.element();
+    background-color: var(--#{variables.$prefix}color-default-card-header-back);
+    border-radius: var(--#{variables.$prefix}border-radius-medium)
+      var(--#{variables.$prefix}border-radius-medium) 0 0;
+    color: var(--#{variables.$prefix}color-default-card-header-fore);
+    padding: 0.5rem;
+    display: block;
+    font-size: var(--#{variables.$prefix}font-size-medium);
+    font-weight: var(--#{variables.$prefix}font-weight-semibold);
+  }
+  >.card-body {
+    @include mixins.element();
+    background-color: var(--#{variables.$prefix}color-default-card-body-back);
+    color: var(--#{variables.$prefix}color-default-card-body-fore);
+    padding: 0.5rem;
+    display: block;
+    &:first-child {
+      border-radius: var(--#{variables.$prefix}border-radius-medium)
+        var(--#{variables.$prefix}border-radius-medium) 0 0;
+    }
+    &:last-child {
+      border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
+        var(--#{variables.$prefix}border-radius-medium);
+    }
+    &:only-child {
+      border-radius: var(--#{variables.$prefix}border-radius-medium);
+    }
+  }
+  >.card-footer {
+    @include mixins.element();
+    background-color: var(--#{variables.$prefix}color-default-card-footer-back);
+    border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
+      var(--#{variables.$prefix}border-radius-medium);
+    color: var(--#{variables.$prefix}color-default-card-footer-fore);
+    padding: 0.5rem;
+    display: block;
+  }
+  @if (not variables.$is-skelton) {
+    @each $color in variables.$colors {
+      $colorName: map.get($color, "name");
+      &.is-#{$colorName} {
+        background-color: var(
+          --#{variables.$prefix}color-#{$colorName}-card-back
+        );
+        border-color: var(--#{variables.$prefix}color-#{$colorName}-card-border);
+        color: var(--#{variables.$prefix}color-#{$colorName}-card-fore);
+        >.card-header {
+          background-color: var(
+            --#{variables.$prefix}color-#{$colorName}-card-header-back
+          );
+          color: var(--#{variables.$prefix}color-#{$colorName}-card-header-fore);
+        }
+        >.card-body {
+          background-color: var(
+            --#{variables.$prefix}color-#{$colorName}-card-body-back
+          );
+          color: var(--#{variables.$prefix}color-#{$colorName}-card-body-fore);
+        }
+        >.card-footer {
+          background-color: var(
+            --#{variables.$prefix}color-#{$colorName}-card-footer-back
+          );
+          color: var(--#{variables.$prefix}color-#{$colorName}-card-footer-fore);
+        }
+      }
+    }
+  }
+}