git.roojs.org Git - bootswatch/blob - swatchmaker/test/docs.css

   1 /* Add additional stylesheets below
   2 -------------------------------------------------- */
   3 /*
   4   Bootstrap's documentation styles
   5   Special styles for presenting Bootstrap's documentation and examples
   6 */
   7
   8
   9 /* Body and structure
  10 -------------------------------------------------- */
  11 body {
  12   position: relative;
  13   padding-top: 90px;
  14 /*  background-color: #fff;
  15   background-image: url(../img/grid-18px-masked.png);*/
  16   /*background-repeat: repeat-x;*/
  17   background-position: 0 40px;
  18 }
  19
  20 /* Jumbotrons
  21 -------------------------------------------------- */
  22 .jumbotron {
  23   position: relative;
  24 }
  25 .jumbotron h1 {
  26   margin-bottom: 9px;
  27   font-size: 81px;
  28   font-weight: bold;
  29   letter-spacing: -1px;
  30   line-height: 1;
  31 }
  32 .jumbotron p {
  33   margin-bottom: 18px;
  34   font-weight: 300;
  35 }
  36 .jumbotron .btn-large {
  37   font-size: 20px;
  38   font-weight: normal;
  39   padding: 14px 24px;
  40   margin-right: 10px;
  41   -webkit-border-radius: 6px;
  42      -moz-border-radius: 6px;
  43           border-radius: 6px;
  44 }
  45 .jumbotron .btn-large small {
  46   font-size: 14px;
  47 }
  48
  49
  50 /* Specific jumbotrons
  51 ------------------------- */
  52 /* supporting docs pages */
  53 .subhead {
  54   padding-bottom: 0;
  55   margin-bottom: 9px;
  56 }
  57 .subhead h1 {
  58   font-size: 54px;
  59 }
  60
  61 /* Subnav */
  62 .subnav {
  63   width: 100%;
  64   height: 36px;
  65   background-color: #eeeeee; /* Old browsers */
  66   background-repeat: repeat-x; /* Repeat the gradient */
  67   background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
  68   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
  69   background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */
  70   background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */
  71   background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
  72   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
  73   background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
  74   border: 1px solid #e5e5e5;
  75   -webkit-border-radius: 4px;
  76      -moz-border-radius: 4px;
  77           border-radius: 4px;
  78 }
  79 .subnav .nav {
  80   margin-bottom: 0;
  81 }
  82 .subnav .nav > li > a {
  83   margin: 0;
  84   padding-top:    11px;
  85   padding-bottom: 11px;
  86   border-left: 1px solid #f5f5f5;
  87   border-right: 1px solid #e5e5e5;
  88   -webkit-border-radius: 0;
  89      -moz-border-radius: 0;
  90           border-radius: 0;
  91 }
  92 .subnav .nav > .active > a,
  93 .subnav .nav > .active > a:hover {
  94   padding-left: 13px;
  95   color: #777;
  96   background-color: #e9e9e9;
  97   border-right-color: #ddd;
  98   border-left: 0;
  99   -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
 100      -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
 101           box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
 102 }
 103 .subnav .nav > .active > a .caret,
 104 .subnav .nav > .active > a:hover .caret {
 105   border-top-color: #777;
 106 }
 107 .subnav .nav > li:first-child > a,
 108 .subnav .nav > li:first-child > a:hover {
 109   border-left: 0;
 110   padding-left: 12px;
 111   -webkit-border-radius: 4px 0 0 4px;
 112      -moz-border-radius: 4px 0 0 4px;
 113           border-radius: 4px 0 0 4px;
 114 }
 115 .subnav .nav > li:last-child > a {
 116   border-right: 0;
 117 }
 118 .subnav .dropdown-menu {
 119   -webkit-border-radius: 0 0 4px 4px;
 120      -moz-border-radius: 0 0 4px 4px;
 121           border-radius: 0 0 4px 4px;
 122 }
 123
 124 /* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */
 125 @media (min-width: 980px) {
 126   .subnav-fixed {
 127     position: fixed;
 128     top: 40px;
 129     left: 0;
 130     right: 0;
 131     z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
 132     border-color: #d5d5d5;
 133     border-width: 0 0 1px; /* drop the border on the fixed edges */
 134     -webkit-border-radius: 0;
 135        -moz-border-radius: 0;
 136             border-radius: 0;
 137     -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 138        -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 139             box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 140     filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
 141   }
 142   .subnav-fixed .nav {
 143     width: 938px;
 144     margin: 0 auto;
 145     padding: 0 1px;
 146   }
 147   .subnav .nav > li:first-child > a,
 148   .subnav .nav > li:first-child > a:hover {
 149     -webkit-border-radius: 0;
 150        -moz-border-radius: 0;
 151             border-radius: 0;
 152   }
 153 }
 154
 155
 156
 157 /* Responsive Docs
 158 -------------------------------------------------- */
 159 @media (max-width: 480px) {
 160
 161   /* Reduce padding above jumbotron */
 162   body {
 163     padding-top: 70px;
 164   }
 165
 166   /* Adjust the jumbotron */
 167   .jumbotron h1,
 168   .jumbotron p {
 169     text-align: center;
 170     margin-right: 0;
 171   }
 172   .jumbotron h1 {
 173     font-size: 45px;
 174     margin-right: 0;
 175   }
 176   .jumbotron p {
 177     margin-right: 0;
 178     margin-left: 0;
 179     font-size: 18px;
 180     line-height: 24px;
 181   }
 182   .jumbotron .btn {
 183     display: block;
 184     font-size: 18px;
 185     padding: 10px 14px;
 186     margin: 0 auto 10px;
 187   }
 188
 189 }
 190
 191
 192 @media (max-width: 768px) {
 193
 194   /* Remove any padding from the body */
 195   body {
 196     padding-top: 0;
 197   }
 198
 199   /* Jumbotron buttons */
 200   .jumbotron .btn {
 201     margin-bottom: 10px;
 202   }
 203
 204   /* Subnav */
 205   .subnav {
 206     position: static;
 207     top: auto;
 208     z-index: auto;
 209     width: auto;
 210     height: auto;
 211     background: #fff; /* whole background property since we use a background-image for gradient */
 212     -webkit-box-shadow: none;
 213        -moz-box-shadow: none;
 214             box-shadow: none;
 215   }
 216   .subnav .nav > li {
 217     float: none;
 218   }
 219   .subnav .nav > li > a {
 220     border: 0;
 221   }
 222   .subnav .nav > li + li > a {
 223     border-top: 1px solid #e5e5e5;
 224   }
 225   .subnav .nav > li:first-child > a,
 226   .subnav .nav > li:first-child > a:hover {
 227       -webkit-border-radius: 4px 4px 0 0;
 228          -moz-border-radius: 4px 4px 0 0;
 229               border-radius: 4px 4px 0 0;
 230   }
 231 }
 232
 233
 234 @media (min-width: 480px) and (max-width: 768px) {
 235
 236   /* Scale down the jumbotron content */
 237   .jumbotron h1 {
 238     font-size: 54px;
 239   }
 240   .jumbotron p {
 241     margin-right: 0;
 242     margin-left: 0;
 243   }
 244 }
 245
 246
 247 @media (min-width: 768px) and (max-width: 980px) {
 248
 249   /* Remove any padding from the body */
 250   body {
 251     padding-top: 0;
 252   }
 253
 254   /* Scale down the jumbotron content */
 255   .jumbotron h1 {
 256     font-size: 72px;
 257   }
 258 }
 259
 260
 261 @media (max-width: 980px) {
 262
 263   /* Unfloat brand */
 264   .navbar-fixed-top .brand {
 265     float: left;
 266     margin-left: 0;
 267     padding-left: 10px;
 268     padding-right: 10px;
 269   }
 270 }
 271
 272
 273 /* LARGE DESKTOP SCREENS */
 274 @media (min-width: 1210px) {
 275
 276   /* Update subnav container */
 277   .subnav-fixed .nav {
 278     width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
 279   }
 280 }