webappengine/web/components/widget/widget.styl

A web application platform that can host multiple web apps running with Node.js.

.widget {
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    margin-bottom: 20px;
    background-color: #fff;
    border-color: #d0d0d0;

    &.widget-no-header .widget-title {
        margin-top: 0;
        font-size: 14px;
        color: #6a6a6a;
    }

    .widget-header {
        padding: 0 10px;
        border-bottom: 1px solid #fff;
        background-color: #e9e9e9;

        .widget-header-title {
            margin-top: 0;
            font-size: 14px;
            color: #6a6a6a;
            display: inline-block;
            vertical-align: middle;
            margin-bottom: 0;
            line-height: 40px;
        }

        .btn-group > a,
        .btn-group .dropdown-toggle .icon {
            color: #838383;
        }
        .btn-group > a:hover,
        .btn-group > a:focus,
        .btn-group .dropdown-toggle .icon:hover,
        .btn-group .dropdown-toggle .icon:focus {
            color: #505050
        }
        .btn i {
            position: relative;
            top: 0;
            margin-right: 2px;
            font-size: 16px;
            line-height: 1
        }

        .widget-header-toolbar {
            float: right;
            width: auto;
            margin-left: 15px;

            &.btn-group {
                top: 5px;
            }

            .badge {
                margin-top: 10px;
            }

            .label {
                position: relative;
                top: 11px;
                padding: 5px;
                font-size: 85%;

                i {
                    font-size: 14px;
                }
            }
            .btn-xs {
                top: 5px;
            }
            .btn-link {
                padding: 0 0 0 15px;

                &:first-child {
                    padding-left: 0
                }
                i {
                    font-size: 28px;
                    line-height: 1;
                }
            }
        }

        @media screen and (max-width: 480px) {
            .widget-header-toolbar {
                display: block;
                position: inherit;

                &.btn-group > .btn {
                    top: -5px;
                }

                .badge {
                    margin-top: 0;
                }

                .label {
                    top: 0;
                }
            }
        }

    }

    .widget-content {
        padding: 20px;
    }

    .widget-footer {
        padding: 7px 10px;
        background-color: #e9e9e9;
    }
}