656 lines
20 KiB
Plaintext
656 lines
20 KiB
Plaintext
.fancy-layout {
|
|
//
|
|
// Fancy form tabs
|
|
//
|
|
|
|
.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-secondary-tabs-bg;
|
|
bottom: -25px;
|
|
z-index: 100;
|
|
.scaleAxes(1, -1);
|
|
|
|
i {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.control-tabs, &.control-tabs {
|
|
&.master-tabs {
|
|
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;}
|
|
}
|
|
}
|
|
|
|
&.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 {
|
|
.tab-collapse-icon();
|
|
|
|
&.primary {
|
|
color: @color-fancy-master-tabs-active-text;
|
|
top: 12px;
|
|
right: 11px;
|
|
bottom: auto;
|
|
}
|
|
}
|
|
|
|
&.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: #808c8d;
|
|
}
|
|
|
|
&.primary-collapsed {
|
|
.tab-collapse-icon.primary {
|
|
color: white;
|
|
}
|
|
|
|
> 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.primary-tabs {
|
|
> div > ul.nav-tabs {
|
|
background: @color-fancy-primary-tabs-bg;
|
|
margin-left: 0!important;
|
|
margin-right: 0!important;
|
|
|
|
&.master-area {
|
|
.transition(background-color 0.5s);
|
|
background: @color-fancy-form-tabless-fields-bg;
|
|
}
|
|
|
|
&: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;
|
|
}
|
|
}
|
|
|
|
> div.tab-content {
|
|
> div.tab-pane {
|
|
padding: 0;
|
|
|
|
&.padded-pane {
|
|
padding: @padding-standard @padding-standard 0 @padding-standard;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Forms and buttons
|
|
//
|
|
|
|
.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;
|
|
}
|
|
|
|
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 {
|
|
.tab-collapse-icon();
|
|
&.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-buttons {
|
|
.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^="oc-icon-"],
|
|
&[class*=" oc-icon-"] {
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
form.oc-data-changed {
|
|
.btn.save {
|
|
.opacity(1);
|
|
}
|
|
}
|
|
|
|
//
|
|
// Code editor
|
|
//
|
|
|
|
.field-codeeditor {
|
|
border: none !important;
|
|
.border-radius(0);
|
|
|
|
.editor-code {
|
|
.border-radius(0);
|
|
}
|
|
}
|
|
|
|
//
|
|
// Rich editor
|
|
//
|
|
|
|
.field-richeditor {
|
|
border: none;
|
|
border-left: 1px solid @color-form-field-border !important;
|
|
|
|
&, .fr-toolbar, .fr-wrapper {
|
|
.border-radius(0);
|
|
.border-top-radius(0);
|
|
}
|
|
}
|
|
|
|
.secondary-content-tabs .field-richeditor {
|
|
.fr-toolbar {
|
|
background: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
body.side-panel-not-fixed {
|
|
.fancy-layout {
|
|
.field-richeditor {
|
|
border-left: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
html.cssanimations {
|
|
.fancy-layout {
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
html.gecko {
|
|
.fancy-layout .control-tabs.secondary-tabs > div > ul.nav-tabs > li.active a {
|
|
padding-top: 13px;
|
|
}
|
|
}
|