@onetype/framework 2.0.52 → 2.0.54

package/addons/render/elements/front/items/self/core/repeater/repeater.css

@@ -12,13 +12,13 @@
 {
 	display: flex;
 	flex-direction: column;
-	gap: var(--ot-spacing-s);
+	gap: var(--ot-spacing-m);
 	width: 100%;
 	border-radius: var(--ot-radius-m);
 	border: 1px solid transparent;
 }
 
-/* Rows */
+/* ===== ROWS ===== */
 
 .e-d62eba0 > .holder > .rows
 {
@@ -33,12 +33,13 @@
 {
 	position: relative;
 	display: flex;
-	align-items: flex-start;
+	align-items: stretch;
+	gap: var(--ot-spacing-s);
 	padding: var(--ot-spacing-s);
 	background: var(--ot-bg-1);
 	border: 1px solid var(--ot-bg-2-border);
 	border-radius: var(--ot-radius-m);
-	transition: border-color 0.15s ease;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .e-d62eba0 > .holder > .rows > .row:hover
@@ -46,7 +47,74 @@
 	border-color: var(--ot-bg-3-border);
 }
 
-/* Fields */
+/* Reorder buttons */
+
+.e-d62eba0 > .holder > .rows > .row > .reorder
+{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	gap: 2px;
+	align-self: center;
+}
+
+.e-d62eba0 > .holder > .rows > .row > .reorder > .action
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 22px;
+	height: 18px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: var(--ot-radius-s);
+	color: var(--ot-text-3);
+	cursor: pointer;
+	outline: none;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-d62eba0 > .holder > .rows > .row > .reorder > .action:hover:not(:disabled)
+{
+	background: var(--ot-bg-2);
+	color: var(--ot-text-1);
+}
+
+.e-d62eba0 > .holder > .rows > .row > .reorder > .action:disabled
+{
+	opacity: 0.3;
+	cursor: not-allowed;
+}
+
+.e-d62eba0 > .holder > .rows > .row > .reorder > .action > i
+{
+	font-size: 18px;
+}
+
+/* Row number */
+
+.e-d62eba0 > .holder > .rows > .row > .number
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	width: 24px;
+	height: 24px;
+	align-self: center;
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: 50%;
+	font-family: var(--ot-font-primary);
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--ot-text-2);
+}
+
+/* Fields block */
 
 .e-d62eba0 > .holder > .rows > .row > .fields
 {
@@ -56,142 +124,341 @@
 	min-width: 0;
 }
 
-.e-d62eba0 > .holder > .rows > .row > .fields > .column
+.e-d62eba0 > .holder.vertical > .rows > .row > .fields
+{
+	flex-direction: column;
+}
+
+/* Single field */
+
+.e-d62eba0 > .holder > .rows > .row > .fields > .field
 {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: var(--ot-spacing-x);
 	flex: 1;
 	min-width: 0;
 }
 
-.e-d62eba0 > .holder > .rows > .row > .fields > .column > .label
+.e-d62eba0 > .holder > .rows > .row > .fields > .field > .field-info
 {
-	font-size: var(--ot-size-s);
-	font-weight: 500;
-	color: var(--ot-text-2);
-	line-height: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 1px;
 }
 
-.e-d62eba0 > .holder > .rows:not(:first-child) > .row > .fields > .column > .label
+.e-d62eba0 > .holder > .rows > .row > .fields > .field > .field-info > .field-label
 {
-	display: none;
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	font-weight: 600;
+	color: var(--ot-text-2);
+	line-height: 1.2;
 }
 
-.e-d62eba0 > .holder > .rows > .row:not(:first-child) > .fields > .column > .label
+.e-d62eba0 > .holder > .rows > .row > .fields > .field > .field-info > .field-description
 {
-	display: none;
+	font-family: var(--ot-font-primary);
+	font-size: 10.5px;
+	color: var(--ot-text-3);
+	line-height: 1.3;
 }
 
-.e-d62eba0 > .holder > .rows > .row > .fields > .column > .field
+/* Horizontal orientation: hide labels for all rows except first */
+
+.e-d62eba0 > .holder.horizontal > .rows > .row:not(:first-child) .field > .field-info
 {
-	flex: 1;
-	min-width: 0;
+	display: none;
 }
 
