diff options
Diffstat (limited to 'src_demo')
| -rw-r--r-- | src_demo/_base.scss | 4 | ||||
| -rw-r--r-- | src_demo/components/_box.scss | 19 | ||||
| -rw-r--r-- | src_demo/components/_content.scss | 8 | ||||
| -rw-r--r-- | src_demo/components/_sidebar.scss | 11 | ||||
| -rw-r--r-- | src_demo/components/_view.scss | 11 | ||||
| -rw-r--r-- | src_demo/index.scss | 14 |
6 files changed, 33 insertions, 34 deletions
diff --git a/src_demo/_base.scss b/src_demo/_base.scss index 129b319..67dfa06 100644 --- a/src_demo/_base.scss +++ b/src_demo/_base.scss | |||
| @@ -1,13 +1,13 @@ | |||
| 1 | body { | 1 | body { |
| 2 | display: grid; | 2 | display: grid; |
| 3 | grid-template-columns: auto 1fr; | ||
| 4 | grid-template-areas: 'sidebar content'; | 3 | grid-template-areas: 'sidebar content'; |
| 4 | grid-template-columns: auto 1fr; | ||
| 5 | } | 5 | } |
| 6 | 6 | ||
| 7 | @font-face { | 7 | @font-face { |
| 8 | font-family: 'Garet'; | 8 | font-family: 'Garet'; |
| 9 | font-style: normal; | 9 | font-style: normal; |
| 10 | font-weight: 50 950; | 10 | font-weight: 50 950; |
| 11 | font-display: swap; | ||
| 12 | src: url('/garet.woff2') format('woff2-variations'); | 11 | src: url('/garet.woff2') format('woff2-variations'); |
| 12 | font-display: swap; | ||
| 13 | } | 13 | } |
diff --git a/src_demo/components/_box.scss b/src_demo/components/_box.scss index c746c33..ac217c0 100644 --- a/src_demo/components/_box.scss +++ b/src_demo/components/_box.scss | |||
| @@ -1,16 +1,9 @@ | |||
| 1 | @use 'iro-sass/src/iro-sass' as iro; | 1 | @use 'iro-sass/src/iro-sass' as iro; |
| 2 | @use '../../src/functions' as fn; | 2 | @use '../../src/props'; |
| 3 | @use '../../src/core.vars'; | ||
| 3 | 4 | ||
| 4 | @include iro.props-namespace('box') { | 5 | @include iro.bem-component('box') { |
| 5 | @include iro.props-store(( | 6 | padding: 2em; |
| 6 | --colors: ( | 7 | margin-block: 2em; |
| 7 | --border: fn.global-color(--border), | 8 | border: 1px solid props.get(core.$theme, --border); |
| 8 | ), | ||
| 9 | )); | ||
| 10 | |||
| 11 | @include iro.bem-component(iro.props-namespace()) { | ||
| 12 | margin-block: 2em; | ||
| 13 | padding: 2em; | ||
| 14 | border: 1px solid fn.color(--border); | ||
| 15 | } | ||
| 16 | } | 9 | } |
diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss index 262b116..cd38954 100644 --- a/src_demo/components/_content.scss +++ b/src_demo/components/_content.scss | |||
| @@ -1,8 +1,6 @@ | |||
| 1 | @use 'iro-sass/src/iro-sass' as iro; | 1 | @use 'iro-sass/src/iro-sass' as iro; |
| 2 | 2 | ||
| 3 | @include iro.props-namespace('content') { | 3 | @include iro.bem-component('content') { |
| 4 | @include iro.bem-component(iro.props-namespace()) { | 4 | grid-area: content; |
| 5 | grid-area: content; | 5 | overflow: auto; |
| 6 | overflow: auto; | ||
| 7 | } | ||
| 8 | } | 6 | } |
diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss index b9f8730..4cce9b8 100644 --- a/src_demo/components/_sidebar.scss +++ b/src_demo/components/_sidebar.scss | |||
| @@ -1,10 +1,7 @@ | |||
| 1 | @use 'iro-sass/src/iro-sass' as iro; | 1 | @use 'iro-sass/src/iro-sass' as iro; |
| 2 | @use '../../src/functions' as fn; | ||
| 3 | 2 | ||
| 4 | @include iro.props-namespace('sidebar') { | 3 | @include iro.bem-component('sidebar') { |
| 5 | @include iro.bem-component(iro.props-namespace()) { | 4 | grid-area: sidebar; |
| 6 | grid-area: sidebar; | 5 | min-inline-size: 15em; |
| 7 | min-inline-size: 15em; | 6 | min-block-size: 0; |
| 8 | min-block-size: 0; | ||
| 9 | } | ||
| 10 | } | 7 | } |
diff --git a/src_demo/components/_view.scss b/src_demo/components/_view.scss index c0547d3..9516b12 100644 --- a/src_demo/components/_view.scss +++ b/src_demo/components/_view.scss | |||
| @@ -1,12 +1,9 @@ | |||
| 1 | @use 'iro-sass/src/iro-sass' as iro; | 1 | @use 'iro-sass/src/iro-sass' as iro; |
| 2 | @use '../../src/functions' as fn; | ||
| 3 | 2 | ||
| 4 | @include iro.props-namespace('view') { | 3 | @include iro.bem-component('view') { |
| 5 | @include iro.bem-component(iro.props-namespace()) { | 4 | display: none; |
| 6 | display: none; | ||
| 7 | 5 | ||
| 8 | &:target { | 6 | &:target { |
| 9 | display: block; | 7 | display: block; |
| 10 | } | ||
| 11 | } | 8 | } |
| 12 | } | 9 | } |
diff --git a/src_demo/index.scss b/src_demo/index.scss index 93fa156..7fc1d99 100644 --- a/src_demo/index.scss +++ b/src_demo/index.scss | |||
| @@ -8,6 +8,7 @@ | |||
| 8 | @include iro.s-headings--styles; | 8 | @include iro.s-headings--styles; |
| 9 | @include iro.s-links--styles; | 9 | @include iro.s-links--styles; |
| 10 | @include iro.s-lists--styles; | 10 | @include iro.s-lists--styles; |
| 11 | @include iro.s-tables--styles; | ||
| 11 | 12 | ||
| 12 | @include iro.l-button-group--styles; | 13 | @include iro.l-button-group--styles; |
| 13 | @include iro.l-card-list--styles; | 14 | @include iro.l-card-list--styles; |
| @@ -37,3 +38,16 @@ | |||
| 37 | @include iro.o-radio--styles; | 38 | @include iro.o-radio--styles; |
| 38 | @include iro.o-side-nav--styles; | 39 | @include iro.o-side-nav--styles; |
| 39 | @include iro.o-status-indicator--styles; | 40 | @include iro.o-status-indicator--styles; |
| 41 | @include iro.o-switch--styles; | ||
| 42 | @include iro.o-table--styles; | ||
| 43 | @include iro.o-text-field--styles; | ||
| 44 | |||
| 45 | @include iro.utils--styles; | ||
| 46 | |||
| 47 | @include iro.themes--styles; | ||
| 48 | |||
| 49 | @import 'base'; | ||
| 50 | @import 'components/box'; | ||
| 51 | @import 'components/content'; | ||
| 52 | @import 'components/sidebar'; | ||
| 53 | @import 'components/view'; | ||
