Skip to content

Commit d57111f

Browse files
phatdev12phatdev12
committed
patery
1 parent 7eca327 commit d57111f

File tree

62 files changed

+7196
-173
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+7196
-173
lines changed

‎.history/example/index_20220117124516.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Example</title>
8+
<link rel="stylesheet" href="../patery-ui.css">
9+
<style>
10+
body{
11+
background-color: var(--gray);
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<PateryPadding class="test" padV="40px" padH="40px">
17+
<button padV="10px" padH="15px">Example</button>
18+
</PateryPadding>
19+
<script src="../patery.js"></script>
20+
</body>
21+
</html>

‎.history/example/index_20220117124715.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Example</title>
8+
<link rel="stylesheet" href="../patery-ui.css">
9+
<style>
10+
body{
11+
background-color: var(--gray);
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<PateryPadding class="test" padV="40px" padH="40px">
17+
<button padV="10px" padH="20px">Example</button>
18+
</PateryPadding>
19+
<script src="../patery.js"></script>
20+
</body>
21+
</html>

‎.history/example/index_20220117124723.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Example</title>
8+
<link rel="stylesheet" href="../patery-ui.css">
9+
<style>
10+
body{
11+
background-color: var(--gray);
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<PateryPadding class="test" padV="40px" padH="40px">
17+
<button padV="15px" padH="20px">Example</button>
18+
</PateryPadding>
19+
<script src="../patery.js"></script>
20+
</body>
21+
</html>

‎.history/example/index_20220117124733.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Example</title>
8+
<link rel="stylesheet" href="../patery-ui.css">
9+
<style>
10+
body{
11+
background-color: var(--gray);
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<PateryPadding class="test" padV="40px" padH="40px">
17+
<button padV="10px" padH="18px">Example</button>
18+
</PateryPadding>
19+
<script src="../patery.js"></script>
20+
</body>
21+
</html>

‎.history/example/index_20220117130108.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Example</title>
8+
<link rel="stylesheet" href="../patery-ui.css">
9+
<style>
10+
body{
11+
background-color: var(--gray);
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<PateryPadding class="test" padV="40px" padH="40px">
17+
<PateryButton>Click me</PateryButton>
18+
</PateryPadding>
19+
<script src="../patery.js"></script>
20+
</body>
21+
</html>

‎.history/example/index_20220117132440.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Example</title>
8+
<style>
9+
body{
10+
background-color: var(--gray);
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<PateryPadding class="test" padV="40px" padH="40px">
16+
<PateryButton>Click me</PateryButton>
17+
</PateryPadding>
18+
<script src="../patery.js"></script>
19+
</body>
20+
</html>

‎.history/patery-ui_20220117123215.css

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/*
2+
A modern website theme framework and simplified elements. Patery UI was born to simplify and also bring a modern touch, making the website interface more professional. (Easy access for newbies to learn web programming)
3+
*/
4+
:root{
5+
--gray: #1a1a1a;
6+
--gray-light: #2f2f2f;
7+
--gray-lighter: #4a4a4a;
8+
--gray-lightest: #6a6a6a;
9+
--gray-moment: #303030;
10+
--red: #ff0a33;
11+
--red-moment: #ff3758;
12+
--blue: #00a0ff;
13+
--blue-moment: #0059ff;
14+
--green: #00ff4c;
15+
--green-moment: #00ff55;
16+
--yellow: #fdef2d;
17+
--yellow-moment: #fad313;
18+
--orange: #ff9c00;
19+
--orange-moment: #ff9c00;
20+
--purple: #ff00ff;
21+
--purple-moment: #ff00ff;
22+
--pink: #ff00ff;
23+
--pink-moment: #ff00ff;
24+
--white: #ffffff;
25+
--black: #000000;
26+
--transparent: transparent;
27+
--transparent-moment: rgba(0,0,0,0.5);
28+
--transparent-light: rgba(255,255,255,0.5);
29+
--transparent-dark: rgba(0,0,0,0.5);
30+
--transparent-lightest: rgba(255,255,255,0.1);
31+
--transparent-darkest: rgba(0,0,0,0.1);
32+
--transparent-light-moment: rgba(255,255,255,0.5);
33+
--transparent-dark-moment: rgba(0,0,0,0.5);
34+
--transparent-light-lightest: rgba(255,255,255,0.1);
35+
--transparent-dark-darkest: rgba(0,0,0,0.1);
36+
--transparent-light-light: rgba(255,255,255,0.2);
37+
--transparent-dark-dark: rgba(0,0,0,0.2);
38+
}
39+
button{
40+
position: relative;
41+
background-color: var(--gray-moment);
42+
border-style: none;
43+
border-radius: 4em;
44+
font-size: 16px;
45+
color: white;
46+
padding: 0.8em 1.8em;
47+
cursor:pointer;
48+
user-select:none;
49+
text-align: center;
50+
text-decoration: none;
51+
cursor: pointer;
52+
transition-duration: 0.4s;
53+
-webkit-transition-duration: 0.4s; /* Safari */
54+
}
55+
button:hover {
56+
transition-duration: 0.1s;
57+
background-color: var(--gray-light);
58+
}
59+
60+
button:after {
61+
content: "";
62+
display: block;
63+
position: absolute;
64+
border-radius: 4em;
65+
left: 0;
66+
top:0;
67+
width: 100%;
68+
height: 100%;
69+
opacity: 0;
70+
transition: all 0.5s;
71+
box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.24);
72+
}
73+
74+
button:active:after {
75+
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.301);
76+
position: absolute;
77+
border-radius: 4em;
78+
left: 0;
79+
top:0;
80+
opacity: 1;
81+
transition: 0s;
82+
}
83+
84+
button:active {
85+
top: 1px;
86+
}

‎.history/patery-ui_20220117123240.css

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/*
2+
A modern website theme framework and simplified elements. Patery UI was born to simplify and also bring a modern touch, making the website interface more professional. (Easy access for newbies to learn web programming)
3+
*/
4+
:root{
5+
--gray: #1a1a1a;
6+
--gray-light: #2f2f2f;
7+
--gray-lighter: #4a4a4a;
8+
--gray-lightest: #6a6a6a;
9+
--gray-moment: #303030;
10+
--red: #ff0a33;
11+
--red-moment: #ff3758;
12+
--blue: #00a0ff;
13+
--blue-moment: #0059ff;
14+
--green: #00ff4c;
15+
--green-moment: #00ff55;
16+
--yellow: #fdef2d;
17+
--yellow-moment: #fad313;
18+
--orange: #ff9c00;
19+
--orange-moment: #ff9c00;
20+
--purple: #ff00ff;
21+
--purple-moment: #ff00ff;
22+
--pink: #ff00ff;
23+
--pink-moment: #ff00ff;
24+
--white: #ffffff;
25+
--black: #000000;
26+
--transparent: transparent;
27+
--transparent-moment: rgba(0,0,0,0.5);
28+
--transparent-light: rgba(255,255,255,0.5);
29+
--transparent-dark: rgba(0,0,0,0.5);
30+
--transparent-lightest: rgba(255,255,255,0.1);
31+
--transparent-darkest: rgba(0,0,0,0.1);
32+
--transparent-light-moment: rgba(255,255,255,0.5);
33+
--transparent-dark-moment: rgba(0,0,0,0.5);
34+
--transparent-light-lightest: rgba(255,255,255,0.1);
35+
--transparent-dark-darkest: rgba(0,0,0,0.1);
36+
--transparent-light-light: rgba(255,255,255,0.2);
37+
--transparent-dark-dark: rgba(0,0,0,0.2);
38+
}
39+
button{
40+
position: relative;
41+
background-color: var(--gray-moment);
42+
border-style: none;
43+
border-radius: 4em;
44+
font-size: 16px;
45+
color: white;
46+
padding: 0.8em 1.8em;
47+
cursor:pointer;
48+
user-select:none;
49+
text-align: center;
50+
text-decoration: none;
51+
cursor: pointer;
52+
transition-duration: 0.4s;
53+
-webkit-transition-duration: 0.4s; /* Safari */
54+
}
55+
button:hover {
56+
transition-duration: 0.1s;
57+
background-color: var(--gray-lighter);
58+
}
59+
60+
button:after {
61+
content: "";
62+
display: block;
63+
position: absolute;
64+
border-radius: 4em;
65+
left: 0;
66+
top:0;
67+
width: 100%;
68+
height: 100%;
69+
opacity: 0;
70+
transition: all 0.5s;
71+
box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.24);
72+
}
73+
74+
button:active:after {
75+
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.301);
76+
position: absolute;
77+
border-radius: 4em;
78+
left: 0;
79+
top:0;
80+
opacity: 1;
81+
transition: 0s;
82+
}
83+
84+
button:active {
85+
top: 1px;
86+
}

0 commit comments

Comments
 (0)