docs.css 28.2 KB
Newer Older
Mark Otto's avatar
Mark Otto committed
1001
.bs-navbar-bottom-example .navbar-fixed-bottom {
1002
  position: relative;
Mark Otto's avatar
Mark Otto committed
1003
  margin-right: 0;
XhmikosR's avatar
XhmikosR committed
1004
  margin-left: 0;
Mark Otto's avatar
Mark Otto committed
1005
1006
}
.bs-navbar-top-example {
1007
  padding-bottom: 45px;
Mark Otto's avatar
Mark Otto committed
1008
1009
1010
}
.bs-navbar-top-example:after {
  top: auto;
1011
  bottom: 15px;
1012
}
1013
1014
.bs-navbar-top-example .navbar-fixed-top {
  top: -1px;
Mark Otto's avatar
Mark Otto committed
1015
1016
}
.bs-navbar-bottom-example {
1017
1018
  padding-top: 45px;
}
1019
1020
.bs-navbar-bottom-example .navbar-fixed-bottom {
  bottom: -1px;
Mark Otto's avatar
Mark Otto committed
1021
1022
1023
1024
}
.bs-navbar-bottom-example .navbar {
  margin-bottom: 0;
}
1025
@media (min-width: 768px) {
Mark Otto's avatar
Mark Otto committed
1026
1027
1028
1029
  .bs-navbar-top-example .navbar-fixed-top,
  .bs-navbar-bottom-example .navbar-fixed-bottom {
    position: absolute;
  }
1030
1031
}

1032
1033
1034
1035
1036
1037
/* Pagination */
.bs-example .pagination {
  margin-top: 10px;
  margin-bottom: 10px;
}

Mark Otto's avatar
Mark Otto committed
1038
1039
1040
1041
1042
/* Pager */
.bs-example > .pager {
  margin-top: 0;
}

Mark Otto's avatar
Mark Otto committed
1043
/* Example modals */
Mark Otto's avatar
Mark Otto committed
1044
.bs-example-modal {
Mark Otto's avatar
Mark Otto committed
1045
1046
  background-color: #f5f5f5;
}
Mark Otto's avatar
Mark Otto committed
1047
.bs-example-modal .modal {
Mark Otto's avatar
Mark Otto committed
1048
1049
1050
1051
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
XhmikosR's avatar
XhmikosR committed
1052
  left: auto;
Mark Otto's avatar
Mark Otto committed
1053
1054
1055
  z-index: 1;
  display: block;
}
Mark Otto's avatar
Mark Otto committed
1056
.bs-example-modal .modal-dialog {
Mark Otto's avatar
Mark Otto committed
1057
1058
  left: auto;
  margin-right: auto;
XhmikosR's avatar
XhmikosR committed
1059
  margin-left: auto;
Mark Otto's avatar
Mark Otto committed
1060
1061
}

Mark Otto's avatar
Mark Otto committed
1062
/* Example dropdowns */
1063
1064
1065
.bs-example > .dropdown > .dropdown-toggle {
  float: left;
}
Mark Otto's avatar
Mark Otto committed
1066
.bs-example > .dropdown > .dropdown-menu {
Mark Otto's avatar
Mark Otto committed
1067
1068
1069
  position: static;
  display: block;
  margin-bottom: 5px;
1070
  clear: left;
Mark Otto's avatar
Mark Otto committed
1071
}
Mark Otto's avatar
Mark Otto committed
1072

1073
/* Example tabbable tabs */
Mark Otto's avatar
Mark Otto committed
1074
.bs-example-tabs .nav-tabs {
1075
1076
1077
  margin-bottom: 15px;
}

1078
/* Tooltips */
1079
.bs-example-tooltips {
1080
1081
  text-align: center;
}
1082
1083
1084
1085
.bs-example-tooltips > .btn {
  margin-top: 5px;
  margin-bottom: 5px;
}
1086
1087

/* Popovers */
Mark Otto's avatar
Mark Otto committed
1088
.bs-example-popover {
1089
1090
1091
  padding-bottom: 24px;
  background-color: #f9f9f9;
}
Mark Otto's avatar
Mark Otto committed
1092
.bs-example-popover .popover {
1093
1094
1095
1096
1097
1098
1099
  position: relative;
  display: block;
  float: left;
  width: 260px;
  margin: 20px;
}

