_btn.scss 8.82 KB
Newer Older
1
// Modifications and extra use cases for bootstrap  buttons
2

3
4
5
6
7
8
9
10
11
12
.btn.text-left {
    text-align:left;
}

.btn.text-right {
    text-align:right;
}

.btn label {
    min-width: 0;
13
14
15
16
17
18
19
20
21
22
23
}

.btn-link-danger {
    color: $brand-danger;
}

.btn-text {
    color: inherit;
    padding:0;
}

24
25
.btn {
    vertical-align: baseline;
26

27
28
    .customrow & {
        margin-top: 25px; // layout builder button alignment
29
    }
30
31
32
33
34
    input {
        margin-top: 0;
    }
    &.checkbox input.checkbox {
        width: auto;
35
        display: inline-block;
36
        float: right;
37
38
39
    }
}

40
41
.customrow + .btn {
    margin-top: 10px;
42
    margin-bottom: 5px;
43
44
}

45
// Used on pending friends page
46
47
48
.btn-toggle.panel-footer {
    padding:0;
    > .btn {
49
        border-radius: 0;
50
        width: 100%;
51
52
53
        float: left;
        height: 42px;
        line-height: 30px;
54
        text-align: left;
55
        &:first-child {
56
            border-radius: 0 0 0 3px;
57
            border-bottom: 1px solid $panel-default-border;
58
59
        }
        &:last-child {
60
            border-radius: 0 0 3px 0;
61
62
63
64
65
66
67
68
69
70
71
72
73
74

        }
        .btn {
            padding: 0;
            margin: 0;
            color: inherit;
             &:hover {
                 text-decoration: none;
             }
        }
        form {
            display: inline-block;
        }
        &:hover {
75
            color: $gray-darker;
76
77
78
            background: $gray-lighter;
            text-decoration: none;

79
            .icon {
80
                color: $gray-light;
81
82
83
84
85
            }
        }
    }
}

86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
h1 + div > .btn-top-left,
.page-header + div.btn-top-left {
    float: none;
    margin-bottom: 0;
    @media (min-width: $screen-xs-min) {
        margin-top: -53px;
        .page-header + & {
            margin-top: -43px;
        }
    }
    form {
        margin: 0 !important;
        display: inline-block;
        .form-group-inline {
            padding: 0;
        }
    }
}

105
106
107
h1 ~ div > .btn-group-top,
.page-header ~ div.btn-group-top,
.page-header + .btn-action-list .btn-group-top,
Naomi Guyer's avatar
Naomi Guyer committed
108
.nav-tabs +  div.btn-group-top {
109
    margin-top: -20px;
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
    @media (max-width: $screen-xs-min) {
        margin: 0 0 10px 0;
        width: 100%;
        .btn-group .btn,
        .form-as-button,
        .btn {
            margin-bottom: 3px;
            width: 100%;
            border-right-width: 1px;
            border-radius: $border-radius-base !important;
            .btn {
                margin-bottom: 0;
            }
        }
        .form-as-button:first-child:not(.last) {
            .btn {
                border-right-width: 1px;
            }
        }
    }
130
131
132
}

.btn-group-top {
Naomi Guyer's avatar
Naomi Guyer committed
133
    position: relative;
134
    z-index: 4;
135
136
137
138
139
140
141
142
143
    @media (min-width: $screen-xs-min) {
        float: right;
        .btn {
            @include border-top-radius(0);
            border-top: 0;
        }
        .btn-group-top {
            margin: 0;
        }
144
145
146
147
148
149
150
    }
}

.nav-tabs +  div.btn-group-top{
    margin-top: 0;
}

151
152
td.btn-group {
    min-width: 300px;
153
154
}

155
156
td.action-list-copy {
    min-width: 195px;
157
158
159
    .btn-group-top {
        margin-top: -8px;
    }
160
161
}

162
163
// Often the same template is used to render buttons at the top of the page and
// in a list group. cf. groups table/groups
164
165
.list-group,
.panel-heading {
166
    .btn-group-top {
167
168
169
        @include clearfix;
        text-align: right;
        float: right;
170
171
        margin-top: 10px;
        @media (min-width: $screen-sm-min) {
172
            @include clearfix;
173
174
            margin-top: -10px;
            margin-bottom: 11px;
175
176
177
        }
        .btn {
            @extend .btn-sm;
178
            padding-top: 3px;
179
180
181
182
183
184
            border-top: 1px solid $panel-default-border;
            @media (min-width: $screen-md-min) {
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                border-top: 0;
            }
185
186
187
188
189
190
        }
        .btn-top-right {
            margin: 0; // negate nested margin
        }
    }
    .btn-action-list{
191
192
        float: right;
        width: 100%;
193
194
    }
}
195
// Edit page configure buttons
196
197
198
199
.panel-secondary .blockinstance-controls .btn-group-top {
    position: absolute;
    top: 11px;
    right: 10px;
200
    margin-top: -10px;
201
    .btn {
202
203
204
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: 0;
205
        background: scale-color($btn-default-bg, $lightness: 40%);
206
        &:hover {
207
            background: rgba($btn-default-bg, 1);
208
209
210
211
        }
    }
}

