github.com/outbrain/consul@v1.4.5/ui-v2/app/styles/components/product.scss (about)

     1  @import './product/index';
     2  @import './filter-bar';
     3  html body > svg {
     4    display: none;
     5  }
     6  html.ember-loading body > svg {
     7    @extend %brand-loader;
     8  }
     9  html.template-loading main > div {
    10    @extend %loader;
    11  }
    12  %loader circle {
    13    fill: $brand-magenta-100;
    14  }
    15  %main-header::before {
    16    background-color: $brand-magenta-600;
    17  }
    18  %header-nav a,
    19  %header-nav-toggle-button {
    20    color: $brand-magenta-050;
    21  }
    22  @media #{$--lt-horizontal-nav} {
    23    %header-nav-panel {
    24      background-color: $brand-magenta-600;
    25    }
    26  }
    27  @media #{$--horizontal-nav} {
    28    %header-nav > ul > li:not(:first-child).is-active > a {
    29      background-color: $brand-magenta-800;
    30    }
    31  }
    32  #wrapper > footer {
    33    @extend %footer;
    34  }
    35  /*TODO: This should go in reset, and probably needs select etc adding  */
    36  @media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) {
    37    input {
    38      font-size: 16px !important;
    39    }
    40  }
    41  /* toggleable toolbar for short screens */
    42  [for='toolbar-toggle'] {
    43    @extend %with-magnifier;
    44    color: $ui-blue-500;
    45    width: 20px;
    46    height: 20px;
    47    margin-left: 15px;
    48    top: -3px;
    49  }
    50  #toolbar-toggle {
    51    display: none;
    52  }
    53  @media #{$--horizontal-selects} {
    54    [for='toolbar-toggle'] {
    55      display: none;
    56    }
    57  }
    58  @media #{$--lt-horizontal-selects} {
    59    %app-view header h1 {
    60      display: inline-block;
    61    }
    62    #toolbar-toggle + * {
    63      display: none;
    64    }
    65    #toolbar-toggle:checked + * {
    66      display: block;
    67    }
    68  }