@terrahq/wysiwyg 1.0.0

package/src/scss/framework/components/preloader/_c--preloader-a.scss

@@ -0,0 +1,62 @@
+@use "sass:map";
+@use "@scss/framework/foundation/_foundation.scss";
+@use "@scss/framework/utilities/_utilities.scss";
+@use "@scss/framework/_var/_vars.scss" as *;
+.c--preloader-a {
+  @extend .u--position-fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  max-width: 100vw;
+  height: 100vh;
+  z-index: 1500;
+
+  &__item {
+    @extend .f--background-a;
+    height: 50%;
+  }
+
+  &__artwork {
+    @extend .u--position-absolute;
+    width: 50vw;
+    max-width: 250px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    height: 1px;
+    background: linear-gradient(
+      to right,
+      map.get($color-options, a),
+      map.get($color-options, b)
+    );
+    z-index: 1501;
+
+    &::after {
+      @extend .u--position-absolute;
+      @extend .u--display-block;
+      content: "";
+      height: 100%;
+      background-color: map.get($color-options, a);
+      left: 0%;
+      right: 100%;
+      animation: loading 2s ease infinite;
+    }
+  }
+}
+
+@keyframes loading {
+  0% {
+    left: 0;
+    right: 100%;
+  }
+
+  50% {
+    left: 0;
+    right: 0;
+  }
+
+  100% {
+    left: 100%;
+    right: 0;
+  }
+}

package/src/scss/framework/components/transition/_c--transition-a.scss

@@ -0,0 +1,24 @@
+.c--transition-a {
+    @extend .u--position-fixed;
+    @extend .u--display-none;
+    left: 0;
+    top: 0;
+    width: 100%;
+    max-width: 100vw;
+    height: 100vh;
+    z-index: 1500;
+    pointer-events: none;
+
+    &__item {
+        @extend .f--background-a;
+        height: 50%;
+
+        &--first {
+            transform: translateY(-100%);
+        }
+
+        &--second {
+            transform: translateY(100%);
+        }
+    }
+}

package/src/scss/framework/foundation/_foundation.scss

@@ -0,0 +1,32 @@
+//Foundations
+
+// Reset
+@forward './reset/reset.scss';
+
+
+// background
+// f--*-*
+@forward './background/background.scss';
+
+// Color
+// f--color-*
+@forward './color/color.scss';
+
+// Typography
+// f--font-*
+@forward './font/font.scss';
+
+// Gap
+// f--gap-*
+@forward './gap/gap.scss';
+
+// Grid System
+// f--container
+// f--row
+// f--col-*
+// f--offset-* 
+@forward './grid/grid.scss';
+
+// Spaces
+// f--sp-*
+@forward './spaces/spaces.scss';

package/src/scss/framework/foundation/background/_background.scss

@@ -0,0 +1,8 @@
+@use "sass:map";
+@use "@scss/framework/_var/_vars.scss" as *;
+
+@each $color-name, $color in $colorbg-options {
+    .f--background-#{$color-name}{
+        background: map.get($colorbg-options, $color-name);
+    }
+}

package/src/scss/framework/foundation/color/_color.scss

@@ -0,0 +1,8 @@
+@use "sass:map";
+@use "@scss/framework/_var/_vars.scss" as *;
+
+@each $color-name, $color in $color-options {
+    .f--color-#{$color-name}{
+        color: map.get($color-options, $color-name);
+    }
+}

package/src/scss/framework/foundation/font/_font.scss

@@ -0,0 +1,27 @@
+@use "@scss/framework/foundation/font/make-font" as *;
+
+/* Font library */
+
+.f--font-a {
+  @include make-font-a();
+}
+
+.f--font-b {
+  @include make-font-b();
+}
+
+.f--font-c {
+  @include make-font-c();
+}
+
+.f--font-d {
+  @include make-font-d();
+}
+
+.f--font-e {
+  @include make-font-e();
+}
+
+.f--font-f {
+  @include make-font-f();
+}

package/src/scss/framework/foundation/font/_make-font.scss

