@ui5/webcomponents 1.0.0 → 1.0.1

package/src/themes/SliderBase.css

@@ -0,0 +1,252 @@
+@import "./InvisibleTextStyles.css";
+
+:host([disabled]) {
+	opacity: var(--_ui5_slider_disabled_opacity);
+	cursor: default;
+	pointer-events: none;
+}
+
+:host {
+	box-sizing: border-box;
+	cursor: pointer;
+	vertical-align: top;
+	width: 100%;
+	height: 3.3125rem;
+}
+
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+.ui5-slider-root {
+	box-sizing: border-box;
+	height: 3.3125rem;
+	padding: 1rem 0;
+	outline: none;
+	touch-action: none;
+	-ms-touch-action: pan-y;
+}
+
+.ui5-slider-inner {
+	background-repeat: no-repeat;
+	position: relative;
+	min-width: var(--_ui5_slider_inner_min_width);
+	height: 100%;
+}
+
+.ui5-slider-progress-container {
+	width: 100%;
+	background: var(--_ui5_slider_progress_container_background);
+	border: var(--_ui5_slider_progress_border);
+	border-radius: var(--_ui5_slider_progress_border_radius);
+	height: var(--_ui5_slider_inner_height);
+	position: relative;
+}
+
+.ui5-slider-progress-container::before {
+	display: var(--_ui5_slider_progress_container_dot_display);
+	content: "";
+	position: absolute;
+	background-color: var(--_ui5_slider_progress_background);
+	border-radius: 50%;
+	width: 0.375rem;
+	height: 0.375rem;
+	left: -0.875rem;
+	top: -0.0625rem;
+}
+
+[dir="rtl"] .ui5-slider-progress-container::before {
+	background-color: var(--_ui5_slider_progress_container_dot_background);
+	left: -0.875rem;
+}
+
+.ui5-slider-progress-container::after {
+	display: var(--_ui5_slider_progress_container_dot_display);
+	content: "";
+	position: absolute;
+	background-color: var(--_ui5_slider_progress_container_dot_background);
+	border-radius: 50%;
+	width: 0.375rem;
+	height: 0.375rem;
+	right: -0.875rem;
+	top: -0.0625rem;
+}
+
+[dir="rtl"] .ui5-slider-progress-container::after {
+	background-color: var(--_ui5_slider_progress_background);
+	right: -0.875rem;
+}
+
+:host([ui5-range-slider]) .ui5-slider-progress-container::before {
+	background-color: var(--_ui5_slider_progress_container_dot_background);
+}
+
+.ui5-slider-progress {
+	background: var(--_ui5_slider_progress_background);
+	border-radius: var(--_ui5_slider_progress_border_radius);
+	height: var(--_ui5_slider_inner_height);
+	position: relative;
+	outline: none;
+}
+
+.ui5-slider-progress:focus::before {
+	display: var(--_ui5_range_slider_legacy_progress_focus_display);
+	content: '';
+	position: absolute;
+	width: 100%;
+	border: var(--_ui5_slider_progress_outline);
+	top: var(--_ui5_slider_progress_outline_offset);
+	height: var(--_ui5_slider_outer_height);
+}
+
+:host([ui5-range-slider]) .ui5-slider-progress:focus::after {
+	border: 0.125rem solid var(--sapContent_FocusColor);
+	border-radius: 0.5rem;
+	content: "";
+	display: var(--_ui5_range_slider_progress_focus_display);
+	position: absolute;
+	top: var(--_ui5_range_slider_progress_focus_top);
+	left: var(--_ui5_range_slider_progress_focus_left);
+	padding: var(--_ui5_range_slider_progress_focus_padding);
+	width: 100%;
+	height: var(--_ui5_range_slider_progress_focus_height)
+}
+
+.ui5-slider-tickmarks {
+	position: absolute;
+	width: 100%;
+	height: 1rem;
+	top: var(--_ui5_slider_tickmark_top);
+}
+
+.ui5-slider-handle {
+	background: var(--_ui5_slider_handle_background);
+	border: var(--_ui5_slider_handle_border);
+	border-radius: var(--_ui5_slider_handle_border_radius);
+	box-shadow: var(--_ui5_slider_handle_box_shadow);
+	margin-left: var(--_ui5_slider_handle_margin_left);
+	top: var(--_ui5_slider_handle_top);
+	position: absolute;
+	outline: none;
+	height: var(--_ui5_slider_handle_height);
+	width: var(--_ui5_slider_handle_width);
+}
+
+[slider-icon] {
+	display: var(--_ui5_slider_handle_icon_display);
+	color: #2d8ae6;
+	position: relative;
+	top: var(--_ui5_slider_icon_top);
+	left: var(--_ui5_slider_icon_left);
+	vertical-align: middle;
+}
+
+.ui5-slider-handle--start, .ui5-slider-handle--end {
+	background: var(--_ui5_range_slider_handle_background);
+}
+
+[dir="rtl"] .ui5-slider-handle {
+	margin-right: var(--_ui5_slider_handle_margin_left);
+}
+
+[dir="rtl"] .ui5-slider-handle [slider-icon] {
+	right: var(--_ui5_slider_icon_left);
+	left: 0;
+}
+
+.ui5-slider-root:hover .ui5-slider-handle:not(:focus), .ui5-slider-handle:hover {
+	background: var(--_ui5_slider_handle_hover_background);
+	border: var(--_ui5_slider_handle_hover_border);
+}
+
+.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle, .ui5-slider-inner .ui5-slider-handle:focus {
+	outline: var(--_ui5_slider_handle_outline);
+	outline-offset: var(--_ui5_slider_handle_outline_offset);
+	border: var(--_ui5_slider_handle_focus_border);
+	box-shadow: var(--_ui5_slider_handle_box_shadow_focus);
+	margin-left: var(--_ui5_slider_handle_focused_margin_left);
+	top: var(--_ui5_slider_handle_focused_top);
+}
+
+.ui5-slider-root:active .ui5-slider-handle, .ui5-slider-handle:active {
+	background: var(--_ui5_slider_handle_hover_background);
+	border: var(--_ui5_slider_handle_active_border);
+}
+
+.ui5-slider-root:hover .ui5-slider-inner .ui5-slider-handle.ui5-slider-handle--start, 
+.ui5-slider-root:hover .ui5-slider-inner .ui5-slider-handle--end,
+.ui5-slider-root:active .ui5-slider-inner .ui5-slider-handle.ui5-slider-handle--start, 
+.ui5-slider-root:active .ui5-slider-inner .ui5-slider-handle--end,
+.ui5-slider-root .ui5-slider-inner .ui5-slider-handle.ui5-slider-handle--start:focus, 
+.ui5-slider-root .ui5-slider-inner .ui5-slider-handle--end:focus,
+.ui5-slider-handle--start:active, .ui5-slider-handle--end:active {
+	background: var(--_ui5_range_slider_handle_hover_background);
+	
+}
+
+.ui5-slider-root:hover .ui5-slider-inner .ui5-slider-handle.ui5-slider-handle--start [slider-icon],
+.ui5-slider-root:hover .ui5-slider-inner .ui5-slider-handle--end [slider-icon],
+.ui5-slider-root:active .ui5-slider-inner .ui5-slider-handle.ui5-slider-handle--start [slider-icon],
+.ui5-slider-root:active .ui5-slider-inner .ui5-slider-handle--end [slider-icon],
+.ui5-slider-handle--start:active:after, .ui5-slider-handle--end:active [slider-icon],
+.ui5-slider-root .ui5-slider-inner .ui5-slider-handle.ui5-slider-handle--start:focus [slider-icon], 
+.ui5-slider-root .ui5-slider-inner .ui5-slider-handle--end:focus [slider-icon] {
+	display: var(--_ui5_range_slider_handle_hover_icon_display);
+}
+
+.ui5-slider-root .ui5-slider-inner .ui5-slider-handle.ui5-slider-handle--start:focus, 
+.ui5-slider-root .ui5-slider-inner .ui5-slider-handle--end:focus {
+	border: var(--_ui5_slider_handle_focus_border);
+}
+
+.ui5-slider-root:focus:hover .ui5-slider-handle, .ui5-slider-handle:focus:hover {
+	border: var(--_ui5_slider_handle_focus_border);
+}
+
+.ui5-slider-tooltip {
+	text-align: center;
+	visibility: hidden;
+	pointer-events: none;
+	line-height: 1rem;
+	position: absolute;
+	left: 50%;
+	transform: translate(-50%);
+	bottom: var(--_ui5_slider_tooltip_bottom);
+	background: var(--_ui5_slider_tooltip_background);
+	border: var(--_ui5_slider_tooltip_border);
+	border-radius: var(--_ui5_slider_tooltip_border_radius);
+	box-shadow: var(--_ui5_slider_tooltip_box_shadow);
+	font-size: var(--_ui5_slider_tooltip_fontsize);
+	color: var(--_ui5_slider_tooltip_color);
+	height: var(--_ui5_slider_tooltip_height);
+	min-width: var(--_ui5_slider_tooltip_min_width);
+	padding: var(--_ui5_slider_tooltip_padding);
+}
+
+.ui5-slider-tooltip-value {
+	position: relative;
+}
+
+.ui5-slider-labels {
+	position: absolute;
+	top: 1rem;
+	margin: 0;
+	padding: 0;
+	white-space: nowrap;
+}
+
+.ui5-slider-labels li {
+	position: relative;
+	list-style: none;
+	padding-top: 0.3125rem;
+	height: 1rem;
+	margin: 0;
+	text-align: center;
+	display: inline-block;
+	color: var(--_ui5_slider_label_color);
+	font-size: var(--_ui5_slider_label_fontsize);
+}
+
+.ui5-slider-hidden-labels li:not(:first-child):not(:last-child) {
+	visibility: hidden;
+}

