avives
1f72193a64
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
734 lines
20 KiB
Plaintext
734 lines
20 KiB
Plaintext
//
|
|
// FANCY LAYOUT
|
|
// Applies branding colours to the Backend UI.
|
|
//
|
|
|
|
//
|
|
// --- TABS
|
|
//
|
|
|
|
// Master tabs
|
|
body.fancy-layout .master-tabs.control-tabs,
|
|
.master-tabs.control-tabs.fancy-layout {
|
|
overflow: hidden;
|
|
|
|
&:before, &:after {
|
|
top: 13px;
|
|
font-size: 14px;
|
|
color: @color-fancy-master-tabs-inactive-text;
|
|
}
|
|
&:before { left: 8px; }
|
|
&:after { right: 8px; }
|
|
&.scroll-before:before { color: @color-fancy-master-tabs-active-text; }
|
|
&.scroll-after:after { color: @color-fancy-master-tabs-active-text; }
|
|
|
|
> div > div.tabs-container {
|
|
background: @color-fancy-master-tabs-bg;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
|
|
> ul.nav-tabs {
|
|
margin-left: -8px;
|
|
> li {
|
|
margin-left: -5px;
|
|
top: 1px;
|
|
padding-top: 3px;
|
|
|
|
span.tab-close {
|
|
top: 14px;
|
|
right: -3px;
|
|
left: auto;
|
|
z-index: 110;
|
|
font-family: sans-serif;
|
|
|
|
i {
|
|
top: 4px;
|
|
right: 1px;
|
|
color: rgba(255, 255, 255, 0.3) !important;
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
|
|
&:hover { color: @color-fancy-master-tabs-active-text !important; }
|
|
}
|
|
}
|
|
|
|
a {
|
|
border-bottom: none;
|
|
background: transparent;
|
|
font-size: 14px;
|
|
color: @color-fancy-master-tabs-inactive-text;
|
|
padding: 6px 0 0 24px!important;
|
|
overflow: visible;
|
|
|
|
> span.title {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 12px 5px 0 5px;
|
|
height: 38px;
|
|
font-size: 14px;
|
|
z-index: 100;
|
|
background-color: @color-fancy-form-inactive-tab;
|
|
|
|
&:before, &:after {
|
|
content: ' ';
|
|
position: absolute;
|
|
width: 20px;
|
|
display: block;
|
|
height: 37px;
|
|
top: 0;
|
|
z-index: 100;
|
|
background-color: @color-fancy-form-inactive-tab;
|
|
}
|
|
|
|
&:before {
|
|
left: -14px;
|
|
.border-radius(8px 0 0 0);
|
|
.transform( ~'skewX(-20deg)');
|
|
|
|
}
|
|
|
|
&:after {
|
|
right: -14px;
|
|
.border-radius(0 8px 0 0);
|
|
.transform( ~'skewX(20deg)');
|
|
}
|
|
|
|
span {
|
|
border-top: none;
|
|
padding: 0;
|
|
margin-top: 0;
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
z-index: 110;
|
|
position: absolute;
|
|
top: 18px;
|
|
left: 22px;
|
|
}
|
|
|
|
&[class*=icon] > span.title {
|
|
padding-left: 18px;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
a {
|
|
z-index: 107;
|
|
color: @color-fancy-master-tabs-active-text;
|
|
}
|
|
span.tab-close i { color: @color-fancy-master-tabs-active-text; }
|
|
|
|
a > span.title {
|
|
background-color: @color-fancy-form-tabless-fields-bg;
|
|
z-index: 105;
|
|
&:before {
|
|
z-index: 107;
|
|
background-color: @color-fancy-form-tabless-fields-bg;
|
|
}
|
|
&:after {
|
|
background-color: @color-fancy-form-tabless-fields-bg;
|
|
z-index: 107;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-modified] {
|
|
span.tab-close i {
|
|
top: 5px;
|
|
.hide-text();
|
|
|
|
&:before {
|
|
.icon(@circle);
|
|
font-size: 9px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-closable] {
|
|
> div > div.tabs-container {
|
|
> ul.nav-tabs {
|
|
> li {
|
|
a > span.title {
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.has-tabs {
|
|
&:before, &:after {display: block;}
|
|
}
|
|
|
|
&.has-tabs {
|
|
> div.tab-content {
|
|
background: @body-bg;
|
|
}
|
|
}
|
|
|
|
> .tab-content > .tab-pane {
|
|
padding: 0;
|
|
|
|
&.padded-pane {
|
|
padding: @padding-standard @padding-standard 0 @padding-standard;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Primary Tabs
|
|
.fancy-layout *:not(.nested-form):not(.modal-body) > .form-widget > .layout-row > .control-tabs.primary-tabs,
|
|
*:not(.nested-form):not(.modal-body) > .form-widget > .layout-row > .control-tabs.fancy-layout.primary-tabs {
|
|
&.master-area {
|
|
> div > ul.nav-tabs {
|
|
.transition(background-color 0.5s);
|
|
background: @color-fancy-form-tabless-fields-bg;
|
|
}
|
|
}
|
|
|
|
> div > ul.nav-tabs {
|
|
background: @color-fancy-primary-tabs-bg;
|
|
margin-left: 0!important;
|
|
margin-right: 0!important;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
|
|
> li {
|
|
background: transparent;
|
|
border-right: none;
|
|
margin-right: -8px;
|
|
|
|
&:first-child {
|
|
margin-left: -5px;
|
|
}
|
|
|
|
a {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 12px 16px 0px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: @color-fancy-primary-tabs-inactive-text;
|
|
|
|
span.title {
|
|
background: @color-fancy-primary-tabs-inactive-bg;
|
|
border-top: none;
|
|
padding: 5px 5px 3px 5px;
|
|
|
|
&:before, &:after {
|
|
background: @color-fancy-primary-tabs-inactive-bg;
|
|
border-width: 0;
|
|
top: 0;
|
|
}
|
|
|
|
&:before {
|
|
left: -20px;
|
|
}
|
|
|
|
&:after {
|
|
right: -20px;
|
|
}
|
|
|
|
span {
|
|
border-width: 0;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
a {
|
|
color: @color-fancy-primary-tabs-active-text;
|
|
&:before {
|
|
display: none;
|
|
}
|
|
|
|
span.title {
|
|
background: @color-fancy-primary-tabs-active-bg;
|
|
|
|
&:before, &:after {
|
|
background: @color-fancy-primary-tabs-active-bg;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .tab-content > .tab-pane {
|
|
padding: @padding-standard @padding-standard 0 @padding-standard;
|
|
|
|
&.pane-compact {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
&.collapsed {
|
|
display: none;
|
|
}
|
|
|
|
&.has-tabs {
|
|
> div.tab-content {
|
|
background: @body-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Secondary tabs
|
|
.fancy-layout *:not(.nested-form):not(.modal-body) > .form-widget > .layout-row > .control-tabs.secondary-tabs {
|
|
// Target horizontal scroll indicators
|
|
&:before {
|
|
left: 5px;
|
|
}
|
|
&:after {
|
|
right: 5px;
|
|
}
|
|
> div > ul.nav-tabs {
|
|
background: @color-fancy-secondary-tabs-bg;
|
|
> li {
|
|
border-right: none;
|
|
padding-right: 0;
|
|
margin-right: 0;
|
|
a {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 12px 10px 13px 10px;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
line-height: 14px;
|
|
color: @color-fancy-secondary-tabs-inactive-text;
|
|
|
|
span {
|
|
span {
|
|
overflow: visible;
|
|
border-top: none;
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
padding-left: 15px; // Will cause issues when first child is hidden
|
|
}
|
|
|
|
&.active {
|
|
a {color: @color-fancy-secondary-tabs-active-text;}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-collapse-icon {
|
|
position: absolute;
|
|
display: block;
|
|
text-decoration: none;
|
|
outline: none;
|
|
.opacity(0.6);
|
|
.transition(all 0.3s);
|
|
font-size: 12px;
|
|
color: @color-fancy-master-tabs-active-text;
|
|
right: 11px;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
.opacity(1);
|
|
}
|
|
|
|
&.primary {
|
|
color: @color-fancy-master-tabs-active-text;
|
|
top: 12px;
|
|
right: 11px;
|
|
bottom: auto;
|
|
z-index: 100;
|
|
.scaleAxes(1, -1);
|
|
|
|
i {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.primary-collapsed {
|
|
.tab-collapse-icon.primary {
|
|
.scaleAxes(1, 1);
|
|
}
|
|
}
|
|
|
|
&.secondary-content-tabs {
|
|
> div > ul.nav-tabs {
|
|
background: @body-bg;
|
|
|
|
> li {
|
|
margin-left: -19px;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
a {
|
|
padding: 8px 16px 0 16px;
|
|
font-weight: 400;
|
|
height: 36px;
|
|
color: #2b3e50;
|
|
.opacity(0.6);
|
|
|
|
> span.title {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 8px 5px 9px 5px;
|
|
font-size: 14px;
|
|
z-index: 100;
|
|
height: 27px!important;
|
|
background-color: transparent;
|
|
|
|
&:before, &:after {
|
|
content: ' ';
|
|
position: absolute;
|
|
background-color: white;
|
|
width: 15px;
|
|
height: 28px;
|
|
top: 0;
|
|
z-index: 100;
|
|
display: none;
|
|
}
|
|
|
|
&:before {
|
|
left: -11px;
|
|
.border-radius(8px 0 0 0);
|
|
.transform( ~'skewX(-20deg)');
|
|
}
|
|
|
|
&:after {
|
|
right: -11px;
|
|
.border-radius(0 8px 0 0);
|
|
.transform( ~'skewX(20deg)');
|
|
}
|
|
|
|
span {
|
|
height: 18px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.active a {
|
|
.opacity(1);
|
|
|
|
> span.title {
|
|
background-color: white;
|
|
&:before, &:after {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-collapse-icon.primary {
|
|
color: #000000;
|
|
}
|
|
|
|
&.primary-collapsed {
|
|
.tab-collapse-icon.primary {
|
|
color: @color-fancy-master-tabs-active-text;
|
|
}
|
|
|
|
> div > ul.nav-tabs {
|
|
background: @color-fancy-form-tabless-fields-bg;
|
|
|
|
> li {
|
|
a {
|
|
color: white;
|
|
|
|
> span.title {
|
|
&:before, &:after {
|
|
background-color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.active a {
|
|
color: #2b3e50;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.has-tabs {
|
|
> div.tab-content {
|
|
background: @body-bg;
|
|
}
|
|
}
|
|
|
|
> .tab-content > .tab-pane {
|
|
padding: 0;
|
|
|
|
&.padded-pane {
|
|
padding: @padding-standard @padding-standard 0 @padding-standard;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tabless (outside) fields
|
|
.fancy-layout *:not(.nested-form):not(.modal-body) > .form-widget > .layout-row > .form-tabless-fields {
|
|
.clearfix();
|
|
position: relative;
|
|
background: @color-fancy-form-tabless-fields-bg;
|
|
padding: 18px 23px 0 23px;
|
|
.transition(all 0.5s);
|
|
|
|
label {
|
|
text-transform: uppercase;
|
|
color: @color-fancy-form-label;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-control[disabled] {
|
|
background-color: rgba(29, 29, 29, 0.11) !important;
|
|
}
|
|
|
|
input[type=text] {
|
|
background: transparent;
|
|
border: none;
|
|
color: @color-fancy-form-text;
|
|
font-size: 35px;
|
|
font-weight: 100;
|
|
height: auto;
|
|
padding: 0;
|
|
.placeholder(@color-fancy-form-placeholder);
|
|
.box-shadow(none);
|
|
|
|
&:focus, &:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
|
|
.form-group {
|
|
padding-bottom: 0;
|
|
|
|
&.is-required {
|
|
> label:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-collapse-icon {
|
|
position: absolute;
|
|
display: block;
|
|
text-decoration: none;
|
|
outline: none;
|
|
.opacity(0.6);
|
|
.transition(all 0.3s);
|
|
font-size: 12px;
|
|
color: @color-fancy-master-tabs-active-text;
|
|
right: 11px;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
.opacity(1);
|
|
}
|
|
|
|
&.primary {
|
|
color: @color-fancy-master-tabs-active-text;
|
|
top: 12px;
|
|
right: 11px;
|
|
bottom: auto;
|
|
z-index: 100;
|
|
.scaleAxes(1, -1);
|
|
|
|
i {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&.tabless {
|
|
top: 14px;
|
|
}
|
|
}
|
|
|
|
&.collapsed {
|
|
padding: 5px 23px 0 10px;
|
|
|
|
.tab-collapse-icon {
|
|
&.tabless {
|
|
.scaleAxes(1, -1);
|
|
}
|
|
}
|
|
|
|
.form-group:not(.collapse-visible) {
|
|
display: none;
|
|
}
|
|
|
|
.form-buttons {
|
|
margin-left: 10px;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.loading-indicator-container {
|
|
.loading-indicator {
|
|
background-color: @color-fancy-form-tabless-fields-bg;
|
|
padding: 0 0 0 30px;
|
|
color: @color-fancy-form-label;
|
|
margin-top: 1px;
|
|
height: 90%;
|
|
font-size: 12px;
|
|
line-height: 100%;
|
|
> span {
|
|
left: -10px;
|
|
top: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// --- FANCY BREADCRUMBS
|
|
//
|
|
|
|
body.breadcrumb-fancy .control-breadcrumb,
|
|
.control-breadcrumb.breadcrumb-fancy {
|
|
margin-bottom: 0;
|
|
|
|
background-color: mix(black, saturate(@color-fancy-form-tabless-fields-bg, 20%), 16%);
|
|
|
|
li {
|
|
background-color: mix(black, saturate(@color-fancy-form-tabless-fields-bg, 20%), 31%);
|
|
color: rgba(255,255,255, .5);
|
|
|
|
a {
|
|
opacity: .5;
|
|
.transition(all 0.3s ease);
|
|
&:hover {
|
|
opacity: 1;
|
|
|
|
}
|
|
}
|
|
|
|
&:not(:last-child)::before {
|
|
border-left-color: @color-fancy-form-tabless-fields-bg;
|
|
opacity: .5;
|
|
}
|
|
|
|
&:after {
|
|
border-left-color: mix(black, saturate(@color-fancy-form-tabless-fields-bg, 20%), 31%);
|
|
}
|
|
|
|
&:last-child {
|
|
background-color: mix(black, saturate(@color-fancy-form-tabless-fields-bg, 20%), 16%);
|
|
|
|
&:before {
|
|
opacity: 1;
|
|
border-left-color: mix(black, saturate(@color-fancy-form-tabless-fields-bg, 20%), 16%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// --- FORM BUTTONS
|
|
//
|
|
|
|
.fancy-layout *:not(.nested-form):not(.modal-body) > .form-widget > .layout-row > .control-tabs .form-buttons:not(.normalized),
|
|
.fancy-layout *:not(.nested-form):not(.modal-body) > .form-widget > .layout-row > .form-tabless-fields .form-buttons:not(.normalized) {
|
|
.transition(all 0.5s);
|
|
padding-top: 14px;
|
|
padding-bottom: 5px;
|
|
|
|
.btn {
|
|
padding: 0;
|
|
margin-right: 5px;
|
|
margin-top: -6px;
|
|
margin-right: 30px;
|
|
background: transparent;
|
|
color: @color-fancy-master-tabs-active-text;
|
|
font-weight: normal;
|
|
.box-shadow(none);
|
|
|
|
.opacity(0.5);
|
|
.transition(all 0.3s ease);
|
|
|
|
&:hover {
|
|
.opacity(1);
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&[class^="wn-icon-"],
|
|
&[class*=" wn-icon-"],
|
|
&[class^="oc-icon-"],
|
|
&[class*=" oc-icon-"] {
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fancy-layout form[class$="-data-changed"] *:not(.nested-form):not(.modal-body) > .form-widget > .layout-row > .control-tabs .btn.save {
|
|
.opacity(1);
|
|
}
|
|
|
|
//
|
|
// --- FIELDS AND WIDGETS
|
|
//
|
|
|
|
// Code editor
|
|
.fancy-layout *:not(.nested-form):not(.modal-body) > .form-widget > .layout-row > .control-tabs > .tab-content > .tab-pane > .form-group > .field-codeeditor {
|
|
border: none !important;
|
|
.border-radius(0);
|
|
|
|
.editor-code {
|
|
.border-radius(0);
|
|
}
|
|
}
|
|
|
|
// Rich editor
|
|
.fancy-layout *:not(.nested-form):not(.modal-body) > .form-widget > .layout-row > .control-tabs > .tab-content > .tab-pane > .form-group > .field-richeditor {
|
|
border: none;
|
|
border-left: 1px solid @color-form-field-border !important;
|
|
|
|
&, .fr-toolbar, .fr-wrapper {
|
|
.border-radius(0);
|
|
.border-top-radius(0);
|
|
}
|
|
}
|
|
|
|
// Rich editor in a secondary content tab
|
|
.fancy-layout *:not(.nested-form):not(.modal-body) > .form-widget > .layout-row > .control-tabs.secondary-content-tabs > .tab-content > .tab-pane > .form-group > .field-richeditor {
|
|
.fr-toolbar {
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
// Rich editor when the side panel is not fixed
|
|
body.side-panel-not-fixed .fancy-layout *:not(.nested-form):not(.modal-body) > .form-widget > .layout-row > .control-tabs > .tab-content > .tab-pane > .form-group > .field-richeditor,
|
|
body.side-panel-not-fixed.fancy-layout *:not(.nested-form):not(.modal-body) > .form-widget > .layout-row > .control-tabs > .tab-content > .tab-pane > .form-group > .field-richeditor {
|
|
border-left: none;
|
|
}
|
|
|
|
// Loading indicator
|
|
html.cssanimations .fancy-layout *:not(.nested-form):not(.modal-body) > .form-widget > .layout-row > .form-tabless-fields .loading-indicator-container .loading-indicator > span {
|
|
.animation(spin 1s linear infinite);
|
|
background-image: url('../../../system/assets/ui/images/loader-white.svg');
|
|
background-size: 20px 20px;
|
|
}
|