assets/css/tabs.css

   1 .tab {
   2     display: flex;
   3     flex-wrap: wrap;
   4     margin-left: -20px;
   5     padding: 0;
   6     list-style: none;
   7     position: relative;
   8 }
   9
  10 .tab > * {
  11     flex: none;
  12     padding-left: 20px;
  13     position: relative;
  14 }
  15
  16 .tab > * > a {
  17     display: block;
  18     text-align: center;
  19     padding: 9px 20px;
  20     color: #999;
  21     border-bottom: 2px solid transparent;
  22     border-bottom-color: transparent;
  23     font-size: 12px;
  24     text-transform: uppercase;
  25     transition: color .1s ease-in-out;
  26     line-height: 20px;
  27 }
  28
  29 .tab > li {
  30     transition: color .1s ease-in-out;
  31 }
  32
  33 .tab > li > .active {
  34     color:#222;
  35     border-color: #1e87f0;
  36 }
  37
  38 .tab li a {
  39     text-decoration: none;
  40     cursor: pointer;
  41 }
  42
  43 .tab > li > a:focus {
  44     outline: 0;
  45 }
  46
  47 .tab > li > .active:focus-visible {
  48     outline: 5px auto -webkit-focus-ring-color;
  49     outline-offset: -2px;
  50 }
  51
  52 .tab-content{
  53     padding: 0;
  54 }
  55
  56 .tab-content li {
  57     display: none;
  58 }
  59 .tab-content li.active {
  60     display: initial;
  61 }