mixin.scss 1.7 KB

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