@iroco/ui 0.21.0 → 0.50.1

package/scss/style.scss

@@ -1,5 +1,5 @@
-@use "colors";
-@use "containers";
-@use "fonts";
-@use "forms";
-@use "layouts";
+@use 'colors';
+@use 'containers';
+@use 'fonts';
+@use 'forms';
+@use 'layouts';

package/lib/button.scss

@@ -1,61 +0,0 @@
-@use '../scss/colors';
-@use '../scss/fonts';
-@use '../scss/containers';
-@use '../scss/constants';
-
-.iroco-ui-button {
-  cursor: pointer;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  border: none;
-  flex-shrink: 0;
-  margin: 1em 0em;
-  position: relative;
-  text-transform: uppercase;
-  border-radius: constants.$border-radius;
-
-  &--basic {
-    background: colors.$beige;
-    border: 1px solid colors.$nightBlue;
-  }
-  &--dark {
-    background: colors.$nightBlue;
-    color: colors.$beige;
-  }
-  &--success {
-    background: colors.$green;
-    color: colors.$nightBlue;
-  }
-  &--danger {
-    background: colors.$red;
-  }
-  &--regular {
-    padding: 1em 2em;
-  }
-  &--small {
-    padding: 0.5em 1em;
-  }
-
-  &--basic:hover, &--success:hover, &--danger:hover {
-    box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2);
-  }
-  &--dark:hover {
-    box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2);
-  }
-
-  &:active {
-    box-shadow: none;
-  }
-
-  &.disabled {
-    background-color: colors.$lightGrey;
-    cursor: default;
-    &:hover {
-      box-shadow: none;
-    }
-  }
-}

package/lib/check.scss

@@ -1,48 +0,0 @@
-.ui-check {
-  width: 30px;
-  min-width: 30px;
-  height: 30px;
-  min-height: 30px;
-  background: rgba($darkBeige, .1);
-  border: solid rgba($darkBeige, .4) 1px;
-  cursor: pointer;
-  outline: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 400ms;
-  border-radius: 2px;
-
-  &.tag {
-    width: auto;
-    padding: 0 10px;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 5px rgba($blue, .3);
-  }
-
-  >svg {
-    stroke-dashoffset: 100;
-    transition: stroke-dashoffset cubic-bezier(0.215, 0.61, 0.355, 1) 400ms;
-  }
-
-  >span {
-    @include Arial(1em, $darkBeige);
-  }
-
-  &[aria-pressed=true] {
-    border: solid $blue 1px;
-
-    >svg {
-      stroke-dashoffset: 0;
-    }
-
-    >span {
-      color: $blue;
-    }
-  }
-
-}

package/lib/colors.scss

@@ -1,23 +0,0 @@
-$blue: #00B9FF;
-$darkBlue: #211D28;
-$nightBlue: #18151E;
-$green: #00D692;
-$red: #ff504d;
-$yellow: #FFE032;
-$beige: #f2ebe3;
-$darkBeige: #a9a29e;
-$mediumGrey : #464452;
-$darkGrey: #33323a;
-$lightGrey: #f5f5f5;
-
-.font-color-blue {color: $blue;}
-.font-color-darkBlue {color: $darkBlue;}
-.font-color-nightBlue {color: $nightBlue;}
-.font-color-green {color: $green;}
-.font-color-red {color: $red;}
-.font-color-yellow {color: $yellow;}
-.font-color-beige {color: $beige;}
-.font-color-darkBeige {color: $darkBeige;}
-.font-color-mediumGrey {color: $mediumGrey;}
-.font-color-darkGrey {color: $darkGrey;}
-.font-color-lightGrey {color: $lightGrey;}

package/lib/constants.scss

@@ -1 +0,0 @@
-$border-radius: 0.3em

package/lib/containers.scss

