docs.css 26.6 KB
Newer Older
Mark Otto's avatar
Mark Otto committed
1001
1002
1003
  z-index: 1;
  display: block;
}
Mark Otto's avatar
Mark Otto committed
1004
.bs-example-modal .modal-dialog {
Mark Otto's avatar
Mark Otto committed
1005
1006
1007
1008
1009
  left: auto;
  margin-left: auto;
  margin-right: auto;
}

Mark Otto's avatar
Mark Otto committed
1010
/* Example dropdowns */
Mark Otto's avatar
Mark Otto committed
1011
.bs-example > .dropdown > .dropdown-menu {
Mark Otto's avatar
Mark Otto committed
1012
1013
1014
1015
  position: static;
  display: block;
  margin-bottom: 5px;
}
Mark Otto's avatar
Mark Otto committed
1016

1017
/* Example tabbable tabs */
Mark Otto's avatar
Mark Otto committed
1018
.bs-example-tabs .nav-tabs {
1019
1020
1021
  margin-bottom: 15px;
}

1022
/* Tooltips */
1023
.bs-example-tooltips {
1024
1025
  text-align: center;
}
1026
1027
1028
1029
.bs-example-tooltips > .btn {
  margin-top: 5px;
  margin-bottom: 5px;
}
1030
1031

/* Popovers */
Mark Otto's avatar
Mark Otto committed
1032
.bs-example-popover {
1033
1034
1035
  padding-bottom: 24px;
  background-color: #f9f9f9;
}
Mark Otto's avatar
Mark Otto committed
1036
.bs-example-popover .popover {
1037
1038
1039
1040
1041
1042
1043
  position: relative;
  display: block;
  float: left;
  width: 260px;
  margin: 20px;
}

Mark Otto's avatar
Mark Otto committed
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
/* Scrollspy demo on fixed height div */
.scrollspy-example {
  position: relative;
  height: 200px;
  margin-top: 10px;
  overflow: auto;
}


/*
 * Code snippets
 *
 * Generated via Pygments and Jekyll, these are snippets of HTML, CSS, and JS.
 */

.highlight {
  padding: 9px 14px;
  margin-bottom: 14px;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
  border-radius: 4px;
}
.highlight pre {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  background-color: transparent;
  border: 0;
  white-space: nowrap;
}
.highlight pre code {
  font-size: inherit;
  color: #333; /* Effectively the base text color */
}
.highlight pre .lineno {
  display: inline-block;
  width: 22px;
  padding-right: 5px;
  margin-right: 10px;
  text-align: right;
  color: #bebec5;
}


/*
 * Responsive tests
 *
 * Generate a set of tests to show the responsive utilities in action.
 */
Mark Otto's avatar
Mark Otto committed
1093

1094
/* Responsive (scrollable) doc tables */
1095
.table-responsive .highlight pre {
1096
1097
1098
  white-space: normal;
}

Mark Otto's avatar
Mark Otto committed
1099
/* Utility classes table  */
Mark Otto's avatar
Mark Otto committed
1100
.bs-table th small,
Mark Otto's avatar
Mark Otto committed
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
.responsive-utilities th small {
  display: block;
  font-weight: normal;
  color: #999;
}
.responsive-utilities tbody th {
  font-weight: normal;
}
.responsive-utilities td {
  text-align: center;
}
.responsive-utilities td.is-visible {
  color: #468847;
  background-color: #dff0d8 !important;
}
.responsive-utilities td.is-hidden {
  color: #ccc;
  background-color: #f9f9f9 !important;
}

