pulsar/packages/one-light-ui/styles/modal.less
2023-06-29 20:37:16 -07:00

126 lines
2.5 KiB
Plaintext

@modal-padding: (@ui-padding/2) (@ui-padding/1.5);
@modal-width: (@ui-size * 50);
atom-panel-container.modal {
position: absolute;
top: 0; left: 0; right: 0;
}
atom-panel.modal {
position: relative;
width: 100%;
max-width: @modal-width;
margin: 0 auto;
left: initial;
color: @text-color;
background-color: transparent;
padding: (@ui-padding/2);
&.from-top {
top: (@component-padding * 5);
}
atom-text-editor[mini] {
margin-bottom: (@ui-padding/2);
}
.select-list ol.list-group,
&.select-list ol.list-group {
border: 1px solid @overlay-border-color;
background-color: lighten(@overlay-background-color, 2%);
&:empty {
border: none;
margin-top: 0;
}
li {
padding: @modal-padding;
line-height: @ui-line-height;
border-bottom: 1px solid @overlay-border-color;
&:last-of-type {
border-bottom: none;
}
.icon::before {
margin-left: 1px;
}
.icon.status {
float: right;
margin-left: @ui-padding-icon;
&:before {
margin-left: 0;
margin-right: 0;
}
}
&.selected {
.status.icon {
color: @text-color-selected;
}
}
}
}
.select-list .key-binding {
margin-top: -1px;
margin-left: (@ui-padding/2);
margin-right: calc( (-@ui-padding/3) ~"+" 1px);
}
.select-list .primary-line {
display: block;
}
& > * {
position: relative; // fixes stacking order
}
.command-palette {
padding: 1px; // prevents the box-shadow of the input from being cut off
background-color: @overlay-background-color;
}
// Container
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background-color: @overlay-background-color;
border-radius: (@component-border-radius*2);
box-shadow: 0 6px 12px -2px hsla(0,0%,0%,.4);
}
// Backdrop
// TODO: Add extra wrapper to translate individually or easier positioning
&:after {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: @overlay-backdrop-color;
opacity: @overlay-backdrop-opacity;
backface-visibility: hidden; // fixes scrollbar on retina screens
-webkit-animation: overlay-fade .24s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@-webkit-keyframes overlay-fade {
0% { opacity: 0; }
100% { opacity: @overlay-backdrop-opacity; }
}
}