_tabs.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. $tab-label-height:3.5em;
  2. // New JS powered tabs
  3. .form-tabs {
  4. .admin-pages &:first-child {
  5. margin-top: -2rem;
  6. }
  7. .admin-pages &{
  8. .tabs-nav {
  9. margin-right: 180px;
  10. @include breakpoint(mobile-only) {
  11. margin-right: 0 !important;
  12. }
  13. }
  14. }
  15. .tabs-nav {
  16. @include display(flex);
  17. a {
  18. @include flex(1);
  19. transition: color 0.5s ease, background 0.5s ease;
  20. cursor: pointer;
  21. min-height: $tab-label-height;
  22. text-align:center;
  23. padding: 4px;
  24. display: flex;
  25. align-items: center;
  26. justify-content: center;
  27. }
  28. span {
  29. display: inline-block;
  30. line-height: 1.1;
  31. }
  32. }
  33. .tabs-content {
  34. .tab__content {
  35. display: none;
  36. padding-top: 2rem;
  37. &.active {
  38. display: block;
  39. }
  40. }
  41. }
  42. }
  43. .tabs-content {
  44. .tabs-nav {
  45. margin-right: 0 !important;
  46. }
  47. }
  48. // Old tabs here for posterity!
  49. .tab-bar {
  50. @include clearfix;
  51. margin: 0;
  52. padding: 0;
  53. list-style: none;
  54. li {
  55. display: block;
  56. float: left;
  57. height: $tab-label-height;
  58. @include breakpoint(mobile-only) {
  59. width: 100%;
  60. span, a {
  61. width: 100%;
  62. text-align: center;
  63. }
  64. }
  65. }
  66. span, a {
  67. @extend .default-animation;
  68. display: inline-block;
  69. padding: 0 4rem;
  70. line-height: $tab-label-height;
  71. }
  72. }