_tabs.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. $tab-label-height: 50px;
  2. // New JS powered tabs
  3. .form-tabs {
  4. .admin-pages &:first-child {
  5. margin-top: -1rem;
  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. padding-top: 1px;
  18. a {
  19. @include flex(1);
  20. transition: color 0.5s ease, background 0.5s ease;
  21. cursor: pointer;
  22. min-height: $tab-label-height;
  23. text-align:center;
  24. padding: 4px;
  25. display: flex;
  26. align-items: center;
  27. justify-content: center;
  28. }
  29. span {
  30. display: inline-block;
  31. line-height: 1.1;
  32. }
  33. }
  34. &.subtle .tabs-nav {
  35. margin-right: 0 !important;
  36. }
  37. .tabs-content {
  38. .tab__content {
  39. display: none;
  40. padding-top: 2rem;
  41. &.active {
  42. display: block;
  43. }
  44. }
  45. }
  46. &.side-tabs {
  47. display: flex;
  48. background: none;
  49. > .tabs-nav {
  50. width: 20%;
  51. display: block;
  52. padding-top: 1.5rem;
  53. a {
  54. text-align: left;
  55. flex: none;
  56. justify-content: left;
  57. padding-left: 15px;
  58. }
  59. }
  60. > .tabs-content {
  61. width: 80%;
  62. }
  63. }
  64. }
  65. // Old tabs here for posterity!
  66. //.tab-bar {
  67. // @include clearfix;
  68. // margin: 0;
  69. // padding: 0;
  70. // list-style: none;
  71. //
  72. // li {
  73. //
  74. // display: block;
  75. // float: left;
  76. // height: $tab-label-height;
  77. //
  78. // @include breakpoint(mobile-only) {
  79. // width: 100%;
  80. // span, a {
  81. // width: 100%;
  82. // text-align: center;
  83. // }
  84. // }
  85. // }
  86. //
  87. // span, a {
  88. // @extend .default-animation;
  89. // display: inline-block;
  90. // padding: 0 4rem;
  91. // line-height: $tab-label-height;
  92. // }
  93. //}