lib.itmens/common/static/scss/_mark.scss
2024-05-29 21:36:27 -04:00

126 lines
2.3 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.mark-editor {
[type=checkbox], [type=radio] {
margin-inline-end: .1em;
}
}
#mark_date {
width: unset !important;
}
.mark-line {
margin-bottom: var(--pico-spacing);
>div:last-child {
margin-top: calc(-0.3rem * var(--pico-line-height));
text-align: center;
}
}
// make log list like a timeline list
// source: https://dev.to/peterc/how-to-create-joined-bulletpoint-lists-with-css-bbc-news-style-1eem
#log-list ul {
li {
list-style: none;
padding-bottom: 1rem;
border-left: 1px solid var(--pico-range-active-border-color);
position: relative;
padding-left: 0.75em;
margin-left: 1em;
margin-bottom: 0;
// The actual line being placed before each list item, tweak width and color as appropriate
&:before {
content: "";
width: 0.5em;
height: 0.5em;
border: 1px solid var(--pico-range-active-border-color);
background: var(--pico-background-color);
border-radius: 50%;
position: absolute;
left: -0.275em;
top: 0.5em;
}
&:last-child {
padding-bottom: 0;
}
}
}
@media (max-width: 768px) {
.mark-line {
>div,
>div:last-child {
margin-top: unset;
}
}
}
.tag-input {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-bottom: 0.1rem solid #ccc;
padding-bottom: 2px;
}
.tag-input__tag {
position: relative;
display: block;
float: left;
color: white;
background: #d5d5d5;
padding: 5px 20px 5px 6px;
margin: 4px;
border-radius: .4rem;
line-height: 1em;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
height: min-content;
}
.tag-input__tag.tag-input__tag--highlight {
color: white;
background: #00a1cc;
}
.tag-input__close {
position: absolute;
top: 0;
right: 0;
width: 14px;
height: 100%;
cursor: pointer;
border-radius: 0 2px 2px 0;
-webkit-transition: background 0.2s;
transition: background 0.2s;
}
.tag-input__close:after {
position: absolute;
content: "×";
top: 5px;
left: 2px;
}
.tag-input__close:hover {
color: #606c76;
}
.tag-input input {
border: 0;
margin: 4px;
padding: 3px 7px 3px 0;
width: auto;
outline: none;
height: unset;
}