Prism.languages.elixir = { doc: { pattern: /@(?:doc|moduledoc)\s+(?:("""|''')[\s\S]*?\1|("|')(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2)/, inside: { attribute: /^@\w+/, string: /['"][\s\S]+/, }, }, comment: { pattern: /#.*/, greedy: true, }, // ~r"""foo""" (multi-line), ~r'''foo''' (multi-line), ~r/foo/, ~r|foo|, ~r"foo", ~r'foo', ~r(foo), ~r[foo], ~r{foo}, ~r regex: { pattern: /~[rR](?:("""|''')(?:\\[\s\S]|(?!\1)[^\\])+\1|([\/|"'])(?:\\.|(?!\2)[^\\\r\n])+\2|\((?:\\.|[^\\)\r\n])+\)|\[(?:\\.|[^\\\]\r\n])+\]|\{(?:\\.|[^\\}\r\n])+\}|<(?:\\.|[^\\>\r\n])+>)[uismxfr]*/, greedy: true, }, string: [ { // ~s"""foo""" (multi-line), ~s'''foo''' (multi-line), ~s/foo/, ~s|foo|, ~s"foo", ~s'foo', ~s(foo), ~s[foo], ~s{foo} (with interpolation care), ~s pattern: /~[cCsSwW](?:("""|''')(?:\\[\s\S]|(?!\1)[^\\])+\1|([\/|"'])(?:\\.|(?!\2)[^\\\r\n])+\2|\((?:\\.|[^\\)\r\n])+\)|\[(?:\\.|[^\\\]\r\n])+\]|\{(?:\\.|#\{[^}]+\}|#(?!\{)|[^#\\}\r\n])+\}|<(?:\\.|[^\\>\r\n])+>)[csa]?/, greedy: true, inside: { // See interpolation below }, }, { pattern: /("""|''')[\s\S]*?\1/, greedy: true, inside: { // See interpolation below }, }, { // Multi-line strings are allowed pattern: /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/, greedy: true, inside: { // See interpolation below }, }, ], atom: { // Look-behind prevents bad highlighting of the :: operator pattern: /(^|[^:]):\w+/, lookbehind: true, alias: 'symbol', }, module: { pattern: /\b[A-Z]\w*\b/, alias: 'class-name', }, // Look-ahead prevents bad highlighting of the :: operator 'attr-name': /\b\w+\??:(?!:)/, argument: { // Look-behind prevents bad highlighting of the && operator pattern: /(^|[^&])&\d+/, lookbehind: true, alias: 'variable', }, attribute: { pattern: /@\w+/, alias: 'variable', }, function: /\b[_a-zA-Z]\w*[?!]?(?:(?=\s*(?:\.\s*)?\()|(?=\/\d))/, number: /\b(?:0[box][a-f\d_]+|\d[\d_]*)(?:\.[\d_]+)?(?:e[+-]?[\d_]+)?\b/i, keyword: /\b(?:after|alias|and|case|catch|cond|def(?:callback|delegate|exception|impl|macro|module|n|np|p|protocol|struct)?|do|else|end|fn|for|if|import|not|or|quote|raise|require|rescue|try|unless|unquote|use|when)\b/, boolean: /\b(?:false|nil|true)\b/, operator: [ /\bin\b|&&?|\|[|>]?|\\\\|::|\.\.\.?|\+\+?|-[->]?|<[-=>]|>=|!==?|\B!|=(?:==?|[>~])?|[*\/^]/, { // We don't want to match << pattern: /([^<])<(?!<)/, lookbehind: true, }, { // We don't want to match >> pattern: /([^>])>(?!>)/, lookbehind: true, }, ], punctuation: /<<|>>|[.,%\[\]{}()]/, }; Prism.languages.elixir.string.forEach(function (o) { o.inside = { interpolation: { pattern: /#\{[^}]+\}/, inside: { delimiter: { pattern: /^#\{|\}$/, alias: 'punctuation', }, rest: Prism.languages.elixir, }, }, }; }); ippot.com/tree/src/components?id=b7d735bc385184c745781af4e6aaa75de111998c'>components/molecules/images/responsive-image.module.scss
blob: 8a1d51f9553d8f0d4c67ad6c6cda8bc928133803 (plain) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

@use "@styles/abstracts/functions" as fun;

.caption {
  margin: 0;
  padding: fun.convert-px(4) var(--spacing-2xs);
  background: var(--color-bg-secondary);
  border: fun.convert-px(1) solid var(--color-border-light);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.wrapper {
  display: flex;
  flex-flow: column;
  width: fit-content;
  margin: 0 auto;
  position: relative;
  text-align: center;

  &--has-borders {
    .caption {
      margin-top: fun.convert-px(4);
    }
  }

  &--has-borders#{&}--has-link {
    .link {
      padding: fun.convert-px(4);
    }
  }

  &--has-borders#{&}--no-link {
    padding: fun.convert-px(4);
    border: fun.convert-px(1) solid var(--color-border);
    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
      var(--color-shadow);
  }
}

.link {
  display: flex;
  flex-flow: column;
  background: none;
  border: fun.convert-px(1) solid var(--color-border);
  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
    var(--color-shadow);
  text-decoration: none;

  .caption {
    color: var(--color-primary-darker);
  }

  &:hover,
  &:focus {
    box-shadow: 0 0 fun.convert-px(2) 0 var(--color-shadow-light),
      fun.convert-px(2) fun.convert-px(2) fun.convert-px(4) fun.convert-px(1)
        var(--color-shadow-light),
      fun.convert-px(4) fun.convert-px(4) fun.convert-px(8) fun.convert-px(2)
        var(--color-shadow-light);
    transform: scale(var(--scale-up, 1.05));
  }

  &:focus {
    .caption {
      text-decoration: underline solid var(--color-primary-darker)
        fun.convert-px(3);
    }
  }

  &:active {
    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
      fun.convert-px(1) var(--color-shadow-light);
    transform: scale(var(--scale-down, 0.95));

    .caption {
      text-decoration: none;
    }
  }
}