diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000..f9f60d0a8f Binary files /dev/null and b/.DS_Store differ diff --git a/readme.markdown b/README.md similarity index 84% rename from readme.markdown rename to README.md index a2064aa4d0..e1869d18b7 100644 --- a/readme.markdown +++ b/README.md @@ -12,4 +12,5 @@ http://twitter.com/mdo # Todos * Cross browser checks? Show this anywhere? -* Write up brief section on browser support \ No newline at end of file +* Write up brief section on browser support +* LICENSE from legal \ No newline at end of file diff --git a/img/dropdown-arrow.gif b/assets/img/dropdown-arrow.gif similarity index 100% rename from img/dropdown-arrow.gif rename to assets/img/dropdown-arrow.gif diff --git a/img/tablesorter-indicators.png b/assets/img/tablesorter-indicators.png similarity index 100% rename from img/tablesorter-indicators.png rename to assets/img/tablesorter-indicators.png diff --git a/less/baseline.css b/baseline-1.0.0.min.css similarity index 96% rename from less/baseline.css rename to baseline-1.0.0.min.css index 3feb91a104..72ec50ed03 100644 --- a/less/baseline.css +++ b/baseline-1.0.0.min.css @@ -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:".";} .right{float:right;} .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 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;} @@ -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:hover td{background-color:#f1f1f1;} 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.header:hover{background-image:url(../img/tablesorter-indicators.png);background-position:right 15px;background-repeat:no-repeat;} +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(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.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;} @@ -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.primary-nav li ul{left: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 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;} @@ -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;} header,section,footer,article,aside{display:block;} 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{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;} @@ -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: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 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.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;} diff --git a/img/baseline-10px.png b/docs/assets/img/baseline-10px.png similarity index 100% rename from img/baseline-10px.png rename to docs/assets/img/baseline-10px.png diff --git a/img/blueprint-icon.png b/docs/assets/img/blueprint-icon.png similarity index 100% rename from img/blueprint-icon.png rename to docs/assets/img/blueprint-icon.png diff --git a/img/grid-20px.png b/docs/assets/img/grid-20px.png similarity index 100% rename from img/grid-20px.png rename to docs/assets/img/grid-20px.png diff --git a/img/grid-940px.png b/docs/assets/img/grid-940px.png similarity index 100% rename from img/grid-940px.png rename to docs/assets/img/grid-940px.png diff --git a/img/twitter-logo-no-bird.png b/docs/assets/img/twitter-logo-no-bird.png similarity index 100% rename from img/twitter-logo-no-bird.png rename to docs/assets/img/twitter-logo-no-bird.png diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js new file mode 100644 index 0000000000..a79f942e39 --- /dev/null +++ b/docs/assets/js/application.js @@ -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; + }); +}); \ No newline at end of file diff --git a/js/jquery/chili/css.js b/docs/assets/js/jquery/chili/css.js similarity index 100% rename from js/jquery/chili/css.js rename to docs/assets/js/jquery/chili/css.js diff --git a/js/jquery/chili/html.js b/docs/assets/js/jquery/chili/html.js similarity index 100% rename from js/jquery/chili/html.js rename to docs/assets/js/jquery/chili/html.js diff --git a/js/jquery/chili/jquery.chili-2.2.js b/docs/assets/js/jquery/chili/jquery.chili-2.2.js similarity index 100% rename from js/jquery/chili/jquery.chili-2.2.js rename to docs/assets/js/jquery/chili/jquery.chili-2.2.js diff --git a/js/jquery/chili/js.js b/docs/assets/js/jquery/chili/js.js similarity index 100% rename from js/jquery/chili/js.js rename to docs/assets/js/jquery/chili/js.js diff --git a/js/jquery/chili/php-f.js b/docs/assets/js/jquery/chili/php-f.js similarity index 100% rename from js/jquery/chili/php-f.js rename to docs/assets/js/jquery/chili/php-f.js diff --git a/js/jquery/chili/php.js b/docs/assets/js/jquery/chili/php.js similarity index 100% rename from js/jquery/chili/php.js rename to docs/assets/js/jquery/chili/php.js diff --git a/js/jquery/chili/recipes.js b/docs/assets/js/jquery/chili/recipes.js similarity index 100% rename from js/jquery/chili/recipes.js rename to docs/assets/js/jquery/chili/recipes.js diff --git a/js/jquery/hashgrid.js b/docs/assets/js/jquery/hashgrid.js similarity index 100% rename from js/jquery/hashgrid.js rename to docs/assets/js/jquery/hashgrid.js diff --git a/js/jquery/jquery.tipsy.js b/docs/assets/js/jquery/jquery.tipsy.js similarity index 100% rename from js/jquery/jquery.tipsy.js rename to docs/assets/js/jquery/jquery.tipsy.js diff --git a/js/less-1.0.41.min.js b/docs/assets/js/less-1.0.41.min.js similarity index 100% rename from js/less-1.0.41.min.js rename to docs/assets/js/less-1.0.41.min.js diff --git a/grid.html b/docs/grid.html similarity index 100% rename from grid.html rename to docs/grid.html diff --git a/index.html b/docs/index.html similarity index 95% rename from index.html rename to docs/index.html index 5876ac5e8f..b18db8e8f1 100644 --- a/index.html +++ b/docs/index.html @@ -5,60 +5,31 @@ Twitter Baseline - - + - - - - + + + - - - + + + + + - + - -
diff --git a/less/baseline.less b/less/baseline.less deleted file mode 100644 index 8591cfe075..0000000000 --- a/less/baseline.less +++ /dev/null @@ -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"; \ No newline at end of file diff --git a/less/bootstrap.less b/less/bootstrap.less deleted file mode 100644 index 9e131a9096..0000000000 --- a/less/bootstrap.less +++ /dev/null @@ -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); - } -} diff --git a/less/docs.less b/less/docs.less deleted file mode 100644 index 0f17c5083b..0000000000 --- a/less/docs.less +++ /dev/null @@ -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); - } -} diff --git a/less/forms.less b/less/forms.less deleted file mode 100644 index 59dae9241b..0000000000 --- a/less/forms.less +++ /dev/null @@ -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; - } - } - } -} diff --git a/less/patterns.less b/less/patterns.less deleted file mode 100644 index 7c5a902fac..0000000000 --- a/less/patterns.less +++ /dev/null @@ -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); -} diff --git a/less/reset.less b/less/reset.less deleted file mode 100644 index af9a89f084..0000000000 --- a/less/reset.less +++ /dev/null @@ -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: ""; } \ No newline at end of file diff --git a/less/scaffolding.less b/less/scaffolding.less deleted file mode 100644 index fc920ab3a4..0000000000 --- a/less/scaffolding.less +++ /dev/null @@ -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; - } -} diff --git a/less/tables.less b/less/tables.less deleted file mode 100644 index 01a2e2e57a..0000000000 --- a/less/tables.less +++ /dev/null @@ -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%); - } -} diff --git a/less/type.less b/less/type.less deleted file mode 100644 index cc1f0826a1..0000000000 --- a/less/type.less +++ /dev/null @@ -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; }