valtech-components 1.11.76 → 2.0.2

package/src/lib/components/styles/functions.scss

@@ -1,20 +0,0 @@
-@import './variables.scss';
-
-$base-size: $size-base;
-
-@function pxToRem($target, $context: $base-size) {
-  @return calc($target / $context) * 1rem;
-}
-
-@function pxToRemGroup($top, $right, $bottom, $left, $context: $base-size) {
-  $top: calc($top / $context) * 1rem;
-  $right: calc($right / $context) * 1rem;
-  $bottom: calc($bottom / $context) * 1rem;
-  $left: calc($left / $context) * 1rem;
-
-  @return ($top $right $bottom $left);
-}
-
-@function addColorOpacity($hex, $opacity: 1) {
-  @return rgba($hex, $opacity);
-}

package/src/lib/components/styles/media-queries.scss

@@ -1,66 +0,0 @@
-@mixin media-xsmall {
-  @media (min-width: 425px) {
-    @content;
-  }
-}
-
-@mixin media-small {
-  @media (min-width: 576px) {
-    @content;
-  }
-}
-
-@mixin media-medium {
-  @media (min-width: 768px) {
-    @content;
-  }
-}
-
-@mixin media-large {
-  @media (min-width: 992px) {
-    @content;
-  }
-}
-
-@mixin media-xlarge {
-  @media (min-width: 1200px) {
-    @content;
-  }
-}
-
-/* Max */
-@mixin max-media-xsmall {
-  @media (max-width: 425px) {
-    @content;
-  }
-}
-
-@mixin max-media-small {
-  @media (max-width: 576px) {
-    @content;
-  }
-}
-
-@mixin max-media-medium {
-  @media (max-width: 768px) {
-    @content;
-  }
-}
-
-@mixin max-media-large {
-  @media (max-width: 992px) {
-    @content;
-  }
-}
-
-@mixin max-media-xlarge {
-  @media (max-width: 1200px) {
-    @content;
-  }
-}
-
-@mixin dark {
-  @media (prefers-color-scheme: dark) {
-    @content;
-  }
-}

package/src/lib/components/styles/mixins.scss

@@ -1,66 +0,0 @@
-@import './media-queries.scss';
-@import './variables.scss';
-@import './functions.scss';
-@import './typography.scss';
-
-@mixin box-shadow-small {
-  box-shadow: 0 pxToRem(4) pxToRem(12) addColorOpacity($color-default-shadow, 0.07);
-}
-
-@mixin box-shadow-small-top {
-  box-shadow: 0 pxToRem(-4) pxToRem(12) addColorOpacity($color-default-shadow, 0.07);
-}
-
-@mixin box-shadow-medium {
-  box-shadow: pxToRem(3) pxToRem(10) pxToRem(8) addColorOpacity($color-default-shadow, 0.1);
-}
-
-@mixin box-shadow-medium-bottom {
-  box-shadow: pxToRem(-3) pxToRem(10) pxToRem(8) addColorOpacity($color-default-shadow, 0.1);
-}
-
-@mixin box-shadow-large {
-  box-shadow: 0 pxToRem(10) pxToRem(16) addColorOpacity($color-default-shadow, 0.08);
-}
-
-@mixin box-shadow-large-top {
-  box-shadow: 0 pxToRem(-10) pxToRem(16) addColorOpacity($color-default-shadow, 0.07);
-}
-
-@mixin transform-translateY($value) {
-  transform: translateY($value);
-  -webkit-transform: translateY($value);
-  -moz-transform: translateY($value);
-  -ms-transform: translateY($value);
-  -o-transform: translateY($value);
-}
-
-@mixin transform-translate-y-3d($value) {
-  -webkit-transform: translate3d(0, $value, 0);
-  -moz-transform: translate3d(0, $value, 0);
-  -o-transform: translate3d(0, $value, 0);
-  -ms-transform: translate3d(0, $value, 0);
-  transform: translate3d(0, $value, 0);
-}
-
-@mixin fade-in-translateY {
-  @keyframes fadeInTranslateY {
-    @content;
-  }
-
-  @-moz-keyframes fadeInTranslateY {
-    @content;
-  }
-
-  @-webkit-keyframes fadeInTranslateY {
-    @content;
-  }
-
-  @-o-keyframes fadeInTranslateY {
-    @content;
-  }
-
-  @-ms-keyframes fadeInTranslateY {
-    @content;
-  }
-}