@@ -0,0 +1,61 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+@mixin make-font-a($weight: 400) {
+  font-family: $type-a;
+  font-weight: $weight;
+  line-height: 1.1;
+  font-size: 5rem;
+  -webkit-font-smoothing: antialiased;
+  @media all and ($viewport-type: $tablets) {
+    font-size: 4rem;
+  }
+}
+
+@mixin make-font-b($weight: 400) {
+  font-family: $type-a;
+  font-weight: $weight;
+  line-height: 1.3;
+  font-size: 3.5rem;
+  -webkit-font-smoothing: antialiased;
+  @media all and ($viewport-type: $tablets) {
+    font-size: 2.5rem;
+  }
+}
+
+@mixin make-font-c($weight: 400) {
+  font-family: $type-a;
+  font-weight: $weight;
+  line-height: 1.3;
+  font-size: 2rem;
+  -webkit-font-smoothing: antialiased;
+  @media all and ($viewport-type: $tablets) {
+    font-size: 1.625rem;
+  }
+}
+
+@mixin make-font-d($weight: 400) {
+  font-family: $type-a;
+  font-weight: $weight;
+  line-height: 1.4;
+  font-size: 1.5rem;
+  -webkit-font-smoothing: antialiased;
+  @media all and ($viewport-type: $tablets) {
+    font-size: 1.25rem;
+  }
+}
+
+@mixin make-font-e($weight: 400) {
+  font-family: $type-a;
+  font-weight: $weight;
+  line-height: 1.4;
+  font-size: 1rem;
+  -webkit-font-smoothing: antialiased;
+}
+
+@mixin make-font-f($weight: 400) {
+  font-family: $type-a;
+  font-weight: $weight;
+  line-height: 1.4;
+  font-size: 0.75rem;
+  -webkit-font-smoothing: antialiased;
+}

package/src/scss/framework/foundation/gap/_gap.scss

@@ -0,0 +1,17 @@
+@use "@scss/framework/foundation/gap/make-gap" as *;
+
+.f--gap-a {
+    @include make-gap-a();
+}
+
+.f--gap-b {
+    @include make-gap-b();
+}
+
+.f--gap-c {
+    @include make-gap-c();
+}
+
+.f--gap-d {
+    @include make-gap-d();
+}

package/src/scss/framework/foundation/gap/_make-gap.scss

@@ -0,0 +1,29 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+@mixin make-gap-a {
+  row-gap: $measure * 10;
+  @media all and ($viewport-type: $tablets) {
+      row-gap: $measure * 7;
+  }
+}
+
+@mixin make-gap-b {
+  row-gap: $measure * 7;
+  @media all and ($viewport-type: $tablets) {
+      row-gap: $measure * 4;
+  }
+}
+
+@mixin make-gap-c {
+  row-gap: $measure * 4;
+  @media all and ($viewport-type: $tablets) {
+      row-gap: $measure * 3;
+  }
+}
+
+@mixin make-gap-d {
+  row-gap: $measure * 3;
+  @media all and ($viewport-type: $tablets) {
+      row-gap: $measure * 3;
+  }
+}

package/src/scss/framework/foundation/grid/_columns.scss

