catalog-ui/src/app/ng2/shared/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 }
  24
  25 .tab-content {
  26     height:100%;
  27 }
  28
  29 /*Tab styles*/
  30 .tabs{
  31     &.round-tabs .tab{
  32         background-color: #f8f8f8;
  33         color: #959595;
  34         border: solid 1px #d2d2d2;
  35         border-bottom:none;
  36         border-left:none;
  37         position:relative;
  38
  39         &:first-child {
  40             border-left:solid 1px #d2d2d2;
  41         }
  42
  43         &.active {
  44             background-color:#009fdb;
  45             color:#e9e9e9;
  46             border-color:#009fdb;
  47         }
  48
  49         .tab-indication {
  50             position: absolute;
  51             top: -10px;
  52             background-color: #009fdb;
  53             right: 10px;
  54             padding: 2px 0;
  55             border-radius: 15px;
  56             border: solid 1px #d2d2d2;
  57             color:white;
  58             width: 25px;
  59             height: 25px;
  60             text-align: center;
  61
  62         }
  63     }
  64
  65     &.simple-tabs .tab {
  66         font-size: 12px;
  67         color: @main_color_n;
  68
  69         &:after {
  70             display:block;
  71             content: '';
  72             border-bottom: 2px solid @main_color_a;
  73             transform: scaleX(0);
  74             transition: transform 200ms ease-in-out;
  75         }
  76
  77         &.active {
  78             color: @main_color_a;
  79             &:after {
  80                 transform: scaleX(1.2);
  81             }
  82         }
  83     }
  84 }