Responsive Form Bar

dabblet.css

/**
 * Responsive Form Bar
 */

/*
 CONTENT: 
 1.  $Default Styling
 2.  $Helper Classes
 3.  $Main
 3.1   #User Functions
 */
 
 
 
 
 /* ------ $DEFAULT STYLING ------*/
 * { margin:0; padding:0; }
 body {
 	font:400 .75em/1.5 "HelveticaNeue-Light", "Helvetica Neue Light", sans-serif;
 	-webkit-font-smoothing: antialiased;
 }



/* ------ $HELPER CLASSES ------ */
.float-left { float:left; }
.floaty-right { float:right; } /* class names were not assigned by me! */
.ir { background-color:transparent; border:0; overflow:hidden; *text-indent:-9999px;}
.ir:before { content:""; display:block; width:0; height: 100%;}
.clearfix:before, .clearfix:after { content:" "; display:table; }
.clearfix:after { clear:both; }



/* ------ $MAIN ------ */
.container {
	background-color:#fafdff;
	width:90%;
	margin:auto;
	margin-top:2em;
	padding:21px;
	border:1px solid #ccc;
}

/* --- #User Functions --- */
/* Bottom Bar */
.user-functions-group {
  box-sizing:border-box;
  background-color:#f2f2f2;
  width:100%;
  padding:5px 10px;
  height:44px;
  border:1px solid #b9c2cb;
}

	.user-functions-group > div {
		width:25%;
		float:left;
	}
		.user-functions-group > div:first-child {
			width:75%;
		}

	.user-functions > li {
		transition:width .5s ease-in-out;
		float:left;
	    border-right:1px solid #b9c2cb;
	    width:43px;
	    height:43px;
	    margin:-5px 0;
	    overflow:hidden;
	    list-style:none;
	}
	
		.user-functions > li:first-child {
			margin-left:-10px;
		}
		
		.user-functions > .is-active {
			max-width:93%;
			width:80%;
		}
		
		.icn-function {
			width:43px;
			height:43px;
			float:left;
		}
		
			.icn-function.department {
				background: url('http://placehold.it/16/e4006b/fff') no-repeat center center;
			}
			
			.icn-function.tag {				
				background: url('http://placehold.it/16/e4006b/fff') no-repeat center center;
			}
			
		.function-content {
			color:red;
			padding:12px 0;
			margin-left:43px;
			height:19px
		}
		
			.function-content > div {
				float:right;
				width:40%;
				padding:0 2%;
			}
			
				.function-content > div:first-child {
					width:52%;
					padding:0;
					float:left;
				}
		
	
.btn {
	border-radius:3px;		
	padding:.666666667em 1.083333333em;
	margin:-2px 0;
	font-weight:700;
	text-decoration:none;
}	
		
	.btn-share {
		background:#FFD100;
		border:1px solid #E19C00;
		color:#640;
		float:right;
	}
	
	.btn-add {
		background:#FFD100;		
		border:1px solid #E19C00;
		color:#640;
	}

dabblet.html

<div class=container>



	<div class=user-functions-group>


		<div>
		
	        <ul class=user-functions>
	          <li>
	            <div class="icn-function tag"></div>
	          </li>
	          <li>
	            <div class="icn-function department"></div>
	            <div class=function-content>
	            	<div>TEST</div>
	            	<div>
	            		<a href=# class="btn btn-add">new department</a>
	            	</div>
	            </div>
	          </li> 
	        </ul>
	        
        </div>

		
		<div>
		
	        <a href="#" onclick="javascript:return submitForm(this);" class="btn btn-share">
	          <i class="icn-share"></i> Share
	        </a>
	        
        </div>


	</div>



</div>

settings.json

{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}