/*
 * @description: console system common stylesheet
 * @version: 0.1
 */

@import "compass/css3";
@import "common/css/common.scss";
@import "/index/images/icon/*.png";
@import "/index/images/lib/*.png";
$icons: sprite-map("/index/images/icon/*.png", $spacing:12px);
$lib-icons: sprite-map("/index/images/lib/*.png", $spacing:5px);
.container {
    width: 100%;
}


/* dome system icon */

// document
.icon-doc {
    @include get-sprite($icons, doc, true);
}

.icon-add {
    @include get-sprite($icons, add, true);
}

.icon-add-white {
    @include get-sprite($icons, add-white, true);
}

.icon-add-green {
    @include get-sprite($icons, add-green, true);
}

.icon-github,
.icon-gitlab {
    margin-right: 6px;
}

.icon-github {
    @include get-sprite($lib-icons, github, true);
}

.icon-gitlab {
    @include get-sprite($lib-icons, gitlab, true);
}

.icon-centos {
    @include get-sprite($lib-icons, centos, true);
}

.icon-ubuntu {
    @include get-sprite($lib-icons, ubuntu, true);
}

.icon-search {
    @include get-sprite($icons, search, true);
    margin-right: 6px;
}

.icon-edit {
    @include get-sprite($icons, edit, true);
}

.icon-down {
    @include get-sprite($icons, down, true);
}

.icon-down-white {
    @include get-sprite($icons, down-white, true);
}

.icon-down,
.icon-down-white {
    &.up {
        @include rotate(-90deg);
    }
    &.top {
        margin-left: 8px;
        @include rotate(180deg);
    }
}

.icon-down-round {
    @include get-sprite($icons, down-round, true);
}

.icon-delete {
    @include get-sprite($icons, delete, true);
}

.icon-delete-disable {
    @include get-sprite($icons, delete-disable, true);
}

.icon-cancel {
    @include get-sprite($icons, cancel, true);
    margin-left: 4px;
}

.icon-check {
    @include get-sprite($icons, check, true);
}

.icon-last,
.icon-next,
.icon-down-double {
    @include get-sprite($icons, last, true);
    width: 14px;
    height: 16px;
    @include sprite-background-position($icons, last, 2px, 3px);
}

.icon-next {
    @include sprite-background-position($icons, next, 2px, 3px);
}

.icon-down-double {
    @include rotate(-90deg);
    &.up {
        @include rotate(90deg);
    }
}

.icon-label {
    @include get-sprite($icons, label, true);
    margin-right: 4px;
}

.icon-help {
    @include get-sprite($icons, help, true);
    &:hover {
        @include sprite-background-position($icons, help-hover);
    }
}

.icon-user {
    @include get-sprite($icons, user, true);
    margin-right: 4px;
}

.icon-cpu {
    @include get-sprite($icons, cpu, true);
    margin-right: 4px;
}

.icon-memory {
    @include get-sprite($icons, memory, true);
    margin-right: 4px;
}
.icon-docker-sm {
    @include get-sprite($icons, docker-sm, true);
    margin-right: 4px;
}

.icon-kube-sm {
    @include get-sprite($icons, kube-sm, true);
    margin-right: 4px;
}

.icon-order {
    @include get-sprite($icons, order, true);
    margin-left: 4px;
}

.icon-fresh {
    @include get-sprite($icons, fresh, true);
    margin-right: 4px;
    &:hover {
        @include sprite-background-position($icons, fresh-hover)
    }
}

.icon-copy {
    @include get-sprite($icons, copy, true);
    margin-right: 4px;
    &:hover {
        @include sprite-background-position($icons, copy-hover)
    }
}

.icon-copy-clipboard {
    @include get-sprite($icons, clipboard-logo, true);
}

.icon-tool {
    @include get-sprite($icons, tool, true);
}

.icon-builder {
    @include get-sprite($icons, icon-builder, true);
}

.icon-config {
    @include get-sprite($icons, config, true);
    margin-right: 4px;
}

.icon-alarm {
    @include get-sprite($icons, alarm, true);
    margin-right: 4px;
}

.icon-docker-image {
    @include get-sprite($lib-icons, docker-image, true);
}

.icon-add-env {
    @include get-sprite($lib-icons, add-env, true);
}

.icon-delete-env {
    @include get-sprite($lib-icons, delete-env, true);
}

