-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.scss
83 lines (62 loc) · 2.54 KB
/
main.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
// Fonts, that are used in
// the libary
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
// Imports for the buttons
@import "./buttons/buttons.scss";
@import "./buttons/sizes.scss";
@import "./buttons/shadows.scss";
// Imports for the navbar
@import "./nav/navbar/flyout-navbar.scss";
@import "./nav/navbar/nav-toggler.scss";
@import "./nav/navbar/sizes.scss";
@import "./nav/navbar/theme.scss";
// Imports for the Sidebar
@import "./nav/sidebar/sidebar.scss";
@import "./nav/sidebar/theme.scss";
@import "./nav/sidebar/sizes.scss";
// Imports for flex utils
@import "./flex/container.scss";
@import "./flex/row.scss";
@import "./flex/constants.scss";
// Imports for the card
@import "./cards/sizes.scss";
@import "./cards/theme.scss";
@import "./cards/responsive.scss";
// Imports for the dropdown
@import "./dropdown/dropdown.scss";
@import "./dropdown/menu.scss";
@import "./dropdown/theme.scss";
@import "./dropdown/animations.scss";
// Button themes
@include buttonBase(btn-blue, #1d3bae, #264BD9, #fff);
@include buttonBase(btn-red, #b81e1c, #d62220, #fff);
@include buttonBase(btn-green, #148531, #18ac3a, #fff);
@include buttonBase(btn-purple, #831ab7, #8c18c4, #fff);
@include buttonBase(btn-pink, #B519BD, #D21BDC, #fff);
// Navbar themes
@include navTheme(navbar-grey, #3d3d3d, #161616, rgba(0,0,0,0.6), #fff, rgba(43, 42, 42, 0.2));
@include navTheme(navbar-dark, #141414, #121212, rgba(0,0,0,0.6), #fff, rgba(10,10,10,0.2));
@include navTheme(navbar-light, #cfcdcd, #c2c2c2, rgba(63, 63, 63, 0.6), #2b2a2a, rgba(77,77,77,0.2));
// Sidebar themes
@include sidebarTheme(sidebar-grey, #4D4D4D, rgba(0,0,0,0.3), #fff);
@include sidebarTheme(sidebar-dark, #1d1d1d, rgba(0,0,0,0.4), #fff);
@include sidebarTheme(sidebar-light, #aaa9a9, rgba(0,0,0,0.2), #0f0f0f);
// Sidebar sizes
@include sidebarSize(sidebar-md, 20vw);
@include sidebarSize(sidebar-lg, 25vw);
// Flex container
@include containerShape(container-sm, $sm);
@include containerShape(container-md, $md);
@include containerShape(container-lg, $lg);
// Flex row
@include rowShape(row-sm, $sm);
@include rowShape(row-md, $md);
@include rowShape(row-lg, $lg);
// Card themes
@include cardTheme(card-light, rgb(204, 202, 202), rgba(0,0,0,0.4), #000);
@include cardTheme(card-grey, #303030, rgba(0,0,0,0.6), #fff);
@include cardTheme(card-dark, #161616, rgba(0,0,0,0.6), #fff);
// Dropdown themes
@include dropdownTheme(dropdown-light, rgb(138, 138, 138), #000);
@include dropdownTheme(dropdown-grey, rgb(109, 109, 109), #fff);
@include dropdownTheme(dropdown-dark, #232323, #fff);