mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-29 21:52:22 +01:00
cleanup old stuff
This commit is contained in:
Jacob Thornton
parent
d447898bf2
commit
96c3e70996
@ -12,4 +12,5 @@ http://twitter.com/mdo
|
|||||||
# Todos
|
# Todos
|
||||||
|
|
||||||
* Cross browser checks? Show this anywhere?
|
* Cross browser checks? Show this anywhere?
|
||||||
* Write up brief section on browser support
|
* Write up brief section on browser support
|
||||||
|
* LICENSE from legal
|
||||||
|
Before Width: | Height: | Size: 49 B After Width: | Height: | Size: 49 B |
|
Before Width: | Height: | Size: 451 B After Width: | Height: | Size: 451 B |
11
less/baseline.css → baseline-1.0.0.min.css
vendored
11
less/baseline.css → baseline-1.0.0.min.css
vendored
@ -6,6 +6,7 @@ q:before,q:after,blockquote:before,blockquote:after{content:"";}
|
|||||||
.clearfix{zoom:1;}.clearfix:after{display:block;visibility:hidden;height:0;clear:both;content:".";}
|
.clearfix{zoom:1;}.clearfix:after{display:block;visibility:hidden;height:0;clear:both;content:".";}
|
||||||
.right{float:right;}
|
.right{float:right;}
|
||||||
.left{float:left;}
|
.left{float:left;}
|
||||||
|
.container{width:940px;margin:0 auto;}
|
||||||
div.row{zoom:1;}div.row:after{display:block;visibility:hidden;height:0;clear:both;content:".";}
|
div.row{zoom:1;}div.row:after{display:block;visibility:hidden;height:0;clear:both;content:".";}
|
||||||
div.row div.span1{display:inline;float:left;width:40px;margin-left:20px;}div.row div.span1:first-child{margin-left:0;}
|
div.row div.span1{display:inline;float:left;width:40px;margin-left:20px;}div.row div.span1:first-child{margin-left:0;}
|
||||||
div.row div.span2{display:inline;float:left;width:100px;margin-left:20px;}div.row div.span2:first-child{margin-left:0;}
|
div.row div.span2{display:inline;float:left;width:100px;margin-left:20px;}div.row div.span2:first-child{margin-left:0;}
|
||||||
@ -130,8 +131,8 @@ table th{padding-top:9px;font-weight:bold;border-bottom-width:2px;}
|
|||||||
table.zebra-striped tbody tr:nth-child(odd) td{background-color:#f5f5f5;}
|
table.zebra-striped tbody tr:nth-child(odd) td{background-color:#f5f5f5;}
|
||||||
table.zebra-striped tbody tr:hover td{background-color:#f1f1f1;}
|
table.zebra-striped tbody tr:hover td{background-color:#f1f1f1;}
|
||||||
table.zebra-striped th.header{cursor:pointer;padding-right:20px;}
|
table.zebra-striped th.header{cursor:pointer;padding-right:20px;}
|
||||||
table.zebra-striped th.headerSortUp,table.zebra-striped th.headerSortDown{background-image:url(../img/tablesorter-indicators.png);background-position:right -23px;background-repeat:no-repeat;background-color:rgba(141, 192, 219, 0.25);-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
|
table.zebra-striped th.headerSortUp,table.zebra-striped th.headerSortDown{background-image:url(assets/img/tablesorter-indicators.png);background-position:right -23px;background-repeat:no-repeat;background-color:rgba(141, 192, 219, 0.25);-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
|
||||||
table.zebra-striped th.header:hover{background-image:url(../img/tablesorter-indicators.png);background-position:right 15px;background-repeat:no-repeat;}
|
table.zebra-striped th.header:hover{background-image:url(assets/img/tablesorter-indicators.png);background-position:right 15px;background-repeat:no-repeat;}
|
||||||
table.zebra-striped th.actions:hover{background-image:none !important;}
|
table.zebra-striped th.actions:hover{background-image:none !important;}
|
||||||
table.zebra-striped th.headerSortDown,table.zebra-striped th.headerSortDown:hover{background-position:right -25px;}
|
table.zebra-striped th.headerSortDown,table.zebra-striped th.headerSortDown:hover{background-position:right -25px;}
|
||||||
table.zebra-striped th.headerSortUp,table.zebra-striped th.headerSortUp:hover{background-position:right -65px;}
|
table.zebra-striped th.headerSortUp,table.zebra-striped th.headerSortUp:hover{background-position:right -65px;}
|
||||||
@ -160,7 +161,7 @@ div.topbar ul li.active a{background-color:#222;background-color:rgba(0, 0, 0, 0
|
|||||||
div.topbar ul li.vr{border-left:1px solid #008db8;border-right:1px solid #00a0d1;height:26px;margin:6px 3px 1px 3px;}
|
div.topbar ul li.vr{border-left:1px solid #008db8;border-right:1px solid #00a0d1;height:26px;margin:6px 3px 1px 3px;}
|
||||||
div.topbar ul.primary-nav li ul{left:0;}
|
div.topbar ul.primary-nav li ul{left:0;}
|
||||||
div.topbar ul.secondary-nav li ul{right:0;}
|
div.topbar ul.secondary-nav li ul{right:0;}
|
||||||
div.topbar ul li.menu{position:relative;}div.topbar ul li.menu a.menu:after{width:7px;height:7px;display:inline-block;background:transparent url(../img/dropdown-arrow.gif) no-repeat top center;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;opacity:.5;}
|
div.topbar ul li.menu{position:relative;}div.topbar ul li.menu a.menu:after{width:7px;height:7px;display:inline-block;background:transparent url(assets/img/dropdown-arrow.gif) no-repeat top center;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;opacity:.5;}
|
||||||
div.topbar ul li.menu.open a.menu,div.topbar ul li.menu.open a:hover{background-color:#00b4eb;background-color:rgba(255, 255, 255, 0.1);color:#fff;}
|
div.topbar ul li.menu.open a.menu,div.topbar ul li.menu.open a:hover{background-color:#00b4eb;background-color:rgba(255, 255, 255, 0.1);color:#fff;}
|
||||||
div.topbar ul li.menu.open ul{display:block;}div.topbar ul li.menu.open ul li a{background-color:transparent;font-weight:normal;}div.topbar ul li.menu.open ul li a:hover{background-color:rgba(255, 255, 255, 0.1);color:#fff;}
|
div.topbar ul li.menu.open ul{display:block;}div.topbar ul li.menu.open ul li a{background-color:transparent;font-weight:normal;}div.topbar ul li.menu.open ul li a:hover{background-color:rgba(255, 255, 255, 0.1);color:#fff;}
|
||||||
div.topbar ul li.menu.open ul li.active a{background-color:rgba(255, 255, 255, 0.1);font-weight:bold;}
|
div.topbar ul li.menu.open ul li.active a{background-color:rgba(255, 255, 255, 0.1);font-weight:bold;}
|
||||||
@ -196,7 +197,7 @@ div.well{background:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;bord
|
|||||||
body{background-color:#ffffff;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), color-stop(0.15, #ffffff), to(#ffffff));background-image:-webkit-linear-gradient(#eeeeee, color-stop(0.15, #ffffff), #ffffff);background-image:-moz-linear-gradient(#eeeeee, color-stop(#ffffff, 0.15), #ffffff);background-attachment:fixed;background-position:0 40px;position:relative;}
|
body{background-color:#ffffff;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), color-stop(0.15, #ffffff), to(#ffffff));background-image:-webkit-linear-gradient(#eeeeee, color-stop(0.15, #ffffff), #ffffff);background-image:-moz-linear-gradient(#eeeeee, color-stop(#ffffff, 0.15), #ffffff);background-attachment:fixed;background-position:0 40px;position:relative;}
|
||||||
header,section,footer,article,aside{display:block;}
|
header,section,footer,article,aside{display:block;}
|
||||||
section{padding-top:80px;margin-bottom:-40px;}
|
section{padding-top:80px;margin-bottom:-40px;}
|
||||||
#masthead,#footer{background-color:#049cd9;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, left bottom, from(#0056b0), to(#049cd9));background-image:-webkit-linear-gradient(#0056b0, #049cd9);background-image:-moz-linear-gradient(#0056b0, #049cd9);background-image:-o-linear-gradient(top, #0056b0, #049cd9);background-image:-khtml-gradient(linear, left top, left bottom, from(#0056b0), to(#049cd9));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#0056b0', EndColorStr='#049cd9', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#0056b0', EndColorStr='#049cd9', GradientType=0))";}#masthead div.inner,#footer div.inner{background:transparent url(../img/grid-20px.png) 0 -1px;padding:40px 0;-webkit-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);}
|
#masthead,#footer{background-color:#049cd9;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, left bottom, from(#0056b0), to(#049cd9));background-image:-webkit-linear-gradient(#0056b0, #049cd9);background-image:-moz-linear-gradient(#0056b0, #049cd9);background-image:-o-linear-gradient(top, #0056b0, #049cd9);background-image:-khtml-gradient(linear, left top, left bottom, from(#0056b0), to(#049cd9));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#0056b0', EndColorStr='#049cd9', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#0056b0', EndColorStr='#049cd9', GradientType=0))";}#masthead div.inner,#footer div.inner{background:transparent url(assets/img/grid-20px.png) 0 -1px;padding:40px 0;-webkit-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);}
|
||||||
#masthead h1,#footer h1,#masthead p,#footer p,#masthead small,#footer small{color:#fff;text-shadow:0 2px 0 rgba(0, 0, 0, 0.25);}
|
#masthead h1,#footer h1,#masthead p,#footer p,#masthead small,#footer small{color:#fff;text-shadow:0 2px 0 rgba(0, 0, 0, 0.25);}
|
||||||
#masthead{margin-top:40px;margin-bottom:-40px;}#masthead h1{margin-bottom:0;}
|
#masthead{margin-top:40px;margin-bottom:-40px;}#masthead h1{margin-bottom:0;}
|
||||||
#masthead p.lead{font-size:20px;font-weight:300;line-height:30px;margin:5px 0;}
|
#masthead p.lead{font-size:20px;font-weight:300;line-height:30px;margin:5px 0;}
|
||||||
@ -206,7 +207,7 @@ section{padding-top:80px;margin-bottom:-40px;}
|
|||||||
.show-grid{margin-top:20px;margin-bottom:20px;}.show-grid .column,.show-grid .columns{background:rgba(0, 0, 0, 0.1);text-align:center;-moz-border-radius:3px;border-radius:3px;height:30px;line-height:30px;}
|
.show-grid{margin-top:20px;margin-bottom:20px;}.show-grid .column,.show-grid .columns{background:rgba(0, 0, 0, 0.1);text-align:center;-moz-border-radius:3px;border-radius:3px;height:30px;line-height:30px;}
|
||||||
.show-grid:hover .column,.show-grid:hover .columns{background:rgba(0, 0, 0, 0.25);}
|
.show-grid:hover .column,.show-grid:hover .columns{background:rgba(0, 0, 0, 0.25);}
|
||||||
#grid{width:980px;position:absolute;top:0;left:50%;margin-left:-490px;}
|
#grid{width:980px;position:absolute;top:0;left:50%;margin-left:-490px;}
|
||||||
#grid div.vert{width:39px;border:solid darkturquoise;border-width:0 1px;margin-right:19px;}
|
#grid div.vert{background-color:rgba(0, 206, 209, 0.075);width:39px;border:solid darkturquoise;border-width:0 1px;margin-right:19px;}
|
||||||
#grid div.vert.first-line{margin-left:19px;}
|
#grid div.vert.first-line{margin-left:19px;}
|
||||||
#grid div.horiz{height:19px;border-bottom:1px solid rgba(255, 0, 0, 0.1);margin:0;padding:0;}#grid div.horiz:nth-child(5n){border-color:rgba(255, 0, 0, 0.25);}
|
#grid div.horiz{height:19px;border-bottom:1px solid rgba(255, 0, 0, 0.1);margin:0;padding:0;}#grid div.horiz:nth-child(5n){border-color:rgba(255, 0, 0, 0.25);}
|
||||||
div.mini-layout{height:340px;margin-bottom:20px;padding:9px;border:1px solid rgba(0, 0, 0, 0.25);-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.125);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.125);box-shadow:0 1px 3px rgba(0, 0, 0, 0.125);}div.mini-layout div{-moz-border-radius:3px;border-radius:3px;}div.mini-layout div.mini-layout-body{background-color:rgba(141, 192, 219, 0.25);margin:0 auto;width:450px;height:340px;}
|
div.mini-layout{height:340px;margin-bottom:20px;padding:9px;border:1px solid rgba(0, 0, 0, 0.25);-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.125);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.125);box-shadow:0 1px 3px rgba(0, 0, 0, 0.125);}div.mini-layout div{-moz-border-radius:3px;border-radius:3px;}div.mini-layout div.mini-layout-body{background-color:rgba(141, 192, 219, 0.25);margin:0 auto;width:450px;height:340px;}
|
||||||
|
Before Width: | Height: | Size: 152 B After Width: | Height: | Size: 152 B |
|
Before Width: | Height: | Size: 189 KiB After Width: | Height: | Size: 189 KiB |
|
Before Width: | Height: | Size: 324 B After Width: | Height: | Size: 324 B |
|
Before Width: | Height: | Size: 160 B After Width: | Height: | Size: 160 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
24
docs/assets/js/application.js
Normal file
24
docs/assets/js/application.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
// Javascript to toggle the dropdowns
|
||||||
|
$(document).ready(function(){
|
||||||
|
// Dropdowns
|
||||||
|
$("body").bind("click", function(e) {
|
||||||
|
$("ul.menu-dropdown").hide();
|
||||||
|
$('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide();
|
||||||
|
});
|
||||||
|
$("a.menu").click(function(e) {
|
||||||
|
var $target = $(this);
|
||||||
|
var $parent = $target.parent("li");
|
||||||
|
var $siblings = $target.siblings("ul.menu-dropdown");
|
||||||
|
var $parentSiblings = $parent.siblings("li");
|
||||||
|
if ($parent.hasClass("open")) {
|
||||||
|
$parent.removeClass("open");
|
||||||
|
$siblings.hide();
|
||||||
|
} else {
|
||||||
|
$parent.addClass("open");
|
||||||
|
$siblings.show();
|
||||||
|
}
|
||||||
|
$parentSiblings.children("ul.menu-dropdown").hide();
|
||||||
|
$parentSiblings.removeClass("open");
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -5,60 +5,31 @@
|
|||||||
<title>Twitter Baseline</title>
|
<title>Twitter Baseline</title>
|
||||||
|
|
||||||
<!-- // Less.js at the ready! -->
|
<!-- // Less.js at the ready! -->
|
||||||
<link rel="stylesheet/less" type="text/css" media="all" href="less/baseline.less" />
|
<link href="../baseline-1.0.0.css" rel="stylesheet" type="text/css">
|
||||||
<script type="text/javascript" src="js/less-1.0.41.min.js"></script>
|
|
||||||
|
|
||||||
<!-- // jQuery! -->
|
<!-- // jQuery! -->
|
||||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
|
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
|
||||||
<script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.min.js"></script>
|
<script src="http://tablesorter.com/jquery.tablesorter.min.js"></script>
|
||||||
<script type="text/javascript" src="js/jquery/hashgrid.js"></script>
|
<script src="assets/js/jquery/hashgrid.js"></script>
|
||||||
<script type="text/javascript">
|
|
||||||
// Javascript to toggle the dropdowns
|
|
||||||
$(document).ready(function(){
|
|
||||||
// Dropdowns
|
|
||||||
$("body").bind("click", function(e) {
|
|
||||||
$("ul.menu-dropdown").hide();
|
|
||||||
$('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide();
|
|
||||||
});
|
|
||||||
$("a.menu").click(function(e) {
|
|
||||||
var $target = $(this);
|
|
||||||
var $parent = $target.parent("li");
|
|
||||||
var $siblings = $target.siblings("ul.menu-dropdown");
|
|
||||||
var $parentSiblings = $parent.siblings("li");
|
|
||||||
if ($parent.hasClass("open")) {
|
|
||||||
$parent.removeClass("open");
|
|
||||||
$siblings.hide();
|
|
||||||
} else {
|
|
||||||
$parent.addClass("open");
|
|
||||||
$siblings.show();
|
|
||||||
}
|
|
||||||
$parentSiblings.children("ul.menu-dropdown").hide();
|
|
||||||
$parentSiblings.removeClass("open");
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Code Highlighting -->
|
<!-- Code Highlighting -->
|
||||||
<script type="text/javascript" src="js/jquery/chili/jquery.chili-2.2.js"></script>
|
<script src="assets/js/jquery/chili/jquery.chili-2.2.js"></script>
|
||||||
<script type="text/javascript" src="js/jquery/chili/recipes.js"></script>
|
<script src="assets/js/jquery/chili/recipes.js"></script>
|
||||||
<script id="setup" type="text/javascript">
|
<script id="setup">ChiliBook.lineNumbers = true;</script>
|
||||||
ChiliBook.lineNumbers = true;
|
|
||||||
</script>
|
<script src="assets/js/application.js"></script>
|
||||||
|
|
||||||
<!-- Debug line-height -->
|
<!-- Debug line-height -->
|
||||||
<!--
|
<!--
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
background: url(img/baseline-10px.png) repeat 0 0, url(img/grid-940px.png) repeat-y top center;
|
background: url(assets/img/baseline-10px.png) repeat 0 0, url(assets/img/grid-940px.png) repeat-y top center;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
-->
|
-->
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="topbar">
|
<div class="topbar">
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
Master Stylesheet
|
|
||||||
This file is only for importing all required stylesheets for LESS to include and then compile.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// CSS Reset
|
|
||||||
@import "reset.less";
|
|
||||||
|
|
||||||
// Core
|
|
||||||
@import "bootstrap.less";
|
|
||||||
@import "scaffolding.less";
|
|
||||||
|
|
||||||
// Styled patterns and elements
|
|
||||||
@import "type.less";
|
|
||||||
@import "forms.less";
|
|
||||||
@import "tables.less";
|
|
||||||
@import "patterns.less";
|
|
||||||
|
|
||||||
|
|
||||||
/* Add additional stylesheets below
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
// Documentation
|
|
||||||
@import "docs.less";
|
|
||||||
211
less/bootstrap.less
vendored
211
less/bootstrap.less
vendored
@ -1,211 +0,0 @@
|
|||||||
/*
|
|
||||||
Bootstrap v1.1
|
|
||||||
Variables and mixins to bootstrap any new web development project. Modified from original version for Twitter Blueprint.
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/* Variables
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
// Links
|
|
||||||
@link-color: #0069d6;
|
|
||||||
@link-hover-color: darken(@link-color, 10);
|
|
||||||
|
|
||||||
// Grays
|
|
||||||
@white: #fff;
|
|
||||||
@gray-lighter: #ccc;
|
|
||||||
@gray-light: #777;
|
|
||||||
@gray: #555;
|
|
||||||
@gray-dark: #333;
|
|
||||||
@black: #000;
|
|
||||||
|
|
||||||
// Accent Colors
|
|
||||||
@blue: #08b5fb;
|
|
||||||
@blue-dark: #0069d6;
|
|
||||||
@green: #46a546;
|
|
||||||
@red: #9d261d;
|
|
||||||
@yellow: #ffc40d;
|
|
||||||
@orange: #f89406;
|
|
||||||
@pink: #c3325f;
|
|
||||||
@purple: #7a43b6;
|
|
||||||
|
|
||||||
// Baseline grid
|
|
||||||
@baseline: 20px;
|
|
||||||
|
|
||||||
// Griditude
|
|
||||||
@grid_columns: 16;
|
|
||||||
@grid_column_width: 40px;
|
|
||||||
@grid_gutter_width: 20px;
|
|
||||||
@site_width: (@grid_columns * @grid_column_width) + (@grid_gutter_width * (@grid_columns - 1));
|
|
||||||
|
|
||||||
|
|
||||||
/* Mixins
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
// Clearfix for clearing floats like a boss
|
|
||||||
.clearfix {
|
|
||||||
zoom: 1;
|
|
||||||
&:after {
|
|
||||||
display: block;
|
|
||||||
visibility: hidden;
|
|
||||||
height: 0;
|
|
||||||
clear: both;
|
|
||||||
content: ".";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Floats
|
|
||||||
.right {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.left {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Input placeholder text
|
|
||||||
.placeholder(@color: @gray-light) {
|
|
||||||
:-moz-placeholder {
|
|
||||||
color: @color;
|
|
||||||
}
|
|
||||||
::-webkit-input-placeholder {
|
|
||||||
color: @color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Font Stacks
|
|
||||||
.font(@weight: normal, @size: 14px, @lineheight: 20px) {
|
|
||||||
font-size: @size;
|
|
||||||
font-weight: @weight;
|
|
||||||
line-height: @lineheight;
|
|
||||||
}
|
|
||||||
.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
|
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
font-size: @size;
|
|
||||||
font-weight: @weight;
|
|
||||||
line-height: @lineheight;
|
|
||||||
}
|
|
||||||
.serif(@weight: normal, @size: 14px, @lineheight: 20px) {
|
|
||||||
font-family: "Georgia", Times New Roman, Times, sans-serif;
|
|
||||||
font-size: @size;
|
|
||||||
font-weight: @weight;
|
|
||||||
line-height: @lineheight;
|
|
||||||
}
|
|
||||||
.monospace(@weight: normal, @size: 12px, @lineheight: 20px) {
|
|
||||||
font-family: "Monaco", Courier New, monospace;
|
|
||||||
font-size: @size;
|
|
||||||
font-weight: @weight;
|
|
||||||
line-height: @lineheight;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Grid System
|
|
||||||
.container {
|
|
||||||
width: @site_width;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.columns(@column_span: 1) {
|
|
||||||
display: inline;
|
|
||||||
float: left;
|
|
||||||
width: (@grid_column_width * @column_span) + (@grid_gutter_width * (@column_span - 1));
|
|
||||||
margin-left: @grid_gutter_width;
|
|
||||||
&:first-child {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.offset(@column_offset: 1) {
|
|
||||||
margin-left: (@grid_column_width * @column_offset) + (@grid_gutter_width * (@column_offset - 1)) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Border Radius
|
|
||||||
.border-radius(@radius: 5px) {
|
|
||||||
-moz-border-radius: @radius;
|
|
||||||
border-radius: @radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Drop shadows
|
|
||||||
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
|
||||||
-webkit-box-shadow: @shadow;
|
|
||||||
-moz-box-shadow: @shadow;
|
|
||||||
box-shadow: @shadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
.transition(@transition) {
|
|
||||||
-webkit-transition: @transition;
|
|
||||||
-moz-transition: @transition;
|
|
||||||
transition: @transition;
|
|
||||||
}
|
|
||||||
|
|
||||||
// CSS3 Content Columns
|
|
||||||
.content-columns(@column_count, @column_gap: 20px) {
|
|
||||||
-webkit-column-count: @count;
|
|
||||||
-webkit-column-gap: @gap;
|
|
||||||
-moz-column-count: @count;
|
|
||||||
-moz-column-gap: @gap;
|
|
||||||
column-count: @count;
|
|
||||||
column-gap: @gap;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Buttons
|
|
||||||
.button(@color: #f9f9f9, @padding: 4px 14px, @text_color: #555, @text_shadow: 0 1px 0 rgba(255,255,255,.75), @font_size: 13px, @border_color: rgba(0,0,0,.1), @rounded: 4px) {
|
|
||||||
display: inline-block;
|
|
||||||
#gradient > .vertical-three-colors(@color, @color, 0.25, darken(@color, 10%));
|
|
||||||
padding: @padding;
|
|
||||||
text-shadow: @text_shadow;
|
|
||||||
color: @text_color;
|
|
||||||
line-height: @baseline;
|
|
||||||
border: 1px solid @border_color;
|
|
||||||
border-bottom-color: fadein(@border_color, 15%);
|
|
||||||
.border-radius(@rounded);
|
|
||||||
@shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.1);
|
|
||||||
.box-shadow(@shadow);
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
background-position: 0 -15px;
|
|
||||||
color: darken(@text_color, 10%);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
|
||||||
#translucent {
|
|
||||||
.background(@color: @white, @alpha: 1) {
|
|
||||||
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
|
|
||||||
}
|
|
||||||
.border(@color: @white, @alpha: 1) {
|
|
||||||
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
|
|
||||||
background-clip: padding-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Gradients
|
|
||||||
#gradient {
|
|
||||||
.horizontal(@startColor: #555, @endColor: #333) {
|
|
||||||
background-color: @endColor;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
|
|
||||||
background-image: -webkit-linear-gradient(right center, @startColor, @endColor);
|
|
||||||
background-image: -moz-linear-gradient(right center, @startColor, @endColor);
|
|
||||||
background-image: -o-linear-gradient(left, @startColor, @endColor);
|
|
||||||
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor));
|
|
||||||
filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=1)",@startColor,@endColor));
|
|
||||||
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=1))",@startColor,@endColor);
|
|
||||||
}
|
|
||||||
.vertical(@startColor: #555, @endColor: #333) {
|
|
||||||
background-color: @endColor;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
|
|
||||||
background-image: -webkit-linear-gradient(@startColor, @endColor);
|
|
||||||
background-image: -moz-linear-gradient(@startColor, @endColor);
|
|
||||||
background-image: -o-linear-gradient(top, @startColor, @endColor);
|
|
||||||
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
|
|
||||||
filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=0)",@startColor,@endColor));
|
|
||||||
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=0))",@startColor,@endColor);
|
|
||||||
}
|
|
||||||
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
|
|
||||||
background-color: @endColor;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
|
|
||||||
background-image: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor);
|
|
||||||
background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
200
less/docs.less
200
less/docs.less
@ -1,200 +0,0 @@
|
|||||||
/*
|
|
||||||
Baseline's documentation styles
|
|
||||||
Special styles for presenting Baseline's documentation and examples
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/* Body and structure
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
// Give us a gradient background
|
|
||||||
body {
|
|
||||||
#gradient > .vertical-three-colors(#eee, #fff, 0.15, #fff);
|
|
||||||
background-attachment: fixed;
|
|
||||||
background-position: 0 40px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Give us some love on HTML5 elements (hardly use these in Basline thus far though)
|
|
||||||
header,
|
|
||||||
section,
|
|
||||||
footer,
|
|
||||||
article,
|
|
||||||
aside {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Break up sections
|
|
||||||
section {
|
|
||||||
padding-top: @baseline * 4;
|
|
||||||
margin-bottom: @baseline * -2;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Blueprint-style header and footer
|
|
||||||
#masthead,
|
|
||||||
#footer {
|
|
||||||
#gradient > .vertical(darken(@blue-dark, 7.5%), darken(@blue, 7.5%));
|
|
||||||
div.inner {
|
|
||||||
background: transparent url(../img/grid-20px.png) 0 -1px;
|
|
||||||
padding: 40px 0;
|
|
||||||
.box-shadow(inset 0 10px 30px rgba(0,0,0,.25));
|
|
||||||
}
|
|
||||||
h1, p, small {
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 2px 0 rgba(0,0,0,.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#masthead {
|
|
||||||
margin-top: @baseline * 2;
|
|
||||||
margin-bottom: @baseline * -2;
|
|
||||||
h1 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
p.lead {
|
|
||||||
.font(300,20px,30px);
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
a.btn {
|
|
||||||
#gradient > .vertical(@purple, darken(@purple, 15%));
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
text-align: center;
|
|
||||||
border: 0;
|
|
||||||
@shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.4);
|
|
||||||
.box-shadow(@shadow);
|
|
||||||
.transition(all .2s linear);
|
|
||||||
}
|
|
||||||
small {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: @baseline;
|
|
||||||
color: rgba(255,255,255,.5);
|
|
||||||
a {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Page footer
|
|
||||||
#footer {
|
|
||||||
margin-top: @baseline * 4;
|
|
||||||
p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Special grid styles
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
.show-grid {
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
.column,
|
|
||||||
.columns {
|
|
||||||
background: rgba(0,0,0,.1);
|
|
||||||
text-align: center;
|
|
||||||
.border-radius(3px);
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
.column,
|
|
||||||
.columns {
|
|
||||||
background: rgba(0,0,0,.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Hashgrid.js grid (press G & H to view)
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
#grid {
|
|
||||||
width: 980px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -490px;
|
|
||||||
}
|
|
||||||
#grid div.vert {
|
|
||||||
#translucent > .background(#00CED1, .075);
|
|
||||||
width: 39px;
|
|
||||||
border: solid darkturquoise;
|
|
||||||
border-width: 0 1px;
|
|
||||||
margin-right: 19px;
|
|
||||||
}
|
|
||||||
#grid div.vert.first-line {
|
|
||||||
margin-left: 19px;
|
|
||||||
}
|
|
||||||
#grid div.horiz {
|
|
||||||
height: @baseline - 1;
|
|
||||||
border-bottom: 1px solid rgba(255,0,0,.1);
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
&:nth-child(5n) {
|
|
||||||
border-color: rgba(255,0,0,.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Render mini layout previews
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
div.mini-layout {
|
|
||||||
height: 340px;
|
|
||||||
margin-bottom: @baseline;
|
|
||||||
padding: 9px;
|
|
||||||
border: 1px solid rgba(0,0,0,.25);
|
|
||||||
.border-radius(6px);
|
|
||||||
.box-shadow(0 1px 3px rgba(0,0,0,.125));
|
|
||||||
// Default mini layout (fixed container)
|
|
||||||
div {
|
|
||||||
.border-radius(3px);
|
|
||||||
&.mini-layout-body {
|
|
||||||
background-color: rgba(141,192,219,.25);
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 450px;
|
|
||||||
height: 340px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Fluid layout (sidebar)
|
|
||||||
&.fluid {
|
|
||||||
div.mini-layout-sidebar,
|
|
||||||
div.mini-layout-header,
|
|
||||||
div.mini-layout-body {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
div.mini-layout-sidebar {
|
|
||||||
background-color: rgba(141,192,219,.5);
|
|
||||||
width: 90px;
|
|
||||||
height: 340px;
|
|
||||||
}
|
|
||||||
div.mini-layout-body {
|
|
||||||
width: 400px;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Topbar special styles
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
div.topbar-wrapper {
|
|
||||||
position: relative;
|
|
||||||
height: 40px;
|
|
||||||
margin: 5px 0 15px;
|
|
||||||
div.topbar {
|
|
||||||
position: absolute;
|
|
||||||
margin: 0 -20px;
|
|
||||||
padding-left: 20px;
|
|
||||||
padding-right: 20px;
|
|
||||||
.border-radius(4px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
336
less/forms.less
336
less/forms.less
@ -1,336 +0,0 @@
|
|||||||
/*
|
|
||||||
Forms
|
|
||||||
Base line styles for various input types, form layouts, and states
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/* Global form styles
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
form {
|
|
||||||
margin-bottom: @baseline;
|
|
||||||
// Groups of fields with labels on top (legends)
|
|
||||||
fieldset {
|
|
||||||
margin-bottom: @baseline;
|
|
||||||
padding-top: @baseline;
|
|
||||||
legend {
|
|
||||||
display: block;
|
|
||||||
margin-left: 150px;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 1;
|
|
||||||
color: @gray-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Parent element that clears floats and wraps labels and fields together
|
|
||||||
div.clearfix {
|
|
||||||
margin-bottom: @baseline;
|
|
||||||
}
|
|
||||||
// Set font for forms
|
|
||||||
label, input, select, textarea {
|
|
||||||
.sans-serif(normal,13px,normal);
|
|
||||||
}
|
|
||||||
// Float labels left
|
|
||||||
label {
|
|
||||||
padding-top: 6px;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 18px;
|
|
||||||
float: left;
|
|
||||||
width: 130px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
// Shift over the inside div to align all label's relevant content
|
|
||||||
div.input {
|
|
||||||
margin-left: 150px;
|
|
||||||
}
|
|
||||||
// Checkboxs and radio buttons
|
|
||||||
input[type=checkbox],
|
|
||||||
input[type=radio] {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
// Inputs, Textareas, Selects
|
|
||||||
input[type=text],
|
|
||||||
input[type=password],
|
|
||||||
textarea,
|
|
||||||
select,
|
|
||||||
.uneditable-input {
|
|
||||||
display: block;
|
|
||||||
width: 210px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 4px;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: @baseline;
|
|
||||||
height: @baseline;
|
|
||||||
color: @gray;
|
|
||||||
border: 1px solid #bbb;
|
|
||||||
.border-radius(3px);
|
|
||||||
}
|
|
||||||
select,
|
|
||||||
input[type=file] {
|
|
||||||
height: @baseline * 1.5;
|
|
||||||
line-height: @baseline * 1.5;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.uneditable-input {
|
|
||||||
background-color: #eee;
|
|
||||||
display: block;
|
|
||||||
border-color: #ccc;
|
|
||||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
|
|
||||||
}
|
|
||||||
// Focus states
|
|
||||||
input[type=text],
|
|
||||||
input[type=password],
|
|
||||||
select, textarea {
|
|
||||||
@transition: border linear .2s, box-shadow linear .2s;
|
|
||||||
.transition(@transition);
|
|
||||||
}
|
|
||||||
input[type=text]:focus,
|
|
||||||
input[type=password]:focus,
|
|
||||||
textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: rgba(82,168,236,.75);
|
|
||||||
.box-shadow(0 0 8px rgba(82,168,236,.5));
|
|
||||||
}
|
|
||||||
// Error styles
|
|
||||||
div.error {
|
|
||||||
background: lighten(@red, 57%);
|
|
||||||
padding: 10px 0;
|
|
||||||
margin: -10px 0 10px;
|
|
||||||
.border-radius(4px);
|
|
||||||
@error-text: desaturate(lighten(@red, 25%), 25%);
|
|
||||||
> label {
|
|
||||||
color: @red;
|
|
||||||
}
|
|
||||||
input[type=text],
|
|
||||||
input[type=password],
|
|
||||||
textarea {
|
|
||||||
border-color: @error-text;
|
|
||||||
.box-shadow(0 0 3px rgba(171,41,32,.25));
|
|
||||||
&:focus {
|
|
||||||
border-color: darken(@error-text, 10%);
|
|
||||||
.box-shadow(0 0 6px rgba(171,41,32,.5));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div.input-prepend,
|
|
||||||
div.input-append {
|
|
||||||
span.add-on {
|
|
||||||
background: lighten(@red, 50%);
|
|
||||||
border-color: @error-text;
|
|
||||||
color: darken(@error-text, 10%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Form element sizes
|
|
||||||
.input-mini, input.mini, textarea.mini, select.mini {
|
|
||||||
width: 60px;
|
|
||||||
}
|
|
||||||
.input-small, input.small, textarea.small, select.small {
|
|
||||||
width: 90px;
|
|
||||||
}
|
|
||||||
.input-medium, input.medium, textarea.medium, select.medium {
|
|
||||||
width: 150px;
|
|
||||||
}
|
|
||||||
.input-large, input.large, textarea.large, select.large {
|
|
||||||
width: 210px;
|
|
||||||
}
|
|
||||||
.input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
|
|
||||||
width: 270px;
|
|
||||||
}
|
|
||||||
.input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
|
|
||||||
width: 530px;
|
|
||||||
}
|
|
||||||
textarea.xxlarge {
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
// Turn off focus for disabled (read-only) form elements
|
|
||||||
input[readonly]:focus,
|
|
||||||
textarea[readonly]:focus,
|
|
||||||
input.disabled {
|
|
||||||
background: #f5f5f5;
|
|
||||||
border-color: #ddd;
|
|
||||||
.box-shadow(none);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Actions (the buttons)
|
|
||||||
div.actions {
|
|
||||||
background: #f5f5f5;
|
|
||||||
margin-top: @baseline;
|
|
||||||
margin-bottom: @baseline;
|
|
||||||
padding: (@baseline - 1) 20px @baseline 150px;
|
|
||||||
border-top: 1px solid #ddd;
|
|
||||||
.border-radius(0 0 3px 3px);
|
|
||||||
div.secondary-action {
|
|
||||||
float: right;
|
|
||||||
a {
|
|
||||||
line-height: 30px;
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Help Text
|
|
||||||
.help-inline,
|
|
||||||
.help-block {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: @baseline;
|
|
||||||
color: @gray-light;
|
|
||||||
}
|
|
||||||
.help-inline {
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
// Big blocks of help text
|
|
||||||
.help-block {
|
|
||||||
display: block;
|
|
||||||
max-width: 600px;
|
|
||||||
h5, p, ol li {
|
|
||||||
color: @gray;
|
|
||||||
}
|
|
||||||
p, ol li {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: @baseline;
|
|
||||||
color: @gray-light;
|
|
||||||
}
|
|
||||||
ol {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
margin-left: 25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Inline Fields (input fields that appear as inline objects
|
|
||||||
div.inline-inputs {
|
|
||||||
color: @gray;
|
|
||||||
span, input[type=text] {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
input.mini {
|
|
||||||
width: 60px;
|
|
||||||
}
|
|
||||||
input.small {
|
|
||||||
width: 90px;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
padding: 0 2px 0 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Allow us to put symbols and text within the input field for a cleaner look
|
|
||||||
div.input-prepend,
|
|
||||||
div.input-append {
|
|
||||||
input[type=text] {
|
|
||||||
.border-radius(0 3px 3px 0);
|
|
||||||
}
|
|
||||||
.add-on {
|
|
||||||
background: #f5f5f5;
|
|
||||||
float: left;
|
|
||||||
display: block;
|
|
||||||
width: auto;
|
|
||||||
min-width: 16px;
|
|
||||||
padding: 5px 4px 5px 5px;
|
|
||||||
color: @gray-light;
|
|
||||||
font-weight: normal;
|
|
||||||
line-height: 18px;
|
|
||||||
height: 18px;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: 0 1px 0 #fff;
|
|
||||||
border: 1px solid #bbb;
|
|
||||||
border-right-width: 0;
|
|
||||||
.border-radius(3px 0 0 3px);
|
|
||||||
}
|
|
||||||
.active {
|
|
||||||
background: lighten(@green, 30);
|
|
||||||
border-color: @green;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div.input-append {
|
|
||||||
input[type=text] {
|
|
||||||
float: left;
|
|
||||||
.border-radius(3px 0 0 3px);
|
|
||||||
}
|
|
||||||
.add-on {
|
|
||||||
.border-radius(0 3px 3px 0);
|
|
||||||
border-right-width: 1px;
|
|
||||||
border-left-width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Stacked options for forms (radio buttons or checkboxes)
|
|
||||||
ul.inputs-list {
|
|
||||||
margin: 0 0 5px;
|
|
||||||
width: 100%;
|
|
||||||
li {
|
|
||||||
display: block;
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
float: none;
|
|
||||||
width: auto;
|
|
||||||
padding: 0;
|
|
||||||
line-height: @baseline;
|
|
||||||
text-align: left;
|
|
||||||
white-space: normal;
|
|
||||||
strong {
|
|
||||||
color: @gray;
|
|
||||||
}
|
|
||||||
small {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: normal !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ul.inputs-list {
|
|
||||||
margin-left: 25px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
&:first-child {
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
input[type=radio],
|
|
||||||
input[type=checkbox] {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Stacked forms
|
|
||||||
form.form-stacked {
|
|
||||||
fieldset {
|
|
||||||
padding-top: @baseline / 2;
|
|
||||||
}
|
|
||||||
legend {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
float: none;
|
|
||||||
width: auto;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: left;
|
|
||||||
line-height: 20px;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
div.clearfix {
|
|
||||||
margin-bottom: @baseline / 2;
|
|
||||||
div.input {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ul.inputs-list {
|
|
||||||
margin-bottom: 0;
|
|
||||||
li {
|
|
||||||
padding-top: 0;
|
|
||||||
label {
|
|
||||||
font-weight: normal;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,526 +0,0 @@
|
|||||||
/*
|
|
||||||
Patterns.less
|
|
||||||
Repeatable UI elements outside the base styles provided from the scaffolding
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/* Top bar
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
div.topbar {
|
|
||||||
#gradient > .vertical(#333, #222);
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
height: 40px;
|
|
||||||
.box-shadow(0 1px 3px rgba(0,0,0,.5));
|
|
||||||
a {
|
|
||||||
color: #999;
|
|
||||||
&:hover {
|
|
||||||
color: @white;
|
|
||||||
text-decoration: none;
|
|
||||||
background-color: rgba(255,255,255,.05);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
a.logo,
|
|
||||||
ul li a {
|
|
||||||
float: left;
|
|
||||||
padding: 0 10px;
|
|
||||||
line-height: 40px;
|
|
||||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
|
||||||
}
|
|
||||||
// Logo
|
|
||||||
a.logo {
|
|
||||||
margin-left: -10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
color: @gray-light;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 200;
|
|
||||||
img {
|
|
||||||
float: left;
|
|
||||||
margin-top: 9px;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
color: @white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Nav items
|
|
||||||
ul {
|
|
||||||
float: left;
|
|
||||||
margin: 0;
|
|
||||||
li {
|
|
||||||
display: inline;
|
|
||||||
&.active a {
|
|
||||||
color: #fff;
|
|
||||||
background-color: rgba(0,0,0,.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Topbar for Branding and Nav
|
|
||||||
div.topbar {
|
|
||||||
#gradient > .vertical(#333, #222);
|
|
||||||
height: 40px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 100;
|
|
||||||
overflow: visible;
|
|
||||||
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
|
||||||
.box-shadow(@shadow);
|
|
||||||
// Links get text shadow
|
|
||||||
a {
|
|
||||||
color: @gray-light;
|
|
||||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
|
||||||
.transition(all linear .1s);
|
|
||||||
}
|
|
||||||
// Hover and active states for links
|
|
||||||
ul li a:hover,
|
|
||||||
ul li.active a,
|
|
||||||
a.logo:hover {
|
|
||||||
background-color: #333;
|
|
||||||
background-color: rgba(255,255,255,.15);
|
|
||||||
color: @white;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
// Logo
|
|
||||||
a.logo {
|
|
||||||
float: left;
|
|
||||||
display: block;
|
|
||||||
padding: 8px 20px 12px;
|
|
||||||
margin-left: -20px;
|
|
||||||
color: @white;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 200;
|
|
||||||
line-height: 1;
|
|
||||||
img {
|
|
||||||
display: inline;
|
|
||||||
float: left;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Search Form
|
|
||||||
form {
|
|
||||||
float: left;
|
|
||||||
margin: 4px 0 0 0;
|
|
||||||
opacity: 1;
|
|
||||||
position: relative;
|
|
||||||
input {
|
|
||||||
background-color: @gray-light;
|
|
||||||
background-color: rgba(255,255,255,.3);
|
|
||||||
.sans-serif(13px, normal, 1);
|
|
||||||
width: 220px;
|
|
||||||
padding: 4px 9px;
|
|
||||||
color: #fff;
|
|
||||||
color: rgba(255,255,255,.75);
|
|
||||||
border: 1px solid #111;
|
|
||||||
.border-radius(4px);
|
|
||||||
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
|
|
||||||
.box-shadow(@shadow);
|
|
||||||
.transition(none);
|
|
||||||
// Placeholder text gets special styles; can't be bundled together though for some reason
|
|
||||||
&:-moz-placeholder {
|
|
||||||
color: @gray-lighter;
|
|
||||||
}
|
|
||||||
&::-webkit-input-placeholder {
|
|
||||||
color: @gray-lighter;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: #444;
|
|
||||||
background-color: rgba(255,255,255,.5);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
&:focus,
|
|
||||||
&.focused {
|
|
||||||
outline: none;
|
|
||||||
background-color: #fff;
|
|
||||||
color: @gray-dark;
|
|
||||||
text-shadow: 0 1px 0 #fff;
|
|
||||||
border: 0;
|
|
||||||
padding: 5px 10px;
|
|
||||||
.box-shadow(0 0 3px rgba(0,0,0,.15));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Navigation
|
|
||||||
ul {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
margin: 0 10px 0 0;
|
|
||||||
&.secondary-nav {
|
|
||||||
float: right;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
font-size: 13px;
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
float: none;
|
|
||||||
padding: 10px 10px 11px;
|
|
||||||
line-height: 19px;
|
|
||||||
text-decoration: none;
|
|
||||||
&:hover {
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.active a {
|
|
||||||
background-color: #222;
|
|
||||||
background-color: rgba(0,0,0,.5);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
// Vertical rule
|
|
||||||
&.vr {
|
|
||||||
border-left: 1px solid #008db8;
|
|
||||||
border-right: 1px solid #00a0d1;
|
|
||||||
height: 26px;
|
|
||||||
margin: 6px 3px 1px 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Dropdowns
|
|
||||||
&.primary-nav li ul {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
&.secondary-nav li ul {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
li.menu {
|
|
||||||
position: relative;
|
|
||||||
a.menu {
|
|
||||||
&:after {
|
|
||||||
width: 7px;
|
|
||||||
height: 7px;
|
|
||||||
display: inline-block;
|
|
||||||
background: transparent url(../img/dropdown-arrow.gif) no-repeat top center;
|
|
||||||
content: "↓";
|
|
||||||
text-indent: -99999px;
|
|
||||||
vertical-align: top;
|
|
||||||
margin-top: 8px;
|
|
||||||
margin-left: 4px;
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.open {
|
|
||||||
a.menu,
|
|
||||||
a:hover {
|
|
||||||
background-color: lighten(#00a0d1,5);
|
|
||||||
background-color: rgba(255,255,255,.1);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
display: block;
|
|
||||||
li {
|
|
||||||
a {
|
|
||||||
background-color: transparent;
|
|
||||||
font-weight: normal;
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(255,255,255,.1);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.active a {
|
|
||||||
background-color: rgba(255,255,255,.1);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
li ul {
|
|
||||||
background-color: #333;
|
|
||||||
float: left;
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 40px;
|
|
||||||
min-width: 160px;
|
|
||||||
max-width: 220px;
|
|
||||||
_width: 160px;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
padding: 0;
|
|
||||||
text-align: left;
|
|
||||||
border: 0;
|
|
||||||
zoom: 1;
|
|
||||||
.border-radius(0 0 5px 5px);
|
|
||||||
.box-shadow(0 1px 2px rgba(0,0,0,0.6));
|
|
||||||
li {
|
|
||||||
float: none;
|
|
||||||
clear: both;
|
|
||||||
display: block;
|
|
||||||
background: none;
|
|
||||||
font-size: 12px;
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
padding: 6px 15px;
|
|
||||||
clear: both;
|
|
||||||
font-weight: normal;
|
|
||||||
line-height: 19px;
|
|
||||||
color: #bbb;
|
|
||||||
&:hover {
|
|
||||||
background-color: #333;
|
|
||||||
background-color: rgba(255,255,255,.25);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Dividers (basically an hr)
|
|
||||||
&.divider {
|
|
||||||
height: 1px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: rgba(0,0,0,.2);
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,.1);
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
// Section separaters
|
|
||||||
span {
|
|
||||||
clear: both;
|
|
||||||
display: block;
|
|
||||||
background: rgba(0,0,0,.2);
|
|
||||||
padding: 6px 15px;
|
|
||||||
cursor: default;
|
|
||||||
color: #666;
|
|
||||||
border-top: 1px solid rgba(0,0,0,.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Page Headers
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
div.page-header {
|
|
||||||
margin-bottom: @baseline - 1;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
.border-radius(6px 6px 0 0);
|
|
||||||
.box-shadow(0 1px 0 rgba(255,255,255,.5));
|
|
||||||
h1 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Error Styles
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
// One-liner alert bars
|
|
||||||
div.alert-message {
|
|
||||||
#gradient > .vertical(transparent, rgba(0,0,0,0.15));
|
|
||||||
background-color: @gray-lighter;
|
|
||||||
margin-bottom: @baseline;
|
|
||||||
padding: 10px 15px 9px;
|
|
||||||
.border-radius(6px);
|
|
||||||
color: #fff;
|
|
||||||
border-bottom: 1px solid rgba(0,0,0,.25);
|
|
||||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
|
||||||
p {
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 0;
|
|
||||||
+ p {
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.error {
|
|
||||||
background-color: lighten(@red, 25%);
|
|
||||||
}
|
|
||||||
&.warning {
|
|
||||||
background-color: lighten(@yellow, 15%);
|
|
||||||
}
|
|
||||||
&.success {
|
|
||||||
background-color: lighten(@green, 15%);
|
|
||||||
}
|
|
||||||
&.info {
|
|
||||||
background-color: lighten(@blue, 15%);
|
|
||||||
}
|
|
||||||
a.close {
|
|
||||||
float: right;
|
|
||||||
margin-top: -2px;
|
|
||||||
opacity: .5;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-shadow: 0 1px 0 rgba(0,0,0,.5);
|
|
||||||
.border-radius(3px);
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Block-level Alerts
|
|
||||||
div.block-message {
|
|
||||||
margin-bottom: @baseline;
|
|
||||||
padding: 14px 19px;
|
|
||||||
color: #333;
|
|
||||||
color: rgba(0,0,0,.8);
|
|
||||||
text-shadow: 0 1px 0 rgba(255,255,255,.25);
|
|
||||||
.border-radius(6px);
|
|
||||||
p {
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 18px;
|
|
||||||
color: #333;
|
|
||||||
color: rgba(0,0,0,.8);
|
|
||||||
margin-right: 30px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
strong {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
a.close {
|
|
||||||
display: block;
|
|
||||||
color: #333;
|
|
||||||
color: rgba(0,0,0,.5);
|
|
||||||
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
|
||||||
}
|
|
||||||
&.error {
|
|
||||||
background: lighten(@red, 55%);
|
|
||||||
border: 1px solid lighten(@red, 50%);
|
|
||||||
}
|
|
||||||
&.warning {
|
|
||||||
background: lighten(@yellow, 35%);
|
|
||||||
border: 1px solid lighten(@yellow, 25%)
|
|
||||||
}
|
|
||||||
&.success {
|
|
||||||
background: lighten(@green, 45%);
|
|
||||||
border: 1px solid lighten(@green, 35%)
|
|
||||||
}
|
|
||||||
&.info {
|
|
||||||
background: lighten(@blue, 45%);
|
|
||||||
border: 1px solid lighten(@blue, 40%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Navigation
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
// Common tab and pill styles
|
|
||||||
ul.tabs,
|
|
||||||
ul.pills {
|
|
||||||
margin: 0 0 20px;
|
|
||||||
padding: 0;
|
|
||||||
.clearfix();
|
|
||||||
li {
|
|
||||||
display: inline;
|
|
||||||
a {
|
|
||||||
display: inline;
|
|
||||||
float: left;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Basic Tabs
|
|
||||||
ul.tabs {
|
|
||||||
width: 100%;
|
|
||||||
border-bottom: 1px solid #ccc;
|
|
||||||
li {
|
|
||||||
a {
|
|
||||||
margin-bottom: -1px;
|
|
||||||
margin-right: 2px;
|
|
||||||
padding: 0 15px;
|
|
||||||
line-height: (@baseline * 2) - 1;
|
|
||||||
.border-radius(3px 3px 0 0);
|
|
||||||
&:hover {
|
|
||||||
background: #f5f5f5;
|
|
||||||
border-bottom: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.active a {
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 14px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-bottom: 0;
|
|
||||||
color: @gray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Basic pill nav
|
|
||||||
ul.pills {
|
|
||||||
li {
|
|
||||||
a {
|
|
||||||
margin: 5px 3px 5px 0;
|
|
||||||
padding: 0 15px;
|
|
||||||
text-shadow: 0 1px 1px #fff;
|
|
||||||
line-height: 30px;
|
|
||||||
.border-radius(15px);
|
|
||||||
&:hover {
|
|
||||||
background: @link-hover-color;
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.active a {
|
|
||||||
background: @link-color;
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Pagination
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
div.pagination {
|
|
||||||
height: @baseline * 2;
|
|
||||||
margin: @baseline 0;
|
|
||||||
ul {
|
|
||||||
float: left;
|
|
||||||
margin: 0;
|
|
||||||
border: 1px solid rgba(0,0,0,.15);
|
|
||||||
.border-radius(3px);
|
|
||||||
.box-shadow(0 1px 2px rgba(0,0,0,.075);
|
|
||||||
li {
|
|
||||||
display: inline;
|
|
||||||
a {
|
|
||||||
display: inline;
|
|
||||||
float: left;
|
|
||||||
padding: 0 14px;
|
|
||||||
line-height: (@baseline * 2) - 2;
|
|
||||||
border-right: 1px solid rgba(0,0,0,.15);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
a:hover,
|
|
||||||
&.active a {
|
|
||||||
background-color: lighten(@blue, 45%);
|
|
||||||
}
|
|
||||||
&.disabled a,
|
|
||||||
&.disabled a:hover {
|
|
||||||
background-color: none;
|
|
||||||
color: @gray-light;
|
|
||||||
}
|
|
||||||
&.next a,
|
|
||||||
&:last-child a {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Wells
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
div.well {
|
|
||||||
background: #f5f5f5;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 19px;
|
|
||||||
min-height: 20px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
.border-radius(4px);
|
|
||||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075);
|
|
||||||
}
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
/*--------------------------------------------------
|
|
||||||
|
|
||||||
Global Reset
|
|
||||||
|
|
||||||
Props to Eric Meyer (meyerweb.com) for his CSS
|
|
||||||
reset file. We're using an adapted version here
|
|
||||||
that cuts out some of the reset HTML elements we
|
|
||||||
will never need here (i.e., dfn, samp, etc).
|
|
||||||
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
html, body { margin: 0; padding: 0; }
|
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
|
|
||||||
table { border-collapse: collapse; border-spacing: 0; }
|
|
||||||
ol, ul { list-style: none; }
|
|
||||||
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
/*
|
|
||||||
Scaffolding
|
|
||||||
Basic and global styles for generating a grid system, structural layout, and page templates
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Baseline Grid System
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
div.row {
|
|
||||||
.clearfix();
|
|
||||||
div.span1 { .columns(1); }
|
|
||||||
div.span2 { .columns(2); }
|
|
||||||
div.span3 { .columns(3); }
|
|
||||||
div.span4 { .columns(4); }
|
|
||||||
div.span5 { .columns(5); }
|
|
||||||
div.span6 { .columns(6); }
|
|
||||||
div.span7 { .columns(7); }
|
|
||||||
div.span8 { .columns(8); }
|
|
||||||
div.span9 { .columns(9); }
|
|
||||||
div.span10 { .columns(10); }
|
|
||||||
div.span11 { .columns(11); }
|
|
||||||
div.span12 { .columns(12); }
|
|
||||||
div.span13 { .columns(13); }
|
|
||||||
div.span14 { .columns(14); }
|
|
||||||
div.span15 { .columns(15); }
|
|
||||||
div.span16 { .columns(16); }
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Structural Layout
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
.sans-serif(normal,14px,20px);
|
|
||||||
color: @gray;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
.box-shadow(inset 0 1px 0 #fff);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Container (centered, fixed-width layouts)
|
|
||||||
div.container {
|
|
||||||
width: 940px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
|
|
||||||
div.container-fluid {
|
|
||||||
padding: 20px;
|
|
||||||
.clearfix();
|
|
||||||
div.sidebar {
|
|
||||||
float: left;
|
|
||||||
width: 220px;
|
|
||||||
}
|
|
||||||
div.content {
|
|
||||||
min-width: 700px;
|
|
||||||
max-width: 1180px;
|
|
||||||
margin-left: 240px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Base Styles
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
// Links
|
|
||||||
a {
|
|
||||||
color: @link-color;
|
|
||||||
text-decoration: none;
|
|
||||||
line-height: inherit;
|
|
||||||
&:hover {
|
|
||||||
color: @link-hover-color;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Buttons
|
|
||||||
.btn {
|
|
||||||
.button();
|
|
||||||
&.primary {
|
|
||||||
#gradient > .vertical(@blue, @blue-dark);
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
|
||||||
&:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.large {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 30px;
|
|
||||||
.border-radius(6px);
|
|
||||||
}
|
|
||||||
&.small {
|
|
||||||
padding-right: 9px;
|
|
||||||
padding-left: 9px;
|
|
||||||
font-size: 11px;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Help Firefox not be a douche about adding extra padding to buttons
|
|
||||||
button.btn,
|
|
||||||
input[type=submit].btn {
|
|
||||||
&::-moz-focus-inner {
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
121
less/tables.less
121
less/tables.less
@ -1,121 +0,0 @@
|
|||||||
/*
|
|
||||||
Tables
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/* Baseline styles
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: @baseline;
|
|
||||||
padding: 0;
|
|
||||||
text-align: left;
|
|
||||||
border-collapse: separate;
|
|
||||||
th, td {
|
|
||||||
// #translucent > .background(@green, .15);
|
|
||||||
padding: 10px 10px 9px;
|
|
||||||
line-height: @baseline;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
th {
|
|
||||||
padding-top: 9px;
|
|
||||||
font-weight: bold;
|
|
||||||
border-bottom-width: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Zebra-striping
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
|
||||||
table.zebra-striped {
|
|
||||||
tbody {
|
|
||||||
tr:nth-child(odd) td {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
tr:hover td {
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Tablesorting styles w/ jQuery plugin
|
|
||||||
th.header { // For tablesorter tables, make THs have a pointer on hover
|
|
||||||
cursor: pointer;
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
th.headerSortUp,
|
|
||||||
th.headerSortDown { // Style the sorted column headers (THs)
|
|
||||||
background-image: url(../img/tablesorter-indicators.png);
|
|
||||||
background-position: right -23px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-color: rgba(141,192,219,.25);
|
|
||||||
.border-radius(3px 3px 0 0);
|
|
||||||
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
|
||||||
}
|
|
||||||
th.header:hover { // Style the ascending (reverse alphabetical) column header
|
|
||||||
background-image: url(../img/tablesorter-indicators.png);
|
|
||||||
background-position: right 15px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
th.actions:hover {
|
|
||||||
background-image: none !important;
|
|
||||||
}
|
|
||||||
th.headerSortDown,
|
|
||||||
th.headerSortDown:hover { // Style the descending (alphabetical) column header
|
|
||||||
background-position: right -25px;
|
|
||||||
}
|
|
||||||
th.headerSortUp,
|
|
||||||
th.headerSortUp:hover { // Style the ascending (reverse alphabetical) column header
|
|
||||||
background-position: right -65px;
|
|
||||||
}
|
|
||||||
// Blue Table Headings
|
|
||||||
th.blue {
|
|
||||||
color: @blue;
|
|
||||||
border-bottom-color: @blue;
|
|
||||||
}
|
|
||||||
th.headerSortUp.blue, th.headerSortDown.blue {
|
|
||||||
background-color: lighten(@blue, 40%);
|
|
||||||
}
|
|
||||||
// Green Table Headings
|
|
||||||
th.green {
|
|
||||||
color: @green;
|
|
||||||
border-bottom-color: @green;
|
|
||||||
}
|
|
||||||
th.headerSortUp.green, th.headerSortDown.green { // backround color is 20% of border color
|
|
||||||
background-color: lighten(@green, 40%);
|
|
||||||
}
|
|
||||||
// Red Table Headings
|
|
||||||
th.red {
|
|
||||||
color: @red;
|
|
||||||
border-bottom-color: @red;
|
|
||||||
}
|
|
||||||
th.headerSortUp.red, th.headerSortDown.red { // backround color is 20% of border color
|
|
||||||
background-color: lighten(@red, 50%);
|
|
||||||
}
|
|
||||||
// Yellow Table Headings
|
|
||||||
th.yellow {
|
|
||||||
color: @yellow;
|
|
||||||
border-bottom-color: @yellow;
|
|
||||||
}
|
|
||||||
th.headerSortUp.yellow, th.headerSortDown.yellow { // backround color is 20% of border color
|
|
||||||
background-color: lighten(@yellow, 40%);
|
|
||||||
}
|
|
||||||
// Orange Table Headings
|
|
||||||
th.orange {
|
|
||||||
color: @orange;
|
|
||||||
border-bottom-color: @orange;
|
|
||||||
}
|
|
||||||
th.headerSortUp.orange, th.headerSortDown.orange { // backround color is 20% of border color
|
|
||||||
background-color: lighten(@orange, 40%);
|
|
||||||
}
|
|
||||||
// Purple Table Headings
|
|
||||||
th.purple {
|
|
||||||
color: @purple;
|
|
||||||
border-bottom-color: @purple;
|
|
||||||
}
|
|
||||||
th.headerSortUp.purple, th.headerSortDown.purple { // backround color is 20% of border color
|
|
||||||
background-color: lighten(@purple, 40%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
256
less/type.less
256
less/type.less
@ -1,256 +0,0 @@
|
|||||||
/*
|
|
||||||
Typography
|
|
||||||
Headings, body text, lists, code, and more for a versatile and durable typography system
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/* Body text
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
p {
|
|
||||||
.font(normal,14px,@baseline);
|
|
||||||
margin-bottom: @baseline;
|
|
||||||
small {
|
|
||||||
font-size: 12px;
|
|
||||||
color: @gray-light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Headings
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-weight: 500;
|
|
||||||
color: @gray-dark;
|
|
||||||
small {
|
|
||||||
color: @gray-light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
margin-bottom: @baseline;
|
|
||||||
font-size: 30px;
|
|
||||||
line-height: @baseline * 2;
|
|
||||||
small {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: @baseline * 2;
|
|
||||||
small {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h3, h4, h5, h6 {
|
|
||||||
line-height: @baseline * 2;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
font-size: 18px;
|
|
||||||
small {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
font-size: 16px;
|
|
||||||
small {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h5 {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
h6 {
|
|
||||||
font-size: 13px;
|
|
||||||
color: @gray-light;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Colors
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
// Unordered and Ordered lists
|
|
||||||
ul, ol {
|
|
||||||
margin: 0 0 @baseline 25px;
|
|
||||||
}
|
|
||||||
ul ul,
|
|
||||||
ul ol,
|
|
||||||
ol ol,
|
|
||||||
ol ul {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style: disc;
|
|
||||||
}
|
|
||||||
ol {
|
|
||||||
list-style: decimal;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
line-height: @baseline;
|
|
||||||
color: @gray;
|
|
||||||
}
|
|
||||||
ul.unstyled {
|
|
||||||
list-style: none;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Description Lists
|
|
||||||
dl {
|
|
||||||
margin-bottom: @baseline;
|
|
||||||
dt, dd {
|
|
||||||
line-height: @baseline;
|
|
||||||
}
|
|
||||||
dt {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
dd {
|
|
||||||
margin-left: @baseline / 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Misc
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
// Labels
|
|
||||||
span.label {
|
|
||||||
background-color: #ccc;
|
|
||||||
padding: 3px 5px;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 0 1px rgba(0,0,0,.01);
|
|
||||||
text-transform: uppercase;
|
|
||||||
.border-radius(3px);
|
|
||||||
&.expired {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
&.pending {
|
|
||||||
background-color: #48489b;
|
|
||||||
}
|
|
||||||
&.declined {
|
|
||||||
background-color: #9b4848;
|
|
||||||
}
|
|
||||||
&.active,
|
|
||||||
&.approved {
|
|
||||||
background-color: #59bf59;
|
|
||||||
}
|
|
||||||
&.disabled {
|
|
||||||
background-color: #faa226;
|
|
||||||
}
|
|
||||||
&.scheduled {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
color: #59bf59;
|
|
||||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Horizontal rules
|
|
||||||
hr {
|
|
||||||
margin: 0 0 19px;
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Emphasis
|
|
||||||
strong {
|
|
||||||
font-style: inherit;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
em {
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
.muted {
|
|
||||||
color: @gray-lighter;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Blockquotes
|
|
||||||
blockquote {
|
|
||||||
margin-bottom: @baseline;
|
|
||||||
border-left: 5px solid #eee;
|
|
||||||
padding-left: 15px;
|
|
||||||
p {
|
|
||||||
.font(300,14px,@baseline);
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
cite {
|
|
||||||
display: block;
|
|
||||||
.font(300,12px,@baseline);
|
|
||||||
color: @gray-light;
|
|
||||||
&:before {
|
|
||||||
content: '\2014 \00A0';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Addresses
|
|
||||||
address {
|
|
||||||
display: block;
|
|
||||||
line-height: @baseline;
|
|
||||||
margin-bottom: @baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Inline and block code styles
|
|
||||||
code, pre {
|
|
||||||
padding: 0 3px 2px;
|
|
||||||
font-family: Monaco, Andale Mono, Courier New, monospace;
|
|
||||||
font-size: 12px;
|
|
||||||
.border-radius(3px);
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
background-color: lighten(@orange, 40%);
|
|
||||||
color: rgba(0,0,0,.75);
|
|
||||||
padding: 2px 3px;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
display: block;
|
|
||||||
padding: @baseline - 1;
|
|
||||||
margin: 0 0 @baseline;
|
|
||||||
line-height: @baseline;
|
|
||||||
font-size: 12px;
|
|
||||||
border: 1px solid rgba(0,0,0,.15);
|
|
||||||
.border-radius(3px);
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
// Code block styling from Chili
|
|
||||||
pre.css, pre.html {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
pre ol {
|
|
||||||
background-color: lighten(@orange, 42%);
|
|
||||||
list-style: decimal;
|
|
||||||
margin: (@baseline - 1) * -1;
|
|
||||||
padding-left: 59px;
|
|
||||||
.border-radius(2px);
|
|
||||||
li {
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 0 10px;
|
|
||||||
border-left: 1px solid rgba(0,0,0,.1);
|
|
||||||
border-left-color: lighten(@orange, 35%);
|
|
||||||
font-size: 11px;
|
|
||||||
line-height: @baseline;
|
|
||||||
color: @gray-light;
|
|
||||||
text-shadow: 0 1px 1px rgba(255,255,255,.5);
|
|
||||||
word-wrap: break-word;
|
|
||||||
&:hover {
|
|
||||||
}
|
|
||||||
&:first-child {
|
|
||||||
padding-top: 9px;
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
padding-bottom: 9px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Language Styles
|
|
||||||
span.html__tag_start,
|
|
||||||
span.html__tag_end { color: #277ac1; font-weight: normal; }
|
|
||||||
span.html__attr_name { color: #d78b41; }
|
|
||||||
span.html__attr_value { color: #de4a3f; }
|
|
||||||
Loading…
x
Reference in New Issue
Block a user