The popular open-source contract for web professionals by Stuff & Nonsense
- Originally published: 23rd December 2008
- Revised date: March 15th 2016
- Original post
/// Flex sass mixin | |
/// | |
/// // Example | |
/// .element { | |
/// @include flex($align-items: center, $justify-content: center); | |
/// } | |
/// | |
/// // CSS Output | |
/// .element { | |
/// background-color: #664a20; |
// | |
// Spacing Utilities | |
// | |
// Spacing System | |
// | |
$space-unit: 4px; | |
$space-xxs: $space-unit; // 4px |
{ | |
"config": { | |
"remove-empty-rulesets": true, | |
"always-semicolon": true, | |
"color-case": "lower", | |
"block-indent": " ", | |
"color-shorthand": true, | |
"element-case": "lower", | |
"eof-newline": true, | |
"leading-zero": false, |
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<title>FadingIN</title> | |
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> | |
<script type="text/javascript"> | |
$(document).ready(function() { | |
window.onload = function() {$('.fade_img').hide().fadeIn(1000);}; | |
}); |
<Box | |
p="0" | |
w="100%" | |
h="100%" | |
bg="white" | |
d="flex" | |
flexDirection="column" | |
flex="0 0 auto" | |
> | |
<Box w="100%" h="50px" p="20px" bg="#333943" d="flex" flex="0 0 auto" /> |
// Popover | |
// Override of Bootstrap popovers | |
// Colors used | |
$blue: #002a5c; | |
.popover { | |
position: absolute; | |
top: 0; | |
left: 0; |
.acc { | |
overflow: hidden; | |
font-size: 16px; | |
} | |
.acc .accPanelTab { | |
-moz-border-radius: 5px 5px 0 0; | |
-webkit-border-radius: 5px 5px 0 0; | |
height: 20px; | |
border-bottom: solid 1px #fff; |
closeIcon={!this.state.helpOpen} |
=== Old icons