Mark Otto's avatar
Mark Otto committed
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
/* 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;
Mark Otto's avatar
Mark Otto committed
1126
1127
  word-break: normal;
  word-wrap: nowrap;
XhmikosR's avatar
XhmikosR committed
1128
  white-space: nowrap;
Mark Otto's avatar
Mark Otto committed
1129
1130
1131
1132
1133
1134
1135
  background-color: transparent;
  border: 0;
}
.highlight pre code {
  font-size: inherit;
  color: #333; /* Effectively the base text color */
}
Mark Otto's avatar
Mark Otto committed
1136
.highlight pre code:first-child {
Mark Otto's avatar
Mark Otto committed
1137
  display: inline-block;
Mark Otto's avatar
Mark Otto committed
1138
  padding-right: 45px;
Mark Otto's avatar
Mark Otto committed
1139
1140
1141
1142
1143
1144
1145
1146
}


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

1148
/* Responsive (scrollable) doc tables */
1149
.table-responsive .highlight pre {
1150
1151
1152
  white-space: normal;
}

Mark Otto's avatar
Mark Otto committed
1153
/* Utility classes table  */
Mark Otto's avatar
Mark Otto committed
1154
.bs-table th small,
Mark Otto's avatar
Mark Otto committed
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
.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
1175
/* Responsive tests */
Mark Otto's avatar
Mark Otto committed
1176
1177
1178
.responsive-utilities-test {
  margin-top: 5px;
}
1179
1180
.responsive-utilities-test .col-xs-6 {
  margin-bottom: 10px;
Mark Otto's avatar
Mark Otto committed
1181
1182
}
.responsive-utilities-test span {
1183
  display: block;
1184
  padding: 15px 10px;
1185
1186
1187
1188
  font-size: 14px;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
1189
  border-radius: 4px;
Mark Otto's avatar
Mark Otto committed
1190
}
Mark Otto's avatar
Mark Otto committed
1191
1192
1193
1194
.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,
1195
1196
1197
1198
.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 {
1199
1200
1201
  color: #999;
  border: 1px solid #ddd;
}
1202
1203
1204
1205
1206
1207
1208
1209
.visible-on .col-xs-6 .visible-xs-block,
.visible-on .col-xs-6 .visible-sm-block,
.visible-on .col-xs-6 .visible-md-block,
.visible-on .col-xs-6 .visible-lg-block,
.hidden-on .col-xs-6 .visible-xs-block,
.hidden-on .col-xs-6 .visible-sm-block,
.hidden-on .col-xs-6 .visible-md-block,
.hidden-on .col-xs-6 .visible-lg-block {
Mark Otto's avatar
Mark Otto committed
1210
1211
1212
1213
1214
1215
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
}


Mark Otto's avatar
Mark Otto committed
1216
1217
1218
1219
1220
1221
1222
/*
 * Glyphicons
 *
 * Special styles for displaying the icons and their classes in the docs.
 */

.bs-glyphicons {
1223
  margin: 0 -10px 20px;
1224
1225
1226
  overflow: hidden;
}
.bs-glyphicons-list {
Mark Otto's avatar
Mark Otto committed
1227
1228
1229
1230
1231
1232
1233
1234
  padding-left: 0;
  list-style: none;
}
.bs-glyphicons li {
  float: left;
  width: 25%;
  height: 115px;
  padding: 10px;
1235
  font-size: 10px;
Mark Otto's avatar
Mark Otto committed
1236
1237
  line-height: 1.4;
  text-align: center;
Mark Otto's avatar
Mark Otto committed
1238
  background-color: #f9f9f9;
XhmikosR's avatar
XhmikosR committed
1239
  border: 1px solid #fff;
Mark Otto's avatar
Mark Otto committed
1240
1241
}
.bs-glyphicons .glyphicon {
1242
1243
  margin-top: 5px;
  margin-bottom: 10px;
Mark Otto's avatar
Mark Otto committed
1244
1245
  font-size: 24px;
}
1246
1247
1248
.bs-glyphicons .glyphicon-class {
  display: block;
  text-align: center;
Mark Otto's avatar
Mark Otto committed
1249
  word-wrap: break-word; /* Help out IE10+ with class names */
1250
}
Mark Otto's avatar
Mark Otto committed
1251
.bs-glyphicons li:hover {
Mark Otto's avatar
Mark Otto committed
1252
1253
  color: #fff;
  background-color: #563d7c;
Mark Otto's avatar
Mark Otto committed
1254
1255
1256
}

@media (min-width: 768px) {
1257
1258
  .bs-glyphicons {
    margin-right: 0;
XhmikosR's avatar
XhmikosR committed
1259
    margin-left: 0;
1260
  }
Mark Otto's avatar
Mark Otto committed
1261
1262
  .bs-glyphicons li {
    width: 12.5%;
1263
    font-size: 12px;
Mark Otto's avatar
Mark Otto committed
1264
1265
1266
1267
  }
}


