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

3
.btn-secondary {
4 5 6 7 8 9 10 11 12 13
    color: $theme-text-color;
    background-color: $btn-secondary-bg;
    border-color: $btn-secondary-border;
    box-shadow: none;
    &:hover {
        background-color: scale-color($btn-secondary-bg, $lightness: -10.05);
    }
    &.disabled {
        background: $btn-bg-disabled-color;
    }
14 15
}

16
.btn-primary {
17 18
    border-color: $btn-primary-border;
    box-shadow: none;
19 20
}

21
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
22 23 24 25
    color: inherit;
    background-color: $gray-400;
    border-color: $btn-secondary-border;;
    box-shadow: none;
26 27
}

28
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
29 30 31
    color: $gray-900;
    background-color: scale-color($btn-secondary-bg, $lightness: -15.26);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
32 33
}

34 35 36 37 38 39 40 41 42 43
.btn.text-left {
    text-align:left;
}

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

.btn label {
    min-width: 0;
44 45 46
}

.btn-link-danger {
47
    color: theme-color("danger");
48 49 50 51 52
}

.btn-text {
    color: inherit;
    padding:0;
53 54 55 56 57 58 59 60 61
    background: none;
    border: 0;
    box-shadow: none;
    &:hover,
    &:focus {
        background: none;
        border: 0;
        box-shadow: none;
    }
62 63
}

64 65
.btn {
    vertical-align: baseline;
66

67 68
    .customrow & {
        margin-top: 25px; // layout builder button alignment
69
    }
70 71 72 73 74
    input {
        margin-top: 0;
    }
    &.checkbox input.checkbox {
        width: auto;
75
        display: inline-block;
76
        float: right;
77 78 79
    }
}

80 81
.customrow + .btn {
    margin-top: 10px;
82
    margin-bottom: 5px;
83 84
}

85
// Used on pending friends page
86
.btn-toggle.card-footer {
87 88
    padding:0;
    > .btn {
89
        border-radius: 0;
90
        width: 100%;
91 92 93
        float: left;
        height: 42px;
        line-height: 30px;
94
        text-align: left;
95
        &:first-child {
Evonne Cheung's avatar
Evonne Cheung committed
96
            border-radius: 0 0 0 $border-radius;
97
            border-bottom: 1px solid $card-border-color;
98 99
        }
        &:last-child {
Evonne Cheung's avatar
Evonne Cheung committed
100
            border-radius: 0 0 $border-radius 0;
101 102 103 104 105 106 107 108 109 110 111 112 113 114

        }
        .btn {
            padding: 0;
            margin: 0;
            color: inherit;
             &:hover {
                 text-decoration: none;
             }
        }
        form {
            display: inline-block;
        }
        &:hover {
115 116
            color: $gray-900;
            background: $gray-100;
117 118
            text-decoration: none;

119
            .icon {
120
                color: $gray-300;
121 122 123 124 125
            }
        }
    }
}

126 127 128 129
h1 + div > .btn-top-left,
.page-header + div.btn-top-left {
    float: none;
    margin-bottom: 0;
130
    @include media-breakpoint-up(sm) {
131 132 133 134 135 136 137 138 139 140 141 142 143 144
        margin-top: -53px;
        .page-header + & {
            margin-top: -43px;
        }
    }
    form {
        margin: 0 !important;
        display: inline-block;
        .form-group-inline {
            padding: 0;
        }
    }
}

145
h1 ~ div > .btn-group-top,
146 147 148 149 150 151
h2 ~ div > .btn-group-top,
h3 ~ div > .btn-group-top,
h4 ~ div > .btn-group-top,
h5 ~ div > .btn-group-top,
h6 ~ div > .btn-group-top,
p ~ div > .btn-group-top,
152 153
.page-header ~ div.btn-group-top,
.page-header + .btn-action-list .btn-group-top,
Naomi Guyer's avatar
Naomi Guyer committed
154
.nav-tabs +  div.btn-group-top {
155
    margin-top: -20px;
156
    margin-left: -100%;
157
    @include media-breakpoint-down(xs) {
158 159 160 161 162 163
        margin: 0 0 10px 0;
        width: 100%;
        .btn-group .btn,
        .form-as-button,
        .btn {
            margin-bottom: 3px;
164 165
            margin-left: 1px;
            margin-right: 1px;
166 167
            width: 100%;
            border-right-width: 1px;
168
            border-radius: $border-radius !important;
169 170 171 172 173 174 175 176 177 178
            .btn {
                margin-bottom: 0;
            }
        }
        .form-as-button:first-child:not(.last) {
            .btn {
                border-right-width: 1px;
            }
        }
    }
179 180 181
}

