1. superdiogene
  2. ilgusto
  3. Tuesday, 08 August 2017
After you disable the "Content - Shortcode Ultimate" plugin, I need to use a modal window to provide specific information. I searched the internet and found the following code in the github.com site:



@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
}


// 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; }
}

}



Who should help me in my work. I think I can do well but I do not know:
Where to put it, if it is the right one and how to recall it. Could you help me?
Thank you
Responses (2)


There are replies in this post but you are not allowed to view the replies from this post.
bonusthemes logo
Quick Ask
Categories
General Discussion
  1. 20 posts
  2. 0 subcategories
Pre-Sales Questions
  1. 15 posts
  2. 0 subcategories
Joomla! Templates
  1. 564 posts
  2. 39 subcategories
Quick Search
Recent Replies
Working hours

Business hours are:
08.00 a.m. to 16.00 p.m.

Monday to Friday.

Copyright © 2007-2018 Bonus Themes. All rights reserved.

BonusThemes.com is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.