diff options
author | 2020-11-10 16:27:30 +0200 | |
---|---|---|
committer | 2020-11-10 16:27:30 +0200 | |
commit | a8b4aace07bec7407b851c2bdc8a89bae1b8425b (patch) | |
tree | 442cd332fa023157323082075e7069e1f725a2a2 /cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css | |
parent | 16ec88e1a6fbd9ea1e9ab51c908db87b595e10df (diff) |
Add Get Attribute Value with Slide Option
Issue-ID: CCSDK-2780
Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: I06634ee337d3ef82bce667cd01bba3ce1eeba050
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css')
-rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css | 259 |
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"); +} */ |