@topvisor/ui 1.1.0 → 1.2.0

package/src/resources/styles/core/components.css

@@ -0,0 +1,111 @@
+:root {
+	--color-tag-1: #bdc3c7;
+	--color-tag-2: #FD6052;
+	--color-tag-3: #F48D09;
+	--color-tag-4: #F4D30C;
+	--color-tag-5: #5AACFD;
+	--color-tag-6: #C98AE4;
+	--color-tag-7: #A7DE59;
+	--color-tag-8: #e44097;
+	--color-tag-9: #0354a5;
+	--color-tag-10: #33b8a5;
+
+	--color-tag-all: #d8dbdd;
+}
+
+.top-comment {
+	color: var(--color-text-3);
+	font-size: 12px;
+}
+
+[data-top-badge] {
+	position: relative;
+	width: 0;
+	margin: -3px 16px 0 -16px;
+	display: flex;
+	align-self: flex-start;
+}
+
+[data-top-badge]:after {
+	content: attr(data-top-badge);
+	border-radius: 4px;
+	padding: 2px 3px;
+	background: var(--color-bg-negative-1);
+	color: var(--color-text-white);
+	font-size: 12px;
+}
+
+img.top-flag {
+	box-shadow: rgba(0, 0, 0, 0.2) 0 0 3px;
+	width: 24px;
+	height: 15px;
+	margin: 0 6px 0 0;
+	flex-grow: 0 !important;
+	flex-shrink: 0 !important;
+}
+
+/* formsCaption */
+:root {
+	--top-formsCaption-offset: 16px;
+}
+
+.top-formsCaptionWrapper {
+	padding-top: 20px;
+}
+
+.top-formsCaption {
+	pointer-events: none;
+	width: calc(100% - var(--top-forms-padding) - var(--top-icon-both-width) - var(--top-forms_clear-width) - var(--top-select_arrow-width));
+	padding: 0 var(--top-forms-padding);
+	color: var(--top-forms-placeholder-color);
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	transform: translate(var(--top-icon-both-width), 0);
+	position: absolute;
+	overflow: hidden;
+	transition: 0.1s;
+}
+
+.top-error ~ .top-formsCaption {
+	transition: 0.1s 0.1s;
+}
+
+/* перефокусировка на поле не должна влиять на отображении заголовка */
+.top-formsCaption * {
+	pointer-events: auto;
+}
+
+.top-formsCaptionWrapper > input:not([readonly]):focus ~ .top-formsCaption,
+.top-formsCaptionWrapper > input:not(:placeholder-shown) ~ .top-formsCaption,
+.top-formsCaptionWrapper > textarea:not(:placeholder-shown) ~ .top-formsCaption,
+.top-formsCaptionWrapper.top-select > .top-formsCaption,
+.top-formsCaptionWrapper.top-inputRange > .top-formsCaption,
+.top-formsCaptionWrapper-always > .top-formsCaption {
+	width: 100%;
+	padding: 0;
+	color: var(--top-forms-placeholder-color-active);
+	font-size: 11px;
+	transform: translate(0, calc(-1em - var(--top-formsCaption-offset)));
+	transition: 0.1s;
+}
+
+/* jQuery */
+.ui-tooltip {
+	pointer-events: none;
+	box-shadow: 0 6px 18px 0 rgba(14, 21, 47, .13), 0 -2px 6px rgba(14, 21, 47, .03);
+	border-radius: 8px;
+	border: none;
+	background: var(--color-layout-front-1);
+	width: max-content;
+	padding: 16px;
+	margin: 0 18px;
+	font-size: 13px;
+}
+
+.ui-tooltip img {
+	margin: 12px 0 0 0;
+}
+
+.ui-tooltip ul {
+	margin-left: 24px;
+}

package/src/resources/styles/core/core.ts

@@ -0,0 +1,11 @@
+import './forms/forms.css';
+import './modifiers/as.css';
+import './modifiers/ellipsis.css';
+import './modifiers/modifiers.css';
+import './modifiers/only.css';
+import './modifiers/scrollShadow.css';
+import './components.css';
+import './icon.css';
+import './layout.css';
+import './jquery.css';
+import './select.css';

package/src/resources/styles/core/forms/clear.css

