@ui5/webcomponents 1.0.0 → 1.1.1

package/src/themes/Switch.css

@@ -0,0 +1,370 @@
+@import "./InvisibleTextStyles.css";
+@import "./TapHighlightColor.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+.ui5-switch-root {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: var(--_ui5_switch_height);
+	min-width: var(--_ui5_switch_width);
+	cursor: pointer;
+	outline: none;
+	border-radius: var(--_ui5-switch-root-border-radius);
+}
+
+.ui5-switch-root.ui5-switch--no-label {
+	min-width: var(--_ui5_switch_no_label_width);
+}
+
+.ui5-switch-inner {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	width: 100%;
+	min-width: inherit;
+	overflow: hidden;
+	pointer-events: none;
+	will-change: transform;
+}
+
+:host([checked]) .ui5-switch-inner {
+	border-radius: 6.25rem;
+	box-shadow: var(--_ui5-switch-root-box-shadow);
+}
+
+.ui5-switch-track {
+	height: var(--_ui5_switch_track_height);
+	width: 100%;
+	display: flex;
+	align-items: center;
+	background: var(--_ui5-switch_track-off-background);
+	border: var(--_ui5-switch-track-border);
+	border-color: var(--_ui5-switch-track-border_color);
+	border-radius: var(--_ui5_switch_track_border_radius);
+	box-sizing: border-box;
+	transition: var(--_ui5-switch-track-transition);
+}
+
+.ui5-switch--no-label .ui5-switch-track {
+	height: var(--_ui5_switch_track_no_label_height);
+}
+
+.ui5-switch-slider {
+	position: relative;
+	height: var(--_ui5_switch_height);
+	width: 100%;
+	transition: transform 0.1s ease-in;
+	transform-origin: top left;
+}
+
+.ui5-switch-slider > *:not(.ui5-switch-handle) {
+	display: var(--_ui5-switch-slider-texts-display);
+}
+
+.ui5-switch-handle {
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	left: var(--_ui5-switch-handle-left);
+	width: var(--_ui5_switch_handle_width);
+	height: var(--_ui5_switch_handle_height);
+	background: var(--_ui5_switch_handle_bg);
+	border: var(--_ui5-switch-handle-border);
+	border-radius: var(--_ui5_switch_handle_border_radius);
+	box-sizing: border-box;
+}
+
+.ui5-switch-handle-icon {
+	display: var(--_ui5-switch-handle-icon-display);
+	color: var(--_ui5-switch_track-off-background);
+	transition: var(--_ui5-switch-track-transition);
+}
+
+:host([checked]) .ui5-switch-handle-icon {
+	color: var(--_ui5-switch_track-on-background)
+}
+
+.ui5-switch-text {
+	display: flex;
+	justify-content: center;
+	position: absolute;
+	min-width: 1.625rem;
+	padding: 0 0.125rem;
+	font-size: var(--sapFontSmallSize);
+	font-family: "72override", var(--sapFontFamily);
+	text-transform: uppercase;
+	text-align: center;
+	color: var(--sapTextColor);
+	white-space: nowrap;
+	user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+.ui5-switch-text--on {
+	left: var(--_ui5_switch_text_on_left);
+}
+
+.ui5-switch-text--off {
+	right: 0;
+}
+
+.ui5-switch-handle,
+.ui5-switch-text {
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+/* switch focused */
+.ui5-switch-desktop.ui5-switch-root:focus::after {
+	content: "";
+	position: absolute;
+	left: var(--_ui5_switch_root_outline_left_right);
+	width: var(--_ui5_switch_focus_width_size);
+	height: var(--_ui5_switch_focus_height_size);
+	top: var(--_ui5_switch_root_outline_top_bottom);
+	bottom: var(--_ui5_switch_root_outline_top_bottom);
+	right: var(--_ui5_switch_root_outline_left_right);
+	border: var(--_ui5_switch_focus_outline);
+	border-radius: var(--_ui5_switch_root_after_boreder_radius);
+	pointer-events: none;
+	transition: var(--_ui5-switch-track-transition);
+	outline: var(--_ui5_switch_root_after_outline);
+}
+
+/* switch hidden input */
+.ui5-switch-root .ui5-switch-input {
+	position: absolute;
+	left: 0;
+	width: 0;
+	height: 0;
+	margin: 0;
+	visibility: hidden;
+	-webkit-appearance: none;
+}
+
+/* switch disabled */
+.ui5-switch-root.ui5-switch--disabled {
+	opacity: var(--_ui5_switch_disabled_opacity);
+	cursor: default;
+}
+
+.ui5-switch-root.ui5-switch--disabled.ui5-switch--checked .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_disabled_checked_bg);
+}
+
+
+.ui5-switch-root.ui5-switch--disabled .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_disabled_bg);
+}
+
+.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-track {
+	background: var(--_ui5_switch_track_disabled_semantic_checked_bg);
+}
+
+.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_disabled_semantic_checked_bg);
+}
+
+.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled:not(.ui5-switch--checked) .ui5-switch-track {
+	background: var(--_ui5_switch_track_disabled_semantic_bg);
+}
+
+.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled:not(.ui5-switch--checked) .ui5-switch-handle {
+	background: var(--_ui5_switch_semantic_button_background);
+}
+
+/* switch checked */
+.ui5-switch-root.ui5-switch--checked .ui5-switch-handle {
+	background:  var(--_ui5_switch_handle_checked_bg);
+	border-color: var(--_ui5_switch_handle_checked_border_color);
+}
+
+.ui5-switch-root.ui5-switch--checked .ui5-switch-track {
+	background: var(--_ui5-switch_track-on-background);
+}
+
+.ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
+	/* Move slider to oposite end, taking into account the handle as an offset. */
+	/* Note: translate(calc()) does not work in IE11 */
+	transform	: var(--_ui5_switch_slide_transform);
+}
+
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled) .ui5-switch-text--on,
+.ui5-switch-root.ui5-switch--checked .ui5-switch-text--off {
+	color: var(--sapButton_Track_Selected_TextColor);
+}
+
+/* switch no label icon */
+.ui5-switch-text .ui5-switch-text--on .ui5-switch-no-label-icon {
+	display: flex;
+	justify-content: center;
+	font-size: var(--sapFontSmallSize);
+}
+
+.ui5-switch--no-label .ui5-switch-no-label-icon-on {
+	color: var(--sapButton_Track_Selected_TextColor);
+	width: .75rem;
+	height: .75rem;
+	display: var(--_ui5-switch-track-icon-display);
+}
+
+.ui5-switch--no-label .ui5-switch-no-label-icon-off {
+	color: var(--sapButton_Track_TextColor);
+	width: .75rem;
+	height: .75rem;
+	display: var(--_ui5-switch-track-icon-display);
+}
+
+/* switch semantic off */
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-handle {
+	border-color: var(--sapSuccessBorderColor);
+}
+
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-track {
+	border-color: var(--_ui5_switch_track_semantic_border_color);
+	background: var(--_ui5_switch_track_semantic_success_backgroud_color);
+}
+
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-handle {
+	background: var(--_ui5_switch_semantic_button_background);
+}
+
+/* switch semantic icon and type noLabel icon in horizon theme */
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-text,
+.ui5-switch-root.ui5-switch--no-label .ui5-switch-text {
+	display: flex;
+	justify-content: center;
+	font-size: var(--sapFontSmallSize);
+}
+
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-on,
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-off {
+	width: 0.75rem;
+	height: 0.75rem;
+}
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-on {
+	border-color: var(--sapSuccessBorderColor);
+	color: var(--sapPositiveElementColor);
+}
+
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-off {
+	color: var(--sapNegativeElementColor);
+}
+
+/* switch semantic on */
+.ui5-switch-root.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-track {
+	border-color: var(--_ui5_switch_track_semantic_not_checked_border_color);
+	background: var(--_ui5_switch_track_semantic_error_backgroud_color);
+}
+
+.ui5-switch-root.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-handle {
+	border-color: var(--sapErrorBorderColor);
+	background: var(--_ui5_switch_semantic_button_background);
+}
+
+/* switch active effects */
+
+/* active & off */
+
+:host([active]) .ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled) .ui5-switch-track {
+	background: var( --_ui5-switch_track-off-active-background);
+}
+
+/* active & on */
+
+:host([active]) .ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
+	background: var(--_ui5-switch_track-on-active-background);
+}
+
+/* switch hover effects */
+
+/* switch on hover, when switched off */
+.ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled):hover .ui5-switch-track {
+	border-color: var(--_ui5_switch_handle_hover_border_color);
+}
+
+.ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled):hover .ui5-switch-handle-icon {
+	color: var(--_ui5-switch_track-off-hover-color);
+}
+
+.ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled):hover .ui5-switch-handle {
+	background: var(--sapButton_Hover_Background);
+	box-shadow: var(--_ui5-switch_handle-off-hover_box_shadow);
+}
+
+ /* switch on hover, when switched on */
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
+	background: var(--sapButton_Selected_Hover_Background);
+	border-color: var(--_ui5_switch_handle_checked_border_color);
+	box-shadow: var(--_ui5-switch_handle-on-hover_box_shadow);
+}
+
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
+	border-color: var(--_ui5_switch_handle_hover_border_color);
+	background: var(--_ui5-switch_track-on-hover-background);
+}
+
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle-icon {
+	color: var(--_ui5-switch_track-on-hover-color);
+}
+
+/* semantic switch on hover, when switched off */
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic:not(.ui5-switch--disabled):hover .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_semantic_hover_bg);
+	border-color: var(--_ui5_switch_handle_semantic_hover_border_color);
+	box-shadow: var(--sapContent_Negative_Shadow);
+}
+
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic:not(.ui5-switch--disabled):hover .ui5-switch-track {
+	border-color: var(--_ui5_switch_track_semantic_hover_border_color);
+}
+
+/* semantic switch on hover, when switched on */
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_semantic_checked_hover_bg);
+	border-color: var(--_ui5_switch_handle_semantic_checked_hover_border_color);
+	box-shadow: var(--sapContent_Informative_Shadow);
+}
+
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
+	border-color: var(--_ui5_switch_track_semantic_checked_hover_border_color);
+	background: var(--_ui5_switch_track_semantic_success_backgroud_color);
+}
+
+.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-icon--on,
+.ui5-switch-root.ui5-switch--semantic:hover .ui5-switch-icon--on {
+	color: var(--_ui5_switch_text_on_semantic_color);
+}
+
+.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-icon--off,
+.ui5-switch-root.ui5-switch--semantic:hover .ui5-switch-icon--off {
+	color: var(--_ui5_switch_text_off_semantic_color);
+}
+
+/* RTL */
+[dir="rtl"].ui5-switch-root .ui5-switch-handle {
+	left: 0;
+	right: -1px;
+}
+
+[dir="rtl"].ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
+	transform: var(--_ui5_switch_rtl_transform);
+}
+
+[dir="rtl"].ui5-switch-root .ui5-switch-text--on {
+	right: var(--_ui5_switch_text_right);
+	left: auto;
+}
+
+[dir="rtl"].ui5-switch-root .ui5-switch-text--off {
+	right: auto;
+	left: 0;
+}