Mark Otto's avatar
Mark Otto committed
1268
1269
1270
1271
1272
1273
1274
/*
 * 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
1275

Mark Otto's avatar
Mark Otto committed
1276
1277
.bs-customizer .toggle {
  float: right;
1278
  margin-top: 25px;
Mark Otto's avatar
Mark Otto committed
1279
}
Mark Otto's avatar
Mark Otto committed
1280

Mark Otto's avatar
Mark Otto committed
1281
1282
1283
1284
/* Headings and form contrls */
.bs-customizer label {
  margin-top: 10px;
  font-weight: 500;
1285
  color: #555;
Mark Otto's avatar
Mark Otto committed
1286
}
Mark Otto's avatar
Mark Otto committed
1287
.bs-customizer h2 {
XhmikosR's avatar
XhmikosR committed
1288
  padding-top: 30px;
Mark Otto's avatar
Mark Otto committed
1289
1290
  margin-top: 0;
  margin-bottom: 5px;
Mark Otto's avatar
Mark Otto committed
1291
}
1292
1293
1294
1295
.bs-customizer h3 {
  margin-bottom: 0;
}
.bs-customizer h4 {
Mark Otto's avatar
Mark Otto committed
1296
  margin-top: 15px;
1297
1298
1299
1300
  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
1301
  margin-bottom: 5px;
Mark Otto's avatar
Mark Otto committed
1302
}
Mark Otto's avatar
Mark Otto committed
1303
1304
1305
.bs-customizer input[type="text"] {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  background-color: #fafafa;
Mark Otto's avatar
Mark Otto committed
1306
}
Mark Otto's avatar
Mark Otto committed
1307
.bs-customizer .help-block {
1308
  margin-bottom: 5px;
XhmikosR's avatar
XhmikosR committed
1309
  font-size: 12px;
Mark Otto's avatar
Mark Otto committed
1310
1311
}

Mark Otto's avatar
Mark Otto committed
1312
1313
1314
/* For the variables, use regular weight */
#less-section label {
  font-weight: normal;
Mark Otto's avatar
Mark Otto committed
1315
}
Mark Otto's avatar
Mark Otto committed
1316

1317
1318
1319
1320
.bs-customizer-input {
  float: left;
  width: 33.333333%;
  padding-right: 15px;
XhmikosR's avatar
XhmikosR committed
1321
  padding-left: 15px;
1322
1323
}

Mark Otto's avatar
Mark Otto committed
1324
/* Downloads */
Mark Otto's avatar
Mark Otto committed
1325
1326
.bs-customize-download .btn-outline {
  padding: 20px;
Mark Otto's avatar
Mark Otto committed
1327
}
Mark Otto's avatar
Mark Otto committed
1328
1329
1330
1331

/* Error handling */
.bs-customizer-alert {
  position: fixed;
1332
  top: 0;
Mark Otto's avatar
Mark Otto committed
1333
  right: 0;
XhmikosR's avatar
XhmikosR committed
1334
  left: 0;
Mark Otto's avatar
Mark Otto committed
1335
1336
1337
1338
1339
  z-index: 1030;
  padding: 15px 0;
  color: #fff;
  background-color: #d9534f;
  border-bottom: 1px solid #b94441;
Bas Bosman's avatar
Bas Bosman committed
1340
1341
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
          box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
Mark Otto's avatar
Mark Otto committed
1342
}
Mark Otto's avatar
Mark Otto committed
1343
.bs-customizer-alert .close {
1344
1345
  margin-top: -4px;
  font-size: 24px;
Mark Otto's avatar
Mark Otto committed
1346
}
Mark Otto's avatar
Mark Otto committed
1347
1348
.bs-customizer-alert p {
  margin-bottom: 0;
1349
}
1350
.bs-customizer-alert .glyphicon {
1351
1352
1353
1354
1355
1356
1357
  margin-right: 5px;
}
.bs-customizer-alert pre {
  margin: 10px 0 0;
  color: #fff;
  background-color: #a83c3a;
  border-color: #973634;
Bas Bosman's avatar
Bas Bosman committed
1358
1359
  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
          box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
1360
}
Mark Otto's avatar
Mark Otto committed
1361
1362


Mark Otto's avatar
Mark Otto committed
1363
/*
Mark Otto's avatar
Mark Otto committed
1364
 * Brand guidelines
Mark Otto's avatar
Mark Otto committed
1365
 *
Mark Otto's avatar
Mark Otto committed
1366
 * Extra styles for displaying wordmarks, logos, etc.
Mark Otto's avatar
Mark Otto committed
1367
 */
Mark Otto's avatar
Mark Otto committed
1368

