weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / buttons.scss
1 .singlebutton {
2     display: inline-block;
4     + .singlebutton {
5         margin-left: $spacer / 2;
6     }
7 }
9 .continuebutton {
10     text-align: center;
11 }
13 p.arrow_button {
14     margin-top: 5em;
15     text-align: center;
16 }
18 #addcontrols {
19     // This is displayed in a column between 2 20 row multi-selects. This should be just short of half way.
20     margin-top: 8 * $line-height-base * $font-size-base;
21     text-align: center;
22     margin-bottom: 3em;
24     label {
25         display: inline;
26     }
27 }
29 #addcontrols,
30 #removecontrols {
31     input {
32         width: 100%;
33         margin: auto;
34     }
35 }
37 .btn-lineup {
38     margin: 0 0 10px 5px;
39 }
41 .btn.btn-icon {
42     height: ($icon-width + 20px);
43     width: ($icon-width + 20px);
44     font-size: $icon-width;
45     line-height: $icon-width;
46     padding: 0;
47     border-radius: 50%;
48     flex-shrink: 0;
50     @include hover-focus {
51         background-color: $gray-200;
52     }
54     @each $size, $length in $iconsizes {
55         &.icon-size-#{$size} {
56             height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
57             width: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
58             font-size: $length !important; /* stylelint-disable-line declaration-no-important */
59             line-height: $length !important; /* stylelint-disable-line declaration-no-important */
60         }
61     }
62 }
64 @mixin button-focus($background, $innershadow) {
65     &:focus,
66     &.focus {
67         outline: $btn-focus-width solid darken($background, 40%);
68         box-shadow: inset 0 0 0 2px $innershadow;
69     }
70 }
72 @each $color, $value in $theme-colors {
73     .btn-#{$color} {
74         @include button-focus($value, $white);
75     }
76 }
78 @each $color, $value in $theme-colors {
79     .btn-outline-#{$color} {
80         @include button-focus($value, $gray-800);
81     }
82 }