On rajoute des tooltips
This commit is contained in:
parent
9b470f0220
commit
e19f0f4ab9
10 changed files with 640 additions and 4 deletions
4
.gitignore
vendored
4
.gitignore
vendored
|
|
@ -6,8 +6,8 @@
|
|||
*.log
|
||||
.sass-cache/
|
||||
|
||||
static/
|
||||
media/
|
||||
/static/
|
||||
/media/
|
||||
|
||||
venv/
|
||||
.python-version
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
{% endif %}
|
||||
|
||||
{% if e.created_by == user %}
|
||||
<a class="has-text-primary-light ml-3" href="{% url 'election.admin' e.pk %}">
|
||||
<a class="has-text-primary-light ml-3 has-tooltip-light" href="{% url 'election.admin' e.pk %}" data-tooltip="{% trans "Administrer" %}">
|
||||
<span class="icon">
|
||||
<i class="fas fa-cog"></i>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -10159,6 +10159,351 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
|||
padding: 3rem 1.5rem 6rem;
|
||||
}
|
||||
|
||||
[data-tooltip]:not(.is-loading), [data-tooltip]:not(.is-disabled), [data-tooltip]:not([disabled]) {
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading)::before, [data-tooltip]:not(.is-disabled)::before, [data-tooltip]:not([disabled])::before {
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 0.75rem;
|
||||
hyphens: auto;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
z-index: 1020;
|
||||
background: rgba(74, 74, 74, 0.9);
|
||||
border-radius: 2px;
|
||||
content: attr(data-tooltip);
|
||||
padding: 0.5rem 1rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre-line;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading)::before, [data-tooltip]:not(.is-disabled)::before, [data-tooltip]:not([disabled])::before {
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
margin-top: -5px;
|
||||
margin-bottom: auto;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-arrow::after, [data-tooltip]:not(.is-disabled).has-tooltip-arrow::after, [data-tooltip]:not([disabled]).has-tooltip-arrow::after {
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 0.75rem;
|
||||
hyphens: auto;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
z-index: 1020;
|
||||
content: "";
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
border-color: rgba(74, 74, 74, 0.9) transparent transparent transparent;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-arrow.has-tooltip-arrow::after, [data-tooltip]:not(.is-disabled).has-tooltip-arrow.has-tooltip-arrow::after, [data-tooltip]:not([disabled]).has-tooltip-arrow.has-tooltip-arrow::after {
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
margin-top: -5px;
|
||||
margin-right: auto;
|
||||
margin-bottom: auto;
|
||||
margin-left: -5px;
|
||||
border-color: rgba(74, 74, 74, 0.9) transparent transparent transparent;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-bottom.has-tooltip-arrow::after, [data-tooltip]:not(.is-disabled).has-tooltip-bottom.has-tooltip-arrow::after, [data-tooltip]:not([disabled]).has-tooltip-bottom.has-tooltip-arrow::after {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: -1px;
|
||||
left: 50%;
|
||||
margin-top: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: -5px;
|
||||
margin-left: -5px;
|
||||
border-color: transparent transparent rgba(74, 74, 74, 0.9) transparent;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-bottom::before, [data-tooltip]:not(.is-disabled).has-tooltip-bottom::before, [data-tooltip]:not([disabled]).has-tooltip-bottom::before {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-top: auto;
|
||||
margin-bottom: -5px;
|
||||
transform: translate(-50%, 100%);
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-left.has-tooltip-arrow::after, [data-tooltip]:not(.is-disabled).has-tooltip-left.has-tooltip-arrow::after, [data-tooltip]:not([disabled]).has-tooltip-left.has-tooltip-arrow::after {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 50%;
|
||||
left: 0;
|
||||
margin-top: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: -6px;
|
||||
margin-left: -5px;
|
||||
border-color: transparent transparent transparent rgba(74, 74, 74, 0.9);
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-left::before, [data-tooltip]:not(.is-disabled).has-tooltip-left::before, [data-tooltip]:not([disabled]).has-tooltip-left::before {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 50%;
|
||||
left: -5px;
|
||||
transform: translate(-100%, 50%);
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-right.has-tooltip-arrow::after, [data-tooltip]:not(.is-disabled).has-tooltip-right.has-tooltip-arrow::after, [data-tooltip]:not([disabled]).has-tooltip-right.has-tooltip-arrow::after {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 50%;
|
||||
left: auto;
|
||||
margin-top: auto;
|
||||
margin-right: -6px;
|
||||
margin-bottom: -6px;
|
||||
margin-left: auto;
|
||||
border-color: transparent rgba(74, 74, 74, 0.9) transparent transparent;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-right::before, [data-tooltip]:not(.is-disabled).has-tooltip-right::before, [data-tooltip]:not([disabled]).has-tooltip-right::before {
|
||||
top: auto;
|
||||
right: -5px;
|
||||
bottom: 50%;
|
||||
left: auto;
|
||||
margin-top: auto;
|
||||
transform: translate(100%, 50%);
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-multiline::before, [data-tooltip]:not(.is-disabled).has-tooltip-multiline::before, [data-tooltip]:not([disabled]).has-tooltip-multiline::before {
|
||||
height: auto;
|
||||
width: 15rem;
|
||||
max-width: 15rem;
|
||||
text-overflow: clip;
|
||||
white-space: normal;
|
||||
word-break: keep-all;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-text-left::before, [data-tooltip]:not(.is-disabled).has-tooltip-text-left::before, [data-tooltip]:not([disabled]).has-tooltip-text-left::before {
|
||||
text-align: left;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-text-centered::before, [data-tooltip]:not(.is-disabled).has-tooltip-text-centered::before, [data-tooltip]:not([disabled]).has-tooltip-text-centered::before {
|
||||
text-align: center;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-text-right::before, [data-tooltip]:not(.is-disabled).has-tooltip-text-right::before, [data-tooltip]:not([disabled]).has-tooltip-text-right::before {
|
||||
text-align: right;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-white::after, [data-tooltip]:not(.is-disabled).has-tooltip-white::after, [data-tooltip]:not([disabled]).has-tooltip-white::after {
|
||||
border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-white.has-tooltip-bottom::after, [data-tooltip]:not(.is-disabled).has-tooltip-white.has-tooltip-bottom::after, [data-tooltip]:not([disabled]).has-tooltip-white.has-tooltip-bottom::after {
|
||||
border-color: transparent transparent rgba(255, 255, 255, 0.9) transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-white.has-tooltip-left::after, [data-tooltip]:not(.is-disabled).has-tooltip-white.has-tooltip-left::after, [data-tooltip]:not([disabled]).has-tooltip-white.has-tooltip-left::after {
|
||||
border-color: transparent transparent transparent rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-white.has-tooltip-right::after, [data-tooltip]:not(.is-disabled).has-tooltip-white.has-tooltip-right::after, [data-tooltip]:not([disabled]).has-tooltip-white.has-tooltip-right::after {
|
||||
border-color: transparent rgba(255, 255, 255, 0.9) transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-white:before, [data-tooltip]:not(.is-disabled).has-tooltip-white:before, [data-tooltip]:not([disabled]).has-tooltip-white:before {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
color: #0a0a0a;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-black::after, [data-tooltip]:not(.is-disabled).has-tooltip-black::after, [data-tooltip]:not([disabled]).has-tooltip-black::after {
|
||||
border-color: rgba(10, 10, 10, 0.9) transparent transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-black.has-tooltip-bottom::after, [data-tooltip]:not(.is-disabled).has-tooltip-black.has-tooltip-bottom::after, [data-tooltip]:not([disabled]).has-tooltip-black.has-tooltip-bottom::after {
|
||||
border-color: transparent transparent rgba(10, 10, 10, 0.9) transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-black.has-tooltip-left::after, [data-tooltip]:not(.is-disabled).has-tooltip-black.has-tooltip-left::after, [data-tooltip]:not([disabled]).has-tooltip-black.has-tooltip-left::after {
|
||||
border-color: transparent transparent transparent rgba(10, 10, 10, 0.9) !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-black.has-tooltip-right::after, [data-tooltip]:not(.is-disabled).has-tooltip-black.has-tooltip-right::after, [data-tooltip]:not([disabled]).has-tooltip-black.has-tooltip-right::after {
|
||||
border-color: transparent rgba(10, 10, 10, 0.9) transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-black:before, [data-tooltip]:not(.is-disabled).has-tooltip-black:before, [data-tooltip]:not([disabled]).has-tooltip-black:before {
|
||||
background-color: rgba(10, 10, 10, 0.9);
|
||||
color: white;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-light::after, [data-tooltip]:not(.is-disabled).has-tooltip-light::after, [data-tooltip]:not([disabled]).has-tooltip-light::after {
|
||||
border-color: rgba(245, 245, 245, 0.9) transparent transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-light.has-tooltip-bottom::after, [data-tooltip]:not(.is-disabled).has-tooltip-light.has-tooltip-bottom::after, [data-tooltip]:not([disabled]).has-tooltip-light.has-tooltip-bottom::after {
|
||||
border-color: transparent transparent rgba(245, 245, 245, 0.9) transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-light.has-tooltip-left::after, [data-tooltip]:not(.is-disabled).has-tooltip-light.has-tooltip-left::after, [data-tooltip]:not([disabled]).has-tooltip-light.has-tooltip-left::after {
|
||||
border-color: transparent transparent transparent rgba(245, 245, 245, 0.9) !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-light.has-tooltip-right::after, [data-tooltip]:not(.is-disabled).has-tooltip-light.has-tooltip-right::after, [data-tooltip]:not([disabled]).has-tooltip-light.has-tooltip-right::after {
|
||||
border-color: transparent rgba(245, 245, 245, 0.9) transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-light:before, [data-tooltip]:not(.is-disabled).has-tooltip-light:before, [data-tooltip]:not([disabled]).has-tooltip-light:before {
|
||||
background-color: rgba(245, 245, 245, 0.9);
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-dark::after, [data-tooltip]:not(.is-disabled).has-tooltip-dark::after, [data-tooltip]:not([disabled]).has-tooltip-dark::after {
|
||||
border-color: rgba(54, 54, 54, 0.9) transparent transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-dark.has-tooltip-bottom::after, [data-tooltip]:not(.is-disabled).has-tooltip-dark.has-tooltip-bottom::after, [data-tooltip]:not([disabled]).has-tooltip-dark.has-tooltip-bottom::after {
|
||||
border-color: transparent transparent rgba(54, 54, 54, 0.9) transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-dark.has-tooltip-left::after, [data-tooltip]:not(.is-disabled).has-tooltip-dark.has-tooltip-left::after, [data-tooltip]:not([disabled]).has-tooltip-dark.has-tooltip-left::after {
|
||||
border-color: transparent transparent transparent rgba(54, 54, 54, 0.9) !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-dark.has-tooltip-right::after, [data-tooltip]:not(.is-disabled).has-tooltip-dark.has-tooltip-right::after, [data-tooltip]:not([disabled]).has-tooltip-dark.has-tooltip-right::after {
|
||||
border-color: transparent rgba(54, 54, 54, 0.9) transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-dark:before, [data-tooltip]:not(.is-disabled).has-tooltip-dark:before, [data-tooltip]:not([disabled]).has-tooltip-dark:before {
|
||||
background-color: rgba(54, 54, 54, 0.9);
|
||||
color: #fff;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-primary::after, [data-tooltip]:not(.is-disabled).has-tooltip-primary::after, [data-tooltip]:not([disabled]).has-tooltip-primary::after {
|
||||
border-color: rgba(29, 39, 58, 0.9) transparent transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-primary.has-tooltip-bottom::after, [data-tooltip]:not(.is-disabled).has-tooltip-primary.has-tooltip-bottom::after, [data-tooltip]:not([disabled]).has-tooltip-primary.has-tooltip-bottom::after {
|
||||
border-color: transparent transparent rgba(29, 39, 58, 0.9) transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-primary.has-tooltip-left::after, [data-tooltip]:not(.is-disabled).has-tooltip-primary.has-tooltip-left::after, [data-tooltip]:not([disabled]).has-tooltip-primary.has-tooltip-left::after {
|
||||
border-color: transparent transparent transparent rgba(29, 39, 58, 0.9) !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-primary.has-tooltip-right::after, [data-tooltip]:not(.is-disabled).has-tooltip-primary.has-tooltip-right::after, [data-tooltip]:not([disabled]).has-tooltip-primary.has-tooltip-right::after {
|
||||
border-color: transparent rgba(29, 39, 58, 0.9) transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-primary:before, [data-tooltip]:not(.is-disabled).has-tooltip-primary:before, [data-tooltip]:not([disabled]).has-tooltip-primary:before {
|
||||
background-color: rgba(29, 39, 58, 0.9);
|
||||
color: #fff;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-link::after, [data-tooltip]:not(.is-disabled).has-tooltip-link::after, [data-tooltip]:not([disabled]).has-tooltip-link::after {
|
||||
border-color: rgba(50, 115, 220, 0.9) transparent transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-link.has-tooltip-bottom::after, [data-tooltip]:not(.is-disabled).has-tooltip-link.has-tooltip-bottom::after, [data-tooltip]:not([disabled]).has-tooltip-link.has-tooltip-bottom::after {
|
||||
border-color: transparent transparent rgba(50, 115, 220, 0.9) transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-link.has-tooltip-left::after, [data-tooltip]:not(.is-disabled).has-tooltip-link.has-tooltip-left::after, [data-tooltip]:not([disabled]).has-tooltip-link.has-tooltip-left::after {
|
||||
border-color: transparent transparent transparent rgba(50, 115, 220, 0.9) !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-link.has-tooltip-right::after, [data-tooltip]:not(.is-disabled).has-tooltip-link.has-tooltip-right::after, [data-tooltip]:not([disabled]).has-tooltip-link.has-tooltip-right::after {
|
||||
border-color: transparent rgba(50, 115, 220, 0.9) transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-link:before, [data-tooltip]:not(.is-disabled).has-tooltip-link:before, [data-tooltip]:not([disabled]).has-tooltip-link:before {
|
||||
background-color: rgba(50, 115, 220, 0.9);
|
||||
color: #fff;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-info::after, [data-tooltip]:not(.is-disabled).has-tooltip-info::after, [data-tooltip]:not([disabled]).has-tooltip-info::after {
|
||||
border-color: rgba(50, 152, 220, 0.9) transparent transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-info.has-tooltip-bottom::after, [data-tooltip]:not(.is-disabled).has-tooltip-info.has-tooltip-bottom::after, [data-tooltip]:not([disabled]).has-tooltip-info.has-tooltip-bottom::after {
|
||||
border-color: transparent transparent rgba(50, 152, 220, 0.9) transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-info.has-tooltip-left::after, [data-tooltip]:not(.is-disabled).has-tooltip-info.has-tooltip-left::after, [data-tooltip]:not([disabled]).has-tooltip-info.has-tooltip-left::after {
|
||||
border-color: transparent transparent transparent rgba(50, 152, 220, 0.9) !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-info.has-tooltip-right::after, [data-tooltip]:not(.is-disabled).has-tooltip-info.has-tooltip-right::after, [data-tooltip]:not([disabled]).has-tooltip-info.has-tooltip-right::after {
|
||||
border-color: transparent rgba(50, 152, 220, 0.9) transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-info:before, [data-tooltip]:not(.is-disabled).has-tooltip-info:before, [data-tooltip]:not([disabled]).has-tooltip-info:before {
|
||||
background-color: rgba(50, 152, 220, 0.9);
|
||||
color: #fff;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-success::after, [data-tooltip]:not(.is-disabled).has-tooltip-success::after, [data-tooltip]:not([disabled]).has-tooltip-success::after {
|
||||
border-color: rgba(72, 199, 116, 0.9) transparent transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-success.has-tooltip-bottom::after, [data-tooltip]:not(.is-disabled).has-tooltip-success.has-tooltip-bottom::after, [data-tooltip]:not([disabled]).has-tooltip-success.has-tooltip-bottom::after {
|
||||
border-color: transparent transparent rgba(72, 199, 116, 0.9) transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-success.has-tooltip-left::after, [data-tooltip]:not(.is-disabled).has-tooltip-success.has-tooltip-left::after, [data-tooltip]:not([disabled]).has-tooltip-success.has-tooltip-left::after {
|
||||
border-color: transparent transparent transparent rgba(72, 199, 116, 0.9) !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-success.has-tooltip-right::after, [data-tooltip]:not(.is-disabled).has-tooltip-success.has-tooltip-right::after, [data-tooltip]:not([disabled]).has-tooltip-success.has-tooltip-right::after {
|
||||
border-color: transparent rgba(72, 199, 116, 0.9) transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-success:before, [data-tooltip]:not(.is-disabled).has-tooltip-success:before, [data-tooltip]:not([disabled]).has-tooltip-success:before {
|
||||
background-color: rgba(72, 199, 116, 0.9);
|
||||
color: #fff;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-warning::after, [data-tooltip]:not(.is-disabled).has-tooltip-warning::after, [data-tooltip]:not([disabled]).has-tooltip-warning::after {
|
||||
border-color: rgba(255, 221, 87, 0.9) transparent transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-warning.has-tooltip-bottom::after, [data-tooltip]:not(.is-disabled).has-tooltip-warning.has-tooltip-bottom::after, [data-tooltip]:not([disabled]).has-tooltip-warning.has-tooltip-bottom::after {
|
||||
border-color: transparent transparent rgba(255, 221, 87, 0.9) transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-warning.has-tooltip-left::after, [data-tooltip]:not(.is-disabled).has-tooltip-warning.has-tooltip-left::after, [data-tooltip]:not([disabled]).has-tooltip-warning.has-tooltip-left::after {
|
||||
border-color: transparent transparent transparent rgba(255, 221, 87, 0.9) !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-warning.has-tooltip-right::after, [data-tooltip]:not(.is-disabled).has-tooltip-warning.has-tooltip-right::after, [data-tooltip]:not([disabled]).has-tooltip-warning.has-tooltip-right::after {
|
||||
border-color: transparent rgba(255, 221, 87, 0.9) transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-warning:before, [data-tooltip]:not(.is-disabled).has-tooltip-warning:before, [data-tooltip]:not([disabled]).has-tooltip-warning:before {
|
||||
background-color: rgba(255, 221, 87, 0.9);
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-danger::after, [data-tooltip]:not(.is-disabled).has-tooltip-danger::after, [data-tooltip]:not([disabled]).has-tooltip-danger::after {
|
||||
border-color: rgba(241, 70, 104, 0.9) transparent transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-danger.has-tooltip-bottom::after, [data-tooltip]:not(.is-disabled).has-tooltip-danger.has-tooltip-bottom::after, [data-tooltip]:not([disabled]).has-tooltip-danger.has-tooltip-bottom::after {
|
||||
border-color: transparent transparent rgba(241, 70, 104, 0.9) transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-danger.has-tooltip-left::after, [data-tooltip]:not(.is-disabled).has-tooltip-danger.has-tooltip-left::after, [data-tooltip]:not([disabled]).has-tooltip-danger.has-tooltip-left::after {
|
||||
border-color: transparent transparent transparent rgba(241, 70, 104, 0.9) !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-danger.has-tooltip-right::after, [data-tooltip]:not(.is-disabled).has-tooltip-danger.has-tooltip-right::after, [data-tooltip]:not([disabled]).has-tooltip-danger.has-tooltip-right::after {
|
||||
border-color: transparent rgba(241, 70, 104, 0.9) transparent transparent !important;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-danger:before, [data-tooltip]:not(.is-disabled).has-tooltip-danger:before, [data-tooltip]:not([disabled]).has-tooltip-danger:before {
|
||||
background-color: rgba(241, 70, 104, 0.9);
|
||||
color: #fff;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading):hover::before, [data-tooltip]:not(.is-loading):hover::after, [data-tooltip]:not(.is-loading).has-tooltip-active::before, [data-tooltip]:not(.is-loading).has-tooltip-active::after, [data-tooltip]:not(.is-disabled):hover::before, [data-tooltip]:not(.is-disabled):hover::after, [data-tooltip]:not(.is-disabled).has-tooltip-active::before, [data-tooltip]:not(.is-disabled).has-tooltip-active::after, [data-tooltip]:not([disabled]):hover::before, [data-tooltip]:not([disabled]):hover::after, [data-tooltip]:not([disabled]).has-tooltip-active::before, [data-tooltip]:not([disabled]).has-tooltip-active::after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-fade::before, [data-tooltip]:not(.is-loading).has-tooltip-fade::after, [data-tooltip]:not(.is-disabled).has-tooltip-fade::before, [data-tooltip]:not(.is-disabled).has-tooltip-fade::after, [data-tooltip]:not([disabled]).has-tooltip-fade::before, [data-tooltip]:not([disabled]).has-tooltip-fade::after {
|
||||
transition: opacity 0.3s linear, visibility 0.3s linear;
|
||||
}
|
||||
|
||||
span[data-tooltip] {
|
||||
border-bottom: 1px dashed #dbdbdb;
|
||||
}
|
||||
span[data-tooltip].has-tooltip-white {
|
||||
border-bottom-color: white;
|
||||
}
|
||||
span[data-tooltip].has-tooltip-black {
|
||||
border-bottom-color: #171717;
|
||||
}
|
||||
span[data-tooltip].has-tooltip-light {
|
||||
border-bottom-color: white;
|
||||
}
|
||||
span[data-tooltip].has-tooltip-dark {
|
||||
border-bottom-color: #424242;
|
||||
}
|
||||
span[data-tooltip].has-tooltip-primary {
|
||||
border-bottom-color: #26334b;
|
||||
}
|
||||
span[data-tooltip].has-tooltip-link {
|
||||
border-bottom-color: #4882e0;
|
||||
}
|
||||
span[data-tooltip].has-tooltip-info {
|
||||
border-bottom-color: #48a3e0;
|
||||
}
|
||||
span[data-tooltip].has-tooltip-success {
|
||||
border-bottom-color: #5bcd83;
|
||||
}
|
||||
span[data-tooltip].has-tooltip-warning {
|
||||
border-bottom-color: #ffe270;
|
||||
}
|
||||
span[data-tooltip].has-tooltip-danger {
|
||||
border-bottom-color: #f35e7c;
|
||||
}
|
||||
|
||||
.control span[data-tooltip] {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
21
shared/static/src/bulma-tooltip/LICENSE
Normal file
21
shared/static/src/bulma-tooltip/LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2020 CreativeBulma
|
||||
|
||||
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.
|
||||
4
shared/static/src/bulma-tooltip/sass/_animation.sass
Normal file
4
shared/static/src/bulma-tooltip/sass/_animation.sass
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
=tooltip-fade
|
||||
&::before,
|
||||
&::after
|
||||
transition: opacity $tooltip-animation-duration $tooltip-animation-transition-timing-function, visibility $tooltip-animation-duration $tooltip-animation-transition-timing-function
|
||||
124
shared/static/src/bulma-tooltip/sass/_position.sass
Normal file
124
shared/static/src/bulma-tooltip/sass/_position.sass
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
=tooltip-hover
|
||||
&:hover::before,
|
||||
&:hover::after,
|
||||
&.has-tooltip-active::before,
|
||||
&.has-tooltip-active::after
|
||||
@content
|
||||
|
||||
=tooltip-arrow-top
|
||||
&.has-tooltip-arrow
|
||||
&::after
|
||||
top: 0
|
||||
right: auto
|
||||
bottom: auto
|
||||
left: 50%
|
||||
margin-top: $tooltip-arrow-size * -1 + 1
|
||||
margin-right: auto
|
||||
margin-bottom: auto
|
||||
margin-left: $tooltip-arrow-size * -1 + 1
|
||||
border-color: rgba($tooltip-background-color, $tooltip-background-opacity) transparent transparent transparent
|
||||
|
||||
=tooltip-box-top
|
||||
&::before
|
||||
top: 0
|
||||
right: auto
|
||||
bottom: auto
|
||||
left: 50%
|
||||
top: 0
|
||||
margin-top: $tooltip-arrow-size * -1 + 1
|
||||
margin-bottom: auto
|
||||
transform: translate(-50%, -100%)
|
||||
|
||||
=tooltip-top
|
||||
+tooltip-arrow-top
|
||||
+tooltip-box-top
|
||||
|
||||
=tooltip-arrow-bottom
|
||||
&.has-tooltip-arrow
|
||||
&::after
|
||||
top: auto
|
||||
right: auto
|
||||
bottom: -1px
|
||||
left: 50%
|
||||
margin-top: auto
|
||||
margin-right: auto
|
||||
margin-bottom: $tooltip-arrow-size * -1 + 1
|
||||
margin-left: $tooltip-arrow-size * -1 + 1
|
||||
border-color: transparent transparent rgba($tooltip-background-color, $tooltip-background-opacity) transparent
|
||||
|
||||
=tooltip-box-bottom
|
||||
&::before
|
||||
top: auto
|
||||
right: auto
|
||||
bottom: 0
|
||||
left: 50%
|
||||
margin-top: auto
|
||||
margin-bottom: $tooltip-arrow-size * -1 + 1
|
||||
transform: translate(-50%, 100%)
|
||||
|
||||
=tooltip-bottom
|
||||
+tooltip-arrow-bottom
|
||||
+tooltip-box-bottom
|
||||
|
||||
|
||||
=tooltip-arrow-left
|
||||
&.has-tooltip-arrow
|
||||
&::after
|
||||
top: auto
|
||||
right: auto
|
||||
bottom: 50%
|
||||
left: 0
|
||||
margin-top: auto
|
||||
margin-right: auto
|
||||
margin-bottom: $tooltip-arrow-size * -1
|
||||
margin-left: $tooltip-arrow-size * -1 + 1
|
||||
border-color: transparent transparent transparent rgba($tooltip-background-color, $tooltip-background-opacity)
|
||||
|
||||
=tooltip-box-left
|
||||
&::before
|
||||
top: auto
|
||||
right: auto
|
||||
bottom: 50%
|
||||
left: $tooltip-arrow-size * -1 + 1
|
||||
transform: translate(-100%, 50%)
|
||||
|
||||
=tooltip-left
|
||||
+tooltip-arrow-left
|
||||
+tooltip-box-left
|
||||
|
||||
|
||||
=tooltip-arrow-right
|
||||
&.has-tooltip-arrow
|
||||
&::after
|
||||
top: auto
|
||||
right: 0
|
||||
bottom: 50%
|
||||
left: auto
|
||||
margin-top: auto
|
||||
margin-right: $tooltip-arrow-size * -1
|
||||
margin-bottom: $tooltip-arrow-size * -1
|
||||
margin-left: auto
|
||||
border-color: transparent rgba($tooltip-background-color, $tooltip-background-opacity) transparent transparent
|
||||
|
||||
=tooltip-box-right
|
||||
&::before
|
||||
top: auto
|
||||
right: $tooltip-arrow-size * -1 + 1
|
||||
bottom: 50%
|
||||
left: auto
|
||||
margin-top: auto
|
||||
transform: translate(100%, 50%)
|
||||
|
||||
=tooltip-right
|
||||
+tooltip-arrow-right
|
||||
+tooltip-box-right
|
||||
|
||||
=tooltip-direction($direction)
|
||||
@if $direction == 'top'
|
||||
@include tooltip-top
|
||||
@else if $direction == 'right'
|
||||
@include tooltip-right
|
||||
@else if $direction == 'bottom'
|
||||
@include tooltip-bottom
|
||||
@else if $direction == 'left'
|
||||
@include tooltip-left
|
||||
12
shared/static/src/bulma-tooltip/sass/_variables.sass
Normal file
12
shared/static/src/bulma-tooltip/sass/_variables.sass
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
$tooltip-animation-duration: .3s !default
|
||||
$tooltip-animation-transition-timing-function: linear !default
|
||||
$tooltip-arrow-size: 6px !default
|
||||
$tooltip-background-color: $grey-dark !default
|
||||
$tooltip-background-opacity: 0.9 !default
|
||||
$tooltip-color: $white !default
|
||||
$tooltip-font-family: $family-primary !default
|
||||
$tooltip-font-size: $size-7 !default
|
||||
$tooltip-max-width: 15rem !default
|
||||
$tooltip-padding: .5rem 1rem !default
|
||||
$tooltip-radius: $radius-small !default
|
||||
$tooltip-z-index: 1020 !default
|
||||
129
shared/static/src/bulma-tooltip/sass/index.sass
Normal file
129
shared/static/src/bulma-tooltip/sass/index.sass
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
@import 'variables'
|
||||
@import 'position'
|
||||
@import 'animation'
|
||||
|
||||
=tooltip-arrow
|
||||
&::after
|
||||
box-sizing: border-box
|
||||
color: $tooltip-color
|
||||
display: inline-block
|
||||
font-family: $tooltip-font-family
|
||||
font-size: $tooltip-font-size
|
||||
hyphens: auto
|
||||
opacity: 0
|
||||
overflow: hidden
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
visibility: hidden
|
||||
z-index: $tooltip-z-index
|
||||
content: ''
|
||||
border-style: solid
|
||||
border-width: $tooltip-arrow-size
|
||||
border-color: rgba($tooltip-background-color, $tooltip-background-opacity) transparent transparent transparent
|
||||
margin-bottom: $tooltip-arrow-size * -1 + 1
|
||||
+tooltip-arrow-top
|
||||
|
||||
=tooltip-box
|
||||
&::before
|
||||
box-sizing: border-box
|
||||
color: $tooltip-color
|
||||
display: inline-block
|
||||
font-family: $tooltip-font-family
|
||||
font-size: $tooltip-font-size
|
||||
hyphens: auto
|
||||
opacity: 0
|
||||
overflow: hidden
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
visibility: hidden
|
||||
z-index: $tooltip-z-index
|
||||
background: rgba($tooltip-background-color, $tooltip-background-opacity)
|
||||
border-radius: $tooltip-radius
|
||||
content: attr(data-tooltip)
|
||||
padding: $tooltip-padding
|
||||
text-overflow: ellipsis
|
||||
white-space: pre-line
|
||||
+tooltip-box-top
|
||||
|
||||
=tooltip-multiline
|
||||
&::before
|
||||
height: auto
|
||||
width: $tooltip-max-width
|
||||
max-width: $tooltip-max-width
|
||||
text-overflow: clip
|
||||
white-space: normal
|
||||
word-break: keep-all
|
||||
|
||||
[data-tooltip]
|
||||
&:not(.is-loading),
|
||||
&:not(.is-disabled),
|
||||
&:not([disabled])
|
||||
cursor: pointer
|
||||
overflow: visible
|
||||
position: relative
|
||||
|
||||
+tooltip-box
|
||||
&.has-tooltip-arrow
|
||||
+tooltip-arrow
|
||||
|
||||
&.has-tooltip-bottom
|
||||
+tooltip-direction('bottom')
|
||||
|
||||
&.has-tooltip-left
|
||||
+tooltip-direction('left')
|
||||
|
||||
&.has-tooltip-right
|
||||
+tooltip-direction('right')
|
||||
|
||||
&.has-tooltip-multiline
|
||||
+tooltip-multiline
|
||||
|
||||
&.has-tooltip-text-left
|
||||
&::before
|
||||
text-align: left
|
||||
&.has-tooltip-text-centered
|
||||
&::before
|
||||
text-align: center
|
||||
&.has-tooltip-text-right
|
||||
&::before
|
||||
text-align: right
|
||||
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.has-tooltip-#{$name}
|
||||
&::after
|
||||
border-color: rgba($color, $tooltip-background-opacity) transparent transparent transparent !important
|
||||
&.has-tooltip-bottom
|
||||
&::after
|
||||
border-color: transparent transparent rgba($color, $tooltip-background-opacity) transparent !important
|
||||
&.has-tooltip-left
|
||||
&::after
|
||||
border-color: transparent transparent transparent rgba($color, $tooltip-background-opacity) !important
|
||||
&.has-tooltip-right
|
||||
&::after
|
||||
border-color: transparent rgba($color, $tooltip-background-opacity) transparent transparent !important
|
||||
&:before
|
||||
background-color: rgba($color, $tooltip-background-opacity)
|
||||
color: $color-invert
|
||||
|
||||
+tooltip-hover
|
||||
opacity: 1
|
||||
visibility: visible
|
||||
|
||||
&.has-tooltip-fade
|
||||
+tooltip-fade
|
||||
|
||||
span
|
||||
&[data-tooltip]
|
||||
border-bottom: 1px dashed $grey-lighter
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.has-tooltip-#{$name}
|
||||
border-bottom-color: lighten($color, 5%)
|
||||
|
||||
.control
|
||||
span
|
||||
&[data-tooltip]
|
||||
border-bottom: none
|
||||
|
|
@ -20,6 +20,7 @@ $body-background-color: hsl(0, 0%, 86%)
|
|||
$family-secondary: "Carter One"
|
||||
|
||||
@import "../bulma/bulma.sass"
|
||||
@import "../bulma-tooltip/sass/index.sass"
|
||||
|
||||
// Full page layout
|
||||
body
|
||||
|
|
|
|||
Loading…
Reference in a new issue