Newer
Older
DH_Apicture / src / assets / styles / mixin.scss
@zhangqy zhangqy on 29 Nov 1 KB first commit
  1. @mixin clearfix {
  2. &:after {
  3. content: "";
  4. display: table;
  5. clear: both;
  6. }
  7. }
  8.  
  9. @mixin scrollBar {
  10. &::-webkit-scrollbar-track-piece {
  11. background: #d3dce6;
  12. }
  13.  
  14. &::-webkit-scrollbar {
  15. width: 6px;
  16. }
  17.  
  18. &::-webkit-scrollbar-thumb {
  19. background: #99a9bf;
  20. border-radius: 20px;
  21. }
  22. }
  23.  
  24. @mixin relative {
  25. position: relative;
  26. width: 100%;
  27. height: 100%;
  28. }
  29.  
  30. @mixin pct($pct) {
  31. width: #{$pct};
  32. position: relative;
  33. margin: 0 auto;
  34. }
  35.  
  36. @mixin triangle($width, $height, $color, $direction) {
  37. $width: $width/2;
  38. $color-border-style: $height solid $color;
  39. $transparent-border-style: $width solid transparent;
  40. height: 0;
  41. width: 0;
  42.  
  43. @if $direction==up {
  44. border-bottom: $color-border-style;
  45. border-left: $transparent-border-style;
  46. border-right: $transparent-border-style;
  47. }
  48.  
  49. @else if $direction==right {
  50. border-left: $color-border-style;
  51. border-top: $transparent-border-style;
  52. border-bottom: $transparent-border-style;
  53. }
  54.  
  55. @else if $direction==down {
  56. border-top: $color-border-style;
  57. border-left: $transparent-border-style;
  58. border-right: $transparent-border-style;
  59. }
  60.  
  61. @else if $direction==left {
  62. border-right: $color-border-style;
  63. border-top: $transparent-border-style;
  64. border-bottom: $transparent-border-style;
  65. }
  66. }