@tylertech/forge 3.0.0-next.11 → 3.0.0-next.13

package/styles/list/list-item/_mixins.scss

@@ -1,413 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/rtl/rtl' as mdc-rtl;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/typography' as mdc-typography;
-@use '../../theme';
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '../../typography/mixins' as typography-mixins;
-@use './variables';
-
-@mixin core-styles() {
-  .forge-list-item {
-    @include base;
-  
-    ::slotted([slot=leading]),
-    ::slotted([slot=trailing]) {
-      font-size: 1.5rem;
-    }
-
-    ::slotted([slot=leading]) {
-      @include leading;
-    }
-
-    ::slotted([slot=trailing]) {
-      @include trailing;
-    }
-  
-    ::slotted([slot=avatar]) {
-      @include leading;
-      @include avatar;
-      @include avatar-icon;
-    }
-  
-    &:not(.forge-list-item--static):not(.forge-list-item--disabled) {
-      &.forge-list-item {
-        @include interactable;
-      }
-    }
-  
-    &__text {
-      @include text;
-    }
-
-    ::slotted([slot=title]) {
-      @include title;
-    }
-
-    ::slotted([slot=subtitle]),
-    ::slotted([slot=tertiary-title]) {
-      @include subtitle;
-    }
-
-    &--two-line {
-      @include two-line;
-    }
-  
-    &--three-line {
-      @include three-line;
-    }
-  
-    &--dense {
-      @include dense;
-  
-      ::slotted([slot=leading]),
-      ::slotted([slot=trailing]) {
-        font-size: 1.25rem;
-      }
-
-      ::slotted([slot=leading]) {
-        @include theme.css-custom-property(margin-right, --forge-list-item-leading-margin-right, 12px);
-      }
-  
-      ::slotted(.forge-list-item__title) {
-        @include mdc-typography.typography(body2);
-      }
-
-      &.forge-list-item--two-line {
-        @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-two-line-height);
-      }
-
-      &.forge-list-item--three-line {
-        @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-three-line-height);
-      }
-    }
-  
-    &--wrap {
-      @include theme.css-custom-property(height, --forge-list-item-height, auto);
-
-      ::slotted([slot=title]),
-      ::slotted([slot=subtitle]),
-      ::slotted([slot=tertiary-title]),
-      .forge-list-item__text {
-        @include text-wrap;
-      }
-    }
-
-    &--indented {
-      @include indented;
-    }
-  
-    // Keep this at the bottom so that these selectors will override the ones
-    // above that have the same specificity.
-    &--active {
-      @include active;
-    }
-  
-    // Keep this at the bottom so that these selectors will override the ones
-    // above that have the same specificity.
-    &--selected,
-    &--activated {
-      @include selected;
-      @include subtitle-selected;
-      @include tertiary-title-selected;
-  
-      ::slotted([slot=leading]),
-      ::slotted([slot=trailing]) {
-        @include selected-leading-trailing;
-      }
-  
-      ::slotted([slot=avatar].forge-list-item__avatar-icon) {
-        @include selected-avatar-icon;
-      }
-    }
-  
-    &--disabled {
-      @include disabled;
-  
-      ::slotted([slot=leading]),
-      ::slotted([slot=trailing]) {
-        @include disabled;
-      }
-    }
-  
-    &[role=link] {
-      cursor: pointer;
-    }
-  }
-}
-
-@mixin drawer-context-styles() {
-  .forge-list-item {
-    @include drawer;
-
-    &--static {
-      cursor: initial;
-    }
-
-    &--indented {
-      @include indented-drawer;
-    }
-
-    &--two-line {
-      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$two-line-height - 8px);
-      @include theme.css-custom-property(height, --forge-list-item-height, variables.$two-line-height - 8px);
-    }
-
-    &--three-line {
-      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$three-line-height - 8px);
-      @include theme.css-custom-property(height, --forge-list-item-height, variables.$three-line-height - 8px);
-    }
-
-    &:nth-child(1) {
-      margin-top: 4px;
-      margin-bottom: 4px;
-    }
-
-    &--dense {
-      @include dense;
-
-      ::slotted([slot=leading]),
-      ::slotted([slot=trailing]) {
-        font-size: 1.25rem;
-      }
-
-      .forge-list-item__text {
-        @include mdc-typography.typography(body2);
-      }
-    }
-
-    &--wrap {
-      @include theme.css-custom-property(height, --forge-list-item-height, auto);
-      @include theme.css-custom-property(padding, --forge-list-item-padding, 4px variables.$drawer-inline-padding);
-      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$drawer-single-line-height);
-    }
-
-    &--disabled {
-      @include theme.css-custom-property(cursor, --forge-list-item-cursor, not-allowed);
-    }
-  }
-}
-
-/// Styles the list item host element.
-@mixin host() {
-  display: block;
-  contain: content;
-}
-
-@mixin base() {
-  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$single-line-height);
-  @include theme.css-custom-property(max-height, --forge-list-item-max-height, none);
-  @include theme.css-custom-property(height, --forge-list-item-height, variables.$single-line-height);
-  @include theme.css-custom-property(padding, --forge-list-item-padding, #{variables.$block-padding variables.$inline-padding});
-  @include theme.css-custom-property(margin-left, --forge-list-item-indent, 0);
-  @include theme.css-custom-property(align-items, --forge-list-item-align-items, center);
-
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  overflow: hidden;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-@mixin interactable() {
-  @include mdc-ripple.surface;
-  @include mdc-ripple.radius-bounded;
-  @include mdc-ripple-theme.states(on-surface);
-  @include mdc-ripple-theme.states-activated(primary);
-  @include mdc-ripple-theme.states-selected(primary);
-
-  &--selected:focus:hover.mdc-ripple-upgraded--background-focused:not(.mdc-ripple-upgraded--foreground-activation)::before {
-    opacity: mdc-ripple-theme.states-opacity(primary, activated) + mdc-ripple-theme.states-opacity(primary, focus) +
-      mdc-ripple-theme.states-opacity(primary, hover);
-  }
-
-  &:focus,
-  &--active {
-    &:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation) {
-      &::before {
-        opacity: mdc-ripple-theme.states-opacity(primary, focus);
-      }
-      &:hover {
-        &::before {
-          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover);
-        }
-      }
-
-      &::before,
-      &::after {
-        @include mdc-theme.property(background-color, on-surface);
-      }
-    }
-  }
-
-  &--active:focus {
-    &.forge-list-item--selected.forge-list-item--activated:not(.mdc-ripple-upgraded--foreground-activation) {
-      &::before {
-        opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, activated);
-      }
-      &:hover {
-        &::before {
-          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover) +
-            mdc-ripple-theme.states-opacity(primary, activated);
-        }
-      }
-    }
-  }
-}
-
-@mixin text() {
-  @include mdc-typography.overflow-ellipsis;
-
-  width: 100%;
-}
-
-@mixin text-wrap() {
-  text-overflow: clip;
-  white-space: normal;
-}
-
-@mixin drawer {
-  @include theme.css-custom-property(margin, --forge-list-item-margin, variables.$margin-drawer);
-  @include theme.css-custom-property(padding, --forge-list-item-padding, 0 variables.$drawer-inline-padding);
-  @include theme.css-custom-property(border-radius, --forge-list-item-border-radius, 4px);
-  @include theme.css-custom-property(cursor, --forge-list-item-cursor, pointer);
-  @include theme.css-custom-property(height, --forge-list-item-height, variables.$drawer-single-line-height);
-
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-@mixin leading() {
-  @include mdc-theme.property(color, text-secondary-on-background);
-  @include theme.css-custom-property(margin-left, --forge-list-item-leading-margin-left, 0);
-  @include theme.css-custom-property(margin-right, --forge-list-item-leading-margin-right, 32px);
-
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  fill: currentColor;
-}
-
-@mixin trailing() {
-  @include mdc-theme.property(color, text-secondary-on-background);
-  @include mdc-rtl.reflexive-property(margin, auto, 0, '.forge-list-item');
-}
-
-@mixin selected-leading-trailing() {
-  @include mdc-theme.property(color, primary);
-}
-
-@mixin avatar() {
-  margin-left: 0;
-  margin-right: 16px;
-  min-width: 40px;
-  min-height: 40px;
-  border-radius: 50%;
-  display: inline-flex;
-}
-
-@mixin avatar-icon() {
-  @include mdc-theme.property(background-color, text-secondary-on-background);
-  @include mdc-theme.property(color, on-primary);
-}
-
-@mixin title() {
-  @include mdc-typography.overflow-ellipsis;
-
-  display: block;
-}
-
-@mixin subtitle() {
-  @include mdc-typography.typography(body2);
-  @include mdc-typography.overflow-ellipsis;
-  @include mdc-theme.property(color, text-secondary-on-background);
-
-  display: block;
-}
-
-@mixin subtitle-selected {
-  .forge-list-item__text {
-    ::slotted(.forge-list-item__subtitle),
-    .forge-list-item__subtitle {
-      @include mdc-theme.property(color, primary);
-      opacity: 0.87;
-    }
-  }
-}
-
-@mixin tertiary-title-selected {
-  .forge-list-item__text {
-    ::slotted(.forge-list-item__tertiary-title),
-    .forge-list-item__tertiary-title {
-      @include mdc-theme.property(color, primary);
-      opacity: 0.87;
-    }
-  }
-}
-
-@mixin two-line() {
-  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$two-line-height);
-  @include theme.css-custom-property(height, --forge-list-item-height, variables.$two-line-height);
-}
-
-@mixin three-line() {
-  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$three-line-height);
-  @include theme.css-custom-property(height, --forge-list-item-height, variables.$three-line-height);
-}
-
-@mixin dense() {
-  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-single-line-height);
-  @include theme.css-custom-property(height, --forge-list-item-height, variables.$dense-height);
-}
-
-@mixin disabled() {
-  @include theme.css-custom-property(cursor, --forge-list-item-cursor, not-allowed);
-  @include mdc-theme.property(color, text-disabled-on-light);
-}
-
-@mixin selected() {
-  @include mdc-theme.property(color, primary);
-}
-
-@mixin selected-focus() {
-  @include mdc-theme.property(color, primary);
-}
-
-@mixin selected-avatar-icon() {
-  @include mdc-theme.property(background-color, text-disabled-on-background);
-  @include mdc-theme.property(color, on-surface);
-}
-
-@mixin indented() {
-  @include theme.css-custom-property(margin-left, --forge-list-item-indent, variables.$indent);
-}
-
-@mixin indented-drawer() {
-  @include theme.css-custom-property(margin-left, --forge-list-item-indent, variables.$indent-drawer);
-}
-
-@mixin active() {
-  &.forge-list-item--selected,
-  &.forge-list-item--activated {
-    &:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item {
-      &::before {
-        opacity: mdc-ripple-theme.states-opacity(primary, selected) + mdc-ripple-theme.states-opacity(primary, focus);
-      }
-      &:hover {
-        &::before {
-          opacity: mdc-ripple-theme.states-opacity(primary, selected) + mdc-ripple-theme.states-opacity(primary, focus) +
-            mdc-ripple-theme.states-opacity(primary, hover);
-        }
-      }
-    }
-  }
-}

