una/template/css/default.less

@import (reference) '_mixins.less';

.bx-def-page-width {
    max-width:@bx-page-width;
    width: 100%;
}

.bx-def-box-sizing {
    .box-sizing(border-box);
}

.bx-def-align-center {
    display: -webkit-flex !important;
    display: flex !important;

    -webkit-justify-content: center;
    justify-content: center;

    -webkit-align-items: center;
    align-items: center;
}

.bx-def-valign-center {
    display: -webkit-flex !important;
    display: flex !important;

    -webkit-align-items: center;
    align-items: center;
}

/* margins */
.bx-def-centered {
	margin: 0px auto;
}

.bx-def-margin { 
    .margin(@bx-margin);
}
.bx-def-margin-neg { 
    .margin(-@bx-margin);
}
.bx-def-margin-lefttopright {
    .margin-left(@bx-margin);
    .margin-top(@bx-margin);
    .margin-right(@bx-margin);
}
.bx-def-margin-rightbottomleft {
    .margin-right(@bx-margin);
    .margin-bottom(@bx-margin);
    .margin-left(@bx-margin);
}
.bx-def-margin-leftright {
    .margin-left(@bx-margin);
    .margin-right(@bx-margin);
}
.bx-def-margin-leftright-neg {
    .margin-left(-@bx-margin);
    .margin-right(-@bx-margin);
}
.bx-def-margin-topbottom {
    .margin-top(@bx-margin);
    .margin-bottom(@bx-margin);
}
.bx-def-margin-topbottom-neg {
    .margin-top(-@bx-margin);
    .margin-bottom(-@bx-margin);
}
.bx-def-margin-top {
    .margin-top(@bx-margin);
}
.bx-def-margin-top-auto {
    .margin-top(@bx-margin);
    &:first-child {
        .margin-top(0px);
    }
}
.bx-def-margin-right {
    .margin-right(@bx-margin);
}
.bx-def-margin-bottom {
    .margin-bottom(@bx-margin);
}
.bx-def-margin-bottom-neg {
    .margin-bottom(-@bx-margin);
}
.bx-def-margin-left {
    .margin-left(@bx-margin);
}
.bx-def-margin-left-auto {
    .margin-left(@bx-margin);
    &:first-child {
        .margin-left(0);
    }
}
.bx-def-margin-right-auto {
    .margin-right(@bx-margin);
   /* &:last-child {
        .margin-right(0);
    }*/
}

.bx-def-margin-sec {
    .margin(@bx-margin-sec);
}
.bx-def-margin-sec-neg {
    .margin(-@bx-margin-sec);
}
.bx-def-margin-sec-lefttopright {
	.margin-left(@bx-margin-sec);
    .margin-top(@bx-margin-sec);
    .margin-right(@bx-margin-sec);
}
.bx-def-margin-sec-lefttopright-neg {
	.margin-left(-@bx-margin-sec);
    .margin-top(-@bx-margin-sec);
    .margin-right(-@bx-margin-sec);
}
.bx-def-margin-sec-bottom-neg {
    .margin-bottom(-@bx-margin-sec);
}
.bx-def-margin-sec-rightbottomleft {
    .margin-right(@bx-margin-sec);
    .margin-bottom(@bx-margin-sec);
    .margin-left(@bx-margin-sec);
}
.bx-def-margin-sec-leftright {
    .margin-left(@bx-margin-sec);
    .margin-right(@bx-margin-sec);
}
.bx-def-margin-sec-leftright-neg {
    .margin-left(-@bx-margin-sec);
    .margin-right(-@bx-margin-sec);
}
.bx-def-margin-sec-topbottom {
    .margin-top(@bx-margin-sec);
    .margin-bottom(@bx-margin-sec);
}
.bx-def-margin-sec-top {
    .margin-top(@bx-margin-sec);
}
.bx-def-margin-sec-top-neg {
    .margin-top(-@bx-margin-sec);
}
.bx-def-margin-sec-top-auto {
    .margin-top(@bx-margin-sec);
    &:first-child {
        .margin-top(0);
    }
}
.bx-def-margin-sec-right {
    .margin-right(@bx-margin-sec);
}
.bx-def-margin-sec-bottom {
    .margin-bottom(@bx-margin-sec);
}
.bx-def-margin-sec-left {
    .margin-left(@bx-margin-sec);
}
.bx-def-margin-sec-left-auto {
    .margin-left(@bx-margin-sec);
    &:first-child {
        .margin-left(0);
    }
}
.bx-def-margin-sec-right-auto {
    .margin-right(@bx-margin-sec);
    &:last-child {
        .margin-right(0);
    }
}

