Merge pull request #21254 from colemanw/afformLocationType
[civicrm-core.git] / css / api4-explorer.css
CommitLineData
19b53e5b
C
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}
e869b1fe 19#bootstrap-theme .api4-explorer-row > .panel {
19b53e5b 20 margin: 10px;
9cea3619 21 min-height: 500px;
19b53e5b 22}
19b53e5b
C
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}
b65fa6dc
CW
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}
63f78a8d 35#bootstrap-theme.api4-explorer-page .explorer-code-panel pre {
19d01932 36 min-height: 3.3em;
63f78a8d
CW
37 word-break: break-all;
38 white-space: pre-wrap;
19d01932
CW
39}
40#bootstrap-theme.api4-explorer-page .explorer-code-panel .panel-heading.nav li a {
41 text-transform: uppercase;
19b53e5b
C
42}
43
44#bootstrap-theme.api4-explorer-page .explorer-params-panel > .panel-body > div.api4-input {
45 margin-bottom: 10px;
46}
47
19b53e5b
C
48#bootstrap-theme.api4-explorer-page .explorer-help-panel .panel-body {
49 word-break: break-word;
50}
51
9cea3619
CW
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
19b53e5b
C
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 {
19b53e5b
C
69 font-size: 13px;
70 margin: 0;
71 width: auto;
72 border: 0 none;
73 padding: 2px 5px;
74 text-transform: capitalize;
75}
9b057f1e 76#bootstrap-theme.api4-explorer-page crm-api4-clause > .btn-group {
19b53e5b
C
77 position: absolute;
78 right: 0;
9b057f1e 79 top: 0;
19b53e5b 80}
9b057f1e 81#bootstrap-theme.api4-explorer-page crm-api4-clause > .btn-group .btn {
19b53e5b
C
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
24463df7 97#bootstrap-theme.api4-explorer-page .api4-clause-fieldset fieldset {
19b53e5b
C
98 float: right;
99 width: calc(100% - 58px);
100 margin-top: -8px;
101}
102
24463df7 103#bootstrap-theme.api4-explorer-page .api4-clause-fieldset.api4-sorting fieldset .api4-clause-group-sortable {
19b53e5b
C
104 min-height: 3.5em;
105}
106
107#bootstrap-theme.api4-explorer-page .api4-input-group {
108 display: inline-block;
109}
110
292c1648
CW
111#bootstrap-theme.api4-explorer-page i.fa-arrows {
112 cursor: move;
113}
114
19b53e5b
C
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,
19b53e5b 140#bootstrap-theme.api4-explorer-page .api4-chain-action {
6ba6f2bd 141 width: 90px;
19b53e5b
C
142}
143#bootstrap-theme.api4-explorer-page .api4-chain-params {
2a68b84a 144 width: calc(100% - 390px);
19b53e5b
C
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
a26e006b
CW
155#bootstrap-theme.api4-explorer-page .form-control.huge {
156 width: 25em;
157}
158
37d82abe
CW
159#bootstrap-theme.api4-explorer-page .form-control.twenty {
160 width: 20em;
161}
162
d7507e89
CW
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
19b53e5b
C
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}