1 files changed, 168 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.scss b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.scss
new file mode 100644
index 000000000..af4a7e212
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.scss
@@ -0,0 +1,168 @@
+$popupHeaderHeight: 59px;
+
+.vlan-wrapper-config * {
+  font-family: OpenSans-Regular, sans-serif;
+}
+
+.body-content-jsp {
+  margin-top: 35px;
+  margin-left: 201px;
+  margin-right: 0px;
+  background-color: white;
+}
+
+:host {
+  height: 100%;
+}
+.form-wrapper{
+  min-width: 75%;
+  overflow: auto;
+}
+button {
+  border-radius: 2px;
+  font-size: 14px;
+  line-height: 28px;
+  height: 30px;
+  &.blue {
+    border: #0091c8 1px solid;
+    background-color: #009fdb;
+    color: white;
+    &:hover {
+      background-color: #1ec2ff;
+      border-color: #0091c8;
+    }
+    &:active {
+      background-color: #0091c7;
+      border-color: #006186;
+    }
+    &[disabled] {
+      background-color: rgba(5, 104, 174, 0.3);
+      border-color: rgba(4, 113, 168, 0.3);
+    }
+  }
+  &.grey {
+    color: #009FDB;
+    background-color: #ffffff;
+    border: 1px solid #009FDB;
+    &:hover {
+      background-color: #f8f8f8;
+      border-color: #009fdb;
+    }
+    &:active {
+      background-color: #d8d8d8;
+      border-color: #5a5a5a;
+    }
+    &[disabled] {
+      background-color: #f8f8f8;
+      border-color: #d8d8d8;
+      color: #cdcdcd;
+    }
+  }
+  &.white {
+    border: #009fdb 1px solid;
+    background-color: white;
+    color: #009fdb;
+  }
+}
+
+.vlan-wrapper-config {
+  /*todo: remove. this a temporary fix for the sub-interface popup not showing as a page beside the sidebar. currently showing it in full screen.*/
+  /*it is necessary inside the iframe (and not just in the angularjs - old app) angular app because in Firefox the iframe content isn't effected by the iframe size */
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  /********************/
+  .head {
+    line-height: $popupHeaderHeight;
+    height: $popupHeaderHeight;
+    display: flex;
+    background-color: #F8F8F8;
+    border-bottom: 1px solid #D8D8D8;
+    .title {
+      font-size: 18px;
+      margin-left: 56px;
+      color: #5A5A5A;
+    }
+    .btn-wrapper {
+      flex: 1;
+      text-align: right;
+      margin-right: 15px;
+      button {
+        width: 120px;
+        &.delete-btn {
+          margin-left: 13px;
+        }
+      }
+    }
+  }
+  .content-wrapper {
+    display: flex;
+    .form {
+      overflow-y: auto;
+    }
+    height: calc(100% - #{$popupHeaderHeight});
+    .form {
+      margin-top: 48px;
+
+    }
+    .content {
+      .form-wrapper {
+
+        margin: 0 auto;
+      }
+    }
+
+  }
+
+  span.error {
+    color: #cf2a2a;
+  }
+  .content-wrapper .content .form-wrapper .instance-field {
+    .ng-invalid-pattern {
+      border-color: #cf2a2a;
+      color: #cf2a2a;
+    }
+    margin-bottom: 25px;
+    label {
+      color: #191919;
+      font-size: 13px;
+    }
+    input,
+    select {
+      border-color: #D2D2D2;
+    }
+    &.lcpRegionText,
+    &.productFamily {
+      display: none;
+    }
+  }
+
+}
+
+.sidebar-right {
+  min-width: 25%;
+  background-color: #F8F8F8;
+  overflow-y: auto;
+  .headline {
+    font-family: OpenSans-Semibold;
+    font-size: 12px;
+     color: #009FDB;
+     padding-bottom: 6px;
+     padding-top: 20px
+  }
+  .seperator{
+    background: #D2D2D2;
+    height: 1px;
+    margin-bottom: 10px;
+  }
+}
+
+.left-side{
+  min-width: 75%;
+  overflow:auto;
+
+}
+
+.sidebar-right service-metadata .metadata-content {
+  padding-bottom: 20px;
+}