summaryrefslogtreecommitdiffstats
path: root/resources/scss/components
diff options
context:
space:
mode:
Diffstat (limited to 'resources/scss/components')
-rw-r--r--resources/scss/components/_buttons.scss23
-rw-r--r--resources/scss/components/_containerPanel.scss8
-rw-r--r--resources/scss/components/_dateRange.scss40
-rw-r--r--resources/scss/components/_dateRangeSelector.scss70
-rw-r--r--resources/scss/components/_dropdownMultiSelect.scss9
-rw-r--r--resources/scss/components/_filterBar.scss207
-rw-r--r--resources/scss/components/_inlineMessage.scss1
-rw-r--r--resources/scss/components/_inputOptions.scss9
-rw-r--r--resources/scss/components/_notifications.scss5
-rw-r--r--resources/scss/components/_progressBar.scss48
-rw-r--r--resources/scss/components/_punchOut.scss36
-rw-r--r--resources/scss/components/_slidePanel.scss5
-rw-r--r--resources/scss/components/_titledComponent.scss19
-rw-r--r--resources/scss/components/_toggleButtonGroup.scss1
-rw-r--r--resources/scss/components/_toggleInput.scss11
-rw-r--r--resources/scss/components/_validationForm.scss5
16 files changed, 250 insertions, 247 deletions
diff --git a/resources/scss/components/_buttons.scss b/resources/scss/components/_buttons.scss
index 6aab3e0..dbb684d 100644
--- a/resources/scss/components/_buttons.scss
+++ b/resources/scss/components/_buttons.scss
@@ -21,7 +21,6 @@
* ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
-
$plus-circle-icon-size: 18px;
.plus-icon-button {
background: url($plus-circle-icon) no-repeat;
@@ -38,8 +37,8 @@ $plus-circle-icon-size: 18px;
.primary-btn{
border: 1px solid;
- border-color: $blue;
- color: $blue;
+ border-color: $border-color3;
+ color: $text-color4;
font-weight: bolder;
@extend .body-1;
text-align: center;
@@ -47,23 +46,23 @@ $plus-circle-icon-size: 18px;
border-radius: 5px;
cursor: pointer;
align-self: center;
- background-color: $white;
+ background-color: $primary-background-color;
.primary-btn-text {
width: 100%;
}
&:hover {
- color: $blue;
- border-color: $blue;
- background-color: $tlv-hover;
+ color: $background-color5;
+ border-color: $border-color3;
+ background-color: $background-color12;
&:active {
- color: $blue;
- border-color: $blue;
+ color: $background-color5;
+ border-color: $border-color3;
}
}
&:focus:not(:hover) {
- color: $blue;
- border-color: $blue;
- background-color: $white;
+ color: $background-color5;
+ border-color: $border-color3;
+ background-color: $primary-background-color;
}
}
diff --git a/resources/scss/components/_containerPanel.scss b/resources/scss/components/_containerPanel.scss
index 46bc472..48fc4b9 100644
--- a/resources/scss/components/_containerPanel.scss
+++ b/resources/scss/components/_containerPanel.scss
@@ -28,10 +28,10 @@
}
.titled-container-boarders {
- border: solid 1px $black;
- -webkit-box-shadow: 3px 3px 10px DarkGrey;
- -moz-box-shadow: 3px 3px 10px DarkGrey;
- box-shadow: 3px 3px 10px DarkGrey;
+ border: solid 1px $border-color1;
+ -webkit-box-shadow: 3px 3px 10px $shadow-color1;
+ -moz-box-shadow: 3px 3px 10px $shadow-color1;
+ box-shadow: 3px 3px 10px $shadow-color1;
}
.titled-container-header {
diff --git a/resources/scss/components/_dateRange.scss b/resources/scss/components/_dateRange.scss
deleted file mode 100644
index 0f63fcb..0000000
--- a/resources/scss/components/_dateRange.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
- */
-
-
-.date-range {
- display: block;
-}
-
-.date-range label {
- margin: 5px 0px;
- min-width: 70px;
-}
-
-.date-input {
-
-}
-
-.date-input input {
- padding: 3px 2px 2px 4px;
-}
diff --git a/resources/scss/components/_dateRangeSelector.scss b/resources/scss/components/_dateRangeSelector.scss
deleted file mode 100644
index f580cd5..0000000
--- a/resources/scss/components/_dateRangeSelector.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
- */
-
-
-.dateRangeSelector {
- display: inline-block;
- position: absolute;
- margin-top: -1px;
-}
-
-.dateRangeSelectorSearchButton span {
- margin: 0px 10px;
- font-weight: bold;
- color: $black;
-}
-
-#dateRangeSelectorPopover .popover-content {
- padding: 5px;
-}
-
-#dateRangeSelectorPopover li {
- list-style: none;
- margin: 5px 0px;
- padding: 0px;
- font-size: small;
- font-weight: bold;
- min-width: 200px;
- box-sizing: content-box;
-}
-
-#dateRangeSelectorPopover li a {
- text-decoration: none;
- background-color: $white;
- display: block;
- color: $dark-gray;
- border-radius: 8px;
- padding: 8px 5px 5px 8px;
- border: solid 1px $tlv-gray;
-}
-
-#dateRangeSelectorPopover li.active a,
-#dateRangeSelectorPopover li a:hover {
- background-color: $blue;
- color: $white;
-}
-
-.dateRangeSearchButton {
- padding: 5px 5px 2px 5px;
- margin: 5px 0px 0px 0px;
-}
diff --git a/resources/scss/components/_dropdownMultiSelect.scss b/resources/scss/components/_dropdownMultiSelect.scss
index caa0db6..7c9e840 100644
--- a/resources/scss/components/_dropdownMultiSelect.scss
+++ b/resources/scss/components/_dropdownMultiSelect.scss
@@ -20,20 +20,19 @@
*
* ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
-
-
+
.dropdown-multi-select {
.Select {
display: block;
width: 100%;
&.Select--multi {
.Select-value {
- color: $text-black;
+ color: $text-color1;
background-color: transparent;
- border-color: $light-gray;
+ border-color: $border-color5;
}
.Select-value-icon {
- border-right-color: $light-gray;
+ border-right-color: $border-color5;
}
.Select-arrow-zone {
vertical-align: top;
diff --git a/resources/scss/components/_filterBar.scss b/resources/scss/components/_filterBar.scss
new file mode 100644
index 0000000..0e98f32
--- /dev/null
+++ b/resources/scss/components/_filterBar.scss
@@ -0,0 +1,207 @@
+/**
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+ * Copyright © 2017 Amdocs
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ *
+ * ECOMP is a trademark and service mark of AT&T Intellectual Property.
+ */
+/***** Vertical Filter Bar custom styles ******/
+$title-color: $text-color6;
+$background-color: $background-color8;
+$border-color: $border-color6;
+$main-color: $text-color4;
+$font-family-regular: $base-font-regular;
+$font-family-semibold: $base-font-bold;
+$res-folder: $icons-folder-path + '/filter';
+
+.vfb-filters {
+ font-family: $font-family-semibold;
+ background-color: $background-color;
+ box-shadow: 2px 0px 1.98px 0.02px rgba(0, 0, 0, 0.09);
+}
+
+.vfb-header {
+ background-color: $main-color;
+ font-size: $heading-font-2;
+ color: $primary-background-color;
+
+ .clear-all{
+ font-size: $body-font-2;
+ }
+}
+
+.filter {
+ border-bottom: 1px solid $border-color;
+ &.expand{
+ .direction{
+ background: url($res-folder + '/expand-filter.svg') no-repeat;
+ }
+ }
+ &.collapse{
+ .direction{
+ background: url($res-folder +'/collapse-filter.svg') no-repeat;
+ }
+ }
+}
+
+.filter-header {
+ .title {
+ font-family: $font-family-regular;
+ font-size: $heading-font-3;
+ color: $title-color;
+
+ .iconClickArea{
+ .icon{
+ background: url($res-folder + '/filter-small.svg') no-repeat;
+ }
+ }
+ }
+}
+
+.filter-group::-webkit-scrollbar-thumb {
+ background-color: $border-color;
+}
+
+.filter-control {
+ .label{
+ font-family: $font-family-semibold;
+ font-size: $body-font-3;
+ color: $text-color3;
+ }
+}
+
+.dropdown-filter-control {
+ .dropdown-select {
+ font-family: $font-family-semibold;
+ font-size: $body-font-2;
+ }
+}
+
+.filter-input{
+ border: 1px solid $border-color;
+ font-family: $font-family-regular;
+ &:focus {
+ border: 1px solid $main-color;
+ }
+
+ &::-webkit-input-placeholder {
+ font-size: $body-font-3;
+ font-family: $font-family-regular;
+ color: $neutral-gray;
+ }
+}
+
+.date-picker-filter-control{
+ @extend .filter-control;
+ .react-datepicker__input-container{
+ width:100%;
+ }
+ input{
+ @extend .filter-input;
+ }
+}
+
+.date-dropdown {
+ .Select-clear-zone {
+ visibility: visible;
+ }
+}
+
+/*utils*/
+
+/*DATE PICKER*/
+
+.react-datepicker {
+ font-family: $font-family-regular;
+}
+
+.react-datepicker .react-datepicker__day--selected {
+ background-color: $main-color;
+}
+.react-datepicker .react-datepicker__day--selected:hover {
+ background-color: $main-color;
+}
+
+.react-datepicker__day--today {
+ color: $text-color5;
+}
+
+.date-picker-filter-control input[value=""] {
+ background: #fff url($res-folder + '/calendar-icon.svg') no-repeat 97% center;
+ background-size: 13px 14px;
+}
+
+.date-picker-filter-control input:not([value=""]) {
+ background: #fff url($res-folder + '/calendar-icon-hover.svg') no-repeat 97% center;
+ background-size: 13px 14px;
+}
+
+
+
+/***** Collapsible Panel Custom Styles *******/
+.collapsible-sliding-panel {
+ min-width: 323px;
+ background-color: $background-color;
+ border-right: solid 1px #000;
+ margin-left: -25px;
+ transition: min-width 0.22s linear;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.collapsible-sliding-panel-main-content {
+ width: 100%;
+}
+
+.collapsible-sliding-panel.collapsible-sliding-panel-is-closed {
+ min-width: 0px;
+ transition: min-width 0.28s linear;
+ border: none;
+ div {
+ display: none;
+ }
+}
+
+.collapsible-sliding-panel-expander {
+ min-width: 25px;
+ height: 30px;
+ z-index: 2;
+ position: relative;
+ top: 0px;
+ left: 323px;
+ transition:left 0.22s linear;
+
+ background: $background-color6 url($icons-folder-path + '/collapsible-sliding-panel-expander-icon.svg') no-repeat center;
+ background-size: 5px;
+ border-top-right-radius: 25px;
+ border-bottom-right-radius: 25px;
+ cursor: pointer;
+}
+
+.collapsible-sliding-panel-expander.collapsible-sliding-panel-is-closed {
+ min-width: 27px;
+ left: 0px;
+ transition: left 0.28s linear;
+ background: url($icons-folder-path + '/collapsible-sliding-panel-expander-icon.svg') no-repeat 7px center,
+ url($icons-folder-path + '/collapsible-sliding-panel-expander-modified.svg') no-repeat 16px center $background-color6;
+ background-size: 5px;
+}
+
+.main-panel-class {
+ padding: 10px;
+}
diff --git a/resources/scss/components/_inlineMessage.scss b/resources/scss/components/_inlineMessage.scss
index afc1e51..283c0d7 100644
--- a/resources/scss/components/_inlineMessage.scss
+++ b/resources/scss/components/_inlineMessage.scss
@@ -21,7 +21,6 @@
* ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
-
.inline-message-alert {
padding: 5px;
margin: 5px 0px 5px 0px;
diff --git a/resources/scss/components/_inputOptions.scss b/resources/scss/components/_inputOptions.scss
index ee0f86e..1851d14 100644
--- a/resources/scss/components/_inputOptions.scss
+++ b/resources/scss/components/_inputOptions.scss
@@ -21,14 +21,13 @@
* ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
-
.input-options {
display: flex;
- border: 1px solid $light-gray;
+ border: 1px solid $border-color5;
border-radius: 2px;
height: 30px;
&:hover {
- border-color: $gray;
+ border-color: $border-color6;
}
.input-options-select {
float: left;
@@ -53,11 +52,11 @@
height: 24px;
margin-top: 2px;
margin-bottom: 2px;
- border:1px solid $light-gray;
+ border:1px solid $border-color5;
}
}
.input-options.has-error {
- border-color: #A94442;
+ border-color: $red;
}
diff --git a/resources/scss/components/_notifications.scss b/resources/scss/components/_notifications.scss
index 871d682..8a6363a 100644
--- a/resources/scss/components/_notifications.scss
+++ b/resources/scss/components/_notifications.scss
@@ -20,8 +20,7 @@
*
* ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
-
-
+
.notification-modal {
.modal-content {
@@ -45,7 +44,7 @@
&.warning {
.modal-content .modal-header {
- border-top: 3px solid $yellow;
+ border-top: 3px solid $border-color7;
}
}
diff --git a/resources/scss/components/_progressBar.scss b/resources/scss/components/_progressBar.scss
deleted file mode 100644
index 0755e68..0000000
--- a/resources/scss/components/_progressBar.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
- */
-
-
-.progress-bar-view {
- display: -webkit-box;
- padding: 5px;
- .progress-bar-outside {
- display: flex;
- width: 90%;
- justify-content: space-between;
- background-color: lightgray;
- border-radius: 15px;
- height: 10px;
- .progress-bar-inside {
- display: block;
- border: 1px solid gainsboro;
- background-color: #4faa39;
- border-radius: inherit;
- }
- }
- .progress-bar-view-label {
- margin-right: -30px;
- margin-top: -2px;
- margin-left: 10px;
- color: black;
- }
- }
diff --git a/resources/scss/components/_punchOut.scss b/resources/scss/components/_punchOut.scss
deleted file mode 100644
index f99d8af..0000000
--- a/resources/scss/components/_punchOut.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
- */
-
-
-&.dox-ui-punch-out {
- background-color: $background-gray;
-}
-
-&.dox-ui-punch-out.dox-ui-punch-out-full-page {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- overflow-y: auto;
-}
diff --git a/resources/scss/components/_slidePanel.scss b/resources/scss/components/_slidePanel.scss
index e36b163..9eaddcd 100644
--- a/resources/scss/components/_slidePanel.scss
+++ b/resources/scss/components/_slidePanel.scss
@@ -21,7 +21,6 @@
* ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
-
.slide-panel {
transition: left .5s,right .5s;
@@ -38,10 +37,10 @@
@extend .body-2;
text-align: center;
width: 100%;
- color: $text-black;
+ color: $text-color1;
}
.collapse-double-icon {
- color: $text-black;
+ color: $text-color1;
cursor: pointer;
}
}
diff --git a/resources/scss/components/_titledComponent.scss b/resources/scss/components/_titledComponent.scss
index ca1bebf..20c7a2c 100644
--- a/resources/scss/components/_titledComponent.scss
+++ b/resources/scss/components/_titledComponent.scss
@@ -21,35 +21,34 @@
* ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
-
.dep-titled-container {
- border: solid 1px $black;
- -webkit-box-shadow: 3px 3px 10px $dark-gray;
- -moz-box-shadow: 3px 3px 10px $dark-gray;
- box-shadow: 3px 3px 10px $dark-gray;
+ border: solid 1px $border-color1;
+ -webkit-box-shadow: 3px 3px 10px $shadow-color1;
+ -moz-box-shadow: 3px 3px 10px $shadow-color1;
+ box-shadow: 3px 3px 10px $shadow-color1;
border-radius: 0px 0px 5px 5px;
margin: 20px 5px;
.header {
- border-bottom: solid 1px $black;
+ border-bottom: solid 1px $border-color1;
padding: 5px;
- background-color: $light-gray;
+ background-color: $background-color8;
font-weight: bold;
font-size: $heading-font-3;
.toggle-visibility-button, .toggle-visibility-button:focus {
float: right;
- background-color: $light-gray;
+ background-color: $background-color8;
border: none;
margin-top: -2px;
}
.toggle-visibility-button:hover {
- background-color: $light-gray;
+ background-color: $background-color8;
border: none;
.fa {
- color: $black;
+ color: $text-color3;
}
}
diff --git a/resources/scss/components/_toggleButtonGroup.scss b/resources/scss/components/_toggleButtonGroup.scss
index 008b656..01fdc70 100644
--- a/resources/scss/components/_toggleButtonGroup.scss
+++ b/resources/scss/components/_toggleButtonGroup.scss
@@ -21,7 +21,6 @@
* ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
-
.displayOptionButtons {
float: right;
}
diff --git a/resources/scss/components/_toggleInput.scss b/resources/scss/components/_toggleInput.scss
index 3401631..59c2058 100644
--- a/resources/scss/components/_toggleInput.scss
+++ b/resources/scss/components/_toggleInput.scss
@@ -21,7 +21,6 @@
* ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
-
.toggle-input-wrapper {
$toggle-width: 40px;
$toggle-height: 20px;
@@ -48,7 +47,7 @@
padding: 1px;
width: $toggle-width;
height: $toggle-height;
- background-color: $dark-gray;
+ background-color: $background-color2;
border-radius: $toggle-height;
transition: background 0.4s;
}
@@ -63,7 +62,7 @@
left: 1px;
bottom: 1px;
right: 1px;
- background-color: $white;
+ background-color: $primary-background-color;
border-radius: $toggle-height;
transition: background 0.4s;
}
@@ -72,15 +71,15 @@
left: 4px;
bottom: 4px;
width: $toggle-height - 8;
- background-color: $dark-gray;
+ background-color: $background-color2;
border-radius: $toggle-height - 8;
transition: margin 0.4s, background 0.4s;
}
input.toggle-round-flat:checked + label {
- background-color: $link-blue;
+ background-color: $background-color3;
}
input.toggle-round-flat:checked + label:after {
margin-left: $toggle-height;
- background-color: $link-blue;
+ background-color: $background-color3;
}
}
diff --git a/resources/scss/components/_validationForm.scss b/resources/scss/components/_validationForm.scss
index 020c5eb..686b9f1 100644
--- a/resources/scss/components/_validationForm.scss
+++ b/resources/scss/components/_validationForm.scss
@@ -20,8 +20,7 @@
*
* ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
-
-
+
form {
.validation-form-content {
.validation-input-wrapper {
@@ -68,6 +67,6 @@ form {
.modal-body {
.validation-buttons {
padding: 20px 15px;
- background-color: $tlv-gray;
+ background-color: $background-color12;
}
}