Created
April 8, 2013 17:56
-
-
Save adamjgrant/5338930 to your computer and use it in GitHub Desktop.
Namespacing a bootswatch file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Amelia 2.3.1 | |
// Bootswatch | |
// ----------------------------------------------------- | |
// TYPOGRAPHY | |
// ----------------------------------------------------- | |
@import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700'); | |
#amelia { | |
h6 { | |
color: @textColor; | |
} | |
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { | |
font-family: @baseFontFamily; | |
color: @textColor; | |
} | |
code, pre { | |
background-color: rgba(255, 255, 255, 0.3); | |
padding: 2px; | |
} | |
blockquote { | |
border-left-color: lighten(#147E88, 12%); | |
&.pull-right { | |
border-right-color: lighten(#147E88, 12%); | |
} | |
small { | |
color: rgba(255, 255, 255, 0.6); | |
} | |
} | |
.muted { | |
color: rgba(255, 255, 255, 0.6); | |
} | |
// SCAFFOLDING | |
// ----------------------------------------------------- | |
body { | |
#gradient > .radial(lighten(#0F8790, 7%), #0F8790); | |
} | |
hr { | |
border-bottom: none; | |
} | |
.page-header { | |
margin: 30px 0 15px; | |
border-bottom: 0px solid transparent; | |
} | |
// NAVBAR | |
// ----------------------------------------------------- | |
.navbar { | |
.navbar-inner { | |
.border-radius(0); | |
} | |
.brand { | |
padding: 15px 20px 14px; | |
font-family: @headingsFontFamily; | |
font-size: 24px; | |
font-weight: normal; | |
} | |
.nav > li > a { | |
padding-top: 17px; | |
padding-bottom: 14px; | |
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-radius(0); | |
padding-top: 5px; | |
padding-bottom: 5px; | |
} | |
.navbar-text { | |
margin: 17px 15px 14px; | |
line-height: 20px; | |
} | |
.btn, | |
.btn-group { | |
padding: 4px; | |
} | |
&-inverse { | |
.dropdown-menu li > a:hover, | |
.dropdown-menu li > a:focus, | |
.dropdown-submenu:hover > a { | |
background-image: none; | |
background-color: @yellow; | |
} | |
} | |
} | |
@media (max-width: @navbarCollapseWidth) { | |
.navbar .nav-collapse { | |
.nav li > a { | |
color: @textColor; | |
.border-radius(0); | |
&:hover { | |
background-color: lighten(@navbarBackground, 10%); | |
} | |
} | |
.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); | |
} | |
} | |
.navbar-inverse .nav-collapse { | |
.nav > li > a, | |
.dropdown-menu a { | |
color: @navbarInverseLinkColor !important; | |
} | |
.nav li > a:hover, | |
.dropdown-menu a:hover { | |
background-color: lighten(@navbarInverseBackground, 10%) !important; | |
} | |
} | |
} | |
div.subnav { | |
margin: 0 1px; | |
background: rgba(42, 99, 105, 0.9) none; | |
border: none; | |
.border-radius(0); | |
.box-shadow(none); | |
.nav > li > a { | |
color: @textColor; | |
border-color: transparent; | |
} | |
.nav > li:first-child > a, | |
.nav > li:first-child > a:hover { | |
.border-radius(0); | |
} | |
.nav > .active > a { | |
background-color: rgba(255, 255, 255, 0.4); | |
border-color: transparent; | |
color: @textColor; | |
.box-shadow(none); | |
} | |
.nav > li > a:hover, | |
.nav > .active > a:hover, { | |
border-right-color: transparent; | |
background-color: rgba(255, 255, 255, 0.4); | |
color: @textColor; | |
} | |
.nav > li.open > a { | |
border-color: transparent; | |
background-color: rgba(255, 255, 255, 0.4); | |
} | |
&-fixed { | |
top: @navbarHeight + 1; | |
margin: 0; | |
} | |
} | |
@media (max-width: 767px) { | |
div.subnav .nav > li + li > a { | |
border-top: 1px solid rgba(255, 255, 255, 0.4); | |
} | |
} | |
// NAV | |
// ----------------------------------------------------- | |
.nav-tabs li.open > .dropdown-toggle, | |
.nav-pills li.open > .dropdown-toggle { | |
background-color: #8AD5DC; | |
color: @linkColor; | |
border-color: transparent; | |
} | |
.nav-tabs, .nav-pills { | |
border-color: transparent; | |
li > a { | |
border-color: transparent; | |
.border-radius(0); | |
.box-shadow(0); | |
} | |
li.active > a, | |
li.active > a:hover { | |
color: @textColor; | |
} | |
li.active > a, | |
li > a:hover, | |
li.active > a:hover { | |
background-color: #8AD5DC; | |
border-color: transparent; | |
text-shadow: none; | |
} | |
} | |
.nav-tabs, .nav-tabs > li > a { | |
border-bottom: 1px solid rgba(255, 255, 255, 0.5); | |
} | |
.nav-tabs > li > a { | |
background-color: #3CB9C6; | |
} | |
.nav-tabs.nav-stacked { | |
li > a:first-child, | |
li > a:last-child { | |
.border-radius(0); | |
} | |
li > a, | |
li > a:hover, | |
li.active > a, | |
li.active > a:hover { | |
border-color: transparent; | |
} | |
} | |
.nav-list { | |
.nav-header { | |
text-shadow: none; | |
color: @textColor; | |
} | |
li > a { | |
text-shadow: none; | |
} | |
li.active > a, | |
li > a:hover, | |
li.active > a:hover { | |
background-color: #8AD5DC; | |
text-shadow: none; | |
} | |
.divider { | |
background-color: rgba(255, 255, 255, 0.3); | |
border-bottom: none; | |
} | |
} | |
.breadcrumb, .pager > li > a { | |
border-color: transparent; | |
.border-radius(0); | |
.box-shadow(none); | |
text-shadow: none; | |
} | |
.breadcrumb { | |
background-color: #3CB9C6; | |
background-image: none; | |
li { | |
text-shadow: none; | |
} | |
.active { | |
color: @white; | |
} | |
.divider { | |
color: @linkColor; | |
} | |
} | |
.pagination { | |
ul { | |
background-color: @paginationBackground; | |
background-image: none; | |
.border-radius(0); | |
} | |
ul > li > a:hover { | |
background-color: rgba(255, 255, 255, 0.4); | |
color: @linkColor; | |
} | |
ul > li:first-child > a, | |
ul > li:last-child > a { | |
.border-radius(0); | |
} | |
ul > .disabled > a, | |
ul > .disabled > a:hover, | |
ul > .disabled > span, | |
ul > .disabled > span:hover { | |
color: @textColor; | |
} | |
ul > .active > a, | |
ul > .active > a:hover, | |
ul > .active > span, | |
ul > .active > span:hover { | |
background-color: rgba(255, 255, 255, 0.4); | |
color: @textColor; | |
} | |
} | |
.pager { | |
li > a { | |
background-color: #3CB9C6; | |
&:hover { | |
background-color: #8AD5DC; | |
} | |
} | |
.disabled a, | |
.disabled a:hover { | |
background-color: #3CB9C6; | |
color: @white; | |
} | |
} | |
// BUTTONS | |
// ----------------------------------------------------- | |
.buttonBackgroundCustom(@color) { | |
background-color: @color; | |
border-color: transparent; | |
&:hover, &:active, &.active, &.disabled, &[disabled] { | |
background-color: darken(@color, 5%); | |
text-shadow: none; | |
} | |
&:active, &.active { | |
background-color: darken(@color, 15%); | |
.box-shadow(none); | |
} | |
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves | |
&:active, | |
&.active { | |
background-color: darken(@color, 15%) e("\9"); | |
} | |
} | |
.btn { | |
padding: 12px 16px; | |
.border-radius(0); | |
background-image: none; | |
text-shadow: none; | |
.box-shadow(none); | |
.buttonBackgroundCustom(@btnBackground) | |
} | |
.btn-large { | |
padding: @paddingLarge; | |
} | |
.btn-small { | |
padding: @paddingSmall; | |
} | |
.btn-mini { | |
padding: @paddingMini; | |
} | |
.btn-group .btn:first-child { | |
margin-left: 0; | |
.border-radius(0); | |
} | |
.btn-group .btn:last-child, | |
.btn-group .dropdown-toggle { | |
.border-radius(0); | |
} | |
.btn-group .dropdown-toggle, | |
.btn-group.open .dropdown-toggle, | |
.btn.open .dropdown-toggle { | |
.box-shadow(none); | |
} | |
.btn-primary { | |
.buttonBackgroundCustom(@btnPrimaryBackground); | |
} | |
.btn-info { | |
.buttonBackgroundCustom(@btnInfoBackground); | |
} | |
.btn-success { | |
.buttonBackgroundCustom(@btnSuccessBackground); | |
} | |
.btn-warning { | |
.buttonBackgroundCustom(@btnWarningBackground); | |
} | |
.btn-danger { | |
.buttonBackgroundCustom(@btnDangerBackground); | |
} | |
.btn-inverse { | |
.buttonBackgroundCustom(@btnInverseBackground); | |
} | |
.btn-link { | |
.buttonBackgroundCustom(@btnPrimaryBackground); | |
} | |
.btn-small [class^="icon-"] { | |
margin-top: 1px; | |
} | |
.add-on [class^="icon-"] { | |
margin-left: 5px; | |
} | |
// TABLES | |
// ----------------------------------------------------- | |
.table th, .table td, | |
.table tbody + tbody { | |
border-top: 0px solid transparent; | |
} | |
.table-bordered { | |
.border-radius(0); | |
} | |
.table tbody { | |
tr.success td { | |
background-color: @green; | |
} | |
tr.error td { | |
background-color: @red; | |
} | |
tr.info td { | |
background-color: @blue; | |
} | |
} | |
// FORMS | |
// ----------------------------------------------------- | |
legend { | |
font-family: @headingsFontFamily; | |
} | |
legend, label, .help-block, .input-file { | |
border: 0px solid transparent; | |
color: inherit; | |
} | |
input, textarea, .uneditable-input { | |
border: 0px solid transparent; | |
padding: 10px; | |
} | |
.uneditable-input { | |
padding-bottom: 30px; | |
} | |
select { | |
border: 0px solid transparent; | |
} | |
button { | |
margin-left: 12px; | |
} | |
input, textarea, .search-query, .uneditable-input, | |
.input-append input, .input-append .uneditable-input, | |
.input-prepend input, .input-prepend .uneditable-input { | |
border-color: transparent; | |
.box-shadow(none); | |
} | |
.form-actions { | |
border-top: 0px solid transparent; | |
} | |
.control-group.warning { | |
.formFieldState(@yellow, lighten(@yellow, 30%), @warningBackground); | |
} | |
.control-group.error { | |
.formFieldState(@orange, lighten(@orange, 30%), @errorBackground); | |
} | |
.control-group.success { | |
.formFieldState(@green, lighten(@green, 20%), @successBackground); | |
} | |
.control-group.info { | |
.formFieldState(@purple, lighten(@purple, 20%), @infoBackground); | |
} | |
.control-group.warning { | |
.control-label, | |
.help-block, | |
.help-inline { | |
color: lighten(@yellow, 30%); | |
} | |
} | |
.control-group.error { | |
.control-label, | |
.help-block, | |
.help-inline { | |
color: lighten(@orange, 30%); | |
} | |
} | |
.control-group.success { | |
.control-label, | |
.help-block, | |
.help-inline { | |
color: lighten(@green, 20%); | |
} | |
} | |
.control-group.info { | |
.control-label, | |
.help-block, | |
.help-inline { | |
color: lighten(@purple, 20%); | |
} | |
} | |
.input-prepend .add-on, | |
.input-append .add-on { | |
height: 20px; | |
padding-top: 4px; | |
background-color: @grayLighter; | |
border-color: transparent; | |
.border-radius(0); | |
color: @gray; | |
text-shadow: none; | |
} | |
.input-append .btn, | |
.input-prepend .btn { | |
padding: 4px 10px; | |
} | |
// ALERTS, LABELS, BADGES | |
// ----------------------------------------------------- | |
.alert { | |
border-color: transparent; | |
.border-radius(0); | |
.box-shadow(none); | |
text-shadow: none; | |
h1, h2, h3, h4, h5, h6 { | |
color: @textColor; | |
} | |
&-heading { | |
color: @textColor; | |
} | |
} | |
.label, | |
.badge { | |
background-color: @blue; | |
&-success { | |
background-color: @green; | |
} | |
&-important { | |
background-color: @red; | |
} | |
&-warning { | |
background-color: @orange; | |
} | |
&-info { | |
background-color: @purple; | |
} | |
&-inverse { | |
background-color: @btnInverseBackground; | |
} | |
} | |
// MISCELLANEOUS | |
// ----------------------------------------------------- | |
.progress, .well, pre, code { | |
border-color: transparent; | |
.border-radius(0); | |
.box-shadow(none); | |
text-shadow: none; | |
} | |
.well { | |
background-image: none; | |
} | |
.hero-unit { | |
.border-radius(0); | |
} | |
.thumbnail { | |
border: 0 solid transparent; | |
.border-radius(0); | |
.box-shadow(none); | |
} | |
.progress { | |
background-image: none; | |
background-color: #27666D; | |
.bar { | |
.box-shadow(none); | |
background-image: none; | |
background-color: @yellow; | |
&-success { | |
background-color: @green; | |
} | |
&-warning { | |
background-color: @orange; | |
} | |
&-error { | |
background-color: @red; | |
} | |
} | |
} | |
.progress-danger .bar { | |
background-image: none; | |
background-color: #AD1D28; | |
} | |
.progress-danger.progress-striped .bar { | |
#gradient > .striped(#AD1D28); | |
} | |
.progress-success .bar { | |
background-image: none; | |
background-color: @green; | |
} | |
.progress-success.progress-striped .bar { | |
#gradient > .striped(@green); | |
} | |
.progress-info .bar { | |
background-image: none; | |
background-color: @blue; | |
} | |
.progress-info.progress-striped .bar { | |
#gradient > .striped(@blue); | |
} | |
.modal { | |
.border-radius(0); | |
&-header { | |
background-color: @navbarBackground; | |
color: @white; | |
} | |
&-body { | |
color: @grayDark; | |
h1, h2, h3, h4, h5, h6, | |
legend { | |
color: @red; | |
} | |
label, | |
.input-file { | |
color: @grayDark; | |
} | |
.help-block, | |
.help-inline { | |
color: @grayLight; | |
} | |
textarea, | |
input, | |
.uneditable-input { | |
border: 1px solid @grayLight; | |
} | |
} | |
} | |
.popover { | |
padding: 0; | |
.border-radius(0); | |
color: @grayDark; | |
.popover-title { | |
.border-radius(0); | |
color: @white; | |
} | |
} | |
// MEDIA QUERIES | |
// ----------------------------------------------------- | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment