urfu-ui-kit-vanilla 1.0.66 → 1.0.68

package/README.md

@@ -8,4 +8,8 @@
 
 4. Для публикации актуальных версий в npm нужно иметь права соавтора на пакет в npmjs.com. Публикация актуальной версии производится посредством выполнения команды npm publish в терминале. Для успешной отправки изменений должна быть указана актуальная версия проекта в поле "version" файла package.json. Файлы для публикации определены в поле "files" файла package.json.
 
-5. Для публикации актуальной версии на сервер (ссылочный метод использования библиотеки) данный проект собирается и содержимое папки dist помещается в папку с актуальным номером версии (v[номер], пример: v1 - первая версия библиотеки) папки public проекта u-library-review. Не забывайте обновлять актуальный номер версии в документации (https://uikit.my1.urfu.ru/). Файлы для сборки определены в поле "include" файла tsconfig.json.
+5. Для публикации актуальной версии на сервер (ссылочный метод использования библиотеки) данный проект собирается и содержимое папки dist помещается в папку с актуальным номером версии (v[номер], пример: v1 - первая версия библиотеки) папки public проекта u-library-review. Не забывайте обновлять актуальный номер версии в документации (https://uikit.my1.urfu.ru/). Файлы для сборки определены в поле "include" файла tsconfig.json.
+
+Доработки: 
+1. u-switch: для градиента сделать плавный переход фона
+2. 

package/package.json

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

package/src/main.css

@@ -1607,6 +1607,7 @@ button {
   height: 26px;
   position: relative;
   border-radius: 16px;
+  transition: all 0.2s ease-in-out;
   background-color: #D3D3D3;
 }
 .u-switch__point::after {
@@ -1621,12 +1622,6 @@ button {
   background-color: #FFFFFF;
   transition: all 0.2s ease-in-out;
 }
-.u-switch.u-switch-text-left div {
-  margin-left: 12px;
-}
-.u-switch.u-switch-text-right div {
-  margin-right: 12px;
-}
 .u-switch-gradient {
   cursor: pointer;
   display: flex;
@@ -1641,10 +1636,12 @@ button {
 }
 .u-switch-gradient input:disabled + div {
   cursor: not-allowed;
-  background: #D3D3D3;
+  background-image: linear-gradient(0, #D3D3D3 100%, #D3D3D3 100%, #D3D3D3 100%);
 }
 .u-switch-gradient input:checked + .u-switch-gradient__point {
-  background: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
+  background-image: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
+  animation-name: from;
+  animation-duration: 0.2s;
 }
 .u-switch-gradient__point {
   cursor: pointer;
@@ -1652,7 +1649,10 @@ button {
   height: 26px;
   position: relative;
   border-radius: 16px;
-  background-color: #D3D3D3;
+  transition: all 0.2s ease-in-out;
+  animation-name: to;
+  animation-duration: 0.2s;
+  background-image: linear-gradient(0, #D3D3D3 100%, #D3D3D3 100%, #D3D3D3 100%);
 }
 .u-switch-gradient__point::after {
   content: "";
@@ -1666,15 +1666,29 @@ button {
   background-color: #FFFFFF;
   transition: all 0.2s ease-in-out;
 }
-.u-switch-gradient.u-switch-gradient-text-left div {
-  margin-left: 12px;
+@keyframes to {
+  0% {
+    background: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
+  }
+  100% {
+    background: linear-gradient(0, #D3D3D3 100%, #D3D3D3 100%, #D3D3D3 100%);
+  }
 }
-.u-switch-gradient.u-switch-gradient-text-right div {
-  margin-right: 12px;
+@keyframes from {
+  0% {
+    background: linear-gradient(0, #D3D3D3 100%, #D3D3D3 100%, #D3D3D3 100%);
+  }
+  100% {
+    background: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
+  }
 }
 .u-radio {
   cursor: pointer;
   display: flex;
+  align-items: center;
+  column-gap: 10px;
+  font-size: 14px;
+  line-height: 20px;
 }
 .u-radio input {
   display: none;
@@ -1701,15 +1715,13 @@ button {
   background-repeat: no-repeat;
   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='7.5' stroke='%23D3D3D3'/%3E%3C/svg%3E%0A");
 }
-.u-radio.u-radio-text-left div {
-  margin-left: 12px;
-}
-.u-radio.u-radio-text-right div {
-  margin-right: 12px;
-}
 .u-checkbox {
   cursor: pointer;
   display: flex;
+  align-items: center;
+  column-gap: 10px;
+  font-size: 14px;
+  line-height: 20px;
 }
 .u-checkbox input {
   display: none;
@@ -1736,12 +1748,6 @@ button {
   background-repeat: no-repeat;
   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 ");
 }
-.u-checkbox.u-checkbox-text-left div {
-  margin-left: 12px;
-}
-.u-checkbox.u-checkbox-text-right div {
-  margin-right: 12px;
-}
 .u-accordion {
   border-left: 4px solid #748AB9;
   padding-left: 20px;

package/src/main.ts

@@ -1,13 +1,3 @@
-// import AirDatepicker from 'air-datepicker';
-// import 'air-datepicker/air-datepicker.css';
 import "./main.css";
 // import "./main.less";
-// import "./js/upward.js"
-
-// new AirDatepicker('#airdatepicker', {
-//     toggleSelected: true,
-//     range: true,
-//     position: "bottom right",
-//     inline: true,
-// })
-
+// import "./js/upward.js"