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

   1 // Bootswatch.less
   2 // Swatch: Cerulean
   3 // Version: 2.0.3
   4 // -----------------------------------------------------
   5
   6 // TYPOGRAPHY
   7 // -----------------------------------------------------
   8
   9 @import url(https://fonts.googleapis.com/css?family=Telex);
  10
  11 .navbar, .subnav {
  12         font-family: @headingsFontFamily;
  13 }
  14
  15 // NAVBAR
  16 // -----------------------------------------------------
  17
  18 .navbar-inner {
  19   #gradient > .vertical-three-colors(@navbarBackground, @navbarBackground, 90%, @navbarBackgroundHighlight);
  20 }
  21
  22 .navbar .nav .active > a,
  23 .navbar .nav .active > a:hover {
  24   background-color: @navbarBackground;
  25   background-color: rgba(0,0,0,.2);
  26 }
  27
  28 .navbar .search-query {
  29         border: 1px solid darken(@linkColor, 10%);
  30 }
  31
  32 // responsive menu colors
  33
  34 .navbar .nav-collapse.in > .nav > li .dropdown-menu a {
  35         color: @white;
  36
  37         &:hover {
  38                 color: @white;
  39         }
  40 }
  41
  42 .navbar .nav-collapse.in .nav li > a {
  43         color: @white;
  44
  45         &:hover {
  46                 background-color: #2B7CAC;
  47         }
  48 }
  49
  50 .btn-navbar:hover {
  51     background-color: darken(@white, 20%);
  52 }
  53
  54 // BUTTONS
  55 // -----------------------------------------------------
  56
  57 .btn {
  58   #gradient > .vertical-three-colors(@white, @white, 5%, darken(@white, 0%));
  59   @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  60   .box-shadow(@shadow);
  61
  62   &:hover {
  63         background-position: 0 0;
  64   }
  65 }
  66
  67 .btn-primary {
  68   .buttonBackground(lighten(@btnPrimaryBackground, 5%), @btnPrimaryBackground);
  69 }
  70
  71 .btn-info {
  72   .buttonBackground(lighten(@btnInfoBackground, 5%), @btnInfoBackground);
  73 }
  74
  75 .btn-success {
  76   .buttonBackground(lighten(@btnSuccessBackground, 5%), @btnSuccessBackground);
  77 }
  78
  79 .btn-warning {
  80   .buttonBackground(lighten(@btnWarningBackground, 5%), @btnWarningBackground);
  81 }
  82
  83 .btn-danger {
  84   .buttonBackground(lighten(@btnDangerBackground, 5%), @btnDangerBackground);
  85 }
  86
  87 .btn-inverse {
  88   .buttonBackground(lighten(@btnInverseBackground, 5%), @btnInverseBackground);
  89 }
  90
  91 // ICONS
  92 // -----------------------------------------------------
  93
  94 // Make icons gray
  95 i[class^="icon-"]{
  96         opacity: 0.8;
  97 }