/
Gists
/
CSS
Gists - CSS
On gists
Css Tooltip aka Superkoders (+ my solution wo JS)
•
CSS
HTML
tooltip.html #
<!--
https://jsbin.com/fetikedayu/1/edit?html,css,js,output
https://jsbin.com/zofifoceli/edit?html,css,output
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.c-tooltip {
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
position: relative;
font-weight: 400;
height: 16px;
width: 16px;
margin: 250px;
border: 1px solid red;
}
.c-tooltip__text {
display: block;
visibility: hidden;
opacity: 0;
pointer-events: none;
position: absolute;
left: 50%;
top: calc(100% + 20px);
transform: translate3d(-50%,20px,0);
width: 320px;
max-width: 80vw;
padding: 20px 20px 0;
background-color: #fff;
color: #000;
transition: opacity .3s,transform .3s,visibility 0s .3s;
border-radius: 4px;
filter: drop-shadow(0 0 1px #d9d6d4) drop-shadow(0 0 1px #d9d6d4) drop-shadow(0 0 1px #d9d6d4) drop-shadow(0 0 20px rgba(0,0,0,.1));
}
.c-tooltip__text:before
{
position: absolute;
background: transparent;
content: "";
top: -50px;
height: 100px;
width: 100%;
left: 0;
}
.c-tooltip__pointer {
position: absolute;
left: 50%;
top: -7px;
display: block;
width: 14px;
height: 14px;
transform: translateX(-50%) rotate(45deg);
background-color: #fff;
}
.c-tooltip--visible .c-tooltip__text,
.c-tooltip:hover .c-tooltip__text,
.c-tooltip__text:hover
{
visibility: visible;
opacity: 1;
pointer-events: all;
transform: translate3d(-50%,0,0);
transition: visibility 0s .3s,opacity .3s .3s,transform .3s .3s;
z-index: 100;
}
</style>
</head>
<body>
<div class="c-tooltip">
<span class="c-tooltip__icon">
<svg viewBox="0 0 16 16">
<path d="M0 8C0 3.584 3.584 0 8 0C12.416 0 16 3.584 16 8C16 12.416 12.416 16 8 16C3.584 16 0 12.416 0 8ZM9.73605 8.13602L10.456 7.40002C10.912 6.94402 11.2 6.30402 11.2 5.60002C11.2 3.83202 9.76805 2.40002 8.00005 2.40002C6.23205 2.40002 4.80005 3.83202 4.80005 5.60002L6.40005 5.60002C6.40005 4.72002 7.12005 4.00002 8.00005 4.00002C8.88005 4.00002 9.60005 4.72002 9.60005 5.60002C9.60005 6.04002 9.42405 6.44002 9.12805 6.72802L8.13605 7.73602C7.56005 8.32002 7.20005 9.12002 7.20005 10L7.20005 10.4L8.80005 10.4C8.80005 9.20002 9.16005 8.72002 9.73605 8.13602ZM8.79995 13.6L7.19995 13.6L7.19995 12L8.79995 12L8.79995 13.6Z"></path>
</svg>
</span>
<div class="c-tooltip__text">
<span class="c-tooltip__pointer"></span>
<p><a class="c-tooltip__link" href="https://www.vzhurudolu.cz/prirucka/metrika-lps">LPS (Lighthouse Performance Score)</a> je hlavní skóre nástroje Lighthouse pro tuto konkrétní stránku. LPS měříme každý den syntetickým testem.</p>
<p>LPS se nepromítá do celkového zhodnocení stránky.</p>
<p><strong>Optimální hodnota ja 90 % a více.</strong></p>
</div>
</div>
</body>
</html>
On gists
Css modal window 2 (ghost)
•
CSS
CSS trick
modal.html #
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.blocker
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 1;
padding: 20px;
box-sizing: border-box;
background-color: #000;
background-color: #000000bf;
text-align: center;
}
.blocker::before
{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.05em;
}
.modal
{
vertical-align: middle;
position: relative;
z-index: 2;
max-width: 500px;
box-sizing: border-box;
width: 90%;
background: #fff;
padding: 15px 30px
}
</style>
</head>
<body>
<!-- https://jquerymodal.com/ -->
<div class="jquery-modal blocker current">
<div class="modal" style="display: inline-block;">
<h1>Hello there!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a href="#close-modal" rel="modal:close" class="close-modal ">Close</a></div>
</div>
</div>
</body>
</html>
On gists
IE 11 - CSS Grid - SASS mixins
•
SCSS
CSS
CSS trick
mixins.scss #
// Ensure CSS grid works with IE 11 spec.
// https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/
// sass-lint:disable no-vendor-prefixes, no-duplicate-properties
@mixin display-grid {
display: -ms-grid;
display: grid;
}
// $columns values should be delimited by a space
@mixin grid-template-columns($columns...) {
-ms-grid-columns: $columns;
grid-template-columns: $columns;
}
// $rows values should be delimited by a space
@mixin grid-template-rows($rows...) {
-ms-grid-rows: $rows;
grid-template-rows: $rows;
}
// Can be used in combination with above grid-template-X mixins.
// These result in the same output:
// @include grid-template-columns(10px grid-repeat(4, 20px) 30px);
// @include grid-template-columns(10px 20px 20px 20px 20px 30px);
@function grid-repeat($repeat, $stuff: 1fr) {
$list: ();
@for $i from 1 through $repeat {
$list: append($list, $stuff, space);
}
@return $list;
}
@mixin grid-column($col-start, $col-end) {
-ms-grid-column: $col-start;
-ms-grid-column-span: $col-end - $col-start;
grid-column: #{$col-start} / #{$col-end};
}
@mixin grid-row($row-start, $row-end) {
-ms-grid-row: $row-start;
-ms-grid-row-span: $row-end - $row-start;
grid-row: #{$row-start} / #{$row-end};
}
@mixin grid-align-self($value) {
-ms-grid-row-align: $value;
align-self: $value;
}
@mixin grid-justify-self($value) {
-ms-grid-column-align: $value;
justify-self: $value;
}
On gists
Quantity queries
•
CSS
CSS trick
examples.css #
/*
@see: https://www.hongkiat.com/blog/quantity-queries-css-quantity-aware/
*/
/* "At-least" query */
ul li:nth-last-child(n+5),
ul li:nth-last-child(n+5) ~ li {
background-color: orange;
}
/* "At-most" query */
ul li:nth-last-child(-n+5):first-child,
ul li:nth-last-child(-n+5):first-child ~ li {
background-color: orange;
}
/* "Between" query */
ul li:nth-last-child(n+5):nth-last-child(-n+6):first-child,
ul li:nth-last-child(n+5):nth-last-child(-n+6):first-child ~ li {
background-color: orange;
}
/* OR */
/* https://quantityqueries.com/ */
/* at-least 2 */
li:nth-last-child(n+2), li:nth-last-child(n+2) ~ li { }
/* at-most 2 */
li:nth-last-child(-n+2):first-child, li:nth-last-child(-n+2):first-child ~ li { }
/* at least / at most 2 - 4 */
li:nth-last-child(n+2):nth-last-child(-n+4):first-child, li:nth-last-child(n+2):nth-last-child(-n+4):first-child ~ li { }
On gists
CSS
CSS trick
CSS - full height with resizable header & footer with TABLE LAYOUT
layout.css #
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
height: 100%;
/*border-spacing: 10px;
margin: 0 -10px;
*/
width: 100%;
}
.nav, .content, .footer {
display: table-row;
}
.cell {
display: table-cell;
}
.nav div, .footer div {
background-color: #1565C0;
}
.content div {
height: 100%; /* Nutné, aby obsah dominantne zaberal všetko voľné miesto. */
border: 1px solid;
}
p {
padding: 1em;
margin: 0;
}
On gists
CSS
Bootstrap
CSS trick
From http://stackoverflow.com/questions/26939104/clear-rows-when-doing-multi-responsive-columns-bootstrap/33540628#33540628
bootstrap-autoclear.css #
@media (min-width:1200px){
.auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
.auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
.auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
.auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
.auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
.auto-clear .col-md-1:nth-child(12n+1){clear:left;}
.auto-clear .col-md-2:nth-child(6n+1){clear:left;}
.auto-clear .col-md-3:nth-child(4n+1){clear:left;}
.auto-clear .col-md-4:nth-child(3n+1){clear:left;}
.auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
.auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
.auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
.auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
.auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
.auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
.auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
.auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
.auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
.auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
.auto-clear .col-xs-6:nth-child(odd){clear:left;}
}