@ui5/webcomponents 0.0.0-20acae2ee → 0.0.0-20ff83d14

package/src/themes/TreeItem.css

@@ -0,0 +1,129 @@
+@import "./InvisibleTextStyles.css";
+:host(:not([hidden])) {
+	display: block;
+	position: relative;
+}
+
+.ui5-li-tree-text-wrapper {
+	flex: auto;
+}
+
+.ui5-li-root-tree {
+	padding-inline-start: 0;
+}
+
+:host(:not([level="1"])) .ui5-li-root {
+	border-color: var(--sapList_AlternatingBackground);
+}
+
+:host([_toggle-button-end][selected]:not([level="1"])) .ui5-li-root {
+	border-bottom: var(--ui5-listitem-selected-border-bottom);
+}
+
+:host([_toggle-button-end]) .ui5-li-root-tree:hover,
+:host([_mode]:not([_mode="None"]):not([_mode="Delete"]):not([active])) .ui5-li-root-tree:hover {
+	cursor: pointer;
+}
+
+:host([_toggle-button-end]:not([selected])) .ui5-li-root-tree:hover,
+:host(:not([_mode="None"]):not([_mode="Delete"]):not([active]):not([selected])) .ui5-li-root-tree:hover {
+	background: var(--sapList_Hover_Background);
+}
+
+:host(:not([level="1"]):not([active]):not([selected])) .ui5-li-root-tree {
+	background: var(--sapList_AlternatingBackground);
+}
+
+:host([_toggle-button-end]:not([level="1"])) .ui5-li-root-tree {
+	background: var(--ui5-listitem-background-color);
+}
+
+:host([_toggle-button-end][selected]:not([level="1"])) .ui5-li-root-tree {
+	background: var(--sapList_SelectionBackgroundColor);
+}
+
+:host(:not([_mode="None"]):not([_mode="Delete"]):not([active])[selected]) .ui5-li-root-tree:hover {
+	background-color: var(--sapList_Hover_SelectionBackground);
+}
+
+.ui5-li-tree-toggle-box {
+	min-width: var(--_ui5-tree-toggle-box-width);
+	min-height: var(--_ui5-tree-toggle-box-height);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.ui5-li-tree-toggle-icon {
+	width: var(--_ui5-tree-toggle-icon-size);
+	height: var(--_ui5-tree-toggle-icon-size);
+	color: var(--sapContent_IconColor);
+	cursor: pointer;
+}
+
+:host([actionable]) .ui5-li-tree-toggle-icon {
+	color: var(--sapButton_TextColor);
+}
+
+:host([active][actionable]) .ui5-li-tree-toggle-icon {
+	color: var(--sapList_Active_TextColor);
+}
+
+/* move host styles to .ui5-li-root as the focused element of [ui5-tree-item]
+is the .ui5-li-root and not the host. The host height expands to fill subtree */
+
+:host {
+    height: unset;
+}
+
+.ui5-li-root {
+    height: var(--_ui5_list_item_base_height);
+}
+
+/* selected */
+:host([selected]) {
+    background: unset;
+}
+:host([selected]) .ui5-li-root {
+    background: var(--sapList_SelectionBackgroundColor);
+}
+
+:host([has-border]) {
+    border-bottom: unset;
+}
+:host([has-border]) .ui5-li-root {
+    border-bottom: var(--ui5-listitem-border-bottom);
+}
+
+/* focused & selected */
+:host(:not([focused])[selected][has-border]) {
+    border-bottom: unset;
+}
+:host(:not([focused])[selected][has-border]) .ui5-li-root {
+    border-bottom: var(--ui5-listitem-selected-border-bottom);
+}
+
+:host([focused][selected]) {
+    border-bottom: unset;
+}
+:host([focused][selected]) .ui5-li-root {
+    border-bottom: var(--ui5-listitem-focused-selected-border-bottom);
+}
+
+.ui5-tree-li-subtree {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* focused & active */
+:host([focused][active]) .ui5-li-root-tree {
+	background: var(--sapList_Active_Background);
+}
+
+:host([focused][active]) .ui5-li-root-tree .ui5-li-tree-toggle-icon,
+:host([focused][active]) .ui5-li-root-tree .ui5-li-title,
+:host([focused][active]) .ui5-li-root-tree .ui5-li-additional-text {
+	color: var(--sapList_Active_TextColor);
+}

package/src/themes/ValueStateMessage.css

@@ -0,0 +1,145 @@
+.ui5-valuestatemessage-popover {
+	border-radius: var(--_ui5_value_state_message_popover_border_radius);
+	box-shadow: var(--_ui5_value_state_message_popover_box_shadow);
+}
+
+.ui5-input-value-state-message-icon {
+	width: var(--_ui5_value_state_message_icon_width);
+	height: var(--_ui5_value_state_message_icon_height);
+	display: var(--_ui5_input_value_state_icon_display);
+	position: absolute;
+	padding-right: 0.375rem;
+}
+
+.ui5-valuestatemessage-root .ui5-input-value-state-message-icon {
+	left: var(--_ui5_input_value_state_icon_offset);
+}
+
+.ui5-input-value-state-message-icon[name="error"] {
+	color: var(--sapNegativeElementColor);
+}
+
+.ui5-input-value-state-message-icon[name="alert"] {
+	color: var(--sapCriticalElementColor);
+}
+
+.ui5-input-value-state-message-icon[name="success"] {
+	color: var(--sapPositiveElementColor);
+}
+
+.ui5-input-value-state-message-icon[name="information"] {
+	color: var(--sapInformativeElementColor);
+}
+
+.ui5-valuestatemessage-root {
+	box-sizing: border-box;
+	display: inline-block;
+	color: var(--sapTextColor);
+	font-size: var(--sapFontSmallSize);
+	font-family: "72override", var(--sapFontFamily);
+	height: auto;
+	padding: var(--_ui5_value_state_message_padding);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	min-width: 6.25rem;
+	border: var(--_ui5_value_state_message_border);
+	line-height: var(--_ui5_value_state_message_line_height);
+}
+
+[ui5-responsive-popover] .ui5-valuestatemessage-header, [ui5-popover] .ui5-valuestatemessage-header  {
+	min-height: 2rem;
+}
+
+[ui5-responsive-popover] .ui5-valuestatemessage-header {
+	padding: var(--_ui5_value_state_header_padding);
+	border: var(--_ui5_value_state_header_border);
+	border-bottom: var(--_ui5_value_state_header_border_bottom);
+	flex-grow: 1;
+	position: relative;
+}
+
+.ui5-valuestatemessage--success {
+	background: var(--sapSuccessBackground);
+}
+
+.ui5-valuestatemessage--warning {
+	background: var(--sapWarningBackground);
+}
+
+.ui5-valuestatemessage--error {
+	background: var(--sapErrorBackground);
+}
+
+.ui5-valuestatemessage--information {
+	background: var(--sapInformationBackground);
+}
+
+.ui5-responsive-popover-header[focused], .ui5-responsive-popover-header:focus {
+	outline-offset: var(--_ui5_value_state_header_offset);
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+}
+
+.ui5-valuestatemessage-popover::part(header),
+.ui5-valuestatemessage-popover::part(content) {
+	padding: 0;
+}
+
+.ui5-valuestatemessage-popover::part(header),
+.ui5-valuestatemessage-popover::part(footer) {
+	min-height: 0;
+}
+
+.ui5-valuestatemessage-popover::part(header),
+.ui5-popover-with-value-state-header::part(header),
+.ui5-popover-with-value-state-header-phone::part(header) {
+	margin-bottom: 0;
+}
+
+.ui5-popover-with-value-state-header-phone .ui5-valuestatemessage-root {
+	padding: var(--_ui5_value_state_message_padding_phone);
+	width: 100%;
+}
+
+.ui5-popover-with-value-state-header-phone .ui5-input-value-state-message-icon {
+	left: var(--_ui5_value_state_message_icon_offset_phone);
+}
+
+.ui5-popover-with-value-state-header-phone .ui5-valuestatemessage-header {
+	position: relative;
+	flex: none;
+	top: 0;
+	left: 0;
+}
+
+.ui5-popover-with-value-state-header-phone::part(content) {
+	padding: 0;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+.ui5-popover-with-value-state-header-phone [ui5-list] {
+	overflow: auto;
+}
+
+/* ValueState Header bottom border color in Responsive Popover and Dialog */
+[ui5-responsive-popover] .ui5-valuestatemessage--error {
+	box-shadow: var(--_ui5_value_state_header_box_shadow_error);
+}
+
+[ui5-responsive-popover] .ui5-valuestatemessage--information {
+	box-shadow: var(--_ui5_value_state_header_box_shadow_information);
+}
+
+[ui5-responsive-popover] .ui5-valuestatemessage--success {
+	box-shadow: var(--_ui5_value_state_header_box_shadow_success);
+}
+
+[ui5-responsive-popover] .ui5-valuestatemessage--warning {
+	box-shadow: var(--_ui5_value_state_header_box_shadow_warning);
+}
+
+/* Unset bottom border box-shadow in a specific case when the value state message is displayed on desktop in a popover and the suggestions list is empty */
+[ui5-responsive-popover].ui5-popover-with-value-state-header .ui5-valuestatemessage-root:has(+[ui5-list]:empty) {
+	box-shadow: none;
+}

package/src/themes/WheelSlider.css

@@ -0,0 +1,203 @@
+.ui5-wheelslider-root {
+	overflow: hidden;
+	height: 100%;
+	vertical-align: middle;
+	text-align: center;
+	box-sizing: border-box;
+	font-family: "72override", var(--sapFontFamily);
+	justify-content: space-between;
+	flex-direction: column;
+	display: inline-flex;
+	width: var(--_ui5_wheelslider_item_width);
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-label {
+	box-sizing: border-box;
+	height: 2rem;
+	line-height: 2rem;
+	width: var(--_ui5_wheelslider_item_width);
+	font-size: var(--sapFontSmallSize);
+	color: var(--_ui5_wheelslider_label_text_color);
+	text-align: center;
+	vertical-align: middle;
+	visibility: hidden;
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-arrow {
+	visibility: hidden;
+	box-sizing: border-box;
+	height: 1.5rem;
+	user-select: none;
+	outline: none
+}
+
+:host([expanded]) .ui5-wheelslider-arrow {
+	visibility: var(--_ui5_wheelslider_arrows_visibility);
+	box-sizing: border-box;
+	border-color: transparent;
+	cursor: pointer;
+}
+
+:host([expanded]) .ui5-wheelslider-arrow:hover {
+	visibility: var(--_ui5_wheelslider_arrows_visibility);
+	box-sizing: border-box;
+	border-color: inherit;
+	cursor: pointer;
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner {
+	position: relative;
+	overflow: hidden;
+	height: 100%;
+	box-sizing: border-box;
+	user-select: none;
+	list-style: none;
+	margin-top: 0rem;
+}
+
+:host([expanded]) .ui5-wheelslider-inner {
+	margin-top: 0;
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner .ui5-wheelslider-item {
+	height: var(--_ui5_wheelslider_item_height);
+	line-height: var(--_ui5_wheelslider_item_height);
+	width: var(--_ui5_wheelslider_item_width);
+	box-sizing: border-box;
+	background: var(--_ui5_wheelslider_selected_item_background_color);
+	border: 0.625px solid var(--_ui5_wheelslider_item_border_color);
+	font-size: var(--_ui5_wheelslider_item_text_size);
+	color: var(--_ui5_wheelslider_collapsed_item_text_color);
+	text-align: center;
+	border-radius: var(--_ui_wheelslider_item_border_radius);
+	cursor: pointer;
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner .ui5-wheelslider-item:hover {
+	background: var(--_ui_wheelslider_item_hover_color);
+	border-color: var(--_ui5_wheelslider_item_hovered_border_color);
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner .ui5-wheelslider-item:focus {
+	outline: 1px dotted black;
+	outline-offset: -3px;
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner .ui5-wheelslider-selection-frame {
+	width: var(--_ui5_wheelslider_item_width);
+	height: var(--_ui5_wheelslider_item_height);
+	position: absolute;
+	box-sizing: border-box;
+	visibility: hidden;
+	z-index: 1;
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner .ui5-wheelslider-wrapper > ul {
+	transition: all 400ms;
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	top: var(--_ui5_wheelslider_selection_frame_margin_top);
+	height: 3000px;
+	cursor: pointer;
+	list-style-type: none;
+}
+
+.ui5-wheelslider-root.ui5-phone .ui5-wheelslider-inner .ui5-wheelslider-wrapper > ul {
+	top: var(--_ui5_wheelslider_mobile_selection_frame_margin_top);
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-wrapper > ul {
+	list-style-type: none;
+	top: 0;
+	padding-top: calc(var(--_ui5_wheelslider_item_height) * 2);
+}
+
+:host([expanded]) .ui5-wheelslider-root.ui5-phone .ui5-wheelslider-inner .ui5-wheelslider-wrapper > ul {
+	list-style-type: none;
+	top: 0;
+	padding-top: calc(var(--_ui5_wheelslider_item_height) * 4);
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner .ui5-wheelslider-wrapper {
+	height: var(--_ui5_wheelslider_height);
+	position: relative;
+	overflow: hidden;
+	outline: none;
+}
+
+.ui5-wheelslider-root.ui5-phone .ui5-wheelslider-inner .ui5-wheelslider-wrapper {
+	height: var(--_ui5_wheelslider_mobile_height);
+}
+
+:host([expanded]) {
+	height: 100%;
+	cursor: default;
+	margin: 0;
+	justify-content: space-between;
+	flex-direction: column;
+	display: inline-flex;
+}
+
+:host([expanded]) .ui5-wheelslider-label {
+	display: block;
+	visibility: visible;
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner {
+	max-height: 100%;
+	height: var(--_ui5_wheelslider_height);
+}
+
+.ui5-wheelslider-root.ui5-phone .ui5-wheelslider-inner {
+	height: var(--_ui5_wheelslider_mobile_height);
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-item {
+	background: var(--_ui5_wheelslider_item_background_color);
+	color: var(--_ui5_wheelslider_item_text_color);
+	border: 1px solid var(--_ui5_wheelslider_item_expanded_border_color);
+	border-radius: var(--_ui_wheelslider_item_border_radius);
+	offset-position: auto;
+	cursor: auto;
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-item:hover {
+	background: var(--_ui_wheelslider_item_expanded_hover_color);
+	border-color: var(--_ui5_wheelslider_item_hovered_border_color);
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-item:active {
+	background: var(--_ui5_wheelslider_active_item_background_color);
+	color: var(--_ui5_wheelslider_active_item_text_color);
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-item:focus {
+	outline: 1px dotted black;
+	outline-offset: -3px;
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-selection-frame {
+	visibility: visible;
+	-webkit-box-shadow: inset 0px 0px 0px 2px var(--_ui5_wheelslider_selection_frame_color);
+	-moz-box-shadow: inset 0px 0px 0px 2px var(--_ui5_wheelslider_selection_frame_color);
+	box-shadow: inset 0px 0px 0px 2px var(--_ui5_wheelslider_selection_frame_color);
+	border-radius: var(--_ui_wheelslider_item_border_radius);
+	margin-top: var(--_ui5_wheelslider_selection_frame_margin_top);
+}
+
+:host([expanded]) .ui5-wheelslider-root.ui5-phone .ui5-wheelslider-inner .ui5-wheelslider-selection-frame {
+	margin-top: var(--_ui5_wheelslider_mobile_selection_frame_margin_top);
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-selection-frame:hover + .ui5-wheelslider-wrapper ul > li.ui5-wheelslider-item[aria-selected="true"] {
+	background: var(--_ui_wheelslider_item_expanded_hover_color);
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-selection-frame:active + ul > li.ui5-wheelslider-item[aria-selected="true"] {
+	background: var(--_ui5_wheelslider_selected_item_background_color);
+	color: lightgray;
+}
+.ui5-wheelslider-root:focus {
+	outline: none;
+}

package/src/themes/YearPicker.css

@@ -0,0 +1,93 @@
+:host(:not([hidden])) {
+	display: block;
+}
+
+:host {
+	width: 100%;
+	height: 100%;
+}
+
+.ui5-yp-root {
+	padding: 2rem 0 1rem 0;
+	display: flex;
+	flex-direction: column;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	justify-content: center;
+	align-items: center;
+}
+
+.ui5-yp-interval-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+}
+
+.ui5-yp-item {
+	display: flex;
+	margin: var(--_ui5_yearpicker_item_margin);
+	width: calc(25% - 0.125rem);
+	height: var(--_ui5_year_picker_item_height);
+	color: var(--sapButton_Lite_TextColor);
+	background-color: var(--sapLegend_WorkingBackground);
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	cursor: default;
+	outline: none;
+	position: relative;
+	border: var(--_ui5_yearpicker_item_border);
+	border-radius: var(--_ui5_yearpicker_item_border_radius);
+}
+
+.ui5-yp-item-secondary-type {
+	flex-direction: column;
+	width: calc(50% - 0.125rem);
+}
+
+.ui5-yp-item-sec-type{
+	font-size: 0.75rem;
+	color: var(--sapNeutralElementColor);
+}
+
+.ui5-yp-item:hover {
+	background-color: var(--sapList_Hover_Background);
+}
+
+.ui5-yp-item.ui5-yp-item--selected,
+.ui5-yp-item.ui5-yp-item--selected .ui5-yp-item-sec-type {
+	background-color: var(--_ui5_yearpicker_item_selected_background_color);
+	color: var(--_ui5_yearpicker_item_selected_text_color);
+	box-shadow: var(--_ui5_yearpicker_item_selected_box_shadow);
+	font-weight: bold;
+}
+
+.ui5-yp-item.ui5-yp-item--disabled {
+	pointer-events: none;
+	opacity: 0.5;
+}
+
+.ui5-yp-item.ui5-yp-item--selected:focus {
+	background-color: var(--_ui5_yearpicker_item_selected_focus);
+}
+
+.ui5-yp-item.ui5-yp-item--selected:focus::after {
+	border-color: var(--_ui5_yearpicker_item_focus_after_border);
+}
+
+.ui5-yp-item.ui5-yp-item--selected:hover {
+	background-color: var(--_ui5_yearpicker_item_selected_hover_color);
+}
+
+.ui5-yp-item:focus::after {
+	content: "";
+	position: absolute;
+	border: var(--_ui5_yearpicker_item_focus_after_border);
+	inset: 0;
+	border-radius: var(--_ui5_yearpicker_item_focus_after_border_radius);
+	outline: var(--_ui5_yearpicker_item_focus_after_outline);
+}

package/src/themes/base/Avatar-parameters.css

@@ -0,0 +1,59 @@
+:root {
+	--ui5-avatar-hover-box-shadow-offset: 0px 0px 0px 0.0625rem;
+	--ui5-avatar-initials-color: var(--sapContent_ImagePlaceholderForegroundColor);
+	--ui5-avatar-border-radius: .25rem;
+	--ui5-avatar-border-radius-img-deduction: 0.0625rem;
+	--ui5-avatar-initials-border: none;
+	--ui5-avatar-accent1: var(--sapAccentColor1);
+	--ui5-avatar-accent2: var(--sapAccentColor2);
+	--ui5-avatar-accent3: var(--sapAccentColor3);
+	--ui5-avatar-accent4: var(--sapAccentColor4);
+	--ui5-avatar-accent5: var(--sapAccentColor5);
+	--ui5-avatar-accent6: var(--sapAccentColor6);
+	--ui5-avatar-accent7: var(--sapAccentColor7);
+	--ui5-avatar-accent8: var(--sapAccentColor8);
+	--ui5-avatar-accent9: var(--sapAccentColor9);
+	--ui5-avatar-accent10: var(--sapAccentColor10);
+	--ui5-avatar-placeholder: var(--sapContent_ImagePlaceholderBackground);
+
+	--ui5-avatar-accent1-color: var(--ui5-avatar-initials-color);
+	--ui5-avatar-accent2-color: var(--ui5-avatar-initials-color);
+	--ui5-avatar-accent3-color: var(--ui5-avatar-initials-color);
+	--ui5-avatar-accent4-color: var(--ui5-avatar-initials-color);
+	--ui5-avatar-accent5-color: var(--ui5-avatar-initials-color);
+	--ui5-avatar-accent6-color: var(--ui5-avatar-initials-color);
+	--ui5-avatar-accent7-color: var(--ui5-avatar-initials-color);
+	--ui5-avatar-accent8-color: var(--ui5-avatar-initials-color);
+	--ui5-avatar-accent9-color: var(--ui5-avatar-initials-color);
+	--ui5-avatar-accent10-color: var(--ui5-avatar-initials-color);
+	--ui5-avatar-placeholder-color: var(--ui5-avatar-initials-color);
+
+	--ui5-avatar-accent1-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent2-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent3-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent4-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent5-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent6-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent7-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent8-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent9-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent10-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-placeholder-border-color: var(--sapField_BorderColor);
+
+	--_ui5_avatar_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	--_ui5_avatar_focus_offset: 0.0625rem;
+	--_ui5_avatar_focus_width: 0.0625rem;
+	--_ui5_avatar_focus_color: var(--sapContent_FocusColor);
+
+	--_ui5_avatar_fontsize_XS: 0.75rem;
+	--_ui5_avatar_fontsize_S: 1.125rem;
+	--_ui5_avatar_fontsize_M: 1.625rem;
+	--_ui5_avatar_fontsize_L: 2rem;
+	--_ui5_avatar_fontsize_XL: 2.75rem;
+
+	--_ui5_avatar_icon_XS: 1rem;
+	--_ui5_avatar_icon_S: 1.5rem;
+	--_ui5_avatar_icon_M: 2rem;
+	--_ui5_avatar_icon_L: 2.5rem;
+	--_ui5_avatar_icon_XL: 3rem;
+}

package/src/themes/base/AvatarGroup-parameters.css

@@ -0,0 +1,3 @@
+:root {
+	--_ui5_avatar_group_button_focus_border: none;
+}