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

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