kityminder/ui/theme/default/css/_public.less

Kity Minder

.animation(@value) {
    -webkit-animation: @value;
    -moz-animation: @value;
    -ms-animation: @value;
    -o-animation: @value;
    animation: @value;
}

.blur {
    filter: url(../images/blur.svg#blur);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -mz-filter: blur(5px);
    -o-filter: blur(5px);
    filter: blur(5px);
}

.dock(@top: 0, @right: @top, @bottom: @top, @left: @right) {
    position: absolute;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
}


.validate-error {
    color: red;
    border-color: red !important;
    vertical-align: middle;
}

span.validate-error {
    margin-left: 5px;
}

.button, button {
    display: inline-block;
    height: 30px;
    padding: 0 15px;
    line-height: 30px;
    text-align: center;
    outline: none;
    background: lighten(@tab-active, 20%);
    &:hover, &.hover {
        background: lighten(@tab-hover, 20%);
    }
    &:active, &.active {
        background: lighten(@tab-active, 15%);
    }
    &:disabled {
        background: #CCC;
        &:hover, &.hover,
        &:active, &.active {
            background: #CCC;
        }
    }
    cursor: default;
    color: @ui-fore;
    border: none;
    box-sizing: content-box;
}

input[type=text],
input[type=url] {
    padding: 2px 5px;
    height: 16px;
    line-height: 16px;
    outline: none;
    border: 1px solid lighten(@tab-hover, 50%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.05);
    border-radius: 2px;
    &:focus {
        border-color: hsl(223, 38%, 55%);
    }
}

.loading-circle(@size: 40px, @border-size: 4px) {
    width: @size;
    height: @size;
    border: @border-size solid;
    border-color: @border-color transparent transparent;
    box-shadow: 0 0 (@size - 5px) white;
    z-index: 10;
    border-radius: 100%;
    .animation(rotate 1.33s ease infinite);
    filter: none;
    -webkit-filter: none;
}

.loading(@color: rgb(128, 130, 140), @border-color: #fff) {
    .loading-target {
        .blur;
    }
    
    &:after {
        content: ' ';
        display: block;
        .dock;
        background: fadeOut(@color, 25%);
        .animation(fadeIn 3s ease);
    }

    &:before {
        content: ' ';
        .loading-circle;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -24px;
        margin-top: -24px;
    }
}

.loading {
    .loading();
}

@-webkit-keyframes rotate {
    from { 
        transform: rotate(0);
    }
    to { 
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    from { 
        transform: rotate(0);
    }
    to { 
        transform: rotate(360deg);
    }
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-webkit-keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}


.shortcut-key {
    display: inline-block;
    padding: 3px 8px 5px;
    font-size: 12px;
    font-weight: normal;
    line-height: 14px;
    color: hsl(0, 0%, 43%);
    /* text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25); */
    white-space: nowrap;
    vertical-align: middle;
    background-color: hsl(0, 0%, 99%);
    border-radius: 3px;
    border: 1px solid hsl(0, 0%, 80%);
    text-transform: capitalize;
    box-shadow: inset 0 -2px hsl(0, 0%, 92%), inset 0 -3px hsl(0, 100%, 100%), 0 1px 2px rgba(255, 255, 255, 0.3);
    
    &:active {
        padding-top: 4px;
        padding-bottom: 4px;
        box-shadow: inset 0 -1px hsl(0, 0%, 92%), inset 0 -2px hsl(0, 100%, 100%), 0 1px 1px rgba(255, 255, 255, 0.3);
        &:after {
            transform: translate(0, 1px);
        }
    }

    .mac &.ctrl,
    .mac &.shift,
    .mac &.alt,
    &.up,
    &.down,
    &.left,
    &.right {
        text-indent: 99999px;
        position: relative;
        width: 9px;

        &:after {
            display: block;
            position: absolute;
            text-align: center;
            left: 5px;
            top: 4px;
            width: 16px;
            height: 16px;
            text-indent: 0;
        }
    }

    .mac &.ctrl:after {
        content: '⌘';
    }
    .mac &.shift:after {
        content: '⇧';
    }
    .mac &.alt:after {
        content: '⌥';
    }
    &.up:after {
        content: '↑';
        top: 2px;
    }
    &.down:after {
        content: '↓';
        top: 2px;
    }
    &.left:after {
        content: '←';
        top: 2px;
    }
    &.right:after {
        content: '→';
        top: 2px;
    }
}