skyquake/plugins/launchpad/src/virtual_links/nsVirtualLinks.scss

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18
  19 @import "style/_colors.scss";
  20
  21 @mixin optional() {
  22     // height: 1.25rem;
  23     // margin-left: 0.5rem;
  24     // margin-top: 0.5rem;
  25     flex: 0 1 auto;
  26 }
  27 .nsVirtualLinksContainer {
  28     flex: 1 0 100%;
  29 }
  30 .nsVirtualLinks {
  31     display: flex;
  32     flex: 1 1 100%;
  33     flex-direction: row;
  34
  35     .nsVirtualLinksListWrapper {
  36         display: flex;
  37         flex: 1 1 100%;
  38         flex-direction: column;
  39         margin-right: 0.5rem;
  40         min-width: 50%;
  41         max-width: 50%;
  42
  43         .nsVirtualLinksTableWrapper {
  44             padding: 1rem;
  45
  46             .nsVirtualLinksTable {
  47                 background: white;
  48                 border-collapse: collapse;
  49                 border: 1px solid black;
  50                 text-transform: capitalize;
  51                 width: 100%;
  52
  53                 tr {
  54                     cursor: pointer;
  55                     a {
  56                         cursor: pointer;
  57                         margin-left: 0.5rem;
  58                         font-weight: normal;
  59                         color: $black;
  60                     }
  61                     &.selectedVirtualLink {
  62                         background: $gray-darkest !important;
  63                         color: $white !important;
  64                         a {
  65                             color: $white;
  66                         }
  67                     }
  68                 }
  69                 th {
  70                     text-align: left;
  71                     padding: 0.5rem;
  72                     background: $gray-dark;
  73                     border: 1px solid black;
  74                 }
  75                 tr:nth-child(odd) {
  76                     background: $gray-lighter;
  77                     td {
  78                         border: 1px solid black;
  79                         padding: 0.5rem;
  80                     }
  81                 }
  82                 tr:nth-child(even) {
  83                     background: $white;
  84                     td {
  85                         border: 1px solid black;
  86                         padding: 0.5rem;
  87                     }
  88                 }
  89             }
  90         }
  91     }
  92
  93     .nsVirtualLinkDetailsWrapper {
  94         display: flex;
  95         flex: 1 1 100%;
  96         flex-direction: column;
  97         min-width: 50%;
  98         max-width: 50%;
  99
 100         .nsVirtualLinkDetails {
 101             padding: 1rem;
 102             display: flex;
 103             flex-direction: row;
 104
 105             h3 {
 106                 display: flex;
 107                 text-decoration: underline;
 108                 margin-bottom: 1rem;
 109             }
 110
 111             .column {
 112                 flex: 1 1 100%;
 113                 .title {
 114                     opacity: 0.5;
 115                 }
 116                 .value {
 117                     display: flex;
 118                     margin-bottom: 0.5rem;
 119                     .readonly {
 120                         background: none !important;
 121                     }
 122                 }
 123             }
 124         }
 125
 126         .createVirtualLink {
 127             padding: 1rem;
 128             display: flex;
 129             flex-direction: column;
 130
 131             label {
 132                 display: flex;
 133                 flex-direction: column;
 134                 width: 100%;
 135                 margin-bottom: 1rem;
 136                 align-items: flex-start;
 137                 justify-content: flex-start;
 138                 span {
 139                     margin-bottom: 0.5rem;
 140                 }
 141                 select {
 142                     font-size: 1rem;
 143                     min-width: 75%;
 144                 }
 145             }
 146
 147             h3 {
 148                 display: flex;
 149                 text-decoration: underline;
 150                 margin-bottom: 1rem;
 151             }
 152
 153             .readonly {
 154                 background: none !important;
 155             }
 156
 157             .inputControls-radioGroup {
 158                 display: flex;
 159                 .inputControls-radio {
 160                     display: flex;
 161                     flex-direction: row;
 162                     width: inherit;
 163                     margin-right: 1rem;
 164                 }
 165             }
 166
 167             .vnfd-connection-points-list {
 168                 .vnfd-connection-points-list-item {
 169                     padding: 1rem;
 170                     background: $gray;
 171
 172                     &:nth-child(odd) {
 173                         background: $gray-dark;
 174                     }
 175
 176                     &:last-child {
 177                         margin-bottom: 1rem;
 178                     }
 179
 180                     input {
 181                         min-width: 75%;
 182                     }
 183                 }
 184             }
 185         }
 186     }
 187 }