@@ -0,0 +1,20 @@
+/* clear css */
+button,
+input,
+textarea,
+select {
+	border: 1px solid var(--top-forms-border-color);
+	background: var(--top-forms-background-color);
+	color: var(--color-text-1);
+	font-size: var(--top-font-size);
+	font-family: inherit;
+}
+
+::placeholder {
+	color: var(--top-forms-placeholder-color);
+}
+
+[contenteditable][placeholder]:empty:before {
+	content: attr(placeholder);
+	color: var(--color-text-2);
+}

package/src/resources/styles/core/forms/controls.css

@@ -0,0 +1,20 @@
+/* checkbox, radio, switcher */
+.top-forms-optionWrapper {
+	cursor: pointer;
+	padding: 8px 0;
+	color: var(--color-text-1);
+	line-height: 1.3;
+	display: inline-flex;
+	align-items: flex-start;
+	gap: 4px;
+}
+
+.top-forms-option {
+	cursor: pointer;
+	padding: 0;
+	margin: 3px;
+	display: inline-flex;
+	flex-shrink: 0;
+	appearance: none;
+	-webkit-appearance: none;
+}

package/src/resources/styles/core/forms/focusable.css

@@ -0,0 +1,26 @@
+/* focusable */
+.top-forms-focusable:focus-visible,
+.top-focus {
+	outline: 2px solid var(--color-line-primary-1);
+	outline-offset: 2px;
+	position: relative;
+	z-index: 1;
+	transition: border-color 150ms;
+}
+
+/* focusable hover */
+.top-forms-focusable:hover,
+.top-forms-focusable:focus,
+.top-focus:hover,
+.top-focus:focus,
+.top-input:hover > .top-input_input,
+.top-select:hover > .top-select_select {
+	--top-forms-border-color: var(--top-forms-border-color-hover);
+	--top-forms-background-color: var(--top-forms-background-color-hover);
+}
+
+/* focusable contenteditable */
+[contenteditable]:focus-visible,
+.top-selector-multiselect:focus-within {
+	outline: 2px solid var(--color-line-primary-1);
+}

package/src/resources/styles/core/forms/forms.css

