Flow Data UI

by kuonyuu

HTML

<div class="bg">
  
  <div class="node">
    <div class="header">
      <span class="fr">
        <span class="header_btn">&#x25BC;</span>
        <span class="header_btn">&#x25C8;</span>
      </span>
      Title
    </div>

	<div class="cont">
		<div class="line">
			<label for="label1">Label</label>
			<input type="text" id="label1">
		</div>
	</div>

</div>
	
  
</div>

SCSS

body {
  background-color: #292f39;
  padding: 20px;
}

* {
  vertical-align: top;
}

.fr { float: right; }

.node {

  margin: 3px;
  display: inline-block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #2d343d;
  background-color: #202731;
  width: 300px;
  min-height: 100px;
  overflow: hidden;

  .header {
    background-color: #a73146;
    color: #bebebe;
    font-size: 14px;
    padding: 7px 12px;
  }
  
  .header_btn {
    display: inline-block;
    width: 14px;
    height: 12px;
    line-height: 16px;
    text-align: center;
  }
	
	.cont {
		color: #909396;
		font-size: 13px;
		padding: 12px 16px;
		
		input {
			background-color: #292f39;
			border: none;
			height: 14px;
			width: 200px;
			color: white;
			padding: 4px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}
	}
}

/* #1c222b */
/* #202731 */
/* hsla(240,6%,97%,.8) */