package/styles/list/list-item/_variables.scss

@@ -1,43 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use 'sass:math';
-
-$block-padding: 8px;
-$inline-padding: 16px;
-$drawer-inline-padding: #{math.div($inline-padding, 2)};
-
-/// The default height for a single line list item.
-$single-line-height: #{48px - $block-padding * 2} !default;
-
-/// The default height for a single line list item.
-$dense-single-line-height: #{32px - $block-padding * 2} !default;
-
-/// The default height for a two line list item.
-$dense-two-line-height: #{56px - $block-padding * 2} !default;
-
-/// The default height for a three line list item.
-$dense-three-line-height: #{72px - $block-padding * 2} !default;
-
-/// The default min-height for a single line list item in a drawer context.
-$drawer-single-line-height: 40px !default;
-
-/// The default height for a two-line list item.
-$two-line-height: #{72px - $block-padding * 2} !default;
-
-/// The default height for a three-line list item.
-$three-line-height: #{88px - $block-padding * 2} !default;
-
-/// The default height for the dense single-line list item
-$dense-height: #{32px - $block-padding * 2} !default;
-
-/// The default margin for list items when placed in a drawer
-$margin-drawer: 8px !default;
-
-/// The default margin-left for indented list items
-$indent: 56px !default;
-
-/// The default margin-left for indented list items when placed in a drawer
-$indent-drawer: $indent + $margin-drawer !default;