@lancom/shared 0.0.62 → 0.0.66

package/assets/scss/ui_kit/_index.scss

@@ -0,0 +1,9 @@
+
+@import "buttons";
+@import "typography";
+@import "grid";
+@import "forms";
+@import "modals";
+@import "toast";
+@import "tooltip";
+@import "table";

package/assets/scss/ui_kit/_modals.scss

@@ -0,0 +1,64 @@
+@import "@/assets/scss/variables";
+
+.lc_modal {
+  &__wrapper {
+    background-color: #FFF;
+    border-radius: 8px;
+    overflow: hidden;
+
+    @media (max-width: $bp-extra-small-max) {
+      // todo: check if it works with just margin, otherwise uncomment
+      // max-height: calc(var(--vh, 1vh) * 100);
+      // overflow: scroll;
+      margin-bottom: calc(var(--vh, 1vh) * 50);
+    }
+  }
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    border-radius: 8px 8px 0 0;
+    padding: 30px 30px 28px 30px;
+    position: relative;
+    background-color: #FFFFFF;
+    &--small-padding {
+      padding: 15px 20px 15px 20px;
+    }
+    &.center {
+      justify-content: center;
+    }
+    &.pull-right {
+      justify-content: flex-end;
+    }
+    &-title {
+      @extend .lc_semibold22;
+      color: $black;
+    }
+  }
+  &__close {
+    font-size: 26px;
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    color: #FFF;
+    cursor: pointer;
+    &:before {
+      margin: 0;
+    }
+    &--dark {
+      @extend .lc_modal__close;
+      color: $grey_5;
+    }
+  }
+  &__footer {
+    padding: 12px 30px 20px 30px;
+    background-color: #FFFFFF;
+    border-radius: 0 0 8px 8px;
+    & .form-actions {
+      margin-top: 0;
+    }
+  }
+  &__content {
+    padding: 12px 30px 20px 30px;
+  }
+}

package/assets/scss/ui_kit/_table.scss

@@ -0,0 +1,90 @@
+@import "@/assets/scss/variables";
+
+.lc_table {
+  width: 100%;
+  table-layout: fixed;
+  &.bordered {
+    border-collapse: collapse;
+    &, th, td {
+      border: 1px solid $grey_2;
+    }
+  }
+  tr.bordered {
+    border: 1px solid $grey_2;
+  }
+  th {
+    font-size: 16px;
+    line-height: 170%;
+    color: $gray;
+    vertical-align: middle;
+  }
+  &:not(.tight-rows) tr {
+    height: 50px;
+  }
+  td {
+    letter-spacing: 0.02em;
+    color: $dark_blue;
+    vertical-align: middle;
+  }
+  &.highlighted td,
+  tr.highlighted th,
+  tr.highlighted td {
+    font-weight: 500;
+  }
+  thead.centered th,
+  tbody.centered td {
+    text-align: center;
+  }
+  tbody td,
+  thead th {
+    &.pull-left {
+      text-align: left;
+    }
+    &.pull-right {
+      text-align: right;
+    }
+  }
+  thead.cell-padding th,
+  th.cell-padding {
+    padding: 0 12px;
+  }
+  tbody.cell-padding td,
+  td.cell-padding {
+    padding: 0 12px;
+  }
+  tbody.no-padding td,
+  td.no-padding {
+    padding: 0 !important;
+  }
+  tbody.baseline td,
+  td.baseline {
+    vertical-align: baseline;
+  }
+
+  thead.pull-left th { text-align: left; }
+  thead.pull-right th { text-align: right; }
+
+  &.striped tbody tr:nth-child(odd),
+  tr.stripped,
+  td.fill {
+    background-color: $light_gray !important;
+  }
+  @for $i from 1 through 12 {
+    &.col-#{$i}-highlighted {
+      tbody td:nth-child(#{$i}) {
+        font-weight: 500;
+      }
+    }
+    &.col-#{$i}-stripedless {
+      tbody td:nth-child(#{$i}) {
+        background-color: #FFFFFF;
+      }
+    }
+  }
+  tr.active {
+    background-color: $green !important;
+    td {
+      color: #FFFFFF;
+    }
+  }
+}

package/assets/scss/ui_kit/_toast.scss

