amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-05-22 11:55:24 +00:00
Code Issues Projects Releases Wiki Activity

Make iconButton round to display a more elegant ripple-effect

Browse Source
This commit is contained in:
Benoit Favreault
2015-03-19 05:45:42 -04:00
committed by Francis Lachapelle
parent d6a294b89f
commit ca1831271b
3 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/WebServerResources/scss/components/button/_button.scss
+10 -1
View File
@@ -58,9 +58,15 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
// Classes
.iconButton {
padding: $iconButton-padding;
border-radius: 50%;
overflow: hidden;
// z-index provides a stacking context that prevent ripple-effect from overflowing
z-index: 1;
background-clip: content-box;
background-color: transparent;
color: inherit;
&:hover {
&:hover,
&:active {
background-color: transparent;
[class ^= md-icon],
[class *= md-icon-] {
@@ -74,6 +80,9 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
font-size: $iconButton-icon-size;
transition: $iconButton-transition;
}
.md-ripple-container {
border-radius: 50%;
}
}
// Icon-bars are for iconButtons, by default they're vertical and at the right
// the modifier class is to reflect those values and leave place to other versions