-// Bootswatch.less
-// Swatch: Superhero
+// Superhero 2.3.2
+// Bootswatch
// -----------------------------------------------------
+
// TYPOGRAPHY
// --------------------------------------------------
-@import url(http://fonts.googleapis.com/css?family=Oswald);
-@import url(http://fonts.googleapis.com/css?family=Noticia+Text);
+@import url('//fonts.googleapis.com/css?family=Oswald|Noticia+Text');
-h1, h2, h3, h4, h5, h6, legend, .navbar .brand,
-.navbar .nav > li > a,
-h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
- font-family: 'Oswald', sans-serif;
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, h6 {
+ font-family: @headingsFontFamily;
color: @orange;
text-shadow: -1px 1px 0 darken(@orange, 30%);
}
-h1, h2, legend, .navbar .brand,
-.navbar .nav > li > a {
+h1, h2 {
text-shadow: -2px 2px 0 darken(@orange, 30%);
}
line-height: 55px;
}
-// SCAFFOLDING
-// --------------------------------------------------
-
code, pre {
background-color: lighten(@blue, 8%);
border: none;
color: @textColor;
}
-.prettyprint {
- border: none;
- text-decoration: none;
+// SCAFFOLDING
+// --------------------------------------------------
+
+.page-header {
+ border-bottom: none;
}
blockquote {
// NAVBAR
// --------------------------------------------------
-.navbar .nav > li.active > a {
- color: @orange;
-}
+.navbar {
-.navbar .brand:hover,
-.navbar .nav > li > a:hover,
-.navbar .nav > li.active > a:hover,
-.navbar .nav > li.dropdown.open > a,
-.navbar .nav > li.dropdown.open > a:hover {
- position: relative;
- top: 1px;
- left: -1px;
- color: @orange;
- text-shadow: -1px 1px 0 darken(@orange, 30%);
-}
+ .navbar-inner {
+ .box-shadow(none);
+ background-image: none;
+ }
-body {
- background-color: @blueDark;
-}
+ .brand {
+ padding: 25px 20px 15px;
+ font-family: @headingsFontFamily;
+ font-size: 30px;
+ text-shadow: -2px 2px 0 darken(@orange, 30%);
+ }
+ .nav > li > a {
+ padding: 23px 20px 13px;
+ line-height: 30px;
+ font-family: @headingsFontFamily;
+ font-size: 22px;
+ text-shadow: -2px 2px 0 darken(@orange, 30%);
+ }
-.navbar .navbar-inner {
- .box-shadow(none);
- background-image: none;
-}
+ .brand:hover,
+ .nav > li > a:hover,
+ .nav > li.active > a:hover,
+ .nav > li.dropdown.open > a,
+ .nav > li.dropdown.open > a:hover {
+ position: relative;
+ top: 1px;
+ left: -1px;
+ color: @orange;
+ text-shadow: -1px 1px 0 darken(@orange, 30%);
+ }
-.navbar .brand {
- padding: 25px 20px 15px;
- font-size: 30px;
-}
+ .nav > .active > a,
+ .nav > .active > a:hover,
+ .nav > .active > a:focus {
+ .box-shadow(none);
+ }
-.navbar .nav > li > a {
- padding: 27px 20px 13px;
- line-height: 30px;
- font-size: 22px;
-}
+ .navbar-text {
+ padding: 23px 20px 13px;
+ line-height: 30px;
+ font-family: @headingsFontFamily;
+ font-size: 22px;
+ text-shadow: -2px 2px 0 @gray;
+ }
-.navbar-search {
- padding-top: 20px;
-}
+ .navbar-search {
+ margin-top: 24px;
+ }
-.navbar-search .search-query {
- font-family: @baseFontFamily;
- font-size: @baseFontSize;
- line-height: @baseLineHeight;
- color: @textColor;
- background-color: @blue;
- .box-shadow(none);
- border: none;
-}
+ .navbar-search .search-query {
+ font-family: @baseFontFamily;
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
+ .box-shadow(none);
+ }
+ &.navbar-inverse .navbar-search .search-query {
+ color: @blueDark;
+ }
-.navbar .divider-vertical {
- height: 70px;
-}
+ .divider-vertical {
+ height: 70px;
+ }
-.dropdown .caret {
- margin-top: 14px;
- opacity: 1;
- border-left: 6px solid transparent;
- border-right: 6px solid transparent;
- border-top: 6px solid lighten(@blue, 10%);
+ .nav .dropdown-toggle .caret,
+ .nav .open.dropdown .caret {
+ margin-top: 14px;
+ border-top-color: @textColor;
+ }
+
+ .dropdown-menu::before {
+ border: none;
+ }
+
+ .dropdown-menu::after {
+ left: 20px;
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-bottom: 7px solid lighten(@blue, 10%);
+ }
+
+ [class^="icon-"], [class*=" icon-"] {
+ vertical-align: 20%;
+ }
+
+ .btn-navbar {
+ background-color: @blue;
+ border-color: transparent;
+ }
}
-.navbar .nav .dropdown-toggle .caret,
-.navbar .nav .open.dropdown .caret {
- border-top-color: @textColor;
+@media (max-width: @navbarCollapseWidth) {
+
+ .navbar .nav-collapse {
+
+ .border-radius(4px);
+
+ .nav li > a {
+ color: @orange;
+
+ &:hover {
+ background-color: lighten(@blue, 10%) !important;
+ background-image: none;
+ }
+ }
+
+ .navbar-form,
+ .navbar-search {
+ border-top: none;
+ border-bottom: none;
+ .box-shadow(none);
+ }
+
+ .nav-header {
+ color: @textColor;
+ }
+ }
}
-.navbar .dropdown-menu::before {
+div.subnav {
+ margin: 0 1px;
+ background: @blue none;
border: none;
-}
-.navbar .dropdown-menu::after {
- left: 20px;
- border-left: 7px solid transparent;
- border-right: 7px solid transparent;
- border-bottom: 7px solid lighten(@blue, 10%);
-}
+ .nav > li > a,
+ .nav > li.active > a {
+ border-color: transparent;
+ color: @textColor;
+ }
+
+ .nav > li > a:hover,
+ .nav > li.active > a:hover {
+ background-color: lighten(@blue, 10%);
+ border-color: transparent;
+ }
+
+ .nav > li.active > a,
+ .nav > li.active > a:hover {
+ background: @orange none;
+ .box-shadow(none);
+ color: @white;
+ }
+
+ &.subnav-fixed {
+ top: @navbarHeight + 1;
+ margin: 0;
+ .box-shadow(none);
-.navbar [class^="icon-"], .navbar [class*=" icon-"] {
- vertical-align: 20%;
+ .nav > li > a,
+ .nav > li > a:hover,
+ .nav > li.active > a,
+ .nav > li.active > a:hover {
+ border-color: transparent;
+ .border-radius(0);
+ }
+
+ .nav > li > a:hover,
+ .nav > li.active > a:hover {
+ color: @white;
+ }
+ }
+
+ .nav > .active > a .caret,
+ .nav > .active > a:hover .caret {
+ border-top-color: @textColor;
+ }
}
-.navbar .btn-navbar {
- background-color: @blue;
- border-color: transparent;
+// NAVIGATION
+// --------------------------------------------------
+
+.nav .nav-header {
+ color: @textColor;
+ text-shadow: none;
}
-.navbar .nav-collapse.collapse {
- background-color: @blue;
- .border-radius(4px);
-
- li > a {
+.nav-list {
+
+ padding: 0 15px;
+
+ & > li > a,
+ & > .nav-header {
+ text-shadow: none;
color: @textColor;
}
+
+ .active > a,
+ .active > a:hover {
+ text-shadow: none;
+ color: @white;
+ }
li > a:hover {
- color: @textColor;
background-color: lighten(@blue, 10%);
}
+
}
-.navbar .nav-collapse.collapse > .nav > li > a {
- color: @orange;
+.nav-tabs,
+.nav-tabs.nav-stacked > li > a {
+ border-color: transparent;
}
-.subnav.subnav-fixed {
- top: 70px;
+.nav-tabs {
+
+ & > li > a {
+ background-color: @blue;
+ color: @textColor;
+ }
+
+ li.active > a,
+ li.active > a:hover,
+ &.nav-stacked > li.active > a:hover {
+ color: @white;
+ background-color: @orange;
+ border-color: transparent;
+ }
+
+ li > a:hover,
+ &.nav-stacked > li > a:hover {
+ background-color: lighten(@blue, 10%);
+ border-color: transparent;
+ }
+
+ li.disabled > a:hover {
+ background-color: @blue;
+ }
}
-div.subnav {
- background-color: @blue;
- background-image: none;
- border: none;
-
- .nav > li > a,
- .nav > li.active > a {
- border-left: none;
- border-right: none;
+.nav-pills {
+
+ & > li > a {
color: @textColor;
+ background-color: @blue;
}
-
- .nav > li > a:hover,
- .nav > li.active > a:hover {
+
+ & > li > a:hover {
background-color: lighten(@blue, 10%);
+ border-color: transparent;
}
+
+ & > .disabled > a:hover {
+ background-color: @blue;
+ }
+}
+
+.nav-tabs .open .dropdown-toggle,
+.nav-pills .open .dropdown-toggle,
+.nav > .open.active > a:hover {
+ background-color: lighten(@blue, 10%);
+ border-color: transparent;
}
-div.subnav .nav > li:first-child > a,
-div.subnav .nav > li:first-child > a:hover,
-div.subnav .nav > li.active:first-child > a,
-div.subnav .nav > li.active:first-child > a:hover {
- .border-radius(4px 0 0 4px);
+.nav-pills .dropdown .caret,
+.nav-pills .dropdown:hover .caret {
+ border-top-color: @textColor;
}
-div.subnav .nav > li.active > a,
-div.subnav .nav > li.active > a:hover {
- color: @white;
+.dropdown.open .dropdown-menu > li > a:hover,
+.dropdown.open .dropdown-menu > li.active > a:hover {
background-color: @orange;
- background-image: none;
- .box-shadow(none);
+ color: @white;
}
-div.subnav.subnav-fixed {
+.tabbable .nav-tabs,
+.tabbable .nav-tabs > li.active > a,
+.tabbable .nav-tabs > li > a:hover,
+.tabbable .nav-tabs > li.active > a:hover {
+ border-color: transparent;
+}
+
+.breadcrumb {
+ background-color: @blue;
+ background-image: none;
+ border: none;
.box-shadow(none);
-
- .nav > li > a,
- .nav > li.active > a,
- .nav > li > a:hover,
- .nav > li.active > a:hover {
- border-color: transparent;
- padding-left: 12px;
- padding-right: 12px;
- .border-radius(0);
+
+ li {
+ text-shadow: none;
}
-
- .nav > li > a:hover,
- .nav > li.active > a:hover {
- color: @white;
+ .divider {
+ color: @textColor;
}
}
-.dropdown-menu {
- background-color: lighten(@blue, 10%);
- border: none;
-
- a {
+.pagination {
+
+ ul {
+ background-image: none;
+ border-color: transparent;
+ }
+
+ ul > li > a,
+ ul > li > span {
+ border: none;
color: @textColor;
}
-
- .divider {
- border-bottom: none;
- background-color: @blue;
+
+ ul > li > a:hover {
+ background: lighten(@blue, 10%);
}
-}
-// TABLES
-// -----------------------------------------------------
+ ul > .active > a,
+ ul > .active > a:hover,
+ ul > .active > span,
+ ul > .active > span:hover {
+ background-color: @orange;
+ color: @white;
+ }
-.table {
- background-color: darken(@blue, 3%);
+ ul > .disabled > a,
+ ul > .disabled > a:hover,
+ ul > .disabled > span,
+ ul > .disabled > span:hover {
+ background: darken(@blue, 5%);
+ }
}
-.table th, .table td, .table tbody + tbody {
- border-top: none;
-}
+.pager {
-.table-bordered {
- border: none;
- th + th,
- td + td,
- th + td,
- td + th {
- border-left: none;
- }
- // Prevent a double border
- thead:first-child tr:first-child th,
- tbody:first-child tr:first-child th,
- tbody:first-child tr:first-child td {
- border-top: none;
- }
-}
+ li > a,
+ li > span {
-.table-striped {
- tbody {
- tr:nth-child(odd) td,
- tr:nth-child(odd) th {
- background-color: @blue;
- }
- }
-}
+ background-color: @blue;
+ border: none;
+ color: @textColor;
-.table {
- tbody tr:hover td,
- tbody tr:hover th {
- background-color: lighten(@blue, 5%);
- }
+ &:hover {
+ background: lighten(@blue, 10%);
+ }
+ }
+
+ .disabled a,
+ .disabled a:hover {
+ background-color: @blue;
+ }
}
// BUTTONS
.btn:hover {
text-shadow: none;
background-image: none;
- .box-shadow(-2px 2px 0 darken(@white, 80%));
+ .box-shadow(-2px 2px 0 rgba(0, 0, 0, 0.2));
border: none;
}
.btn-warning {
background-color: @yellow;
-
- &:hover {
- background-color: darken(@yellow, 10%);
- }
}
.btn-primary, .btn-primary:hover {
- .box-shadow(-2px 2px 0 darken(@primaryButtonBackground, 30%));
+ .box-shadow(-2px 2px 0 darken(@btnPrimaryBackground, 30%));
}
.btn-warning, .btn-warning:hover {
.box-shadow(-2px 2px 0 darken(#454545, 20%));
}
+.btn.dropdown-toggle, .btn.dropdown-toggle:hover {
+ .box-shadow(0 2px 0 darken(@white, 80%));
+}
.btn-primary.dropdown-toggle, .btn-primary.dropdown-toggle:hover {
- .box-shadow(0 2px 0 darken(@primaryButtonBackground, 30%));
+ .box-shadow(0 2px 0 darken(@btnPrimaryBackground, 30%));
}
.btn-warning.dropdown-toggle, .btn-warning.dropdown-toggle:hover {
}
.btn-success.dropdown-toggle, .btn-success.dropdown-toggle:hover {
- .box-shadow(0 2px 0 darken(#62c462, 40%));
+ .box-shadow(0 2px 0 darken(#62c462, 30%));
}
.btn-info.dropdown-toggle, .btn-info.dropdown-toggle:hover {
position: relative;
top: 1px;
left: -1px;
- .box-shadow(-1px 1px 0 darken(@white, 70%))
+ .box-shadow(-1px 1px 0 darken(@white, 80%))
}
.btn.disabled,
vertical-align: -13%;
}
-// NAVIGATION
-// --------------------------------------------------
-
-.nav-list {
- padding: 0 15px;
-}
-
-.nav-list > li > a, .nav-list .nav-header {
- text-shadow: none;
- color: @textColor;
-}
-
-.nav-list .active > a, .nav-list .active > a:hover {
- text-shadow: none;
- color: @white;
-}
-
-.nav-list li > a:hover {
- background-color: lighten(@blue, 10%);
-}
-
-.nav-tabs, .nav-tabs.nav-stacked > li > a {
- border-color: transparent;
-}
-
-.nav-tabs {
- > li > a {
- background-color: @blue;
- color: @textColor;
- }
-
- li.active > a,
- li.active > a:hover,
- &.nav-stacked > li.active > a:hover {
- color: @white;
- background-color: @orange;
- border-color: transparent;
- }
-
- li > a:hover,
- &.nav-stacked > li > a:hover {
- background-color: lighten(@blue, 10%);
- border-color: transparent;
- }
-}
-
-.nav-pills > li > a {
- color: @textColor;
- background-color: @blue;
-}
-
-.nav-pills > li:hover > a {
- background-color: lighten(@blue, 10%);
- border-color: transparent;
-}
-
-.nav-tabs .open .dropdown-toggle,
-.nav-pills .open .dropdown-toggle,
-.nav > .open.active > a:hover {
- background-color: lighten(@blue, 10%);
- border-color: transparent;
-}
-
-.dropdown.open .dropdown-menu > li > a:hover,
-.dropdown.open .dropdown-menu > li.active > a:hover {
- background-color: @orange;
- color: @white;
-}
-
-.tabbable .nav-tabs,
-.tabbable .nav-tabs > li.active > a,
-.tabbable .nav-tabs > li > a:hover,
-.tabbable .nav-tabs > li.active > a:hover {
- border-color: transparent;
-}
-
-.breadcrumb {
- background-color: @blue;
- background-image: none;
- border: none;
- .box-shadow(none);
-
- li {
- text-shadow: none;
- }
-
- .divider {
- color: @textColor;
- }
-}
-
-.pagination ul {
-
- background-color: @blue;
- background-image: none;
- border-color: transparent;
-
- li > a {
- border: none;
- color: @textColor;
- }
-
- li.active > a,
- li.active > a:hover {
- background: @orange;
- color: @white;
- }
-
- li > a:hover {
- background: lighten(@blue, 10%);
- }
-
- li.disabled > a,
- li.disabled > a:hover {
- background: darken(@blue, 5%);
- }
-}
+// TABLES
+// -----------------------------------------------------
-.pager a {
- color: @textColor;
- background-color: @blue;
- border-color: transparent;
-
- &:hover {
- background: lighten(@blue, 10%);
- }
+.table,
+.table-striped tbody > tr > td:first-child,
+.table-striped tbody > tr > td:last-child, {
+ .border-radius(4px);
}
// FORMS
legend {
border-bottom: none;
+ font-family: @headingsFontFamily;
+ color: @orange;
+ text-shadow: -2px 2px 0 darken(@orange, 30%);
}
label {
}
.form-actions {
- background-color: transparent;
border-top: none;
}
-// Warning
.control-group.warning {
.formFieldState(lighten(@warningText, 10%), lighten(@warningText, 10%), @warningBackground);
}
-// Error
+
.control-group.error {
.formFieldState(lighten(@errorText, 10%), lighten(@errorText, 10%), @errorBackground);
}
-// Success
+
.control-group.success {
.formFieldState(lighten(@successText, 10%), lighten(@successText, 10%), @successBackground);
}
-// MISCELLANEOUS
-// --------------------------------------------------
-
-hr, .page-header {
- border-bottom: none;
-}
-
-footer.footer {
- border-top: 1px solid darken(@blueDark, 5%);
+.input-append .add-on,
+.input-prepend .add-on,
+.input-append .btn,
+.input-prepend .btn {
+ color: @bodyBackground;
}
-.well {
- background-color: @blue;
- border: none;
- .box-shadow(none);
-}
+// DROPDOWNS
+// --------------------------------------------------
-.progress {
- background-color: darken(@blueDark, 5%);
- background-image: none;
- .box-shadow(none);
-
- .bar {
- .box-shadow(none);
- }
+.dropdown .caret {
+ margin-top: 14px;
+ opacity: 1;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-top: 6px solid lighten(@blue, 10%);
}
-.thumbnail {
- border: none;
- background: @blue;
- .border-radius(3px);
-}
+// ALERTS, LABELS, BADGES
+// --------------------------------------------------
-.label {
+.label {
background-color: @blue;
color: @textColor;
}
.alert {
background-color: @blue;
- border: none;
+ border: none;
color: @textColor;
text-shadow: none;
-
+
a {
color: lighten(@orange, 12%);
}
background-color: @infoText;
}
+// MISC
+// --------------------------------------------------
+
+.well, .hero-unit {
+ border: none;
+ .box-shadow(none);
+}
+
+.hero-unit h1 {
+ color: @orange;
+ line-height: 2em;
+}
+
+.progress {
+ background-color: darken(@blueDark, 5%);
+ background-image: none;
+ .box-shadow(none);
+
+ .bar {
+ .box-shadow(none);
+ }
+}
+
+.thumbnail {
+ border: none;
+ background: @blue;
+ .border-radius(3px);
+}
+
+.modal {
+ background-color: transparent;
+
+ &-header,
+ &-body,
+ &-footer {
+ .box-shadow(none);
+ background-color: @bodyBackground;
+ border: none;
+ }
+
+ &-header {
+ .border-radius(4px 4px 0 0);
+ }
+
+ &-footer {
+ .border-radius(0 0 4px 4px);
+ }
+}
+
+// MEDIA QUERIES
+// --------------------------------------------------
+
+@media (max-width: 768px) {
+
+ div.subnav {
+
+ .nav > li {
+
+ &:first-child > a,
+ &:first-child > a:hover,
+ &.active:first-child > a,
+ &.active:first-child > a:hover {
+ .border-radius(4px 4px 0 0);
+ }
+
+ &:last-child > a,
+ &:last-child > a:hover,
+ &.active:last-child > a,
+ &.active:last-child > a:hover {
+ .border-radius(0 0 4px 4px);
+ }
+ }
+ }
+}
projects / bootswatch / blobdiff