Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-02-09 22:48:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' of https://github.com/Orange-Management/cssOMS into develop

Browse Source
This commit is contained in:
Dennis Eichhorn 2020-06-26 20:14:30 +02:00
commit bfc4f74018
3 changed files with 103 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
portlet.scss
View File

@ -3,7 +3,7 @@
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
margin-top: 1rem; margin-top: 1rem;
overflow-x: auto; //overflow-x: auto; removed in order to prevent scroll bars for tooltips which are longer than the portlet (test in general settings view)
border-top: 3px solid var(--box-highlight); border-top: 3px solid var(--box-highlight);
.portlet-head { .portlet-head {
@ -34,3 +34,39 @@
background: #fff; background: #fff;
padding: 1rem; padding: 1rem;
} }
.portlet.highlight-1 {
border-top: 0;
.portlet-body {
background: var(--color-red);
color: #fff;
}
}
.portlet.highlight-2 {
border-top: 0;
.portlet-body {
background: var(--color-green);
color: #fff;
}
}
.portlet.highlight-3 {
border-top: 0;
.portlet-body {
background: var(--color-blue);
color: #fff;
}
}
.portlet.highlight-4 {
border-top: 0;
.portlet-body {
background: var(--color-yellow);
color: #fff;
}
}

71
styles.css
View File

@ -3297,32 +3297,26 @@ p {
p + p { p + p {
margin-top: 5px; } margin-top: 5px; }
.tooltip > i { .tooltip {
font-size: 0.85rem; cursor: pointer;
position: relative; color: var(--box-highlight);
z-index: 2; font-size: .9rem; }
cursor: pointer; } .tooltip:hover, .tooltip:active, .tooltip:focus {
.tooltip > i:before, .tooltip > i:after { position: relative; }
visibility: hidden; .tooltip:hover:after, .tooltip:hover:before, .tooltip:active:after, .tooltip:active:before, .tooltip:focus:after, .tooltip:focus:before {
opacity: 0; font-size: .9rem;
pointer-events: none; } display: block;
.tooltip > i:before { position: absolute;
white-space: nowrap; white-space: nowrap;
position: absolute; bottom: 100%;
bottom: 150%; margin-bottom: 5px;
margin-bottom: 5px; padding: 7px;
padding: 7px; border-radius: 3px;
border-radius: 3px; background-color: #474747;
background-color: #000; color: #fff;
background-color: rgba(51, 51, 51, 0.9); content: attr(data-tooltip);
color: #fff; text-align: center;
content: attr(data-tooltip); transform: translate(-50%, 0); }
text-align: center; }
.tooltip:hover > i:before,
.tooltip:hover > i:after {
visibility: visible;
opacity: 1; }
.spinner-1 { .spinner-1 {
width: 40px; width: 40px;
@ -4600,7 +4594,6 @@ span.tag {
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
margin-top: 1rem; margin-top: 1rem;
overflow-x: auto;
border-top: 3px solid var(--box-highlight); } border-top: 3px solid var(--box-highlight); }
.portlet .portlet-head { .portlet .portlet-head {
background: #fff; background: #fff;
@ -4624,3 +4617,27 @@ span.tag {
.portlet-body { .portlet-body {
background: #fff; background: #fff;
padding: 1rem; } padding: 1rem; }
.portlet.highlight-1 {
border-top: 0; }
.portlet.highlight-1 .portlet-body {
background: var(--color-red);
color: #fff; }
.portlet.highlight-2 {
border-top: 0; }
.portlet.highlight-2 .portlet-body {
background: var(--color-green);
color: #fff; }
.portlet.highlight-3 {
border-top: 0; }
.portlet.highlight-3 .portlet-body {
background: var(--color-blue);
color: #fff; }
.portlet.highlight-4 {
border-top: 0; }
.portlet.highlight-4 .portlet-body {
background: var(--color-yellow);
color: #fff; }

51
tooltip.scss
View File

@ -1,35 +1,26 @@
.tooltip {
.tooltip > i {
font-size: 0.85rem;
position: relative;
z-index: 2;
cursor: pointer; cursor: pointer;
color: var(--box-highlight);
font-size: .9rem;
&:before, &:hover, &:active, &:focus {
&:after { position: relative;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
&:before { &:after, &:before {
white-space: nowrap; font-size: .9rem;
position: absolute; display: block;
bottom: 150%; position: absolute;
margin-bottom: 5px;
padding: 7px; white-space: nowrap;
border-radius: 3px; bottom: 100%;
background-color: #000; margin-bottom: 5px;
background-color: hsla(0, 0%, 20%, 0.9); padding: 7px;
color: #fff; border-radius: 3px;
content: attr(data-tooltip); background-color: rgb(71, 71, 71);
text-align: center; color: #fff;
content: attr(data-tooltip);
text-align: center;
transform: translate(-50%, 0);
}
} }
} }
.tooltip:hover > i:before,
.tooltip:hover > i:after {
visibility: visible;
opacity: 1;
}