linear-react-components-ui 1.1.25-rc.2 → 1.1.26-beta-1

package/lib/assets/styles/hint.scss

@@ -1,30 +0,0 @@
-@import "commons.scss";
-@import "colors.scss";
-
-.hint-component {
-  @extend %hint-text;
-
-  &.-skeletonized > span {
-    @extend %skeleton-component;
-  }
-
-  &.-disabled > span {
-    opacity: 0.4;
-  }
-
-  &.-primary {
-    color: $primary-color;
-  }
-  &.-warning {
-    color: $warning-color;
-  }
-  &.-danger {
-    color: $danger-color;
-  }
-  &.-success {
-    color: $success-color;
-  }
-  &.-info {
-    color: $info-color;
-  }
-}

package/lib/assets/styles/icon.scss

@@ -1,42 +0,0 @@
-@import "colors.scss";
-
-/*
-* Caso altere o nome da classe, deverá pesquisar em todo projeto se existe 
-* algum lugar que esta sobescrevendo
-*/
-.icon-component-container {
-  display: inline-flex;
-  place-self: center;
-  padding: 2px;
-  border-radius: 99999px;
-  pointer-events: fill;
-
-}
-
-.icon-component {
-  margin: 0px 2px;
-  &:not([fill]) { 
-    fill: #676464;
-  }
-
-  &[data-color-style="primary"] {
-    fill: $primary-color
-  }
-
-  &[data-color-style="success"] {
-    fill: $success-color
-  }
-
-  &[data-color-style="info"] {
-    fill: $info-color
-  }
-
-  &[data-color-style="warning"] {
-    fill: $warning-color
-  }
-
-  &[data-color-style="danger"] {
-    fill: $danger-color
-  }
-}
-

package/lib/assets/styles/input.scss

