css/api4-explorer.css

   1 /* Style rules for Api4 Explorer */
   2
   3 #bootstrap-theme.api4-explorer-page .panel-heading {
   4   height: 50px;
   5 }
   6 #bootstrap-theme.api4-explorer-page .panel-body {
   7   min-height: calc( 100% - 50px);
   8 }
   9 #bootstrap-theme.api4-explorer-page .explorer-params-panel .panel-heading {
  10   padding-top: 12px;
  11 }
  12 #bootstrap-theme.api4-explorer-page .explorer-params-panel .panel-heading button {
  13   position: relative;
  14   top: -5px;
  15 }
  16 #bootstrap-theme .explorer-params-panel .panel-heading .form-inline > .select2-container {
  17   max-width: 25% !important;
  18 }
  19 #bootstrap-theme.api4-explorer-page .api4-explorer-row {
  20   display: flex;
  21 }
  22 #bootstrap-theme.api4-explorer-page > div > .panel {
  23   flex: 1;
  24   margin: 10px;
  25   min-height: 500px;
  26 }
  27 #bootstrap-theme.api4-explorer-page > div > form.panel {
  28   flex: 2;
  29 }
  30 /* Fix weird shorditch style */
  31 #bootstrap-theme.api4-explorer-page .api4-explorer-row .panel .panel-heading {
  32   border-bottom-right-radius: 0;
  33   border-bottom-left-radius: 0;
  34   margin-bottom: 0;
  35 }
  36 #bootstrap-theme.api4-explorer-page .panel-heading.nav-tabs {
  37   padding: 8px 0 0 20px;
  38 }
  39 #bootstrap-theme .panel-heading>li>a {
  40   background-color: #f1f1f18c
  41 }
  42 #bootstrap-theme.api4-explorer-page .explorer-code-panel table td:first-child {
  43   width: 6em;
  44   word-break: break-word;
  45 }
  46 #bootstrap-theme.api4-explorer-page .explorer-code-panel table td pre {
  47   min-height: 3.3em;
  48 }
  49 #bootstrap-theme.api4-explorer-page .explorer-code-panel .panel-heading.nav li a {
  50   text-transform: uppercase;
  51 }
  52
  53 #bootstrap-theme.api4-explorer-page .explorer-params-panel > .panel-body > div.api4-input {
  54   margin-bottom: 10px;
  55 }
  56
  57 #bootstrap-theme.api4-explorer-page .api4-input.form-inline > label {
  58   margin-right: 12px;
  59 }
  60
  61 #bootstrap-theme.api4-explorer-page .explorer-help-panel .panel-body {
  62   word-break: break-word;
  63 }
  64
  65 /* because each help p is in a div, this undoes bootstrap removing margin from last-child */
  66 #bootstrap-theme.api4-explorer-page .explorer-help-panel .panel-body p {
  67   margin-bottom: 10px;
  68 }
  69
  70 #bootstrap-theme.api4-explorer-page form label {
  71   text-transform: capitalize;
  72 }
  73
  74 #bootstrap-theme.api4-explorer-page fieldset {
  75   padding: 6px;
  76   border: 1px solid lightgrey;
  77   margin-bottom: 10px;
  78   position: relative;
  79 }
  80
  81 #bootstrap-theme.api4-explorer-page fieldset legend {
  82   background-color: white;
  83   font-size: 13px;
  84   margin: 0;
  85   width: auto;
  86   border: 0 none;
  87   padding: 2px 5px;
  88   text-transform: capitalize;
  89 }
  90 #bootstrap-theme.api4-explorer-page fieldset > .btn-group {
  91   position: absolute;
  92   right: 0;
  93   top: 11px;
  94 }
  95 #bootstrap-theme.api4-explorer-page fieldset > .btn-group .btn {
  96   border: 0 none;
  97 }
  98
  99 #bootstrap-theme.api4-explorer-page fieldset div.api4-input {
 100   margin-bottom: 10px;
 101 }
 102
 103 #bootstrap-theme.api4-explorer-page fieldset div.api4-input.ui-sortable-helper {
 104   background-color: rgba(255, 255, 255, .9);
 105 }
 106
 107 #bootstrap-theme.api4-explorer-page fieldset div.api4-input.ui-sortable-helper {
 108   background-color: rgba(255, 255, 255, .9);
 109 }
 110
 111 #bootstrap-theme.api4-explorer-page div.api4-input.form-inline label.form-control {
 112   margin-right: 6px;
 113 }
 114 #bootstrap-theme.api4-explorer-page div.api4-input.form-inline label.form-control input[type=checkbox] {
 115   margin: 0 2px 0 0;
 116 }
 117
 118 #bootstrap-theme.api4-explorer-page div.api4-input.form-inline label.form-control:not(.api4-option-selected) {
 119   transition: none;
 120   box-shadow: none;
 121   -webkit-box-shadow: none;
 122   -moz-box-shadow: none;
 123   font-weight: normal;
 124 }
 125
 126 #bootstrap-theme.api4-explorer-page div.api4-input.form-inline .form-control label {
 127   font-weight: normal;
 128   position: relative;
 129   top: -2px;
 130 }
 131
 132 #bootstrap-theme.api4-explorer-page .api4-clause-fieldset fieldset {
 133   float: right;
 134   width: calc(100% - 58px);
 135   margin-top: -8px;
 136 }
 137
 138 #bootstrap-theme.api4-explorer-page .api4-clause-fieldset.api4-sorting fieldset .api4-clause-group-sortable {
 139   min-height: 3.5em;
 140 }
 141
 142 #bootstrap-theme.api4-explorer-page .api4-input-group {
 143   display: inline-block;
 144 }
 145
 146 #bootstrap-theme.api4-explorer-page i.fa-arrows {
 147   cursor: move;
 148 }
 149
 150 #bootstrap-theme.api4-explorer-page .api4-clause-badge {
 151   width: 55px;
 152   display: inline-block;
 153   cursor: move;
 154 }
 155 #bootstrap-theme.api4-explorer-page .api4-clause-badge .badge {
 156   opacity: .5;
 157   position: relative;
 158 }
 159 #bootstrap-theme.api4-explorer-page .api4-clause-badge .caret {
 160   margin: 0;
 161 }
 162 #bootstrap-theme.api4-explorer-page .api4-clause-badge .crm-i {
 163   display: none;
 164   padding: 0 6px;
 165 }
 166 #bootstrap-theme.api4-explorer-page .ui-sortable-helper .api4-clause-badge .badge span {
 167   display: none;
 168 }
 169 #bootstrap-theme.api4-explorer-page .ui-sortable-helper .api4-clause-badge .crm-i {
 170   display: inline-block;
 171 }
 172
 173 #bootstrap-theme.api4-explorer-page .api4-operator,
 174 #bootstrap-theme.api4-explorer-page .api4-chain-index,
 175 #bootstrap-theme.api4-explorer-page .api4-chain-action {
 176   width: 90px;
 177 }
 178 #bootstrap-theme.api4-explorer-page .api4-chain-params {
 179   width: calc(100% - 390px);
 180 }
 181
 182 #bootstrap-theme.api4-explorer-page .api4-add-where-group-menu {
 183   min-width: 80px;
 184   background-color: rgba(186, 225, 251, 0.94);
 185 }
 186 #bootstrap-theme.api4-explorer-page .api4-add-where-group-menu a {
 187   padding: 5px 10px;
 188 }
 189
 190 /* Collapsible optgroups for select2 */
 191 div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children:not(.optgroup-expanded) > .select2-result-sub > li.select2-result {
 192   display: none;
 193 }
 194 div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children > .select2-result-label:before {
 195   font-family: FontAwesome;
 196   content: "\f0da";
 197   display: inline-block;
 198   padding-right: 3px;
 199   vertical-align: middle;
 200   font-weight: normal;
 201 }
 202 div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children.optgroup-expanded > .select2-result-label:before {
 203   content: "\f0d7";
 204 }
 205
 206 #bootstrap-theme.api4-explorer-page .form-control.huge {
 207   width: 25em;
 208 }
 209
 210 #bootstrap-theme.api4-explorer-page .form-control.twenty {
 211   width: 20em;
 212 }
 213
 214 /* Another weird shoreditch fix */
 215 #bootstrap-theme .form-inline div.checkbox {
 216   margin-right: 1em;
 217 }
 218 #bootstrap-theme .form-inline div.checkbox label input[type=checkbox] {
 219   margin: 0;
 220 }
 221
 222 /**
 223  * Shims so the UI isn't completely broken when a Bootstrap theme is not installed
 224  */
 225 #bootstrap-theme.api4-explorer-page * {
 226   box-sizing: border-box;
 227 }
 228 .api4-explorer-page.panel {
 229   border: 1px solid grey;
 230   background-color: white;
 231 }
 232 .api4-explorer-page.panel-heading {
 233   padding: 10px 20px;
 234   color: #464354;
 235   background-color: #f3f6f7;
 236 }