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

   1 // Bootswatch.less
   2 // Swatch: Cerulean
   3 // Version: 2.1.1
   4 // -----------------------------------------------------
   5
   6 // TYPOGRAPHY
   7 // -----------------------------------------------------
   8
   9 @import url(https://fonts.googleapis.com/css?family=Telex);
  10
  11 // SCAFFOLDING
  12 // -----------------------------------------------------
  13
  14 // NAVBAR
  15 // -----------------------------------------------------
  16
  17 .navbar {
  18
  19
  20         .brand {
  21                 padding: 14px 20px 16px;
  22                 font-family: @headingsFontFamily;
  23                 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  24         }
  25
  26         li {
  27                 line-height: 20px;
  28         }
  29
  30         .nav > li > a {
  31                 padding: 16px 10px 14px;
  32                 font-family: @headingsFontFamily;
  33                 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  34         }
  35
  36         .search-query {
  37                 border: 1px solid darken(@linkColor, 10%);
  38         }
  39
  40         .btn-navbar:hover {
  41             background-color: darken(@white, 20%);
  42         }
  43
  44         .navbar-text {
  45                 padding: 19px 10px 18px;
  46                 line-height: 13px;
  47                 color: rgba(0, 0, 0, 0.5);
  48                 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  49         }
  50
  51         &-inverse {
  52
  53                 .navbar-search .search-query {
  54                         color: @textColor;
  55                 }
  56         }
  57 }
  58
  59 @media (max-width: @navbarCollapseWidth) {
  60
  61         .navbar .nav-collapse {
  62
  63                 .nav li > a {
  64
  65                         font-family: @headingsFontFamily;
  66                         font-weight: normal;
  67                         color: @white;
  68                         text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  69
  70                         &:hover {
  71                                 background-color: #2B7CAC;
  72                         }
  73                 }
  74
  75                 .nav .active > a {
  76                         .box-shadow(none);
  77                         background-color: #2B7CAC;
  78                 }
  79
  80                 .dropdown-menu li > a:hover,
  81                 .dropdown-menu li > a:focus,
  82                 .dropdown-submenu:hover > a {
  83                         background-image: none;
  84                 }
  85
  86                 .navbar-form,
  87                 .navbar-search {
  88                         border: none;
  89                 }
  90
  91                 .nav-header {
  92                         color: #2B7CAC;
  93                 }
  94         }
  95
  96         .navbar-inverse .nav-collapse {
  97
  98                 .nav li > a {
  99                         color: @navbarInverseLinkColor;
 100
 101                         &:hover {
 102                                 background-color: rgba(0, 0, 0, 0.1);
 103                         }
 104                 }
 105
 106                 .nav .active > a {
 107                         background-color: rgba(0, 0, 0, 0.1);
 108                 }
 109         }
 110 }
 111
 112 div.subnav {
 113
 114         font-family: @headingsFontFamily;
 115         text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
 116
 117         &-fixed {
 118                 top: @navbarHeight;
 119         }
 120 }
 121
 122 // NAV
 123 // -----------------------------------------------------
 124
 125 // BUTTONS
 126 // -----------------------------------------------------
 127
 128 .btn {
 129   #gradient > .vertical-three-colors(@white, @white, 5%, darken(@white, 0%));
 130   @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
 131   .box-shadow(@shadow);
 132
 133   &:hover {
 134         background-position: 0 0;
 135   }
 136 }
 137
 138 .btn-primary {
 139   .buttonBackground(lighten(@btnPrimaryBackground, 5%), @btnPrimaryBackground);
 140 }
 141
 142 .btn-info {
 143   .buttonBackground(lighten(@btnInfoBackground, 5%), @btnInfoBackground);
 144 }
 145
 146 .btn-success {
 147   .buttonBackground(lighten(@btnSuccessBackground, 5%), @btnSuccessBackground);
 148 }
 149
 150 .btn-warning {
 151   .buttonBackground(lighten(@btnWarningBackground, 5%), @btnWarningBackground);
 152 }
 153
 154 .btn-danger {
 155   .buttonBackground(lighten(@btnDangerBackground, 5%), @btnDangerBackground);
 156 }
 157
 158 .btn-inverse {
 159   .buttonBackground(lighten(@btnInverseBackground, 5%), @btnInverseBackground);
 160 }
 161
 162 // TABLES
 163 // -----------------------------------------------------
 164
 165 // FORMS
 166 // -----------------------------------------------------
 167
 168 // DROPDOWNS
 169 // -----------------------------------------------------
 170
 171 // ALERTS, LABELS, BADGES
 172 // -----------------------------------------------------
 173
 174 // MISC
 175 // -----------------------------------------------------
 176
 177 i[class^="icon-"]{
 178         opacity: 0.8;
 179 }
 180
 181 // MEDIA QUERIES
 182 // -----------------------------------------------------