_tabs.less 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Horizontal tabs
  7. // _____________________________________________
  8. // Are used in dashboard
  9. .tabs-horiz {
  10. &:extend(.abs-clearfix all);
  11. margin: 0;
  12. padding: 0;
  13. // Default tab
  14. .ui-state-default {
  15. background: @color-gray89;
  16. border: .1rem solid @color-gray68;
  17. float: left;
  18. letter-spacing: .0183em; // For tab width fixing depending on normal-semibold font-weight
  19. list-style: none;
  20. margin-right: .4rem;
  21. }
  22. // Hovered tab
  23. .ui-state-hover {
  24. background: @color-gray84;
  25. }
  26. // Active tab
  27. .ui-state-active {
  28. background: @color-white;
  29. border-bottom: 0;
  30. font-weight: @font-weight__semibold;
  31. letter-spacing: normal;
  32. margin-bottom: -.1rem;
  33. .ui-tabs-anchor {
  34. border-bottom: .1rem solid @color-white;
  35. border-top: .4rem solid @color-phoenix;
  36. padding-top: 1.1rem;
  37. }
  38. }
  39. .ui-tabs-anchor {
  40. color: @color-brown-darker;
  41. display: block;
  42. padding: 1.5rem 1.8rem 1.3rem;
  43. text-decoration: none;
  44. &:hover { // ToDo UI: should be deleted with old styles
  45. color: @color-brown-darker;
  46. text-decoration: none;
  47. }
  48. }
  49. }
  50. // Tabs content
  51. .ui-tabs-panel {
  52. margin-top: -1px;
  53. padding: 2rem;
  54. }