.bx-def-margin-thd {
    .margin(@bx-margin-thd);
}
.bx-def-margin-thd-neg {
    .margin(-@bx-margin-thd);
}
.bx-def-margin-thd-rightbottomleft {
    .margin-right(@bx-margin-thd);
    .margin-bottom(@bx-margin-thd);
    .margin-left(@bx-margin-thd);
}
.bx-def-margin-thd-leftright {
    .margin-left(@bx-margin-thd);
    .margin-right(@bx-margin-thd);
}
.bx-def-margin-thd-leftright-neg {
	.margin-left(-@bx-margin-thd);
    .margin-right(-@bx-margin-thd);
}
.bx-def-margin-thd-topbottom {
    .margin-top(@bx-margin-thd);
    .margin-bottom(@bx-margin-thd);
}
.bx-def-margin-thd-top {
    .margin-top(@bx-margin-thd);
}
.bx-def-margin-thd-top-auto {
    .margin-top(@bx-margin-thd);
    &:first-child {
        .margin-top(0);
    }
}
.bx-def-margin-thd-right {
    .margin-right(@bx-margin-thd);
}
.bx-def-margin-thd-bottom {
    .margin-bottom(@bx-margin-thd);
}
.bx-def-margin-thd-left {
    .margin-left(@bx-margin-thd);
}
.bx-def-margin-thd-left-auto {
    .margin-left(@bx-margin-thd);
    &:first-child {
        .margin-left(0);
    }
}

/* paddings */
.bx-def-padding {
    .padding(@bx-padding);
}
.bx-def-padding-lefttopright {
    .padding-left(@bx-padding);
    .padding-top(@bx-padding);
    .padding-right(@bx-padding);
}
.bx-def-padding-rightbottomleft {
    .padding-right(@bx-padding);
    .padding-bottom(@bx-padding);
    .padding-left(@bx-padding);
}
.bx-def-padding-leftright {
    .padding-left(@bx-padding);
    .padding-right(@bx-padding);
}
.bx-def-padding-topbottom {
    .padding-top(@bx-padding);
    .padding-bottom(@bx-padding);
}
.bx-def-padding-top {
    .padding-top(@bx-padding);
}
.bx-def-padding-right {
    .padding-right(@bx-padding);
}
.bx-def-padding-bottom {
    .padding-bottom(@bx-padding);
}
.bx-def-padding-left {
    .padding-left(@bx-padding);
}

.bx-def-padding-sec {
    .padding(@bx-padding-sec);
}
.bx-def-padding-sec-rightbottomleft {
    .padding-right(@bx-padding-sec);
    .padding-bottom(@bx-padding-sec);
    .padding-left(@bx-padding-sec);
}
.bx-def-padding-sec-topbottom {
    .padding-top(@bx-padding-sec);
    .padding-bottom(@bx-padding-sec);
}
.bx-def-padding-sec-leftright {
    .padding-left(@bx-padding-sec);
    .padding-right(@bx-padding-sec);
}
.bx-def-padding-sec-top {
    .padding-top(@bx-padding-sec);
}
.bx-def-padding-sec-right {
    .padding-right(@bx-padding-sec);
}
.bx-def-padding-sec-bottom {
    .padding-bottom(@bx-padding-sec);
}
.bx-def-padding-sec-left {
    .padding-left(@bx-padding-sec);
}

