patery

Folody-Team · Jan 17, 2022 · d57111f · d57111f
1 parent 7eca327
commit d57111f
Show file tree

Hide file tree

Showing 62 changed files with 7,196 additions and 173 deletions.
diff --git a/.history/example/index_20220117124516.html b/.history/example/index_20220117124516.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Example</title>
+    <link rel="stylesheet" href="../patery-ui.css">
+    <style>
+        body{
+            background-color: var(--gray);
+        }
+    </style>
+</head>
+<body>
+    <PateryPadding class="test" padV="40px" padH="40px">
+        <button padV="10px" padH="15px">Example</button>
+    </PateryPadding>
+   <script src="../patery.js"></script>
+</body>
+</html>
diff --git a/.history/example/index_20220117124715.html b/.history/example/index_20220117124715.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Example</title>
+    <link rel="stylesheet" href="../patery-ui.css">
+    <style>
+        body{
+            background-color: var(--gray);
+        }
+    </style>
+</head>
+<body>
+    <PateryPadding class="test" padV="40px" padH="40px">
+        <button padV="10px" padH="20px">Example</button>
+    </PateryPadding>
+   <script src="../patery.js"></script>
+</body>
+</html>
diff --git a/.history/example/index_20220117124723.html b/.history/example/index_20220117124723.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Example</title>
+    <link rel="stylesheet" href="../patery-ui.css">
+    <style>
+        body{
+            background-color: var(--gray);
+        }
+    </style>
+</head>
+<body>
+    <PateryPadding class="test" padV="40px" padH="40px">
+        <button padV="15px" padH="20px">Example</button>
+    </PateryPadding>
+   <script src="../patery.js"></script>
+</body>
+</html>
diff --git a/.history/example/index_20220117124733.html b/.history/example/index_20220117124733.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Example</title>
+    <link rel="stylesheet" href="../patery-ui.css">
+    <style>
+        body{
+            background-color: var(--gray);
+        }
+    </style>
+</head>
+<body>
+    <PateryPadding class="test" padV="40px" padH="40px">
+        <button padV="10px" padH="18px">Example</button>
+    </PateryPadding>
+   <script src="../patery.js"></script>
+</body>
+</html>
diff --git a/.history/example/index_20220117130108.html b/.history/example/index_20220117130108.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Example</title>
+    <link rel="stylesheet" href="../patery-ui.css">
+    <style>
+        body{
+            background-color: var(--gray);
+        }
+    </style>
+</head>
+<body>
+    <PateryPadding class="test" padV="40px" padH="40px">
+        <PateryButton>Click me</PateryButton>
+    </PateryPadding>
+   <script src="../patery.js"></script>
+</body>
+</html>
diff --git a/.history/example/index_20220117132440.html b/.history/example/index_20220117132440.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Example</title>
+    <style>
+        body{
+            background-color: var(--gray);
+        }
+    </style>
+</head>
+<body>
+    <PateryPadding class="test" padV="40px" padH="40px">
+        <PateryButton>Click me</PateryButton>
+    </PateryPadding>
+   <script src="../patery.js"></script>
+</body>
+</html>
diff --git a/.history/patery-ui_20220117123215.css b/.history/patery-ui_20220117123215.css
@@ -0,0 +1,86 @@
+/*
+    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)
+*/
+:root{
+    --gray: #1a1a1a;
+    --gray-light: #2f2f2f;
+    --gray-lighter: #4a4a4a;
+    --gray-lightest: #6a6a6a;
+    --gray-moment: #303030;
+    --red: #ff0a33;
+    --red-moment: #ff3758;
+    --blue: #00a0ff;
+    --blue-moment: #0059ff;
+    --green: #00ff4c;
+    --green-moment: #00ff55;
+    --yellow: #fdef2d;
+    --yellow-moment: #fad313;
+    --orange: #ff9c00;
+    --orange-moment: #ff9c00;
+    --purple: #ff00ff;
+    --purple-moment: #ff00ff;
+    --pink: #ff00ff;
+    --pink-moment: #ff00ff;
+    --white: #ffffff;
+    --black: #000000;
+    --transparent: transparent;
+    --transparent-moment: rgba(0,0,0,0.5);
+    --transparent-light: rgba(255,255,255,0.5);
+    --transparent-dark: rgba(0,0,0,0.5);
+    --transparent-lightest: rgba(255,255,255,0.1);
+    --transparent-darkest: rgba(0,0,0,0.1);
+    --transparent-light-moment: rgba(255,255,255,0.5);
+    --transparent-dark-moment: rgba(0,0,0,0.5);
+    --transparent-light-lightest: rgba(255,255,255,0.1);
+    --transparent-dark-darkest: rgba(0,0,0,0.1);
+    --transparent-light-light: rgba(255,255,255,0.2);
+    --transparent-dark-dark: rgba(0,0,0,0.2);
+}
+button{
+    position: relative;
+    background-color: var(--gray-moment);
+    border-style: none;
+    border-radius: 4em;
+    font-size: 16px;
+    color: white;
+    padding: 0.8em 1.8em;
+    cursor:pointer;
+    user-select:none;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s; /* Safari */
+}
+button:hover {
+    transition-duration: 0.1s;
+    background-color: var(--gray-light);
+}
+
+button:after {
+    content: "";
+    display: block;
+    position: absolute;
+    border-radius: 4em;
+    left: 0;
+    top:0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: all 0.5s;
+    box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.24);
+}
+
+button:active:after {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.301);
+    position: absolute;
+    border-radius: 4em;
+    left: 0;
+    top:0;
+    opacity: 1;
+    transition: 0s;
+}
+
+button:active {
+    top: 1px;
+}
diff --git a/.history/patery-ui_20220117123240.css b/.history/patery-ui_20220117123240.css
@@ -0,0 +1,86 @@
+/*
+    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)
+*/
+:root{
+    --gray: #1a1a1a;
+    --gray-light: #2f2f2f;
+    --gray-lighter: #4a4a4a;
+    --gray-lightest: #6a6a6a;
+    --gray-moment: #303030;
+    --red: #ff0a33;
+    --red-moment: #ff3758;
+    --blue: #00a0ff;
+    --blue-moment: #0059ff;
+    --green: #00ff4c;
+    --green-moment: #00ff55;
+    --yellow: #fdef2d;
+    --yellow-moment: #fad313;
+    --orange: #ff9c00;
+    --orange-moment: #ff9c00;
+    --purple: #ff00ff;
+    --purple-moment: #ff00ff;
+    --pink: #ff00ff;
+    --pink-moment: #ff00ff;
+    --white: #ffffff;
+    --black: #000000;
+    --transparent: transparent;
+    --transparent-moment: rgba(0,0,0,0.5);
+    --transparent-light: rgba(255,255,255,0.5);
+    --transparent-dark: rgba(0,0,0,0.5);
+    --transparent-lightest: rgba(255,255,255,0.1);
+    --transparent-darkest: rgba(0,0,0,0.1);
+    --transparent-light-moment: rgba(255,255,255,0.5);
+    --transparent-dark-moment: rgba(0,0,0,0.5);
+    --transparent-light-lightest: rgba(255,255,255,0.1);
+    --transparent-dark-darkest: rgba(0,0,0,0.1);
+    --transparent-light-light: rgba(255,255,255,0.2);
+    --transparent-dark-dark: rgba(0,0,0,0.2);
+}
+button{
+    position: relative;
+    background-color: var(--gray-moment);
+    border-style: none;
+    border-radius: 4em;
+    font-size: 16px;
+    color: white;
+    padding: 0.8em 1.8em;
+    cursor:pointer;
+    user-select:none;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s; /* Safari */
+}
+button:hover {
+    transition-duration: 0.1s;
+    background-color: var(--gray-lighter);
+}
+
+button:after {
+    content: "";
+    display: block;
+    position: absolute;
+    border-radius: 4em;
+    left: 0;
+    top:0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: all 0.5s;
+    box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.24);
+}
+
+button:active:after {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.301);
+    position: absolute;
+    border-radius: 4em;
+    left: 0;
+    top:0;
+    opacity: 1;
+    transition: 0s;
+}
+
+button:active {
+    top: 1px;
+}