table {
    .fa {
        padding: 5px 10px 5px 0 !important;
    }
}

.icon-git-color {
    color: #ff9800;
    font-size: 16px !important;
}

.icon-setting-color {
    color: #188ae2;
    font-size: 16px !important;
}

.icon-cancel-color {
    color: #f05050;
    font-size: 16px !important;
}

.icon-success-color {
    color: #4bd396;
    font-size: 16px !important;
}

.icon-edit-color {
    color: #29b6f6;
    font-size: 16px !important;
}

.icon-trash-color {
    color: #f05050;
    font-size: 16px !important;
}

.icon-disabled-color {
    color: #ccc;
    font-size: 16px !important;
}

.icon-fa {
    font-size: 16px !important;
}

.icon-algin-right {
    margin-right: 10px;
}

.icon-fa-disabled {
    color: dome-color(dome, disabled);
    font-size: 16px !important;
}

.pull-right-margin {
    margin-right: 0px;
    margin-bottom: 1px;
}


/* dome system icon end*/


/* common style */

// search input
.ui-input {
    display: inline-block;
    height: 34px;
    padding: 6px 10px 6px 6px;
    line-height: 20px;
    vertical-align: middle;
}

.ui-input-search,
.ui-input-search-white {
    width: 274px;
    background-origin: padding-box;
}

.inner-input-search {
    padding: 10px;
}

.search-size-lg {
    width: 100%;
}

.ui-input-search {
    padding-left: 38px;
    @include get-sprite($icons, search, false);
    @include sprite-background-position($icons, search, 10px, 9px);
}

.ui-input-search-white {
    padding-left: 20px;
    padding-bottom: 4px;
    @include get-sprite($icons, search, false);
    @include sprite-background-position($icons, search, 0, 4px);
    border: none;
}

.ui-input-full {
    width: 100%;
}

.ui-label {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 4px;
    background-color: dome-color(background, light);
    border-radius: $default-radius;
    &:last-child {
        margin-right: 0;
    }
}


/* text style */

.txt-safe {
    color: dome-color(dome, safe);
}

.txt-warning {
    color: dome-color(dome, warning);
}

.txt-success {
    color: dome-color(dome, active);
}

.txt-normal {
    color: dome-color(dome, primary);
}

.txt-embed {
    color: dome-color(font, embed);
}

.txt-prompt {
    color: dome-color(font, prompt);
}

.txt-prompt-limit-width {
    width: 80%
}

.txt-primary {
    color: dome-color(dome, primary);
}

.txt-bright {
    color: dome-color(dome, bright);
}

.txt-blue {
    color: dome-color(font, light-blue);
}

.txt-white {
    color: dome-color(dome, white) !important;
}

.txt-circle {
    display: inline-block;
    margin-left: 10px;
    padding: 0 14px 0 14px;
    line-height: 34px;
    font-style: normal;
    background-color: dome-color(background, light);
    border-radius: 22px;
    &.active {
        background-color: dome-color(background, primary);
    }
}


/* text style end*/

.require-domain {
    color: dome-color(dome, error);
    position: absolute;
    margin-left: 5px;
    margin-top: 3px;
    font-size: 16px;
}

.font-size-16 {
    font-size: 16px;
}

.font-size-18 {
    font-size: 18px;
}

.tool-next {
    margin-left: 10px;
}

.tool-wrap-break {
    word-break: break-all;
}

.tool-white-space {
    white-space: pre-wrap;
}

.tool-inline-error {
    color: dome-color(dome, error);
    margin-left: 10px;
}

// no wrap (eg:there is text with class '.tool-nowrap'...)
.tool-nowrap {
    @extend %nowrap;
}

.tool-align-text {
    padding-right: 4px;
}

// text align input
.tool-align-input {
    padding-top: 6px;
}

.tool-not-align-input {
    padding-top: 0px !important;
}

.tool-enable-click:hover {
    cursor: pointer;
}

.tool-item-next {
    margin-left: 10px;
}

.full {
    width: 100%;
}

.popover.top {
    word-wrap: break-word;
}

// checkbox/radio's parent container
.com-check-con {
    margin-right: 40px;
}

