cloudstack/ui/stylesheets/_instance-wizard.scss

// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.
.multi-wizard.instance-wizard {
    .select-area {
        @include row;


        input {
            @include span-columns(1);
        }

        label {
            @include span-columns(2);

            font-size: 24px;
            margin-top: 15px;
        }

        .desc {
            @include span-columns(12);
            @include shift(1);
            color: darken(#ccc, 30%);
        }
    }

    .select-container {
        background: $csui-tab-bg;
        padding: 10px;
        height: 375px;
        overflow: auto;
        border-radius: 0 0 3px 3px;
        margin: 0px 0;

        .select {
            @include row;

            padding: 12px;
            margin: 10px;
            background: white;
            border-radius: 3px;

            input {
                @include span-columns(1);

                margin: 5px 0;
            }

            .secondary-input {
                @include span-columns(3);

                input {
                    margin-right: 15px;
                }
            }

            .select-desc {
                @include span-columns(7);

                .name {
                    font-weight: bold;
                    font-size: 14px;
                }

                .desc {
                    margin: 4px 0;
                    font-size: 12px;
                    color: gray;
                }
            }
        }
    }

    .step.data-disk-offering {
        &.custom-disk-size {
            .select-container {
                height: 200px;
            }
        }

        .section.custom-size {
            label:not(.size) {
                @include span-columns(12);
            }

            label.size {
                text-align: center;
                margin-top: 20px;
                float: left;
            }

            .ui-slider {
                @include span-columns(7);
            }

            input[type=text] {
                @include shift(2);

                padding: 5px;
                float: left;
                margin-right: 25px;
            }

            margin-top: 20px;
        }
    }

    .step.network {
        table {
            width: 100%;
        }

        .select.my-networks {
            .select-container {
                height: 250px;
                overflow: auto;
            }
        }

        .new-network {
            .select-container {
                height: 220px;
            }

            &.unselected {
                .select-container {
                    height: 100px;
                }
            }

            .name {
                @include span-columns(2);
            }

            .value {
                @include span-columns(4);
            }

            .select {
                @include row;

                input[type=checkbox] {
                    @include span-columns(1);
                }
                .field.name {
                    @include span-columns(10);

                    .name {
                        @include span-columns(3);
                    }

                    .value {
                        @include span-columns(9);

                        input {
                            width: 100%;

                            padding: 5px;
                        }
                    }
                }

                .field.service-offering {
                    @include span-columns(12);
                }

                .secondary-input {
                    @include span-columns(2);
                }
            }
        }
    }

    .hide-if-selected { display: none !important; }
    .unselected .hide-if-selected {
        display: block !important;
    }

     .unselected .hide-if-unselected {
        display: none !important;
    }
}