@natec/mef-dev-ui-kit 20.0.0-beta.1 → 20.0.1

package/src/lib/v2/chips/chip.scss

@@ -1,646 +0,0 @@
-$_checkmark-size: 20px;
-$_trailing-icon-size: 18px;
-$_action-padding: 12px;
-$_graphic-padding: 6px;
-$_trailing-action-padding: 8px;
-$_avatar-leading-padding: 4px;
-$_avatar-trailing-padding: 8px;
-
-.mdc-evolution-chip,
-.mdc-evolution-chip__cell,
-.mdc-evolution-chip__action {
-    display: inline-flex;
-    align-items: center;
-}
-
-.mdc-evolution-chip {
-    position: relative;
-    max-width: 100%;
-}
-
-.mdc-evolution-chip__cell,
-.mdc-evolution-chip__action {
-    height: 100%;
-}
-
-.mdc-evolution-chip__cell--primary {
-    flex-basis: 100%;
-    overflow-x: hidden;
-}
-
-.mdc-evolution-chip__cell--trailing {
-    flex: 1 0 auto;
-}
-
-.mdc-evolution-chip__action {
-    align-items: center;
-    background: none;
-    border: none;
-    box-sizing: content-box;
-    cursor: pointer;
-    display: inline-flex;
-    justify-content: center;
-    outline: none;
-    padding: 0;
-    text-decoration: none;
-    color: inherit;
-}
-
-.mdc-evolution-chip__action--presentational {
-    cursor: auto;
-}
-
-.mdc-evolution-chip--disabled,
-.mdc-evolution-chip__action:disabled {
-    pointer-events: none;
-}
-
-.mdc-evolution-chip__action--primary {
-    font: inherit;
-    letter-spacing: inherit;
-    white-space: inherit;
-    overflow-x: hidden;
-
-    .md-mdc-standard-chip &::before {
-        border-width: 1px;
-        border-radius: 8px;
-        box-sizing: border-box;
-        content: '';
-        height: 100%;
-        left: 0;
-        position: absolute;
-        pointer-events: none;
-        top: 0;
-        width: 100%;
-        z-index: 1;
-        border-style: solid;
-    }
-
-    .md-mdc-standard-chip & {
-        padding-left: $_action-padding;
-        padding-right: $_action-padding;
-    }
-
-    .md-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic & {
-        padding-left: 0;
-        padding-right: $_action-padding;
-    }
-
-    [dir='rtl'] .md-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic & {
-        padding-left: $_action-padding;
-        padding-right: 0;
-    }
-
-    .md-mdc-standard-chip:not(.mdc-evolution-chip--disabled) &::before {
-        border-color: #74777f;
-    }
-
-    &:not(.mdc-evolution-chip__action--presentational):focus::before {
-        border-color: #74777f;
-    }
-
-    .md-mdc-standard-chip.mdc-evolution-chip--disabled &::before {
-        border-color: color-mix(in srgb, var(#1a1b1f) 12%, transparent);
-    }
-
-    .md-mdc-standard-chip.mdc-evolution-chip--selected &::before {
-        border-width: 0;
-    }
-
-    .md-mdc-basic-chip & {
-        font: inherit;
-    }
-
-    $with-graphic: '.mdc-evolution-chip--with-primary-graphic';
-    $with-leading: '.mdc-evolution-chip--with-leading-action';
-    $with-trailing: '.mdc-evolution-chip--with-trailing-action';
-
-    .md-mdc-standard-chip#{$with-leading} & {
-        padding-left: 0;
-        padding-right: $_action-padding;
-    }
-
-    [dir='rtl'] .md-mdc-standard-chip#{$with-leading} & {
-        padding-left: $_action-padding;
-        padding-right: 0;
-    }
-
-    .md-mdc-standard-chip#{$with-trailing} & {
-        padding-left: $_action-padding;
-        padding-right: 0;
-    }
-
-    [dir='rtl'] .md-mdc-standard-chip#{$with-trailing} & {
-        padding-left: 0;
-        padding-right: $_action-padding;
-    }
-
-    .md-mdc-standard-chip#{$with-leading}#{$with-trailing} & {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    .md-mdc-standard-chip#{$with-graphic}#{$with-trailing} & {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    [dir='rtl'] .md-mdc-standard-chip#{$with-graphic}#{$with-trailing} & {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    .mdc-evolution-chip--with-avatar#{$with-graphic} & {
-        padding-left: 0;
-        padding-right: $_action-padding;
-    }
-
-    [dir='rtl'] .mdc-evolution-chip--with-avatar#{$with-graphic} & {
-        padding-left: $_action-padding;
-        padding-right: 0;
-    }
-
-    .mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    [dir='rtl'] .mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
-        padding-left: 0;
-        padding-right: 0;
-    }
-}
-
-.mdc-evolution-chip__action--secondary {
-    position: relative;
-    overflow: visible;
-
-    .md-mdc-standard-chip:not(.mdc-evolution-chip--disabled) & {
-        color: #44474e;
-    }
-
-    .md-mdc-standard-chip.mdc-evolution-chip--disabled & {
-        color: #1a1b1f;
-    }
-
-    $with-graphic: '.mdc-evolution-chip--with-primary-graphic';
-    $with-trailing: '.mdc-evolution-chip--with-trailing-action';
-
-    .md-mdc-standard-chip#{$with-trailing} & {
-        padding-left: $_trailing-action-padding;
-        padding-right: $_trailing-action-padding;
-    }
-
-    .md-mdc-standard-chip#{$with-graphic}#{$with-trailing} & {
-        padding-left: $_trailing-action-padding;
-        padding-right: $_trailing-action-padding;
-    }
-
-    .mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
-        padding-left: $_avatar-trailing-padding;
-        padding-right: $_avatar-trailing-padding;
-    }
-
-    [dir='rtl'] .mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
-        padding-left: $_avatar-trailing-padding;
-        padding-right: $_avatar-trailing-padding;
-    }
-}
-
-.mdc-evolution-chip__text-label {
-    -webkit-user-select: none;
-    user-select: none;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-
-    .md-mdc-standard-chip & {
-        font-family: Montserrat;
-        line-height: 1.25rem;
-        font-size: 0.875rem;
-        font-weight: 500;
-        letter-spacing: 0.006rem;
-    }
-
-    .md-mdc-standard-chip:not(.mdc-evolution-chip--disabled) & {
-        color: #44474e;
-    }
-
-    .md-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) & {
-        color: #3e4759;
-    }
-
-    .md-mdc-standard-chip.mdc-evolution-chip--disabled &,
-    .md-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled & {
-        color: color-mix(in srgb, #1a1b1f 38%, transparent);
-    }
-}
-
-.mdc-evolution-chip__graphic {
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    overflow: hidden;
-    pointer-events: none;
-    position: relative;
-    flex: 1 0 auto;
-
-    .md-mdc-standard-chip & {
-        width: 24px;
-        height: 24px;
-        font-size: 24px;
-    }
-
-    .mdc-evolution-chip--selecting & {
-        transition: width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    $with-icon: '.mdc-evolution-chip--with-primary-icon';
-    $with-graphic: '.mdc-evolution-chip--with-primary-graphic';
-    $with-leading: '.mdc-evolution-chip--with-leading-action';
-    $with-trailing: '.mdc-evolution-chip--with-trailing-action';
-
-    .mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(#{$with-icon}) & {
-        width: 0;
-    }
-
-    .md-mdc-standard-chip#{$with-graphic} & {
-        padding-left: $_graphic-padding;
-        padding-right: $_graphic-padding;
-    }
-
-    .mdc-evolution-chip--with-avatar#{$with-graphic} & {
-        padding-left: $_avatar-leading-padding;
-        padding-right: $_avatar-trailing-padding;
-    }
-
-    [dir='rtl'] .mdc-evolution-chip--with-avatar#{$with-graphic} & {
-        padding-left: $_avatar-trailing-padding;
-        padding-right: $_avatar-leading-padding;
-    }
-
-    .md-mdc-standard-chip#{$with-graphic}#{$with-trailing} & {
-        padding-left: $_graphic-padding;
-        padding-right: $_graphic-padding;
-    }
-
-    .mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
-        padding-left: $_avatar-leading-padding;
-        padding-right: $_avatar-trailing-padding;
-    }
-
-    [dir='rtl'] .mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
-        padding-left: $_avatar-trailing-padding;
-        padding-right: $_avatar-leading-padding;
-    }
-
-    .mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-leading} & {
-        padding-left: 0;
-    }
-}
-
-.mdc-evolution-chip__checkmark {
-    position: absolute;
-    opacity: 0;
-    top: 50%;
-    left: 50%;
-    height: $_checkmark-size;
-    width: $_checkmark-size;
-
-    .md-mdc-standard-chip:not(.mdc-evolution-chip--disabled) & {
-        color: #3e4759;
-    }
-
-    .md-mdc-standard-chip.mdc-evolution-chip--disabled & {
-        color: #1a1b1f;
-    }
-
-    .mdc-evolution-chip--selecting & {
-        transition: transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
-        transform: translate(-75%, -50%);
-    }
-
-    .mdc-evolution-chip--selected & {
-        transform: translate(-50%, -50%);
-        opacity: 1;
-    }
-}
-
-.mdc-evolution-chip__checkmark-svg {
-    display: block;
-}
-
-.mdc-evolution-chip__checkmark-path {
-    stroke-width: 2px;
-    stroke-dasharray: 29.7833385;
-    stroke-dashoffset: 29.7833385;
-    stroke: currentColor;
-
-    .mdc-evolution-chip--selecting & {
-        transition: stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .mdc-evolution-chip--selected & {
-        stroke-dashoffset: 0;
-    }
-}
-
-.mdc-evolution-chip__icon--trailing {
-    .md-mdc-standard-chip & {
-        height: $_trailing-icon-size;
-        width: $_trailing-icon-size;
-        font-size: $_trailing-icon-size;
-    }
-
-    .mdc-evolution-chip--disabled &.md-mdc-chip-remove {
-        opacity: .38;
-
-        &:focus {
-            opacity: .38;
-        }
-    }
-}
-
-.md-mdc-standard-chip {
-    border-radius: 8px;
-    height: 32px;
-
-    &:not(.mdc-evolution-chip--disabled) {
-        background-color: transparent;
-    }
-
-    &.mdc-evolution-chip--disabled {
-        background-color: color-mix(in srgb, #1a1b1f 38%, transparent);
-    }
-
-    &.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) {
-        background-color: #3e4759;
-    }
-
-    &.mdc-evolution-chip--selected.mdc-evolution-chip--disabled {
-        background-color: color-mix(in srgb, #1a1b1f 38%, transparent);
-    }
-}
-
-.mdc-evolution-chip__icon--primary {
-    .md-mdc-standard-chip & {
-        border-radius: 24px;
-        width: 18px;
-        height: 18px;
-        font-size: 18px;
-    }
-
-    .mdc-evolution-chip--selected & {
-        opacity: 0;
-    }
-
-    .md-mdc-standard-chip:not(.mdc-evolution-chip--disabled) & {
-        color: #44474e;
-    }
-
-    .md-mdc-standard-chip.mdc-evolution-chip--disabled & {
-        color: #1a1b1f;
-    }
-}
-
-.md-mdc-chip-highlighted {
-    --md-chip-with-icon-icon-color: #3e4759;
-    --md-chip-elevated-container-color: #3e4759;
-    --md-chip-label-text-color: #3e4759;
-    --md-chip-outline-width: 0;
-}
-
-.md-mdc-chip-focus-overlay {
-    background: #44474e;
-
-    .md-mdc-chip-selected &,
-    .md-mdc-chip-highlighted & {
-        background: #3e4759;
-    }
-
-    .md-mdc-chip:hover & {
-        background: #44474e;
-        opacity: 0.08;
-    }
-
-    .md-mdc-chip-selected:hover,
-    .md-mdc-chip-highlighted:hover & {
-        background: #44474e;
-        opacity: 0.08;
-    }
-
-    .md-mdc-chip.cdk-focused & {
-        background: #44474e;
-        opacity: 0.12;
-    }
-
-    .md-mdc-chip-selected.cdk-focused &,
-    .md-mdc-chip-highlighted.cdk-focused & {
-        background: #44474e;
-        opacity: 0.12;
-    }
-}
-
-.mdc-evolution-chip--disabled:not(.mdc-evolution-chip--selected) .md-mdc-chip-avatar {
-    opacity: 0.38;
-}
-
-.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing {
-    opacity: 0.38;
-}
-
-.mdc-evolution-chip--disabled.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark {
-    opacity: 0.38;
-}
-
-.md-mdc-standard-chip {
-    &.mdc-evolution-chip--disabled {
-        opacity: 1;
-    }
-
-    &.mdc-evolution-chip--selected,
-    &.md-mdc-chip-highlighted {
-        .mdc-evolution-chip__icon--trailing {
-            color: #44474e;
-        }
-
-        &.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing {
-            color: #1a1b1f;
-        }
-    }
-}
-
-.md-mdc-chip-edit,
-.md-mdc-chip-remove {
-
-    &:focus {
-        opacity: 1;
-    }
-
-    &::after {
-        background-color: #44474e;
-    }
-
-    &:hover::after {
-        opacity: 0.8;
-    }
-
-    &:focus::after {
-        opacity: 0.12;
-    }
-}
-
-.md-mdc-chip-selected .md-mdc-chip-remove::after,
-.md-mdc-chip-highlighted .md-mdc-chip-remove::after {
-    background-color: #44474e;
-}
-
-.md-mdc-chip.cdk-focused {
-    .md-mdc-chip-edit,
-    .md-mdc-chip-remove {
-        &:focus::after {
-            opacity: 0.12;
-        }
-
-        &:hover::after {
-            opacity: 0.08;
-        }
-    }
-}
-
-.md-mdc-standard-chip {
-    -webkit-tap-highlight-color: transparent;
-
-    .md-mdc-chip-graphic,
-    .md-mdc-chip-trailing-icon {
-        box-sizing: content-box;
-    }
-
-    &._md-animation-noopable {
-        &,
-        .mdc-evolution-chip__graphic,
-        .mdc-evolution-chip__checkmark,
-        .mdc-evolution-chip__checkmark-path {
-            transition-duration: 1ms;
-            animation-duration: 1ms;
-        }
-    }
-}
-
-.md-mdc-chip-focus-overlay {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    position: absolute;
-    pointer-events: none;
-    opacity: 0;
-    border-radius: inherit;
-    transition: opacity 150ms linear;
-
-    ._md-animation-noopable & {
-        transition: none;
-    }
-
-    .md-mdc-basic-chip & {
-        display: none;
-    }
-}
-
-.md-mdc-chip-avatar {
-    text-align: center;
-    line-height: 1;
-
-    color: var(--md-chip-with-icon-icon-color, currentColor);
-}
-
-.md-mdc-chip {
-    position: relative;
-
-    z-index: 0;
-}
-
-.md-mdc-chip-action-label {
-    text-align: left;
-
-    z-index: 1;
-
-    [dir='rtl'] & {
-        text-align: right;
-    }
-
-    .md-mdc-chip.mdc-evolution-chip--with-trailing-action & {
-        position: relative;
-    }
-
-    .md-mdc-chip-primary-focus-indicator {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
-    }
-
-    .md-focus-indicator::before {
-        $default-border-width: 3px;
-        $border-width: var(--md-focus-indicator-border-width, #{$default-border-width});
-        $offset: calc(#{$border-width} + 2px);
-        margin: calc(#{$offset} * -1);
-    }
-}
-
-.md-mdc-chip-edit,
-.md-mdc-chip-remove {
-    &::before {
-        $default-border-width: 3px;
-        $offset: var(--md-focus-indicator-border-width, #{$default-border-width});
-        margin: calc(#{$offset} * -1);
-
-        left: 8px;
-        right: 8px;
-    }
-
-    &::after {
-        $_touch-target-size: 48px;
-        $_ripple-size: 24px;
-        $offset: 3px;
-        content: '';
-        display: block;
-        opacity: 0;
-        position: absolute;
-        top: 0 - $offset;
-        bottom: 0 - $offset;
-        left: 8px - $offset;
-        right: 8px - $offset;
-        border-radius: 50%;
-        box-sizing: border-box;
-        padding: calc(($_touch-target-size - $_ripple-size) / 2);
-        margin: calc((($_touch-target-size - $_ripple-size) / 2) * -1);
-        background-clip: content-box;
-    }
-
-    .md-icon {
-        width: $_trailing-icon-size;
-        height: $_trailing-icon-size;
-        font-size: $_trailing-icon-size;
-        box-sizing: content-box;
-    }
-}
-
-.md-chip-edit-input {
-    cursor: text;
-    display: inline-block;
-    color: inherit;
-    outline: 0;
-}
-
-.md-mdc-chip-action:focus .md-focus-indicator::before {
-    content: '';
-}
-
-.mdc-evolution-chip__icon,
-.md-mdc-chip-edit .md-icon,
-.md-mdc-chip-remove .md-icon {
-    min-height: fit-content;
-}