kizu

color: lime;

kizu

/* Difference between `0` and `none` for `border` */
.a {
	border: 0;
}
.a2 {
	border-style: solid;
}
.b {
	border: none;
}

kizu

/* Rounded arrow button prototype. */
/* Shitty gradient, I know! */

.button {
	position: relative;
	display: inline-block;
	padding: 1em 0 1em 1em;
	margin: 100px;
	
	font: 20px/1.5 Helvetica, Arial, sans-serif;

kizu

/* Rounded arrow button prototype. */
/* Shitty gradient, I know! */

body {	
	background-color: #BBB;
	background-image:
		repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
		repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
		linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
		linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));

kizu

/* Demo of Firefox inline-flex bug */
.baseline-wrapper {
    overflow: auto;
    white-space: nowrap;
    }

.baseline-wrapper:before {
    content: "";
    position: relative;

kizu

/* Demo of another Firefox inline-flex bug */
.baseline-wrapper {
    overflow: auto;
    white-space: nowrap;
    }

.baseline-wrapper:before {
    content: "";
    position: relative;

kizu

/* Test for after */
.a, 
.b {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
}

.a {

kizu

/* Flexible baseline test */
.button,
.button-translate {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;

    flex-direction: column;

    vertical-align: baseline;

kizu

/* Webkit white-on-white bug */

html {
	background: #FFF;
}

.a {
	position: absolute;
	top: 0;
	left: 0;

kizu

/* Flex with fallback */

.flex {
	width: 100%;
	display: table;
	display: flex;
}

.shrinking-item {
	flex-shrink: 0;