/* mixins & extensions */ @keyframes in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes in-down { 0% { opacity: 0; transform: translate3D(0, -5px, 0); } 100% { opacity: 1; transform: translate3D(0, 0, 0); } } @keyframes in-up { 0% { opacity: 0; transform: translate3D(0, 5px, 0); } 100% { opacity: 1; transform: translate3D(0, 0, 0); } } @keyframes in-scale { 0% { opacity: 0; transform: scale3D(0.95, 0.95, 1); } 100% { opacity: 1; transform: scale3D(1, 1, 1); } } :root { --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor)); --calcite-internal-duration-factor: var(--calcite-duration-factor, 1); --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor)); --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor)); --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor)); } .calcite-animate { opacity: 0; animation-fill-mode: both; animation-duration: var(--calcite-animation-timing); } .calcite-animate__in { animation-name: in; } .calcite-animate__in-down { animation-name: in-down; } .calcite-animate__in-up { animation-name: in-up; } .calcite-animate__in-scale { animation-name: in-scale; } @media (prefers-reduced-motion: reduce) { :root { --calcite-internal-duration-factor: 0.01; } } /** * Currently only used in Checkbox. */ :root { --calcite-floating-ui-transition: var(--calcite-animation-timing); } :host([hidden]) { display: none; } .container--s { padding-block: 0.25rem; font-size: var(--calcite-font-size--2); line-height: 1rem; padding-inline-end: 0.5rem; padding-inline-start: 1.5rem; } .container--m { padding-block: 0.5rem; font-size: var(--calcite-font-size--1); line-height: 1rem; padding-inline-end: 0.75rem; padding-inline-start: 2rem; } .container--l { padding-block: 0.75rem; font-size: var(--calcite-font-size-0); line-height: 1.25rem; padding-inline-end: 1rem; padding-inline-start: 2.5rem; } .container--s.container--none-selection { padding-inline-start: 0.25rem; } .container--s.container--none-selection .dropdown-link { padding-inline-start: 0px; } .container--m.container--none-selection { padding-inline-start: 0.5rem; } .container--m.container--none-selection .dropdown-link { padding-inline-start: 0px; } .container--l.container--none-selection { padding-inline-start: 0.75rem; } .container--l.container--none-selection .dropdown-link { padding-inline-start: 0px; } :host { position: relative; display: flex; flex-grow: 1; align-items: center; } .container { position: relative; display: flex; flex-grow: 1; cursor: pointer; align-items: center; color: var(--calcite-ui-text-3); text-decoration-line: none; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); text-align: start; } .dropdown-item-content { flex: 1 1 auto; padding-inline-end: auto; padding-inline-start: 0.25rem; } :host, .container--link a { outline-color: transparent; } :host(:focus) { outline: 2px solid transparent; outline: 2px solid var(--calcite-ui-brand); outline-offset: -2px; } .container--link { padding: 0px; } .container--link a { position: relative; display: flex; flex-grow: 1; cursor: pointer; align-items: center; color: var(--calcite-ui-text-3); text-decoration-line: none; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .container--s .dropdown-link { padding-block: 0.25rem; font-size: var(--calcite-font-size--2); line-height: 1rem; padding-inline-end: 0.5rem; padding-inline-start: 1.5rem; } .container--m .dropdown-link { padding-block: 0.5rem; font-size: var(--calcite-font-size--1); line-height: 1rem; padding-inline-end: 0.75rem; padding-inline-start: 2rem; } .container--l .dropdown-link { padding-block: 0.75rem; font-size: var(--calcite-font-size-0); line-height: 1.25rem; padding-inline-end: 1rem; padding-inline-start: 2.5rem; } :host(:hover) .container, :host(:active) .container { background-color: var(--calcite-ui-foreground-2); color: var(--calcite-ui-text-1); text-decoration-line: none; } :host(:hover) .container--link .dropdown-link, :host(:active) .container--link .dropdown-link { color: var(--calcite-ui-text-1); } :host(:focus) .container { color: var(--calcite-ui-text-1); text-decoration-line: none; } :host(:active) .container { background-color: var(--calcite-ui-foreground-3); } :host(:hover) .container:before, :host(:active) .container:before, :host(:focus) .container:before { opacity: 1; } :host([selected]) .container:not(.container--none-selection), :host([selected]) .container--link .dropdown-link { font-weight: var(--calcite-font-weight-medium); color: var(--calcite-ui-text-1); } :host([selected]) .container:not(.container--none-selection):before, :host([selected]) .container--link .dropdown-link:before { opacity: 1; color: var(--calcite-ui-brand); } :host([selected]) .container:not(.container--none-selection) calcite-icon, :host([selected]) .container--link .dropdown-link calcite-icon { color: var(--calcite-ui-brand); } .container--multi-selection:before, .container--none-selection:before { display: none; } .container--s:before { inset-inline-start: 0.5rem; } .container--m:before { inset-inline-start: 0.75rem; } .container--l:before { inset-inline-start: 1rem; } .dropdown-item-icon { position: absolute; opacity: 0; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transform: scale(0.9); } .container--s .dropdown-item-icon { inset-inline-start: 0.25rem; } .container--m .dropdown-item-icon { inset-inline-start: 0.5rem; } .container--l .dropdown-item-icon { inset-inline-start: 0.75rem; } :host(:hover) .dropdown-item-icon { color: var(--calcite-ui-border-1); opacity: 1; } :host([active]) .dropdown-item-icon { color: var(--calcite-ui-brand); opacity: 1; } .container--s .dropdown-item-icon-start { margin-inline-end: 0.5rem; margin-inline-start: 0.25rem; } .container--s .dropdown-item-icon-end { margin-inline-start: 0.5rem; } .container--m .dropdown-item-icon-start { margin-inline-end: 0.75rem; margin-inline-start: 0.25rem; } .container--m .dropdown-item-icon-end { margin-inline-start: 0.75rem; } .container--l .dropdown-item-icon-start { margin-inline-end: 1rem; margin-inline-start: 0.25rem; } .container--l .dropdown-item-icon-end { margin-inline-start: 1rem; }