95 lines
1.8 KiB
CSS
95 lines
1.8 KiB
CSS
/**
|
|
* @author Chris Board - Boardies IT Solutons
|
|
* @description Creates a 3-dot context menu on tables, <p> tags and heading tags (e.g. h1, h2 etc).
|
|
* @copyright (c) Boardies IT Solutions - December 2017
|
|
*/
|
|
|
|
.context-menu,
|
|
td.context-menu,
|
|
p.context-menu,
|
|
h1.context-menu,
|
|
h2.context-menu,
|
|
h3.context-menu,
|
|
h4.context-menu,
|
|
h5.context-menu {
|
|
cursor: pointer;
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
.context-menu:after {
|
|
content: '\2807';
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
cursor: hand;
|
|
pointer-events: all;
|
|
}
|
|
|
|
td.context-menu:after {
|
|
float: right;
|
|
}
|
|
|
|
p.contextMenu:after>span {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
h1.context-menu:after,
|
|
h2.context-menu:after,
|
|
h3.context-menu:after,
|
|
h4.context-menu:after,
|
|
h5.context-menu:after {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.context-menu-container {
|
|
background-color: white;
|
|
z-index: 1000 !important;
|
|
border-radius: 5px;
|
|
position: absolute;
|
|
display: none;
|
|
border: solid thin #c4c4c4;
|
|
padding: 3px;
|
|
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.18);
|
|
-moz-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.18);
|
|
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.18);
|
|
min-width: 90px;
|
|
}
|
|
|
|
.context-menu-container>ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.context-menu-container>ul>li {
|
|
padding: 5px;
|
|
cursor: hand;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.context-menu-container>ul>li.disabled {
|
|
color: #b7b7b7;
|
|
}
|
|
|
|
.context-menu-container>ul>li.disabled:hover {
|
|
background-color: white;
|
|
}
|
|
|
|
.context-menu-container>ul>li:hover {
|
|
background-color: #c4c4c4;
|
|
}
|
|
|
|
.context-menu-container>ul>li.danger:hover {
|
|
background-color: #ff6959;
|
|
}
|
|
|
|
.context-menu-container>ul>li.warning:hover {
|
|
background-color: #fff27c;
|
|
}
|
|
|
|
.context-menu-container>ul>li.danger.disabled:hover,
|
|
.context-menu-container>ul>li.warning.disabled:hover {
|
|
background-color: white;
|
|
} |