nestiq-component-library 1.1.162 → 1.1.163

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.
@@ -91,3 +91,23 @@
91
91
  border: 2px solid white;
92
92
  opacity: 1;
93
93
  }
94
+
95
+ .activeStyle {
96
+ border: 3px solid transparent;
97
+ border-radius: 4px;
98
+ transition: transform 0.2s ease, border-color 0.2s ease;
99
+ cursor: pointer;
100
+ }
101
+
102
+ .activeStyle:hover {
103
+ transform: scale(1.05);
104
+ }
105
+
106
+ .activeStyle:focus {
107
+ outline: none;
108
+ transform: scale(1.05);
109
+ }
110
+
111
+ .activeStyle.active {
112
+ transform: scale(1.05);
113
+ }
@@ -60,7 +60,7 @@ export default function ImageListPopup(props: PopupProps) {
60
60
  <div className="d-flex justify-content-center">
61
61
  <div className="p-2 bd-highlight align-self-center align-items-center me-5">
62
62
  <div
63
- className="rounded-circle border onImageArrow start-0 d-flex "
63
+ className="rounded-circle border onImageArrow d-flex justify-content-center"
64
64
  role="button"
65
65
  onClick={() => handleArrowClickInMainImage("left")}
66
66
  >
@@ -87,7 +87,7 @@ export default function ImageListPopup(props: PopupProps) {
87
87
  {" "}
88
88
  <div
89
89
  role="button"
90
- className="rounded-circle border onImageArrow d-flex justify-content-center"
90
+ className="rounded-circle border onImageArrow d-flex justify-content-center"
91
91
  onClick={() => handleArrowClickInMainImage("right")}
92
92
  >
93
93
  <img
@@ -115,10 +115,8 @@ export default function ImageListPopup(props: PopupProps) {
115
115
  {props.pictureUrls.map((picture, index) => (
116
116
  <div
117
117
  key={index}
118
- className={`flex-shrink-0 ${
119
- index === currentImageIndex
120
- ? "border border-3 border-primary"
121
- : ""
118
+ className={`flex-shrink-0 activeStyle ${
119
+ index === currentImageIndex ? "active" : ""
122
120
  }`}
123
121
  onClick={() => {
124
122
  setCurrentImageIndex(index);