// btn group
.com-btn-group {
    overflow: hidden;
    .ui-btn,
    .ui-input {
        float: left;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        &:first-child {
            border-radius: $default-radius 0 0 $default-radius;
        }
        &:last-child {
            border-radius: 0 $default-radius $default-radius 0;
        }
        &:not(:last-child) {
            border-right: 0;
        }
    }
    .ui-btn {
        height: 34px;
    }
}

// list like tabset
.com-tabset-scroll {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    height: 42px;
    font-size: 14px;
    max-width: 0;
    overflow: hidden;
    .list-back {
        width: 10000px;
    }
}

ul.com-list-tab {
    padding: 23px 0 0 $wider-padding;
    border-bottom: $light-border;
    li {
        display: inline-block;
        margin-right: 34px;
        border-bottom: 2px solid transparent;
        &:last-child {
            margin-right: 0;
        }
        &.active {
            a {
                color: dome-color(dome, primary);
            }
        }
        &.txt-error {
            color: dome-color(dome, error);
        }
        &.active,
        &:hover {
            cursor: pointer;
            border-bottom: 2px solid dome-color(dome, primary);
        }
        &.nav-option {
            position: absolute;
            right: 0;
            top: 0;
            width: 48px;
            height: 42px;
            margin-right: 0;
            padding-top: 24px;
            background-color: #fff;
            .icon-next {
                margin-left: 8px;
            }
            &:hover {
                border-bottom: none;
            }
        }
        a.link-list {
            display: inline-block;
            padding-bottom: 20px;
            &:focus {
                text-decoration: none;
            }
        }
    }
}

// bottom div include button
.com-bottom-option {
    padding-top: 50px;
    padding-bottom: 30px;
    text-align: center;
    // container of buttons with error info
    .com-bottom-option-con {
        position: relative;
        display: inline-block;
        .txt-error {
            position: absolute;
            left: 100%;
            top: 8px;
            width: 240px;
            padding: 0 5px;
            margin-left: 12px;
            text-align: left;
            background-color: #f5707a;
            color: #fff;
            &::after {
                content: "";
                position: absolute;
                right: 100%;
                top: 7px;
                width: 0;
                height: 0;
                border-top: 4px solid transparent;
                border-right: 4px solid #ff867f;
                border-bottom: 4px solid transparent;
            }
        }
    }
}

// chose registry
.com-chose-repository {
    padding-top: 22px;
    .repository {
        display: inline-block;
        width: 160px;
        height: 60px;
        margin-right: 66px;
        line-height: 60px;
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
        border-radius: $default-radius;
        border: 2px solid transparent;
        background-color: dome-color(background, light);
        margin-top: 15px;
        &:hover {
            cursor: pointer;
            border-color: dome-color(dome, primary);
        }
        i {
            margin-right: 6px;
        }
        .icon-gitlab {
            @include get-sprite($lib-icons, gitlab, true);
        }
        .icon-github {
            @include get-sprite($lib-icons, github, true);
        }
        &.active {
            border-color: dome-color(dome, primary);
            background-color: #fff;
        }
    }
}

// page no
.com-page-list {
    text-align: right;
    padding: 12px $page-padding 12px 0;
    .pageno {
        display: inline-block;
        margin-left: 6px;
        margin-right: 6px;
        &:hover {
            cursor: pointer;
        }
        &.on {
            font-weight: bold;
            color: dome-color(dome, primary);
        }
    }
    .page-info {
        margin-right: 10px;
    }
}

// style like label
.com-label-list {
    li {
        float: left;
        margin-right: 16px;
        margin-bottom: 18px;
        .label-item {
            display: inline-block;
            padding: 4px 8px 4px 8px;
            background-color: dome-color(background, light);
            border-radius: $default-radius;
            .icon-cancel {
                margin-right: 4px;
            }
        }
    }
}

.com-list-table {
    li.head {
        background-color: dome-color(background, light);
    }
    li {
        padding: 10px 12px 10px 15px;
        border-bottom: $light-border;
        &:last-child {
            border-bottom: none;
        }
        &:hover .ui-table-link {
            color: dome-color(dome, bright);
        }
    }
}

