skyquake/plugins/launchpad/src/launchpad_card/jobListCard.scss

   1 @import 'style/_colors.scss';
   2
   3 .jobListCard {
   4     background:white;
   5     border-radius: 5px;
   6     padding:0.5rem;
   7     margin:0.5rem;
   8     &--header {
   9         display:-ms-flexbox;
  10         display:flex;
  11         -ms-flex-pack: justify;
  12         justify-content: space-between;
  13         -ms-flex-align: center;
  14         align-items: center;
  15         -ms-flex-wrap: wrap;
  16         flex-wrap: wrap;
  17         margin-bottom:0.25rem;
  18     }
  19     &--subtitle {
  20         color:$darker-gray;
  21         font-size:0.75rem;
  22         margin-bottom:0.125rem;
  23     }
  24     &--status {
  25         height: 0.75rem;
  26         width: 0.75rem;
  27         border-radius:50%;
  28         &_red {
  29             background:red;
  30             border-color:red;
  31         }
  32         &_green {
  33             background:green;
  34             border-color:green;
  35         }
  36         &_yellow {
  37             background:yellow;
  38             border-color:yellow;
  39         }
  40     }
  41     &--parameters {
  42         font-size:0.75rem;
  43         h4 {
  44             padding-bottom:0.5rem;
  45             text-decoration:underline;
  46             cursor:pointer;
  47         }
  48
  49     }
  50     &--list {
  51         display:-ms-flexbox;
  52         display:flex;
  53         -ms-flex-wrap:wrap;
  54             flex-wrap:wrap;
  55     }
  56     &--listitem {
  57         -ms-flex: 1 1 48%;
  58             flex: 1 1 48%;
  59         margin:0.125rem;
  60     }
  61     &--listname {
  62         -ms-flex:1 1 100%;
  63             flex:1 1 100%;
  64     }
  65     &--parameter {
  66         color:$darker-gray;
  67     }
  68     &--details {
  69         font-size:0.75rem;
  70
  71         >div {
  72             display: flex;
  73             >div {
  74                 display: flex;
  75                 padding: 1em 0 0 1em;
  76             }
  77         }
  78
  79         &--tree {
  80                 display: flex;
  81                 flex-direction: column;
  82
  83                 .tree-view {
  84                     min-height: 300px;
  85                     min-width: 580px;
  86                     overflow-y: scroll;
  87                 }
  88             }
  89
  90         h4 {
  91             padding-bottom:0.5rem;
  92             text-decoration:underline;
  93             cursor:pointer;
  94         }
  95         &--content {
  96             height: 26em;
  97             overflow-y: scroll;
  98             padding: 1em;
  99         }
 100         &--close {
 101             text-align: center;
 102             margin-top: 3em;
 103         }
 104
 105     }
 106 }