_tabs.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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. }
  47. // Old tabs here for posterity!
  48. //.tab-bar {
  49. // @include clearfix;
  50. // margin: 0;
  51. // padding: 0;
  52. // list-style: none;
  53. //
  54. // li {
  55. //
  56. // display: block;
  57. // float: left;
  58. // height: $tab-label-height;
  59. //
  60. // @include breakpoint(mobile-only) {
  61. // width: 100%;
  62. // span, a {
  63. // width: 100%;
  64. // text-align: center;
  65. // }
  66. // }
  67. // }
  68. //
  69. // span, a {
  70. // @extend .default-animation;
  71. // display: inline-block;
  72. // padding: 0 4rem;
  73. // line-height: $tab-label-height;
  74. // }
  75. //}