urfu-ui-kit-vanilla 1.0.46 → 1.0.48

package/package.json

@@ -3,7 +3,7 @@
   "description": "UrFU UI-Kit for Vanilla Web",
   "license": "UNLICENSED",
   "private": false,
-  "version": "1.0.46",
+  "version": "1.0.48",
   "type": "module",
   "scripts": {
     "start": "vite",
@@ -17,8 +17,7 @@
     "vite": "^4.2.0"
   },
   "dependencies": {
-    "air-datepicker": "^3.4.0",
-    "chart.js": "^4.4.0"
+    "air-datepicker": "^3.4.0"
   },
   "files": [
     "src/main.css",

package/src/main.css

@@ -73,13 +73,6 @@ button {
   scrollbar-width: thin;
   /*Толщина скролла thin, auto*/
 }
-.flex-container__2 {
-  display: flex;
-  column-gap: 15px;
-}
-.flex-container__2 > .flex-item {
-  flex: 0 0 50%;
-}
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
@@ -467,7 +460,7 @@ button {
 .u-selectbox.u-selectbox-disabled .u-selectbox-select-icon-cross {
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%23A7A7A7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%23A7A7A7'/%3E%3C/svg%3E ");
 }
-.u-selectbox.u-selectbox-disabled .u-selectbox-select-open ~ .u-selectbox-options {
+.u-selectbox.u-selectbox-disabled .u-selectbox-select-open ~ .u-selectbox-options-wrapper {
   display: none;
 }
 .u-selectbox-select {
@@ -583,7 +576,7 @@ button {
 .u-selectbox-select-open .u-selectbox-select-icon {
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7071 10.3819C11.3166 10.7724 10.6834 10.7724 10.2929 10.3819L5.99999 6.08902L1.70711 10.3819C1.31658 10.7724 0.683418 10.7724 0.292894 10.3819C-0.0976305 9.99139 -0.0976315 9.35822 0.292892 8.9677L5.29288 3.9677C5.48042 3.78016 5.73477 3.67481 5.99999 3.6748C6.26521 3.6748 6.51956 3.78016 6.7071 3.9677L11.7071 8.9677C12.0976 9.35822 12.0976 9.99139 11.7071 10.3819Z' fill='%231E4391'/%3E%3C/svg%3E ");
 }
-.u-selectbox-select-open + .u-selectbox-options {
+.u-selectbox-select-open + .u-selectbox-options-wrapper {
   display: block;
 }
 .u-selectbox-select-icon-arrow {
@@ -623,16 +616,26 @@ button {
   text-overflow: ellipsis;
 }
 .u-selectbox-options {
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+  padding-right: 2px;
+  overflow-y: auto;
+  max-height: 195px;
+  background-color: #FFFFFF;
+  position: relative;
+}
+.u-selectbox-options-wrapper {
+  padding-right: 2px;
   display: none;
+  background-color: #FFFFFF;
   position: absolute;
-  width: 100%;
   z-index: 100;
-  border: 1px solid #748AB9;
   border-radius: 10px;
+  border: 1px solid #748AB9;
   margin-top: 2px;
-  max-height: 195px;
-  background-color: #FFFFFF;
-  overflow-y: auto;
+  width: 100%;
 }
 .u-selectbox-option {
   cursor: pointer;
@@ -645,14 +648,8 @@ button {
   font-size: 14px;
   line-height: 20px;
 }
-.u-selectbox-option:first-child {
-  border-top-right-radius: 10px;
-  border-top-left-radius: 10px;
-}
-.u-selectbox-option:last-child {
+.u-selectbox-option:last-child:hover {
   border-bottom: none;
-  border-bottom-right-radius: 10px;
-  border-bottom-left-radius: 10px;
 }
 .u-selectbox-option:hover {
   background-color: #E7F2FF;
@@ -660,13 +657,13 @@ button {
 .u-multiselectbox {
   position: relative;
 }
-.u-multiselectbox:hover .u-multiselectbox-select {
+.u-multiselectbox:hover .u-multiselectbox-select-wrapper {
   border: 1px solid #748AB9;
 }
 .u-multiselectbox.u-multiselectbox-disabled * {
   cursor: not-allowed;
 }
-.u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select {
+.u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select-wrapper {
   border: none;
   background-color: #F6F6F6;
 }
@@ -676,12 +673,21 @@ button {
 .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select-icon-cross {
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%23A7A7A7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%23A7A7A7'/%3E%3C/svg%3E ");
 }
-.u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select-open ~ .u-multiselectbox-options {
+.u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select-open ~ .u-multiselectbox-options-wrapper {
   display: none;
 }
 .u-multiselectbox-select {
   max-height: 132px;
   overflow: auto;
+  line-height: 30px;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 8px 75px 7px 16px;
+  grid-row-gap: 8px;
+  grid-column-gap: 4px;
+}
+.u-multiselectbox-select-wrapper {
   height: 48px;
   padding: 14px 16px;
   border-radius: 10px;
@@ -695,57 +701,50 @@ button {
   transition-duration: 0.15s;
   transition-timing-function: ease-in-out;
   border: 1px solid #D3D3D3;
-  line-height: 30px;
-  position: relative;
-  padding: 8px 16px 7px 16px;
-  display: flex;
-  flex-wrap: wrap;
   min-height: 48px;
   height: 100%;
-  grid-row-gap: 8px;
-  grid-column-gap: 4px;
-  padding-right: 75px;
+  padding: 0 2px 0 0;
   z-index: 100 !important;
 }
-.u-multiselectbox-select:hover,
-.u-multiselectbox-select.active {
+.u-multiselectbox-select-wrapper:hover,
+.u-multiselectbox-select-wrapper.active {
   border: 1px solid #748AB9;
 }
-.u-multiselectbox-select:focus {
+.u-multiselectbox-select-wrapper:focus {
   outline: 0;
   border: 1px solid #748AB9;
 }
-.u-multiselectbox-select:disabled,
-.u-multiselectbox-select.disabled {
+.u-multiselectbox-select-wrapper:disabled,
+.u-multiselectbox-select-wrapper.disabled {
   cursor: not-allowed;
   border: none;
   background-color: #F6F6F6;
 }
-.u-multiselectbox-select::placeholder {
+.u-multiselectbox-select-wrapper::placeholder {
   /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: #A7A7A7;
   opacity: 1;
   /* Firefox */
 }
-.u-multiselectbox-select:-ms-input-placeholder {
+.u-multiselectbox-select-wrapper:-ms-input-placeholder {
   /* Internet Explorer 10-11 */
   color: #A7A7A7;
 }
-.u-multiselectbox-select::placeholder {
+.u-multiselectbox-select-wrapper::placeholder {
   color: #A7A7A7;
 }
-.u-multiselectbox-select[type="number"] {
+.u-multiselectbox-select-wrapper[type="number"] {
   display: block;
   box-sizing: border-box;
   -moz-appearance: textfield;
   -webkit-appearance: textfield;
   appearance: textfield;
 }
-.u-multiselectbox-select[type="number"]::-webkit-outer-spin-button,
-.u-multiselectbox-select[type="number"]::-webkit-inner-spin-button {
+.u-multiselectbox-select-wrapper[type="number"]::-webkit-outer-spin-button,
+.u-multiselectbox-select-wrapper[type="number"]::-webkit-inner-spin-button {
   display: none;
 }
-.u-multiselectbox-select[type="search"]::-webkit-search-cancel-button {
+.u-multiselectbox-select-wrapper[type="search"]::-webkit-search-cancel-button {
   transition-property: color, background-color, border-color, background-image;
   transition-duration: 0.15s;
   transition-timing-function: ease-in-out;
@@ -757,10 +756,10 @@ button {
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%23A7A7A7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%23A7A7A7'/%3E%3C/svg%3E ");
   background-repeat: no-repeat;
 }
-.u-multiselectbox-select[type="search"]::-webkit-search-cancel-button:hover {
+.u-multiselectbox-select-wrapper[type="search"]::-webkit-search-cancel-button:hover {
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%231E4391'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%231E4391'/%3E%3C/svg%3E ");
 }
-.u-multiselectbox-select-required {
+.u-multiselectbox-select-wrapper-required {
   height: 48px;
   padding: 14px 16px;
   border-radius: 10px;
@@ -775,25 +774,25 @@ button {
   transition-timing-function: ease-in-out;
   border: 1px solid #EF302B;
 }
-.u-multiselectbox-select-required:hover,
-.u-multiselectbox-select-required.active {
+.u-multiselectbox-select-wrapper-required:hover,
+.u-multiselectbox-select-wrapper-required.active {
   border: 1px solid #748AB9;
 }
-.u-multiselectbox-select-required:focus {
+.u-multiselectbox-select-wrapper-required:focus {
   outline: 0;
   border: 1px solid #748AB9;
 }
-.u-multiselectbox-select-required::placeholder {
+.u-multiselectbox-select-wrapper-required::placeholder {
   /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: #A7A7A7;
   opacity: 1;
   /* Firefox */
 }
-.u-multiselectbox-select-required:-ms-input-placeholder {
+.u-multiselectbox-select-wrapper-required:-ms-input-placeholder {
   /* Internet Explorer 10-11 */
   color: #A7A7A7;
 }
-.u-multiselectbox-select-required::-ms-input-placeholder {
+.u-multiselectbox-select-wrapper-required::-ms-input-placeholder {
   /* Microsoft Edge */
   color: #A7A7A7;
 }
@@ -830,15 +829,15 @@ button {
   background-repeat: no-repeat;
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L10.5833 11.5M11 1.5L1 11.5' stroke='%23748AB9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
 }
-.u-multiselectbox-select-open {
-  border: 1px solid #748AB9;
-}
 .u-multiselectbox-select-open ~ .u-multiselectbox-select-icon-arrow {
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7071 10.3819C11.3166 10.7724 10.6834 10.7724 10.2929 10.3819L5.99999 6.08902L1.70711 10.3819C1.31658 10.7724 0.683418 10.7724 0.292894 10.3819C-0.0976305 9.99139 -0.0976315 9.35822 0.292892 8.9677L5.29288 3.9677C5.48042 3.78016 5.73477 3.67481 5.99999 3.6748C6.26521 3.6748 6.51956 3.78016 6.7071 3.9677L11.7071 8.9677C12.0976 9.35822 12.0976 9.99139 11.7071 10.3819Z' fill='%231E4391'/%3E%3C/svg%3E ");
 }
-.u-multiselectbox-select-open ~ .u-multiselectbox-options {
+.u-multiselectbox-select-open ~ .u-multiselectbox-options-wrapper {
   display: block;
 }
+.u-multiselectbox-select-open.u-multiselectbox-select-wrapper {
+  border: 1px solid #748AB9;
+}
 .u-multiselectbox-select-icon-arrow {
   cursor: pointer;
   position: absolute;
@@ -848,7 +847,7 @@ button {
   background-repeat: no-repeat;
   width: 12px;
   height: 12px;
-  right: 20px;
+  right: 22px;
   top: 18px;
 }
 .u-multiselectbox-select-icon-cross {
@@ -860,7 +859,7 @@ button {
   background-repeat: no-repeat;
   width: 12px;
   height: 12px;
-  right: 44px;
+  right: 46px;
   top: 19px;
   transition-property: color, background-color, border-color, background-image;
   transition-duration: 0.15s;
@@ -878,15 +877,23 @@ button {
 }
 .u-multiselectbox-options {
   overflow-y: auto;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+  padding-right: 2px;
   max-height: 195px;
-  width: 100%;
-  border-radius: 10px;
-  z-index: 100;
+}
+.u-multiselectbox-options-wrapper {
+  padding-right: 2px;
   display: none;
+  background-color: #FFFFFF;
   position: absolute;
+  z-index: 100;
+  border-radius: 10px;
   border: 1px solid #748AB9;
   margin-top: 2px;
-  background-color: #FFFFFF;
+  width: 100%;
 }
 .u-multiselectbox-option {
   background-color: #FFFFFF;
@@ -928,12 +935,8 @@ button {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='1.5' fill='white' stroke='%23D3D3D3'/%3E%3C/svg%3E ");
   margin-right: 16px;
 }
-.u-multiselectbox-option:first-child {
-  border-top-left-radius: 10px;
-}
 .u-multiselectbox-option:last-child {
   border-bottom: none;
-  border-bottom-left-radius: 10px;
 }
 .u-multiselectbox-option:hover {
   background-color: #E7F2FF;
@@ -957,7 +960,7 @@ button {
 .u-multiselectbox-simple.u-multiselectbox-simple-disabled .u-multiselectbox-simple-select-icon-cross {
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%23A7A7A7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%23A7A7A7'/%3E%3C/svg%3E ");
 }
-.u-multiselectbox-simple.u-multiselectbox-simple-disabled .u-multiselectbox-simple-select-open ~ .u-multiselectbox-simple-options {
+.u-multiselectbox-simple.u-multiselectbox-simple-disabled .u-multiselectbox-simple-select-open ~ .u-multiselectbox-simple-options-wrapper {
   display: none;
 }
 .u-multiselectbox-simple-select {
@@ -1087,7 +1090,7 @@ button {
 .u-multiselectbox-simple-select-open ~ .u-multiselectbox-simple-select-icon-arrow {
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7071 10.3819C11.3166 10.7724 10.6834 10.7724 10.2929 10.3819L5.99999 6.08902L1.70711 10.3819C1.31658 10.7724 0.683418 10.7724 0.292894 10.3819C-0.0976305 9.99139 -0.0976315 9.35822 0.292892 8.9677L5.29288 3.9677C5.48042 3.78016 5.73477 3.67481 5.99999 3.6748C6.26521 3.6748 6.51956 3.78016 6.7071 3.9677L11.7071 8.9677C12.0976 9.35822 12.0976 9.99139 11.7071 10.3819Z' fill='%231E4391'/%3E%3C/svg%3E ");
 }
-.u-multiselectbox-simple-select-open ~ .u-multiselectbox-simple-options {
+.u-multiselectbox-simple-select-open ~ .u-multiselectbox-simple-options-wrapper {
   display: block;
 }
 .u-multiselectbox-simple-select-icon-arrow {
@@ -1123,14 +1126,22 @@ button {
 .u-multiselectbox-simple-options {
   overflow-y: auto;
   max-height: 195px;
-  width: 100%;
-  border-radius: 10px;
-  z-index: 100;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+  padding-right: 2px;
+}
+.u-multiselectbox-simple-options-wrapper {
+  padding-right: 2px;
   display: none;
+  background-color: #FFFFFF;
   position: absolute;
+  z-index: 100;
+  border-radius: 10px;
   border: 1px solid #748AB9;
   margin-top: 2px;
-  background-color: #FFFFFF;
+  width: 100%;
 }
 .u-multiselectbox-simple-option {
   background-color: #FFFFFF;