positioning.scss 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  1. /* #ifndef APP-NVUE */
  2. // Order
  3. .#{$prefix}order-first {
  4. order: -9999;
  5. }
  6. .#{$prefix}order-last {
  7. order: 9999;
  8. }
  9. .#{$prefix}order-none {
  10. order: 0;
  11. }
  12. @for $i from 1 through 14 {
  13. .#{$prefix}order-#{$i} {
  14. order: $i;
  15. }
  16. .#{$prefix}-order-#{$i} {
  17. order: $i * -1;
  18. }
  19. }
  20. /* #endif */
  21. // Justify Content
  22. .#{$prefix}justify-start {
  23. justify-content: flex-start !important;
  24. }
  25. .#{$prefix}justify-end {
  26. justify-content: flex-end !important;
  27. }
  28. .#{$prefix}justify-center {
  29. justify-content: center !important;
  30. }
  31. .#{$prefix}justify-between {
  32. justify-content: space-between !important;
  33. }
  34. /* #ifndef APP-NVUE */
  35. .#{$prefix}justify-around {
  36. justify-content: space-around;
  37. }
  38. .#{$prefix}justify-evenly {
  39. justify-content: space-evenly;
  40. }
  41. // Justify Items
  42. .#{$prefix}justify-items-auto {
  43. justify-items: auto;
  44. }
  45. .#{$prefix}justify-items-start {
  46. justify-items: start;
  47. }
  48. .#{$prefix}justify-items-end {
  49. justify-items: end;
  50. }
  51. .#{$prefix}justify-items-center {
  52. justify-items: center;
  53. }
  54. .#{$prefix}justify-items-stretch {
  55. justify-items: stretch;
  56. }
  57. // Justify Self
  58. .#{$prefix}justify-self-auto {
  59. justify-self: auto;
  60. }
  61. .#{$prefix}justify-self-start {
  62. justify-self: start;
  63. }
  64. .#{$prefix}justify-self-end {
  65. justify-self: end;
  66. }
  67. .#{$prefix}justify-self-center {
  68. justify-self: center;
  69. }
  70. .#{$prefix}justify-self-stretch {
  71. justify-self: stretch;
  72. }
  73. // Align Content
  74. .#{$prefix}content-center {
  75. align-content: center;
  76. }
  77. .#{$prefix}content-start {
  78. align-content: flex-start;
  79. }
  80. .#{$prefix}content-end {
  81. align-content: flex-end;
  82. }
  83. .#{$prefix}content-between {
  84. align-content: space-between;
  85. }
  86. .#{$prefix}content-around {
  87. align-content: space-around;
  88. }
  89. .#{$prefix}content-evenly {
  90. align-content: space-evenly;
  91. }
  92. /* #endif */
  93. // Align Items
  94. .#{$prefix}items-start {
  95. align-items: flex-start !important;
  96. }
  97. .#{$prefix}items-end {
  98. align-items: flex-end !important;
  99. }
  100. .#{$prefix}items-center {
  101. align-items: center !important;
  102. }
  103. /* #ifndef APP-NVUE */
  104. .#{$prefix}items-baseline {
  105. align-items: baseline;
  106. }
  107. /* #endif */
  108. .#{$prefix}items-stretch {
  109. align-items: stretch !important;
  110. }
  111. /* #ifndef APP-NVUE */
  112. // Align Self
  113. .#{$prefix}self-auto {
  114. align-self: auto;
  115. }
  116. .#{$prefix}self-start {
  117. align-self: flex-start;
  118. }
  119. .#{$prefix}self-end {
  120. align-self: flex-end;
  121. }
  122. .#{$prefix}self-center {
  123. align-self: center;
  124. }
  125. .#{$prefix}self-stretch {
  126. align-self: stretch;
  127. }
  128. // Place Content
  129. .#{$prefix}place-content-center {
  130. place-content: center;
  131. }
  132. .#{$prefix}place-content-start {
  133. place-content: start;
  134. }
  135. .#{$prefix}place-content-end {
  136. place-content: end;
  137. }
  138. .#{$prefix}place-content-between {
  139. place-content: space-between;
  140. }
  141. .#{$prefix}place-content-around {
  142. place-content: space-around;
  143. }
  144. .#{$prefix}place-content-evenly {
  145. place-content: space-evenly;
  146. }
  147. .#{$prefix}place-content-stretch {
  148. place-content: stretch;
  149. }
  150. // Place Items
  151. .#{$prefix}place-items-auto {
  152. place-items: auto;
  153. }
  154. .#{$prefix}place-items-start {
  155. place-items: start;
  156. }
  157. .#{$prefix}place-items-end {
  158. place-items: end;
  159. }
  160. .#{$prefix}place-items-center {
  161. place-items: center;
  162. }
  163. .#{$prefix}place-items-stretch {
  164. place-items: stretch;
  165. }
  166. // Place Self
  167. .#{$prefix}place-self-auto {
  168. place-self: auto;
  169. }
  170. .#{$prefix}place-self-start {
  171. place-self: start;
  172. }
  173. .#{$prefix}place-self-end {
  174. place-self: end;
  175. }
  176. .#{$prefix}place-self-center {
  177. place-self: center;
  178. }
  179. .#{$prefix}place-self-stretch {
  180. place-self: stretch;
  181. }
  182. /* #endif */
  183. // Position
  184. /* #ifndef APP-NVUE */
  185. .#{$prefix}static {
  186. position: static;
  187. }
  188. /* #endif */
  189. .#{$prefix}fixed {
  190. position: fixed !important;
  191. }
  192. .#{$prefix}absolute {
  193. position: absolute !important;
  194. }
  195. .#{$prefix}relative {
  196. position: relative !important;
  197. }
  198. .#{$prefix}sticky {
  199. position: sticky !important;
  200. }
  201. // Top / Right / Bottom / Left
  202. // Inset
  203. .#{$prefix}inset-0 {
  204. top: 0px;
  205. right: 0px;
  206. bottom: 0px;
  207. left: 0px;
  208. }
  209. .#{$prefix}inset-px {
  210. top: 1px;
  211. right: 1px;
  212. bottom: 1px;
  213. left: 1px;
  214. }
  215. /* #ifndef APP-NVUE */
  216. .#{$prefix}inset-auto {
  217. top: auto;
  218. right: auto;
  219. bottom: auto;
  220. left: auto;
  221. }
  222. /* #endif */
  223. .#{$prefix}inset-full {
  224. top: 100%;
  225. right: 100%;
  226. bottom: 100%;
  227. left: 100%;
  228. }
  229. @for $i from 0 through 50 {
  230. // top: {0-50}px;
  231. .#{$prefix}top-#{$i} {
  232. top: $i + px;
  233. }
  234. // right: {0-50}px;
  235. .#{$prefix}right-#{$i} {
  236. right: $i + px;
  237. }
  238. // bottom: {0-50}px;
  239. .#{$prefix}bottom-#{$i} {
  240. bottom: $i + px;
  241. }
  242. // left: {0-50}px;
  243. .#{$prefix}left-#{$i} {
  244. left: $i + px;
  245. }
  246. }
  247. @for $i from 1 through 100 {
  248. // top: {0-100}rpx;
  249. .#{$prefix}top-#{$i}r {
  250. top: $i + rpx;
  251. }
  252. // right: {0-100}rpx;
  253. .#{$prefix}right-#{$i}r {
  254. right: $i + rpx;
  255. }
  256. // bottom: {0-100}rpx;
  257. .#{$prefix}bottom-#{$i}r {
  258. bottom: $i + rpx;
  259. }
  260. // left: {0-100}rpx;
  261. .#{$prefix}left-#{$i}r {
  262. left: $i + rpx;
  263. }
  264. }
  265. /* #ifndef APP-NVUE */
  266. // Floats
  267. .#{$prefix}float-right {
  268. float: right;
  269. }
  270. .#{$prefix}float-left {
  271. float: left;
  272. }
  273. .#{$prefix}float-none {
  274. float: none;
  275. }
  276. // Clear
  277. .#{$prefix}clear-right {
  278. clear: right;
  279. }
  280. .#{$prefix}clear-left {
  281. clear: left;
  282. }
  283. .#{$prefix}clear-both {
  284. clear: both;
  285. }
  286. .#{$prefix}clear-none {
  287. clear: none;
  288. }
  289. // Object Fit
  290. .#{$prefix}object-contain {
  291. object-fit: contain;
  292. }
  293. .#{$prefix}object-cover {
  294. object-fit: cover;
  295. }
  296. .#{$prefix}object-fill {
  297. object-fit: fill;
  298. }
  299. .#{$prefix}object-none {
  300. object-fit: none;
  301. }
  302. .#{$prefix}object-scale-down {
  303. object-fit: scale-down;
  304. }
  305. // Object Position
  306. .#{$prefix}object-bottom {
  307. object-position: bottom;
  308. }
  309. .#{$prefix}object-center {
  310. object-position: center;
  311. }
  312. .#{$prefix}object-left {
  313. object-position: left;
  314. }
  315. .#{$prefix}object-left-bottom {
  316. object-position: left bottom;
  317. }
  318. .#{$prefix}object-left-top {
  319. object-position: left top;
  320. }
  321. .#{$prefix}object-right {
  322. object-position: right;
  323. }
  324. .#{$prefix}object-right-bottom {
  325. object-position: right bottom;
  326. }
  327. .#{$prefix}object-right-top {
  328. object-position: right top;
  329. }
  330. .#{$prefix}object-top {
  331. object-position: top;
  332. }
  333. // Z-Index
  334. .#{$prefix}z-auto {
  335. z-index: auto;
  336. }
  337. /* #endif */
  338. @for $i from 0 through 16 {
  339. .#{$prefix}z-#{$i} {
  340. z-index: $i !important;
  341. }
  342. }