diff --git a/lib/sage-frontend/stylesheets/system/patterns/elements/_button.scss b/lib/sage-frontend/stylesheets/system/patterns/elements/_button.scss index cb93cb7c4..a65f6abd7 100644 --- a/lib/sage-frontend/stylesheets/system/patterns/elements/_button.scss +++ b/lib/sage-frontend/stylesheets/system/patterns/elements/_button.scss @@ -105,6 +105,7 @@ $-btn-subtle-styles: ( position: relative; min-height: ($-padding-block * 2 + sage-line-height(md)); padding: $-padding-block sage-spacing(sm); + text-align: left; // Prevents text alignment issue when inner text is truncated border: 0; border-radius: $-btn-border-radius; transition: $-btn-transition; @@ -229,7 +230,7 @@ $-btn-subtle-styles: ( // Shadow appears on Primary by default but can be toggled off with `--no-shadow` @if ($-style-name == primary) { box-shadow: $-btn-shadow-base; - + &.sage-btn--no-shadow { box-shadow: none; } @@ -264,13 +265,13 @@ $-btn-subtle-styles: ( color: map-get($-styles, hover); background-color: transparent; } - + &:focus, &:active { color: map-get($-styles, focus); background-color: transparent; } - + &:disabled, &[aria-disabled="true"] { color: map-get($-styles, disabled); diff --git a/lib/sage-frontend/stylesheets/system/patterns/objects/_outline_item.scss b/lib/sage-frontend/stylesheets/system/patterns/objects/_outline_item.scss index 76211026b..fc6db3095 100644 --- a/lib/sage-frontend/stylesheets/system/patterns/objects/_outline_item.scss +++ b/lib/sage-frontend/stylesheets/system/patterns/objects/_outline_item.scss @@ -19,11 +19,14 @@ $-collapse-breakpoint-key: md-max; .sage-outline-item { display: grid; - align-items: center; + align-items: stretch; grid-template-rows: repeat(auto-fit, auto); - grid-column-gap: sage-spacing(sm); + grid-column-gap: sage-spacing(xs); + padding: 0 sage-spacing(sm); background: sage-color(white); will-change: background, box-shadow; + border-left: sage-border(); + border-right: sage-border(); // NOTE: Height is governed by a parent React node to allow us // to dynamically adjust the height of elements depending @@ -34,14 +37,12 @@ $-collapse-breakpoint-key: md-max; // small datasets, Categories have a larger height than // regular Outline Items // - // stylelint-disable order/properties-order + // stylelint-disable-next-line order/properties-order height: 100%; - max-height: rem(80px); - // stylelint-enable order/properties-order @media (min-width: sage-breakpoint($-collapse-breakpoint-key)) { // Using static column values to ensure alignment - grid-template-columns: min-content 1fr max-content rem(160px) rem(92px) rem(40px); + grid-template-columns: min-content 1fr max-content rem(140px) rem(140px) rem(24px); grid-template-areas: "handle-drag title actions-secondary actions-primary status handle-collapse"; } @@ -53,17 +54,63 @@ $-collapse-breakpoint-key: md-max; ". actions-primary . handle-collapse"; } - &:not(.sage-outline-item--category) { + // ------------------ ( /Category ) + &.sage-outline-item--depth-0.sage-outline-item--category { + margin-top: sage-spacing(xs); + border-top-right-radius: sage-border(radius); + border-top-left-radius: sage-border(radius); + border-top: sage-border(); + border-bottom: sage-border(); + + &:not(.sage-outline-item--expanded) { + border-bottom-right-radius: sage-border(radius); + border-bottom-left-radius: sage-border(radius); + } + } + + // ------------------ ( /Category/Post ) + &.sage-outline-item--depth-1:not(.sage-outline-item--category) { border-bottom: sage-border(light); + + &.sage-outline-item--last-child { + border-bottom: sage-border(); + border-bottom-right-radius: sage-border(radius); + border-bottom-left-radius: sage-border(radius); + } } - &.sage-outline-item--category { + // ------------------ ( /Category/Category ) + &.sage-outline-item--depth-1.sage-outline-item--category { + padding-left: sage-spacing(lg); + margin-top: rem(-1px); + border-top: sage-border(); border-bottom: sage-border(); + + &.sage-outline-item--last-child:not(.sage-outline-item--expanded) { + border-bottom-right-radius: sage-border(radius); + border-bottom-left-radius: sage-border(radius); + } + } + + // ------------------ ( /Category/Category/Post ) + &.sage-outline-item--depth-2:not(.sage-outline-item--category) { + padding-left: sage-spacing(xl); + border-bottom: sage-border(light); + + &.sage-outline-item--last-child { + border-bottom: sage-border(); + } } - &.sage-outline-item--is-dragging { - border: unset; - box-shadow: inset 0 0 0 1px sage-color(white), inset 0 0 0 2px sage-color(grey, 300); + &.sage-outline-item--is-dragging, + &.sage-outline-item--is-dragging-descendant { + margin: 0; + + // stylelint-disable-next-line declaration-no-important + border: 1px solid sage-color(grey) !important; + + // stylelint-disable-next-line declaration-no-important + border-radius: unset !important; // NOTE: Forces hardware acceleration, this resolves issue with HTML5 Drag & Drop // API drag-preview 'capture' action in webkit browsers. @@ -76,17 +123,6 @@ $-collapse-breakpoint-key: md-max; .sage-outline-item__handle-collapse { visibility: hidden; } - } - - &.sage-outline-item--is-dragging-descendant { - border: unset; - box-shadow: inset 0 0 0 1px sage-color(white), inset 0 0 0 2px sage-color(grey, 300); - - .sage-outline-item__actions-primary, - .sage-outline-item__actions-secondary, - .sage-outline-item__handle-collapse { - visibility: hidden; - } > * { opacity: 0.5; @@ -94,75 +130,22 @@ $-collapse-breakpoint-key: md-max; } &.sage-outline-item--is-droptarget { - border-radius: sage-border(radius-large); - box-shadow: inset 0 0 0 1px sage-color(white), inset 0 0 0 2px sage-color(primary), inset 0 0 0 5px sage-color(white); - background: repeating-linear-gradient( - 45deg, - sage-color(grey, 300) 0, - sage-color(grey, 300) 12px, - sage-color(white) 12px, - sage-color(white) 24px - ); - - > * { - visibility: hidden; - } + box-shadow: 0 -4px 0 0 sage-color(primary); } &.sage-outline-item--is-droptarget-invalid { - border-radius: sage-border(radius-large); - box-shadow: inset 0 0 0 1px sage-color(white), inset 0 0 0 2px sage-color(red, 200), inset 0 0 0 5px sage-color(white); - background: repeating-linear-gradient( - 45deg, - sage-color(red, 200) 0, - sage-color(red, 200) 12px, - sage-color(white) 12px, - sage-color(white) 24px - ); - - > * { - visibility: hidden; - } - } - - &.sage-outline-item--depth-0 { - padding: sage-spacing(); - } - - &.sage-outline-item--depth-1 { - &:not(.sage-outline-item--category) { - padding: sage-spacing(sm) sage-spacing(); - } - &.sage-outline-item--category { - margin-left: sage-spacing(lg); - padding: sage-spacing(); - } - } - - &.sage-outline-item--depth-2 { - - &:not(.sage-outline-item--category) { - margin-left: sage-spacing(lg); - padding: sage-spacing(sm) sage-spacing(); - } - &.sage-outline-item--category { - margin-left: sage-spacing(xl); - padding: sage-spacing(); - } + box-shadow: 0 -4px 0 0 sage-color(red, 300); } } .sage-outline-item__title { + display: flex; grid-area: title; - color: sage-color(charcoal, 400); - @include truncate; - - .sage-outline-item--category & { - @extend %t-sage-body-semi; - } + align-items: center; + min-width: 0; - :not(.sage-outline-item--category) & { - @extend %t-sage-body; + > * { + max-width: 100%; } } @@ -170,6 +153,11 @@ $-collapse-breakpoint-key: md-max; display: flex; grid-area: actions-secondary; flex-direction: row; + align-items: center; + + > * { + margin-right: sage-spacing(); + } @media (min-width: sage-breakpoint($-collapse-breakpoint-key)) { display: none; @@ -185,7 +173,9 @@ $-collapse-breakpoint-key: md-max; } .sage-outline-item__actions-primary { + display: flex; grid-area: actions-primary; + align-items: center; } .sage-outline-item__status { @@ -193,11 +183,13 @@ $-collapse-breakpoint-key: md-max; grid-area: status; justify-content: flex-end; transform: none; + align-items: center; } .sage-outline-item__handle-drag { + display: flex; grid-area: handle-drag; - margin-right: -1 * sage-spacing(xs); + align-items: center; cursor: grab; &:active { @@ -229,6 +221,7 @@ $-collapse-breakpoint-key: md-max; display: flex; grid-area: handle-collapse; justify-content: flex-end; + align-items: center; } .sage-outline-item__children { diff --git a/lib/sage_rails/app/views/sage_components/_sage_outline_item.html.erb b/lib/sage_rails/app/views/sage_components/_sage_outline_item.html.erb index da862801e..8c04695d1 100644 --- a/lib/sage_rails/app/views/sage_components/_sage_outline_item.html.erb +++ b/lib/sage_rails/app/views/sage_components/_sage_outline_item.html.erb @@ -1,4 +1,6 @@ -
+ class=" sage-outline-item <%= "sage-outline-item--category" if component.category %> <%= "sage-outline-item--depth-#{component.depth}" if component.depth %> @@ -12,7 +14,12 @@ title="Click to drag" >

- <%= component.title %> + <%= sage_component SageButton, { + value: component.title, + style: "secondary", + subtle: true, + small: !component.category + } %>

<% if component.actions_primary %>