@@ -0,0 +1,52 @@
+@import "@/assets/scss/variables";
+@import "./typography";
+
+.toast {
+  &-container.toast-top-right {
+    @media (max-width: $bp-extra-small-max) {
+      top: 0;
+      right: 0;
+      left: 0;
+    }
+  }
+  &-container > & {
+    opacity: 1;
+    border-radius: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    padding: 12px 16px;
+    @media (max-width: $bp-extra-small-max) {
+      width: 100%;
+      border-radius: 0;
+    }
+  }
+  &-container > & > &-message {
+    @extend .lc_subtitle2--strong-white;
+  }
+  &-container > &-success {
+    background-color: $green;
+  }
+  &-container > &-error {
+    background-color: $error;
+  }
+  &.students-limit-reached {
+    &:after {
+      content: '\E80E';
+      font-family: "fontello";
+      font-size: 24px;
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+.toast-container {
+  z-index: 1000001 !important;
+  & > .toast.toast-success,
+  & > .toast.toast-warning,
+  & > .toast.toast-info,
+  & > .toast.toast-error {
+    box-shadow: none;
+    background-image: none !important;
+  }
+}

package/assets/scss/ui_kit/_tooltip.scss

@@ -0,0 +1,131 @@
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+
+  .tooltip-inner {
+    background: #6E6E82;
+    color: #FFFFFF;
+    font-size: 14px;
+    line-height: 150%;
+    padding: 8px 20px;
+    border-radius: 3px;
+    max-width: 300px;
+  }
+
+  .tooltip-arrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    position: absolute;
+    margin: 5px;
+    border-color: #6E6E82;
+    z-index: 1;
+  }
+
+  &.white &-inner {
+    background: #FFF !important;
+    color: #575872 !important;
+    border: 1px solid #EFF1F2 !important;
+  }
+  &.white &-arrow {
+    border-color: #FFF !important;
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 0 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      bottom: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: 5px;
+
+    .tooltip-arrow {
+      border-width: 0 5px 5px 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-top-color: transparent !important;
+      top: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 5px 0;
+      border-left-color: transparent !important;
+      border-top-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 0 5px 5px;
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      right: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &.popover {
+
+    .popover-inner {
+      background-color: #6E6E82;
+      opacity: .95;
+      color: #F9F9FC;
+      padding: 8px 20px;
+      border-radius: 5px;
+      font-size: 14px;
+      line-height: 150%;
+      text-align: center;
+      box-shadow: 0 5px 30px rgba(black, .1);
+      .learn-more-link {
+        color: #38C88D;
+        cursor: pointer;
+      }
+    }
+    &.no-paddings .popover-inner {
+      padding: 0;
+    }
+
+    .popover-arrow {
+      border-color: #6E6E82;;
+    }
+  }
+
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .15s, visibility .15s;
+  }
+
+  &[aria-hidden='false'] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity .15s;
+  }
+}

package/assets/scss/ui_kit/_typography.scss

@@ -0,0 +1,358 @@
+@import "@/assets/scss/variables";
+.lc {
+  &_bold {
+    font-weight: 800 !important;
+  }
+  &_capitalize {
+    text-transform: capitalize;
+  }
+  &_h1, &_h2, &_h3, &_h4, &_h5, &_h6 {
+    text-decoration: none !important;
+
+    &, &--black {
+      color: $dark_blue;
+    }
+    &--white {
+      color: $white_high_emphasis;
+    }
+    &--gray {
+      color: $gray;
+    }
+  }
+  &_body1, &_body2, &_subtitle1, &_subtitle2, &_subtitle3, &_caption, &_overline, &_overline--bold {
+    &, &--black {
+      color: $black;
+    }
+    &--strong-black {
+      color: $black_high_emphasis;
+    }
+    &--white {
+      color: $white_medium_emphasis;
+    }
+    &--strong-white {
+      color: $white_high_emphasis;
+    }
+  }
+  &_h1 {
+    font-style: normal;
+    font-weight: 800;
+    font-size: 45px;
+    line-height: 58px;
+    letter-spacing: 0.02em;
+    &--black, &--white, &--gray {
+      @extend .lc_h1;
+    }
+  }
+  &_h2 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 35px;
+    line-height: 140%;
+    letter-spacing: 0.02em;
+    &--black, &--white, &--gray {
+      @extend .lc_h2;
+    }
+  }
+  &_h3 {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 25px;
+    line-height: 35px;
+    letter-spacing: 0.02em;
+    &--black, &--white, &--gray {
+      @extend .lc_h3;
+    }
+  }
+  &_h4 {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 26px;
+    letter-spacing: 0.25px;
+    &--black, &--white, &--gray {
+      @extend .lc_h4;
+    }
+  }
+  &_h5 {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 24px;
+    &--black, &--white, &--gray {
+      @extend .lc_h5;
+    }
+  }
+  &_h6 {
+    font-family: Nunito;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 18px;
+    letter-spacing: 0.15px;
+    &--black, &--white, &--gray {
+      @extend .lc_h6;
+    }
+  }
+
+  &_body1 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 13px;
+    line-height: 22px;
+    &--black, &--white, &--strong-white, &--strong-black {
+      @extend .lc_body1;
+    }
+  }
+  &_body2 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 15px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    &--black, &--white, &--strong-white, &--strong-black {
+      @extend .lc_body2;
+    }
+  }
+  &_subtitle1 {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0.15px;
+    &--black, &--white, &--strong-white, &--strong-black {
+      @extend .lc_subtitle1;
+    }
+  }
+  &_subtitle2 {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 15px;
+    line-height: 24px;
+    &--black, &--white, &--strong-white, &--strong-black {
+      @extend .lc_subtitle2;
+    }
+  }
+  &_subtitle3 {
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 18px;
+    letter-spacing: 0.3px;
+    &--black, &--white, &--strong-white, &--strong-black {
+      @extend .lc_subtitle3;
+    }
+  }
+  &_subtitle4 {
+    font-weight: bold;
+    font-size: 10px;
+    line-height: 14px;
+    letter-spacing: 0.3px;
+    &--black, &--white, &--strong-white, &--strong-black {
+      @extend .lc_subtitle3;
+    }
+  }
+  &_caption {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 18px;
+    letter-spacing: 0.4px;
+    &--black, &--white, &--strong-white, &--strong-black {
+      @extend .lc_caption;
+    }
+  }
+  &_overline {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    &, &--black, &--white, &--strong-white, &--strong-black {
+      @extend .lc_overline;
+      &.bold {
+        font-weight: 900;
+      }
+    }
+  }
+  &_link {
+    color: $link;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  &_text-centered {
+    text-align: center;
+  }
+  &_uppercase {
+    text-transform: uppercase;
+  }
+
+
+  &_regular10 {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 10px;
+    line-height: 110%;
+  }
+  &_regular11 {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 11px;
+    line-height: 110%;
+  }
+  &_regular12 {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 130%;
+  }
+  &_regular14 {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 150%;
+  }
+  &_regular16 {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 170%;
+  }
+  &_regular18 {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 18px;
+    line-height: 160.5%;
+    letter-spacing: 0.02em;
+  }
+  &_regular20 {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 20px;
+    line-height: 190%;
+  }
+  &_medium16 {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 100%;
+    letter-spacing: 0.02em;
+  }
+  &_medium18 {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+  }
+  &_medium20 {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 110%;
+    letter-spacing: 0.02em;
+  }
+  &_medium22 {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 22px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+  }
+  &_semibold14 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+  }
+  &_semibold20 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+  }
+  &_semibold22 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+  }
+  &_semibold30 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 30px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+  }
+
+  // colors
+  &_green {
+    color: $green;
+  }
+  &_black {
+    color: $black;
+  }
+  &_gray-main {
+    color: $gray_main;
+  }
+  &_grey1 {
+    color: $grey_1;
+  }
+  &_grey2 {
+    color: $grey_2;
+  }
+  &_grey3 {
+    color: $grey_3;
+  }
+  &_title {
+    font-weight: 800;
+    font-size: 16px;
+    line-height: 22px;
+    letter-spacing: -0.02em;
+    text-transform: uppercase;
+    color: $black
+  }
+  &_title-small {
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 19px;
+    letter-spacing: -0.02em;
+    text-transform: uppercase;
+    color: $black;
+  }
+  &_title-large {
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 25px;
+    letter-spacing: -0.02em;
+  }
+  &_body-small {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 19px;
+    letter-spacing: -0.02em;
+    color: $gray_main;
+  }
+  &_body-large {
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 25px;
+    letter-spacing: -0.02em;
+  }
+}
+
+// shadows
+.elevation0 { box-shadow: $elevation0; }
+.elevation1 { box-shadow: $elevation1; }
+.elevation2 { box-shadow: $elevation2; }
+.elevation3 { box-shadow: $elevation3; }
+.elevation4 { box-shadow: $elevation4; }
+.elevation6 { box-shadow: $elevation6; }
+.elevation8 { box-shadow: $elevation8; }
+.elevation9 { box-shadow: $elevation9; }
+.elevation12 { box-shadow: $elevation12; }
+.elevation16 { box-shadow: $elevation16; }
+.elevation24 { box-shadow: $elevation24; }
+

package/assets/scss/variables/_breakpoints.scss

@@ -0,0 +1,12 @@
+$bp-extra-large-min: 1600px;
+
+$bp-large-max: 1599px;
+$bp-large-min: 1280px;
+
+$bp-medium-max: 1279px;
+$bp-medium-min: 1024px;
+
+$bp-small-max: 1023px;
+$bp-small-min: 768px;
+
+$bp-extra-small-max: 767px;

package/assets/scss/variables/_index.scss

@@ -0,0 +1,2 @@
+@import "breakpoints";
+@import "theme";