urfu-ui-kit-vanilla 1.0.34 → 1.0.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/playground/index.html +3 -5
  3. package/src/main.css +16 -4
  4. package/src/styles/components/pagination.less +16 -4
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "UrFU UI-Kit for Vanilla Web",
4
4
  "license": "UNLICENSED",
5
5
  "private": false,
6
- "version": "1.0.34",
6
+ "version": "1.0.35",
7
7
  "type": "module",
8
8
  "scripts": {
9
9
  "start": "vite serve playground",
package/playground/index.html CHANGED
@@ -685,10 +685,8 @@
685
685
  </div>
686
686
  </div>
687
687
  <div class="u-paginator">
688
- <button class="u-paginator__arrow-btn u-paginator__arrow-btn_inactive">
689
- <svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12" fill="none">
690
- <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77705 11.7071C7.16758 11.3166 7.16758 10.6834 6.77705 10.2929L2.48416 5.99999L6.77705 1.70711C7.16758 1.31658 7.16758 0.683418 6.77705 0.292894C6.38653 -0.0976305 5.75337 -0.0976315 5.36284 0.292892L0.36284 5.29288C0.175304 5.48042 0.069947 5.73477 0.0699466 5.99999C0.0699461 6.26521 0.175303 6.51956 0.362839 6.7071L5.36284 11.7071C5.75336 12.0976 6.38653 12.0976 6.77705 11.7071Z" fill="#D3D3D3"/>
691
- </svg>
688
+ <button class="u-paginator__arrow-btn u-paginator__arrow-btn-right_inactive">
689
+
692
690
  </button>
693
691
  <div class="u-paginator__pages">
694
692
  <button class="u-paginator__pages-num u-paginator__pages-num_active">1</b>
@@ -697,7 +695,7 @@
697
695
  <button class="u-paginator__pages-num">4</button>
698
696
  <button class="u-paginator__pages-num">5</button>
699
697
  <button class="u-paginator__pages-num">6</button>
700
- <button class="u-paginator__pages-dots">
698
+ <button>
701
699
  <svg xmlns="http://www.w3.org/2000/svg" width="9" height="3" viewBox="0 0 9 3" fill="none">
702
700
  <path d="M1.61584 2.07C1.4105 2.07 1.23317 1.99533 1.08384 1.846C0.943836 1.69667 0.873836 1.51467 0.873836 1.3C0.873836 1.076 0.943836 0.894 1.08384 0.754C1.23317 0.614 1.4105 0.544 1.61584 0.544C1.82117 0.544 1.99384 0.614 2.13384 0.754C2.28317 0.894 2.35784 1.076 2.35784 1.3C2.35784 1.51467 2.28317 1.69667 2.13384 1.846C1.99384 1.99533 1.82117 2.07 1.61584 2.07ZM4.58263 2.07C4.3773 2.07 4.19997 1.99533 4.05063 1.846C3.91063 1.69667 3.84063 1.51467 3.84063 1.3C3.84063 1.076 3.91063 0.894 4.05063 0.754C4.19997 0.614 4.3773 0.544 4.58263 0.544C4.78797 0.544 4.96063 0.614 5.10063 0.754C5.24997 0.894 5.32463 1.076 5.32463 1.3C5.32463 1.51467 5.24997 1.69667 5.10063 1.846C4.96063 1.99533 4.78797 2.07 4.58263 2.07ZM7.54943 2.07C7.3441 2.07 7.16676 1.99533 7.01743 1.846C6.87743 1.69667 6.80743 1.51467 6.80743 1.3C6.80743 1.076 6.87743 0.894 7.01743 0.754C7.16676 0.614 7.3441 0.544 7.54943 0.544C7.75476 0.544 7.92743 0.614 8.06743 0.754C8.21676 0.894 8.29143 1.076 8.29143 1.3C8.29143 1.51467 8.21676 1.69667 8.06743 1.846C7.92743 1.99533 7.75476 2.07 7.54943 2.07Z" fill="#545454"/>
703
701
  </svg>
package/src/main.css CHANGED
@@ -1705,18 +1705,31 @@ button {
1705
1705
  }
1706
1706
  .u-pagination .u-paginator__arrow-btn {
1707
1707
  cursor: pointer;
1708
+ width: 32px;
1709
+ height: 32px;
1710
+ background-repeat: no-repeat;
1711
+ background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.70711 11.7071C7.09763 11.3166 7.09763 10.6834 6.70711 10.2929L2.41421 5.99999L6.70711 1.70711C7.09763 1.31658 7.09763 0.683418 6.70711 0.292894C6.31658 -0.0976305 5.68342 -0.0976315 5.29289 0.292892L0.292894 5.29288C0.105357 5.48042 7.50699e-07 5.73477 2.62269e-07 5.99999C-2.26161e-07 6.26521 0.105356 6.51956 0.292893 6.7071L5.29289 11.7071C5.68342 12.0976 6.31658 12.0976 6.70711 11.7071Z' fill='%231E4391'/%3E%3C/svg%3E%0A");
1712
+ background-position: center;
1713
+ }
1714
+ .u-pagination .u-paginator__arrow-btn-right {
1715
+ cursor: pointer;
1716
+ background-repeat: no-repeat;
1717
+ background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.29289 11.7071C0.902369 11.3166 0.902369 10.6834 1.29289 10.2929L5.58579 5.99999L1.29289 1.70711C0.902369 1.31658 0.902368 0.683418 1.29289 0.292894C1.68342 -0.0976305 2.31658 -0.0976315 2.70711 0.292892L7.70711 5.29288C7.89464 5.48042 8 5.73477 8 5.99999C8 6.26521 7.89464 6.51956 7.70711 6.7071L2.70711 11.7071C2.31658 12.0976 1.68342 12.0976 1.29289 11.7071Z' fill='%231E4391'/%3E%3C/svg%3E ");
1718
+ background-position: center;
1719
+ }
1720
+ .u-pagination .u-paginator__arrow-btn-right_inactive {
1721
+ cursor: not-allowed;
1722
+ background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.29289 11.7071C0.902369 11.3166 0.902369 10.6834 1.29289 10.2929L5.58579 5.99999L1.29289 1.70711C0.902369 1.31658 0.902368 0.683418 1.29289 0.292894C1.68342 -0.0976305 2.31658 -0.0976315 2.70711 0.292892L7.70711 5.29288C7.89464 5.48042 8 5.73477 8 5.99999C8 6.26521 7.89464 6.51956 7.70711 6.7071L2.70711 11.7071C2.31658 12.0976 1.68342 12.0976 1.29289 11.7071Z' fill='%23A7A7A7'/%3E%3C/svg%3E ");
1708
1723
  }
1709
1724
  .u-pagination .u-paginator__arrow-btn_inactive {
1710
1725
  cursor: not-allowed;
1726
+ background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.70711 11.7071C7.09763 11.3166 7.09763 10.6834 6.70711 10.2929L2.41421 5.99999L6.70711 1.70711C7.09763 1.31658 7.09763 0.683418 6.70711 0.292894C6.31658 -0.0976305 5.68342 -0.0976315 5.29289 0.292892L0.292894 5.29288C0.105357 5.48042 7.50699e-07 5.73477 2.62269e-07 5.99999C-2.26161e-07 6.26521 0.105356 6.51956 0.292893 6.7071L5.29289 11.7071C5.68342 12.0976 6.31658 12.0976 6.70711 11.7071Z' fill='%23A7A7A7'/%3E%3C/svg%3E%0A");
1711
1727
  }
1712
1728
  .u-pagination .u-paginator__pages {
1713
1729
  display: flex;
1714
1730
  align-items: center;
1715
1731
  column-gap: 5px;
1716
1732
  }
1717
- .u-pagination .u-paginator__pages-dots {
1718
- cursor: pointer;
1719
- }
1720
1733
  .u-pagination .u-paginator__pages-num {
1721
1734
  display: flex;
1722
1735
  align-items: flex-end;
@@ -1737,7 +1750,6 @@ button {
1737
1750
  background: #1e4391;
1738
1751
  }
1739
1752
  .u-pagination .u-paginator__pages-num:not(.u-pagination .u-paginator__pages-num_active):hover {
1740
- font-weight: 700;
1741
1753
  color: #1e4391;
1742
1754
  }
1743
1755
  .u-pagination .u-paginator__pages-num:focus-visible {
package/src/styles/components/pagination.less CHANGED
@@ -49,17 +49,30 @@
49
49
 
50
50
  &__arrow-btn {
51
51
  cursor: pointer;
52
+ width: 32px;
53
+ height: 32px;
54
+ background-repeat: no-repeat;
55
+ background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.70711 11.7071C7.09763 11.3166 7.09763 10.6834 6.70711 10.2929L2.41421 5.99999L6.70711 1.70711C7.09763 1.31658 7.09763 0.683418 6.70711 0.292894C6.31658 -0.0976305 5.68342 -0.0976315 5.29289 0.292892L0.292894 5.29288C0.105357 5.48042 7.50699e-07 5.73477 2.62269e-07 5.99999C-2.26161e-07 6.26521 0.105356 6.51956 0.292893 6.7071L5.29289 11.7071C5.68342 12.0976 6.31658 12.0976 6.70711 11.7071Z' fill='%231E4391'/%3E%3C/svg%3E%0A");
56
+ background-position: center;
57
+ &-right {
58
+ cursor: pointer;
59
+ background-repeat: no-repeat;
60
+ background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.29289 11.7071C0.902369 11.3166 0.902369 10.6834 1.29289 10.2929L5.58579 5.99999L1.29289 1.70711C0.902369 1.31658 0.902368 0.683418 1.29289 0.292894C1.68342 -0.0976305 2.31658 -0.0976315 2.70711 0.292892L7.70711 5.29288C7.89464 5.48042 8 5.73477 8 5.99999C8 6.26521 7.89464 6.51956 7.70711 6.7071L2.70711 11.7071C2.31658 12.0976 1.68342 12.0976 1.29289 11.7071Z' fill='%231E4391'/%3E%3C/svg%3E ");
61
+ background-position: center;
62
+ &_inactive {
63
+ cursor: not-allowed;
64
+ background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.29289 11.7071C0.902369 11.3166 0.902369 10.6834 1.29289 10.2929L5.58579 5.99999L1.29289 1.70711C0.902369 1.31658 0.902368 0.683418 1.29289 0.292894C1.68342 -0.0976305 2.31658 -0.0976315 2.70711 0.292892L7.70711 5.29288C7.89464 5.48042 8 5.73477 8 5.99999C8 6.26521 7.89464 6.51956 7.70711 6.7071L2.70711 11.7071C2.31658 12.0976 1.68342 12.0976 1.29289 11.7071Z' fill='%23A7A7A7'/%3E%3C/svg%3E ");
65
+ }
66
+ }
52
67
  &_inactive {
53
68
  cursor: not-allowed;
69
+ background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.70711 11.7071C7.09763 11.3166 7.09763 10.6834 6.70711 10.2929L2.41421 5.99999L6.70711 1.70711C7.09763 1.31658 7.09763 0.683418 6.70711 0.292894C6.31658 -0.0976305 5.68342 -0.0976315 5.29289 0.292892L0.292894 5.29288C0.105357 5.48042 7.50699e-07 5.73477 2.62269e-07 5.99999C-2.26161e-07 6.26521 0.105356 6.51956 0.292893 6.7071L5.29289 11.7071C5.68342 12.0976 6.31658 12.0976 6.70711 11.7071Z' fill='%23A7A7A7'/%3E%3C/svg%3E%0A");
54
70
  }
55
71
  }
56
72
 
57
73
  &__pages {
58
74
  .flex-container;
59
75
  column-gap: 5px;
60
- &-dots {
61
- cursor: pointer;
62
- }
63
76
  &-num {
64
77
  cursor: pointer;
65
78
  display: flex;
@@ -82,7 +95,6 @@
82
95
  }
83
96
 
84
97
  &:not(&_active):hover {
85
- font-weight: 700;
86
98
  color: #1e4391;
87
99
  }
88
100