.nav-tabs {
    border-bottom: 1px solid #ddd;
    margin: 20px 20px 0 20px;
    li {
        //margin-bottom: 0;
        padding: 0 1px 0 1px;
        border: 1px solid transparent;
        border-radius: $default-radius $default-radius 0 0;
        &>a {
            border: none;
            margin-right: 0px;
            text-align: center;
            border: none;
            border-radius: 0;
            padding: 10px 15px 10px 15px;
            &:hover,
            &:focus {
                background: none;
                color: dome-color(font, default);
            }
        }
        &.active>a,
        &.active>a:hover,
        &.active>a:focus {
            border: none;
            border-radius: 0;
        }
        &:not(.nav-option) {
            &.active>a,
            &.active>a:hover,
            &.active>a:focus {
                //border-bottom: 2px solid dome-color(dome,primary);
                color: #188ae2;
            }
        }
        &.active {
            border: 1px solid #ddd;
            // border-right: 1px solid #ddd;
            // border-left: 1px solid #ddd;
            border-bottom: 1px solid #fff;
            border-radius: $default-radius $default-radius 0 0;
            &:hover {
                background-color: #fff;
            }
        }
        &:hover {
            background-color: #f0f2f5;
        }
    }
}

.member-con {
    padding: 0 20px 0 20px;
}

.tool-noinfo {
    padding: 30px 0;
}


/* dome custom input */

input.ui-radio,
input.ui-check {
    display: none;
    cursor: pointer;
    vertical-align: middle;
    &:focus,
    &:active {
        outline: none;
    }
    &+label {
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        padding-left: 25px;
        font-weight: 400;
        margin-right: 10px;
        min-width: 30px;
        &:before,
        &:after {
            content: " ";
            font-family: helvetica;
            display: inline-block;
            width: 18px;
            height: 18px;
            left: 0;
            bottom: 1px;
            text-align: center;
            position: absolute;
        }
        &:before {
            border: 1px solid #babec8;
            background-color: #fff;
            @include box-shadow(inset 0 0 0 0px dome-color(dome, active));
            @include transition(all .3s ease-in-out);
        }
        &:after {
            color: #fff;
        }
        &:empty {
            &:before,
            &:after {
                bottom: -10px;
            }
        }
    }
    &.size16+label {
        &:before,
        &:after {
            bottom: 3px;
        }
        &:empty {
            &:before,
            &:after {
                bottom: -7px;
            }
        }
    }
    &:checked+label {
        color: dome-color(dome, active);
    }
    &:checked+label:before {
        border: none;
        @include box-shadow(inset 0 0 0 10px dome-color(dome, active));
    }
}

.code-area {
    white-space: pre;
    font-family: Monaco, Consolas, 'Courier New', monospace;
}


/*Radio Specific styles*/

input.ui-radio {
    &+label:before {
        @include border-radius(50%);
    }
    &+label:hover:after,
    &:checked+label:after {
        content: '\2022';
        position: absolute;
        top: 2px;
        left: 0;
        font-size: 18px;
        line-height: 17px;
    }
    &+label:empty:hover:after,
    &:checked+label:empty:after {
        top: -10px;
        left: -0.5px;
    }
    &+label:hover:after {
        color: darken(#fff, 20%);
    }
    &:checked+label:after,
    &:checked+label:hover:after {
        top: 2px;
        color: #fff;
    }
}


/*Checkbox Specific styles*/

input.ui-check {
    &+label:before {
        @include border-radius(3px);
    }
    &+label:after {
        content: "\2713";
        color: #E5EDF5;
        line-height: 18px;
        font-size: 14px;
    }
    &+label:hover:after {
        color: #9BAFC9;
        @include transition(.3s)
    }
    &:checked+label:after,
    &:checked+label:hover:after {
        color: #fff;
    }
}

.ui-table-hover {
    tbody {
        tr:hover {
            background-color: dome-color(background, table-hover-background);
        }
    }
}

.ui-toggle {
    display: inline-block;
    width: 51px;
    height: 24px;
    margin-top: 3px;
    margin-right: 8px;
    border: none;
    box-shadow: none;
    background-color: #ccc;
    position: relative;
    @include border-radius(30px);
    @inlcude box-shadow(none);
    @include transition(all .2s ease-in-out);
    vertical-align: bottom;
    &:after {
        content: '';
        display: inline-block;
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #fff;
        top: 2px;
        left: 2px;
        @include border-radius(50%);
        @include transition(all .2s ease-in-out);
    }
    &.on {
        @include box-shadow(inset 0 0 0 12px dome-color(dome, active));
        &:after {
            left: 29px;
            background-color: #fff;
        }
    }
}
