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             &:after {
  81                 transform: scaleX(1.2);
  82             }
  83         }
  84     }
  85 }