212
// Page editor column + and - controls
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
.btn-header {
    width:100%;

    &.btn-two .btn {
        width: 25%;
        &:first-child {
            width:75%
        }
    }
    &.btn-three .btn {
        width: 50%;
        &:first-child,
        &:last-child {
            width:25%;
        }
    }
}


232
//page builder collapsible
233
234
235
.btn-group-vertical {
    .indicator {
        margin-left: -4px;
236
237
238
        font-size: $font-size-base - 3;
        padding: 7px 5px 0 0;
        vertical-align: top;
239
        &.icon-arrows {
240
241
242
243
            vertical-align: middle;
            margin-left: -7px;
        }
    }
244
    .title {
245
246
247
        white-space: normal;
        margin-left: 5px;
        display: inline-block;
248
    }
Naomi Guyer's avatar
Naomi Guyer committed
249
    .block-icon {
250
251
252
253
        display: inline-block;
        vertical-align: top;
        margin-top: 5px;
        margin-left: -2px;
254
255
256
257
258
259
260
261
262
263
264
265
266
        font-size: 14px;
        .col-collapsed & {
            margin-left: 2px;
            font-size: 18px;
        }
    }
     &.btn-accordion {
        .btn {
            font-size: 13px;
            margin-bottom: -1px;
            max-width: 100%;
            overflow: hidden;
            width:100%;
267
            min-width: 60px;
268
269
270
271
            &.ui-accordion-header {
                 margin-bottom: -3px;
            }
            &.last {
272
                border-bottom-radius: 3px;
273
                background-color: $btn-default-bg;
274
275
            }
        }
276
277
278
        // To override btn-primary colour
        .btn-primary {
            color: $gray-dark;
279
            background: scale-color($brand-default, $lightness: -10.5%);
280
            border-color: $btn-default-border;
281
        }
282
283
284
285
286
287
288
289
290
    }
    label {
        font-size: 12px;
        white-space: normal;
        vertical-align: middle;
        padding: 0;
        padding-right: 5px;
        padding-top: 3px;
        width: auto;
291
        max-width: 85%;
292
293
294
        margin-left: 2px;
    }
}
295
//page builder collapsible
296
297
298
299
300
.btn-accordion.ui-accordion {
    &.btn-help {
        padding-left: 27px;
    }
}
301
302
.btn-accordion.ui-accordion .ui-accordion-content {
    @include box-sizing(border-box);
303
    border-radius: 0;
304
305
306
307
308
309
310
311
312
    margin-top: 10px;
    margin-bottom:15px;
    padding: 0;
    max-width:100%;
    border:0;
    .btn-group-vertical {
        @include box-sizing(border-box);
        max-width: 100%;
        width: 100%;
313
        // take away the edges on inner accordion buttons
314
        .btn {
315
            border-radius: 0;
316
317
318
319
320
321
322
            display:block;
            margin: 0;
            &:not(:last-child) {
                border-bottom: 0;

                &:hover {
                    +.btn {
323
324
                        border-top-color: scale-color($btn-default-border, $lightness: -15%);
                    ;
325
326
327
328
329
330
331
                    }
                }
            }
        }
    }
}

332
// Hack to fix the inline script tags that keep getting in places they don't belong
Naomi Guyer's avatar
Naomi Guyer committed
333
334
335
336
.btn-group .form-as-button.last + script + .btn {
    margin-left: -1px;
}

337
.btn {
338
    .icon-chevron-down {
339
340
341
        opacity: 0.5;
    }
    &:hover {
342
        .icon-chevron-down {
343
344
345
346
347
348
            opacity: 1;
        }
    }
}

.btn:disabled {
349
    .icon {
350
351
352
353
        opacity:0.3;
    }
}

354
355
356
357
358
359
360
361
362
// Fix the compose button positionning in the inbox/sent notifications pages.
.notifications + #messages + h1 {
    border-bottom: none;
    display: inline-block;
    margin-bottom: 0;
    padding-bottom: 6.5px;
    + .btn-with-heading {
        float: right;
    }
363
}
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383

.collapsible-group + .button {
    margin-top: 30px;
}

.socialbtn {
    margin-bottom: 10px;
}

// edit page btn-group
.btn-toolbar .btn-title {
    padding-left: 5px;
    @media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
        @include sr-only;
    }
}

// Group categories.php: 138
.btn-add-group {
    margin-top: 20px;
384
}
385
386
387
388

.reportsettings .btn.filter {
    line-height: 1;
    padding: 1px 4px;
389
390
}

391

392
393
394
395
396
397
398
399
400
401
// Tinymce primary button
.mce-container,
.mce-widget,
.mce-reset {
    .mce-primary {
        background-color: $btn-primary-bg;
        border-color: $btn-primary-border;
        font-family: $font-family-sans-serif;

        &:hover {
402
403
            background-color: scale-color($btn-primary-bg, $lightness: -32%);

404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
        }

        .mce-txt {
            color: $btn-primary-color;
        }
    }
}

.modal-tinymce {
    .pieform {
            button.btn-default {
            background-color: $btn-primary-bg;
            border-color: $btn-primary-border;
            font-family: $font-family-sans-serif;
            color: $btn-primary-color;

            &:hover {
421
                background-color: scale-color($btn-primary-bg, $lightness: -32%);
422
423
424
425
            }
        }
    }
}