diff options
Diffstat (limited to 'src/scopes/_implicit.scss')
| -rw-r--r-- | src/scopes/_implicit.scss | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss new file mode 100644 index 0000000..9c17868 --- /dev/null +++ b/src/scopes/_implicit.scss | |||
| @@ -0,0 +1,152 @@ | |||
| 1 | @use 'sass:math'; | ||
| 2 | @use 'sass:meta'; | ||
| 3 | @use 'iro-sass/src/iro-sass' as iro; | ||
| 4 | @use '../props'; | ||
| 5 | @use '../vars' as global-vars; | ||
| 6 | |||
| 7 | @forward 'implicit.vars'; | ||
| 8 | @use 'implicit.vars' as vars; | ||
| 9 | |||
| 10 | @mixin styles { | ||
| 11 | @include props.materialize(meta.module-variables('vars')); | ||
| 12 | |||
| 13 | html { | ||
| 14 | accent-color: props.get(global-vars.$theme, --accent, --600); | ||
| 15 | scrollbar-color: props.get(global-vars.$theme, --text-disabled) transparent; | ||
| 16 | } | ||
| 17 | |||
| 18 | html, | ||
| 19 | body { | ||
| 20 | block-size: 100%; | ||
| 21 | } | ||
| 22 | |||
| 23 | body { | ||
| 24 | //@include mx.set-font(--standard, (--size: fn.dim(--font-size --100))); | ||
| 25 | |||
| 26 | padding: 0; | ||
| 27 | margin: 0; | ||
| 28 | color: props.get(global-vars.$theme, --text); | ||
| 29 | background-color: props.get(global-vars.$theme, --bg-base); | ||
| 30 | } | ||
| 31 | |||
| 32 | pre, | ||
| 33 | code { | ||
| 34 | font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; | ||
| 35 | } | ||
| 36 | |||
| 37 | pre, | ||
| 38 | code { | ||
| 39 | //@include mx.set-font(--mono, (--size: .93em)); | ||
| 40 | } | ||
| 41 | |||
| 42 | pre { | ||
| 43 | margin: 0; | ||
| 44 | overflow-x: auto; | ||
| 45 | |||
| 46 | code { | ||
| 47 | font-size: 1em; | ||
| 48 | color: currentColor; | ||
| 49 | } | ||
| 50 | } | ||
| 51 | |||
| 52 | h1, | ||
| 53 | h2, | ||
| 54 | h3, | ||
| 55 | h4, | ||
| 56 | h5, | ||
| 57 | h6 { | ||
| 58 | //@include mx.heading-medium(--md); | ||
| 59 | |||
| 60 | margin-block: props.get(vars.$heading--margin-bs) 0; | ||
| 61 | |||
| 62 | & + & { | ||
| 63 | margin-block-start: props.get(vars.$heading--margin-bs-sibling); | ||
| 64 | } | ||
| 65 | } | ||
| 66 | |||
| 67 | p { | ||
| 68 | margin-block: props.get(vars.$paragraph--margin-bs) 0; | ||
| 69 | |||
| 70 | &:empty { | ||
| 71 | display: none; | ||
| 72 | } | ||
| 73 | } | ||
| 74 | |||
| 75 | strong { | ||
| 76 | font-weight: bold; | ||
| 77 | } | ||
| 78 | |||
| 79 | small { | ||
| 80 | font-size: props.get(global-vars.$font-size--75); | ||
| 81 | } | ||
| 82 | |||
| 83 | ul, | ||
| 84 | ol { | ||
| 85 | padding: 0; | ||
| 86 | margin: 0; | ||
| 87 | list-style: none; | ||
| 88 | } | ||
| 89 | |||
| 90 | li { | ||
| 91 | padding: 0; | ||
| 92 | margin: 0; | ||
| 93 | } | ||
| 94 | |||
| 95 | :focus, | ||
| 96 | :focus-visible { | ||
| 97 | outline: 0; | ||
| 98 | } | ||
| 99 | |||
| 100 | :link, | ||
| 101 | :visited { | ||
| 102 | color: currentColor; | ||
| 103 | text-decoration: none; | ||
| 104 | } | ||
| 105 | |||
| 106 | |||
| 107 | button, | ||
| 108 | input, | ||
| 109 | textarea { | ||
| 110 | box-sizing: content-box; | ||
| 111 | padding: 0; | ||
| 112 | margin: 0; | ||
| 113 | font-family: inherit; | ||
| 114 | font-size: 1em; | ||
| 115 | font-style: inherit; | ||
| 116 | font-weight: inherit; | ||
| 117 | line-height: inherit; | ||
| 118 | color: currentColor; | ||
| 119 | text-align: inherit; | ||
| 120 | text-transform: inherit; | ||
| 121 | appearance: none; | ||
| 122 | background: none; | ||
| 123 | border: 0; | ||
| 124 | |||
| 125 | &::-moz-focus-inner { | ||
| 126 | border: 0; | ||
| 127 | } | ||
| 128 | } | ||
| 129 | |||
| 130 | input, | ||
| 131 | textarea { | ||
| 132 | &::placeholder { | ||
| 133 | color: props.get(global-vars.$theme, --text-mute); | ||
| 134 | opacity: 1; | ||
| 135 | } | ||
| 136 | |||
| 137 | &:disabled { | ||
| 138 | color: props.get(global-vars.$theme, --text-disabled); | ||
| 139 | } | ||
| 140 | } | ||
| 141 | |||
| 142 | textarea { | ||
| 143 | block-size: calc(1em * props.get(global-vars.$font--standard--line-height)); | ||
| 144 | } | ||
| 145 | |||
| 146 | hr { | ||
| 147 | block-size: props.get(global-vars.$border-width--thin); | ||
| 148 | margin: 0; | ||
| 149 | background-color: props.get(global-vars.$theme, --border-color); | ||
| 150 | border: 0; | ||
| 151 | } | ||
| 152 | } | ||
