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