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