_tab.less 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. #tab-select {
  2. height: @panel-height;
  3. line-height: @panel-height;
  4. min-width: 200px;
  5. margin-left: 10px;
  6. float: left;
  7. .fui-button {
  8. width: 60px;
  9. height: @panel-height;
  10. line-height: @panel-height;
  11. text-align: 50px;
  12. display: inline-block;
  13. &:hover {
  14. background: @tab-hover !important;
  15. }
  16. &:active {
  17. background: @tab-active !important;
  18. }
  19. .fui-icon {
  20. display: none;
  21. }
  22. .fui-label {
  23. height: @panel-height;
  24. line-height: @panel-height;
  25. text-align: center;
  26. display: block;
  27. color: hsl(224, 6%, 80%);
  28. font-size: 14px;
  29. &:hover {
  30. background: @tab-hover;
  31. }
  32. &:active {
  33. background: darken(@tab-active, 10%);
  34. }
  35. }
  36. &.fui-selected {
  37. .fui-label {
  38. color: white;
  39. }
  40. &:after {
  41. content: ' ';
  42. height: 0;
  43. line-height: 0;
  44. font-size: 0;
  45. display: block;
  46. position: absolute;
  47. border: 6px solid;
  48. border-color: transparent transparent white transparent;
  49. bottom: 0;
  50. left: 50%;
  51. margin-left: -3px;
  52. z-index: 11;
  53. }
  54. }
  55. }
  56. &.collapsed .fui-button.fui-selected {
  57. .fui-label {
  58. color: hsl(224, 6%, 80%);
  59. }
  60. &:after {
  61. display: none;
  62. }
  63. }
  64. }
  65. .fullscreen #tab-container {
  66. transform: translate(0, -101px) !important;
  67. }
  68. #tab-container {
  69. position: absolute;
  70. top: @panel-height;
  71. height: 60px;
  72. left: 0;
  73. right: 0;
  74. background: white;
  75. z-index: 10;
  76. border-bottom: 1px solid #dbdbdb;
  77. box-shadow: 0 -3px 3px rgba(0, 0, 0, .05);
  78. overflow: visible;
  79. /* 每一个 Tab 面板 */
  80. & > .fui-panel {
  81. display: block;
  82. height: 100%;
  83. /* 每一个小节 */
  84. & > .fui-panel-content > .fui-panel {
  85. height: 100%;
  86. padding: 0 5px;
  87. border-right: 1px dashed #eee;
  88. & > .fui-panel-content > .fui-label {
  89. text-align: center;
  90. display: block;
  91. width: 100%;
  92. padding: 1px 0;
  93. position: absolute;
  94. bottom: 0;
  95. top: auto;
  96. display: none;
  97. }
  98. & > .fui-panel-content > .fui-label-panel-content {
  99. padding: 5px;
  100. }
  101. }
  102. }
  103. &.collapsed {
  104. opacity: 0;
  105. height: 0;
  106. }
  107. }