UNPKG

@openui5/sap.m

Version:

OpenUI5 UI Library sap.m

720 lines (601 loc) 20.4 kB
/* =================================== */ /* CSS for control sap.m/ObjectStatus */ /* Base theme */ /* =================================== */ .sapMObjStatus { font-size: @sapMFontMediumSize; color: @sapUiNeutralText; display: inline-block; overflow: visible; min-height: 1rem; vertical-align: top; line-height: 0.875rem; &.sapMObjectStatusLarge { font-size: 1rem; min-height: 2rem; } .sapMObjStatusIcon { width: 1rem; text-align: center; display: inline-block; height: 1rem; line-height: 1rem; vertical-align: top; } .sapMObjStatusTitle, .sapMObjStatusText { line-height: 1rem; display: inline-block; height: inherit; vertical-align: top; } &.sapMObjectStatusLongText{ .sapMObjStatusText { word-break: break-all; } } .sapMObjStatusTitle::after { content: attr(data-colon); white-space: pre; } .sapMEmptyIndicator{ line-height: normal; } } .sapMLIBActive { .sapMObjStatus:not(.sapMObjStatusInverted) .sapMObjStatusText, .sapMObjStatus:not(.sapMObjStatusInverted) .sapMObjStatusIcon { text-shadow: none; } } .sapMObjStatusLink { min-height: 1rem; vertical-align: top; } .sapUiFormCLElement .sapMObjStatus .sapMObjStatusIcon, .sapUiFormCLElement .sapMObjStatus .sapMObjStatusTitle, .sapUiFormCLElement .sapMObjStatus .sapMObjStatusText{ padding-bottom: 2px; } .sapUiHLayout .sapMObjStatus .sapMObjStatusIcon, .sapUiHLayout .sapMObjStatus .sapMObjStatusTitle, .sapUiHLayout .sapMObjStatus .sapMObjStatusText{ padding-bottom: 2px; } .sapMObjectStatusLarge { .sapMObjStatusTitle, .sapMObjStatusText, .sapMObjStatusIcon { font-size: 1.5rem; font-family: @sapUiFontLightFamily; height: 2rem; display: inline-block; vertical-align: middle; } .sapMObjStatusIcon { width: 2rem; } .sapMObjStatusIcon > .sapUiIcon { vertical-align: baseline; } } .sapMObjStatusText { word-break: normal; overflow-wrap: break-word; } .sapMObjStatus > .sapMObjStatusTitle { color: @sapUiContentLabelColor; } .sapMObjStatusNone .sapMObjStatusText { color: @sapUiNeutralText; } .sapMObjStatusError .sapMObjStatusText { color: @sapUiNegativeText; } .sapMObjStatusWarning .sapMObjStatusText { color: @sapUiCriticalText; } .sapMObjStatusSuccess .sapMObjStatusText{ color: @sapUiPositiveText; } .sapMObjStatusInformation .sapMObjStatusText { color: @sapUiInformativeText; } .sapMObjStatusNone .sapMObjStatusIcon { color: @sapUiNeutralElement; } .sapMObjStatusError .sapMObjStatusIcon { color: @sapUiNegativeElement; } .sapMObjStatusWarning .sapMObjStatusIcon { color: @sapUiCriticalElement; } .sapMObjStatusSuccess .sapMObjStatusIcon { color: @sapUiPositiveElement; } .sapMObjStatusInformation .sapMObjStatusIcon { color: @sapInformativeTextColor; } .sapMObjStatusIndication01 .sapMObjStatusText, .sapMObjStatusIndication01 .sapMObjStatusIcon { color: @sapUiIndication1; } .sapMObjStatusIndication02 .sapMObjStatusText, .sapMObjStatusIndication02 .sapMObjStatusIcon { color: @sapUiIndication2; } .sapMObjStatusIndication03 .sapMObjStatusText, .sapMObjStatusIndication03 .sapMObjStatusIcon { color: @sapUiIndication3; } .sapMObjStatusIndication04 .sapMObjStatusText, .sapMObjStatusIndication04 .sapMObjStatusIcon { color: @sapUiIndication4; } .sapMObjStatusIndication05 .sapMObjStatusText, .sapMObjStatusIndication05 .sapMObjStatusIcon { color: @sapUiIndication5; } .sapMObjStatusIndication06 .sapMObjStatusText, .sapMObjStatusIndication06 .sapMObjStatusIcon { color: @sapUiIndication6; } .sapMObjStatusIndication07 .sapMObjStatusText, .sapMObjStatusIndication07 .sapMObjStatusIcon { color: @sapUiIndication7; } .sapMObjStatusIndication08 .sapMObjStatusText, .sapMObjStatusIndication08 .sapMObjStatusIcon { color: @sapUiIndication8; } .sapMObjStatus:not(.sapMObjStatusInverted) .sapMObjStatusText, .sapMObjStatus:not(.sapMObjStatusInverted) .sapMObjStatusIcon { text-shadow: @sapUiContentTextShadow; } // inverted classes .sapMObjStatusInverted .sapMObjStatusText, .sapMObjStatusInverted .sapMObjStatusIcon { font-family: @sapUiFontFamily; font-size: @sapMFontSmallSize; font-weight: bold; } .sapMListTbl .sapMObjStatusInverted .sapMObjStatusIcon > .sapUiIcon:not(.sapMLIBImgNav):not(.sapMBtnIcon) { font-size: @sapMFontSmallSize; vertical-align: top; } .sapMObjStatusInverted .sapMObjStatusIcon > .sapUiIcon { font-size: @sapMFontSmallSize; vertical-align: top; } .sapMObjStatusInverted { .sapMObjStatusIcon { height: 0.875rem; & > .sapUiIcon { vertical-align: top; } } &.sapMObjectStatusLarge { vertical-align: top; .sapMObjStatusText, .sapMObjStatusIcon { font-family: @sapUiFontLightFamily; font-size: 1.25rem; font-weight: normal; color: @sapUiContentContrastTextColor; vertical-align: inherit; & > .sapUiIcon { font-size: 1.25rem; } } } } .sapMObjStatusInverted .sapMObjStatusText, .sapMObjStatusInverted .sapMObjStatusIcon .sapMObjStatusIconOnly { padding: 0 0.25rem; border-radius: 0.25rem; } .sapMObjStatusInverted .sapMObjStatusIcon { padding: 0 0 0 0.25rem; } .sapMObjStatusInverted .sapMObjStatusIcon + .sapMObjStatusText { border-radius: 0 0.25rem 0.25rem 0; } .sapMObjStatusInverted .sapMObjStatusIcon { border-radius: 0.25rem 0 0 0.25rem; } .sapMObjStatusInverted.sapMObjStatusIndication01 .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication01 .sapMObjStatusIcon { background-color: @sapUiIndication1; } .sapMObjStatusInverted.sapMObjStatusIndication02 .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication02 .sapMObjStatusIcon { background-color: @sapUiIndication2; } .sapMObjStatusInverted.sapMObjStatusIndication03 .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication03 .sapMObjStatusIcon { background-color: @sapUiIndication3; } .sapMObjStatusInverted.sapMObjStatusIndication04 .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication04 .sapMObjStatusIcon { background-color: @sapUiIndication4; } .sapMObjStatusInverted.sapMObjStatusIndication05 .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication05 .sapMObjStatusIcon { background-color: @sapUiIndication5; } .sapMObjStatusInverted.sapMObjStatusIndication06 .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication06 .sapMObjStatusIcon { background-color: @sapUiIndication6; } .sapMObjStatusInverted.sapMObjStatusIndication07 .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication07 .sapMObjStatusIcon { background-color: @sapUiIndication7; } .sapMObjStatusInverted.sapMObjStatusIndication08 .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication08 .sapMObjStatusIcon { background-color: @sapUiIndication8; } .sapMObjStatusInverted.sapMObjStatusError .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusError .sapMObjStatusIcon { background-color: @sapUiButtonNegativeBackground; color: @sapUiButtonNegativeTextColor; } .sapMObjStatusInverted.sapMObjStatusWarning .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusWarning .sapMObjStatusIcon { background-color: @sapUiButtonCriticalBackground; color: @sapUiButtonCriticalTextColor; } .sapMObjStatusInverted.sapMObjStatusSuccess .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusSuccess .sapMObjStatusIcon { background-color: @sapUiButtonSuccessBackground; color: @sapUiButtonSuccessTextColor; } .sapMObjStatusInverted.sapMObjStatusInformation .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusInformation .sapMObjStatusIcon { background-color: @sapUiInformativeElement; color: @sapUiButtonInformationTextColor; } .sapMObjStatusInverted.sapMObjStatusNone .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusNone .sapMObjStatusIcon { background-color: @sapUiButtonNeutralBackground; color: @sapUiButtonNeutralTextColor; } .sapMObjStatusIcon > .sapUiIcon { font-size: 1rem; } .sapMObjStatusInverted .sapMObjStatusIcon > .sapUiIcon { font-size: 0.75rem; line-height: 1rem; } .sapUiTableCell { .sapMObjStatus { line-height: inherit; } .sapMObjStatusIcon { line-height: inherit; vertical-align: text-bottom; & > .sapUiIcon { vertical-align: bottom; } } .sapMObjStatusText { vertical-align: middle; } .sapMObjStatusText, .sapMObjStatusTitle { display: inline; } } .sapMObjectStatusLarge .sapMObjStatusIcon > .sapUiIcon { font-size: 1.5rem; line-height: 2rem; } .sapMObjStatusIcon { padding-right: .25rem; } .sapMObjStatus > .sapMObjStatusTitle { padding-right: .25rem; } .sapUiTableCell .sapMObjStatus { font-size: @sapMFontMediumSize; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: flex; } .sapUiForm .sapMObjStatusIcon, .sapUiForm .sapMObjStatusTitle, .sapUiForm .sapMObjStatusText { display: inline-block; line-height: normal; -webkit-user-select: text; user-select: text; } /* FIX for 1580155978 and 1680267289. Fiori design guidelines say that statuses should be specially styled for forms and share looks with other text only controls. */ .sapUiForm.sapUiFormEdit .sapMObjStatus { padding-top: 0.875rem; padding-bottom: 0.875rem; line-height: normal; } .sapUiSizeCompact .sapUiForm.sapUiFormEdit .sapMObjStatus { padding-top: 0.5rem; padding-bottom: 0.5rem; line-height: normal; } /* FIX for 2715207 Fiori design guidelines say that statuses should be specially styled for ObjectPage and share looks with other text only controls. */ .sapMObjStatusNone:not(.sapMObjStatusInverted) { .sapUxAPObjectPageContainer &, .sapUxAPObjectPageHeaderContentItem &, &.sapUxAPObjectPageHeaderContentItem, .sapUxAPObjectPageHeaderDetails .sapFDynamicPageHeaderContent & { .sapMObjStatusText, .sapMObjStatusIcon { color: @sapUiGroupTitleTextColor; } } } .sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderContentItem{ .sapMObjStatus { vertical-align: text-bottom; } } /* ============================================= */ /* FIX: CSS 0120061532 0001316230 2014 */ /* ============================================= */ .sapMLIBActive .sapMObjStatusNone .sapMObjStatusText, .sapMLIBActive .sapMObjStatusNone .sapMObjStatusIcon, .sapMLIBActive .sapMObjStatusError .sapMObjStatusText, .sapMLIBActive .sapMObjStatusError .sapMObjStatusIcon, .sapMLIBActive .sapMObjStatusWarning .sapMObjStatusText, .sapMLIBActive .sapMObjStatusWarning .sapMObjStatusIcon, .sapMLIBActive .sapMObjStatusSuccess .sapMObjStatusText, .sapMLIBActive .sapMObjStatusSuccess .sapMObjStatusIcon { color: @sapUiListActiveTextColor; } /* Condensed size */ .sapUiSizeCondensed .sapUiTableCell .sapMObjStatus>.sapMObjStatusText { /* line-height: 1rem; */ vertical-align: middle; font-size: @sapMFontMediumSize; } html.sap-desktop .sapMObjStatusActive:focus { outline: none; } .sapMObjStatusActive .sapMObjStatusText { pointer-events: auto; } .sapMObjStatusActive:hover > .sapMObjStatusText, .sapMObjStatusActive:hover > .sapMObjStatusIcon > .sapUiIcon { text-decoration: underline; cursor: pointer; } .sapMObjStatusActive:focus .sapMObjStatusTitle { text-decoration: none; } .sapMObjStatusLink:hover .sapMObjStatusIcon > .sapUiIcon { cursor: pointer; } .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusLink:hover .sapMObjStatusIcon:only-child > .sapUiIcon { text-decoration: underline; cursor: pointer; } .sapMObjStatusLink .sapMObjStatusIcon:only-child { padding-right: 0; } .sapMObjStatusInverted .sapMObjStatusIcon.sapMObjStatusIconOnly, .sapMObjStatusInverted .sapMObjStatusLink .sapMObjStatusIcon.sapMObjStatusIconOnly { padding: 0 0.25rem; border-radius: 0.25rem 0.25rem; } .sapMObjStatusInverted .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusInverted .sapMObjStatusLink:hover .sapMObjStatusIcon.sapMObjStatusIconOnly > .sapUiIcon { text-decoration: none; } .sapMObjStatusInverted.sapMObjStatusIndication01 .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication01 .sapMObjStatusLink:hover .sapMObjStatusIcon { background-color: @sapUiIndication1HoverBackground; } .sapMObjStatusInverted.sapMObjStatusIndication01 .sapMObjStatusLink:active .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication01 .sapMObjStatusLink:active .sapMObjStatusIcon { background-color: @sapUiIndication1ActiveBackground; } .sapMObjStatusInverted.sapMObjStatusIndication02 .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication02 .sapMObjStatusLink:hover .sapMObjStatusIcon { background-color: @sapUiIndication2HoverBackground; } .sapMObjStatusInverted.sapMObjStatusIndication02 .sapMObjStatusLink:active .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication02 .sapMObjStatusLink:active .sapMObjStatusIcon { background-color: @sapUiIndication2ActiveBackground; } .sapMObjStatusInverted.sapMObjStatusIndication03 .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication03 .sapMObjStatusLink:hover .sapMObjStatusIcon { background-color: @sapUiIndication3HoverBackground; } .sapMObjStatusInverted.sapMObjStatusIndication03 .sapMObjStatusLink:active .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication03 .sapMObjStatusLink:active .sapMObjStatusIcon { background-color: @sapUiIndication3ActiveBackground; } .sapMObjStatusInverted.sapMObjStatusIndication04 .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication04 .sapMObjStatusLink:hover .sapMObjStatusIcon { background-color: @sapUiIndication4HoverBackground; } .sapMObjStatusInverted.sapMObjStatusIndication04 .sapMObjStatusLink:active .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication04 .sapMObjStatusLink:active .sapMObjStatusIcon { background-color: @sapUiIndication4ActiveBackground; } .sapMObjStatusInverted.sapMObjStatusIndication05 .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication05 .sapMObjStatusLink:hover .sapMObjStatusIcon { background-color: @sapUiIndication5HoverBackground; } .sapMObjStatusInverted.sapMObjStatusIndication05 .sapMObjStatusLink:active .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication05 .sapMObjStatusLink:active .sapMObjStatusIcon { background-color: @sapUiIndication5ActiveBackground; } .sapMObjStatusInverted.sapMObjStatusIndication06 .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication06 .sapMObjStatusLink:hover .sapMObjStatusIcon { background-color: @sapUiIndication6HoverBackground; } .sapMObjStatusInverted.sapMObjStatusIndication06 .sapMObjStatusLink:active .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication06 .sapMObjStatusLink:active .sapMObjStatusIcon { background-color: @sapUiIndication6ActiveBackground; } .sapMObjStatusInverted.sapMObjStatusIndication07 .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication07 .sapMObjStatusLink:hover .sapMObjStatusIcon { background-color: @sapUiIndication7HoverBackground; } .sapMObjStatusInverted.sapMObjStatusIndication07 .sapMObjStatusLink:active .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication07 .sapMObjStatusLink:active .sapMObjStatusIcon { background-color: @sapUiIndication7ActiveBackground; } .sapMObjStatusInverted.sapMObjStatusIndication08 .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication08 .sapMObjStatusLink:hover .sapMObjStatusIcon { background-color: @sapUiIndication8HoverBackground; } .sapMObjStatusInverted.sapMObjStatusIndication08 .sapMObjStatusLink:active .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusIndication08 .sapMObjStatusLink:active .sapMObjStatusIcon { background-color: @sapUiIndication8ActiveBackground; } .sapMObjStatusInverted.sapMObjStatusError .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusError .sapMObjStatusLink:hover .sapMObjStatusIcon { background-color: @sapUiButtonNegativeHoverBackground; color: @sapUiButtonNegativeHoverTextColor; } .sapMObjStatusInverted.sapMObjStatusError .sapMObjStatusLink:active .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusError .sapMObjStatusLink:active .sapMObjStatusIcon { background-color: @sapUiButtonNegativeActiveBackground; color: @sapUiButtonActiveTextColor; } .sapMObjStatusInverted.sapMObjStatusWarning .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusWarning .sapMObjStatusLink:hover .sapMObjStatusIcon { background-color: @sapUiButtonCriticalHoverBackground; color: @sapUiButtonCriticalHoverTextColor; } .sapMObjStatusInverted.sapMObjStatusWarning .sapMObjStatusLink:active .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusWarning .sapMObjStatusLink:active .sapMObjStatusIcon { background-color: @sapUiButtonCriticalActiveBackground; color: @sapUiButtonActiveTextColor; } .sapMObjStatusInverted.sapMObjStatusSuccess .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusSuccess .sapMObjStatusLink:hover .sapMObjStatusIcon { background-color: @sapUiButtonSuccessHoverBackground; color: @sapUiButtonSuccessHoverTextColor; } .sapMObjStatusInverted.sapMObjStatusSuccess .sapMObjStatusLink:active .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusSuccess .sapMObjStatusLink:active .sapMObjStatusIcon { background-color: @sapUiButtonSuccessActiveBackground; color: @sapUiButtonActiveTextColor; } .sapMObjStatusInverted.sapMObjStatusInformation .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusInformation .sapMObjStatusLink:hover .sapMObjStatusIcon { background-color: @sapUiButtonInformationHoverBackground; color: @sapUiButtonInformationHoverTextColor; } .sapMObjStatusInverted.sapMObjStatusInformation .sapMObjStatusLink:active .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusInformation .sapMObjStatusLink:active .sapMObjStatusIcon { background-color: @sapUiButtonInformationActiveBackground; color: @sapUiButtonActiveTextColor; } .sapMObjStatusInverted.sapMObjStatusNone .sapMObjStatusLink:hover .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusNone .sapMObjStatusLink:hover .sapMObjStatusIcon { background-color: @sapUiButtonNeutralHoverBackground; color: @sapUiButtonNeutralHoverTextColor; } .sapMObjStatusInverted.sapMObjStatusNone .sapMObjStatusLink:active .sapMObjStatusText, .sapMObjStatusInverted.sapMObjStatusNone .sapMObjStatusLink:active .sapMObjStatusIcon { background-color: @sapUiButtonNeutralActiveBackground; color: @sapUiButtonActiveTextColor; } html.sap-desktop .sapMObjStatusActive:focus .sapMObjStatusLink { position: relative; display: inline-block; } .sapMObjStatusActive { &.sapMObjStatusInverted .sapMObjStatusText { vertical-align: top; } &.sapMObjStatusInverted .sapMObjStatusIcon > .sapUiIcon { vertical-align: top; } } html.sap-desktop .sapMObjStatusActive:focus { .sapMObjStatusLink::after { pointer-events: none; display: block; content: ""; position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; outline: 1px dotted @sapUiContentFocusColor; } &.sapMObjectStatusLarge { .sapMObjStatusLink::after { position: absolute; top: 0px; left: 1px; bottom: 0px; right: 1px; height: 2rem; } &.sapMObjStatusInverted .sapMObjStatusLink::after { position: absolute; top: 3px; left: 3px; bottom: 3px; right: 3px; height: 1.625rem; outline: 1px dotted @sapContent_ContrastFocusColor; } } } html.sap-desktop .sapMOHStatus .sapMObjStatusActive:focus .sapMObjStatusLink::after { left: 1px; right: 1px; } html.sap-desktop .sapUiTableCell .sapMObjStatusActive:focus .sapMObjStatusLink::after { left: 1px; right: 1px; top: 1px; bottom: 1px; } .sapMObjStatus .sapUiPseudoInvisibleText { font-size: 0px; } .sapMObjStatus .sapMEmptyIndicator.sapMEmptyIndicatorAuto { display: none; } .sapMShowEmpty-CTX .sapMObjStatus .sapMEmptyIndicator.sapMEmptyIndicatorAuto { display: inline-block; } html.sap-desktop .sapMListTblHasPopin .sapMObjStatusActive:focus { .sapMObjStatusLink::after { pointer-events: none; display: block; content: ""; position: absolute; top: 0px; left: 1px; bottom: 1px; right: 1px; outline: 1px dotted @sapUiContentFocusColor; } } .sapMListTblCell { .sapMObjStatus.sapMObjStatusInverted { display: inline-table; .sapMObjStatusText { line-height: 1rem; vertical-align: middle; } } }