unique-interface/theme/components/basic.less

无UI组件库

/*
 * Styles for basic components
 *
 * Include:
 *   ui-row
 *   ui-col
 *   ui-link
 *   ui-tag
 *   ui-input
 *   ui-button
 *   ui-backdrop (class only)
 *   ui-caret (class only)
 *
 * Nice to meet you
 *
 */

/* row */
.ui-row {
    display: flex;
    align-items: stretch;

    // justify
    .is-justify(@type){
        &.is-justify-@{type} {
            justify-content: @type;
        }
    }
    .is-justify(end);
    .is-justify(center);
    .is-justify(space-around);
    .is-justify(space-between);
    // align
    .is-align(@type){
        &.is-align-@{type} {
            align-items: @type;
        }
    }
    .is-align(flex-start);
    .is-align(center);
    .is-align(flex-end);
    // separate
    &.is-separate {
        margin-left: -@block-outer-vertical / 2;
        margin-right: -@block-outer-vertical / 2;
    }
}
/* col */
.ui-col {
    box-sizing: border-box;
    width: 0%;
    .ui-row.is-separate > & {
        margin-left: @block-outer-vertical / 2;
        margin-right: @block-outer-vertical / 2;
    }
}
.ui-col-0 {
    flex: 0 0 auto;
    width: auto;
}
.ui-cols(6);
.ui-cols(@n) when (@n > 0) {
    .ui-cols(@n - 1);
    .ui-col-@{n} {
        flex: @n 0 auto;
    }
}
/* text */
.ui-text {
    overflow: hidden;
}
.ui-text-frame {
    position: relative;
    overflow: hidden;
}
.ui-text-right-bar {
    float: right;
    margin-bottom: -1px;
}
.ui-text-placeholder {
    float: right;
    clear: right;
    height: 1px;
    opacity: 0;
}
.ui-text-ghost {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 100%;
    user-select: none;
}
.ui-text-ghost::before {
  content: "\200B";
  float: right;
  width: 50%;
  height: 100%;
}
.ui-text-left-bar {
    height: 100%;
    width: 50%;
    float: right;
}
.ui-text-ellipsis {
    float: right;
    width: 50%;
    transform: translate(-100%, 0);
}
.ui-text-ellipsis-content {
    float: right;
    transform: translate(0, -100%);
}
.ui-text-content-movement {
    visibility: hidden;
    pointer-events: none;
}
.ui-text.is-openable {
    .ui-text-ellipsis-content {
        cursor: pointer;
        color: @text-color-openable-ellipsis;
        &:hover {
            text-decoration: underline;
        }
    }
}
.ui-text.is-open {
    .ui-text-ghost,
    .ui-text-right-bar,
    .ui-text-placeholder,
    .ui-text-content-movement {
        display: none;
    }
}
/* link */
.ui-link {
    color: @color-primary;
    cursor: pointer;
    &:hover {
        text-decoration: underline;
    }
}
/* tag */
.ui-tag {
    display: inline-block;
    line-height: 1;
    padding: @tag-inner-vertical @tag-inner-horizontal;
    border-radius: @tag-border-radius;
}
.ui-tag-closer {
    margin-left: .5em;
    &::before {
        cursor: pointer;
        content: "╳";
    }
}
.ui-tag-primary {
    color: @tag-color-primary;
    background-color: @tag-color-primary-bg;
}
.ui-tag-info {
    color: @tag-color-info;
    background-color: @tag-color-info-bg;
}
.ui-tag-group {
    margin: (-@tag-outer-horizontal / 2) (-@tag-outer-vertical / 2);
    .ui-tag {
        margin: (@tag-outer-horizontal / 2) (@tag-outer-vertical / 2);
    }
}
/* dropdown */
.ui-dropdown {
    position: relative;
    display: inline-block;
}
.ui-dropdown-hover {
    position: relative;
    & .ui-dropdown-menu {
        display: none;
    }
    &:hover .ui-dropdown-menu {
        display: unset;
    }
}
.ui-dropdown-menu {
    .shape-dropdown-menu();
}
.ui-dropdown-menu-panel {
    .shape-dropdown-menu-panel();
}
.ui-dropdown-item {
    display: block;
    padding: @shape-dropdown-item-inner-vertical @shape-dropdown-item-inner-horizontal;
    font-size: @shape-dropdown-item-font-size;
    line-height: @shape-dropdown-item-line-height;
    color: @color-text-regular;
    cursor: pointer;
    white-space: nowrap;
    &:hover {
        background-color: @color-bg-active-regular;
    }
}
/* input */
.ui-input {
    position: relative;
    vertical-align: middle;
    display: block;
    width: 100%;
}
.ui-input-border {
    border-radius: @border-radius-base;
    border: @unit-border;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
}
.ui-input-border-negative {
    margin: -@unit-border-width;
    flex: 1 1 auto;
    // height: calc(~"100% + "@unit-border-width * 2);
}
.ui-input-input {
    appearance: none;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    display: block;
    font-size: @unit-font-size;
    line-height: @unit-line-height;
    min-height: 100%;
    outline: none;
    padding: @unit-inner-vertical @unit-inner-horizontal;
    resize: none;
    width: 100%;

    .ui-input.is-have-prefix & {
        padding-left: @unit-inner-horizontal * 2 + @unit-font-size;
    }
    .ui-input.is-have-suffix & {
        padding-right: @unit-inner-horizontal * 2 + @unit-font-size;
    }
}
.ui-input-prefix, .ui-input-suffix {
    padding: 0 @unit-inner-horizontal;
    height: @unit-height;
    line-height: @unit-height;
    position: absolute;
    top: 0;
}
.ui-input-prefix {
    left: 0;
}
.ui-input-suffix {
    right: 0;
}
.ui-input-dropdown-menu {
    margin-top: -@unit-border-width;
}
.ui-input-dropdown-item {
    white-space: normal;
}
/* button */
.ui-button {
    box-sizing: border-box;
    display: inline-block;
    height: @unit-height;
    padding: @unit-inner-vertical 1em;
    line-height: @unit-line-height;
    background-color: transparent;
    border: @unit-border-width @unit-border-style transparent;
    border-radius: @border-radius-base;
    font-size: @unit-font-size;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    outline: none;

    &.is-block {
        display: block;
        width: 100%;
    }
    &.is-round {
        border-radius: @unit-height;
    }
    &.is-disabled, &.is-disabled:hover {
        cursor: not-allowed;
        border-color: @color-disabled-bg;
        background-color: @color-disabled-bg;
        color: @color-disabled;
    }
}
.ui-button-border-negative {
    margin: -@unit-border-width;
}
.ui-button-default {
    border-color: @color-border-regular;
    background-color: @color-white;
    color: @color-text-regular;
    &:hover {
        background-color: @color-bg-active-regular;
    }
}
.ui-button-primary {
    border-color: @color-primary;
    background-color: @color-primary;
    color: @button-color-text-primary;
    &:hover {
        border-color: @color-primary-dark-1;
        background-color: @color-primary-dark-1;
    }
}
// 不太对
// .ui-button-info {
//     border-color: @color-info;
//     background-color: @color-info;
//     color: @color-text-alt;
//     &:hover {
//         border-color: @color-info-dark-1;
//         background-color: @color-info-dark-1;
//     }
// }
.ui-button-size-sm {
    font-size: @unit-font-size-sm;
    height: @unit-height-sm;
    line-height: @unit-line-height-sm;
    padding: @unit-inner-vertical-sm 1em;
}
.ui-button-size-xs {
    font-size: @unit-font-size-xs;
    height: @unit-height-xs;
    line-height: @unit-line-height-xs;
    padding: @unit-inner-vertical-xs 1em;
}
/* button group */
.ui-button-group .ui-button {
    border-left-width: 0;
    border-radius: 0;
    &:first-child {
        border-left-width: @unit-border-width;
        border-radius: @button-group-border-radius 0 0 @button-group-border-radius;
    }
    &:last-child {
        border-radius: 0 @button-group-border-radius @button-group-border-radius 0;
    }
}
/* backdrop */
.ui-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: @color-backdrop;
    overflow: auto;
    z-index: 1000;
}
/* caret */
.ui-caret {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border: 4px solid transparent;
    margin: -2px 3px 0;

    &.is-top {
        border-top-color: currentcolor;
        border-bottom-width: 0;
    }
    &.is-bottom {
        border-bottom-color: currentcolor;
        border-top-width: 0;
    }
    &.is-left {
        border-left-color: currentcolor;
        border-right-width: 0;
    }
    &.is-right {
        border-right-color: currentcolor;
        border-left-width: 0;
    }
}