Mark Otto's avatar
Mark Otto committed
1121
/* Responsive tests */
Mark Otto's avatar
Mark Otto committed
1122
1123
1124
.responsive-utilities-test {
  margin-top: 5px;
}
1125
1126
.responsive-utilities-test .col-xs-6 {
  margin-bottom: 10px;
Mark Otto's avatar
Mark Otto committed
1127
1128
}
.responsive-utilities-test span {
1129
  display: block;
1130
  padding: 15px 10px;
1131
1132
1133
1134
  font-size: 14px;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
1135
  border-radius: 4px;
Mark Otto's avatar
Mark Otto committed
1136
}
Mark Otto's avatar
Mark Otto committed
1137
1138
1139
1140
.visible-on .col-xs-6 .hidden-xs,
.visible-on .col-xs-6 .hidden-sm,
.visible-on .col-xs-6 .hidden-md,
.visible-on .col-xs-6 .hidden-lg,
1141
1142
1143
1144
.hidden-on .col-xs-6 .hidden-xs,
.hidden-on .col-xs-6 .hidden-sm,
.hidden-on .col-xs-6 .hidden-md,
.hidden-on .col-xs-6 .hidden-lg {
1145
1146
1147
  color: #999;
  border: 1px solid #ddd;
}
Mark Otto's avatar
Mark Otto committed
1148
1149
1150
1151
.visible-on .col-xs-6 .visible-xs,
.visible-on .col-xs-6 .visible-sm,
.visible-on .col-xs-6 .visible-md,
.visible-on .col-xs-6 .visible-lg,
1152
1153
1154
1155
.hidden-on .col-xs-6 .visible-xs,
.hidden-on .col-xs-6 .visible-sm,
.hidden-on .col-xs-6 .visible-md,
.hidden-on .col-xs-6 .visible-lg {
Mark Otto's avatar
Mark Otto committed
1156
1157
1158
1159
1160
1161
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
}


Mark Otto's avatar
Mark Otto committed
1162
1163
1164
1165
1166
1167
1168
/*
 * Glyphicons
 *
 * Special styles for displaying the icons and their classes in the docs.
 */

.bs-glyphicons {
1169
1170
1171
1172
  margin: 0 -19px 20px -16px;
  overflow: hidden;
}
.bs-glyphicons-list {
Mark Otto's avatar
Mark Otto committed
1173
1174
1175
1176
1177
1178
1179
1180
  padding-left: 0;
  list-style: none;
}
.bs-glyphicons li {
  float: left;
  width: 25%;
  height: 115px;
  padding: 10px;
1181
  font-size: 10px;
Mark Otto's avatar
Mark Otto committed
1182
1183
  line-height: 1.4;
  text-align: center;
Mark Otto's avatar
Mark Otto committed
1184
1185
  border: 1px solid #fff;
  background-color: #f9f9f9;
Mark Otto's avatar
Mark Otto committed
1186
1187
}
.bs-glyphicons .glyphicon {
1188
1189
  margin-top: 5px;
  margin-bottom: 10px;
Mark Otto's avatar
Mark Otto committed
1190
1191
  font-size: 24px;
}
1192
1193
1194
.bs-glyphicons .glyphicon-class {
  display: block;
  text-align: center;
Mark Otto's avatar
Mark Otto committed
1195
  word-wrap: break-word; /* Help out IE10+ with class names */
1196
}
Mark Otto's avatar
Mark Otto committed
1197
.bs-glyphicons li:hover {
Mark Otto's avatar
Mark Otto committed
1198
1199
  color: #fff;
  background-color: #563d7c;
Mark Otto's avatar
Mark Otto committed
1200
1201
1202
}

@media (min-width: 768px) {
1203
1204
1205
1206
  .bs-glyphicons {
    margin-left: 0;
    margin-right: 0;
  }
Mark Otto's avatar
Mark Otto committed
1207
1208
  .bs-glyphicons li {
    width: 12.5%;
1209
    font-size: 12px;
Mark Otto's avatar
Mark Otto committed
1210
1211
1212
1213
  }
}


Mark Otto's avatar
Mark Otto committed
1214
1215
1216
1217
1218
1219
1220
/*
 * Customizer
 *
 * Since this is so form control heavy, we have quite a few styles to customize
 * the display of inputs, headings, and more. Also included are all the download
 * buttons and actions.
 */
Mark Otto's avatar
Mark Otto committed
1221

