editor-inline-editing-style-rtl.css 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809
  1. /* Do not modify this file directly. It is concatenated from individual module CSS files. */
  2. /* ==========================================================================
  3. ** Normalize
  4. ** ======================================================================== */
  5. html {
  6. direction: rtl;
  7. }
  8. body {
  9. font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  10. font-size: 16px;
  11. line-height: 1.4em;
  12. margin: 0;
  13. }
  14. /* Links */
  15. a,
  16. a:visited {
  17. color: #0087be;
  18. text-decoration: none;
  19. }
  20. a:hover,
  21. a:focus,
  22. a:active {
  23. color: $link-highlight;
  24. }
  25. /* ==========================================================================
  26. ** Card
  27. ** ======================================================================= */
  28. .card,
  29. body {
  30. display: block;
  31. position: relative;
  32. margin: 0 auto 10px auto;
  33. padding: 16px;
  34. box-sizing: border-box;
  35. background: white;
  36. box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3;
  37. }
  38. body {
  39. margin: 0;
  40. background: #f5f5f5;
  41. }
  42. .card:after {
  43. content: ".";
  44. display: block;
  45. height: 0;
  46. clear: both;
  47. visibility: hidden;
  48. }
  49. .card:hover,
  50. .card:focus {
  51. box-shadow: 0 0 0 1px #999, 0 1px 2px #e9eff3;
  52. }
  53. .card .delete-field {
  54. display: block;
  55. float: left;
  56. }
  57. @media ( min-width: 481px ) {
  58. .card {
  59. margin-bottom: 16px;
  60. padding: 24px;
  61. }
  62. body {
  63. padding: 24px;
  64. }
  65. }
  66. .card.is-compact {
  67. margin-bottom: 1px;
  68. }
  69. @media ( min-width: 481px ) {
  70. .card.is-compact {
  71. margin-bottom: 1px;
  72. padding: 16px 24px;
  73. }
  74. }
  75. .card > div {
  76. margin-top: 24px;
  77. }
  78. .card > div:first-child {
  79. margin-top: 0;
  80. }
  81. /* ==========================================================================
  82. ** Labels
  83. ** ======================================================================= */
  84. label {
  85. display: block;
  86. font-size: 14px;
  87. font-weight: 600;
  88. margin-bottom: 5px;
  89. margin-top: 8px;
  90. }
  91. label:first-of-type {
  92. margin-top: 4px;
  93. }
  94. /* ==========================================================================
  95. ** Text Inputs
  96. ** ======================================================================= */
  97. input[type="text"],
  98. input[type="tel"],
  99. input[type="email"],
  100. input[type="url"] {
  101. border-radius: 0;
  102. -webkit-appearance: none;
  103. -moz-appearance: none;
  104. appearance: none;
  105. box-sizing: border-box;
  106. margin: 0;
  107. padding: 7px 14px;
  108. width: 100%;
  109. color: #2e4453;
  110. font-size: 16px;
  111. line-height: 1.5;
  112. border: 1px solid #c8d7e1;
  113. background-color: #fff;
  114. transition: all .15s ease-in-out;
  115. box-shadow: none;
  116. }
  117. input[type="text"]:-ms-input-placeholder,
  118. input[type="tel"]:-ms-input-placeholder,
  119. input[type="email"]:-ms-input-placeholder,
  120. input[type="url"]:-ms-input-placeholder {
  121. color: #87a6bc;
  122. }
  123. input[type="text"]::placeholder,
  124. input[type="tel"]::placeholder,
  125. input[type="email"]::placeholder,
  126. input[type="url"]::placeholder {
  127. color: #87a6bc;
  128. }
  129. input[type="text"]:hover,
  130. input[type="tel"]:hover,
  131. input[type="email"]:hover,
  132. input[type="url"]:hover {
  133. border-color: #a8bece;
  134. }
  135. input[type="text"]:focus,
  136. input[type="tel"]:focus,
  137. input[type="email"]:focus,
  138. input[type="url"]:focus {
  139. border-color: #0087be;
  140. outline: none;
  141. box-shadow: 0 0 0 2px #78dcfa;
  142. }
  143. input[type="text"]:focus::-ms-clear,
  144. input[type="tel"]:focus::-ms-clear,
  145. input[type="email"]:focus::-ms-clear,
  146. input[type="url"]:focus::-ms-clear {
  147. display: none;
  148. }
  149. input[type="text"]:disabled,
  150. input[type="tel"]:disabled,
  151. input[type="email"]:disabled,
  152. input[type="url"]:disabled {
  153. background: #f3f6f8;
  154. border-color: #e9eff3;
  155. color: #a8bece;
  156. -webkit-text-fill-color: #a8bece;
  157. }
  158. input[type="text"]:disabled:hover,
  159. input[type="tel"]:disabled:hover,
  160. input[type="email"]:disabled:hover,
  161. input[type="url"]:disabled:hover {
  162. cursor: default;
  163. }
  164. input[type="text"]:disabled:-ms-input-placeholder,
  165. input[type="tel"]:disabled:-ms-input-placeholder,
  166. input[type="email"]:disabled:-ms-input-placeholder,
  167. input[type="url"]:disabled:-ms-input-placeholder {
  168. color: #a8bece;
  169. }
  170. input[type="text"]:disabled::placeholder,
  171. input[type="tel"]:disabled::placeholder,
  172. input[type="email"]:disabled::placeholder,
  173. input[type="url"]:disabled::placeholder {
  174. color: #a8bece;
  175. }
  176. /* ==========================================================================
  177. ** Textareas
  178. ** ======================================================================= */
  179. textarea {
  180. border-radius: 0;
  181. -webkit-appearance: none;
  182. -moz-appearance: none;
  183. appearance: none;
  184. box-sizing: border-box;
  185. margin: 0;
  186. padding: 7px 14px;
  187. height: 92px;
  188. width: 100%;
  189. color: #2e4453;
  190. font-size: 16px;
  191. line-height: 1.5;
  192. border: 1px solid #c8d7e1;
  193. background-color: #fff;
  194. transition: all .15s ease-in-out;
  195. box-shadow: none;
  196. }
  197. textarea:-ms-input-placeholder {
  198. color: #87a6bc;
  199. }
  200. textarea::placeholder {
  201. color: #87a6bc;
  202. }
  203. textarea:hover {
  204. border-color: #a8bece;
  205. }
  206. textarea:focus {
  207. border-color: #0087be;
  208. outline: none;
  209. box-shadow: 0 0 0 2px #78dcfa;
  210. }
  211. textarea:focus::-ms-clear {
  212. display: none;
  213. }
  214. textarea:disabled {
  215. background: #f3f6f8;
  216. border-color: #e9eff3;
  217. color: #a8bece;
  218. -webkit-text-fill-color: #a8bece;
  219. }
  220. textarea:disabled:hover {
  221. cursor: default;
  222. }
  223. textarea:disabled:-ms-input-placeholder {
  224. color: #a8bece;
  225. }
  226. textarea:disabled::placeholder {
  227. color: #a8bece;
  228. }
  229. /* ==========================================================================
  230. ** Checkboxes
  231. ** ======================================================================= */
  232. .checkbox,
  233. input[type="checkbox"] {
  234. -webkit-appearance: none;
  235. display: inline-block;
  236. box-sizing: border-box;
  237. margin: 2px 0 0;
  238. padding: 7px 14px;
  239. width: 16px;
  240. height: 16px;
  241. float: right;
  242. outline: 0;
  243. padding: 0;
  244. box-shadow: none;
  245. background-color: #fff;
  246. border: 1px solid #c8d7e1;
  247. color: #2e4453;
  248. font-size: 16px;
  249. line-height: 0;
  250. text-align: center;
  251. vertical-align: middle;
  252. -moz-appearance: none;
  253. appearance: none;
  254. transition: all .15s ease-in-out;
  255. clear: none;
  256. cursor: pointer;
  257. }
  258. .checkbox:checked:before,
  259. input[type="checkbox"]:checked:before {
  260. content: '\f147';
  261. font-family: Dashicons;
  262. margin: -3px -4px 0 0;
  263. float: right;
  264. display: inline-block;
  265. vertical-align: middle;
  266. width: 16px;
  267. font-size: 20px;
  268. line-height: 1;
  269. -webkit-font-smoothing: antialiased;
  270. -moz-osx-font-smoothing: grayscale;
  271. speak: none;
  272. color: #00aadc;
  273. }
  274. .checkbox:disabled:checked:before,
  275. input[type="checkbox"]:disabled:checked:before {
  276. color: #a8bece;
  277. }
  278. .checkbox:hover,
  279. input[type="checkbox"]:hover {
  280. border-color: #a8bece;
  281. }
  282. .checkbox:focus,
  283. input[type="checkbox"]:focus {
  284. border-color: #0087be;
  285. outline: none;
  286. box-shadow: 0 0 0 2px #78dcfa;
  287. }
  288. .checkbox:disabled,
  289. input[type="checkbox"]:disabled {
  290. background: #f3f6f8;
  291. border-color: #e9eff3;
  292. color: #a8bece;
  293. opacity: 1;
  294. }
  295. .checkbox:disabled:hover,
  296. input[type="checkbox"]:disabled:hover {
  297. cursor: default;
  298. }
  299. .checkbox + span,
  300. input[type="checkbox"] + span {
  301. display: block;
  302. font-weight: normal;
  303. margin-right: 24px;
  304. }
  305. /* ==========================================================================
  306. ** Radio buttons
  307. ** ======================================================================== */
  308. .radio-button,
  309. input[type=radio] {
  310. color: #2e4453;
  311. font-size: 16px;
  312. border: 1px solid #c8d7e1;
  313. background-color: #fff;
  314. transition: all .15s ease-in-out;
  315. box-sizing: border-box;
  316. -webkit-appearance: none;
  317. clear: none;
  318. cursor: pointer;
  319. display: inline-block;
  320. line-height: 0;
  321. height: 16px;
  322. margin: 2px 0 0 4px;
  323. float: right;
  324. outline: 0;
  325. padding: 0;
  326. text-align: center;
  327. vertical-align: middle;
  328. width: 16px;
  329. min-width: 16px;
  330. -moz-appearance: none;
  331. appearance: none;
  332. border-radius: 50%;
  333. line-height: 10px;
  334. }
  335. .radio-button:hover,
  336. input[type="radio"]:hover {
  337. border-color: #a8bece;
  338. }
  339. .radio-button:focus,
  340. input[type="radio"]:focus {
  341. border-color: #0087be;
  342. outline: none;
  343. box-shadow: 0 0 0 2px #78dcfa;
  344. }
  345. .radio-button:focus::-ms-clear,
  346. input[type="radio"]:focus::-ms-clear {
  347. display: none;
  348. }
  349. .radio-button:checked:before,
  350. input[type="radio"]:checked:before {
  351. float: right;
  352. display: inline-block;
  353. content: '\2022';
  354. margin: 3px;
  355. width: 8px;
  356. height: 8px;
  357. text-indent: -9999px;
  358. background: #00aadc;
  359. vertical-align: middle;
  360. border-radius: 50%;
  361. animation: grow .2s ease-in-out;
  362. }
  363. .radio-button:disabled,
  364. input[type="radio"]:disabled {
  365. background: #f3f6f8;
  366. border-color: #e9eff3;
  367. color: #a8bece;
  368. opacity: 1;
  369. -webkit-text-fill-color: #a8bece;
  370. }
  371. .radio-button:disabled:hover,
  372. input[type="radio"]:disabled:hover {
  373. cursor: default;
  374. }
  375. .radio-button:disabled:-ms-input-placeholder,
  376. input[type="radio"]:disabled:-ms-input-placeholder {
  377. color: #a8bece;
  378. }
  379. .radio-button:disabled::placeholder,
  380. input[type="radio"]:disabled::placeholder {
  381. color: #a8bece;
  382. }
  383. .radio-button:disabled:checked::before,
  384. input[type="radio"]:disabled:checked:before {
  385. background: #e9eff3;
  386. }
  387. .radio-button + span,
  388. input[type="radio"] + span {
  389. display: block;
  390. font-weight: normal;
  391. margin-right: 24px;
  392. }
  393. @keyframes grow {
  394. 0% {
  395. transform: scale(0.3);
  396. }
  397. 60% {
  398. transform: scale(1.15);
  399. }
  400. 100% {
  401. transform: scale(1);
  402. }
  403. }
  404. @keyframes grow {
  405. 0% {
  406. transform: scale(0.3);
  407. }
  408. 60% {
  409. transform: scale(1.15);
  410. }
  411. 100% {
  412. transform: scale(1);
  413. }
  414. }
  415. /* ==========================================================================
  416. ** Selects
  417. ** ======================================================================== */
  418. select {
  419. background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPmFycm93LWRvd248L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJhcnJvdy1kb3duIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiBmaWxsPSIjQzhEN0UxIj4gICAgICAgICAgICA8cGF0aCBkPSJNMTUuNSw2IEwxNyw3LjUgTDEwLjI1LDE0LjI1IEwzLjUsNy41IEw1LDYgTDEwLjI1LDExLjI1IEwxNS41LDYgWiIgaWQ9IkRvd24tQXJyb3ciIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==) no-repeat left 10px center;
  420. border-color: #c8d7e1;
  421. border-style: solid;
  422. border-radius: 4px;
  423. border-width: 1px 1px 2px;
  424. color: #2e4453;
  425. cursor: pointer;
  426. display: inline-block;
  427. margin: 0;
  428. outline: 0;
  429. overflow: hidden;
  430. font-size: 14px;
  431. line-height: 21px;
  432. font-weight: 600;
  433. text-overflow: ellipsis;
  434. text-decoration: none;
  435. vertical-align: top;
  436. white-space: nowrap;
  437. box-sizing: border-box;
  438. padding: 7px 14px 9px 32px; // Aligns the text to the 8px baseline grid and adds padding on right to allow for the arrow.
  439. -webkit-appearance: none;
  440. -moz-appearance: none;
  441. -webkit-appearance: none;
  442. appearance: none;
  443. }
  444. select:hover {
  445. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPmFycm93LWRvd248L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJhcnJvdy1kb3duIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiBmaWxsPSIjYThiZWNlIj4gICAgICAgICAgICA8cGF0aCBkPSJNMTUuNSw2IEwxNyw3LjUgTDEwLjI1LDE0LjI1IEwzLjUsNy41IEw1LDYgTDEwLjI1LDExLjI1IEwxNS41LDYgWiIgaWQ9IkRvd24tQXJyb3ciIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
  446. }
  447. select:focus {
  448. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiA8dGl0bGU+YXJyb3ctZG93bjwvdGl0bGU+IDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiA8ZGVmcz48L2RlZnM+IDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPiA8ZyBpZD0iYXJyb3ctZG93biIgc2tldGNoOnR5cGU9Ik1TQXJ0Ym9hcmRHcm91cCIgZmlsbD0iIzJlNDQ1MyI+IDxwYXRoIGQ9Ik0xNS41LDYgTDE3LDcuNSBMMTAuMjUsMTQuMjUgTDMuNSw3LjUgTDUsNiBMMTAuMjUsMTEuMjUgTDE1LjUsNiBaIiBpZD0iRG93bi1BcnJvdyIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiA8L2c+IDwvZz48L3N2Zz4=);
  449. border-color: #00aadc;
  450. box-shadow: 0 0 0 2px #78dcfa;
  451. outline: 0;
  452. -moz-outline:none;
  453. -moz-user-focus:ignore;
  454. }
  455. select:disabled,
  456. select:hover:disabled {
  457. background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPmFycm93LWRvd248L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJhcnJvdy1kb3duIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiBmaWxsPSIjZTllZmYzIj4gICAgICAgICAgICA8cGF0aCBkPSJNMTUuNSw2IEwxNyw3LjUgTDEwLjI1LDE0LjI1IEwzLjUsNy41IEw1LDYgTDEwLjI1LDExLjI1IEwxNS41LDYgWiIgaWQ9IkRvd24tQXJyb3ciIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==) no-repeat left 10px center;;
  458. }
  459. select.is-compact {
  460. min-width: 0;
  461. padding: 0 6px 2px 20px;
  462. margin: 0 4px;
  463. background-position: left 5px center;
  464. background-size: 12px 12px;
  465. }
  466. /* Make it display:block when it follows a label */
  467. label select,
  468. label + select {
  469. display: block;
  470. min-width: 200px;
  471. }
  472. label select.is-compact,
  473. label + select.is-compact {
  474. display: inline-block;
  475. min-width: 0;
  476. }
  477. /* IE: Remove the default arrow */
  478. select::-ms-expand {
  479. display: none;
  480. }
  481. /* IE: Remove default background and color styles on focus */
  482. select::-ms-value {
  483. background: none;
  484. color: #2e4453;
  485. }
  486. /* Firefox: Remove the focus outline, see http://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff/18853002#18853002 */
  487. select:-moz-focusring {
  488. color: transparent;
  489. text-shadow: 0 0 0 #2e4453;
  490. }
  491. /* ==========================================================================
  492. ** Buttons
  493. ** ======================================================================== */
  494. input[type="submit"] {
  495. padding: 0;
  496. font-size: 14px;
  497. -webkit-appearance: none;
  498. -moz-appearance: none;
  499. appearance: none;
  500. vertical-align: baseline;
  501. background: white;
  502. border-color: #c8d7e1;
  503. border-style: solid;
  504. border-width: 1px 1px 2px;
  505. color: #2e4453;
  506. cursor: pointer;
  507. display: inline-block;
  508. margin: 24px 0 0;
  509. outline: 0;
  510. overflow: hidden;
  511. font-weight: 500;
  512. text-overflow: ellipsis;
  513. text-decoration: none;
  514. vertical-align: top;
  515. box-sizing: border-box;
  516. font-size: 14px;
  517. line-height: 21px;
  518. border-radius: 4px;
  519. padding: 7px 14px 9px;
  520. -webkit-appearance: none;
  521. -moz-appearance: none;
  522. appearance: none;
  523. }
  524. input[type="submit"]:hover {
  525. border-color: #a8bece;
  526. color: #2e4453;
  527. }
  528. input[type="submit"]:active {
  529. border-width: 2px 1px 1px;
  530. }
  531. input[type="submit"]:visited {
  532. color: #2e4453;
  533. }
  534. input[type="submit"][disabled],
  535. input[type="submit"]:disabled {
  536. color: #e9eff3;
  537. background: white;
  538. border-color: #e9eff3;
  539. cursor: default;
  540. }
  541. input[type="submit"][disabled]:active,
  542. input[type="submit"]:disabled:active {
  543. border-width: 1px 1px 2px;
  544. }
  545. input[type="submit"]:focus {
  546. border-color: #00aadc;
  547. box-shadow: 0 0 0 2px #78dcfa;
  548. }
  549. input[type="submit"].hidden {
  550. display: none;
  551. }
  552. input[type="submit"] .gridicon {
  553. position: relative;
  554. top: 4px;
  555. margin-top: -2px;
  556. width: 18px;
  557. height: 18px;
  558. }
  559. input[type="submit"].button-primary {
  560. background: #00aadc;
  561. border-color: #008ab3;
  562. color: white;
  563. }
  564. input[type="submit"].button-primary:hover,
  565. input[type="submit"].button-primary:focus {
  566. border-color: #005082;
  567. color: white;
  568. }
  569. input[type="submit"].button-primary[disabled],
  570. input[type="submit"].button-primary:disabled {
  571. background: #bceefd;
  572. border-color: #8cc9e2;
  573. color: white;
  574. }
  575. input[type="submit"].button-primary {
  576. color: white;
  577. }
  578. /* ==========================================================================
  579. ** Inline editor styles
  580. ** ======================================================================== */
  581. .ui-sortable-handle {
  582. cursor: move;
  583. }
  584. .grunion-section-header {
  585. font-size: 21px;
  586. margin-top: 32px;
  587. font-weight: 600;
  588. }
  589. .grunion-form-settings:hover {
  590. box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3;
  591. }
  592. .grunion-section-header:first-child {
  593. margin-top: 0;
  594. }
  595. .grunion-type-options {
  596. display: -ms-flexbox;
  597. display: flex;
  598. -ms-flex-wrap: wrap;
  599. flex-wrap: wrap;
  600. }
  601. .grunion-type {
  602. -ms-flex-positive: 0;
  603. flex-grow: 0;
  604. -ms-flex-negative: 0;
  605. flex-shrink: 0;
  606. }
  607. .grunion-type select {
  608. -webkit-appearance: none;
  609. width: 100%;
  610. }
  611. .grunion-required {
  612. padding: 27px 16px 0 0;
  613. -ms-flex-positive: 0;
  614. flex-grow: 0;
  615. -ms-flex-negative: 0;
  616. flex-shrink: 0;
  617. }
  618. .grunion-options {
  619. padding-top: 16px;
  620. }
  621. .grunion-options ol {
  622. list-style: none;
  623. padding: 0;
  624. margin: 8px 0 0;
  625. }
  626. .grunion-options li {
  627. display: -ms-flexbox;
  628. display: flex;
  629. margin-bottom: 16px;
  630. }
  631. .grunion-field-edit .grunion-options {
  632. display: none;
  633. }
  634. .delete-option,
  635. .delete-field {
  636. color: #0087be;
  637. text-decoration: none;
  638. width: 40px;
  639. line-height: 40px;
  640. font-size: 21px;
  641. text-align: center;
  642. font-weight: 600;
  643. }
  644. .delete-field {
  645. position: absolute;
  646. top: 0;
  647. left: 0;
  648. }
  649. .grunion-controls {
  650. display: -ms-flexbox;
  651. display: flex;
  652. -ms-flex-wrap: wrap;
  653. flex-wrap: wrap;
  654. }
  655. .grunion-update-controls {
  656. text-align: left;
  657. -ms-flex-positive: 1;
  658. flex-grow: 1;
  659. }
  660. #add-field {
  661. -ms-flex-positive: 0;
  662. flex-grow: 0;
  663. }
  664. .delete-option:before,
  665. .delete-field:before {
  666. font-family: Dashicons;
  667. /* content: "\f158"; /* This is the bolder X */
  668. content: "\f335"; /* This is the thinner X */
  669. display: inline-block;
  670. speak: none;
  671. }
  672. .grunion-field-edit.grunion-field-checkbox-multiple .grunion-options,
  673. .grunion-field-edit.grunion-field-radio .grunion-options,
  674. .grunion-field-edit.grunion-field-select .grunion-options {
  675. display: block;
  676. }
  677. .screen-reader-text {
  678. position: absolute;
  679. margin: -1px;
  680. padding: 0;
  681. height: 1px;
  682. width: 1px;
  683. overflow: hidden;
  684. clip: rect(0 0 0 0);
  685. border: 0;
  686. word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
  687. }