@openui5/sap.m
Version:
OpenUI5 UI Library sap.m
111 lines (94 loc) • 4.1 kB
text/less
/* =================================== */
/* CSS for control sap.m/ToggleButton */
/* Base theme */
/* =================================== */
/* Common styles */
/* toggled without context */
html.sap-desktop .sapMToggleBtnPressed,
.sapMToggleBtnPressed:not(.sapMBtnDisabled),
/* Bar context */
html.sap-desktop .sapMIBar-CTX .sapMToggleBtnPressed,
.sapMIBar-CTX .sapMToggleBtnPressed:not(.sapMBtnDisabled),
/* Toolbar transparent context */
html.sap-desktop .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed,
.sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed:not(.sapMBtnDisabled) {
background-image: none;
background-color: var(--sapButton_Selected_Background);
border-color: var(--sapButton_Selected_BorderColor);
color: var(--sapButton_Selected_TextColor);
text-shadow: none;
& .sapUiIcon {
color: var(--sapButton_Selected_TextColor);
}
&.sapMBtnReject {
background-color: var(--sapButton_Reject_Selected_Background);
border-color: var(--sapButton_Reject_Selected_BorderColor);
color: var(--sapButton_Reject_Selected_TextColor);
& .sapUiIcon {
color: var(--sapButton_Reject_Selected_TextColor);
}
}
&.sapMBtnAccept {
background-color: var(--sapButton_Accept_Selected_Background);
border-color: var(--sapButton_Accept_Selected_BorderColor);
color: var(--sapButton_Accept_Selected_TextColor);
& .sapUiIcon {
color: var(--sapButton_Accept_Selected_TextColor);
}
}
&.sapMBtnAttention {
background-color: var(--sapButton_Attention_Selected_Background);
border-color: var(--sapButton_Attention_Selected_BorderColor);
color: var(--sapButton_Attention_Selected_TextColor);
& .sapUiIcon {
color: var(--sapButton_Attention_Selected_TextColor);
}
}
}
/*hover and down on toggled*/
.sapMBtn:hover .sapMBtnHoverable.sapMToggleBtnPressed, /* in Firefox the button receives the hover state, not it's inner child */
.sapMBtn .sapMBtnHoverable.sapMToggleBtnPressed:hover,
/* Toolbar transparent context */
.sapMTB-Transparent-CTX .sapMBtnHoverable.sapMToggleBtnPressed:hover {
background-image: none;
background-color: @sapUiToggleButtonPressedHoverBackground;
}
/* toggled - icon has to be adapted */
span.sapMBtnInner.sapMToggleBtnPressed .sapMBtnIcon,
span.sapMBtnInner.sapMToggleBtnPressed.sapMBtnTransparent > .sapMBtnIcon,
html.sap-desktop .sapMToggleBtnPressed.sapMBtnTransparent > .sapMBtnIcon {
color: @sapUiToggleButtonPressedTextColor;
}
/* Focus of toggled button */
.sapMBtn:focus > .sapMBtnInner.sapMToggleBtnPressed.sapMFocusable {
outline-color: var(--sapContent_ContrastFocusColor);
}
/* hover and down on toggled button part 1 */
.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed:not(.sapMBtnActive),
.sapMBtn .sapMBtnHoverable.sapMToggleBtnPressed:hover {
background-color: var(--sapButton_Selected_Hover_Background);
border-color: var(--sapButton_Selected_Hover_BorderColor);
color: var(--sapButton_Selected_TextColor);
text-shadow: none;
&.sapMBtnReject {
background-color: darken(@sapUiButtonRejectActiveBackground, 5);
border-color: var(--sapButton_Reject_Active_BorderColor);
color: contrast(lighten(@sapUiButtonRejectActiveBackground, 5), @sapUiBaseText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
}
&.sapMBtnAccept {
background-color: darken(@sapUiButtonAcceptActiveBackground, 5);
border-color: var(--sapButton_Accept_Active_BorderColor);
color: contrast(lighten(@sapUiButtonAcceptActiveBackground, 5), @sapUiBaseText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
}
&.sapMBtnAttention {
background-color: darken(@sapUiButtonAttentionActiveBackground, 5);
border-color: var(--sapButton_Attention_Active_BorderColor);
color: contrast(lighten(@sapUiButtonAttentionActiveBackground, 5), @sapUiBaseText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
}
&.sapMBtnGhost {
background-color: var(--sapButton_Selected_Hover_Background);
border-color: var(--sapButton_Selected_Hover_BorderColor);
color: var(--sapButton_Selected_TextColor);
text-shadow: none;
}
}