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:
236
modules/system/assets/less/snowboard.extras.less
Normal file
236
modules/system/assets/less/snowboard.extras.less
Normal file
@@ -0,0 +1,236 @@
|
||||
@import "../../../backend/assets/less/core/boot.less";
|
||||
|
||||
//
|
||||
// Stripe loading indicator
|
||||
// --------------------------------------------------
|
||||
|
||||
body.wn-loading, body.wn-loading *,
|
||||
body.oc-loading, body.oc-loading * {
|
||||
cursor: wait !important;
|
||||
}
|
||||
|
||||
@stripe-loader-color: #0090c0;
|
||||
@stripe-loader-height: 5px;
|
||||
|
||||
.stripe-loading-indicator {
|
||||
|
||||
height: @stripe-loader-height;
|
||||
background: transparent;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 2000;
|
||||
|
||||
.stripe, .stripe-loaded {
|
||||
height: @stripe-loader-height;
|
||||
display: block;
|
||||
background: @stripe-loader-color;
|
||||
position: absolute;
|
||||
.box-shadow(~"inset 0 1px 1px -1px #FFF, inset 0 -1px 1px -1px #FFF");
|
||||
}
|
||||
|
||||
.stripe {
|
||||
width: 100%;
|
||||
.animation(wn-infinite-loader 60s linear);
|
||||
}
|
||||
|
||||
.stripe-loaded {
|
||||
width: 100%;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
&.loaded {
|
||||
.opacity(0);
|
||||
.transition(opacity .4s linear);
|
||||
.transition-delay(.3s);
|
||||
.stripe {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.stripe-loaded {
|
||||
.opacity(1);
|
||||
transform: translate3d(0, 0, 0);
|
||||
.transition(transform .3s linear);
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Flash Messages
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-flash-success-bg: #6f9927;
|
||||
@color-flash-error-bg: #bb380c;
|
||||
@color-flash-warning-bg: #b87410;
|
||||
@color-flash-info-bg: #3f91cc;
|
||||
@color-flash-default-bg: #7a7e83;
|
||||
@color-flash-text: #ffffff;
|
||||
|
||||
body > div.flash-message {
|
||||
position: fixed;
|
||||
width: 500px;
|
||||
left: 50%;
|
||||
top: 13px;
|
||||
margin-left: -250px;
|
||||
background-color: @color-flash-default-bg;
|
||||
color: @color-flash-text;
|
||||
font-size: 14px;
|
||||
padding: 10px 30px 14px 15px;
|
||||
z-index: @zindex-flashmessage;
|
||||
word-wrap: break-word;
|
||||
text-shadow: 0 -1px 0px rgba(0,0,0,.15);
|
||||
text-align: center;
|
||||
.box-shadow(@overlay-box-shadow);
|
||||
.border-radius(@border-radius-base);
|
||||
cursor: pointer;
|
||||
|
||||
&.no-timer {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.flash-timer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: #ffffff;
|
||||
opacity: 0.5;
|
||||
.border-radius(@border-radius-base);
|
||||
|
||||
&.timeout-active {
|
||||
.transition(~'width 6s linear');
|
||||
}
|
||||
|
||||
&.timeout-in {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.timeout-out {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
&.show-active, &.hide-active {
|
||||
.transition(~'all 0.5s, width 0s');
|
||||
}
|
||||
|
||||
&.hide-out .flash-timer,
|
||||
&.hide-active .flash-timer {
|
||||
transition: none;
|
||||
width: 0% !important;
|
||||
}
|
||||
|
||||
&.show-in, &.hide-out {
|
||||
.opacity(0);
|
||||
.transform(~'scale(0.9)');
|
||||
}
|
||||
|
||||
&.show-out, &.hide-in {
|
||||
.opacity(1);
|
||||
.transform(~'scale(1)');
|
||||
}
|
||||
|
||||
&.success { background: @color-flash-success-bg; }
|
||||
&.error { background: @color-flash-error-bg; }
|
||||
&.warning { background: @color-flash-warning-bg; }
|
||||
&.info { background: @color-flash-info-bg; }
|
||||
}
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
body > div.flash-message {
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
margin-left: 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Element Loader
|
||||
// --------------------------------------------------
|
||||
|
||||
a.wn-loading, button.wn-loading, span.wn-loading,
|
||||
a.oc-loading, button.oc-loading, span.oc-loading {
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: .4em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
animation: wn-rotate-loader 0.8s infinite linear;
|
||||
border: .2em solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
.opacity(.5);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes wn-rotate-loader {
|
||||
0% { -moz-transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
@-webkit-keyframes wn-rotate-loader {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@-o-keyframes wn-rotate-loader {
|
||||
0% { -o-transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(360deg); }
|
||||
}
|
||||
@-ms-keyframes wn-rotate-loader {
|
||||
0% { -ms-transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes wn-rotate-loader {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes oc-rotate-loader {
|
||||
0% { -moz-transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
@-webkit-keyframes oc-rotate-loader {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@-o-keyframes oc-rotate-loader {
|
||||
0% { -o-transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(360deg); }
|
||||
}
|
||||
@-ms-keyframes oc-rotate-loader {
|
||||
0% { -ms-transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes oc-rotate-loader {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
//
|
||||
// Infinite loading animation
|
||||
// --------------------------------------------------
|
||||
|
||||
@startVal: 100%;
|
||||
@start: 0;
|
||||
|
||||
.infinite-class (@index, @val) when (@index < 101) {
|
||||
@tmpSelector: ~"@{index}%";
|
||||
@{tmpSelector} { transform: translateX(-@val); }
|
||||
.infinite-class((@index + 10), (@val - (@val / 2)));
|
||||
}
|
||||
|
||||
@keyframes wn-infinite-loader {
|
||||
.infinite-class(@start, @startVal);
|
||||
}
|
||||
@keyframes oc-infinite-loader {
|
||||
.infinite-class(@start, @startVal);
|
||||
}
|
||||
Reference in New Issue
Block a user