skyquake/plugins/launchpad/src/instantiate/catalogCard.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 @import "style/_colors.scss";
  19
  20 .CatalogCard {
  21     position:relative;
  22     display:-ms-flexbox;
  23     display:flex;
  24     -ms-flex-align: start;
  25         align-items: flex-start;
  26     background-color: #fff;
  27     margin: 0rem 1rem;
  28     margin-bottom: 1rem;
  29     min-width: 350px;
  30     max-width: 350px;
  31     height:125px;
  32     border-radius: 8px;
  33     padding:0.5rem;
  34     cursor:pointer;
  35     &-thumbnail {
  36         margin-right: 0.5rem;
  37             max-width: 2rem;
  38     max-height: 2rem;
  39     }
  40     &-button {
  41         font-size:1.25rem;
  42         cursor:pointer;
  43     }
  44     &-body {
  45         -ms-flex:1;
  46             flex:1;
  47         display:-ms-flexbox;
  48         display:flex;
  49         -ms-flex-direction:column;
  50             flex-direction:column;
  51         -ms-flex-pack:justify;
  52             justify-content:space-between;
  53         height: 100%;
  54         font-size:0.75rem;
  55     }
  56     &-name {
  57         font-size:1rem;
  58     }
  59     &-info{
  60         position:relative;
  61         display:-ms-flexbox;
  62         display:flex;
  63         -ms-flex-align: center;
  64             align-items: center;
  65         border-bottom: 1px solid $dark-gray;
  66         width:-webkit-fit-content;
  67         width:-moz-fit-content;
  68         width:fit-content;
  69         cursor:pointer;
  70         dd {
  71             margin:0 1rem 0 0.5rem;
  72             &:nth-last-child(2) {
  73                 margin-right:0;
  74             }
  75         }
  76         .details {
  77             display:none;
  78             top: 1.125rem;
  79             left: 0;
  80             width:100%;
  81             z-index:2;
  82             background:white;
  83             border:1px solid $dark-gray;
  84             padding:0.5rem;
  85             padding-top: 1rem;
  86             &-section {
  87                 margin-bottom:0.75rem;
  88                 color:black;
  89
  90                 &-title{
  91                     margin-bottom:0.5rem;
  92                     font-weight:bold;
  93                     color:black;
  94                 }
  95                 &-item{
  96                     display:-ms-flexbox;
  97                     display:flex;
  98                     -ms-flex-align: center;
  99                     align-items: center;
 100                     margin:0.25rem 0rem;
 101                     color:black;
 102
 103                     img {
 104                         width:1.5rem;
 105                         height:1.5rem;
 106                         margin-right:0.25rem;
 107                     }
 108                 }
 109             }
 110         }
 111         &.CatalogCard-info--expanded {
 112             .details{
 113                 position:absolute;
 114                 display:-ms-flexbox;
 115                 display:flex;
 116                 -ms-flex-direction:column;
 117                     flex-direction:column;
 118             }
 119         }
 120     }
 121     &-is-selected {
 122         outline: 2px dashed $brand-blue;
 123         outline-offset: 2px;
 124         cursor: pointer;
 125     }
 126     &:hover {
 127         background-color: #7e9bc1;
 128         /* background-color: $brand-blue-dark;*/
 129         color:white;
 130
 131         .CatalogCard-info {
 132             border-bottom: 1px solid white;
 133         }
 134
 135     }
 136     &-is-active {
 137         /* &:before {*/
 138         /*     content: '';*/
 139         /*     position:absolute;*/
 140         /*     height:125px;*/
 141         /*     width:10px;*/
 142         /*     left:-10px;*/
 143         /*     background-color:#7e9bc1;*/
 144         /*     /* background-color:$brand-blue-dark;*/
 145         /* }*/
 146     }
 147     &-name {
 148         font-weight:bold;
 149     }
 150     &-subtitle {
 151         margin-top:0.25rem;
 152     }
 153     &-description {
 154         margin:0.5rem 0;
 155     }
 156 }