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

     1  /*TODO: The old pseudo-icon was to specific */
     2  /* make a temporary one with the -- prefix */
     3  /* to make it more reusable temporarily */
     4  %bg-icon {
     5    background-repeat: no-repeat;
     6    background-position: center;
     7  }
     8  %--pseudo-icon {
     9    display: inline-block;
    10    content: '';
    11    visibility: visible;
    12    background-repeat: no-repeat;
    13    background-position: center;
    14  }
    15  %pseudo-icon-bg-img {
    16    @extend %--pseudo-icon;
    17    position: relative;
    18    background-size: contain;
    19    background-color: transparent;
    20  }
    21  %pseudo-icon-css {
    22    @extend %--pseudo-icon;
    23    display: block;
    24    position: absolute;
    25    top: 50%;
    26    width: 1em;
    27    height: 1em;
    28    margin-top: -0.6em;
    29    background-color: currentColor;
    30  }
    31  /* %pseudo-icon-mask, %pseudo-icon-overlay ?*/
    32  %pseudo-icon {
    33    @extend %pseudo-icon-css;
    34  }
    35  %with-external-source-icon {
    36    background-repeat: no-repeat;
    37    background-size: contain;
    38    width: 18px;
    39    height: 18px;
    40  }
    41  %with-dot {
    42    content: '';
    43    display: block;
    44    position: absolute;
    45    border-radius: 100%;
    46    width: 3px;
    47    height: 3px;
    48    background-color: currentColor;
    49    visibility: visible;
    50    top: 50%;
    51    left: 50%;
    52    pointer-events: none;
    53  }
    54  %with-folder {
    55    text-indent: 30px;
    56  }
    57  %with-hashicorp,
    58  %with-folder,
    59  %with-chevron,
    60  %with-clipboard,
    61  %with-right-arrow {
    62    position: relative;
    63  }
    64  %with-chevron {
    65    padding-left: 10px;
    66    display: inline-block;
    67  }
    68  %with-hashicorp {
    69    background-color: $ui-white;
    70  }
    71  %with-hashicorp::before {
    72    @extend %pseudo-icon;
    73    opacity: 0.45;
    74    background-image: $hashicorp-svg;
    75    background-size: cover;
    76    width: 20px;
    77    height: 20px;
    78    left: -25px;
    79    margin-top: -10px;
    80    background-color: $ui-color-transparent;
    81  }
    82  %with-clipboard {
    83    padding-left: 38px !important;
    84  }
    85  %with-clipboard::before {
    86    @extend %pseudo-icon;
    87    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="17" xmlns="http://www.w3.org/2000/svg"><g fill="%231563FF"><path d="M1.5 10.6v.156c0-.117-.043-.156-.033-.156H1.5zm0 0V1.5h8v2.97H11V1.344C11 .602 10.343 0 9.533 0H1.467C.657 0 0 .602 0 1.344v9.412c0 .742.657 1.344 1.467 1.344h2.995v-1.5H1.5zm-.033-9.1c-.01 0 .033-.04.033-.156V1.5h-.033zm8.033 0v-.156c0 .117.043.156.033.156H9.5zm0 0v-.156c0 .117.043.156.033.156H9.5zm0 0v2.97H11V1.344C11 .602 10.343 0 9.533 0H1.467C.657 0 0 .602 0 1.344v9.412c0 .742.657 1.344 1.467 1.344h2.995v-1.5H1.5V1.5h8zm-8 0h-.033c-.01 0 .033-.04.033-.156V1.5zm0 9.256c0-.117-.043-.156-.033-.156H1.5v.156z" fill-rule="nonzero"/><path d="M14.4 4.5H5.6c-.083 0-.1.016-.1-.033v10.266c0-.049.017-.033.1-.033h8.8c.083 0 .1-.016.1.033V4.467c0 .049-.017.033-.1.033zm0-1.5c.884 0 1.6.657 1.6 1.467v10.266c0 .81-.716 1.467-1.6 1.467H5.6c-.884 0-1.6-.657-1.6-1.467V4.467C4 3.657 4.716 3 5.6 3h8.8z" fill-rule="nonzero"/><path d="M2.5 8.25H10v1.154H2.5z"/><path d="M10.942 8.705l.001.001-2.827 2.828-.807-.808 2.02-2.02-2.02-2.021.807-.808 2.827 2.827v.001z"/></g></svg>');
    88    width: 16px;
    89    height: 17px;
    90    left: 12px;
    91    margin-top: -8px;
    92    background-color: $ui-color-transparent;
    93  }
    94  %with-chevron::before {
    95    @extend %pseudo-icon;
    96    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="6" height="9" xmlns="http://www.w3.org/2000/svg"><path fill="%230068FF" d="M5.771 9H3.527L.334 4.834 3.527.674h2.244l-3.193 4.16z" opacity=".33"/></svg>');
    97    width: 6px;
    98    height: 9px;
    99    left: 0;
   100    margin-top: -4px;
   101    background-color: $ui-color-transparent;
   102  }
   103  %with-folder::before {
   104    @extend %pseudo-icon;
   105    width: 12px;
   106    height: 12px;
   107    top: 50%;
   108    margin-top: -6px;
   109    left: 2px;
   110    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="13" xmlns="http://www.w3.org/2000/svg"><path d="M4.779 1H1.8c-.439 0-.8.37-.8.833v9.334c0 .463.361.833.8.833h10.4c.439 0 .8-.37.8-.833V3.833C13 3.37 12.639 3 12.2 3H6.35a.5.5 0 0 1-.42-.228L4.78 1z" stroke="%23BBC4D2" fill="none"/></svg>');
   111    background-color: $ui-color-transparent;
   112  }
   113  %with-magnifier {
   114    position: relative;
   115  }
   116  %with-magnifier::before {
   117    @extend %pseudo-icon;
   118    cursor: pointer; // autosearch
   119    top: 50%;
   120    left: 50%;
   121    margin-left: -0.2em;
   122    margin-top: -0.2em;
   123    font-size: 3em;
   124    width: 0.35em;
   125    height: 0.35em;
   126    border: 0.05em solid;
   127    border-radius: 0.35em;
   128    border-color: currentColor;
   129    background-color: $ui-color-transparent;
   130  }
   131  %with-magnifier::after {
   132    @extend %pseudo-icon;
   133    font-size: 3em;
   134    top: 50%;
   135    left: 50%;
   136    margin-top: 0.13em;
   137    margin-left: 0.07em;
   138    border-width: 0;
   139    width: 0.18em;
   140    height: 0.05em;
   141    transform: rotate(45deg);
   142  }
   143  %with-info {
   144    position: relative;
   145    padding-right: 23px;
   146  }
   147  %with-info::after {
   148    @extend %pseudo-icon;
   149    right: 0;
   150    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><circle stroke="%23BBC4D1" fill="%23FFF" cx="7" cy="7" r="7"/><path fill="%236A7786" d="M6.15 4.677V3.233h1.56v1.444zM6.15 11.374V6.35h1.56v5.023z"/></svg>');
   151    background-color: $ui-color-transparent;
   152    width: 16px;
   153    height: 16px;
   154  }
   155  /*TODO: All chevrons need merging */
   156  %with-chevron-down::before {
   157    @extend %pseudo-icon-bg-img;
   158    background-image: $chevron-svg;
   159    width: 10px;
   160    height: 6px;
   161  }
   162  %with-star-before::before,
   163  %with-star-after::after {
   164    @extend %pseudo-icon-bg-img;
   165    background-image: $star-svg;
   166    width: 10px;
   167    height: 9px;
   168  }
   169  %with-star-before::before {
   170    padding-right: 12px;
   171  }
   172  %with-star-after::after {
   173    padding-left: 22px;
   174  }
   175  %with-star {
   176    @extend %with-star-before;
   177  }
   178  %with-eye::before {
   179    @extend %pseudo-icon-bg-img;
   180    background-image: $eye-svg;
   181    width: 16px;
   182    height: 8px;
   183    padding-right: 12px;
   184  }
   185  %with-tick {
   186    @extend %pseudo-icon;
   187    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M8.95 0L10 .985 3.734 8 0 4.737l.924-1.11 2.688 2.349z" fill="%23FFF"/></svg>');
   188  }
   189  %with-inverted-tick {
   190    @extend %pseudo-icon;
   191    background-color: $ui-color-transparent;
   192    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M8.95 0L10 .985 3.734 8 0 4.737l.924-1.11 2.688 2.349z" fill="%23#{$magenta-800-no-hash}"/></svg>');
   193    height: 20px !important;
   194    width: 16px !important;
   195  }
   196  %with-cross {
   197    @extend %pseudo-icon;
   198    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M4 5.064L1.064 8 0 6.936 2.936 4 0 1.064 1.064 0 4 2.936 6.936 0 8 1.064 5.064 4 8 6.936 6.936 8 4 5.064z" fill="%23FFF"/></svg>');
   199  }
   200  %with-minus {
   201    @extend %pseudo-icon;
   202    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="2" viewBox="0 0 9 2" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFF" fill-rule="nonzero" d="M0 0h8v2H0z"/></svg>');
   203  }
   204  %with-warning-icon-orange {
   205    @extend %pseudo-icon;
   206    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M13.645 10.092c.24.409.365.88.365 1.37 0 1.392-1.027 2.527-2.294 2.538H2.322c-.824 0-1.592-.487-2.004-1.27a2.761 2.761 0 0 1 0-2.538l4.686-8.904C5.416.505 6.184.018 7.008.018c.824 0 1.592.487 2.004 1.27l4.633 8.804zm-5.989 1.264V9.607H6.344v1.749h1.312zm0-3.048v-4.37H6.344v4.37h1.312z" fill="%23fa8f37"/></svg>');
   207  }
   208  %with-warning-icon-grey {
   209    @extend %pseudo-icon;
   210    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M13.645 10.092c.24.409.365.88.365 1.37 0 1.392-1.027 2.527-2.294 2.538H2.322c-.824 0-1.592-.487-2.004-1.27a2.761 2.761 0 0 1 0-2.538l4.686-8.904C5.416.505 6.184.018 7.008.018c.824 0 1.592.487 2.004 1.27l4.633 8.804zm-5.989 1.264V9.607H6.344v1.749h1.312zm0-3.048v-4.37H6.344v4.37h1.312z" fill="%23949daa"/></svg>');
   211  }
   212  %with-right-arrow-green {
   213    @extend %pseudo-icon;
   214    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M9.263.5L8.084 1.637l4.716 4.55H0v1.625h12.8l-4.716 4.55 1.18 1.138L16 7z" fill="%232EB039"/></svg>');
   215    width: 16px;
   216    height: 14px;
   217    background-color: $ui-color-transparent;
   218  }
   219  %with-right-arrow-grey {
   220    @extend %pseudo-icon;
   221    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="13" height="11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="%23919FA8" d="M7.526.219l-.958.924L10.4 4.84H0v1.32h10.4L6.568 9.857l.958.924L13 5.5z"/></svg>');
   222  }
   223  %with-deny-icon {
   224    @extend %pseudo-icon;
   225    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="%23C73445" stroke-width="1.5" x=".75" y=".75" width="14.5" height="14.5" rx="7.25"/><path d="M3.5 3.5l9 9" stroke="%23C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
   226    width: 16px;
   227    height: 16px;
   228    background-color: $ui-color-transparent;
   229  }
   230  %with-deny-icon-grey {
   231    @extend %pseudo-icon;
   232    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23919FA8" d="M7.79 2.992l-.737.711L10 6.547H2v1.016h8l-2.947 2.843.736.711L12 7.055z"/><rect stroke="%23919FA8" stroke-width="1.5" x=".75" y=".75" width="12.5" height="12.5" rx="6.25"/><path d="M3.063 3.063l7.874 7.874" stroke="%23919FA8" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
   233  }
   234  %with-deny::before {
   235    @extend %with-deny-icon;
   236  }
   237  %with-allow::before {
   238    @extend %with-right-arrow-green;
   239  }
   240  %with-passing::before {
   241    @extend %with-tick;
   242    border-radius: 100%;
   243  }
   244  %with-warning::before {
   245    @extend %with-warning-icon-orange;
   246    background-color: $ui-color-transparent;
   247  }
   248  %with-critical::before {
   249    @extend %with-cross;
   250    border-radius: 20%;
   251  }
   252  %with-no-healthchecks::before {
   253    @extend %with-minus;
   254    border-radius: 20%;
   255  }
   256  %with-error {
   257    position: relative;
   258    padding-left: 18px;
   259  }
   260  %with-error::before {
   261    @extend %with-cross;
   262    margin-top: -0.5em;
   263  }