diff --git a/dist/OutSystemsUI.css b/dist/OutSystemsUI.css index 9491ce8317..bd577440d4 100644 --- a/dist/OutSystemsUI.css +++ b/dist/OutSystemsUI.css @@ -506,6 +506,7 @@ a{ a, a:visited{ color:var(--color-primary); -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; } a:hover, a:focus{ @@ -1103,6 +1104,7 @@ body, position:fixed; top:0; -webkit-transition:opacity 130ms ease-in; + -o-transition:opacity 130ms ease-in; transition:opacity 130ms ease-in; width:100vw; will-change:opacity; @@ -1115,6 +1117,7 @@ body, opacity:1; pointer-events:auto; -webkit-transition:opacity 330ms ease-out; + -o-transition:opacity 330ms ease-out; transition:opacity 330ms ease-out; } .layout .app-menu-content{ @@ -1172,6 +1175,7 @@ body, transform:translateX(0) translateZ(0); -webkit-transition:-webkit-transform 130ms ease-in; transition:-webkit-transform 130ms ease-in; + -o-transition:transform 130ms ease-in; transition:transform 130ms ease-in; transition:transform 130ms ease-in, -webkit-transform 130ms ease-in; width:var(--side-menu-size); @@ -1184,6 +1188,7 @@ body, transform:translateX(var(--side-menu-size)) translateZ(0); -webkit-transition:-webkit-transform 330ms ease-out; transition:-webkit-transform 330ms ease-out; + -o-transition:transform 330ms ease-out; transition:transform 330ms ease-out; transition:transform 330ms ease-out, -webkit-transform 330ms ease-out; } @@ -1224,6 +1229,7 @@ body, -webkit-transform:translateX(0) translateZ(0); transform:translateX(0) translateZ(0); -webkit-transition:all 330ms ease-out; + -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } /*! 3.6. Layout Native - Menu */ @@ -1306,6 +1312,7 @@ body, transform:translateX(0) translateZ(0); -webkit-transition:-webkit-transform 130ms ease-in; transition:-webkit-transform 130ms ease-in; + -o-transition:transform 130ms ease-in; transition:transform 130ms ease-in; transition:transform 130ms ease-in, -webkit-transform 130ms ease-in; width:var(--side-menu-size); @@ -1317,6 +1324,7 @@ body, transform:translateX(var(--side-menu-size)) translateZ(0); -webkit-transition:-webkit-transform 330ms ease-out; transition:-webkit-transform 330ms ease-out; + -o-transition:transform 330ms ease-out; transition:transform 330ms ease-out; transition:transform 330ms ease-out, -webkit-transform 330ms ease-out; } @@ -1347,6 +1355,7 @@ body, -ms-transform:none; transform:none; -webkit-transition:none; + -o-transition:none; transition:none; } .is-rtl.desktop .aside-expandable.menu-visible .main{ @@ -1356,6 +1365,7 @@ body, .is-rtl.tablet .app-menu-content, .is-rtl.phone .app-menu-content{ right:calc(-1 * var(--side-menu-size)); -webkit-transition:all 330ms ease-out; + -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .is-rtl:not(.portrait) .layout-side.layout-native.aside-visible .app-menu-content{ @@ -1369,6 +1379,7 @@ body, -webkit-transform:translateX(0) translateZ(0); transform:translateX(0) translateZ(0); -webkit-transition:all 330ms ease-out; + -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } /*! 3.8. Menu - Header Logo */ @@ -1791,6 +1802,7 @@ body .app-menu-content .app-menu-links{ color:var(--color-neutral-9); font-size:var(--font-size-s); -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; } .form-control[data-input]:hover, .form-control[data-textarea]:hover{ @@ -1890,6 +1902,7 @@ body .app-menu-content .app-menu-links{ height:30px; opacity:1; -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; width:48px; } @@ -1905,6 +1918,7 @@ body .app-menu-content .app-menu-links{ -webkit-transform:translateX(4px) translateZ(0); transform:translateX(4px) translateZ(0); -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; width:24px; } @@ -1962,6 +1976,7 @@ body .app-menu-content .app-menu-links{ height:22px; opacity:1; -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; width:22px; } @@ -2045,6 +2060,7 @@ body .app-menu-content .app-menu-links{ -ms-transform:rotate(-45deg) translateY(0) translateX(0); transform:rotate(-45deg) translateY(0) translateX(0); -webkit-transition:all 300ms ease-in-out; + -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; width:8px; } @@ -2111,7 +2127,8 @@ body .app-menu-content .app-menu-links{ } .dropdown-container .dropdown-popup-row span{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } .dropdown-container .scrollable-list-with-scroll{ @@ -2225,6 +2242,7 @@ select.dropdown-display[disabled]{ margin:0; padding:var(--space-none) var(--space-base); -webkit-transition:all 100ms linear; + -o-transition:all 100ms linear; transition:all 100ms linear; } .btn:hover:active{ @@ -3018,6 +3036,7 @@ div.feedback-message-warning{ height:24px; position:relative; -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; width:24px; } @@ -3035,6 +3054,7 @@ div.feedback-message-warning{ display:flex; height:100%; -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; width:100%; } @@ -3362,6 +3382,7 @@ div.feedback-message-warning{ .flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path{ -webkit-transition:fill 0.1s; + -o-transition:fill 0.1s; transition:fill 0.1s; fill:inherit; } @@ -4084,6 +4105,7 @@ span.flatpickr-weekday{ -webkit-transition:transform 0.3s; -webkit-transition:-webkit-transform 0.3s; transition:-webkit-transform 0.3s; + -o-transition:transform 0.3s; transition:transform 0.3s; transition:transform 0.3s, -webkit-transform 0.3s; } @@ -4523,6 +4545,7 @@ span.flatpickr-weekday{ position:relative; -webkit-transition:-webkit-transform 0.2s linear; transition:-webkit-transform 0.2s linear; + -o-transition:transform 0.2s linear; transition:transform 0.2s linear; transition:transform 0.2s linear, -webkit-transform 0.2s linear; width:8px; @@ -4723,7 +4746,8 @@ span.flatpickr-weekday{ line-height:20px; max-width:100%; overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } .vscomp-arrow{ @@ -4918,7 +4942,8 @@ span.flatpickr-weekday{ } .vscomp-option-text{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; -webkit-user-select:none; -moz-user-select:none; @@ -4928,7 +4953,8 @@ span.flatpickr-weekday{ } .vscomp-option-description{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; color:#666; font-size:13px; @@ -5047,6 +5073,7 @@ span.flatpickr-weekday{ } .vscomp-wrapper .checkbox-icon::after{ -webkit-transition-duration:0.2s; + -o-transition-duration:0.2s; transition-duration:0.2s; border:2px solid #888; content:""; @@ -5198,6 +5225,7 @@ span.flatpickr-weekday{ } .vscomp-wrapper.keep-always-open .vscomp-dropbox{ -webkit-transition-duration:0s; + -o-transition-duration:0s; transition-duration:0s; border:1px solid #ddd; -webkit-box-shadow:none; @@ -5230,12 +5258,14 @@ span.flatpickr-weekday{ height:auto; min-height:28px; overflow:auto; - text-overflow:unset; + -o-text-overflow:unset; + text-overflow:unset; white-space:normal; } .vscomp-wrapper.show-value-as-tags .vscomp-value-tag{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; -webkit-box-align:center; -ms-flex-align:center; @@ -5256,7 +5286,8 @@ span.flatpickr-weekday{ } .vscomp-wrapper.show-value-as-tags .vscomp-value-tag-content{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:calc(100% - 20px); } @@ -5763,6 +5794,7 @@ span.flatpickr-weekday{ -webkit-transform:translateX(100%) translateZ(0); transform:translateX(100%) translateZ(0); -webkit-transition:all 190ms ease-in; + -o-transition:all 190ms ease-in; transition:all 190ms ease-in; width:100%; will-change:transform; @@ -5772,6 +5804,7 @@ span.flatpickr-weekday{ -webkit-transform:translateX(0) translateZ(0); transform:translateX(0) translateZ(0); -webkit-transition:all 330ms ease-out; + -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .phone .split-screen-wrapper .split-right{ @@ -5897,6 +5930,7 @@ span.flatpickr-weekday{ border-color:var(--color-primary); opacity:1; -webkit-transition:opacity 300ms ease-in; + -o-transition:opacity 300ms ease-in; transition:opacity 300ms ease-in; } .osui-accordion-item--is-disabled{ @@ -5924,7 +5958,8 @@ span.flatpickr-weekday{ width:100%; } .osui-accordion-item__title__placeholder{ - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; width:100%; } .osui-accordion-item__title--is-left{ @@ -5952,6 +5987,7 @@ span.flatpickr-weekday{ -ms-flex-pack:center; justify-content:center; -webkit-transition:all 300ms ease-in-out; + -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; width:16px; } @@ -5964,6 +6000,7 @@ span.flatpickr-weekday{ height:100%; -webkit-transition:-webkit-transform 300ms ease-in-out; transition:-webkit-transform 300ms ease-in-out; + -o-transition:transform 300ms ease-in-out; transition:transform 300ms ease-in-out; transition:transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out; width:2px; @@ -6002,6 +6039,7 @@ span.flatpickr-weekday{ } .osui-accordion-item__content--is-animating{ -webkit-transition:all 300ms ease-in-out; + -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .osui-accordion-item__content [data-block*=AnimatedLabel]:first-child .animated-label{ @@ -6186,6 +6224,7 @@ span.flatpickr-weekday{ } .card-background-color:after{ background:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgb(0, 0, 0))); + background:-o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); content:""; height:100%; @@ -6234,7 +6273,8 @@ span.flatpickr-weekday{ .card-detail-text{ color:var(--color-neutral-7); overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; } .is-rtl .card-detail-left{ padding-left:var(--space-base); @@ -6428,6 +6468,7 @@ span.flatpickr-weekday{ -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); + -o-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); } .osui-flip-content__container--flip-self{ @@ -6685,7 +6726,8 @@ span.flatpickr-weekday{ } .list-item-content-title, .list-item-content-text{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } .list-item-content-title{ @@ -6859,6 +6901,7 @@ span.flatpickr-weekday{ width:-moz-fit-content; width:fit-content; -webkit-transition:opacity 250ms; + -o-transition:opacity 250ms; transition:opacity 250ms; } .osui-tooltip__balloon-wrapper__balloon{ @@ -7180,26 +7223,32 @@ span.flatpickr-weekday{ } .osui-tooltip__balloon-wrapper--is-opening.left{ -webkit-transition:left 250ms; + -o-transition:left 250ms; transition:left 250ms; } .osui-tooltip__balloon-wrapper--is-opening.right{ -webkit-transition:right 250ms; + -o-transition:right 250ms; transition:right 250ms; } .osui-tooltip__balloon-wrapper--is-opening.center{ -webkit-transition:top 250ms; + -o-transition:top 250ms; transition:top 250ms; } .osui-tooltip__balloon-wrapper--is-opening.top, .osui-tooltip__balloon-wrapper--is-opening.top-left, .osui-tooltip__balloon-wrapper--is-opening.top-right{ -webkit-transition:top 250ms; + -o-transition:top 250ms; transition:top 250ms; } .osui-tooltip__balloon-wrapper--is-opening.bottom, .osui-tooltip__balloon-wrapper--is-opening.bottom-left, .osui-tooltip__balloon-wrapper--is-opening.bottom-right{ -webkit-transition:top 250ms; + -o-transition:top 250ms; transition:top 250ms; } .osui-tooltip__balloon-wrapper--is-opening .osui-tooltip__balloon-wrapper__balloon{ -webkit-transition:opacity 250ms; + -o-transition:opacity 250ms; transition:opacity 250ms; } .osui-tooltip__balloon-wrapper--is-open{ @@ -7428,6 +7477,7 @@ span.flatpickr-weekday{ position:absolute; top:0; -webkit-transition:opacity 0.3s cubic-bezier(0, 0, 0.3, 1); + -o-transition:opacity 0.3s cubic-bezier(0, 0, 0.3, 1); transition:opacity 0.3s cubic-bezier(0, 0, 0.3, 1); width:100%; will-change:opacity; @@ -7448,10 +7498,12 @@ span.flatpickr-weekday{ } .action-sheet-container--visible.action-sheet-container--animatable .action-sheet{ -webkit-transition:all 330ms ease-out; + -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .action-sheet-container--animatable .action-sheet{ -webkit-transition:all 130ms ease-in; + -o-transition:all 130ms ease-in; transition:all 130ms ease-in; } .action-sheet-buttons{ @@ -7501,6 +7553,7 @@ span.flatpickr-weekday{ animation-fill-mode:both; display:inline-block; -webkit-transition-timing-function:ease-out; + -o-transition-timing-function:ease-out; transition-timing-function:ease-out; visibility:hidden; width:100%; @@ -7593,6 +7646,7 @@ span.flatpickr-weekday{ position:absolute; top:8px; -webkit-transition:all 300ms ease; + -o-transition:all 300ms ease; transition:all 300ms ease; z-index:var(--layer-global-screen); } @@ -7613,6 +7667,7 @@ span.flatpickr-weekday{ border-radius:var(--border-radius-none); padding:var(--space-none); -webkit-transition:all 100ms ease-in-out; + -o-transition:all 100ms ease-in-out; transition:all 100ms ease-in-out; } .animated-label-input .form-control[data-input]:focus, .animated-label-input .form-control[data-textarea]:focus{ @@ -7703,6 +7758,7 @@ span.flatpickr-weekday{ opacity:1; pointer-events:all; -webkit-transition:opacity 300ms ease-in; + -o-transition:opacity 300ms ease-in; transition:opacity 300ms ease-in; } .osui-balloon:not(.osui-balloon--is-open) *{ @@ -7795,6 +7851,7 @@ span.flatpickr-weekday{ text-align:center; -webkit-transition:-webkit-transform 350ms var(--osui-bottom-sheet-transition-function); transition:-webkit-transform 350ms var(--osui-bottom-sheet-transition-function); + -o-transition:transform 350ms var(--osui-bottom-sheet-transition-function); transition:transform 350ms var(--osui-bottom-sheet-transition-function); transition:transform 350ms var(--osui-bottom-sheet-transition-function), -webkit-transform 350ms var(--osui-bottom-sheet-transition-function); -webkit-transform:translateY(100%); @@ -7857,11 +7914,13 @@ span.flatpickr-weekday{ .osui-bottom-sheet:not(.osui-bottom-sheet--is-open){ -webkit-transition:-webkit-transform 200ms ease-out; transition:-webkit-transform 200ms ease-out; + -o-transition:transform 200ms ease-out; transition:transform 200ms ease-out; transition:transform 200ms ease-out, -webkit-transform 200ms ease-out; } .osui-bottom-sheet:not(.osui-bottom-sheet--is-open) + .osui-bottom-sheet-overlay{ -webkit-transition:opacity 200ms ease-out; + -o-transition:opacity 200ms ease-out; transition:opacity 200ms ease-out; } .osui-bottom-sheet-overlay{ @@ -7873,6 +7932,7 @@ span.flatpickr-weekday{ position:fixed; top:0; -webkit-transition:opacity 350ms ease-in; + -o-transition:opacity 350ms ease-in; transition:opacity 350ms ease-in; width:100vw; z-index:calc(var(--layer-below) + var(--osui-bottom-sheet-layer)); @@ -7907,6 +7967,7 @@ span.flatpickr-weekday{ transform:translateY(-2px); -webkit-transition:opacity 200ms ease, -webkit-transform 200ms var(--osui-bottom-sheet-transition-function); transition:opacity 200ms ease, -webkit-transform 200ms var(--osui-bottom-sheet-transition-function); + -o-transition:opacity 200ms ease, transform 200ms var(--osui-bottom-sheet-transition-function); transition:opacity 200ms ease, transform 200ms var(--osui-bottom-sheet-transition-function); transition:opacity 200ms ease, transform 200ms var(--osui-bottom-sheet-transition-function), -webkit-transform 200ms var(--osui-bottom-sheet-transition-function); top:0; @@ -7954,6 +8015,7 @@ span.flatpickr-weekday{ height:40px; opacity:1; -webkit-transition:opacity 150ms linear; + -o-transition:opacity 150ms linear; transition:opacity 150ms linear; width:40px; will-change:opacity; @@ -8408,6 +8470,7 @@ span.flatpickr-weekday{ .safari input.flatpickr-input, .safari input.flatpickr-input + input{ -webkit-transition:none; + -o-transition:none; transition:none; } .phone .flatpickr-current-month .flatpickr-monthDropdown-months, @@ -8773,6 +8836,7 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b margin-right:var(--space-s); overflow:visible; -webkit-transition:background-color 0.25s ease; + -o-transition:background-color 0.25s ease; transition:background-color 0.25s ease; width:16px; } @@ -8783,6 +8847,7 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b height:85%; opacity:0; -webkit-transition:opacity 0.25s ease; + -o-transition:opacity 0.25s ease; transition:opacity 0.25s ease; width:40%; } @@ -8819,6 +8884,7 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b padding:var(--space-xs) var(--space-xl) var(--space-xs) var(--space-base); position:relative; -webkit-transition:height, border-color 0.25s ease; + -o-transition:height, border-color 0.25s ease; transition:height, border-color 0.25s ease; vertical-align:middle; width:100%; @@ -8837,6 +8903,7 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b -ms-transform-origin:center; transform-origin:center; -webkit-transition:all 0.25s ease; + -o-transition:all 0.25s ease; transition:all 0.25s ease; } .vscomp-toggle-button:hover{ @@ -8946,6 +9013,7 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b align-content:center; background-color:var(--color-neutral-0); -webkit-transition:background-color 0.25s ease; + -o-transition:background-color 0.25s ease; transition:background-color 0.25s ease; } .vscomp-option.focused, .vscomp-option.selected{ @@ -9161,8 +9229,10 @@ body.vscomp-popup-active .vscomp-wrapper{ -webkit-transform:translateY(0px) translateZ(0) scale(1); transform:translateY(0px) translateZ(0) scale(1); -webkit-transition:all 180ms ease-out; + -o-transition:all 180ms ease-out; transition:all 180ms ease-out; -webkit-transition-delay:calc(var(--delay) * 40ms); + -o-transition-delay:calc(var(--delay) * 40ms); transition-delay:calc(var(--delay) * 40ms); } .floating-actions-wrapper.is--open .floating-actions-item-button{ @@ -9217,6 +9287,7 @@ body.vscomp-popup-active .vscomp-wrapper{ -webkit-transform:translateY(--space-base) translateZ(0); transform:translateY(--space-base) translateZ(0); -webkit-transition:all 100ms ease-in; + -o-transition:all 100ms ease-in; transition:all 100ms ease-in; } .floating-actions-item{ @@ -9246,9 +9317,11 @@ body.vscomp-popup-active .vscomp-wrapper{ transform:translateZ(0) scale(0.3); -webkit-transition:-webkit-transform 180ms ease-out; transition:-webkit-transform 180ms ease-out; + -o-transition:transform 180ms ease-out; transition:transform 180ms ease-out; transition:transform 180ms ease-out, -webkit-transform 180ms ease-out; -webkit-transition-delay:calc(var(--delay) * 40ms); + -o-transition-delay:calc(var(--delay) * 40ms); transition-delay:calc(var(--delay) * 40ms); width:40px; } @@ -9284,6 +9357,7 @@ body.vscomp-popup-active .vscomp-wrapper{ -ms-transform-origin:center center; transform-origin:center center; -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; width:56px; } @@ -9301,6 +9375,7 @@ body.vscomp-popup-active .vscomp-wrapper{ right:0; top:0; -webkit-transition:opacity 180ms ease-out; + -o-transition:opacity 180ms ease-out; transition:opacity 180ms ease-out; width:100vw; z-index:var(--osui-floating-actions-layer); @@ -9597,6 +9672,7 @@ body.vscomp-popup-active .vscomp-wrapper{ position:fixed; -webkit-transition:opacity 300ms ease-out, -webkit-transform 300ms ease-out; transition:opacity 300ms ease-out, -webkit-transform 300ms ease-out; + -o-transition:transform 300ms ease-out, opacity 300ms ease-out; transition:transform 300ms ease-out, opacity 300ms ease-out; transition:transform 300ms ease-out, opacity 300ms ease-out, -webkit-transform 300ms ease-out; -webkit-user-select:none; @@ -9783,6 +9859,7 @@ body.vscomp-popup-active .vscomp-wrapper{ height:var(--range-slider-handle-size); -webkit-transition:-webkit-transform 150ms ease-out; transition:-webkit-transform 150ms ease-out; + -o-transition:transform 150ms ease-out; transition:transform 150ms ease-out; transition:transform 150ms ease-out, -webkit-transform 150ms ease-out; width:var(--range-slider-handle-size); @@ -10117,6 +10194,7 @@ body.vscomp-popup-active .vscomp-wrapper{ right:13px; top:50%; -webkit-transition:all 300ms ease; + -o-transition:all 300ms ease; transition:all 300ms ease; width:16px; } @@ -10131,6 +10209,7 @@ body.vscomp-popup-active .vscomp-wrapper{ -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:all 300ms ease; + -o-transition:all 300ms ease; transition:all 300ms ease; width:3px; } @@ -10143,12 +10222,14 @@ body.vscomp-popup-active .vscomp-wrapper{ -ms-transform:translate(0, calc(-100% - var(--os-safe-area-top))); transform:translate(0, calc(-100% - var(--os-safe-area-top))); -webkit-transition:all 300ms ease; + -o-transition:all 300ms ease; transition:all 300ms ease; } .layout-native .header-right .search-input input[data-input], .layout-native .header-right .search-input input[data-input]:empty{ height:34px; padding-left:var(--space-xl); -webkit-transition:none; + -o-transition:none; transition:none; } .layout-native .header-right .search-input input[data-input]:focus{ @@ -10191,6 +10272,7 @@ body.vscomp-popup-active .vscomp-wrapper{ position:fixed; top:0; -webkit-transition:all 130ms ease-in; + -o-transition:all 130ms ease-in; transition:all 130ms ease-in; width:var(--sidebar-width); will-change:transform; @@ -10268,6 +10350,7 @@ body.vscomp-popup-active .vscomp-wrapper{ position:fixed; top:0; -webkit-transition:opacity 130ms ease-in; + -o-transition:opacity 130ms ease-in; transition:opacity 130ms ease-in; width:200vw; will-change:opacity; @@ -10290,6 +10373,7 @@ body.vscomp-popup-active .vscomp-wrapper{ transform:none; -webkit-transition:-webkit-transform 330ms ease-out; transition:-webkit-transform 330ms ease-out; + -o-transition:transform 330ms ease-out; transition:transform 330ms ease-out; transition:transform 330ms ease-out, -webkit-transform 330ms ease-out; will-change:transform; @@ -10392,6 +10476,7 @@ body.vscomp-popup-active .vscomp-wrapper{ } .stackedcards--animatable{ -webkit-transition:all 400ms ease; + -o-transition:all 400ms ease; transition:all 400ms ease; } .stackedcards .init{ @@ -10701,7 +10786,8 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h .bottom-bar-item-text{ font-size:10px; overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; word-wrap:break-word; } @@ -11085,6 +11171,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h display:flex; padding:var(--space-none) var(--space-s); -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; } .osui-submenu__header__icon{ @@ -11096,6 +11183,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; } .osui-submenu__header__icon:before{ @@ -11107,6 +11195,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h content:""; height:6px; -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; width:6px; } @@ -11121,6 +11210,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h height:100%; position:relative; -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; -servicestudio-min-width:100px; -servicestudio-margin-left:calc(var(--space-s) * -1); @@ -11162,6 +11252,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h -ms-transform:translateY(-8px); transform:translateY(-8px); -webkit-transition:all 130ms ease-out; + -o-transition:all 130ms ease-out; transition:all 130ms ease-out; z-index:var(--layer-global-elevated); } @@ -11507,6 +11598,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h position:absolute; -webkit-transition:-webkit-transform 200ms linear; transition:-webkit-transform 200ms linear; + -o-transition:transform 200ms linear; transition:transform 200ms linear; transition:transform 200ms linear, -webkit-transform 200ms linear; -webkit-transform-origin:0 0; @@ -12066,10 +12158,12 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ } .osui-progress-bar__container.animate-entrance .osui-progress-bar__value:before{ -webkit-transition-delay:0.5s; + -o-transition-delay:0.5s; transition-delay:0.5s; } .osui-progress-bar__container.animate-entrance .osui-progress-bar__value:before, .osui-progress-bar__container.animate-progress-change .osui-progress-bar__value:before{ -webkit-transition-duration:0.35s; + -o-transition-duration:0.35s; transition-duration:0.35s; } .osui-progress-bar__value{ @@ -12178,14 +12272,17 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ stroke-dashoffset:var(--stroke-dashoffset); stroke-linecap:var(--shape); -webkit-transition:stroke-dashoffset 0; + -o-transition:stroke-dashoffset 0; transition:stroke-dashoffset 0; } .osui-progress-circle__container__progress-path.animate-entrance, .osui-progress-circle__container__progress-path.animate-progress-change{ -webkit-transition-duration:0.35s; + -o-transition-duration:0.35s; transition-duration:0.35s; } .osui-progress-circle__container__progress-path.animate-entrance{ -webkit-transition-delay:0.5s; + -o-transition-delay:0.5s; transition-delay:0.5s; } .osui-progress-circle__container__trail-path{ @@ -12221,6 +12318,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ } /*! 6.5.5. Rating */ .rating{ + position:relative; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; @@ -12242,6 +12340,9 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ .rating.rating-medium{ --rating-size:24px; } +.rating.is-edit{ + pointer-events:initial; +} .rating.is-edit .rating-item{ cursor:pointer; pointer-events:auto; @@ -12265,6 +12366,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ position:absolute; top:0; -webkit-transition:opacity linear 150ms; + -o-transition:opacity linear 150ms; transition:opacity linear 150ms; } .rating-item-filled, .rating-item-half, .rating-item-empty{ @@ -12282,41 +12384,64 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ opacity:0; z-index:var(--layer-global-screen); } -.rating .rating-item[class*=rating-]:last-of-type{ +.rating-item:last-of-type{ padding-right:0; } -.rating input:checked + label .rating-item-empty, -.rating input:checked ~ label .rating-item-filled{ +.rating input:checked + .rating-item .rating-item-empty, .rating input:checked ~ .rating-item .rating-item-filled{ opacity:0; } -.rating.is-half .rating-item-half{ - z-index:var(--layer-local-tier-1); +.rating.is-half input:checked ~ .rating-item .rating-item-half{ + opacity:0; } -.rating.is-half input:checked + label .rating-item-half{ +.rating:hover input + .rating-item .rating-item-filled{ opacity:1; } -.rating.is-half input:checked + label .rating-item-filled{ +.rating input{ +} +.rating input:first-of-type + .rating-item{ + background:transparent; + display:none; + height:100%; + left:0; + position:absolute; + top:0; + width:100%; + -webkit-box-shadow:0 0 0 3px var(--color-focus-outer); + box-shadow:0 0 0 3px var(--color-focus-outer); +} +.rating input:first-of-type:focus:checked + .rating-item{ + display:block; +} +.rating input:checked + .rating-item .rating-item-filled, .rating input:checked + .rating-item .rating-item-half, .rating input:checked ~ .rating-item .rating-item-empty, .rating input:hover ~ .rating-item .rating-item-empty, .rating input:focus ~ .rating-item .rating-item-empty, .rating input:focus + .rating-item .rating-item-filled{ + opacity:1; +} +.rating input:hover ~ .rating-item .rating-item-filled, .rating input:hover ~ .rating-item .rating-item-half{ opacity:0; } -.rating:hover input + label .rating-item-filled, .rating.is-half:hover input:checked + label .rating-item-filled{ +.rating input:hover + .rating-item .rating-item-filled{ opacity:1; } -.rating input:focus + label .rating-item-empty, -.rating input:hover ~ label .rating-item-filled{ +.rating.is-half .rating-item-half{ + z-index:var(--layer-local-tier-1); +} +.rating.is-half input:checked + .rating-item .rating-item-half{ + opacity:1; +} +.rating.is-half input:checked + .rating-item .rating-item-filled{ + opacity:0; +} +.rating.is-half input:hover ~ .rating-item .rating-item-filled, +.rating.is-half input:hover ~ .rating-item .rating-item-half{ opacity:0; } -.rating input:checked ~ label .rating-item-empty, -.rating input:checked + label .rating-item-filled, -.rating input:checked + label .rating-item-half, -.rating input:hover ~ label .rating-item-empty, -.rating input:focus ~ label .rating-item-empty, -.rating input:focus + label .rating-item-filled{ +.rating.is-half:hover input:checked + .rating-item .rating-item-filled, +.rating.is-half input:hover + .rating-item .rating-item-filled{ opacity:1; } -.rating input:hover ~ label .rating-item-filled, .rating.is-half input:hover ~ label.rating-item .rating-item-filled, .rating.is-half input:hover ~ label.rating-item .rating-item-half{ +.rating.is-half:hover input:hover ~ .rating-item .rating-item-filled{ opacity:0; } -.rating input:hover + label .rating-item-filled, .rating.is-half input:hover + label.rating-item .rating-item-filled{ +.rating.is-half:hover input:hover + .rating-item .rating-item-filled{ opacity:1; } .rating .icon-states{ @@ -12339,7 +12464,17 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ -ms-transform:scaleX(-1); transform:scaleX(-1); } -.has-accessible-features input:focus + .rating-item > div{ +.has-accessible-features .rating.is-half input:focus + .rating-item .rating-item-filled, +.has-accessible-features .rating.is-half input:focus + .rating-item .rating-item-filled *, .has-accessible-features .rating:not(.is-half) input:focus + .rating-item .rating-item-half, +.has-accessible-features .rating:not(.is-half) input:focus + .rating-item .rating-item-half *, +.has-accessible-features .rating input:checked + .rating-item .rating-item-empty, +.has-accessible-features .rating input:checked + .rating-item .rating-item-empty *{ + -webkit-box-shadow:none; + box-shadow:none; +} +.has-accessible-features .rating.is-half input:focus + .rating-item .rating-item-half, +.has-accessible-features .rating.is-half input:focus + .rating-item .rating-item-half *, .has-accessible-features .rating:not(.is-half) input:focus + .rating-item .rating-item-filled, +.has-accessible-features .rating:not(.is-half) input:focus + .rating-item .rating-item-filled *{ -webkit-box-shadow:0 0 0 3px var(--color-focus-outer); box-shadow:0 0 0 3px var(--color-focus-outer); } @@ -12404,6 +12539,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ display:-ms-inline-flexbox; display:inline-flex; -webkit-transition:none; + -o-transition:none; transition:none; vertical-align:middle; white-space:nowrap; @@ -12536,12 +12672,14 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ } .pull-to-refresh .genericon{ -webkit-transition:all 0.25s ease; + -o-transition:all 0.25s ease; transition:all 0.25s ease; } .ptr-loading .content, .ptr-loading .pull-to-refresh, .ptr-reset .content, .ptr-reset .pull-to-refresh{ -webkit-transition:all 0.25s ease; + -o-transition:all 0.25s ease; transition:all 0.25s ease; } .ptr-loading .pull-to-refresh .genericon, .ptr-reset .pull-to-refresh .genericon{ @@ -12641,6 +12779,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ top:0; -webkit-transition:-webkit-transform 200ms ease-in-out; transition:-webkit-transform 200ms ease-in-out; + -o-transition:transform 200ms ease-in-out; transition:transform 200ms ease-in-out; transition:transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out; } @@ -12652,7 +12791,8 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ } .osui-dropdown-serverside__selected-values > *:first-child{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:100%; } @@ -12673,6 +12813,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ padding:var(--space-none) var(--space-base); position:relative; -webkit-transition:border 250ms ease-in-out; + -o-transition:border 250ms ease-in-out; transition:border 250ms ease-in-out; width:100%; } @@ -12698,6 +12839,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ overflow:hidden; position:absolute; -webkit-transition:opacity 300ms ease; + -o-transition:opacity 300ms ease; transition:opacity 300ms ease; width:100%; z-index:var(--layer-global-elevated); @@ -12728,6 +12870,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ transform:translateY(calc(-1 * var(--osui-dropdown-ss-thresholdanimateval))); -webkit-transition:opacity 250ms ease, -webkit-transform 300ms ease-in-out; transition:opacity 250ms ease, -webkit-transform 300ms ease-in-out; + -o-transition:opacity 250ms ease, transform 300ms ease-in-out; transition:opacity 250ms ease, transform 300ms ease-in-out; transition:opacity 250ms ease, transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out; } @@ -12827,6 +12970,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ -ms-transform:translateY(0); transform:translateY(0); -webkit-transition:opacity 250ms ease; + -o-transition:opacity 250ms ease; transition:opacity 250ms ease; } .osui-dropdown-serverside__balloon--is-top .osui-dropdown-serverside__balloon-content{ @@ -12963,6 +13107,7 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown overflow:hidden; top:0; -webkit-transition:opacity 250ms ease; + -o-transition:opacity 250ms ease; transition:opacity 250ms ease; z-index:var(--layer-global-instant-interaction); } @@ -13013,6 +13158,7 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown padding:var(--space-s) var(--space-base); position:relative; -webkit-transition:background 250ms ease; + -o-transition:background 250ms ease; transition:background 250ms ease; width:100%; z-index:var(--layer-global-screen); @@ -13040,7 +13186,8 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown } .osui-dropdown-serverside-item__content > *:first-child{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:100%; } @@ -13109,6 +13256,7 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown font-size:24px; font-weight:400; -webkit-transition:all 300ms ease-in-out; + -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .section-expandable .section-expandable-icon:after{ @@ -13134,6 +13282,7 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown } .section-expandable .section-expandable-content-animating, .section-expandable .section-expandable-content.is--animating{ -webkit-transition:all 300ms ease-in-out; + -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .section-expandable .section-expandable-content.no-padding{ @@ -13235,6 +13384,7 @@ button.OSFillParent{ overflow:hidden; position:relative; -webkit-transition:all 400ms ease; + -o-transition:all 400ms ease; transition:all 400ms ease; will-change:transform; } @@ -13278,6 +13428,7 @@ button.OSFillParent{ } .carousel--animatable{ -webkit-transition:all 250ms linear; + -o-transition:all 250ms linear; transition:all 250ms linear; will-change:transform; } @@ -13363,6 +13514,7 @@ button.OSFillParent{ -ms-transform:translateY(-25px); transform:translateY(-25px); -webkit-transition:opacity 150ms linear; + -o-transition:opacity 150ms linear; transition:opacity 150ms linear; width:40px; will-change:opacity; @@ -13403,6 +13555,7 @@ button.OSFillParent{ .carousel-is-moving .hide-on-drag{ opacity:0; -webkit-transition:opacity 250ms ease; + -o-transition:opacity 250ms ease; transition:opacity 250ms ease; } .carousel .list.list-group{ @@ -13915,6 +14068,7 @@ input.OSFillParent.calendar-input{ line-height:calc(var(--font-size-base) * 2); padding-left:var(--space-base); -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; vertical-align:top; width:100%; @@ -14078,6 +14232,7 @@ input.OSFillParent.calendar-input{ height:40px; padding:var(--space-none) var(--space-base); -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; } .section-expandable-content .choices__list--dropdown.is-active{ @@ -14162,6 +14317,7 @@ input.OSFillParent.calendar-input{ -ms-transform-origin:center; transform-origin:center; -webkit-transition:all 300ms ease; + -o-transition:all 300ms ease; transition:all 300ms ease; } .choices[data-type*=select-one].is-open:after{ @@ -14203,7 +14359,8 @@ input.OSFillParent.calendar-input{ color:var(--color-neutral-10); overflow:hidden; padding-right:var(--space-base); - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:99%; } @@ -14363,6 +14520,7 @@ input.OSFillParent.calendar-input{ .flip-content-container{ position:relative; -webkit-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); + -o-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); -webkit-transform-style:preserve-3d; transform-style:preserve-3d; @@ -14512,10 +14670,12 @@ input.OSFillParent.calendar-input{ } .notification--visible.notification--animatable{ -webkit-transition:all 330ms ease-out; + -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .notification--animatable{ -webkit-transition:all 130ms ease-in; + -o-transition:all 130ms ease-in; transition:all 130ms ease-in; } .layout-native .notification{ @@ -14574,6 +14734,7 @@ input.OSFillParent.calendar-input{ -ms-transform-origin:left; transform-origin:left; -webkit-transition:all 750ms ease-out; + -o-transition:all 750ms ease-out; transition:all 750ms ease-out; will-change:width; } @@ -14717,6 +14878,7 @@ input.OSFillParent.calendar-input{ -ms-transform:translateX(102%); transform:translateX(102%); -webkit-transition:all 130ms ease-in; + -o-transition:all 130ms ease-in; transition:all 130ms ease-in; width:500px; will-change:transform; @@ -14753,6 +14915,7 @@ input.OSFillParent.calendar-input{ -ms-transform:none; transform:none; -webkit-transition:all 330ms ease-out; + -o-transition:all 330ms ease-out; transition:all 330ms ease-out; will-change:transform; } @@ -14849,6 +15012,7 @@ input.OSFillParent.calendar-input{ display:flex; padding:var(--space-none) var(--space-s); -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; } .submenu-icon{ @@ -14860,6 +15024,7 @@ input.OSFillParent.calendar-input{ -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; } .submenu-icon:before{ @@ -14871,6 +15036,7 @@ input.OSFillParent.calendar-input{ content:""; height:6px; -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; width:6px; } @@ -14885,6 +15051,7 @@ input.OSFillParent.calendar-input{ height:100%; position:relative; -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; } .submenu-item a{ @@ -14921,6 +15088,7 @@ input.OSFillParent.calendar-input{ -ms-transform:translateY(-8px); transform:translateY(-8px); -webkit-transition:all 130ms ease-out; + -o-transition:all 130ms ease-out; transition:all 130ms ease-out; z-index:var(--layer-global-elevated); } @@ -15196,6 +15364,7 @@ input.OSFillParent.calendar-input{ margin-left:var(--space-l); padding:var(--space-base) var(--space-xs); -webkit-transition:border 150ms linear; + -o-transition:border 150ms linear; transition:border 150ms linear; white-space:nowrap; } @@ -15252,6 +15421,7 @@ input.OSFillParent.calendar-input{ .layout-native .tabs-content-wrapper{ -webkit-transition:-webkit-transform 230ms ease-in-out; transition:-webkit-transform 230ms ease-in-out; + -o-transition:transform 230ms ease-in-out; transition:transform 230ms ease-in-out; transition:transform 230ms ease-in-out, -webkit-transform 230ms ease-in-out; } @@ -16331,7 +16501,8 @@ input.OSFillParent.calendar-input{ } .text-ellipsis{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } /*! 7.9. Border Size */ @@ -17514,6 +17685,7 @@ img.thumbnail{ /*! 7.24. Miscellaneous */ .no-transition{ -webkit-transition:none !important; + -o-transition:none !important; transition:none !important; } .no-transform{ @@ -17571,6 +17743,7 @@ img.thumbnail{ .fade-leave.fade-leave-active{ -webkit-transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; + -o-transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } @@ -17586,6 +17759,7 @@ img.thumbnail{ .fade-leave.fade-leave-active .content{ -webkit-transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; + -o-transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } @@ -17662,6 +17836,7 @@ img.thumbnail{ .fade-enter.fade-enter-active .header{ -webkit-transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; + -o-transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } @@ -17672,6 +17847,7 @@ img.thumbnail{ .fade-leave.fade-leave-active{ opacity:0; -webkit-transition:all 400ms ease-in-out; + -o-transition:all 400ms ease-in-out; transition:all 400ms ease-in-out; } .fade-leave.fade-leave-active .header{ @@ -17679,6 +17855,7 @@ img.thumbnail{ -webkit-transform:translateY(-200px) translateZ(0); transform:translateY(-200px) translateZ(0); -webkit-transition:none; + -o-transition:none; transition:none; } .fade-leave.screen-container{ diff --git a/dist/OutSystemsUI.d.ts b/dist/OutSystemsUI.d.ts index 6af12ba66e..2213c9ec69 100644 --- a/dist/OutSystemsUI.d.ts +++ b/dist/OutSystemsUI.d.ts @@ -298,6 +298,7 @@ declare namespace OSFramework.OSUI.GlobalEnum { FieldSet = "fieldset", Input = "input", Link = "a", + Radio = "radio", Span = "span" } enum HTMLEvent { diff --git a/dist/OutSystemsUI.js b/dist/OutSystemsUI.js index ec02024f5e..139e12741c 100644 --- a/dist/OutSystemsUI.js +++ b/dist/OutSystemsUI.js @@ -373,6 +373,7 @@ var OSFramework; HTMLElement["FieldSet"] = "fieldset"; HTMLElement["Input"] = "input"; HTMLElement["Link"] = "a"; + HTMLElement["Radio"] = "radio"; HTMLElement["Span"] = "span"; })(HTMLElement = GlobalEnum.HTMLElement || (GlobalEnum.HTMLElement = {})); let HTMLEvent; @@ -4449,12 +4450,6 @@ var OSFramework; var BottomSheet; (function (BottomSheet_1) { class BottomSheet extends Patterns.AbstractPattern { - get gestureEventInstance() { - return this._gestureEventInstance; - } - get hasGestureEvents() { - return this._hasGestureEvents; - } constructor(uniqueId, configs) { super(uniqueId, new BottomSheet_1.BottomSheetConfig(configs)); this._isOpen = false; @@ -4467,6 +4462,12 @@ var OSFramework; }, }; } + get gestureEventInstance() { + return this._gestureEventInstance; + } + get hasGestureEvents() { + return this._hasGestureEvents; + } _handleFocusBehavior() { const opts = { focusTargetElement: this._parentSelf, @@ -8412,6 +8413,10 @@ var OSFramework; this._isHalfValue = false; const isInput = OSUI.Helper.Dom.Styles.ContainsClass(currentTarget, Rating_1.Enum.CssClass.RatingInput); if (isInput) { + const _lastChosen = this.selfElement.querySelectorAll(OSUI.GlobalEnum.HTMLElement.Input)[this.configs.RatingValue]; + if (_lastChosen) { + _lastChosen.ariaChecked = OSUI.Constants.A11YAttributes.States.False; + } this.configs.RatingValue = this._getValue(); this._setValue(true); } @@ -8422,17 +8427,22 @@ var OSFramework; } } _renderItem(index) { - const hideLabelClass = index === 0 ? Rating_1.Enum.CssClass.WCAGHideText : ''; const labelHTML = index !== 0 ? this._clonedPlaceholders : ''; const ratingInputId = this.uniqueId + '-rating-' + index; - const input = ``; - const label = ``; + const input = ``; + let label; + if (!this.configs.IsEdit) { + label = ``; + } + else { + label = ``; + } this._ratingFieldsetElem.innerHTML += input + label; } _setFieldsetDisabledStatus(isDisabled) { const isFieldsetDisabled = OSUI.Helper.Dom.Attribute.Get(this._ratingFieldsetElem, OSUI.GlobalEnum.HTMLAttributes.Disabled); if (isDisabled) { - OSUI.Helper.Dom.Attribute.Set(this._ratingFieldsetElem, OSUI.GlobalEnum.HTMLAttributes.Disabled, 'true'); + OSUI.Helper.Dom.Attribute.Set(this._ratingFieldsetElem, OSUI.GlobalEnum.HTMLAttributes.Disabled, OSUI.Constants.A11YAttributes.States.True); } else if (!isDisabled && isFieldsetDisabled) { OSUI.Helper.Dom.Attribute.Remove(this._ratingFieldsetElem, OSUI.GlobalEnum.HTMLAttributes.Disabled); @@ -8460,9 +8470,19 @@ var OSFramework; } _setIsEdit() { this._setIsDisabled(!this.configs.IsEdit); - this.configs.IsEdit - ? OSUI.Helper.Dom.Styles.AddClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit) - : OSUI.Helper.Dom.Styles.RemoveClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit); + const LabelList = this.selfElement.querySelectorAll(OSUI.Constants.Dot + Rating_1.Enum.CssClass.RatingItem); + if (this.configs.IsEdit) { + OSUI.Helper.Dom.Styles.AddClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit); + LabelList.forEach((label) => { + label.removeAttribute(OSUI.Constants.A11YAttributes.Aria.Hidden); + }); + } + else { + OSUI.Helper.Dom.Styles.RemoveClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit); + LabelList.forEach((label) => { + label.ariaHidden = OSUI.Constants.A11YAttributes.States.True; + }); + } this._manageRatingEvent(); } _setScale() { @@ -8487,6 +8507,7 @@ var OSFramework; } if (this.configs.RatingScale === 1) { ratingItems[1].checked = true; + ratingItems[1].ariaChecked = OSUI.Constants.A11YAttributes.States.True; return; } let newValue = this._isHalfValue || this._decimalValue > 0.7 @@ -8501,6 +8522,7 @@ var OSFramework; console.warn(`The value of the RatingValue property on the '${this.widgetId}' ${OSUI.GlobalEnum.PatternName.Rating} exceeds the scale boundaries. To ensure its correct behaviour, set a value smaller or equal to '${this.configs.RatingScale}'.`); } ratingItems[newValue].checked = true; + ratingItems[newValue].ariaChecked = OSUI.Constants.A11YAttributes.States.True; if (this._isHalfValue) { OSUI.Helper.Dom.Styles.AddClass(this.selfElement, Rating_1.Enum.CssClass.IsHalf); } diff --git a/src/scripts/OSFramework/OSUI/GlobalEnum.ts b/src/scripts/OSFramework/OSUI/GlobalEnum.ts index 499692e107..231dbbe6c3 100644 --- a/src/scripts/OSFramework/OSUI/GlobalEnum.ts +++ b/src/scripts/OSFramework/OSUI/GlobalEnum.ts @@ -183,6 +183,7 @@ namespace OSFramework.OSUI.GlobalEnum { FieldSet = 'fieldset', Input = 'input', Link = 'a', + Radio = 'radio', Span = 'span', } diff --git a/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts b/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts index 8c2818b2a6..174fa32642 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts @@ -131,7 +131,7 @@ namespace OSFramework.OSUI.Patterns.Rating { * Method that handles the click event and set the new value, by checking the input:checked * * @private - * @param {MouseEvent} e + * @param {MouseEvent} * @memberof Rating */ private _ratingOnClick(e: MouseEvent): void { @@ -142,6 +142,13 @@ namespace OSFramework.OSUI.Patterns.Rating { // Check if the e.target is a label with the Enum.RatingCssClass.RatingInput class const isInput = Helper.Dom.Styles.ContainsClass(currentTarget, Enum.CssClass.RatingInput); if (isInput) { + const _lastChosen = this.selfElement.querySelectorAll(GlobalEnum.HTMLElement.Input)[ + this.configs.RatingValue + ]; + if (_lastChosen) { + _lastChosen.ariaChecked = Constants.A11YAttributes.States.False; + } + // If it is, then get the input:checked value this.configs.RatingValue = this._getValue(); // And use that value to set a new Rating Value @@ -169,16 +176,20 @@ namespace OSFramework.OSUI.Patterns.Rating { * @memberof Rating */ private _renderItem(index: number): void { - // If first input, whihc is hidden, than also hide the label - const hideLabelClass: string = index === 0 ? Enum.CssClass.WCAGHideText : ''; // if not first input, which is hidden, add the html stored form the placeholders const labelHTML = index !== 0 ? this._clonedPlaceholders : ''; // Create a unique rating input id, based on the index const ratingInputId: string = this.uniqueId + '-rating-' + index; - // Craete input and label html - const input = ``; - const label = ``; + // Create input and label html + const input = ``; + + let label; + if (!this.configs.IsEdit) { + label = ``; + } else { + label = ``; + } // Append new input + label to fieldset's html this._ratingFieldsetElem.innerHTML += input + label; @@ -198,7 +209,11 @@ namespace OSFramework.OSUI.Patterns.Rating { ); if (isDisabled) { - Helper.Dom.Attribute.Set(this._ratingFieldsetElem, GlobalEnum.HTMLAttributes.Disabled, 'true'); + Helper.Dom.Attribute.Set( + this._ratingFieldsetElem, + GlobalEnum.HTMLAttributes.Disabled, + Constants.A11YAttributes.States.True + ); } else if (!isDisabled && isFieldsetDisabled) { Helper.Dom.Attribute.Remove(this._ratingFieldsetElem, GlobalEnum.HTMLAttributes.Disabled); } @@ -261,11 +276,22 @@ namespace OSFramework.OSUI.Patterns.Rating { private _setIsEdit(): void { // Set the fieldset and input disabled attribute status this._setIsDisabled(!this.configs.IsEdit); + const LabelList = this.selfElement.querySelectorAll(Constants.Dot + Enum.CssClass.RatingItem); // Toggle the is-edit class - this.configs.IsEdit - ? Helper.Dom.Styles.AddClass(this.selfElement, Enum.CssClass.IsEdit) - : Helper.Dom.Styles.RemoveClass(this.selfElement, Enum.CssClass.IsEdit); + if (this.configs.IsEdit) { + Helper.Dom.Styles.AddClass(this.selfElement, Enum.CssClass.IsEdit); + + LabelList.forEach((label) => { + label.removeAttribute(Constants.A11YAttributes.Aria.Hidden); + }); + } else { + Helper.Dom.Styles.RemoveClass(this.selfElement, Enum.CssClass.IsEdit); + + LabelList.forEach((label) => { + label.ariaHidden = Constants.A11YAttributes.States.True; + }); + } // Review if there's a need to add/remove the click event, accordingly to the IsEdit value this._manageRatingEvent(); @@ -329,6 +355,7 @@ namespace OSFramework.OSUI.Patterns.Rating { // If there's only one rating item, then there's no need for further checks, this one will be checked if (this.configs.RatingScale === 1) { ratingItems[1].checked = true; + ratingItems[1].ariaChecked = Constants.A11YAttributes.States.True; return; } @@ -358,6 +385,7 @@ namespace OSFramework.OSUI.Patterns.Rating { // Set the itemas as :checked ratingItems[newValue].checked = true; + ratingItems[newValue].ariaChecked = Constants.A11YAttributes.States.True; // If is-half add the appropriate class, otherwise just declare the this.isHalfValue, to complete the if statement if (this._isHalfValue) { diff --git a/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss b/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss index 616615ff51..da9fa5916b 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss @@ -5,6 +5,7 @@ /// .rating { + position: relative; display: inline-flex; flex-wrap: wrap; font-size: var(--rating-size); @@ -15,21 +16,20 @@ -servicestudio-display: inline-flex; } - &.rating { - &-small { - .rating-item { - padding-right: calc(var(--rating-size) + var(--space-xs)); - } + &.rating-small { + --rating-size: 8px; - --rating-size: 8px; + .rating-item { + padding-right: calc(var(--rating-size) + var(--space-xs)); } + } - &-medium { - --rating-size: 24px; - } + &.rating-medium { + --rating-size: 24px; } &.is-edit { + pointer-events: initial; .rating-item { cursor: pointer; pointer-events: auto; @@ -80,60 +80,103 @@ opacity: 0; z-index: var(--layer-global-screen); } - } - .rating-item[class*='rating-']:last-of-type { - padding-right: 0; + &:last-of-type { + padding-right: 0; + } } - // These need to be separated, to keep exact CSS specificty, for the hover/ checked styles to work as intended - /* Checked styles*/ - input:checked + label .rating-item-empty, - input:checked ~ label .rating-item-filled { - opacity: 0; + input { + &:checked + .rating-item .rating-item-empty, + &:checked ~ .rating-item .rating-item-filled { + opacity: 0; + } } - &.is-half .rating-item-half { - z-index: var(--layer-local-tier-1); + &.is-half { + input:checked ~ .rating-item .rating-item-half { + opacity: 0; + } } - &.is-half input:checked + label .rating-item-half { + /* Selected Styles*/ + &:hover input + .rating-item .rating-item-filled { opacity: 1; } - &.is-half input:checked + label .rating-item-filled { - opacity: 0; - } + input { + &:first-of-type { + + .rating-item { + background: transparent; + display: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + box-shadow: 0 0 0 3px var(--color-focus-outer); + } + &:focus:checked + .rating-item { + display: block; + } + } - /* Selected Styles*/ - &:hover input + label .rating-item-filled, - &.is-half:hover input:checked + label .rating-item-filled { - opacity: 1; - } + // These need to be separated, to keep exact CSS specificty, for the hover/ checked styles to work as intended + /* Checked styles*/ + &:checked + .rating-item .rating-item-filled, + &:checked + .rating-item .rating-item-half, + &:checked ~ .rating-item .rating-item-empty, + &:hover ~ .rating-item .rating-item-empty, + &:focus ~ .rating-item .rating-item-empty, + &:focus + .rating-item .rating-item-filled { + opacity: 1; + } - input:focus + label .rating-item-empty, - input:hover ~ label .rating-item-filled { - opacity: 0; - } + //&:focus + .rating-item .rating-item-empty, + &:hover ~ .rating-item .rating-item-filled, + &:hover ~ .rating-item .rating-item-half { + opacity: 0; + } - input:checked ~ label .rating-item-empty, - input:checked + label .rating-item-filled, - input:checked + label .rating-item-half, - input:hover ~ label .rating-item-empty, - input:focus ~ label .rating-item-empty, - input:focus + label .rating-item-filled { - opacity: 1; + &:hover + .rating-item .rating-item-filled { + opacity: 1; + } } - input:hover ~ label .rating-item-filled, - &.is-half input:hover ~ label.rating-item .rating-item-filled, - &.is-half input:hover ~ label.rating-item .rating-item-half { - opacity: 0; - } + &.is-half { + .rating-item-half { + z-index: var(--layer-local-tier-1); + } - input:hover + label .rating-item-filled, - &.is-half input:hover + label.rating-item .rating-item-filled { - opacity: 1; + input:checked + .rating-item { + .rating-item-half { + opacity: 1; + } + + .rating-item-filled { + opacity: 0; + } + } + + input:hover ~ .rating-item { + .rating-item-filled, + .rating-item-half { + opacity: 0; + } + } + + &:hover input:checked + .rating-item .rating-item-filled, + input:hover + .rating-item .rating-item-filled { + opacity: 1; + } + + &:hover input:hover ~ .rating-item .rating-item-filled { + opacity: 0; + } + + &:hover input:hover + .rating-item .rating-item-filled { + opacity: 1; + } } .icon-states { @@ -192,8 +235,23 @@ // Accessibility ----------------------------------------------------------------- /// .has-accessible-features { - input:focus + .rating-item > div { - box-shadow: 0 0 0 3px var(--color-focus-outer); + .rating { + &.is-half input:focus + .rating-item .rating-item-filled, + &:not(.is-half) input:focus + .rating-item .rating-item-half, + input:checked + .rating-item .rating-item-empty { + &, + * { + box-shadow: none; + } + } + + &.is-half input:focus + .rating-item .rating-item-half, + &:not(.is-half) input:focus + .rating-item .rating-item-filled { + &, + * { + box-shadow: 0 0 0 3px var(--color-focus-outer); + } + } } } @@ -207,4 +265,4 @@ } } } -} \ No newline at end of file +}