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

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