@sme.up/ketchup 4.2.0-SNAPSHOT → 5.1.0-SNAPSHOT

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

@@ -1,3 +1,771 @@
+.built-in-layout-1 {
+  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;
+}
+.built-in-layout-1 .section-1 {
+  box-sizing: border-box;
+  height: 5em;
+  overflow: auto;
+  padding-bottom: 1em;
+  width: 100%;
+}
+.built-in-layout-1 .section-1 .sub-1 {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+.built-in-layout-1 .section-2 {
+  height: calc(100% - 60px);
+  overflow: auto;
+  width: 100%;
+}
+.built-in-layout-1 .prev-page {
+  margin-left: auto;
+}
+.built-in-layout-1 .change-view-button {
+  margin: auto;
+  width: 12em;
+  text-align: center;
+}
+.built-in-layout-1 #change-view-button button {
+  text-transform: capitalize;
+}
+.built-in-layout-1 .next-page {
+  margin-right: auto;
+}
+.built-in-layout-1 .calendar {
+  border-collapse: collapse;
+  width: 100%;
+}
+.built-in-layout-1 thead {
+  border-bottom: 1px solid var(--kup-border-color);
+}
+.built-in-layout-1 .item-text {
+  color: rgba(var(--kup-text-color-rgb), 0.5);
+}
+.built-in-layout-1 .item {
+  text-align: center;
+}
+.built-in-layout-1 .item:not(.selected) .item-number:hover {
+  background-color: var(--kup-hover-background-color);
+}
+.built-in-layout-1 .item.selected .item-number, .built-in-layout-1 .item.selected .item-number:hover {
+  background-color: rgba(var(--kup-primary-color-rgb), 0.175);
+}
+.built-in-layout-1 .item-number {
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  line-height: 2.5em;
+  margin: auto;
+  width: 2.5em;
+  transition: background-color 0.25s;
+  text-transform: capitalize;
+}
+
+.built-in-layout-2 {
+  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;
+}
+.built-in-layout-2 .clock {
+  box-shadow: var(--kup-box-shadow);
+  width: 300px;
+  height: 450px;
+  background-color: var(--kup-background-color);
+  position: relative;
+  font-family: var(--kup-font-family);
+}
+.built-in-layout-2 .top {
+  background-color: var(--kup-primary-color);
+  color: var(--kup-text-on-primary-color);
+  height: 100px;
+  line-height: 100px;
+  font-size: 50px;
+  text-align: center;
+}
+.built-in-layout-2 .top span {
+  cursor: pointer;
+  opacity: 0.75;
+  transition: 0.25s ease-in-out;
+}
+.built-in-layout-2 .top .visible {
+  opacity: 1;
+}
+.built-in-layout-2 .circle {
+  user-select: none;
+  background-color: rgba(var(--kup-text-color-rgb), 0.1);
+  width: 250px;
+  height: 250px;
+  border-radius: 1000px;
+  position: relative;
+  top: 25px;
+  left: 25px;
+  box-sizing: border-box;
+  display: none;
+}
+.built-in-layout-2 .circle.visible {
+  display: block;
+}
+.built-in-layout-2 .mid {
+  position: absolute;
+  left: calc(50% - 0px);
+  top: calc(50% - 0px);
+  width: 2px;
+  height: 2px;
+  border-radius: 10px;
+  background-color: var(--kup-text-color);
+}
+.built-in-layout-2 .hour {
+  position: absolute;
+  height: 40px;
+  line-height: 40px;
+  width: 40px;
+  border-radius: 40px;
+  text-align: center;
+}
+.built-in-layout-2 .hour.selected {
+  z-index: 2;
+}
+.built-in-layout-2 .hour.selected::after {
+  content: "";
+  z-index: -1;
+  background-color: rgba(var(--kup-primary-color-rgb), 0.5);
+  height: 1px;
+  width: 100%;
+  position: absolute;
+  transform: rotate(-90deg);
+  transform-origin: 100% 0%;
+  top: 50%;
+  width: 101px;
+  right: 50%;
+}
+.built-in-layout-2 .hour2 {
+  z-index: 2;
+  position: absolute;
+  height: 30px;
+  line-height: 30px;
+  width: 30px;
+  border-radius: 40px;
+  text-align: center;
+  font-size: 14px;
+}
+.built-in-layout-2 .hour2.selected::after {
+  content: "";
+  background-color: rgba(var(--kup-primary-color-rgb), 0.5);
+  height: 1px;
+  width: 100%;
+  position: absolute;
+  transform: rotate(-90deg);
+  transform-origin: 100% 0%;
+  top: 50%;
+  width: 64px;
+  right: 50%;
+  z-index: -1;
+}
+.built-in-layout-2 .unit {
+  position: absolute;
+  height: 20px;
+  line-height: 20px;
+  width: 20px;
+  border-radius: 40px;
+  text-align: center;
+  font-size: 12px;
+}
+.built-in-layout-2 .unit.selected::after {
+  content: "";
+  background-color: rgba(var(--kup-primary-color-rgb), 0.5);
+  height: 1px;
+  width: 100%;
+  position: absolute;
+  transform: rotate(-90deg);
+  transform-origin: 100% 0%;
+  top: 50%;
+  width: 101px;
+  right: 50%;
+}
+.built-in-layout-2 .hour,
+.built-in-layout-2 .hour2,
+.built-in-layout-2 .unit {
+  cursor: pointer;
+  transition: background-color 0.25s;
+}
+.built-in-layout-2 .hour:hover,
+.built-in-layout-2 .hour2:hover,
+.built-in-layout-2 .unit:hover {
+  background-color: rgba(var(--kup-primary-color-rgb), 0.275);
+}
+.built-in-layout-2 .hour.selected,
+.built-in-layout-2 .hour2.selected,
+.built-in-layout-2 .unit.selected {
+  background-color: var(--kup-primary-color);
+  color: var(--kup-text-on-primary-color);
+}
+.built-in-layout-2 .actions {
+  color: var(--kup-primary-color);
+  font-weight: bold;
+  font-size: 20px;
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  width: 100%;
+  box-sizing: border-box;
+  bottom: 10px;
+}
+.built-in-layout-2 .action {
+  display: inline-block;
+  width: 100px;
+  text-align: center;
+  height: 37.5px;
+  line-height: 37.5px;
+  margin-right: 10px;
+  cursor: pointer;
+  border-radius: 2px;
+}
+.built-in-layout-2 .clock .actions .action:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.built-in-layout-2 .clock .actions .action:visible {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.built-in-layout-2 .hour:nth-child(12):after {
+  transform: rotate(330deg);
+}
+.built-in-layout-2 .hour:nth-child(11):after {
+  transform: rotate(300deg);
+}
+.built-in-layout-2 .hour:nth-child(10):after {
+  transform: rotate(270deg);
+}
+.built-in-layout-2 .hour:nth-child(9):after {
+  transform: rotate(240deg);
+}
+.built-in-layout-2 .hour:nth-child(8):after {
+  transform: rotate(210deg);
+}
+.built-in-layout-2 .hour:nth-child(7):after {
+  transform: rotate(180deg);
+}
+.built-in-layout-2 .hour:nth-child(6):after {
+  transform: rotate(150deg);
+}
+.built-in-layout-2 .hour:nth-child(5):after {
+  transform: rotate(120deg);
+}
+.built-in-layout-2 .hour:nth-child(4):after {
+  transform: rotate(90deg);
+}
+.built-in-layout-2 .hour:nth-child(3):after {
+  transform: rotate(60deg);
+}
+.built-in-layout-2 .hour:nth-child(2):after {
+  transform: rotate(30deg);
+}
+.built-in-layout-2 .hour:nth-child(1):after {
+  transform: rotate(0deg);
+}
+.built-in-layout-2 .hour2:nth-child(24):after {
+  transform: rotate(690deg);
+}
+.built-in-layout-2 .hour2:nth-child(23):after {
+  transform: rotate(660deg);
+}
+.built-in-layout-2 .hour2:nth-child(22):after {
+  transform: rotate(630deg);
+}
+.built-in-layout-2 .hour2:nth-child(21):after {
+  transform: rotate(600deg);
+}
+.built-in-layout-2 .hour2:nth-child(20):after {
+  transform: rotate(570deg);
+}
+.built-in-layout-2 .hour2:nth-child(19):after {
+  transform: rotate(540deg);
+}
+.built-in-layout-2 .hour2:nth-child(18):after {
+  transform: rotate(510deg);
+}
+.built-in-layout-2 .hour2:nth-child(17):after {
+  transform: rotate(480deg);
+}
+.built-in-layout-2 .hour2:nth-child(16):after {
+  transform: rotate(450deg);
+}
+.built-in-layout-2 .hour2:nth-child(15):after {
+  transform: rotate(420deg);
+}
+.built-in-layout-2 .hour2:nth-child(14):after {
+  transform: rotate(390deg);
+}
+.built-in-layout-2 .hour2:nth-child(13):after {
+  transform: rotate(360deg);
+}
+.built-in-layout-2 .unit:nth-child(60):after {
+  transform: rotate(354deg);
+}
+.built-in-layout-2 .unit:nth-child(59):after {
+  transform: rotate(348deg);
+}
+.built-in-layout-2 .unit:nth-child(58):after {
+  transform: rotate(342deg);
+}
+.built-in-layout-2 .unit:nth-child(57):after {
+  transform: rotate(336deg);
+}
+.built-in-layout-2 .unit:nth-child(56):after {
+  transform: rotate(330deg);
+}
+.built-in-layout-2 .unit:nth-child(55):after {
+  transform: rotate(324deg);
+}
+.built-in-layout-2 .unit:nth-child(54):after {
+  transform: rotate(318deg);
+}
+.built-in-layout-2 .unit:nth-child(53):after {
+  transform: rotate(312deg);
+}
+.built-in-layout-2 .unit:nth-child(52):after {
+  transform: rotate(306deg);
+}
+.built-in-layout-2 .unit:nth-child(51):after {
+  transform: rotate(300deg);
+}
+.built-in-layout-2 .unit:nth-child(50):after {
+  transform: rotate(294deg);
+}
+.built-in-layout-2 .unit:nth-child(49):after {
+  transform: rotate(288deg);
+}
+.built-in-layout-2 .unit:nth-child(48):after {
+  transform: rotate(282deg);
+}
+.built-in-layout-2 .unit:nth-child(47):after {
+  transform: rotate(276deg);
+}
+.built-in-layout-2 .unit:nth-child(46):after {
+  transform: rotate(270deg);
+}
+.built-in-layout-2 .unit:nth-child(45):after {
+  transform: rotate(264deg);
+}
+.built-in-layout-2 .unit:nth-child(44):after {
+  transform: rotate(258deg);
+}
+.built-in-layout-2 .unit:nth-child(43):after {
+  transform: rotate(252deg);
+}
+.built-in-layout-2 .unit:nth-child(42):after {
+  transform: rotate(246deg);
+}
+.built-in-layout-2 .unit:nth-child(41):after {
+  transform: rotate(240deg);
+}
+.built-in-layout-2 .unit:nth-child(40):after {
+  transform: rotate(234deg);
+}
+.built-in-layout-2 .unit:nth-child(39):after {
+  transform: rotate(228deg);
+}
+.built-in-layout-2 .unit:nth-child(38):after {
+  transform: rotate(222deg);
+}
+.built-in-layout-2 .unit:nth-child(37):after {
+  transform: rotate(216deg);
+}
+.built-in-layout-2 .unit:nth-child(36):after {
+  transform: rotate(210deg);
+}
+.built-in-layout-2 .unit:nth-child(35):after {
+  transform: rotate(204deg);
+}
+.built-in-layout-2 .unit:nth-child(34):after {
+  transform: rotate(198deg);
+}
+.built-in-layout-2 .unit:nth-child(33):after {
+  transform: rotate(192deg);
+}
+.built-in-layout-2 .unit:nth-child(32):after {
+  transform: rotate(186deg);
+}
+.built-in-layout-2 .unit:nth-child(31):after {
+  transform: rotate(180deg);
+}
+.built-in-layout-2 .unit:nth-child(30):after {
+  transform: rotate(174deg);
+}
+.built-in-layout-2 .unit:nth-child(29):after {
+  transform: rotate(168deg);
+}
+.built-in-layout-2 .unit:nth-child(28):after {
+  transform: rotate(162deg);
+}
+.built-in-layout-2 .unit:nth-child(27):after {
+  transform: rotate(156deg);
+}
+.built-in-layout-2 .unit:nth-child(26):after {
+  transform: rotate(150deg);
+}
+.built-in-layout-2 .unit:nth-child(25):after {
+  transform: rotate(144deg);
+}
+.built-in-layout-2 .unit:nth-child(24):after {
+  transform: rotate(138deg);
+}
+.built-in-layout-2 .unit:nth-child(23):after {
+  transform: rotate(132deg);
+}
+.built-in-layout-2 .unit:nth-child(22):after {
+  transform: rotate(126deg);
+}
+.built-in-layout-2 .unit:nth-child(21):after {
+  transform: rotate(120deg);
+}
+.built-in-layout-2 .unit:nth-child(20):after {
+  transform: rotate(114deg);
+}
+.built-in-layout-2 .unit:nth-child(19):after {
+  transform: rotate(108deg);
+}
+.built-in-layout-2 .unit:nth-child(18):after {
+  transform: rotate(102deg);
+}
+.built-in-layout-2 .unit:nth-child(17):after {
+  transform: rotate(96deg);
+}
+.built-in-layout-2 .unit:nth-child(16):after {
+  transform: rotate(90deg);
+}
+.built-in-layout-2 .unit:nth-child(15):after {
+  transform: rotate(84deg);
+}
+.built-in-layout-2 .unit:nth-child(14):after {
+  transform: rotate(78deg);
+}
+.built-in-layout-2 .unit:nth-child(13):after {
+  transform: rotate(72deg);
+}
+.built-in-layout-2 .unit:nth-child(12):after {
+  transform: rotate(66deg);
+}
+.built-in-layout-2 .unit:nth-child(11):after {
+  transform: rotate(60deg);
+}
+.built-in-layout-2 .unit:nth-child(10):after {
+  transform: rotate(54deg);
+}
+.built-in-layout-2 .unit:nth-child(9):after {
+  transform: rotate(48deg);
+}
+.built-in-layout-2 .unit:nth-child(8):after {
+  transform: rotate(42deg);
+}
+.built-in-layout-2 .unit:nth-child(7):after {
+  transform: rotate(36deg);
+}
+.built-in-layout-2 .unit:nth-child(6):after {
+  transform: rotate(30deg);
+}
+.built-in-layout-2 .unit:nth-child(5):after {
+  transform: rotate(24deg);
+}
+.built-in-layout-2 .unit:nth-child(4):after {
+  transform: rotate(18deg);
+}
+.built-in-layout-2 .unit:nth-child(3):after {
+  transform: rotate(12deg);
+}
+.built-in-layout-2 .unit:nth-child(2):after {
+  transform: rotate(6deg);
+}
+.built-in-layout-2 .unit:nth-child(1):after {
+  transform: rotate(0deg);
+}
+
+.built-in-layout-3 {
+  background: var(--kup-background-color);
+  box-shadow: rgba(128, 128, 128, 0.1) 0px 2px 1px -1px, rgba(128, 128, 128, 0.1) 0px 1px 1px 0px, rgba(128, 128, 128, 0.6) 0px 1px 3px 0px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.built-in-layout-3 kup-button,
+.built-in-layout-3 kup-combobox {
+  margin: 0 auto 0.75em auto;
+}
+.built-in-layout-3 kup-combobox {
+  width: 95%;
+}
+.built-in-layout-3 .sub-chip {
+  border-top: 1px solid var(--kup-border-color);
+  max-height: 33vh;
+  overflow: auto;
+  width: 100%;
+}
+
+.built-in-layout-4 {
+  background: var(--kup-background-color);
+  box-shadow: rgba(128, 128, 128, 0.1) 0px 2px 1px -1px, rgba(128, 128, 128, 0.1) 0px 1px 1px 0px, rgba(128, 128, 128, 0.6) 0px 1px 3px 0px;
+  box-sizing: border-box;
+}
+.built-in-layout-4 .picker_arrow {
+  position: absolute;
+  z-index: -1;
+}
+.built-in-layout-4 .picker_wrapper.popup {
+  position: absolute;
+  z-index: 2;
+  margin: 1.5em;
+}
+.built-in-layout-4 .picker_wrapper.popup,
+.built-in-layout-4 .picker_wrapper.popup .picker_arrow::before,
+.built-in-layout-4 .picker_wrapper.popup .picker_arrow::after {
+  background: var(--kup-background-color);
+  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
+}
+.built-in-layout-4 .picker_wrapper.popup .picker_arrow {
+  width: 3em;
+  height: 3em;
+  margin: 0;
+}
+.built-in-layout-4 .picker_wrapper.popup .picker_arrow::before, .built-in-layout-4 .picker_wrapper.popup .picker_arrow::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -99;
+}
+.built-in-layout-4 .picker_wrapper.popup .picker_arrow::before {
+  width: 100%;
+  height: 100%;
+  transform: skew(45deg);
+  transform-origin: 0 100%;
+}
+.built-in-layout-4 .picker_wrapper.popup .picker_arrow::after {
+  width: 150%;
+  height: 150%;
+  box-shadow: none;
+}
+.built-in-layout-4 .popup.popup_top {
+  bottom: 100%;
+  left: 0;
+}
+.built-in-layout-4 .popup.popup_top .picker_arrow {
+  bottom: 0;
+  left: 0;
+  transform: rotate(-90deg);
+}
+.built-in-layout-4 .popup.popup_bottom {
+  top: 100%;
+  left: 0;
+}
+.built-in-layout-4 .popup.popup_bottom .picker_arrow {
+  top: 0;
+  left: 0;
+  transform: rotate(90deg) scale(1, -1);
+}
+.built-in-layout-4 .popup.popup_left {
+  top: 0;
+  right: 100%;
+}
+.built-in-layout-4 .popup.popup_left .picker_arrow {
+  top: 0;
+  right: 0;
+  transform: scale(-1, 1);
+}
+.built-in-layout-4 .popup.popup_right {
+  top: 0;
+  left: 100%;
+}
+.built-in-layout-4 .popup.popup_right .picker_arrow {
+  top: 0;
+  left: 0;
+}
+.built-in-layout-4 .picker_wrapper.no_alpha .picker_alpha {
+  display: none;
+}
+.built-in-layout-4 .picker_wrapper.no_editor .picker_editor {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+.built-in-layout-4 .picker_wrapper.no_cancel .picker_cancel {
+  display: none;
+}
+.built-in-layout-4 .layout_default.picker_wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: stretch;
+  font-size: 10px;
+  width: 25em;
+  padding: 0.5em;
+}
+.built-in-layout-4 .layout_default.picker_wrapper input,
+.built-in-layout-4 .layout_default.picker_wrapper button {
+  font-size: 1em;
+}
+.built-in-layout-4 .layout_default.picker_wrapper > * {
+  margin: 0.5em;
+}
+.built-in-layout-4 .layout_default.picker_wrapper::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 0;
+  order: 1;
+}
+.built-in-layout-4 .layout_default .picker_slider,
+.built-in-layout-4 .layout_default .picker_selector {
+  padding: 1em;
+}
+.built-in-layout-4 .layout_default .picker_hue {
+  width: 100%;
+}
+.built-in-layout-4 .layout_default .picker_sl {
+  flex: 1 1 auto;
+}
+.built-in-layout-4 .layout_default .picker_sl::before {
+  content: "";
+  display: block;
+  padding-bottom: 100%;
+}
+.built-in-layout-4 .layout_default .picker_editor {
+  order: 1;
+  width: 6.5em;
+}
+.built-in-layout-4 .layout_default .picker_editor input {
+  width: 100%;
+  height: 100%;
+}
+.built-in-layout-4 .layout_default .picker_sample {
+  order: 1;
+  flex: 1 1 auto;
+}
+.built-in-layout-4 .layout_default .picker_done,
+.built-in-layout-4 .layout_default .picker_cancel {
+  order: 1;
+}
+.built-in-layout-4 .picker_wrapper {
+  box-sizing: border-box;
+  background: var(--kup-background-color);
+  box-shadow: 0 0 0 1px var(--kup-border-color);
+  cursor: default;
+  font-family: sans-serif;
+  color: #444;
+  pointer-events: auto;
+}
+.built-in-layout-4 .picker_wrapper:focus {
+  outline: none;
+}
+.built-in-layout-4 .picker_wrapper button,
+.built-in-layout-4 .picker_wrapper input {
+  box-sizing: border-box;
+  border: none;
+  box-shadow: 0 0 0 1px var(--kup-border-color);
+  outline: none;
+}
+.built-in-layout-4 .picker_wrapper button:focus, .built-in-layout-4 .picker_wrapper button:active,
+.built-in-layout-4 .picker_wrapper input:focus,
+.built-in-layout-4 .picker_wrapper input:active {
+  box-shadow: 0 0 2px 1px var(--kup-border-color);
+}
+.built-in-layout-4 .picker_wrapper button {
+  padding: 0.4em 0.6em;
+  cursor: pointer;
+  background-color: whitesmoke;
+  background-image: linear-gradient(0deg, gainsboro, transparent);
+}
+.built-in-layout-4 .picker_wrapper button:active {
+  background-image: linear-gradient(0deg, transparent, gainsboro);
+}
+.built-in-layout-4 .picker_selector {
+  position: absolute;
+  z-index: 1;
+  display: block;
+  transform: translate(-50%, -50%);
+  border: 2px solid white;
+  border-radius: 100%;
+  box-shadow: 0 0 3px 1px #67b9ff;
+  background: currentColor;
+  cursor: pointer;
+}
+.built-in-layout-4 .picker_slider .picker_selector {
+  border-radius: 2px;
+}
+.built-in-layout-4 .picker_hue {
+  position: relative;
+  background-image: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
+  box-shadow: 0 0 0 1px var(--kup-border-color);
+}
+.built-in-layout-4 .picker_sl {
+  position: relative;
+  box-shadow: 0 0 0 1px var(--kup-border-color);
+  background-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%), linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%), linear-gradient(90deg, #808080, rgba(128, 128, 128, 0));
+}
+.built-in-layout-4 .picker_alpha,
+.built-in-layout-4 .picker_sample {
+  position: relative;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E") left top/contain white;
+  box-shadow: 0 0 0 1px var(--kup-border-color);
+}
+.built-in-layout-4 .picker_alpha .picker_selector,
+.built-in-layout-4 .picker_sample .picker_selector {
+  background: none;
+}
+.built-in-layout-4 .picker_editor input {
+  font-family: monospace;
+  padding: 0.2em 0.4em;
+}
+.built-in-layout-4 .picker_sample::before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: currentColor;
+}
+.built-in-layout-4 .picker_done,
+.built-in-layout-4 .picker_arrow {
+  display: none;
+}
+.built-in-layout-4 .layout_default.picker_wrapper {
+  bottom: unset;
+  font-size: var(--kup-font-size);
+  left: unset;
+  padding: 0.25em;
+  right: unset;
+  top: unset;
+  width: 100%;
+}
+.built-in-layout-4 .layout_default .picker_editor input {
+  background: none;
+  color: var(--kup-text-color);
+  font-family: var(--kup-font-family);
+  font-size: var(--kup-font-size);
+}
+.built-in-layout-4 .picker_wrapper.popup {
+  box-shadow: var(--kup-box-shadow);
+  margin: 0;
+  outline: none;
+}
+
 .collapsible-layout-1 {
   color: var(--kup-text-color);
   box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);
