borders.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. // 边框圆角
  2. .#{$prefix}rounded-none {
  3. border-radius: 0px;
  4. }
  5. .#{$prefix}rounded-full {
  6. border-radius: 9999px;
  7. }
  8. @for $i from 0 through 32 {
  9. // border-radius: {0~32}px;
  10. .#{$prefix}rounded-#{$i} {
  11. border-radius: $i + px;
  12. }
  13. }
  14. @for $i from 0 through 64 {
  15. // border-radius: {0~64}rpx;
  16. .#{$prefix}rounded-#{$i}r {
  17. border-radius: $i + rpx;
  18. }
  19. }
  20. @for $i from 0 through 100 {
  21. // border-radius: {0~100}%;
  22. .#{$prefix}rounded-#{$i}p {
  23. border-radius: $i * 1%;
  24. }
  25. }
  26. // 边框宽度 {0~10} px || rpx
  27. @for $i from 0 through 10 {
  28. // border-width: {0~10}px;
  29. .#{$prefix}border-#{$i} {
  30. border-width: $i + px;
  31. }
  32. // border-top-width: {0~10}px;
  33. .#{$prefix}border-top-#{$i} {
  34. border-top-width: $i + px;
  35. }
  36. // border-right-width: {0~10}px;
  37. .#{$prefix}border-right-#{$i} {
  38. border-right-width: $i + px;
  39. }
  40. // border-bottom-width: {0~10}px;
  41. .#{$prefix}border-bottom-#{$i} {
  42. border-bottom-width: $i + px;
  43. }
  44. // border-left-width: {0~10}px;
  45. .#{$prefix}border-left-#{$i} {
  46. border-left-width: $i + px;
  47. }
  48. }
  49. @for $i from 0 through 20 {
  50. // border-width: {0~20}rpx;
  51. .#{$prefix}border-#{$i}r {
  52. border-width: $i + rpx;
  53. }
  54. // border-top-width: {0~20}rpx;
  55. .#{$prefix}border-top-#{$i}r {
  56. border-top-width: $i + rpx;
  57. }
  58. // border-right-width: {0~20}rpx;
  59. .#{$prefix}border-right-#{$i}r {
  60. border-right-width: $i + rpx;
  61. }
  62. // border-bottom-width: {0~20}rpx;
  63. .#{$prefix}border-bottom-#{$i}r {
  64. border-bottom-width: $i + rpx;
  65. }
  66. // border-left-width: {0~20}rpx;
  67. .#{$prefix}border-left-#{$i}r {
  68. border-left-width: $i + rpx;
  69. }
  70. }
  71. // 边框颜色
  72. .#{$prefix}border-transparent {
  73. border-color: transparent;
  74. }
  75. /* #ifndef APP-NVUE */
  76. .#{$prefix}border-current {
  77. border-color: currentColor;
  78. }
  79. /* #endif */
  80. .#{$prefix}border-fff,
  81. .#{$prefix}border-white {
  82. border-color: #fff;
  83. }
  84. .#{$prefix}border-000,
  85. .#{$prefix}border-black {
  86. border-color: #000;
  87. }
  88. @for $i from 1 through 9 {
  89. .#{$prefix}border-#{$i * 111} {
  90. border-color: unquote("##{$i * 111}");
  91. }
  92. }
  93. // 边框样式
  94. .#{$prefix}border-solid {
  95. border-style: solid;
  96. }
  97. .#{$prefix}border-dashed {
  98. border-style: dashed;
  99. }
  100. .#{$prefix}border-dotted {
  101. border-style: dotted;
  102. }
  103. /* #ifndef APP-NVUE */
  104. .#{$prefix}border-double {
  105. border-style: double;
  106. }
  107. .#{$prefix}border-none {
  108. border-style: none;
  109. }
  110. /* #endif */