You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

tabsheet.scss 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. @mixin base-tabsheet($primaryStyleName : v-tabsheet) {
  2. .#{$primaryStyleName},
  3. .#{$primaryStyleName}-content,
  4. .#{$primaryStyleName}-deco {
  5. outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */
  6. text-align: left; /* Force default alignment */
  7. }
  8. .#{$primaryStyleName}-tabs {
  9. empty-cells: hide;
  10. border-collapse: collapse;
  11. margin: 0;
  12. padding: 0;
  13. border: 0;
  14. width: 100%;
  15. overflow:hidden;
  16. }
  17. .#{$primaryStyleName}-tabitemcell:focus {
  18. outline: none;
  19. }
  20. .#{$primaryStyleName}-tabitemcell,
  21. .#{$primaryStyleName}-spacertd {
  22. margin: 0;
  23. padding: 0;
  24. vertical-align: bottom;
  25. }
  26. .#{$primaryStyleName}-spacertd {
  27. width: 100%;
  28. }
  29. .#{$primaryStyleName}-spacertd div {
  30. border-left: 1px solid #aaa;
  31. border-bottom: 1px solid #aaa;
  32. height: 1em;
  33. padding: 0.2em 0;
  34. }
  35. .#{$primaryStyleName}-hidetabs > .#{$primaryStyleName}-tabcontainer {
  36. display: none;
  37. }
  38. .#{$primaryStyleName}-scroller {
  39. white-space: nowrap;
  40. text-align: right;
  41. margin-top: -1em;
  42. }
  43. .v-disabled .#{$primaryStyleName}-scroller {
  44. display: none;
  45. }
  46. .#{$primaryStyleName}-scrollerPrev,
  47. .#{$primaryStyleName}-scrollerNext,
  48. .#{$primaryStyleName}-scrollerPrev-disabled,
  49. .#{$primaryStyleName}-scrollerNext-disabled {
  50. border: 1px solid #aaa;
  51. background: #fff;
  52. width: 12px;
  53. height: 1em;
  54. cursor: pointer;
  55. }
  56. .#{$primaryStyleName}-scrollerPrev-disabled,
  57. .#{$primaryStyleName}-scrollerNext-disabled {
  58. opacity: 0.5;
  59. cursor: default;
  60. }
  61. .#{$primaryStyleName}-tabs .v-caption,
  62. .#{$primaryStyleName}-tabs .v-caption span {
  63. white-space: nowrap;
  64. }
  65. .#{$primaryStyleName}-caption-close {
  66. display: inline;
  67. display: inline-block;
  68. zoom: 1;
  69. width: 16px;
  70. height: 16px;
  71. text-align: center;
  72. font-weight: bold;
  73. cursor: pointer;
  74. vertical-align: middle;
  75. user-select: none;
  76. -khtml-user-select: none;
  77. -ms-user-select: none;
  78. -moz-user-select: none;
  79. -webkit-user-select: none;
  80. }
  81. .#{$primaryStyleName} .v-disabled .#{$primaryStyleName}-caption-close {
  82. cursor: default;
  83. visibility: hidden;
  84. }
  85. .#{$primaryStyleName}-tabitem:hover .#{$primaryStyleName}-caption-close {
  86. visibility: visible;
  87. }
  88. .#{$primaryStyleName}-tabitem {
  89. border: 1px solid #aaa;
  90. border-right: none;
  91. cursor: pointer;
  92. padding: 0.2em 0.5em;
  93. }
  94. .#{$primaryStyleName}-tabitem .v-caption {
  95. cursor: inherit;
  96. }
  97. .#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-tabitem,
  98. .#{$primaryStyleName}-tabitemcell-disabled .#{$primaryStyleName}-tabitem {
  99. cursor: default;
  100. }
  101. .#{$primaryStyleName}-tabitem-selected {
  102. cursor: default;
  103. border-bottom-color: #fff;
  104. }
  105. .#{$primaryStyleName}-tabitem-selected .v-caption {
  106. cursor: default;
  107. }
  108. .#{$primaryStyleName}-tabitem-focus .v-captiontext {
  109. text-decoration: underline;
  110. }
  111. .#{$primaryStyleName}-tabitem-selected.#{$primaryStyleName}-tabitem-focus .v-captiontext {
  112. text-decoration: inherit;
  113. }
  114. .#{$primaryStyleName}-content {
  115. border: 1px solid #aaa;
  116. /* Vertical borders are not supported, use v-tabsheet-tabcontainer and v-tabsheet-deco to present these borders */
  117. border-top: none;
  118. border-bottom: none;
  119. position: relative;
  120. }
  121. .#{$primaryStyleName}-deco {
  122. height: 1px;
  123. background: #aaa;
  124. overflow: hidden;
  125. }
  126. .#{$primaryStyleName}-hidetabs .#{$primaryStyleName}-content {
  127. border: none;
  128. }
  129. .#{$primaryStyleName}-hidetabs .#{$primaryStyleName}-deco {
  130. height: 0;
  131. }
  132. }