package/src/themes/Tab.css

@@ -0,0 +1,9 @@
+:host {
+	display: inline-block;
+	width: 100%;
+}
+
+.ui5-tab-root {
+	width: 100%;
+	height: 100%;
+}

package/src/themes/TabContainer.css

@@ -0,0 +1,128 @@
+/* ============================= */
+/* Global Base parameters        */
+/* ============================= */
+:host(:not([hidden])) {
+	display: inline-block;
+	width: 100%;
+}
+
+.ui5-tc-root {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: 1rem;
+}
+
+.ui5-tc__header {
+	position: relative;
+	padding: 0 1rem;
+	display: flex;
+	align-items: center;
+	height: var(--_ui5_tc_header_height);
+	background-color: var(--sapObjectHeader_Background);
+	box-shadow: var(--_ui5_tc_header_box_shadow);
+	box-sizing: border-box;
+}
+
+:host([tabs-placement="Bottom"]) .ui5-tc__header {
+	border-top: var(--_ui5_tc_header_border_bottom);
+}
+
+.ui5-tc-root.ui5-tc--textOnly .ui5-tc__header {
+	height: var(--_ui5_tc_header_height_text_only);
+}
+
+.ui5-tc-root.ui5-tc--textOnly.ui5-tc--withAdditionalText.ui5-tc--standardTabLayout .ui5-tc__header {
+	height: var(--_ui5_tc_header_height_text_with_additional_text);
+}
+
+.ui5-tc__tabStrip {
+	flex: 1;
+	display: flex;
+	overflow: hidden;
+	box-sizing: border-box;
+	position: relative;
+	white-space: nowrap;
+}
+
+.ui5-tc__separator:focus {
+    outline: none;
+}
+
+.ui5-tc__overflow {
+	flex: 0 0 0;
+	margin: 0 0.25rem;
+}
+
+.ui5-tc__overflow[hidden] {
+	display: none;
+}
+
+.ui5-tc__overflow > [ui5-button] {
+	margin-top: 0.25rem;
+	border-radius: 0.75rem;
+	height: 1.5rem;
+}
+
+.ui5-tc-root.ui5-tc--textOnly .ui5-tc__content {
+	height: calc(100% - var(--_ui5_tc_header_height_text_only)); /* the header height (text only tabs) */
+}
+
+.ui5-tc__content {
+	position: relative;
+	display: flex;
+	height: calc(100% - var(--_ui5_tc_header_height)); /* the header height (tabs with icons and text) */
+	padding: 1rem 2rem;
+	background-color: var(--sapGroup_ContentBackground);
+	border-bottom: var(--_ui5_tc_content_border_bottom);
+	box-sizing: border-box;
+}
+
+:host([tabs-placement="Bottom"]) .ui5-tc__content {
+	border-top: var(--_ui5_tc_content_border_bottom);
+}
+
+.ui5-tc__content--collapsed {
+	display: none;
+}
+
+.ui5-tc--transparent .ui5-tc__content {
+	background-color: transparent;
+}
+
+.ui5-tc__contentItem {
+	max-height: 100%;
+	display: flex;
+	flex-grow: 1;
+	overflow: auto;
+}
+
+.ui5-tc__contentItem[hidden] {
+	display: none;
+}
+
+/*** Responsive paddings ***/
+
+:host([media-range="S"]) .ui5-tc__header {
+	padding: 0;
+}
+
+:host([media-range="S"]) .ui5-tc__content {
+	padding: 1rem;
+}
+
+:host([media-range="XL"]) .ui5-tc__header {
+	padding: 0 2rem;
+}
+
+:host([media-range="XL"]) .ui5-tc__content {
+	padding: 1rem 3rem;
+}
+
+/*** RTL ***/
+[dir=rtl] .ui5-tc__overflow {
+	margin-right: auto;
+	margin-left: 0.25rem;
+}

