I was a little bored so I made this :D
* It's not really Flat, I know if someone knows a name, please tell me so I can change it :)
A Pen by Robin Brons on CodePen.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> | |
<div class="row mt"> | |
<div class="large-5 columns"> | |
<div class="msg error"> | |
<strong>Oops..</strong> something went wrong <span class="close">×</span> | |
</div> | |
<div class="msg succes"> | |
<strong>Success!</strong> we saved your preferences <span class="close">×</span> | |
</div> | |
<div class="msg warn"> | |
<strong>Easy tiger</strong> give us some time to update <span class="close">×</span> | |
</div> | |
</div> <!-- .large-6 --> | |
<div class="large-2 columns"> | |
<input type="button" class="red" value="Red Button" /> | |
<input type="button" class="blue" value="Blue Button" /> | |
<input type="button" class="purple" value="Purple Button" /> | |
</div> <!-- .large-2 --> | |
<div class="large-2 columns"> | |
<input type="button" class="yellow" value="Yellow Button" /> | |
<input type="button" class="green" value="Green Button" /> | |
<input type="button" value="Grey Button" /> | |
</div> <!-- .large-2 --> | |
<div class="large-3 columns"> | |
<div class="progress"> | |
<span style="width: 80%"></span> | |
</div> | |
<div class="progress red"> | |
<span style="width: 65%"></span> | |
</div> | |
<div class="progress yellow"> | |
<span style="width: 46%"></span> | |
</div> | |
<div class="progress purple"> | |
<span style="width: 33%"></span> | |
</div> | |
</div> | |
</div> <!-- .row --> | |
<div class="row mt"> | |
<div class="large-3 columns"> | |
<input type="text" placeholder="input[type=text]" /> | |
<input type="password" placeholder="input[type=password]" /> | |
<input type="email" placeholder="input[type=email]" /> | |
</div> <!-- .large-3 --> | |
<div class="large-3 columns"> | |
<input type="text" placeholder="Invalid" class="error" /> | |
<input type="text" placeholder="Valid" class="succes" /> | |
<input type="text" placeholder="Disabled" disabled /> | |
</div> <!-- .large-3 --> | |
<div class="large-3 columns"> | |
<input type="text" class="lradius" placeholder="Increased border radius" /> | |
<select name='options'> | |
<option value='option-0'>Select...</option> | |
<optgroup label="Item 1"> | |
<option value='option-1'>Item 1.1</option> | |
<option value='option-2'>Item 1.2</option> | |
<option value='option-3'>Item 1.3</option> | |
</optgroup> | |
<option value='option-4'>Item 2</option> | |
<option value='option-5'>Item 3</option> | |
</select> | |
<select name='options' class="lradius"> | |
<option value='option-0'>Select... (increased radius)</option> | |
<option value='option-1'>First option</option> | |
<option value='option-2'>Second option</option> | |
<option value='option-3'>Third option</option> | |
</select> | |
</div> <!-- .large-3 --> | |
<div class="large-3 columns"> | |
<textarea placeholder="This is a textarea where you can put loads of things.." rows="6"></textarea> | |
</div> <!-- .large-3 --> | |
</div> <!-- .row --> | |
<div class="row mt"> | |
<div class="large-2 columns"> | |
<p><strong class="light">input[type=radio]</strong></p> | |
</div> | |
<div class="large-4 columns"> | |
<input type="radio" name="radiored" class="red" checked /> | |
<input type="radio" name="radiored" class="red" /> | |
<input type="radio" name="radioblue" class="blue" checked /> | |
<input type="radio" name="radioblue" class="blue" /> | |
<input type="radio" name="radiogreen" class="green" checked /> | |
<input type="radio" name="radiogreen" class="green" /> | |
<input type="radio" name="radioyellow" class="yellow" checked /> | |
<input type="radio" name="radioyellow" class="yellow" /> | |
<input type="radio" name="radiopurple" class="purple" checked /> | |
<input type="radio" name="radiopurple" class="purple" /> | |
<input type="radio" name="radiobt" checked /> | |
<input type="radio" name="radiobt" /> | |
</div> | |
<div class="large-2 columns"> | |
<p><strong class="light">input[type=checkbox]</strong></p> | |
</div> | |
<div class="large-4 columns"> | |
<input type="checkbox" name="checkred" class="red" checked /> | |
<input type="checkbox" name="checkred" class="red" /> | |
<input type="checkbox" name="checkblue" class="blue" checked /> | |
<input type="checkbox" name="checkblue" class="blue" /> | |
<input type="checkbox" name="checkgreen" class="green" checked /> | |
<input type="checkbox" name="checkgreen" class="green" /> | |
<input type="checkbox" name="checkyellow" class="yellow" checked /> | |
<input type="checkbox" name="checkyellow" class="yellow" /> | |
<input type="checkbox" name="checkpurple" class="purple" checked /> | |
<input type="checkbox" name="checkpurple" class="purple" /> | |
<input type="checkbox" name="checkbt" checked /> | |
<input type="checkbox" name="checkbt" /> | |
</div> | |
</div> <!-- .row --> |
$(document).ready( function() { | |
$('.close').click( function() { | |
$(this).parent().fadeOut(); | |
}); | |
}); |
@import "compass"; | |
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700); | |
$red: hsl(2, 75%, 61%); | |
$green: hsl(136, 33%, 53%); | |
$yellow: hsl(36,76%,56%); | |
$blue: hsl(211,63%,60%); | |
$purple: hsl(277,15%,49%); | |
$white: hsl(0, 0%, 100%); | |
$grey: hsl(0, 0%, 90%); | |
$black: hsl(0, 0%, 0%); | |
$radius: 2px; | |
@mixin gradient($color) { | |
background: linear-gradient(to bottom, | |
$color 0%, | |
darken($color, 6%) | |
100%); | |
} | |
@mixin border($color) { | |
color: $color; | |
border-color: lighten($color, 6%); | |
&:focus { | |
border-color: darken($color, 4%); | |
} | |
} | |
@mixin button($color) { | |
background: linear-gradient(to bottom, | |
$color 0%, | |
darken($color, 6%) | |
100%); | |
&:focus { | |
background: linear-gradient(to bottom, | |
darken($color, 6%) | |
0%, | |
darken($color, 12%) | |
100%); | |
} | |
} | |
body { | |
font-family: 'Quicksand', sans-serif; | |
font-weight: 400; | |
-webkit-font-smoothing: subpixelantialiased; | |
text-rendering: optimizeLegibility | |
} | |
.mt { | |
margin-top: 1.25em; | |
} | |
.row:last-child { | |
margin-bottom: 1.25em; | |
} | |
/* Messages */ | |
.msg { | |
border-radius: $radius; | |
position: relative; | |
color: $white; | |
padding: 10px 12px; | |
font-size: 13px; | |
} | |
.msg:nth-child(n+2) { | |
margin-top: 7px; | |
} | |
.msg.error { | |
@include gradient($red); | |
} | |
.msg.succes { | |
@include gradient($green); | |
} | |
.msg.warn { | |
@include gradient($yellow); | |
} | |
.msg .close { | |
width: 15px; | |
display: inline-block; | |
border-radius: $radius; | |
position: absolute; | |
right: 10px; | |
top: 10px; | |
cursor: pointer; | |
font-weight: 700; | |
line-height: 15px; | |
text-align: center; | |
} | |
/* Inputs */ | |
input { | |
margin: 0; | |
font-family: 'Quicksand', sans-serif; | |
} | |
input[disabled] { | |
background-color: lighten($grey, 5%) !important; | |
cursor: no-drop!important; | |
} | |
input[type=text], | |
input[type=password], | |
input[type=email], | |
textarea, | |
select { | |
height: 100%; | |
border: 2px solid $grey; | |
border-radius: $radius; | |
box-shadow: none; | |
margin: 0; | |
outline: none; | |
padding: 6.5px 12px; | |
font-size: 13px; | |
font-weight: 400; | |
&:focus { | |
border: 2px solid darken($grey, 12%); | |
box-shadow: none; | |
} | |
} | |
input.error, | |
textarea.error { | |
@include border($red); | |
} | |
input.succes, | |
textarea.succes { | |
@include border($green); | |
} | |
input:nth-child(n+2), | |
input + textarea, | |
input + .progress, | |
input + select, | |
select + select { | |
margin-top: 7px; | |
} | |
input.lradius, | |
select.lradius { | |
border-radius: $radius*10; | |
} | |
/* Button */ | |
input[type=button], | |
button { | |
width: 100%; | |
@include gradient($grey); | |
border: 1px solid transparent; | |
border-radius: $radius; | |
outline: none; | |
padding: 8px 0; | |
font-size: 13px; | |
} | |
input[type=button].red, | |
button.red { | |
color: $white; | |
@include gradient($red); | |
} | |
input[type=button].blue, | |
button.blue { | |
color: $white; | |
@include gradient($blue); | |
} | |
input[type=button].purple { | |
color: $white; | |
@include gradient($purple); | |
} | |
input[type=button].green { | |
color: $white; | |
@include gradient($green); | |
} | |
input[type=button].yellow { | |
color: $white; | |
@include gradient($yellow); | |
} | |
select:hover { | |
border-color: $grey; | |
} | |
/* Progress */ | |
.progress { | |
height: 20px; | |
background-color: $grey; | |
border: none; | |
border-radius: $radius; | |
overflow: hidden; | |
padding: 0; | |
} | |
.progress > span { | |
height: 100%; | |
display: block; | |
@include gradient($blue); | |
} | |
.progress.red > span { | |
@include gradient($red); | |
} | |
.progress.purple > span { | |
@include gradient($purple); | |
} | |
.progress.yellow > span { | |
@include gradient($yellow); | |
} | |
/* Checkbox */ | |
input[type=radio] { | |
width: 20px; | |
height: 20px; | |
background-color: $white; | |
border: 2px solid $grey; | |
border-radius: 50%; | |
outline: none; | |
appearance: none; | |
position: relative; | |
cursor: pointer; | |
transition: transform .4s; | |
} | |
input[type=radio]:checked:after { | |
display: block; | |
border: 5px solid; | |
border-color: darken($grey, 10%); | |
border-radius: inherit; | |
position: absolute; | |
top: 3px; | |
left: 3px; | |
content: ''; | |
} | |
input[type=checkbox] { | |
width: 20px; | |
height: 20px; | |
background-color: $white; | |
border: 2px solid $grey; | |
border-radius: 2px; | |
outline: none; | |
position: relative; | |
appearance: none; | |
cursor: pointer; | |
} | |
input[type=checkbox]:checked:after { | |
width: 13px; | |
height: 8px; | |
display: block; | |
border-bottom: 4px solid; | |
border-left: 4px solid; | |
border-color: darken($grey, 10%); | |
transform: rotate(-45deg); | |
position: absolute; | |
top: 2px; | |
left: 2px; | |
content: ''; | |
} | |
/* Radio & Checkbox colors */ | |
input.red:checked:after { | |
border-color: $red; | |
} | |
input.blue:checked:after { | |
border-color: $blue; | |
} | |
input.purple:checked:after { | |
border-color: $purple; | |
} | |
input.yellow:checked:after { | |
border-color: $yellow; | |
} | |
input.green:checked:after { | |
border-color: $green; | |
} | |
/* sdf */ | |
strong.light { | |
display: inline-block; | |
margin-top: 6px; | |
color: darken($grey, 50%); | |
font-size: 14px; | |
} | |
@media only screen and (max-width: 64.063em) { | |
.columns:nth-child(n+2) { | |
margin-top: 1.25em; | |
} | |
} |
I was a little bored so I made this :D
* It's not really Flat, I know if someone knows a name, please tell me so I can change it :)
A Pen by Robin Brons on CodePen.