diff options
author | thingsym <thingsym@gmail.com> | 2020-11-22 10:34:46 +0300 |
---|---|---|
committer | thingsym <thingsym@gmail.com> | 2020-11-22 10:34:46 +0300 |
commit | 7f7d6115716b083c5d6d72b122d6b679987520c3 (patch) | |
tree | 86c9f32bf49a23a18e1585fd58434d66d960b706 /src/scss/foundation/_element.scss | |
parent | 9ca28024bc70ca22e25d888b25e1a5f894c31c02 (diff) |
perf: replace scss from node-sass to dart-sass
Diffstat (limited to 'src/scss/foundation/_element.scss')
-rw-r--r-- | src/scss/foundation/_element.scss | 53 |
1 files changed, 28 insertions, 25 deletions
diff --git a/src/scss/foundation/_element.scss b/src/scss/foundation/_element.scss index 4b5b54c..3444edf 100644 --- a/src/scss/foundation/_element.scss +++ b/src/scss/foundation/_element.scss @@ -1,3 +1,6 @@ +@use '../variable'; +@use '../function/calc-stack'; + /*-----------------------* Element v1.0.0-custom *-----------------------*/ @@ -6,16 +9,16 @@ } :root { - font-size: $default-font-size; - line-height: line-height($default-line-space, $default-font-size); - color: $default-font-color; - font-family: var(--custom-font-family-base, $default-font-family); + font-size: variable.$default-font-size; + line-height: calc-stack.line-height(variable.$default-line-space, variable.$default-font-size); + color: variable.$default-font-color; + font-family: var(--custom-font-family-base, variable.$default-font-family); font-feature-settings : 'pwid'; } body { - background-color: $default-background-color; - margin: $default-layout-margin; + background-color: variable.$default-background-color; + margin: variable.$default-layout-margin; } h1, @@ -24,9 +27,9 @@ h3, h4, h5, h6 { - font-family: var(--custom-font-family-headings, $default-font-family); + font-family: var(--custom-font-family-headings, variable.$default-font-family); font-weight: bold; - line-height: $default-line-height; + line-height: variable.$default-line-height; > small { font-size: 75%; @@ -36,37 +39,37 @@ h6 { h1 { font-size: 240%; - line-height: line-height($default-line-space, 240%); + line-height: calc-stack.line-height(variable.$default-line-space, 240%); } h2 { font-size: 200%; - line-height: line-height($default-line-space, 200%); + line-height: calc-stack.line-height(variable.$default-line-space, 200%); } h3 { font-size: 160%; - line-height: line-height($default-line-space, 160%); + line-height: calc-stack.line-height(variable.$default-line-space, 160%); } h4 { font-size: 140%; - line-height: line-height($default-line-space, 140%); + line-height: calc-stack.line-height(variable.$default-line-space, 140%); } h5 { font-size: 120%; - line-height: line-height($default-line-space, 120%); + line-height: calc-stack.line-height(variable.$default-line-space, 120%); } h6 { font-size: 100%; - line-height: line-height($default-line-space, 100%); + line-height: calc-stack.line-height(variable.$default-line-space, 100%); } a { - color: var(--custom-link-text-color, $default-link-text-color); + color: var(--custom-link-text-color, variable.$default-link-text-color); text-decoration: none; &:focus, &:active, &:hover { - color: var(--custom-link-text-hover-color, $default-link-text-hover-color); + color: var(--custom-link-text-hover-color, variable.$default-link-text-hover-color); text-decoration: underline; } } @@ -78,7 +81,7 @@ hr { } p { - font-size: $default-font-size; + font-size: variable.$default-font-size; } img { @@ -94,13 +97,13 @@ video { table { border-collapse: collapse; - border: 1px solid $default-border-color; + border: 1px solid variable.$default-border-color; width: 100%; } th, td { - border-top: 1px solid $default-border-color; - border-right: 1px solid $default-border-color; + border-top: 1px solid variable.$default-border-color; + border-right: 1px solid variable.$default-border-color; tr:nth-child(even) & { background: #f8f8f8; } @@ -140,9 +143,9 @@ dd { blockquote { color: #999; - padding: $default-layout-padding; + padding: variable.$default-layout-padding; background-color: #f4f4f4; - border-left: 4px solid $default-border-color; + border-left: 4px solid variable.$default-border-color; border-radius: .2rem; } @@ -167,7 +170,7 @@ kbd { pre { background-color: #f4f4f4; - padding: $default-layout-padding; + padding: variable.$default-layout-padding; overflow: auto; white-space: pre-wrap; border-radius: .2rem; @@ -191,6 +194,6 @@ pre { figcaption { color: #333; - font-size: $default-font-size; - line-height: line-height($default-line-space, $default-font-size); + font-size: variable.$default-font-size; + line-height: calc-stack.line-height(variable.$default-line-space, variable.$default-font-size); } |