Skip to content
Snippets Groups Projects
rack.scss 946 B
div.rack-container {
    position: relative; 
    padding-bottom: 0rem; 
    border-bottom: 1px solid gray;
    box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.2);
}

div.rack {
    position: relative;
    display: inline-block;
    width: 300px; 
    border: 1px solid rgba(0, 0, 0, 0.1);
}

div.server {
    position: absolute;
    width: 100%;

    padding: 0.2rem;

    display: flex;
    flex-direction: column;
    word-wrap: break-word;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

div.slot {
    position: absolute;
    width: 100%;
    height: 2rem;

    padding: 0.2rem;

    display: flex;
    flex-direction: column;
    word-wrap: break-word;
    background-color: rgba(0, 0, 0, 0.01);
    border: 1px solid rgba(0, 0, 0, 0.05);

    color: rgba(0, 0, 0, 0.2);
}

// max rack (or server)) size should be 50u ...
@for $size from 1 through 50 {
    div.size-#{$size}u {
        height: #{$size * 2}rem;
    }
}