unique-interface/examples/faas-ui/less/ui.less

无UI组件库

@import "~theme/index.less";
@import "variable.less";
@import (reference) "function.less";

/* Colors
-------------------------- */
// base
@color-base: #222;
// text
@color-text-regular: fade(@color-base, 60%);
@color-text-secondary: fade(@color-base, 40%);
// tag
@color-tag-orange: #ffa800;
// border
@color-border-regular: fade(@color-base, 10%);
// background
@color-bg-active-regular: mix(@color-base, @color-bg, 5%);
@color-bg-table-th: mix(@color-base, @color-bg, 5%);
// functional
@color-disabled: mix(@color-base, @color-bg, 20%);
@color-text-hit: #f76260;
@color-green: #2eca9c;
@color-placeholder: fade(@color-base, 20%);
@color-new: #ff4449;
/* Font
-------------------------- */
@font-size-lg: 16px;
@font-size-lger: 18px;

@font-line-height-xs: 20px;
@font-line-height-lg: 28px;

/* Block
--------------------------- */
@block-inner-vertical: 32px;
@block-inner-horizontal: 32px;
@block-outer-vertical: 24px;
@block-outer-horizontal: 24px;

/* Base
--------------------------- */
@unit-height-sm: 32px;
@unit-height-xs: 24px;
@unit-inner-horizontal: 16px;
@tag-inner-horizontal: 8px;
@tag-outer-vertical: 8px;
@tag-outer-horizontal: 8px;

@shape-dropdown-arrow-height: 8px;
@shape-dropdown-item-inner-horizontal: 24px;

.ui-button {
    padding: @unit-inner-vertical 24px;
    &.is-disabled, &.is-disabled:hover {
        border-color: @color-border-regular;
    }
}
.ui-button-self + .ui-button-self {
    margin-left: 24px;
}
.ui-button-size-sm {
    padding: @unit-inner-vertical-sm 24px;
}
.ui-button-size-xs {
    padding: @unit-inner-vertical-xs 16px;
}
.ui-button-default {
    color: @color-text-primary;
}
.ui-tag-label {
    padding: @tag-inner-vertical - 2px @tag-inner-horizontal;
    vertical-align: middle;
    font-size: @font-size-xs;
    font-weight: normal;
    color: fade(@color-text-primary, 40%);
    border: 1px solid fade(@color-text-primary, 20%);
    border-radius: 0;
}
.ui-tag-orange {
    color: @color-tag-orange;
    border-color: @color-tag-orange;
}
// TODO 组件库中目前版本0.1.6，写反了，修改组件库后需删除 2018-11-28
.ui-tag-group {
    .ui-tag {
        margin: (@tag-outer-vertical / 2) (@tag-outer-horizontal / 2);
    }
}
// 组件库中目前版本0.1.6，写反了
.ui-dropdown {
    .ui-dropdown-menu-panel {
        border-radius: 8px;
        box-shadow: 0 0 10px 0 @color-border-regular;
    }
}
.ui-popover {
    .ui-dropdown-menu-panel{
        padding: 16px - (@font-line-height-base - @font-size-base) / 2 16px;
        font-size: @font-size-base;
        line-height: @font-line-height-base;
    }
}

/* form
--------------------------- */
@form-item-label-outer-horizontal: 32px;
@form-item-outer-vertical: 24px;
@form-item-error-height: @form-item-outer-vertical - 4px;
// 单选间距
@unit-outer-horizontal: 24px;
@form-gap-vertical: 32px;
@form-footer-button-width: 76px;
@form-footer-button-gap: 48px;

@input-width-xs: 180px;
@input-width-sm: 480px;
@input-width-lg: 680px;
.ui-form-label {
    width: 100px;
    text-align: right;
}
.ui-form-item-line {
    display: flex;
    align-items: flex-start;
    width: @input-width-lg;
    padding-right: calc(1em + 16px);
    position: relative;
    > div + div {
        margin-left: 24px;
    }
    & + & {
        margin-top: 16px;
    }
    .footer-icon {
        position: absolute;
        right: 0;
    }
}
.ui-info-item {
    display: flex;
    flex-wrap: wrap;
    & + & {
        margin-top: 32px;
    }
    .ui-info-item-line {
        flex: 1;
        margin: -(@font-line-height-base - @font-size-base) / 2 0;
        line-height: @font-line-height-base;
        white-space: pre-line;
    }
    .info-item-line-content + .info-item-line-content {
        margin-top: 16px;
    }
}
.ui-input-xs {
    width: @input-width-xs;
    max-width: @input-width-xs;
}
.ui-input-sm {
    width: @input-width-sm;
    max-width: @input-width-sm;
}
.ui-input-lg {
    width: @input-width-lg;
    max-width: @input-width-lg;
}
// textarea右下角字数提示
.ui-input.is-have-suffix .ui-input-border {
    textarea {
        padding: @unit-inner-vertical @unit-inner-horizontal;
    }
}
.ui-input-suffix {
    top: auto;
    bottom: 0;
}
.ui-textarea-suffix {
    color: fade(@color-text-primary, 20%);
}
.ui-upload .uicon {
    float: left;
    width: 40px;
    text-align: center;
    font-size: 24px;
    border-radius: 4px;
    color: @color-text-secondary;
    background-color: @color-info-bg;
    margin-right: 16px;
    &:hover {
        background-color: mix(@color-black, @color-info-bg, 10%);
    }
}
/* Info
-------------------------- */
@unit-outer-vertical: 24px;
@modal-footer-button-width: @form-footer-button-width;
@modal-footer-button-gap: 32px;

.ui-step {
    color: @color-text-primary;
}
.ui-step.is-next {
    color: @color-text-secondary;
    .ui-step-icon-inner {
        background-color: @color-border-regular;
    }
    .ui-step-line {
        border-color: @color-border-regular;
    }
}
.ui-step-icon-inner {
    width: 32px;
    line-height: 32px;
}
.ui-step-line {
    left: calc(~"-50% + 26px");
    right: calc(~"50% + 26px");
}
.ui-step-title {
    font-size: @font-size-base;
}
.ui-modal-header {
    font-size: @font-size-lg;
    line-height: @font-line-height-lg;
    margin: -(@font-line-height-lg - @font-size-lg) / 2 0 @unit-outer-vertical - (@font-line-height-lg - @font-size-lg) / 2;
}
/*  Navigation
------------------------ */
@tab-inner-top: 16px;
@tab-inner-bottom: 16px;
@tab-outer-right: 16px;

@menu-item-unit-gap: 8px;
.ui-submenu-angle {
    color: fade(#222, 20%);
}
.ui-breadcrumb {
    margin-bottom: @block-outer-vertical;
}

.ui-tab {
    font-weight: normal;
}
.ui-tab.active {
    border-bottom-color: @color-base;
}
.ui-tabs-level-1 {
    border: 0;
    padding: 8px 32px 0;
    font-size: @font-size-lg;
    background-color: fade(@color-base, 5%);
    .ui-tab {
        margin: 0;
        border: 0;
        padding: @tab-inner-top 48px @tab-inner-bottom;
        font-weight: normal;
    }
    .ui-tab.active {
        border: 0;
        font-weight: bold;
        background-color: @color-bg;
    }
}