catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less

   1 @import '../../../../../assets/styles/variables';
   2
   3 .tab {
   4   height: 100%;
   5 }
   6
   7 .tabs {
   8   display: flex;
   9   flex: 0 0 auto;
  10   flex-direction: row;
  11 }
  12
  13 .tab {
  14   flex: 1 0 auto;
  15   cursor: pointer;
  16   padding: .5em;
  17 }
  18
  19 .tab-content-container {
  20   flex: 1;
  21   width: 100%;
  22   overflow-y: hidden;
  23   overflow-x: hidden;
  24 }
  25
  26 .tab-content {
  27   height: 100%;
  28 }
  29
  30 /*Tab styles*/
  31 .tabs {
  32   &.round-tabs .tab {
  33     background-color: #f8f8f8;
  34     color: #959595;
  35     border: solid 1px #d2d2d2;
  36     border-bottom: none;
  37     border-left: none;
  38     position: relative;
  39
  40     &:first-child {
  41       border-left: solid 1px #d2d2d2;
  42     }
  43
  44     &.active {
  45       background-color: #009fdb;
  46       color: #e9e9e9;
  47       border-color: #009fdb;
  48     }
  49
  50     .tab-indication {
  51       position: absolute;
  52       top: -10px;
  53       background-color: #009fdb;
  54       right: 10px;
  55       padding: 2px 0;
  56       border-radius: 15px;
  57       border: solid 1px #d2d2d2;
  58       color: white;
  59       width: 25px;
  60       height: 25px;
  61       text-align: center;
  62
  63     }
  64   }
  65
  66   &.simple-tabs .tab {
  67     font-size: 12px;
  68     color: @main_color_n;
  69
  70     &:after {
  71       display: block;
  72       content: '';
  73       border-bottom: 2px solid @main_color_a;
  74       transform: scaleX(0);
  75       transition: transform 200ms ease-in-out;
  76     }
  77
  78     &.active {
  79       color: @main_color_a;
  80
  81       &:after {
  82         transform: scaleX(1.2);
  83       }
  84     }
  85   }
  86 }