diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui/tabs')
-rw-r--r-- | catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less | 117 |
1 files changed, 59 insertions, 58 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less index f7b18b1cc8..8f666bd2a5 100644 --- a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less @@ -1,85 +1,86 @@ @import '../../../../../assets/styles/variables'; -tab { - height: 100%; +.tab { + height: 100%; } .tabs { - display:flex; - flex: 0 0 auto; - flex-direction:row; + display: flex; + flex: 0 0 auto; + flex-direction: row; } .tab { - flex: 1 0 auto; - cursor: pointer; - padding: .5em; + flex: 1 0 auto; + cursor: pointer; + padding: .5em; } .tab-content-container { - flex: 1; - width:100%; - overflow-y:hidden; - overflow-x:hidden; + flex: 1; + width: 100%; + overflow-y: hidden; + overflow-x: hidden; } .tab-content { - height:100%; + height: 100%; } /*Tab styles*/ -.tabs{ - &.round-tabs .tab{ - background-color: #f8f8f8; - color: #959595; - border: solid 1px #d2d2d2; - border-bottom:none; - border-left:none; - position:relative; +.tabs { + &.round-tabs .tab { + background-color: #f8f8f8; + color: #959595; + border: solid 1px #d2d2d2; + border-bottom: none; + border-left: none; + position: relative; - &:first-child { - border-left:solid 1px #d2d2d2; - } + &:first-child { + border-left: solid 1px #d2d2d2; + } - &.active { - background-color:#009fdb; - color:#e9e9e9; - border-color:#009fdb; - } + &.active { + background-color: #009fdb; + color: #e9e9e9; + border-color: #009fdb; + } - .tab-indication { - position: absolute; - top: -10px; - background-color: #009fdb; - right: 10px; - padding: 2px 0; - border-radius: 15px; - border: solid 1px #d2d2d2; - color:white; - width: 25px; - height: 25px; - text-align: center; + .tab-indication { + position: absolute; + top: -10px; + background-color: #009fdb; + right: 10px; + padding: 2px 0; + border-radius: 15px; + border: solid 1px #d2d2d2; + color: white; + width: 25px; + height: 25px; + text-align: center; - } } + } + + &.simple-tabs .tab { + font-size: 12px; + color: @main_color_n; - &.simple-tabs .tab { - font-size: 12px; - color: @main_color_n; + &:after { + display: block; + content: ''; + border-bottom: 2px solid @main_color_a; + transform: scaleX(0); + transition: transform 200ms ease-in-out; + } - &:after { - display:block; - content: ''; - border-bottom: 2px solid @main_color_a; - transform: scaleX(0); - transition: transform 200ms ease-in-out; - } + &.active { + color: @main_color_a; - &.active { - color: @main_color_a; - &:after { - transform: scaleX(1.2); - } - } + &:after { + transform: scaleX(1.2); + } } + } } |