package.dist.css.themes.Carousel.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of webcomponents Show documentation
UI5 Web Components: webcomponents.main
The newest version!
:host(:not([hidden])){display:inline-block}:host{width:100%;min-width:15.5rem;height:100%}:host([desktop]) .ui5-carousel-root:focus,.ui5-carousel-root:focus-visible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor)}.ui5-carousel-root{height:inherit;position:relative;display:flex;flex-direction:column;align-items:center;background:var(--ui5-v2-1-2_carousel_background_color_translucent)}.ui5-carousel-background-solid{background:var(--ui5-v2-1-2_carousel_background_color_solid)}.ui5-carousel-background-transparent{background:transparent}.ui5-carousel-viewport{width:100%;height:inherit;position:relative;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;padding:1px;flex:1;min-height:0}.ui5-carousel-viewport.ui5-carousel-viewport--single{align-items:center}.ui5-carousel-content{height:100%;position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;transition:transform .5s cubic-bezier(.46,0,.44,1);will-change:transform}.ui5-carousel-content.ui5-carousel-content-no-animation{transition:none}.ui5-carousel-content.ui5-carousel-content-has-navigation{height:calc(100% - 1rem)}.ui5-carousel-item{height:100%;display:flex;align-items:center;justify-content:center;padding:0 .75rem;box-sizing:border-box;transition:opacity .5s linear;will-change:opacity}.ui5-carousel-item--hidden{opacity:0}.ui5-carousel-navigation-arrows{width:100%;padding:0 .5rem;position:absolute;top:calc(50% - var(--ui5-v2-1-2_carousel_button_size) / 2);left:0;display:flex;justify-content:space-between;box-sizing:border-box;pointer-events:none}.ui5-carousel-navigation-arrows>[ui5-button]{pointer-events:all}.ui5-carousel-navigation-wrapper{width:100%;height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;box-sizing:border-box}.ui5-carousel-navigation-wrapper-bg-solid{background:var(--sapPageFooter_Background)}.ui5-carousel-navigation-wrapper-bg-translucent{background:var(--ui5-v2-1-2_carousel_background_color_translucent)}.ui5-carousel-navigation-wrapper-bg-transparent{background:transparent}.ui5-carousel-navigation-wrapper-border-solid{border-top:var(--sapElement_BorderWidth) solid var(--sapList_BorderColor)}.ui5-carousel-navigation-wrapper.ui5-carousel-navigation-with-buttons{height:3.5rem}.ui5-carousel-navigation-button{width:var(--ui5-v2-1-2_carousel_button_size);height:var(--ui5-v2-1-2_carousel_button_size);border-radius:50%;box-shadow:none;cursor:pointer;outline-offset:.1rem;--_ui5-v2-1-2_button_focused_border_radius: 50%}.ui5-carousel-navigation-arrows .ui5-carousel-navigation-button{box-shadow:var(--sapContent_Shadow1)}.ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:active{box-shadow:var(--ui5-v2-1-2_carousel_navigation_button_active_box_shadow)}.ui5-carousel-navigation-button--hidden{visibility:hidden;padding:0}.ui5-carousel-navigation{width:9rem;height:2rem;display:flex;justify-content:center;align-items:center}.ui5-carousel-navigation-dot{box-sizing:border-box;width:var(--ui5-v2-1-2_carousel_inactive_dot_size);height:var(--ui5-v2-1-2_carousel_inactive_dot_size);margin:var(--ui5-v2-1-2_carousel_inactive_dot_margin);border-radius:50%;background-color:var(--ui5-v2-1-2_carousel_inactive_dot_background);border:var(--ui5-v2-1-2_carousel_inactive_dot_border);transition:background-color .1s ease-in}.ui5-carousel-navigation-dot[active]{width:.5rem;height:.5rem;margin:0 .25rem;background-color:var(--ui5-v2-1-2_carousel_active_dot_background);border:var(--ui5-v2-1-2_carousel_active_dot_border)}.ui5-carousel-navigation-text{font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;color:var(--sapPageFooter_TextColor);white-space:nowrap;overflow:hidden;text-align:center;text-overflow:ellipsis}