You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

465 lines
13 KiB

  1. .autocomplete {
  2. position: absolute;
  3. background-color: #fff;
  4. box-shadow: 0 1px 3px rgba(17, 17, 19, 0.15);
  5. padding: 0;
  6. max-height: 200px;
  7. border-bottom-left-radius: 4px;
  8. border-bottom-right-radius: 4px;
  9. border: 0 solid transparent;
  10. overflow: auto; }
  11. .autocomplete a {
  12. font-size: 0.9375em;
  13. display: block;
  14. padding: 8px;
  15. text-decoration: none;
  16. color: #111113;
  17. border-bottom: 1px solid rgba(17, 17, 19, 0.05); }
  18. .autocomplete a:last-child {
  19. border-bottom-color: transparent; }
  20. .autocomplete a:hover, .autocomplete a.is-active {
  21. background-color: rgba(17, 17, 19, 0.04);
  22. color: #111113;
  23. text-decoration: underline; }
  24. .autocomplete-labels .label {
  25. margin-right: 4px;
  26. margin-bottom: 4px; }
  27. .combobox {
  28. position: relative; }
  29. .combobox input {
  30. padding-right: 36px; }
  31. .combobox select {
  32. position: absolute;
  33. top: 0;
  34. right: 0;
  35. width: 32px;
  36. height: 100%;
  37. z-index: 2;
  38. opacity: 0;
  39. cursor: pointer; }
  40. .combobox .combobox-caret {
  41. position: absolute;
  42. z-index: 1;
  43. top: 0;
  44. right: 0;
  45. width: 32px;
  46. height: 100%;
  47. background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 9 12"><path fill="rgba(0, 0, 0, .4)" d="M0.722,4.823L-0.01,4.1,4.134-.01,4.866,0.716Zm7.555,0L9.01,4.1,4.866-.01l-0.732.726ZM0.722,7.177L-0.01,7.9,4.134,12.01l0.732-.726Zm7.555,0L9.01,7.9,4.866,12.01l-0.732-.726Z"/></svg>');
  48. background-repeat: no-repeat;
  49. background-position-y: 50%;
  50. background-position-x: 50%;
  51. cursor: pointer; }
  52. .datepicker {
  53. position: absolute;
  54. background-color: #fff;
  55. padding: 20px;
  56. border: 0 solid transparent;
  57. border-radius: 4px;
  58. box-shadow: 0 6px 24px rgba(17, 17, 19, 0.12); }
  59. .datepicker.is-embed {
  60. border: 1px solid rgba(17, 17, 19, 0.05);
  61. max-width: 288px;
  62. position: static;
  63. box-shadow: none; }
  64. .datepicker-head {
  65. display: flex;
  66. align-items: center;
  67. margin-top: -4px;
  68. margin-bottom: 8px; }
  69. .datepicker-control {
  70. width: 24px;
  71. height: 24px;
  72. color: rgba(17, 17, 19, 0.75);
  73. font-size: 18px;
  74. font-weight: bold;
  75. text-align: center;
  76. cursor: pointer;
  77. -webkit-user-select: none;
  78. -moz-user-select: none;
  79. -khtml-user-select: none;
  80. -ms-user-select: none;
  81. user-select: none; }
  82. .datepicker-month-box {
  83. flex: 1;
  84. font-size: 12px;
  85. font-weight: bold;
  86. text-transform: uppercase;
  87. color: #111113;
  88. text-align: center;
  89. padding: 8px 0 4px 0; }
  90. .datepicker-month-box span {
  91. margin: 0 1px; }
  92. .datepicker-select-year {
  93. display: inline-block;
  94. cursor: pointer;
  95. position: relative;
  96. height: 24px;
  97. line-height: 24px; }
  98. .datepicker-select-year .datepicker-select-year-caret {
  99. position: relative;
  100. top: -1px;
  101. display: inline-block;
  102. width: 0;
  103. height: 0;
  104. margin-left: .3em;
  105. vertical-align: middle;
  106. border-top: 4px solid;
  107. border-right: 4px solid transparent;
  108. border-left: 4px solid transparent; }
  109. .datepicker-select-year select {
  110. z-index: 2;
  111. position: absolute;
  112. top: 0;
  113. left: 0;
  114. opacity: 0;
  115. height: 24px;
  116. -webkit-appearance: menulist-button;
  117. -moz-appearance: menulist-button;
  118. -ms-appearance: menulist-button;
  119. appearance: menulist-button; }
  120. .datepicker-weekdays {
  121. white-space: nowrap; }
  122. .datepicker-weekdays span {
  123. display: inline-block;
  124. text-align: center;
  125. width: 36px;
  126. height: 24px;
  127. margin-top: -1px;
  128. margin-left: -1px;
  129. font-size: 11px;
  130. font-weight: bold;
  131. color: #111113; }
  132. .datepicker-row:after {
  133. content: '';
  134. display: table;
  135. clear: both; }
  136. .datepicker-cell {
  137. float: left;
  138. text-align: center;
  139. width: 36px;
  140. height: 32px;
  141. line-height: 32px;
  142. margin-top: -1px;
  143. margin-left: -1px;
  144. font-size: 12px;
  145. border: 1px solid #fff; }
  146. .datepicker-cell a {
  147. display: block;
  148. color: #111113;
  149. line-height: 31px;
  150. text-decoration: none;
  151. border-radius: 4px;
  152. background: #fff; }
  153. .datepicker-cell.is-out a {
  154. background-color: transparent;
  155. color: rgba(17, 17, 19, 0.5); }
  156. .datepicker-cell.is-out a:hover {
  157. color: #fff;
  158. background-color: #158df7; }
  159. .datepicker-cell.is-today {
  160. border-color: #fff; }
  161. .datepicker-cell.is-today a {
  162. background: #ee2455;
  163. color: #fff; }
  164. .datepicker-cell.is-today a:hover {
  165. color: #fff; }
  166. .datepicker-cell.is-selected {
  167. border-color: #fff; }
  168. .datepicker-cell.is-selected a {
  169. background: #111113;
  170. color: #fff; }
  171. .datepicker-cell.is-selected a:hover {
  172. color: #fff; }
  173. .datepicker-cell a:hover {
  174. background: #158df7;
  175. color: #fff; }
  176. .datepicker-cell.is-disabled a,
  177. .datepicker-cell.is-disabled a:hover {
  178. background-color: #fff;
  179. color: rgba(17, 17, 19, 0.4);
  180. cursor: default; }
  181. .editable[placeholder]:empty:before {
  182. content: attr(placeholder);
  183. color: rgba(17, 17, 19, 0.4);
  184. font-weight: normal; }
  185. .editable[placeholder]:empty:focus:before {
  186. content: ""; }
  187. .input-number {
  188. position: relative;
  189. display: flex; }
  190. .input-number input[type=number]::-webkit-inner-spin-button,
  191. .input-number input[type=number]::-webkit-outer-spin-button {
  192. -webkit-appearance: none;
  193. margin: 0; }
  194. .input-number input[type=number] {
  195. -moz-appearance: textfield;
  196. width: auto;
  197. text-align: center; }
  198. .input-number input {
  199. border-radius: 0;
  200. border-left: 1px solid transparent;
  201. border-right: 1px solid transparent; }
  202. .input-number .is-up,
  203. .input-number .is-down {
  204. width: 32px;
  205. display: inline-flex;
  206. align-items: center;
  207. justify-content: center;
  208. vertical-align: middle;
  209. cursor: pointer;
  210. color: #111113;
  211. font-size: 0.875em;
  212. text-decoration: none;
  213. text-align: center;
  214. -webkit-user-select: none;
  215. user-select: none;
  216. border: 1px solid rgba(17, 17, 19, 0.1); }
  217. .input-number .is-up:hover,
  218. .input-number .is-down:hover {
  219. background-color: rgba(17, 17, 19, 0.04); }
  220. .input-number .is-up {
  221. border-left-color: transparent;
  222. border-top-right-radius: 4px;
  223. border-bottom-right-radius: 4px;
  224. margin-left: -1px; }
  225. .input-number .is-up:hover {
  226. border-radius: 4px; }
  227. .input-number .is-down {
  228. border-right-color: transparent;
  229. border-top-left-radius: 4px;
  230. border-bottom-left-radius: 4px;
  231. margin-right: -1px; }
  232. .input-number .is-down:hover {
  233. border-radius: 4px; }
  234. .input-number .input-number-input input {
  235. border-left: 1px solid rgba(17, 17, 19, 0.1);
  236. border-right: 1px solid transparent; }
  237. .input-number input:hover,
  238. .input-number .input-number-input input:hover {
  239. border: 1px solid rgba(17, 17, 19, 0.2); }
  240. .input-number input:hover,
  241. .input-number .input-number-input input:hover {
  242. border: 1px solid rgba(17, 17, 19, 0.2); }
  243. .input-number input:focus,
  244. .input-number .input-number-input input:focus {
  245. border: 1px solid rgba(21, 141, 247, 0.5); }
  246. .input-number input.is-error,
  247. .input-number .input-number-input input.is-error {
  248. border: 1px solid rgba(238, 36, 85, 0.5); }
  249. .input-number input.is-error:focus,
  250. .input-number .input-number-input input.is-error:focus {
  251. border-color: rgba(238, 36, 85, 0.75); }
  252. .input-number input.is-success,
  253. .input-number .input-number-input input.is-success {
  254. border: 1px solid rgba(32, 188, 113, 0.5); }
  255. .input-number input.is-success:focus,
  256. .input-number .input-number-input input.is-success:focus {
  257. border-color: rgba(32, 188, 113, 0.75); }
  258. .input-number input.is-warning,
  259. .input-number .input-number-input input.is-warning {
  260. border: 1px solid rgba(255, 105, 81, 0.5); }
  261. .input-number input.is-warning:focus,
  262. .input-number .input-number-input input.is-warning:focus {
  263. border-color: rgba(255, 105, 81, 0.75); }
  264. .input-number .input-number-nav {
  265. position: relative;
  266. width: 24px;
  267. margin-left: -1px; }
  268. .input-number .input-number-nav .is-up,
  269. .input-number .input-number-nav .is-down {
  270. margin: 0;
  271. position: absolute;
  272. cursor: pointer;
  273. width: 24px;
  274. height: 50%;
  275. line-height: 20px;
  276. border: none; }
  277. .input-number .input-number-nav .is-up {
  278. border-top-left-radius: 0;
  279. border-bottom-right-radius: 0;
  280. top: 0;
  281. right: 0;
  282. border-top: 1px solid rgba(17, 17, 19, 0.1);
  283. border-right: 1px solid rgba(17, 17, 19, 0.1); }
  284. .input-number .input-number-nav .is-down {
  285. border-top-right-radius: 0;
  286. border-bottom-right-radius: 4px;
  287. border-right: 1px solid rgba(17, 17, 19, 0.1);
  288. border-bottom: 1px solid rgba(17, 17, 19, 0.1);
  289. right: 0;
  290. bottom: 0; }
  291. .slider {
  292. min-height: 14px; }
  293. .slider:disabled, .slider.is-disabled {
  294. opacity: .6; }
  295. .slider:disabled .slider-track,
  296. .slider:disabled .slider-handle,
  297. .slider:disabled .slider-ticks, .slider.is-disabled .slider-track,
  298. .slider.is-disabled .slider-handle,
  299. .slider.is-disabled .slider-ticks {
  300. cursor: default; }
  301. .slider:disabled .slider-fill, .slider.is-disabled .slider-fill {
  302. background-color: rgba(17, 17, 19, 0.2); }
  303. .slider-track {
  304. cursor: pointer;
  305. position: relative;
  306. width: 100%;
  307. height: 4px;
  308. box-shadow: 0 1px 2px rgba(17, 17, 19, 0.2) inset;
  309. background-color: rgba(17, 17, 19, 0.1);
  310. border: 0 solid transparent;
  311. border-radius: 4px; }
  312. .slider-fill {
  313. position: absolute;
  314. height: 4px;
  315. background-color: rgba(21, 141, 247, 0.7);
  316. border-radius: 4px;
  317. box-shadow: 0 1px 2px rgba(17, 17, 19, 0.2) inset; }
  318. .slider-handle {
  319. cursor: pointer;
  320. position: absolute;
  321. z-index: 2;
  322. width: 14px;
  323. height: 14px;
  324. margin-top: -5px;
  325. background-color: #fff;
  326. box-shadow: 0 1px 3px #111113;
  327. border: 0 solid transparent;
  328. border-radius: 50%; }
  329. .slider-ticks {
  330. cursor: pointer;
  331. position: relative;
  332. z-index: 1;
  333. min-height: 10px;
  334. margin-bottom: .7rem; }
  335. .slider-ticks span {
  336. position: absolute;
  337. border-left: 1px solid rgba(17, 17, 19, 0.3);
  338. height: 6px;
  339. margin-top: 3px;
  340. padding-top: 6px;
  341. font-size: 10px;
  342. text-align: center;
  343. line-height: 1.3;
  344. color: rgba(17, 17, 19, 0.5); }
  345. .upload {
  346. display: flex;
  347. align-items: center;
  348. justify-content: center;
  349. flex-direction: column;
  350. border: 2px dashed rgba(21, 141, 247, 0.3);
  351. border-radius: 4px;
  352. height: 120px;
  353. cursor: pointer; }
  354. .upload .upload-placeholder {
  355. color: rgba(21, 141, 247, 0.5);
  356. font-style: italic;
  357. font-size: 0.875em; }
  358. .upload:hover, .upload.is-upload-hover {
  359. border-color: rgba(21, 141, 247, 0.35);
  360. background-color: rgba(21, 141, 247, 0.05); }
  361. .upload.is-upload-error {
  362. border-color: rgba(238, 36, 85, 0.35);
  363. background-color: rgba(238, 36, 85, 0.05); }
  364. .upload-target {
  365. background-color: rgba(21, 141, 247, 0.02);
  366. border: 1px solid rgba(21, 141, 247, 0.1);
  367. padding: 4px 8px; }
  368. .upload-target:empty {
  369. padding: 0;
  370. border: none; }
  371. .upload-target .upload-item {
  372. display: flex;
  373. font-size: 0.875em;
  374. border-bottom: 1px solid rgba(17, 17, 19, 0.05);
  375. padding-top: 4px;
  376. padding-bottom: 4px; }
  377. .upload-target .upload-item .close {
  378. margin-top: 2px;
  379. margin-right: 4px; }
  380. .upload-target .upload-item em {
  381. font-style: normal;
  382. color: rgba(17, 17, 19, 0.5);
  383. font-size: 0.75em;
  384. margin-left: 4px; }
  385. .upload-target .upload-item:last-child {
  386. border-bottom-color: transparent; }
  387. .upload-box {
  388. margin-right: -16px;
  389. margin-bottom: -16px; }
  390. .upload-box:after {
  391. content: '';
  392. display: table;
  393. clear: both; }
  394. .upload-box .upload-item {
  395. float: left;
  396. width: 120px;
  397. height: 120px;
  398. border: 2px dashed rgba(21, 141, 247, 0.3);
  399. background-color: #fff;
  400. cursor: pointer;
  401. border-radius: 6px;
  402. position: relative;
  403. font-size: 0;
  404. line-height: 0;
  405. margin-right: 16px;
  406. margin-bottom: 16px; }
  407. .upload-box .upload-item.is-uploaded {
  408. border-style: solid;
  409. border-color: rgba(21, 141, 247, 0.35); }
  410. .upload-box .upload-item img {
  411. position: relative;
  412. z-index: 2;
  413. object-fit: cover;
  414. height: 100%;
  415. width: 100%;
  416. border-radius: 6px; }
  417. .upload-box .upload-item .close {
  418. position: absolute;
  419. z-index: 3;
  420. top: -4px;
  421. right: -8px;
  422. background-color: #ee2455;
  423. color: #fff;
  424. opacity: 1; }
  425. .upload-box .upload-item .close:hover {
  426. background-color: #111113; }
  427. .upload-box .upload-item:after {
  428. position: absolute;
  429. z-index: 1;
  430. top: 50%;
  431. left: 50%;
  432. margin-left: -12px;
  433. margin-top: -20px;
  434. content: '+';
  435. font-size: 40px;
  436. line-height: 1;
  437. font-weight: normal;
  438. color: rgba(21, 141, 247, 0.5); }
  439. .upload-box .upload-item:hover, .upload-box .upload-item.is-upload-hover {
  440. border-color: rgba(21, 141, 247, 0.35);
  441. background-color: rgba(21, 141, 247, 0.05); }
  442. .upload-box .upload-item.is-upload-error {
  443. border-color: rgba(238, 36, 85, 0.35);
  444. background-color: rgba(238, 36, 85, 0.05); }