mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-04 12:44:57 +03:00
20d2722f04
refs https://github.com/TryGhost/Team/issues/2677 When opening a context menu close to the border of the window, the menu went outside the window. This PR updates the position mirror horizontally or vertically if the menu would go outside the window.
391 lines
7.7 KiB
CSS
391 lines
7.7 KiB
CSS
/* Dropdowns
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.ember-basic-dropdown-content {
|
|
z-index: 1100;
|
|
}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
z-index: 1100;
|
|
}
|
|
|
|
.dropdown-toggle:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
float: left;
|
|
margin: 2px 0 0;
|
|
padding: 6px 0;
|
|
min-width: 200px;
|
|
background-color: #fff;
|
|
background-clip: padding-box;
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 20px -3px rgba(0,0,0,.2);
|
|
list-style: none;
|
|
text-align: left;
|
|
text-transform: none;
|
|
font-size: 1.4rem;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.relative-dropdown-menu .dropdown-menu {
|
|
position: relative;
|
|
float: none;
|
|
top: auto;
|
|
left: auto;
|
|
}
|
|
|
|
.dropdown-menu.pull-right {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
|
|
.dropdown-menu .divider {
|
|
overflow: hidden;
|
|
margin: 8px 0;
|
|
height: 1px;
|
|
background: color-mod(#dfe1e3 lightness(+5%));
|
|
}
|
|
|
|
.dropdown-menu li {
|
|
margin: 0;
|
|
}
|
|
|
|
.dropdown-menu li > a,
|
|
.dropdown-menu li > button {
|
|
display: flex;
|
|
align-items: center;
|
|
clear: both;
|
|
padding: 6px 14px;
|
|
width: 100%;
|
|
color: var(--darkgrey);
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
font-size: 1.3rem;
|
|
line-height: 1.4em;
|
|
font-weight: normal;
|
|
transition: none;
|
|
}
|
|
|
|
.dropdown-menu li > button:disabled {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.dropdown-menu svg {
|
|
margin-right: 10px;
|
|
height: 14px;
|
|
width: 14px;
|
|
line-height: 1em;
|
|
fill: color-mod(var(--darkgrey) lightness(+20%));
|
|
}
|
|
|
|
.dropdown-align-right {
|
|
top: calc(100% + 6px);
|
|
right: 10px;
|
|
left: auto;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.dropdown-menu li > a,
|
|
.dropdown-menu li > button {
|
|
padding: 7px 8px;
|
|
font-size: 1.5rem;
|
|
letter-spacing: 0;
|
|
}
|
|
.dropdown-menu svg {
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
|
|
/* States
|
|
/* ---------------------------------------------------------- */
|
|
|
|
/* Hover/Focus */
|
|
.dropdown-menu li > a:hover,
|
|
.dropdown-menu li > a:focus,
|
|
.dropdown-menu li > button:hover,
|
|
.dropdown-menu li > button:focus {
|
|
background: color-mod(var(--whitegrey) a(60%) s(-12%));
|
|
color: var(--darkgrey);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dropdown-menu li > a:hover svg,
|
|
.dropdown-menu li > a:focus svg,
|
|
.dropdown-menu li > button:hover svg,
|
|
.dropdown-menu li > button:focus svg {
|
|
fill: var(--darkgrey);
|
|
}
|
|
|
|
/* Active */
|
|
.dropdown-menu > .active > a,
|
|
.dropdown-menu > .active > a:hover,
|
|
.dropdown-menu > .active > a:focus,
|
|
.dropdown-menu > .active > button,
|
|
.dropdown-menu > .active > button:hover,
|
|
.dropdown-menu > .active > button:focus {
|
|
outline: 0;
|
|
background-color: var(--blue);
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Disabled */
|
|
.dropdown-menu > .disabled > a,
|
|
.dropdown-menu > .disabled > a:hover,
|
|
.dropdown-menu > .disabled > a:focus,
|
|
.dropdown-menu > .disabled > button,
|
|
.dropdown-menu > .disabled > button:hover,
|
|
.dropdown-menu > .disabled > button:focus {
|
|
color: var(--midlightgrey-l1);
|
|
}
|
|
|
|
.dropdown-menu > .disabled > a:hover,
|
|
.dropdown-menu > .disabled > a:focus,
|
|
.dropdown-menu > .disabled > button:hover,
|
|
.dropdown-menu > .disabled > button:focus {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
text-decoration: none;
|
|
cursor: auto;
|
|
}
|
|
|
|
|
|
/* Open / Close
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.open > .dropdown-menu {
|
|
display: block;
|
|
}
|
|
|
|
.open > a {
|
|
outline: 0;
|
|
}
|
|
|
|
.closed > .dropdown-menu {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* Action dropdown
|
|
/* Dropdowns that can have secondary action button
|
|
/* ---------------------------------------------------------- */
|
|
.dropdown-action {
|
|
top: calc(100% + 6px);
|
|
left: auto;
|
|
width: 210px;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.dropdown-action li {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropdown-action li a {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-right: 0;
|
|
padding: 0;
|
|
color: var(--darkgrey);
|
|
}
|
|
|
|
.dropdown-action .dropdown-content {
|
|
flex-grow: 1;
|
|
max-height: 50vh;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.dropdown-action .dropdown-label {
|
|
padding: 6px 14px;
|
|
width: 184px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dropdown-action li.selected .dropdown-label {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dropdown-action li.selected a:hover {
|
|
background: none;
|
|
}
|
|
|
|
.dropdown-action .dropdown-action-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity ease-in-out 0.15s;
|
|
padding: 4px;
|
|
margin-top: -2px;
|
|
margin-bottom: -2px;
|
|
margin-right: 4px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.dropdown-action a:hover .dropdown-action-icon {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.dropdown-action .dropdown-action-icon:hover {
|
|
background: var(--whitegrey-d1);
|
|
}
|
|
|
|
.dropdown-action .dropdown-action-icon svg {
|
|
margin: 0;
|
|
fill: none;
|
|
}
|
|
|
|
.dropdown-action .dropdown-footer {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 6px 0 0;
|
|
border-top: 1px solid var(--whitegrey);
|
|
}
|
|
|
|
.dropdown-action .dropdown-footer li:first-of-type {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.dropdown-action .dropdown-footer a {
|
|
padding: 6px 14px;
|
|
}
|
|
|
|
.dropdown-action .dropdown-footer a span {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.dropdown-action .dropdown-footer a span svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.dropdown-action.fade-out {
|
|
animation-duration: .001s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dropdown-menu .label-token svg {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.gh-member-label-input .dropdown-action-icon {
|
|
opacity: 0;
|
|
transition: opacity ease-in-out 0.15s;
|
|
padding: 4px;
|
|
margin-top: -2px;
|
|
margin-bottom: -2px;
|
|
margin-right: 4px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.gh-member-settings .gh-member-label-input .dropdown-action-icon {
|
|
margin-right: -8px;
|
|
padding: 4px 6px;
|
|
color: var(--midgrey);
|
|
}
|
|
|
|
.gh-member-settings .gh-member-label-input .dropdown-action-icon:hover {
|
|
color: var(--darkgrey);
|
|
}
|
|
|
|
.gh-member-label-input li:hover .dropdown-action-icon {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.gh-member-label-input .dropdown-action-icon:hover {
|
|
background: var(--whitegrey-d1);
|
|
}
|
|
|
|
.gh-member-label-input .dropdown-action-icon svg {
|
|
margin: 0;
|
|
height: 14px;
|
|
width: 14px;
|
|
line-height: 1em;
|
|
fill: none;
|
|
}
|
|
|
|
/**
|
|
Post context menu
|
|
*/
|
|
|
|
.gh-context-menu-container {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Disable user interaction with a div that covers the full view. We don't use a javascript based approach here, because you want to close a context menu even when you click a link on the page. With js, we cannot ignore or block that link click without complex event listeners. */
|
|
.gh-context-menu-overlay {
|
|
position: fixed;
|
|
content: '';
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.gh-context-menu-container[data-open] {
|
|
visibility: visible;
|
|
}
|
|
|
|
.gh-context-menu {
|
|
position: fixed;
|
|
max-width: 160px;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.gh-posts-context-menu {
|
|
max-width: 160px !important;
|
|
border-radius: var(--border-radius);
|
|
box-shadow:
|
|
0 0 2.3px rgba(0, 0, 0, 0.028),
|
|
0 3.8px 7.8px rgba(0, 0, 0, 0.042),
|
|
0 17px 35px -7px rgba(0, 0, 0, 0.11)
|
|
;
|
|
}
|
|
|
|
.gh-placement-top .gh-posts-context-menu {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
.gh-placement-left .gh-posts-context-menu {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.gh-placement-top.gh-placement-left .gh-posts-context-menu {
|
|
transform: translate(-100%, -100%);
|
|
}
|
|
|
|
.gh-posts-context-menu li > button {
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
.gh-posts-context-menu li > button span {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.gh-posts-context-menu li > button span svg,
|
|
.gh-posts-context-menu li > button:hover span svg {
|
|
fill: none;
|
|
}
|
|
|
|
.gh-posts-context-menu li > button span svg path {
|
|
stroke-width: 2px;
|
|
}
|