package/src/lib/components/styles/overrides.scss

@@ -1,158 +0,0 @@
-@import './variables.scss';
-@import './functions.scss';
-@import './mixins.scss';
-
-/** core **/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-  margin: 0;
-  padding: 0;
-}
-
-form {
-  width: 100%;
-}
-
-/** ionic components **/
-
-ion-grid,
-ion-col {
-  padding: 0;
-}
-
-ion-button {
-  font-weight: $font-weight-semi-bold;
-}
-
-ion-card {
-  border-radius: pxToRem(8);
-  margin: pxToRem(16) auto;
-}
-
-input {
-  &.native-input {
-    font-family: var(--ion-default-font), Arial, sans-serif;
-    margin-top: pxToRem(6) !important;
-    padding: pxToRem(4) pxToRem(8) !important;
-
-    border: pxToRem(1) solid var(--ion-color-medium) !important;
-    border-radius: pxToRem($border-radius-small) !important;
-
-    &:focus {
-      border: pxToRem(2) solid var(--ion-color-primary) !important;
-    }
-  }
-}
-
-ion-searchbar div input {
-  padding-inline-start: pxToRem(28);
-  margin-top: pxToRem(6) !important;
-
-  border: pxToRem(1) solid var(--ion-color-medium) !important;
-  border-radius: pxToRem($border-radius-small) !important;
-
-  &:focus {
-    border: pxToRem(2) solid var(--ion-color-primary) !important;
-  }
-}
-
-ion-searchbar div ion-icon {
-  margin-top: pxToRem(2);
-}
-
-ion-datetime,
-ion-select {
-  margin-top: pxToRem(8);
-  padding-left: pxToRem(10) !important;
-  border: pxToRem(1) solid var(--ion-color-medium) !important;
-  border-radius: pxToRem($border-radius-small) !important;
-
-  &:focus {
-    border: pxToRem(2) solid var(--ion-color-primary) !important;
-  }
-}
-
-ion-label {
-  text-align: start;
-  font-weight: $font-weight-bold;
-}
-
-ion-toolbar {
-  --background: transparent;
-}
-
-ion-input {
-  margin-top: 0px;
-}
-
-ion-select {
-  padding-right: pxToRem(10) !important;
-
-  &.select-expanded {
-    border: pxToRem(2) solid var(--ion-color-primary) !important;
-  }
-}
-
-ion-alert {
-  --min-width: 80% !important;
-
-  @include media-medium {
-    --min-width: 400px !important;
-  }
-
-  .alert-radio-label {
-    font-weight: $font-weight-bold;
-  }
-
-  ::-webkit-scrollbar {
-    -webkit-appearance: none;
-    width: 7px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: rgba(0, 0, 0, 0.5);
-    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
-    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
-  }
-}
-
-ion-label {
-  text-align: start;
-}
-
-ion-note {
-  text-align: end !important;
-}
-
-ion-toolbar {
-  --background: transparent;
-  padding: pxToRem(4) pxToRem(8);
-}
-
-ion-back-button {
-  font-family: var(--ion-default-font), Arial, sans-serif;
-}
-
-ion-modal .date-picker-custom {
-  max-width: 340px;
-  max-height: 390px;
-
-  .ion-page {
-    justify-content: flex-start !important;
-  }
-}
-
-.img-black {
-  filter: invert(0);
-
-  @media (prefers-color-scheme: dark) {
-    filter: invert(1);
-  }
-}

package/src/lib/components/styles/typography.scss

