una/template/css/default.less

@import '_mixins.less';

.bx-def-page-width {
    width:@bx-page-width;
}

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

/* 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-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-left(@bx-margin-sec);
    &:last-child {
        .margin-left(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-page {
    .background-color (@bx-color-page);
}
.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 {
    font-family:@bx-font-family;
    font-weight:400; /* 26.13.13: prev val 300 */
    .font-size(@bx-font-size-default);
    color:@bx-font-color-default;
}

.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: 800;
}

.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;
}

/* image/thumbnail/gallery default styles */


.bx-def-icon,
.bx-def-thumb,
.bx-def-ava,
.bx-def-ava-big {
    .radius(200px);
    overflow:hidden;
}

.bx-def-ava-big-size {
    .width(@bx-size-avatar-big);
    .height(@bx-size-avatar-big);
    .line-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);
    .line-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);
    .line-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);
}


.bx-def-unit {
    position:relative;
    white-space:nowrap;
}
.bx-def-unit .bx-def-unit-info,
.bx-def-unit .bx-def-unit-img,
.bx-def-unit img {
    display:inline;
    display:inline-block;
    vertical-align:middle;
    .line-height(19px);
}
.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-info {
    .box-sizing(border-box);

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

.bx-def-unit-alert,
.bx-def-unit-alert-small,
.bx-def-unit-alert-middle {
    display:block;
    position:absolute;
    top: 0;
    right: -2px;
    text-align:center;
    color:white;
}
.bx-def-unit-alert {
	.min-width(@bx-font-size-middle);
    .height(@bx-font-size-middle);
    .line-height(@bx-font-size-middle);
    .radius(@bx-font-size-middle);
    .font-size(@bx-font-size-middle);
    .padding(3px);
}
.bx-def-unit-alert-small {
	.min-width(@bx-font-size-small + 1);
    .height(@bx-font-size-small + 1);
    .line-height(@bx-font-size-small + 1);
    .radius(@bx-font-size-small);
    .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-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 {
    .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:400;
}

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

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