docs.css 25.6 KB
Newer Older
1001
}
1002
1003

/* Popovers */
Mark Otto's avatar
Mark Otto committed
1004
.bs-example-popover {
1005
1006
1007
  padding-bottom: 24px;
  background-color: #f9f9f9;
}
Mark Otto's avatar
Mark Otto committed
1008
.bs-example-popover .popover {
1009
1010
1011
1012
1013
1014
1015
  position: relative;
  display: block;
  float: left;
  width: 260px;
  margin: 20px;
}

Mark Otto's avatar
Mark Otto committed
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
/* 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
1065

1066
/* Responsive (scrollable) doc tables */
1067
.table-responsive .highlight pre {
1068
1069
1070
  white-space: normal;
}

Mark Otto's avatar
Mark Otto committed
1071
/* Utility classes table  */
Mark Otto's avatar
Mark Otto committed
1072
.bs-table th small,
Mark Otto's avatar
Mark Otto committed
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
.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
1093
/* Responsive tests */
Mark Otto's avatar
Mark Otto committed
1094
1095
1096
.responsive-utilities-test {
  margin-top: 5px;
}
1097
1098
.responsive-utilities-test .col-xs-6 {
  margin-bottom: 10px;
Mark Otto's avatar
Mark Otto committed
1099
1100
}
.responsive-utilities-test span {
1101
  display: block;
1102
  padding: 15px 10px;
1103
1104
1105
1106
  font-size: 14px;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
1107
  border-radius: 4px;
Mark Otto's avatar
Mark Otto committed
1108
}
Mark Otto's avatar
Mark Otto committed
1109
1110
1111
1112
.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,
1113
1114
1115
1116
.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 {
1117
1118
1119
  color: #999;
  border: 1px solid #ddd;
}
Mark Otto's avatar
Mark Otto committed
1120
1121
1122
1123
.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,
1124
1125
1126
1127
.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
1128
1129
1130
1131
1132
1133
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
}


Mark Otto's avatar
Mark Otto committed
1134
1135
1136
1137
1138
1139
1140
/*
 * Glyphicons
 *
 * Special styles for displaying the icons and their classes in the docs.
 */

.bs-glyphicons {
1141
1142
1143
1144
  margin: 0 -19px 20px -16px;
  overflow: hidden;
}
.bs-glyphicons-list {
Mark Otto's avatar
Mark Otto committed
1145
1146
1147
1148
1149
1150
1151
1152
  padding-left: 0;
  list-style: none;
}
.bs-glyphicons li {
  float: left;
  width: 25%;
  height: 115px;
  padding: 10px;
1153
  font-size: 10px;
Mark Otto's avatar
Mark Otto committed
1154
1155
  line-height: 1.4;
  text-align: center;
Mark Otto's avatar
Mark Otto committed
1156
1157
  border: 1px solid #fff;
  background-color: #f9f9f9;
Mark Otto's avatar
Mark Otto committed
1158
1159
}
.bs-glyphicons .glyphicon {
1160
1161
  margin-top: 5px;
  margin-bottom: 10px;
Mark Otto's avatar
Mark Otto committed
1162
1163
  font-size: 24px;
}
1164
1165
1166
.bs-glyphicons .glyphicon-class {
  display: block;
  text-align: center;
Mark Otto's avatar
Mark Otto committed
1167
  word-wrap: break-word; /* Help out IE10+ with class names */
1168
}
Mark Otto's avatar
Mark Otto committed
1169
.bs-glyphicons li:hover {
Mark Otto's avatar
Mark Otto committed
1170
1171
  color: #fff;
  background-color: #563d7c;
Mark Otto's avatar
Mark Otto committed
1172
1173
1174
}

@media (min-width: 768px) {
1175
1176
1177
1178
  .bs-glyphicons {
    margin-left: 0;
    margin-right: 0;
  }
Mark Otto's avatar
Mark Otto committed
1179
1180
  .bs-glyphicons li {
    width: 12.5%;
1181
    font-size: 12px;
Mark Otto's avatar
Mark Otto committed
1182
1183
1184
1185
  }
}


Mark Otto's avatar
Mark Otto committed
1186
1187
1188
1189
1190
1191
1192
/*
 * 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
1193

Mark Otto's avatar
Mark Otto committed
1194
1195
.bs-customizer .toggle {
  float: right;
Mark Otto's avatar
Mark Otto committed
1196
  margin-top: 85px; /* On account of ghetto navbar fix */
Mark Otto's avatar
Mark Otto committed
1197
}
Mark Otto's avatar
Mark Otto committed
1198