@@ -1,189 +0,0 @@
-@import './variables.scss';
-@import './functions.scss';
-@import './media-queries.scss';
-
-@mixin text($fontSize, $lineHeight, $fontSizeMobile, $lineHeightMobile, $fontWeight) {
-  font-size: pxToRem($fontSizeMobile);
-  line-height: pxToRem($lineHeightMobile);
-  font-weight: $fontWeight;
-
-  @include media-medium {
-    font-size: pxToRem($fontSize);
-    line-height: pxToRem($lineHeight);
-  }
-}
-
-@mixin display-xlarge {
-  @include text(
-    $font-size-display-xlarge,
-    $line-height-display-xlarge,
-    $font-size-display-xlarge-responsive,
-    $line-height-display-xlarge-responsive,
-    $font-weight-extra-bold
-  );
-}
-
-@mixin display-large {
-  @include text(
-    $font-size-display-large,
-    $line-height-display-large,
-    $font-size-display-large-responsive,
-    $line-height-display-large-responsive,
-    $font-weight-extra-bold
-  );
-}
-
-@mixin display-medium {
-  @include text(
-    $font-size-display-medium,
-    $line-height-display-medium,
-    $font-size-display-medium-responsive,
-    $line-height-display-medium-responsive,
-    $font-weight-extra-bold
-  );
-}
-
-@mixin display-small {
-  @include text(
-    $font-size-display-small,
-    $line-height-display-small,
-    $font-size-display-small-responsive,
-    $line-height-display-small-responsive,
-    $font-weight-extra-bold
-  );
-}
-
-@mixin title-large {
-  @include text(
-    $font-size-title-large,
-    $line-height-title-large,
-    $font-size-title-large-responsive,
-    $line-height-title-large-responsive,
-    $font-weight-bold
-  );
-}
-
-@mixin title-medium {
-  @include text(
-    $font-size-title-medium,
-    $line-height-title-medium,
-    $font-size-title-medium-responsive,
-    $line-height-title-medium-responsive,
-    $font-weight-bold
-  );
-}
-
-@mixin title-small {
-  @include text(
-    $font-size-title-small,
-    $line-height-title-small,
-    $font-size-title-small-responsive,
-    $line-height-title-small-responsive,
-    $font-weight-bold
-  );
-}
-
-@mixin body-xlarge {
-  @include text(
-    $font-size-body-xlarge,
-    $line-height-body-xlarge,
-    $font-size-body-xlarge-responsive,
-    $line-height-body-xlarge-responsive,
-    $font-weight-regular
-  );
-}
-
-@mixin body-xlarge-bold {
-  @include text(
-    $font-size-body-xlarge,
-    $line-height-body-xlarge,
-    $font-size-body-xlarge-responsive,
-    $line-height-body-xlarge-responsive,
-    $font-weight-bold
-  );
-}
-
-@mixin body-large {
-  @include text(
-    $font-size-body-large,
-    $line-height-body-large,
-    $font-size-body-large-responsive,
-    $line-height-body-large-responsive,
-    $font-weight-regular
-  );
-}
-
-@mixin body-large-bold {
-  @include text(
-    $font-size-body-large,
-    $line-height-body-large,
-    $font-size-body-large-responsive,
-    $line-height-body-large-responsive,
-    $font-weight-bold
-  );
-}
-
-@mixin body-medium {
-  @include text(
-    $font-size-body-medium,
-    $line-height-body-medium,
-    $font-size-body-medium-responsive,
-    $line-height-body-medium-responsive,
-    $font-weight-regular
-  );
-}
-
-@mixin body-medium-bold {
-  @include text(
-    $font-size-body-medium,
-    $line-height-body-medium,
-    $font-size-body-medium-responsive,
-    $line-height-body-medium-responsive,
-    $font-weight-bold
-  );
-}
-
-@mixin body-small {
-  font-size: pxToRem($font-size-body-small-responsive);
-  line-height: pxToRem($line-height-body-small);
-  font-weight: $font-weight-regular;
-}
-
-@mixin body-small-bold {
-  font-size: pxToRem($font-size-body-small-responsive);
-  line-height: pxToRem($line-height-body-small);
-  font-weight: $font-weight-bold;
-}
-
-@mixin caption {
-  font-size: pxToRem($font-size-body-small-responsive);
-  line-height: pxToRem($line-height-body-small);
-  font-weight: $font-weight-regular;
-}
-
-@mixin section-title {
-  @include text(
-    $font-size-display-medium,
-    $line-height-display-medium,
-    $font-size-title-large,
-    $line-height-title-large,
-    $font-weight-extra-bold
-  );
-  color: $color-title;
-}
-
-@mixin header-subtitle-no-responsive {
-  font-size: pxToRem($font-size-body-large);
-  line-height: pxToRem($line-height-body-large);
-}
-
-@mixin header-subtitle {
-  font-size: pxToRem($font-size-body-large-responsive);
-  line-height: pxToRem($line-height-body-large-responsive);
-  font-weight: $font-weight-regular;
-  font-style: italic;
-
-  @include media-medium {
-    @include header-subtitle-no-responsive;
-  }
-}

