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

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