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 pre {
  43   min-height: 3.3em;
  44   word-break: break-all;
  45   white-space: pre-wrap;
  46 }
  47 #bootstrap-theme.api4-explorer-page .explorer-code-panel .panel-heading.nav li a {
  48   text-transform: uppercase;
  49 }
  50
  51 #bootstrap-theme.api4-explorer-page .explorer-params-panel > .panel-body > div.api4-input {
  52   margin-bottom: 10px;
  53 }
  54
  55 #bootstrap-theme.api4-explorer-page .explorer-help-panel .panel-body {
  56   word-break: break-word;
  57 }
  58
  59 /* because each help p is in a div, this undoes bootstrap removing margin from last-child */
  60 #bootstrap-theme.api4-explorer-page .explorer-help-panel .panel-body p {
  61   margin-bottom: 10px;
  62 }
  63
  64 #bootstrap-theme.api4-explorer-page form label {
  65   text-transform: capitalize;
  66 }
  67
  68 #bootstrap-theme.api4-explorer-page fieldset {
  69   padding: 6px;
  70   border: 1px solid lightgrey;
  71   margin-bottom: 10px;
  72   position: relative;
  73 }
  74
  75 #bootstrap-theme.api4-explorer-page fieldset legend {
  76   font-size: 13px;
  77   margin: 0;
  78   width: auto;
  79   border: 0 none;
  80   padding: 2px 5px;
  81   text-transform: capitalize;
  82 }
  83 #bootstrap-theme.api4-explorer-page crm-api4-clause > .btn-group {
  84   position: absolute;
  85   right: 0;
  86   top: 0;
  87 }
  88 #bootstrap-theme.api4-explorer-page crm-api4-clause > .btn-group .btn {
  89   border: 0 none;
  90 }
  91
  92 #bootstrap-theme.api4-explorer-page fieldset div.api4-input {
  93   margin-bottom: 10px;
  94 }
  95
  96 #bootstrap-theme.api4-explorer-page fieldset div.api4-input.ui-sortable-helper {
  97   background-color: rgba(255, 255, 255, .9);
  98 }
  99
 100 #bootstrap-theme.api4-explorer-page fieldset div.api4-input.ui-sortable-helper {
 101   background-color: rgba(255, 255, 255, .9);
 102 }
 103
 104 #bootstrap-theme.api4-explorer-page .api4-clause-fieldset fieldset {
 105   float: right;
 106   width: calc(100% - 58px);
 107   margin-top: -8px;
 108 }
 109
 110 #bootstrap-theme.api4-explorer-page .api4-clause-fieldset.api4-sorting fieldset .api4-clause-group-sortable {
 111   min-height: 3.5em;
 112 }
 113
 114 #bootstrap-theme.api4-explorer-page .api4-input-group {
 115   display: inline-block;
 116 }
 117
 118 #bootstrap-theme.api4-explorer-page i.fa-arrows {
 119   cursor: move;
 120 }
 121
 122 #bootstrap-theme.api4-explorer-page .api4-clause-badge {
 123   width: 55px;
 124   display: inline-block;
 125   cursor: move;
 126 }
 127 #bootstrap-theme.api4-explorer-page .api4-clause-badge .badge {
 128   opacity: .5;
 129   position: relative;
 130 }
 131 #bootstrap-theme.api4-explorer-page .api4-clause-badge .caret {
 132   margin: 0;
 133 }
 134 #bootstrap-theme.api4-explorer-page .api4-clause-badge .crm-i {
 135   display: none;
 136   padding: 0 6px;
 137 }
 138 #bootstrap-theme.api4-explorer-page .ui-sortable-helper .api4-clause-badge .badge span {
 139   display: none;
 140 }
 141 #bootstrap-theme.api4-explorer-page .ui-sortable-helper .api4-clause-badge .crm-i {
 142   display: inline-block;
 143 }
 144
 145 #bootstrap-theme.api4-explorer-page .api4-operator,
 146 #bootstrap-theme.api4-explorer-page .api4-chain-index,
 147 #bootstrap-theme.api4-explorer-page .api4-chain-action {
 148   width: 90px;
 149 }
 150 #bootstrap-theme.api4-explorer-page .api4-chain-params {
 151   width: calc(100% - 390px);
 152 }
 153
 154 #bootstrap-theme.api4-explorer-page .api4-add-where-group-menu {
 155   min-width: 80px;
 156   background-color: rgba(186, 225, 251, 0.94);
 157 }
 158 #bootstrap-theme.api4-explorer-page .api4-add-where-group-menu a {
 159   padding: 5px 10px;
 160 }
 161
 162 /* Collapsible optgroups for select2 */
 163 div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children:not(.optgroup-expanded) > .select2-result-sub > li.select2-result {
 164   display: none;
 165 }
 166 div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children > .select2-result-label:before {
 167   font-family: FontAwesome;
 168   content: "\f0da";
 169   display: inline-block;
 170   padding-right: 3px;
 171   vertical-align: middle;
 172   font-weight: normal;
 173 }
 174 div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children.optgroup-expanded > .select2-result-label:before {
 175   content: "\f0d7";
 176 }
 177
 178 #bootstrap-theme.api4-explorer-page .form-control.huge {
 179   width: 25em;
 180 }
 181
 182 #bootstrap-theme.api4-explorer-page .form-control.twenty {
 183   width: 20em;
 184 }
 185
 186 /* Another weird shoreditch fix */
 187 #bootstrap-theme .form-inline div.checkbox {
 188   margin-right: 1em;
 189 }
 190 #bootstrap-theme .form-inline div.checkbox label input[type=checkbox] {
 191   margin: 0;
 192 }
 193
 194 /**
 195  * Shims so the UI isn't completely broken when a Bootstrap theme is not installed
 196  */
 197 #bootstrap-theme.api4-explorer-page * {
 198   box-sizing: border-box;
 199 }
 200 .api4-explorer-page.panel {
 201   border: 1px solid grey;
 202   background-color: white;
 203 }
 204 .api4-explorer-page.panel-heading {
 205   padding: 10px 20px;
 206   color: #464354;
 207   background-color: #f3f6f7;
 208 }