@@ -1,226 +0,0 @@
-$break-point-4K: 2560px;
-$break-point-desktop: 1800px;
-$break-point-laptop-L: 1440px;
-$break-point-laptop: 1024px;
-$break-point-tablet: 768px;
-$break-point-tablet-S: 596px;
-$break-point-mobile-L: 425px;
-$break-point-mobile-M: 375px;
-$break-point-mobile-S: 320px;
-
-$width: $break-point-4K - 200px;
-$width-4k: $break-point-desktop - 180px;
-$width-desktop: $break-point-laptop-L - 160px;
-$width-laptop-L: $break-point-laptop - 140px;
-$width-laptop: $break-point-tablet - 120px;
-$width-tablet: $break-point-tablet-S - 100px;
-$width-tablet-S: $break-point-mobile-L - 60px;
-$width-mobile-L: calc(100% - 60px);
-$width-mobile-M: calc(100% - 40px);
-$width-mobile-S: calc(100% - 20px);
-
-@mixin screen-4K() {
-  @media all and (max-width: $break-point-4K) {
-    @content;
-  }
-}
-
-@mixin screen-desktop() {
-  @media all and (max-width: $break-point-desktop) {
-    @content;
-  }
-}
-
-@mixin screen-laptop-L() {
-  @media all and (max-width: $break-point-laptop-L) {
-    @content;
-  }
-}
-
-@mixin screen-laptop() {
-  @media all and (max-width: $break-point-laptop) {
-    @content;
-  }
-}
-
-@mixin screen-tablet() {
-  @media all and (max-width: $break-point-tablet) {
-    @content;
-  }
-}
-
-@mixin screen-tablet-S() {
-  @media all and (max-width: $break-point-tablet-S) {
-    @content;
-  }
-}
-
-@mixin screen-mobile-L() {
-  @media all and (max-width: $break-point-mobile-L) {
-    @content;
-  }
-}
-
-@mixin screen-mobile-M() {
-  @media all and (max-width: $break-point-mobile-M) {
-    @content;
-  }
-}
-
-@mixin screen-mobile-S() {
-  @media all and (max-width: $break-point-mobile-S) {
-    @content;
-  }
-}
-
-@mixin container-wide() {
-  width: $width-mobile-S;
-  max-width: $width;
-  margin-left: auto;
-  margin-right: auto;
-  transition: max-width ease-out 200ms;
-
-  @include screen-4K() {
-    max-width: $width-4k;
-  }
-
-  @include screen-desktop() {
-    max-width: $width-desktop;
-  }
-
-  @include screen-laptop-L() {
-    max-width: $width-laptop-L;
-  }
-
-  @include screen-laptop() {
-    max-width: $width-laptop;
-  }
-
-  @include screen-tablet() {
-    max-width: $width-tablet;
-  }
-
-  @include screen-tablet-S() {
-    max-width: $width-tablet-S;
-  }
-
-  @include screen-mobile-L() {
-    max-width: $width-mobile-L;
-  }
-
-  @include screen-mobile-M() {
-    max-width: $width-mobile-M;
-  }
-
-  @include screen-mobile-S() {
-    max-width: $width-mobile-S;
-  }
-
-}
-
-@mixin container-large() {
-  width: $width-mobile-S;
-  max-width: $width-desktop;
-  margin-left: auto;
-  margin-right: auto;
-  transition: max-width ease-out 200ms;
-
-  @include screen-laptop-L() {
-    max-width: $width-laptop-L;
-  }
-
-  @include screen-laptop() {
-    max-width: $width-laptop;
-  }
-
-  @include screen-tablet() {
-    max-width: $width-tablet;
-  }
-
-  @include screen-tablet-S() {
-    max-width: $width-tablet-S;
-  }
-
-  @include screen-mobile-L() {
-    max-width: $width-mobile-L;
-  }
-
-  @include screen-mobile-M() {
-    max-width: $width-mobile-M;
-  }
-
-  @include screen-mobile-S() {
-    max-width: $width-mobile-S;
-  }
-
-}
-
-@mixin container-medium() {
-  width: $width-mobile-S;
-  max-width: $width-laptop-L;
-  margin-left: auto;
-  margin-right: auto;
-  transition: max-width ease-out 200ms;
-
-  @include screen-laptop() {
-    max-width: $width-laptop;
-  }
-
-  @include screen-tablet() {
-    max-width: $width-tablet;
-  }
-
-  @include screen-tablet-S() {
-    max-width: $width-tablet-S;
-  }
-
-  @include screen-mobile-L() {
-    max-width: $width-mobile-L;
-  }
-
-  @include screen-mobile-M() {
-    max-width: $width-mobile-M;
-  }
-
-  @include screen-mobile-S() {
-    max-width: $width-mobile-S;
-  }
-
-}
-
-@mixin container-small() {
-  width: $width-mobile-S;
-  max-width: $width-tablet;
-  margin-left: auto;
-  margin-right: auto;
-  transition: max-width ease-out 200ms;
-
-  @include screen-mobile-L() {
-    max-width: $width-mobile-L;
-  }
-
-  @include screen-mobile-M() {
-    max-width: $width-mobile-M;
-  }
-
-  @include screen-mobile-S() {
-    max-width: $width-mobile-S;
-  }
-
-}
-
-.container-wide {
-  @include container-wide();
-}
-
-.container-large {
-  @include container-large();
-}
-
-.container-medium {
-  @include container-medium();
-}
-
-.container-small {
-  @include container-small();
-}

package/lib/fields/_checkbox.scss

@@ -1,44 +0,0 @@
-.ui-fields-checkbox {
-
-  >.container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-
-    >label {
-      @include Arial(.9em, $blue, bold);
-      letter-spacing: .05em;
-      text-transform: uppercase;
-      display: inline-block;
-      margin-left: 20px;
-
-      @include small-screen() {
-        font-size: .8em;
-        margin-left: 15px;
-      }
-
-    }
-  }
-
-  >.error, >.warning {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    margin-top: 15px;
-
-    >span {
-      @include Arial(.9em, $red);
-      margin-left: 10px;
-    }
-
-  }
-
-  >.warning {
-
-    >span {
-      color: $blue;
-    }
-
-  }
-
-}

