git.roojs.org Git - bootswatch/blob - bower_components/font-awesome/src/3.2.1/assets/less/site.less

   1 @import "bootstrap-2.3.2/bootstrap.less";
   2 @import "bootstrap-2.3.2/responsive-utilities.less";
   3 @import "sticky-footer.less";
   4
   5 @import "mixins.less";
   6 @import "variables.less";
   7 @import "lazy.less";
   8
   9 .navbar .brand {
  10   font-family: @serifFontFamily;
  11   .icon-flag { padding-right: 3px; }
  12 }
  13
  14 .navbar .nav > li > a { padding: 12px 10px 9px; }
  15 .navbar .nav.pull-right { margin-right: -10px; }
  16 //.navbar, .jumbotron, #social-buttons { min-width: 990px; } // necessary fix for non-responsive layouts
  17
  18 h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
  19
  20 #iconCarousel {
  21   a { color: @white; }
  22   @size: 220px;
  23   font-size: @size;
  24   text-align: center;
  25   line-height: @size + 5;
  26   text-shadow: 2px 2px 3px @grayDarker;
  27   .carousel-control {
  28     top: @size + 33px;
  29     .square(30px);
  30     background: none;
  31     border-width: 0;
  32     font-size: 30px;
  33     line-height: 25px;
  34     left: 300/2 - 33px;
  35     &.right {
  36       left: auto;
  37       right: 300/2 - 33px;
  38     }
  39   }
  40 }
  41
  42 .jumbotron {
  43   background: @red;
  44   border-bottom: 1px solid @redDark;
  45   &, h1 { color: @white; }
  46   #gradient > .directional(@red, mix(@red, @redDark, 90%), -40deg);
  47 //  background-color: @red;
  48
  49 //  &:after {
  50 //    content:'';
  51 //    display:block;
  52 //    position:absolute;
  53 //    top:0;
  54 //    right:0;
  55 //    bottom:0;
  56 //    left:0;
  57 //    background:url(../img/grain-tm400.png);
  58 //    opacity:.5;
  59 //  }
  60
  61   h1 {
  62     font-size: 80px;
  63     letter-spacing: -2px;
  64     line-height: 1;
  65   }
  66   p {
  67     margin-top: 15px;
  68     margin-bottom: 15px;
  69     font-size: 30px;
  70     line-height: 1.3;
  71     font-weight: lighter;
  72   }
  73   .actions { margin-top: 25px;}
  74   text-shadow: 2px 2px 2px @grayDark;
  75   ul {
  76     margin-left: 50px;
  77     li {
  78       &.icon-large:before {
  79         text-indent: -2em;
  80         vertical-align: baseline;
  81       }
  82       font-size: 15px;
  83       line-height: 30px;
  84       text-shadow: 1px 1px 1px @grayDark;
  85     }
  86   }
  87   .btn-large {
  88     font-family: @serifFontFamily;
  89     font-weight: 500;
  90     font-size: 24px;
  91     padding: 17px 30px;
  92     letter-spacing: -1px;
  93   }
  94   .hero-content {
  95     text-align: center;
  96   }
  97   .shameless-self-promotion {
  98     font-size: 14px;
  99     margin-top: 25px;
 100     color: mix(@white, @red, 40%);
 101     text-shadow: none;
 102     a { color: mix(@white, @red, 70%); }
 103     a:hover { color: mix(@white, @red, 100%); }
 104   }
 105 }
 106
 107 .jumbotron-index {
 108   padding: 40px 0;
 109   h1 {
 110     font-size: 80px;
 111     letter-spacing: -2px;
 112     line-height: 1;
 113     margin: 0 0 15px;
 114   }
 115   p {
 116     margin-top: 15px;
 117     margin-bottom: 15px;
 118     font-size: 30px;
 119     line-height: 1.3;
 120   }
 121 }
 122
 123 .jumbotron-ad {
 124   padding: 20px 0;
 125   h1 { margin-top: 25px; }
 126   p { margin-bottom: 35px; }
 127 }
 128
 129 .jumbotron-icon {
 130   padding: 20px 0 30px;
 131   #gradient > .directional(@grayLighter, mix(@grayLighter, @grayLight, 90%), -40deg);
 132   color: @grayDarker;
 133   text-shadow: 1px 1px 1px @white;
 134   border-bottom: solid 1px mix(@grayLight, @grayLighter, 50%);
 135
 136   h1 {
 137     color: @grayDarker;
 138     font-size: 40px;
 139     small {
 140       letter-spacing: normal;
 141       font-family: @sansFontFamily;
 142       font-size: @baseFontSize;
 143       margin-left: 20px;
 144     }
 145   }
 146
 147   .info-details {
 148     float: left;
 149     p {
 150       margin: 25px 0;
 151       font-weight: bold;
 152     }
 153     .dl-horizontal {
 154       dt { width: @horizontalComponentOffset - 100; }
 155       dd { margin-left: @horizontalComponentOffset - 85; }
 156     }
 157   }
 158   .icon-2 { font-size: 2em; }
 159   .icon-3 { font-size: 4em; }
 160   .icon-4 { font-size: 7em; }
 161   .icon-5 { font-size: 12em; }
 162   .icon-6 { font-size: 20em; }
 163
 164   .icon-1, .icon-2, .icon-3, .icon-4, .icon-5, .icon-6 { margin-right: 1/14em; }
 165 }
 166
 167 //.info-ad {
 168 //  float: right;
 169 //  width: 154px;
 170 //  height: 219px;
 171 //  margin-left: 15px;
 172 //}
 173
 174 .stripe-ad {
 175   margin-bottom: 22px;
 176   .lead {
 177     margin-top: 10px;
 178     margin-right: 30px;
 179   }
 180 }
 181
 182 .btn-primary {
 183   color: @grayDark;
 184   text-shadow: 0 -1px 0 rgba(255,255,255,.25);
 185   &:hover {
 186     text-shadow: 0 -1px 0 rgba(255,255,255,.25);
 187     color: @grayDark;
 188   }
 189 }
 190
 191 section { margin-top: 40px; }
 192
 193 .stacked {
 194   padding-top: 35px;
 195   height: 105px;
 196 }
 197
 198 #social-buttons {
 199   ul.unstyled { margin: 0; }
 200
 201   padding: 22px 0 17px;
 202   text-align: center;
 203   background-color: #f5f5f5;
 204   border-top: 1px solid #fff;
 205   border-bottom: 1px solid #ddd;
 206   .btn {
 207 //    font-family: @serifFontFamily;
 208       font-weight: bold;
 209 //    font-size: @baseFontSize;
 210     padding: 0px 5px;
 211     line-height: @baseLineHeight - 3;
 212     margin: 0;
 213   }
 214   .count.btn {
 215     background: @white;
 216     font-weight: normal;
 217   }
 218 }
 219
 220 .the-icons {
 221   margin-top: 22px;
 222   .span3 {
 223     a {
 224       display: block;
 225       &, &:hover { color: @grayDarker; }
 226
 227       cursor: pointer;
 228       line-height: 32px;
 229       height: 32px;
 230       padding-left: 10px;
 231       .border-radius(6px);
 232
 233       [class^="icon-"],
 234       [class*=" icon-"] {
 235         width: 32px;
 236         font-size: 14px;
 237         display: inline-block;
 238         text-align: right;
 239         margin-right: 10px;
 240       }
 241
 242       &:hover {
 243         background-color: @errorBackground;
 244         text-decoration: none;
 245         [class^="icon-"], [class*=" icon-"] {
 246           *font-size: 28px;
 247           *vertical-align: middle;
 248         }
 249
 250         [class^="icon-"]:before,
 251         [class*=" icon-"]:before {
 252           font-size: 28px;
 253           vertical-align: -5px;
 254         }
 255       }
 256     }
 257   }
 258 }
 259
 260 #why, #whats-new {
 261   .span4 { margin-bottom: 20px; }
 262   h4 {
 263     [class^="icon-"]:before,
 264     [class*=" icon-"]:before {
 265       vertical-align: -10%;
 266       font-size: 28px;
 267       display: inline-block;
 268       width: 30/28em;
 269       text-align: center;
 270       margin-right: 5px;
 271 //      color: mix(@grayLight, @grayLighter, 70%);
 272
 273       // Gradient on the icons
 274 //      background: -webkit-linear-gradient(mix(@grayLight, @grayLighter, 50%), mix(@gray, @grayLight, 50%));
 275 //      -webkit-background-clip: text;
 276 //      -webkit-text-fill-color: transparent;
 277     }
 278   }
 279 }
 280
 281
 282 .rating {
 283   unicode-bidi: bidi-override;
 284   direction: rtl;
 285
 286   font-size: 30px;
 287   span.star {
 288     font-family: FontAwesome;
 289     font-weight: normal;
 290     font-style: normal;
 291     display: inline-block;
 292     &:hover {
 293       cursor: pointer;
 294     }
 295   }
 296   span.star:before {
 297     content: "\f006"; // empty star
 298     padding-right: 5px;
 299     color: @grayLight;
 300   }
 301
 302   span.star:hover:before, span.star:hover ~ span.star:before {
 303     content: "\f005"; // solid star
 304     color: #e3cf7a;
 305   }
 306 }
 307
 308
 309 .label,
 310 .badge {
 311   background-color: @grayLighter;
 312 }
 313
 314 .well.well-transparent {
 315   background-color: transparent;
 316 }
 317
 318 footer {
 319 //  #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
 320   background-color: @red;
 321   border-top: 1px solid mix(@red, @redDark, 50%);
 322   a {
 323     color: @white;
 324     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 325     &:hover {
 326       color: @white;
 327     }
 328
 329   }
 330
 331   color: mix(@red, @white, 35%);
 332   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 333   margin-top: 60px;
 334   padding-top: 45px;
 335   padding-bottom: 60px;
 336   *zoom: 1; // ie7 hack
 337   ul {
 338 //    margin-left: 30px;
 339     line-height: 25px;
 340   }
 341
 342   .project { margin-top: 10px; }
 343 }
 344
 345 // makes dropdowns closer for split dropdown
 346 // Links
 347 .navbar .nav > li {
 348   &.dropdown-split-right > a { padding-left: 7px; }
 349   &.dropdown-split-left > a { padding-right: 0; }
 350 }
 351
 352 @import "responsive.less";