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-row > .panel {
  20   margin: 10px;
  21   min-height: 500px;
  22 }
  23 /* Fix weird shorditch style */
  24 #bootstrap-theme.api4-explorer-page .api4-explorer-row .panel .panel-heading {
  25   border-bottom-right-radius: 0;
  26   border-bottom-left-radius: 0;
  27   margin-bottom: 0;
  28 }
  29 #bootstrap-theme .panel-heading li > a {
  30   background-color: #f1f1f18c;
  31 }
  32 #bootstrap-theme.api4-explorer-page .explorer-code-panel pre {
  33   min-height: 3.3em;
  34   word-break: break-all;
  35   white-space: pre-wrap;
  36 }
  37 #bootstrap-theme.api4-explorer-page .explorer-code-panel .panel-heading>.nav li a {
  38   text-transform: uppercase;
  39 }
  40
  41 #bootstrap-theme.api4-explorer-page .explorer-params-panel > .panel-body > div.api4-input {
  42   margin-bottom: 10px;
  43 }
  44
  45 #bootstrap-theme.api4-explorer-page .explorer-help-panel .panel-body {
  46   word-break: break-word;
  47 }
  48
  49 /* because each help p is in a div, this undoes bootstrap removing margin from last-child */
  50 #bootstrap-theme.api4-explorer-page .explorer-help-panel .panel-body p {
  51   margin-bottom: 10px;
  52 }
  53
  54 #bootstrap-theme.api4-explorer-page form label {
  55   text-transform: capitalize;
  56 }
  57
  58 #bootstrap-theme.api4-explorer-page fieldset {
  59   padding: 6px;
  60   border: 1px solid lightgrey;
  61   margin-bottom: 10px;
  62   position: relative;
  63 }
  64
  65 #bootstrap-theme.api4-explorer-page fieldset legend {
  66   font-size: 13px;
  67   margin: 0;
  68   width: auto;
  69   border: 0 none;
  70   padding: 2px 5px;
  71   text-transform: capitalize;
  72 }
  73 #bootstrap-theme.api4-explorer-page crm-api4-clause > .btn-group {
  74   position: absolute;
  75   right: 0;
  76   top: 0;
  77 }
  78 #bootstrap-theme.api4-explorer-page crm-api4-clause > .btn-group .btn {
  79   border: 0 none;
  80 }
  81
  82 #bootstrap-theme.api4-explorer-page fieldset div.api4-input {
  83   margin-bottom: 10px;
  84 }
  85
  86 #bootstrap-theme.api4-explorer-page fieldset div.api4-input.ui-sortable-helper {
  87   background-color: rgba(255, 255, 255, .9);
  88 }
  89
  90 #bootstrap-theme.api4-explorer-page fieldset div.api4-input.ui-sortable-helper {
  91   background-color: rgba(255, 255, 255, .9);
  92 }
  93
  94 #bootstrap-theme.api4-explorer-page .api4-clause-fieldset fieldset {
  95   float: right;
  96   width: calc(100% - 58px);
  97   margin-top: -8px;
  98 }
  99
 100 #bootstrap-theme.api4-explorer-page .api4-clause-fieldset.api4-sorting fieldset .api4-clause-group-sortable {
 101   min-height: 3.5em;
 102 }
 103
 104 #bootstrap-theme.api4-explorer-page .api4-input-group {
 105   display: inline-block;
 106 }
 107
 108 #bootstrap-theme.api4-explorer-page i.fa-arrows {
 109   cursor: move;
 110 }
 111
 112 #bootstrap-theme.api4-explorer-page .api4-clause-badge {
 113   width: 55px;
 114   display: inline-block;
 115   cursor: move;
 116 }
 117 #bootstrap-theme.api4-explorer-page .api4-clause-badge .badge {
 118   opacity: .5;
 119   position: relative;
 120 }
 121 #bootstrap-theme.api4-explorer-page .api4-clause-badge .caret {
 122   margin: 0;
 123 }
 124 #bootstrap-theme.api4-explorer-page .api4-clause-badge .crm-i {
 125   display: none;
 126   padding: 0 6px;
 127 }
 128 #bootstrap-theme.api4-explorer-page .ui-sortable-helper .api4-clause-badge .badge span {
 129   display: none;
 130 }
 131 #bootstrap-theme.api4-explorer-page .ui-sortable-helper .api4-clause-badge .crm-i {
 132   display: inline-block;
 133 }
 134
 135 #bootstrap-theme.api4-explorer-page .api4-operator,
 136 #bootstrap-theme.api4-explorer-page .api4-chain-index,
 137 #bootstrap-theme.api4-explorer-page .api4-chain-action {
 138   width: 90px;
 139 }
 140 #bootstrap-theme.api4-explorer-page .api4-chain-params {
 141   width: calc(100% - 390px);
 142 }
 143
 144 #bootstrap-theme.api4-explorer-page .api4-add-where-group-menu {
 145   min-width: 80px;
 146   background-color: rgba(186, 225, 251, 0.94);
 147 }
 148 #bootstrap-theme.api4-explorer-page .api4-add-where-group-menu a {
 149   padding: 5px 10px;
 150 }
 151
 152 #bootstrap-theme.api4-explorer-page .form-control.huge {
 153   width: 25em;
 154 }
 155
 156 #bootstrap-theme.api4-explorer-page .form-control.twenty {
 157   width: 20em;
 158 }
 159
 160 #bootstrap-theme.api4-explorer-page .form-control.api4-index {
 161   width: 8em;
 162 }
 163
 164 /* Another weird shoreditch fix */
 165 #bootstrap-theme .form-inline div.checkbox {
 166   margin-right: 1em;
 167 }
 168 #bootstrap-theme .form-inline div.checkbox label input[type=checkbox] {
 169   margin: 0;
 170 }
 171
 172 /**
 173  * Shims so the UI isn't completely broken when a Bootstrap theme is not installed
 174  */
 175 #bootstrap-theme.api4-explorer-page * {
 176   box-sizing: border-box;
 177 }
 178 .api4-explorer-page.panel {
 179   border: 1px solid grey;
 180   background-color: white;
 181 }
 182 .api4-explorer-page.panel-heading {
 183   padding: 10px 20px;
 184   color: #464354;
 185   background-color: #f3f6f7;
 186 }