weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / buttons.scss
CommitLineData
536f0460 1.singlebutton {
1ecc3daf 2 display: inline-block;
f4143537 3
1ecc3daf
FM
4 + .singlebutton {
5 margin-left: $spacer / 2;
536f0460
DW
6 }
7}
8
9.continuebutton {
10 text-align: center;
11}
12
13p.arrow_button {
14 margin-top: 5em;
15 text-align: center;
536f0460
DW
16}
17
18#addcontrols {
2f3f8e45
DW
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;
536f0460
DW
21 text-align: center;
22 margin-bottom: 3em;
f4143537 23
536f0460
DW
24 label {
25 display: inline;
26 }
27}
28
29#addcontrols,
30#removecontrols {
31 input {
1714b6e7 32 width: 100%;
536f0460
DW
33 margin: auto;
34 }
35}
36
37.btn-lineup {
38 margin: 0 0 10px 5px;
39}
40
5ca0958d 41.btn.btn-icon {
b53f15b1
RW
42 height: ($icon-width + 20px);
43 width: ($icon-width + 20px);
44 font-size: $icon-width;
45 line-height: $icon-width;
5ca0958d
RW
46 padding: 0;
47 border-radius: 50%;
48 flex-shrink: 0;
49
50 @include hover-focus {
51 background-color: $gray-200;
52 }
53
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 */
b53f15b1
RW
58 font-size: $length !important; /* stylelint-disable-line declaration-no-important */
59 line-height: $length !important; /* stylelint-disable-line declaration-no-important */
5ca0958d
RW
60 }
61 }
62}
91de0ed8
BB
63
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}
71
72@each $color, $value in $theme-colors {
73 .btn-#{$color} {
74 @include button-focus($value, $white);
75 }
76}
77
78@each $color, $value in $theme-colors {
79 .btn-outline-#{$color} {
80 @include button-focus($value, $gray-800);
81 }
82}