/* Activities Ripple */ $ripple_size: 50px; .ripple-box { @if $gnome_version == 'default' { background-color: transparentize($primary, 0.65); box-shadow: 0 0 2px 2px lighten($primary, 20%); } @else { background-color: st-transparentize($primary, 0.65); box-shadow: 0 0 2px 2px st-lighten($primary, 20%); } // plus + 2px for the border (box-shadow) width: $ripple_size + 2px; height: $ripple_size + 2px; border-radius: 0 0 $ripple_size + 2px 0; // radius equals the size of the box to give us the curve // just a simple change to the border radius position &:rtl { border-radius: 0 0 0 $ripple_size + 2px; } }