feat: VivesPOS landing on Winter CMS 1.2 — theme + plugin + Dockerfile
Some checks are pending
Module sub-split / Sub-split (push) Waiting to run
Some checks are pending
Module sub-split / Sub-split (push) Waiting to run
- Base: wintercms/winter branch 1.2 (full framework) - Theme vivespos: Canvas 7 + Bootstrap 5 CDN, custom CSS - Layout: deferred GTM/GA4 tracking, JSON-LD SoftwareApplication - Partials: hero (offline-first), features, modes (offline/nube toggle), screenshots, pricing (3 planes), comparison, FAQ, CTA - Plugin VivesPOS.Site with ContactForm - Dockerfile: PHP 8.2 Apache, port 80, healthcheck - Added winter/wn-pages, blog, sitemap, seo plugins - Active theme set to vivespos
This commit is contained in:
204
modules/system/assets/ui/less/popup.less
Normal file
204
modules/system/assets/ui/less/popup.less
Normal file
@@ -0,0 +1,204 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
@import "loader.less";
|
||||
@import "icon.close.less";
|
||||
|
||||
//
|
||||
// Popup
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "popup.base.less";
|
||||
|
||||
//
|
||||
// Popup
|
||||
// --------------------------------------------------
|
||||
|
||||
@popup-size-giant: 982px;
|
||||
@popup-size-huge: 900px;
|
||||
@popup-size-large: 750px;
|
||||
@popup-size-small: 400px;
|
||||
@popup-size-tiny: 300px;
|
||||
|
||||
.modal-content {
|
||||
.box-shadow(@popup-box-shadow);
|
||||
.border-radius(@border-radius-base);
|
||||
border: none;
|
||||
background: @color-popup-content-bg;
|
||||
}
|
||||
|
||||
.modal-content.popup-shaking {
|
||||
.animation(popup-shake 0.82s cubic-bezier(.36,.07,.19,.97) both);
|
||||
.transform(translate3d(0, 0, 0));
|
||||
.backface-visibility(hidden);
|
||||
.perspective(1000px);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: @color-popup-header-bg;
|
||||
color: @color-popup-header-text;
|
||||
.border-top-radius(@border-radius-base);
|
||||
padding: @modal-title-padding @padding-standard;
|
||||
border: none;
|
||||
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background: @color-popup-footer-bg;
|
||||
border: none;
|
||||
margin-top: 0;
|
||||
padding: 0 @padding-standard @padding-standard @padding-standard;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
> p:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&.modal-no-header {
|
||||
padding-top: @padding-standard;
|
||||
}
|
||||
|
||||
&.modal-no-footer {
|
||||
padding-bottom: @padding-standard;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
&.size-adaptive {
|
||||
width: 100%;
|
||||
padding-right: 50px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
&.adaptive-height {
|
||||
height: 100%;
|
||||
min-height: 600px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
.modal-content {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
&.size-tiny { width: @popup-size-tiny; }
|
||||
&.size-small { width: @popup-size-small; }
|
||||
}
|
||||
@media (min-width: @screen-md-min) {
|
||||
&.size-large { width: @popup-size-large; }
|
||||
&.size-huge { width: @popup-size-huge; }
|
||||
&.size-giant { width: @popup-size-giant; }
|
||||
}
|
||||
@media (max-width: @screen-sm) {
|
||||
&.size-adaptive {
|
||||
width: auto;
|
||||
padding: 5px 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-popup {
|
||||
&.fade {
|
||||
&:not(.in) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
.opacity(0);
|
||||
.transition(~'all 0.3s, width 0s');
|
||||
.transform(~'scale(0.7)');
|
||||
}
|
||||
}
|
||||
|
||||
&.fade.in {
|
||||
.modal-dialog {
|
||||
.opacity(1);
|
||||
.transform( ~'scale(1)');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: (@zindex-modal-background - 10);
|
||||
background-color: @modal-backdrop-bg;
|
||||
.opacity(1);
|
||||
|
||||
.popup-loading-indicator {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 130px;
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
.transition(~'all 0.3s, width 0s');
|
||||
.transform(~'scale(0.7)');
|
||||
.opacity(0);
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
background-size: 50px 50px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-image: url('@{loader-image-path}/loader-transparent.svg');
|
||||
.animation(spin 1s linear infinite);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 25px 0 0 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&.loading .popup-loading-indicator {
|
||||
.opacity(1);
|
||||
.transform(~'scale(1)');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.mac body.modal-open {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Popup animations
|
||||
// -------------------------
|
||||
|
||||
@-moz-keyframes popup-shake {
|
||||
10%, 90% { -moz-transform: translate3d(-1px, 0, 0); }
|
||||
20%, 80% { -moz-transform: translate3d(2px, 0, 0); }
|
||||
30%, 50%, 70% { -moz-transform: translate3d(-4px, 0, 0); }
|
||||
40%, 60% { -moz-transform: translate3d(4px, 0, 0); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes popup-shake {
|
||||
10%, 90% { -webkit-transform: translate3d(-1px, 0, 0); }
|
||||
20%, 80% { -webkit-transform: translate3d(2px, 0, 0); }
|
||||
30%, 50%, 70% { -webkit-transform: translate3d(-4px, 0, 0); }
|
||||
40%, 60% { -webkit-transform: translate3d(4px, 0, 0); }
|
||||
}
|
||||
|
||||
@keyframes popup-shake {
|
||||
10%, 90% { transform: translate3d(-1px, 0, 0); }
|
||||
20%, 80% { transform: translate3d(2px, 0, 0); }
|
||||
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
|
||||
40%, 60% { transform: translate3d(4px, 0, 0); }
|
||||
}
|
||||
Reference in New Issue
Block a user