mirror of
https://github.com/codeguy/php-the-right-way.git
synced 2025-08-08 06:56:33 +02:00
Add new UI files
This commit is contained in:
=
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;
|
||||
}
|
||||
Reference in New Issue
Block a user