114 lines
2.1 KiB
Plaintext
114 lines
2.1 KiB
Plaintext
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # Ripple effect
|
|
*
|
|
* Material design ripple click effect
|
|
*
|
|
* Version: 1.0
|
|
* Latest update: Mar 10, 2016
|
|
*
|
|
* ---------------------------------------------------------------------------- */
|
|
|
|
|
|
// Core
|
|
// -------------------------
|
|
|
|
// Base styles
|
|
.legitRipple {
|
|
position: relative;
|
|
overflow: hidden;
|
|
z-index: 0;
|
|
.user-select(none);
|
|
}
|
|
|
|
// Animation
|
|
.legitRipple-ripple {
|
|
position: absolute;
|
|
width: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
border-radius: 50%;
|
|
background-color: fade(#fff, 10%);
|
|
will-change: transform, width, opacity;
|
|
.opacity(1);
|
|
.translate3d(0, 0, 0);
|
|
.translate(-50%, -50%);
|
|
.transition(~"width 0.2s linear, opacity 0.5s ease-out");
|
|
|
|
// Fix
|
|
&:before {
|
|
content: "";
|
|
padding-top: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Ripple colors
|
|
//
|
|
|
|
// Light ripple overlay
|
|
.breadcrumb-line[class*=bg-] .breadcrumb-elements > li {
|
|
.legitRipple-ripple {
|
|
background-color: fade(#fff, 10%);
|
|
}
|
|
}
|
|
|
|
// Dark ripple overlay
|
|
.btn-default,
|
|
.btn-link,
|
|
.btn-flat,
|
|
.icons-list > li > a,
|
|
.pagination > li:not(.active) > a,
|
|
.pagination > li:not(.active) > span,
|
|
.nav-tabs:not([class*=bg-]) > li > a,
|
|
.breadcrumb-elements > li,
|
|
.nav-pills > li > a,
|
|
.ui-button:not([class*=bg-]),
|
|
.ui-tabs-anchor,
|
|
.fc-button,
|
|
.checkbox,
|
|
.wizard > .actions > ul > li:first-child > a,
|
|
.sidebar-default .navigation > li > a,
|
|
.sidebar-default .navigation > li ul li > a,
|
|
.navbar-default .navbar-nav > li > a {
|
|
.legitRipple-ripple {
|
|
background-color: fade(#000, 5%);
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Misc styles
|
|
//
|
|
|
|
// z-index fix
|
|
img ~ .legitRipple-ripple {
|
|
z-index: auto;
|
|
}
|
|
|
|
// Round corners
|
|
.sidebar-user-material-content .legitRipple {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
// Template
|
|
.legitRipple-template {
|
|
display: none;
|
|
}
|
|
|
|
// Custom ripple color
|
|
.legitRipple-custom {
|
|
overflow: hidden;
|
|
|
|
> * {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
.translate(-50%, -50%);
|
|
}
|
|
}
|