Rift.IO OSM R1 Initial Submission

[osm/UI.git] / skyquake / plugins / launchpad / src / virtual_links / nsVirtualLinks.scss

diff --git a/skyquake/plugins/launchpad/src/virtual_links/nsVirtualLinks.scss b/skyquake/plugins/launchpad/src/virtual_links/nsVirtualLinks.scss
new file mode 100644 (file)
index 0000000..57cf0a9
--- /dev/null
+++ b/skyquake/plugins/launchpad/src/virtual_links/nsVirtualLinks.scss
@@ -0,0 +1,187 @@
+/*
+ * 
+ *   Copyright 2016 RIFT.IO Inc
+ *
+ *   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.
+ *
+ */
+
+@import "style/_colors.scss";
+
+@mixin optional() {
+    // height: 1.25rem;
+    // margin-left: 0.5rem;
+    // margin-top: 0.5rem;
+    flex: 0 1 auto;
+}
+.nsVirtualLinksContainer {
+    flex: 1 0 100%;
+}
+.nsVirtualLinks {
+    display: flex;
+    flex: 1 1 100%;
+    flex-direction: row;
+
+    .nsVirtualLinksListWrapper {
+        display: flex;
+        flex: 1 1 100%;
+        flex-direction: column;
+        margin-right: 0.5rem;
+        min-width: 50%;
+        max-width: 50%;
+        
+        .nsVirtualLinksTableWrapper {
+            padding: 1rem;
+
+            .nsVirtualLinksTable {
+                background: white;
+                border-collapse: collapse;
+                border: 1px solid black;
+                text-transform: capitalize;
+                width: 100%;
+
+                tr {
+                    cursor: pointer;
+                    a {
+                        cursor: pointer;
+                        margin-left: 0.5rem;
+                        font-weight: normal;
+                        color: $black;
+                    }
+                    &.selectedVirtualLink {
+                        background: $gray-darkest !important;
+                        color: $white !important;
+                        a {
+                            color: $white;
+                        }
+                    }
+                }
+                th {
+                    text-align: left;
+                    padding: 0.5rem;
+                    background: $gray-dark;
+                    border: 1px solid black;
+                }
+                tr:nth-child(odd) {
+                    background: $gray-lighter;
+                    td {
+                        border: 1px solid black;
+                        padding: 0.5rem;
+                    }
+                }
+                tr:nth-child(even) {
+                    background: $white;
+                    td {
+                        border: 1px solid black;
+                        padding: 0.5rem;
+                    }
+                }
+            }
+        }
+    }
+
+    .nsVirtualLinkDetailsWrapper {
+        display: flex;
+        flex: 1 1 100%;
+        flex-direction: column;
+        min-width: 50%;
+        max-width: 50%;
+
+        .nsVirtualLinkDetails {
+            padding: 1rem;
+            display: flex;
+            flex-direction: row;
+
+            h3 {
+                display: flex;
+                text-decoration: underline;
+                margin-bottom: 1rem;
+            }
+
+            .column {
+                flex: 1 1 100%;
+                .title {
+                    opacity: 0.5;
+                }
+                .value {
+                    display: flex;
+                    margin-bottom: 0.5rem;
+                    .readonly {
+                        background: none !important;
+                    }
+                }
+            }
+        }
+
+        .createVirtualLink {
+            padding: 1rem;
+            display: flex;
+            flex-direction: column;
+
+            label {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                margin-bottom: 1rem;
+                align-items: flex-start;
+                justify-content: flex-start;
+                span {
+                    margin-bottom: 0.5rem;
+                }
+                select {
+                    font-size: 1rem;
+                    min-width: 75%;
+                }
+            }
+
+            h3 {
+                display: flex;
+                text-decoration: underline;
+                margin-bottom: 1rem;
+            }
+
+            .readonly {
+                background: none !important;
+            }
+
+            .inputControls-radioGroup {
+                display: flex;
+                .inputControls-radio {
+                    display: flex;
+                    flex-direction: row;
+                    width: inherit;
+                    margin-right: 1rem;
+                }
+            }
+
+            .vnfd-connection-points-list {
+                .vnfd-connection-points-list-item {
+                    padding: 1rem;
+                    background: $gray;
+
+                    &:nth-child(odd) {
+                        background: $gray-dark;
+                    }
+
+                    &:last-child {
+                        margin-bottom: 1rem;
+                    }
+
+                    input {
+                        min-width: 75%;
+                    }
+                }
+            }
+        }
+    }
+}