@tylertech/forge 3.0.0-next.14 → 3.0.0-next.15

package/styles/app-bar/search/_mixins.scss

@@ -1,238 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '../../theme';
-@use './variables';
-
-@mixin provide-theme($theme) {
-  @include theme.theme-properties(app-bar-search, $theme, variables.$theme-values);
-}
-
-@mixin core-styles() {
-  ::slotted([slot=action]) {
-    margin-left: 8px;
-  }
-  
-  .forge-app-bar-search {
-    @include base;
-  
-    &__container {
-      @include container;
-  
-      ::slotted(input) {
-        @include input;
-      }
-    }
-    
-    &__global-icon-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin: 0 16px;
-    }
-  
-    &__search-icon-container {
-      @include icon-container;
-    }
-  
-    &__icon {
-      @include icon;
-    }
-  
-    &__actions {
-      @include actions;
-    }
-  
-    &__context {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      margin-left: 8px;
-  
-      &-button {
-        @include mdc-theme.property(color, on-surface);
-  
-        outline: none;
-        border: none;
-        background: none;
-        min-width: 100px;
-        display: flex;
-        align-items: center;
-        height: 70%;
-        margin-left: 8px;
-        margin-right: 4px;
-        border-radius: 4px;
-        background-color: transparent;
-        transition: background-color 200ms ease-out;
-        will-change: background-color;
-        padding: 0;
-        padding-left: 8px;
-  
-        &:hover {
-          background-color: rgba(255, 255, 255, 0.12);
-        }
-  
-        &:focus {
-          background-color: rgba(255, 255, 255, 0.2);
-        }
-  
-        &-text {
-          flex: 1;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
-      }
-    }
-  
-    &__vertical-divider {
-      @include mdc-theme.property(border-left-color, on-primary);
-  
-      display: inline-block;
-      position: absolute;
-      top: 8px;
-      bottom: 8px;
-      border-left-width: 1px;
-      border-left-style: solid;
-    }
-  
-    &--focused {
-      .forge-app-bar-search__container {
-        @include theme.css-custom-property(background-color, --forge-app-bar-search-theme-background-focused, variables.$background-focused);
-  
-        &::before {
-          opacity: 0.87;
-          border-width: 2px;
-          top: -1px;
-          right: -1px;
-          bottom: -1px;
-          left: -1px;
-        }
-      }
-    }
-  
-    &--disabled {
-      @include theme.css-custom-property(opacity, --forge-app-bar-search-theme-disabled-opacity, variables.$disabled-opacity);
-      
-      cursor: not-allowed;
-  
-      .forge-app-bar-search__container {
-        &:hover::before {
-          opacity: 54%;
-        }
-      }
-      
-      ::slotted(input) {
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-@mixin host() {
-  display: block;
-  width: 100%;
-  contain: layout style;
-}
-
-@mixin base() {
-  display: flex;
-  height: 2.25rem;
-}
-
-@mixin container() {
-  @include theme.css-custom-property(background-color, --forge-app-bar-search-theme-background, variables.$background);
-  
-  width: 100%;
-  flex: 1 1 auto;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  position: relative;
-
-  &::before {
-    @include mdc-theme.property(border-color, on-primary);
-
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    border-radius: 2px;
-    border-width: 1px;
-    border-style: solid;
-    z-index: -1;
-    opacity: 0.54;
-    transition-property: border-color, opacity;
-    transition-duration: variables.$transition-duration;
-    transition-timing-function: variables.$timing-function;
-    will-change: border-color, border-width, opacity, top, left, bottom, right;
-  }
-
-  &:hover::before {
-    @include theme.css-custom-property(opacity, --forge-app-bar-search-theme-hover-opacity, variables.$hover-opacity);
-  }
-}
-
-@mixin icon-container() {
-  width: 56px;
-  height: variables.$height;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-}
-
-@mixin icon() {
-  @include mdc-theme.property(color, on-primary);
-}
-
-@mixin input() {
-  @include mdc-theme.property(color, on-primary);
-
-  display: block;
-  overflow: hidden;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  flex: 1 1 auto;
-  margin: 0;
-  margin-left: -8px;
-  outline: none;
-  pointer-events: auto;
-  transition-property: color;
-  transition-duration: variables.$transition-duration;
-  transition-timing-function: variables.$timing-function;
-
-  &::placeholder {
-    @include mdc-theme.property(color, text-secondary-on-background);
-    
-    font-size: 1rem;
-    opacity: 1;
-  }
-}
-
-@mixin actions() {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-// Use this mixin to generate classes for creating your own custom input containers.
-@mixin custom-input-classes() {
-  .forge-app-bar-input {
-    @include input;
-
-    &__container {
-      @include container;
-
-      padding: 8px 16px;
-    }
-  }
-}

package/styles/app-bar/search/_variables.scss

@@ -1,18 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-$background: rgba(255, 255, 255, 0.08) !default;
-$background-focused: rgba(255, 255, 255, 0.12) !default;
-$disabled-opacity: 0.26;
-$hover-opacity: 0.87;
-$height: 36px !default;
-$transition-duration: 150ms !default;
-$timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
-$theme-values: (
-  background: $background,
-  background-focused: $background-focused,
-  disabled-opacity: $disabled-opacity,
-  hover-opacity: $hover-opacity
-);

package/styles/radio/_mixins.scss

@@ -1,309 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-//
-// Copyright 2016 Google Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-//
-
-// stylelint-disable selector-class-pattern
-
-@use 'sass:map';
-@use '@material/animation/animation' as mdc-animation;
-@use '@material/dom/dom' as mdc-dom;
-@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '@material/touch-target/variables' as mdc-touch-target-variables;
-@use '@material/theme/theme' as mdc-theme;
-@use './radio-theme';
-@use '../theme/custom-properties';
-@use '../theme';
-@use '../theme/theme-values';
-
-$ripple-target: '.mdc-radio__ripple';
-
-///
-/// Radio core styles.
-///
-@mixin core-styles($query: mdc-feature-targeting.all()) {
-  @include without-ripple($query);
-  @include ripple($query);
-
-  // FORGE (new): adding our custom wrapper element styles in the Shadow DOM
-  @include wrapper-styles;
-}
-
-@mixin wrapper-styles() {
-  .forge-radio-wrapper--disabled {
-    cursor: not-allowed;
-
-    ::slotted(label) {
-      cursor: not-allowed;
-    }
-  }
-}
-
-// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
-// radio styles. It is recommended that most users use `mdc-radio-core-styles` instead.
-@mixin without-ripple($query: mdc-feature-targeting.all()) {
-  // postcss-bem-linter: define radio
-
-  $feat-animation: mdc-feature-targeting.create-target($query, animation);
-  $feat-color: mdc-feature-targeting.create-target($query, color);
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  // @include mdc-touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE
-
-  .mdc-radio {
-    @include radio-theme.unchecked-stroke-color(radio-theme.$unchecked-color, $query: $query);
-    @include radio-theme.checked-stroke-color(radio-theme.$baseline-theme-color, $query: $query);
-    @include radio-theme.ink-color(radio-theme.$baseline-theme-color, $query: $query);
-    @include radio-theme.disabled-unchecked-stroke-color(radio-theme.$disabled-circle-color, $query: $query);
-    @include radio-theme.disabled-checked-stroke-color(radio-theme.$disabled-circle-color, $query: $query);
-    @include radio-theme.disabled-ink-color(radio-theme.$disabled-circle-color, $query: $query);
-    @include radio-theme.focus-indicator-color(radio-theme.$baseline-theme-color, $query: $query);
-    @include radio-theme.density(radio-theme.$density-scale, $query: $query);
-
-    @include mdc-dom.forced-colors-mode {
-      @include radio-theme.disabled-unchecked-stroke-color(GrayText, $query: $query);
-      @include radio-theme.disabled-checked-stroke-color(GrayText, $query: $query);
-      @include radio-theme.disabled-ink-color(GrayText, $query: $query);
-    }
-
-    @include mdc-feature-targeting.targets($feat-structure) {
-      display: inline-block;
-      position: relative;
-      flex: 0 0 auto;
-      box-sizing: content-box;
-      width: radio-theme.$icon-size;
-      height: radio-theme.$icon-size;
-      cursor: pointer;
-      /* @alternate */
-      will-change: opacity, transform, border-color, color;
-    }
-
-    // Container for radio circles and ripple.
-    &__background {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        display: inline-block;
-        position: relative;
-        box-sizing: border-box;
-        width: radio-theme.$icon-size;
-        height: radio-theme.$icon-size;
-      }
-
-      &::before {
-        @include mdc-feature-targeting.targets($feat-structure) {
-          position: absolute;
-          transform: scale(0, 0);
-          border-radius: 50%;
-          opacity: 0;
-          pointer-events: none;
-          content: '';
-        }
-
-        @include mdc-feature-targeting.targets($feat-animation) {
-          transition: exit(opacity), exit(transform);
-        }
-      }
-    }
-
-    &__outer-circle {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        position: absolute;
-        top: 0;
-        left: 0;
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        border-width: 2px;
-        border-style: solid;
-        border-radius: 50%;
-      }
-
-      @include mdc-feature-targeting.targets($feat-animation) {
-        transition: exit(border-color);
-      }
-    }
-
-    &__inner-circle {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        position: absolute;
-        top: 0;
-        left: 0;
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        transform: scale(0, 0);
-        border-width: 10px;
-        border-style: solid;
-        border-radius: 50%;
-      }
-
-      @include mdc-feature-targeting.targets($feat-animation) {
-        transition: exit(transform), exit(border-color);
-      }
-    }
-
-    // FORGE (modify): use slotted selector to target <input>
-    ::slotted(input[type=radio]) {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        position: absolute;
-        margin: 0;
-        padding: 0;
-        opacity: 0;
-        cursor: inherit;
-        z-index: 1;
-
-        // FORGE (new): make sure to stretch the input for touch target
-        top: 0;
-        right: 0;
-        left: 0;
-        width: radio-theme.$maximum-size;
-        height: radio-theme.$maximum-size;
-      }
-    }
-
-    // FORGE (new): we need to set the dense styles on the slotted input
-    &.forge-radio--dense {
-      @include radio-theme.density(-3);
-
-      ::slotted(input[type='radio']) {
-        width: radio-theme.$minimum-size;
-        height: radio-theme.$minimum-size;
-      }
-    }
-
-    // FORGE (new): we need to set the label color theme when disabled
-    &--disabled + ::slotted(label) {
-      @include theme.property(color, label-disabled-on-background);
-    }
-  }
-
-  // FORGE (modify): use FORGE  classes since <input> is slotted and not a sibling
-  .forge-radio--checked,
-  .mdc-radio--disabled {
-    .mdc-radio__background {
-      @include mdc-feature-targeting.targets($feat-animation) {
-        transition: enter(opacity), enter(transform);
-      }
-
-      .mdc-radio__outer-circle {
-        @include mdc-feature-targeting.targets($feat-animation) {
-          transition: enter(border-color);
-        }
-      }
-
-      .mdc-radio__inner-circle {
-        @include mdc-feature-targeting.targets($feat-animation) {
-          transition: enter(transform), enter(border-color);
-        }
-      }
-    }
-  }
-
-  .mdc-radio--disabled {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      cursor: default;
-      pointer-events: none;
-    }
-  }
-
-  // FORGE (modify): use FORGE  class since <input> is slotted and not a sibling
-  .forge-radio--checked {
-    .mdc-radio__background {
-      .mdc-radio__inner-circle {
-        @include mdc-feature-targeting.targets($feat-structure) {
-          transform: scale(0.5);
-        }
-
-        @include mdc-feature-targeting.targets($feat-animation) {
-          transition: enter(transform), enter(border-color);
-        }
-      }
-    }
-  }
-
-  // FORGE (modify): use FORGE  class since <input> is slotted and not a sibling
-  .mdc-radio--disabled {
-    .mdc-radio__background {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        cursor: default;
-      }
-    }
-  }
-
-  // FORGE (modify): use FORGE  class since <input> is slotted and not a sibling
-  .forge-radio--focused {
-    .mdc-radio__background::before {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        transform: scale(1);
-        opacity: map.get(mdc-ripple-theme.$dark-ink-opacities, focus);
-      }
-
-      @include mdc-feature-targeting.targets($feat-animation) {
-        transition: enter(opacity), enter(transform);
-      }
-    }
-  }
-
-  // postcss-bem-linter: end
-}
-
-// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
-// radio styles. It is recommended that most users use `mdc-radio-core-styles` instead.
-@mixin ripple($query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  @include mdc-ripple.common($query); // COPYBARA_COMMENT_THIS_LINE
-
-  .mdc-radio {
-    @include mdc-ripple.surface($query: $query, $ripple-target: $ripple-target);
-    @include mdc-ripple.radius-unbounded($query: $query, $ripple-target: $ripple-target);
-
-    // FORGE (modify): using forge-specific theme style custom property
-    $tertiary-prop: custom-properties.create(--forge-theme-tertiary, theme-values.$tertiary);
-    @include mdc-ripple-theme.states($color: $tertiary-prop, $query: $query, $ripple-target: $ripple-target);
-
-    &.mdc-ripple-upgraded,
-    &.mdc-ripple-upgraded--background-focused {
-      .mdc-radio__background::before {
-        @include mdc-feature-targeting.targets($feat-structure) {
-          content: none;
-        }
-      }
-    }
-  }
-
-  #{$ripple-target} {
-    @include mdc-ripple.target-common($query: $query);
-  }
-}
-
-@function enter($name) {
-  @return mdc-animation.enter($name, radio-theme.$transition-duration);
-}
-
-@function exit($name) {
-  @return mdc-animation.exit-temporary($name, radio-theme.$transition-duration);
-}