@daryasidorovich/modsen-datepicker 1.0.0 → 1.0.1

package/src/stories/header.css

@@ -0,0 +1,32 @@
+.storybook-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 6px 0 6px 10px;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  margin-right: 10px;
+  color: #333;
+  font-size: 14px;
+}

package/src/stories/page.css

@@ -0,0 +1,68 @@
+.storybook-page {
+  margin: 0 auto;
+  padding: 48px 20px;
+  max-width: 600px;
+  color: #333;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  color: inherit;
+}
+
+.storybook-page ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+  border-radius: 1em;
+  background: #e7fdd8;
+  padding: 4px 12px;
+  color: #357a14;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-right: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

package/src/styles/_border.scss

@@ -1,9 +1,9 @@
-$radius-8: 8px;
-
-$border-width: 1px;
-$border-solid: solid;
-
-@mixin border {
-  border-style: $border-solid;
-  border-width: $border-width;
-}
+$radius-8: 8px;
+
+$border-width: 1px;
+$border-solid: solid;
+
+@mixin border {
+  border-style: $border-solid;
+  border-width: $border-width;
+}

package/src/styles/_colors.scss

@@ -1,53 +1,53 @@
-@use 'sass:map';
-
-$colors: (
-  color-blue: #2f80ed,
-  color-blue-60: #2f81ed93,
-  color-blue-10: #2f81ed2a,
-
-  color-white: #ffffff,
-  color-black: #333333,
-
-  color-red: #ff383c,
-  color-green: #62d0a2,
-  color-light-gray: #e1e1e1,
-  color-gray: #aaaaaa,
-  color-dark-gray: #2c314466,
-);
-
-@function color($key) {
-  @return map.get($colors, $key);
-}
-
-$themes: (
-  light: (
-    border: color(color-light-gray),
-    background: color(color-white),
-    text: color(color-black),
-    middle-blue: color(color-blue-60),
-    light-blue: color(color-blue-10),
-    blue: color(color-blue),
-    disabled: color(color-gray),
-    selected: color(color-blue),
-    accent: color(color-red),
-    marker: color(color-green),
-    white-color: color(color-white),
-    button-hover: color(color-blue-60),
-    overlay: color(color-dark-gray),
-  ),
-  dark: (
-    border: color(color-gray),
-    background: color(color-black),
-    text: color(color-white),
-    middle-blue: color(color-blue-60),
-    light-blue: color(color-blue-10),
-    blue: color(color-blue),
-    disabled: color(color-gray),
-    selected: color(color-blue),
-    accent: color(color-red),
-    marker: color(color-green),
-    white-color: color(color-light-gray),
-    button-hover: color(color-gray),
-    overlay: color(color-dark-gray),
-  ),
-);
+@use 'sass:map';
+
+$colors: (
+  color-blue: #2f80ed,
+  color-blue-60: #2f81ed93,
+  color-blue-10: #2f81ed2a,
+
+  color-white: #ffffff,
+  color-black: #333333,
+
+  color-red: #ff383c,
+  color-green: #62d0a2,
+  color-light-gray: #e1e1e1,
+  color-gray: #aaaaaa,
+  color-dark-gray: #2c314466,
+);
+
+@function color($key) {
+  @return map.get($colors, $key);
+}
+
+$themes: (
+  light: (
+    border: color(color-light-gray),
+    background: color(color-white),
+    text: color(color-black),
+    middle-blue: color(color-blue-60),
+    light-blue: color(color-blue-10),
+    blue: color(color-blue),
+    disabled: color(color-gray),
+    selected: color(color-blue),
+    accent: color(color-red),
+    marker: color(color-green),
+    white-color: color(color-white),
+    button-hover: color(color-blue-60),
+    overlay: color(color-dark-gray),
+  ),
+  dark: (
+    border: color(color-gray),
+    background: color(color-black),
+    text: color(color-white),
+    middle-blue: color(color-blue-60),
+    light-blue: color(color-blue-10),
+    blue: color(color-blue),
+    disabled: color(color-gray),
+    selected: color(color-blue),
+    accent: color(color-red),
+    marker: color(color-green),
+    white-color: color(color-light-gray),
+    button-hover: color(color-gray),
+    overlay: color(color-dark-gray),
+  ),
+);

