github.com/replicatedhq/ship@v0.55.0/web/init/src/scss/components/shared/Popover.scss (about)

     1  .Popover-wrapper {
     2    display: none;
     3    position: absolute;
     4    width: auto;
     5    z-index: 100;
     6  }
     7  .Popover-wrapper.is-active {
     8    display: block;
     9    z-index: 410;
    10  }
    11  .Popover-wrapper .Popover-content {
    12    background-color: #ffffff; 
    13    border: 1px solid #DFDFDF;
    14    padding: 10px 0;
    15    text-align: left;
    16    border-radius: 4px;
    17    box-shadow: 0 0 3px rgba(0,0,0,0.25);
    18  }
    19  .Popover-wrapper::after {
    20    content: "";
    21    width: 0;
    22    height: 0;
    23    position: absolute;
    24  }
    25  
    26  /* bottom-right */
    27  .Popover-wrapper.popover-bottom-right {
    28    padding-top: 8px;
    29    right: 0;
    30    right: -12px;
    31    top: 100%;
    32  }
    33  .Popover-wrapper.popover-bottom-right::after {
    34    width: 12px;
    35    height: 12px;
    36    left: 14px;
    37    top: 4px;
    38    background: #ffffff;
    39    box-shadow: -1px -1px 0 #DFDFDF;
    40    transform: rotate(45deg); 
    41  }
    42  
    43  /* bottom-left */
    44  .Popover-wrapper.popover-bottom-left {
    45    padding-top: 8px;
    46    left: 0;
    47    right: -12px;
    48    top: 100%;
    49  }
    50  .Popover-wrapper.popover-bottom-left::after {
    51    width: 12px;
    52    height: 12px;
    53    right: 14px;
    54    top: 4px;
    55    background: #ffffff;
    56    box-shadow: -1px -1px 0 #DFDFDF;
    57    transform: rotate(45deg); 
    58  }
    59  
    60  /* top-left */
    61  .Popover-wrapper.popover-top-left {
    62    padding-bottom: 8px;
    63    left: auto;
    64    right: -12px;
    65    bottom: 100%;
    66  }
    67  .Popover-wrapper.popover-top-left::after {
    68    width: 12px;
    69    height: 12px;
    70    right: 14px;
    71    bottom: 4px;
    72    background: #ffffff;
    73    box-shadow: -1px -1px 0 #DFDFDF;
    74    transform: rotate(-135deg); 
    75  }
    76  
    77  .PopoverItem {
    78    padding: 12px 20px;
    79    cursor: pointer;
    80    transition: background-color .2s;
    81  }
    82  .PopoverItem .PopoverIcon {
    83    margin-right: 8px;
    84  }
    85  .PopoverItem .PopoverLabel {
    86    color: #323232;
    87    font-size: 18px;
    88    line-height: 1;
    89    font-weight: 700;
    90    transition: color .2s;
    91  }
    92  .PopoverItem:not(.disabled-link):hover {
    93    background-color: #F5F8FC;
    94  
    95    .PopoverLabel {
    96      color: #337AB7;
    97    }
    98  }
    99  .PopoverItem.disabled-link {
   100    cursor: not-allowed;
   101  
   102    .PopoverIcon {
   103      opacity: .5;
   104    }
   105    .PopoverTitle,
   106    .PopoverSub {
   107      color: #9B9B9B;
   108    }
   109  }
   110  .PopoverItem .PopoverTitle {
   111    user-select: none;
   112  }
   113  .PopoverItem .PopoverSub {
   114    color: #9B9B9B;
   115    font-size: 12px;
   116    font-weight: 400;
   117    line-height: 18px;
   118    margin-top: 6px;
   119    user-select: none;
   120  }
   121  
   122  /* ≥ 1024px */
   123  @media screen and (min-width: 64em) {
   124    .PopoverItem .PopoverLabel {
   125      font-size: 16px;
   126    }
   127  }