@topvisor/ui 0.0.9 → 0.0.11

package/core.css

@@ -201,178 +201,363 @@
 	--color-top-50: #A6E0A3;
 	--color-top-100: #C7D7D7;
 	--color-top-10000: #FCC94A;
-}/* элемент в виде ссылки */
-.g-link{ cursor: pointer; color: var(--color-text-link); }
-.g-link:hover{ text-decoration: underline; }
+}.top-comment {
+    color: var(--color-gray-350);
+    font-size: 12px;
+}
+
+.top-title {
+    margin: 1em 0;
+    font-weight: 600;
+}:root {
+	--top-font-size: 14px;
+	
+	--top-forms-radius: 8px;
+	--top-forms-border-width: 1px;
+	--top-style_outline-color: transparent;
 
-/* блок с информацией */
-.g-comment{ color: var(--color-gray-350); font-size: 12px; }
+	--top-forms-base-height: 32px;
+	/* базовая высота поля, должна быть одинаковой у всех форм в одном контексте */
+	--top-forms-base-height_l: 36px;
+	--top-forms-base-height_xl: 40px;
 
-.g-title{ margin: 1em 0; font-weight: 600; }:root{
-	--g-forms-radius: 8px;
-	--g-forms-border-width: 1px;
-	--g-style_outline-color: transparent;
+	--top-forms-padding: 8px;
+	--top-forms-padding_l: 12px;
+	--top-forms-padding_xl: 16px;
 
-	--g-forms-base-height: 32px; /* базовая высота поля, должна быть одинаковой у всех форм в одном контексте */
-	--g-forms-base-height_l: 36px;
-	--g-forms-base-height_xl: 40px;
+	--top-forms-padding_xl: 16px;
 
-	--g-forms-padding: 8px;
-	--g-forms-padding_l: 12px;
-	--g-forms-padding_xl: 16px;
-	
-	/* g-radio */
-	--g-radio-color: var(--color-primary);
-	--g-radio-color-hover: var(--color-primary-2);
+	/* top-radio */
+	--top-radio-color: var(--color-primary);
+	--top-radio-color-hover: var(--color-primary-2);
+}
+
+button,
+input,
+textarea,
+select{
+	border: 1px solid var(--top-forms-border-color);
+	color: var(--top-forms-color);
+	font-size: var(--top-font-size);
+	font-family: inherit;
+}
+
+.top-button,
+.top-input_input,
+.top-checkbox_input,
+.top-radio_input,
+textarea.top-el,
+.top-select_select {
+	display: inline-block;
+	vertical-align: middle;
+	appearance: none;
+	-webkit-appearance: none;
+}
+
+.top-input_input,
+textarea.top-el,
+.top-select_select {
+	border: 1px solid var(--top-forms-border-color);
+	color: var(--top-forms-color);
 }
 
 /* placeholder для textarea */
-[contenteditable][placeholder]:empty:before{
-    content: attr(placeholder);
-    color: var(--color-text-secondary);
-}
-
-[type="text"].g,
-[type="number"].g,
-[type="date"].g,
-[type="email"].g,
-[type="password"].g,
-textarea.g,
-select.g,
-.top-button{
+[contenteditable][placeholder]:empty:before {
+	content: attr(placeholder);
+	color: var(--color-text-secondary);
+}
+
+[type="text"].top-el,
+[type="number"].top-el,
+[type="date"].top-el,
+[type="email"].top-el,
+[type="password"].top-el,
+textarea.top-el,
+select.top-el,
+.top-button {
 	box-sizing: border-box;
-	border-radius: var(--g-forms-radius); border: var(--g-forms-border-width) solid var(--g-forms-border-color); height: var(--g-forms-base-height);
+	border-radius: var(--top-forms-radius);
+	border: var(--top-forms-border-width) solid var(--top-forms-border-color);
+	height: var(--top-forms-base-height);
 	padding: 0;
-	padding-right: calc(var(--g-forms-padding) + var(--g-forms_clear-width) + var(--g_select_arrow-width));
-	padding-left: calc(max(var(--g-forms-padding), var(--g-icon-both-width)));
+	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)));
 
 	transition: border-color 150ms;
 }
 
