@zohodesk/components
Version:
In this Package, we Provide Some Basic Components to Build Web App
109 lines (108 loc) • 3.37 kB
CSS
.effect {
position: relative;
border-radius: var(--zd_size4);
}
.border {
border: solid 1px var(--zdt_rippleeffect_default_border);
}
.default.defaultHover {
border-color: var(--zdt_rippleeffect_hover_border);
}
.hoverEffect:hover.primary.defaultHover, .hoverEffect:hover.primary.borderHover
/* .hoverEffect:focus.primary.borderHover */
{
border-color: var(--zdt_rippleeffect_primary_border);
}
.primary.defaultHover, .hoverEffect:hover.primary.active.border
/* .hoverEffect:focus.primary.active.border */
{
border-color: var(--zdt_rippleeffect_primary_active_border);
}
.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover
/* .hoverEffect:focus.primaryLight.borderHover */
{
border-color: var(--zdt_rippleeffect_primary_light_border);
}
.green.defaultHover, .hoverEffect:hover.green.borderHover
/* .hoverEffect:focus.green.borderHover */
{
border-color: var(--zdt_rippleeffect_green_border);
}
.hoverEffect:hover.default.defaultHover
/* .hoverEffect:focus.default.defaultHover */
{
border-color: var(--zdt_rippleeffect_slate_border);
}
.hoverEffect:hover.default.borderHover
/* .hoverEffect:focus.default.borderHover */
{
border-color: var(--zdt_rippleeffect_navy_border);
}
.hoverEffect:hover.default.bgHover
/* .hoverEffect:focus.default.bgHover */
{
background-color: var(--zdt_rippleeffect_hover_bg);
}
.hoverEffect:hover.primaryLight.bgHover
/* .hoverEffect:focus.primaryLight.bgHover */
{
background-color: var(--zdt_rippleeffect_primary_light_bg);
}
.primaryFilled {
background-color: var(--zdt_rippleeffect_primary_bg);
}
.hoverEffect:hover.primaryFilled, .primaryFilled.active {
background-color: var(--zdt_rippleeffect_primaryfilled_bg);
}
.hoverEffect:hover.green.bgHover
/* .hoverEffect:focus.green.bgHover */
{
background-color: var(--zdt_rippleeffect_green_bg);
}
.default.active, .hoverEffect:hover.default.active, .primaryLight.active, .primaryDark.active {
background-color: var(--zdt_rippleeffect_primary_light_bg);
}
.default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
border-color: var(--zdt_rippleeffect_primary_light_border);
}
.green.active {
background-color: var(--zdt_rippleeffect_green_bg);
}
.green.active.border {
border-color: var(--zdt_rippleeffect_green_border);
}
.primary.active {
background-color: var(--zdt_rippleeffect_primary_bg);
}
.danger.defaultHover, .hoverEffect:hover.danger.borderHover
/* .hoverEffect:focus.danger.borderHover */
{
border-color: var(--zdt_rippleeffect_danger_border);
}
.hoverEffect:hover.danger.bgHover, .danger.active {
background-color: var(--zdt_rippleeffect_danger_bg);
}
.hoverEffect:hover.primaryDark.bgHover
/* .hoverEffect:focus.primaryDark.bgHover */
{
background-color: var(--zdt_rippleeffect_primary_dark_bg);
}
.notAllowed {
cursor: not-allowed;
}
.secondary.defaultHover, .hoverEffect:hover.secondary.borderHover
/* .hoverEffect:focus.secondary.borderHover */
{
border-color: var(--zdt_rippleeffect_secondary_border);
}
.hoverEffect:hover.secondary.bgHover
/* .hoverEffect:focus.secondary.bgHover */
{
background-color: var(--zdt_rippleeffect_secondary_bg);
}
.secondary.active {
background-color: var(--zdt_rippleeffect_secondary_active_bg);
}
.secondary.active.border {
border-color: var(--zdt_rippleeffect_secondary_active_border);
}