Mark Otto's avatar
Mark Otto committed
1222
1223
.bs-customizer .toggle {
  float: right;
Mark Otto's avatar
Mark Otto committed
1224
  margin-top: 85px; /* On account of ghetto navbar fix */
Mark Otto's avatar
Mark Otto committed
1225
}
Mark Otto's avatar
Mark Otto committed
1226

Mark Otto's avatar
Mark Otto committed
1227
1228
1229
1230
/* Headings and form contrls */
.bs-customizer label {
  margin-top: 10px;
  font-weight: 500;
1231
  color: #555;
Mark Otto's avatar
Mark Otto committed
1232
}
Mark Otto's avatar
Mark Otto committed
1233
1234
1235
1236
.bs-customizer h2 {
  margin-top: 0;
  margin-bottom: 5px;
  padding-top: 30px;
Mark Otto's avatar
Mark Otto committed
1237
}
1238
1239
1240
1241
.bs-customizer h3 {
  margin-bottom: 0;
}
.bs-customizer h4 {
Mark Otto's avatar
Mark Otto committed
1242
  margin-top: 15px;
1243
1244
1245
1246
  margin-bottom: 0;
}
.bs-customizer .bs-callout h4 {
  margin-top: 0; /* lame, but due to specificity we have to duplicate */
Heinrich Fenkart's avatar
Heinrich Fenkart committed
1247
  margin-bottom: 5px;
Mark Otto's avatar
Mark Otto committed
1248
}
Mark Otto's avatar
Mark Otto committed
1249
1250
1251
.bs-customizer input[type="text"] {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  background-color: #fafafa;
Mark Otto's avatar
Mark Otto committed
1252
}
Mark Otto's avatar
Mark Otto committed
1253
1254
.bs-customizer .help-block {
  font-size: 12px;
1255
  margin-bottom: 5px;
Mark Otto's avatar
Mark Otto committed
1256
1257
}

Mark Otto's avatar
Mark Otto committed
1258
1259
1260
/* For the variables, use regular weight */
#less-section label {
  font-weight: normal;
Mark Otto's avatar
Mark Otto committed
1261
}
Mark Otto's avatar
Mark Otto committed
1262

1263
1264
1265
1266
1267
1268
1269
.bs-customizer-input {
  float: left;
  width: 33.333333%;
  padding-left: 15px;
  padding-right: 15px;
}

Mark Otto's avatar
Mark Otto committed
1270
/* Downloads */
Mark Otto's avatar
Mark Otto committed
1271
1272
.bs-customize-download .btn-outline {
  padding: 20px;
Mark Otto's avatar
Mark Otto committed
1273
}
Mark Otto's avatar
Mark Otto committed
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286

/* Error handling */
.bs-customizer-alert {
  position: fixed;
  top: 51px;
  left: 0;
  right: 0;
  z-index: 1030;
  padding: 15px 0;
  color: #fff;
  background-color: #d9534f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  border-bottom: 1px solid #b94441;
Mark Otto's avatar
Mark Otto committed
1287
}
Mark Otto's avatar
Mark Otto committed
1288
.bs-customizer-alert .close {
1289
1290
  margin-top: -4px;
  font-size: 24px;
Mark Otto's avatar
Mark Otto committed
1291
}
Mark Otto's avatar
Mark Otto committed
1292
1293
.bs-customizer-alert p {
  margin-bottom: 0;
1294
}
1295
.bs-customizer-alert .glyphicon {
1296
1297
1298
1299
1300
1301
1302
1303
  margin-right: 5px;
}
.bs-customizer-alert pre {
  margin: 10px 0 0;
  color: #fff;
  background-color: #a83c3a;
  border-color: #973634;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
1304
}
Mark Otto's avatar
Mark Otto committed
1305
1306


Mark Otto's avatar
Mark Otto committed
1307
/*
Mark Otto's avatar
Mark Otto committed
1308
 * Brand guidelines
Mark Otto's avatar
Mark Otto committed
1309
 *
Mark Otto's avatar
Mark Otto committed
1310
 * Extra styles for displaying wordmarks, logos, etc.
Mark Otto's avatar
Mark Otto committed
1311
 */
