aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/ui/tabs
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui/tabs')
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less117
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);
+ }
}
+ }
}