@steedos-widgets/sortable 1.3.3 → 1.3.4-beta.10

package/dist/sortable.umd.css

@@ -0,0 +1,332 @@
+.Action-module_Action__Vv6gh {
+  display: flex;
+  width: 12px;
+  padding: 10px;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  touch-action: none;
+  cursor: var(--cursor, pointer);
+  border-radius: 5px;
+  border: none;
+  outline: none;
+  appearance: none;
+  background-color: transparent;
+  -webkit-tap-highlight-color: transparent;
+}
+
+  @media (hover: hover) {
+    .Action-module_Action__Vv6gh:hover {
+      background-color: var(--action-background, rgba(0, 0, 0, 0.05));
+    }
+
+      .Action-module_Action__Vv6gh:hover svg {
+        fill: #6f7b88;
+      }
+  }
+
+  .Action-module_Action__Vv6gh svg {
+    flex: 0 0 auto;
+    margin: auto;
+    height: 100%;
+    overflow: visible;
+    fill: #919eab;
+  }
+
+  .Action-module_Action__Vv6gh:active {
+    background-color: var(--background, rgba(0, 0, 0, 0.05));
+  }
+
+  .Action-module_Action__Vv6gh:active svg {
+      fill: var(--fill, #788491);
+    }
+
+  .Action-module_Action__Vv6gh:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0),
+      0 0px 0px 2px #4c9ffe;
+  }
+
+@keyframes Item-module_pop__W5uSR {
+  0% {
+    transform: scale(1);
+    box-shadow: var(--box-shadow);
+  }
+  100% {
+    transform: scale(var(--scale));
+    box-shadow: var(--box-shadow-picked-up);
+  }
+}
+
+@keyframes Item-module_fadeIn__AMWY6 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.Item-module_Wrapper__5kf5R {
+  display: flex;
+  box-sizing: border-box;
+  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0)
+    scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  transform-origin: 0 0;
+  touch-action: manipulation;
+}
+
+.Item-module_Wrapper__5kf5R.Item-module_fadeIn__AMWY6 {
+    animation: Item-module_fadeIn__AMWY6 500ms ease;
+  }
+
+.Item-module_Wrapper__5kf5R.Item-module_dragOverlay__VF1lT {
+    --scale: 1.05;
+    --box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
+    --box-shadow-picked-up: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05),
+      -1px 0 15px 0 rgba(34, 33, 81, 0.01),
+      0px 15px 15px 0 rgba(34, 33, 81, 0.25);
+    z-index: 999;
+  }
+
+.Item-module_Item__QyyJd {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  /* padding: 8px 10px; */
+  /* background-color: $background-color; */
+  /* box-shadow: $box-shadow; */
+  /* outline: none; */
+  /* border-radius: calc(4px / var(--scale-x, 1)); */
+  /* box-sizing: border-box; */
+  list-style: none;
+  transform-origin: 50% 50%;
+
+  -webkit-tap-highlight-color: transparent;
+
+  /* color: $text-color; */
+  /* font-weight: $font-weight; */
+  /* font-size: 1rem; */
+  /* white-space: nowrap; */
+
+  transform: scale(var(--scale, 1));
+  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+}
+
+.Item-module_Item__QyyJd:focus-visible {
+    box-shadow: 0 0px 4px 1px #4c9ffe, 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
+  }
+
+.Item-module_Item__QyyJd:not(.Item-module_withHandle__wK7tT) {
+    touch-action: manipulation;
+    cursor: grab;
+  }
+
+.Item-module_Item__QyyJd.Item-module_dragging__AZaJo:not(.Item-module_dragOverlay__VF1lT) {
+    opacity: var(--dragging-opacity, 0.5);
+  }
+
+/* z-index: -1; */
+
+.Item-module_Item__QyyJd.Item-module_dragging__AZaJo:not(.Item-module_dragOverlay__VF1lT):focus {
+      box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
+    }
+
+.Item-module_Item__QyyJd.Item-module_disabled__Zkgqd {
+    color: #999;
+    background-color: #f1f1f1;
+  }
+
+.Item-module_Item__QyyJd.Item-module_disabled__Zkgqd:focus {
+      box-shadow: 0 0px 4px 1px rgba(0, 0, 0, 0.1), 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
+    }
+
+.Item-module_Item__QyyJd.Item-module_disabled__Zkgqd {
+    cursor: not-allowed;
+}
+
+.Item-module_Item__QyyJd.Item-module_dragOverlay__VF1lT {
+    cursor: inherit;
+    /* box-shadow: 0 0px 6px 2px $focused-outline-color; */
+    animation: Item-module_pop__W5uSR 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+    transform: scale(var(--scale));
+    box-shadow: var(--box-shadow-picked-up);
+    opacity: 1;
+  }
+
+/* &.color:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    height: 100%;
+    width: 3px;
+    display: block;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    background-color: var(--color);
+  } */
+
+.Item-module_Item__QyyJd:hover .Item-module_Remove__PoTm0 {
+      visibility: visible;
+    }
+
+.Item-module_Remove__PoTm0 {
+  visibility: hidden;
+}
+
+.Item-module_Actions__7--uM {
+  /* display: flex;
+  align-self: flex-start; */
+  /* margin-top: -12px; */
+  /* margin-left: auto; */
+  /* margin-bottom: -15px;
+  margin-right: -10px; */
+  position:absolute;
+  right: 6px;
+}
+
+.Grid-module_Grid__FL834 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent calc(var(--grid-size) - 1px),
+      #ddd calc(var(--grid-size) - 1px),
+      #ddd var(--grid-size)
+    ),
+    repeating-linear-gradient(
+      -90deg,
+      transparent,
+      transparent calc(var(--grid-size) - 1px),
+      #ddd calc(var(--grid-size) - 1px),
+      #ddd var(--grid-size)
+    );
+  background-size: var(--grid-size) var(--grid-size);
+  /* z-index: -1; */
+  pointer-events: none;
+}
+
+.Grid-module_RangeSlider__tJQV- {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+}
+
+.GridContainer-module_GridContainer__H09uO {
+  max-width: 800px;
+  display: grid;
+  grid-template-columns: repeat(var(--col-count), 1fr);
+  grid-gap: 10px;
+  padding: 20px;
+}
+
+  @media (max-width: 850px) {.GridContainer-module_GridContainer__H09uO {
+    grid-template-columns: repeat(calc(var(--col-count) - 1), 1fr)
+}
+  }
+
+  @media (max-width: 650px) {.GridContainer-module_GridContainer__H09uO {
+    grid-template-columns: repeat(calc(var(--col-count) - 2), 1fr)
+}
+  }
+
+.Container-module_Container__jf9i2 {
+  display: flex;
+  flex-direction: column;
+  grid-auto-rows: max-content;
+  /* overflow: hidden; */
+  box-sizing: border-box;
+  appearance: none;
+  outline: none;
+  min-width: 350px;
+  /* margin: 10px; */
+  /* border-radius: 5px; */
+  min-height: 100px;
+  transition: background-color 350ms ease;
+}
+  /* background-color: rgba(246, 246, 246, 1);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  font-size: 1em; */
+  .Container-module_Container__jf9i2 ul {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: repeat(var(--columns, 1), 1fr);
+    list-style: none;
+    padding: 10px 0;
+    margin: 0;
+  }
+  .Container-module_Container__jf9i2.Container-module_scrollable__qSAWm ul {
+      overflow-y: auto;
+    }
+  .Container-module_Container__jf9i2.Container-module_placeholder__0BJ8I {
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.5);
+    background-color: transparent;
+    border-style: dashed;
+    border-color: rgba(0, 0, 0, 0.08);
+  }
+  .Container-module_Container__jf9i2.Container-module_placeholder__0BJ8I:hover {
+      border-color: rgba(0, 0, 0, 0.15);
+    }
+  .Container-module_Container__jf9i2.Container-module_hover__-4EcB {
+    background-color: rgb(235, 235, 235, 1);
+  }
+  .Container-module_Container__jf9i2.Container-module_unstyled__aYi6X {
+    overflow: visible;
+    /* background-color: transparent !important;
+    border: none !important; */
+  }
+  .Container-module_Container__jf9i2.Container-module_horizontal__gnBWZ {
+    width: 100%;
+  }
+  .Container-module_Container__jf9i2.Container-module_horizontal__gnBWZ ul {
+      grid-auto-flow: column;
+    }
+  .Container-module_Container__jf9i2.Container-module_shadow__1UsB3 {
+    /* box-shadow: 0 1px 10px 0 rgba(34, 33, 81, 0.1); */
+  }
+  .Container-module_Container__jf9i2:focus-visible {
+    border-color: transparent;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0px 0px 2px #4c9ffe;
+  }
+
+.Container-module_Header__dzbqd {
+  display: flex;
+  /* padding: 5px 20px;
+  padding-right: 8px; */
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  /* background-color: #fff; */
+  /* border-top-left-radius: 5px;
+  border-top-right-radius: 5px; */
+}
+
+/* border-bottom: 1px solid rgba(0, 0, 0, 0.08); */
+
+.Container-module_Header__dzbqd:hover .Container-module_Actions__peIDq > * {
+      opacity: 1 !important;
+    }
+
+.Container-module_Actions__peIDq {
+  display: flex;
+  position: absolute;
+  right: 6px;
+}
+
+.Container-module_Actions__peIDq > *:first-child:not(:last-child) {
+    opacity: 0;
+  }
+
+.Container-module_Actions__peIDq > *:first-child:not(:last-child):focus-visible {
+      opacity: 1;
+    }