urfu-ui-kit-vanilla 1.0.31 → 1.0.32

package/package.json

@@ -3,7 +3,7 @@
   "description": "UrFU UI-Kit for Vanilla Web",
   "license": "UNLICENSED",
   "private": false,
-  "version": "1.0.31",
+  "version": "1.0.32",
   "type": "module",
   "scripts": {
     "start": "vite serve playground",

package/playground/index.html

@@ -590,14 +590,25 @@
         <button class="u-tab-line-secondary">Tab</button>
       </section>
       <h2>Statuses</h2>
-      <section class="flex">
-        <span class="u-status-warning">status</span>
-        <span class="u-status-info">status</span>
-        <span class="u-status-neutral">status</span>
-        <span class="u-status-success">status</span>
-        <span class="u-status-danger">status</span>
-        <span class="u-status-intermediate">status</span>
-        <span class="u-status-prepared">status</span>
+      <section class="flex-container__2">
+        <div class="flex-item">
+          <span class="u-status u-status-warning">status</span>
+          <span class="u-status u-status-info">status</span>
+          <span class="u-status u-status-neutral">status</span>
+          <span class="u-status u-status-success">status</span>
+          <span class="u-status u-status-danger">status</span>
+          <span class="u-status u-status-intermediate">status</span>
+          <span class="u-status u-status-prepared">status</span>
+        </div>
+        <div class="flex-item">
+          <span class="u-status u-status-large u-status-warning">status</span>
+          <span class="u-status u-status-large u-status-info">status</span>
+          <span class="u-status u-status-large u-status-neutral">status</span>
+          <span class="u-status u-status-large u-status-success">status</span>
+          <span class="u-status u-status-large u-status-danger">status</span>
+          <span class="u-status u-status-large u-status-intermediate">status</span>
+          <span class="u-status u-status-large u-status-prepared">status</span>
+        </div>
       </section>
       <h2>Inputs</h2>
       <section>

package/src/main.css

@@ -79,8 +79,15 @@ button {
   scrollbar-width: thin;
   /*Толщина скролла thin, auto*/
 }
+.flex-container__2 {
+  display: flex;
+  column-gap: 15px;
+}
+.flex-container__2 > .flex-item {
+  flex: 0 0 50%;
+}
 .u-button {
-  height: 44px;
+  height: 48px;
   padding: 0 50px;
   border-radius: 10px;
   border: none;
@@ -179,7 +186,7 @@ button {
   color: #545454;
 }
 .u-button-cross {
-  height: 44px;
+  height: 48px;
   padding: 0 50px;
   border-radius: 10px;
   border: none;
@@ -205,6 +212,9 @@ button {
 .u-button-cross:hover {
   background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='26' cy='26' r='26' transform='rotate(90 26 26)' fill='white'/%3E%3Cpath d='M20 20L31.5 32M32 20L20 32' stroke='%231E4391' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
 }
+.u-button-medium {
+  height: 44px;
+}
 .u-button-small {
   height: 38px;
   padding: 0 24px;
@@ -263,7 +273,7 @@ button {
   color: #D995A2;
 }
 .u-input {
-  height: 44px;
+  height: 48px;
   padding: 14px 16px;
   border-radius: 10px;
   font-weight: 400;
@@ -332,7 +342,7 @@ 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='%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-input-required {
-  height: 44px;
+  height: 48px;
   padding: 14px 16px;
   border-radius: 10px;
   font-weight: 400;
@@ -421,7 +431,7 @@ button {
 }
 .u-selectbox-select {
   cursor: pointer;
-  height: 44px;
+  height: 48px;
   padding: 14px 16px;
   border-radius: 10px;
   font-weight: 400;
@@ -491,7 +501,7 @@ 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='%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-selectbox-select-required {
-  height: 44px;
+  height: 48px;
   padding: 14px 16px;
   border-radius: 10px;
   font-weight: 400;
@@ -611,7 +621,7 @@ button {
 .u-multiselectbox-select {
   max-height: 132px;
   overflow: auto;
-  height: 44px;
+  height: 48px;
   padding: 14px 16px;
   border-radius: 10px;
   font-weight: 400;
@@ -690,7 +700,7 @@ 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='%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 {
-  height: 44px;
+  height: 48px;
   padding: 14px 16px;
   border-radius: 10px;
   font-weight: 400;
@@ -939,6 +949,9 @@ button {
 .u-file:hover {
   border: 1px solid #748AB9;
 }
+.u-file-disabled:hover {
+  border: none;
+}
 .u-file-icon {
   cursor: pointer;
   margin: auto;
@@ -971,6 +984,7 @@ button {
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
+  margin: 0;
   color: #748AB9;
   text-align: center;
   margin-bottom: 7px;
@@ -981,6 +995,7 @@ button {
   font-weight: 400;
   font-size: 16px;
   line-height: 22.4px;
+  margin: 0;
   color: #748AB9;
   text-align: center;
 }
@@ -988,6 +1003,7 @@ button {
   font-weight: 400;
   font-size: 12px;
   line-height: 16.8px;
+  margin: 0;
   color: #748AB9;
   text-align: center;
 }
@@ -1075,7 +1091,7 @@ button {
   color: #545454;
 }
 .u-expand-input {
-  height: 44px;
+  height: 48px;
   padding: 14px 16px;
   border-radius: 10px;
   font-weight: 400;
@@ -1129,7 +1145,7 @@ button {
   /* For Firefox */
 }
 .u-expand-input-required {
-  height: 44px;
+  height: 48px;
   padding: 14px 16px;
   border-radius: 10px;
   font-weight: 400;
@@ -1183,7 +1199,7 @@ button {
   /* For Firefox */
 }
 .u-calendar {
-  height: 44px;
+  height: 48px;
   padding: 14px 16px;
   border-radius: 10px;
   font-weight: 400;
@@ -1442,7 +1458,7 @@ button {
 }
 .u-tab {
   cursor: pointer;
-  height: 44px;
+  height: 48px;
   border-radius: 24px;
   padding: 0 18px;
   font-size: 16px;
@@ -1706,102 +1722,53 @@ button {
   border: none;
   outline: none;
 }
-.u-status-warning {
+.u-status {
   display: flex;
   justify-content: center;
   align-items: center;
   width: max-content;
-  font-size: 12px;
-  line-height: 140%;
+  white-space: nowrap;
+  font-size: 10px;
+  line-height: 1.6;
   font-weight: 400;
-  height: 27px;
-  padding: 0 12px;
+  height: 20px;
+  padding: 0 8px;
   border-radius: 8px;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+.u-status.u-status-large {
+  line-height: 1.4;
+  font-size: 12px;
+  padding: 0 12px;
+  height: 27px;
+  min-width: 45px;
+}
+.u-status-warning {
   background-color: #fcf4e6;
   color: #e98446;
 }
 .u-status-info {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: max-content;
-  font-size: 12px;
-  line-height: 140%;
-  font-weight: 400;
-  height: 27px;
-  padding: 0 12px;
-  border-radius: 8px;
   background-color: #e7f2ff;
   color: #1e4391;
 }
 .u-status-neutral {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: max-content;
-  font-size: 12px;
-  line-height: 140%;
-  font-weight: 400;
-  height: 27px;
-  padding: 0 12px;
-  border-radius: 8px;
   background-color: #eee;
   color: #222;
 }
 .u-status-success {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: max-content;
-  font-size: 12px;
-  line-height: 140%;
-  font-weight: 400;
-  height: 27px;
-  padding: 0 12px;
-  border-radius: 8px;
   background-color: #edf7eb;
   color: #147246;
 }
 .u-status-danger {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: max-content;
-  font-size: 12px;
-  line-height: 140%;
-  font-weight: 400;
-  height: 27px;
-  padding: 0 12px;
-  border-radius: 8px;
   background-color: #fdeaea;
   color: #ef302b;
 }
 .u-status-intermediate {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: max-content;
-  font-size: 12px;
-  line-height: 140%;
-  font-weight: 400;
-  height: 27px;
-  padding: 0 12px;
-  border-radius: 8px;
-  background-color: #FCF4FF;
-  color: #742C8E;
+  background-color: #fcf4ff;
+  color: #742c8e;
 }
 .u-status-prepared {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: max-content;
-  font-size: 12px;
-  line-height: 140%;
-  font-weight: 400;
-  height: 27px;
-  padding: 0 12px;
-  border-radius: 8px;
-  background-color: #E8FFFF;
+  background-color: #e8ffff;
   color: #007171;
 }
 .u-message {
@@ -1983,8 +1950,8 @@ button {
   background-repeat: no-repeat;
   background-position: top calc(50% - 1px) left 16px;
   border: 1px solid #748ab9;
-  border-color: rgba(255, 243, 205, 0.85);
-  background-color: #EEB18C;
+  border-color: #EEB18C;
+  background-color: #FCF4E6;
   background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23E98446' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M9.24233 13C9.03869 13 8.87361 12.8349 8.87361 12.6313C8.87361 12.229 8.92092 11.8715 9.01552 11.5587C9.11013 11.2458 9.25795 10.9665 9.45898 10.7207C9.67184 10.4749 9.84922 10.2905 9.99113 10.1676C10.1449 10.0335 10.3696 9.86034 10.6652 9.64805C10.9017 9.48045 11.0791 9.34637 11.1973 9.24581C11.3274 9.13408 11.4693 8.99441 11.6231 8.82682C11.7886 8.64804 11.9069 8.4581 11.9778 8.25698C12.0488 8.05587 12.0843 7.82681 12.0843 7.56983C12.0843 7.20112 11.9897 6.8771 11.8004 6.59777C11.6231 6.30727 11.3747 6.08939 11.0554 5.94413C10.748 5.78771 10.3991 5.7095 10.0089 5.7095C9.42942 5.7095 8.92683 5.87709 8.50111 6.21229C8.33022 6.34607 8.19259 6.4989 8.08823 6.67078C7.82922 7.09735 7.45131 7.51955 6.95227 7.51955C6.4297 7.51955 5.99284 7.08288 6.12856 6.57825C6.30589 5.91891 6.6651 5.37233 7.20621 4.93855C7.99852 4.31285 8.93275 4 10.0089 4C11.1323 4 12.0783 4.32402 12.847 4.97207C13.6157 5.62012 14 6.48603 14 7.56983C14 7.97207 13.9527 8.32961 13.8581 8.64246C13.7635 8.95531 13.6157 9.24023 13.4146 9.49721C13.2136 9.74302 13.0362 9.93296 12.8825 10.067C12.7288 10.2011 12.51 10.3743 12.2262 10.5866C11.9778 10.7765 11.7945 10.9218 11.6763 11.0223C11.5698 11.1117 11.4339 11.2458 11.2683 11.4246C11.1146 11.6034 11.0022 11.7933 10.9313 11.9944C10.8721 12.1844 10.8426 12.3966 10.8426 12.6313C10.8426 12.8349 10.6775 13 10.4739 13H9.24233Z' fill='%23E98446'%3E%3C/path%3E%3Ccircle cx='10' cy='15' r='1' fill='%23E98446'%3E%3C/circle%3E%3C/svg%3E");
 }
 .u-notification-warning .u-notification-hide {
@@ -2222,6 +2189,12 @@ button {
 .air-datepicker.-inline- {
   border: 1px solid #748AB9;
 }
+.air-datepicker--pointer::after {
+  content: none;
+}
+.air-datepicker.-active-:not(.-custom-position-) {
+  transform: translate(0, -12px);
+}
 .air-datepicker-nav {
   border: none;
 }
@@ -2433,6 +2406,13 @@ button {
 .air-datepicker-cell.-day-.-other-month-.-weekend-.-selected-.-range-to- {
   background-color: #EF302B;
 }
+.air-datepicker-cell.-day-.-other-month-.-selected- {
+  background-color: #1E4391;
+}
+.air-datepicker-cell.-day-.-other-month-.-selected-.-focus- {
+  background-color: #1E4391;
+  color: white;
+}
 .air-datepicker-cell.-month- {
   padding: 6px 12px;
   margin: auto;
@@ -2785,19 +2765,19 @@ button {
 .bg-blue {
   background-color: #1E4391;
 }
+.bg-blue-dark {
+  background-color: #0F2B5E;
+}
+.bg-blue-light {
+  background-color: #9FAECD;
+}
 .bg-red {
   background-color: #EF302B;
 }
-.bg-dark-blue {
-  background-color: #0F2B5E;
-}
-.bg-dark-red {
+.bg-red-dark {
   background-color: #C0231F;
 }
-.bg-light-blue {
-  background-color: #9FAECD;
-}
-.bg-light-red {
+.bg-red-light {
   background-color: #F58380;
 }
 .clr-transparent {
@@ -2958,3 +2938,10 @@ button {
   scrollbar-width: thin;
   /*Толщина скролла thin, auto*/
 }
+.flex-container__2 {
+  display: flex;
+  column-gap: 15px;
+}
+.flex-container__2 > .flex-item {
+  flex: 0 0 50%;
+}

package/src/main.less

@@ -80,6 +80,15 @@ button {
   scrollbar-width: thin; /*Толщина скролла thin, auto*/
 }
 
+.flex-container__2 {
+  display: flex;
+  column-gap: 15px;
+}
+
+.flex-container__2 > .flex-item {
+  flex: 0 0 50%;
+}
+
 
 // страница показа
 

package/src/styles/components/button.less

@@ -123,6 +123,9 @@
             background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='26' cy='26' r='26' transform='rotate(90 26 26)' fill='white'/%3E%3Cpath d='M20 20L31.5 32M32 20L20 32' stroke='%231E4391' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
         }
     }
+    &-medium {
+        height:@height-medium;
+    }
     &-small {
         height: @height-small;
         padding: 0 24px;

package/src/styles/components/notification.less

@@ -56,8 +56,8 @@
     }
     &-warning {
         .notification;
-        border-color: rgba(255, 243, 205, 0.85);
-        background-color: #EEB18C;
+        border-color: #EEB18C;
+        background-color: #FCF4E6;
         background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23E98446' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M9.24233 13C9.03869 13 8.87361 12.8349 8.87361 12.6313C8.87361 12.229 8.92092 11.8715 9.01552 11.5587C9.11013 11.2458 9.25795 10.9665 9.45898 10.7207C9.67184 10.4749 9.84922 10.2905 9.99113 10.1676C10.1449 10.0335 10.3696 9.86034 10.6652 9.64805C10.9017 9.48045 11.0791 9.34637 11.1973 9.24581C11.3274 9.13408 11.4693 8.99441 11.6231 8.82682C11.7886 8.64804 11.9069 8.4581 11.9778 8.25698C12.0488 8.05587 12.0843 7.82681 12.0843 7.56983C12.0843 7.20112 11.9897 6.8771 11.8004 6.59777C11.6231 6.30727 11.3747 6.08939 11.0554 5.94413C10.748 5.78771 10.3991 5.7095 10.0089 5.7095C9.42942 5.7095 8.92683 5.87709 8.50111 6.21229C8.33022 6.34607 8.19259 6.4989 8.08823 6.67078C7.82922 7.09735 7.45131 7.51955 6.95227 7.51955C6.4297 7.51955 5.99284 7.08288 6.12856 6.57825C6.30589 5.91891 6.6651 5.37233 7.20621 4.93855C7.99852 4.31285 8.93275 4 10.0089 4C11.1323 4 12.0783 4.32402 12.847 4.97207C13.6157 5.62012 14 6.48603 14 7.56983C14 7.97207 13.9527 8.32961 13.8581 8.64246C13.7635 8.95531 13.6157 9.24023 13.4146 9.49721C13.2136 9.74302 13.0362 9.93296 12.8825 10.067C12.7288 10.2011 12.51 10.3743 12.2262 10.5866C11.9778 10.7765 11.7945 10.9218 11.6763 11.0223C11.5698 11.1117 11.4339 11.2458 11.2683 11.4246C11.1146 11.6034 11.0022 11.7933 10.9313 11.9944C10.8721 12.1844 10.8426 12.3966 10.8426 12.6313C10.8426 12.8349 10.6775 13 10.4739 13H9.24233Z' fill='%23E98446'%3E%3C/path%3E%3Ccircle cx='10' cy='15' r='1' fill='%23E98446'%3E%3C/circle%3E%3C/svg%3E");
         .u-notification-hide {
             .notification-hide;

package/src/styles/components/status.less

@@ -1,56 +1,61 @@
 @import "../../main.less";
 
-.status() {
+
+.u-status {
     display: flex;
     justify-content: center;
     align-items: center;
     width: max-content;
-    font-size: 12px;
-    line-height: 140%;
+    white-space: nowrap;
+    font-size: 10px;
+    line-height: 1.6;
     font-weight: 400;
-    height: 27px;
-    padding: 0 12px;
+    height: 20px;
+    padding: 0 8px;
     border-radius: 8px;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+    &&-large {
+        line-height: 1.4;
+        font-size: 12px;
+        padding: 0 12px;
+        height: 27px;
+        min-width: 45px;
+    }
+
+    &-warning {
+        background-color: #fcf4e6;
+        color: #e98446;
+    }
+
+    &-info {
+        background-color: #e7f2ff;
+        color: #1e4391;
+    }
+
+    &-neutral {
+        background-color: #eee;
+        color: #222;
+    }
+
+    &-success {
+        background-color: #edf7eb;
+        color: #147246;
+    }
+
+    &-danger {
+        background-color: #fdeaea;
+        color: #ef302b;
+    }
+
+    &-intermediate {
+        background-color: #fcf4ff;
+        color: #742c8e;
+    }
+
+    &-prepared {
+        background-color: #e8ffff;
+        color: #007171;
+    }
 }
-
-.u-status-warning {
-    .status;
-    background-color: #fcf4e6;
-    color: #e98446;
-}
-
-.u-status-info {
-    .status;
-    background-color: #e7f2ff;
-    color: #1e4391;
-}
-
-.u-status-neutral {
-    .status;
-    background-color: #eee;
-    color: #222;
-}
-
-.u-status-success {
-    .status;
-    background-color: #edf7eb;
-    color: #147246;
-}
-
-.u-status-danger {
-    .status;
-    background-color: #fdeaea;
-    color: #ef302b;
-}
-
-.u-status-intermediate {
-    .status;
-    background-color: #FCF4FF;
-    color: #742C8E;
-}
-
-.u-status-prepared {
-    .status;
-    background-color: #E8FFFF;
-    color: #007171;
-}

package/src/styles/const/base.less

@@ -1,5 +1,6 @@
-@height-main: 44px;
+@height-main: 48px;
 @height-secondary: 54px;
+@height-medium: 44px;
 @height-small: 38px;
 @radius: 10px;
 .transition() {