coriolis-web/src/components/AddCloudConnection/AddCloudConnection.scss

/*
Copyright (C) 2017  Cloudbase Solutions SRL

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import '../variables.scss';

.root {
  :global(.Dropdown-control) {
    text-align: left;
  }
}
.header {
  h3 {
    /* Add Cloud Endpoint: */
    font-weight: $weight-light;
    font-size: 24px;
    color: $gray-darker;
    padding: 10px;
    background-color: $gray-light;
    text-align: center;
    margin: 0;
    border-radius: 4px 4px 0 0;
  }
}
.container {
  margin: 0 auto;
  padding: 48px 32px 32px;
  position: relative;
  :global(.form-group) {
    margin-bottom: 16px;
    margin-left: 64px;
    width: 224px;
    :global(.input-label) {
      font-weight: $weight-regular;
      font-size: 10px;
      color: $gray;
      letter-spacing: -0.33px;
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    &:global(.switch-radio) {
      width: 100%;
    }
  }
  input[type="text"], input[type="password"] {
    width: 100%;
    box-sizing: border-box;
  }
  textarea {
    width: 100%;
    height: 96px;
    box-sizing: border-box;
  }
  .buttons {
    padding-top: 16px;
    .leftBtn {
      float: left;
    }
    .rightBtn {
      float: right;
    }
    &:after {

    }
    .centerBtn {
      margin: 0 auto;
      width: 256px;
      display: block;
    }
  }
  .cloudFields {
    display: flex;
    flex-wrap: wrap;
    margin-left: -64px;
    &.radioFields {
      margin-left: 0;
    }
    .switchButton {
      margin-top: 8px;
      .switchLabel {
        color: $gray;
      }
    }
    &:after {
      clear: both;
      display: block;
      content: " ";
      height: 0;
    }
    .radioOption {
      margin-bottom: 16px;
      label {
        margin-left: 16px;
      }

    }
    &.larger {
      margin-top: 0px;
    }
  }
  &:after {
    clear: both;
    display: block;
    content: " ";
    height: 0;
  }
  .error {
    input {
      border-color: $red;
    }
    :global(.Dropdown-control) {
      border-color: $red;
    }
  }
}
.cloudList {
  height: 324px;
  overflow-y: scroll;
  padding: 8px;
  .cloudImage {
    width: 128px;
    height: 85.5px;
    background-size: contain;
  }
  .cloudContainer {
    width: 33%;
    float: left;
    height: 110px;
    &:nth-child(3n) {
      text-align: right;
    }
    &:nth-child(3n+2) {
      text-align: center;
    }
    :global(.icon) {
      transition: transform $animation-swift-out;
      &:hover {
        cursor: pointer;
        transform: scale(1.05);
      }
    }
  }
  &:after {
    clear: both;
    display: block;
    content: " ";
    height: 0;
  }
}
.cloudImage {
  text-align: center;
  height: 164px;
}
.connecting {
  margin: 160px auto;
  text-align: center;
  .loadingImg {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzBweCIgaGVpZ2h0PSI2MnB4IiB2aWV3Qm94PSIyNyAtMSA3MCA2MiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cGF0aCBkPSJNMy43NjU4NzY1ZS0xMywzMC40MDA3MTk4IEMzLjc2NTg3NjVlLTEzLDM3LjAxNzIzOTUgMTUuNDc1NjYxMSw0Mi40IDM0LjQ5OTI1NTMsNDIuNCBDNTMuNTIyODQ5NCw0Mi40IDY5LDM3LjAxNzIzOTUgNjksMzAuNDAwNzE5OCBDNjksMjMuNzgyNzYwNSA1My41MjI4NDk0LDE4LjQgMzQuNDk5MjU1MywxOC40IEMxNS40NzU2NjExLDE4LjQgMy43NjU4NzY1ZS0xMywyMy43ODI3NjA1IDMuNzY1ODc2NWUtMTMsMzAuNDAwNzE5OCBaIiBpZD0icGF0aC0xIj48L3BhdGg+PG1hc2sgaWQ9Im1hc2stMiIgbWFza0NvbnRlbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIG1hc2tVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHg9IjAiIHk9IjAiIHdpZHRoPSI2OSIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiPjx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+PC9tYXNrPjxwYXRoIGQ9Ik0xMC4yOTQ5NjAxLDMuNjI1ODM4MDcgQzIuNDI5OTUzMTIsMTEuNTQ1MjM5OSA2LjkxNTE5MzkyLDI5LjgyMDIyMTkgMjAuMjkyNDkyNSw0NC4zNjI5Mzc5IEMyOS4wMTU2MzczLDUzLjg0NTIyNjEgMzkuODg3ODk3Miw1OS44MzU4MDQ2IDQ4LjY2ODM1MTgsNTkuOTk3NjMzMyBDNTIuODA4MjI2MSw2MC4wNjE3ODE2IDU2LjI3Njk3MzEsNTguODIxMDk0OCA1OC43MDUwOTYxLDU2LjM3NDcxMSBDNjYuNTcwMTAzMSw0OC40NTUzMDkyIDYyLjA4NDg2MjMsMzAuMTgwMzI3MiA0OC43MDYwNTU2LDE1LjYzNzYxMTIgQzM5Ljk4NDQxODksNi4xNTUzMjMwMSAyOS4xMTIxNTksMC4xNjQ3NDQ1NTIgMjAuMzMxNzA0NCwwLjAwMjkxNTgzMjc4IEMyMC4yMTI1NjA1LDAuMDAxNDU3OTE2MzkgMjAuMDkzNDE2NiwtMi44NDIxNzA5NGUtMTQgMTkuOTc1NzgwOCwtMi44NDIxNzA5NGUtMTQgQzE1Ljk5NTc3MDUsLTIuODQyMTcwOTRlLTE0IDEyLjY1MzcwODEsMS4yNDk0MzQzNSAxMC4yOTQ5NjAxLDMuNjI1ODM4MDcgWiIgaWQ9InBhdGgtMyI+PC9wYXRoPjxtYXNrIGlkPSJtYXNrLTQiIG1hc2tDb250ZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBtYXNrVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4PSIwIiB5PSIwIiB3aWR0aD0iNTYuMTYyNzkwNyIgaGVpZ2h0PSI2MCIgZmlsbD0id2hpdGUiPjx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMyI+PC91c2U+PC9tYXNrPjxwYXRoIGQ9Ik00OS40NzA2NjM1LDAuMDAyOTE1NzYwMTIgQzQwLjY5MTcwODIsMC4xNjQ3NDA0NDcgMjkuODE3OTI5Myw2LjE1NTE2OTYyIDIxLjA5NjI4MzksMTUuNjM3MjIxNSBDNy43MTc0NjM3OSwzMC4xNzk1NzUxIDMuMjMyMjE4NSw0OC40NTQxMDE3IDExLjA5NzIzMzQsNTYuMzczMzA2MiBDMTMuNTI2ODY2OSw1OC44MTk2Mjg5IDE3LjAwMzE1ODIsNjAuMDc5MjM3MyAyMS4xMzM5ODc3LDU5Ljk5NjEzODIgQzI5LjkxNDQ1MTEsNTkuODMyODU1NiA0MC43ODY3MjE4LDUzLjg0Mzg4NDMgNDkuNTA4MzY3Myw0NC4zNjE4MzI0IEM2Mi44ODcxODc0LDI5LjgxOTQ3ODggNjcuMzcyNDMyNywxMS41NDQ5NTIyIDU5LjUwNzQxNzgsMy42MjU3NDc3MSBDNTcuMTQ4NjY3NCwxLjI0OTQwMzIxIDUzLjgwNjYwMTcsMS4wNjU4MTQxZS0xNCA0OS44MjY1ODc0LDEuMDY1ODE0MWUtMTQgQzQ5LjcwODk1MTUsMS4wNjU4MTQxZS0xNCA0OS41ODk4MDc1LDAuMDAxNDU3ODgwMDYgNDkuNDcwNjYzNSwwLjAwMjkxNTc2MDEyIFoiIGlkPSJwYXRoLTUiPjwvcGF0aD48bWFzayBpZD0ibWFzay02IiBtYXNrQ29udGVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgbWFza1VuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeD0iMCIgeT0iMCIgd2lkdGg9IjU2LjE2Mjc5MDciIGhlaWdodD0iNjAiIGZpbGw9IndoaXRlIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTUiPjwvdXNlPjwvbWFzaz48L2RlZnM+PGcgaWQ9Ikdyb3VwLTMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI3LjAwMDAwMCwgMC4wMDAwMDApIj48dXNlIGlkPSJGaWxsLTI1IiBzdHJva2U9IiNBNEFBQjUiIG1hc2s9InVybCgjbWFzay0yKSIgc3Ryb2tlLXdpZHRoPSIyIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT48dXNlIGlkPSJGaWxsLTMiIHN0cm9rZT0iI0E0QUFCNSIgbWFzaz0idXJsKCNtYXNrLTQpIiBzdHJva2Utd2lkdGg9IjIiIHhsaW5rOmhyZWY9IiNwYXRoLTMiPjwvdXNlPjx1c2UgaWQ9IkZpbGwtMTQiIHN0cm9rZT0iI0E0QUFCNSIgbWFzaz0idXJsKCNtYXNrLTYpIiBzdHJva2Utd2lkdGg9IjIiIHhsaW5rOmhyZWY9IiNwYXRoLTUiPjwvdXNlPjwvZz48L3N2Zz4=');
    margin: 0 auto 24px;
    display: block;
    width: 70px;
    height: 62px;
  }
}