| // 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 |
| // ----------------------------------------------------- |