funuicss 1.9.4 → 1.9.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/fun.css +76 -32
- package/package.json +1 -1
package/css/fun.css
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
/* Imports */
|
|
2
2
|
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
|
|
3
|
+
@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700;800;900&display=swap');
|
|
3
4
|
@font-face {
|
|
4
5
|
font-family: "MavenPro";
|
|
5
6
|
src: url(./Maven_Pro/MavenPro.ttf);
|
|
6
7
|
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
8
|
:root {
|
|
9
|
+
/* Colors */
|
|
11
10
|
--primaryColor: #0d6dfc;
|
|
12
11
|
--white: #fff;
|
|
12
|
+
--bd-color:#1e1e1e;
|
|
13
|
+
--bd-theme:#fff;
|
|
13
14
|
--dark: #1e1e1e;
|
|
14
15
|
--lightDark: #4e4e4e66;
|
|
15
16
|
--secondaryColor: #6d767e;
|
|
@@ -23,18 +24,20 @@
|
|
|
23
24
|
--infoLight:#e5f6fd;
|
|
24
25
|
--light: #ecf5f8;
|
|
25
26
|
--deepLight: #2fa2b1;
|
|
27
|
+
--gradient:linear-gradient(90deg, var(--secondaryColor) 0%, var(--primaryColor) 100%);
|
|
28
|
+
--gradientColors:90deg, var(--secondaryColor) 0%, var(--primaryColor) 100%;
|
|
29
|
+
--linkColor:rgb(110, 168, 254);
|
|
30
|
+
/* Body and font */
|
|
26
31
|
--bd-font-weight: 400;
|
|
27
|
-
--bdfontSize:
|
|
28
|
-
--
|
|
29
|
-
--fontFamily:
|
|
30
|
-
--smallFont: 0.
|
|
31
|
-
--smallerFont: 0.
|
|
32
|
+
--bdfontSize: 0.99em;
|
|
33
|
+
--bd-line-height: 1.2;
|
|
34
|
+
--fontFamily: 'Maven Pro', sans-serif;
|
|
35
|
+
--smallFont: 0.8em;
|
|
36
|
+
--smallerFont: 0.7em;
|
|
32
37
|
--navHeight: 50px !important ;
|
|
33
38
|
--border: 0.1rem solid #ddd;
|
|
39
|
+
--bordeRadius:0.5rem;
|
|
34
40
|
--hoverable: brightness(90%);
|
|
35
|
-
--gradient:linear-gradient(90deg, var(--secondaryColor) 0%, var(--primaryColor) 100%);
|
|
36
|
-
--gradientColors:90deg, var(--secondaryColor) 0%, var(--primaryColor) 100%;
|
|
37
|
-
--linkColor:rgb(110, 168, 254);
|
|
38
41
|
--linkHover:(139, 185, 254;);
|
|
39
42
|
--sideBarZindex:10;
|
|
40
43
|
--navBarZindex:9;
|
|
@@ -43,6 +46,10 @@
|
|
|
43
46
|
--snackBarZindex:20;
|
|
44
47
|
--inputHeight:2.1rem;
|
|
45
48
|
--inputPadding:0.5rem 0;
|
|
49
|
+
--smallScreens:600px;
|
|
50
|
+
--mediumScreen:1000px;
|
|
51
|
+
--largeScreen: calc(var(var(--mediumScreen)) + 1px);
|
|
52
|
+
--shadowMedium:0 0.8rem 2rem 0 rgba(0, 0, 0, 0.1);
|
|
46
53
|
|
|
47
54
|
|
|
48
55
|
}
|
|
@@ -67,8 +74,13 @@ body {
|
|
|
67
74
|
margin: 0px;
|
|
68
75
|
box-sizing: border-box;
|
|
69
76
|
font-size: var(--bdfontSize);
|
|
70
|
-
line-height: var(--
|
|
77
|
+
line-height: var(--bd-line-height);
|
|
71
78
|
font-weight: var(--bd-font-weight);
|
|
79
|
+
background-color: var(--bd-theme);
|
|
80
|
+
color: var(--bd-color);
|
|
81
|
+
letter-spacing: normal;
|
|
82
|
+
word-spacing: -0.1em;
|
|
83
|
+
|
|
72
84
|
}
|
|
73
85
|
|
|
74
86
|
/* links and href */
|
|
@@ -97,26 +109,25 @@ input {
|
|
|
97
109
|
}
|
|
98
110
|
|
|
99
111
|
/* Background Color */
|
|
100
|
-
|
|
101
112
|
.gradient,
|
|
102
113
|
.hover-gradient:hover {
|
|
103
114
|
background: var(--gradient) !important;
|
|
104
|
-
color: white;
|
|
115
|
+
color: var(--white);
|
|
105
116
|
}
|
|
106
117
|
.primary,
|
|
107
118
|
.hover-primary:hover {
|
|
108
119
|
background-color: var(--primaryColor) !important;
|
|
109
|
-
color: white;
|
|
120
|
+
color: var(--white);
|
|
110
121
|
}
|
|
111
122
|
.dark,
|
|
112
123
|
.hover-dark:hover {
|
|
113
124
|
background-color: var(--dark) !important;
|
|
114
|
-
color: white;
|
|
125
|
+
color: var(--white);
|
|
115
126
|
}
|
|
116
127
|
.light-dark,
|
|
117
128
|
.hover-light-dark:hover {
|
|
118
129
|
background-color: var(--lightDark) !important;
|
|
119
|
-
color: white;
|
|
130
|
+
color: var(--white);
|
|
120
131
|
}
|
|
121
132
|
.white,
|
|
122
133
|
.hover-white:hover {
|
|
@@ -130,12 +141,12 @@ input {
|
|
|
130
141
|
.secondary,
|
|
131
142
|
.hover-secondary:hover {
|
|
132
143
|
background-color: var(--secondaryColor) !important;
|
|
133
|
-
color: white;
|
|
144
|
+
color: var(--white);
|
|
134
145
|
}
|
|
135
146
|
.success,
|
|
136
147
|
.hover-success:hover {
|
|
137
148
|
background-color: var(--success) !important;
|
|
138
|
-
color: white;
|
|
149
|
+
color: var(--white);
|
|
139
150
|
}
|
|
140
151
|
.light-success,
|
|
141
152
|
.hover-light-success:hover {
|
|
@@ -145,7 +156,7 @@ input {
|
|
|
145
156
|
.info,
|
|
146
157
|
.hover-info:hover {
|
|
147
158
|
background-color: var(--info) !important;
|
|
148
|
-
color: white;
|
|
159
|
+
color: var(--white);
|
|
149
160
|
}
|
|
150
161
|
.light-info,
|
|
151
162
|
.hover-light-info:hover {
|
|
@@ -155,7 +166,7 @@ input {
|
|
|
155
166
|
.warning,
|
|
156
167
|
.hover-warning:hover {
|
|
157
168
|
background-color: var(--warning) !important;
|
|
158
|
-
color: white;
|
|
169
|
+
color: var(--white);
|
|
159
170
|
}
|
|
160
171
|
.light-warning,
|
|
161
172
|
.hover-light-warning:hover {
|
|
@@ -166,7 +177,7 @@ input {
|
|
|
166
177
|
.error,
|
|
167
178
|
.hover-danger:hover {
|
|
168
179
|
background-color: var(--danger) !important;
|
|
169
|
-
color: white;
|
|
180
|
+
color: var(--white);
|
|
170
181
|
}
|
|
171
182
|
.light-danger,
|
|
172
183
|
.hover-lightdanger:hover {
|
|
@@ -1226,6 +1237,8 @@ h6,
|
|
|
1226
1237
|
padding-bottom: 100px;
|
|
1227
1238
|
}
|
|
1228
1239
|
|
|
1240
|
+
|
|
1241
|
+
|
|
1229
1242
|
/*Helpers*/
|
|
1230
1243
|
.no-padding {
|
|
1231
1244
|
padding: 0px !important;
|
|
@@ -1496,6 +1509,19 @@ h6,
|
|
|
1496
1509
|
.row-flex.space-around {
|
|
1497
1510
|
justify-content: space-around;
|
|
1498
1511
|
}
|
|
1512
|
+
|
|
1513
|
+
@media (max-width:600px) {
|
|
1514
|
+
.row-flex.responsiveSmall{
|
|
1515
|
+
display: block;
|
|
1516
|
+
}
|
|
1517
|
+
}
|
|
1518
|
+
@media only screen and (max-width:1000px) {
|
|
1519
|
+
.row-flex.responsiveMedium{
|
|
1520
|
+
display: block;
|
|
1521
|
+
}
|
|
1522
|
+
}
|
|
1523
|
+
|
|
1524
|
+
|
|
1499
1525
|
.fixedBottom {
|
|
1500
1526
|
position: fixed;
|
|
1501
1527
|
bottom: 0;
|
|
@@ -1580,10 +1606,11 @@ h6,
|
|
|
1580
1606
|
.col{
|
|
1581
1607
|
flex: 1 0 0%;
|
|
1582
1608
|
}
|
|
1583
|
-
.row.gap .col
|
|
1609
|
+
.row.gap .col{
|
|
1584
1610
|
padding: 0.5rem;
|
|
1585
1611
|
}
|
|
1586
|
-
|
|
1612
|
+
|
|
1613
|
+
@media(max-width: 600px) {
|
|
1587
1614
|
.col.sm-12 {
|
|
1588
1615
|
flex: 99.99999%;
|
|
1589
1616
|
-ms-flex: 0 0 99.99999%;
|
|
@@ -1684,7 +1711,7 @@ h6,
|
|
|
1684
1711
|
-ms-flex: 0 0 8.33333%;
|
|
1685
1712
|
}
|
|
1686
1713
|
}
|
|
1687
|
-
@media (min-width:
|
|
1714
|
+
@media (min-width: 1000px) {
|
|
1688
1715
|
.col.lg-12 {
|
|
1689
1716
|
flex: 99.99999%;
|
|
1690
1717
|
-ms-flex: 0 0 99.99999%;
|
|
@@ -1804,7 +1831,7 @@ h6,
|
|
|
1804
1831
|
|
|
1805
1832
|
/*cards*/
|
|
1806
1833
|
.card {
|
|
1807
|
-
box-shadow:
|
|
1834
|
+
box-shadow: var(--shadowMedium);
|
|
1808
1835
|
transition: 0.3s;
|
|
1809
1836
|
}
|
|
1810
1837
|
.card.lg {
|
|
@@ -2028,9 +2055,26 @@ h6,
|
|
|
2028
2055
|
.round {
|
|
2029
2056
|
border-radius: 50%;
|
|
2030
2057
|
}
|
|
2031
|
-
.round-edge {
|
|
2032
|
-
border-radius:
|
|
2058
|
+
.round-edge, .roundEdge {
|
|
2059
|
+
border-radius: var(--bordeRadius);
|
|
2060
|
+
}
|
|
2061
|
+
.leftEdge{
|
|
2062
|
+
border-top-left-radius: var(--bordeRadius);
|
|
2063
|
+
border-bottom-left-radius: var(--bordeRadius);
|
|
2064
|
+
}
|
|
2065
|
+
.rightEdge{
|
|
2066
|
+
border-top-right-radius: var(--bordeRadius);
|
|
2067
|
+
border-bottom-right-radius: var(--bordeRadius);
|
|
2033
2068
|
}
|
|
2069
|
+
.topEdge{
|
|
2070
|
+
border-top-right-radius: var(--bordeRadius);
|
|
2071
|
+
border-top-left-radius: var(--bordeRadius);
|
|
2072
|
+
}
|
|
2073
|
+
.bottomEdge{
|
|
2074
|
+
border-bottom-right-radius: var(--bordeRadius);
|
|
2075
|
+
border-bottom-left-radius: var(--bordeRadius);
|
|
2076
|
+
}
|
|
2077
|
+
|
|
2034
2078
|
.round-top-left-edge {
|
|
2035
2079
|
border-top-left-radius: 10px;
|
|
2036
2080
|
}
|
|
@@ -2613,7 +2657,7 @@ input , select{height: var(--inputHeight);}
|
|
|
2613
2657
|
height: 1000px;
|
|
2614
2658
|
}
|
|
2615
2659
|
}
|
|
2616
|
-
@media (min-width:
|
|
2660
|
+
@media (min-width: 101px) {
|
|
2617
2661
|
.hide-large {
|
|
2618
2662
|
display: none;
|
|
2619
2663
|
}
|
|
@@ -2935,7 +2979,7 @@ th {
|
|
|
2935
2979
|
border-bottom: 1.5px solid #ddd;
|
|
2936
2980
|
}
|
|
2937
2981
|
.modal-content {
|
|
2938
|
-
background-color: white;
|
|
2982
|
+
background-color: var(--white);
|
|
2939
2983
|
max-width: 700px;
|
|
2940
2984
|
width: 100%;
|
|
2941
2985
|
border-radius: 10px;
|
|
@@ -3096,7 +3140,7 @@ Button,
|
|
|
3096
3140
|
display: none;
|
|
3097
3141
|
}
|
|
3098
3142
|
}
|
|
3099
|
-
@media (min-width:
|
|
3143
|
+
@media (min-width: 101px) {
|
|
3100
3144
|
.show-large {
|
|
3101
3145
|
display: block;
|
|
3102
3146
|
}
|
|
@@ -3288,7 +3332,7 @@ Button,
|
|
|
3288
3332
|
background-color: var(--dark);
|
|
3289
3333
|
border-radius: 3px;
|
|
3290
3334
|
max-width: 400px;
|
|
3291
|
-
color: white;
|
|
3335
|
+
color: var(--white);
|
|
3292
3336
|
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5);
|
|
3293
3337
|
z-index: var(--snackBarZindex);
|
|
3294
3338
|
display: flex;
|