-/* Actions */
+/* Actions (inline right) */
 
 .e-d62eba0 > .holder > .rows > .row > .actions
 {
-	position: absolute;
-	top: -8px;
-	right: -8px;
 	display: flex;
 	align-items: center;
 	gap: 2px;
-	padding: 2px;
-	background: var(--ot-bg-2);
-	border: 1px solid var(--ot-bg-2-border);
-	border-radius: var(--ot-radius-s);
-	opacity: 0;
-	pointer-events: none;
-	transition: opacity 0.15s ease;
-}
-
-.e-d62eba0 > .holder > .rows > .row:hover > .actions
-{
-	opacity: 1;
-	pointer-events: auto;
+	flex-shrink: 0;
+	align-self: center;
 }
 
 .e-d62eba0 > .holder > .rows > .row > .actions > .action
 {
-	display: flex;
+	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	width: 20px;
-	height: 20px;
-	font-size: 14px;
-	color: var(--ot-text-2);
-	opacity: 0.5;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	background: transparent;
+	border: none;
 	border-radius: var(--ot-radius-s);
+	color: var(--ot-text-3);
 	cursor: pointer;
-	transition: opacity 0.15s ease, background 0.15s ease;
+	outline: none;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .e-d62eba0 > .holder > .rows > .row > .actions > .action:hover
 {
-	opacity: 1;
-	background: var(--ot-bg-3);
+	background: var(--ot-bg-2);
+	color: var(--ot-text-1);
 }
 
-.e-d62eba0 > .holder > .rows > .row > .actions > .action.remove:hover
+.e-d62eba0 > .holder > .rows > .row > .actions > .action.danger:hover
 {
-	color: var(--ot-red);
 	background: var(--ot-red-opacity);
+	color: var(--ot-red);
+}
+
+.e-d62eba0 > .holder > .rows > .row > .actions > .action > i
+{
+	font-size: 16px;
 }
 
-/* Empty */
+/* ===== EMPTY STATE ===== */
 
 .e-d62eba0 > .holder > .empty
 {
 	display: flex;
+	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: var(--ot-spacing-m);
+	gap: var(--ot-spacing-m);
+	padding: var(--ot-spacing-l);
+	background: var(--ot-bg-1);
 	border: 1px dashed var(--ot-bg-2-border);
 	border-radius: var(--ot-radius-m);
 }
 
-.e-d62eba0 > .holder > .empty > span
+.e-d62eba0 > .holder > .empty > .empty-icon
 {
-	font-size: var(--ot-size-s);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 48px;
+	height: 48px;
+	border-radius: 50%;
+	background: var(--ot-bg-2);
+	color: var(--ot-text-3);
+}
+
+.e-d62eba0 > .holder > .empty > .empty-icon > i
+{
+	font-size: 24px;
+}
+
+.e-d62eba0 > .holder > .empty > .empty-text
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-m);
 	color: var(--ot-text-2);
-	opacity: 0.5;
 }
 
-/* Footer */
+/* ===== FOOTER ===== */
 
 .e-d62eba0 > .holder > .footer
 {
 	display: flex;
 	align-items: center;
+	justify-content: space-between;
 	gap: var(--ot-spacing-s);
 }
 
-/* Background variants */
+.e-d62eba0 > .holder > .footer > .counter
+{
+	font-family: var(--ot-font-primary);
+	font-size: 11px;
+	font-weight: 600;
+	color: var(--ot-text-3);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+}
 
