cloudstack/ui/stylesheets/csui/_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.
@mixin csui-wizard {
    @include row;

    form, .progress {
        height: 90%;
    }

    .progress {
        @include span-columns(3);

        border-right: 1px solid #ccc;
        box-shadow: 2px -1px 5px #ccc;

        ul {
            padding: 5px 0 0 20px;
            li {
                list-style: none;
                margin-top: 10px;
                color: gray;

                .number {
                    padding: 0 6px;
                    border-radius: 100%;
                    font-size: 14px;
                    margin-right: 10px;
                    text-shadow: 0px 0px 1px black;
                    color: white;
                    background: #ccc;
                }

                &.active {
                    color: black;

                    .number {
                        @include radial-gradient(circle at 90% 10%, darken(#ccc, 15%), darken(#ccc, 45%));
                    }
                }

                &.done {
                    color: black;

                    &:before {
                        @include icon($ok);

                        margin: 0 10px 0px 5px;
                        font-size: 14px;
                        color: green;
                    }

                    .number {
                        display: none;
                    }
                }
            }
        }
    }

    form {
        @include csui-form;
        @include span-columns(8);
    }

    .buttons {
        @include span-columns(12);
        @include row;

        margin-top: 15px;

        .button {
            @include csui-button;
            @include span-columns(2);

            &.previous {
                @include shift(6);
            }

            &.cancel {
            }

            &.next {
                @include csui-button-cta;

                float: right;
            }
        }
    }
}