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

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