package/src/themes/StepInput.css

@@ -0,0 +1,269 @@
+@import "./InvisibleTextStyles.css";
+@import "./InputIcon.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+	width: 100%;
+}
+
+:host {
+	color: var(--sapField_TextColor);
+	background-color: var(--sapField_Background);
+	border: var(--_ui5_step_input_border_style);
+	border-radius: var(--sapField_BorderCornerRadius);
+	box-sizing: border-box;
+	height: var(--_ui5_input_height);
+	position: relative;
+}
+
+:host .ui5-step-input-input {
+	text-align: inherit;
+}
+
+:host(:not([value-state]):not([readonly]):not([disabled])){
+	box-shadow: none;
+}
+
+:host([value-state="Success"]:not([readonly]):not([disabled])) {
+	background-color: var(--sapField_SuccessBackground);
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled])) {
+	background-color: var(--sapField_InvalidBackground);
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) {
+	background-color: var(--sapField_InformationBackground);
+}
+
+:host([value-state="Warning"]:not([readonly]):not([disabled])) {
+	background-color: var(--sapField_WarningBackground);
+}
+:host(:not([value-state]):not([readonly]):not([disabled]):hover),
+:host([value-state="None"]:not([readonly]):not([disabled]):hover) {
+	background-color: var(--_ui5_step_input_border_color_hover);
+	border: var(--_ui5_step_input_border_hover);
+}
+:host(:not([value-state]):not([readonly]):not([disabled]):not([focused]):hover),
+:host([value-state="None"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	border: var(--_ui5_step_input_border_style_hover);
+	box-shadow: var(--_ui5-input-hover-box-shadow);
+}
+
+:host([value-state="Success"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--_ui5-input-value-state-success-hover-box-shadow);
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--_ui5-input-value-state-information-hover-box-shadow);
+}
+
+:host([value-state="Warning"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--_ui5-input-value-state-warning-hover-box-shadow);
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--_ui5-input-value-state-error-hover-box-shadow);
+}
+
+:host([value-state="Success"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Error"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Information"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Warning"]:not([readonly]):not([disabled]):hover) {
+	background-color: var(--_ui5-step_input_button_state_hover_background_color);
+}
+
+:host(:not([value-state]):not([readonly]):not([disabled])[focused]),
+:host([value-state="None"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Success"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Error"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Information"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Warning"]:not([readonly]):not([disabled])[focused]){
+	background-color: var(--sapField_Focus_Background);
+} 
+
+:host([value-state="Success"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Error"]:not([readonly]):not([disabled]))::after,
+:host([value-state="None"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Information"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Warning"]:not([readonly]):not([disabled]))::after {
+	position: absolute;
+	content: "";
+	top: -1px;
+	right: -1px;
+	bottom: -1px;
+	left: -1px;
+	outline: none;
+	pointer-events: none;
+	border-radius: var(--sapField_BorderCornerRadius);
+	border-style: var(--_ui5_input_error_warning_border_style);
+	z-index: 3;
+	border-width: 0px;
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_InformationColor);
+	border-width: var(--_ui5-input-information_border_width);
+}
+
+:host([value-state="Warning"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_WarningColor);
+	border-width: 2px;
+}
+
+:host([value-state="Success"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_SuccessColor);
+	border-width: 1px;
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_InvalidColor);
+	border-width: var(--_ui5-input-information_border_width);
+}
+
+:host([value-state])::after {
+	border-width: var(--_ui5_input_state_border_width);
+}
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input {
+	background-color: var(--_ui5_input_input_background_color);
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input:hover {
+	background-color: var(--_ui5_step_input_input_error_background_color);
+}
+:host([value-state]:not([value-state="None"]) .ui5-step-input-input[focused]) {
+		outline: none;
+}
+
+:host .ui5-step-input-input {
+	width: 100%;
+	color: inherit;
+	background-color: inherit;
+	border: var(--_ui5_step_input_input_border);
+	box-sizing: border-box;
+	vertical-align: top;
+	margin-top: var(--_ui5_step_input_input_margin_top);
+	min-width: 9.125rem;
+	position: relative;
+	padding: 0px 2.5rem 0px 2.4375rem;
+	outline: none;
+}
+
+:host .ui5-step-input-input[readonly] { 
+	padding: 0;
+}
+
+:host .ui5-step-input-input:hover,
+:host .ui5-step-input-input[focused]{
+	box-shadow: none;
+}
+
+:host .ui5-step-input-root {
+	white-space: nowrap;
+}
+
+:host .ui5-step-input-input[text-align=left] {
+	text-align: left;
+}
+
+:host .ui5-step-input-input[text-align=center] {
+	text-align: center;
+}
+
+:host .ui5-step-input-input[text-align=right] {
+	text-align: right;
+}
+
+:host .ui5-step-icon {
+	position: absolute;
+	display: var(--_ui5_step_input_button_display);
+	height: 2rem;
+	height: 100%;
+	background-color: var(--_ui5_step_input_button_background_color);
+	z-index: 2;
+}
+
+:host .ui5-step-icon[focused] {
+	border: none;
+	outline: none;
+}
+
+:host .ui5-step-icon.ui5-step-dec {
+	left: var(--_ui5_step_input_button_left);
+}
+
+:host .ui5-step-icon.ui5-step-inc {
+	right: var(--_ui5_step_input_button_right);
+}
+
+:host .ui5-step-icon *:not([clickable]),
+:host .ui5-step-icon *:not([clickable]):active,
+:host .ui5-step-icon *:not([clickable]):hover {
+	opacity: 0.5;
+	background-color: transparent;
+	color: var(--sapContent_IconColor);
+}
+
+:host .ui5-step-icon :not([clickable]) *:hover,
+:host .ui5-step-icon :not([clickable]) *:active {
+	background-color: var(--sapField_Background);
+	color: var(--sapContent_IconColor);
+}
+
+:host .ui5-step-input-input[focused]::after {
+	position: absolute;
+	content: "";
+	border: var(--_ui5_step_input_input_border_focused_after);
+	top: var(--_ui5_step_input_input_border_top_bottom_focused_after);
+	right: 0px;
+	bottom: var(--_ui5_step_input_input_border_top_bottom_focused_after);
+	border-radius: var(--_ui5_step_input_input_border_radius_focused_after);
+	left: 0px;
+	outline: none;
+	pointer-events: none;
+	z-index: 3;
+}
+
+:host .ui5-step-input-input[focused] {
+	outline: none;
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+	border-color: var(--_ui5_step_input_input_information_border_color_focused_after);
+}
+
+:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+	border-color: var(--_ui5_step_input_input_warning_border_color_focused_after);
+}
+
+:host([value-state="Success"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+	border-color: var(--_ui5_step_input_input_success_border_color_focused_after);
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+	border-color: var(--_ui5_step_input_input_error_border_color_focused_after);
+}
+
+/* Disable spin buttons in Chrome, Safari, Edge, Opera */
+:host .ui5-step-input-input::-webkit-outer-spin-button,
+:host .ui5-step-input-input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+:host([disabled]) {
+	opacity: var(--_ui5_input_disabled_opacity);
+	cursor: default;
+	pointer-events: none;
+	background: var(--sapField_ReadOnly_Background);
+	border-color: var(--sapField_ReadOnly_BorderColor);
+}
+
+:host([disabled]) .ui5-step-icon {
+	background-color: var(--_ui5_step_input_disabled_button_background);
+}
+
+:host([disabled]) .ui5-step-icon [ui5-icon] {
+	color: var(--sapField_ReadOnly_BorderColor);
+}

package/src/themes/Suggestions.css

@@ -0,0 +1,14 @@
+.ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li][focused]:first-child::part(native-li)::after,
+.ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li-groupheader][focused]:first-child::part(native-li)::after,
+.ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li-suggestion-item][focused]:first-child::part(native-li)::after,
+.ui5-tokenizer-list [ui5-li][focused]:first-child::part(native-li)::after {
+	border-top-left-radius: var(--_ui5_suggestions_item_focus_border_radius);
+	border-top-right-radius: var(--_ui5_suggestions_item_focus_border_radius);
+}
+
+.ui5-suggestions-popover [ui5-li][focused]:last-child::part(native-li)::after,
+.ui5-suggestions-popover [ui5-li-suggestion-item][focused]:last-child::part(native-li)::after,
+.ui5-tokenizer-list [ui5-li][focused]:last-child::part(native-li)::after {
+	border-bottom-left-radius: var(--_ui5_suggestions_item_focus_border_radius);
+	border-bottom-right-radius: var(--_ui5_suggestions_item_focus_border_radius);
+}