Mark Otto's avatar
Mark Otto committed
1369
1370
1371
1372
1373
1374
1375
1376
/* 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
1377
1378
  border-radius: 4px;
}
Mark Otto's avatar
Mark Otto committed
1379
1380
1381
1382

/* Individual items */
.bs-brand-item {
  padding: 60px 0;
Mark Otto's avatar
Mark Otto committed
1383
1384
  text-align: center;
}
Mark Otto's avatar
Mark Otto committed
1385
.bs-brand-item + .bs-brand-item {
Mark Otto's avatar
Mark Otto committed
1386
  border-top: 1px solid #fff;
Mark Otto's avatar
Mark Otto committed
1387
1388
1389
1390
1391
}
.bs-brand-logos .inverse {
  color: #fff;
  background-color: #563d7c;
}
Mark Otto's avatar
Mark Otto committed
1392
.bs-brand-item .svg {
Mark Otto's avatar
Mark Otto committed
1393
  width: 144px;
Mark Otto's avatar
Mark Otto committed
1394
1395
  height: 144px;
}
Mark Otto's avatar
Mark Otto committed
1396
1397
1398
1399
1400
1401
1402

/* Heading content within */
.bs-brand-item h1,
.bs-brand-item h3 {
  margin-top: 0;
  margin-bottom: 0;
}
1403
.bs-brand-item .bs-docs-booticon {
Mark Otto's avatar
Mark Otto committed
1404
  margin-right: auto;
XhmikosR's avatar
XhmikosR committed
1405
  margin-left: auto;
Mark Otto's avatar
Mark Otto committed
1406
1407
1408
1409
1410
1411
}

/* 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
1412
  margin: 10px auto -10px;
Mark Otto's avatar
Mark Otto committed
1413
1414
1415
1416
  line-height: 30px;
  color: #fff;
  border-radius: 50%;
}
XhmikosR's avatar
XhmikosR committed
1417
1418
1419
1420
1421
1422
.bs-brand-item .glyphicon-ok {
  background-color: #5cb85c;
}
.bs-brand-item .glyphicon-remove {
  background-color: #d9534f;
}
Mark Otto's avatar
Mark Otto committed
1423

Mark Otto's avatar
Mark Otto committed
1424
@media (min-width: 768px) {
Mark Otto's avatar
Mark Otto committed
1425
1426
1427
1428
1429
1430
1431
  .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
1432
  }
Mark Otto's avatar
Mark Otto committed
1433
1434
1435
1436
  .bs-brand-item h1 {
    font-size: 60px;
  }
}
Mark Otto's avatar
Mark Otto committed
1437
1438
1439
1440
1441
1442
1443


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

Mark Otto's avatar
Mark Otto committed
1445
/* Examples gallery: space out content better */
Mark Otto's avatar
Mark Otto committed
1446
1447
1448
.bs-examples .thumbnail {
  margin-bottom: 10px;
}
Mark Otto's avatar
Mark Otto committed
1449
1450
1451
1452
1453
1454
.bs-examples h4 {
  margin-bottom: 5px;
}
.bs-examples p {
  margin-bottom: 20px;
}
Mark Otto's avatar
Mark Otto committed
1455
1456

/* Pseudo :focus state for showing how it looks in the docs */
1457
#focusedInput {
1458
  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
1459
1460
1461
  border-color: rgba(82,168,236,.8);
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
Bas Bosman's avatar
Bas Bosman committed
1462
1463
  -webkit-box-shadow: 0 0 8px rgba(82,168,236,.6);
          box-shadow: 0 0 8px rgba(82,168,236,.6);
Mark Otto's avatar
Mark Otto committed
1464
}
1465

Mark Otto's avatar
Mark Otto committed
1466

1467
1468
1469
1470
1471
1472
/*
 * ZeroClipboard styles
 */

.zero-clipboard {
  position: relative;
Mark Otto's avatar
Mark Otto committed
1473
  display: none;
1474
1475
1476
}
.btn-clipboard {
  position: absolute;
Mark Otto's avatar
Mark Otto committed
1477
  top: 0;
1478
1479
  right: 0;
  z-index: 10;
Mark Otto's avatar
Mark Otto committed
1480
1481
1482
1483
  display: block;
  padding: 5px 8px;
  font-size: 12px;
  color: #777;
1484
  cursor: pointer;
Mark Otto's avatar
Mark Otto committed
1485
1486
1487
  background-color: #fff;
  border: 1px solid #e1e1e8;
  border-radius: 0 4px 0 4px;
1488
1489
}
.btn-clipboard-hover {
Mark Otto's avatar
Mark Otto committed
1490
1491
1492
  color: #fff;
  background-color: #563d7c;
  border-color: #563d7c;
1493
1494
}

Mark Otto's avatar
Mark Otto committed
1495
1496
1497
@media (min-width: 768px) {
  .zero-clipboard {
    display: block;
1498
1499
  }
}
For faster browsing, not all history is shown. View entire blame