@drumee/ui-styles 1.0.0

package/dist/css/vars/revamp.css

@@ -0,0 +1 @@
+:root{--corner-radius-0: 0rem;--corner-radius-1: 0.25rem;--corner-radius-2: 0.375rem;--corner-radius-3: 0.5rem;--corner-radius-4: 0.75rem;--corner-radius-5: 1rem;--corner-radius-6: 1.5rem;--corner-radius-7: 2rem;--corner-radius-max: 62.5rem;--spacer-0: 0rem;--spacer-1: 0.125rem;--spacer-2: 0.25rem;--spacer-3: 0.5rem;--spacer-4: 0.75rem;--spacer-5: 1rem;--spacer-6: 1.5rem;--spacer-7: 2rem;--spacer-8: 2.5rem;--spacer-9: 3rem;--spacer-10: 4rem;--spacer-11: 5rem;--spacer-12: 6rem;--spacer-13: 7rem;--spacer-14: 9rem;--spacer-15: 10rem}:root{--blue-100: #b9e8ff;--blue-200: #89dcff;--blue-300: #52c8ff;--blue-400: #2aaaff;--blue-500: #168efd;--blue-600: #0c74e9;--blue-700: #115cbc;--blue-800: #144f94;--blue-900: #11315a;--gray-100: #f6f6f6;--gray-200: #e7e7e7;--gray-300: #d1d1d1;--gray-400: #b0b0b0;--gray-500: #888888;--gray-600: #5d5d5d;--gray-700: #4f4f4f;--gray-800: #3d3d3d;--gray-900: #303030;--gray-black: #050505;--gray-white: #ffffff;--green-100: #a7f3c5;--green-200: #6ee7a6;--green-300: #34d382;--green-400: #10b667;--green-500: #059654;--green-600: #047846;--green-700: #065f39;--green-800: #064e31;--green-900: #022c1c;--indigo-100: #c2cdff;--indigo-200: #9cabff;--indigo-300: #757eff;--indigo-400: #5756ff;--indigo-500: #4636f5;--indigo-600: #3c2ad8;--indigo-700: #3125ae;--indigo-800: #2c2689;--indigo-900: #1c1650;--mint-100: #8bfff6;--mint-200: #49fff2;--mint-300: #10d7ce;--mint-400: #00d1cb;--mint-500: #00a9a7;--mint-600: #008686;--mint-700: #05696a;--mint-800: #0a5657;--mint-900: #003436;--neutral-100: #f4f4f6;--neutral-200: #ebecf0;--neutral-300: #dddfe4;--neutral-400: #c3c6cc;--neutral-50: #f9f9fa;--neutral-500: #afb3bb;--neutral-600: #8c929c;--neutral-700: #5b616d;--neutral-800: #414651;--neutral-900: #222732;--neutral-950: #0a0c11;--orange-100: #ffdfa5;--orange-200: #ffc76d;--orange-300: #ffa332;--orange-400: #ff870a;--orange-500: #f36900;--orange-600: #cc4f02;--orange-700: #a13d0b;--orange-800: #82350c;--orange-900: #461804;--pink-100: #ffcbf3;--pink-200: #ffa0e7;--pink-300: #e864cb;--pink-400: #ff65d5;--pink-500: #fc23b8;--pink-600: #ed159f;--pink-700: #ce0880;--pink-800: #aa0a69;--pink-900: #570034;--primary-100: #f4e7ff;--primary-200: #ebd4ff;--primary-300: #dcb2ff;--primary-400: #c781ff;--primary-50: #fbf5ff;--primary-500: #b251fb;--primary-600: #9821ee;--primary-700: #881dd3;--primary-800: #731dac;--primary-900: #5e198a;--primary-950: #410467;--red-100: #ffdde4;--red-200: #ff94aa;--red-300: #ff6785;--red-400: #ff5779;--red-500: #ff2350;--red-600: #f50032;--red-700: #d7002c;--red-800: #a90225;--red-900: #500010;--yellow-100: #fffd86;--yellow-200: #fff441;--yellow-300: #ffe50d;--yellow-400: #e6c100;--yellow-500: #d19d00;--yellow-600: #a67102;--yellow-700: #89570a;--yellow-800: #74470f;--yellow-900: #442504}/*# sourceMappingURL=revamp.css.map */

package/dist/css/vars/revamp.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/vars/revamp.scss"],"names":[],"mappings":"AAAA,MAGE,wBACA,2BACA,4BACA,0BACA,2BACA,wBACA,0BACA,wBACA,6BACA,iBACA,qBACA,oBACA,mBACA,oBACA,iBACA,mBACA,iBACA,mBACA,iBACA,kBACA,kBACA,kBACA,kBACA,kBACA,mBAIF,MAGE,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,sBACA,sBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,sBACA,sBACA,sBACA,sBACA,sBACA,sBACA,sBACA,sBACA,sBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,uBACA,uBACA,uBACA,uBACA,sBACA,uBACA,uBACA,uBACA,uBACA,uBACA,uBACA,sBACA,sBACA,sBACA,sBACA,sBACA,sBACA,sBACA,sBACA,sBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,uBACA,uBACA,uBACA,uBACA,sBACA,uBACA,uBACA,uBACA,uBACA,uBACA,uBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,sBACA,sBACA,sBACA,sBACA,sBACA,sBACA,sBACA,sBACA","file":"revamp.css"}

package/dist/css/vars/z-index.css

@@ -0,0 +1 @@
+:root{--z-index-lowest: -3;--z-index-lower: -1;--z-index-normal: 1;--z-index-high: 200;--z-index-higher: 1000;--z-index-draft: --z-index-higher;--z-index-context: 50000;--always-visible: 50010;--z-index-context-upper: 50010;--z-index-preview: 80000;--z-index-modal: 100000;--z-index-highest: 200000}/*# sourceMappingURL=z-index.css.map */

package/dist/css/vars/z-index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/vars/z-index.scss"],"names":[],"mappings":"AAAA,MACE,qBACA,oBACA,oBACA,oBACA,uBACA,kCACA,yBACA,wBACA,+BACA,yBACA,wBACA","file":"z-index.css"}

package/package.json

@@ -0,0 +1,41 @@
+{
+	"name": "@drumee/ui-styles",
+	"version": "1.0.0",
+	"description": "Drumee reusable SASS component library",
+	"main": "dist/css/main.css",
+	"style": "dist/css/main.css",
+	"sass": "./src/main.scss",
+	"homepage": "https://drumee.com",
+	"author": "Somanos Sar <somanos@drumee.com> (http://drumee.com)",
+	"repository": {
+		"type": "git",
+		"url": "git@github.com:drumee/ui-team.git"
+	},
+	"bugs": {
+		"url": "https://github.com/drumee/ui-team/issues/"
+	},
+	"files": [
+		"dist/",
+		"src/",
+		"README.md"
+	],
+	"scripts": {
+		"build": "sass src:dist/css --style=compressed",
+		"build:dev": "sass src:dist/css --watch",
+		"prepublishOnly": "npm run build",
+		"release": "git push && npm publish --access public && npm version patch"
+	},
+	"keywords": [
+		"sass",
+		"scss",
+		"css",
+		"styles"
+	],
+	"license": "MIT",
+	"devDependencies": {
+		"sass": "^1.66.0"
+	},
+	"peerDependencies": {
+		"sass": "^1.66.0"
+	}
+}

package/src/lib/align.scss

@@ -0,0 +1,317 @@
+@use 'vendor';
+
+.u-jc-center {
+  @include vendor.justify(center);
+}
+
+.u-jc-start {
+  @include vendor.justify(flex-start);
+}
+
+.u-jc-end {
+  @include vendor.justify(flex-end);
+}
+
+.u-jc-sb {
+  @include vendor.justify(space-between);
+}
+
+.u-jc-sa {
+  @include vendor.justify(space-around);
+}
+
+.u-jc-st {
+  @include vendor.justify(stretch);
+}
+
+.u-ac-center {
+  @include vendor.align-content(center);
+}
+
+.u-ac-start {
+  @include vendor.align-content(flex-start);
+}
+
+.u-ac-end {
+  @include vendor.align-content(flex-end);
+}
+
+.u-ai-center {
+  @include vendor.align-items(center);
+}
+
+.u-ai-start {
+  @include vendor.align-items(flex-start);
+}
+
+.u-ai-end {
+  @include vendor.align-items(flex-end);
+}
+
+.u-as-center {
+  align-self: center;
+}
+
+.u-as-end {
+  align-self: flex-end;
+}
+
+.u-as-start {
+  align-self: flex-start;
+}
+
+.u-fd-column {
+  flex-direction: column !important
+}
+
+;
+
+.u-fd-row {
+  flex-direction: row !important
+}
+
+;
+
+.u-fd-columnr {
+  flex-direction: column-reverse !important
+}
+
+;
+
+.u-fd-rowr {
+  flex-direction: row-reverse !important
+}
+
+;
+
+.u-fw-wrap {
+  flex-wrap: wrap;
+}
+
+.u-fw-nowrap {
+  flex-wrap: nowrap;
+}
+
+.u-flex-grow {
+  flex-grow: 1
+}
+
+;
+
+.text-center {
+  text-align: center
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+@include vendor.margin-list(margin-top, 120);
+@include vendor.margin-list(margin-bottom, 120);
+@include vendor.margin-list(margin-left, 120);
+@include vendor.margin-list(margin-right, 120);
+@include vendor.margin-list(padding-top, 120);
+@include vendor.margin-list(padding-bottom, 120);
+@include vendor.margin-list(padding-left, 120);
+@include vendor.margin-list(padding-right, 120);
+@include vendor.margin-list(padding, 120);
+@include vendor.margin-list(margin, 120);
+@include vendor.margin-list(padding-hor, 120);
+@include vendor.margin-list(margin-hor, 120);
+@include vendor.margin-list(padding-vert, 120);
+@include vendor.margin-list(margin-vert, 120);
+@include vendor.margin-list-md(margin-top, 120);
+@include vendor.margin-list-md(margin-bottom, 120);
+@include vendor.margin-list-md(margin-left, 120);
+@include vendor.margin-list-md(margin-right, 120);
+@include vendor.margin-list-md(padding-top, 120);
+@include vendor.margin-list-md(padding-bottom, 120);
+@include vendor.margin-list-md(padding-left, 120);
+@include vendor.margin-list-md(padding-right, 120);
+@include vendor.margin-list-md(padding, 120);
+@include vendor.margin-list-md(margin, 120);
+@include vendor.margin-list-md(padding-hor, 120);
+@include vendor.margin-list-md(margin-hor, 120);
+@include vendor.margin-list-md(padding-vert, 120);
+@include vendor.margin-list-md(margin-vert, 120);
+@include vendor.z-index(10);
+
+
+.auto {
+  width: auto;
+  height: auto;
+}
+
+
+.margin-auto-v {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+.margin-auto-h {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.absolute {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+}
+
+.out-of-screen,
+.file-selector__ui {
+  position: absolute !important;
+  left: -100000px;
+  top: -100000px;
+  visibility: hidden;
+}
+
+.fill-up {
+  position: absolute !important;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+
+  &[data-visible="no"] {
+    visibility: visible;
+    z-index: -1000;
+    left: -5000px;
+    top: -5000px;
+    width: 0;
+    height: 0;
+  }
+}
+
+.cursor-pointer,
+.pointer,
+.clickable {
+  cursor: pointer !important;
+}
+
+.cursor-help {
+  cursor: help !important;
+}
+
+.margin-auto {
+  margin: auto !important;
+}
+
+.selectable-text {
+  -webkit-user-select: text;
+  /* Chrome 49+ */
+  -moz-user-select: text;
+  /* Firefox 43+ */
+  -ms-user-select: text;
+  /* No support yet */
+  user-select: text;
+}
+
+.fatal-error {
+  width: 100%;
+}
+
+[data-state="closed"] {
+  z-index: -1 !important;
+  visibility: hidden !important;
+  height: 0 !important;
+  width: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+[data-state="open"] {
+  z-index: var(--z-index-context) !important;
+  visibility: visible;
+}
+
+[data-hide="yes"] {
+  visibility: hidden;
+  z-index: -2;
+  display: none !important;
+}
+
+[data-hide="no"] {
+  z-index: 20000;
+  visibility: visible;
+}
+
+[data-position="absolute"] {
+  position: absolute !important;
+}
+
+
+[contenteditable=true]:empty:before {
+  content: attr(placeholder);
+  display: block;
+  /* For Firefox */
+}
+
+strong {
+  font-weight: bold !important;
+}
+
+.no-padding {
+  padding: 0 !important;
+}
+
+.no-border {
+  border: none !important;
+}
+
+
+.first {
+  float: left;
+  margin-left: 0;
+}
+
+.last {
+  float: right;
+  margin-right: 0;
+}
+
+.full {
+  width: 100%;
+  height: 100%;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.full-x {
+  height: 100%;
+  height: auto;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.half {
+  clear: both;
+  width: 90%;
+  float: left;
+}
+
+.quarter {
+  clear: both;
+  width: 25%;
+  float: left;
+}
+
+.colon {
+  &:after {
+    content: ":";
+  }
+}
+

package/src/lib/box-shadow.scss

@@ -0,0 +1,24 @@
+/* ==================================================================== *
+*   FILE : src/drumee/skin/mixins/box-shadow
+*   TYPE : vendor prefixes for sass filess
+* ==================================================================== */
+
+@mixin box-shadow($size: 13) {
+  @if $size ==400 {
+    box-shadow: 0 -2px 8px 1px rgba(63, 79, 117, 0.13), 0 5px 12px 0 rgba(86, 65, 113, 0.08), 0 -2px 4px 0 rgba(194, 185, 203, 0);
+  }
+
+  @else {
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.14), 0 0 6px 0 #F8FAFC, 0 3px 5px 0 rgba(0, 0, 0, 0.2);
+  }
+}
+
+@mixin shadow-breadscrum() {
+  box-shadow: 0 6px 10px 1px rgba(63, 79, 117, .13), 0 7px 20px 0 rgba(86, 65, 113, .08), 0 3px 17px 0 rgba(194, 185, 203, 0);
+  border-radius: 0px 0px 6px 6px;
+  background-color: var(--ewhite);
+}
+
+@mixin drumee-breadscrum() {
+  box-shadow: 0 5px 8px 1px rgba(63, 79, 117, .13), 0 6px 16px 0 rgba(86, 65, 113, .08), 0 2px 14px 0 rgba(194, 185, 203, 0);
+}

package/src/lib/button.scss

@@ -0,0 +1,268 @@
+/* =================================================================== *
+   #   Copyright Xialia.com  2011-2016                                    *
+   #   FILE : src/drumee/skin/global/button
+   #   TYPE : Global styles, for the whole platform
+   # ==================================================================== */
+
+@use './typo';
+
+.button-nested {
+  &[data-selected="on"] {
+    z-index: 100;
+  }
+}
+
+.button-icon {
+  align-items: center;
+  overflow: visible;
+  white-space: nowrap;
+  display: flex;
+
+  svg {
+    flex-shrink: 0;
+  }
+
+  &[data-icon--position="left"],
+  &[data-icon--position="none"] {
+    align-items: center;
+    flex-direction: row;
+    justify-content: flex-start;
+
+    svg {
+      margin-bottom: 0; 
+      margin-left: 0;
+      margin-top: 0;
+    }
+  }
+
+  &[data-icon--position="top"] {
+    flex-direction: column;
+    align-items: center;
+
+    svg {
+      margin-right: 0; 
+      margin-left: 0; 
+      margin-top: 0;
+    }
+  }
+
+  &[data-icon--position="right"] {
+    flex-direction: row-reverse;
+    align-items: center;
+    height: auto !important;
+
+    svg {
+      margin-right: 0;
+      margin-left: 0;
+      margin-top: 0;
+    }
+
+    /*margin: 0 auto;*/
+  }
+
+  &[data-icon--position="no-text"] {
+    .note-content {
+      display: none;
+    }
+
+    svg.icon_button {
+      margin: 0 !important;
+    }
+  }
+
+  &[data-icon--position="no-icon"] {
+    svg.icon_button {
+      display: none;
+    }
+  }
+}
+
+.button-reader {
+  align-items: center;
+  justify-content: center;
+}
+
+.button-switch {
+  &__toggle {
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+
+    &.change {
+      height: 100%;
+
+      &::before {
+        content: " ";
+        width: 12px;
+        height: 12px;
+        top: 6px;
+        border-radius: 50%;
+        visibility: hidden;
+      }
+
+      &::after {
+        content: " ";
+        width: 12px;
+        height: 12px;
+        top: 6px;
+        border-radius: 50%;
+        visibility: hidden;
+      }
+
+      &[data-radio="on"] {
+        &::before {
+          visibility: hidden;
+        }
+
+        &::after {
+          visibility: visible;
+        }
+      }
+
+      &[data-radio="off"] {
+        &::before {
+          visibility: visible;
+        }
+
+        &::after {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}
+
+
+.drumee-widget.btn {
+  cursor: pointer;
+  height: 35px;
+  width: 115px;
+  border-radius: var(--border-radius); //6px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+
+  &--regular {
+    background-color: #FFFFFF;
+    border: 1px solid #F1F1F6;
+    @include typo.typo($size: 16px, $line: 25px, $weight: 400, $color: var(--egrey-2f));
+
+    &:hover {
+      color: #5a5a5a;
+    }
+  }
+
+  &--inactive {
+    background-color: #a6a8a4;
+    border: 1px solid #a6a8a4;
+    @include typo.typo($size: 16px, $line: 34px, $weight: 400, $color: var(--ewhite));
+    pointer-events: none;
+  }
+
+  &--warning {
+    background-color: #FF7479;
+    border: 1px solid #FF7479;
+    @include typo.typo($size: 16px, $line: 34px, $weight: 400, $color: var(--ewhite));
+
+    &:hover {
+      background-color: #ff8e91;
+      border-color: #ff8e91;
+    }
+  }
+
+  &--cancel {
+    background-color: #FF7479;
+    border: 1px solid #FF7479;
+    @include typo.typo($size: 16px, $line: 34px, $weight: 400, $color: var(--ewhite));
+
+    &:hover {
+      background-color: #ff8e91;
+      border-color: #ff8e91;
+    }
+  }
+
+  &--confirm,
+  &--go {
+    background-color: var(--btn-commit-background); //#18a3ac;// #18AC72;
+    border: 1px solid var(--btn-commit-border); //#18a3ac;//#18AC72;
+    @include typo.typo($size: 16px, $line: 25px, $color: var(--btn-commit-text)); //$weight:400
+    cursor: pointer;
+    pointer-events: all;
+
+    &:hover {
+      background-color: var(--btn-commit-background-hover); // #3fbd8d;
+      border-color: var(--btn-commit-border-hover); //#3fbd8d;
+    }
+  }
+
+  &--other {
+    background-color: var(--eblue);
+    border: 1px solid var(--eblue);
+    @include typo.typo($size: 16px, $line: 34px, $weight: 400, $color: var(--ewhite));
+
+    &:hover {
+      background-color: #6da6e9;
+      border-color: #6da6e9;
+    }
+  }
+
+  &--neutral {
+    background-color: #f7f7fa;
+    border: 1px solid #f7f7fa;
+    @include typo.typo($size: 16px, $line: 34px, $weight: 400, $color: #2F2F2F);
+
+    &:hover {
+      opacity: 0.6;
+    }
+  }
+
+  &--cancel-text {
+    color: #E9223B;
+  }
+
+  &--small {
+    font-size: 12px;
+    line-height: 24px;
+    height: 26px;
+    width: 80px;
+  }
+
+  &--big {
+    width: 200px;
+    font-size: 14px;
+  }
+}
+
+.save-style__btn.login {
+  cursor: pointer;
+  height: 36px;
+  width: 170px;
+  border-radius: 2px;
+  justify-content: center;
+  background-color: #18AC72;
+  border: 1px solid #18AC72;
+  text-align: center;
+  @include typo.typo($size: 16px, $line: 34px, $weight: 400, $color: var(--ewhite));
+
+  &:hover {
+    background-color: #3fbd8d;
+    border-color: #3fbd8d;
+  }
+}
+
+//******* others common
+.popup__btn-group--save-icon {
+  padding-bottom: 50px;
+
+  &.public {
+    padding-bottom: 47px;
+  }
+}
+
+.popup__btn-group--save-icon {
+  padding-bottom: 50px;
+
+  &.public {
+    padding-bottom: 47px;
+  }
+}