Skip to content

Commit ebe39ff

Browse files
BackendExpertJehanKandy
BackendExpert
and
JehanKandy
committed
Update
Co-Authored-By: JehanKandy <jehankandy@gmail.com>
1 parent cb6e543 commit ebe39ff

File tree

19 files changed

+699
-5
lines changed

19 files changed

+699
-5
lines changed

‎jkcss/v101-alpha1/jkcss.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@
1919
--jk-site-font: "Roboto", sans-serif;
2020
}
2121

22-
.jk-btn, .no-border, .jk-info:hover, .jk-info, .jk-yellow:hover, .jk-yellow, .jk-red:hover, .jk-red, .jk-green:hover, .jk-green, .jk-gray:hover, .jk-gray, .jk-blue:hover, .jk-blue {
22+
.jk-btn, .jk-blue {
2323
padding: 15px 25px;
2424
transition: 0.4s;
2525
border-radius: 5px;
2626
}
2727

28-
.jk-btn:hover, .no-border:hover, .jk-info:hover, .jk-yellow:hover, .jk-red:hover, .jk-green:hover, .jk-gray:hover, .jk-blue:hover {
28+
.jk-btn:hover, .jk-blue:hover {
2929
cursor: pointer;
3030
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
3131
}
@@ -49,13 +49,13 @@
4949
--jk-site-font: "Roboto", sans-serif;
5050
}
5151

52-
.jk-btn, .no-border, .jk-info:hover, .jk-info, .jk-yellow:hover, .jk-yellow, .jk-red:hover, .jk-red, .jk-green:hover, .jk-green, .jk-gray:hover, .jk-gray, .jk-blue:hover, .jk-blue {
52+
.jk-btn, .jk-blue {
5353
padding: 15px 25px;
5454
transition: 0.4s;
5555
border-radius: 5px;
5656
}
5757

58-
.jk-btn:hover, .no-border:hover, .jk-info:hover, .jk-yellow:hover, .jk-red:hover, .jk-green:hover, .jk-gray:hover, .jk-blue:hover {
58+
.jk-btn:hover, .jk-blue:hover {
5959
cursor: pointer;
6060
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
6161
}

‎jkcss/v101-alpha1/jkcss.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jkcss/v101-alpha2/buttons/button.css‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Kanit&family=Roboto&display=swap");
2+
:root {
3+
--jk-blue: #1672fd;
4+
--jk-blue-hover: #025ce4;
5+
--text-color: white;
6+
--jk-gray: grey;
7+
--jk-gray-hover: rgb(114, 114, 114);
8+
--jk-green: #1b8b57;
9+
--jk-green-hover: #147045;
10+
--jk-red: #ca2d3dee;
11+
--jk-red-hover: #b32432ee;
12+
--jk-yellow: #ff9900;
13+
--jk-yellow-hover: #ff9900e3;
14+
--jk-lightblue: #54b4d3;
15+
--jk-lightblue-hover: #54b3d3ea;
16+
--jk-purple: #A020F0;
17+
--title-font-family: "Kanit", sans-serif;
18+
--jk-site-font: "Roboto", sans-serif;
19+
}
20+
21+
.jk-btn, .jk-blue {
22+
padding: 15px 25px;
23+
transition: 0.4s;
24+
border-radius: 5px;
25+
}
26+
27+
.jk-btn:hover, .jk-blue:hover {
28+
cursor: pointer;
29+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
30+
}
31+
32+
.no-border, .jk-info:hover, .jk-info, .jk-yellow:hover, .jk-yellow, .jk-red:hover, .jk-red, .jk-green:hover, .jk-green, .jk-gray:hover, .jk-gray, .jk-blue:hover, .jk-blue {
33+
border: none;
34+
color: var(--text-color);
35+
}
36+
37+
.jk-blue {
38+
background-color: var(--jk-blue);
39+
}
40+
41+
.jk-blue:hover {
42+
background-color: var(--jk-blue-hover);
43+
}
44+
45+
.jk-gray {
46+
background-color: var(--jk-gray);
47+
}
48+
49+
.jk-gray:hover {
50+
background-color: var(--jk-gray-hover);
51+
}
52+
53+
.jk-green {
54+
background-color: var(--jk-green);
55+
}
56+
57+
.jk-green:hover {
58+
background-color: var(--jk-green-hover);
59+
}
60+
61+
.jk-red {
62+
background-color: var(--jk-red);
63+
}
64+
65+
.jk-red:hover {
66+
background-color: var(--jk-red-hover);
67+
}
68+
69+
.jk-yellow {
70+
background-color: var(--jk-yellow);
71+
}
72+
73+
.jk-yellow:hover {
74+
background-color: var(--jk-yellow-hover);
75+
}
76+
77+
.jk-info {
78+
background-color: var(--jk-lightblue);
79+
}
80+
81+
.jk-info:hover {
82+
background-color: var(--jk-lightblue-hover);
83+
}
84+
85+
.jk-blue-outline {
86+
background: none;
87+
border: 1px solid var(--jk-blue);
88+
color: var(--jk-blue);
89+
}
90+
91+
.jk-blue-outline:hover {
92+
background: var(--jk-blue);
93+
color: var(--text-color);
94+
}
95+
96+
.jk-gray-outline {
97+
background: none;
98+
border: 1px solid var(--jk-gray);
99+
color: var(--jk-gray);
100+
}
101+
102+
.jk-gray-outline:hover {
103+
background: var(--jk-gray);
104+
color: var(--text-color);
105+
}
106+
107+
.jk-green-outline {
108+
background: none;
109+
border: 1px solid var(--jk-green);
110+
color: var(--jk-green);
111+
}
112+
113+
.jk-green-outline:hover {
114+
background: var(--jk-green);
115+
color: var(--text-color);
116+
}
117+
118+
.jk-red-outline {
119+
background: none;
120+
border: 1px solid var(--jk-red);
121+
color: var(--jk-red);
122+
}
123+
124+
.jk-red-outline:hover {
125+
background: var(--jk-red);
126+
color: var(--text-color);
127+
}
128+
129+
.jk-yellow-outline {
130+
background: none;
131+
border: 1px solid var(--jk-yellow);
132+
color: var(--jk-yellow);
133+
}
134+
135+
.jk-yellow-outline:hover {
136+
background: var(--jk-yellow);
137+
color: var(--text-color);
138+
}
139+
140+
.jk-info-outline {
141+
background: none;
142+
border: 1px solid var(--jk-lightblue);
143+
color: var(--jk-lightblue);
144+
}
145+
146+
.jk-info-outline:hover {
147+
background: var(--jk-lightblue);
148+
color: var(--text-color);
149+
}

‎jkcss/v101-alpha2/buttons/button.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jkcss/v101-alpha2/buttons/button.scss‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
@import "../root";
2+
3+
.no-border{
4+
border: none;
5+
color: var(--text-color);
6+
7+
}
8+
.jk-blue{
9+
background-color: var(--jk-blue);
10+
@extend .no-border;
11+
@extend .jk-btn;
12+
}
13+
.jk-blue:hover{
14+
background-color: var(--jk-blue-hover);
15+
@extend .no-border;
16+
}
17+
.jk-gray{
18+
background-color: var(--jk-gray);
19+
@extend .no-border;
20+
}
21+
.jk-gray:hover{
22+
background-color: var(--jk-gray-hover);
23+
@extend .no-border;
24+
}
25+
.jk-green{
26+
background-color: var(--jk-green);
27+
@extend .no-border;
28+
}
29+
.jk-green:hover{
30+
background-color: var(--jk-green-hover);
31+
@extend .no-border;
32+
}
33+
.jk-red{
34+
background-color: var(--jk-red);
35+
@extend .no-border;
36+
}
37+
.jk-red:hover{
38+
background-color: var(--jk-red-hover);
39+
@extend .no-border;
40+
}
41+
.jk-yellow{
42+
background-color: var(--jk-yellow);
43+
@extend .no-border;
44+
}
45+
.jk-yellow:hover{
46+
background-color: var(--jk-yellow-hover);
47+
@extend .no-border;
48+
}
49+
.jk-info{
50+
background-color: var(--jk-lightblue);
51+
@extend .no-border;
52+
}
53+
.jk-info:hover{
54+
background-color: var(--jk-lightblue-hover);
55+
@extend .no-border;
56+
}
57+
.jk-blue-outline{
58+
background: none;
59+
border: 1px solid var(--jk-blue);
60+
color: var(--jk-blue);
61+
}
62+
.jk-blue-outline:hover{
63+
background: var(--jk-blue);
64+
color: var(--text-color);
65+
}
66+
67+
.jk-gray-outline{
68+
background: none;
69+
border: 1px solid var(--jk-gray);
70+
color: var(--jk-gray);
71+
}
72+
.jk-gray-outline:hover{
73+
background: var(--jk-gray);
74+
color: var(--text-color);
75+
}
76+
77+
.jk-green-outline{
78+
background: none;
79+
border: 1px solid var(--jk-green);
80+
color: var(--jk-green);
81+
}
82+
.jk-green-outline:hover{
83+
background: var(--jk-green);
84+
color: var(--text-color);
85+
}
86+
87+
.jk-red-outline{
88+
background: none;
89+
border: 1px solid var(--jk-red);
90+
color: var(--jk-red);
91+
}
92+
.jk-red-outline:hover{
93+
background: var(--jk-red);
94+
color: var(--text-color);
95+
}
96+
97+
.jk-yellow-outline{
98+
background: none;
99+
border: 1px solid var(--jk-yellow);
100+
color: var(--jk-yellow);
101+
}
102+
.jk-yellow-outline:hover{
103+
background: var(--jk-yellow);
104+
color: var(--text-color);
105+
}
106+
107+
.jk-info-outline{
108+
background: none;
109+
border: 1px solid var(--jk-lightblue);
110+
color: var(--jk-lightblue);
111+
}
112+
.jk-info-outline:hover{
113+
background: var(--jk-lightblue);
114+
color: var(--text-color);
115+
}

0 commit comments

Comments
 (0)