github.com/muhammedhassanm/blockchain@v0.0.0-20200120143007-697261defd4d/build-blockchain-insurance-app-master/web/src/block-explorer/style.scss (about)

     1  @media screen and (min-device-width: 768px) {
     2      $block-viewer-height: 180px;
     3      #ibm-content-wrapper {
     4          margin-bottom: $block-viewer-height;
     5      }
     6      .block-explorer {
     7          position: fixed;
     8          bottom: 0;
     9          right: 0;
    10          left: 0;
    11          .toggle-visibility-button {
    12              position: absolute;
    13              right: 20px;
    14              top: 10px;
    15              height: 24px;
    16              transition: top .5s ease-in;
    17              transition-delay: .2s;
    18              z-index: 6005;
    19              &.hidden {
    20                  top: -30px;
    21              }
    22              img {
    23                  height: 24px;
    24                  width: 24px;
    25              }
    26              .hint {
    27                  position: absolute;
    28                  display: inline-block;
    29                  padding-right: 10px;
    30                  right: 100%;
    31                  height: 24px;
    32                  line-height: 24px;
    33                  max-width: 300px;
    34                  text-align: right;
    35                  white-space: nowrap;
    36                  opacity: 1;
    37                  transition: opacity .5s ease-in, max-width .5s ease-in, visibility .5s ease-in;
    38                  overflow: hidden;
    39                  &.hidden {
    40                      visibility: hidden;
    41                      opacity: 0;
    42                      max-width: 0;
    43                  }
    44              }
    45          }
    46          .contents {
    47              height: $block-viewer-height;
    48              background-color: #C0E6FF; // IBM Blue 10
    49              box-sizing: border-box;
    50              opacity: 0.5;
    51              padding: 0 20px;
    52              z-index: 6000;
    53              transition: opacity .5s ease-out, height .5s ease-out;
    54              &:hover {
    55                  opacity: 1;
    56              }
    57              &.hidden {
    58                  height: 0;
    59              }
    60              .block {
    61                  display: inline-block;
    62                  width: 200px;
    63                  height: 90px;
    64                  margin: 0 10px;
    65                  padding: 10px;
    66                  background-color: #7CC7FF; // IBM Blue 20
    67                  .block-data {
    68                      display: flex;
    69                      flex-flow: column;
    70                      height: 100%;
    71                      p,
    72                      div {
    73                          padding: 0;
    74                          margin: 0;
    75                          line-height: 15px;
    76                      }
    77                      .transactions {
    78                          overflow-x: hidden;
    79                          overflow-y: auto;
    80                          flex: auto;
    81                          .transaction {
    82                              display: flex;
    83                              flex-flow: row;
    84                              white-space: nowrap;
    85                              .trans-date {
    86                                  flex: initial;
    87                              }
    88                              .trans-type {
    89                                  flex: auto;
    90                                  overflow: hidden;
    91                                  div.overflown:hover {
    92                                      animation-name: marquee;
    93                                      animation-duration: 3s;
    94                                      animation-timing-function: linear;
    95                                      animation-iteration-count: infinite;
    96                                  }
    97                                  @keyframes marquee {
    98                                      0% {
    99                                          transform: translateX(0);
   100                                      }
   101                                      50% {
   102                                          transform: translateX(calc(100% - var(--scroll-width)));
   103                                      }
   104                                      100% {
   105                                          transform: translateX(0);
   106                                      }
   107                                  }
   108                              }
   109                          }
   110                      }
   111                  }
   112              }
   113          }
   114      }
   115  }