From 8ece11c3c13834ccbf24f1eff2fd6c7263fe256e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= <60441552+JoaoFerreira-FrontEnd@users.noreply.github.com> Date: Wed, 20 Sep 2023 19:14:06 +0100 Subject: [PATCH] - fix small issues related with specific interactions --- dist/OutSystemsUI.css | 179 ++++++++++++++++-- .../OSUI/Pattern/Rating/scss/_rating.scss | 12 ++ 2 files changed, 176 insertions(+), 15 deletions(-) diff --git a/dist/OutSystemsUI.css b/dist/OutSystemsUI.css index e49720af63..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{ @@ -12269,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{ @@ -12329,6 +12427,9 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ .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; @@ -12337,6 +12438,12 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ .rating.is-half input:hover + .rating-item .rating-item-filled{ opacity:1; } +.rating.is-half:hover input:hover ~ .rating-item .rating-item-filled{ + opacity:0; +} +.rating.is-half:hover input:hover + .rating-item .rating-item-filled{ + opacity:1; +} .rating .icon-states{ -servicestudio-display:flex; } @@ -12432,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; @@ -12564,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{ @@ -12669,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; } @@ -12680,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%; } @@ -12701,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%; } @@ -12726,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); @@ -12756,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; } @@ -12855,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{ @@ -12991,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); } @@ -13041,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); @@ -13068,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%; } @@ -13137,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{ @@ -13162,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{ @@ -13263,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; } @@ -13306,6 +13428,7 @@ button.OSFillParent{ } .carousel--animatable{ -webkit-transition:all 250ms linear; + -o-transition:all 250ms linear; transition:all 250ms linear; will-change:transform; } @@ -13391,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; @@ -13431,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{ @@ -13943,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%; @@ -14106,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{ @@ -14190,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{ @@ -14231,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%; } @@ -14391,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; @@ -14540,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{ @@ -14602,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; } @@ -14745,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; @@ -14781,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; } @@ -14877,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{ @@ -14888,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{ @@ -14899,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; } @@ -14913,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{ @@ -14949,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); } @@ -15224,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; } @@ -15280,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; } @@ -16359,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 */ @@ -17542,6 +17685,7 @@ img.thumbnail{ /*! 7.24. Miscellaneous */ .no-transition{ -webkit-transition:none !important; + -o-transition:none !important; transition:none !important; } .no-transform{ @@ -17599,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; } @@ -17614,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; } @@ -17690,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; } @@ -17700,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{ @@ -17707,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/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss b/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss index 19e23639be..da9fa5916b 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss @@ -152,6 +152,10 @@ .rating-item-half { opacity: 1; } + + .rating-item-filled { + opacity: 0; + } } input:hover ~ .rating-item { @@ -165,6 +169,14 @@ 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 {