urfu-ui-kit-vanilla 1.0.34 → 1.0.36

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 +18 -4
  4. package/src/styles/components/pagination.less +18 -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.36",
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,33 @@ 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
+ width: 32px;
1717
+ height: 32px;
1718
+ background-repeat: no-repeat;
1719
+ 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 ");
1720
+ background-position: center;
1721
+ }
1722
+ .u-pagination .u-paginator__arrow-btn-right_inactive {
1723
+ cursor: not-allowed;
1724
+ 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
1725
  }
1709
1726
  .u-pagination .u-paginator__arrow-btn_inactive {
1710
1727
  cursor: not-allowed;
1728
+ 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
1729
  }
1712
1730
  .u-pagination .u-paginator__pages {
1713
1731
  display: flex;
1714
1732
  align-items: center;
1715
1733
  column-gap: 5px;
1716
1734
  }
1717
- .u-pagination .u-paginator__pages-dots {
1718
- cursor: pointer;
1719
- }
1720
1735
  .u-pagination .u-paginator__pages-num {
1721
1736
  display: flex;
1722
1737
  align-items: flex-end;
@@ -1737,7 +1752,6 @@ button {
1737
1752
  background: #1e4391;
1738
1753
  }
1739
1754
  .u-pagination .u-paginator__pages-num:not(.u-pagination .u-paginator__pages-num_active):hover {
1740
- font-weight: 700;
1741
1755
  color: #1e4391;
1742
1756
  }
1743
1757
  .u-pagination .u-paginator__pages-num:focus-visible {
package/src/styles/components/pagination.less CHANGED
@@ -49,17 +49,32 @@
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
+ width: 32px;
60
+ height: 32px;
61
+ background-repeat: no-repeat;
62
+ 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 ");
63
+ background-position: center;
64
+ &_inactive {
65
+ cursor: not-allowed;
66
+ 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 ");
67
+ }
68
+ }
52
69
  &_inactive {
53
70
  cursor: not-allowed;
71
+ 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
72
  }
55
73
  }
56
74
 
57
75
  &__pages {
58
76
  .flex-container;
59
77
  column-gap: 5px;
60
- &-dots {
61
- cursor: pointer;
62
- }
63
78
  &-num {
64
79
  cursor: pointer;
65
80
  display: flex;
@@ -82,7 +97,6 @@
82
97
  }
83
98
 
84
99
  &:not(&_active):hover {
85
- font-weight: 700;
86
100
  color: #1e4391;
87
101
  }
88
102