_tabbar.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. .tabbar {
  2. height:$tabbar-height;
  3. display:flex;
  4. align-items: center;
  5. border-bottom: 1px solid $background-lighter2;
  6. width:100%;
  7. overflow-x:auto;
  8. overflow-y:hidden;
  9. box-sizing: border-box;
  10. .tab {
  11. height:calc(#{$tabbar-height} - 2px);
  12. width:auto;
  13. padding: 0 10px 0 10px;
  14. color:$color;
  15. line-height: $tabbar-height;
  16. text-align: center;
  17. cursor: pointer;
  18. margin: 0 5px 0 5px;
  19. box-sizing: border-box;
  20. // Hover on it
  21. &:hover {
  22. border-bottom: 1px solid $color-top;
  23. background-color: $background-lighter;
  24. }
  25. // Clic on it
  26. &:active {
  27. background-color: $background-lighter2;
  28. }
  29. // tab selected
  30. &.active {
  31. border-bottom: 1px solid $color-top;
  32. }
  33. }
  34. .more-tabs {
  35. width : $tabbar-height;
  36. height : $tabbar-height;
  37. display : flex;
  38. justify-content : center;
  39. align-items : center;
  40. cursor : pointer;
  41. position : relative;
  42. border-right : 1px solid $background-lighter2;
  43. &:hover {
  44. background-color: $background-lighter2;
  45. }
  46. &:active {
  47. color:$color-top;
  48. background-color: $background-lighter3;
  49. }
  50. // This tool is activated
  51. &.active {
  52. color:$color-top;
  53. }
  54. }
  55. }