@drumee/ui-styles 1.0.0

package/src/lib/container.scss

@@ -0,0 +1,175 @@
+/* =================================================================== *
+   #   Copyright Xialia.com  2011-2019                                    *
+   #   FILE : src/drumee/skin/global/container
+   #   TYPE : Global styles, for the whole platform
+   # ==================================================================== */
+
+@use "./typo";
+
+.flow-horizontal,
+.flow-footer,
+.flow-h,
+.flow-x {
+  display: flex;
+  flex-direction: row;
+}
+
+.flow-vertical,
+.flow-v,
+.flow-y {
+  height: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+
+.drumee-box,
+.drumee-widget,
+.drumee-section,
+.section,
+.container,
+.widget,
+.box {
+  position: relative;
+  z-index: auto;
+  background-color: transparent;
+
+  &::-webkit-scrollbar {
+    width: 5px; //4px;
+    margin-right: 2px;
+    max-width: 10px;
+    height: 100%;
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, .1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--default-scrollbar-color); //$desk-scrollbar-color;
+    cursor: pointer;
+  }
+
+  &[data-flow="vertical"],
+  &[data-flow="v"],
+  &[data-flow="y"] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &[data-flow="horizontal"],
+  &[data-flow="h"],
+  &[data-flow="x"],
+  &[data-flow="slide"] {
+    display: flex;
+    flex-direction: row;
+
+    &::-webkit-scrollbar {
+      // width: 100%;
+      height: 5px;
+      max-height: 10px;
+      cursor: pointer;
+    }
+  }
+
+  &[data-flow="root"],
+  &[data-flow="page"],
+  &[data-flow="r"],
+  &[data-flow="slider"],
+  &[data-flow="slideshow"] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &[data-flow="layer"] {
+    height: auto;
+    width: auto;
+    min-width: 10px;
+    min-height: 10px;
+    position: absolute;
+  }
+
+  &[data-position="free"],
+  &[data-position="absolute"] {
+    position: absolute;
+  }
+
+  &[data-position="fixed"] {
+    position: fixed !important;
+  }
+
+  &[data-position="auto"],
+  &[data-position="relative"] {
+    position: relative;
+  }
+
+  &[data-flow="wrap"],
+  &[data-flow="w"] {
+    display: flex;
+    flex-direction: row;
+  }
+
+  &[data-flow="z"] {
+    display: flex;
+    flex-direction: row;
+
+    &[data-device="mobile"] {
+      flex-direction: column;
+    }
+  }
+
+  &[data-flow="g"] {
+    display: grid;
+    flex-direction: unset;
+  }
+
+  &[data-justify="center"] {
+    justify-content: center;
+  }
+
+  &[data-align="center"] {
+    align-content: center;
+  }
+
+  &[data-haptic="1"] {
+    opacity: 0.75;
+    pointer-events: none;
+  }
+
+  .drumee-tk--empty-content {
+    opacity: 0.7;
+    text-align: center;
+    @include typo.typo($size: 12px, $line: 1.3, $color: var(--btn-secondary-color));
+  }
+}
+
+.section,
+.drumee-section {
+  background-color: #ffffff;
+  overflow: visible;
+}
+
+.box__default {
+  position: absolute;
+  width: 200px;
+  height: 100px;
+
+  &.designer {
+    &:hover {
+      &::before {
+        border: 0.5px solid #bbb;
+        // display: none;
+      }
+    }
+
+    &::before {
+      position: absolute;
+      content: "";
+      border: 0.5px dashed #aaa;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
+  }
+}

package/src/lib/input.scss

@@ -0,0 +1,247 @@
+@use "./typo";
+
+.entry-reminder {
+  &__ui {
+    border: 1px solid transparent;
+
+    &::placeholder {
+      color: var(--default-text-placeholder);
+      font-weight: 300;
+    }
+  }
+
+  &__component {
+    width: 100%;
+
+    &[data-status="error"] {
+      color: var(--default-text-error);
+      border-color: transparent;
+
+      input {
+        border-color: var(--default-border-error); //#FF4578;    
+
+        &::placeholder {
+          color: var(--default-text-placeholder);
+          font-weight: 300;
+        }
+      }
+    }
+  }
+
+  &__main {
+    width: 100%;
+    height: 100%;
+
+    form {
+      width: 100%;
+      height: 100%;
+    }
+
+    input {
+      padding: 0;
+      min-height: 0;
+      width: 100%;
+      height: 100%;
+      border-bottom: 1px solid var(--entry-border-bottom); //#F1F1F6;
+      font-size: inherit;
+      line-height: inherit;
+      background: transparent;
+
+      &:focus {
+        border-color: var(--focus-border-bottom); //var(--eblue);
+
+        &::placeholder {
+          color: var(--focus-text-placeholder);
+        }
+      }
+    }
+  }
+
+  &__label.widget {
+    display: none;
+    position: absolute;
+    top: 35px;
+    left: 0;
+
+    &[data-state="1"] {
+      display: block;
+      transition: all .5s;
+      @include typo.typo($color: var(--eblue), $size: 13px, $weight: 300, $line: 16px);
+      text-align: left;
+      margin: 0 auto 0 0;
+    }
+  }
+
+  // &__ui[data-status=error] .entry-reminder__main.showerror{
+  //   padding-bottom: 12px;
+  // }
+  &__main.showerror {
+    overflow: hidden;
+    padding-bottom: 14px;
+    min-height: 34px;
+  }
+
+  &_error {
+    @include typo.typo($color: var(--default-text-error), $size: 12px); //$weight:300,
+    height: 40px;
+    padding-left: 3px;
+    position: absolute;
+    top: calc(100% - 15px);
+    z-index: 9;
+  }
+
+  &__icon {
+    width: 23px;
+    height: 23px;
+    padding: 0;
+    position: absolute;
+    cursor: pointer;
+    right: -25px;
+    top: 9px;
+
+    &.error {
+      @include typo.typo($color: var(--default-text-error), $size: 12px);
+      padding: 4.5px;
+    }
+
+    &[data-shift="1"] {
+      right: -46px;
+    }
+  }
+}
+
+input {
+  min-width: 20px;
+  min-height: 20px;
+  outline: none !important;
+  border: none;
+
+  &:focus {
+    outline: none !important;
+  }
+}
+
+textarea {
+  min-width: 90px;
+  min-height: 100px;
+  padding-left: 10px;
+  border-style: inset;
+  outline: none;
+
+  &::-webkit-scrollbar {
+    height: 100%;
+    width: 3px;
+    max-height: 3px;
+    cursor: pointer;
+  }
+
+  &:focus {
+    border-color: var(--eblue);
+    border-width: 1px;
+  }
+}
+
+.entry {
+  &.input--inline {
+    border: 1px solid transparent;
+
+    &::placeholder {
+      color: var(--egrey-89);
+    }
+
+    input {
+      padding: 0;
+      min-height: 0;
+      width: 100%;
+      border-bottom: 1px solid #F1F1F6;
+      font-size: inherit;
+      line-height: inherit;
+      background: transparent;
+
+      &:focus {
+        border-color: var(--eblue);
+
+        &::placeholder {
+          color: var(--default-text-placeholder);
+          font-weight: 300;
+        }
+      }
+    }
+
+    &[data-status="error"] {
+      @include typo.typo($color: var(--default-text-error), $size: 12px);
+      //  color: #FF4578;
+      border-color: transparent;
+
+      .input-details {
+        //    color: #FF4578;
+        @include typo.typo($color: var(--default-text-error), $size: 12px);
+      }
+
+      input {
+        border-color: var(--default-border-error);
+
+        &::placeholder {
+          color: var(--egrey-78);
+        }
+      }
+    }
+  }
+
+  &--active {
+    &[data-radio="off"] {
+      input {
+        border-bottom: 1px solid var(--eblue);
+
+        &::placeholder {
+          color: var(--eblue);
+        }
+      }
+    }
+  }
+
+  &--with-icon {
+    input {
+      padding-right: 45px;
+    }
+  }
+
+  &--small {
+    height: 36px;
+    padding-bottom: 10px;
+
+    input {
+      @include typo.typo($size: 18px, $line: 24px, $weight: 400, $color: var(--egrey-2f));
+
+      &:disabled {
+        color: inherit;
+      }
+    }
+
+    .input-details {
+      position: absolute;
+      top: 25px;
+      @include typo.typo($size: 11px, $line: 12px, $weight: 300, $color: var(--egrey-78));
+    }
+  }
+
+  &--with-cross {
+    padding-bottom: 0;
+
+    .input-details {
+      top: 0;
+      right: -25px;
+    }
+  }
+
+  &--thiner {
+    &::placeholder {
+      font-family: var(--main-typo-light)
+    }
+
+    input {
+      border-bottom: 2px solid #F1F1F6;
+      font-family: var(--main-typo-light)
+    }
+  }
+}

package/src/lib/menu.scss

@@ -0,0 +1,17 @@
+.menu-topic{
+  .menu-trigger{
+    z-index: 2;
+  }
+  .menu-items{
+    &[data-state="0"],&[data-state="closed"]{
+      display: none;
+    }
+    &[data-state="1"],&[data-state="open"]{
+      z-index: 100 !important;
+      visibility: visible;
+    }
+    .root-node{
+      white-space: nowrap;
+    }
+  }
+}

package/src/lib/reset.scss

@@ -0,0 +1,111 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: inherit;
+  vertical-align: baseline;
+}
+
+html {
+  line-height: 1;
+}
+
+li,
+ul {
+  list-style-type: none;
+}
+
+a,
+u {
+  text-decoration: none;
+  color: #666;
+}
+
+*,
+*:before,
+*:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}

