@topvisor/ui 0.0.34 → 0.0.35

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

@@ -0,0 +1,204 @@
+:root{
+	--color-white: rgba(255, 255, 255, 1);
+	--color-black: rgba(0, 0, 0, 1);
+	--color-black-transparent-40: rgba(0, 0, 0, 0.4);
+	--color-black-transparent-50: rgba(0, 0, 0, 0.5);
+	--color-steel-50: rgba(251, 252, 253, 1);
+	--color-steel-100: rgba(248, 250, 252, 1);
+	--color-steel-150: rgba(241, 244, 249, 1);
+	--color-steel-200: rgba(234, 239, 245, 1);
+	--color-steel-250: rgba(228, 234, 241, 1);
+	--color-steel-300: rgba(221, 228, 238, 1);
+	--color-steel-350: rgba(215, 223, 233, 1);
+	--color-steel-400: rgba(209, 218, 229, 1);
+	--color-steel-450: rgba(204, 213, 225, 1);
+	--color-steel-500: rgba(198, 208, 220, 1);
+	--color-steel-550: rgba(193, 203, 215, 1);
+	--color-gray-50: rgba(225, 229, 234, 1);
+	--color-gray-100: rgba(210, 216, 223, 1);
+	--color-gray-150: rgba(196, 203, 212, 1);
+	--color-gray-200: rgba(182, 190, 201, 1);
+	--color-gray-250: rgba(168, 177, 189, 1);
+	--color-gray-300: rgba(154, 164, 177, 1);
+	--color-gray-350: rgba(141, 151, 165, 1);
+	--color-gray-400: rgba(128, 138, 153, 1);
+	--color-gray-450: rgba(115, 125, 140, 1);
+	--color-gray-500: rgba(104, 113, 125, 1);
+	--color-gray-550: rgba(94, 101, 110, 1);
+	--color-gray-600: rgba(83, 88, 95, 1);
+	--color-gray-650: rgba(72, 76, 81, 1);
+	--color-gray-700: rgba(61, 63, 67, 1);
+	--color-gray-750: rgba(49, 51, 53, 1);
+	--color-gray-800: rgba(37, 38, 39, 1);
+	--color-gray-850: rgba(25, 25, 26, 1);
+	--color-gray-900: rgba(13, 13, 13, 1);
+	--color-blue-50: rgba(250, 252, 255, 1);
+	--color-blue-100: rgba(230, 240, 255, 1);
+	--color-blue-150: rgba(204, 224, 255, 1);
+	--color-blue-200: rgba(179, 210, 255, 1);
+	--color-blue-250: rgba(153, 194, 255, 1);
+	--color-blue-300: rgba(128, 179, 255, 1);
+	--color-blue-350: rgba(102, 163, 255, 1);
+	--color-blue-400: rgba(77, 148, 255, 1);
+	--color-blue-450: rgba(51, 132, 255, 1);
+	--color-blue-500: rgba(25, 117, 255, 1);
+	--color-blue-550: rgba(23, 105, 227, 1);
+	--color-blue-600: rgba(20, 91, 198, 1);
+	--color-blue-650: rgba(17, 78, 170, 1);
+	--color-blue-700: rgba(14, 65, 142, 1);
+	--color-blue-750: rgba(12, 52, 113, 1);
+	--color-blue-800: rgba(9, 40, 85, 1);
+	--color-blue-850: rgba(6, 26, 57, 1);
+	--color-blue-900: rgba(3, 13, 28, 1);
+	--color-orange-50: rgba(255, 253, 250, 1);
+	--color-orange-100: rgba(255, 244, 230, 1);
+	--color-orange-150: rgba(255, 234, 204, 1);
+	--color-orange-200: rgba(255, 223, 178, 1);
+	--color-orange-250: rgba(255, 212, 153, 1);
+	--color-orange-300: rgba(255, 202, 128, 1);
+	--color-orange-350: rgba(255, 191, 102, 1);
+	--color-orange-400: rgba(255, 180, 77, 1);
+	--color-orange-450: rgba(255, 170, 51, 1);
+	--color-orange-500: rgba(255, 159, 25, 1);
+	--color-orange-550: rgba(227, 141, 23, 1);
+	--color-orange-600: rgba(198, 124, 20, 1);
+	--color-orange-650: rgba(170, 106, 17, 1);
+	--color-orange-700: rgba(142, 88, 14, 1);
+	--color-orange-750: rgba(113, 71, 12, 1);
+	--color-orange-800: rgba(85, 53, 9, 1);
+	--color-orange-850: rgba(57, 35, 6, 1);
+	--color-orange-900: rgba(28, 18, 3, 1);
+	--color-mint-50: rgba(251, 254, 253, 1);
+	--color-mint-100: rgba(228, 251, 245, 1);
+	--color-mint-150: rgba(200, 246, 235, 1);
+	--color-mint-200: rgba(173, 242, 226, 1);
+	--color-mint-250: rgba(146, 237, 216, 1);
+	--color-mint-300: rgba(118, 233, 206, 1);
+	--color-mint-350: rgba(91, 228, 196, 1);
+	--color-mint-400: rgba(64, 224, 187, 1);
+	--color-mint-450: rgba(36, 219, 177, 1);
+	--color-mint-500: rgba(9, 215, 167, 1);
+	--color-mint-550: rgba(8, 191, 148, 1);
+	--color-mint-600: rgba(7, 167, 130, 1);
+	--color-mint-650: rgba(6, 143, 111, 1);
+	--color-mint-700: rgba(5, 119, 93, 1);
+	--color-mint-750: rgba(4, 96, 74, 1);
+	--color-mint-800: rgba(3, 72, 56, 1);
+	--color-mint-850: rgba(2, 48, 37, 1);
+	--color-mint-900: rgba(1, 24, 19, 1);
+	--color-green-50: rgba(251, 254, 252, 1);
+	--color-green-100: rgba(229, 248, 237, 1);
+	--color-green-150: rgba(203, 242, 220, 1);
+	--color-green-200: rgba(177, 235, 202, 1);
+	--color-green-250: rgba(151, 229, 184, 1);
+	--color-green-300: rgba(126, 222, 167, 1);
+	--color-green-350: rgba(100, 216, 149, 1);
+	--color-green-400: rgba(74, 209, 131, 1);
+	--color-green-450: rgba(48, 203, 114, 1);
+	--color-green-500: rgba(22, 196, 96, 1);
+	--color-green-550: rgba(20, 174, 85, 1);
+	--color-green-600: rgba(17, 152, 75, 1);
+	--color-green-650: rgba(15, 131, 64, 1);
+	--color-green-700: rgba(12, 109, 53, 1);
+	--color-green-750: rgba(10, 87, 43, 1);
+	--color-green-800: rgba(7, 65, 32, 1);
+	--color-green-850: rgba(5, 44, 21, 1);
+	--color-green-900: rgba(2, 22, 11, 1);
+	--color-salad-50: rgba(252, 254, 250, 1);
+	--color-salad-100: rgba(242, 252, 232, 1);
+	--color-salad-150: rgba(228, 248, 208, 1);
+	--color-salad-200: rgba(215, 245, 185, 1);
+	--color-salad-250: rgba(202, 242, 162, 1);
+	--color-salad-300: rgba(188, 238, 138, 1);
+	--color-salad-350: rgba(175, 235, 115, 1);
+	--color-salad-400: rgba(162, 232, 92, 1);
+	--color-salad-450: rgba(148, 228, 68, 1);
+	--color-salad-500: rgba(135, 225, 45, 1);
+	--color-salad-550: rgba(120, 200, 40, 1);
+	--color-salad-600: rgba(105, 175, 35, 1);
+	--color-salad-650: rgba(90, 150, 30, 1);
+	--color-salad-700: rgba(75, 125, 25, 1);
+	--color-salad-750: rgba(60, 100, 20, 1);
+	--color-salad-800: rgba(45, 75, 15, 1);
+	--color-salad-850: rgba(30, 50, 10, 1);
+	--color-salad-900: rgba(15, 25, 5, 1);
+	--color-red-50: rgba(255, 251, 250, 1);
+	--color-red-100: rgba(253, 234, 232, 1);
+	--color-red-150: rgba(250, 213, 209, 1);
+	--color-red-200: rgba(248, 192, 187, 1);
+	--color-red-250: rgba(246, 171, 164, 1);
+	--color-red-300: rgba(243, 149, 141, 1);
+	--color-red-350: rgba(241, 128, 118, 1);
+	--color-red-400: rgba(239, 107, 96, 1);
+	--color-red-450: rgba(236, 86, 73, 1);
+	--color-red-500: rgba(234, 65, 50, 1);
+	--color-red-550: rgba(208, 58, 44, 1);
+	--color-red-600: rgba(182, 51, 39, 1);
+	--color-red-650: rgba(156, 43, 33, 1);
+	--color-red-700: rgba(130, 36, 28, 1);
+	--color-red-750: rgba(104, 29, 22, 1);
+	--color-red-800: rgba(78, 22, 17, 1);
+	--color-red-850: rgba(52, 14, 11, 1);
+	--color-red-900: rgba(26, 7, 6, 1);
+	--color-violet-50: rgba(251, 250, 255, 1);
+	--color-violet-100: rgba(240, 235, 255, 1);
+	--color-violet-150: rgba(225, 215, 255, 1);
+	--color-violet-200: rgba(210, 195, 255, 1);
+	--color-violet-250: rgba(195, 175, 255, 1);
+	--color-violet-300: rgba(181, 156, 255, 1);
+	--color-violet-350: rgba(166, 136, 255, 1);
+	--color-violet-400: rgba(151, 116, 255, 1);
+	--color-violet-450: rgba(136, 96, 255, 1);
+	--color-violet-500: rgba(121, 76, 255, 1);
+	--color-violet-550: rgba(108, 68, 227, 1);
+	--color-violet-600: rgba(94, 59, 198, 1);
+	--color-violet-650: rgba(81, 51, 170, 1);
+	--color-violet-700: rgba(67, 42, 142, 1);
+	--color-violet-750: rgba(54, 34, 113, 1);
+	--color-violet-800: rgba(40, 25, 85, 1);
+	--color-violet-850: rgba(27, 17, 57, 1);
+	--color-violet-900: rgba(13, 8, 28, 1);
+	--color-pink-50: rgba(254, 250, 254, 1);
+	--color-pink-100: rgba(252, 231, 251, 1);
+	--color-pink-150: rgba(250, 207, 246, 1);
+	--color-pink-200: rgba(247, 183, 242, 1);
+	--color-pink-250: rgba(244, 159, 237, 1);
+	--color-pink-300: rgba(242, 135, 233, 1);
+	--color-pink-350: rgba(239, 111, 228, 1);
+	--color-pink-400: rgba(236, 87, 224, 1);
+	--color-pink-450: rgba(234, 63, 219, 1);
+	--color-pink-500: rgba(231, 39, 215, 1);
+	--color-pink-550: rgba(205, 35, 191, 1);
+	--color-pink-600: rgba(180, 30, 167, 1);
+	--color-pink-650: rgba(154, 26, 143, 1);
+	--color-pink-700: rgba(128, 22, 119, 1);
+	--color-pink-750: rgba(103, 17, 96, 1);
+	--color-pink-800: rgba(77, 13, 72, 1);
+	--color-pink-850: rgba(51, 9, 48, 1);
+	--color-pink-900: rgba(26, 4, 24, 1);
+	--color-yellow-50: rgba(255, 254, 250, 1);
+	--color-yellow-100: rgba(253, 252, 231, 1);
+	--color-yellow-150: rgba(251, 248, 208, 1);
+	--color-yellow-200: rgba(248, 245, 184, 1);
+	--color-yellow-250: rgba(246, 242, 160, 1);
+	--color-yellow-300: rgba(244, 238, 137, 1);
+	--color-yellow-350: rgba(242, 235, 113, 1);
+	--color-yellow-400: rgba(239, 232, 89, 1);
+	--color-yellow-450: rgba(237, 228, 66, 1);
+	--color-yellow-500: rgba(235, 225, 42, 1);
+	--color-yellow-550: rgba(209, 200, 37, 1);
+	--color-yellow-600: rgba(183, 175, 33, 1);
+	--color-yellow-650: rgba(157, 150, 28, 1);
+	--color-yellow-700: rgba(131, 125, 23, 1);
+	--color-yellow-750: rgba(104, 100, 19, 1);
+	--color-yellow-800: rgba(78, 75, 14, 1);
+	--color-yellow-850: rgba(52, 50, 9, 1);
+	--color-yellow-900: rgba(26, 25, 5, 1);
+
+	--color-top-3: #3198DD;
+	--color-top-10: #21936C;
+	--color-top-30: #1ABC9C;
+	--color-top-50: #A6E0A3;
+	--color-top-100: #C7D7D7;
+	--color-top-10000: #FCC94A;
+}

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