package/src/themes/TabInOverflow.css

@@ -0,0 +1,61 @@
+.ui5-tab-overflow-item {
+	color: var(--_ui5_tc_overflowItem_default_color);
+}
+
+.ui5-tab-overflow-item--disabled {
+	cursor: default;
+	opacity: 0.5;
+}
+
+.ui5-tab-overflow-item--positive {
+	color: var(--_ui5_tc_overflowItem_positive_color);
+	border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
+}
+
+.ui5-tab-overflow-item--negative {
+	color: var(--_ui5_tc_overflowItem_negative_color);
+	border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
+}
+
+.ui5-tab-overflow-item--critical {
+	color: var(--_ui5_tc_overflowItem_critical_color);
+	border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
+}
+
+.ui5-tab-overflow-item--neutral {
+	color: var(--_ui5_tc_overflowItem_neutral_color);
+	border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
+}
+
+.ui5-tab-overflow-item[active] .ui5-tab-overflow-itemContent {
+	color: var(--sapList_Active_TextColor);
+}
+
+.ui5-tab-overflow-itemContent {
+	display: flex;
+	align-items: center;
+	padding: 0 0.5rem;
+	height: var(--_ui5_tc_item_text);
+	pointer-events: none;
+}
+
+.ui5-tab-overflow-item [ui5-icon] {
+	width: 1.375rem;
+	height: 1.375rem;
+	padding-right: 1rem;
+	color: var(--_ui5_tc_overflowItem_current_color);
+}
+
+.ui5-tab-overflow-item[hidden] {
+	display: none;
+}
+
+.ui5-tab-container-responsive-popover [ui5-li-custom][focused]:first-child::part(native-li)::after {
+	border-top-left-radius: var(--_ui5_tc_overflowItem_focus_border);
+	border-top-right-radius: var(--_ui5_tc_overflowItem_focus_border);
+}
+
+.ui5-tab-container-responsive-popover [ui5-li-custom][focused]:last-child::part(native-li)::after {
+	border-bottom-left-radius: var(--_ui5_tc_overflowItem_focus_border);
+	border-bottom-right-radius: var(--_ui5_tc_overflowItem_focus_border);
+}