docs.css 24.5 KB
Newer Older
1001
1002
1003
  margin: 20px;
}

Mark Otto's avatar
Mark Otto committed
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
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
/* 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
1053

1054
/* Responsive (scrollable) doc tables */
1055
.table-responsive .highlight pre {
1056
1057
1058
  white-space: normal;
}

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


Mark Otto's avatar
Mark Otto committed
1122
1123
1124
1125
1126
1127
1128
/*
 * Glyphicons
 *
 * Special styles for displaying the icons and their classes in the docs.
 */

.bs-glyphicons {
1129
1130
1131
1132
  margin: 0 -19px 20px -16px;
  overflow: hidden;
}
.bs-glyphicons-list {
Mark Otto's avatar
Mark Otto committed
1133
1134
1135
1136
1137
1138
1139
1140
  padding-left: 0;
  list-style: none;
}
.bs-glyphicons li {
  float: left;
  width: 25%;
  height: 115px;
  padding: 10px;
1141
  font-size: 10px;
Mark Otto's avatar
Mark Otto committed
1142
1143
  line-height: 1.4;
  text-align: center;
Mark Otto's avatar
Mark Otto committed
1144
1145
  border: 1px solid #fff;
  background-color: #f9f9f9;
Mark Otto's avatar
Mark Otto committed
1146
1147
}
.bs-glyphicons .glyphicon {
1148
1149
  margin-top: 5px;
  margin-bottom: 10px;
Mark Otto's avatar
Mark Otto committed
1150
1151
  font-size: 24px;
}
1152
1153
1154
.bs-glyphicons .glyphicon-class {
  display: block;
  text-align: center;
Mark Otto's avatar
Mark Otto committed
1155
  word-wrap: break-word; /* Help out IE10+ with class names */
1156
}
Mark Otto's avatar
Mark Otto committed
1157
.bs-glyphicons li:hover {
Mark Otto's avatar
Mark Otto committed
1158
1159
  color: #fff;
  background-color: #563d7c;
Mark Otto's avatar
Mark Otto committed
1160
1161
1162
}

@media (min-width: 768px) {
1163
1164
1165
1166
  .bs-glyphicons {
    margin-left: 0;
    margin-right: 0;
  }
Mark Otto's avatar
Mark Otto committed
1167
1168
  .bs-glyphicons li {
    width: 12.5%;
1169
    font-size: 12px;
Mark Otto's avatar
Mark Otto committed
1170
1171
1172
1173
  }
}


Mark Otto's avatar
Mark Otto committed
1174
1175
1176
1177
1178
1179
1180
/*
 * 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
1181

Mark Otto's avatar
Mark Otto committed
1182
1183
.bs-customizer .toggle {
  float: right;
Mark Otto's avatar
Mark Otto committed
1184
  margin-top: 85px; /* On account of ghetto navbar fix */
Mark Otto's avatar
Mark Otto committed
1185
}
Mark Otto's avatar
Mark Otto committed
1186

Mark Otto's avatar
Mark Otto committed
1187
1188
1189
1190
/* Headings and form contrls */
.bs-customizer label {
  margin-top: 10px;
  font-weight: 500;
1191
  color: #555;
Mark Otto's avatar
Mark Otto committed
1192
}
Mark Otto's avatar
Mark Otto committed
1193
1194
1195
1196
.bs-customizer h2 {
  margin-top: 0;
  margin-bottom: 5px;
  padding-top: 30px;
Mark Otto's avatar
Mark Otto committed
1197
}
1198
1199
1200
1201
.bs-customizer h3 {
  margin-bottom: 0;
}
.bs-customizer h4 {
Mark Otto's avatar
Mark Otto committed
1202
  margin-top: 15px;
1203
1204
1205
1206
  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
1207
  margin-bottom: 5px;
Mark Otto's avatar
Mark Otto committed
1208
}
Mark Otto's avatar
Mark Otto committed
1209
1210
1211
.bs-customizer input[type="text"] {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  background-color: #fafafa;
Mark Otto's avatar
Mark Otto committed
1212
}
Mark Otto's avatar
Mark Otto committed
1213
1214
.bs-customizer .help-block {
  font-size: 12px;
1215
  margin-bottom: 5px;
Mark Otto's avatar
Mark Otto committed
1216
1217
}

Mark Otto's avatar
Mark Otto committed
1218
1219
1220
/* For the variables, use regular weight */
#less-section label {
  font-weight: normal;
Mark Otto's avatar
Mark Otto committed
1221
}
Mark Otto's avatar
Mark Otto committed
1222
1223

/* Downloads */
Mark Otto's avatar
Mark Otto committed
1224
1225
.bs-customize-download .btn-outline {
  padding: 20px;
Mark Otto's avatar
Mark Otto committed
1226
}
Mark Otto's avatar
Mark Otto committed
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239

/* 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
1240
}
Mark Otto's avatar
Mark Otto committed
1241
.bs-customizer-alert .close {
1242
1243
  margin-top: -4px;
  font-size: 24px;
Mark Otto's avatar
Mark Otto committed
1244
}
Mark Otto's avatar
Mark Otto committed
1245
1246
.bs-customizer-alert p {
  margin-bottom: 0;
1247
}
1248
.bs-customizer-alert .glyphicon {
1249
1250
1251
1252
1253
1254
1255
1256
  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);
1257
}
Mark Otto's avatar
Mark Otto committed
1258
1259


Mark Otto's avatar
Mark Otto committed
1260
1261
1262
1263
1264
/*
 * Miscellaneous
 *
 * Odds and ends for optimum docs display.
 */
Mark Otto's avatar
Mark Otto committed
1265

1266
1267
1268
1269
1270
 /* About page */
 .bs-about {
  font-size: 16px;
 }

Mark Otto's avatar
Mark Otto committed
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
.bs-brand {
  padding-top: 15px;
  overflow: hidden; /* clearfix */
  border-radius: 4px;
}
.bs-brand:after {
  display: none;
}
.bs-brand h1 {
  margin: 40px 0;
  font-size: 70px;
  text-align: center;
  color: #563d7c;
}
@media (min-width: 768px) {
  .bs-brand h1 {
    float: left;
    width: 50%;
  }
}

Mark Otto's avatar
Mark Otto committed
1292
/* Examples gallery: space out content better */
Mark Otto's avatar
Mark Otto committed
1293
1294
1295
.bs-examples .thumbnail {
  margin-bottom: 10px;
}
Mark Otto's avatar
Mark Otto committed
1296
1297
1298
1299
1300
1301
.bs-examples h4 {
  margin-bottom: 5px;
}
.bs-examples p {
  margin-bottom: 20px;
}
Mark Otto's avatar
Mark Otto committed
1302
1303

/* Pseudo :focus state for showing how it looks in the docs */
1304
#focusedInput {
Mark Otto's avatar
Mark Otto committed
1305
1306
1307
1308
1309
1310
1311
  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);
}

Mark Otto's avatar
Mark Otto committed
1312
1313
1314
1315
/* Better spacing on download options in getting started */
.bs-docs-dl-options h4 {
  margin-top: 15px;
  margin-bottom: 5px;
Mark Otto's avatar
Mark Otto committed
1316
}
For faster browsing, not all history is shown. View entire blame