1 files changed, 254 insertions, 5 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
index fe5f41f41..b076af378 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -1146,6 +1146,9 @@ ul.editor{
 .modal{
   top: 60px;
 }
+.modal-dialog-scrollable{
+  max-height: calc(100% - 20%) !important;
+}
 .modal-backdrop{
   z-index: 0 !important;
   opacity: 0 !important;
@@ -1203,8 +1206,8 @@ ul.editor{
 }
 .addedFunctionsList .scrollWrapper,
 .nestedAttributes .scrollWrapper{
-  height: 150px;
-  max-height: 260px;
+  height: 230px;
+  max-height: 300px;
   overflow-y: auto;
 }
 .addedFunctionsList .input-search-controller,
@@ -1249,8 +1252,8 @@ ul.editor{
 }
 .addedFunctionsList .list-group-item i:last-child{
   float: right;
-  font-size: 15px;
-  line-height: 17px;
+  font-size: 10px;
+  line-height: 20px;
 }
 .nestedAttributes .btn-group{
   display: grid;
@@ -1399,4 +1402,250 @@ ul.editor{
   margin: 12px;
   padding: 8px 12px !important;
   line-height: 14px;
-}
-\ No newline at end of file
+}
+.testttt .test0{
+  width: 48%;
+  margin: 0 1%;
+}
+
+
+
+
+
+
+
+@keyframes tonext {
+  75% {
+    left: 0;
+  }
+  95% {
+    left: 100%;
+  }
+  98% {
+    left: 100%;
+  }
+  99% {
+    left: 0;
+  }
+}
+
+@keyframes tostart {
+  75% {
+    left: 0;
+  }
+  95% {
+    left: -300%;
+  }
+  98% {
+    left: -300%;
+  }
+  99% {
+    left: 0;
+  }
+}
+
+@keyframes snap {
+  96% {
+    scroll-snap-align: center;
+  }
+  97% {
+    scroll-snap-align: none;
+  }
+  99% {
+    scroll-snap-align: none;
+  }
+  100% {
+    scroll-snap-align: center;
+  }
+}
+
+
+
+* {
+  box-sizing: border-box;
+  scrollbar-color: transparent transparent; /* thumb and track color */
+  scrollbar-width: 0px;
+}
+
+*::-webkit-scrollbar {
+  width: 0;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: transparent;
+  border: none;
+}
+
+* {
+  -ms-overflow-style: none;
+}
+
+
+.carousel {
+  position: relative;
+  height: 360px;
+  /* padding-top: 75%; */
+  /* filter: drop-shadow(0 0 10px #0003); */
+  /* perspective: 100px; */
+}
+
+.carousel__viewport {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  margin-top: 40px;
+  margin-bottom: 0;
+  padding: 0 12px 0 0;
+  overflow-x: scroll;
+  counter-reset: item;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+}
+
+.carousel__slide {
+  position: relative;
+  flex: 0 0 50%;
+  width: 100%;
+  margin-right: 12px;
+  counter-increment: item;
+  list-style: none;
+}
+
+/* 
+.carousel__slide:before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-40%,70px);
+  color: #fff;
+  font-size: 2em;
+} */
+
+.carousel__snapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  scroll-snap-align: center;
+}
+
+@media (hover: hover) {
+  .carousel__snapper {
+    animation-name: tonext, snap;
+    animation-timing-function: ease;
+    animation-duration: 4s;
+    animation-iteration-count: infinite;
+  }
+
+  .carousel__slide:last-child .carousel__snapper {
+    animation-name: tostart, snap;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel__snapper {
+    animation-name: none;
+  }
+}
+
+.carousel:hover .carousel__snapper,
+.carousel:focus-within .carousel__snapper {
+  animation-name: none;
+}
+
+.carousel__navigation {
+  position: absolute;
+  right: 0;
+  top: 0;
+  left: 0;
+  text-align: center;
+  
+}
+
+.carousel__navigation-list,
+.carousel__navigation-item{
+  display: inline-block;
+  margin-bottom: 0;
+}
+.carousel__navigation-item{
+  width: 100px;
+  padding: 6px 12px;
+  background-color: #DEE8F3;
+  border-right: solid 1px #C8D6E6;
+  font-size: 11px;
+  font-weight: bold;
+}
+.carousel__navigation-item:first-child{
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.carousel__navigation-item:last-child{
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-right: 0;
+}
+.carousel__navigation-button,
+.carousel__navigation-button:hover{
+  display: inline-block;
+  width: auto;  
+  /* background-clip: content-box; */
+  transition: transform 0.1s;
+  color: #1B3E6F;
+}
+.carousel__navigation-button:hover{
+  text-decoration: none;
+}
+.carousel::before,
+.carousel::after,
+.carousel__prev,
+.carousel__next{
+  position: absolute;
+  top: 0;
+  margin-top: 0;
+  width: 4rem;
+  transform: translateY(0);
+  border-radius: 3px;
+  font-size: 0;
+  outline: 0;
+}
+
+/* .carousel::before,
+.carousel__prev {
+  left: -1rem;
+}
+
+.carousel::after,
+.carousel__next {
+  right: -1rem;
+} */
+
+/* .carousel::before,
+.carousel::after {
+  content: '';
+  z-index: 1;
+  background-color: #333;
+  background-size: 1.5rem 1.5rem;
+  background-repeat: no-repeat;
+  background-position: center center;
+  color: #fff;
+  font-size: 2.5rem;
+  line-height: 4rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+.carousel::before {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
+}
+
+.carousel::after {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
+} */