Created
March 13, 2017 18:54
-
-
Save PauliusKrutkis/396e08f926fe539bda30f2b25aaa1dfd to your computer and use it in GitHub Desktop.
Various css (sass) examples
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*------------------------------------*\ | |
#RESPONSIVE STICKY FOOTER | |
/*------------------------------------*/ | |
html, | |
body | |
display: table | |
height: 100% | |
width: 100% | |
footer | |
display: table-row | |
height: 1px | |
/*------------------------------------*\ | |
#SIDE MENU | |
/*------------------------------------*/ | |
.page-nav | |
position: fixed | |
background-color: gray | |
transition: transform .3s | |
width: 300px | |
height: 100vh | |
overflow-x: hidden | |
overflow-y: auto | |
z-index: 2 | |
transform: translateX(-300px) | |
.mask | |
position: fixed | |
top: 0 | |
left: 0 | |
overflow: hidden | |
width: 0 | |
height: 0 | |
background-color: #000 | |
opacity: 0 | |
transition: opacity .3s, width 0s .3s, height 0s .3s | |
z-index: 1 | |
body | |
transition: transform .3s | |
&.menu-active | |
transform: translateX(300px) | |
overflow: hidden | |
.mask | |
width: 100% | |
height: 100% | |
opacity: 0.7 | |
transition: opacity .3s | |
/*------------------------------------*\ | |
#GALLERY IMG COVER | |
/*------------------------------------*/ | |
.gallery | |
margin-left: -15px | |
margin-right: -15px | |
text-align: center | |
font-size: 0 | |
.item | |
width: calc(33.3% - 30px) | |
margin: 0 15px 15px | |
display: inline-block | |
overflow: hidden | |
position: relative | |
&:before | |
content: '' | |
display: block | |
padding-top: 100% | |
img | |
max-width: none | |
width: auto | |
height: 100% | |
min-height: 100% | |
position: absolute | |
top: 50% | |
left: 50% | |
transform: translate(-50%, -50%) | |
/*------------------------------------*\ | |
#SELECTOR EXAMPLES | |
/*------------------------------------*/ | |
// "default" link styling example | |
// :not, currentColor examples | |
a[href]:not([class]) | |
text-decoration: none | |
position: relative | |
&:after | |
transition: all .2s ease-in-out | |
background-color: currentColor | |
content: '' | |
width: 0 | |
height: 1px | |
position: absolute | |
bottom: 0 | |
left: 0 | |
right: 0 | |
margin: 0 auto | |
&:hover &:after | |
width: 100% | |
// attribute value selector example | |
a[href*="facebook"] | |
background-color: blue | |
color: white | |
/*------------------------------------*\ | |
#RESPONSIVE TABLE | |
/*------------------------------------*/ | |
// more info: http://allthingssmitty.com/2016/10/03/responsive-table-layout/ | |
@media(max-width: 768px) | |
table | |
border: 0 | |
thead | |
border: 0 | |
clip: rect(0 0 0 0) | |
height: 1px | |
margin: -1px | |
overflow: hidden | |
position: absolute | |
padding: 0 | |
width: 1px | |
tr | |
display: block | |
border-bottom: 3px solid blue | |
margin-bottom: 10px | |
td | |
display: block | |
text-align: right | |
border-bottom: 1px solid blue | |
&:before | |
content: attr(data-label) | |
float: left | |
font-weight: bold | |
text-transform: uppercase | |
&:last-child | |
border-bottom: 0 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment