All GUI elements are fairly flat, with subtle shadows and gradients to show their usage and functionality or make them stand out from the background.
An h1 is only used for very important content like a users name on her profile. The color is either white or zupply-blue-dark.
Default button
.button{
font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;
border-radius: 4px;
border: 1px solid rgb(180,180,180);
color: rgb(60,60,60);
text-align: center;
padding: 7px 15px;
font-size: 1em;
background-color: rgb(235,235,235);
background-image: -webkit-linear-gradient(bottom, rgb(215,215,215), rgb(235,235,235));
background-image: linear-gradient(bottom, rgb(215,215,215), rgb(235,235,235));
cursor: pointer;
transition: border-color .5s ease .1s, box-shadow .2s ease;
-webkit-transition: border-color .5s ease .1s, box-shadow .2s ease;
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);
}
.button:hover{
border: 1px solid rgb(140,140,140);
background-color: rgb(235,235,235);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.25);
}
.button.active, .button.active:hover{
border: 1px solid rgb(140,140,140);
color: rgb(60,60,60);
background-color: rgb(215,215,215);
background-image: -webkit-linear-gradient(top, rgb(215,215,215), rgb(180,180,180));
background-image: linear-gradient(top, rgb(215,215,215), rgb(180,180,180));
transition: border-color .5s ease .1s, box-shadow .2s ease;
-webkit-transition: border-color .5s ease .1s, box-shadow .2s ease;
box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.25);
}
Disabled button
.button.disabled, .button.disabled:hover{
color: rgb(140,140,140); /* $gray */
border-color: rgb(215,215,215); /* $light-gray */
box-shadow: none;
cursor: default;
background-color: rgb(235,235,235); /* $white-gray */
background-image: -webkit-linear-gradient(bottom, rgb(235,235,235), rgb(250,250,250)); /* $medium-gray $white */
background-image: linear-gradient(bottom, rgb(235,235,235), rgb(250,250,250)); /* $medium-gray $white */
}
Primary button
.button.primary{
background-color: rgb(40,155,195); /* $zupply-blue */
background-image: -webkit-linear-gradient(top, rgb(40,155,195), rgb(0,135,190)); /* $zupply-blue $zupply-blue-dark */
background-image: linear-gradient(top, rgb(40,155,195), rgb(0,135,190)); /* $zupply-blue $zupply-blue-dark */
color: rgb(250,250,250); /* $white */
border-color: rgb(0,135,190); /* $zupply-blue-dark */
}
.button.primary:hover{
border-color: rgb(20,95,150); /* $blue-dark */
}
.button.white{
background-color: rgb(250,250,250); /* $white */
background-image: -webkit-linear-gradient(top, rgb(250,250,250), rgb(235,235,235)); /* $white $white-gray */
background-image: linear-gradient(top, rgb(250,250,250), rgb(235,235,235)); /* $white $white-gray */
color: rgb(0,135,190); /* $zupply-blue-dark */
border-color: transparent;
}
.button.white:hover{
border-color: transparent;
}
Button group
.button-group{
padding: 0;
list-style: none;
}
.button-group.button{
float: left;
position: relative;
text-decoration: none;
border-radius: 0;
border-right: 0;
}
.button-group li{
float: left;
position: relative;
z-index: 1;
}
.button-group li:first-child.button{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.button-group li:last-child.button{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid rgb(180,180,180); /* $medium-gray */
}
.button-group li:hover.button{
z-index: 10;
border-right: 0;
}
.button-group li:not(.active):hover.button{
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.25), 1px 0px 0px 0px rgb(180,180,180); /* $shadow-default $medium-gray */
}
.button-group li:hover:last-child.button{
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.25); /* $shadow-default */
border-right: 1px solid rgb(180,180,180); /* $medium-gray */
}
<ul class="button-group">
<li>
<a href="#" class="button">Button 1</a>
</li>
<li class="active">
<a href="#" class="button active">Button 2</a>
</li>
<li>
<a href="#" class="button">Button 3</a>
</li>
</ul>
All GUI elements are fairly flat, with subtle shadows and gradients to show their usage and functionality or make them stand out from the background.
Old Value
<label for="normalInput">Label</label>
<input id="normalInput" type="text" placeholder="placeholder" value="" />
<label for="comparedInput">Label</label>
<div class="input-compared span-4">
<input id="comparedInput" type="text" placeholder="placeholder" />
<span class="old-value">Old Value</span>
</div>
input{
color: rgb(60,60,60); /* $Black */
font-size: 1em;
border: 0;
padding: 7px 5px;
border-radius: 4px;
background: rgb(235,235,235); /* $White-Gray */
transition: background .3s ease, box-shadow .3s ease;
-webkit-transition: background .3s ease, box-shadow .3s ease;
box-shadow: 0px 0px 0px 2px rgb(235,235,235); /* $White-Gray */
box-sizing: border-box;
-moz-box-sizing: border-box;
}
input:focus{
background: rgb(250,250,250); /* $White */
color: rgb(40,155,195); /* $Zupply-Blue */
outline: none;
box-shadow: 0px 0px 0px 2px rgb(40,155,195); /* $Zupply-Blue */
transition: background .6s ease, box-shadow .6s ease;
-webkit-transition: background .6s ease, box-shadow .6s ease;
}
.input-compared{
border-radius: 4px;
display: inline-block;
box-shadow: 0px 0px 0px 2px rgb(235,235,235); /* $White-Gray */
}
.input-compared input{
margin-top: 0;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.input-compared .old-value{
color: rgb(180,180,180); /* $Medium-Gray */
float: left;
padding: 7px 5px;
}
Toggle switch
Toggle switches are used for options that clearly have two states, like on and off.
<label for="checkbox1" class="checkbox-label">
<input type="checkbox" id="checkbox1" style="display: none;" class="hidden-field">
<span class="custom checkbox"></span>Label for Checkbox
</label>
<label for="checkbox2" class="checkbox-label">
<input type="checkbox" id="checkbox2" style="display: none;" class="hidden-field">
<span class="custom checkbox checked"></span>Label for Checkbox
</label>
.custom.checkbox{
position: absolute;
left: 0;
top: 1px;
display: block;
background: rgb(215,215,215); /* $light-gray */
width: 45px;
height: 20px;
border-radius: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
transition: background .3s ease;
-webkit-transition: background .3s ease;
}
.custom.checkbox:before{
content: "";
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
display: block;
height: 16px;
width: 16px;
background: rgb(250,250,250); /* $white */
transition: left .3s ease;
-webkit-transition: left .3s ease;
}
label:hover .custom.checkbox:before{
left: 15px;
transition: left .6s ease;
-webkit-transition: left .6s ease;
}
label:hover .custom.checkbox{
background: rgba(40,155,195,0.5); /* $zupply-blue */
transition: background .6s ease;
-webkit-transition: background .6s ease;
}
.custom.checkbox.checked{
background: rgba(40,155,195,1); /* $zupply-blue */
transition: background .6s ease;
-webkit-transition: background .6s ease;
}
.custom.checkbox.checked:before{
left: 27px;
transition: left .6s ease;
-webkit-transition: left .6s ease;
}
.checkbox-label{
position: relative;
padding: 3px 0 4px 55px;
font-size: 0.9em;
}