@@ -0,0 +1,156 @@
+@import "clear.css";
+
+/* composes классы */
+@import "controls.css";
+@import "focusable.css";
+
+:root {
+	--top-font-size: 14px;
+	--top-font-size-s: 12px;
+	--top-font-size-xs: 10px;
+
+	--top-forms-radius: 8px;
+	--top-forms-border-width: 1px;
+	--top-style_outline-color: transparent;
+
+	--top-forms-base-height_xs: 24px;
+	--top-forms-base-height_s: 32px;
+	--top-forms-base-height_m: 36px;
+	--top-forms-base-height_l: 40px;
+
+	--top-forms-background-color-regular: var(--color-layout-front-1);
+	--top-forms-background-color-regular-hover: var(--color-layout-front-1);
+
+	--top-forms-background-color-light: var(--top-forms-background-color-regular);
+	--top-forms-background-color-light-hover: var(--top-forms-background-color-regular);
+
+	--top-forms-background-color-soft: var(--color-theme-75);
+	--top-forms-background-color-soft-hover: var(--color-bg-shading-2);
+
+	--top-forms-background-color-transparent: transparent;
+	--top-forms-background-color-transparent-hover: var(--color-layout-front-3);
+
+	/* высота поля, должна быть одинаковой у всех форм в одном контексте */
+	--top-forms-base-height: var(--top-forms-base-height_s);
+
+	--top-forms-padding_xs: 6px;
+	--top-forms-padding_s: 8px;
+	--top-forms-padding_m: 10px;
+	--top-forms-padding_l: 12px;
+
+	--top-forms-padding: var(--top-forms-padding_s);
+
+	/* forms control */
+	--top-forms-option-height: 24px;
+
+	--top-select_arrow-width: 0px;
+	--top-forms_clear-width: 0px;
+
+	/* border color */
+	--top-forms-border-color: var(--color-line-1);
+	--top-forms-border-color-hover: var(--color-line-primary-1);
+
+	/* placeholder color */
+	--top-forms-placeholder-color: var(--color-text-3);
+	--top-forms-placeholder-color-active: var(--color-text-2);
+
+	/* background color */
+	--top-forms-background-color: var(--color-layout-front-1);
+	--top-forms-background-color-hover: var(--color-layout-front-1);
+}
+
+/* style */
+.top-style_light {
+	--top-forms-radius: 0;
+	border-top-width: 0 !important;
+	border-left-width: 0 !important;
+	border-right-width: 0 !important;
+}
+
+.top-style_soft,
+.top-style_transparent {
+	--top-forms-border-color: transparent;
+	--top-forms-border-color-hover: transparent;
+}
+
+.top-style_soft {
+	--top-forms-background-color: var(--top-forms-background-color-soft);
+	--top-forms-background-color-hover: var(--top-forms-background-color-soft-hover);
+}
+
+.top-style_transparent {
+	--top-forms-background-color: var(--top-forms-background-color-transparent);
+	--top-forms-background-color-hover: var(--top-forms-background-color-transparent-hover);
+}
+
+/* size */
+.top-size_xs {
+	--top-forms-base-height: var(--top-forms-base-height_xs);
+}
+
+.top-size_s {
+	--top-forms-base-height: var(--top-forms-base-height_s);
+}
+
+.top-size_m {
+	--top-forms-base-height: var(--top-forms-base-height_m);
+}
+
+.top-size_l {
+	--top-forms-base-height: var(--top-forms-base-height_l);
+}
+
+/* input, textarea, select */
+.top-input_input,
+.top-textarea_textarea,
+.top-editArea_form,
+.top-select_select {
+	box-sizing: border-box;
+	border-radius: var(--top-forms-radius);
+	border: var(--top-forms-border-width) solid var(--top-forms-border-color);
+	display: inline-flex;
+	appearance: none;
+	-webkit-appearance: none;
+}
+
+.top-select_select {
+	padding-right: calc(var(--top-forms-padding) + var(--top-forms_clear-width) + var(--top-select_arrow-width));
+}
+
+/* значки select */
+.top-select {
+	position: relative;
+}
+
+.top-select[data-top-icon]:before,
+.top-select[data-top-icon2]:after {
+	position: absolute;
+	z-index: 3;
+}
+
+.top-select[data-top-icon][data-top-icon2]:after {
+	left: calc(var(--top-icon-width));
+}
+
+/* text cleaner */
+.top-cleaner[data-top-icon] {
+	--top-icon-size: 20px;
+	--top-icon-width: 20px;
+	--top-icon-color: var(--color-text-secondary);
+
+	cursor: pointer;
+	border-radius: 50%;
+	width: 30px;
+	height: 24px;
+	margin-left: calc(-30px - 4px);
+	transform: translateX(calc(0px - var(--top-forms-border-width) - var(--top-select_arrow-width)));
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	z-index: 1;
+}
+
+.top-cleaner[data-top-icon]:hover {
+	--top-icon-color: var(--color-text-secondary-2);
+}

package/src/resources/styles/core/icon.css