Mark Otto's avatar
Mark Otto committed
1312

Mark Otto's avatar
Mark Otto committed
1313
1314
1315
1316
1317
1318
1319
1320
/* Logo series wrapper */
.bs-brand-logos {
  display: table;
  width: 100%;
  margin-bottom: 15px;
  overflow: hidden;
  color: #563d7c;
  background-color: #f9f9f9;
Mark Otto's avatar
Mark Otto committed
1321
1322
  border-radius: 4px;
}
Mark Otto's avatar
Mark Otto committed
1323
1324
1325
1326

/* Individual items */
.bs-brand-item {
  padding: 60px 0;
Mark Otto's avatar
Mark Otto committed
1327
1328
  text-align: center;
}
Mark Otto's avatar
Mark Otto committed
1329
.bs-brand-item + .bs-brand-item {
Mark Otto's avatar
Mark Otto committed
1330
  border-top: 1px solid #fff;
Mark Otto's avatar
Mark Otto committed
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
}
.bs-brand-logos .inverse {
  color: #fff;
  background-color: #563d7c;
}

/* Heading content within */
.bs-brand-item h1,
.bs-brand-item h3 {
  margin-top: 0;
  margin-bottom: 0;
}
.bs-brand-item .bs-booticon {
  margin-left: auto;
  margin-right: auto;
}

/* Make the icons stand out on what is/isn't okay */
.bs-brand-item .glyphicon {
  width: 30px;
  height: 30px;
Mark Otto's avatar
spacing    
Mark Otto committed
1352
  margin: 10px auto -10px;
Mark Otto's avatar
Mark Otto committed
1353
1354
1355
1356
1357
1358
1359
  line-height: 30px;
  color: #fff;
  border-radius: 50%;
}
.bs-brand-item .glyphicon-ok { background-color: #5cb85c; }
.bs-brand-item .glyphicon-remove { background-color: #d9534f; }

Mark Otto's avatar
Mark Otto committed
1360
@media (min-width: 768px) {
Mark Otto's avatar
Mark Otto committed
1361
1362
1363
1364
1365
1366
1367
  .bs-brand-item {
    display: table-cell;
    width: 1%;
  }
  .bs-brand-item + .bs-brand-item {
    border-top: 0;
    border-left: 1px solid #fff;
Mark Otto's avatar
Mark Otto committed
1368
  }
Mark Otto's avatar
Mark Otto committed
1369
1370
1371
1372
  .bs-brand-item h1 {
    font-size: 60px;
  }
}
Mark Otto's avatar
Mark Otto committed
1373
1374
1375
1376
1377
1378
1379


/*
 * Miscellaneous
 *
 * Odds and ends for optimum docs display.
 */
Mark Otto's avatar
Mark Otto committed
1380

Mark Otto's avatar
Mark Otto committed
1381
/* Examples gallery: space out content better */
Mark Otto's avatar
Mark Otto committed
1382
1383
1384
.bs-examples .thumbnail {
  margin-bottom: 10px;
}
Mark Otto's avatar
Mark Otto committed
1385
1386
1387
1388
1389
1390
.bs-examples h4 {
  margin-bottom: 5px;
}
.bs-examples p {
  margin-bottom: 20px;
}
Mark Otto's avatar
Mark Otto committed
1391
1392

/* Pseudo :focus state for showing how it looks in the docs */
1393
#focusedInput {
1394
  border-color: rgb(204,204,204); /* Restate unfocused value to make CSSLint happy that there's a pre-CSS3 fallback*/
Mark Otto's avatar
Mark Otto committed
1395
1396
1397
1398
1399
1400
  border-color: rgba(82,168,236,.8);
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
  -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
       box-shadow: 0 0 8px rgba(82,168,236,.6);
}
For faster browsing, not all history is shown. View entire blame