style.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. @import './var.scss';
  2. @import './animation.scss';
  3. @import './mixins/mixins.scss';
  4. // 过度
  5. .go-transition {
  6. transition: all 0.4s;
  7. }
  8. .go-transition-quick {
  9. transition: all 0.2s;
  10. }
  11. .go-flex-center {
  12. display: flex;
  13. justify-content: center;
  14. align-items: center;
  15. text-align: center;
  16. }
  17. .go-flex-no-wrap {
  18. flex-wrap: nowrap !important;
  19. }
  20. .go-absolute-center {
  21. position: absolute;
  22. top: 50%;
  23. left: 50%;
  24. transform: translate(-50%, -50%);
  25. }
  26. // cursor 小手
  27. .go-cursor-pointer {
  28. cursor: pointer;
  29. }
  30. // IE盒模型
  31. .go-boderbox {
  32. box-sizing: border-box;
  33. }
  34. // 毛玻璃
  35. .go-background-filter {
  36. backdrop-filter: $--filter-blur-base;
  37. @include filter-bg-color('filter-color');
  38. box-shadow: $--border-shadow;
  39. }
  40. // 边框圆角
  41. .go-border-radius {
  42. border-radius: $--border-radius-base;
  43. overflow: hidden;
  44. }
  45. // 背景斑点需配合 @mixin background-image 使用
  46. .go-point-bg {
  47. @include fetch-theme-custom('background-color', 'background-color1');
  48. background-size: 15px 15px, 15px 15px;
  49. }
  50. // todo 使用 scss 循环写一套完整的
  51. // margin
  52. .go-mt-0 {
  53. margin-top: 0 !important;
  54. }
  55. .go-mb-0 {
  56. margin-bottom: 0 !important;
  57. }
  58. .go-ml-0 {
  59. margin-left: 0 !important;
  60. }
  61. .go-mr-0 {
  62. margin-right: 0 !important;
  63. }
  64. .go-my-0 {
  65. @extend .go-mt-0;
  66. @extend .go-mb-0;
  67. }
  68. .go-mx-0 {
  69. @extend .go-ml-0;
  70. @extend .go-mr-0;
  71. }
  72. .go-pt-0 {
  73. padding-top: 0 !important;
  74. }
  75. .go-pb-0 {
  76. padding-bottom: 0 !important;
  77. }
  78. .go-pl-0 {
  79. padding-left: 0 !important;
  80. }
  81. .go-pr-0 {
  82. padding-right: 0 !important;
  83. }
  84. .go-py-0 {
  85. @extend .go-pt-0;
  86. @extend .go-pb-0;
  87. }
  88. .go-px-0 {
  89. @extend .go-pl-0;
  90. @extend .go-pr-0;
  91. }