|
|
| Строка 555: |
Строка 555: |
| opacity: 1; | | opacity: 1; |
| transition-delay: 0.1s; | | transition-delay: 0.1s; |
| }
| |
|
| |
|
| |
| .floating-dropdown {
| |
| position: relative;
| |
| user-select: none;
| |
| cursor: pointer;
| |
| text-align: center;
| |
| margin: 0.25em;
| |
| font-weight: bold;
| |
| border-radius: var(--border-radius-small);
| |
|
| |
| &[data-position='top'] {
| |
| .floating-dropdown--content {
| |
| transform-origin: bottom;
| |
| }
| |
|
| |
| .floating-dropdown--contains {
| |
| box-shadow: var(--box-shadow-medium--inv);
| |
| }
| |
| }
| |
|
| |
| &[data-position='bottom'] {
| |
| .floating-dropdown--content {
| |
| transform-origin: top;
| |
| }
| |
|
| |
| .floating-dropdown--contains {
| |
| box-shadow: var(--box-shadow-medium);
| |
| }
| |
| }
| |
|
| |
| .dropdown-fill {
| |
| border-radius: var(--border-radius-small);
| |
| transition-property: background-color, color;
| |
| transition-duration: var(--transition-time);
| |
| }
| |
|
| |
| &:hover .dropdown-fill {
| |
| background-color: var(--color-bg-hover);
| |
| }
| |
|
| |
| &--content {
| |
| position: absolute;
| |
| visibility: hidden;
| |
| opacity: 0;
| |
| transform: scale(0.75);
| |
| transition-property: opacity, visibility, transform;
| |
| transition-duration: var(--transition-time);
| |
| z-index: var(--index-medium);
| |
|
| |
| &.visible {
| |
| visibility: visible;
| |
| opacity: 1;
| |
| transform: scale(0.99999);
| |
|
| |
| ~ .dropdown-fill {
| |
| background-color: var(--color-green);
| |
| color: var(--color-white);
| |
|
| |
| &:hover {
| |
| background-color: var(--color-green-light);
| |
| }
| |
| }
| |
| }
| |
|
| |
| .dropdown-content-fill {
| |
| .absolute-fill();
| |
| background-color: var(--color-base-fill);
| |
| border-radius: var(--border-radius-medium);
| |
| }
| |
| }
| |
|
| |
| &--contains {
| |
| cursor: auto;
| |
| user-select: text;
| |
| overflow: auto;
| |
| font-weight: normal;
| |
| line-height: 1.3;
| |
| max-height: 50vh;
| |
| padding: 0.25rem 0.5rem;
| |
| border: var(--border-classic);
| |
| border-radius: var(--border-radius-medium);
| |
| }
| |
| } | | } |
