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:
554
modules/system/assets/ui/less/form.less
Normal file
554
modules/system/assets/ui/less/form.less
Normal file
@@ -0,0 +1,554 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Forms
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "form.base.less";
|
||||
@import "form.groups.less";
|
||||
|
||||
// Load order
|
||||
@import "select.less";
|
||||
@import "checkbox.less";
|
||||
|
||||
//
|
||||
// Form containers
|
||||
//
|
||||
|
||||
.form-preview {
|
||||
padding: @padding-standard;
|
||||
margin-bottom: 20px;
|
||||
background: white;
|
||||
border: 1px solid #eee;
|
||||
|
||||
>.form-group:last-child {
|
||||
padding-bottom: 0;
|
||||
|
||||
.radio, .checkbox {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Form to sit flush to the element above
|
||||
&.form-flush {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
// Style primary tabs
|
||||
.control-tabs.primary-tabs {
|
||||
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
|
||||
> li a > span.title {
|
||||
&:before, &:after {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
> li.active a {
|
||||
&:before {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Nice forms
|
||||
//
|
||||
|
||||
.form-elements, .form-tabless-fields {
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
.form-control {
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
border: 1px solid @input-border;
|
||||
.box-shadow(@input-box-shadow);
|
||||
|
||||
&:focus {
|
||||
border: 1px solid @color-form-field-border-focus;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
background-repeat: no-repeat;
|
||||
background-position: right -2px;
|
||||
padding-right: 30px !important;
|
||||
background-image: url('@{image-path}/bitmap-icons.png');
|
||||
|
||||
&.plus { background-position: right -124px; }
|
||||
&.search { background-position: right -84px; }
|
||||
&.user { background-position: right -41px; }
|
||||
&.lock { background-position: right 0; }
|
||||
}
|
||||
|
||||
&.growable {
|
||||
width: 110px;
|
||||
//.transition(width 0.2s);
|
||||
&:focus, &:active {
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs) {
|
||||
width: 40px;
|
||||
text-indent: -999px;
|
||||
|
||||
&:focus, &:active {
|
||||
text-indent: 0;
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&, &.layout-item {
|
||||
padding-bottom: @padding-standard;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.box-sizing(border-box);
|
||||
|
||||
&.is-required {
|
||||
> label:not(.custom-switch):after,
|
||||
> .custom-checkbox > label:after,
|
||||
> .field-switch > label:after {
|
||||
background-color: @color-form-required-asterisk;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
margin-left: 3px;
|
||||
vertical-align: super;
|
||||
font-size: 60%;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
.border-radius(8px);
|
||||
}
|
||||
}
|
||||
|
||||
&.span-full {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&.span-left {
|
||||
float: left;
|
||||
width: 48.5%;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
&.span-right {
|
||||
float: right;
|
||||
width: 48.5%;
|
||||
clear: right;
|
||||
}
|
||||
|
||||
&.clear-full {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&.clear-left {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
&.clear-right {
|
||||
clear: right;
|
||||
}
|
||||
|
||||
&.layout-relative {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.checkbox-field {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
&.number-field {
|
||||
> .form-control { text-align: right; }
|
||||
}
|
||||
|
||||
&.radio-align {
|
||||
padding-left: 28px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
&.checkbox-align {
|
||||
padding-left: 28px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
&.field-align-above {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
&.field-slim {
|
||||
&.span-left, &.span-right {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.field-indent {
|
||||
padding-left: 23px;
|
||||
}
|
||||
|
||||
&.input-sidebar-control {
|
||||
padding-right: 35px;
|
||||
|
||||
.sidebar-control {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 34px;
|
||||
font-size: 16px;
|
||||
color: @color-input-sidebar-control;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
color: @link-color;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group-preview {
|
||||
|
||||
.form-control {
|
||||
background-color: @color-form-field-preview-bg;
|
||||
color: @color-form-field-preview-text;
|
||||
height: auto;
|
||||
min-height: 38px;
|
||||
border-color: #eee;
|
||||
word-break: break-word;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
.custom-checkbox,
|
||||
.custom-radio {
|
||||
label { cursor: default; }
|
||||
}
|
||||
}
|
||||
|
||||
.help-block {
|
||||
font-size: @font-size-base - 1;
|
||||
margin-bottom: 0;
|
||||
&.before-field {
|
||||
margin-top: 0;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-with-icon {
|
||||
position: relative;
|
||||
|
||||
> .icon {
|
||||
position: absolute;
|
||||
z-index: @zindex-form;
|
||||
padding: 13px;
|
||||
pointer-events: none;
|
||||
color: @color-form-field-icon;
|
||||
font-size: 15px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&.right-align {
|
||||
> .icon { right: 0; }
|
||||
input { padding-right: 32px !important; }
|
||||
}
|
||||
|
||||
&.left-align {
|
||||
> .icon { left: 0; }
|
||||
input { padding-left: 32px !important; }
|
||||
}
|
||||
}
|
||||
|
||||
.field-section {
|
||||
border-bottom: 1px solid @color-form-field-border;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 7px;
|
||||
|
||||
> h4 {
|
||||
color: rgba(0,0,0,.6);
|
||||
}
|
||||
|
||||
> p:first-child,
|
||||
> h4:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.is-collapsible {
|
||||
cursor: pointer;
|
||||
|
||||
> h4:before {
|
||||
// Icon
|
||||
display: inline-block;
|
||||
.icon-FontAutumn();
|
||||
vertical-align: baseline;
|
||||
content: @chevron-up;
|
||||
|
||||
font-size: 12px;
|
||||
margin: 2px 8px 0;
|
||||
float: right;
|
||||
color: rgba(0,0,0,.4);
|
||||
.transition(all 0.3s);
|
||||
.scaleAxes(1, 1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid darken(@color-form-field-border, 10%);
|
||||
> h4:before {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.section-field.collapsed {
|
||||
.field-section.is-collapsible > h4:before {
|
||||
.scaleAxes(1, -1);
|
||||
}
|
||||
}
|
||||
|
||||
.field-textarea {
|
||||
resize: vertical;
|
||||
&.size-tiny { min-height: @size-tiny; }
|
||||
&.size-small { min-height: @size-small; }
|
||||
&.size-large { min-height: @size-large; }
|
||||
&.size-huge { min-height: @size-huge; }
|
||||
&.size-giant { min-height: @size-giant; }
|
||||
}
|
||||
|
||||
.field-checkboxlist {
|
||||
.field-checkboxlist-inner {
|
||||
.border-radius(@border-radius-base);
|
||||
background: @color-form-checkboxlist-background;
|
||||
border: 1px solid @color-form-checkboxlist-border;
|
||||
}
|
||||
|
||||
&:not(.is-scrollable) {
|
||||
.field-checkboxlist-inner {
|
||||
padding: 15px 15px 2px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkboxlist-controls {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-align: baseline;
|
||||
-ms-flex-align: baseline;
|
||||
align-items: baseline;
|
||||
> div {
|
||||
padding-bottom: 7px;
|
||||
|
||||
> a {
|
||||
font-size: 13px;
|
||||
margin-right: 20px;
|
||||
text-decoration: none;
|
||||
> i {
|
||||
color: @text-muted;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
&:hover > i {
|
||||
color: @color-label;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-checkboxlist-scrollable {
|
||||
padding-left: 15px;
|
||||
height: @size-large + 100;
|
||||
|
||||
// First checkbox
|
||||
.checkbox {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
// All others
|
||||
.checkbox ~ .checkbox { margin-top: 0; }
|
||||
}
|
||||
|
||||
.field-recordfinder {
|
||||
background-color: @color-form-field-bg;
|
||||
border: 1px solid @color-form-field-border;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.box-shadow(@input-box-shadow);
|
||||
.border-radius(@input-border-radius);
|
||||
|
||||
.form-control {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
height: auto;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 7px 30px 7px 11px;
|
||||
.box-shadow(none);
|
||||
}
|
||||
.btn {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
color: lighten(@color-form-field-recordfinder-btn, 15%);
|
||||
text-shadow: none;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
|
||||
&.clear-record {
|
||||
right: 44px;
|
||||
}
|
||||
|
||||
i {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @color-form-field-recordfinder-btn;
|
||||
}
|
||||
}
|
||||
.text-muted i {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.primary {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.recordfinder-list {
|
||||
.list-footer {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.recordfinder-search {
|
||||
background-position: right -81px !important;
|
||||
border-top: none !important;
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
border-radius: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.form-buttons {
|
||||
.clearfix();
|
||||
padding-bottom: @padding-standard;
|
||||
font-size: 0;
|
||||
|
||||
.btn {
|
||||
margin-right: 15px;
|
||||
|
||||
&.no-margin-right {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin-right: 10px;
|
||||
|
||||
.btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.buttons-offset {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
body.slim-container {
|
||||
.form-buttons {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @form-breakpoint-max) {
|
||||
.form-group {
|
||||
&.span-left, &.span-right {
|
||||
width: 100%;
|
||||
clear: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Select2
|
||||
//
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow b {
|
||||
border: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Controls inside toolbar
|
||||
//
|
||||
|
||||
[data-control=toolbar] {
|
||||
.form-control {
|
||||
display: inline-block;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
input[type=text].form-control, label {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 7px;
|
||||
|
||||
&.standalone {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: 36px;
|
||||
margin-right: 15px;
|
||||
|
||||
.select2-selection__rendered {
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.select2-selection--single {
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control.custom-select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user