@@ -0,0 +1,115 @@
+@use "@scss/framework/foundation/grid/make-columns" as *;
+@use "@scss/framework/_var/_vars.scss" as *;
+
+/* columns*/
+/* offset */
+/* order first & last */
+
+// * columns
+$available-columns: (
+    // 1,
+    // 2,
+    // 3,
+    // 4,
+    // 5,
+    6,
+    // 7,
+    // 8,
+    // 9,
+    // 10,
+    // 11,
+    12,
+);
+
+$columns-breakpoints: (
+  all: $all,
+//   desktop: $desktop,
+//   laptop: $laptop,
+//    tabletl: $tabletl,
+//   tabletm: $tabletm,
+   tablets: $tablets,
+//   mobile: $mobile,
+);
+@mixin build-columns ($size,$bkpt,$availablecolumns) {
+    @for $i from 1 through $columns {
+        @if ($size == 'all') {
+            @each $column in $availablecolumns {
+                @if $i == $column {
+                    .f--col-#{$column}{
+                        @include make-col($column);
+                    } 
+                }
+            }
+        }@else{
+            @each $column in $availablecolumns {
+                @if $i == $column {
+                    .f--col-#{$size}-#{$column}{
+                        @media all and (#{$viewport-type}: #{$bkpt}){
+                            @include make-col-responsive($column);
+                        }
+                    }
+                }
+            }
+        }        
+    }
+}
+// Build Columns
+@each $size, $bkpt in $columns-breakpoints {
+    @include build-columns($size,$bkpt,$available-columns);
+}
+/* End Responsive Columns */
+
+/* Start Responsive Offset */
+$available-offset: (
+    // 0,
+    1,
+    // 2,
+    // 3,
+    // 4,
+    // 5,
+    // 6,
+    // 7,
+    // 8,
+    // 9,
+    // 10,
+    // 11
+);
+
+$offset-breakpoints: (
+  all: $all,
+//   desktop: $desktop,
+//   laptop: $laptop,
+//   tabletl: $tabletl,
+//   tabletm: $tabletm,
+//   tablets: $tablets,
+//   mobile: $mobile,
+);
+@mixin build-offset ($size,$bkpt,$availableoffset) {
+    @for $i from 0 through $columns {
+        @if ($size == 'all') {
+            @each $offset in $availableoffset {
+                @if $i == $offset {
+                    .f--offset-#{$offset}{
+                        @include make-offset($offset);
+                    } 
+                }
+            }
+        }@else{
+            @each $offset in $availableoffset {
+                @if $i == $offset {
+                    .f--offset-#{$size}-#{$offset}{
+                        @media all and (#{$viewport-type}: #{$bkpt}){
+                            @include make-offset($offset);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@each $size, $bkpt in $offset-breakpoints {
+    @include build-offset($size,$bkpt, $available-offset);
+}
+/* End Responsive Offset */
+

package/src/scss/framework/foundation/grid/_container.scss

@@ -0,0 +1,17 @@
+@use "@scss/framework/foundation/grid/make-container" as *;
+@use "@scss/framework/_var/_vars.scss" as *;
+
+.f--container {
+  @include make-container();
+  // * container fluid
+  // &--fluid {
+  //   @include make-container-fluid();
+  // }
+
+  // * container fluid responsive
+  // &--tabletm-fluid {
+  //   @media all and ($viewport-type: $tabletm) {
+  //     @include make-container-fluid();
+  //   }
+  // }
+}

package/src/scss/framework/foundation/grid/_grid.scss

@@ -0,0 +1,3 @@
+@forward './container.scss';
+@forward './row.scss';
+@forward './columns.scss';

package/src/scss/framework/foundation/grid/_make-columns.scss

@@ -0,0 +1,28 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+@mixin make-col($i) {
+  $value: calc(100% / $columns)*$i;
+  flex: 0 0 $value;
+  max-width: $value;
+  min-height: 1px;
+  padding-right: $half-gutter-width;
+  padding-left: $half-gutter-width;
+  transition: width $time-a $ease-standard-a;
+}
+@mixin make-col-responsive($i) {
+  $value: calc(100% / $columns)*$i;
+  flex: 0 0 $value;
+  max-width: $value;
+}
+
+/* Start Responsive Offset */
+@mixin make-offset($i) {
+  $value: calc(100% / $columns)*$i;
+  margin-left: $value;
+  transition: $time-a; 
+}
+
+/* Start Responsive Order */
+@mixin make-order($i) {
+  order: $i;
+}

package/src/scss/framework/foundation/grid/_make-container.scss

@@ -0,0 +1,33 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+@mixin make-container () {
+  margin: 0 auto;
+  padding-right: $half-gutter-width;
+  padding-left: $half-gutter-width;
+  width: $g-container-width;
+  max-width: $g-container-max-width;
+  @media all and ($viewport-type: $mobile){
+    max-width: $g-container-width-mobile;
+  }
+}
+
+@mixin make-container-fluid () {
+  padding: 0;
+  width: 100%;
+  @if variable-exists(g-container-fluid-max-width) {
+    max-width: $g-container-fluid-max-width;
+  } @else {
+    max-width: 100%;
+  }
+
+  & > [class*="f--row"] {
+      margin-right: 0;
+      margin-left: 0;
+
+      & > [class^="f--col"],
+      & > [class*="f--col-"] {
+        padding-right: 0;
+        padding-left: 0;
+      }
+    }
+}

package/src/scss/framework/foundation/grid/_make-row.scss

@@ -0,0 +1,20 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+// row
+@mixin make-row () {
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  margin-right: $gutter-compensation;
+  margin-left: $gutter-compensation;
+}
+
+@mixin make-row-remove-gutter () {
+  margin-right: 0;
+  margin-left: 0;
+  & > [class^="f--col"],
+  & > [class*="f--col-"] {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}

package/src/scss/framework/foundation/grid/_row.scss

@@ -0,0 +1,9 @@
+@use "@scss/framework/foundation/grid/make-row" as *;
+@use "@scss/framework/_var/_vars.scss" as *;
+
+.f--row {
+  @include make-row;
+  &--remove-gutter{
+    @include make-row-remove-gutter;
+  }
+}

package/src/scss/framework/foundation/reset/_reset.scss

@@ -0,0 +1,121 @@
+@use "sass:map";
+@use "@scss/framework/_var/_vars.scss" as *;
+@use "@scss/framework/foundation/background/background.scss" as *;
+@use "@scss/framework/foundation/font/font.scss" as *;
+@use "@scss/framework/foundation/color/color.scss" as *;
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: none;
+    scroll-behavior: smooth;
+}
+
+:focus {
+    outline: 0;
+}
+*:focus-visible {
+    outline: 1px solid map.get($color-options, a);
+}
+
+html {
+    overscroll-behavior: none;
+    @extend .f--background-b;
+}
+
+body {
+    @extend .f--background-b;
+    @extend .f--font-e;
+    @extend .f--color-a;
+}
+
+
+b,
+strong {
+    font-weight: 600;
+}
+
+ul,
+ol {
+    list-style: none;
+}
+img {
+    max-width: 100%;
+}
+fieldset {
+    border: none;
+}
+
+//todos los input menos, range
+// input[type=search]::-webkit-search-decoration,
+// input[type=search]::-webkit-search-results-button,
+// input[type=search]::-webkit-search-results-decoration,
+input[type=search]::-webkit-search-cancel-button, // X que aparece en focus
+input[type=text],
+input[type=tel],
+input[type=number],
+input[type=password],
+input[type=url],
+input[type=email],
+input[type=search],
+input[type=color],
+input[type=date],
+input[type=datetime-local],
+input[type=month],
+input[type=time],
+input[type=week],
+input[type=file],
+input[type=checkbox],
+input[type=radio],
+input[type=submit],
+input[type=button],
+input[type=reset],
+select,
+textarea,
+button {
+    appearance: none;
+    -webkit-appearance: none;
+    outline: 0;
+}
+
+textarea {
+    resize: vertical;
+}
+
+select,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    cursor: pointer;
+    // background: transparent;
+}
+
+button {
+    cursor: pointer;
+    background: transparent;
+}
+
+// remove dotted outline/border in Firefox
+select:-moz-focusring {
+    color: transparent !important;
+    text-shadow: 0 0 0 map.get($color-options, a) !important;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+    border: 1px solid map.get($color-options, b);
+    -webkit-text-fill-color: map.get($color-options, b);
+    color: map.get($color-options, b);
+    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
+    transition: background-color 5000s ease-in-out 0s;
+}

package/src/scss/framework/foundation/spaces/_make-spaces.scss

@@ -0,0 +1,29 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+@mixin make-sp-a {
+    margin-bottom: $measure * 10;
+    @media all and ($viewport-type: $tablets) {
+        margin-bottom: $measure * 7;
+    }
+}
+
+@mixin make-sp-b {
+    margin-bottom: $measure * 7;
+    @media all and ($viewport-type: $tablets) {
+        margin-bottom: $measure * 4;
+    }
+}
+
+@mixin make-sp-c {
+    margin-bottom: $measure * 4;
+    @media all and ($viewport-type: $tablets) {
+        margin-bottom: $measure * 3;
+    }
+}
+
+@mixin make-sp-d {
+    margin-bottom: $measure * 3;
+    @media all and ($viewport-type: $tablets) {
+        margin-bottom: $measure * 3;
+    }
+}

package/src/scss/framework/foundation/spaces/_spaces.scss

@@ -0,0 +1,17 @@
+@use "@scss/framework/foundation/spaces/make-spaces" as *;
+
+.f--sp-a {
+    @include make-sp-a();
+}
+
+.f--sp-b {
+    @include make-sp-b();
+}
+
+.f--sp-c {
+    @include make-sp-c();
+}
+
+.f--sp-d {
+    @include make-sp-d();
+}