@lisergia/styles 0.0.0

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@lisergia/styles",
+  "version": "0.0.0",
+  "files": [
+    "scss"
+  ],
+  "scripts": {
+    "lint": "stylelint \"**/*.scss\""
+  },
+  "dependencies": {
+    "@lisergia/config-stylelint": "*",
+    "include-media": "^2.0.0",
+    "stylelint": "^16.19.1"
+  }
+}

package/scss/base/app.scss

@@ -0,0 +1,6 @@
+.app {
+  height: 100%;
+  overflow: clip;
+  position: relative;
+  width: 100vw;
+}

package/scss/base/lenis.scss

@@ -0,0 +1,21 @@
+.lenis {
+  &:not(.lenis-autoToggle).lenis-stopped {
+    overflow: clip;
+  }
+
+  &.lenis-smooth {
+    [data-lenis-prevent] {
+      overscroll-behavior: contain;
+    }
+
+    iframe {
+      pointer-events: none;
+    }
+  }
+
+  &.lenis-autoToggle {
+    transition-behavior: allow-discrete;
+    transition-duration: 1ms;
+    transition-property: overflow;
+  }
+}

package/scss/base/reset.scss

@@ -0,0 +1,170 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  text-rendering: optimizelegibility;
+  top: 0;
+  width: 100%;
+}
+
+body {
+  height: 100%;
+  left: 0;
+  line-height: 1;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+textarea {
+  background: none;
+  border: none;
+  color: inherit;
+  font: inherit;
+  padding: 0;
+}
+
+button {
+  cursor: pointer;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/scss/index.scss

@@ -0,0 +1,10 @@
+@import './base/app';
+@import './base/reset';
+@import './base/lenis';
+
+@import './variables/easings';
+
+@import './utils/functions';
+@import './utils/mixins';
+
+@import './plugins/include-media';

package/scss/plugins/include-media.scss

@@ -0,0 +1,7 @@
+$breakpoints: (
+  'phone': 768px,
+  'tablet': 1024px,
+  'desktop': 1920px,
+) !default;
+
+@import '../../node_modules/include-media/dist/include-media';

package/scss/utils/functions.scss

@@ -0,0 +1,9 @@
+@function z($name) {
+  @if index($z-indexes, $name) {
+    @return (length($z-indexes) - index($z-indexes, $name)) + 1;
+  } @else {
+    @warn 'There is no item "#{$name}" in this list; Choose one of: #{$z-indexes}';
+
+    @return null;
+  }
+}

package/scss/utils/mixins.scss

@@ -0,0 +1,19 @@
+@mixin hover($element: '') {
+  @if $element == '' {
+    html.desktop &:hover {
+      @content;
+    }
+  } @else {
+    html.desktop #{$element}:hover & {
+      @content;
+    }
+  }
+}
+
+%cover {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}

package/scss/variables/easings.scss

@@ -0,0 +1,33 @@
+:root {
+  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
+  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
+  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+
+  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+
+  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+
+  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+
+  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+
+  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+
+  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}