style.scss 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. @import './var.scss';
  2. @import './animation.scss';
  3. @import './mixins/mixins.scss';
  4. // extends
  5. // 过度
  6. .go-transition {
  7. transition: all 0.2s;
  8. }
  9. .go-flex-center {
  10. display: flex;
  11. justify-content: center;
  12. align-items: center;
  13. }
  14. .go-absolute-center {
  15. position: absolute;
  16. top: 50%;
  17. left: 50%;
  18. transform: translate(-50%, -50%);
  19. }
  20. // 毛玻璃
  21. .go-background-filter {
  22. backdrop-filter: $--filter-blur-base;
  23. background-color: $--filter-color-base-1;
  24. box-shadow: $--border-shadow;
  25. }
  26. // 边框圆角
  27. .go-border-radius {
  28. border-radius: $--border-radius-base;
  29. overflow: hidden;
  30. }
  31. // 背景斑点需配合 @mixin background-point 使用
  32. .go-point-bg {
  33. @include fetch-theme('background-color');
  34. background-size: 15px 15px, 15px 15px;
  35. }
  36. // todo 使用 scss 循环写一套完整的
  37. // margin
  38. .go-mt-0 {
  39. margin-top: 0;
  40. }
  41. .go-mb-0 {
  42. margin-bottom: 0;
  43. }
  44. .go-mx-0 {
  45. @extend .go-mt-0;
  46. @extend .go-mb-0;
  47. }
  48. .go-pt-0 {
  49. padding-top: 0;
  50. }
  51. .go-pb-0 {
  52. padding-bottom: 0;
  53. }
  54. .go-px-0 {
  55. @extend .go-pt-0;
  56. @extend .go-pb-0;
  57. }