@topvisor/ui 1.0.42-checkvisibility.3 → 1.0.42-dev.1

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

@@ -0,0 +1,26 @@
+.top-ellipsis,
+.top-ellipsis1 {
+	max-height: 100%;
+	line-height: 1.26;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	flex-grow: 1;
+}
+
+.top-ellipsis1 {
+	white-space: nowrap;
+}
+
+.top-ellipsis2,
+.top-ellipsis3 {
+	max-width: fit-content;
+	line-height: 1.26;
+	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,23 @@
+@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;
+}
+
+html[data-is-admin="1"] .top-only-no-admin {
+	display: none !important;
+}

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

@@ -0,0 +1,52 @@
+/* Стили для горизонтального скроллбара top-scrollBarXHidding*/
+/* top-scrollBarXHidding - добавляет скроллбар, если он нужен. Скроллбар появится при hover */
+/* чтобы эффект работал, родитель должен иметь фиксированную высоту */
+.top-scrollBarXHidding {
+	scrollbar-width: none;
+	overflow-x: auto;
+	overflow-y: hidden;
+}
+
+.top-scrollBarXHidding:hover {
+	scrollbar-width: thin;
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar {
+	height: 6px;
+	display: none;
+}
+
+.top-scrollBarXHidding:hover::-webkit-scrollbar {
+	display: block;
+	scrollbar-width: thin;
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar-track {
+	background-color: transparent;
+	box-shadow: inset rgba(0, 0, 0, 0.06) 0 0 0 10px;
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar-track:hover {
+	box-shadow: inset rgba(0, 0, 0, 0.08) 0 0 0 10px;
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar-track:active {
+	box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 0 10px;
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar-thumb {
+	background-color: var(--color-line-1-opacity);
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar-thumb:hover {
+	background-color: var(--color-line-2-opacity);
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar-thumb:active {
+	background-color: var(--color-line-3-opacity);
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar-button {
+	width: 0;
+	height: 0;
+}

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: 2;
+	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)
+	);
+}

package/src/resources/styles/storybook.css

@@ -0,0 +1,11 @@
+:root {
+	font-family: "Open Sans", "Tahoma", "Topvisor-2";
+}
+
+body,
+.docs-story,
+.sb-story {
+	background: var(--color-layout-front-1);
+	color: var(--color-text-1);
+	font-size: var(--top-font-size);
+}

package/src/resources/styles/themes/dark/dark-layout.css

@@ -0,0 +1,47 @@
+:root {
+	--color-layout-back: var(--color-theme-100);
+	--color-layout-header: var(--color-theme-225);
+	--color-layout-middle: var(--color-theme-125);
+
+	--color-layout-front-1: var(--color-theme-225);
+	--color-layout-front-2: #222F43;
+	--color-layout-front-3: #253348;
+	--color-layout-front-4: #29374D;
+	--color-layout-front-5: #2C3B52;
+	--color-layout-front-6: #2C3B52;
+
+	--color-layout-front-primary-1: #202C3F;
+	--color-layout-front-primary-2: #232f41;
+	--color-layout-front-primary-3: #243149;
+	--color-layout-front-primary-4: #243450;
+	--color-layout-front-primary-5: #253758;
+	--color-layout-front-primary-6: #253960;
+
+	--color-layout-front-positive-1: #202D3D;
+	--color-layout-front-positive-2: #25333b;
+	--color-layout-front-positive-3: #263a3d;
+	--color-layout-front-positive-4: #284140;
+	--color-layout-front-positive-5: #2a4842;
+	--color-layout-front-positive-6: #2b4f44;
+
+	--color-layout-front-warning-1: #222D3C;
+	--color-layout-front-warning-2: #2b3038;
+	--color-layout-front-warning-3: #343437;
+	--color-layout-front-warning-4: #3c3836;
+	--color-layout-front-warning-5: #453b35;
+	--color-layout-front-warning-6: #4d3f35;
+
+	--color-layout-front-negative-1: #222B3D;
+	--color-layout-front-negative-2: #2b2c3a;
+	--color-layout-front-negative-3: #342d3b;
+	--color-layout-front-negative-4: #3c2d3c;
+	--color-layout-front-negative-5: #452e3d;
+	--color-layout-front-negative-6: #4d2e3e;
+
+	--color-layout-front-info-1: #212B3F;
+	--color-layout-front-info-2: #272c41;
+	--color-layout-front-info-3: #2b2c49;
+	--color-layout-front-info-4: #2f2c50;
+	--color-layout-front-info-5: #332b58;
+	--color-layout-front-info-6: #362b60;
+}

package/src/resources/styles/themes/dark/dark-positions.css

@@ -0,0 +1,66 @@
+:root {
+	/* summary top */
+	--color-summary-top-3: #5BA8DC;
+	--color-summary-top-10: #1AAD7B;
+	--color-summary-top-30: #4BD2B8;
+	--color-summary-top-50: #68CA63;
+	--color-summary-top-100: #9DAAAA;
+	--color-summary-top-10000: #CAA549;
+
+	/* top's Colors */
+	--color-table-top-1: #435E93;
+	--color-table-top-2: #3F5788;
+	--color-table-top-3: #3B5381;
+	--color-table-top-4: #357550;
+	--color-table-top-5: #336F4E;
+	--color-table-top-6: #326B4D;
+	--color-table-top-7: #31684C;
+	--color-table-top-8: #30624A;
+	--color-table-top-9: #2F5D48;
+	--color-table-top-10: #2D5747;
+
+	/* dynamic Colors */
+	--color-table-move-up-10: #0E6A44;
+	--color-table-move-up-9: #116542;
+	--color-table-move-up-8: #145F40;
+	--color-table-move-up-7: #165A3E;
+	--color-table-move-up-6: #19543C;
+	--color-table-move-up-5: #1B4F3A;
+	--color-table-move-up-4: #1E4938;
+	--color-table-move-up-3: #204335;
+	--color-table-move-up-2: #233E33;
+	--color-table-move-up-1: #263832;
+
+	--color-table-move-0: #313135;
+
+	--color-table-move-down-1: #46303F;
+	--color-table-move-down-2: #4F3040;
+	--color-table-move-down-3: #583142;
+	--color-table-move-down-4: #633244;
+	--color-table-move-down-5: #6C3345;
+	--color-table-move-down-6: #723446;
+	--color-table-move-down-7: #793547;
+	--color-table-move-down-8: #823649;
+	--color-table-move-down-9: #8A364A;
+	--color-table-move-down-10: #93374C;
+
+	--color-table-down: #46303F;
+	--color-table-down-10: #4F3040;
+
+	--color-table-up: #365344;
+	--color-table-up-10: #2C5145;
+
+	--color-table-base: var(--color-layout-front-1);
+	--color-table-featured-snippet: #7D7B45;
+	--color-table-empty: var(--color-layout-front-3);
+	--color-table-not_found: #313638;
+
+	/* snapshot gradiern */
+	--color-snapshot-panel-gradient-1: rgba(35, 44, 77, 0.5);
+	--color-snapshot-panel-gradient-2: rgba(35, 44, 77, 0.8);
+
+	/* top snippet color */
+	--color-snippet-title: #A2C2FA;
+	--color-snippet-title-visited: #BC8CF2;
+	--color-snippet-url: #007700;
+}