@onetype/framework 2.0.52 → 2.0.54

package/addons/render/elements/front/items/self/data/filters/filters.css

@@ -0,0 +1,541 @@
+/* Root */
+
+.e-435be612
+{
+	display: block;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-435be612 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	border: 1px solid transparent;
+	border-radius: var(--ot-radius-m);
+	overflow: hidden;
+}
+
+.e-435be612 > .holder.sticky
+{
+	position: sticky;
+	top: var(--ot-spacing-m);
+	max-height: calc(100vh - var(--ot-spacing-l));
+}
+
+/* Background variants */
+
+.e-435be612 > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-435be612 > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-435be612 > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-435be612 > .holder.bg-4 { background: var(--ot-bg-4); }
+
+.e-435be612 > .holder.border { border-color: var(--ot-bg-2-border); }
+.e-435be612 > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-435be612 > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-435be612 > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-435be612 > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+.e-435be612 > .holder.clean
+{
+	background: transparent !important;
+	border-color: transparent !important;
+}
+
+/* ===== HEAD ===== */
+
+.e-435be612 > .holder > .head
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	padding: var(--ot-spacing-m) var(--ot-spacing-m);
+	border-bottom: 1px solid var(--ot-bg-2-border);
+}
+
+.e-435be612 > .holder > .head > .head-title
+{
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	flex: 1;
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-m);
+	font-weight: 700;
+	color: var(--ot-text-1);
+	min-width: 0;
+}
+
+.e-435be612 > .holder > .head > .head-title > i
+{
+	font-size: 18px;
+	color: var(--ot-text-2);
+}
+
+.e-435be612 > .holder > .head > .head-title > .head-count
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 20px;
+	height: 20px;
+	padding: 0 6px;
+	background: var(--ot-brand);
+	color: #fff;
+	border-radius: 100px;
+	font-size: 11px;
+	font-weight: 700;
+	margin-left: 4px;
+}
+
+.e-435be612 > .holder > .head > .head-clear
+{
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 6px 10px;
+	background: transparent;
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-s);
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	font-weight: 500;
+	color: var(--ot-text-2);
+	cursor: pointer;
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-435be612 > .holder > .head > .head-clear:hover
+{
+	background: var(--ot-bg-2);
+	color: var(--ot-text-1);
+	border-color: var(--ot-bg-3-border);
+}
+
+.e-435be612 > .holder > .head > .head-clear > i
+{
+	font-size: 14px;
+}
+
+/* ===== GROUPS ===== */
+
+.e-435be612 > .holder > .groups
+{
+	display: flex;
+	flex-direction: column;
+	overflow-y: auto;
+	flex: 1;
+}
+
+.e-435be612 > .holder > .groups > .group
+{
+	display: flex;
+	flex-direction: column;
+	border-bottom: 1px solid var(--ot-bg-2-border);
+}
+
+.e-435be612 > .holder > .groups > .group:last-child
+{
+	border-bottom: none;
+}
+
+/* Group head */
+
+.e-435be612 > .holder > .groups > .group > .group-head
+{
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: var(--ot-spacing-m) var(--ot-spacing-m) var(--ot-spacing-s);
+	user-select: none;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-head.collapsible
+{
+	cursor: pointer;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-head > .group-label
+{
+	font-family: var(--ot-font-primary);
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--ot-text-3);
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-head > .group-count
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 18px;
+	height: 16px;
+	padding: 0 5px;
+	background: var(--ot-brand-opacity);
+	color: var(--ot-brand);
+	border-radius: 100px;
+	font-size: 10px;
+	font-weight: 700;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-head > .group-spacer
+{
+	flex: 1;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-head > .group-clear
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: var(--ot-radius-s);
+	color: var(--ot-text-3);
+	cursor: pointer;
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-435be612 > .holder > .groups > .group > .group-head > .group-clear:hover
+{
+	background: var(--ot-red-opacity);
+	color: var(--ot-red);
+}
+
+.e-435be612 > .holder > .groups > .group > .group-head > .group-clear > i
+{
+	font-size: 14px;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-head > .group-chevron
+{
+	font-size: 18px;
+	color: var(--ot-text-3);
+	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-435be612 > .holder > .groups > .group.collapsed > .group-head > .group-chevron
+{
+	transform: rotate(-90deg);
+}
+
+/* Group body */
+
+.e-435be612 > .holder > .groups > .group > .group-body
+{
+	padding: 0 var(--ot-spacing-m) var(--ot-spacing-m);
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+/* ===== OPTIONS (checkbox / radio) ===== */
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .option
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	width: 100%;
+	padding: 8px 10px;
+	background: transparent;
+	border: none;
+	border-radius: var(--ot-radius-s);
+	cursor: pointer;
+	text-align: left;
+	outline: none;
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .option:hover
+{
+	background: var(--ot-bg-2);
+}
+
+.e-435be612 > .holder.bg-2 > .groups > .group > .group-body > .options > .option:hover { background: var(--ot-bg-3); }
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .option.checked
+{
+	background: var(--ot-brand-opacity);
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .option > .box
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 18px;
+	height: 18px;
+	flex-shrink: 0;
+	background: var(--ot-bg-1);
+	border: 1.5px solid var(--ot-bg-3-border);
+	color: transparent;
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .option > .box.checkbox
+{
+	border-radius: 4px;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .option > .box.radio
+{
+	border-radius: 50%;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .option.checked > .box
+{
+	background: var(--ot-brand);
+	border-color: var(--ot-brand);
+	color: #fff;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .option > .box > i
+{
+	font-size: 14px;
+	font-weight: 700;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .option > .box > .radio-dot
+{
+	width: 8px;
+	height: 8px;
+	background: #fff;
+	border-radius: 50%;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .option > .option-icon
+{
+	font-size: 17px;
+	color: var(--ot-text-2);
+	flex-shrink: 0;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .option > .option-color
+{
+	width: 14px;
+	height: 14px;
+	border-radius: 50%;
+	flex-shrink: 0;
+	border: 1px solid var(--ot-bg-2-border);
+}
+
+.e-435be612 .option-color.color-brand { background: var(--ot-brand); }
+.e-435be612 .option-color.color-blue { background: var(--ot-blue); }
+.e-435be612 .option-color.color-red { background: var(--ot-red); }
+.e-435be612 .option-color.color-green { background: var(--ot-green); }
+.e-435be612 .option-color.color-orange { background: var(--ot-orange); }
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .option > .option-label
+{
+	flex: 1;
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	font-weight: 500;
+	color: var(--ot-text-1);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .option > .option-count
+{
+	font-family: var(--ot-font-primary);
+	font-size: 11px;
+	font-weight: 600;
+	color: var(--ot-text-3);
+	font-variant-numeric: tabular-nums;
+}
+
+/* Show more button */
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .show-more
+{
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	margin-top: 4px;
+	padding: 6px 10px;
+	background: transparent;
+	border: none;
+	border-radius: var(--ot-radius-s);
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	font-weight: 600;
+	color: var(--ot-brand);
+	cursor: pointer;
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+	align-self: flex-start;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .show-more:hover
+{
+	background: var(--ot-brand-opacity);
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .options > .show-more > i
+{
+	font-size: 16px;
+}
+
+/* ===== TAGS (pill buttons) ===== */
+
+.e-435be612 > .holder > .groups > .group > .group-body > .tags
+{
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .tags > .tag
+{
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 5px 10px;
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: 100px;
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	font-weight: 500;
+	color: var(--ot-text-2);
+	cursor: pointer;
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .tags > .tag:hover
+{
+	background: var(--ot-bg-3);
+	color: var(--ot-text-1);
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .tags > .tag.active
+{
+	background: var(--ot-brand);
+	border-color: var(--ot-brand);
+	color: #fff;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .tags > .tag > i
+{
+	font-size: 15px;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .tags > .tag > .tag-count
+{
+	font-size: 11px;
+	font-weight: 700;
+	opacity: 0.75;
+	font-variant-numeric: tabular-nums;
+}
+
+/* ===== RANGE (two inputs) ===== */
+
+.e-435be612 > .holder > .groups > .group > .group-body > .range
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .range > .range-dash
+{
+	color: var(--ot-text-3);
+	font-weight: 500;
+}
+
+/* ===== SLIDER ===== */
+
+.e-435be612 > .holder > .groups > .group > .group-body > .slider-wrap
+{
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.e-435be612 > .holder > .groups > .group > .group-body > .slider-wrap > .slider-value
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	font-weight: 700;
+	color: var(--ot-text-1);
+	text-align: center;
+	font-variant-numeric: tabular-nums;
+}
+
+/* ===== DATE RANGE ===== */
+
+.e-435be612 > .holder > .groups > .group > .group-body > .date-range
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+}
+
+/* ===== TOGGLE ===== */
+
+.e-435be612 > .holder > .groups > .group > .group-body > .toggle-wrap
+{
+	padding: 4px 0;
+}
+
+/* ===== FOOT (apply button) ===== */
+
+.e-435be612 > .holder > .foot
+{
+	padding: var(--ot-spacing-m);
+	border-top: 1px solid var(--ot-bg-2-border);
+}
+
+/* ===== HORIZONTAL ORIENTATION ===== */
+
+.e-435be612 > .holder.horizontal
+{
+	border-radius: var(--ot-radius-m);
+}
+
+.e-435be612 > .holder.horizontal > .groups
+{
+	flex-direction: row;
+	align-items: flex-start;
+	gap: var(--ot-spacing-m);
+	padding: var(--ot-spacing-m);
+	overflow-x: auto;
+	overflow-y: visible;
+}
+
+.e-435be612 > .holder.horizontal > .groups > .group
+{
+	min-width: 200px;
+	border-bottom: none;
+	border-right: 1px solid var(--ot-bg-2-border);
+	padding-right: var(--ot-spacing-m);
+}
+
+.e-435be612 > .holder.horizontal > .groups > .group:last-child
+{
+	border-right: none;
+	padding-right: 0;
+}
+
+.e-435be612 > .holder.horizontal > .groups > .group > .group-head,
+.e-435be612 > .holder.horizontal > .groups > .group > .group-body
+{
+	padding-left: 0;
+	padding-right: 0;
+}