argyleink

// as seen here: https://github.com/zemirco/flexbox-grid/blob/master/flexbox-grid.styl
@import 'nib'

// variables
var-columns = 12
var-gutter-width = 1rem

// some styles that apply to all columns - makes final css nicer
$common-column-styles
  box-sizing(border-box)

argyleink

<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">

argyleink

# save to /etc/nginx/conf.d/gzip.conf
gzip on;
gzip_proxied any;
gzip_types text/plain text/xml text/css application/x-javascript;
gzip_vary on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";

argyleink

.transparent { opacity:0; }
.absolute { position:absolute; }

/* Toggled State */
label {   
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
  background-color:#ededed;
  border-radius:6px;
  border:1px solid #dcdcdc;

argyleink

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}

argyleink

/**
 * Pure CSS Tab System using :target
 */
 
body {
  font-family: sans-serif;
}

.tabrow {
  text-align: center;

argyleink

/**
 * Dot indicators inside of a circle, 
   which rotate around the center of the parent circle
 */
body {
  background: #f06;
  background: linear-gradient(45deg, #f06, yellow);
}

.circle {

argyleink

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}

argyleink

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}

argyleink

/**
 * The first commented line is your dabblet’s title
 */
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

.triangle {