.btn-group-top {
Naomi Guyer's avatar
Naomi Guyer committed
182
    position: relative;
183
    z-index: 4;
184
    @include media-breakpoint-up(sm) {
185 186 187 188 189 190 191 192
        float: right;
        .btn {
            @include border-top-radius(0);
            border-top: 0;
        }
        .btn-group-top {
            margin: 0;
        }
193 194 195 196 197 198 199
    }
}

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

200 201
td.btn-group {
    min-width: 300px;
202 203
}

204 205
td.action-list-copy {
    min-width: 195px;
206 207 208
    .btn-group-top {
        margin-top: -8px;
    }
209 210
}

211 212
// Often the same template is used to render buttons at the top of the page and
// in a list group. cf. groups table/groups
213
.list-group,
214
.card-header {
215
    .btn-group-top {
216 217 218
        @include clearfix;
        text-align: right;
        float: right;
219
        margin-top: 10px;
220
        @include media-breakpoint-up(md) {
221
            @include clearfix;
222
            margin-top: -13px;
223
            margin-bottom: 11px;
224 225 226
        }
        .btn {
            @extend .btn-sm;
227
            padding-top: 3px;
228 229
            border-top: 1px solid $card-border-color;
            @include media-breakpoint-up(lg) {
230 231 232 233
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                border-top: 0;
            }
234 235 236 237 238 239
        }
        .btn-top-right {
            margin: 0; // negate nested margin
        }
    }
    .btn-action-list{
240 241
        float: right;
        width: 100%;
242 243
    }
}
244
// Edit page configure buttons
245
.card-secondary .blockinstance-controls .btn-group-top {
246 247 248
    position: absolute;
    top: 11px;
    right: 10px;
249
    margin-top: -10px;
250
    .btn {
251 252
        border-top-left-radius: 0;
        border-top-right-radius: 0;
253
        border-color: transparent;
254
        border-top: 0;
255
        background: scale-color($btn-secondary-bg, $lightness: 40%);
256
        &:hover {
257
            background: rgba($btn-secondary-bg, 1);
258 259 260 261
        }
    }
}

262
// Page editor column + and - controls
263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281
.btn-header {
    width:100%;

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


282
//page builder collapsible
283
.btn-group-vertical {
284 285 286
    .btn:not(:first-child) {
        margin-left: 0;
    }
287 288
    .indicator {
        margin-left: -4px;
289 290 291
        font-size: $font-size-base - 3;
        padding: 7px 5px 0 0;
        vertical-align: top;
292
        &.icon-arrows-alt {
293 294 295 296
            vertical-align: middle;
            margin-left: -7px;
        }
    }
297
    .title {
298 299 300
        white-space: normal;
        margin-left: 5px;
        display: inline-block;
301
    }
Naomi Guyer's avatar
Naomi Guyer committed
302
    .block-icon {
303 304 305 306
        display: inline-block;
        vertical-align: top;
        margin-top: 5px;
        margin-left: -2px;
307 308 309 310 311 312 313 314 315 316 317 318 319
        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%;
320
            min-width: 60px;
321 322 323 324
            &.ui-accordion-header {
                 margin-bottom: -3px;
            }
            &.last {
325
                border-bottom-radius: 3px;
326
                background-color: $btn-secondary-bg;
327 328
            }
        }
329 330
        // To override btn-primary colour
        .btn-primary {
331
            color: $gray-700;
332
            background: $gray-400;
333
            border-color: $btn-secondary-border;
334
        }
335 336 337 338 339 340 341 342 343
    }
    label {
        font-size: 12px;
        white-space: normal;
        vertical-align: middle;
        padding: 0;
        padding-right: 5px;
        padding-top: 3px;
        width: auto;
344
        max-width: 85%;
345 346 347
        margin-left: 2px;
    }
}
348
//page builder collapsible
349 350 351 352 353
.btn-accordion.ui-accordion {
    &.btn-help {
        padding-left: 27px;
    }
}
354
.btn-accordion.ui-accordion .ui-accordion-content {
355
    @include box-sizing(border-box);
356
    border-radius: 0;
357 358 359 360 361 362
    margin-top: 10px;
    margin-bottom:15px;
    padding: 0;
    max-width:100%;
    border:0;
    .btn-group-vertical {
363
        @include box-sizing(border-box);
364 365
        max-width: 100%;
        width: 100%;
366
        // take away the edges on inner accordion buttons
367
        .btn {
368
            border-radius: 0;
369 370 371 372 373 374 375
            display:block;
            margin: 0;
            &:not(:last-child) {
                border-bottom: 0;

                &:hover {
                    +.btn {
376
                        border-top-color: scale-color($btn-secondary-border, $lightness: -15%);
377
                    ;
378 379 380 381 382 383 384
                    }
                }
            }
        }
    }
}

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

