@openui5/sap.m
Version:
OpenUI5 UI Library sap.m
78 lines (72 loc) • 2.97 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: @sapUiToggleButtonPressedBackground;
border-color: @sapUiToggleButtonPressedBorderColor;
color: @sapUiToggleButtonPressedTextColor;
text-shadow: none;
&.sapMBtnReject {
background-color: @sapUiButtonRejectActiveBackground;
border-color: @sapUiButtonRejectActiveBorderColor;
color: @sapUiToggleButtonPressedTextColor;
}
&.sapMBtnAccept {
background-color: @sapUiButtonAcceptActiveBackground;
border-color: @sapUiButtonAcceptActiveBorderColor;
color: @sapUiToggleButtonPressedTextColor;
}
}
/*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: @sapUiContentContrastFocusColor;
}
/* IE && Edge */
.sapMBtn:focus > .sapMToggleBtnPressed > .sapMBtnFocusDiv {
border-color: @sapUiContentContrastFocusColor;
}
/* hover and down on toggled button part 1*/
.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed:not(.sapMBtnActive),
.sapMBtn .sapMBtnHoverable.sapMToggleBtnPressed:hover {
background-color: @sapUiToggleButtonPressedHoverBackground;
border-color: @sapUiToggleButtonPressedBorderColor;
color: @sapUiToggleButtonPressedTextColor;
text-shadow: none;
&.sapMBtnReject {
background-color: darken(@sapUiButtonRejectActiveBackground, 5);
border-color: @sapUiButtonRejectActiveBorderColor;
color: @sapUiToggleButtonPressedTextColor;
}
&.sapMBtnAccept {
background-color: darken(@sapUiButtonAcceptActiveBackground, 5);
border-color: @sapUiButtonAcceptActiveBorderColor;
color: @sapUiToggleButtonPressedTextColor;
}
}