@@ -1,156 +0,0 @@
-@import "commons.scss";
-@import "fonts.scss";
-@import "colors.scss";
-@import "effects";
-.input-base-component > .labelcontainer > .text-content {
-  margin: 0; 
-  padding: 0;
-  line-height: 14px;
-  margin-bottom: 6px;
-  > .label {
-    @extend %input-label;
-    width: 100%;
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.input-base-component {
-  > .hint {
-    @extend %hint-text;
-  }
-  &.-customsizes {
-    width: 100%;
-    height: 100%;
-  }
-  & .icon-component {
-    height: 100%;
-    display: grid;
-    align-self: center;
-    margin-right: 2px;
-  }
-}
-
-.input-base-component > .inputwrapper {
-  border-radius: 2px;
-  border: 1px solid  $component-border-color;
-  width: 100%;
-  display: flex;
-  &.-customsizes {
-    width: 100%;
-    height: 100%;
-    border: none;
-  }
-  &.-focusable {
-    box-shadow: 0 3px 0 $component-selected-color;
-    transition: all 250ms cubic-bezier(.19,.62,.58,.98) 100ms;
-  }
-  &.-undigitable,
-  &.-undigitable > .inputcontent > .textinput {
-    background: #f9fcf7;
-    background: -moz-linear-gradient(top, #f6f6f6 0%, #fafafa 100%) !important;
-    background: -webkit-linear-gradient(top, #f6f6f6 0%,#fafafa 100%) !important;
-    background: linear-gradient(to bottom, #f6f6f6 0%,#fafafa 100%) !important;
-  }
-  &.-requirederror {
-    border-color: $input-error-border-color;
-    background-color: $input-error-bg-color;
-  }
-  &.-roundedborders {
-    border-radius: 60px;
-    > .inputcontent > .textinput {
-      border-radius: 60px;
-    }
-  }
-  &.-disabled {
-    background-color: #f5f5f5 !important;
-  }
-  > .textinput,
-  > .inputcontent > .textinput {
-    @extend %component-fonts;
-    @extend %input-placeholder;
-    background-color: #ffffff;
-    text-indent: 5px;
-    border: 0;
-    flex-grow: 1;
-    width: 100%;
-    padding: 6px;
-    font-size: 14px;
-    &.-readonly,
-    &.-readonly > .inputcontent > .textinput {
-      background: #fff5e5;
-    }
-  }
-  > .inputcontent > .textinput[disabled] {
-    @extend %component-disabled;
-  }
-  > .inputcontent {
-    display: flex;
-    align-self: stretch;
-    flex-grow: 1;
-    padding: 0;
-    margin: 0;
-    &.-hidden {
-      visibility: hidden !important;
-      width: 0px !important;
-    }
-    &.-pointEventDisabled {
-      pointer-events: none;
-    }
-  }
-  > .sidebuttons {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 3px 5px 0;
-    &.-iconcenter {
-      margin: 0px;
-      width: 100%;
-      display: flex;
-      justify-content: center;
-    }
-  }
-}
-
-.input-base-component.-skeletonized {
-  > .labelcontainer > .text-content > .label,
-  > .hint {
-    @extend %skeleton-component;
-    color: transparent;
-  }
-  > .inputwrapper {
-    border: 1px solid transparent;
-    > .sidebuttons {
-      display: none;
-    }
-    > .inputcontent > .textinput {
-      @extend %skeleton-component;
-      content-visibility: hidden;
-      &.-readonly {
-        @extend %skeleton-component;
-      }
-    }
-  }
-}
-
-.textarea-container {
-  height: auto;
-}
-
-textarea {
-  resize: vertical;
-}
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-input[type=number] {
-  -moz-appearance: textfield;
-}

package/lib/assets/styles/label.scss

@@ -1,118 +0,0 @@
-@import "colors.scss";
-@import "fonts.scss";
-@import "commons.scss";
-
-$shadow-button-default: 1px 1px 1px rgba(0, 0, 0, 0.2);
-$shadow-text-button: 0 1px 0 rgba(0,0,0,.1);
-.label-component {
-  @extend %component-fonts;
-  font-family: 'Roboto', sans-serif;
-  font-weight: 500;
-  display: inline-block;
-  padding: 3px 5px;
-  font-size: 14px;
-  text-align: center;
-  border-radius: 4px;
-  line-height: 14px;
-  &.-bordered {
-    border: 1px solid $default-border-color;
-  }
-  &.-danger {
-    background-color: $danger-color;
-    color: $font-color-second;
-    text-shadow: $shadow-text-button;
-    &.-bordered {
-      border: 1px solid $danger-color;
-    }
-  }
-  &.-primary {
-    background-color: $primary-color;
-    color: $font-color-second;
-    text-shadow: $shadow-text-button;
-    &.-bordered {
-      border: 1px solid $primary-border-color;
-    }
-  }
-  &.-warning {
-    background-color: $warning-color;
-    color: $font-color-second;
-    text-shadow: $shadow-text-button;
-    &.-bordered {
-      border: 1px solid $warning-color;
-    }
-  }
-  &.-success {
-    background-color: $success-color;
-    color: $font-color-second;
-    text-shadow: $shadow-text-button;
-    &.-bordered {
-      border: 1px solid $success-color;
-    }
-  }
-  &.-info {
-    background-color: $info-color;
-    color: $font-color-second;
-    text-shadow: $shadow-text-button;
-    &.-bordered {
-      border: 1px solid $info-color;
-    }
-  }
-  &.-mini {
-    padding: 2px 4px 1px;
-    font-size: 10px;
-    line-height: 10px;
-  }
-  &.-medium {
-    padding: 3px 5px;
-    font-size: 14px;
-    line-height: 14px;
-  }
-  &.-small {
-    padding: 2px 4px;
-    font-size: 12px;
-    line-height: 12px;
-  }
-  &.-large {
-    padding: 4px 6px;
-    font-size: 18px;
-    line-height: 18px;
-  }
-  &.icon-right 
-  > .icon-component {
-    width: 12px;
-    height: 12px;
-    float: right;
-    margin-left: 5px;
-    padding-top: 0.5px;
-  }
-  &.icon-left 
-  > .icon-component {
-    width: 12px;
-    height: 12px;
-    float: left;
-    margin-right: 5px;
-    padding-top: 0.5px;
-  }
-}
-
-.label-component.-skeletonized {
-  @extend %skeleton-component;
-
-  > svg {
-    fill: transparent;
-  }
-}
-
-.label-component.-skeletonized.-bordered {
-  border-color: transparent;
-}
-
-.lbl-container {
-  width: auto;
-  .label-component {
-    margin-right: 5px;
-  }
-  .label-component:last-child {
-    margin-right: 2px;
-  }
-}

package/lib/assets/styles/labelMessages.scss

@@ -1,81 +0,0 @@
-@import "colors.scss";
-.labelmessages-component {
-  width: 100%;
-  display: flex;
-  padding: 12px 15px;
-  border-width: 1px;
-  border-style: solid;
-  >.labelmessagesitem {
-    align-items: center;
-    display: grid;
-    line-height: 1.6em;
-  }
-  >.-icon {
-    order: 1;
-  }
-  >.-close {
-    font-weight: bold;
-    order: 3;
-    padding: .5em;
-    color: inherit;
-    cursor: pointer;
-  }
-  >.text {
-    order: 2;
-    flex: 4 1 auto;
-    font-size: 14px;
-    white-space: pre-wrap;
-  }
-  &.-warning {
-    background-color: $alert-warning;
-    border-color: $alert-warning-border;
-    color: $alert-warning-text;
-    .-warningsvg {
-      fill: $alert-warning-text;
-      margin-right: 15px;
-    }
-  }
-  &.-danger {
-    background-color: $alert-danger;
-    border-color: $alert-danger-border;
-    color: $alert-danger-text;
-    .-dangersvg {
-      fill: $alert-danger-text;
-      margin-right: 15px;
-    }
-  }
-  &.-success {
-    background-color: $alert-success;
-    border-color: $alert-success-border;
-    color: $alert-success-text;
-    .-successsvg {
-      fill: $alert-success-text;
-      margin-right: 15px;
-    }
-  }
-  &.-info {
-    background-color: $alert-info;
-    border-color: $alert-info-border;
-    color: $alert-info-text;
-    .-infosvg {
-      fill: $alert-info-text;
-      margin-right: 15px;
-    }
-  }
-  &.-default {
-    background-color: $alert-default;
-    border-color: $alert-default-border;
-    color: $alert-default-text;
-    hr {
-      border: 0;
-      height: 1px;
-      background: $alert-default-border;
-    }
-  }
-  &.-flat {
-    border-radius: 0!important;
-  }
-  &.-square {
-    border-radius: .25rem;
-  }
-}

package/lib/assets/styles/list.scss

@@ -1,124 +0,0 @@
-@import "colors.scss";
-@import "commons.scss";
-
-$item-height: 48px;
-.list-component {
-  border: 1px solid $list-container-border;
-  box-shadow: 1px 1px 1px $list-container-box-shadow;
-  border-radius: 5px;
-  overflow: auto;
-  height: 100%;
-  &.-listbackground {
-    background: #fff!important;
-  }
-  &.-condensed {
-    .item-container {
-      height: 40px;
-      line-height: 40px!important;
-    }
-    .item {
-      line-height: 40px!important;
-    }
-  }
-  > .skeleton-transparency {
-    position: relative;
-    &::after {
-      @extend %skeleton-transparency;
-      top: 0;
-      left: 0;
-    }
-  }
-}
-
-.item-container {
-  display: flex;
-  flex-wrap: wrap;
-  transition: all 0.2s ease-in-out;
-  position: relative;
-  &.hovered {
-    &:hover {
-      background-color: $list-item-hover;
-    }
-  }
-  &:active:before {
-    @extend %component-effect-click;
-  }
-  &.-activedlist {
-    background-color: $list-item-hover;
-  }
-  > .linkitem {
-    position: absolute;
-    height: $item-height;
-    width: 100%;
-  }
-  > .item {
-    flex: 1 0 1%;
-    box-sizing: border-box;
-    cursor: pointer;
-    color: $list-item-text;
-    font-size: 14px;
-    line-height: $item-height;
-    width: 100%;
-    padding-left: 10px;
-    padding-right: 10px;
-    align-items: center;
-    > .text {
-      display: inline-block;
-      font-weight: 400;
-      justify-content: space-between;
-      padding-left: 0px;
-      line-height: 18px;
-      vertical-align: middle;
-    }
-    > .subtext {
-      display: flex;
-      align-items: center;
-      justify-content: left;
-      font-size: 12px;
-      line-height: 18px;
-      margin-bottom: 12px;
-      margin-top: 0px;
-      color: rgba(0, 0, 0, 0.54);
-      padding-left: 0px;
-      text-overflow: ellipsis;
-    }
-    &.disabled {
-      @extend %component-disabled;
-      &:hover {
-        display: none;
-      }
-    }
-    &.-icon-left {
-      flex: 0 0 0;
-      padding-left: 7px;
-      padding-right: 5px;
-      align-items: center;
-      display: grid;
-    }
-    &.-icon-right {
-      flex: 0 0 0;
-      align-items: center;
-      padding-left: 13px;
-      padding-right: 5px;
-      display: grid;
-    }
-  }
-}
-
-.list-header .title {
-  box-sizing: border-box;
-  color: $list-header-title;
-  font-size: 14px;
-  font-weight: 600!important;
-  line-height: $item-height;
-  padding-left: 7px;
-  width: 100%;
-}
-
-.list-separator {
-  border-bottom: 1px solid rgba(223, 223, 223, 0.5);
-}
-
-.list-component > .item-container:last-child > .item {
-  border-bottom: none;
-}

package/lib/assets/styles/multiSelect.scss

@@ -1,125 +0,0 @@
-@import "commons.scss";
-@import "effects.scss";
-
-.multiSelect-component {
-  width: 100%;
-  display: block;
-
-  .selectwrapper {
-    height: auto;
-
-    >.multiselect {
-      flex-wrap: wrap;
-      position: relative;
-
-      >.textinput {
-        order: 1;
-        display: inline-block;
-      }
-
-      >.selecteditem {
-        font-size: 14px;
-        position: absolute;
-        top: 50%;
-        left: 10px;
-        transform: translateY(-50%);
-
-        button {
-          all: unset;
-        }
-      }
-    }
-
-    >.actionbutton {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      margin: 0 3px;
-      padding: 0 3px;
-
-      >svg {
-        margin: 0;
-      }
-    }
-  }
-}
-
-.multiSelect-component>.dropdown {
-  animation: 0.5s ease-in 0s 1 slideDown;
-  background-color: #fff;
-  border: $component-border-color;
-  @extend %component-menu-dropdown;
-  display: grid;
-  grid-template-rows: auto;
-  height: auto;
-  overflow-y: auto;
-  overflow-x: hidden;
-  position: absolute;
-  z-index: 9999;
-
-  >.filtercontainer {
-    position: relative;
-    display: grid;
-    grid-template-columns: 1fr 20px;
-    border: 1px solid $component-border-color;
-    margin: 4px;
-
-    >.filterinput {
-      border: 0;
-      font-size: 13px;
-      text-indent: 4px;
-      padding: 10px 5px;
-    }
-
-    >.filtericon {
-      position: absolute;
-      right: 5px;
-      top: 10px;
-    }
-  }
-
-  >.listcontainer>.item {
-    margin: 0;
-    padding: 6px 10px;
-    display: flex;
-    cursor: pointer;
-    justify-content: stretch;
-    border-bottom: solid 1px #e1e1e1;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &:hover {
-      background-color: $default-hover-color;
-    }
-
-    &.-selected {
-      background-color: $default-hover-color;
-    }
-
-    .menubutton {
-      all: unset;
-      background-color: transparent;
-      border: 0;
-      padding: 0;
-      margin: 0;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-
-      >.checkboxicon {
-        margin-right: 5px;
-      }
-
-      >.label {
-        flex-grow: 1;
-      }
-
-      >.menuicon {
-        margin-right: 5px;
-      }
-    }
-  }
-}

package/lib/assets/styles/noPermission.scss

@@ -1,25 +0,0 @@
-.no-permission-component {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-  > .text, .subtext {
-    text-align: center;
-  }
-   .text {
-    font-size: 26px;
-    margin-top: 20px;
-    color: #4e4c4c;
-  }
-  .subtext {
-    font-size: 15px;
-    margin-top: 5px;
-    color: #a8a8a8;
-  }
-}
-
-
-
-

package/lib/assets/styles/numbers.scss

@@ -1,5 +0,0 @@
-.currency-symbol {
-  color: #777;
-  font-size: 14px;
-  margin-left: 3px;
-}