]> git.ipfire.org Git - people/shoehn/ipfire.org.git/blame - static/scss/_buttons.scss
Bootstap migration talk.ipfire.org
[people/shoehn/ipfire.org.git] / static / scss / _buttons.scss
CommitLineData
d325ca78
SH
1// Buttons
2.btn-red900 {
3 @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
4}
5.btn-white {
6 @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
7}
8.btn-bluegrey900 {
9 @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
10}
11
12button.navbar-toggler div {
13 font-family: 'Ubuntu', sans-serif;
14 font-size: 1rem;
15 display: inline-block;
16 position: relative;
17 top: -4px;
18}
19
1e5f513f
SH
20.btn-group {
21 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
22}
23
d325ca78
SH
24.btn {
25 height: 36px;
26 text-transform: uppercase;
27 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
28 transition: box-shadow .25s ease-in-out;
29 &:hover {
30 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
31 transition: box-shadow .25s ease-in-out;
32 }
33 @include media-breakpoint-down(sm) {
34 font-size: .875rem;
35 }
36}
37
38.btn-outline-primary,
39.btn-outline-secondary {
40 transition: background-color .25s ease-in-out;
41 &:hover {
42 transition: background-color .25s ease-in-out;
43 }
44}
45
1e5f513f
SH
46.btn-light {
47 box-shadow: none;
48}
49
d325ca78
SH
50.btn-xlg {
51 height: 72px;
52 margin: 0 36px;
53 padding-top: 16px;
54}
55
56.btn-lg {
57 height: 48px;
58 margin: 0 24px;
59 @include media-breakpoint-down(sm) {
60 height: 36px;
61 margin: 0 8px;
62 padding: 1rem;
63 font-size: .875rem;
64 line-height: 0;
65 }
66}
67
68.btn-md {
69 font-size: 0.875rem;
70 line-height: 1.25rem;
71 padding: .4rem 1rem .5rem 1rem;
72}
73
74.btn-block {
75 margin: 0 0 1.5rem 0;
76 @include media-breakpoint-up(md) {
77 margin: 0 0 2rem 0;
78 }
79 @include media-breakpoint-down(xs) {
80 font-size: .875rem;
81 line-height: 0;
82 }
83}
84
85button:focus {
86 outline: none;
87}
88
89// Top navigation Donate Button //
90.btn-donate {
91 margin-top: 18px;
92 font-size: 14px;
93 font-weight: 400;
94 line-height: 20px;
95 padding: 3px 16px 0 5px;
96 @include media-breakpoint-up(lg) {
97 margin-top: 29px;
98 }
99 svg {
100 vertical-align: -7px;
101 margin-right: 5px;
102 }
103}