From e4255279ff72e5438d297888d808851cdf2178ed Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 26 Mar 2022 14:40:11 +0100 Subject: Lots of updates, especially dialog --- package.json | 4 +- src/_apply-vars.scss | 16 ++++- src/_config.scss | 2 +- src/_declare-vars.scss | 20 ++++-- src/_objects.scss | 4 +- src/layouts/_button-group.scss | 2 +- src/objects/_action-button.scss | 69 +++----------------- src/objects/_action-menu.scss | 3 +- src/objects/_dialog.scss | 83 +++++++++++------------- src/objects/_divider.scss | 131 ++++++++++++++++++++++++++++++++++++++ src/objects/_header.scss | 31 +++++++++ src/objects/_heading.scss | 17 +++-- src/objects/_lightbox.scss | 2 + src/objects/_list-group.scss | 2 +- src/objects/_rule.scss | 131 -------------------------------------- src/objects/_sidebar.scss | 36 +++++++++++ src/objects/_table.scss | 2 +- src/objects/_text-field.scss | 36 ++++++++--- src_demo/components/_content.scss | 1 + src_demo/components/_sidebar.scss | 25 +------- tpl/index.pug | 16 +++-- tpl/objects/action-button.pug | 2 +- tpl/objects/dialog.pug | 29 +++++---- tpl/objects/divider.pug | 12 ++++ tpl/objects/header.pug | 12 ++++ tpl/objects/list-group.pug | 4 +- tpl/objects/rule.pug | 12 ---- tpl/objects/sidebar.pug | 12 ++++ tpl/objects/text-field.pug | 32 ++++++---- tpl/views/dialog.pug | 34 +++++++++- tpl/views/divider.pug | 21 ++++++ tpl/views/list-group.pug | 8 +-- tpl/views/rule.pug | 21 ------ tpl/views/text-field.pug | 5 +- yarn.lock | 46 ++++++++----- 35 files changed, 504 insertions(+), 379 deletions(-) create mode 100644 src/objects/_divider.scss create mode 100644 src/objects/_header.scss delete mode 100644 src/objects/_rule.scss create mode 100644 src/objects/_sidebar.scss create mode 100644 tpl/objects/divider.pug create mode 100644 tpl/objects/header.pug delete mode 100644 tpl/objects/rule.pug create mode 100644 tpl/objects/sidebar.pug create mode 100644 tpl/views/divider.pug delete mode 100644 tpl/views/rule.pug diff --git a/package.json b/package.json index 6047b47..122839c 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,8 @@ "postcss-scss": "^4.0.3", "pug": "^3.0.0", "pug-cli": "^1.0.0-alpha6", - "sass": "^1.49.8", - "stylelint": "^14.5.1", + "sass": "^1.49.9", + "stylelint": "^14.6.1", "stylelint-config-sass-guidelines": "^9.0.1", "svg-sprite": "^1.5.4" } diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss index 66ad9b7..9639a97 100644 --- a/src/_apply-vars.scss +++ b/src/_apply-vars.scss @@ -19,6 +19,12 @@ } } +@include iro.bem-theme('dark') { + @include iro.props-assign('colors'); + @include iro.props-assign('colors-dark'); + @include iro.props-assign('palette-dark'); +} + @include iro.bem-theme('raised') { @include iro.props-assign('colors'); @include iro.props-assign('palette-light-raised'); @@ -29,8 +35,12 @@ } } -@include iro.bem-theme('dark') { +@include iro.bem-theme('lowered') { @include iro.props-assign('colors'); - @include iro.props-assign('colors-dark'); - @include iro.props-assign('palette-dark'); + @include iro.props-assign('palette-light-lowered'); + + @media (prefers-color-scheme: dark) { + @include iro.props-assign('colors-dark'); + @include iro.props-assign('palette-dark-lowered'); + } } diff --git a/src/_config.scss b/src/_config.scss index cdbd02c..68df69f 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -21,7 +21,7 @@ $wanted-grays: ( --3: 1, --4: 1.15, - --5: 1.3, + --5: 1.35, --6: 1.7, --7: 2.4, diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 998608a..0bcf101 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -115,7 +115,7 @@ --fg: fn.color(--gray --10, null), // Text --fg-lo: fn.color(--gray --11, null), // Strong text - --gray: ( --h: 220, --s: 5% ), + --gray: ( --h: 220, --s: 0% ), --blue: fn.color-palette(blend.lch(48% 50 279)), --purple: fn.color-palette(blend.lch(48% 50 308)), --red: fn.color-palette(blend.lch(48% 50 23)), @@ -140,7 +140,7 @@ --focus: ( --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null), --fill: fn.color(--accent --primary --bg, null), - --text: fn.color(--accent --primary --lo, null), + --text: fn.color(--accent --primary --obj, null), --fill-text: fn.color(--accent --primary --fg, null), ), ), @@ -148,7 +148,7 @@ @include iro.props-store(( --colors: ( - --gray: fn.gray-palette(94%), + --gray: fn.gray-palette(96%), ), ), 'palette-light'); @@ -158,6 +158,12 @@ ), ), 'palette-light-raised'); +@include iro.props-store(( + --colors: ( + --gray: fn.gray-palette(91%), + ), +), 'palette-light-lowered'); + // @include iro.props-store(( @@ -187,10 +193,16 @@ @include iro.props-store(( --colors: ( - --gray: fn.gray-palette(16%), + --gray: fn.gray-palette(13%), ), ), 'palette-dark-raised'); +@include iro.props-store(( + --colors: ( + --gray: fn.gray-palette(5%), + ), +), 'palette-dark-lowered'); + // @each $breakpoint in map-keys(media.$breakpoints) { diff --git a/src/_objects.scss b/src/_objects.scss index 070e281..d01ed54 100644 --- a/src/_objects.scss +++ b/src/_objects.scss @@ -1,6 +1,6 @@ @use 'objects/icon'; @use 'objects/heading'; -@use 'objects/rule'; +@use 'objects/divider'; @use 'objects/badge'; @use 'objects/button'; @use 'objects/text-field'; @@ -11,6 +11,8 @@ @use 'objects/action-button'; @use 'objects/status-indicator'; @use 'objects/avatar'; +@use 'objects/header'; +@use 'objects/sidebar'; @use 'objects/action-menu'; @use 'objects/menu'; @use 'objects/backdrop'; diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss index 17de1e1..2917776 100644 --- a/src/layouts/_button-group.scss +++ b/src/layouts/_button-group.scss @@ -4,7 +4,7 @@ @include iro.props-namespace('button-group') { @include iro.props-store(( --dims: ( - --spacing: iro.fn-px-to-rem(16px), + --spacing: fn.global-dim(--size --150), ), ), 'dims'); diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 83321da..2dcbb12 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -15,44 +15,33 @@ --bg: fn.global-color(--bg-hi), --label: fn.global-color(--fg), --border: fn.global-color(--obj-lo), - --shadow: 0 0 0 0 transparent, --hover: ( --bg: fn.global-color(--bg-hi2), --label: fn.global-color(--fg-lo), --border: fn.global-color(--fg-hi2), - --shadow: 0 0 0 0 transparent, ), --active: ( --bg: fn.global-color(--obj-hi), --label: fn.global-color(--fg-lo), --border: fn.global-color(--fg-hi2), - --shadow: 0 0 0 0 transparent, ), --selected: ( --bg: fn.global-color(--obj-hi), --label: fn.global-color(--fg), --border: fn.global-color(--fg-hi3), - --shadow: 0 0 0 0 transparent, --hover: ( --label: fn.global-color(--fg-lo), --border: fn.global-color(--fg-hi2), - --shadow: 0 0 0 0 transparent, - ), - --key-focus: ( - --bg: fn.global-color(--obj-hi), ), ), --disabled: ( --bg: fn.global-color(--obj-hi), --label: fn.global-color(--fg-hi3), --border: fn.global-color(--obj-hi), - --shadow: 0 0 0 0 transparent, ), --key-focus: ( - --bg: fn.global-color(--bg-hi2), - --label: fn.global-color(--fg-lo), --border: fn.global-color(--focus --fill), --shadow: fn.global-color(--focus --shadow), ), @@ -74,19 +63,10 @@ --hover: ( --label: fn.global-color(--fg-lo), ), - --key-focus: ( - --bg: fn.global-color(--obj), - ), ), --disabled: ( --label: fn.global-color(--fg-hi3), ), - --key-focus: ( - --bg: fn.global-color(--bg-hi2), - --label: fn.global-color(--fg-lo), - --border: fn.global-color(--focus --fill), - --shadow: fn.global-color(--focus --shadow), - ), ), ), ), 'colors'); @@ -98,7 +78,6 @@ border: 1px solid fn.color(--disabled --border); border-radius: fn.dim(--rounding); background-color: fn.color(--disabled --bg); - box-shadow: fn.color(--disabled --shadow); color: fn.color(--disabled --label); line-height: 1; text-align: center; @@ -111,59 +90,36 @@ &:enabled { border-color: fn.color(--border); background-color: fn.color(--bg); - box-shadow: fn.color(--shadow); color: fn.color(--label); &:hover { border-color: fn.color(--hover --border); background-color: fn.color(--hover --bg); - box-shadow: fn.color(--hover --shadow); color: fn.color(--hover --label); } &:active { border-color: fn.color(--active --border); background-color: fn.color(--active --bg); - box-shadow: fn.color(--active --shadow); color: fn.color(--active --label); } } - @include iro.bem-at-theme('keyboard') { - &:focus { - border-color: fn.color(--key-focus --border); - background-color: fn.color(--key-focus --bg); - box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); - color: fn.color(--key-focus --label); - } - } - @include iro.bem-is('selected') { &:link, &:visited, &:enabled { border-color: fn.color(--selected --border); background-color: fn.color(--selected --bg); - box-shadow: fn.color(--selected --shadow); color: fn.color(--selected --label); &:hover, &:active { border-color: fn.color(--selected --hover --border); background-color: fn.color(--selected --bg); - box-shadow: fn.color(--selected --hover --shadow); color: fn.color(--selected --hover --label); } } - - @include iro.bem-at-theme('keyboard') { - &:focus { - border-color: fn.color(--key-focus --border); - background-color: fn.color(--selected --key-focus --bg); - box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); - color: fn.color(--key-focus --label); - } - } } @include iro.bem-modifier('quiet') { @@ -195,15 +151,6 @@ } } - @include iro.bem-at-theme('keyboard') { - &:focus { - border-color: fn.color(--quiet --key-focus --border); - background-color: fn.color(--quiet --key-focus --bg); - box-shadow: inset 0 0 0 1px fn.color(--quiet --key-focus --border), fn.color(--quiet --key-focus --shadow); - color: fn.color(--quiet --key-focus --label); - } - } - @include iro.bem-is('selected') { background-color: fn.color(--quiet --selected --bg); color: fn.color(--quiet --disabled --label); @@ -224,14 +171,16 @@ color: fn.color(--quiet --selected --hover --label); } } + } + } - @include iro.bem-at-theme('keyboard') { - &:focus { - border-color: fn.color(--quiet --key-focus --border); - background-color: fn.color(--quiet --selected --key-focus --bg); - box-shadow: inset 0 0 0 1px fn.color(--quiet --key-focus --border), fn.color(--quiet --key-focus --shadow); - color: fn.color(--quiet --key-focus --label); - } + @include iro.bem-at-theme('keyboard') { + &:link, + &:visited, + &:enabled { + &:focus { + border-color: fn.color(--key-focus --border); + box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); } } } diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index 89c4b3c..88e84d6 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss @@ -19,7 +19,7 @@ @include iro.props-store(( --colors: ( --shadow: 0 .2em .5em rgba(#000, .1), - --border: fn.global-color(--obj-lo), + --border: rgba(#000, .2), --separator: fn.global-color(--obj), --icon: fn.global-color(--fg-hi), --item: ( @@ -43,6 +43,7 @@ @include iro.props-store(( --colors: ( --shadow: 0 .2em .5em rgba(#000, .5), + --border: rgba(#fff, .2), ), ), 'colors-dark'); diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index 54e9c59..f6e8e63 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss @@ -1,18 +1,20 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; +@use 'header'; + @include iro.props-namespace('dialog') { @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --300), - --pad-y: fn.global-dim(--size --300), --width-sm: iro.fn-px-to-rem(500px), --width-md: iro.fn-px-to-rem(800px), --width-lg: iro.fn-px-to-rem(1100px), --rounding: 3px, - --sidebar: ( - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --300), + --border: 1px, + + --body: ( + --pad-x: fn.global-dim(--size --200), + --pad-y: fn.global-dim(--size --200), ) ), ), 'dims'); @@ -26,20 +28,18 @@ @include iro.props-store(( --colors: ( + --border: rgba(#000, .05), --shadow: 0 .2em .5em rgba(#000, .2), + --sidebar: ( - --bg: fn.global-color(--bg), --border: fn.global-color(--obj), - ) + ), ), ), 'colors'); @include iro.props-store(( --colors: ( - --sidebar: ( - --bg: fn.global-color(--bg-hi2), - --border: fn.global-color(--bg-hi2), - ), + --border: rgba(#fff, .2), ), ), 'colors-dark'); @@ -48,9 +48,9 @@ grid-template-rows: auto 1fr auto; grid-template-columns: auto 1fr; grid-template-areas: - 'sidebar header' - 'sidebar body' - 'sidebar footer'; + 'sidebar-header header' + 'sidebar body' + 'sidebar footer'; position: relative; box-sizing: border-box; width: 100%; @@ -59,7 +59,7 @@ overflow: hidden; border-radius: fn.dim(--rounding); background-color: fn.global-color(--bg); - box-shadow: fn.color(--shadow); + box-shadow: 0 0 0 1px fn.color(--border), fn.color(--shadow); color: fn.global-color(--fg); @include iro.bem-modifier('sm') { @@ -70,52 +70,41 @@ max-width: fn.dim(--width-lg); } - @include iro.bem-elem('sidebar') { - grid-area: sidebar; - padding: fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x); - border-right: 1px solid fn.color(--sidebar --border); - background-color: fn.color(--sidebar --bg); + @include iro.bem-elem('sidebar-header') { + grid-area: sidebar-header; + border-right: 1px solid fn.color(--sidebar --border); + + @include iro.bem-sibling-elem('header') { + grid-area: header; + } } @include iro.bem-elem('header') { - grid-area: header; - margin: fn.dim(--pad-y) fn.dim(--pad-x) 0; + grid-area: sidebar-header / sidebar-header / header / header; + } - @include iro.bem-sibling-elem('body') { - &::before { - display: none; - } - } + @include iro.bem-elem('close-btn') { + margin-left: auto; } - @include iro.bem-elem('body') { - grid-area: body; - min-height: 0; - margin: fn.dim(--pad-y) fn.dim(--pad-x); + @include iro.bem-elem('label') { + padding: 0 calc(fn.dim(--body --pad-x) - fn.foreign-dim(--header, --pad-x)); + } - &::before { - content: ''; - width: fn.global-dim(--size --500); - height: fn.global-dim(--size --500); - float: right; - } + @include iro.bem-elem('sidebar') { + grid-area: sidebar; } - @include iro.bem-elem('close-btn') { - position: absolute; - top: fn.global-dim(--size --150); - right: fn.global-dim(--size --150); - font-size: fn.global-dim(--font-size --150); + @include iro.bem-elem('body') { + grid-area: body; + min-height: 0; + padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); } @include iro.bem-elem('footer') { grid-area: footer; justify-content: flex-end; - margin: 0 fn.dim(--pad-x) fn.dim(--pad-y); - } - - @include iro.bem-elem('title') { - margin-top: 0; + padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); } } } diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss new file mode 100644 index 0000000..cef598f --- /dev/null +++ b/src/objects/_divider.scss @@ -0,0 +1,131 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('divider') { + @include iro.props-store(( + --dims: ( + --margin-y: fn.global-dim(--size --85), + + --strong: ( + --border-width: fn.global-dim(--border-width --thick), + --label-font-size: fn.global-dim(--font-size --100), + ), + --medium: ( + --border-width: fn.global-dim(--border-width --medium), + --label-font-size: fn.global-dim(--font-size --75), + ), + --faint: ( + --border-width: fn.global-dim(--border-width --thin), + --label-font-size: fn.global-dim(--font-size --50), + ), + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --strong: ( + --bg: fn.global-color(--fg), + --label: fn.global-color(--fg), + ), + --medium: ( + --bg: fn.global-color(--obj), + --label: fn.global-color(--fg-hi), + ), + --faint: ( + --bg: fn.global-color(--obj), + --label: fn.global-color(--fg-hi2), + ), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + display: block; + height: fn.dim(--strong --border-width); + margin-top: fn.dim(--margin-y); + margin-bottom: fn.dim(--margin-y); + background-color: fn.color(--strong --bg); + + @include iro.bem-modifier('vertical') { + align-self: stretch; + width: 1px; + height: auto; + margin-top: 0; + margin-bottom: 0; + background-color: fn.color(--faint --bg); + } + + @include iro.bem-modifier('medium') { + height: fn.dim(--medium --border-width); + background-color: fn.color(--medium --bg); + } + + @include iro.bem-modifier('faint') { + height: fn.dim(--faint --border-width); + background-color: fn.color(--faint --bg); + } + + @include iro.bem-modifier('labelled') { + display: flex; + flex-direction: row; + align-items: center; + height: auto; + border-radius: 0; + background-color: transparent; + + &::before, + &::after { + content: ''; + display: block; + flex: 1 1 auto; + width: 100%; + height: 3px; + background-color: fn.color(--strong --bg); + } + + &::before { + margin-right: 1em; + } + + &::after { + margin-left: 1em; + } + + @include iro.bem-elem('label') { + flex: 0 0 auto; + color: fn.color(--strong --label); + font-size: fn.dim(--strong --label-font-size); + font-weight: 700; + letter-spacing: .5px; + text-transform: uppercase; + } + + @include iro.bem-modifier('medium') { + &::before, + &::after { + height: 2px; + background-color: fn.color(--medium --bg); + } + + @include iro.bem-elem('label') { + color: fn.color(--medium --label); + font-size: fn.dim(--medium --label-font-size); + font-weight: 500; + } + } + + @include iro.bem-modifier('faint') { + &::before, + &::after { + height: 1px; + background-color: fn.color(--faint --bg); + } + + @include iro.bem-elem('label') { + color: fn.color(--faint --label); + font-size: fn.dim(--faint --label-font-size); + font-weight: 500; + } + } + } + } +} diff --git a/src/objects/_header.scss b/src/objects/_header.scss new file mode 100644 index 0000000..773d584 --- /dev/null +++ b/src/objects/_header.scss @@ -0,0 +1,31 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('header') { + @include iro.props-store(( + --dims: ( + --pad-x: fn.global-dim(--size --75), + --pad-y: fn.global-dim(--size --75) + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --border: fn.global-color(--obj), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + border-bottom: 1px solid fn.color(--border); + + @include iro.bem-elem('content') { + display: flex; + box-sizing: border-box; + align-items: center; + height: 100%; + padding: fn.dim(--pad-y) fn.dim(--pad-x); + background-color: fn.global-color(--bg); + color: fn.global-color(--fg); + } + } +} diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 48088ba..3c14c99 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -23,12 +23,15 @@ @include iro.bem-object(iro.props-namespace()) { @include mx.set-font(--headline); - display: block; - margin-top: fn.dim(--in-page-margin --top); - margin-bottom: 0; + display: block; - & + & { - margin-top: fn.dim(--in-page-margin --top-sibling); + @include iro.bem-at-theme('typography') { + margin-top: fn.dim(--in-page-margin --top); + margin-bottom: 0; + + & + & { + margin-top: fn.dim(--in-page-margin --top-sibling); + } } @include iro.bem-modifier('xxl') { @@ -54,8 +57,8 @@ @include iro.bem-modifier('sm') { @include mx.set-font(--standard, ( --line-height: null, - --size: fn.global-dim(--font-size --100), - --weight: 500 + --size: fn.global-dim(--font-size --100), + --weight: 700 )); color: fn.color(--strong); diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index f3addf7..435ff88 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -1,6 +1,8 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; +@use 'action-button'; + @include iro.props-namespace('lightbox') { @include iro.props-store(( --dims: ( diff --git a/src/objects/_list-group.scss b/src/objects/_list-group.scss index 521bc19..1093ad8 100644 --- a/src/objects/_list-group.scss +++ b/src/objects/_list-group.scss @@ -31,7 +31,7 @@ border-top: 1px solid fn.color(--border); } - @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'action') { + @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { &:hover { background-color: fn.color(--hover); } diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss deleted file mode 100644 index ba09414..0000000 --- a/src/objects/_rule.scss +++ /dev/null @@ -1,131 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('rule') { - @include iro.props-store(( - --dims: ( - --margin-y: fn.global-dim(--size --85), - - --strong: ( - --border-width: fn.global-dim(--border-width --thick), - --label-font-size: fn.global-dim(--font-size --100), - ), - --medium: ( - --border-width: fn.global-dim(--border-width --medium), - --label-font-size: fn.global-dim(--font-size --75), - ), - --faint: ( - --border-width: fn.global-dim(--border-width --thin), - --label-font-size: fn.global-dim(--font-size --50), - ), - ), - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --strong: ( - --bg: fn.global-color(--fg), - --label: fn.global-color(--fg), - ), - --medium: ( - --bg: fn.global-color(--obj), - --label: fn.global-color(--fg-hi), - ), - --faint: ( - --bg: fn.global-color(--obj), - --label: fn.global-color(--fg-hi2), - ), - ), - ), 'colors'); - - @include iro.bem-object(iro.props-namespace()) { - display: block; - height: fn.dim(--strong --border-width); - margin-top: fn.dim(--margin-y); - margin-bottom: fn.dim(--margin-y); - background-color: fn.color(--strong --bg); - - @include iro.bem-modifier('vertical') { - align-self: stretch; - width: 1px; - height: auto; - margin-top: 0; - margin-bottom: 0; - background-color: fn.color(--faint --bg); - } - - @include iro.bem-modifier('medium') { - height: fn.dim(--medium --border-width); - background-color: fn.color(--medium --bg); - } - - @include iro.bem-modifier('faint') { - height: fn.dim(--faint --border-width); - background-color: fn.color(--faint --bg); - } - - @include iro.bem-modifier('labelled') { - display: flex; - flex-direction: row; - align-items: center; - height: auto; - border-radius: 0; - background-color: transparent; - - &::before, - &::after { - content: ''; - display: block; - flex: 1 1 auto; - width: 100%; - height: 3px; - background-color: fn.color(--strong --bg); - } - - &::before { - margin-right: 1em; - } - - &::after { - margin-left: 1em; - } - - @include iro.bem-elem('label') { - flex: 0 0 auto; - color: fn.color(--strong --label); - font-size: fn.dim(--strong --label-font-size); - font-weight: 700; - letter-spacing: .5px; - text-transform: uppercase; - } - - @include iro.bem-modifier('medium') { - &::before, - &::after { - height: 2px; - background-color: fn.color(--medium --bg); - } - - @include iro.bem-elem('label') { - color: fn.color(--medium --label); - font-size: fn.dim(--medium --label-font-size); - font-weight: 500; - } - } - - @include iro.bem-modifier('faint') { - &::before, - &::after { - height: 1px; - background-color: fn.color(--faint --bg); - } - - @include iro.bem-elem('label') { - color: fn.color(--faint --label); - font-size: fn.dim(--faint --label-font-size); - font-weight: 500; - } - } - } - } -} diff --git a/src/objects/_sidebar.scss b/src/objects/_sidebar.scss new file mode 100644 index 0000000..bf8dd59 --- /dev/null +++ b/src/objects/_sidebar.scss @@ -0,0 +1,36 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('sidebar') { + @include iro.props-store(( + --dims: ( + --pad-x: fn.global-dim(--size --75), + --pad-y: fn.global-dim(--size --75) + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --border: fn.global-color(--obj), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + border-width: 0 1px 0 0; + border-style: solid; + border-color: fn.color(--border); + + @include iro.bem-elem('content') { + box-sizing: border-box; + height: 100%; + padding: fn.dim(--pad-y) fn.dim(--pad-x); + background-color: fn.global-color(--bg); + color: fn.global-color(--fg); + } + + @include iro.bem-modifier('right') { + border-right-width: 0; + border-left-width: 1px; + } + } +} diff --git a/src/objects/_table.scss b/src/objects/_table.scss index 410492b..1365d05 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss @@ -5,7 +5,7 @@ @include iro.props-namespace('table') { @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --200), + --pad-x: fn.global-dim(--size --175), --pad-y: fn.global-dim(--size --125), --rounding: 3px, --50: ( diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index e9330ce..1e18f0a 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -37,6 +37,11 @@ --border-width: fn.global-dim(--border-width --thin), --border-radius: 2px, + --extended: ( + --pad: fn.global-dim(--size --50), + --border-radius: 6px, + ), + --focus: ( --border-width: fn.global-dim(--border-width --medium), ) @@ -87,7 +92,8 @@ ), 'colors'); @include iro.bem-object(iro.props-namespace()) { - $line-height: 1.4; + $line-height: 1.4; + $focus-border-offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width)); position: relative; min-width: 0; @@ -133,14 +139,12 @@ outline: 0; @include iro.bem-sibling-elem('bg') { - $offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width)); - - top: $offset; - right: $offset; - bottom: $offset; - left: $offset; + top: $focus-border-offset; + right: $focus-border-offset; + bottom: $focus-border-offset; + left: $focus-border-offset; border: fn.dim(--focus --border-width) solid fn.color(--focus --border); - border-radius: calc(fn.dim(--border-radius) - $offset); + border-radius: calc(fn.dim(--border-radius) - $focus-border-offset); box-shadow: fn.color(--focus --shadow); } } @@ -150,6 +154,22 @@ } } + @include iro.bem-modifier('extended') { + padding: fn.dim(--extended --pad); + + @include iro.bem-multi('&', 'elem' 'bg') { + border-radius: calc(fn.dim(--border-radius) + fn.dim(--extended --pad)); + } + + @include iro.bem-elem('native') { + &:focus { + @include iro.bem-sibling-elem('bg') { + border-radius: calc(fn.dim(--extended --border-radius) - $focus-border-offset); + } + } + } + } + @include iro.bem-is('invalid') { @include iro.bem-elem('native') { @include invalid; diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss index 6045e4b..2f9a2d0 100644 --- a/src_demo/components/_content.scss +++ b/src_demo/components/_content.scss @@ -3,5 +3,6 @@ @include iro.props-namespace('content') { @include iro.bem-component(iro.props-namespace()) { grid-area: content; + overflow: auto; } } diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss index 9cff3c8..6b7eaf0 100644 --- a/src_demo/components/_sidebar.scss +++ b/src_demo/components/_sidebar.scss @@ -2,28 +2,9 @@ @use '../../src/functions' as fn; @include iro.props-namespace('sidebar') { - @include iro.props-store(( - --colors: ( - --bg: fn.global-color(--bg), - --border: fn.global-color(--obj), - --icon: fn.global-color(--fg-hi), - --group-header-fg: fn.global-color(--fg-hi), - ), - ), 'colors'); - - @include iro.props-store(( - --colors: ( - --bg: fn.global-color(--bg-hi), - --border: fn.global-color(--bg-hi), - ), - ), 'colors-dark'); - @include iro.bem-component(iro.props-namespace()) { - grid-area: sidebar; - min-width: 10em; - padding: .6em; - overflow: auto; - border-right: 1px solid fn.color(--border); - background-color: fn.color(--bg); + grid-area: sidebar; + min-width: 15em; + min-height: 0; } } diff --git a/tpl/index.pug b/tpl/index.pug index 400ec64..14bfa10 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -7,7 +7,7 @@ include layouts/container.pug include objects/heading.pug -include objects/rule.pug +include objects/divider.pug include objects/badge.pug include objects/button.pug include objects/text-field.pug @@ -27,14 +27,16 @@ include objects/lightbox.pug include objects/list-group.pug include objects/table.pug include objects/alert.pug +include objects/header.pug +include objects/sidebar.pug mixin view(id, title) - views.push({ id, title }); - +container(padX=true padY=true narrow=true)(class='c-view' id=id) + +container(padX=true padY=true narrow=true class='c-view' id=id) +h1-heading('xl')= title - +rule('medium') + +divider('medium') block mixin user-card(name, hue) @@ -47,7 +49,7 @@ mixin user-card(name, hue) = name include views/heading.pug -include views/rule.pug +include views/divider.pug include views/colored-links.pug include views/badge.pug include views/button.pug @@ -80,9 +82,9 @@ html script(src="script.js") body - .c-content + .c-content.l-overflow +view-heading - +view-rule + +view-divider +view-colored-links +view-badge +view-button @@ -104,7 +106,7 @@ html +view-table +view-alert - .c-sidebar + +sidebar(class='c-sidebar') +menu each view in views +menu-item(tag='a' href='#' + view.id)= view.title diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug index 0467bd7..f99d789 100644 --- a/tpl/objects/action-button.pug +++ b/tpl/objects/action-button.pug @@ -4,7 +4,7 @@ mixin action-button - let classes = { 'o-action-button': true, - 'o-action-button--block': attributes.block, + 'u-d-block': attributes.block, 'o-action-button--quiet': attributes.quiet, 'o-action-button--round': attributes.round, 'is-selected': attributes.selected diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug index 2823e41..2474cc3 100644 --- a/tpl/objects/dialog.pug +++ b/tpl/objects/dialog.pug @@ -1,7 +1,6 @@ -include rule.pug -include button.pug include heading.pug -include action-button.pug +include header.pug +include sidebar.pug mixin dialog(title) - const slots = {} @@ -13,9 +12,7 @@ mixin dialog(title) block ? block() : undefined let classes = { - 'o-dialog': true, - 't-raised': true, - 'o-dialog--split': !!slots.sidebar, + 'o-dialog': true, } let bodyClass = { @@ -26,16 +23,26 @@ mixin dialog(title) } div(class=classes) + if slots['sidebar-header'] + +header(class='o-dialog__sidebar-header') + - slots['sidebar-header']() + if slots.sidebar - .o-dialog__sidebar + +sidebar(class='o-dialog__sidebar') - slots.sidebar() - header.o-dialog__header - +div-heading('md')(class='o-dialog__title') - = title - +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn') + + +header(class='o-dialog__header') + if slots.header + - slots.header() + else + if title + +div-heading('sm')(class='o-dialog__label')= title + +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn') + section(class=bodyClass) if slots.body - slots.body() + footer.o-dialog__footer.l-button-group +a-button(outline=true)= 'Cancel' = ' ' diff --git a/tpl/objects/divider.pug b/tpl/objects/divider.pug new file mode 100644 index 0000000..094df07 --- /dev/null +++ b/tpl/objects/divider.pug @@ -0,0 +1,12 @@ +mixin divider(level) + - + let classes = { + 'o-divider': true, + 'o-divider--labelled': !!block, + ['o-divider--' + level]: true + } + + div(class=classes)&attributes(attributes) + if block + .o-divider__label + block diff --git a/tpl/objects/header.pug b/tpl/objects/header.pug new file mode 100644 index 0000000..4518afc --- /dev/null +++ b/tpl/objects/header.pug @@ -0,0 +1,12 @@ +mixin header + - + let classes = { + 'o-header': true + } + if (attributes.class) { + classes[attributes.class] = true; + } + + header(class=classes) + .o-header__content.t-lowered + block diff --git a/tpl/objects/list-group.pug b/tpl/objects/list-group.pug index 36be264..ad3c212 100644 --- a/tpl/objects/list-group.pug +++ b/tpl/objects/list-group.pug @@ -5,8 +5,8 @@ mixin list-group mixin list-group-item - let classes = { - 'o-list-group__item': true, - 'o-list-group__item--action': attributes.action, + 'o-list-group__item': true, + 'o-list-group__item--interactive': attributes.interactive, } div(class=classes) diff --git a/tpl/objects/rule.pug b/tpl/objects/rule.pug deleted file mode 100644 index b2f3a38..0000000 --- a/tpl/objects/rule.pug +++ /dev/null @@ -1,12 +0,0 @@ -mixin rule(level) - - - let classes = { - 'o-rule': true, - 'o-rule--labelled': !!block, - ['o-rule--' + level]: true - } - - div(class=classes)&attributes(attributes) - if block - .o-rule__label - block diff --git a/tpl/objects/sidebar.pug b/tpl/objects/sidebar.pug new file mode 100644 index 0000000..caa0f1f --- /dev/null +++ b/tpl/objects/sidebar.pug @@ -0,0 +1,12 @@ +mixin sidebar + - + let classes = { + 'o-sidebar': true + } + if (attributes.class) { + classes[attributes.class] = true; + } + + aside(class=classes) + .o-sidebar__content.l-overflow + block diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug index cbdb8c4..673aa27 100644 --- a/tpl/objects/text-field.pug +++ b/tpl/objects/text-field.pug @@ -10,23 +10,33 @@ mixin text-field block ? block() : undefined let classes = { - 'o-text-field': true, - 'o-text-field--ext': attributes.ext, - 'is-invalid': attributes.invalid, - 'is-disabled': attributes.disabled, - 'l-card': !!block, - 'l-card--flush': !!block, - 'l-card--gapless': !!block + 'o-text-field': true, + 'o-text-field--extended': !!block, + 'is-invalid': attributes.invalid, + 'is-disabled': attributes.disabled, + 'l-card': !!block, + 'l-card--flush': !!block, + 'l-card--gapless': !!block + } + if (attributes.class) { + classes[attributes.class] = true; + } + + const attr = { + placeholder: attributes.placeholder, + disabled: attributes.disabled } div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) if !!block if slots.pre - - slots.pre() - input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes) + .u-d-contents.t-raised + - slots.pre() + input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr) if slots.post - - slots.post() + .u-d-contents.t-raised + - slots.post() .o-text-field__bg else - input.o-text-field__native&attributes(attributes) + input.o-text-field__native&attributes(attr) .o-text-field__bg diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug index 6aaead5..0b6f8e7 100644 --- a/tpl/views/dialog.pug +++ b/tpl/views/dialog.pug @@ -18,10 +18,40 @@ mixin view-dialog .c-box +backdrop - +dialog('Lorem ipsum')(noRule=true) + +dialog('Tags') + +slot('sidebar-header') + +div-heading('sm')(class='o-dialog__label')= '#channel' + +slot('sidebar') + +menu(style={ 'min-width': '10em' }) + +menu-item(icon='bookmark')= 'Bookmark' + +menu-item(icon='tags', selected=true)= 'Tags' + +menu-item(icon='hash')= 'achannel' + +slot('body') + p.u-mt-0= loremIpsum + + .c-box + +backdrop + +dialog('#channel') + +slot('sidebar') + +menu(style={ 'min-width': '10em' }) + +menu-item(icon='bookmark')= 'Bookmark' + +menu-item(icon='tags', selected=true)= 'Tags' + +menu-item(icon='hash')= 'achannel' + +slot('body') + p.u-mt-0= loremIpsum + + .c-box + +backdrop + +dialog + +slot('header') + .l-card.l-card--flush + .l-card__block.l-flex + +action-button(quiet=true icon='chevron-left') + +action-button(quiet=true icon='chevron-right') + .l-card__block.l-card__block--main + +div-heading('sm')= 'Tags' +slot('sidebar') +menu(style={ 'min-width': '10em' }) - +menu-header= '#channel' +menu-item(icon='bookmark')= 'Bookmark' +menu-item(icon='tags', selected=true)= 'Tags' +menu-item(icon='hash')= 'achannel' diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug new file mode 100644 index 0000000..8c3ec0c --- /dev/null +++ b/tpl/views/divider.pug @@ -0,0 +1,21 @@ +mixin view-divider + +view('divider', 'Divider') + .c-box + +div-heading('lg')= 'Heading' + +divider('strong') + p= loremIpsum + + .c-box + +div-heading('sm')= 'Heading' + +divider('medium') + p= loremIpsum + + .c-box + +div-heading('xs')= 'Heading' + +divider('faint') + p= loremIpsum + + .c-box + +divider('strong')= 'Strong' + +divider('medium')= 'Medium' + +divider('faint')= 'Faint' diff --git a/tpl/views/list-group.pug b/tpl/views/list-group.pug index 970f0fb..9acef31 100644 --- a/tpl/views/list-group.pug +++ b/tpl/views/list-group.pug @@ -9,7 +9,7 @@ mixin view-list-group .c-box +list-group - +list-group-item(action=true)= 'First item' - +list-group-item(action=true)= 'Second item' - +list-group-item(action=true)= 'Third item' - +list-group-item(action=true)= 'Fourth item' + +list-group-item(interactive=true)= 'First item' + +list-group-item(interactive=true)= 'Second item' + +list-group-item(interactive=true)= 'Third item' + +list-group-item(interactive=true)= 'Fourth item' diff --git a/tpl/views/rule.pug b/tpl/views/rule.pug deleted file mode 100644 index 495c804..0000000 --- a/tpl/views/rule.pug +++ /dev/null @@ -1,21 +0,0 @@ -mixin view-rule - +view('rule', 'Rule') - .c-box - +div-heading('lg')= 'Heading' - +rule('strong') - p= loremIpsum - - .c-box - +div-heading('sm')= 'Heading' - +rule('medium') - p= loremIpsum - - .c-box - +div-heading('xs')= 'Heading' - +rule('faint') - p= loremIpsum - - .c-box - +rule('strong')= 'Strong' - +rule('medium')= 'Medium' - +rule('faint')= 'Faint' diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug index 0ba84be..262195d 100644 --- a/tpl/views/text-field.pug +++ b/tpl/views/text-field.pug @@ -14,9 +14,10 @@ mixin view-text-field +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) br div - +text-field(placeholder='Just landed in L.A.') + +text-field(placeholder='Just landed in L.A.' class="u-p-50") +slot('pre') - +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon' + +action-button(quiet=true class='l-card__block')= 'Volpeon' + +divider('vertical')(class='u-ml-50') +slot('post') +action-button(quiet=true icon='smile' class='l-card__block') +action-button(quiet=true icon='send' class='l-card__block') diff --git a/yarn.lock b/yarn.lock index 3745f64..6962c41 100644 --- a/yarn.lock +++ b/yarn.lock @@ -705,10 +705,10 @@ debug@^2.6.9: dependencies: ms "2.0.0" -debug@^4.3.3: - version "4.3.3" - resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664" - integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q== +debug@^4.3.4: + version "4.3.4" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" + integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== dependencies: ms "2.1.2" @@ -1266,7 +1266,7 @@ internal-slot@^1.0.3: "iro-icons@git+https://git.vulpes.one/git/iro-icons.git": version "1.0.0" - resolved "git+https://git.vulpes.one/git/iro-icons.git#b871fcd977047a20812ebac8d82f7a1d695eee2b" + resolved "git+https://git.vulpes.one/git/iro-icons.git#b07eab73627edc89c31da7f207348bb86c71adb4" "iro-sass@git+https://git.vulpes.one/git/iro-sass.git": version "1.0.2" @@ -1745,6 +1745,11 @@ nanoid@^3.2.0: resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c" integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA== +nanoid@^3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35" + integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw== + normalize-package-data@^2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8" @@ -1985,7 +1990,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@^8.3.11, postcss@^8.4.6: +postcss@^8.3.11: version "8.4.6" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1" integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA== @@ -1994,6 +1999,15 @@ postcss@^8.3.11, postcss@^8.4.6: picocolors "^1.0.0" source-map-js "^1.0.2" +postcss@^8.4.12: + version "8.4.12" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905" + integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg== + dependencies: + nanoid "^3.3.1" + picocolors "^1.0.0" + source-map-js "^1.0.2" + prettysize@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/prettysize/-/prettysize-2.0.0.tgz#902c02480d865d9cc0813011c9feb4fa02ce6996" @@ -2458,10 +2472,10 @@ safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== -sass@^1.49.8: - version "1.49.8" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.8.tgz#9bbbc5d43d14862db07f1c04b786c9da9b641828" - integrity sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw== +sass@^1.49.9: + version "1.49.9" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.9.tgz#b15a189ecb0ca9e24634bae5d1ebc191809712f9" + integrity sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A== dependencies: chokidar ">=3.0.0 <4.0.0" immutable "^4.0.0" @@ -2693,16 +2707,16 @@ stylelint-scss@^4.0.0: postcss-selector-parser "^6.0.6" postcss-value-parser "^4.1.0" -stylelint@^14.5.1: - version "14.5.1" - resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.5.1.tgz#2b2575ccaf14bb057209d48fc87c17d5b684f8db" - integrity sha512-8Hf4HtnhxlWlf7iXF9zFfhSc3X0teRnVzl6PqPs2JEFx+dy/mhMhghZfiTDW4QG0ihDw9+WP7GZw5Nzx7cQF5A== +stylelint@^14.6.1: + version "14.6.1" + resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.6.1.tgz#aff137b0254515fc36b91921d88a3eb2edc194bf" + integrity sha512-FfNdvZUZdzh9KDQxDnO7Opp+prKh8OQVuSW8S13cBtxrooCbm6J6royhUeb++53WPMt04VB+ZbOz/QmzAijs6Q== dependencies: balanced-match "^2.0.0" colord "^2.9.2" cosmiconfig "^7.0.1" css-functions-list "^3.0.1" - debug "^4.3.3" + debug "^4.3.4" execall "^2.0.0" fast-glob "^3.2.11" fastest-levenshtein "^1.0.12" @@ -2723,7 +2737,7 @@ stylelint@^14.5.1: normalize-path "^3.0.0" normalize-selector "^0.2.0" picocolors "^1.0.0" - postcss "^8.4.6" + postcss "^8.4.12" postcss-media-query-parser "^0.2.3" postcss-resolve-nested-selector "^0.1.1" postcss-safe-parser "^6.0.0" -- cgit v1.2.3-70-g09d2