Commit 40663003 authored by Thomas Park's avatar Thomas Park
Browse files

update to bootstrap 2.1.0

parent 3a09fbc1
This diff is collapsed.
This diff is collapsed.
// Bootswatch.less
// Swatch: Amelia
// Version: 2.0.4
// Version: 2.1.0
// -----------------------------------------------------
// TYPOGRAPHY
......@@ -9,7 +9,8 @@
@import url('https://fonts.googleapis.com/css?family=Lobster');
@import url('https://fonts.googleapis.com/css?family=Cabin:400,700');
.navbar .brand, legend {
.navbar .brand,
legend {
font-family: @headingsFontFamily;
}
......@@ -38,6 +39,7 @@ hr {
}
.page-header {
margin: 30px 0 15px;
border-bottom: 0px solid transparent;
}
......@@ -53,12 +55,13 @@ footer.footer {
// -----------------------------------------------------
.navbar {
.navbar-inner {
.border-radius(0);
}
.brand {
padding: 12px 20px 14px;
padding: 15px 20px 14px;
font-size: 24px;
font-weight: normal;
}
......@@ -69,21 +72,78 @@ footer.footer {
text-shadow: none;
}
.nav > .active > a,
.nav > .active > a:hover,
.navbar .nav > .active > a:focus {
.box-shadow(none);
}
.navbar-search {
margin-top: 10px;
}
.navbar-search .search-query {
border: 2px solid lighten(@navbarBackground, 10%);
.border-radius(0);
.box-shadow(none);
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-text {
margin: 17px 15px 14px;
line-height: 20px;
}
.btn,
.btn-group {
padding: 4px;
}
.nav-collapse.collapse {
.nav li > a {
color: @textColor;
.border-radius(0);
&:hover {
background-color: lighten(@navbarBackground, 10%);
}
}
&:focus, &.focus {
background-color: @grayLighter;
border-color: @grayLighter;
text-shadow: none;
padding: 4px 9px;
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
background-image: none;
}
.navbar-form,
.navbar-search {
.box-shadow(none);
border: none;
}
.navbar-search .search-query {
border: 2px solid @textColor;
}
.nav-header {
color: rgba(255, 255, 255, 0.5);
}
}
&-inverse {
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
background-image: none;
background-color: @yellow;
}
.nav-collapse.collapse {
.nav li > a:hover {
background-color: lighten(@navbarInverseBackground, 10%);
}
}
}
}
......@@ -135,27 +195,6 @@ div.subnav-fixed {
top: 50px;
}
.navbar .nav-collapse.in {
.nav li > a {
color: @textColor;
.border-radius(0);
}
li > a:hover {
background-color: lighten(@navbarBackground, 10%);
}
.navbar-form, .navbar-search {
.box-shadow(none);
border-color: lighten(@navbarBackground, 10%);
}
.navbar-search .search-query {
border: 2px solid @textColor;
}
}
// BUTTONS
// -----------------------------------------------------
......@@ -191,23 +230,13 @@ div.subnav-fixed {
}
.btn-group .btn:first-child {
margin-left: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
margin-left: 0;
.border-radius(0);
}
.btn-group .btn:last-child,
.btn-group .dropdown-toggle {
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0;
.border-radius(0);
}
.btn-group .dropdown-toggle,
......@@ -240,6 +269,10 @@ div.subnav-fixed {
.buttonBackgroundCustom(@btnInverseBackground);
}
.btn-link {
.buttonBackgroundCustom(@btnPrimaryBackground);
}
.btn-small {
padding: 13px 16px 12px;
}
......@@ -269,6 +302,21 @@ div.subnav-fixed {
.border-radius(0);
}
.table tbody {
tr.success td {
background-color: @green;
}
tr.error td {
background-color: @red;
}
tr.info td {
background-color: @blue;
}
}
// FORMS
// -----------------------------------------------------
......@@ -320,9 +368,10 @@ input, textarea, .search-query, .uneditable-input,
color: lighten(@green, 20%);
}
.input-prepend .add-on, .input-append .add-on {
height: 25px;
padding-top: 9px;
.input-prepend .add-on,
.input-append .add-on {
height: 20px;
padding-top: 4px;
background-color: @grayLighter;
border-color: transparent;
.border-radius(0);
......@@ -330,6 +379,11 @@ input, textarea, .search-query, .uneditable-input,
text-shadow: none;
}
.input-append .btn,
.input-prepend .btn {
padding: 4px 10px;
}
// NAVIGATION
// -----------------------------------------------------
......@@ -348,30 +402,39 @@ input, textarea, .search-query, .uneditable-input,
text-shadow: none;
}
.active {
color: @white;
}
.divider {
color: @linkColor;
}
}
.pager > li > a {
background-color: #3CB9C6;
.pager {
&:hover {
background-color: #8AD5DC;
li > a {
background-color: #3CB9C6;
&:hover {
background-color: #8AD5DC;
}
}
.disabled a,
.disabled a:hover {
background-color: #3CB9C6;
color: @white;
}
}
.pagination {
ul {
background-color: #3CB9C6;
background-color: @paginationBackground;
background-image: none;
}
li a {
border: 0px solid transparent;
}
.disabled a, .disabled a:hover {
color: @textColor;
}
......@@ -471,6 +534,11 @@ input, textarea, .search-query, .uneditable-input,
background-color: #8AD5DC;
text-shadow: none;
}
.divider {
background-color: rgba(255, 255, 255, 0.3);
border-bottom: none;
}
}
// MODALS
......@@ -508,7 +576,6 @@ code, pre {
}
.well {
background-color: #3CB9C6;
background-image: none;
}
......@@ -549,7 +616,19 @@ code, pre {
.bar {
.box-shadow(none);
background-image: none;
background-color: @orange;
background-color: @yellow;
&-success {
background-color: @green;
}
&-warning {
background-color: @orange;
}
&-error {
background-color: @red;
}
}
}
......
......@@ -36,6 +36,7 @@
</head>
<body class="preview" data-spy="scroll" data-target=".subnav" data-offset="50">
<script src="../js/bsa.js"></script>
<!-- Navbar
......@@ -62,8 +63,18 @@
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Amelia</h1>
<p class="lead">A preview of changes in this swatch.</p>
<div class="row">
<div class="span6">
<h1>Amelia</h1>
<p class="lead">A preview of changes in this swatch.</p>
</div>
<div class="span6">
<div class="bsa well">
<div id="bsap_1277971" class="bsarocks bsap_c466df00a3cd5ee8568b5c4983b6bb19"></div>
<div class="clearfix"><a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a></div>
</div>
</div>
</div>
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#typography">Typography</a></li>
......@@ -128,7 +139,7 @@
================================================== -->
<section id="navbar">
<div class="page-header">
<h1>Navbar</h1>
<h1>Navbars</h1>
</div>
<div class="navbar">
<div class="navbar-inner">
......@@ -178,6 +189,54 @@
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
</section>
......
// Variables.less
// Variables to customize the look and feel of Bootstrap
//
// Variables
// Swatch: Amelia
// Version: 2.0.4
// -----------------------------------------------------
// Version: 2.1.0
// --------------------------------------------------
// GLOBAL VALUES
// Global values
// --------------------------------------------------
......@@ -104,12 +105,17 @@
// -------------------------
@dropdownBackground: @white;
@dropdownBorder: rgba(0,0,0,.2);
@dropdownLinkColor: @bodyBackground;
@dropdownLinkColorHover: @white;
@dropdownLinkBackgroundHover: rgba(0, 57, 59, 0.9);
@dropdownDividerTop: #e5e5e5;
@dropdownDividerBottom: @white;
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
@dropdownLinkBackgroundHover: @red;
@dropdownLinkColorActive: @dropdownLinkColor;
@dropdownLinkBackgroundActive: @red;
// COMPONENT VARIABLES
......@@ -143,11 +149,19 @@
@hrBorder: transparent;
// Wells
// -------------------------
@wellBackground: #3CB9C6;
// Navbar
// -------------------------
@navbarCollapseWidth: 979px;
@navbarHeight: 50px;
@navbarBackground: #AD1D28;
@navbarBackgroundHighlight: #AD1D28;
@navbarBorder: darken(@navbarBackground, 12%);
@navbarText: @white;
@navbarLinkColor: @white;
......@@ -156,12 +170,34 @@
@navbarLinkBackgroundHover: lighten(@navbarBackground, 10%);
@navbarLinkBackgroundActive: lighten(@navbarBackground, 10%);
@navbarSearchBackground: rgba(0, 0, 0, 0);
@navbarSearchBackgroundFocus: lighten(@navbarBackground, 25%);
@navbarSearchBorder: darken(@navbarSearchBackground, 30%);
@navbarSearchPlaceholderColor: @textColor;
@navbarBrandColor: @navbarLinkColor;
// Inverted navbar
@navbarInverseBackground: @yellow;
@navbarInverseBackgroundHighlight: @yellow;
@navbarInverseBorder: rgba(0, 0, 0, 0.1);
@navbarInverseText: @white;
@navbarInverseLinkColor: @white;
@navbarInverseLinkColorHover: @white;
@navbarInverseLinkColorActive: @white;
@navbarInverseLinkBackgroundHover: rgba(255, 255, 255, 0.2);
@navbarInverseLinkBackgroundActive: rgba(255, 255, 255, 0.2);
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus: @white;
@navbarInverseSearchBorder: @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor: @white;
@navbarInverseBrandColor: @navbarInverseLinkColor;
// Pagination
// -------------------------
@paginationBackground: #3CB9C6;
@paginationBorder: transparent;
@paginationActiveBackground: rgba(255, 255, 255, 0.4);
// Hero unit
// -------------------------
......@@ -189,10 +225,28 @@
@infoBorder: darken(spin(@infoBackground, -10), 7%);
// Tooltips and popovers
// -------------------------
@tooltipColor: #fff;
@tooltipBackground: #000;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground;
@popoverBackground: #fff;
@popoverArrowWidth: 10px;
@popoverArrowColor: #fff;
@popoverTitleBackground: darken(@popoverBackground, 3%);
// Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
@popoverArrowOuterColor: rgba(0,0,0,.25);
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
@gridColumns: 12;
......@@ -200,7 +254,26 @@
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 30px;
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
// 768px-979px
@gridColumnWidth768: 42px;
@gridGutterWidth768: 20px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
// Fluid grid
// -------------------------
@fluidGridColumnWidth: 6.382978723%;
@fluidGridGutterWidth: 2.127659574%;
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
// 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
assets/img/glyphicons-halflings.png

13.5 KB | W: | H:

assets/img/glyphicons-halflings.png

12.5 KB | W: | H:

assets/img/glyphicons-halflings.png
assets/img/glyphicons-halflings.png
assets/img/glyphicons-halflings.png
assets/img/glyphicons-halflings.png
  • 2-up
  • Swipe
  • Onion skin
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
// Bootswatch.less
// Swatch: Cerulean
// Version: 2.0.4
// Version: 2.1.0
// -----------------------------------------------------
// IMPORTS
......@@ -15,37 +15,18 @@
font-family: @headingsFontFamily;
.navbar-inner {
#gradient > .vertical-three-colors(@navbarBackground, @navbarBackground, 90%, @navbarBackgroundHighlight);
.brand {
padding: 16px 20px 14px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}
.brand {
padding: 15px 20px;
li {
line-height: 20px;
}
.nav > li > a {
padding: 16px 10px 14px;
}
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.active.open > .dropdown-toggle {
background-color: @navbarLinkBackgroundActive;
}
.nav-collapse.in > .nav > li .dropdown-menu a {
color: @white;
&:hover {
color: @white;
}
}
.nav-collapse.in .nav li > a {
color: @white;
&:hover {
background-color: #2B7CAC;
}
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}
.search-query {
......@@ -62,6 +43,60 @@
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);
}
// .nav li.dropdown.active > .dropdown-toggle,
// .nav li.dropdown.active.open > .dropdown-toggle {
// background-color: @navbarLinkBackgroundActive;
// }
.nav-collapse.collapse {
.nav li > a {
color: @white;
&:hover {
background-color: #2B7CAC;