Whoops, forgot to add css file

Author: Dom Harrington

packages/api-explorer/api-explorer.css

@@ -0,0 +1,368 @@
+/* Add margin to left- and right-sides of RJSF component. */
+form.rjsf {
+  margin: 0% 3%;
+}
+
+/* Remove borders surrounding params. */
+fieldset {
+  border: none;
+}
+
+/* Ensure nested objects retain full width. */
+fieldset fieldset {
+  padding: 0;
+  width: 100%;
+}
+
+/* Remove margin from nested forms (for file uploads). */
+form form.rjsf {
+  margin: 2% 2%;
+}
+
+input[type='file'] {
+  border: none !important;
+  margin-left: 0px;
+  padding: 10px;
+}
+
+/* Style table header. */
+.param-type-header {
+  color: #aeaeae;
+  font-size: 14px;
+  text-transform: uppercase;
+  border-bottom: 1px solid #ddd;
+  margin-left: 3%;
+}
+
+/* Style param labels. */
+.form-group .control-label {
+  font-weight: 400;
+  text-align: left;
+  min-width: 100px;
+  padding-right: unset;
+  float: left;
+  font-weight: bold;
+  flex: 1 1 150px;
+}
+
+/* Style param category labels. */
+legend {
+  font-weight: bold;
+  margin: 10px 0px;
+}
+
+/* Style input fields similar to current explorer. */
+input {
+  border: 1px solid #eaeaea !important;
+  border-radius: 2px;
+  padding: 8px 10px;
+  margin-left: 15px;
+}
+
+/* Prevent input fields from becoming too wide. */
+.form-group .form-control {
+  max-width: 250px;
+  flex: 1 1 150px;
+}
+
+/* Align nested input fields. */
+fieldset fieldset .form-group.field .field-description {
+  margin-left: 1em;
+}
+
+/* Add padding and top-border around nested form-groups. */
+.form-group .form-group {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-top: 1px solid #f2f2f2;
+}
+
+/* Hide border for first form-group in an object. */
+fieldset .form-group:first-of-type {
+  border-top: none;
+}
+
+/* Render each object's param container as a flex object.
+   Allows for better aligning of fields, labels, etc. */
+fieldset .form-group {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  align-content: center;
+}
+
+/* Parameters for nested objects should be indented. */
+fieldset fieldset {
+  margin-left: 0%;
+}
+
+/* Allow description to scale to 2x size of input field and
+   param titles (some endpoints have lengthy descriptions.
+   Also add styling. */
+.field-description {
+  flex: 2 1 100px;
+  text-align: left;
+  font-size: 14px !important;
+  font-weight: 300;
+  margin-bottom: 0px;
+}
+
+/* Add thick left border to nested params (show hierarchy). */
+fieldset fieldset .form-group {
+  border-left: 10px solid #f2f2f2;
+}
+
+/* Add margin to label for nested params. */
+fieldset fieldset .form-group label {
+  margin-left: 1em;
+}
+
+.form-group.field select {
+  margin-left: 15px;
+}
+
+/* Fix how booleans are displayed. */
+.checkbox {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: space-around;
+}
+
+.checkbox :nth-child(1) {
+  order: 2;
+}
+
+.checkbox :nth-child(2) {
+  order: 1;
+}
+
+.checkbox > .field-description {
+  margin-left: 1em;
+}
+
+.checkbox > label {
+  font-size: 14px !important;
+  font-weight: bold;
+}
+
+.checkbox input[type='checkbox'] {
+  margin-right: 1em;
+}
+
+/* Style select boxes. */
+
+.field .form-group select {
+  border: 1px solid #eaeaea !important;
+  border-radius: 2px;
+  padding: 8px 10px;
+  margin-left: 15px;
+  height: 30px;
+}
+
+/* Display arrays as flex containers, don't wrap, center-align vertically. */
+.array-item {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  align-content: center;
+  justify-content: flex-start;
+  flex: 1 1 100%;
+}
+
+/* Remove left- */
+.array-item .form-group.field {
+  border-left: none;
+}
+
+/* For each nested object in an array, add border. */
+.array-item fieldset {
+  border-left: 10px solid #f2f2f2;
+  background: rgba(244, 244, 244, 0.1);
+  padding-left: 1em;
+  padding-right: 1em;
+  margin-left: 1em;
+}
+
+ /* For each nested object in an array, unset max-width for description. */
+ .array-item fieldset .field-description {
+  max-width: unset;
+  text-align: left;
+}
+
+/* For descriptions of arrays or nested objects, right-align and add padding above. */
+.field-array > legend {
+  text-align: left;
+  padding-top: 5px !important;
+}
+
+/* Similarly as above, but for .field-description's instead of <legend>'s. */
+.field-array > .field-description {
+  text-align: left;
+}
+
+/* For arrays, override Bootstrap col-xs-9 properties. */
+.array-item .col-xs-9 {
+  padding: 0px;
+  flex-basis: auto;
+  min-width: 200px;
+  max-width: 90%;
+}
+
+/* Ensure that nested arrays have full-width input fields. */
+.array-item .col-xs-9 .form-group .form-control {
+  width: 100%;
+}
+
+/* Remove left-margins from rows that are offset with Bootstrap's grid system. */
+.row .col-xs-offset-9 {
+  margin-left: 0px;
+}
+
+/* Override Bootstrap properties for "add" button (for arrays). */
+.array-item-add.col-xs-3 {
+  flex-basis: unset;
+  max-width: unset;
+  margin-top: 10px;
+}
+
+/* For up/down/remove toolbox for items in arrays, change default size. */
+.array-item-toolbox.col-xs-3 {
+  flex-basis: 12%;
+}
+
+/* Align up/down/remove toolbox to the right. */
+.array-item-toolbox .btn-group {
+  justify-content: flex-start;
+}
+
+/* Reset padding and remove border + other styles from buttons in up/down/remove toolbox. */
+.array-item-toolbox button {
+  padding-left: 8px;
+  padding-right: 8px;
+  border: none;
+  width: 30px !important;
+  height: 30px !important;
+  flex: unset !important;
+}
+
+.btn:active {
+  box-shadow: none;
+}
+
+.btn:focus {
+  outline: none;
+}
+
+.btn.btn-default {
+  border: none;
+}
+
+.btn.btn-default:hover {
+  border: none;
+}
+
+.btn.btn-add::after {
+  content: '+';
+}
+
+.btn.array-item-move-up::after {
+  content: '↑';
+}
+
+/*TODO fix this?*/
+.btn.array-item-move-up[disabled]::after {
+  font-weight: lighter;
+}
+
+.btn.array-item-move-down::after {
+  content: '↓';
+}
+
+/*TODO fix this?*/
+.btn.array-item-move-down[disabled] {
+  font-weight: lighter;
+}
+
+.btn.array-item-remove::after {
+  content: '✕';
+}
+
+button[disabled] {
+  color: #d2d2d2 !important;
+}
+
+.field.field-array-of-string legend::after {
+  content: 'array of strings';
+  background: #f2f2f2;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 11px;
+  font-weight: lighter;
+  margin-left: 10px;
+  padding: 3px;
+}
+
+.field.field-array-of-integer legend::after {
+  content: 'array of integers';
+  background: #f2f2f2;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 11px;
+  font-weight: lighter;
+  margin-left: 10px;
+  padding: 3px;
+}
+
+.field.field-array-of-object legend::after {
+  content: 'array of objects';
+  background: #f2f2f2;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 11px;
+  font-weight: lighter;
+  margin-left: 10px;
+  padding: 3px;
+}
+
+
+.field.field-integer label::after {
+  content: 'integer';
+  background: #f2f2f2;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 11px;
+  font-weight: lighter;
+  margin-left: 10px;
+  padding: 3px;
+}
+
+.field.field-string label::after {
+  content: 'string';
+  background: #f2f2f2;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 11px;
+  font-weight: lighter;
+  margin-left: 10px;
+  padding: 3px;
+}
+
+.field.field-boolean label::after {
+  content: 'boolean';
+  background: #f2f2f2;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 11px;
+  font-weight: lighter;
+  margin-left: 10px;
+  padding: 3px;
+}
+/*TODO fix this*/
+/*.array-item .field-string::before {
+  content: 'string';
+  font-weight: lighter;
+  float: right;
+  margin-right: 3%;
+}*/