.bx-def-padding-thd {
    .padding(@bx-padding-thd);
}
.bx-def-padding-thd-rightbottomleft {
	.padding-right(@bx-padding-thd);
	.padding-bottom(@bx-padding-thd);
    .padding-left(@bx-padding-thd);
}
.bx-def-padding-thd-topbottom {
    .padding-top(@bx-padding-thd);
    .padding-bottom(@bx-padding-thd);
}
.bx-def-padding-thd-leftright {
    .padding-left(@bx-padding-thd);
    .padding-right(@bx-padding-thd);
}
.bx-def-padding-thd-top {
    .padding-top(@bx-padding-thd);
}
.bx-def-padding-thd-right {
    .padding-right(@bx-padding-thd);
}
.bx-def-padding-thd-bottom {
    .padding-bottom(@bx-padding-thd);
}
.bx-def-padding-thd-left {
    .padding-left(@bx-padding-thd);
}

/* colors */
.bx-def-color-bg-block {
    .background-color (@bx-color-block);
}
.bx-def-color-bg-box {
    .background-color (@bx-color-box);
}
.bx-def-color-bg-box-active,
.bx-def-color-bg-box-hover:hover {
    .background-color (@bx-color-box-hover);
}
.bx-def-color-bg-sec {
    .background-color (@bx-color-sec);
}

.bx-def-color-bg-hl,
.bx-def-color-bg-hl-even:nth-child(even),
.bx-def-color-bg-hl-hover:hover {
    .background-color (@bx-color-hl);
}

.bx-def-color-bg-active {
    .background-color (@bx-color-active);
}

.bx-btn.bx-btn-disabled:active,
.bx-btn.bx-btn-disabled:hover,
.bx-btn.bx-btn-disabled,
.bx-btn.bx-btn-small.bx-btn-disabled:active,
.bx-btn.bx-btn-small.bx-btn-disabled:hover,
.bx-btn.bx-btn-small.bx-btn-disabled,
.bx-btn.bx-btn-primary.bx-btn-disabled:active,
.bx-btn.bx-btn-primary.bx-btn-disabled:hover,
.bx-btn.bx-btn-primary.bx-btn-disabled {
    .background-color (@bx-color-disabled);
}

/* hr */
.bx-def-hr,
.bx-def-hr-auto {
    margin-left:0;
    margin-right:0;
    padding:0;
    border:0px;
    border-top:@bx-border-width @bx-border-type @bx-border-color-hr;
}
.bx-def-hr-auto:first-child {
	display: none;
}

/* border for common layout elements likedesign boxes, pads, menu items, etc */
.bx-def-border {
    border:@bx-border-width @bx-border-type @bx-border-color;
}
.bx-def-border-rightbottomleft {
    border-right:@bx-border-width @bx-border-type @bx-border-color;
    border-bottom:@bx-border-width @bx-border-type @bx-border-color;
    border-left:@bx-border-width @bx-border-type @bx-border-color;
}
.bx-def-border-top {
    border-top:@bx-border-width @bx-border-type @bx-border-color;
}
.bx-def-border-top-auto {
    border-top:@bx-border-width @bx-border-type @bx-border-color;
    &:first-child {
        border-top:none;
    }
}
.bx-def-border-right {
    border-right:@bx-border-width @bx-border-type @bx-border-color;
}
.bx-def-border-bottom {
    border-bottom:@bx-border-width @bx-border-type @bx-border-color;
}
.bx-def-border-left {
    border-left:@bx-border-width @bx-border-type @bx-border-color;
}
.bx-def-border-right {
    border-right:@bx-border-width @bx-border-type @bx-border-color;
}

/* shadow */
.bx-def-shadow {
    .drop-shadow (0px, 1px, 3px, 0px, rgba(51, 51, 51, 0.1));
}

/* round corders */
.bx-def-round-corners {
    .radius(@bx-round-corners-radius);
}

/* blur */
.bx-def-blur {
    .blur(2px);
}

/* fonts */

/* NOTE: bx-def-font, h1, h2, h3 styles were copied to editor.css */