package/src/styles/_gap.scss

@@ -1,4 +1,4 @@
-$gap-5: 5px;
-$gap-8: 8px;
-$gap-10: 10px;
-$gap-24: 24px;
+$gap-5: 5px;
+$gap-8: 8px;
+$gap-10: 10px;
+$gap-24: 24px;

package/src/styles/_globals.scss

@@ -1,61 +1,61 @@
-@use './colors' as *;
-@use './typography' as *;
-@use './border' as *;
-@use './variables' as *;
-@use './mixins' as *;
-@use './theme-mixins' as *;
-
-html {
-  &.is-lock {
-    overflow: hidden;
-  }
-}
-
-body {
-  font-weight: $font-weight-regular;
-  font-family: $font-family-base;
-  font-size: $font-size-14;
-
-  @include themify($themes) {
-    color: themed('text');
-    background: themed('gradient');
-  }
-}
-
-h1,
-h2 {
-  margin: 0;
-}
-
-h1 {
-  font-size: $font-size-15;
-  font-weight: $font-weight-semibold;
-}
-
-h2 {
-  font-weight: $font-weight-bold;
-}
-
-a,
-button,
-label,
-input,
-textarea,
-select,
-svg * {
-  transition:
-    color $transition-duration $easing,
-    background-color $transition-duration $easing,
-    border-color $transition-duration $easing,
-    fill $transition-duration $easing,
-    opacity $transition-duration $easing;
-}
-
-a,
-button {
-  &:has(svg) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
+@use './colors' as *;
+@use './typography' as *;
+@use './border' as *;
+@use './variables' as *;
+@use './mixins' as *;
+@use './theme-mixins' as *;
+
+html {
+  &.is-lock {
+    overflow: hidden;
+  }
+}
+
+body {
+  font-weight: $font-weight-regular;
+  font-family: $font-family-base;
+  font-size: $font-size-14;
+
+  @include themify($themes) {
+    color: themed('text');
+    background: themed('gradient');
+  }
+}
+
+h1,
+h2 {
+  margin: 0;
+}
+
+h1 {
+  font-size: $font-size-15;
+  font-weight: $font-weight-semibold;
+}
+
+h2 {
+  font-weight: $font-weight-bold;
+}
+
+a,
+button,
+label,
+input,
+textarea,
+select,
+svg * {
+  transition:
+    color $transition-duration $easing,
+    background-color $transition-duration $easing,
+    border-color $transition-duration $easing,
+    fill $transition-duration $easing,
+    opacity $transition-duration $easing;
+}
+
+a,
+button {
+  &:has(svg) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

package/src/styles/_grid.scss

@@ -1,9 +1,9 @@
-@use './mixins' as *;
-@use './gap' as *;
-
-.grid {
-  display: grid;
-  width: 100%;
-
-  grid-template-columns: repeat(7, 1fr);
-}
+@use './mixins' as *;
+@use './gap' as *;
+
+.grid {
+  display: grid;
+  width: 100%;
+
+  grid-template-columns: repeat(7, 1fr);
+}

package/src/styles/_mixins.scss

@@ -1,6 +1,6 @@
-@use 'sass:map';
-
-@mixin square($size) {
-  width: $size;
-  height: $size;
-}
+@use 'sass:map';
+
+@mixin square($size) {
+  width: $size;
+  height: $size;
+}

package/src/styles/_reset.scss

@@ -1,98 +1,98 @@
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
-:where(ul, ol):where([class]) {
-  padding-left: 0;
-}
-
-body,
-:where(blockquote, figure):where([class]) {
-  margin: 0;
-}
-
-:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
-  margin-block: 0;
-}
-
-:where(dd[class]) {
-  margin-left: 0;
-}
-
-:where(fieldset[class]) {
-  margin-left: 0;
-  padding: 0;
-  border: none;
-}
-
-:where(ul[class]) {
-  list-style: none;
-}
-
-:where(address[class]) {
-  font-style: normal;
-}
-
-p {
-  margin-block: 0;
-}
-
-img,
-video {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-
-input,
-textarea,
-select,
-button {
-  font: inherit;
-}
-
-html {
-  height: 100%;
-
-  scrollbar-gutter: stable;
-}
-
-html,
-:has(:target) {
-  scroll-behavior: smooth;
-}
-
-body {
-  min-height: 100%;
-
-  line-height: 1.5;
-}
-
-a:where([class]) {
-  display: inline-flex;
-}
-
-button,
-label {
-  cursor: pointer;
-}
-
-[stroke] {
-  stroke: currentColor;
-}
-
-svg * {
-  transition-property: fill, stroke;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  ::before,
-  ::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    scroll-behavior: auto !important;
-  }
-}
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:where(ul, ol):where([class]) {
+  padding-left: 0;
+}
+
+body,
+:where(blockquote, figure):where([class]) {
+  margin: 0;
+}
+
+:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
+  margin-block: 0;
+}
+
+:where(dd[class]) {
+  margin-left: 0;
+}
+
+:where(fieldset[class]) {
+  margin-left: 0;
+  padding: 0;
+  border: none;
+}
+
+:where(ul[class]) {
+  list-style: none;
+}
+
+:where(address[class]) {
+  font-style: normal;
+}
+
+p {
+  margin-block: 0;
+}
+
+img,
+video {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+input,
+textarea,
+select,
+button {
+  font: inherit;
+}
+
+html {
+  height: 100%;
+
+  scrollbar-gutter: stable;
+}
+
+html,
+:has(:target) {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100%;
+
+  line-height: 1.5;
+}
+
+a:where([class]) {
+  display: inline-flex;
+}
+
+button,
+label {
+  cursor: pointer;
+}
+
+[stroke] {
+  stroke: currentColor;
+}
+
+svg * {
+  transition-property: fill, stroke;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/styles/_theme-mixins.scss

@@ -1,51 +1,51 @@
-@use 'sass:map';
-@use './colors' as *;
-
-$theme-map: null;
-
-@mixin themify-modules($themes) {
-  @each $theme, $map in $themes {
-    :global(.theme-#{$theme}) & {
-      $theme-map: () !global;
-
-      @each $key, $value in $map {
-        $theme-map: map.merge(
-          $theme-map,
-          (
-            $key: $value,
-          )
-        ) !global;
-      }
-
-      @content;
-
-      $theme-map: null !global;
-    }
-  }
-}
-
-@mixin themify($themes) {
-  @each $theme, $map in $themes {
-    .theme-#{$theme} & {
-      $theme-map: () !global;
-
-      @each $key, $submap in $map {
-        $value: map.get(map.get($themes, $theme), $key);
-        $theme-map: map.merge(
-          $theme-map,
-          (
-            $key: $value,
-          )
-        ) !global;
-      }
-
-      @content;
-
-      $theme-map: null !global;
-    }
-  }
-}
-
-@function themed($key) {
-  @return map.get($theme-map, $key);
-}
+@use 'sass:map';
+@use './colors' as *;
+
+$theme-map: null;
+
+@mixin themify-modules($themes) {
+  @each $theme, $map in $themes {
+    :global(.theme-#{$theme}) & {
+      $theme-map: () !global;
+
+      @each $key, $value in $map {
+        $theme-map: map.merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
+      }
+
+      @content;
+
+      $theme-map: null !global;
+    }
+  }
+}
+
+@mixin themify($themes) {
+  @each $theme, $map in $themes {
+    .theme-#{$theme} & {
+      $theme-map: () !global;
+
+      @each $key, $submap in $map {
+        $value: map.get(map.get($themes, $theme), $key);
+        $theme-map: map.merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
+      }
+
+      @content;
+
+      $theme-map: null !global;
+    }
+  }
+}
+
+@function themed($key) {
+  @return map.get($theme-map, $key);
+}