@sme.up/ketchup 6.5.0 → 6.7.0

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

@@ -1,3 +1,103 @@
+.box-layout-1 {
+  background-color: var(--kup-background-color);
+  color: var(--kup-text-color);
+  font-size: var(--kup-font-size);
+  padding: 0.5em;
+}
+.box-layout-1 table {
+  width: 100%;
+}
+.box-layout-1 .label {
+  overflow: hidden;
+  padding: 0.5em;
+  text-overflow: ellipsis;
+  width: 50%;
+}
+.box-layout-1 .value {
+  padding: 0.5em;
+  font-weight: bold;
+}
+
+.box-layout-2 {
+  background-color: var(--kup-background-color);
+  color: var(--kup-text-color);
+  font-size: var(--kup-font-size);
+  padding: 0.5em;
+}
+.box-layout-2 .container {
+  width: 100%;
+}
+.box-layout-2 .flex-container {
+  display: flex;
+  justify-content: space-between;
+}
+.box-layout-2 .label {
+  overflow: hidden;
+  padding: 0.5em;
+  text-overflow: ellipsis;
+  width: 50%;
+}
+.box-layout-2 .value {
+  padding: 0.5em;
+  font-weight: bold;
+}
+
+.box-layout-3 {
+  background-color: var(--kup-background-color);
+  color: var(--kup-text-color);
+  font-size: var(--kup-font-size);
+  padding: 0.5em;
+}
+.box-layout-3 .container {
+  display: flex;
+  width: 100%;
+}
+.box-layout-3 .flex-container {
+  align-items: center;
+  display: flex;
+}
+.box-layout-3 .label {
+  overflow: hidden;
+  padding: 0.5em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 50%;
+}
+.box-layout-3 .value {
+  padding: 0.5em;
+  font-weight: bold;
+}
+.box-layout-3 .f-cell .f-cell__text {
+  white-space: nowrap;
+}
+
+.box-layout-4 {
+  background-color: var(--kup-background-color);
+  color: var(--kup-text-color);
+  display: flex;
+  font-size: var(--kup-font-size);
+  height: 100%;
+  padding: 0.5em;
+}
+.box-layout-4 .container {
+  margin: auto;
+  width: 100%;
+}
+.box-layout-4 .image {
+  border-radius: 50%;
+  height: 64px;
+  margin: auto;
+  width: 64px;
+}
+.box-layout-4 .value {
+  padding: 0.5em;
+  font-weight: bold;
+}
+.box-layout-4 .f-cell.c-centered .f-cell__content img,
+.box-layout-4 .f-cell.c-centered .f-cell__content .f-image {
+  margin: 0;
+}
+
 .built-in-layout-1 {
   background-color: var(--kup-background-color);
   border-radius: 4px;
@@ -1326,6 +1426,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);
@@ -2499,26 +2639,6 @@
   margin: 0 0 0.5em 0;
 }
 
-.standard-layout-16 {
-  background-color: var(--kup-background-color);
-  border-radius: 4px;
-  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);
-  color: var(--kup-text-color);
-  font-size: var(--kup-font-size);
-  padding: 0.5em;
-}
-.standard-layout-16 > table {
-  width: 100%;
-}
-.standard-layout-16 .label {
-  padding: 0.5em;
-  vertical-align: top;
-}
-.standard-layout-16 .value {
-  padding: 0.5em;
-  font-weight: bold;
-}
-
 /**
 * @prop --kup-card-ripple-color: Sets color of ripple effect (for Material layouts).
 */