package/src/lib/components/styles/variables.scss

@@ -1,82 +0,0 @@
-$size-base: 16;
-/* FONT STYLES */
-
-$font-size: $size-base + px;
-$font-size-mobile: 14px;
-
-$font-weight-extra-light: 200;
-$font-weight-light: 300;
-$font-weight-regular: 400;
-$font-weight-medium: 500;
-$font-weight-semi-bold: 600;
-$font-weight-bold: 700;
-$font-weight-extra-bold: 800;
-$font-weight-black: 900;
-
-$font-size-display-xlarge: 56;
-$font-size-display-xlarge-responsive: 48;
-$font-size-display-large: 48;
-$font-size-display-large-responsive: 40;
-$font-size-display-medium: 40;
-$font-size-display-medium-responsive: 32;
-$font-size-display-small: 32;
-$font-size-display-small-responsive: 24;
-$font-size-title-large: 24;
-$font-size-title-large-responsive: 18;
-$font-size-title-medium: 18;
-$font-size-title-medium-responsive: 16;
-$font-size-title-small: 16;
-$font-size-title-small-responsive: 14;
-$font-size-body-xlarge: 24;
-$font-size-body-xlarge-responsive: 18;
-$font-size-body-large: 18;
-$font-size-body-large-responsive: 16;
-$font-size-body-medium: 16;
-$font-size-body-medium-responsive: 14;
-$font-size-body-small: 14;
-$font-size-body-small-responsive: 12;
-
-$line-height-display-xlarge: 64;
-$line-height-display-xlarge-responsive: 56;
-$line-height-display-large: 56;
-$line-height-display-large-responsive: 48;
-$line-height-display-medium: 48;
-$line-height-display-medium-responsive: 40;
-$line-height-display-small: 40;
-$line-height-display-small-responsive: 32;
-$line-height-title-large: 32;
-$line-height-title-large-responsive: 24;
-$line-height-title-medium: 24;
-$line-height-title-medium-responsive: 24;
-$line-height-title-small: 24;
-$line-height-title-small-responsive: 24;
-$line-height-body-xlarge: 32;
-$line-height-body-xlarge-responsive: 24;
-$line-height-body-large: 24;
-$line-height-body-large-responsive: 24;
-$line-height-body-medium: 24;
-$line-height-body-medium-responsive: 24;
-$line-height-body-small: 20;
-
-/* SIZES */
-
-$icon-size-small: 16;
-$icon-size-medium: 24;
-$icon-size-large: 32;
-$icon-size-xlarge: 40;
-
-$container-max-xlarge: 1200;
-$container-max-large: 960;
-$container-max-medium: 720;
-$container-max-small: 540;
-
-$border-radius-small: 8;
-$border-radius: 12;
-
-/* COLORS */
-$color-classic-white: #ffffff;
-$color-alternative-white: #f5f7fa;
-$color-default-hr: #878ca0;
-$color-default-border: #dde3ed;
-$color-default-shadow: #121954;
-$color-default-placeholder: #afbacc;

package/styles/overrides.scss

@@ -1 +0,0 @@
-@import '../src/lib/components/styles/overrides.scss';

package/styles/utils.scss

@@ -1,5 +0,0 @@
-@import '../src/lib/components/styles/media-queries.scss';
-@import '../src/lib/components/styles/variables.scss';
-@import '../src/lib/components/styles/functions.scss';
-@import '../src/lib/components/styles/typography.scss';
-@import '../src/lib/components/styles/mixins.scss';