ripple icon indicating copy to clipboard operation
ripple copied to clipboard

Some elements doesn't have hover effects.

Open vlad0337187 opened this issue 6 years ago • 0 comments

This elements have:

<header>
...
...
	<a
		class="main_title"
		onclick="go_after_timeout(this, event, '{{ link___main_page }}')"
	>
		{% if DEFAULT_LANG == "ru"  %}Добро пожаловать на личную страницу vlad1777d
		{% else %}Welcome to vlad1777d personal page
		{% endif %}
	</a>
...
...
</header

and such does not:

<header>
...
...
<div class="language_switcher">
	<a class="language_button russian_button button_ripple" onclick="go_after_timeout(this, event, '{{ link___main_page___russian }}')"></a>
	<div class="language_button_separator"></div>
	<a class="language_button english_button button_ripple" onclick="go_after_timeout(this, event, '{{ link___main_page___english }}')"></a>
</div>
...
...
</header>

their css:

.language_switcher {
	display: block;
	position: absolute;
	/*top: 3vmin;
	right: 1vmin;*/
	top: 0vmin;
	right: 0vmin;
	padding-top: 3vmin;
	padding-right: 1vmin;
	padding-left: 12vmin;
	height: 12vmin;
	z-index: 1;
}
.language_button {
	display: block;
	width: 32pt;
	height: 18pt;

	background-size: 100% 100%;
	box-shadow: 0 0 3pt 0px hsla(0, 0%, 0%, 0.8), inset 0 0 16pt 0px hsla(0, 0%, 0%, 0.8);

	transition-duration: 0.6s;
}



.main_title {
	/* Заглавие "Добро пожаловать" со ссылкой на главную страницу. */
	display: flex;
	justify-content: flex-start;
	align-items: center;
	
	width: calc(100% - (8.33vw + 2.08vw + 16.66vw)); /* accounting padding */
	height: 16.66vh;
	margin: 0;
	padding-left: calc(8.33vw + 2.08vw);
	padding-right: 16.66vw;

	font-size: 18pt;

	background-color: hsla(0, 0%, 50%, 0.0);

	transition-duration: 0.5s;
}

I'm trying to add it to this website (vlad1777d only page), it's full css: https://github.com/vlad1777d/vlad1777d.github.io/blob/master/theme/css/block___header.css it's html: https://github.com/vlad1777d/vlad1777d.github.io/blob/master/index.html

Update: commented background-color here: https://github.com/vlad1777d/vlad1777d.github.io/blob/master/theme/css/block___header.css#L163 and ripple effect appeared on this submenu items (submenu > a).

Update: my website with partially implemented adding ripple.js: vlad1777d.github.io___bug_ripple.js.zip (it depends on current location, so it could be build with script "compile___vlad1777d___local.py" using pelican and python (python3 and pelican static website generator must be installed)

vlad0337187 avatar Nov 14 '17 21:11 vlad0337187