Mark Otto's avatar
Mark Otto committed
1199
1200
1201
1202
/* Headings and form contrls */
.bs-customizer label {
  margin-top: 10px;
  font-weight: 500;
1203
  color: #555;
Mark Otto's avatar
Mark Otto committed
1204
}
Mark Otto's avatar
Mark Otto committed
1205
1206
1207
1208
.bs-customizer h2 {
  margin-top: 0;
  margin-bottom: 5px;
  padding-top: 30px;
Mark Otto's avatar
Mark Otto committed
1209
}
1210
1211
1212
1213
.bs-customizer h3 {
  margin-bottom: 0;
}
.bs-customizer h4 {
Mark Otto's avatar
Mark Otto committed
1214
  margin-top: 15px;
1215
1216
1217
1218
  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
1219
  margin-bottom: 5px;
Mark Otto's avatar
Mark Otto committed
1220
}
Mark Otto's avatar
Mark Otto committed
1221
1222
1223
.bs-customizer input[type="text"] {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  background-color: #fafafa;
Mark Otto's avatar
Mark Otto committed
1224
}
Mark Otto's avatar
Mark Otto committed
1225
1226
.bs-customizer .help-block {
  font-size: 12px;
1227
  margin-bottom: 5px;
Mark Otto's avatar
Mark Otto committed
1228
1229
}

Mark Otto's avatar
Mark Otto committed
1230
1231
1232
/* For the variables, use regular weight */
#less-section label {
  font-weight: normal;
Mark Otto's avatar
Mark Otto committed
1233
}
Mark Otto's avatar
Mark Otto committed
1234
1235

/* Downloads */
Mark Otto's avatar
Mark Otto committed
1236
1237
.bs-customize-download .btn-outline {
  padding: 20px;
Mark Otto's avatar
Mark Otto committed
1238
}
Mark Otto's avatar
Mark Otto committed
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251

/* 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
1252
}
Mark Otto's avatar
Mark Otto committed
1253
.bs-customizer-alert .close {
1254
1255
  margin-top: -4px;
  font-size: 24px;
Mark Otto's avatar
Mark Otto committed
1256
}
Mark Otto's avatar
Mark Otto committed
1257
1258
.bs-customizer-alert p {
  margin-bottom: 0;
1259
}
1260
.bs-customizer-alert .glyphicon {
1261
1262
1263
1264
1265
1266
1267
1268
  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);
1269
}
Mark Otto's avatar
Mark Otto committed
1270
1271


Mark Otto's avatar
Mark Otto committed
1272
/*
Mark Otto's avatar
Mark Otto committed
1273
 * Brand guidelines
Mark Otto's avatar
Mark Otto committed
1274
 *
Mark Otto's avatar
Mark Otto committed
1275
 * Extra styles for displaying wordmarks, logos, etc.
Mark Otto's avatar
Mark Otto committed
1276
 */
Mark Otto's avatar
Mark Otto committed
1277

Mark Otto's avatar
Mark Otto committed
1278
1279
1280
1281
1282
1283
1284
1285
/* 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
1286
1287
  border-radius: 4px;
}
Mark Otto's avatar
Mark Otto committed
1288
1289
1290
1291
1292
1293

/* Individual items */
.bs-brand-item {
  display: table-cell;
  width: 1%;
  padding: 60px 0;
Mark Otto's avatar
Mark Otto committed
1294
1295
  text-align: center;
}
Mark Otto's avatar
Mark Otto committed
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
.bs-brand-item + .bs-brand-item {
  border-left: 1px solid #fff;
}
.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 h1 {
  font-size: 60px;
}
.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;
  margin-top: 10px;
  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
1331
@media (min-width: 768px) {
Mark Otto's avatar
Mark Otto committed
1332
1333
/*  .bs-brand-logos .default,
  .bs-brand-logos .inverse {
Mark Otto's avatar
Mark Otto committed
1334
1335
1336
    float: left;
    width: 50%;
  }
Mark Otto's avatar
Mark Otto committed
1337
1338
1339
1340
1341
1342
1343
1344
*/}


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

Mark Otto's avatar
Mark Otto committed
1346
/* Examples gallery: space out content better */
Mark Otto's avatar
Mark Otto committed
1347
1348
1349
.bs-examples .thumbnail {
  margin-bottom: 10px;
}
Mark Otto's avatar
Mark Otto committed
1350
1351
1352
1353
1354
1355
.bs-examples h4 {
  margin-bottom: 5px;
}
.bs-examples p {
  margin-bottom: 20px;
}
Mark Otto's avatar
Mark Otto committed
1356
1357

/* Pseudo :focus state for showing how it looks in the docs */
1358
#focusedInput {
Mark Otto's avatar
Mark Otto committed
1359
1360
1361
1362
1363
1364
  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