package/src/lib/svg.scss

@@ -0,0 +1,6 @@
+.svg-wrapper svg {
+  fill: currentcolor;
+}
+svg.drumee-picto{
+  fill: currentcolor;
+}

package/src/lib/typo.scss

@@ -0,0 +1,63 @@
+@mixin typo($color: inherit,
+  $weight: 400,
+  $line: 1,
+  $size: 12px,
+  $letter: 0em) {
+  font-size: $size;
+  letter-spacing: $letter;
+  line-height: $line;
+
+  @if not($color ==inherit or $color ==null) {
+    color: $color;
+  }
+
+  @if $weight ==400 {
+    font-family: var(--font-main);
+  }
+
+  @else if $weight ==300 {
+    font-family: var(--font-main-light);;
+  }
+
+  @else if $weight ==500 {
+    font-family: var(--font-main-medium);;
+  }
+
+  @else if $weight ==700 {
+    font-family: var(--font-main-bold);;
+  }
+
+  @else if $weight ==300italic {
+    font-family: var(--font-main-light-italic);;
+  }
+
+  @else if $weight ==400i {
+    font-family: var(--font-main-italic);;
+  }
+
+  @else if $weight ==500italic {
+    font-family: var(--font-main-mediaum-italic);;
+  }
+
+  @else if $weight ==700italic {
+    font-family: var(--font-main-bold-italic);;
+  }
+}
+
+@mixin license-trial() {
+  content: attr(data-version);
+  position: absolute;
+  transform-origin: center;
+  transform: rotate(45deg);
+  pointer-events: none;
+  opacity: 0.3;
+  background: white;
+  padding: 20px 10px;
+  border-radius: 6px;
+  border: 0.5px solid lightblue;
+  z-index: 1000;
+  white-space: pre;
+  text-align: center;
+  width: 150%;
+  white-space: break-spaces;
+}