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

   1 // Bootswatch.less
   2 // Swatch: Cerulean
   3 // Version: 2.1.0
   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         .brand {
  19                 padding: 16px 20px 14px;
  20                 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  21         }
  22
  23         li {
  24                 line-height: 20px;
  25         }
  26
  27         .nav > li > a {
  28                 padding: 16px 10px 14px;
  29                 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  30         }
  31
  32         .search-query {
  33                 border: 1px solid darken(@linkColor, 10%);
  34         }
  35
  36         .btn-navbar:hover {
  37             background-color: darken(@white, 20%);
  38         }
  39
  40         .navbar-text {
  41                 padding: 19px 10px 18px;
  42                 line-height: 13px;
  43                 color: rgba(0, 0, 0, 0.5);
  44                 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);
  45         }
  46
  47         // .nav li.dropdown.active > .dropdown-toggle,
  48         // .nav li.dropdown.active.open > .dropdown-toggle {
  49         //      background-color: @navbarLinkBackgroundActive;
  50         // }
  51
  52         .nav-collapse.collapse {
  53
  54                 .nav li > a {
  55                         color: @white;
  56
  57                         &:hover {
  58                                 background-color: #2B7CAC;
  59                         }
  60                 }
  61
  62                 .nav .active > a {
  63                         .box-shadow(none);
  64                         background-color: #2B7CAC;
  65                 }
  66
  67                 .dropdown-menu li > a:hover,
  68                 .dropdown-menu li > a:focus,
  69                 .dropdown-submenu:hover > a {
  70                         background-image: none;
  71                 }
  72
  73                 .navbar-form,
  74                 .navbar-search {
  75                         border: none;
  76                 }
  77
  78                 .nav-header {
  79                         color: #2B7CAC;
  80                 }
  81         }
  82
  83         &-inverse {
  84
  85                 .nav-collapse.collapse {
  86
  87                         .nav li > a {
  88                                 color: @navbarInverseLinkColor;
  89
  90                                 &:hover {
  91                                         background-color: rgba(0, 0, 0, 0.1);
  92                                 }
  93                         }
  94
  95                         .nav .active > a {
  96                                 background-color: rgba(0, 0, 0, 0.1);
  97                         }
  98                 }
  99         }
 100 }
 101
 102 div.subnav {
 103         font-family: @headingsFontFamily;
 104
 105         &-fixed {
 106                 top: @navbarHeight;
 107         }
 108 }
 109
 110 // BUTTONS
 111 // -----------------------------------------------------
 112
 113 .btn {
 114   #gradient > .vertical-three-colors(@white, @white, 5%, darken(@white, 0%));
 115   @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
 116   .box-shadow(@shadow);
 117
 118   &:hover {
 119         background-position: 0 0;
 120   }
 121 }
 122
 123 .btn-primary {
 124   .buttonBackground(lighten(@btnPrimaryBackground, 5%), @btnPrimaryBackground);
 125 }
 126
 127 .btn-info {
 128   .buttonBackground(lighten(@btnInfoBackground, 5%), @btnInfoBackground);
 129 }
 130
 131 .btn-success {
 132   .buttonBackground(lighten(@btnSuccessBackground, 5%), @btnSuccessBackground);
 133 }
 134
 135 .btn-warning {
 136   .buttonBackground(lighten(@btnWarningBackground, 5%), @btnWarningBackground);
 137 }
 138
 139 .btn-danger {
 140   .buttonBackground(lighten(@btnDangerBackground, 5%), @btnDangerBackground);
 141 }
 142
 143 .btn-inverse {
 144   .buttonBackground(lighten(@btnInverseBackground, 5%), @btnInverseBackground);
 145 }
 146
 147 // ICONS
 148 // -----------------------------------------------------
 149
 150 // Make icons gray
 151 i[class^="icon-"]{
 152         opacity: 0.8;
 153 }