github.com/sl1pm4t/consul@v1.4.5-0.20190325224627-74c31c540f9c/ui/styles/_v2-notification.scss (about)

     1  #v2-notification {
     2    color: white;
     3    background-color: #7c1d48;
     4  }
     5  #v2-notification a {
     6    font-size: 10px;
     7    border-width: 1px;
     8  }
     9  #v2-notification input,
    10  #v2-notification input + * {
    11    display: none;
    12  }
    13  #v2-notification input:checked + * {
    14    display: block;
    15  }
    16  #v2-notification {
    17    width: 100vw;
    18    position: relative;
    19    left: 50%;
    20    margin-left: -50vw;
    21  }
    22  #v2-notification label {
    23    cursor: pointer;
    24  }
    25  #v2-notification label::after {
    26    content: '';
    27    display: block;
    28    width: 21px;
    29    height: 16px;
    30    background-position: 5px 0px;
    31    background-repeat: no-repeat;
    32    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M7.894 9.956l-4.125 4.125-1.031 1.031-2.101-2.101 1.03-1.031 4.126-4.125-4.086-4.086-1.051-1.05L2.718.655l1.051 1.05 4.086 4.087 4.125-4.125L13.01.637l2.102 2.1-1.031 1.032-4.125 4.125 4.086 4.086 1.05 1.05-2.062 2.063-1.05-1.05-4.086-4.087z" fill="%23FFF" fill-rule="evenodd"/></svg>');
    33  
    34  }
    35  #v2-notification .col-md-12 > div {
    36    padding: 15px;
    37  }
    38  #v2-notification p {
    39    font-size: 15px;
    40    font-weight: 500;
    41    margin-left: 15px;
    42    margin-right: 9px;
    43  }
    44  #v2-notification a {
    45    min-width: 95px;
    46  }
    47  @media (min-width: 768px) {
    48    #v2-notification .row > div:nth-child(2) {
    49      padding-left: 10px;
    50    }
    51    #v2-notification a {
    52      max-width: 106px;
    53    }
    54    #v2-notification .col-md-12 > div::before {
    55      content: '';
    56      display: block;
    57      position: absolute;
    58      width: 30px;
    59      height: 30px;
    60      top: 50%;
    61      margin-top: -20px;
    62      margin-left: -13px;
    63      background-image: url('tada.png');
    64    }
    65  }
    66  @media (max-width: 767px) {
    67    #v2-notification .row > div {
    68      width: 100%;
    69      margin-left: 0;
    70      text-align: center;
    71      padding: 0;
    72    }
    73    #v2-notification a {
    74      width: 100%;
    75    }
    76    #v2-notification a {
    77      margin: 0 auto;
    78    }
    79  }
    80  @media (max-width: 991px) {
    81    #v2-notification p span {
    82      display: none;
    83    }
    84    #v2-notification .row > div:last-child {
    85      position: absolute;
    86      top: 15px;
    87      right: 0;
    88    }
    89    #v2-notification label {
    90      position: absolute;
    91      top: 0;
    92      right: 15px;
    93    }
    94  }