@@ -0,0 +1,70 @@
+.top-comment {
+	color: var(--color-gray-350);
+	font-size: 12px;
+}
+
+/* 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(--color-placeholder);
+	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(--color-placeholder-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(--content-background-color);
+	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,10 @@
+import "./colors.css"
+import "./layout.css"
+import "./components.css"
+import "./forms/forms.css"
+import "./icon.css"
+import "./modifiers/as.css"
+import "./modifiers/ellipsis.css"
+import "./modifiers/modifiers.css"
+import "./modifiers/only.css"
+import "./select.css"

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

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

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);
+	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: calc(var(--top-forms-border-width) * 2) solid var(--top-forms-option-color);
+	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-blue-100);
+}

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

@@ -0,0 +1,100 @@
+@import "clear.css";
+
+/* composes классы */
+@import "controls.css";
+@import "focusable.css";
+
+:root {
+	--top-font-size: 14px;
+
+	--top-forms-radius: 8px;
+	--top-forms-border-width: 1px;
+	--top-style_outline-color: transparent;
+
+	--top-forms-base-height_s: 32px;
+	--top-forms-base-height_l: 36px;
+	--top-forms-base-height_xl: 40px;
+
+	/* высота поля, должна быть одинаковой у всех форм в одном контексте */
+	--top-forms-base-height: var(--top-forms-base-height_s);
+
+	--top-forms-padding: 8px;
+	--top-forms-padding_l: 12px;
+	--top-forms-padding_xl: 16px;
+
+	/* forms control */
+	--top-forms-option-height: 24px;
+	--top-forms-option-color: var(--color-primary);
+	--top-forms-option-color-hover: var(--color-primary-2);
+
+	--top-select_arrow-width: 0px;
+	--top-forms_clear-width: 0px;
+}
+
+.top-size_s {
+	--top-forms-base-height: var(--top-forms-base-height_s);
+}
+
+.top-size_l {
+	--top-forms-base-height: var(--top-forms-base-height_l);
+}
+
+.top-size_xl {
+	--top-forms-base-height: var(--top-forms-base-height_xl);
+}
+
+/* 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));
+	padding-left: calc(max(var(--top-forms-padding), var(--top-icon-both-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/layout.css

@@ -0,0 +1,40 @@
+:root {
+    --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;
+}

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

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

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

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

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

@@ -0,0 +1,81 @@
+/* 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-loading {
+
+}
+
+/* disabled */
+.top-disabled {
+	pointer-events: none;
+	user-select: none;
+}
+
+:disabled:not(option):not(optgroup):not(.top-forms-option),
+:disabled ~ .top-formsCaption,
+.top-disabled[data-top-icon]:before,
+.top-disabled[data-top-icon2]:after {
+	opacity: 0.5;
+	filter: grayscale(100%);
+}
+
+.top-error,
+.top-error::placeholder,
+.top-error:before {
+	--top-forms-border-color: var(--color-negative);
+
+	border-color: var(--color-negative);
+}
+
+.top-error {
+	--top-icon-color: var(--color-negative);
+
+	color: var(--color-negative);
+}
+
+.top-error ~ .top-formsCaption {
+	color: var(--color-negative);
+}
+
+.top-warning {
+	--top-icon-color: var(--color-orange-500);
+
+	color: var(--color-orange-500);
+}
+
+input.top-error,
+textarea.top-error,
+select.top-error,
+.top-editArea_form.top-error {
+	animation: top-error 0.8s;
+}
+
+@keyframes top-error {
+	0% {
+		outline-offset: 10px;
+		outline: 3px solid transparent;
+	}
+	50% {
+		outline: 3px solid var(--color-red-100);
+		outline-offset: 2px;
+	}
+	100% {
+		outline: 3px solid transparent;
+		outline-offset: 2px;
+	}
+}

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/select.css

@@ -0,0 +1,16 @@
+/* TODO: перенести в компонент */
+.top-select_arrow {
+	--top-select_arrow-color: var(--color-gray-600);
+	--top-select_arrow-size: 12px;
+	--top-select_arrow-width: 24px;
+
+	background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.293 0.29269L8 6.5857L1.70704 0.29269C1.31679 -0.0975633 0.682937 -0.0975633 0.292687 0.29269C-0.0975624 0.682943 -0.0975624 1.31656 0.292687 1.70682L7.29294 8.70713C7.68343 9.09762 8.31657 9.09762 8.70706 8.70713L15.7073 1.70682C16.0976 1.31656 16.0976 0.682943 15.7073 0.29269C15.3171 -0.0975633 14.6832 -0.0975633 14.293 0.29269Z' fill='%23808A99'/%3E%3C/svg%3E");
+	background-size: 14px;
+	background-position: calc(100% - var(--top-forms-padding)) 50%;
+	background-repeat: no-repeat;
+	padding-right: 32px;
+}
+
+.top-select_arrow ~ .top-cleaner {
+	--top-select_arrow-width: 24px;
+}