@sme.up/ketchup 6.6.0 → 6.8.0

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

@@ -24,18 +24,15 @@
   font-size: var(--kup-font-size);
   padding: 0.5em;
 }
-.box-layout-2 .container {
+.box-layout-2 table {
   width: 100%;
 }
-.box-layout-2 .flex-container {
-  display: flex;
-  justify-content: space-between;
-}
 .box-layout-2 .label {
+  max-width: 50%;
   overflow: hidden;
   padding: 0.5em;
   text-overflow: ellipsis;
-  width: 50%;
+  white-space: nowrap;
 }
 .box-layout-2 .value {
   padding: 0.5em;
@@ -50,6 +47,8 @@
 }
 .box-layout-3 .container {
   display: flex;
+  justify-content: space-between;
+  overflow: hidden;
   width: 100%;
 }
 .box-layout-3 .flex-container {
@@ -61,7 +60,6 @@
   padding: 0.5em;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width: 50%;
 }
 .box-layout-3 .value {
   padding: 0.5em;
@@ -901,6 +899,20 @@
   background-color: var(--kup-hover-background-color);
 }
 
+.built-in-layout-6 {
+  background-color: var(--kup-background-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  width: 100%;
+  overflow: auto;
+  padding: 0.5em;
+}
+
 .collapsible-layout-1 {
   color: var(--kup-text-color);
   box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);
@@ -1426,6 +1438,46 @@
   text-align: left;
 }
 
+.scalable-layout-9 {
+  background-color: var(--color-1);
+  color: var(--color-2);
+  height: 100%;
+  display: flex;
+  justify-content: unset;
+  overflow: auto;
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+}
+.scalable-layout-9 .section-1 {
+  background-color: var(--color-0);
+  width: 20%;
+  height: 100%;
+}
+.scalable-layout-9 .section-2 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.scalable-layout-9 .text {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+.scalable-layout-9 .descr {
+  font-size: 80%;
+}
+.scalable-layout-9 .value {
+  font-size: 220%;
+}
+.scalable-layout-9 .buttons {
+  height: max-content;
+  margin-bottom: 2%;
+}
+.scalable-layout-9 .f-button {
+  float: right;
+}
+
 .scalable-card {
   align-items: center;
   box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
@@ -2367,6 +2419,8 @@
   /* Chrome */
 }
 .standard-layout-14 .section-1 {
+  --kup-button-font-size: 0.75em;
+  box-sizing: border-box;
   display: flex;
   padding: 1em;
 }
@@ -2382,14 +2436,21 @@
   margin: 0 0.5em 0 0;
 }
 .standard-layout-14 .section-1 .title {
-  --kup-button-font-size: 0.75em;
+  align-items: flex-end;
+  display: flex;
   font-size: 1.25em;
-  margin-top: -0.5em;
+  font-weight: 600;
+  margin-bottom: 0.5em;
   padding: 0 0.25em 0.25em;
+  text-align: left;
 }
 .standard-layout-14 .section-1 .title .label {
   cursor: pointer;
   padding-right: 0.25em;
+  padding-top: 0.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .standard-layout-14 .section-1 .title .label:hover {
   text-decoration: underline;
@@ -2406,6 +2467,7 @@
   width: auto;
 }
 .standard-layout-14 .section-1 .info .value {
+  font-weight: 600;
   width: 100%;
 }
 .standard-layout-14 .sub-button {
@@ -2476,8 +2538,7 @@
 .standard-layout-14 #open-in-new,
 .standard-layout-14 #search,
 .standard-layout-14 #new {
-  margin: 0;
-  display: inline-flex;
+  margin: 0 0 0.5em 0;
 }
 
 .standard-layout-15 {
@@ -2507,16 +2568,18 @@
   margin: 0 0.5em 0 0;
 }
 .standard-layout-15 .section-1 .title {
-  align-items: center;
+  align-items: flex-end;
   display: flex;
   font-size: 1.25em;
   font-weight: 600;
+  margin-bottom: 0.5em;
   padding: 0 0.25em 0.25em;
   text-align: left;
 }
 .standard-layout-15 .section-1 .title .label {
   cursor: pointer;
   padding-right: 0.25em;
+  padding-top: 0.5em;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2600,9 +2663,11 @@
 }
 
 /**
+* @prop --kup-card-backdrop: Backdrop of the component when is visible.
 * @prop --kup-card-ripple-color: Sets color of ripple effect (for Material layouts).
 */
 :host {
+  --kup_card_backdrop: var(--kup-card-backdrop, rgba(0, 0, 0, 0.32));
   --kup_card_ripple_color: var(
     --kup-card-ripple-color,
     var(--kup-primary-color)
@@ -2617,6 +2682,16 @@
   width: var(--kup_card_width);
 }
 
+:host([show-modal]) #kup-component {
+  position: fixed;
+  z-index: var(--kup-card-zindex);
+  height: var(--kup_card_height);
+  width: var(--kup_card_width);
+  top: var(--kup_card_top);
+  left: var(--kup_card_left);
+  display: var(--kup_card_display, none);
+}
+
 :host([is-menu]) {
   display: none;
   animation: fade-in 0.25s ease-out;
@@ -2632,6 +2707,18 @@
   width: 100%;
 }
 
+.backdrop {
+  background: var(--kup_card_backdrop);
+  display: none;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: calc(var(--kup-card-zindex) - 1);
+  display: block;
+}
+
 .mdc-ripple-surface {
   cursor: pointer;
   flex-direction: column;
@@ -2651,4 +2738,23 @@
 }
 .card-view.visible {
   display: block;
+}
+
+.dialog-layout-7 {
+  background-color: var(--kup-background-color);
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: 95vh;
+  max-width: 95vw;
+  width: 100%;
+}
+.dialog-layout-7 .section-1 {
+  max-height: 40vh;
+  overflow: auto;
+}
+.dialog-layout-7 .section-2 {
+  display: flex;
+  justify-content: center;
 }