+[type="text"].top-el,
+[type="number"].top-el,
+[type="date"].top-el,
+[type="email"].top-el,
+[type="password"].top-el,
+[type="checkbox"].top-el,
+[type="radio"].top-el,
+textarea.top-el,
+.top-input,
+select.top-el,
+i.top-el,
+span.top-el {
+	color: var(--top-forms-color);
+	white-space: nowrap;
+	display: inline-flex;
+}
+
+[type="checkbox"][class*="top"],
+[type="radio"][class*="top"] {
+	padding: 8px 0;
+	line-height: 1.3;
+}
+
 .top-button:not(:disabled):focus-visible,
 [type="checkbox"]:focus-visible,
-[type="radio"]:focus-visible{ outline: 2px solid var(--g-radio-color); z-index: 1; position: relative; }
-.top-button:not(:disabled):focus-visible{ outline-offset: 2px; }:root{
-	--g-icon-size: 0px;
-	--g-icon-width: 0px;
+[type="radio"]:focus-visible {
+	outline: 2px solid var(--top-radio-color);
+	outline-offset: 2px;
+	position: relative;
+	z-index: 1;
+}
+
+[type="checkbox"]:before,
+[type="checkbox"]:after,
+[type="radio"]:before,
+[type="radio"]:after,
+.top-select:before {
+	vertical-align: middle;
+	display: inline-block;
+}
 
-	--g-icon2-size: 0px;
-	--g-icon2-width: 0px;
+/* [type="checkbox"].top-el,
+[type="radio"].top-el{
+	background: none; width: auto; height: auto; min-height: var(--top-forms-base-height);
+	text-indent: 0;
+} */
 
-	--g-icon-both-width: 0px;
+/* label checkbox, label radio */
+label.top-checkbox,
+label.top-radio {
+	cursor: pointer;
+	padding: 8px 0;
+	color: var(--top-forms-color);
+	line-height: 1.3;
+	display: inline-flex;
+	align-items: flex-start;
+	gap: 8px;
 }
 
-/* data-g-icon */
-[data-g-icon]{
-	--g-icon-size: 24px;
-	--g-icon-width: calc(var(--g-icon-size) + var(--g-forms-padding));
-	--g-icon-color: inherit;
+label.top-checkbox > [type="checkbox"][class*="top"],
+label.top-radio > [type="radio"][class*="top"] {
+	min-height: unset !important;
+	padding: 0;
+	margin: 0;
 }
-[data-g-icon2]{
-	--g-icon2-size: 24px;
-	--g-icon2-width: calc(var(--g-icon2-size) + 8px);
-	--g-icon2-color: inherit;
+
+.top-checkbox_caption[data-top-icon]:before,
+.top-radio_caption[data-top-icon]:before {
+	height: 16px;
 }
-[data-g-icon=""]{ --g-icon-width: 0px; }
-[data-g-icon2=""]{ --g-icon2-width: 0px; }
 
-[data-g-icon]:before,
-[data-g-icon2]:after{
-	pointer-events: none;
-	content: attr(data-g-icon);
-	border-radius: var(--g-forms-radius);
-	width: var(--g-icon-width);
-	color: var(--g-icon-color); font-family: Topvisor-2; font-size: var(--g-icon-size); font-weight: 400; line-height: 1;
-	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
+/* checkbox, radio */
+[type="checkbox"].top-el,
+[type="radio"].top-el {
+	cursor: pointer;
+	border: none;
+	white-space: normal;
 }
-[data-g-icon2]:after{
-	content: attr(data-g-icon2);
-	width: var(--g-icon2-width);
-	color: var(--g-icon2-color);
-	font-size: var(--g-icon2-size);
+[type="checkbox"].top-el:before,
+[type="radio"].top-el:before {
+	flex-shrink: 0;
+}
+[type="checkbox"][title].top-el:after,
+[type="checkbox"][title].top-checkbox_input-switcher:after,
+[type="radio"][title].top-el:after {
+	content: attr(title);
+	margin-left: 8px;
 }
 
-/* ширина добавляемых элементов */
-[data-g-icon],
-[data-g-icon2]{ --g-icon-both-width: calc(var(--g-icon-width) + var(--g-icon2-width)); }
+[type="checkbox"][data-top-icon]:not(.top-checkbox_input-switcher),
+[type="radio"][data-top-icon]:not(.top-radioGroup_item) {
+	--top-icon-size: 24px;
+}
+[type="checkbox"][data-top-icon]:not(.top-checkbox_input-switcher):before,
+[type="radio"][data-top-icon]:not(.top-radioGroup_item):before {
+	text-indent: calc(18px + 4px);
+}
+[type="checkbox"][data-top-icon].top-el:not(.top-checkbox_input-switcher):after,
+[type="radio"][data-top-icon].top-el:not(.top-radioGroup_item):after {
+	text-indent: var(--top-icon-both-width);
+}
 
 /* убрать ширину добавляемых элементов */
-label.g[data-g-icon],
-label.g[data-g-icon2]{ position: relative; }
-label.g[data-g-icon]:before,
-label.g[data-g-icon2]:after{ position: absolute; z-index: 3; }
-label.g[data-g-icon][data-g-icon2]:after{ left: calc(var(--g-icon-width)); }
-
-[data-g-icon=""]:before{ font-family: Topvisor; }/* оформление строк с сокращением под три точки */
-.g-ellipsis {
+label.top-el[data-top-icon],
+label.top-el[data-top-icon2] {
+	position: relative;
+}
+label.top-el[data-top-icon]:before,
+label.top-el[data-top-icon2]:after {
+	position: absolute;
+	z-index: 3;
+}
+label.top-el[data-top-icon][data-top-icon2]:after {
+	left: calc(var(--top-icon-width));
+}:root {
+    --top-icon-size: 0px;
+    --top-icon-width: 0px;
+
+    --top-icon2-size: 0px;
+    --top-icon2-width: 0px;
+
+    --top-icon-both-width: 0px;
+}
+
+/* data-top-icon */
+[data-top-icon] {
+    --top-icon-size: 24px;
+    --top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));
+    --top-icon-color: inherit;
+}
+[data-top-icon2] {
+    --top-icon2-size: 24px;
+    --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;
+}.top-ellipsis {
 	max-height: 100%;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	line-height: 1.23;
 	flex-grow: 1;
 }
-.g-ellipsis2,
-.g-ellipsis3 {
+.top-ellipsis2,
+.top-ellipsis3 {
 	max-width: fit-content;
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 }
-.g-ellipsis3 {
+.top-ellipsis3 {
 	-webkit-line-clamp: 3;
-}/* g-inited используется для блокировки элементов, js к которым еще не привязан, настраивается в каждом модуле отдельно */
-.g-inited{ }
+}/* top-inited используется для блокировки элементов, js к которым еще не привязан, настраивается в каждом модуле отдельно */
+.top-inited {}
 
-.g-hidden{ display: none !important; }
+.top-hidden {
+	display: none !important;
+}
 
-/* g-unvisible используется для скрытия элементов, без изменения видимости */
-.g-unvisible{ width: 0; height: 0; overflow: hidden; position: absolute; }
+/* top-unvisible используется для скрытия элементов, без изменения видимости */
+.top-unvisible {
+	width: 0;
+	height: 0;
+	overflow: hidden;
+	position: absolute;
+}
 
-.g-loading{ }
+.top-loading {}
+
+.top-disabled {
+	pointer-events: none;
+}
 
-.g-error,
-.g-error::placeholder,
-.g-error:before{
-	--g-forms-border-color: var(--color-negative);
+.top-error,
+.top-error::placeholder,
+.top-error:before {
+	--top-forms-border-color: var(--color-negative);
 
 	border-color: var(--color-negative);
 }
-.g-error{
-	--g-icon-color: var(--color-negative);
+.top-error {
+	--top-icon-color: var(--color-negative);
 
 	color: var(--color-negative);
 }
-.g-error ~ .g-caption{ color: var(--color-negative); }
+.top-error ~ .top-forms-caption {
+	color: var(--color-negative);
+}
 
-.g-warning{
-	--g-icon-color: var(--color-orange-500);
+.top-warning {
+	--top-icon-color: var(--color-orange-500);
 
 	color: var(--color-orange-500);
 }
 
-input.g-error{ animation: g-error 0.3s; }
+input.top-error {
+	animation: top-error 0.3s;
+}
 
-@keyframes g-error{
-	0%{ }
-	30%{ box-shadow: inset var(--color-red-200) 0 0 20px; }
-	100%{ }
+@keyframes top-error {
+	0% {}
+	30% {
+		box-shadow: inset var(--color-red-200) 0 0 20px;
+	}
+	100% {}
 }@media only screen and (min-width: 900px) {
-	.g-only-mobile {
+	.top-only-mobile {
 		display: none !important;
 	}
 }
 @media only screen and (max-width: 900px) {
-	.g-only-pc {
+	.top-only-pc {
 		display: none !important;
 	}
 }
 
-html:not([lang="ru"]) .g-only-ru,
-html:not([lang="en"]) .g-only-en {
+html:not([lang="ru"]) .top-only-ru,
+html:not([lang="en"]) .top-only-en {
 	display: none !important;
 }
 
-html[data-is_admin="0"] .g-only-admin {
+html[data-is_admin="0"] .top-only-admin {
 	display: none !important;
-}
+}/* 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 ~ [data-action="top-input_clear"]{ --top-select_arrow-width: 24px; }

package/dark.css

@@ -88,29 +88,29 @@
 	--color-theme-975: rgba(250, 251, 252, 1);
 	--color-theme-1000: rgba(255, 255, 255, 1);
 
-	/* g-shadow */
-	--g-shadow-s:
+	/* top-shadow */
+	--top-shadow-s:
 		0px 0px 3px rgba(0, 0, 0, 0.07),
 		0px 5px 25px rgba(0, 0, 0, 0.12);
-	--g-shadow:
+	--top-shadow:
 		0px 0px 3px rgba(0, 0, 0, 0.07),
 		0px 5px 25px rgba(0, 0, 0, 0.3);
-	--g-shadow-b:
+	--top-shadow-b:
 		0px 0px 4px rgba(0, 0, 0, 0.08),
 		0px 18px 32px rgba(0, 0, 0, 0.18);
 
-	--g-shadow-darken: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.03);
-	--g-shadow-darken-2: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.07);
-	--g-shadow-darken-3: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.14);
+	--top-shadow-darken: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.03);
+	--top-shadow-darken-2: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.07);
+	--top-shadow-darken-3: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.14);
 }
 
 /* forms */
 :root {
-	--g-forms-color: var(--color-text);
+	--top-forms-color: var(--color-text);
 
-	--g-forms-border-color: var(--color-line-1-opacity);
-	--g-forms-border-color-hover: var(--color-line-2-opacity);
+	--top-forms-border-color: var(--color-line-1-opacity);
+	--top-forms-border-color-hover: var(--color-line-2-opacity);
 
-	--g-forms-background-color: var(--color-bg-3);
-	--g-forms-background-color-hover: var(--color-bg-3);
+	--top-forms-background-color: var(--color-bg-3);
+	--top-forms-background-color-hover: var(--color-bg-3);
 }

package/icomoon/demo-files/Read Me.txt

@@ -0,0 +1,7 @@
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

package/icomoon/demo-files/demo.css

@@ -0,0 +1,161 @@
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: .66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover, a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0, input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input, fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: .25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl, .mal {
+  margin-top: 1.5em;
+}
+.mbl, .mal {
+  margin-bottom: 1.5em;
+}
+.mal, .mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: .25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs, .pvs {
+  padding-bottom: .25em;
+}
+.pvs, .pts {
+  padding-top: .25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: .25em .5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 32px;
+}
+.fs2 {
+  font-size: 14px;
+}
+.fs3 {
+  font-size: 14px;
+}
+.fs4 {
+  font-size: 8px;
+}
+