blob: bdde85daccdea8a27e31897c233d7a0da654d07b [file] [log] [blame]
// Cosmo 2.3.2
// Bootswatch
// -----------------------------------------------------
// TYPOGRAPHY
// -----------------------------------------------------
@import url(https://fonts.googleapis.com/css?family=Roboto);
body {
font-weight: 300;
}
h1 {
font-size: 50px;
}
h2, h3 {
font-size: 26px;
}
h4 {
font-size: 14px;
}
h5, h6 {
font-size: 11px;
}
blockquote {
padding: 10px 15px;
background-color: @grayLighter;
border-left-color: @gray;
&.pull-right {
padding: 10px 15px;
border-right-color: @gray;
}
small {
color: @gray;
}
}
.muted {
color: @gray;
}
.text-warning { color: @orange; }
a.text-warning:hover { color: darken(@orange, 10%); }
.text-error { color: @red; }
a.text-error:hover { color: darken(@red, 10%); }
.text-info { color: @purple; }
a.text-info:hover { color: darken(@purple, 10%); }
.text-success { color: @green; }
a.text-success:hover { color: darken(@green, 10%); }
// SCAFFOLDING
// -----------------------------------------------------
// NAVBAR
// -----------------------------------------------------
.navbar {
.navbar-inner {
background-image: none;
.box-shadow(none);
.border-radius(0);
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
.box-shadow(none);
background: none;
}
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle {
color: @white;
&:hover {
color: @grayLighter;
}
}
.navbar-search .search-query {
line-height: normal;
}
&-inverse {
.brand,
.nav > li > a {
text-shadow: none;
}
.navbar-search .search-query {
color: @grayDarker;
}
}
}
div.subnav {
margin: 0 1px;
background: @grayLight none;
.box-shadow(none);
border: none;
.border-radius(0);
.nav {
background-color: transparent;
}
.nav > li > a {
border-color: transparent;
}
.nav > .active > a,
.nav > .active > a:hover {
border-color: transparent;
background-color: @black;
color: @white;
.box-shadow(none);
}
&-fixed {
top: @navbarHeight + 1;
margin: 0;
}
}
// NAV
// -----------------------------------------------------
.nav {
.open .dropdown-toggle,
& > li.dropdown.open.active > a:hover {
color: @blue;
}
}
.nav-tabs {
& > li > a {
.border-radius(0);
}
&.nav-stacked {
& > li > a:hover {
color: @white;
}
& > .active > a,
& > .active > a:hover {
color: @gray;
}
& > li:first-child > a,
& > li:last-child > a {
.border-radius(0);
}
}
}
.tabs-below,
.tabs-left,
.tabs-right {
& > .nav-tabs > li > a{
.border-radius(0);
}
}
.nav-pills {
& > li > a {
.border-radius(0);
color: @textColor;
&:hover {
color: @textColor;
}
}
& > .disabled > a,
& > .disabled > a:hover {
color: @grayDark;
}
}
.nav-list {
& > li > a {
color: @grayDarker;
&:hover {
color: @white;
text-shadow: none;
}
}
.nav-header {
color: @grayDarker;
}
.divider {
background-color: @gray;
border-bottom: none;
}
}
.pagination {
ul {
.box-shadow(none);
& > li > a,
& > li > span {
margin-right: 6px;
color: @grayDarker;
&:hover {
background-color: @grayDarker;
color: @white;
}
}
& > li:last-child > a,
& > li:last-child > span {
margin-right: 0;
}
& > .active > a,
& > .active > span {
color: @white;
}
& > .disabled > span,
& > .disabled > a,
& > .disabled > a:hover {
color: @grayDark;
}
}
}
.pager {
li > a,
li > span {
background-color: @grayLight;
border: none;
.border-radius(0);
color: @grayDarker;
&:hover {
background-color: @grayDarker;
color: @white;
}
}
.disabled > a,
.disabled > a:hover,
.disabled > span {
background-color: @grayLighter;
color: @grayDark;
}
}
.breadcrumb {
background-color: @grayLight;
li {
text-shadow: none;
}
.divider,
.active {
color: @grayDarker;
text-shadow: none;
}
}
// BUTTONS
// -----------------------------------------------------
.btn {
padding: 5px 12px;
background-image: none;
.box-shadow(none);
border: none;
.border-radius(0);
text-shadow: none;
&.disabled {
box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05);
}
}
.btn-large {
padding: 22px 30px;
}
.btn-small {
padding: 2px 10px;
}
.btn-mini {
padding: 2px 6px;
}
.btn-group {
& > .btn:first-child,
& > .btn:last-child,
& > .dropdown-toggle {
.border-radius(0);
}
& > .btn + .dropdown-toggle {
.box-shadow(none);
}
}
// TABLES
// -----------------------------------------------------
.table {
tbody tr.success td,
tbody tr.error td,
tbody tr.info td,
tbody tr.warning td {
color: @white;
}
&-bordered {
.border-radius(0);
thead:first-child tr:first-child th:first-child,
tbody:first-child tr:first-child td:first-child {
.border-radius(0);
}
thead:last-child tr:last-child th:first-child,
tbody:last-child tr:last-child td:first-child,
tfoot:last-child tr:last-child td:first-child {
.border-radius(0);
}
}
}
// FORMS
// -----------------------------------------------------
select, textarea, input[type="text"], input[type="password"], input[type="datetime"],
input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
input[type="week"], input[type="number"], input[type="email"], input[type="url"],
input[type="search"], input[type="tel"], input[type="color"] {
color: @grayDarker;
}
.control-group {
&.warning {
.control-label,
.help-block,
.help-inline {
color: @orange;
}
input,
select,
textarea {
border-color: @orange;
color: @grayDarker;
}
}
&.error {
.control-label,
.help-block,
.help-inline {
color: @red;
}
input,
select,
textarea {
border-color: @red;
color: @grayDarker;
}
}
&.info {
.control-label,
.help-block,
.help-inline {
color: @purple;
}
input,
select,
textarea {
border-color: @purple;
color: @grayDarker;
}
}
&.success {
.control-label,
.help-block,
.help-inline {
color: @green;
}
input,
select,
textarea {
border-color: @green;
color: @grayDarker;
}
}
}
legend {
border-bottom: none;
color: @grayDarker;
}
.form-actions {
border-top: none;
background-color: @grayLighter;
}
// DROPDOWNS
// -----------------------------------------------------
.dropdown-menu {
.border-radius(0);
}
// ALERTS, LABELS, BADGES
// -----------------------------------------------------
.alert {
.border-radius(0);
text-shadow: none;
&-heading, h1, h2, h3, h4, h5, h6 {
color: @white;
}
}
.label {
min-width: 80px;
min-height: 80px;
.border-radius(0);
font-weight: 300;
text-shadow: none;
&-success {
background-color: @green;
}
&-important {
background-color: @red;
}
&-info {
background-color: @purple;
}
&-inverse {
background-color: @black;
}
}
.badge {
.border-radius(0);
font-weight: 300;
text-shadow: none;
&-success {
background-color: @green;
}
&-important {
background-color: @red;
}
&-info {
background-color: @purple;
}
&-inverse {
background-color: @black;
}
}
// MISC
// -----------------------------------------------------
.hero-unit {
border: none;
.border-radius(0);
.box-shadow(none);
}
.well {
border: none;
.border-radius(0);
.box-shadow(none);
}
[class^="icon-"], [class*=" icon-"] {
margin: 0 2px;
vertical-align: -2px;
}
a.thumbnail {
background-color: @grayLight;
&:hover {
background-color: @gray;
border-color: transparent;
}
}
.progress {
height: 6px;
.border-radius(0);
.box-shadow(none);
background-color: @grayLighter;
background-image: none;
.bar {
background-color: @blue;
background-image: none;
}
&-info {
background-color: @purple;
}
&-success {
background-color: @green;
}
&-warning {
background-color: @orange;
}
&-danger {
background-color: @red;
}
}
.modal {
.border-radius(0);
&-header {
border-bottom: none;
}
&-footer {
border-top: none;
background-color: transparent;
}
}
.popover {
.border-radius(0);
color: @white;
&-title {
border-bottom: none;
color: @white;
}
}
// MEDIA QUERIES
// -----------------------------------------------------