-.e-d62eba0 > .holder.bg-1 > .rows > .row { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
-.e-d62eba0 > .holder.bg-2 > .rows > .row { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
-.e-d62eba0 > .holder.bg-3 > .rows > .row { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
-.e-d62eba0 > .holder.bg-4 > .rows > .row { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
+.e-d62eba0 > .holder > .footer > .footer-actions
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+}
 
-.e-d62eba0 > .holder.bg-1 > .rows > .row:hover { border-color: var(--ot-bg-2-border); }
-.e-d62eba0 > .holder.bg-2 > .rows > .row:hover { border-color: var(--ot-bg-3-border); }
-.e-d62eba0 > .holder.bg-3 > .rows > .row:hover { border-color: var(--ot-bg-4-border); }
-.e-d62eba0 > .holder.bg-4 > .rows > .row:hover { border-color: var(--ot-bg-4-border); }
+/* ===== BACKGROUND VARIANTS ===== */
 
-/* Border variant */
+.e-d62eba0 > .holder.bg-1 > .rows > .row
+{
+	background: var(--ot-bg-1);
+	border-color: var(--ot-bg-1-border);
+}
+.e-d62eba0 > .holder.bg-1 > .rows > .row:hover:not(.drag-over)
+{
+	background: var(--ot-bg-1-hover);
+}
+.e-d62eba0 > .holder.bg-1 > .empty
+{
+	background: var(--ot-bg-1);
+	border-color: var(--ot-bg-1-border);
+}
+.e-d62eba0 > .holder.bg-1 > .empty > .empty-icon
+{
+	background: var(--ot-bg-2);
+}
+.e-d62eba0 > .holder.bg-1 .number
+{
+	background: var(--ot-bg-2);
+	border-color: var(--ot-bg-1-border);
+}
+
+.e-d62eba0 > .holder.bg-2 > .rows > .row
+{
+	background: var(--ot-bg-2);
+	border-color: var(--ot-bg-2-border);
+}
+.e-d62eba0 > .holder.bg-2 > .rows > .row:hover:not(.drag-over)
+{
+	background: var(--ot-bg-2-hover);
+}
+.e-d62eba0 > .holder.bg-2 > .empty
+{
+	background: var(--ot-bg-2);
+	border-color: var(--ot-bg-2-border);
+}
+.e-d62eba0 > .holder.bg-2 > .empty > .empty-icon
+{
+	background: var(--ot-bg-3);
+}
+.e-d62eba0 > .holder.bg-2 .number
+{
+	background: var(--ot-bg-3);
+	border-color: var(--ot-bg-2-border);
+}
+.e-d62eba0 > .holder.bg-2 .action:hover
+{
+	background: var(--ot-bg-1);
+}
+
+.e-d62eba0 > .holder.bg-3 > .rows > .row
+{
+	background: var(--ot-bg-3);
+	border-color: var(--ot-bg-3-border);
+}
+.e-d62eba0 > .holder.bg-3 > .rows > .row:hover:not(.drag-over)
+{
+	background: var(--ot-bg-3-hover);
+}
+.e-d62eba0 > .holder.bg-3 > .empty
+{
+	background: var(--ot-bg-3);
+	border-color: var(--ot-bg-3-border);
+}
+.e-d62eba0 > .holder.bg-3 > .empty > .empty-icon
+{
+	background: var(--ot-bg-4);
+}
+.e-d62eba0 > .holder.bg-3 .number
+{
+	background: var(--ot-bg-4);
+	border-color: var(--ot-bg-3-border);
+}
+.e-d62eba0 > .holder.bg-3 .action:hover
+{
+	background: var(--ot-bg-2);
+}
+
+.e-d62eba0 > .holder.bg-4 > .rows > .row
+{
+	background: var(--ot-bg-4);
+	border-color: var(--ot-bg-4-border);
+}
+.e-d62eba0 > .holder.bg-4 > .rows > .row:hover:not(.drag-over)
+{
+	background: var(--ot-bg-4-hover);
+}
+.e-d62eba0 > .holder.bg-4 > .empty
+{
+	background: var(--ot-bg-4);
+	border-color: var(--ot-bg-4-border);
+}
+.e-d62eba0 > .holder.bg-4 > .empty > .empty-icon
+{
+	background: var(--ot-bg-3);
+}
+.e-d62eba0 > .holder.bg-4 .number
+{
+	background: var(--ot-bg-3);
+	border-color: var(--ot-bg-4-border);
+}
+.e-d62eba0 > .holder.bg-4 .action:hover
+{
+	background: var(--ot-bg-3);
+}
+
+/* ===== BORDER VARIANT (outer container) ===== */
+
+.e-d62eba0 > .holder.border
+{
+	border-color: var(--ot-bg-2-border);
+	padding: var(--ot-spacing-m);
+}
+
+.e-d62eba0 > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-d62eba0 > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-d62eba0 > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-d62eba0 > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* ===== SIZE VARIANTS ===== */
 
-.e-d62eba0 > .holder.border { border: 1px solid var(--ot-bg-2-border); padding: var(--ot-spacing-s); }
+.e-d62eba0 > .holder.size-s > .rows > .row
+{
+	padding: var(--ot-spacing-x);
+	gap: var(--ot-spacing-x);
+}
+.e-d62eba0 > .holder.size-s > .rows > .row > .fields
+{
+	gap: var(--ot-spacing-x);
+}
+.e-d62eba0 > .holder.size-s .action
+{
+	width: 24px;
+	height: 24px;
+}
+.e-d62eba0 > .holder.size-s .action > i
+{
+	font-size: 14px;
+}
 
-/* Size variants */
+.e-d62eba0 > .holder.size-m > .rows > .row
+{
+	padding: var(--ot-spacing-s);
+	gap: var(--ot-spacing-s);
+}
+.e-d62eba0 > .holder.size-m > .rows > .row > .fields
+{
+	gap: var(--ot-spacing-s);
+}
 
-.e-d62eba0 > .holder.size-s > .rows > .row { padding: 4px; }
-.e-d62eba0 > .holder.size-s > .rows > .row > .fields { gap: 4px; }
+.e-d62eba0 > .holder.size-l > .rows > .row
+{
+	padding: var(--ot-spacing-m);
+	gap: var(--ot-spacing-m);
+}
+.e-d62eba0 > .holder.size-l > .rows > .row > .fields
+{
+	gap: var(--ot-spacing-m);
+}
+.e-d62eba0 > .holder.size-l .action
+{
+	width: 32px;
+	height: 32px;
+}
+.e-d62eba0 > .holder.size-l .action > i
+{
+	font-size: 18px;
+}
 
-.e-d62eba0 > .holder.size-m > .rows > .row { padding: var(--ot-spacing-s); }
-.e-d62eba0 > .holder.size-m > .rows > .row > .fields { gap: var(--ot-spacing-s); }
+/* Disabled */
 
-.e-d62eba0 > .holder.size-l > .rows > .row { padding: var(--ot-spacing-m); }
-.e-d62eba0 > .holder.size-l > .rows > .row > .fields { gap: var(--ot-spacing-m); }
+.e-d62eba0 > .holder.disabled > .rows > .row
+{
+	opacity: 0.7;
+	cursor: not-allowed;
+}