390
.btn {
391
    .icon-chevron-down {
392 393 394
        opacity: 0.5;
    }
    &:hover {
395
        .icon-chevron-down {
396 397 398 399 400 401
            opacity: 1;
        }
    }
}

.btn:disabled {
402
    .icon {
403 404 405 406
        opacity:0.3;
    }
}

407 408 409 410 411 412 413 414 415
// 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;
    }
416
}
417 418 419 420 421 422 423 424 425 426 427 428

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

.socialbtn {
    margin-bottom: 10px;
}

// edit page btn-group
.btn-toolbar .btn-title {
    padding-left: 5px;
429
    @include media-breakpoint-between(sm, md) {
430
        @include sr-only;
431 432 433 434 435 436
    }
}

// Group categories.php: 138
.btn-add-group {
    margin-top: 20px;
437
}
438 439 440 441

.reportsettings .btn.filter {
    line-height: 1;
    padding: 1px 4px;
442 443 444 445 446 447 448 449 450 451 452 453
}

// 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 {
454 455
            background-color: scale-color($btn-primary-bg, $lightness: -32%);

456 457 458 459 460 461 462 463 464 465
        }

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

.modal-tinymce {
    .pieform {
Evonne Cheung's avatar
Evonne Cheung committed
466
            button.submit {
467 468 469 470 471 472
            background-color: $btn-primary-bg;
            border-color: $btn-primary-border;
            font-family: $font-family-sans-serif;
            color: $btn-primary-color;

            &:hover {
473
                background-color: scale-color($btn-primary-bg, $lightness: -32%);
474 475 476 477
            }
        }
    }
}
478

479 480
.btn-sm,
.btn-group .btn.btn-sm {
481 482 483
    font-size: $font-size-base / 1.1665;
    border: 1px solid $btn-secondary-border;
    padding: 0.14375rem 0.625rem;
484
}
Evonne Cheung's avatar
Evonne Cheung committed
485 486

.card.first .card-header {
487 488 489
    a:not(.secondary-link),
    a.btn-sm {
        border-radius: $border-radius-sm;
Evonne Cheung's avatar
Evonne Cheung committed
490

491 492 493 494 495 496 497 498 499
        &:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        &:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    }
Evonne Cheung's avatar
Evonne Cheung committed
500
}
501 502 503

// Page/Collections pageactions btns
.pageactions {
504 505 506 507 508 509 510 511 512 513 514 515 516
    margin-right: -1px;

    .btn-group-vertical .btn {
        &:last-child {
            border-bottom-right-radius: 0;
        }
        &:first-child {
            border-top-right-radius: 0;
        }

        &.dropdown-toggle {
            border-bottom-right-radius: 0;
        }
517 518 519 520
        &.addaction {
            border-top-left-radius: 0;
            margin-top: -1px;
        }
521 522 523
    }
}

524
// Profile page accept friends form
525 526 527 528 529
.pendingfriendscard {
    .btn form {
        display: inline-block;

        button {
530 531 532
            padding: 0;
            border: 0;

533 534 535 536 537 538
            &:hover,
            &:focus {
                text-decoration: none;
            }
        }
    }
539
}