package/lib/fields/_input.scss

@@ -1,171 +0,0 @@
-.ui-fields-input {
-  width: 100%;
-  transition: width linear 100ms;
-
-  > label {
-    @include Arial(1em, white, bold);
-    letter-spacing: .05em;
-    text-transform: uppercase;
-    padding-bottom: 10px;
-    display: inline-block;
-  }
-
-  input, input:active, input:focus {
-    border: none;
-    outline: none;
-    text-decoration: none;
-    background: transparent;
-
-  }
-
-  >.container {
-    transition: background linear 100ms;
-    background: white;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-
-    &:after {
-      content: "";
-      display: block;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 0;
-      height: 3px;
-      background: $green;
-      transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
-    }
-
-    >.left-icon {
-      padding-left: 15px;
-    }
-
-    >input {
-      @include Arial(1em, $darkBlue);
-      flex: 1;
-      padding: 10px 15px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-
-      &::placeholder {
-        color: rgba($darkBlue, .3);
-        font-style: italic;
-      }
-
-    }
-
-    >.suggestions {
-      overflow: hidden;
-      visibility: hidden;
-      opacity: 0;
-      position: absolute;
-      background: white;
-      width: 100%;
-      top: 100%;
-      transition: opacity linear 100ms;
-      @include modal-layout();
-
-      >.suggestion {
-        display: block;
-        text-align: left;
-        width: 100%;
-        border: none;
-        cursor: pointer;
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        flex-shrink: 0;
-        border-top: solid $beige 1px;
-        background: white;
-        transition: background linear 100ms;
-
-        &:first-child {
-          border: none;
-        }
-
-        &:hover, &.selected {
-          background: $lightGrey;
-        }
-
-      }
-
-    }
-  }
-
-  >.instructions {
-    @include Arial(1em, $darkBeige);
-    margin-top: 10px;
-  }
-
-  >.error, >.warning {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    margin-top: 15px;
-
-    >span {
-      @include Arial(.9em, $red);
-      margin-left: 10px;
-    }
-
-  }
-
-  >.warning {
-
-    >span {
-      color: $blue;
-    }
-
-  }
-
-  &.active {
-    >.container {
-
-      &:after {
-        width: 100%;
-      }
-
-      >.suggestions.active {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-  }
-
-  &.dark {
-
-    >.container {
-      background: $darkBlue;
-
-      &:after {
-        //background: $blue;
-      }
-
-      >input {
-        padding: 15px 20px;
-
-        &::placeholder {
-          color: rgba(white, .3);
-        }
-
-      }
-
-    }
-
-    &.active, &.touched {
-      >.container {
-        background: white;
-
-      }
-    }
-
-  }
-
-}

package/lib/fields/_style.scss

@@ -1,2 +0,0 @@
-@import 'input';
-@import 'checkbox';

package/lib/fonts.scss

@@ -1,11 +0,0 @@
-$arial: 'Arial';
-
-@mixin Arial($size: 1em, $color: white, $weight: normal) {
-  font-family: $arial, sans-serif;
-  font-size: $size;
-  font-weight: $weight;
-  color: $color;
-  margin: 0;
-  padding: 0;
-  transition: color ease-out 100ms, font-size ease-out 100ms;
-}

package/lib/forms.scss

@@ -1,67 +0,0 @@
-@use 'colors';
-
-.iroco-ui-form {
-  input, textarea {
-    outline: none;
-    text-decoration: none;
-    font-size: 14px;
-
-    &:focus {
-      outline: none;
-      text-decoration: none;
-      font-size: 14px;
-    }
-  }
-
-  .iroco-ui-input {
-    display: flex;
-    flex-direction: column;
-    > input {
-      color: colors.$beige;
-      background: colors.$darkBlue;
-      border: 1px solid colors.$darkBlue;
-      padding: 1em 1.5em;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      border-radius: 0.5em;
-
-      &::placeholder {
-        color: rgba(colors.$beige, .5);
-      }
-      &.error {
-        border-color: colors.$red;
-      }
-      &.readonlyInput{
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  .iroco-ui-label {
-    color: rgba(colors.$beige, .6);
-    font-weight: bold;
-    padding-bottom: 10px;
-    display: inline-block;
-  }
-
-  .field {
-    margin-top: 20px;
-
-    &:first-child {
-      margin: 0;
-    }
-  }
-
-  >.submit {
-    margin-top: 40px;
-  }
-
-  p.error {
-    margin: 0;
-    color: colors.$red;
-  }
-}
-
-
-