col.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. @import "./common/var.scss";
  2. @import "./mixins/mixins.scss";
  3. [class*="el-col-"] {
  4. float: left;
  5. box-sizing: border-box;
  6. }
  7. .el-col-0 {
  8. display: none;
  9. }
  10. @for $i from 0 through 24 {
  11. .el-col-#{$i} {
  12. width: (1 / 24 * $i * 100) * 1%;
  13. }
  14. .el-col-offset-#{$i} {
  15. margin-left: (1 / 24 * $i * 100) * 1%;
  16. }
  17. .el-col-pull-#{$i} {
  18. position: relative;
  19. right: (1 / 24 * $i * 100) * 1%;
  20. }
  21. .el-col-push-#{$i} {
  22. position: relative;
  23. left: (1 / 24 * $i * 100) * 1%;
  24. }
  25. }
  26. @include res(xs) {
  27. .el-col-xs-0 {
  28. display: none;
  29. }
  30. @for $i from 0 through 24 {
  31. .el-col-xs-#{$i} {
  32. width: (1 / 24 * $i * 100) * 1%;
  33. }
  34. .el-col-xs-offset-#{$i} {
  35. margin-left: (1 / 24 * $i * 100) * 1%;
  36. }
  37. .el-col-xs-pull-#{$i} {
  38. position: relative;
  39. right: (1 / 24 * $i * 100) * 1%;
  40. }
  41. .el-col-xs-push-#{$i} {
  42. position: relative;
  43. left: (1 / 24 * $i * 100) * 1%;
  44. }
  45. }
  46. }
  47. @include res(sm) {
  48. .el-col-sm-0 {
  49. display: none;
  50. }
  51. @for $i from 0 through 24 {
  52. .el-col-sm-#{$i} {
  53. width: (1 / 24 * $i * 100) * 1%;
  54. }
  55. .el-col-sm-offset-#{$i} {
  56. margin-left: (1 / 24 * $i * 100) * 1%;
  57. }
  58. .el-col-sm-pull-#{$i} {
  59. position: relative;
  60. right: (1 / 24 * $i * 100) * 1%;
  61. }
  62. .el-col-sm-push-#{$i} {
  63. position: relative;
  64. left: (1 / 24 * $i * 100) * 1%;
  65. }
  66. }
  67. }
  68. @include res(md) {
  69. .el-col-md-0 {
  70. display: none;
  71. }
  72. @for $i from 0 through 24 {
  73. .el-col-md-#{$i} {
  74. width: (1 / 24 * $i * 100) * 1%;
  75. }
  76. .el-col-md-offset-#{$i} {
  77. margin-left: (1 / 24 * $i * 100) * 1%;
  78. }
  79. .el-col-md-pull-#{$i} {
  80. position: relative;
  81. right: (1 / 24 * $i * 100) * 1%;
  82. }
  83. .el-col-md-push-#{$i} {
  84. position: relative;
  85. left: (1 / 24 * $i * 100) * 1%;
  86. }
  87. }
  88. }
  89. @include res(lg) {
  90. .el-col-lg-0 {
  91. display: none;
  92. }
  93. @for $i from 0 through 24 {
  94. .el-col-lg-#{$i} {
  95. width: (1 / 24 * $i * 100) * 1%;
  96. }
  97. .el-col-lg-offset-#{$i} {
  98. margin-left: (1 / 24 * $i * 100) * 1%;
  99. }
  100. .el-col-lg-pull-#{$i} {
  101. position: relative;
  102. right: (1 / 24 * $i * 100) * 1%;
  103. }
  104. .el-col-lg-push-#{$i} {
  105. position: relative;
  106. left: (1 / 24 * $i * 100) * 1%;
  107. }
  108. }
  109. }
  110. @include res(xl) {
  111. .el-col-xl-0 {
  112. display: none;
  113. }
  114. @for $i from 0 through 24 {
  115. .el-col-xl-#{$i} {
  116. width: (1 / 24 * $i * 100) * 1%;
  117. }
  118. .el-col-xl-offset-#{$i} {
  119. margin-left: (1 / 24 * $i * 100) * 1%;
  120. }
  121. .el-col-xl-pull-#{$i} {
  122. position: relative;
  123. right: (1 / 24 * $i * 100) * 1%;
  124. }
  125. .el-col-xl-push-#{$i} {
  126. position: relative;
  127. left: (1 / 24 * $i * 100) * 1%;
  128. }
  129. }
  130. }