.bx-def-font-inputs {
    font-family:@bx-font-family;
    font-weight:400; /* 27.13.13: prev val 300 */
    .font-size(@bx-font-size-default);
    /* TODO: Remove 'color' instruction later. It affects the font color in Buttons which is usually differs from text color in inputs. */
    /*color:@bx-font-color-default; */ 
}

.bx-def-font-color,
.bx-def-font-color:hover {
	color:@bx-font-color-default;
}

.bx-def-font-grayed {
    color:@bx-font-color-grayed;
}

.bx-def-font-contrasted:after,
.bx-def-font-contrasted:before,
.bx-def-font-contrasted {
    color:@bx-font-color-contrasted;
}

.bx-def-font-small {
    .font-size(@bx-font-size-small);
}

.bx-def-font-middle {
    .font-size(@bx-font-size-middle);
}

.bx-def-font-large {
    .font-size(@bx-font-size-large);
}

.bx-def-font-light {
	font-weight: 300;
}

.bx-def-font-normal {
	font-weight: 400;
}

.bx-def-font-semibold {
	font-weight: 600;
}

.bx-def-font-bold {
	font-weight: 700;
}

.bx-def-font-extrabold {
	font-weight: 900;
}

.bx-def-font-align-center {
	text-align: center;
}

h1,
.bx-def-font-h1 {
    .font-size(@bx-font-size-h1);
    font-weight:700;
}

h2,
.bx-def-font-h2 {
    .font-size(@bx-font-size-h2);
    font-weight:700;
}

h3,
.bx-def-font-h3 {
    .font-size(@bx-font-size-h3);
    font-weight:500;
}

