cms_thermo_active/Step/wwwroot/assets/styles/base/ribbons.less

// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
@import "header.less";
@ribbon-status-size: 64px;
.ribbon-container {
    height: 100%;
    float: left;
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    background-image: @color-ribbon-opened;
    box-shadow: @color-alarm-box-shadow;
    border-top-right-radius: @header-height /2;
    border-bottom-right-radius: @header-height /2;
    margin-right: 5px;
    .app-ribbon {
        justify-content: space-between; // background-image: @color-alarm-background-image;
        background-image: @color-ribbon-opened;
        box-shadow: @color-alarm-box-shadow;
        min-width: 88px;
        width: 88px;
        transition: width 200ms ease-in-out;
        border-top-right-radius: @header-height /2;
        border-bottom-right-radius: @header-height /2;
        display: flex;
        align-items: center;
        height: 100%;
        cursor: pointer;
        color: @color-clear-blue;
        .status-icon {
            margin-left: 16px;
            margin-right: 8px;
            display: flex;
            color: #fff;
            align-items: center;
            min-width: @ribbon-status-size;
            width: @ribbon-status-size;
            height: @ribbon-status-size;
            border-radius: @ribbon-status-size /2;
            background-color: @color-clear-blue;
        }
        .status-content {
            overflow: hidden;
            display: flex;
            align-items: center;
            flex-flow: row;
            flex-grow: 2; // border: 1px solid red;
            height: 100%;
            width: 100%;
            margin: 0px;
            white-space: nowrap;
            .content {
                display: flex;
                flex-flow: column;
                strong {
                    font-size: 20px;
                    font-weight: 800;
                }
                .processes {
                    display: flex;
                    flex-flow: row;
                    font-size: 14px;
                    padding: 0 5px;
                    border: 1px solid #fff;
                    float: left;
                    display: block;
                    margin: 0 3px;
                }
            }
        }
        .status-icon * {
            width: 100%;
            margin: auto;
            text-align: center;
            font-size: 32px;
        }
    }
    .service-ribbon {
        justify-content: space-between;
        display: flex;
        align-items: center;
        color: @color-scarlet;
        width: 122px;
        transition: width 200ms ease-in-out;
        cursor: pointer;
        overflow: hidden;

        &.collapsed{
          width: 0 !important;
        }

        .service-icon {
            width: @ribbon-status-size;
            min-width: @ribbon-status-size;
            height: @ribbon-status-size;
            border-radius: @ribbon-status-size /2;
            display: flex;
            align-items: center;
            background-color: @color-scarlet;
            margin: auto;
            text-align: center;
            margin-left: 16px;
            margin-right: 8px;
            img {
                display: block;
                margin: auto;
            }
        }
        .service-content {
            overflow: hidden;
            display: flex;
            align-items: center;
            flex-flow: row;
            flex-grow: 2; // border: 1px solid red;
            height: 100%;
            width: 100%;
            margin: 0px;
            .content {
                display: flex;
                flex-flow: column;
                strong {
                    font-size: 20px;
                    font-weight: 800;
                }
                span {
                    font-size: 14px;
                }
            }
        }
    }
    .app-ribbon>*,
    .service-ribbon>* {
        margin: 8px;
    }
    .app-ribbon i,
    .service-ribbon i {
        font-size: 32px;
    }
}

.app-ribbon.expander {
    width: 122px;
}

.app-ribbon.big,
.app-ribbon.expander.big,
.service-ribbon.big {
    width: 496px;
}

.app-ribbon.working {
    color: @color-apple-green;
    .status-icon {
        background-color: @color-apple-green;
        i {
            margin-left: 5px; // hack per il riallineamento di questa icona.
        }
    }
}

.app-ribbon.alarm {
    background-image: @color-alarm-background-image;
    color: #fff;
    cursor: pointer;
    .status-icon {
        background-color: #fff;
        color: @color-scarlet;
    }
    &.big.opened {
      background-image: @color-ribbon-opened;
      color: @color-scarlet;
      .status-icon {
          background-color: @color-scarlet;
          color: #fff;
      }
      .processes {
              border: 1px solid @color-warm-grey !important;
              color: @color-greyish-brown ;
              font-weight: 600;
      }
  }
}

.app-ribbon.warning {
    background-image: @color-warning-background-image;
    color: #fff;
    .status-icon {
        background-color: #fff;
        color: @color-squash;
    }
    &.opened {
        background-image: @color-ribbon-opened;
        color: @color-squash;
        .status-icon {
            background-color: @color-squash;
            color: #fff;
        }
        .processes {
            border: 1px solid @color-warm-grey !important;
            color: @color-greyish-brown ;
            font-weight: 600;
        }
    }
}

.app-ribbon.open {
    background-image: @color-ribbon-opened !important;
}