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

     1  .console-toggle {
     2      position: absolute;
     3      z-index: 100;
     4      right: 12px;
     5      top: 7px;
     6      padding: 4px;
     7      border-radius: 4px;
     8      cursor: pointer;
     9    }
    10    .console-wrapper {
    11      position: absolute;
    12      transform: translateX(100%);
    13      transition: transform .2s;
    14      top: 0;
    15      bottom: 0;
    16      right: 0;
    17  
    18      /* ≥ 1024px */
    19      @media screen and (max-width: 64em) {
    20        & {
    21          width: 50%;
    22        }
    23      }
    24    
    25      &.visible {
    26        position: relative;
    27        transform: translateX(0);
    28      }
    29    }
    30    .Linter-wrapper {
    31      border-left: 1px solid #C4C8CA;
    32      background-color: #ffffff;
    33    }
    34    .Linter-wrapper .Linter-header {
    35      padding: 8px 12px;
    36      background-color: #F5F8FC;
    37      line-height: 16px;
    38      border-bottom: 1px solid #C4C8CA;
    39    }
    40    .Linter-wrapper .ConsoleBlock {
    41      padding: 12px;
    42      font-size: 12px;
    43      font-weight: 500;
    44      line-height: 18px;
    45      box-sizing: border-box;
    46      width: 100%;
    47    }
    48    .Linter-wrapper .ConsoleBlock .icon {
    49      position: relative;
    50    
    51      &.u-linkIcon--blue {
    52        top: 4px;
    53      }
    54    }
    55    .Linter-wrapper .ConsoleBlock.error {
    56      background-color: #FBEDEB;
    57      border-bottom: 1px solid #E9DBDB;
    58      color: #BC4752;
    59    }
    60    .Linter-wrapper .ConsoleBlock.warn {
    61      background-color: #FFF1DA;
    62      border-bottom: 1px solid #F9E8CB;
    63      color: #717171;
    64    }
    65    .Linter-wrapper .ConsoleBlock.info {
    66      background-color: #F8F8F8;
    67      border-bottom: 1px solid #F0F0F0;
    68      color: #717171;
    69    }
    70    .Linter-wrapper .readme {
    71      margin: 0 10px 10px;
    72      padding: 15px;
    73      background: #fff;
    74      border-radius: 3px;
    75      border: solid #C4C7CA 1px;
    76    }
    77    .Linter--toggle {
    78      margin: 10px 20px 20px;
    79    
    80      & > div {
    81        flex: 1;
    82      }
    83    
    84      span {
    85        flex: 1;
    86        font-size: 12px;
    87        padding: 5px;
    88        border: solid 1px #9B9B9B;
    89        cursor: pointer;
    90        text-align: center;
    91      }
    92    
    93      span:first-of-type {
    94        border-top-left-radius: 3px;
    95        border-bottom-left-radius: 3px;
    96      }
    97      span:last-of-type {
    98        border-top-right-radius: 3px;
    99        border-bottom-right-radius: 3px;
   100      }
   101    
   102      .is-active {
   103        background: #9B9B9B;
   104        color: #fff;
   105      }
   106      .not-active {
   107        background: transparent;
   108        color: #9B9B9B;
   109      }
   110    }
   111