@@ -0,0 +1,58 @@
+:root {
+	--top-icon-size: 24px;
+	--top-icon-width: 0px;
+
+	--top-icon2-size: 24px;
+	--top-icon2-width: 0px;
+
+	--top-icon-both-width: 0px;
+}
+
+/* data-top-icon */
+[data-top-icon] {
+	--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));
+	--top-icon-color: inherit;
+}
+[data-top-icon2] {
+	--top-icon2-width: calc(var(--top-icon2-size) + 8px);
+	--top-icon2-color: inherit;
+}
+[data-top-icon=""] {
+	--top-icon-width: 0px;
+}
+[data-top-icon2=""] {
+	--top-icon2-width: 0px;
+}
+
+[data-top-icon]:before,
+[data-top-icon2]:after {
+	pointer-events: none;
+	content: attr(data-top-icon);
+	border-radius: var(--top-forms-radius);
+	width: var(--top-icon-width);
+	color: var(--top-icon-color);
+	font-family: Topvisor-2;
+	font-size: var(--top-icon-size);
+	font-weight: 400;
+	line-height: 1;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+[data-top-icon2]:after {
+	content: attr(data-top-icon2);
+	width: var(--top-icon2-width);
+	color: var(--top-icon2-color);
+	font-size: var(--top-icon2-size);
+}
+
+/* ширина добавляемых элементов */
+[data-top-icon],
+[data-top-icon2] {
+	--top-icon-both-width: calc(var(--top-icon-width) + var(--top-icon2-width));
+}
+
+[data-top-icon=""]:before {
+	font-family: Topvisor;
+}

package/src/resources/styles/core/jquery.css

@@ -0,0 +1 @@
+.ui-widget-content { background: var(--color-layout-front-1); color: var(--color-text-1); }

package/src/resources/styles/core/layout.css

@@ -0,0 +1,59 @@
+:root {
+	/* line-height: 1.36 нужен для вертикального выравнивания */
+	--top-line-heihgt: 1.36;
+
+	--top-page-width: 1180px;
+	--100vh: 100dvh;
+
+	--transition: 0.2s ease-in-out;
+	--transition-fast: 0.1s;
+	--transition-normal: 0.3s;
+	--transition-slow: 0.5s;
+
+	--top-padding-1: 4px;
+	--top-padding-2: 8px;
+	--top-padding-3: 12px;
+	--top-padding-4: 16px;
+	--top-padding-5: 20px;
+	--top-padding-6: 24px;
+	--top-padding-7: 28px;
+	--top-padding-8: 32px;
+	--top-padding-9: 36px;
+	--top-padding-10: 40px;
+	--top-padding-11: 44px;
+	--top-padding-12: 48px;
+
+	--top-gap-1: 4px;
+	--top-gap-2: 8px;
+	--top-gap-3: 12px;
+	--top-gap-4: 16px;
+	--top-gap-5: 20px;
+	--top-gap-6: 24px;
+	--top-gap-7: 28px;
+	--top-gap-8: 32px;
+	--top-gap-9: 36px;
+	--top-gap-10: 40px;
+	--top-gap-11: 44px;
+	--top-gap-12: 48px;
+
+	--top-radius-1: 4px;
+	--top-radius-2: 8px;
+	--top-radius-3: 12px;
+	--top-radius-4: 16px;
+	--top-radius-5: 20px;
+	--top-radius-6: 24px;
+	--top-radius-7: 28px;
+	--top-radius-8: 32px;
+	--top-radius-9: 36px;
+	--top-radius-10: 40px;
+	--top-radius-11: 44px;
+	--top-radius-12: 48px;
+
+	--padding-default: var(--top-padding-4);
+}
+
+@media only screen and (max-width: 900px) {
+	:root {
+		--padding-default: var(--top-padding-3);
+	}
+}

package/src/resources/styles/core/modifiers/as.css

@@ -0,0 +1,9 @@
+/* элемент в виде ссылки */
+.top-as-a {
+	cursor: pointer;
+	color: var(--color-text-primary);
+}
+
+.top-as-a:hover {
+	text-decoration: underline;
+}

package/src/resources/styles/core/modifiers/ellipsis.css

@@ -0,0 +1,26 @@
+.top-ellipsis,
+.top-ellipsis1 {
+	max-height: 100%;
+	line-height: 1.23;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	flex-grow: 1;
+}
+
+.top-ellipsis1 {
+	white-space: nowrap;
+}
+
+.top-ellipsis2,
+.top-ellipsis3 {
+	max-width: fit-content;
+	line-height: 1.23;
+	overflow: hidden;
+
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+.top-ellipsis3 {
+	-webkit-line-clamp: 3;
+}

package/src/resources/styles/core/modifiers/modifiers.css

@@ -0,0 +1,120 @@
+/* top-inited используется для блокировки элементов, js к которым еще не привязан, настраивается в каждом модуле отдельно */
+.top-inited {
+}
+
+.top-hidden {
+	display: none !important;
+}
+
+/* top-unvisible используется для скрытия элементов, без изменения видимости */
+.top-unvisible {
+	width: 0;
+	height: 0;
+	overflow: hidden;
+	position: absolute;
+	appearance: none;
+	border: none;
+}
+.top-unvisible:focus-visible {
+	outline: none;
+}
+
+.top-loading {
+
+}
+
+/* disabled */
+.top-disabled {
+	pointer-events: none;
+	user-select: none;
+}
+
+:disabled:not(option):not(optgroup),
+:disabled ~ .top-formsCaption,
+.top-disabled {
+	opacity: 0.4;
+	filter: grayscale(100%);
+}
+
+.top-input.top-disabled,
+.top-select.top-disabled {
+	filter: unset;
+}
+
+.top-input_input:disabled,
+.top-textarea_textarea:disabled,
+.top-select_select:disabled {
+	opacity: 1;
+	background-color: var(--color-bg-shading-3);
+
+	filter: unset;
+}
+
+.top-checkbox_input:not(:checked):not(:indeterminate):disabled,
+.top-radio_input:not(:checked):disabled,
+.top-checkboxSwitcher_input:disabled {
+	opacity: 1;
+	background-color: var(--color-layer-1);
+}
+
+.top-checkboxSwitcher_input:disabled {
+	background-color: var(--color-layer-4);
+}
+
+.top-error,
+.top-error::placeholder,
+.top-error:before {
+	--top-forms-border-color: var(--color-line-negative-1);
+
+	border-color: var(--color-line-negative-1);
+}
+
+.top-error {
+	--top-icon-color: var(--color-text-negative);
+
+	color: var(--color-text-negative);
+}
+
+/* формы */
+input.top-error:focus,
+textarea.top-error:focus,
+select.top-error:focus,
+div.top-error:focus {
+	outline-color: var(--color-line-negative-1);
+	border-color: var(--color-line-negative-1);
+}
+
+.top-error ~ .top-formsCaption {
+	color: var(--color-text-negative);
+}
+
+.top-warning {
+	--top-icon-color: var(--color-text-warning);
+
+	color: var(--color-text-warning);
+}
+
+.top-forms-focusable.top-error {
+	--top-error-keyframes-outline-color-100: transparent;
+
+	animation: top-error 0.6s ease-out;
+}
+
+.top-forms-focusable.top-error:focus {
+	--top-error-keyframes-outline-color-100: var(--color-line-negative-1);
+}
+
+@keyframes top-error {
+	0% {
+		outline-offset: 10px;
+		outline: 3px solid transparent;
+	}
+	50% {
+		outline-offset: 2px;
+		outline: 3px solid var(--color-line-negative-1);
+	}
+	100% {
+		outline-offset: 2px;
+		outline: 2px solid var(--top-error-keyframes-outline-color-100);
+	}
+}

package/src/resources/styles/core/modifiers/only.css

@@ -0,0 +1,19 @@
+@media only screen and (min-width: 900px) {
+	.top-only-mobile {
+		display: none !important;
+	}
+}
+@media only screen and (max-width: 900px) {
+	.top-only-pc {
+		display: none !important;
+	}
+}
+
+html:not([lang="ru"]) .top-only-ru,
+html:not([lang="en"]) .top-only-en {
+	display: none !important;
+}
+
+html[data-is_admin="0"] .top-only-admin {
+	display: none !important;
+}

package/src/resources/styles/core/modifiers/scrollShadow.css

@@ -0,0 +1,50 @@
+/* box shadow inset задавать нельзя, так как он будет перекрываться контентом */
+/* background градиент для before и after может неверно просчитываться при перекрывании других элементов */
+/* todo: Поменять имя класса на top-scrollShadow */
+.has_scroll_container {
+	transform: translate(0, 0);
+}
+
+.has_scroll {
+	--scroll-offset-top: 0px;
+	--scroll-padding-top: 0px;
+	--scroll-padding-bottom: 0px;
+	--scroll-height: 0px;
+	--scroll-shadow-height: 15px;
+	--scroll-shadow-color: rgba(0, 0, 0, 0.1);
+}
+
+.has_scroll:before {
+	pointer-events: none;
+	content: "";
+	background: linear-gradient(
+		180deg,
+		transparent calc(100% - var(--scroll-shadow-height)),
+		var(--scroll-shadow-color)
+	);
+	height: calc(var(--scroll-height) - var(--scroll-padding-top) - var(--scroll-padding-bottom));
+	position: fixed;
+	top: calc(var(--scroll-offset-top) + var(--scroll-padding-top));
+	right: 0;
+	left: 0;
+	z-index: 1;
+	display: block;
+}
+
+.has_scroll-started:before {
+	background: linear-gradient(
+		180deg,
+		var(--scroll-shadow-color),
+		transparent var(--scroll-shadow-height),
+		transparent calc(100% - var(--scroll-shadow-height)),
+		var(--scroll-shadow-color)
+	);
+}
+
+.has_scroll-finished:before {
+	background: linear-gradient(
+		180deg,
+		var(--scroll-shadow-color),
+		transparent var(--scroll-shadow-height)
+	);
+}