@sme.up/ketchup 4.0.0 → 4.1.0

package/dist/collection/components/kup-box/kup-box.css

@@ -153,16 +153,19 @@
   width: 4em;
 }
 .f-button--wrapper .button.button--floating:hover, .f-button--wrapper .button.button--floating:focus {
-  box-shadow: 0 0.35em 0.35em -3px rgba(var(--kup-text-color-rgb), 0.2), 0 0.57em 0.71em 0.07em rgba(var(--kup-text-color-rgb), 0.14), 0 0.21em 1em 0.14em rgba(var(--kup-text-color-rgb), 0.12);
+  box-shadow: 0 5px 5px -3px rgba(var(--kup-text-color-rgb), 0.2), 0 8px 10px 1px rgba(var(--kup-text-color-rgb), 0.14), 0 3px 14px 2px rgba(var(--kup-text-color-rgb), 0.12);
 }
 .f-button--wrapper .button.button--floating:active {
-  box-shadow: 0 0.5em 0.57em -4px rgba(var(--kup-text-color-rgb), 0.2), 0 0.85em 1.21em 0.14em rgba(var(--kup-text-color-rgb), 0.14), 0 0.35em 1.57em 0.28em rgba(var(--kup-text-color-rgb), 0.12);
+  box-shadow: 0 7px 8px -4px rgba(var(--kup-text-color-rgb), 0.2), 0 12px 17px 2px rgba(var(--kup-text-color-rgb), 0.14), 0 5px 22px 4px rgba(var(--kup-text-color-rgb), 0.12);
 }
 .f-button--wrapper .button.button--raised {
-  box-shadow: 0px 0.1em 0.1em 0 rgba(var(--kup-text-color-rgb), 0.125), 0px 0.2em 1em 0.1em rgba(var(--kup-text-color-rgb), 0.1), 0px 0.25em 1.5em 0.2em rgba(var(--kup-text-color-rgb), 0.075);
+  box-shadow: 0 3px 1px -2px rgba(var(--kup-text-color-rgb), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb), 0.12);
 }
-.f-button--wrapper .button.button--raised:hover {
-  box-shadow: 0 0.25em 0.25em 0 rgba(var(--kup-text-color-rgb), 0.125), 0 0.75em 1em 0.1em rgba(var(--kup-text-color-rgb), 0.1), 0 0.25em 1.5em 0.2em rgba(var(--kup-text-color-rgb), 0.075);
+.f-button--wrapper .button.button--raised:focus, .f-button--wrapper .button.button--raised:hover {
+  box-shadow: 0 2px 4px -1px rgba(var(--kup-text-color-rgb), 0.2), 0 4px 5px 0 rgba(var(--kup-text-color-rgb), 0.14), 0 1px 10px 0 rgba(var(--kup-text-color-rgb), 0.12);
+}
+.f-button--wrapper .button.button--raised:active {
+  box-shadow: 0 5px 5px -3px rgba(var(--kup-text-color-rgb), 0.2), 0 8px 10px 1px rgba(var(--kup-text-color-rgb), 0.14), 0 3px 14px 2px rgba(var(--kup-text-color-rgb), 0.12);
 }
 .f-button--wrapper .button.button--outlined {
   border-width: 1px;
@@ -383,7 +386,6 @@
   border-width: 0;
   outline: none;
   cursor: pointer;
-  will-change: transform, opacity;
   margin: var(--kup_chip_margin);
 }
 .f-chip--wrapper .chip-set .chip .chip__icon--leading {
@@ -554,11 +556,11 @@
 
 .box-component {
   background: var(--kup_box_background_color);
+  transition: border var(--kup_box_transition) ease;
 }
-.box-component.component-dropover {
+.box-component[kup-drag-over] {
   position: relative;
-  border: 3px solid var(--kup-border-color);
-  padding: 5px;
+  border: 3px dashed var(--kup-border-color);
 }
 
 #box-container {
@@ -588,14 +590,15 @@
   cursor: pointer;
   position: relative;
   display: flex;
-  transition: background-color var(--kup_box_transition) ease, box-shadow var(--kup_box_transition) ease;
+  transition: background-color var(--kup_box_transition) ease, box-shadow var(--kup_box_transition) ease, border var(--kup_box_transition) ease;
+}
+#box-container .box-wrapper .box.draggable {
+  touch-action: none;
+  user-select: none;
 }
 #box-container .box-wrapper .box.column {
   flex-direction: column;
 }
-#box-container .box-wrapper .box:hover .box-drag-handler, #box-container .box-wrapper .box.selected .box-drag-handler {
-  display: inline;
-}
 #box-container .box-wrapper .box:hover {
   box-shadow: var(--kup_box_hover_box_shadow);
 }
@@ -605,20 +608,13 @@
 #box-container .box-wrapper .box.selected .box-section.titled > h3 {
   background-color: transparent;
 }
-#box-container .box-wrapper .box.item-dragged {
+#box-container .box-wrapper .box[kup-draggable] {
   opacity: 0.5;
 }
-#box-container .box-wrapper .box.item-dropover {
+#box-container .box-wrapper .box[kup-drag-over] {
+  border: 3px dashed var(--kup-border-color);
   position: relative;
   z-index: 2;
-  -webkit-transition: all 200ms ease-in;
-  -webkit-transform: scale(1.05);
-  -ms-transition: all 200ms ease-in;
-  -ms-transform: scale(1.05);
-  -moz-transition: all 200ms ease-in;
-  -moz-transform: scale(1.05);
-  transition: all 200ms ease-in;
-  transform: scale(1.05);
 }
 #box-container .box-wrapper .box .box-section {
   display: flex;
@@ -658,6 +654,17 @@
   display: flex;
   align-items: center;
 }
+#box-container .box-wrapper .box .box-section.collapse-section .header .header-content .f-image--wrapper {
+  transition: transform 0.15s;
+}
+#box-container .box-wrapper .box .box-section.collapse-section .header .header-content .f-image--wrapper.toggled {
+  transform: rotate(-180deg);
+}
+#box-container .box-wrapper .box .box-section.collapse-section .header .header-content .kup-icon.kup-dropdown-icon {
+  margin: 0;
+  -webkit-mask: var(--kup-dropdown-icon);
+  mask: var(--kup-dropdown-icon);
+}
 #box-container .box-wrapper .box .box-section.collapse-section .content {
   display: none;
   width: 100%;
@@ -687,13 +694,6 @@
   right: 0.5em;
   z-index: 1;
 }
-#box-container .box-wrapper .box .box-drag-handler {
-  position: absolute;
-  bottom: 0.5em;
-  right: 0.5em;
-  cursor: grab;
-  display: none;
-}
 #box-container .box-wrapper .row-actions-wrapper .row-actions-toggler {
   position: relative;
   width: 24px;