diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components')
14 files changed, 837 insertions, 960 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less b/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less index 774b7eb798..26ae0d4d74 100644 --- a/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less +++ b/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less @@ -1,292 +1,264 @@ @import './../../../../../assets/styles/mixins.less'; @import '../../../../../assets/styles/sprite'; - @smaller-screen: ~"only screen and (max-width: 1580px)"; -:host /deep/ input { - width: 100%; -} +:host /deep/ input { width:100%;} .attributes-table { - display: flex; - flex-direction: column; - flex: 1; - height: 100%; - text-align: left; - - - .inner-cell-div { - text-overflow: ellipsis; - overflow: hidden; - height: 20px; - } - - .inner-cell-div-multiline { - max-width: 100%; - } - - .table-header { - display: flex; - flex-direction: row; - flex: 0 0 auto; - font-weight: bold; - border-top: #d2d2d2 solid 1px; - background-color: #f2f2f2; - - .table-cell { - color: #191919; - font-size: 13px; - - .table-header-sort-arrow { - display: inline-block; - background-color: transparent; - border: none; - color: #AAA; - margin: 8px 0 0 5px; - - &.up { - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid; - height: 5px; - } - - &.down { - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid; - } - } - } - } - - .table-rows-header { - border: #d2d2d2 solid 1px; - border-top: none; - display: flex; - align-items: center; - - .archive-label { - margin-left: 10px; - } - } - - .table-body { display: flex; flex-direction: column; - overflow-y: auto; flex: 1; - background-color: @main_color_p; - - .no-data { - border: #d2d2d2 solid 1px; - border-top: none; - text-align: center; - height: 100%; - padding: 20px; - } + height: 100%; + text-align: left; - /deep/ .selected { - background-color: #e6f6fb; - color: #009fdb; - } - - &.view-mode { - /deep/ .dynamic-property-row:not(.selected) { - background-color: #f8f8f8; - } - } - - .table-row { - display: flex; - flex-direction: row; - flex: 0 0 auto; - - &.readonly { - background-color: #f8f8f8; - cursor: auto; - } - - &:hover:not(.selected) { - background-color: #f8f8f8; - cursor: pointer; - - /deep/ .dynamic-property-row:not(.selected) { - background-color: #f8f8f8; - cursor: pointer; - } - } - .selected-row { - background-color: #e6f6fb; - } - - .table-cell.valueCol { - padding: 0px; - - } + .inner-cell-div { + text-overflow: ellipsis; + overflow: hidden; + height: 20px; } - } - .table-cell { - font-size: 13px; - flex: 1; - border: #d2d2d2 solid 1px; - border-right: none; - border-top: none; - padding: 10px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: flex; - min-height: 40px; - - &:last-child { - border-right: #d2d2d2 solid 1px; + .inner-cell-div-multiline { + max-width: 100%; } - // Column: Property Name - &.col1 { - flex: 1 0 190px; - max-width: 300px; - display: flex; - @media @smaller-screen { - flex: 0 0 25%; - } - - .attribute-name { - flex: 1; + .table-header { display: flex; - overflow: hidden; - //max-width: 90%; fix bug 327139 - } - - .property-description-icon { - float: right; - margin-top: 4px; - margin-left: 15px; + flex-direction:row; flex: 0 0 auto; - } - } - - // Column: Type - &.col2 { - flex: 0 0 150px; - max-width: 150px; - @media @smaller-screen { - flex: 0 0 20%; - } + font-weight:bold; + border-top: #d2d2d2 solid 1px; + background-color: #f2f2f2; + + .table-cell { + color:#191919; + font-size:13px; + .table-header-sort-arrow { + display: inline-block; + background-color: transparent; + border: none; + color: #AAA; + margin: 8px 0 0 5px; + &.up { + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid; + height:5px; + } + &.down { + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid; + } + } + } } - // Column: ES - &.col3 { - flex: 0 0 120px; - max-width: 120px; - @media @smaller-screen { - flex: 0 0 15%; - } + .table-rows-header { + border: #d2d2d2 solid 1px; + border-top:none; + display: flex; + align-items: center; + .archive-label{ + margin-left: 10px; + } } - // Column: Value - &.valueCol { - flex: 2 0 250px; - display: flex; - @media @smaller-screen { - flex: 1 0 40%; - } + .table-body { + display:flex; + flex-direction: column; + overflow-y:auto; + flex: 1; + background-color: @main_color_p; + + .no-data { + border: #d2d2d2 solid 1px; + border-top:none; + text-align: center; + height: 100%; + padding: 20px; + } + /deep/.selected{ + background-color: #e6f6fb; + color: #009fdb; + } + &.view-mode{ + /deep/ .dynamic-property-row:not(.selected){ + background-color:#f8f8f8; + } + } + .table-row { + display: flex; + flex-direction:row; + flex: 0 0 auto; + &.readonly{ + background-color: #f8f8f8; + cursor: auto; + } + + &:hover:not(.selected){ + background-color:#f8f8f8; cursor:pointer; + /deep/ .dynamic-property-row:not(.selected){ + background-color:#f8f8f8; cursor:pointer; + } + } + + .selected-row { + background-color:#e6f6fb; + } + + .table-cell.valueCol { + padding:0px; + + } + } } + .table-cell { + font-size:13px; + flex:1; + border: #d2d2d2 solid 1px; + border-right:none; + border-top:none; + padding:10px; + text-overflow: ellipsis; + white-space: nowrap; + overflow:hidden; + display: flex; + min-height:40px; + &:last-child { + border-right:#d2d2d2 solid 1px; + } - /deep/ .checkbox-container { - margin-right: 10px; - } - - /deep/ &.round-checkbox { - .checkbox-container input[type=checkbox].checkbox-hidden { - &:checked ~ .checkbox-icon::before { - .sprite-new; - .round-checked-icon; + // Column: Property Name + &.col1 { + flex: 1 0 190px; + max-width:300px; + display: flex; + @media @smaller-screen { flex: 0 0 25%;} + + .attribute-name { + flex: 1; + display: flex; + overflow: hidden; + //max-width: 90%; fix bug 327139 + } + + .property-description-icon { + float: right; + margin-top: 4px; + margin-left: 15px; + flex: 0 0 auto; + } } - &[disabled] ~ .checkbox-icon::before { - .sprite-new; - .round-checked-icon.disabled; - background-color: inherit; - border: none; - //animation: addDisabledCheck 4s linear; + // Column: Type + &.col2 { + flex: 0 0 150px; + max-width:150px; + @media @smaller-screen { flex: 0 0 20%;} } - } - } - } - .delete-button-container { - max-height: 24px; - cursor: pointer; - } + // Column: ES + &.col3 { + flex:0 0 120px; + max-width:120px; + @media @smaller-screen { flex: 0 0 15%;} + } - .filtered { - /deep/ .checkbox-label-content { - background-color: yellow; - } - } + // Column: Value + &.valueCol { + flex: 2 0 250px; + display: flex; + @media @smaller-screen { flex: 1 0 40%;} + } - .dynamic-property { - width: 100%; - &:last-child /deep/ .dynamic-property-row { - border-bottom: none; - } - } + /deep/ .checkbox-container { + margin-right: 10px; + } - .table-row { - /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { - background: linear-gradient(to right, transparent 0%, #ffffff 80%); - padding-left: 1em; + /deep/ &.round-checkbox { + .checkbox-container input[type=checkbox].checkbox-hidden { + &:checked ~ .checkbox-icon::before { + .sprite-new; + .round-checked-icon; + } + &[disabled] ~ .checkbox-icon::before { + .sprite-new; + .round-checked-icon.disabled; + background-color:inherit; + border:none; + //animation: addDisabledCheck 4s linear; + } + } + } } - &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { - background: linear-gradient(to right, transparent 0%, #e6f6fb 80%); - padding-left: 1em; + .delete-button-container { + max-height: 24px; + cursor: pointer; } - &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { - background: linear-gradient(to right, transparent 0%, #f8f8f8 80%); - padding-left: 1em; + .filtered { + /deep/ .checkbox-label-content{ + background-color: yellow; + } } - &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { - background: linear-gradient(to right, transparent 0%, #f8f8f8 80%); - padding-left: 1em; + dynamic-property { + width:100%; + &:last-child /deep/ .dynamic-property-row { + border-bottom:none; + } } - } - .prop-instance-icon { - vertical-align: middle; - margin-right: 7px; + .table-row { + /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { + background: linear-gradient(to right, transparent 0%, #ffffff 80%); + padding-left: 1em; + } - &.defaulticon.small { - background-color: @main_color_q; - border-radius: 14px; - } + &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { + background: linear-gradient(to right, transparent 0%, #e6f6fb 80%); + padding-left: 1em; + } - // square icons - &.icon-group { - .square-icon(); - background-color: @main_color_a; + &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { + background: linear-gradient(to right, transparent 0%, #f8f8f8 80%); + padding-left: 1em; + } - &::before { - content: "G"; - } + &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { + background: linear-gradient(to right, transparent 0%, #f8f8f8 80%); + padding-left: 1em; + } } - &.icon-policy { - .square-icon(); - background-color: @main_color_r; + .prop-instance-icon { + vertical-align: middle; + margin-right: 7px; + &.defaulticon.small { + background-color: @main_color_q; + border-radius:14px; + } + // square icons + &.icon-group { + .square-icon(); + background-color: @main_color_a; + + &::before { + content: "G"; + } + } + &.icon-policy { + .square-icon(); + background-color: @main_color_r; - &::before { - content: "P"; - } - } + &::before { + content: "P"; + } + } - } + } } diff --git a/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less b/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less index 38339bdb8e..fd572b0f2d 100644 --- a/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less +++ b/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less @@ -1,92 +1,82 @@ @import '../../../../../../assets/styles/variables.less'; - .flat-children-container { - .dynamic-property-row { - /*create nested left border classes for up to 10 levels of nesting*/ - .nested-border-loop(@i) when (@i > 0) { - @size: (@i - 1) *2; - &.nested-level-@{i} .table-cell:first-child { - border-left: ~"solid @{size}px #009fdb"; - } - .nested-border-loop(@i - 1) + .dynamic-property-row { + /*create nested left border classes for up to 10 levels of nesting*/ + .nested-border-loop(@i) when (@i > 0) { + @size: (@i - 1) *2; + &.nested-level-@{i} .table-cell:first-child { + border-left: ~"solid @{size}px #009fdb"; + } + .nested-border-loop(@i - 1) + } + .nested-border-loop(10); } - .nested-border-loop(10); - } - - .dynamic-property { - &:first-child .dynamic-property-row.with-top-border { - border-top: solid 1px #d2d2d2; + dynamic-property { + &:first-child .dynamic-property-row.with-top-border { + border-top:solid 1px #d2d2d2; + } + &:not(:last-child) .dynamic-property-row { + border-bottom:solid 1px #d2d2d2; + } } - - &:not(:last-child) .dynamic-property-row { - border-bottom: solid 1px #d2d2d2; - } - } } - .dynamic-property-row { - display: flex; - flex-direction: row; - align-items: stretch; + display:flex; + flex-direction:row; + align-items: stretch; - &.readonly { - background-color: @tlv_color_t; - cursor: auto; - } - - //for the case that the parent is disabled but the child is enabled - &:not(.readonly) { - background-color: @main_color_p; - } - - .table-cell { - flex: 1; - padding: 9px; - justify-content: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + &.readonly{ + background-color: @tlv_color_t; + cursor: auto; + } + //for the case that the parent is disabled but the child is enabled + &:not(.readonly){ + background-color: @main_color_p; + } - &:first-child { - flex: 0 0 50%; - border-right: #d2d2d2 solid 1px; + .table-cell { + flex: 1; + padding:9px; + justify-content: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; - &:only-of-type { - flex: 1 1 100%; - border-right: none; - } + &:first-child { + flex: 0 0 50%; + border-right:#d2d2d2 solid 1px; + &:only-of-type { + flex: 1 1 100%; + border-right:none; + } + } + &.empty { + height:40px; + } } - - &.empty { - height: 40px; + .property-icon { + flex: 0 0 auto; + margin-right:10px; + align-self:center; + cursor:pointer; } - } - - .property-icon { - flex: 0 0 auto; - margin-right: 10px; - align-self: center; - cursor: pointer; - } } .filtered { - /deep/ .checkbox-label-content { - background-color: yellow; - } + /deep/ .checkbox-label-content{ + background-color: yellow; + } } - -.inner-cell-div { - max-width: 100%; - text-overflow: ellipsis; - overflow: hidden; - display: inline; - padding-left: 8px; +.inner-cell-div{ + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + display: inline; + padding-left: 8px; } - .error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; } diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less index 601aaae2f9..1007292854 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less @@ -1,94 +1,84 @@ @import '../../../../../../assets/styles/variables.less'; - .flat-children-container { - .dynamic-property-row { - /*create nested left border classes for up to 10 levels of nesting*/ - .nested-border-loop(@i) when (@i > 0) { - @size: (@i - 1) *2; - &.nested-level-@{i} .table-cell:first-child { - border-left: ~"solid @{size}px #009fdb"; - } - .nested-border-loop(@i - 1) + .dynamic-property-row { + /*create nested left border classes for up to 10 levels of nesting*/ + .nested-border-loop(@i) when (@i > 0) { + @size: (@i - 1) *2; + &.nested-level-@{i} .table-cell:first-child { + border-left: ~"solid @{size}px #009fdb"; + } + .nested-border-loop(@i - 1) + } + .nested-border-loop(10); } - .nested-border-loop(10); - } - - .dynamic-property { - &:first-child .dynamic-property-row.with-top-border { - border-top: solid 1px #d2d2d2; + dynamic-property { + &:first-child .dynamic-property-row.with-top-border { + border-top:solid 1px #d2d2d2; + } + &:not(:last-child) .dynamic-property-row { + border-bottom:solid 1px #d2d2d2; + } } - - &:not(:last-child) .dynamic-property-row { - border-bottom: solid 1px #d2d2d2; - } - } } - .dynamic-property-row { - display: flex; - flex-direction: row; - align-items: stretch; - - &.readonly { - background-color: @tlv_color_t; - cursor: auto; - } - - //for the case that the parent is disabled but the child is enabled - &:not(.readonly) { - background-color: @main_color_p; - } - - .table-cell { - flex: 1; - padding: 9px; - justify-content: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + display:flex; + flex-direction:row; + align-items: stretch; - &:first-child { - flex: 0 0 50%; - border-right: #d2d2d2 solid 1px; - - &:only-of-type { - flex: 1 1 100%; - border-right: none; - } + &.readonly{ + background-color: @tlv_color_t; + cursor: auto; } - - &.empty { - height: 40px; + //for the case that the parent is disabled but the child is enabled + &:not(.readonly){ + background-color: @main_color_p; } - } - - .property-icon { - flex: 0 0 auto; - margin-right: 10px; - align-self: center; - cursor: pointer; - } + .table-cell { + flex: 1; + padding:9px; + justify-content: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &:first-child { + flex: 0 0 50%; + border-right:#d2d2d2 solid 1px; + &:only-of-type { + flex: 1 1 100%; + border-right:none; + } + } + &.empty { + height:40px; + } + } + .property-icon { + flex: 0 0 auto; + margin-right:10px; + align-self:center; + cursor:pointer; + } + } .filtered { - /deep/ .checkbox-label-content { - background-color: yellow; - } + /deep/ .checkbox-label-content{ + background-color: yellow; + } } - -.inner-cell-div { - max-width: 100%; - text-overflow: ellipsis; - overflow: hidden; - display: inline; - padding-left: 8px; +.inner-cell-div{ + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + display: inline; + padding-left: 8px; } - .error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; } diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less index ed5db0bc64..8c2c6ce940 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less @@ -1,293 +1,265 @@ @import './../../../../../assets/styles/mixins.less'; @import '../../../../../assets/styles/sprite'; - @smaller-screen: ~"only screen and (max-width: 1580px)"; -:host /deep/ input { - width: 100%; -} +:host /deep/ input { width:100%;} .properties-table { - display: flex; - flex-direction: column; - flex: 1; - height: 100%; - text-align: left; - - - .inner-cell-div { - text-overflow: ellipsis; - overflow: hidden; - height: 20px; - } - - .inner-cell-div-multiline { - max-width: 100%; - } - - .table-header { - display: flex; - flex-direction: row; - flex: 0 0 auto; - font-weight: bold; - border-top: #d2d2d2 solid 1px; - background-color: #f2f2f2; - - .table-cell { - color: #191919; - font-size: 13px; - - .table-header-sort-arrow { - display: inline-block; - background-color: transparent; - border: none; - color: #AAA; - margin: 8px 0 0 5px; - - &.up { - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid; - height: 5px; - } - - &.down { - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid; - } - } - } - } - - .table-rows-header { - border: #d2d2d2 solid 1px; - border-top: none; - display: flex; - align-items: center; - - .archive-label { - margin-left: 10px; - } - } - - .table-body { - display: flex; - flex-direction: column; - overflow-y: auto; + display:flex; + flex-direction:column; flex: 1; - background-color: @main_color_p; - - .no-data { - border: #d2d2d2 solid 1px; - border-top: none; - text-align: center; - height: 100%; - padding: 20px; - } - - /deep/ .selected { - background-color: #e6f6fb; - color: #009fdb; - } - - &.view-mode { - /deep/ .dynamic-property-row:not(.selected) { - background-color: #f8f8f8; - } - } + height:100%; + text-align:left; - .table-row { - display: flex; - flex-direction: row; - flex: 0 0 auto; - - &.readonly { - background-color: #f8f8f8; - cursor: auto; - } - &:hover:not(.selected) { - background-color: #f8f8f8; - cursor: pointer; - - /deep/ .dynamic-property-row:not(.selected) { - background-color: #f8f8f8; - cursor: pointer; - } - } - - .selected-row { - background-color: #e6f6fb; - } - - .table-cell.valueCol { - padding: 0px; - - } + .inner-cell-div { + text-overflow: ellipsis; + overflow: hidden; + height: 20px; } - } - .table-cell { - font-size: 13px; - flex: 1; - border: #d2d2d2 solid 1px; - border-right: none; - border-top: none; - padding: 10px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: flex; - min-height: 40px; - - &:last-child { - border-right: #d2d2d2 solid 1px; + .inner-cell-div-multiline { + max-width: 100%; } - // Column: Property Name - &.col1 { - flex: 1 0 190px; - max-width: 300px; - display: flex; - @media @smaller-screen { - flex: 0 0 25%; - } - - .property-name { - flex: 1; + .table-header { display: flex; - overflow: hidden; - //max-width: 90%; fix bug 327139 - } - - .property-description-icon { - float: right; - margin-top: 4px; - margin-left: 15px; + flex-direction:row; flex: 0 0 auto; - } - } - - // Column: Type - &.col2 { - flex: 0 0 150px; - max-width: 150px; - @media @smaller-screen { - flex: 0 0 20%; - } + font-weight:bold; + border-top: #d2d2d2 solid 1px; + background-color: #f2f2f2; + + .table-cell { + color:#191919; + font-size:13px; + .table-header-sort-arrow { + display: inline-block; + background-color: transparent; + border: none; + color: #AAA; + margin: 8px 0 0 5px; + &.up { + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid; + height:5px; + } + &.down { + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid; + } + } + } } - // Column: ES - &.col3 { - flex: 0 0 120px; - max-width: 120px; - @media @smaller-screen { - flex: 0 0 15%; - } + .table-rows-header { + border: #d2d2d2 solid 1px; + border-top:none; + display: flex; + align-items: center; + .archive-label{ + margin-left: 10px; + } } - // Column: Value - &.valueCol { - flex: 2 0 250px; - display: flex; - @media @smaller-screen { - flex: 1 0 40%; - } + .table-body { + display:flex; + flex-direction: column; + overflow-y:auto; + flex: 1; + background-color: @main_color_p; + + .no-data { + border: #d2d2d2 solid 1px; + border-top:none; + text-align: center; + height: 100%; + padding: 20px; + } + /deep/.selected{ + background-color: #e6f6fb; + color: #009fdb; + } + &.view-mode{ + /deep/ .dynamic-property-row:not(.selected){ + background-color:#f8f8f8; + } + } + .table-row { + display: flex; + flex-direction:row; + flex: 0 0 auto; + &.readonly{ + background-color: #f8f8f8; + cursor: auto; + } + + &:hover:not(.selected){ + background-color:#f8f8f8; cursor:pointer; + /deep/ .dynamic-property-row:not(.selected){ + background-color:#f8f8f8; cursor:pointer; + } + } + + .selected-row { + background-color:#e6f6fb; + } + + .table-cell.valueCol { + padding:0px; + + } + } } + .table-cell { + font-size:13px; + flex:1; + border: #d2d2d2 solid 1px; + border-right:none; + border-top:none; + padding:10px; + text-overflow: ellipsis; + white-space: nowrap; + overflow:hidden; + display: flex; + min-height:40px; + &:last-child { + border-right:#d2d2d2 solid 1px; + } - /deep/ .checkbox-container { - margin-right: 10px; - } - - /deep/ &.round-checkbox { - .checkbox-container input[type=checkbox].checkbox-hidden { - &:checked ~ .checkbox-icon::before { - .sprite-new; - .round-checked-icon; + // Column: Property Name + &.col1 { + flex: 1 0 190px; + max-width:300px; + display: flex; + @media @smaller-screen { flex: 0 0 25%;} + + .property-name { + flex: 1; + display: flex; + overflow: hidden; + //max-width: 90%; fix bug 327139 + } + + .property-description-icon { + float: right; + margin-top: 4px; + margin-left: 15px; + flex: 0 0 auto; + } } - &[disabled] ~ .checkbox-icon::before { - .sprite-new; - .round-checked-icon.disabled; - background-color: inherit; - border: none; - //animation: addDisabledCheck 4s linear; + // Column: Type + &.col2 { + flex: 0 0 150px; + max-width:150px; + @media @smaller-screen { flex: 0 0 20%;} } - } - } - } - .delete-button-container { - max-height: 24px; - cursor: pointer; - } + // Column: ES + &.col3 { + flex:0 0 120px; + max-width:120px; + @media @smaller-screen { flex: 0 0 15%;} + } - .filtered { - /deep/ .checkbox-label-content { - background-color: yellow; - } - } + // Column: Value + &.valueCol { + flex: 2 0 250px; + display: flex; + @media @smaller-screen { flex: 1 0 40%;} + } - .dynamic-property { - width: 100%; - &:last-child /deep/ .dynamic-property-row { - border-bottom: none; - } - } + /deep/ .checkbox-container { + margin-right: 10px; + } - .table-row { - /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { - background: linear-gradient(to right, transparent 0%, #ffffff 80%); - padding-left: 1em; + /deep/ &.round-checkbox { + .checkbox-container input[type=checkbox].checkbox-hidden { + &:checked ~ .checkbox-icon::before { + .sprite-new; + .round-checked-icon; + } + &[disabled] ~ .checkbox-icon::before { + .sprite-new; + .round-checked-icon.disabled; + background-color:inherit; + border:none; + //animation: addDisabledCheck 4s linear; + } + } + } } - &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { - background: linear-gradient(to right, transparent 0%, #e6f6fb 80%); - padding-left: 1em; + .delete-button-container { + max-height: 24px; + cursor: pointer; } - &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { - background: linear-gradient(to right, transparent 0%, #f8f8f8 80%); - padding-left: 1em; + .filtered { + /deep/ .checkbox-label-content{ + background-color: yellow; + } } - &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { - background: linear-gradient(to right, transparent 0%, #f8f8f8 80%); - padding-left: 1em; + dynamic-property { + width:100%; + &:last-child /deep/ .dynamic-property-row { + border-bottom:none; + } } - } - .prop-instance-icon { - vertical-align: middle; - margin-right: 7px; - - &.defaulticon.small { - background-color: @main_color_q; - border-radius: 14px; - } + .table-row { + /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { + background: linear-gradient(to right, transparent 0%, #ffffff 80%); + padding-left: 1em; + } - // square icons + &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { + background: linear-gradient(to right, transparent 0%, #e6f6fb 80%); + padding-left: 1em; + } - &.icon-group { - .square-icon(); - background-color: @main_color_a; + &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { + background: linear-gradient(to right, transparent 0%, #f8f8f8 80%); + padding-left: 1em; + } - &::before { - content: "G"; - } + &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots { + background: linear-gradient(to right, transparent 0%, #f8f8f8 80%); + padding-left: 1em; + } } - &.icon-policy { - .square-icon(); - background-color: @main_color_r; + .prop-instance-icon { + vertical-align: middle; + margin-right: 7px; + &.defaulticon.small { + background-color: @main_color_q; + border-radius:14px; + } + // square icons + + &.icon-group { + .square-icon(); + background-color: @main_color_a; + + &::before { + content: "G"; + } + } + &.icon-policy { + .square-icon(); + background-color: @main_color_r; + + &::before { + content: "P"; + } + } - &::before { - content: "P"; - } } - - } } diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less index df3797e069..edcb87db3d 100644 --- a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less @@ -1,94 +1,76 @@ @import './../../../../../assets/styles/variables.less'; @import './../../../../../assets/styles/mixins.less'; - -.main-container { +.main-container{ color: @main_color_m; } - .select-req-or-cap-span { float: left; margin-right: 15px; font-size: 13px; } - -.select-type-label { +.select-type-label{ .m_12_m; margin-bottom: 2px; } - -.select-type { +.select-type{ display: flex; margin-bottom: 10px; - - .ui-element-dropdown { + ui-element-dropdown{ width: 40%; font-size: 13px; - - /deep/ select { + /deep/ select{ height: 31px; } } } - -.table-and-list-container { +.table-and-list-container{ display: flex; padding-top: 10px; - - .inner-container { + .inner-container{ height: 300px; overflow-y: auto; border: @main_color_o solid 1px; } - - .inner-container:not(:last-of-type) { + .inner-container:not(:last-of-type){ border-right: none; } - .requirements-or-capabilities-container { width: 40%; - - &.empty-list { + &.empty-list{ background-color: @tlv_color_t; text-align: center; - - &:before { + &:before{ content: 'Select "type" above'; line-height: 298px; } } - - .req-or-cap-item { + .req-or-cap-item{ border-bottom: @main_color_o solid 1px; padding: 10px; font-size: 13px; - - &:hover:not(.selected) { - background-color: @tlv_color_t; - cursor: pointer; + &:hover:not(.selected){ + background-color:@tlv_color_t; cursor:pointer; } } } - - .properties-table-container { + .properties-table-container{ width: 60%; display: flex; - - &.cap-selected { + &.cap-selected{ background-color: @tlv_color_t; border: @main_color_a solid 1px; - -webkit-box-shadow: inset 8px -2px 7px -9px rgba(84, 84, 84, 1); - -moz-box-shadow: inset 8px -2px 7px -9px rgba(84, 84, 84, 1); - box-shadow: inset 8px -2px 7px -9px rgba(84, 84, 84, 1); + -webkit-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); + -moz-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); + box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); } - - .properties-table { + properties-table{ margin: 15px; width: 100%; } } } -.selected { +.selected{ color: @main_color_a; background-color: @tlv_color_v; border-left: @main_color_a solid 4px; diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less index f854f809d8..9b1535864e 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less @@ -12,26 +12,22 @@ color: @main_color_a; box-shadow: 0 2px 7px @main_color_o; border-bottom: 1px solid @main_color_o; - .checkbox-label { margin-top: 14px; - .checkbox-label-content { font-size: 14px; } } - .checkbox-container input[type=checkbox].checkbox-hidden[disabled] ~ .checkbox-label-content { opacity: 0.5; } - .delete-btn { background-position: -137px -415px; width: 24px; height: 24px } - .loader { + loader { top: 20px; } } @@ -54,24 +50,19 @@ justify-content: space-between; margin-left: 5px; width: 180px; - .delete-icon { visibility: hidden; } - &:not(.readonly):hover { .a_1; } - - &:hover .delete-icon { + &:hover .delete-icon{ visibility: visible; } - &.readonly { opacity: 0.5; } } - .filter-desc { .sdc-ellipsis; width: 220px; @@ -81,21 +72,19 @@ } } - .w-sdc-designer-sidebar-section-node-filter-footer { margin-top: 10px; margin-bottom: 10px; text-align: center; width: 100%; } - .w-sdc-designer-sidebar-section-node-filter-footer-action { width: 180px; margin-top: 10px; } } -/deep/ .sdc-accordion { +/deep/.sdc-accordion { margin-bottom: 0; display: grid; @@ -115,12 +104,11 @@ .sdc-accordion-body.open { padding-left: 0; padding-top: 0; - .sdc-accordion-header { /*Second level - nested accordion */ background-color: #f8f8f8; padding: 4px 20px 4px 37px; border-bottom: 1px solid #d2d2d2; - border-left: none; + border-left:none; height: 30px; } } diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less index bbefbcb4b2..e219d49aa4 100644 --- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less +++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less @@ -1,3 +1,3 @@ -.dynamic-element { +dynamic-element { } diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less index d1291d6c2c..ea3e35140e 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less +++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less @@ -1,11 +1,11 @@ @import '../../../../../../assets/styles/variables'; -/deep/ .ui-element-dropdown { +/deep/ ui-element-dropdown { - select { - text-indent: 6px; - border: solid 1px @main_color_o; - width: 100%; - } + select { + text-indent: 6px; + border: solid 1px @main_color_o; + width: 100%; + } } diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less index 4c9d31463b..d320c7ff8b 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less +++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less @@ -1,17 +1,17 @@ @import '../../../../../../assets/styles/variables'; -/deep/ .ui-element-input { +/deep/ ui-element-input { - input { - text-indent: 6px; - border: solid 1px @main_color_o; - } + input { + text-indent: 6px; + border: solid 1px @main_color_o; + } - .error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; - } + .error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; + } } diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less index e0e748d16a..8073c3858e 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less +++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less @@ -1,17 +1,17 @@ @import '../../../../../../assets/styles/variables'; -/deep/ .ui-element-integer-input { +/deep/ ui-element-integer-input { - input { - text-indent: 6px; - border: solid 1px @main_color_o; - } + input { + text-indent: 6px; + border: solid 1px @main_color_o; + } - .error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; - } + .error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; + } } diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less index 545fe65cfb..5be443f7b6 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less +++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less @@ -1,36 +1,36 @@ @import '../../../../../../assets/styles/variables'; .popover-input-wrapper { - display: flex; + display: flex; } -/deep/ .ui-element-popover-input { +/deep/ ui-element-popover-input { - .popover { - max-width: 350px; - width: 350px; - } + .popover { + max-width: 350px; + width: 350px; + } + + .edit-subnet-wrapper { + padding: 12px; - .edit-subnet-wrapper { - padding: 12px; + .subnet-value { + width: 100%; + resize: none; + } + } + + input { + padding-right: 6px; + padding-left: 6px; + border: solid 1px @main_color_o; + } - .subnet-value { - width: 100%; - resize: none; + .error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; } - } - - input { - padding-right: 6px; - padding-left: 6px; - border: solid 1px @main_color_o; - } - - .error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; - } } diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less index 75cfb95e86..03b2a70667 100644 --- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less @@ -1,147 +1,145 @@ @import '../../../../../assets/styles/variables'; @import '../../../../../assets/styles/mixins'; @import '../../../../../assets/styles/sprite-old'; - -/deep/ .modal { - display: none; +/deep/ modal { + display: none; } .custom-modal { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 15007; - overflow: visible; - margin: auto; - display: flex; - align-items: center; - - .ng2-modal-content { - background: #fff; - width: 100%; - box-shadow: 0 5px 15px rgba(0, 0, 0, .5); - border-radius: 4px; - - - .ng2-modal-body { - padding: 20px; - } - - .ng2-modal-header { - .m_18_r; - font-weight: bold; - - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - - height: 50px; - line-height: 50px; - margin: 0px 20px; - - display: -webkit-box; - display: -ms-flexbox; - display: flex; - - text-align: left; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - - &.ng-draggable { - cursor: move; - user-select: none; - } - - &.modal-type-standard { - border-bottom: solid 3px @main_color_a; - } - - &.modal-type-error { - border-bottom: solid 3px @func_color_q; - } - - &.modal-type-alert { - border-bottom: solid 3px @main_color_h; - } - - .title { - .s_18_r; - -webkit-box-flex: 999; - -ms-flex-positive: 999; - flex-grow: 999; - } - - .close-button { - .sprite; - .sprite.x-btn-black; - cursor: pointer; - } + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 15007; + overflow: visible; + margin: auto; + display: flex; + align-items: center; + + .ng2-modal-content { + background: #fff; + width: 100%; + box-shadow: 0 5px 15px rgba(0,0,0,.5); + border-radius: 4px; + + + .ng2-modal-body{ + padding: 20px; + } + + .ng2-modal-header{ + .m_18_r; + font-weight: bold; + + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + + height: 50px; + line-height: 50px; + margin: 0px 20px; + + display: -webkit-box; + display: -ms-flexbox; + display: flex; + + text-align: left; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + + &.ng-draggable { + cursor: move; + user-select: none; + } + + &.modal-type-standard { + border-bottom: solid 3px @main_color_a; + } + + &.modal-type-error { + border-bottom: solid 3px @func_color_q; + } + + &.modal-type-alert{ + border-bottom: solid 3px @main_color_h; + } + + .title{ + .s_18_r; + -webkit-box-flex: 999; + -ms-flex-positive: 999; + flex-grow: 999; + } + .close-button{ + .sprite; + .sprite.x-btn-black; + cursor: pointer; + } + } + + .ng2-modal-footer{ + background-color: @tlv_color_t; + padding: 17px 30px; + clear: both; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + border-radius: 4px; + button{ + margin: 0 12px 0 6px; + } + } } - - .ng2-modal-footer { - background-color: @tlv_color_t; - padding: 17px 30px; - clear: both; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - border-radius: 4px; - - button { - margin: 0 12px 0 6px; - } - } - } } .modal-background { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: #000; - opacity: 0.5; - z-index: 900; - - &.transparent { - background-color: transparent; - } + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: #000; + opacity: 0.5; + z-index: 900; + + &.transparent { + background-color: transparent; + } } + .xl { - width: 1200px; + width: 1200px; } .l { - width: 875px; + width: 875px; } .md { - width: 650px; + width: 650px; } .sm { - width: 552px; + width: 552px; } .xsm { - width: 432px; + width: 432px; } body.modal-open { - overflow: hidden; + overflow: hidden; } diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less index 959a99663a..3a2168aeb0 100644 --- a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less @@ -2,59 +2,52 @@ @circle_size: 13px; -.custom-modal { +.custom-modal{ font-family: @font-opensans-regular; } -/deep/ .multi-steps-wizard { +/deep/ multi-steps-wizard { display: none; } -.ng2-modal-header { +.ng2-modal-header{ border: none !important; } -.ng2-modal-body { +.ng2-modal-body{ padding-top: 0 !important; } -header { +header{ margin-bottom: 10px; - - .dynamic-header-container { + .dynamic-header-container{ position: relative; top: -9px; } - - .steps-header { + .steps-header{ display: flex; - - .step-title { + .step-title{ flex: 1; - - .title-text { + .title-text{ width: 100%; text-align: center; line-height: 40px; background-color: @tlv_color_u; font-size: 13px; } - - .line { + .line{ width: calc(~'100% - @{circle_size}'); position: relative; left: calc(~'(100% - @{circle_size})/2 * (-1)'); float: left; height: 2px; - - .inner-line { + .inner-line{ background-color: @main_color_a; height: 100%; } } - - .circle { - margin: 0 auto; + .circle{ + margin:0 auto; border: @main_color_o solid 1px; height: @circle_size; width: @circle_size; @@ -64,17 +57,14 @@ header { background-color: @main_color_p; z-index: 1; } - - .full-circle { + .full-circle{ border-color: @main_color_a; background-color: @main_color_a; } - - &.active { + &.active{ color: @main_color_a; font-family: @font-opensans-medium; - - .circle { + .circle{ border-color: @main_color_a; } } @@ -82,21 +72,17 @@ header { } } -.navigation-buttons { +.navigation-buttons{ padding-left: 6px; border-left: 1px solid @main_color_a; - - .navigation-button { + .navigation-button{ padding: 0 8px; - - .navigation-icon { + .navigation-icon{ margin: 3px 0; - - &.blue-arrow-back { + &.blue-arrow-back{ float: left; } - - &.white-arrow-next { + &.white-arrow-next{ float: right; } } 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 8f666bd2a5..f7b18b1cc8 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,86 +1,85 @@ @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; - &:after { - display: block; - content: ''; - border-bottom: 2px solid @main_color_a; - transform: scaleX(0); - transition: transform 200ms ease-in-out; - } + &.simple-tabs .tab { + font-size: 12px; + color: @main_color_n; - &.active { - color: @main_color_a; + &:after { + display:block; + content: ''; + border-bottom: 2px solid @main_color_a; + transform: scaleX(0); + transition: transform 200ms ease-in-out; + } - &:after { - transform: scaleX(1.2); - } + &.active { + color: @main_color_a; + &:after { + transform: scaleX(1.2); + } + } } - } } |