src/scss/bootstrap-4.0.0-alpha.6/docs/examples/cover/cover.css

   1 /*
   2  * Globals
   3  */
   4
   5 /* Links */
   6 a,
   7 a:focus,
   8 a:hover {
   9   color: #fff;
  10 }
  11
  12 /* Custom default button */
  13 .btn-secondary,
  14 .btn-secondary:hover,
  15 .btn-secondary:focus {
  16   color: #333;
  17   text-shadow: none; /* Prevent inheritance from `body` */
  18   background-color: #fff;
  19   border: .05rem solid #fff;
  20 }
  21
  22
  23 /*
  24  * Base structure
  25  */
  26
  27 html,
  28 body {
  29   height: 100%;
  30   background-color: #333;
  31 }
  32 body {
  33   color: #fff;
  34   text-align: center;
  35   text-shadow: 0 .05rem .1rem rgba(0,0,0,.5);
  36 }
  37
  38 /* Extra markup and styles for table-esque vertical and horizontal centering */
  39 .site-wrapper {
  40   display: table;
  41   width: 100%;
  42   height: 100%; /* For at least Firefox */
  43   min-height: 100%;
  44   -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
  45           box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
  46 }
  47 .site-wrapper-inner {
  48   display: table-cell;
  49   vertical-align: top;
  50 }
  51 .cover-container {
  52   margin-right: auto;
  53   margin-left: auto;
  54 }
  55
  56 /* Padding for spacing */
  57 .inner {
  58   padding: 2rem;
  59 }
  60
  61
  62 /*
  63  * Header
  64  */
  65
  66 .masthead {
  67   margin-bottom: 2rem;
  68 }
  69
  70 .masthead-brand {
  71   margin-bottom: 0;
  72 }
  73
  74 .nav-masthead .nav-link {
  75   padding: .25rem 0;
  76   font-weight: bold;
  77   color: rgba(255,255,255,.5);
  78   background-color: transparent;
  79   border-bottom: .25rem solid transparent;
  80 }
  81
  82 .nav-masthead .nav-link:hover,
  83 .nav-masthead .nav-link:focus {
  84   border-bottom-color: rgba(255,255,255,.25);
  85 }
  86
  87 .nav-masthead .nav-link + .nav-link {
  88   margin-left: 1rem;
  89 }
  90
  91 .nav-masthead .active {
  92   color: #fff;
  93   border-bottom-color: #fff;
  94 }
  95
  96 @media (min-width: 48em) {
  97   .masthead-brand {
  98     float: left;
  99   }
 100   .nav-masthead {
 101     float: right;
 102   }
 103 }
 104
 105
 106 /*
 107  * Cover
 108  */
 109
 110 .cover {
 111   padding: 0 1.5rem;
 112 }
 113 .cover .btn-lg {
 114   padding: .75rem 1.25rem;
 115   font-weight: bold;
 116 }
 117
 118
 119 /*
 120  * Footer
 121  */
 122
 123 .mastfoot {
 124   color: rgba(255,255,255,.5);
 125 }
 126
 127
 128 /*
 129  * Affix and center
 130  */
 131
 132 @media (min-width: 40em) {
 133   /* Pull out the header and footer */
 134   .masthead {
 135     position: fixed;
 136     top: 0;
 137   }
 138   .mastfoot {
 139     position: fixed;
 140     bottom: 0;
 141   }
 142   /* Start the vertical centering */
 143   .site-wrapper-inner {
 144     vertical-align: middle;
 145   }
 146   /* Handle the widths */
 147   .masthead,
 148   .mastfoot,
 149   .cover-container {
 150     width: 100%; /* Must be percentage or pixels for horizontal alignment */
 151   }
 152 }
 153
 154 @media (min-width: 62em) {
 155   .masthead,
 156   .mastfoot,
 157   .cover-container {
 158     width: 42rem;
 159   }
 160 }