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 .explorer-code-panel table td:first-child {
  37   width: 5em;
  38 }
  39
  40 #bootstrap-theme.api4-explorer-page .explorer-params-panel > .panel-body > div.api4-input {
  41   margin-bottom: 10px;
  42 }
  43
  44 #bootstrap-theme.api4-explorer-page .api4-input.form-inline > label {
  45   margin-right: 12px;
  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   background-color: white;
  70   font-size: 13px;
  71   margin: 0;
  72   width: auto;
  73   border: 0 none;
  74   padding: 2px 5px;
  75   text-transform: capitalize;
  76 }
  77 #bootstrap-theme.api4-explorer-page fieldset > .btn-group {
  78   position: absolute;
  79   right: 0;
  80   top: 11px;
  81 }
  82 #bootstrap-theme.api4-explorer-page fieldset > .btn-group .btn {
  83   border: 0 none;
  84 }
  85
  86 #bootstrap-theme.api4-explorer-page fieldset div.api4-input {
  87   margin-bottom: 10px;
  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 fieldset div.api4-input.ui-sortable-helper {
  95   background-color: rgba(255, 255, 255, .9);
  96 }
  97
  98 #bootstrap-theme.api4-explorer-page div.api4-input.form-inline .form-control {
  99   margin-right: 6px;
 100 }
 101
 102 #bootstrap-theme.api4-explorer-page div.api4-input.form-inline .form-control:not(.api4-option-selected) {
 103   transition: none;
 104   box-shadow: none;
 105   -webkit-box-shadow: none;
 106   -moz-box-shadow: none;
 107 }
 108
 109 #bootstrap-theme.api4-explorer-page div.api4-input.form-inline .form-control label {
 110   font-weight: normal;
 111   position: relative;
 112   top: -2px;
 113 }
 114
 115 #bootstrap-theme.api4-explorer-page .api4-where-fieldset fieldset {
 116   float: right;
 117   width: calc(100% - 58px);
 118   margin-top: -8px;
 119 }
 120
 121 #bootstrap-theme.api4-explorer-page .api4-where-fieldset.api4-sorting fieldset .api4-where-group-sortable {
 122   min-height: 3.5em;
 123 }
 124
 125 #bootstrap-theme.api4-explorer-page .api4-input-group {
 126   display: inline-block;
 127 }
 128
 129 #bootstrap-theme.api4-explorer-page .api4-clause-badge {
 130   width: 55px;
 131   display: inline-block;
 132   cursor: move;
 133 }
 134 #bootstrap-theme.api4-explorer-page .api4-clause-badge .badge {
 135   opacity: .5;
 136   position: relative;
 137 }
 138 #bootstrap-theme.api4-explorer-page .api4-clause-badge .caret {
 139   margin: 0;
 140 }
 141 #bootstrap-theme.api4-explorer-page .api4-clause-badge .crm-i {
 142   display: none;
 143   padding: 0 6px;
 144 }
 145 #bootstrap-theme.api4-explorer-page .ui-sortable-helper .api4-clause-badge .badge span {
 146   display: none;
 147 }
 148 #bootstrap-theme.api4-explorer-page .ui-sortable-helper .api4-clause-badge .crm-i {
 149   display: inline-block;
 150 }
 151
 152 #bootstrap-theme.api4-explorer-page .api4-operator,
 153 #bootstrap-theme.api4-explorer-page .api4-chain-index,
 154 #bootstrap-theme.api4-explorer-page .api4-chain-action {
 155   width: 90px;
 156 }
 157 #bootstrap-theme.api4-explorer-page .api4-chain-params {
 158   width: calc(100% - 390px);
 159 }
 160
 161 #bootstrap-theme.api4-explorer-page .api4-add-where-group-menu {
 162   min-width: 80px;
 163   background-color: rgba(186, 225, 251, 0.94);
 164 }
 165 #bootstrap-theme.api4-explorer-page .api4-add-where-group-menu a {
 166   padding: 5px 10px;
 167 }
 168
 169 /* Collapsible optgroups for select2 */
 170 div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children:not(.optgroup-expanded) > .select2-result-sub > li.select2-result {
 171   display: none;
 172 }
 173 div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children > .select2-result-label:before {
 174   font-family: FontAwesome;
 175   content: "\f0da";
 176   display: inline-block;
 177   padding-right: 3px;
 178   vertical-align: middle;
 179   font-weight: normal;
 180 }
 181 div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children.optgroup-expanded > .select2-result-label:before {
 182   content: "\f0d7";
 183 }
 184
 185 /**
 186  * Shims so the UI isn't completely broken when a Bootstrap theme is not installed
 187  */
 188 #bootstrap-theme.api4-explorer-page * {
 189   box-sizing: border-box;
 190 }
 191 .api4-explorer-page.panel {
 192   border: 1px solid grey;
 193   background-color: white;
 194 }
 195 .api4-explorer-page.panel-heading {
 196   padding: 10px 20px;
 197   color: #464354;
 198   background-color: #f3f6f7;
 199 }