summaryrefslogtreecommitdiffstats
path: root/resources/scss/tier-support
diff options
context:
space:
mode:
Diffstat (limited to 'resources/scss/tier-support')
-rw-r--r--resources/scss/tier-support/_search.scss64
-rw-r--r--resources/scss/tier-support/_selectedNodeDetails.scss13
-rw-r--r--resources/scss/tier-support/_splitPane.scss30
3 files changed, 52 insertions, 55 deletions
diff --git a/resources/scss/tier-support/_search.scss b/resources/scss/tier-support/_search.scss
index 6c349af..b65cb57 100644
--- a/resources/scss/tier-support/_search.scss
+++ b/resources/scss/tier-support/_search.scss
@@ -21,7 +21,6 @@
* ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
-
.auto-complete-search {
display: inline-block;
vertical-align: text-bottom;
@@ -31,9 +30,9 @@
float: left;
}
-.auto-complete-search-button-group{
- position: absolute;
- width: 90px;
+.auto-complete-search-button-group {
+ position: absolute !important;
+ padding-top: 3px;
}
.auto-complete-search input.form-control {
@@ -41,36 +40,35 @@
}
.auto-complete-search-button, .auto-complete-search-button:focus {
- background-color: $light-gray;
- padding-bottom: 8px;
+ background-color: $search-button-background-color;
width: 45px;
height: 30px;
- border: solid 1px $gray;
+ border: solid 1px $search-border-color1;
}
.auto-complete-search button:hover {
- background-color: $blue;
+ background-color: $search-background-color1;
}
.auto-complete-search .fa-lg {
font-size: 1em;
line-height: 1em;
- background-color: $light-gray;
+ background-color: $search-button-background-color;
}
.auto-complete-search button:hover .fa-search {
- color: $white;
- background-color: $blue;
+ color: $primary-background-color;
+ background-color: $search-background-color1;
}
.auto-complete-search .btn-group .auto-complete-clear-button {
border: none;
- margin-left: -35px;
- margin-top: 2px;
- padding: 5px 12px 8px 12px;
+ margin-left: -35px !important;
+ height: 30px;
+ background-color: transparent;
i {
- color: #009fdb;
+ color: $search-text-color1;
opacity: 0.3;
filter: alpha(opacity=30);
background-color: transparent;
@@ -81,26 +79,28 @@
background-color: transparent;
i.fa-times {
- color: #009fdb;
+ color: $search-text-color1;
opacity: 1;
background-color: transparent;
}
}
.auto-complete-search button:hover .fa-times {
- color: $white;
- background-color: $blue;
+ color: $primary-background-color;
+ background-color: $search-background-color1;
}
.react-autosuggest__container {
display: inline-block;
position: relative;
+ padding-top: 3px;
}
-.react-autosuggest__input{
+.react-autosuggest__input {
width: 655px;
height: 30px;
display: inline-block;
+ padding-top: 10px;
}
.react-autosuggest__input:focus {
@@ -117,20 +117,19 @@
overflow-y: scroll;
height: 200px;
border:1px ;
-
}
-.react-autosuggest__suggestions-containerCopy{
+.react-autosuggest__suggestions-containerCopy {
display: none;
display: block;
position: absolute;
top: 30px;
width: 655px;
- border: 1px solid #aaa;
- background-color: #fff;
+ border: 1px solid $search-border-color1;
+ background-color: $primary-background-color;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
- z-index: 2;
+ z-index: 90;
overflow-y: hidden;
}
@@ -139,11 +138,11 @@
position: absolute;
top: 30px;
width: 655px;
- border: 1px solid #aaa;
- background-color: #fff;
+ border: 1px solid $search-border-color1;
+ background-color: $primary-background-color;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
- z-index: 2;
+ z-index: 99;
overflow-x: hidden;
}
@@ -161,14 +160,14 @@
}
.react-autosuggest__suggestion--focused {
- background-color: #ddd;
+ background-color: $search-background-color3;
}
.react-autosuggest__section-title {
padding: 10px 0 0 10px;
font-size: 12px;
- color: #777;
- border-top: 1px dashed #ccc;
+ color: $search-background-color2;
+ border-top: 1px dashed $search-border-color1;
}
.react-autosuggest__section-container:first-child .react-autosuggest__section-title {
@@ -185,10 +184,11 @@
flex: 20;
}
-.suggestionColumnTwo{
+.suggestionColumnTwo {
flex: 80;
}
-.highlight{
+
+.highlight {
font-weight: bolder;
background-color:inherit;
padding: 0px;
diff --git a/resources/scss/tier-support/_selectedNodeDetails.scss b/resources/scss/tier-support/_selectedNodeDetails.scss
index 0532319..ec4798c 100644
--- a/resources/scss/tier-support/_selectedNodeDetails.scss
+++ b/resources/scss/tier-support/_selectedNodeDetails.scss
@@ -21,14 +21,13 @@
* ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
-
.ts-selected-node-details {
padding: 20px;
- color: $dark-gray;
+ color: $border-color2;
font-family: $body-font-1;
h1 {
- color: $blue;
+ color: $selected-node-details-color1;
font-size: $heading-font-2;
margin-bottom: 5px;
}
@@ -40,7 +39,7 @@
margin-top: 15px;
th {
- color: $gray;
+ color: $border-color2;
}
td {
@@ -49,14 +48,14 @@
.left-column-cell {
padding: 7px 5px 5px 0px;
- border-bottom: solid 1px $light-gray;
- border-right: solid 1px $light-gray;
+ border-bottom: solid 1px $border-color5;
+ border-right: solid 1px $border-color5;
width: 50%;
}
.right-column-cell {
padding: 7px 5px 5px 15px;
- border-bottom: solid 1px $light-gray;
+ border-bottom: solid 1px $border-color5;
}
}
diff --git a/resources/scss/tier-support/_splitPane.scss b/resources/scss/tier-support/_splitPane.scss
index db0770e..dc07be0 100644
--- a/resources/scss/tier-support/_splitPane.scss
+++ b/resources/scss/tier-support/_splitPane.scss
@@ -21,15 +21,13 @@
* ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
-
.SplitPane {
- min-width: 1280px;
- //108 is the height of the header in tsui
- height: calc(100% - 108px) !important;
+ min-width: $minimum-application-width;
+ height: calc(100% - #{$total-header-height}) !important;
}
.Resizer {
- background: #000;
+ background: $border-color1;
opacity: .2;
z-index: 1;
-moz-box-sizing: border-box;
@@ -48,28 +46,28 @@
.Resizer.horizontal {
height: 11px;
margin: -5px 0;
- border-top: 5px solid rgba(255, 255, 255, 0);
- border-bottom: 5px solid rgba(255, 255, 255, 0);
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
cursor: row-resize;
width: 100%;
}
.Resizer.horizontal:hover {
- border-top: 5px solid rgba(0, 0, 0, 0.5);
- border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+ border-top: 5px solid $border-color2;
+ border-bottom: 5px solid $border-color2;
}
.Resizer.vertical {
width: 11px;
margin: 0 -5px;
- border-left: 5px solid rgba(255, 255, 255, 0);
- border-right: 5px solid rgba(255, 255, 255, 0);
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
cursor: col-resize;
}
.Resizer.vertical:hover {
- border-left: 5px solid rgba(0, 0, 0, 0.5);
- border-right: 5px solid rgba(0, 0, 0, 0.5);
+ border-left: 5px solid $border-color2;
+ border-right: $border-color2;
}
Resizer.disabled {
cursor: not-allowed;
@@ -79,7 +77,7 @@ Resizer.disabled:hover {
}
.Pane2 {
- background-color: $tlv-light-gray;
- border-left: solid 2px $light-gray;
- overflow: hidden;
+ background-color: $background-color4;
+ border-left: solid 2px $border-color5;
+ overflow: auto;
}