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