Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
Bringing in css from separate file in packages/api-explorer
Browse files Browse the repository at this point in the history
  • Loading branch information
Dom Harrington committed Aug 7, 2018
1 parent 4df75f5 commit 7e9c9d3
Show file tree
Hide file tree
Showing 5 changed files with 234 additions and 371 deletions.
371 changes: 0 additions & 371 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,377 +14,6 @@
padding-left: 0;
}
</style>
<style type="text/css">

/* 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%;
}*/
</style>
</head>
<body>
<section id="hub-content"></section>
Expand Down
2 changes: 2 additions & 0 deletions example/src/Demo.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ const createDocs = require('../../packages/api-explorer/lib/create-docs');
const ApiExplorer = require('../../packages/api-explorer/src');
const ApiList = require('./ApiList');

require('../../packages/api-explorer/api-explorer.css');

class Demo extends React.Component {
constructor(props) {
super(props);
Expand Down
Loading

0 comments on commit 7e9c9d3

Please sign in to comment.