@@ -328,6 +1096,21 @@
   opacity: 0.5;
 }
 
+.free-layout-1 {
+  background: var(--kup-background-color);
+  box-shadow: var(--kup-box-shadow);
+  box-sizing: border-box;
+  overflow: auto;
+  padding: 1em;
+}
+
+.free-layout-2 {
+  background: var(--kup-background-color);
+  box-shadow: var(--kup-box-shadow);
+  box-sizing: border-box;
+  overflow: auto;
+}
+
 .scalable-layout-1 .descr {
   font-size: 70%;
   width: 100%;
@@ -1356,7 +2139,7 @@
 
 .standard-layout-12 {
   background-color: var(--kup-background-color);
-  box-shadow: var(--kup-box-shadow);
+  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);
   min-width: 200px;
   min-width: -moz-max-content;
@@ -1406,7 +2189,6 @@
   height: 100%;
   position: relative;
   width: 100%;
-  overflow: auto;
 }
 .standard-layout-13 kup-button {
   margin-left: 0;
@@ -1441,7 +2223,7 @@
 
 .standard-layout-14 {
   background-color: var(--kup-background-color);
-  box-shadow: var(--kup-box-shadow);
+  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);
   min-width: 200px;
   min-width: -moz-max-content;
@@ -1508,6 +2290,9 @@
   margin-left: 0;
   margin-right: auto;
 }
+.standard-layout-14 .sub-formula {
+  padding: 0.5em;
+}
 .standard-layout-14 .sub-chip {
   max-width: 25vw;
   overflow: auto;
@@ -1547,6 +2332,7 @@
 }
 .standard-layout-14 #apply {
   display: none;
+  margin: auto;
 }
 .standard-layout-14 #apply.visible {
   display: block;
@@ -1566,8 +2352,6 @@
   color: var(--kup-text-color);
   box-shadow: var(--kup-box-shadow);
   border-radius: 3px;
-  min-width: 350px;
-  max-width: 700px;
 }
 .standard-layout-15 .section-1 {
   box-sizing: border-box;
@@ -1680,12 +2464,13 @@
   width: var(--kup_card_width);
 }
 
-:host([is-menu]) #kup-component {
-  animation: fade-in 0.25s ease-out;
+:host([is-menu]) {
   display: none;
+  animation: fade-in 0.25s ease-out;
 }
 
-:host([menu-visible]) #kup-component {
+:host([menu-visible]) {
+  box-shadow: var(--kup-box-shadow);
   display: block;
 }