tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

_icons.scss (6027B)

      1 .icon {
      2  background-position: center center;
      3  background-repeat: no-repeat;
      4  background-size: $icon-size;
      5  -moz-context-properties: fill;
      6  display: inline-block;
      7  color: var(--icon-color);
      8  fill: currentColor;
      9  height: $icon-size;
     10  vertical-align: middle;
     11  width: $icon-size;
     12 
     13  // helper classes
     14  &.icon-spacer {
     15    margin-inline-end: var(--space-small);
     16  }
     17 
     18  &.icon-small-spacer {
     19    margin-inline-end: var(--space-xsmall);
     20  }
     21 
     22  &.icon-button-style {
     23    fill: var(--newtab-text-secondary-color);
     24    border: 0;
     25 
     26    &:focus,
     27    &:hover {
     28      fill: var(--newtab-text-primary-color);
     29    }
     30  }
     31 
     32  // icon images
     33  &.icon-bookmark-added {
     34    background-image: url('chrome://browser/skin/bookmark.svg');
     35  }
     36 
     37  &.icon-bookmark-hollow {
     38    background-image: url('chrome://browser/skin/bookmark-hollow.svg');
     39  }
     40 
     41  &.icon-clear-input {
     42    background-image: url('chrome://global/skin/icons/close-fill.svg');
     43  }
     44 
     45  &.icon-delete {
     46    background-image: url('chrome://global/skin/icons/delete.svg');
     47  }
     48 
     49  &.icon-search {
     50    background-image: url('chrome://global/skin/icons/search-glass.svg');
     51  }
     52 
     53  &.icon-modal-delete {
     54    flex-shrink: 0;
     55    background-image: url('chrome://newtab/content/data/content/assets/glyph-modal-delete-20.svg');
     56    background-size: $larger-icon-size;
     57    height: $larger-icon-size;
     58    width: $larger-icon-size;
     59  }
     60 
     61  &.icon-mail {
     62    background-image: url('chrome://newtab/content/data/content/assets/glyph-mail-16.svg');
     63  }
     64 
     65  &.icon-dismiss {
     66    background-image: url('chrome://global/skin/icons/close.svg');
     67  }
     68 
     69  &.icon-info {
     70    background-image: url('chrome://global/skin/icons/info.svg');
     71  }
     72 
     73  &.icon-info-critical {
     74    background-image: url('chrome://newtab/content/data/content/assets/glyph-info-critical-16.svg');
     75  }
     76 
     77  &.icon-info-warning {
     78    background-image: url('chrome://global/skin/icons/warning.svg');
     79    fill: var(--icon-color-warning);
     80    -moz-context-properties: fill;
     81  }
     82 
     83  &.icon-help {
     84    background-image: url('chrome://global/skin/icons/help.svg');
     85  }
     86 
     87  &.icon-new-window {
     88    @include flip-icon;
     89 
     90    background-image: url('chrome://newtab/content/data/content/assets/glyph-newWindow-16.svg');
     91  }
     92 
     93  &.icon-new-window-private {
     94    background-image: url('chrome://browser/skin/privateBrowsing.svg');
     95  }
     96 
     97  &.icon-settings {
     98    background-image: url('chrome://global/skin/icons/settings.svg');
     99  }
    100 
    101  &.icon-pin {
    102    @include flip-icon;
    103 
    104    background-image: url('chrome://newtab/content/data/content/assets/glyph-pin-16.svg');
    105  }
    106 
    107  &.icon-unpin {
    108    @include flip-icon;
    109 
    110    background-image: url('chrome://newtab/content/data/content/assets/glyph-unpin-16.svg');
    111  }
    112 
    113  &.icon-edit {
    114    background-image: url('chrome://global/skin/icons/edit.svg');
    115  }
    116 
    117  &.icon-edit-outline {
    118    background-image: url('chrome://global/skin/icons/edit-outline.svg');
    119  }
    120 
    121  &.icon-pocket {
    122    background-image: url('chrome://global/skin/icons/help.svg');
    123  }
    124 
    125  &.icon-history-item {
    126    background-image: url('chrome://browser/skin/history.svg');
    127  }
    128 
    129  &.icon-newsfeed {
    130    background-image: url('chrome://global/skin/icons/newsfeed.svg');
    131  }
    132 
    133  &.icon-trending {
    134    background-image: url('chrome://browser/skin/trending.svg');
    135    transform: translateY(2px); // trending bolt is visually top heavy
    136  }
    137 
    138  &.icon-now {
    139    background-image: url('chrome://browser/skin/history.svg');
    140  }
    141 
    142  &.icon-topsites {
    143    background-image: url('chrome://browser/skin/topsites.svg');
    144  }
    145 
    146  &.icon-pin-small {
    147    @include flip-icon;
    148 
    149    background-image: url('chrome://browser/skin/pin-12.svg');
    150    background-size: $smaller-icon-size;
    151    height: $smaller-icon-size;
    152    width: $smaller-icon-size;
    153  }
    154 
    155  &.icon-check {
    156    background-image: url('chrome://global/skin/icons/check.svg');
    157  }
    158 
    159  &.icon-check-filled {
    160    background-image: url('chrome://global/skin/icons/check-filled.svg');
    161  }
    162 
    163  &.icon-download {
    164    background-image: url('chrome://browser/skin/downloads/downloads.svg');
    165  }
    166 
    167  &.icon-copy {
    168    background-image: url('chrome://global/skin/icons/edit-copy.svg');
    169  }
    170 
    171  &.icon-open-file {
    172    background-image: url('chrome://newtab/content/data/content/assets/glyph-open-file-16.svg');
    173  }
    174 
    175  &.icon-webextension {
    176    background-image: url('chrome://newtab/content/data/content/assets/glyph-webextension-16.svg');
    177  }
    178 
    179  &.icon-weather {
    180    background-image: url('chrome://browser/skin/weather/sunny.svg');
    181  }
    182 
    183  &.icon-highlights {
    184    background-image: url('chrome://global/skin/icons/highlights.svg');
    185  }
    186 
    187  &.icon-arrowhead-down {
    188    background-image: url('chrome://global/skin/icons/arrow-down.svg');
    189  }
    190 
    191  &.icon-arrowhead-down-small {
    192    background-image: url('chrome://global/skin/icons/arrow-down-12.svg');
    193    background-size: $smaller-icon-size;
    194    height: $smaller-icon-size;
    195    width: $smaller-icon-size;
    196  }
    197 
    198  &.icon-arrowhead-forward-small {
    199    background-image: url('chrome://global/skin/icons/arrow-right-12.svg');
    200    background-size: $smaller-icon-size;
    201    height: $smaller-icon-size;
    202    width: $smaller-icon-size;
    203 
    204    &:dir(rtl) {
    205      background-image: url('chrome://global/skin/icons/arrow-left-12.svg');
    206    }
    207  }
    208 
    209  &.icon-arrowhead-up {
    210    background-image: url('chrome://global/skin/icons/arrow-up.svg');
    211  }
    212 
    213  &.icon-add {
    214    background-image: url('chrome://global/skin/icons/plus.svg');
    215  }
    216 
    217  &.icon-add-circle-fill {
    218    background-image: url('chrome://newtab/content/data/content/assets/glyph-add-circle-fill-16.svg');
    219  }
    220 
    221  &.icon-minimize {
    222    background-image: url('chrome://newtab/content/data/content/assets/glyph-minimize-16.svg');
    223  }
    224 
    225  &.icon-maximize {
    226    background-image: url('chrome://newtab/content/data/content/assets/glyph-maximize-16.svg');
    227  }
    228 
    229  &.icon-arrow {
    230    background-image: url('chrome://global/skin/icons/arrow-right-12.svg');
    231  }
    232 
    233  &.icon-device-phone {
    234    background-image: url('chrome://browser/skin/device-phone.svg');
    235  }
    236 
    237  &.icon-arrow-trending {
    238    background-image: url('chrome://global/skin/icons/trending.svg');
    239  }
    240 }