.bx-def-vanilla-html {
    margin-left: auto;
    margin-right: auto;
}
.bx-layout-column-thin .bx-def-vanilla-html,
.bx-layout-column-half .bx-def-vanilla-html,
.bx-layout-column-wide .bx-def-vanilla-html {
    max-width: none;
}
.bx-layout-column-fullwidth .bx-base-text-entity-content.bx-def-vanilla-html {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.bx-def-vanilla-html.bx-def-constraint-pre pre {
    max-width: none;
    overflow: auto;
}

/* image/thumbnail/gallery default styles */

.bx-def-icon,
.bx-def-thumb,
.bx-def-ava,
.bx-def-ava-big {
    overflow:hidden;
}

.bx-def-ava-big-size {
    .width(@bx-size-avatar-big);
    .height(@bx-size-avatar-big);
}
.bx-def-ava-big-size-max-height {
    .max-height(@bx-size-avatar-big);
}
.bx-def-ava-big-size-min-height {
    .min-height(@bx-size-avatar-big);
}
.bx-def-ava-big-size-left-indent {
    .margin-left(@bx-size-avatar-big + @bx-margin);
}


.bx-def-ava-size {
    .width(@bx-size-avatar);
    .height(@bx-size-avatar);
}
.bx-def-ava-size-max-height {
    .max-height(@bx-size-avatar);
}
.bx-def-ava-size-min-height {
    .min-height(@bx-size-avatar);
}
.bx-def-ava-size-left-indent {
    .margin-left(@bx-size-avatar + @bx-margin);
}


.bx-def-thumb-size {
    .width(@bx-size-thumb);
    .height(@bx-size-thumb);
}
.bx-def-thumb-size-max-height {
    .max-height(@bx-size-thumb);
}
.bx-def-thumb-size-min-height {
    .min-height(@bx-size-thumb);
}
.bx-def-thumb-size-left-indent {
    .margin-left(@bx-size-thumb + @bx-margin);
}

.bx-def-icon-size {
    .width(@bx-size-icon);
    .height(@bx-size-icon);
}
.bx-def-icon-size-max-height {
    .max-height(@bx-size-icon);
}
.bx-def-icon-size-min-height {
    .min-height(@bx-size-icon);
}
.bx-def-icon-size-left-indent {
    .margin-left(@bx-size-icon + @bx-margin);
}

/*--- Unit ---*/
.bx-def-unit {
    position:relative;
    white-space:nowrap;
}
.bx-def-unit-info {
    .box-sizing(border-box);

    text-overflow:ellipsis;
    overflow:hidden;
}
.bx-def-unit .bx-def-unit-line .bx-def-ui-div:first-child {
    display: none;
}

/*-- Unit: Tailwind overwrite --*/
.bx-def-unit.absolute {
    position: relative;
}
.bx-def-unit.absolute .bx-def-unit-img {
    position: absolute;
    top: 0px;
    left: 0px;
}
.bx-def-unit.absolute .bx-def-unit-info {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
.bx-def-unit.absolute .bx-def-unit-info-cnt {
    width: 100%;
}
.bx-def-unit.absolute .bx-def-unit-line {
    text-overflow:ellipsis;
    overflow:hidden;
}

/*--- Alerts ---*/
.bx-def-unit-alert,
.bx-def-unit-alert-small,
.bx-def-unit-alert-middle {
    display:block;
    position:absolute;
    box-sizing: content-box;
    top: 0;
    right: -2px;
    text-align:center;
    color:white;
}
.bx-def-unit-alert {
    .min-width(@bx-font-size-default);
    .height(@bx-font-size-default);
    .line-height(@bx-font-size-default);
    .radius(@bx-font-size-default);
    .font-size(@bx-font-size-middle - 2);
    .padding(4px);
}
.bx-def-unit-alert-small {
    .min-width(@bx-font-size-small + 2);
    .height(@bx-font-size-small + 2);
    .line-height(@bx-font-size-small + 2);
    .radius(@bx-font-size-default);
    .font-size(@bx-font-size-small);
    .padding(1px);
}
.bx-def-unit-alert-middle {
    .min-width(@bx-font-size-middle - 2);
    .height(@bx-font-size-middle - 2);
    .line-height(@bx-font-size-middle - 2);
    .radius(@bx-font-size-middle - 2);
    .font-size(@bx-font-size-middle - 2);
    .padding(3px);
}

.bx-def-unit-live-search {
    text-align: left;
    overflow: hidden;
}

.bx-def-unit-live-search .bx-def-unit-img:not(.empty) {
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
}
.bx-def-unit-live-search .bx-def-unit-img-empty {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.bx-def-unit-live-search .bx-def-unit-img-empty i {
    font-size: 1.2rem;
}



.bx-def-gal-img-column {
    .column-width-raw(100%);
}

.bx-def-gal-img-size {
    .width(@bx-size-gallery-img-width);
    .height(@bx-size-gallery-img-height);
}

.bx-def-gal-div-size {
    width:100%;
    .height(@bx-size-gallery-img-height);
}
.bx-def-gal-unit-column {
    .column-width-raw(100%);
}
.bx-def-gal-unit-size {
    display:inline-block;
    width:100%; 
    height:auto;
    vertical-align:top;
    overflow:hidden;
    .box-sizing();
}


/* label */

.bx-def-label {
    .box-sizing(border-box);

    min-width: 1.5rem;
    .padding-left(@bx-padding-sec);
    .padding-right(@bx-padding-sec);

    .radius(@bx-round-corners-radius-label);

    background-color: @bx-color-label;
    
    line-height: 1.5rem;
    font-size: @bx-font-size-small;
}
.bx-def-label,
.bx-def-label a,
.bx-def-label .sys-icon {
    color: @bx-font-color-grayed;
}

.bx-def-label.menu {
    .radius(@bx-round-corners-radius-label-menu);

    background-color: @bx-color-label-menu;
}

.bx-def-label.menu,
.bx-def-label.menu a,
.bx-def-label.menu .sys-icon {
    color: @bx-font-color-contrasted;
}


/* z-index */

.bx-def-z-index-front {
    z-index:100;
}

.bx-def-z-index-nav {
    z-index:5000;
}

.bx-def-z-index-overlay {
    z-index:9700;
}

.bx-def-z-index-modal {
    z-index:10000;
}