git.roojs.org Git - bootswatch/blob - cerulean/bootswatch.less

   1 // Bootswatch.less
   2 // Swatch: Cerulean
   3 // -----------------------------------------------------
   4
   5 // TYPOGRAPHY
   6 // -----------------------------------------------------
   7
   8 @import url(http://fonts.googleapis.com/css?family=Telex);
   9
  10 h1,h2,h3,h4,h5,h6, .navbar, .subnav {
  11         font-family: 'Telex', sans-serif;
  12 }
  13
  14 h1,h2,h3,h4,h5,h6 {
  15         color: #317EAC
  16 }
  17
  18 // NAVBAR
  19 // -----------------------------------------------------
  20
  21 .navbar-inner {
  22   #gradient > .vertical-three-colors(@navbarBackground, @navbarBackground, 90%, @navbarBackgroundHighlight);
  23 }
  24
  25 .navbar .nav .active > a,
  26 .navbar .nav .active > a:hover {
  27   background-color: @navbarBackground;
  28   background-color: rgba(0,0,0,.2);
  29 }
  30
  31 .navbar .search-query {
  32         border: 1px solid darken(@linkColor, 10%);
  33 }
  34
  35 // responsive menu colors
  36
  37 .navbar .nav-collapse > .nav > li .dropdown-menu a {
  38         color: @linkColor;
  39
  40         &:hover {
  41                 color: @white;
  42         }
  43 }
  44
  45 .navbar .nav-collapse.collapse > .nav li > a {
  46         color: @white;
  47
  48         &:hover {
  49                 background-color: #2B7CAC;
  50         }
  51 }
  52
  53 .btn-navbar:hover {
  54     background-color: darken(@white, 20%);
  55     background-position: 0 0;
  56 }
  57
  58 // FORMS
  59 // -----------------------------------------------------
  60
  61 // Warning
  62 .control-group.warning {
  63   .formFieldState(@orange, @orange, @warningBackground);
  64 }
  65 // Error
  66 .control-group.error {
  67   .formFieldState(@red, @red, @errorBackground);
  68 }
  69 // Success
  70 .control-group.success {
  71   .formFieldState(darken(@green, 10%), darken(@green, 10%), @successBackground);
  72 }
  73
  74 // BUTTONS
  75 // -----------------------------------------------------
  76
  77 .btn {
  78   #gradient > .vertical-three-colors(@white, @white, 5%, darken(@white, 0%));
  79   @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  80   .box-shadow(@shadow);
  81 }
  82
  83 .btn-warning {
  84   .caret {
  85     border-top-color: @white;
  86     .opacity(75);
  87   }
  88 }
  89
  90 // Set the backgrounds
  91 // -------------------------
  92 .btn-primary {
  93   .buttonBackground(lighten(@linkColor, 5%), @linkColor);
  94 }
  95 // Warning appears are orange
  96 .btn-warning {
  97   .buttonBackground(lighten(@orange, 5%), @orange);
  98 }
  99 // Danger and error appear as red
 100 .btn-danger {
 101   .buttonBackground(lighten(@red, 5%), @red);
 102 }
 103 // Success appears as green
 104 .btn-success {
 105   .buttonBackground(lighten(@green, 5%), @green);
 106 }
 107 // Info appears as a neutral blue
 108 .btn-info {
 109   .buttonBackground(lighten(@purple, 5%), @purple);
 110 }
 111
 112 // ICONS
 113 // -----------------------------------------------------
 114
 115 // Make icons gray
 116 i[class^="icon-"]{
 117         opacity: 0.8;
 118 }