cncjs

1
@import './theme';
2

3
.widget {
4
    background-color: #FFF;
5
    margin-bottom: 10px;
6

7
    &.widget-borderless {
8
        .widget-header,
9
        .widget-content,
10
        .widget-footer {
11
            border: 0;
12
        }
13
        .widget-header + .widget-content,
14
        .widget-header + .widget-footer,
15
        .widget-content + .widget-footer {
16
            border-top: 1px solid #ccc;
17
        }
18
    }
19

20
    &.widget-fullscreen {
21
        position: fixed;
22
        top: 50px; // navbar
23
        left: 60px; // sidebar
24
        right: 0;
25
        bottom: 0;
26
        margin: 0;
27
        z-index: 1000;
28

29
        .widget-sortable {
30
            display: none;
31
        }
32
    }
33
    &.widget-fullscreen {
34
        .widget-content {
35
            position: absolute;
36
            top: 0;
37
            right: 0;
38
            bottom: 0;
39
            left: 0;
40
        }
41
        .widget-header + .widget-content {
42
            position: absolute;
43
            top: 34px; // .widget-header height
44
            bottom: 0;
45
            left: 0;
46
            right: 0;
47
        }
48
    }
49

50
    .widget-header {
51
        clearfix();
52
        background-color: #f6f7f8;
53
        border: 1px solid #ccc;
54
        position: relative;
55
    }
56
    .widget-header-fixed {
57
        cursor: default;
58
    }
59

60
    .widget-sortable {
61
        display: inline-block;
62
        cursor: move;
63

64
        > a {
65
            cursor: move;
66
        }
67
    }
68

69
    .widget-title {
70
        font-size: 14px;
71
        font-weight: 400;
72
        line-height: 32px;
73
        display: inline-block;
74
        vertical-align: middle;
75
        margin-top: 0;
76
        margin-bottom: 0;
77
        padding: 0 10px;
78

79
        // Truncate string with ellipsis
80
        text-overflow: ellipsis;
81
        overflow: hidden;
82
        white-space: nowrap;
83
        width: 100%;
84
        max-width: 100%;
85
    }
86

87
    .widget-content,
88
    .widget-footer {
89
        border: 1px solid #CCC;
90
        border-top: none;
91
    }
92

93
    .widget-button {
94
        text-decoration: none;
95
        font-size: 14px;
96
        text-align: center;
97
        display: inline-block;
98
        line-height: 32px;
99
        padding: 0;
100
        margin: 0;
101
    }
102

103
    .widget-controls {
104
        position: absolute;
105
        top: 0;
106
        right: 0;
107
        cursor: auto;
108
        width: auto;
109

110
        .widget-button {
111
            min-width: 30px;
112
            height: 32px;
113
            float: left;
114
            position: relative;
115
            font-size: 14px;
116
            font-family: Arial, Helvetica, sans-serif;
117
            border-left: 1px solid rgba(0, 0, 0, .09);
118
            margin: 0;
119
            text-align: center;
120

121
            &.disabled {
122
                color: #bbb;
123
                cursor: not-allowed;
124
            }
125

126
            &.disabled:hover {
127
                background-color: inherit;
128
            }
129
            &:hover {
130
                background-color: rgba(0, 0, 0, .05);
131
            }
132

133
            &.inverted {
134
                color: #fff;
135
                background-color: #404040;
136
            }
137
            &.inverted:hover {
138
                background-color: #222;
139
            }
140
            &.inverted.disabled {
141
                opacity: .4;
142
            }
143

144
            &:first-child {
145
                padding-left: 0;
146
            }
147
        }
148
    }
149
}
150