From ea1568ef53676eecad881193dc7030930ad02413 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Wed, 16 Jun 2021 09:28:01 -0700 Subject: [PATCH] fix(@clayui/css): Cadmin Treeview new component --- packages/clay-css/src/scss/cadmin.scss | 1 + .../clay-css/src/scss/cadmin/_variables.scss | 1 + .../src/scss/cadmin/components/_treeview.scss | 421 ++++++++++++++++++ .../src/scss/cadmin/variables/_treeview.scss | 177 ++++++++ 4 files changed, 600 insertions(+) create mode 100644 packages/clay-css/src/scss/cadmin/components/_treeview.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_treeview.scss diff --git a/packages/clay-css/src/scss/cadmin.scss b/packages/clay-css/src/scss/cadmin.scss index 7056d8043f..e88eff2a3a 100644 --- a/packages/clay-css/src/scss/cadmin.scss +++ b/packages/clay-css/src/scss/cadmin.scss @@ -76,6 +76,7 @@ html#{$cadmin-selector} { @import 'cadmin/components/_tbar'; @import 'cadmin/components/_toggle-switch'; @import 'cadmin/components/_tooltip'; + @import 'cadmin/components/_treeview'; @import 'cadmin/components/_utilities'; @import 'cadmin/components/_utilities-functional-important'; diff --git a/packages/clay-css/src/scss/cadmin/_variables.scss b/packages/clay-css/src/scss/cadmin/_variables.scss index 2aa8055f2d..b892e251dd 100644 --- a/packages/clay-css/src/scss/cadmin/_variables.scss +++ b/packages/clay-css/src/scss/cadmin/_variables.scss @@ -53,6 +53,7 @@ @import 'variables/_tbar'; @import 'variables/_toggle-switch'; @import 'variables/_tooltip'; +@import 'variables/_treeview'; @import 'variables/_type'; @import 'variables/_utilities'; diff --git a/packages/clay-css/src/scss/cadmin/components/_treeview.scss b/packages/clay-css/src/scss/cadmin/components/_treeview.scss new file mode 100644 index 0000000000..79030aa1c0 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/components/_treeview.scss @@ -0,0 +1,421 @@ +.treeview { + @include clay-css($cadmin-treeview); + + .btn { + $btn: setter(map-get($cadmin-treeview, btn), ()); + + @include clay-button-variant($btn); + } + + .btn-monospaced { + $btn-monospaced: setter(map-get($cadmin-treeview, btn-monospaced), ()); + + @include clay-button-variant($btn-monospaced); + } + + .custom-control { + $custom-control: setter(map-get($cadmin-treeview, custom-control), ()); + + @include clay-css($custom-control); + } + + &.show-component-expander-on-hover { + @include clay-css($cadmin-treeview-show-component-expander-on-hover); + + &:hover, + &.hover { + $hover: setter( + map-get( + $cadmin-treeview-show-component-expander-on-hover, + hover + ), + () + ); + + @include clay-css($hover); + + .component-expander { + $component-expander: setter( + map-get($hover, component-expander), + () + ); + + @include clay-css($component-expander); + } + } + + .treeview-link { + $treeview-link: setter( + map-get( + $cadmin-treeview-show-component-expander-on-hover, + treeview-link + ), + () + ); + + @include clay-css($treeview-link); + + &:focus, + &.focus { + $focus: setter(map-get($treeview-link, focus), ()); + + @include clay-css($focus); + + .component-expander { + $component-expander: setter( + map-get($focus, component-expander) + ); + + @include clay-css($component-expander); + } + } + } + + .component-expander { + $component-expander: setter( + map-get( + $cadmin-treeview-show-component-expander-on-hover, + component-expander + ), + () + ); + + @include clay-css($component-expander); + } + } +} + +.treeview-group { + $group: setter(map-get($cadmin-treeview, group), ()); + + @include clay-css($group); +} + +.treeview-item { + $item: setter(map-get($cadmin-treeview, item), ()); + + @include clay-css($item); + + &:last-child { + $last-child: setter(map-get($item, last-child), ()); + + @include clay-css($last-child); + } +} + +.treeview-link { + $link: setter(map-get($cadmin-treeview, link), ()); + + @include clay-link($link); + + &.hover, + &:hover, + &.focus, + &:focus { + .component-action { + display: block; + } + } + + &.show, + &[aria-expanded='true'] { + .component-expander { + .component-expanded-d-none { + display: none; + } + + .lexicon-icon:not(.component-expanded-d-none) { + display: inline-block; + } + } + } +} + +.component-expander { + $component-expander: setter( + map-get($cadmin-treeview, component-expander), + () + ); + + @include clay-button-variant($component-expander); + + .lexicon-icon:not(.component-expanded-d-none) { + display: none; + } +} + +.component-action { + $component-action: setter(map-get($cadmin-treeview, component-action), ()); + + @include clay-button-variant($component-action); +} + +.component-icon { + $component-icon: setter(map-get($cadmin-treeview, component-icon), ()); + + @include clay-css($component-icon); + + .lexicon-icon { + $lexicon-icon: setter(map-get($component-icon, lexicon-icon), ()); + + @include clay-css($lexicon-icon); + } +} + +.component-text { + $component-text: setter(map-get($cadmin-treeview, component-text), ()); + + @include clay-css($component-text); +} + +.treeview-nested-margins { + .treeview-group .treeview-item { + margin-left: 24px; + } +} + +.treeview-nested { + padding-bottom: 4px; + padding-top: 4px; + + > .treeview-item > .treeview-link { + padding-left: 0; + + > .c-inner { + margin-left: 0; + } + } + + .treeview-group { + > .treeview-item > .treeview-link { + padding-left: 24px; + + > .c-inner { + margin-left: -24px; + } + } + } + + .treeview-group .treeview-group > .treeview-item > .treeview-link { + padding-left: 48px; + + > .c-inner { + margin-left: -48px; + } + } + + .treeview-group + .treeview-group + .treeview-group + > .treeview-item + > .treeview-link { + padding-left: 72px; + + > .c-inner { + margin-left: -72px; + } + } + + .treeview-group + .treeview-group + .treeview-group + .treeview-group + > .treeview-item + > .treeview-link { + padding-left: 96px; + + > .c-inner { + margin-left: -96px; + } + } +} + +// Treeview Variants + +.treeview-light { + @include clay-css($cadmin-treeview-light); + + .btn { + $btn: setter(map-get($cadmin-treeview-light, btn), ()); + + @include clay-button-variant($btn); + } + + .btn-monospaced { + $btn-monospaced: setter( + map-get($cadmin-treeview-light, btn-monospaced), + () + ); + + @include clay-button-variant($btn-monospaced); + } + + .component-expander { + $component-expander: setter( + map-get($cadmin-treeview-light, component-expander), + () + ); + + @include clay-button-variant($component-expander); + + &.btn-secondary { + $btn-secondary: setter( + map-get($component-expander, btn-secondary), + () + ); + + @include clay-button-variant($btn-secondary); + } + } + + .custom-control { + $custom-control: setter( + map-get($cadmin-treeview-light, custom-control), + () + ); + + @include clay-css($custom-control); + } + + .treeview-group { + $group: setter(map-get($cadmin-treeview-light, group), ()); + + @include clay-css($group); + } + + .treeview-item { + $item: setter(map-get($cadmin-treeview-light, item), ()); + + @include clay-css($item); + + &:last-child { + $last-child: setter(map-get($item, last-child), ()); + + @include clay-css($last-child); + } + } + + .treeview-link { + $link: setter(map-get($cadmin-treeview-light, link), ()); + + @include clay-link($link); + } + + .component-action { + $component-action: setter( + map-get($cadmin-treeview-light, component-action), + () + ); + + @include clay-button-variant($component-action); + } + + .component-icon { + $component: setter(map-get($cadmin-treeview-light, component), ()); + + @include clay-css($component); + } + + .component-text { + $component: setter(map-get($cadmin-treeview-light, component), ()); + + @include clay-css($component); + } +} + +.treeview-dark { + @include clay-css($cadmin-treeview-dark); + + .btn { + $btn: setter(map-get($cadmin-treeview-dark, btn), ()); + + @include clay-button-variant($btn); + } + + .btn-monospaced { + $btn-monospaced: setter( + map-get($cadmin-treeview-dark, btn-monospaced), + () + ); + + @include clay-button-variant($btn-monospaced); + } + + .component-expander { + $component-expander: setter( + map-get($cadmin-treeview-dark, component-expander), + () + ); + + @include clay-button-variant($component-expander); + + &.btn-secondary { + $btn-secondary: setter( + map-get($component-expander, btn-secondary), + () + ); + + @include clay-button-variant($btn-secondary); + } + } + + .custom-control { + $custom-control: setter( + map-get($cadmin-treeview-dark, custom-control), + () + ); + + @include clay-css($custom-control); + } + + .treeview-group { + $group: setter(map-get($cadmin-treeview-dark, group), ()); + + @include clay-css($group); + } + + .treeview-item { + $item: setter(map-get($cadmin-treeview-dark, item), ()); + + @include clay-css($item); + + &:last-child { + $last-child: setter(map-get($item, last-child), ()); + + @include clay-css($last-child); + } + } + + .treeview-link { + $link: setter(map-get($cadmin-treeview-dark, link), ()); + + @include clay-link($link); + } + + .component-action { + $component-action: setter( + map-get($cadmin-treeview-dark, component-action), + () + ); + + @include clay-button-variant($component-action); + } + + .component-icon { + $component-icon: setter( + map-get($cadmin-treeview-dark, component-icon), + () + ); + + @include clay-css($component-icon); + } + + .component-text { + $component-text: setter( + map-get($cadmin-treeview-dark, component-text), + () + ); + + @include clay-css($component-text); + } +} diff --git a/packages/clay-css/src/scss/cadmin/variables/_treeview.scss b/packages/clay-css/src/scss/cadmin/variables/_treeview.scss new file mode 100644 index 0000000000..d30f667e43 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/variables/_treeview.scss @@ -0,0 +1,177 @@ +$cadmin-treeview: () !default; +$cadmin-treeview: map-merge( + ( + display: block, + font-size: 14px, + list-style: none, + margin-bottom: 0, + padding-left: 0, + btn-monospaced: ( + font-size: 14px, + height: 24px, + width: 24px, + focus: ( + box-shadow: $cadmin-component-focus-inset-box-shadow, + ), + ), + custom-control: ( + margin-left: 4px, + margin-right: 4px, + margin-top: 1.5px, + ), + group: ( + display: block, + list-style: none, + margin-bottom: 0, + padding-left: 0, + ), + item: ( + padding-bottom: 2px, + padding-top: 2px, + word-wrap: break-word, + last-child: ( + padding-bottom: 0, + ), + ), + link: ( + cursor: pointer, + display: block, + min-width: 100%, + padding: 0, + position: relative, + user-select: none, + hover: ( + text-decoration: none, + ), + focus: ( + box-shadow: $cadmin-component-focus-inset-box-shadow, + outline: 0, + ), + ), + component-action: ( + display: none, + margin-left: 2px, + margin-right: 2px, + hover: ( + background-color: transparent, + color: $cadmin-secondary, + ), + focus: ( + color: $cadmin-secondary, + ), + active: ( + background-color: transparent, + ), + ), + component-icon: ( + display: inline, + height: auto, + margin-left: 4px, + margin-right: 4px, + width: auto, + ), + component-text: ( + padding-bottom: 1.5px, + padding-left: 4px, + padding-top: 1.5px, + user-select: auto, + ), + ), + $cadmin-treeview +); + +$cadmin-treeview-show-component-expander-on-hover: () !default; +$cadmin-treeview-show-component-expander-on-hover: map-deep-merge( + ( + hover: ( + component-expander: ( + opacity: 1, + transition: opacity ease-in-out 600ms, + ), + ), + component-expander: ( + opacity: 0, + transition: opacity ease-in-out 450ms, + ), + treeview-link: ( + focus: ( + component-expander: ( + opacity: 1, + transition: none, + ), + ), + ), + ), + $cadmin-treeview-show-component-expander-on-hover +); + +// Variants + +$cadmin-treeview-light: () !default; +$cadmin-treeview-light: map-deep-merge( + ( + component-expander: ( + color: $cadmin-secondary, + hover: ( + color: $cadmin-primary, + ), + btn-secondary: ( + background-color: $cadmin-white, + ), + ), + link: ( + color: $cadmin-gray-600, + hover: ( + background-color: $cadmin-gray-100, + color: $cadmin-gray-900, + ), + active: ( + background-color: $cadmin-gray-200, + color: $cadmin-gray-900, + ), + active-class: ( + background-color: $cadmin-gray-200, + color: $cadmin-gray-900, + ), + show: ( + background-color: null, + color: null, + ), + ), + ), + $cadmin-treeview-light +); + +$cadmin-treeview-dark: () !default; +$cadmin-treeview-dark: map-deep-merge( + ( + component-expander: ( + color: $cadmin-secondary-l1, + hover: ( + color: $cadmin-primary-l1, + ), + ), + link: ( + color: $cadmin-secondary-l1, + hover: ( + background-color: rgba($cadmin-white, 0.04), + ), + active-class: ( + background-color: rgba($cadmin-white, 0.06), + color: $cadmin-white, + ), + disabled: ( + background-color: transparent, + color: rgba($cadmin-secondary-l1, 0.04), + ), + show: ( + background-color: null, + color: null, + ), + ), + component-action: ( + color: $cadmin-secondary-l1, + ), + ), + $cadmin-treeview-dark +);