VGrid.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673
  1. .v-container {
  2. width: 100%;
  3. padding: 16px;
  4. margin-right: auto;
  5. margin-left: auto;
  6. }
  7. @media (min-width: 960px) {
  8. .v-container {
  9. max-width: 900px;
  10. }
  11. }
  12. @media (min-width: 1280px) {
  13. .v-container {
  14. max-width: 1200px;
  15. }
  16. }
  17. @media (min-width: 1920px) {
  18. .v-container {
  19. max-width: 1800px;
  20. }
  21. }
  22. @media (min-width: 2560px) {
  23. .v-container {
  24. max-width: 2400px;
  25. }
  26. }
  27. .v-container--fluid {
  28. max-width: 100%;
  29. }
  30. .v-container.fill-height {
  31. align-items: center;
  32. display: flex;
  33. flex-wrap: wrap;
  34. }
  35. .v-row {
  36. display: flex;
  37. flex-wrap: wrap;
  38. flex: 1 1 auto;
  39. margin: -12px;
  40. }
  41. .v-row + .v-row {
  42. margin-top: 12px;
  43. }
  44. .v-row + .v-row--dense {
  45. margin-top: 4px;
  46. }
  47. .v-row--dense {
  48. margin: -4px;
  49. }
  50. .v-row--dense > .v-col,
  51. .v-row--dense > [class*=v-col-] {
  52. padding: 4px;
  53. }
  54. .v-row.v-row--no-gutters {
  55. margin: 0;
  56. }
  57. .v-row.v-row--no-gutters > .v-col,
  58. .v-row.v-row--no-gutters > [class*=v-col-] {
  59. padding: 0;
  60. }
  61. .v-spacer {
  62. flex-grow: 1;
  63. }
  64. .v-col-xxl,
  65. .v-col-xxl-auto, .v-col-xxl-12, .v-col-xxl-11, .v-col-xxl-10, .v-col-xxl-9, .v-col-xxl-8, .v-col-xxl-7, .v-col-xxl-6, .v-col-xxl-5, .v-col-xxl-4, .v-col-xxl-3, .v-col-xxl-2, .v-col-xxl-1, .v-col-xl,
  66. .v-col-xl-auto, .v-col-xl-12, .v-col-xl-11, .v-col-xl-10, .v-col-xl-9, .v-col-xl-8, .v-col-xl-7, .v-col-xl-6, .v-col-xl-5, .v-col-xl-4, .v-col-xl-3, .v-col-xl-2, .v-col-xl-1, .v-col-lg,
  67. .v-col-lg-auto, .v-col-lg-12, .v-col-lg-11, .v-col-lg-10, .v-col-lg-9, .v-col-lg-8, .v-col-lg-7, .v-col-lg-6, .v-col-lg-5, .v-col-lg-4, .v-col-lg-3, .v-col-lg-2, .v-col-lg-1, .v-col-md,
  68. .v-col-md-auto, .v-col-md-12, .v-col-md-11, .v-col-md-10, .v-col-md-9, .v-col-md-8, .v-col-md-7, .v-col-md-6, .v-col-md-5, .v-col-md-4, .v-col-md-3, .v-col-md-2, .v-col-md-1, .v-col-sm,
  69. .v-col-sm-auto, .v-col-sm-12, .v-col-sm-11, .v-col-sm-10, .v-col-sm-9, .v-col-sm-8, .v-col-sm-7, .v-col-sm-6, .v-col-sm-5, .v-col-sm-4, .v-col-sm-3, .v-col-sm-2, .v-col-sm-1, .v-col,
  70. .v-col-auto, .v-col-12, .v-col-11, .v-col-10, .v-col-9, .v-col-8, .v-col-7, .v-col-6, .v-col-5, .v-col-4, .v-col-3, .v-col-2, .v-col-1 {
  71. width: 100%;
  72. padding: 12px;
  73. }
  74. .v-col {
  75. flex-basis: 0;
  76. flex-grow: 1;
  77. max-width: 100%;
  78. }
  79. .v-col-auto {
  80. flex: 0 0 auto;
  81. width: auto;
  82. max-width: 100%;
  83. }
  84. .v-col-1 {
  85. flex: 0 0 8.3333333333%;
  86. max-width: 8.3333333333%;
  87. }
  88. .v-col-2 {
  89. flex: 0 0 16.6666666667%;
  90. max-width: 16.6666666667%;
  91. }
  92. .v-col-3 {
  93. flex: 0 0 25%;
  94. max-width: 25%;
  95. }
  96. .v-col-4 {
  97. flex: 0 0 33.3333333333%;
  98. max-width: 33.3333333333%;
  99. }
  100. .v-col-5 {
  101. flex: 0 0 41.6666666667%;
  102. max-width: 41.6666666667%;
  103. }
  104. .v-col-6 {
  105. flex: 0 0 50%;
  106. max-width: 50%;
  107. }
  108. .v-col-7 {
  109. flex: 0 0 58.3333333333%;
  110. max-width: 58.3333333333%;
  111. }
  112. .v-col-8 {
  113. flex: 0 0 66.6666666667%;
  114. max-width: 66.6666666667%;
  115. }
  116. .v-col-9 {
  117. flex: 0 0 75%;
  118. max-width: 75%;
  119. }
  120. .v-col-10 {
  121. flex: 0 0 83.3333333333%;
  122. max-width: 83.3333333333%;
  123. }
  124. .v-col-11 {
  125. flex: 0 0 91.6666666667%;
  126. max-width: 91.6666666667%;
  127. }
  128. .v-col-12 {
  129. flex: 0 0 100%;
  130. max-width: 100%;
  131. }
  132. .offset-1 {
  133. margin-inline-start: 8.3333333333%;
  134. }
  135. .offset-2 {
  136. margin-inline-start: 16.6666666667%;
  137. }
  138. .offset-3 {
  139. margin-inline-start: 25%;
  140. }
  141. .offset-4 {
  142. margin-inline-start: 33.3333333333%;
  143. }
  144. .offset-5 {
  145. margin-inline-start: 41.6666666667%;
  146. }
  147. .offset-6 {
  148. margin-inline-start: 50%;
  149. }
  150. .offset-7 {
  151. margin-inline-start: 58.3333333333%;
  152. }
  153. .offset-8 {
  154. margin-inline-start: 66.6666666667%;
  155. }
  156. .offset-9 {
  157. margin-inline-start: 75%;
  158. }
  159. .offset-10 {
  160. margin-inline-start: 83.3333333333%;
  161. }
  162. .offset-11 {
  163. margin-inline-start: 91.6666666667%;
  164. }
  165. @media (min-width: 600px) {
  166. .v-col-sm {
  167. flex-basis: 0;
  168. flex-grow: 1;
  169. max-width: 100%;
  170. }
  171. .v-col-sm-auto {
  172. flex: 0 0 auto;
  173. width: auto;
  174. max-width: 100%;
  175. }
  176. .v-col-sm-1 {
  177. flex: 0 0 8.3333333333%;
  178. max-width: 8.3333333333%;
  179. }
  180. .v-col-sm-2 {
  181. flex: 0 0 16.6666666667%;
  182. max-width: 16.6666666667%;
  183. }
  184. .v-col-sm-3 {
  185. flex: 0 0 25%;
  186. max-width: 25%;
  187. }
  188. .v-col-sm-4 {
  189. flex: 0 0 33.3333333333%;
  190. max-width: 33.3333333333%;
  191. }
  192. .v-col-sm-5 {
  193. flex: 0 0 41.6666666667%;
  194. max-width: 41.6666666667%;
  195. }
  196. .v-col-sm-6 {
  197. flex: 0 0 50%;
  198. max-width: 50%;
  199. }
  200. .v-col-sm-7 {
  201. flex: 0 0 58.3333333333%;
  202. max-width: 58.3333333333%;
  203. }
  204. .v-col-sm-8 {
  205. flex: 0 0 66.6666666667%;
  206. max-width: 66.6666666667%;
  207. }
  208. .v-col-sm-9 {
  209. flex: 0 0 75%;
  210. max-width: 75%;
  211. }
  212. .v-col-sm-10 {
  213. flex: 0 0 83.3333333333%;
  214. max-width: 83.3333333333%;
  215. }
  216. .v-col-sm-11 {
  217. flex: 0 0 91.6666666667%;
  218. max-width: 91.6666666667%;
  219. }
  220. .v-col-sm-12 {
  221. flex: 0 0 100%;
  222. max-width: 100%;
  223. }
  224. .offset-sm-0 {
  225. margin-inline-start: 0;
  226. }
  227. .offset-sm-1 {
  228. margin-inline-start: 8.3333333333%;
  229. }
  230. .offset-sm-2 {
  231. margin-inline-start: 16.6666666667%;
  232. }
  233. .offset-sm-3 {
  234. margin-inline-start: 25%;
  235. }
  236. .offset-sm-4 {
  237. margin-inline-start: 33.3333333333%;
  238. }
  239. .offset-sm-5 {
  240. margin-inline-start: 41.6666666667%;
  241. }
  242. .offset-sm-6 {
  243. margin-inline-start: 50%;
  244. }
  245. .offset-sm-7 {
  246. margin-inline-start: 58.3333333333%;
  247. }
  248. .offset-sm-8 {
  249. margin-inline-start: 66.6666666667%;
  250. }
  251. .offset-sm-9 {
  252. margin-inline-start: 75%;
  253. }
  254. .offset-sm-10 {
  255. margin-inline-start: 83.3333333333%;
  256. }
  257. .offset-sm-11 {
  258. margin-inline-start: 91.6666666667%;
  259. }
  260. }
  261. @media (min-width: 960px) {
  262. .v-col-md {
  263. flex-basis: 0;
  264. flex-grow: 1;
  265. max-width: 100%;
  266. }
  267. .v-col-md-auto {
  268. flex: 0 0 auto;
  269. width: auto;
  270. max-width: 100%;
  271. }
  272. .v-col-md-1 {
  273. flex: 0 0 8.3333333333%;
  274. max-width: 8.3333333333%;
  275. }
  276. .v-col-md-2 {
  277. flex: 0 0 16.6666666667%;
  278. max-width: 16.6666666667%;
  279. }
  280. .v-col-md-3 {
  281. flex: 0 0 25%;
  282. max-width: 25%;
  283. }
  284. .v-col-md-4 {
  285. flex: 0 0 33.3333333333%;
  286. max-width: 33.3333333333%;
  287. }
  288. .v-col-md-5 {
  289. flex: 0 0 41.6666666667%;
  290. max-width: 41.6666666667%;
  291. }
  292. .v-col-md-6 {
  293. flex: 0 0 50%;
  294. max-width: 50%;
  295. }
  296. .v-col-md-7 {
  297. flex: 0 0 58.3333333333%;
  298. max-width: 58.3333333333%;
  299. }
  300. .v-col-md-8 {
  301. flex: 0 0 66.6666666667%;
  302. max-width: 66.6666666667%;
  303. }
  304. .v-col-md-9 {
  305. flex: 0 0 75%;
  306. max-width: 75%;
  307. }
  308. .v-col-md-10 {
  309. flex: 0 0 83.3333333333%;
  310. max-width: 83.3333333333%;
  311. }
  312. .v-col-md-11 {
  313. flex: 0 0 91.6666666667%;
  314. max-width: 91.6666666667%;
  315. }
  316. .v-col-md-12 {
  317. flex: 0 0 100%;
  318. max-width: 100%;
  319. }
  320. .offset-md-0 {
  321. margin-inline-start: 0;
  322. }
  323. .offset-md-1 {
  324. margin-inline-start: 8.3333333333%;
  325. }
  326. .offset-md-2 {
  327. margin-inline-start: 16.6666666667%;
  328. }
  329. .offset-md-3 {
  330. margin-inline-start: 25%;
  331. }
  332. .offset-md-4 {
  333. margin-inline-start: 33.3333333333%;
  334. }
  335. .offset-md-5 {
  336. margin-inline-start: 41.6666666667%;
  337. }
  338. .offset-md-6 {
  339. margin-inline-start: 50%;
  340. }
  341. .offset-md-7 {
  342. margin-inline-start: 58.3333333333%;
  343. }
  344. .offset-md-8 {
  345. margin-inline-start: 66.6666666667%;
  346. }
  347. .offset-md-9 {
  348. margin-inline-start: 75%;
  349. }
  350. .offset-md-10 {
  351. margin-inline-start: 83.3333333333%;
  352. }
  353. .offset-md-11 {
  354. margin-inline-start: 91.6666666667%;
  355. }
  356. }
  357. @media (min-width: 1280px) {
  358. .v-col-lg {
  359. flex-basis: 0;
  360. flex-grow: 1;
  361. max-width: 100%;
  362. }
  363. .v-col-lg-auto {
  364. flex: 0 0 auto;
  365. width: auto;
  366. max-width: 100%;
  367. }
  368. .v-col-lg-1 {
  369. flex: 0 0 8.3333333333%;
  370. max-width: 8.3333333333%;
  371. }
  372. .v-col-lg-2 {
  373. flex: 0 0 16.6666666667%;
  374. max-width: 16.6666666667%;
  375. }
  376. .v-col-lg-3 {
  377. flex: 0 0 25%;
  378. max-width: 25%;
  379. }
  380. .v-col-lg-4 {
  381. flex: 0 0 33.3333333333%;
  382. max-width: 33.3333333333%;
  383. }
  384. .v-col-lg-5 {
  385. flex: 0 0 41.6666666667%;
  386. max-width: 41.6666666667%;
  387. }
  388. .v-col-lg-6 {
  389. flex: 0 0 50%;
  390. max-width: 50%;
  391. }
  392. .v-col-lg-7 {
  393. flex: 0 0 58.3333333333%;
  394. max-width: 58.3333333333%;
  395. }
  396. .v-col-lg-8 {
  397. flex: 0 0 66.6666666667%;
  398. max-width: 66.6666666667%;
  399. }
  400. .v-col-lg-9 {
  401. flex: 0 0 75%;
  402. max-width: 75%;
  403. }
  404. .v-col-lg-10 {
  405. flex: 0 0 83.3333333333%;
  406. max-width: 83.3333333333%;
  407. }
  408. .v-col-lg-11 {
  409. flex: 0 0 91.6666666667%;
  410. max-width: 91.6666666667%;
  411. }
  412. .v-col-lg-12 {
  413. flex: 0 0 100%;
  414. max-width: 100%;
  415. }
  416. .offset-lg-0 {
  417. margin-inline-start: 0;
  418. }
  419. .offset-lg-1 {
  420. margin-inline-start: 8.3333333333%;
  421. }
  422. .offset-lg-2 {
  423. margin-inline-start: 16.6666666667%;
  424. }
  425. .offset-lg-3 {
  426. margin-inline-start: 25%;
  427. }
  428. .offset-lg-4 {
  429. margin-inline-start: 33.3333333333%;
  430. }
  431. .offset-lg-5 {
  432. margin-inline-start: 41.6666666667%;
  433. }
  434. .offset-lg-6 {
  435. margin-inline-start: 50%;
  436. }
  437. .offset-lg-7 {
  438. margin-inline-start: 58.3333333333%;
  439. }
  440. .offset-lg-8 {
  441. margin-inline-start: 66.6666666667%;
  442. }
  443. .offset-lg-9 {
  444. margin-inline-start: 75%;
  445. }
  446. .offset-lg-10 {
  447. margin-inline-start: 83.3333333333%;
  448. }
  449. .offset-lg-11 {
  450. margin-inline-start: 91.6666666667%;
  451. }
  452. }
  453. @media (min-width: 1920px) {
  454. .v-col-xl {
  455. flex-basis: 0;
  456. flex-grow: 1;
  457. max-width: 100%;
  458. }
  459. .v-col-xl-auto {
  460. flex: 0 0 auto;
  461. width: auto;
  462. max-width: 100%;
  463. }
  464. .v-col-xl-1 {
  465. flex: 0 0 8.3333333333%;
  466. max-width: 8.3333333333%;
  467. }
  468. .v-col-xl-2 {
  469. flex: 0 0 16.6666666667%;
  470. max-width: 16.6666666667%;
  471. }
  472. .v-col-xl-3 {
  473. flex: 0 0 25%;
  474. max-width: 25%;
  475. }
  476. .v-col-xl-4 {
  477. flex: 0 0 33.3333333333%;
  478. max-width: 33.3333333333%;
  479. }
  480. .v-col-xl-5 {
  481. flex: 0 0 41.6666666667%;
  482. max-width: 41.6666666667%;
  483. }
  484. .v-col-xl-6 {
  485. flex: 0 0 50%;
  486. max-width: 50%;
  487. }
  488. .v-col-xl-7 {
  489. flex: 0 0 58.3333333333%;
  490. max-width: 58.3333333333%;
  491. }
  492. .v-col-xl-8 {
  493. flex: 0 0 66.6666666667%;
  494. max-width: 66.6666666667%;
  495. }
  496. .v-col-xl-9 {
  497. flex: 0 0 75%;
  498. max-width: 75%;
  499. }
  500. .v-col-xl-10 {
  501. flex: 0 0 83.3333333333%;
  502. max-width: 83.3333333333%;
  503. }
  504. .v-col-xl-11 {
  505. flex: 0 0 91.6666666667%;
  506. max-width: 91.6666666667%;
  507. }
  508. .v-col-xl-12 {
  509. flex: 0 0 100%;
  510. max-width: 100%;
  511. }
  512. .offset-xl-0 {
  513. margin-inline-start: 0;
  514. }
  515. .offset-xl-1 {
  516. margin-inline-start: 8.3333333333%;
  517. }
  518. .offset-xl-2 {
  519. margin-inline-start: 16.6666666667%;
  520. }
  521. .offset-xl-3 {
  522. margin-inline-start: 25%;
  523. }
  524. .offset-xl-4 {
  525. margin-inline-start: 33.3333333333%;
  526. }
  527. .offset-xl-5 {
  528. margin-inline-start: 41.6666666667%;
  529. }
  530. .offset-xl-6 {
  531. margin-inline-start: 50%;
  532. }
  533. .offset-xl-7 {
  534. margin-inline-start: 58.3333333333%;
  535. }
  536. .offset-xl-8 {
  537. margin-inline-start: 66.6666666667%;
  538. }
  539. .offset-xl-9 {
  540. margin-inline-start: 75%;
  541. }
  542. .offset-xl-10 {
  543. margin-inline-start: 83.3333333333%;
  544. }
  545. .offset-xl-11 {
  546. margin-inline-start: 91.6666666667%;
  547. }
  548. }
  549. @media (min-width: 2560px) {
  550. .v-col-xxl {
  551. flex-basis: 0;
  552. flex-grow: 1;
  553. max-width: 100%;
  554. }
  555. .v-col-xxl-auto {
  556. flex: 0 0 auto;
  557. width: auto;
  558. max-width: 100%;
  559. }
  560. .v-col-xxl-1 {
  561. flex: 0 0 8.3333333333%;
  562. max-width: 8.3333333333%;
  563. }
  564. .v-col-xxl-2 {
  565. flex: 0 0 16.6666666667%;
  566. max-width: 16.6666666667%;
  567. }
  568. .v-col-xxl-3 {
  569. flex: 0 0 25%;
  570. max-width: 25%;
  571. }
  572. .v-col-xxl-4 {
  573. flex: 0 0 33.3333333333%;
  574. max-width: 33.3333333333%;
  575. }
  576. .v-col-xxl-5 {
  577. flex: 0 0 41.6666666667%;
  578. max-width: 41.6666666667%;
  579. }
  580. .v-col-xxl-6 {
  581. flex: 0 0 50%;
  582. max-width: 50%;
  583. }
  584. .v-col-xxl-7 {
  585. flex: 0 0 58.3333333333%;
  586. max-width: 58.3333333333%;
  587. }
  588. .v-col-xxl-8 {
  589. flex: 0 0 66.6666666667%;
  590. max-width: 66.6666666667%;
  591. }
  592. .v-col-xxl-9 {
  593. flex: 0 0 75%;
  594. max-width: 75%;
  595. }
  596. .v-col-xxl-10 {
  597. flex: 0 0 83.3333333333%;
  598. max-width: 83.3333333333%;
  599. }
  600. .v-col-xxl-11 {
  601. flex: 0 0 91.6666666667%;
  602. max-width: 91.6666666667%;
  603. }
  604. .v-col-xxl-12 {
  605. flex: 0 0 100%;
  606. max-width: 100%;
  607. }
  608. .offset-xxl-0 {
  609. margin-inline-start: 0;
  610. }
  611. .offset-xxl-1 {
  612. margin-inline-start: 8.3333333333%;
  613. }
  614. .offset-xxl-2 {
  615. margin-inline-start: 16.6666666667%;
  616. }
  617. .offset-xxl-3 {
  618. margin-inline-start: 25%;
  619. }
  620. .offset-xxl-4 {
  621. margin-inline-start: 33.3333333333%;
  622. }
  623. .offset-xxl-5 {
  624. margin-inline-start: 41.6666666667%;
  625. }
  626. .offset-xxl-6 {
  627. margin-inline-start: 50%;
  628. }
  629. .offset-xxl-7 {
  630. margin-inline-start: 58.3333333333%;
  631. }
  632. .offset-xxl-8 {
  633. margin-inline-start: 66.6666666667%;
  634. }
  635. .offset-xxl-9 {
  636. margin-inline-start: 75%;
  637. }
  638. .offset-xxl-10 {
  639. margin-inline-start: 83.3333333333%;
  640. }
  641. .offset-xxl-11 {
  642. margin-inline-start: 91.6666666667%;
  643. }
  644. }