Files
directus/src/styles/_tooltip.scss
Rijk van Zanten feaafe6440 109 tiny tweaks (#574)
* no cursor when disabled

* consistent disabled styling

* divider icon alignment

* don’t show last item’s border

* notifications spacing

* status placeholder

* default status icon placeholder

* fix textarea focus style

* tags styling

* proper tags padding when empty

* proper input number step hovers

* show background color

* Fix data-model collections overview name class

* Don't use display template for batch mode

* Fix headline being hidden

* Use formatted name fo bookmarks breadcrumb

* Move drawer open to app store

* Fix tests

* slider value style

* Add comments to users/files

* Make comments selectable

* Move window width drawer state to app parent

* Fix private user condition

* Allow relationships to system collections

* Refresh revisions drawer detail on save and stay

* Add disabled support to m2o / user

* Center v-infos

* Hide default drag image

* Ellipsis all the things

* Use icon interface for fallback icon

* Render icons grid based on available space

* Fix ellipsis on cardsl

* fix batch edit checkbox styling

* Let render template ellipsis its raw values

* Fix render template

* Default cropping to current aspect ratio

* missing translation

* secondary button style

so sorry, rijk… it’s the only one (promise)

* Add image dimensions, add drag mode

* track the apology

* no elipses on titles

* Add cancel crop button

* Only show new dimensions on crop

* Inform file preview if it's in modal

* preview styling

* Install pretty-bytes

* Show file info in drawer sidebar

* Use outline icons in drawer sidebar

* don’t confuse null with subdued text value

* edge-case justification

* Show character count remaining

* Fix storybook + typing error

* Add length constraints to color

* Watch value prop

* Fix tags

* Open icon on icon click

* Fix overflow of title

* Show batch editing x items

* Fix edits emptying input on cancel

* Don't count locked filters in no results message

* simple batch edit title

* Fix headline being invisible

* Add no-options notice to interfaces/displays

* Use existing collection preset in browse modal

* Don't emit null on invalid hex

* Use correct titles in modal-detail

* style char remaining

* file info sidebar styling

* Another attempt at trying to make render template behave in any contetx

* Show remaining char count on focus only

* Remove fade, prevent jumping

* Render skeleton loader in correct height

* Fix o2m not fetching items

* Pass collection/field to render display in o2m

* Add no-items message in table

* Add default state to v-table

* Allow ISO8601 in datetime interface

* Title format selected icon name

* avoid blinking bg on load

* align characters remaining

* Default to tabular in browse modal

* Add disabled string

* Add center + make gray default notice

* Add disabled-no-value state

* Export getItems

* Expose refresh method on layouts

* Fix (batch) deletion from browse)

* Fix interface disabled on batch

* Add interface not found notice

* Add default label (active) for toggle interface

* Use options / prop default for toggle

* Support ISO 8601 in datetime display

* Render edit form in form width

* Fix deselecting newly selected item

* Undo all selection when closing browse modal

* Fix deselecting newly selected item

* wider divider

* update webhooks table

* Fix checkbox label disappearing

* Fix tests.. by removing them

Co-authored-by: Ben Haynes <ben@rngr.org>
2020-05-15 18:44:21 -04:00

115 lines
2.0 KiB
SCSS

#tooltip {
$arrow-alignment: 5px;
--tooltip-foreground-color: var(--foreground-inverted);
--tooltip-background-color: var(--background-inverted);
position: absolute;
top: 0;
left: 0;
z-index: 500;
display: none;
max-width: 260px;
padding: 4px 8px;
color: var(--tooltip-foreground-color);
background-color: var(--tooltip-background-color);
border-radius: 4px;
transition: opacity 200ms;
&.inverted {
--tooltip-foreground-color: var(--foreground-normal);
--tooltip-background-color: var(--background-subdued);
}
&.visible {
display: block;
}
&.enter,
&.leave-active {
opacity: 0;
}
&.enter-active,
&.leave {
opacity: 1;
}
&::after {
position: absolute;
top: -5px;
left: calc(50% - 5px);
width: 0;
height: 0;
border-right: 5px solid transparent;
border-bottom: 5px solid var(--tooltip-background-color);
border-left: 5px solid transparent;
content: '';
}
&.start::after {
right: $arrow-alignment;
left: unset;
}
&.end::after {
left: $arrow-alignment;
}
&.top::after {
top: unset;
bottom: -5px;
left: calc(50% - 5px);
border-top: 5px solid var(--tooltip-background-color);
border-right: 5px solid transparent;
border-bottom: unset;
border-left: 5px solid transparent;
}
&.top.start::after {
right: $arrow-alignment;
left: unset;
}
&.top.end::after {
left: $arrow-alignment;
}
&.left::after {
top: calc(50% - 5px);
right: -5px;
left: unset;
border-top: 5px solid transparent;
border-right: unset;
border-bottom: 5px solid transparent;
border-left: 5px solid var(--tooltip-background-color);
}
&.left.start::after {
top: unset;
bottom: $arrow-alignment;
}
&.left.end::after {
top: $arrow-alignment;
}
&.right::after {
top: calc(50% - 5px);
left: -5px;
border-top: 5px solid transparent;
border-right: 5px solid var(--tooltip-background-color);
border-bottom: 5px solid transparent;
border-left: unset;
}
&.right.start::after {
top: unset;
bottom: $arrow-alignment;
}
&.right.end::after {
top: $arrow-alignment;
}
}