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

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

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

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

Mark Otto's avatar
Mark Otto committed
1060
/* Example dropdowns */
Mark Otto's avatar
Mark Otto committed
1061
.bs-example > .dropdown > .dropdown-menu {
Mark Otto's avatar
Mark Otto committed
1062
1063
1064
1065
  position: static;
  display: block;
  margin-bottom: 5px;
}
Mark Otto's avatar
Mark Otto committed
1066

1067
/* Example tabbable tabs */
Mark Otto's avatar
Mark Otto committed
1068
.bs-example-tabs .nav-tabs {
1069
1070
1071
  margin-bottom: 15px;
}

1072
/* Tooltips */
1073
.bs-example-tooltips {
1074
1075
  text-align: center;
}
1076
1077
1078
1079
.bs-example-tooltips > .btn {
  margin-top: 5px;
  margin-bottom: 5px;
}
1080
1081

/* Popovers */
Mark Otto's avatar
Mark Otto committed
1082
.bs-example-popover {
1083
1084
1085
  padding-bottom: 24px;
  background-color: #f9f9f9;
}
Mark Otto's avatar
Mark Otto committed
1086
.bs-example-popover .popover {
1087
1088
1089
1090
1091
1092
1093
  position: relative;
  display: block;
  float: left;
  width: 260px;
  margin: 20px;
}

Mark Otto's avatar
Mark Otto committed
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
/* 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
1120
1121
  word-break: normal;
  word-wrap: nowrap;
XhmikosR's avatar
XhmikosR committed
1122
  white-space: nowrap;
Mark Otto's avatar
Mark Otto committed
1123
1124
1125
1126
1127
1128
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 */
}
.highlight pre .lineno {
  display: inline-block;
  width: 22px;
  padding-right: 5px;
  margin-right: 10px;
  color: #bebec5;
XhmikosR's avatar
XhmikosR committed
1136
  text-align: right;
Mark Otto's avatar
Mark Otto committed
1137
1138
1139
1140
1141
1142
1143
1144
}


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

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

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


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

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

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


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

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

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

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

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

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

/* Error handling */
.bs-customizer-alert {
  position: fixed;
1330
  top: 0;
Mark Otto's avatar
Mark Otto committed
1331
  right: 0;
XhmikosR's avatar
XhmikosR committed
1332
  left: 0;
Mark Otto's avatar
Mark Otto committed
1333
1334
1335
1336
1337
  z-index: 1030;
  padding: 15px 0;
  color: #fff;
  background-color: #d9534f;
  border-bottom: 1px solid #b94441;
Bas Bosman's avatar
Bas Bosman committed
1338
1339
  -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
1340
}
Mark Otto's avatar
Mark Otto committed
1341
.bs-customizer-alert .close {
1342
1343
  margin-top: -4px;
  font-size: 24px;
Mark Otto's avatar
Mark Otto committed
1344
}
Mark Otto's avatar
Mark Otto committed
1345
1346
.bs-customizer-alert p {
  margin-bottom: 0;
1347
}
1348
.bs-customizer-alert .glyphicon {
1349
1350
1351
1352
1353
1354
1355
  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
1356
1357
  -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);
1358
}
Mark Otto's avatar
Mark Otto committed
1359
1360


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

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

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

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

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

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


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

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

/* Pseudo :focus state for showing how it looks in the docs */
1455
#focusedInput {
1456
  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
1457
1458
1459
  border-color: rgba(82,168,236,.8);
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
Bas Bosman's avatar
Bas Bosman committed
1460
1461
  -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
1462
}
For faster browsing, not all history is shown. View entire blame