coer-elements 0.0.33 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coer-elements",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "author": "Christian Omar Escamilla Rodríguez",
   "keywords": [
     "COER",

package/styles/angular-material.scss

@@ -10,4 +10,5 @@
 @import "../components/lib/coer-numberbox/coer-numberbox.component.scss";
 @import "../components/lib/coer-switch/coer-switch.component.scss";
 @import "../components/lib/coer-checkbox/coer-checkbox.component.scss";
-@import "../components/lib/coer-tab/coer-tab.component.scss";
+@import "../components/lib/coer-tab/coer-tab.component.scss";
+@import "../components/lib/coer-list/coer-list.component.scss";

package/styles/coer-elements.css

@@ -557,6 +557,10 @@ div.coer-button i.spinner-border {
 div.coer-button span {
   font-weight: bold !important;
 }
+div.coer-button .mat-mdc-button-touch-target {
+  width: 0px !important;
+  height: 0px !important;
+}
 
 div#coer-tool-bar coer-button * {
   color: #fd6031 !important;
@@ -2167,6 +2171,58 @@ div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc
   padding: 5px;
 }
 
+div.coer-list ul.coer-list {
+  width: 100%;
+  border: solid 1px #ccc;
+  display: block;
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+}
+div.coer-list li.coer-list-box {
+  padding: 10px 10px;
+  border-bottom: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  background: white;
+  font-size: 14px;
+}
+div.coer-list li.coer-list-box div.coer-list-content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+div.coer-list .cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+div.coer-list .cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+div.coer-list .coer-list-box:last-child {
+  border: none;
+}
+div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+div.coer-list div.coer-list-placeholder {
+  background: #ccc;
+  border: dotted 3px #999;
+  min-height: 40px;
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+div.coer-list div.cdk-drag-placeholder,
+div.coer-list ul.cdk-drop-list-dragging,
+div.coer-list ul.cdk-drop-list-dragging * {
+  cursor: grabbing;
+}
+
 .tooltip-inner {
   min-width: 125px;
   max-width: 250px;
@@ -3254,6 +3310,20 @@ aside.toast-container > * {
   padding-bottom: 5px;
 }
 
+.coer-container-list {
+  margin: 15px 30px 0px 30px;
+  padding: 10px;
+  box-shadow: 0px 0px 10px -10px black;
+  border-radius: 8px;
+  background-color: white;
+  animation-name: fadeId;
+  animation-duration: 1.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  position: relative;
+  padding: 0px;
+}
+
 .cursor-default {
   cursor: default !important;
 }
@@ -3266,6 +3336,14 @@ aside.toast-container > * {
   cursor: wait !important;
 }
 
+.cursor-grab {
+  cursor: grab !important;
+}
+
+.cursor-grabbing {
+  cursor: grabbing !important;
+}
+
 * {
   --blue: #0d6efd;
   --gray: #6c757d;

package/styles/containers.scss

@@ -33,4 +33,9 @@
 .coer-container-grid {
     @include Container();
     padding-bottom: 5px;
-}
+}
+
+.coer-container-list {
+    @include Container();
+    padding: 0px;
+}

package/styles/cursores.scss

@@ -8,4 +8,12 @@
 
 .cursor-wait {
     cursor: wait !important;
+}
+
+.cursor-grab {
+    cursor: grab !important;
+}
+
+.cursor-grabbing {
+    cursor: grabbing !important;
 }