mirror of
https://github.com/codeguy/php-the-right-way.git
synced 2025-08-07 06:26:45 +02:00
Add new UI files
This commit is contained in:
=
8
styles/base/all.less
Normal file
8
styles/base/all.less
Normal file
@@ -0,0 +1,8 @@
|
||||
@import "reset";
|
||||
@import "prefixer";
|
||||
@import "spacing";
|
||||
@import "typography";
|
||||
@import "idioms";
|
||||
@import "grid";
|
||||
@import "bars-buttons";
|
||||
@import "buttons";
|
||||
240
styles/base/bars-buttons.less
Normal file
240
styles/base/bars-buttons.less
Normal file
@@ -0,0 +1,240 @@
|
||||
.button() {
|
||||
.border-box;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
.phh;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
.button-hover(){
|
||||
text-decoration: none;
|
||||
}
|
||||
.bar() {
|
||||
display: block;
|
||||
.pah;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Sizes */
|
||||
|
||||
.btn-size(@scale){
|
||||
height: @baseline * @scale !important;
|
||||
padding-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
line-height: @baseline * (@scale * 0.9);
|
||||
}
|
||||
.btn-half{
|
||||
.btn-size(1);
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.btn-single{
|
||||
.btn-size(1.5);
|
||||
font-size: 1em;
|
||||
}
|
||||
.btn-double{
|
||||
.btn-size(2);
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* Shapes */
|
||||
|
||||
.bb-shape-square() {
|
||||
.border-radius(0);
|
||||
}
|
||||
.bb-shape-rounded(@rad:3px) {
|
||||
.border-radius(@rad);
|
||||
}
|
||||
.bb-shape-round() {
|
||||
.border-radius(@baseline);
|
||||
}
|
||||
|
||||
/* Text */
|
||||
|
||||
.bb-text-dark(){
|
||||
color: #333;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
.bb-text-light(){
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
|
||||
}
|
||||
.bb-text-color(@color){
|
||||
|
||||
}
|
||||
|
||||
/* Color */
|
||||
|
||||
.bb-color-plain(@color){
|
||||
background: @color;
|
||||
}
|
||||
.bb-color-gradient(@color){
|
||||
.gradient(@color,lighten(@color,10%),darken(@color,10%));
|
||||
}
|
||||
.bb-color-soft(@color){
|
||||
.gradient(@color,lighten(@color,5%),darken(@color,5%));
|
||||
}
|
||||
.bb-color-gloss(@color){
|
||||
@topStart: desaturate(lighten(@color,40%),20%);
|
||||
@topStop: desaturate(lighten(@color,20%),40%);
|
||||
@bottomStart: desaturate(lighten(@color,10%),30%);
|
||||
@bottomStop: desaturate(lighten(@color,15%),30%);
|
||||
.linear-gradient-top(@color,@topStart,0%,@topStop,50%,@bottomStart,50%,@bottomStop,100%);
|
||||
}
|
||||
|
||||
/* Border */
|
||||
|
||||
.bb-border-noborder(){
|
||||
border: none;
|
||||
}
|
||||
.bb-border-plain(@color){
|
||||
border: 1px solid darken(@color,10%);
|
||||
}
|
||||
.bb-border-contrast(@color){
|
||||
border: 1px solid darken(@color,15%);
|
||||
.box-shadow(inset 0 0 1px 1px lighten(@color,15%));
|
||||
}
|
||||
.bb-border-meta(@color){
|
||||
border: 1px solid darken(@color,15%);
|
||||
.box-shadow(inset 0 2px 1px -1px lighten(@color,20%));
|
||||
}
|
||||
|
||||
/* Minimal */
|
||||
|
||||
.button-minimal(@color) {
|
||||
.button();
|
||||
.bb-shape-rounded();
|
||||
.bb-color-plain(@color);
|
||||
.bb-border-contrast(@color);
|
||||
.bb-text-dark();
|
||||
}
|
||||
.button-minimal-hover(@color){
|
||||
.button-minimal(darken(@color,5%));
|
||||
.button-hover();
|
||||
}
|
||||
.button-minimal-active(@color){
|
||||
.button-minimal-hover(darken(@color,5%));
|
||||
}
|
||||
.bar-minimal(@color) {
|
||||
.button-minimal(@color);
|
||||
.bar();
|
||||
}
|
||||
|
||||
/* Clean */
|
||||
|
||||
.button-clean(@color) {
|
||||
.button();
|
||||
.bb-shape-rounded();
|
||||
.bb-color-gradient(@color);
|
||||
.bb-border-plain(darken(@color,5%));
|
||||
.bb-text-dark();
|
||||
}
|
||||
.button-clean-hover(@color){
|
||||
.button-clean(darken(@color,5%));
|
||||
.button-hover();
|
||||
}
|
||||
.button-clean-active(@color){
|
||||
.button-clean-hover(darken(@color,5%));
|
||||
}
|
||||
.bar-clean(@color){
|
||||
.button-clean(@color);
|
||||
.bar();
|
||||
}
|
||||
|
||||
/* Soft */
|
||||
|
||||
.button-soft(@color) {
|
||||
.button();
|
||||
.bb-shape-rounded();
|
||||
.bb-color-soft(@color);
|
||||
.bb-border-meta(darken(@color,5%));
|
||||
.bb-text-light();
|
||||
}
|
||||
.button-soft-hover(@color){
|
||||
.button-soft(darken(@color,5%));
|
||||
.button-hover();
|
||||
}
|
||||
.button-soft-active(@color){
|
||||
.button-soft-hover(darken(@color,5%));
|
||||
}
|
||||
.bar-soft(@color){
|
||||
.button-soft(@color);
|
||||
.bar();
|
||||
}
|
||||
|
||||
/* Pill */
|
||||
|
||||
.button-pill(@color) {
|
||||
.button();
|
||||
.bb-shape-round();
|
||||
.bb-color-soft(@color);
|
||||
.bb-border-meta(darken(@color,5%));
|
||||
.bb-text-light();
|
||||
}
|
||||
.button-pill-hover(@color){
|
||||
.button-pill(darken(@color,5%));
|
||||
.button-hover();
|
||||
}
|
||||
.button-pill-active(@color){
|
||||
.button-pill-hover(darken(@color,5%));
|
||||
}
|
||||
.bar-pill(@color){
|
||||
.button-pill(@color);
|
||||
.bar();
|
||||
}
|
||||
|
||||
/* Gloss */
|
||||
|
||||
.button-gloss(@color) {
|
||||
.button();
|
||||
.bb-shape-rounded(5px);
|
||||
.bb-color-gloss(@color);
|
||||
.bb-border-plain(darken(@color,5%));
|
||||
.box-shadow(inset 0 1px 0 0 rgba(255,255,255,.5));
|
||||
.bb-text-light();
|
||||
}
|
||||
.button-gloss-hover(@color){
|
||||
.button-gloss(darken(@color,5%));
|
||||
.box-shadow(inset 0 1px 0 0 rgba(255,255,255,.3));
|
||||
.button-hover();
|
||||
}
|
||||
.button-gloss-active(@color){
|
||||
.button-gloss-hover(darken(@color,5%));
|
||||
.box-shadow(inset 0 0 5px 0 rgba(0,0,0,.3));
|
||||
}
|
||||
.bar-gloss(@color){
|
||||
.button-gloss(@color);
|
||||
.bar();
|
||||
}
|
||||
|
||||
@btn-minimal-color: #eee;
|
||||
.btn-minimal { .button-minimal(@btn-minimal-color); }
|
||||
.btn-minimal:hover { .button-minimal-hover(@btn-minimal-color); }
|
||||
.btn-minimal:active { .button-minimal-active(@btn-minimal-color); }
|
||||
|
||||
@btn-clean-color: #eee;
|
||||
.btn-clean { .button-clean(@btn-clean-color); }
|
||||
.btn-clean:hover { .button-clean-hover(@btn-clean-color); }
|
||||
.btn-clean:active { .button-clean-active(@btn-clean-color); }
|
||||
|
||||
@btn-soft-color: #6C84AB;
|
||||
.btn-soft { .button-soft(@btn-soft-color); }
|
||||
.btn-soft:hover { .button-soft-hover(@btn-soft-color); }
|
||||
.btn-soft:active { .button-soft-active(@btn-soft-color); }
|
||||
|
||||
@btn-pill-color: #6C84AB;
|
||||
.btn-pill { .button-pill(@btn-pill-color); }
|
||||
.btn-pill:hover { .button-pill-hover(@btn-pill-color); }
|
||||
.btn-pill:active { .button-pill-active(@btn-pill-color); }
|
||||
|
||||
@btn-gloss-color: #172D6E;
|
||||
.btn-gloss { .button-gloss(@btn-gloss-color); }
|
||||
.btn-gloss:hover { .button-gloss-hover(@btn-gloss-color); }
|
||||
.btn-gloss:active { .button-gloss-active(@btn-gloss-color); }
|
||||
|
||||
|
||||
.bar-minimal { .bar-minimal(@btn-minimal-color); }
|
||||
.bar-clean { .bar-clean(@btn-clean-color); }
|
||||
.bar-soft { .bar-soft(@btn-soft-color); }
|
||||
.bar-pill { .bar-pill(@btn-pill-color); }
|
||||
.bar-gloss { .bar-gloss(@btn-gloss-color); }
|
||||
97
styles/base/buttons.less
Normal file
97
styles/base/buttons.less
Normal file
@@ -0,0 +1,97 @@
|
||||
/* ==========================================================================
|
||||
Settings
|
||||
========================================================================== */
|
||||
|
||||
@import 'variables.less';
|
||||
|
||||
/*
|
||||
@baseline: @baseline;
|
||||
@button-color: @button-color;
|
||||
@button-primary-color: @button-primary-color;
|
||||
@button-info-color: @button-info-color;
|
||||
@button-success-color: @button-success-color;
|
||||
@button-warning-color: @button-warning-color;
|
||||
@button-danger-color: @button-danger-color;
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Default
|
||||
========================================================================== */
|
||||
|
||||
.btn{
|
||||
.btn-s;
|
||||
background-clip: border-box !important;
|
||||
background-repeat: repeat-x;
|
||||
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
.border-box;
|
||||
.border-radius(4px);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
.gradient(@button-color, lighten(@button-color, 10%), @button-color);
|
||||
.phh;
|
||||
.pvn;
|
||||
.transition(background-position linear 0.1s);
|
||||
vertical-align: middle;
|
||||
color: #333;
|
||||
font-family: @body-font-family;
|
||||
text-decoration: none !important;
|
||||
text-shadow: rgba(255,255,255,0.75) 0 1px 0;
|
||||
|
||||
&:hover{
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Styles
|
||||
========================================================================== */
|
||||
|
||||
.btn-primary,
|
||||
.btn-info,
|
||||
.btn-success,
|
||||
.btn-warning,
|
||||
.btn-danger{
|
||||
color: #FFF !important;
|
||||
text-shadow: rgba(0,0,0,0.25) 0 -1px 0 !important;
|
||||
}
|
||||
.btn-primary{
|
||||
.btn;
|
||||
.gradient(@button-primary-color, lighten(@button-primary-color, 10%), @button-primary-color);
|
||||
}
|
||||
.btn-info{
|
||||
.btn;
|
||||
.gradient(@button-info-color, lighten(@button-info-color, 10%), @button-info-color);
|
||||
}
|
||||
.btn-success{
|
||||
.btn;
|
||||
.gradient(@button-success-color, lighten(@button-success-color, 10%), @button-success-color);
|
||||
}
|
||||
.btn-warning{
|
||||
.btn;
|
||||
.gradient(@button-warning-color, lighten(@button-warning-color, 10%), @button-warning-color);
|
||||
}
|
||||
.btn-danger{
|
||||
.btn;
|
||||
.gradient(@button-danger-color, lighten(@button-danger-color, 10%), @button-danger-color);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Sizes (Half = h, Single = s, Double = d)
|
||||
========================================================================== */
|
||||
|
||||
.btn-h, .btn-half{
|
||||
height: @baseline;
|
||||
font-size: @baseline * 0.6;
|
||||
line-height: @baseline;
|
||||
}
|
||||
.btn-s, .btn-single{
|
||||
height: @baseline * 1.5;
|
||||
font-size: @baseline * 0.75;
|
||||
line-height: @baseline * 1.5;
|
||||
}
|
||||
.btn-d, .btn-double{
|
||||
height: @baseline * 2;
|
||||
font-size: @baseline;
|
||||
line-height: @baseline * 2;
|
||||
}
|
||||
231
styles/base/grid.less
Normal file
231
styles/base/grid.less
Normal file
@@ -0,0 +1,231 @@
|
||||
/**
|
||||
* Hybrid Grid Sytem
|
||||
*
|
||||
* Blend of the Semantic Grid System and Zurb Foundation with a little Twitter Bootstrap
|
||||
*/
|
||||
|
||||
/* Settings */
|
||||
|
||||
@import 'variables.less';
|
||||
|
||||
/*
|
||||
@fixed-column-width: 40px;
|
||||
@fixed-gutter-width: 20px;
|
||||
@fixed-columns: 12;
|
||||
|
||||
@fluid-column-width: 4.3%;
|
||||
@fluid-gutter-width: 4.4%;
|
||||
@fluid-columns: 12;
|
||||
|
||||
@mobile-break-width: 480px;
|
||||
@mobile-column-width: 8.6%;
|
||||
@mobile-gutter-width: 8.8%;
|
||||
@mobile-columns: 6;
|
||||
*/
|
||||
|
||||
/* Grid */
|
||||
|
||||
#grid {
|
||||
|
||||
.cols(@cols,@width,@gutter){
|
||||
.border-box();
|
||||
width: ((@cols * @width) + ((@cols - 1) * @gutter));
|
||||
margin-left: @gutter;
|
||||
position: relative;
|
||||
display: inline;
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.grid-fixed,.grid-fluid {
|
||||
.clearfix;
|
||||
.row {
|
||||
.border-box();
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
.clearfix;
|
||||
|
||||
.center,.center:last-child {
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-fixed {
|
||||
@total-width: (@fixed-column-width*@fixed-columns) + (@fixed-gutter-width*(@fixed-columns - 1));
|
||||
@column-width: @fixed-column-width;
|
||||
@gutter-width: @fixed-gutter-width;
|
||||
@columns: @fixed-columns;
|
||||
width: @total-width;
|
||||
|
||||
/* This is duplicated in both classes. Unavoidable. */
|
||||
.colX (@index) when (@index > 0) {
|
||||
(~".col@{index}") {
|
||||
#grid > .cols(@index,@column-width,@gutter-width);
|
||||
}
|
||||
.colX(@index - 1);
|
||||
}
|
||||
.colX (0) {}
|
||||
.colX(@columns);
|
||||
|
||||
.offsetX (@index) when (@index > 0) {
|
||||
(~".offset@{index}") {
|
||||
margin-left: (@index * @column-width) + ((@index + 1) * @gutter-width);
|
||||
}
|
||||
.offsetX(@index - 1);
|
||||
}
|
||||
.offsetX (0) {}
|
||||
.offsetX(@columns - 1);
|
||||
|
||||
.pushX (@index) when (@index > 0) {
|
||||
(~".push@{index}") {
|
||||
left: @index * (@column-width + @gutter-width);
|
||||
}
|
||||
.pushX(@index - 1);
|
||||
}
|
||||
.pushX (0) {}
|
||||
.pushX(@columns - 1);
|
||||
|
||||
.pullX (@index) when (@index > 0) {
|
||||
(~".pull@{index}") {
|
||||
right: @index * (@column-width + @gutter-width);
|
||||
}
|
||||
.pullX(@index - 1);
|
||||
}
|
||||
.pullX (0) {}
|
||||
.pullX(@columns - 1);
|
||||
}
|
||||
|
||||
|
||||
.grid-fluid {
|
||||
@total-width: 100%;
|
||||
@column-width: @fluid-column-width;
|
||||
@gutter-width: @fluid-gutter-width;
|
||||
@columns: @fluid-columns;
|
||||
width: @total-width;
|
||||
|
||||
/* This is duplicated in both classes. Unavoidable. */
|
||||
.colX (@index) when (@index > 0) {
|
||||
(~".col@{index}") {
|
||||
#grid > .cols(@index,@column-width,@gutter-width);
|
||||
}
|
||||
.colX(@index - 1);
|
||||
}
|
||||
.colX (0) {}
|
||||
.colX(@columns);
|
||||
|
||||
.offsetX (@index) when (@index > 0) {
|
||||
(~".offset@{index}") {
|
||||
margin-left: (@index * @column-width) + ((@index + 1) * @gutter-width);
|
||||
}
|
||||
.offsetX(@index - 1);
|
||||
}
|
||||
.offsetX (0) {}
|
||||
.offsetX(@columns - 1);
|
||||
|
||||
.pushX (@index) when (@index > 0) {
|
||||
(~".push@{index}") {
|
||||
left: @index * (@column-width + @gutter-width);
|
||||
}
|
||||
.pushX(@index - 1);
|
||||
}
|
||||
.pushX (0) {}
|
||||
.pushX(@columns - 1);
|
||||
|
||||
.pullX (@index) when (@index > 0) {
|
||||
(~".pull@{index}") {
|
||||
right: @index * (@column-width + @gutter-width);
|
||||
}
|
||||
.pullX(@index - 1);
|
||||
}
|
||||
.pullX (0) {}
|
||||
.pullX(@columns - 1);
|
||||
}
|
||||
|
||||
|
||||
@media all and (max-width: @mobile-break-width) {
|
||||
|
||||
// Reset all columns to full width
|
||||
.grid-fixed {
|
||||
.colX (@index) when (@index > 0) {
|
||||
(~".col@{index}") {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.colX(@index - 1);
|
||||
}
|
||||
.colX (0) {}
|
||||
.colX(@fixed-columns);
|
||||
}
|
||||
.grid-fluid {
|
||||
.colX (@index) when (@index > 0) {
|
||||
(~".col@{index}") {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.colX(@index - 1);
|
||||
}
|
||||
.colX (0) {}
|
||||
.colX(@fluid-columns);
|
||||
}
|
||||
|
||||
.grid-fixed, .grid-fluid {
|
||||
@total-width: 100%;
|
||||
@column-width: @mobile-column-width;
|
||||
@gutter-width: @mobile-gutter-width;
|
||||
@columns: @mobile-columns;
|
||||
width: @total-width;
|
||||
|
||||
.m-colX (@index) when (@index > 0) {
|
||||
(~".m-col@{index}") {
|
||||
#grid > .cols(@index,@column-width,@gutter-width);
|
||||
}
|
||||
.m-colX(@index - 1);
|
||||
}
|
||||
.m-colX (0) {}
|
||||
.m-colX(@mobile-columns);
|
||||
|
||||
.m-offsetX (@index) when (@index > 0) {
|
||||
(~".m-offset@{index}") {
|
||||
margin-left: (@index * @column-width) + ((@index + 1) * @gutter-width);
|
||||
}
|
||||
.m-offsetX(@index - 1);
|
||||
}
|
||||
.m-offsetX (0) {}
|
||||
.m-offsetX(@columns - 1);
|
||||
|
||||
.m-pushX (@index) when (@index > 0) {
|
||||
(~".m-push@{index}") {
|
||||
left: @index * (@column-width + @gutter-width);
|
||||
}
|
||||
.m-pushX(@index - 1);
|
||||
}
|
||||
.m-pushX (0) {}
|
||||
.m-pushX(@columns - 1);
|
||||
|
||||
.m-pullX (@index) when (@index > 0) {
|
||||
(~".m-pull@{index}") {
|
||||
right: @index * (@column-width + @gutter-width);
|
||||
}
|
||||
.m-pullX(@index - 1);
|
||||
}
|
||||
.m-pullX (0) {}
|
||||
.m-pullX(@columns - 1);
|
||||
}
|
||||
|
||||
}
|
||||
94
styles/base/idioms.less
Normal file
94
styles/base/idioms.less
Normal file
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
* New Media Campaigns Idioms
|
||||
*
|
||||
* These are common patterns we use in all of our
|
||||
* projects. They are consolidated here to keep code DRY.
|
||||
*
|
||||
* Listing
|
||||
* * .no-text, .text-replace
|
||||
* * .no-list
|
||||
* * .no-form
|
||||
* * .fixed-width(@width)
|
||||
* * .column-width(@width)
|
||||
* * .column-left(@width)
|
||||
* * .column-right(@width)
|
||||
* * .full-size
|
||||
* * .absolute-default
|
||||
* * .absolute-fullsize
|
||||
* * .clearfix
|
||||
*/
|
||||
|
||||
/* Hides text when using image replacement */
|
||||
.no-text, .text-replace{
|
||||
overflow: hidden;
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Removes bullets, margin, and padding from list */
|
||||
.no-list{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Removes webkit styling from form element */
|
||||
.no-form{
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* Center a fixed width container */
|
||||
.fixed-width(@width) {
|
||||
margin: 0 auto;
|
||||
width: @width;
|
||||
}
|
||||
|
||||
/* Adds left or right columns (e.g. content and sidebar) */
|
||||
.column-width(@width){
|
||||
display: inline;
|
||||
width: @width;
|
||||
}
|
||||
.column-left(@width){
|
||||
.column-width(@width);
|
||||
float: left;
|
||||
}
|
||||
.column-right(@width){
|
||||
.column-width(@width);
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Set width and height of element to that of its parent */
|
||||
.full-size{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Position element absolutely to 0,0 */
|
||||
.absolute-default{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Position element absolutely and set its width and height to that of its parent (useful for slideshows) */
|
||||
.absolute-fullsize{
|
||||
.absolute-default;
|
||||
.full-size;
|
||||
}
|
||||
|
||||
/* The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */
|
||||
.clearfix {
|
||||
*zoom:1;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content:"";
|
||||
display:table;
|
||||
}
|
||||
&:after {
|
||||
clear:both;
|
||||
}
|
||||
}
|
||||
328
styles/base/prefixer.less
Normal file
328
styles/base/prefixer.less
Normal file
@@ -0,0 +1,328 @@
|
||||
/*---------------------------------------------------
|
||||
LESS Prefixer
|
||||
---------------------------------------------------
|
||||
|
||||
All of the CSS3 fun, none of the prefixes!
|
||||
|
||||
As a rule, you can use the CSS properties you
|
||||
would expect just by adding a '.':
|
||||
|
||||
box-shadow => .box-shadow(@args)
|
||||
|
||||
Also, when shorthand is available, arguments are
|
||||
not parameterized. Learn CSS, not LESS Prefixer.
|
||||
|
||||
-------------------------------------------------
|
||||
TABLE OF CONTENTS
|
||||
(*) denotes a syntax-sugar helper
|
||||
-------------------------------------------------
|
||||
|
||||
.animation(@args)
|
||||
.animation-delay(@delay)
|
||||
.animation-direction(@direction)
|
||||
.animation-duration(@duration)
|
||||
.animation-iteration-count(@count)
|
||||
.animation-name(@name)
|
||||
.animation-play-state(@state)
|
||||
.animation-timing-function(@function)
|
||||
.background-size(@args)
|
||||
.border-radius(@args)
|
||||
.box-shadow(@args)
|
||||
.inner-shadow(@args) *
|
||||
.box-sizing(@args)
|
||||
.border-box() *
|
||||
.content-box() *
|
||||
.columns(@args)
|
||||
.column-count(@count)
|
||||
.column-gap(@gap)
|
||||
.column-rule(@args)
|
||||
.column-width(@width)
|
||||
.gradient(@default,@start,@stop) *
|
||||
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
|
||||
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
|
||||
.opacity(@factor)
|
||||
.transform(@args)
|
||||
.rotate(@deg)
|
||||
.scale(@factor)
|
||||
.translate(@x,@y)
|
||||
.translate3d(@x,@y,@z)
|
||||
.translateHardware(@x,@y) *
|
||||
.text-shadow(@args)
|
||||
.transition(@args)
|
||||
.transition-delay(@delay)
|
||||
.transition-duration(@duration)
|
||||
.transition-property(@property)
|
||||
.transition-timing-function(@function)
|
||||
|
||||
|
||||
|
||||
Credit to LESS Elements for the motivation and
|
||||
to CSS3Please.com for implementation.
|
||||
|
||||
Copyright (c) 2012 Joel Sutherland
|
||||
MIT Licensed:
|
||||
http://www.opensource.org/licenses/mit-license.php
|
||||
|
||||
-----------------------------------------------------*/
|
||||
|
||||
|
||||
/* Animation */
|
||||
.animation(@args) {
|
||||
-webkit-animation: @args;
|
||||
-moz-animation: @args;
|
||||
-ms-animation: @args;
|
||||
-o-animation: @args;
|
||||
}
|
||||
.animation-delay(@delay) {
|
||||
-webkit-animation-delay: @delay;
|
||||
-moz-animation-delay: @delay;
|
||||
-ms-animation-delay: @delay;
|
||||
-o-animation-delay: @delay;
|
||||
}
|
||||
.animation-direction(@direction) {
|
||||
-webkit-animation-direction: @direction;
|
||||
-moz-animation-direction: @direction;
|
||||
-ms-animation-direction: @direction;
|
||||
-o-animation-direction: @direction;
|
||||
}
|
||||
.animation-duration(@duration) {
|
||||
-webkit-animation-duration: @duration;
|
||||
-moz-animation-duration: @duration;
|
||||
-ms-animation-duration: @duration;
|
||||
-o-animation-duration: @duration;
|
||||
}
|
||||
.animation-iteration-count(@count) {
|
||||
-webkit-animation-iteration-count: @count;
|
||||
-moz-animation-iteration-count: @count;
|
||||
-ms-animation-iteration-count: @count;
|
||||
-o-animation-iteration-count: @count;
|
||||
}
|
||||
.animation-name(@name) {
|
||||
-webkit-animation-name: @name;
|
||||
-moz-animation-name: @name;
|
||||
-ms-animation-name: @name;
|
||||
-o-animation-name: @name;
|
||||
}
|
||||
.animation-play-state(@state) {
|
||||
-webkit-animation-play-state: @state;
|
||||
-moz-animation-play-state: @state;
|
||||
-ms-animation-play-state: @state;
|
||||
-o-animation-play-state: @state;
|
||||
}
|
||||
.animation-timing-function(@function) {
|
||||
-webkit-animation-timing-function: @function;
|
||||
-moz-animation-timing-function: @function;
|
||||
-ms-animation-timing-function: @function;
|
||||
-o-animation-timing-function: @function;
|
||||
}
|
||||
|
||||
|
||||
/* Background Size */
|
||||
|
||||
.background-size(@args) {
|
||||
-webkit-background-size: @args;
|
||||
-moz-background-size: @args;
|
||||
background-size: @args;
|
||||
}
|
||||
|
||||
|
||||
/* Border Radius */
|
||||
|
||||
.border-radius(@args) {
|
||||
-webkit-border-radius: @args;
|
||||
-moz-border-radius: @args;
|
||||
border-radius: @args;
|
||||
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
||||
/* Box Shadows */
|
||||
.box-shadow(@args) {
|
||||
-webkit-box-shadow: @args;
|
||||
-moz-box-shadow: @args;
|
||||
box-shadow: @args;
|
||||
}
|
||||
.inner-shadow(@args) {
|
||||
.box-shadow(inset @args);
|
||||
}
|
||||
|
||||
|
||||
/* Box Sizing */
|
||||
.box-sizing(@args){
|
||||
-webkit-box-sizing: @args;
|
||||
-moz-box-sizing: @args;
|
||||
box-sizing: @args;
|
||||
}
|
||||
.border-box(){
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
.content-box(){
|
||||
.box-sizing(content-box);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Columns */
|
||||
.columns(@args){
|
||||
-webkit-columns: @args;
|
||||
-moz-columns: @args;
|
||||
columns: @args;
|
||||
}
|
||||
.column-count(@count) {
|
||||
-webkit-column-count: @count;
|
||||
-moz-column-count: @count;
|
||||
column-count: @count;
|
||||
}
|
||||
.column-gap(@gap) {
|
||||
-webkit-column-gap: @gap;
|
||||
-moz-column-gap: @gap;
|
||||
column-gap: @gap;
|
||||
}
|
||||
.column-width(@width){
|
||||
-webkit-column-width: @width;
|
||||
-moz-column-width: @width;
|
||||
column-width: @width;
|
||||
}
|
||||
.column-rule(@args){
|
||||
-webkit-column-rule: @rule;
|
||||
-moz-column-rule: @rule;
|
||||
column-rule: @rule;
|
||||
}
|
||||
|
||||
|
||||
/* Gradients */
|
||||
.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
|
||||
.linear-gradient-top(@default,@start,0%,@stop,100%);
|
||||
}
|
||||
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
|
||||
background-color: @default;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
|
||||
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
|
||||
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
|
||||
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
|
||||
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
|
||||
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
|
||||
}
|
||||
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
|
||||
background-color: @default;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
|
||||
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||
}
|
||||
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
|
||||
background-color: @default;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
|
||||
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||
}
|
||||
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
|
||||
background-color: @default;
|
||||
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
|
||||
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
|
||||
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
|
||||
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
|
||||
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
|
||||
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
|
||||
}
|
||||
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
|
||||
background-color: @default;
|
||||
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
|
||||
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||
}
|
||||
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
|
||||
background-color: @default;
|
||||
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
|
||||
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||
}
|
||||
|
||||
|
||||
/* Opacity */
|
||||
.opacity(@factor){
|
||||
opacity: @factor;
|
||||
@iefactor: @factor*100;
|
||||
filter: alpha(opacity=@iefactor);
|
||||
}
|
||||
|
||||
|
||||
/* Text Shadow */
|
||||
.text-shadow(@args){
|
||||
text-shadow: @args;
|
||||
}
|
||||
|
||||
/* Transforms */
|
||||
|
||||
.transform(@args) {
|
||||
-webkit-transform: @args;
|
||||
-moz-transform: @args;
|
||||
-ms-transform: @args;
|
||||
-o-transform: @args;
|
||||
transform: @args;
|
||||
}
|
||||
.rotate(@deg:45deg){
|
||||
.transform(rotate(@deg));
|
||||
}
|
||||
.scale(@factor:.5){
|
||||
.transform(scale(@factor));
|
||||
}
|
||||
.translate(@x,@y){
|
||||
.transform(translate(@x,@y));
|
||||
}
|
||||
.translate3d(@x,@y,@z) {
|
||||
.transform(translate3d(@x,@y,@z));
|
||||
}
|
||||
.translateHardware(@x,@y){
|
||||
.translate(@x,@y);
|
||||
-webkit-transform: translate3d(@x,@y,0);
|
||||
-moz-transform: translate3d(@x,@y,0);
|
||||
}
|
||||
|
||||
|
||||
/* Transitions */
|
||||
|
||||
.transition(@args:200ms) {
|
||||
-webkit-transition: @args;
|
||||
-moz-transition: @args;
|
||||
-o-transition: @args;
|
||||
transition: @args;
|
||||
}
|
||||
.transition-delay(@delay:0) {
|
||||
-webkit-transition-delay: @delay;
|
||||
-moz-transition-delay: @delay;
|
||||
-o-transition-delay: @delay;
|
||||
transition-delay: @delay;
|
||||
}
|
||||
.transition-duration(@duration:200ms) {
|
||||
-webkit-transition-duration: @duration;
|
||||
-moz-transition-duration: @duration;
|
||||
-o-transition-duration: @duration;
|
||||
transition-duration: @duration;
|
||||
}
|
||||
.transition-property(@property:all) {
|
||||
-webkit-transition-property: @property;
|
||||
-moz-transition-property: @property;
|
||||
-o-transition-property: @property;
|
||||
transition-property: @property;
|
||||
}
|
||||
.transition-timing-function(@function:ease) {
|
||||
-webkit-transition-timing-function: @function;
|
||||
-moz-transition-timing-function: @function;
|
||||
-o-transition-timing-function: @function;
|
||||
transition-timing-function: @function;
|
||||
}
|
||||
102
styles/base/reset.less
Normal file
102
styles/base/reset.less
Normal file
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* html5doctor.com Reset Stylesheet
|
||||
* v1.6.1
|
||||
* Last Updated: 2010-09-17
|
||||
* Author: Richard Clark - http://richclarkdesign.com
|
||||
* Twitter: @rich_clark
|
||||
*/
|
||||
|
||||
html, body, div, span, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
abbr, address, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, samp,
|
||||
small, strong, sub, sup, var,
|
||||
b, i,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
outline:0;
|
||||
font-size:100%;
|
||||
vertical-align:baseline;
|
||||
background:transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height:1;
|
||||
}
|
||||
|
||||
article,aside,details,figcaption,figure,
|
||||
footer,header,hgroup,menu,nav,section {
|
||||
display:block;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes:none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content:'';
|
||||
content:none;
|
||||
}
|
||||
|
||||
a {
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-size:100%;
|
||||
vertical-align:baseline;
|
||||
background:transparent;
|
||||
}
|
||||
|
||||
/* change colours to suit your needs */
|
||||
ins {
|
||||
background-color:#ff9;
|
||||
color:#000;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
/* change colours to suit your needs */
|
||||
mark {
|
||||
background-color:#ff9;
|
||||
color:#000;
|
||||
font-style:italic;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
abbr[title], dfn[title] {
|
||||
border-bottom:1px dotted;
|
||||
cursor:help;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse:collapse;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
/* change border colour to suit your needs */
|
||||
hr {
|
||||
display:block;
|
||||
height:1px;
|
||||
border:0;
|
||||
border-top:1px solid #cccccc;
|
||||
margin:1em 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
input, select {
|
||||
vertical-align:middle;
|
||||
}
|
||||
131
styles/base/spacing.less
Normal file
131
styles/base/spacing.less
Normal file
@@ -0,0 +1,131 @@
|
||||
/**
|
||||
* Spacing
|
||||
*
|
||||
* This LESS file defines margins and paddings for block-level
|
||||
* elements. Helper classes are included for use elsewhere
|
||||
* in site styles.
|
||||
*/
|
||||
|
||||
/* Settings */
|
||||
|
||||
@import 'variables.less';
|
||||
|
||||
/*
|
||||
@baseline: @baseline;
|
||||
*/
|
||||
|
||||
/**
|
||||
* Spacing
|
||||
* p, m, lh = padding, margin, line-height
|
||||
* a, t, r, b, l, h, v = all, top, right, bottom, left, horizontal, vertical
|
||||
* n, h, s, d = none(0px), half(@baseline / 2), single(@baseline), double(@baseline * 2), none(0px)
|
||||
*/
|
||||
|
||||
.ptn, .pvn, .pan{
|
||||
padding-top: 0px !important
|
||||
}
|
||||
.pth, .pvh, .pah{
|
||||
padding-top: @baseline / 2 !important
|
||||
}
|
||||
.pts, .pvs, .pas{
|
||||
padding-top: @baseline !important
|
||||
}
|
||||
.ptd, .pvd, .pad{
|
||||
padding-top: @baseline * 2 !important
|
||||
}
|
||||
.prn, .phn, .pan{
|
||||
padding-right: 0px !important
|
||||
}
|
||||
.prh, .phh, .pah{
|
||||
padding-right: @baseline / 2 !important
|
||||
}
|
||||
.prs, .phs, .pas{
|
||||
padding-right: @baseline !important
|
||||
}
|
||||
.prd, .phd, .pad{
|
||||
padding-right: @baseline * 2 !important
|
||||
}
|
||||
.pbn, .pvn, .pan{
|
||||
padding-bottom: 0px !important
|
||||
}
|
||||
.pbh, .pvh, .pah{
|
||||
padding-bottom: @baseline / 2 !important
|
||||
}
|
||||
.pbs, .pvs, .pas{
|
||||
padding-bottom: @baseline !important
|
||||
}
|
||||
.pbd, .pvd, .pad{
|
||||
padding-bottom: @baseline * 2 !important
|
||||
}
|
||||
.pln, .phn, .pan{
|
||||
padding-left: 0px !important
|
||||
}
|
||||
.plh, .phh, .pah{
|
||||
padding-left: @baseline / 2 !important
|
||||
}
|
||||
.pls, .phs, .pas{
|
||||
padding-left: @baseline !important
|
||||
}
|
||||
.pld, .phd, .pad{
|
||||
padding-left: @baseline * 2 !important
|
||||
}
|
||||
.mtn, .mvn, .man{
|
||||
margin-top: 0px !important
|
||||
}
|
||||
.mth, .mvh, .mah{
|
||||
margin-top: @baseline / 2 !important
|
||||
}
|
||||
.mts, .mvs, .mas{
|
||||
margin-top: @baseline !important
|
||||
}
|
||||
.mtd, .mvd, .mad{
|
||||
margin-top: @baseline * 2 !important
|
||||
}
|
||||
.mrn, .mhn, .man{
|
||||
margin-right: 0px !important
|
||||
}
|
||||
.mrh, .mhh, .mah{
|
||||
margin-right: @baseline / 2 !important
|
||||
}
|
||||
.mrs, .mhs, .mas{
|
||||
margin-right: @baseline !important
|
||||
}
|
||||
.mrd, .mhd, .mad{
|
||||
margin-right: @baseline * 2 !important
|
||||
}
|
||||
.mbn, .mvn, .man{
|
||||
margin-bottom: 0px !important
|
||||
}
|
||||
.mbh, .mvh, .mah{
|
||||
margin-bottom: @baseline / 2 !important
|
||||
}
|
||||
.mbs, .mvs, .mas{
|
||||
margin-bottom: @baseline !important
|
||||
}
|
||||
.mbd, .mvd, .mad{
|
||||
margin-bottom: @baseline * 2 !important
|
||||
}
|
||||
.mln, .mhn, .man{
|
||||
margin-left: 0px !important
|
||||
}
|
||||
.mlh, .mhh, .mah{
|
||||
margin-left: @baseline / 2 !important
|
||||
}
|
||||
.mls, .mhs, .mas{
|
||||
margin-left: @baseline !important
|
||||
}
|
||||
.mld, .mhd, .mad{
|
||||
margin-left: @baseline * 2 !important
|
||||
}
|
||||
.lhh {
|
||||
line-height: @baseline / 2 !important;
|
||||
}
|
||||
.lhs {
|
||||
line-height: @baseline !important;
|
||||
}
|
||||
.lhd {
|
||||
line-height: @baseline * 2 !important;
|
||||
}
|
||||
.lhn {
|
||||
line-height: 0px !important;
|
||||
}
|
||||
352
styles/base/typography.less
Normal file
352
styles/base/typography.less
Normal file
@@ -0,0 +1,352 @@
|
||||
/**
|
||||
* Name Here
|
||||
*
|
||||
* @version 1.0
|
||||
* @package Name Here
|
||||
* @author New Media Campaigns
|
||||
* @copyright 2012 New Media Campaigns
|
||||
* @link http://www.newmediacampaigns.com
|
||||
*
|
||||
* Copyright (c) 2012 New Media Campaigns
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is furnished
|
||||
* to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*
|
||||
* This LESS file defines the baseline, color, font-size, and other typographical
|
||||
* styles for text elements.
|
||||
*/
|
||||
|
||||
/* Settings */
|
||||
|
||||
@import 'variables.less';
|
||||
|
||||
/*
|
||||
@baseline: @baseline;
|
||||
|
||||
@body-color: @body-color;
|
||||
@body-font-family: @body-font-family;
|
||||
@body-font-size: @body-font-size;
|
||||
@body-accent-color: @body-accent-color;
|
||||
|
||||
@header-color: @header-clor;
|
||||
@header-font-family: @header-font-family;
|
||||
@header-font-weight: @header-font-weight;
|
||||
*/
|
||||
|
||||
/* Base */
|
||||
|
||||
html, body {
|
||||
font-family: @body-font-family;
|
||||
color: @body-color;
|
||||
font-size: @body-font-size;
|
||||
.lhs;
|
||||
}
|
||||
|
||||
/* Block-level */
|
||||
|
||||
h1, h2, h3, h4, h5, h6, ul, ol, dl, p, blockquote, table, form, pre{
|
||||
.mbs;
|
||||
}
|
||||
|
||||
/* Headers */
|
||||
|
||||
.all-headers{
|
||||
color: @header-color;
|
||||
font-family: @header-font-family;
|
||||
font-weight: @header-font-weight;
|
||||
}
|
||||
h1, .alpha{
|
||||
.all-headers;
|
||||
font-size: @body-font-size * 2.5;
|
||||
.lhd;
|
||||
}
|
||||
h2, .beta{
|
||||
.all-headers;
|
||||
font-size: @body-font-size * 1.75;
|
||||
.lhd;
|
||||
}
|
||||
h3, .gamma{
|
||||
.all-headers;
|
||||
font-size: @body-font-size * 1.5;
|
||||
.lhd;
|
||||
}
|
||||
h4, .delta{
|
||||
.all-headers;
|
||||
font-size: @body-font-size * 1.5;
|
||||
.lhd;
|
||||
.mbn;
|
||||
}
|
||||
h5, .epsilon{
|
||||
.all-headers;
|
||||
font-size: @body-font-size * 1.2;
|
||||
.lhs;
|
||||
.mbn
|
||||
}
|
||||
h6, .zeta{
|
||||
.all-headers;
|
||||
font-size: @body-font-size * 1;
|
||||
.lhs;
|
||||
.mbn;
|
||||
}
|
||||
|
||||
/* Headers (above scale) */
|
||||
|
||||
.giga{
|
||||
.all-headers;
|
||||
font-size: @body-font-size * 6;
|
||||
line-height: @baseline * 4;
|
||||
}
|
||||
.mega{
|
||||
.all-headers;
|
||||
font-size: @body-font-size * 5;
|
||||
line-height: @baseline * 3;
|
||||
}
|
||||
.kilo{
|
||||
.all-headers;
|
||||
font-size: @body-font-size * 4;
|
||||
line-height: @baseline * 3;
|
||||
}
|
||||
|
||||
/* Headers (below scale) */
|
||||
|
||||
.milli{
|
||||
.all-headers;
|
||||
font-size: @body-font-size * 0.8;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
|
||||
a{
|
||||
color: @body-accent-color;
|
||||
}
|
||||
a:link{
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:visited{
|
||||
|
||||
}
|
||||
a:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
a:active{
|
||||
|
||||
}
|
||||
a:focus{
|
||||
|
||||
}
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
sup, sub {
|
||||
font-size: 80%;
|
||||
.lhn;
|
||||
}
|
||||
sup {
|
||||
vertical-align: super;
|
||||
}
|
||||
sub {
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.lead{
|
||||
color: darken(@body-color, 20%);
|
||||
font-size: @baseline * 0.8;
|
||||
}
|
||||
|
||||
blockquote{
|
||||
border-left: 5px solid fade(#000, 10%);
|
||||
.mhs;
|
||||
.pls;
|
||||
color: darken(@body-color, 20%);
|
||||
font-size: @baseline * 0.8;
|
||||
|
||||
:last-child{
|
||||
.mbn;
|
||||
}
|
||||
small{
|
||||
color: fade(#000, 50%);
|
||||
font-size: @baseline * 0.7;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
pre, code, kbd{
|
||||
background: #F8F8F8;
|
||||
border: 1px solid #EAEAEA;
|
||||
.border-radius(3px);
|
||||
margin: 0 2px;
|
||||
padding: 0 5px;
|
||||
font-family: Consolas, "Courier New", Courier, mono;
|
||||
font-size: @body-font-size * 0.9;
|
||||
color: @body-color;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
pre{
|
||||
.mhs;
|
||||
.pah;
|
||||
|
||||
code{
|
||||
border: none;
|
||||
.man;
|
||||
.pan;
|
||||
}
|
||||
}
|
||||
a code{
|
||||
background: none;
|
||||
border: none;
|
||||
.pan;
|
||||
.man;
|
||||
}
|
||||
strong{
|
||||
font-weight: bold;
|
||||
}
|
||||
em{
|
||||
font-style: italic;
|
||||
}
|
||||
ol, ul, dl{
|
||||
.mls;
|
||||
.pls;
|
||||
ol,ul {
|
||||
.mbn;
|
||||
}
|
||||
}
|
||||
dt{
|
||||
font-weight: bold;
|
||||
}
|
||||
dd{
|
||||
.mls;
|
||||
}
|
||||
|
||||
.table{
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.table th, .table td{
|
||||
border-top: 1px solid fade(#000, 10%);
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
.table thead th{
|
||||
vertical-align: bottom;
|
||||
font-weight: bold;
|
||||
}
|
||||
.table thead tr:first-child th{
|
||||
border-top: none;
|
||||
}
|
||||
.table-bordered{
|
||||
border: 1px solid fade(#000, 10%);
|
||||
border-collapse: separate;
|
||||
border-left: none;
|
||||
.border-radius(4px);
|
||||
|
||||
th, td{
|
||||
border-left: 1px solid fade(#000, 10%);
|
||||
}
|
||||
thead:last-child tr:last-child th:first-child,
|
||||
tbody:last-child tr:last-child td:first-child{
|
||||
.border-radius(0 0 0 4px);
|
||||
}
|
||||
}
|
||||
.table-striped{
|
||||
tbody tr:nth-child(odd) td{
|
||||
background: fade(@body-accent-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Alerts
|
||||
========================================================================== */
|
||||
|
||||
.alert{
|
||||
background: #FCF8E3;
|
||||
border: 1px solid #FBEED5;
|
||||
.border-radius(4px);
|
||||
.mbs;
|
||||
.pah;
|
||||
color: #C09853;
|
||||
}
|
||||
.alert-success{
|
||||
.alert;
|
||||
background-color: #DFF0D8;
|
||||
border-color: #D6E9C6;
|
||||
color: #468847;
|
||||
}
|
||||
.alert-error{
|
||||
.alert;
|
||||
background-color: #F2DEDE;
|
||||
border-color: #EED3D7;
|
||||
color: #B94A48;
|
||||
}
|
||||
.alert-info{
|
||||
.alert;
|
||||
background-color: #D9EDF7;
|
||||
border-color: #BCE8F1;
|
||||
color: #3A87AD;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
label{
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
|
||||
.req{
|
||||
color: @body-accent-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
input.text,
|
||||
textarea,
|
||||
select,
|
||||
.radio-group,
|
||||
.checkbox-group{
|
||||
.mbs;
|
||||
}
|
||||
input.text, textarea{
|
||||
.no-form;
|
||||
background: #EEE;
|
||||
border: 1px solid #CCC;
|
||||
.border-box;
|
||||
.border-radius(4px);
|
||||
.inner-shadow(fade(#000, 10%) 0 1px 3px);
|
||||
height: @baseline * 1.5;
|
||||
.pah;
|
||||
width: 100%;
|
||||
}
|
||||
textarea{
|
||||
height: @baseline * 6;
|
||||
}
|
||||
select{
|
||||
min-width: 30%;
|
||||
}
|
||||
.checkbox-group label,
|
||||
.radio-group label{
|
||||
font-weight: normal;
|
||||
}
|
||||
.error{
|
||||
background-color: #F2DEDE !important;
|
||||
border-color: red !important;
|
||||
outline-color: red !important;
|
||||
color: red !important;
|
||||
}
|
||||
52
styles/base/variables.less
Normal file
52
styles/base/variables.less
Normal file
@@ -0,0 +1,52 @@
|
||||
/* ==========================================================================
|
||||
Spacing
|
||||
========================================================================== */
|
||||
|
||||
@baseline: 20px;
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
@body-color: #555;
|
||||
@body-font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
@body-font-size: 14px;
|
||||
@body-accent-color: #f00;
|
||||
|
||||
@header-color: #000;
|
||||
@header-font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
@header-font-weight: bold;
|
||||
|
||||
/* ==========================================================================
|
||||
Grid
|
||||
========================================================================== */
|
||||
|
||||
@fixed-column-width: 40px;
|
||||
@fixed-gutter-width: 20px;
|
||||
@fixed-columns: 12;
|
||||
|
||||
@fluid-column-width: 4.3%;
|
||||
@fluid-gutter-width: 4.4%;
|
||||
@fluid-columns: 12;
|
||||
|
||||
@mobile-break-width: 480px;
|
||||
@mobile-column-width: 20%;
|
||||
@mobile-gutter-width: 6.6666%;
|
||||
@mobile-columns: 4;
|
||||
|
||||
/* ==========================================================================
|
||||
Buttons
|
||||
========================================================================== */
|
||||
|
||||
@button-color: #DDD;
|
||||
@button-primary-color: #0055CC;
|
||||
@button-info-color: #2F96B4;
|
||||
@button-success-color: #51A351;
|
||||
@button-warning-color: #FAA732;
|
||||
@button-danger-color: #BD362F;
|
||||
|
||||
/* ==========================================================================
|
||||
Site Variables
|
||||
========================================================================== */
|
||||
|
||||
@import "../site/variables";
|
||||
Reference in New Issue
Block a user