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         h4 {
  71             padding-bottom:0.5rem;
  72             text-decoration:underline;
  73             cursor:pointer;
  74         }
  75         &--content {
  76             height: 26em;
  77             overflow-y: scroll;
  78             padding: 1em;
  79         }
  80         &--close {
  81             text-align: center;
  82             margin-top: 3em;
  83         }
  84
  85     }
  86 }