git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/examples/carousel/carousel.css

   1 /* GLOBAL STYLES
   2 -------------------------------------------------- */
   3 /* Padding below the footer and lighter body text */
   4
   5 body {
   6   padding-bottom: 40px;
   7   color: #5a5a5a;
   8 }
   9
  10
  11
  12 /* CUSTOMIZE THE NAVBAR
  13 -------------------------------------------------- */
  14
  15 /* Special class on .container surrounding .navbar, used for positioning it into place. */
  16 .navbar-wrapper {
  17   position: absolute;
  18   top: 0;
  19   left: 0;
  20   right: 0;
  21   z-index: 20;
  22 }
  23
  24 /* Flip around the padding for proper display in narrow viewports */
  25 .navbar-wrapper .container {
  26   padding-left: 0;
  27   padding-right: 0;
  28 }
  29 .navbar-wrapper .navbar {
  30   padding-left: 15px;
  31   padding-right: 15px;
  32 }
  33
  34
  35 /* CUSTOMIZE THE CAROUSEL
  36 -------------------------------------------------- */
  37
  38 /* Carousel base class */
  39 .carousel {
  40   height: 500px;
  41   margin-bottom: 60px;
  42 }
  43 /* Since positioning the image, we need to help out the caption */
  44 .carousel-caption {
  45   z-index: 10;
  46 }
  47
  48 /* Declare heights because of positioning of img element */
  49 .carousel .item {
  50   height: 500px;
  51   background-color: #777;
  52 }
  53 .carousel-inner > .item > img {
  54   position: absolute;
  55   top: 0;
  56   left: 0;
  57   min-width: 100%;
  58   height: 500px;
  59 }
  60
  61
  62
  63 /* MARKETING CONTENT
  64 -------------------------------------------------- */
  65
  66 /* Pad the edges of the mobile views a bit */
  67 .marketing {
  68   padding-left: 15px;
  69   padding-right: 15px;
  70 }
  71
  72 /* Center align the text within the three columns below the carousel */
  73 .marketing .col-lg-4 {
  74   text-align: center;
  75   margin-bottom: 20px;
  76 }
  77 .marketing h2 {
  78   font-weight: normal;
  79 }
  80 .marketing .col-lg-4 p {
  81   margin-left: 10px;
  82   margin-right: 10px;
  83 }
  84
  85
  86 /* Featurettes
  87 ------------------------- */
  88
  89 .featurette-divider {
  90   margin: 80px 0; /* Space out the Bootstrap <hr> more */
  91 }
  92
  93 /* Thin out the marketing headings */
  94 .featurette-heading {
  95   font-weight: 300;
  96   line-height: 1;
  97   letter-spacing: -1px;
  98 }
  99
 100
 101
 102 /* RESPONSIVE CSS
 103 -------------------------------------------------- */
 104
 105 @media (min-width: 768px) {
 106
 107   /* Remove the edge padding needed for mobile */
 108   .marketing {
 109     padding-left: 0;
 110     padding-right: 0;
 111   }
 112
 113   /* Navbar positioning foo */
 114   .navbar-wrapper {
 115     margin-top: 20px;
 116   }
 117   .navbar-wrapper .container {
 118     padding-left:  15px;
 119     padding-right: 15px;
 120   }
 121   .navbar-wrapper .navbar {
 122     padding-left:  0;
 123     padding-right: 0;
 124   }
 125
 126   /* The navbar becomes detached from the top, so we round the corners */
 127   .navbar-wrapper .navbar {
 128     border-radius: 4px;
 129   }
 130
 131   /* Bump up size of carousel content */
 132   .carousel-caption p {
 133     margin-bottom: 20px;
 134     font-size: 21px;
 135     line-height: 1.4;
 136   }
 137
 138   .featurette-heading {
 139     font-size: 50px;
 140   }
 141
 142 }
 143
 144 @media (min-width: 992px) {
 145   .featurette-heading {
 146     margin-top: 120px;
 147   }
 148 }