This repository has been archived by the owner on Jul 17, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 16
/
_base-import.scss
111 lines (97 loc) · 2.56 KB
/
_base-import.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
@use '../abstracts/variables' as SRC;
@use 'sass:color';
.bootstrap-4-backport {
//initial bootstrap config based on Synapse design
$primary: SRC.$primary-action-color;
$secondary: SRC.$secondary-action-color;
$border-radius: 0.2rem;
$btn-box-shadow: SRC.$box-shadow-soft;
@import 'node_modules/bootstrap/scss/bootstrap';
.alert-danger {
@include alert-variant(
SRC.$bootstrap-4-danger-bg,
color.adjust(SRC.$bootstrap-4-danger-bg, $lightness: -5%),
SRC.$bootstrap-4-danger-text-color
);
}
// For all buttons, make the box shadow more intense on hover
.btn {
@include hover() {
box-shadow: SRC.$box-shadow-med;
}
}
// Add the 'pill' class for a pill shape
.btn.pill {
border-radius: 24px;
}
.btn.pill.btn-lg {
font-size: 16px;
padding: 10px 24px;
}
// Extra-long pill shape
.btn.pill-xl {
border-radius: 24px;
min-width: 168px;
padding: 10px;
}
.btn.pill-xl.btn-sm {
min-width: 150px;
min-height: 20px;
padding: 5px;
}
.btn.pill-xl.btn-lg {
min-width: 220px;
padding: 10px;
}
// default variant is in BS3 but not BS4, so we recreate it here
.btn-default {
@include button-variant(#fff, #ccc, #e6e6e6, #adadad);
}
// Override built-in btn-white with this
.btn-white {
@include button-variant(#fff, #fff);
@include hover() {
color: rgba(0, 0, 0, 0.73);
}
color: rgba(0, 0, 0, 0.54);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 1px 0 rgba(0, 0, 0, 0.24);
}
/**
* For our expanded primary color palette, create regular and light
* button variants for each color.
* For button mixins, see node_modules/bootstrap/scss/mixins/_buttons.scss
*/
@each $color-variant, $color in SRC.$primary-color-palette {
.btn-primary-#{$color-variant} {
@include button-variant($color, $color);
}
.btn-light-primary-#{$color-variant} {
@include button-variant(
#dfdfdf,
#dfdfdf,
$color,
$color,
color.scale($color, $lightness: -20%),
color.scale($color, $lightness: -30%)
);
}
}
.btn-secondary,
.btn-secondary-base {
@include button-variant(
SRC.$secondary-action-color,
SRC.$secondary-action-color
);
}
.btn-light-secondary,
.btn-light-secondary-base {
@include button-variant(
#dfdfdf,
#dfdfdf,
SRC.$secondary-action-color,
SRC.$secondary-action-color,
color.scale(SRC.$secondary-action-color, $lightness: -20%),
color.scale(SRC.$secondary-action-color, $lightness: -30%)
);
}
}