urfu-ui-kit-vanilla 1.0.67 → 1.0.69

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.67",
+  "version": "1.0.69",
   "type": "module",
   "scripts": {
     "start": "vite",

package/src/main.css

@@ -67,11 +67,11 @@ button {
 ::-webkit-scrollbar-button:horizontal:end:increment {
   display: none;
 }
-* {
-  scrollbar-color: #D3D3D3 transparent;
-  /*Цвет скролла, цвет ползунка*/
-  scrollbar-width: thin;
-  /*Толщина скролла thin, auto*/
+@-moz-document url-prefix() {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: red;
+  }
 }
 @font-face {
   font-family: 'Open Sans';
@@ -1622,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;
@@ -1642,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;
@@ -1654,7 +1650,9 @@ button {
   position: relative;
   border-radius: 16px;
   transition: all 0.2s ease-in-out;
-  background-color: #D3D3D3;
+  animation-name: to;
+  animation-duration: 0.2s;
+  background-image: linear-gradient(0, #D3D3D3 100%, #D3D3D3 100%, #D3D3D3 100%);
 }
 .u-switch-gradient__point::after {
   content: "";
@@ -1668,11 +1666,21 @@ 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;