aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/forms/fields/fields.module.scss
blob: 363c7eef3d55cee2204f6b5863c75feb3c579e11 (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
@use "../../../../styles/abstracts/functions" as fun;
@use "../../../../styles/abstracts/mixins" as mix;

.field {
  padding: var(--spacing-2xs) var(--spacing-xs);
  background: var(--color-bg-tertiary);
  border: fun.convert-px(2) solid var(--color-border);
  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
  transition: all 0.25s linear 0s;

  &--select {
    cursor: pointer;

    @include mix.pointer("fine") {
      padding: fun.convert-px(3) var(--spacing-xs);
    }
  }

  &--textarea {
    min-height: fun.convert-px(200);
  }

  &:disabled {
    background: var(--color-bg-secondary);
    border: fun.convert-px(2) solid var(--color-border-light);
    box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0
      var(--color-shadow-light);
    cursor: not-allowed;
  }

  &:not(:disabled) {
    &:hover {
      box-shadow: fun.convert-px(5) fun.convert-px(5) 0 fun.convert-px(1)
        var(--color-shadow);
      transform: translate(#{fun.convert-px(-3)}, #{fun.convert-px(-3)});
    }

    &:focus {
      background: var(--color-bg);
      border-color: var(--color-primary);
      box-shadow: 0 0 0 0 var(--color-shadow);
      transform: translate(#{fun.convert-px(3)}, #{fun.convert-px(3)});
      outline: none;
      transition:
        all 0.2s ease-in-out 0s,
        transform 0.3s ease-out 0s;
    }
  }
}
"nx">source ), lookbehind: true, }, operator: /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/, }); Prism.languages.javascript['class-name'][0].pattern = /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/; Prism.languages.insertBefore('javascript', 'keyword', { regex: { pattern: RegExp( // lookbehind // eslint-disable-next-line regexp/no-dupe-characters-character-class /((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source + // Regex pattern: // There are 2 regex patterns here. The RegExp set notation proposal added support for nested character // classes if the `v` flag is present. Unfortunately, nested CCs are both context-free and incompatible // with the only syntax, so we have to define 2 different regex patterns. /\//.source + '(?:' + /(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/ .source + '|' + // `v` flag syntax. This supports 3 levels of nested character classes. /(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/ .source + ')' + // lookahead /(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source ), lookbehind: true, greedy: true, inside: { 'regex-source': { pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/, lookbehind: true, alias: 'language-regex', inside: Prism.languages.regex, }, 'regex-delimiter': /^\/|\/$/, 'regex-flags': /^[a-z]+$/, }, }, // This must be declared before keyword because we use "function" inside the look-forward 'function-variable': { pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/, alias: 'function', }, parameter: [ { pattern: /(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/, lookbehind: true, inside: Prism.languages.javascript, }, { pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i, lookbehind: true, inside: Prism.languages.javascript, }, { pattern: /(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/, lookbehind: true, inside: Prism.languages.javascript, }, { pattern: /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/, lookbehind: true, inside: Prism.languages.javascript, }, ], constant: /\b[A-Z](?:[A-Z_]|\dx?)*\b/, }); Prism.languages.insertBefore('javascript', 'string', { hashbang: { pattern: /^#!.*/, greedy: true, alias: 'comment', }, 'template-string': { pattern: /`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/, greedy: true, inside: { 'template-punctuation': { pattern: /^`|`$/, alias: 'string', }, interpolation: { pattern: /((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/, lookbehind: true, inside: { 'interpolation-punctuation': { pattern: /^\$\{|\}$/, alias: 'punctuation', }, rest: Prism.languages.javascript, }, }, string: /[\s\S]+/, }, }, 'string-property': { pattern: /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m, lookbehind: true, greedy: true, alias: 'property', }, }); Prism.languages.insertBefore('javascript', 'operator', { 'literal-property': { pattern: /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m, lookbehind: true, alias: 'property', }, }); if (Prism.languages.markup) { Prism.languages.markup.tag.addInlined('script', 'javascript'); // add attribute support for all DOM events. // https://developer.mozilla.org/en-US/docs/Web/Events#Standard_events Prism.languages.markup.tag.addAttribute( /on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/ .source, 'javascript' ); } Prism.languages.js = Prism.languages.javascript;