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
+}