]> git.ipfire.org Git - people/shoehn/ipfire.org.git/blame - static/scss/_buttons.scss
Bootstap 4 migration: imprint
[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
20.btn {
21 height: 36px;
22 text-transform: uppercase;
23 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
24 transition: box-shadow .25s ease-in-out;
25 &:hover {
26 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
27 transition: box-shadow .25s ease-in-out;
28 }
29 @include media-breakpoint-down(sm) {
30 font-size: .875rem;
31 }
32}
33
34.btn-outline-primary,
35.btn-outline-secondary {
36 transition: background-color .25s ease-in-out;
37 &:hover {
38 transition: background-color .25s ease-in-out;
39 }
40}
41
42.btn-xlg {
43 height: 72px;
44 margin: 0 36px;
45 padding-top: 16px;
46}
47
48.btn-lg {
49 height: 48px;
50 margin: 0 24px;
51 @include media-breakpoint-down(sm) {
52 height: 36px;
53 margin: 0 8px;
54 padding: 1rem;
55 font-size: .875rem;
56 line-height: 0;
57 }
58}
59
60.btn-md {
61 font-size: 0.875rem;
62 line-height: 1.25rem;
63 padding: .4rem 1rem .5rem 1rem;
64}
65
66.btn-block {
67 margin: 0 0 1.5rem 0;
68 @include media-breakpoint-up(md) {
69 margin: 0 0 2rem 0;
70 }
71 @include media-breakpoint-down(xs) {
72 font-size: .875rem;
73 line-height: 0;
74 }
75}
76
77button:focus {
78 outline: none;
79}
80
81// Top navigation Donate Button //
82.btn-donate {
83 margin-top: 18px;
84 font-size: 14px;
85 font-weight: 400;
86 line-height: 20px;
87 padding: 3px 16px 0 5px;
88 @include media-breakpoint-up(lg) {
89 margin-top: 29px;
90 }
91 svg {
92 vertical-align: -7px;
93 margin-right: 5px;
94 }
95}